*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: var(--raio-sm); }
.hero :focus-visible, .acesso :focus-visible, .publico--azul :focus-visible { outline-color: var(--sol); }

.pular {
  position: absolute; left: var(--esp-4); top: -80px; z-index: 10;
  background: var(--superficie); color: var(--texto); padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-md);
}
.pular:focus { top: var(--esp-4); }

.bloco { width: min(1200px, 100%); margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 var(--esp-6); border-radius: var(--raio-pilula);
  border: 1.5px solid transparent; font: 600 17px/1 var(--font-sans); letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-rapida) var(--curva-saida), color var(--dur-rapida) var(--curva-saida), transform var(--dur-rapida) var(--curva-saida);
}
.botao:active { transform: scale(0.98); }
.botao--branco { background: var(--superficie); color: var(--azul-siavo); }
.botao--branco:hover { background: var(--sol); color: var(--noite); }
.botao--azul { background: var(--azul-siavo); color: var(--texto-inverso); }
.botao--azul:hover { background: var(--azul-400); }
.botao--contorno { min-height: 44px; padding: 0 var(--esp-5); font-size: 15px; color: var(--texto-inverso); border-color: var(--texto-inverso); }
.botao--contorno:hover { background: var(--superficie); color: var(--azul-siavo); }

/* Hero */
.hero {
  position: relative; overflow: hidden; min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--azul-siavo); color: var(--texto-inverso);
  padding: var(--esp-5) clamp(20px, 5vw, 64px) var(--esp-8);
}
.topo { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); }
.topo__logo { width: clamp(130px, 14vw, 170px); height: auto; }
.hero__texto { position: relative; z-index: 2; margin-top: auto; padding-top: var(--esp-8); }
.selo { display: inline-flex; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-5); font: 500 13px/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.selo__ponto { width: 12px; height: 10px; border-radius: 50%; background: var(--sol); }
.titulo { font-size: clamp(56px, 8.2vw, 136px); line-height: 0.92; font-weight: 800; letter-spacing: -0.045em; }
.titulo__leve { display: block; font-weight: 300; letter-spacing: -0.04em; }
.hero__sub { max-width: 30ch; margin: var(--esp-5) 0 var(--esp-6); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.4; }
.hero__rosto {
  position: absolute; z-index: 1; right: -15vw; top: 50%;
  width: min(60vw, 100vh); max-width: none;
  transform: translateY(-46%);
}

/* Títulos de seção */
.rotulo { font: 500 13px/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: var(--esp-4); }
.titulo-2 { font-size: clamp(40px, 6vw, 80px); line-height: 0.98; font-weight: 800; letter-spacing: -0.04em; }
.titulo-2__leve { display: block; font-weight: 300; letter-spacing: -0.035em; }
.titulo-2--claro { color: var(--texto-inverso); }
.titulo-3 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.04; font-weight: 700; letter-spacing: -0.03em; }
.titulo-3__leve { display: block; font-weight: 300; }
.texto-suave { max-width: 46ch; margin-top: var(--esp-5); font-size: 18px; color: var(--texto-suave); }

/* Jornada */
.jornada { padding: clamp(72px, 10vw, 128px) 0; }
.jornada__intro { margin-bottom: var(--esp-8); }
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.demo__personagem { display: grid; place-items: center; aspect-ratio: 1030 / 900; }
.demo__personagem > * { grid-area: 1 / 1; width: 100%; }
.pedido { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-lg); padding: clamp(20px, 3vw, 32px); box-shadow: var(--sombra-1); }
.pedido__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--esp-3); flex-wrap: wrap; margin-bottom: var(--esp-5); }
.pedido__rotulo { font: 500 12px/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: var(--esp-2); }
.pedido__numero { font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.chip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 var(--esp-3); border-radius: var(--raio-pilula); background: var(--azul-100); color: var(--azul-700); font: 600 13px/1 var(--font-sans); white-space: nowrap; transition: background-color var(--dur-base) var(--curva-saida), color var(--dur-base) var(--curva-saida); }
.chip--liberado { background: var(--sucesso-fundo); color: var(--sucesso); }

.passo {
  position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--esp-3); width: 100%;
  padding: 0 0 var(--esp-5); border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.passos li:last-child .passo { padding-bottom: 0; }
.passos li:not(:last-child) .passo::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--borda); transition: background-color var(--dur-base) var(--curva-saida); }
.passo__ponto { grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--borda-campo); background: var(--superficie); transition: background-color var(--dur-base) var(--curva-saida), border-color var(--dur-base) var(--curva-saida), box-shadow var(--dur-base) var(--curva-saida); }
.passo__titulo { padding-top: 3px; font-size: 16px; line-height: 1.3; font-weight: 600; }
.passo__meta { font-size: 14px; line-height: 1.45; color: var(--texto-suave); }
.passo:hover .passo__titulo { color: var(--azul-siavo); }
.passo.is-feito .passo__ponto { background: var(--azul-siavo); border-color: var(--azul-siavo); }
.passos li:has(.passo.is-feito) .passo::before { background: var(--azul-siavo); }
.passo.is-agora .passo__ponto { background: var(--azul-siavo); border-color: var(--azul-siavo); box-shadow: 0 0 0 5px var(--azul-100); }

/* 14 dias */
.catorze { position: relative; overflow: hidden; background: var(--sol); color: var(--noite); padding: clamp(64px, 9vw, 120px) clamp(20px, 5vw, 64px); }
.catorze__texto { position: relative; z-index: 2; width: min(1072px, 100%); margin: 0 auto; }
.catorze__titulo { display: grid; font-weight: 300; }
.catorze__numero { font-size: clamp(150px, 26vw, 340px); line-height: 0.82; font-weight: 800; letter-spacing: -0.06em; }
.catorze__linha { font-size: clamp(34px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -0.035em; }
.catorze__linha--forte { font-weight: 800; letter-spacing: -0.04em; }
.catorze__nota { max-width: 40ch; margin-top: var(--esp-5); font-size: 18px; font-weight: 500; }
.catorze__rosto { position: absolute; z-index: 1; right: -6vw; bottom: -12vw; width: min(58vw, 760px); max-width: none; }

/* Públicos */
.publicos { padding: clamp(72px, 10vw, 128px) 0; }
.publicos__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-5); }
.publico { background: var(--superficie-2); border-radius: var(--raio-xl); padding: clamp(28px, 4vw, 48px); }
.publico--azul { background: var(--azul-siavo); color: var(--texto-inverso); }
.publico--azul .rotulo { color: var(--azul-200); }
.lista { display: grid; gap: var(--esp-3); margin-top: var(--esp-6); font-size: 17px; }
.lista li { position: relative; padding-left: 26px; }
.lista li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 14px; height: 12px; border-radius: 50%; background: var(--azul-siavo); }
.publico--azul .lista li::before { background: var(--sol); }

/* Acesso */
.acesso { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: var(--esp-6); background: var(--noite); color: var(--texto-inverso); padding: clamp(64px, 9vw, 120px) max(clamp(20px, 5vw, 64px), calc((100vw - 1072px) / 2)); }
.acesso__sub { max-width: 34ch; margin: var(--esp-5) 0 var(--esp-6); font-size: 18px; color: #C9C5D8; }
.acesso__personagem { display: grid; place-items: center; aspect-ratio: 1030 / 900; max-width: 460px; width: 100%; justify-self: end; }
.acesso__personagem > * { grid-area: 1 / 1; width: 100%; }
.acesso.tem-erro .acesso__personagem { visibility: hidden; }

/* Formulário de contato */
.contato { display: grid; gap: var(--esp-4); max-width: 540px; }
.contato__linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4); }
.contato label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: #C9C5D8; }
.contato input:not(.contato__isca), .contato textarea {
  width: 100%; min-width: 0; min-height: 52px; padding: 13px var(--esp-4);
  border: 1.5px solid var(--borda-campo); border-radius: var(--raio-md);
  background: #17142A; color: var(--texto-inverso); font: 400 16px/1.4 var(--font-sans);
  transition: border-color var(--dur-rapida) var(--curva-saida);
}
.contato textarea { min-height: 124px; resize: vertical; }
.contato input:not(.contato__isca):hover, .contato textarea:hover { border-color: var(--texto-inverso); }
.contato__isca { position: absolute; left: -9999px; }
.contato__envio { display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-3) var(--esp-4); margin-top: var(--esp-2); }
.contato__nota { font-size: 14px; color: #9C97B0; }
.contato .botao:disabled { opacity: 0.6; cursor: wait; }
.contato__aviso { padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-md); font-size: 15px; font-weight: 500; }
.contato__aviso--ok { background: var(--sucesso-fundo); color: var(--sucesso); }
.contato__aviso--erro { background: var(--erro-fundo); color: var(--erro); }

/* Rodapé */
.rodape { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--esp-3) var(--esp-6); background: var(--noite); color: #9C97B0; border-top: 1px solid #252139; padding: var(--esp-5) max(clamp(20px, 5vw, 64px), calc((100vw - 1072px) / 2)); font-size: 14px; }
.rodape a { color: inherit; }
.rodape a:hover { color: var(--texto-inverso); }

/* Celular e tablet */
@media (max-width: 860px) {
  .hero { min-height: 100svh; }
  .hero__rosto { top: 76px; right: -22vw; width: 86vw; transform: none; }
  .hero__texto { padding-top: 62vw; }
  .demo { grid-template-columns: minmax(0, 1fr); }
  .demo__personagem { max-width: 300px; width: 70%; margin: 0 auto; }
  .publicos__grade { grid-template-columns: minmax(0, 1fr); }
  .acesso { grid-template-columns: minmax(0, 1fr); }
  .acesso__personagem { max-width: 240px; justify-self: start; }
  .contato__linha { grid-template-columns: minmax(0, 1fr); }
  .catorze { padding-bottom: 56vw; }
  .catorze__rosto { right: -10vw; bottom: -14vw; width: 80vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}