/* ===========================================================================
   home.css — o resto da home, abaixo da dobra.
   A dobra é lei: nada aqui a toca. Todo valor desce do
   identidade/design-guide.md TRAVADO em 16/09 — paleta, as duas fontes, a régua
   de 1px em três opacidades (0,28 · 0,75 · 0,98), pílula sem sombra, curvas e
   durações. Não existe cor, raio, sombra, gradiente nem forma nova aqui:
   card, citação, moldura e campo de formulário são feitos SÓ com régua de 1px,
   tipografia e respiro.
   =========================================================================== */

/* ===========================================================================
   1. ESQUELETO DE SEÇÃO
   =========================================================================== */
.secao{
  position: relative;
  padding-block: var(--secao-y);
  padding-inline: var(--margem);
  background: var(--chao);
}
.secao > * + *{ margin-top: var(--e6); }

.secao__coluna{ max-width: 76ch; }

/* rótulo de seção: o mesmo tratamento do selo da dobra */
.rotulo{
  font-size: var(--tam-micro);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo);
  line-height: 1.4;
  color: var(--cinza-selo);
  margin: 0;
}

.secao__titulo{
  margin: var(--e4) 0 0;
  font-family: var(--fonte-sans);
  font-weight: 300;
  font-size: var(--h2);
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--branco);
  max-width: 20ch;
}
.secao__titulo--grande{ font-size: var(--h2-grande); }

.secao__apoio{
  margin: var(--e2) 0 0;
  font-size: var(--h3);
  font-weight: 300;
  line-height: 1.3;
  color: var(--branco);
  max-width: 28ch;
}

.secao__texto{
  margin: var(--e3) 0 0;
  font-size: var(--tam-corpo);
  font-weight: 300;
  line-height: 1.55;
  color: var(--cinza-rodape);
  max-width: var(--coluna-texto);
}
.secao__texto + .secao__texto{ margin-top: var(--e2); }

.secao__micro{
  margin: var(--e3) 0 0;
  font-size: var(--tam-micro);
  font-weight: 300;
  line-height: 1.5;
  color: var(--cinza-selo);
  max-width: 52ch;
}

.secao__fecho{
  margin: var(--e6) 0 0;
  font-size: var(--tam-corpo);
  font-weight: 300;
  line-height: 1.55;
  color: var(--cinza-rodape);
  max-width: 46ch;
}

/* o rótulo de botão nunca quebra no meio: a pílula é uma peça só */
.btn__rotulo,
.btn-fantasma__rotulo{ white-space: nowrap; }

/* ===========================================================================
   2. LINK COM SETA — o secundário da dobra, reaproveitado
   =========================================================================== */
.link-seta{
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  padding-bottom: .5em;
  font-size: var(--tam-corpo);
  font-weight: 400;
  line-height: 1.4;
  color: var(--branco);
  transition: color var(--t-rapido) var(--ease-ui);
}
.link-seta .seta{ width: .78em; height: .78em; transition: transform var(--t-rapido) var(--ease-ui); }
.link-seta__traco{
  position: absolute;
  left: -1px;
  right: -5px;
  bottom: 0;
  height: 1.5px;
  background: var(--branco);
  opacity: var(--traco-link);
  transform-origin: right center;
  transition: transform 120ms var(--ease-ui);
}
/* alvo de 44px de altura sem mover a tinta nem o sublinhado — a mesma técnica
   do hambúrguer da dobra (pseudo-elemento invisível) */
.link-seta::before,
.secao .btn-fantasma::before,
.dobra .btn-fantasma::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.secao .btn-fantasma{ position: relative; }
.link-seta:hover .link-seta__traco{ animation: refaz 260ms var(--ease-ui) forwards; }
.link-seta:hover .seta{ transform: translate(1.4px, -1.4px); }
.link-seta:active{ opacity: .8; }
.link-seta:focus-visible{ outline-offset: 6px; }

/* parágrafo que só carrega um link ganha respiro de bloco */
.secao__texto + p:not([class]),
.secao__apoio + p:not([class]){ margin-top: var(--e5); }
p:not([class]) + .secao__micro{ margin-top: var(--e2); }

.dupla-links{
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e6);
  margin: var(--e4) 0 0;
}

.link-simples{
  color: var(--cinza-rodape);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color var(--t-rapido) var(--ease-ui);
}
.link-simples:hover{ color: var(--branco-quente); }

/* ===========================================================================
   3. PROVA DE PALCO — texto à esquerda, moldura à direita (eco da dobra)
   =========================================================================== */
.secao--palco,
.secao--vizu{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.secao--palco > * + *,
.secao--vizu > * + *{ margin-top: 0; }

/* faixa de eventos: só existe com a lista cheia (mínimo 3) */
.eventos{
  margin: var(--e6) 0 0;
  padding-top: var(--e3);
  border-top: 1px solid rgba(255, 255, 255, .28);
  max-width: 52ch;
}
.eventos[hidden]{ display: none; }
.eventos__titulo{
  font-size: var(--tam-micro);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo);
  line-height: 1.4;
  color: var(--cinza-selo);
}
.eventos__lista{
  list-style: none;
  margin: var(--e2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--e1);
  font-size: var(--tam-corpo);
  font-weight: 300;
  line-height: 1.5;
  color: var(--cinza-rodape);
}
.eventos + p{ margin-top: var(--e5); }

/* moldura de slot de imagem: régua de 1px, sem preenchimento e sem raio */
.moldura{ margin: 0; }
.moldura__vazio{
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, .28);
  padding: var(--e3);
  text-align: center;
  font-size: var(--tam-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cinza-selo);
}
.moldura--app{ max-width: 340px; }
.moldura--app .moldura__vazio{ aspect-ratio: 4 / 5; }
.moldura__nota{
  margin: var(--e2) 0 0;
  font-size: var(--tam-micro);
  font-weight: 300;
  line-height: 1.5;
  color: var(--cinza-selo);
}

/* ===========================================================================
   4. OS TRÊS CAMINHOS
   =========================================================================== */
.cards{
  list-style: none;
  margin: var(--e10) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 56px);
}
.card{
  display: flex;
  flex-direction: column;
  padding-top: var(--e3);
  border-top: 1px solid rgba(255, 255, 255, .28);
}
.card__titulo{
  margin: 0;
  font-size: var(--h3);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--branco);
}
.card__lista{
  margin: var(--e4) 0 0;
  flex: 1 1 auto;
}
.card__lista dt{
  font-size: var(--tam-micro);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo);
  line-height: 1.4;
  color: var(--cinza-selo);
}
.card__lista dd{
  margin: var(--e1) 0 0;
  font-size: var(--tam-corpo);
  font-weight: 300;
  line-height: 1.5;
  color: var(--cinza-rodape);
}
.card__lista dd + dt{ margin-top: var(--e3); }
.card__duracao{ margin-top: var(--e3); }
.card__duracao[hidden]{ display: none; }
.card .btn-fantasma{ margin-top: var(--e4); align-self: flex-start; }

/* ===========================================================================
   5. DEPOIMENTO
   =========================================================================== */
.secao--voz[hidden]{ display: none; }
.voz{
  margin: 0;
  padding-top: var(--e3);
  border-top: 1px solid rgba(255, 255, 255, .28);
  max-width: 34ch;
}
.voz__fala{
  font-size: var(--h3);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--branco);
}
.voz__quem{ margin-top: var(--e3); }
.voz__quem cite{
  display: block;
  font-style: normal;
  font-size: var(--tam-corpo);
  font-weight: 400;
  line-height: 1.4;
  color: var(--cinza-rodape);
}
.voz__cargo{
  display: block;
  margin-top: 4px;
  font-size: var(--tam-micro);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo);
  line-height: 1.4;
  color: var(--cinza-selo);
}

/* ===========================================================================
   6. O MÉTODO
   =========================================================================== */
.secao--metodo [data-montagem-a][hidden],
.secao--metodo [data-montagem-b][hidden]{ display: none; }

.passos{
  list-style: none;
  margin: var(--e10) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 56px);
  counter-reset: passo;
}
.passo{
  padding-top: var(--e3);
  border-top: 1px solid rgba(255, 255, 255, .28);
}
.passo__n{
  display: block;
  font-size: var(--tam-micro);
  font-weight: 300;
  letter-spacing: var(--tracking-rotulo);
  line-height: 1.4;
  color: var(--cinza-selo);
}
.passo__titulo{
  margin: var(--e2) 0 0;
  font-size: var(--h3);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--branco);
}
.passo__texto{
  margin: var(--e2) 0 0;
  font-size: var(--tam-corpo);
  font-weight: 300;
  line-height: 1.55;
  color: var(--cinza-rodape);
}

/* ===========================================================================
   7. CHAMADA FINAL + FORMULÁRIO
   =========================================================================== */
.secao--final{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 112px);
  align-items: start;
}
.secao--final > * + *{ margin-top: 0; }
.acoes--final{ margin-top: var(--e6); }

.formulario{ scroll-margin-top: calc(var(--cab-altura) + 24px); }
.formulario__titulo{
  margin: 0;
  font-size: var(--h3);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--branco);
}
.formulario__apoio{
  margin: var(--e2) 0 0;
  font-size: var(--tam-micro);
  font-weight: 300;
  line-height: 1.5;
  color: var(--cinza-selo);
  max-width: 46ch;
}

.form{
  margin-top: var(--e6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e5) var(--e4);
}
.form[hidden]{ display: none; }
.campo--largo{ grid-column: 1 / -1; }

.campo__rotulo{
  display: block;
  font-size: var(--tam-micro);
  font-weight: 300;
  line-height: 1.4;
  color: var(--cinza-selo);
}
.campo__rotulo abbr{
  text-decoration: none;
  color: var(--ambar);
  margin-left: 2px;
}
.campo__opcional{ color: var(--cinza-selo); }

/* campo = régua de 1px embaixo. Sem caixa, sem raio, sem preenchimento. */
.campo__caixa{
  display: block;
  width: 100%;
  margin-top: var(--e1);
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  border-radius: 0;
  background: transparent;
  color: var(--branco);
  font-family: var(--fonte-sans);
  font-size: var(--tam-corpo);
  font-weight: 300;
  line-height: 1.5;
  min-height: 44px;
  transition: border-color var(--t-rapido) var(--ease-ui);
}
.campo__caixa::placeholder{ color: rgba(183, 183, 185, .74); }
.campo__caixa:hover{ border-bottom-color: rgba(255, 255, 255, .5); }
.campo__caixa:focus{ border-bottom-color: rgba(255, 255, 255, .75); }
.campo__caixa:focus-visible{ outline-offset: 4px; }
.campo__caixa--area{ resize: vertical; min-height: 88px; }
select.campo__caixa{ padding-right: var(--e3); }
select.campo__caixa option{ background: var(--chao); color: var(--branco); }

.campo__dica{
  margin-top: var(--e1);
  font-size: var(--tam-micro);
  font-weight: 300;
  line-height: 1.5;
  color: var(--cinza-selo);
}
/* erro em âmbar: esta paleta não tem vermelho (design-guide) */
.campo__erro{
  margin-top: var(--e1);
  font-size: var(--tam-micro);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ambar);
}
.campo__erro[hidden]{ display: none; }
.campo[data-erro="1"] .campo__caixa{ border-bottom-color: var(--ambar); }

.campo--marca{ display: grid; gap: var(--e1); }
/* a caixa de aceite no desenho da casa: régua de 1px, sem raio, e o visto em
   âmbar chapado (patch F2, 18/09). Sem `appearance: none` o navegador desenha
   a dele. O visto é SVG em data: (permitido pelo CSP de fábrica em img-src). */
.campo__marca{
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 0;
  background: transparent center / 14px 14px no-repeat;
  cursor: pointer;
  transition: border-color var(--t-rapido) var(--ease-ui), background-color var(--t-rapido) var(--ease-ui);
}
.campo__rotulo--marca:hover .campo__marca{ border-color: rgba(255, 255, 255, .5); }
.campo__marca:checked{
  border-color: var(--ambar);
  background-color: var(--ambar);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23140000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.8'/%3E%3C/svg%3E");
}
.campo__marca:focus-visible{ outline-offset: 4px; }
.campo[data-erro="1"] .campo__marca{ border-color: var(--ambar); }
.campo__rotulo--marca{
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: 44px;   /* o alvo é a linha inteira, não a caixa */
  color: var(--cinza-rodape);
  font-size: var(--tam-micro);
  line-height: 1.5;
  cursor: pointer;
}
.campo__politica{ justify-self: start; }
.rodape__politica,
.campo__politica{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.campo--marca .campo__erro{ grid-column: 1 / -1; }

/* HONEYPOT (F2): fora da tela, fora do fluxo do grid e sem alvo de toque. Não é
   display:none de propósito: robô que filtra display:none pula a isca; gente
   nunca chega nela (aria-hidden + tabindex=-1 no HTML). */
.campo--mel{
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form__envio{ grid-column: 1 / -1; margin-top: var(--e1); }
.form__aviso{
  grid-column: 1 / -1;
  font-size: var(--tam-corpo);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ambar);
  max-width: 46ch;
}
.form__aviso[hidden]{ display: none; }

.form-sucesso{ margin-top: var(--e6); max-width: 46ch; }
.form-sucesso[hidden]{ display: none; }
.form-sucesso__titulo{
  margin: 0;
  font-size: var(--h3);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--branco);
}
.form-sucesso__texto{
  margin: var(--e2) 0 var(--e4);
  font-size: var(--tam-corpo);
  font-weight: 300;
  line-height: 1.55;
  color: var(--cinza-rodape);
}

/* ===========================================================================
   8. RODAPÉ — o preto de canto, "só onde a luz não chega"
   =========================================================================== */
.rodape{
  background: var(--chao-canto);
  padding: var(--secao-y) var(--margem) var(--e8);
}
.rodape__linha{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e6);
}
.marca--rodape .marca__nome{ font-size: clamp(1.5rem, 1.1rem + 1.02vw, 2.25rem); }
/* o lockup do rodapé é menor: o tracking do selo acompanha, senão o selo fica
   mais largo que o nome e a regra do lockup quebra */
.marca--rodape .marca__selo{ letter-spacing: clamp(.25px, -1.2px + .27vw, 3px); }
.rodape__nav{
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e6);
}
.rodape__nav a{
  font-size: var(--tam-corpo);
  font-weight: 400;
  line-height: 1.4;
  color: var(--cinza-rodape);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--t-rapido) var(--ease-ui);
}
.rodape__nav a:hover{ color: var(--branco-quente); }
.rodape__nav a:active{ opacity: .8; }

.rodape__corte{
  display: block;
  width: 100%;
  height: 1px;
  margin: var(--e8) 0 var(--e4);
  background: var(--branco);
  opacity: var(--regua-rodape);
}
.rodape__fim{
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e6);
}
.rodape__dado{
  font-size: var(--tam-micro);
  font-weight: 300;
  line-height: 1.5;
  color: var(--cinza-selo);
}

/* ===========================================================================
   9. ENTRADA POR SEÇÃO — a mesma língua da dobra (máscara + 12px, ease-luz).
   O estado escondido só existe quando o JS está vivo E o movimento é bem-vindo:
   sem JS, ou com reduced-motion, a página nasce inteira e no lugar.
   =========================================================================== */
html.js-revela [data-revela]{
  opacity: 0;
  transform: translateY(12px);
  clip-path: inset(-.25em -.1em -.3em -.1em);
}
html.js-revela [data-revela].revelado{
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--t-lento) var(--ease-luz),
              transform var(--t-lento) var(--ease-luz);
  transition-delay: var(--atraso, 0ms);
}

@media (prefers-reduced-motion: reduce){
  html.js-revela [data-revela]{ opacity: 1; transform: none; }
}

/* âncora com rolagem suave só pra quem quer movimento */
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior: smooth; }
}

/* ===========================================================================
   10. MOBILE E LARGURAS INTERMEDIÁRIAS
   =========================================================================== */
@media (max-width: 1023px){
  .cards,
  .passos{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .secao--final{ grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px), (max-aspect-ratio: 1.25){
  .secao--palco,
  .secao--vizu{ grid-template-columns: minmax(0, 1fr); }
  .secao--palco > * + *,
  .secao--vizu > * + *{ margin-top: var(--e8); }
  .cards,
  .passos{ grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
  .cards,
  .passos{ margin-top: var(--e8); }
  .form{ grid-template-columns: minmax(0, 1fr); gap: var(--e5); }
  .secao__titulo{ max-width: 16ch; }
  .rodape__linha{ flex-direction: column; gap: var(--e6); }
}