/* ══ PORTA ODONTO — clínica MADURA (dor de entrada D1+D2).
   UM FILME SÓ em tela cheia, esfregado pelo scroll com inércia, e o texto
   por cima com véu de PAPEL. Pele clara (saúde = claro, 17/08); a gramática
   segue a Direção C. Motor no modelo da Mesa 6.
   ⚠️ Este cabeçalho já descreveu "prancha ao lado, sem véu" e "seis cenas
   empilhadas" — as duas versões anteriores, ambas reprovadas. Se você está
   lendo e a página não bate com o que está escrito aqui, o texto é que está
   velho: confira o HTML. ══ */

@font-face{font-family:'Bodoni Moda';src:url('/assets/fonts/bodoni-moda-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Bodoni Moda';src:url('/assets/fonts/bodoni-moda-600-italic.woff2') format('woff2');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Caveat';src:url('/assets/fonts/caveat-600.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  --paper:#FBFBF8; --paper-field:#F1F0EA;
  --ink:#232220; --ink-2:#55524B;
  --rule:#CFCDC4; --rule-strong:#A29E92;
  --on-ink:#FBFBF8;
  --limao:#C6D82E;
  --prancha:#1C1B18;
  --serif:'Bodoni Moda',Georgia,serif;
  --sans:'Archivo',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --mao:'Caveat',cursive;
  --g:clamp(1.15rem,5vw,4.5rem);
  --barra:3.1rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}

/* ── barra de capítulos ───────────────────────────────────────────────── */
.capitulos{position:sticky;top:0;z-index:30;height:var(--barra);
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);
  display:flex;align-items:center}
.capitulos ol{display:flex;gap:clamp(.9rem,2.4vw,2rem);list-style:none;margin:0;
  padding:0 var(--g);overflow-x:auto;scrollbar-width:none;width:100%}
.capitulos ol::-webkit-scrollbar{display:none}
.capitulos a{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-2);text-decoration:none;white-space:nowrap;
  padding-bottom:.18rem;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.capitulos a:hover,.capitulos a[aria-current]{color:var(--ink);border-color:var(--limao)}

/* ── HERO: a capa vive DENTRO do palco, sobre o filme ────────────────
   Era uma seção separada com pôster parado — o visitante abria o site e via
   uma foto que não se mexia, e o efeito só começava depois de uma tela
   inteira de scroll. Agora o filme corre atrás dela desde o primeiro pixel:
   o primeiro milímetro de rolagem já move a cena.
   Três faixas nos extremos (rótulos, tese, instrução) mantêm a leitura de
   página de rosto — só que agora é uma página de rosto viva. */
.capa{display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(2.4rem,6vw,4rem)}
.abertura__topo,.abertura__meio,.capa .dica{max-width:1240px;margin-inline:auto;width:100%}
.abertura__topo{display:flex;flex-wrap:wrap;gap:.55rem clamp(1.1rem,3vw,2.6rem);
  padding-bottom:.85rem;border-bottom:1px solid var(--rule)}
/* o bloco do título sobe: centralizado, ele tapava justamente o meio da
   cena, que é onde ela tem mais o que mostrar */
.abertura__meio{margin-bottom:clamp(3rem,15vh,9rem)}
.tit--capa{font-size:clamp(2.4rem,6.2vw,4.7rem);max-width:13ch;margin-top:0}
.apoio--capa{font-size:clamp(1.05rem,1.75vw,1.28rem);max-width:50ch;margin-top:1.5rem}
.dica{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);margin:0}
@media (min-width:900px){
  .capa{position:absolute;inset:0;z-index:2;pointer-events:none;
    padding:calc(var(--barra) + clamp(1rem,2vw,1.8rem)) var(--g) clamp(1.5rem,3vw,2.3rem);
    will-change:opacity}
}
@media (min-width:900px){
  .capa__fundo{display:none}   /* no desktop quem faz o fundo e o filme */
}
@media (max-width:899.98px){
  .capa{position:relative;overflow:hidden;isolation:isolate;
    min-height:calc(100svh - var(--barra));
    padding:clamp(2.4rem,7vw,3.4rem) var(--g) clamp(2rem,5vw,3rem);
    margin-inline:calc(var(--g) * -1);
    border-bottom:1px solid var(--rule)}
  .capa__fundo{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;z-index:-2}
  /* mesmo veu de canto do desktop, so que vertical: no celular o texto
     ocupa a largura toda, entao a densidade tem que vir de baixo */
  .capa::before{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(to top,
      rgba(251,251,248,.95) 0%,
      rgba(251,251,248,.86) 38%,
      rgba(251,251,248,.62) 66%,
      rgba(251,251,248,.34) 100%)}
  /* :not() e obrigatorio — .capa > * (0,1,1) vence .capa__fundo (0,1,0)
     e devolvia o fundo pro fluxo, virando uma figurinha de 351px */
  .capa > *:not(.capa__fundo){position:relative}
}

/* ── MANIFESTO: prosa, coluna estreita, nenhuma imagem ────────────────
   O contraste com o corredor é o ponto — depois de seis capítulos de
   frase curta ao lado de cena, um bloco de texto corrido faz o leitor
   desacelerar antes do convite. */
.env--prosa{max-width:760px}
.manifesto p{font-size:clamp(1.04rem,1.65vw,1.2rem);color:var(--ink-2);
  max-width:58ch;margin:1.35rem 0 0}
.manifesto p em{font-style:italic;color:var(--ink)}
.manifesto__fecho{color:var(--ink);border-left:2px solid var(--limao);
  padding-left:1.15rem;margin-top:2.2rem!important}

/* ── O CORREDOR: UM palco só ──────────────────────────────────────────
   Antes eram seis capítulos altos, cada um com a sua prancha: a moldura
   PISCAVA a cada troca — entrava, saía, entrava de novo. Folhear, não
   caminhar. Agora existe um palco preso e as seis cenas ficam empilhadas
   na MESMA célula do grid, trocando por opacidade. A moldura não sai mais
   da tela: o dia passa DENTRO dela, que é a espinha da narrativa
   ("uma clínica, um dia, do vazio ao cheio") virando mecânica.

   O empilhamento é só do desktop. No celular `grid-area:auto` desfaz a
   pilha e as mesmas seis cenas voltam a ser uma lista — por isso o texto
   e a prancha moram JUNTOS dentro de `.cena`, e não em duas colunas
   separadas: assim a ordem de leitura já nasce certa.

   ⚠️ TELA CHEIA (17/08, 2ª correção). A versão anterior punha a cena numa
   prancha de 58% ao lado do texto. Estava errado: a referência que o
   Alessandro aponta desde o começo (Oficina do Tempo, Mesa 6) tem a mídia
   ocupando a TELA INTEIRA com o texto por cima. Eu tinha decidido não
   sangrar por achar que contrariava o sistema — não era minha decisão a
   tomar. Agora a cena cobre o palco e o texto mora sobre ela, com véu de
   PAPEL (não escuro): a pele clara de saúde continua valendo. ────── */
.trilho{position:relative}
.palco{position:relative}

/* ── celular: sem palco. Vira lista, cada bloco com a sua foto. ─────── */
@media (max-width:899.98px){
  .palco{padding:0 var(--g)}
  .bloco{padding:clamp(3rem,9vw,4.5rem) 0;border-top:1px solid var(--rule);display:block}
  .bloco:first-child{border-top:0}
  .bloco__foto{margin-top:1.6rem;width:100%;border:1px solid var(--rule-strong)}
  #filme,.veu,.fio{display:none}
}

@media (min-width:900px){
  /* Pista por capitulo. 190vh estava rapido demais — "o scroll tinha
     que ter mais tempo de video" (Alessandro, 18/08). Quanto MAIOR este
     valor, mais scroll para o mesmo segundo de filme, ou seja: mais lento.
     E o unico botao de ritmo do corredor. */
  .trilho{height:calc(6 * 250vh + 100svh)}
  /* top:0 e não var(--barra): a cena passa POR BAIXO da barra de capítulos,
     que já é translúcida com blur. Descontar deixaria uma tira de papel. */
  .palco{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--paper)}

  /* UM filme, cobrindo o palco. Não leva transform: o movimento inteiro
     vem do currentTime, e somar transform contaria duas vezes. */
  #filme{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .bloco__foto{display:none}

  /* Véu de CANTO, não banho geral: denso onde o texto pisa (embaixo à
     esquerda), zero no canto oposto. Véu uniforme lavava a cena inteira e
     o resultado não era nem foto nem papel — era borrão. */
  .veu{position:absolute;inset:0;z-index:1;pointer-events:none;background:
    linear-gradient(to top,
      rgba(251,251,248,.96) 0%,
      rgba(251,251,248,.86) 24%,
      rgba(251,251,248,.38) 48%,
      rgba(251,251,248,0)   72%),
    linear-gradient(to right,
      rgba(251,251,248,.84) 0%,
      rgba(251,251,248,.50) 32%,
      rgba(251,251,248,.10) 60%,
      rgba(251,251,248,0)   80%)}

  /* os seis textos ocupam o MESMO lugar e trocam por opacidade (JS) */
  .blocos{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;
    padding:0 var(--g) clamp(3.4rem,7vh,5.2rem);pointer-events:none}
  .bloco{position:absolute;max-width:min(52ch,58vw);opacity:0;visibility:hidden;
    will-change:opacity,transform}
  .bloco .tit{font-size:clamp(2.4rem,4.9vw,4rem);max-width:16ch}
  .bloco .apoio{font-size:clamp(1.04rem,1.35vw,1.22rem);color:var(--ink);max-width:54ch}

  /* O FIO DO DIA — vive no palco, não no bloco: atravessa as seis trocas
     sem nunca sumir. É o que faz "outra imagem" virar "mais tarde". */
  .fio{position:absolute;z-index:3;right:var(--g);bottom:clamp(3.4rem,7vh,5.2rem);
    display:flex;flex-direction:column;align-items:flex-end;gap:.42rem;
    font-family:var(--mono);text-align:right;pointer-events:none}
  .fio__hora{font-size:clamp(1.5rem,2.3vw,2.1rem);color:var(--ink);letter-spacing:.02em;line-height:1}
  .fio__nota{font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
  .fio__barra{display:block;width:clamp(6rem,11vw,10rem);height:1px;
    background:var(--rule-strong);margin-top:.5rem;position:relative}
  .fio__barra i{position:absolute;left:0;top:-1px;height:3px;background:var(--limao);
    width:calc(var(--gp,0) * 100%)}
}

/* Sem palco (celular ou movimento reduzido): o JS sai de cena e o CSS
   precisa devolver tudo visível, senão a página fica em branco. */
.sem-palco .bloco{opacity:1!important;visibility:visible!important;transform:none!important;position:relative}
.sem-palco .blocos{position:relative;display:block;padding:0}
.sem-palco .trilho{height:auto}
.sem-palco .palco{position:relative;height:auto;overflow:visible}
.sem-palco #filme,.sem-palco .veu,.sem-palco .fio{display:none}
.sem-palco .bloco__foto{display:block;margin-top:1.6rem;width:100%;border:1px solid var(--rule-strong)}

/* ── texto ────────────────────────────────────────────────────────────── */
.cota{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);display:block}
h1.tit,h2.tit{font-family:var(--serif);font-weight:600;
  font-size:clamp(2rem,4.3vw,3.3rem);line-height:1.07;letter-spacing:-.012em;
  margin:.9rem 0 0;max-width:15ch;text-wrap:balance}
h1.tit em,h2.tit em{font-style:italic}
.apoio{font-size:clamp(1rem,1.55vw,1.12rem);color:var(--ink-2);max-width:44ch;margin:1.05rem 0 0}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 0;padding:0;list-style:none}
.tags li{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--rule);padding:.4rem .68rem}

/* O texto tem curva PRÓPRIA (--t, escrita pelo JS), mais seca que a da
   cena: sai antes da troca começar e volta depois dela terminar. Se
   seguisse o --o, dois textos ficariam meio-visíveis um sobre o outro na
   mesma coluna e viraria borrão. Na troca a coluna fica limpa. */
.cena__texto{opacity:var(--t,1);transform:translateY(calc((1 - var(--t,1)) * 14px))}
@media (max-width:899.98px){.cena__texto{opacity:1;transform:none}}

/* ── prancha: a cena, emoldurada pelo grid ────────────────────────────── */
.prancha{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--prancha);
  border:1px solid var(--rule-strong)}
.prancha img,.prancha video{width:100%;height:100%;object-fit:cover;display:block}
/* SCRUB: o movimento é função do scroll, não do relógio. O JS escreve --p
   (0 a 1) em cada capítulo; aqui só se traduz isso em transform. Sem
   transition de propósito — transition atrasaria o dedo do visitante. */
/* Prancha com FOTO: o --p vira transform (o movimento é o zoom).
   Prancha com VÍDEO: o --p vira currentTime, no JS — o vídeo NÃO leva
   transform, senão o movimento contaria duas vezes. */
.prancha img{
  transform:scale(calc(1.14 - 0.14 * var(--p,0)))
            translate3d(0, calc((0.5 - var(--p,0)) * -2.2%), 0);
  will-change:transform}
.prancha video{will-change:auto}
/* a legenda acompanha o texto, não a cena: duas datas empilhadas no mesmo
   canto durante a troca viravam uma palavra só, ilegível */
.prancha figcaption{opacity:var(--t,1);position:absolute;left:0;bottom:0;
  font-family:var(--mono);font-size:.61rem;letter-spacing:.14em;text-transform:uppercase;
  color:#D8D5CE;background:color-mix(in srgb,#0E0D0C 70%,transparent);
  padding:.36rem .62rem;backdrop-filter:blur(3px)}
/* cota de prancha: o filete curto da Direção C */
.prancha::after{content:"";position:absolute;left:-1px;top:-13px;width:60px;height:1px;
  background:var(--rule-strong)}

/* ── seções normais (fim do corredor) ─────────────────────────────────── */
.faixa{padding:clamp(3.6rem,8vw,7rem) var(--g);border-top:1px solid var(--rule)}
.faixa--campo{background:var(--paper-field)}
.env{max-width:1240px;margin-inline:auto}
.mao{font-family:var(--mao);font-size:1.42rem;color:var(--ink-2);margin:1.7rem 0 0}
.btn{display:inline-flex;align-items:center;margin-top:1.6rem;padding:1rem 1.8rem;
  background:var(--ink);color:var(--on-ink);text-decoration:none;font-weight:500;
  border:1px solid var(--ink);transition:background .16s,color .16s,transform .16s}
.btn:hover{background:var(--limao);color:#232220;border-color:var(--limao);transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--limao);outline-offset:3px}



/* ── O FECHO: manifesto + convite numa dobra só ──────────────────────
   Retrato PRESO à direita; o texto completo das duas antigas seções passa
   por cima em três tempos. "Parecendo ser apenas uma" (Alessandro, 17/08).
   Nada de texto foi cortado — a prosa inteira não cabe numa tela ao lado
   da foto, então ela foi distribuída nos tempos. */
.fecho{position:relative;background:var(--paper-field);
  border-top:1px solid var(--rule)}
.fecho__grade{max-width:1240px;margin-inline:auto;width:100%;
  display:grid;gap:clamp(1.8rem,4vw,3.6rem);align-items:center}
.fala__bloco p{font-size:clamp(1.02rem,1.6vw,1.16rem);color:var(--ink-2);
  max-width:56ch;margin:1.15rem 0 0}
.fala__bloco p em{font-style:italic;color:var(--ink)}
.fala__bloco .tit{margin-top:.9rem}

@media (min-width:900px){
  /* três tempos de fala + a tela do palco */
  .fecho{height:calc(3 * 115vh + 100svh)}
  .fecho__palco{position:sticky;top:var(--barra);height:calc(100svh - var(--barra));
    display:grid;align-content:center;padding:0 var(--g);overflow:hidden}
  .fecho__grade{grid-template-columns:minmax(0,1fr) minmax(0,.58fr)}
  /* a coluna da fala precisa de altura própria: os três blocos ficam
     empilhados no MESMO lugar, então ela não pode colapsar */
  .fala{position:relative;min-height:30rem}
  .fala__bloco{position:absolute;inset:0 0 auto 0;
    opacity:0;visibility:hidden;will-change:opacity,transform}
  .fala .tit{font-size:clamp(1.9rem,3.6vw,2.9rem);max-width:18ch}
  .retrato img{max-height:calc(100svh - var(--barra) - 7rem);
    object-fit:cover;object-position:50% 22%}
}
@media (max-width:899.98px){
  /* sem palco: os três tempos viram três blocos em sequência */
  .fecho{padding:clamp(3.6rem,8vw,7rem) var(--g)}
  .fala__bloco + .fala__bloco{margin-top:clamp(2.4rem,6vw,3.6rem);
    padding-top:clamp(2.4rem,6vw,3.6rem);border-top:1px solid var(--rule)}
  .fecho .retrato{margin-top:clamp(2.4rem,6vw,3.6rem)}
}
.sem-palco .fala{position:relative;min-height:0}
.sem-palco .fala__bloco{position:relative;inset:auto;opacity:1!important;
  visibility:visible!important;transform:none!important}



/* ⚠️ O atributo `hidden` vale display:none pela folha do navegador — que
   QUALQUER regra de classe com `display` derruba. `.btn{display:inline-flex}`
   fazia o botão continuar na tela com a ficha aberta. Isto conserta pra
   todos os casos, não só o botão. */
[hidden]{display:none!important}



/* ── MODAL DA FICHA ──────────────────────────────────────────────────
   `<dialog>` nativo. O visual segue a Direção C: papel, filete, sem canto
   arredondado. `max-height` + `overflow:auto` garantem que em tela curta o
   formulário role DENTRO do modal em vez de vazar — foi o defeito que
   matou a versão inline. */
.modal{border:0;padding:0;background:transparent;max-width:min(30rem,92vw);width:100%;
  max-height:min(88svh,44rem);overflow:visible}
.modal::backdrop{background:rgba(28,27,24,.62);backdrop-filter:blur(3px)}
.modal .ficha,.modal .ficha__ok{position:relative;background:var(--paper);
  border:1px solid var(--rule-strong);padding:clamp(1.6rem,4vw,2.4rem);
  max-height:min(88svh,44rem);overflow-y:auto;max-width:none;margin:0}
.modal__x{position:absolute;top:.5rem;right:.6rem;background:none;border:0;
  font-size:1.6rem;line-height:1;color:var(--ink-2);cursor:pointer;
  padding:.3rem .5rem;min-height:2.2rem}
.modal__x:hover{color:var(--ink)}
.ficha__titulo{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2rem);
  margin:0;line-height:1.1}
.ficha__sub{font-size:.93rem;color:var(--ink-2);margin:.5rem 0 .3rem;max-width:38ch}
.ficha__ok .btn{margin-top:1.2rem}
@media (max-width:560px){
  .modal{max-width:100vw;max-height:100svh}
  .modal .ficha,.modal .ficha__ok{max-height:100svh;min-height:100svh;border:0}
}

/* ── A FICHA DO DIAGNÓSTICO ──────────────────────────────────────────
   Abre no lugar do botão, dentro do mesmo palco. Campo alto e filete só
   embaixo — a gramática da Direção C não tem caixinha arredondada. */
.ficha{display:grid;gap:1rem;margin-top:1.4rem;max-width:38ch}
.ficha label{display:grid;gap:.4rem;font-family:var(--mono);font-size:.63rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.ficha input{font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule-strong);
  padding:.55rem 0;min-height:2.6rem}
.ficha input::placeholder{color:var(--rule-strong)}
.ficha input:focus{outline:0;border-bottom-color:var(--ink)}
.ficha input:focus-visible{box-shadow:0 2px 0 0 var(--limao)}
.ficha .btn{margin-top:.4rem;justify-self:start}
.ficha__erro{font-size:.9rem;color:var(--ink);border-left:2px solid var(--limao);
  padding-left:.8rem;margin:0}
.ficha__consent,.ficha__wa{font-size:.76rem;color:var(--ink-2);margin:0;max-width:40ch}
.ficha__ok{margin-top:1.4rem;max-width:40ch}
.ficha__ok .tit{font-family:var(--serif);font-size:1.7rem;margin:0 0 .5rem}

/* ── RETRATO: o manifesto e o convite passam a ter rosto ─────────────
   A prosa dizia "se resolve arrumando a casa" sem dono nenhum. Numa casa
   founder-led, quem afirma isso tem que ser alguém — e é a mesma pessoa que
   vai responder no WhatsApp. Foto à direita, texto à esquerda. */
.env--retrato{display:grid;gap:clamp(1.8rem,4vw,3.6rem);align-items:start}
@media (min-width:900px){
  .env--retrato{grid-template-columns:minmax(0,1fr) minmax(0,.62fr);max-width:1240px}
  .env--retrato .env__texto{max-width:62ch}
}
.retrato{margin:0;position:relative}
.retrato img{width:100%;height:auto;border:1px solid var(--rule-strong);
  filter:saturate(.88) contrast(1.02)}
.retrato figcaption{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-2);margin-top:.7rem}
/* o filete curto da Direção C, cotando o retrato */
.retrato::before{content:"";position:absolute;left:-1px;top:-13px;width:60px;height:1px;
  background:var(--rule-strong)}

/* Só o TEXTO se move; a foto fica parada (decisão do Alessandro, 17/08).
   Faz sentido: ela é o ponto fixo da seção — o rosto de quem fala — e é o
   texto que chega. Duas coisas entrando ao mesmo tempo competiam.
   `view()` é timeline de rolagem nativa: sem JS, sem listener. Onde o
   navegador não suportar, o texto simplesmente já nasce no lugar. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .env--retrato .env__texto > *{animation:textoSobe linear both;
      animation-timeline:view();animation-range:entry 4% cover 34%}
  }
}
@keyframes textoSobe{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.indice__linha{display:grid;grid-template-columns:3.2rem 1fr;gap:1rem;align-items:baseline;
  padding:1.1rem 0;border-bottom:1px solid var(--rule);text-decoration:none}
@media(min-width:820px){.indice__linha{grid-template-columns:3.2rem 14rem 1fr auto}}
.indice__n{font-family:var(--mono);font-size:.7rem;color:var(--rule-strong)}
.indice__t{font-family:var(--serif);font-size:1.26rem}
.indice__d{color:var(--ink-2);font-size:.92rem}
.indice__e{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--rule-strong)}

.rodape{padding:2.6rem var(--g);border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;
  gap:.8rem 2rem;justify-content:space-between;font-size:.82rem;color:var(--ink-2)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .cena__texto,.prancha img{transform:none}
}