/* ===========================================================================
   internas.css — a base de página interna (F2, 18/09/2026).
   Carrega DEPOIS de tokens.css, dobra.css e home.css: tudo aqui desce dos
   tokens e do vocabulário da home (rótulo em caixa alta, título, texto, card
   com régua de 1px, moldura de slot, campo com régua embaixo, link com seta).
   Nenhuma cor, raio, sombra, gradiente ou forma nova. O fundo das internas é
   o palco da home (escolha do Anthony vendo, Gate B de 18/09).
   =========================================================================== */

/* ===========================================================================
   1. A DOBRA CURTA — sem herói, texto sobre o palco escuro
   =========================================================================== */
.dobra--interna{
  /* a headline da interna é 2,5× mais comprida que a da home e a L1 nunca
     quebra no desktop (copy): o corpo é o da home, TRAVADO pela largura
     (6,8vw = a L2, a mais larga das três). Sem teto de altura (rodada 3): o
     corpo é o mesmo da home. No celular a banda volta à da home, com quebras
     controladas (ver §13). */
  --h1: min(clamp(2.55rem, 1.285rem + 5.19vw, 6.35rem), 6.8vw);
  /* a cena precisa do chão dela: com menos de 100dvh o fundo.png cortava nas
     poltronas claras e virava linha dura contra a seção seguinte. A mesma
     altura da home, nos dois tamanhos. */
  min-height: 100vh;
  min-height: 100dvh;
}

.dobra--interna .dobra__corpo{
  /* centrado entre cabeçalho e rodapé da dobra (como a home), com respiro em
     cima e, embaixo, a reserva da lente (rodada 2). A linha `.dobra__rodape`
     do grid já reserva --rodape-linha; o corpo reserva o resto: os 8px da
     lente acima da régua + os 28px dos algarismos + 24px de folga. Total
     abaixo do texto = --rodape-linha + 60px, em qualquer altura. */
  justify-content: center;
  padding-top: var(--e5);
  padding-bottom: calc(8px + 28px + var(--e3));
}

/* o rótulo no tratamento do selo, em cima da headline */
.dobra__rotulo{
  margin: 0 0 var(--e4);   /* rótulo→h1 = rótulo→título das seções (32px) */
  color: var(--cinza-selo);
}
.dobra__rotulo > span{ display: block; }

/* as três linhas: nenhuma quebra que o navegador escolha (nowrap); no celular
   a quebra é um <br class="quebra-mobile">, escondido no desktop */
.dobra--interna .titulo__linha{ white-space: nowrap; }
.quebra-mobile{ display: none; }
/* sem herói não existe guarda 1: a L3 volta ao corpo natural da arte */
.dobra--interna .titulo__l3{ font-size: var(--h1-l3); }

.dobra__micro{
  margin: var(--e2) 0 0;
  font-size: var(--tam-micro);
  font-weight: 300;
  line-height: 1.5;
  color: var(--cinza-selo);
  max-width: 52ch;
}
.dobra__apoio{
  margin: var(--e2) 0 0;
  font-size: var(--tam-corpo);
  font-weight: 300;
  line-height: 1.55;
  color: var(--cinza-rodape);
  max-width: 58ch;
}
.dobra__micro > span,
.dobra__apoio > span{ display: block; }

/* a copy tem versão curta pro celular: as duas estão no HTML, uma por vez */
.so-mobile{ display: none !important; }

/* na dobra da interna a régua fica no MESMO lugar da home (a faixa de texto
   não se repete; o espaço dela fica) */
.dobra--interna .dobra__rodape{ padding-bottom: calc(var(--rodape-linha) - 1px); }

/* ===========================================================================
   2. O FUNDO — o palco da home (as duas camadas de fundo.png, sem herói),
   com as regras de dobra.css §1 e §1b tal como estão. Escolhido pelo Anthony
   vendo, entre palco e um fundo liso, no Gate B de 18/09; o liso saiu do
   código nessa data.
   =========================================================================== */

/* ===========================================================================
   3. A ABERTURA — o que a dobra da interna tem a mais entra no mesmo relógio
   =========================================================================== */
html[data-entrada="rodando"] .dobra__rotulo{
  animation: entra-miudo var(--t-medio) var(--ease-luz) var(--d-marca) backwards;
}
html[data-entrada="rodando"] .dobra__micro{
  animation: entra-miudo var(--t-medio) var(--ease-luz) calc(var(--d-link) + 50ms) backwards;
}
html[data-entrada="rodando"] .dobra__apoio{
  animation: entra var(--t-medio) var(--ease-luz) calc(var(--d-link) + 100ms) backwards;
}

/* ===========================================================================
   4. ESQUELETO DAS INTERNAS
   =========================================================================== */
.secao{ scroll-margin-top: calc(var(--cab-altura-curta) + var(--e2)); }
.secao[hidden],
.campo[hidden],
.campo__dica[hidden],
.card[hidden],
.moldura[hidden],
.faq__item[hidden],
[data-agenda-so][hidden],
[data-sucesso-link][hidden]{ display: none; }

/* marca de fábrica visível: o que ainda depende de outra fase */
.nota-fabrica{ color: var(--cinza-selo); }

/* ===========================================================================
   5. TEMAS — 6 cards no vocabulário de card da home, sem botão
   =========================================================================== */
.cards--temas .card__pra-quem{ margin-top: var(--e3); }
/* piso de 4: com menos (?temas=3) vira lista simples, sem "pra quem" */
.cards--temas[data-modo="lista"]{
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e4);
  max-width: 64ch;
}
.cards--temas[data-modo="lista"] .card__pra-quem,
.cards--temas[data-modo="lista"] .card__lista > dt{ display: none; }
.cards--temas[data-modo="lista"] .card__lista{ margin-top: var(--e2); }

/* ===========================================================================
   6. AGENDA PÚBLICA — três estados: vazia (padrão) · uma · cheia
   =========================================================================== */
.agenda{
  list-style: none;
  margin: var(--e8) 0 0;
  padding: 0;
  max-width: 72ch;
}
.agenda__item{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: var(--e2) var(--e4);
  align-items: baseline;
  padding: var(--e3) 0;
  border-top: 1px solid rgba(255, 255, 255, .28);
}
.agenda__nome{
  font-size: var(--h3);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--branco);
}
.agenda__onde,
.agenda__quando{
  font-size: var(--tam-corpo);
  font-weight: 300;
  line-height: 1.5;
  color: var(--cinza-rodape);
  font-variant-numeric: tabular-nums;
}
.agenda__quando{ white-space: nowrap; }
.agenda__link{ grid-column: 1 / -1; }
/* com uma data só: um item, sem moldura de lista */
[data-agenda][data-estado="uma"] .agenda{ margin-top: var(--e6); }
[data-agenda][data-estado="uma"] .agenda__item{ border-top: 0; padding-top: 0; }

/* ===========================================================================
   7. GALERIA — molduras de slot, 3 por linha
   =========================================================================== */
.galeria{ margin: var(--e8) 0 0; }
.galeria__grade{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 56px);
}
.moldura__legenda{
  margin: var(--e2) 0 0;
  font-size: var(--tam-micro);
  font-weight: 300;
  line-height: 1.5;
  color: var(--cinza-rodape);
}
.moldura__legenda > span{ display: block; color: var(--cinza-selo); }
.galeria > .moldura__nota{ margin-top: var(--e4); max-width: 64ch; }

/* ===========================================================================
   8. KIT DE CONTRATAÇÃO — construído, escondido até o PDF existir (?kit=1)
   =========================================================================== */
/* (o respiro texto→link vem de home.css: .secao__texto + p:not([class]) = 40px) */

/* ===========================================================================
   9. OBJEÇÕES — pergunta e resposta lado a lado, uma régua por item
   =========================================================================== */
.objecoes{
  list-style: none;
  margin: var(--e8) 0 0;
  padding: 0;
  max-width: 96ch;
}
.objecao{
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--e2) clamp(24px, 4vw, 64px);
  padding: var(--e4) 0;
  border-top: 1px solid rgba(255, 255, 255, .28);
}
.objecao__pergunta{
  margin: 0;
  font-size: var(--h3);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--branco);
}
.objecao__resposta{
  margin: 0;
  font-size: var(--tam-corpo);
  font-weight: 300;
  line-height: 1.55;
  color: var(--cinza-rodape);
}

/* ===========================================================================
   10. FAQ — acordeão: botão com aria-expanded, abre em 260ms --ease-ui.
   Quem colapsa (html.js-faq) é o mesmo arquivo que abre (palestras.js): sem
   ele, tudo nasce aberto e nada depende de script pra ler.
   =========================================================================== */
.faq{
  margin: var(--e8) 0 0;
  max-width: 72ch;
}
.faq__item{ border-top: 1px solid rgba(255, 255, 255, .28); }
.faq__pergunta{ margin: 0; font-size: inherit; font-weight: inherit; }
.faq__botao{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e3);
  width: 100%;
  min-height: 44px;
  padding: var(--e3) 0;
  text-align: left;
  font-size: var(--h3);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--branco);
  transition: color var(--t-rapido) var(--ease-ui);
}
.faq__botao:hover{ color: var(--branco-quente); }
.faq__botao:active{ opacity: .8; }
.faq__botao:focus-visible{ outline-offset: 4px; }
/* o sinal: duas réguas de 1px (o "+"); a vertical some quando abre */
.faq__sinal{
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: .35em;
}
.faq__sinal::before,
.faq__sinal::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  opacity: var(--regua-rodape);
}
.faq__sinal::before{ width: 16px; height: 1px; transform: translate(-50%, -50%); }
.faq__sinal::after{
  width: 1px; height: 16px;
  transform: translate(-50%, -50%) scaleY(1);
  transform-origin: center;
  transition: transform var(--t-medio) var(--ease-ui);
}
.faq__item[data-aberto="1"] .faq__sinal::after{ transform: translate(-50%, -50%) scaleY(0); }

.faq__miolo{ min-height: 0; overflow: hidden; }
.faq__resposta{
  margin: 0;
  padding: 0 var(--e8) var(--e4) 0;
  font-size: var(--tam-corpo);
  font-weight: 300;
  line-height: 1.55;
  color: var(--cinza-rodape);
}
html.js-faq .faq__corpo{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-medio) var(--ease-ui);
}
html.js-faq .faq__item[data-aberto="1"] .faq__corpo{ grid-template-rows: 1fr; }

/* ===========================================================================
   11. FORMULÁRIO QUALIFICADO — o campo condicional e o seletor de data
   =========================================================================== */
input[type="date"].campo__caixa{ color-scheme: dark; }
input[type="date"].campo__caixa::-webkit-calendar-picker-indicator{ opacity: .74; cursor: pointer; }

/* ===========================================================================
   12. REDUCED MOTION — o acordeão abre sem transição (as globais de dobra.css
   já zeram duração); nada mais aqui anima
   =========================================================================== */
@media (prefers-reduced-motion: reduce){
  html.js-faq .faq__corpo,
  .faq__sinal::after{ transition: none; }
}

/* ===========================================================================
   13. MOBILE E LARGURAS INTERMEDIÁRIAS
   =========================================================================== */
@media (max-width: 1023px){
  .galeria__grade{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .objecao{ grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
}

@media (max-width: 767px), (max-aspect-ratio: 1.25){
  /* rodada 2: a headline volta à banda da home no celular (40,6px @390 ·
     37,4px @360: o piso de 40,8 do clamp deixava "Ele ensina ótica" a 2px da
     margem no 360, por isso o teto de 10,4vw) com quebras CONTROLADAS: L1
     depois de "ótica", L2 depois de "evento," (os <br> só existem aqui).
     5 linhas no total. */
  .dobra--interna{ --h1: min(clamp(2.55rem, 1.285rem + 5.19vw, 6.35rem), 10.4vw); }
  .quebra-mobile{ display: inline; }
  .dobra--interna .dobra__corpo{
    /* a dobra é 100dvh e o corpo centra na sobra, como no desktop; o respiro
       mínimo em cima é 12px (= 40px da RÉGUA do header, que fica 28px acima
       do fim do cabeçalho de 80px) e embaixo a reserva da lente */
    padding-top: 12px;
    padding-bottom: calc(8px + 28px + var(--e3));
  }
  /* no celular o rótulo em caixa alta quebra em duas linhas (não cabe nem com
     tracking zero); o tracking desce pro da faixa (.14em) e o separador viaja
     com a palavra SEGUINTE (nbsp depois do ·, no HTML) */
  .dobra__rotulo{ letter-spacing: var(--tracking-faixa); }
  .so-desktop{ display: none !important; }
  .so-mobile{ display: block !important; }
  /* o microtexto é legenda dos botões: centrado como eles (a arte mobile
     centra a dupla); a linha de apoio volta pra coluna de texto */
  .dobra__micro{
    text-align: center;
    max-width: 36ch;
    margin-inline: auto;
  }
  .dobra__apoio{ margin-top: var(--e4); }

  .galeria__grade{ grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
  .agenda__item{ grid-template-columns: minmax(0, 1fr); gap: var(--e1); }
  .faq__resposta{ padding-right: var(--e5); }
}