/* =========================================================================
   Dr. Norton Luiz Nóbrega — folha principal
   Ordem das camadas resolve especificidade sem !important.
   Ver design.md para a razão de cada decisão.
   ========================================================================= */

@layer reset, tokens, base, layout, componentes, secoes, utilidades;

/* ---------- Fontes (fora de camada: @font-face não cascateia) ----------
   Só Open Sans, sem as variantes Condensed/SemiCondensed. A hierarquia
   vem do peso e do tamanho, não da largura da letra. */

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ============================ RESET ============================ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html { -webkit-text-size-adjust: 100%; }

  body { -webkit-font-smoothing: antialiased; }

  img, picture, video, svg { display: block; max-width: 100%; }
  img, video { height: auto; }

  input, button, textarea, select { font: inherit; color: inherit; }

  p, h1, h2, h3, h4 { overflow-wrap: break-word; }

  ul, ol { list-style: none; padding: 0; }

  a { color: inherit; text-decoration: none; }
}

/* ============================ TOKENS ============================ */
@layer tokens {
  :root {
    /* cor — ver design.md §2. #C88F4A nunca recebe nem carrega texto (2,71:1). */
    --areia:       #FBFBFB;
    --areia-quente:#F7EFE4;   /* texto secundário sobre o ouro escuro: 4,98:1 */
    --nevoa:       #F3F2F1;
    --tinta:       #2D2D2D;
    --grafite:     #424345;
    --ouro:        #C88F4A;
    --ouro-fundo:  #8F5C0B;
    --linha:       rgba(200, 143, 74, .22);
    --linha-forte: rgba(200, 143, 74, .55);
    --linha-neutra:rgba(45, 45, 45, .10);

    /* tipo */
    --f-corpo:  "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    --t-display: clamp(2.35rem, 4.9vw, 4rem);
    --t-h2:      clamp(1.7rem, 3.2vw, 2.6rem);
    --t-h3:      clamp(1.15rem, 1.4vw, 1.3rem);
    --t-lead:    clamp(1.1rem, 1.5vw, 1.3rem);
    --t-corpo:   1.0625rem;
    --t-peq:     .9375rem;
    --t-eyebrow: .75rem;

    /* espaço */
    --largura-max: 1180px;
    --calha-fio:   72px;
    --medida:      68ch;

    --e-1: .5rem;  --e-2: 1rem;  --e-3: 1.5rem;
    --e-4: 2.5rem; --e-5: 4rem;  --e-6: 6rem;
    --e-secao: clamp(5rem, 11vw, 11.25rem);
    --borda-pag: clamp(1.25rem, 5vw, 3rem);

    /* movimento */
    --dur-rapida: 200ms;
    --dur-media:  300ms;
    --dur-lenta:  700ms;
    /* Desaceleração exponencial, sem bounce. A curva antiga era uma quad,
       que em 300ms lê como "linear com jeitinho". */
    --ease:         cubic-bezier(.25, 1, .5, 1);      /* quart, para estado  */
    --ease-entrada: cubic-bezier(.16, 1, .3, 1);      /* expo, para entrada  */

    --altura-topo: 4.75rem;
  }
}

/* ============================ BASE ============================ */
@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--altura-topo) + 1rem); }

  body {
    background: var(--areia);
    color: var(--grafite);
    font-family: var(--f-corpo);
    font-size: var(--t-corpo);
    font-weight: 400;
    line-height: 1.75;
  }

  h1, h2 {
    font-family: var(--f-corpo);
    font-weight: 300;
    color: var(--tinta);
    letter-spacing: -.018em;
    /* deixa o navegador equilibrar as linhas em vez de empurrar tudo
       para a esquerda com uma última linha órfã */
    text-wrap: balance;
  }
  h1 { font-size: var(--t-display); line-height: 1.08; }
  h2 { font-size: var(--t-h2);      line-height: 1.15; }

  h3, h4 {
    font-family: var(--f-corpo);
    font-weight: 700;
    color: var(--tinta);
    line-height: 1.3;
    letter-spacing: -.005em;
  }
  h3 { font-size: var(--t-h3); }
  h4 { font-size: 1rem; }

  strong, b { font-weight: 600; color: var(--tinta); }

  /* A ênfase do sistema: Condensed ExtraBold dentro do título Light. */
  h1 strong, h2 strong { font-family: var(--f-corpo); font-weight: 800; letter-spacing: -.022em; }

  ::selection { background: var(--ouro); color: #fff; }

  :focus-visible {
    outline: 2px solid var(--ouro-fundo);
    outline-offset: 3px;
    border-radius: 2px;
  }
}

/* ============================ LAYOUT ============================ */
@layer layout {
  .envoltorio { width: 100%; overflow-x: clip; }

  .contem {
    width: 100%;
    max-width: var(--largura-max);
    margin-inline: auto;
    padding-inline: var(--borda-pag);
  }

  .secao { padding-block: var(--e-secao); position: relative; overflow: clip; }
  .secao-escura { background: var(--tinta); color: rgba(251, 251, 251, .86); }
  .secao-nevoa  { background: var(--nevoa); }

  .secao-escura h1,
  .secao-escura h2,
  .secao-escura h3 { color: var(--areia); }
  /* strong tem cor própria (tinta) e sumia dentro da faixa escura */
  .secao-escura strong,
  .secao-escura b { color: var(--areia); }

  /* Faixa em ouro escuro. #FBFBFB sobre #8F5C0B = 5,48:1. */
  .secao-ouro { background: var(--ouro-fundo); color: var(--areia); }
  .secao-ouro h1,
  .secao-ouro h2,
  .secao-ouro h3,
  .secao-ouro strong,
  .secao-ouro b { color: var(--areia); }

  /* O conteúdo sempre acima da marca d'água. */
  .secao > .contem { position: relative; z-index: 1; }

  /* Cabeçalho de seção: eyebrow + título + intro, ancorados à esquerda.
     A medida vai em cada elemento, nunca no contêiner: "ch" resolve contra a
     fonte do próprio elemento, e o título usa a Condensed, não a do corpo. */
  .cabeca { margin-bottom: var(--e-5); }
  .cabeca h1, .cabeca h2 { max-width: 30ch; }
  .cabeca-intro { margin-top: var(--e-3); max-width: 62ch; text-wrap: pretty; }

  .grade-3 {
    display: grid;
    gap: 1px var(--e-4);
    grid-template-columns: 1fr;
  }
  @media (min-width: 640px)  { .grade-3 { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .grade-3 { grid-template-columns: repeat(3, 1fr); } }

  .grade-2 { display: grid; gap: var(--e-4); grid-template-columns: 1fr; }
  @media (min-width: 800px) { .grade-2 { grid-template-columns: 1fr 1fr; gap: var(--e-6); } }
}

/* ============================ COMPONENTES ============================ */
@layer componentes {

  /* ---- eyebrow ---- */
  .eyebrow {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    font-family: var(--f-corpo);
    font-weight: 700;
    font-size: var(--t-eyebrow);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ouro-fundo);
    margin-bottom: var(--e-3);
  }
  .eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--ouro);
    flex: none;
    /* alinha com a primeira linha, não com o centro do bloco quebrado */
    transform: translateY(-.3em);
  }
  .secao-escura .eyebrow { color: var(--ouro); }

  /* ---- botões ---- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    min-height: 44px;
    padding: .875rem 1.75rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--f-corpo);
    font-weight: 600;
    font-size: var(--t-peq);
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--dur-media) var(--ease),
                border-color var(--dur-media) var(--ease),
                color var(--dur-media) var(--ease);
  }
  .btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }

  .btn-principal { background: var(--ouro-fundo); color: var(--areia); }
  .btn-principal:hover { background: var(--tinta); }

  /* Retorno do toque. Sem isto, no celular o botão não confirma o aperto e a
     pessoa toca duas vezes achando que não pegou. */
  .btn:active { transform: translateY(1px); }
  .btn { transition: background-color var(--dur-media) var(--ease),
                     border-color var(--dur-media) var(--ease),
                     color var(--dur-media) var(--ease),
                     transform var(--dur-rapida) var(--ease); }

  .btn-secundario { background: transparent; color: var(--tinta); border-color: var(--linha-forte); }
  .btn-secundario:hover { background: var(--tinta); color: var(--areia); border-color: var(--tinta); }

  .secao-escura .btn-secundario { color: var(--areia); border-color: rgba(200, 143, 74, .45); }
  .secao-escura .btn-secundario:hover { background: var(--areia); color: var(--tinta); border-color: var(--areia); }

  .grupo-btn { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }

  /* ---- link de texto: sublinhado que cresce da esquerda ---- */
  .link {
    color: var(--ouro-fundo);
    font-weight: 600;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: background-size var(--dur-media) var(--ease);
    padding-bottom: 2px;
  }
  .link:hover, .link:focus-visible { background-size: 100% 1px; }

  .link-seta { display: inline-flex; align-items: center; gap: .4rem; }
  .link-seta::after {
    content: "→";
    transition: transform var(--dur-media) var(--ease);
  }
  .link-seta:hover::after { transform: translateX(3px); }

  /* ---- cartão sem caixa: hairline no topo ---- */
  .cartao {
    position: relative;
    display: block;
    padding-top: var(--e-3);
    padding-bottom: var(--e-4);
    transition: transform var(--dur-media) var(--ease);
  }

  /* A régua de cima é este pseudo, não um `border-top`: assim ela pode ser
     varrida. Na entrada o fio dourado atravessa a régua da esquerda para a
     direita e, ao chegar, assenta na hairline neutra. O ouro fica reservado
     ao hover, que é o que ele sinaliza. */
  .cartao::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: var(--linha);
    transform-origin: left;
    transition: background-color var(--dur-media) var(--ease);
  }
  .js .cartao::before { transform: scaleX(0); background: var(--ouro); }
  .js .surge-visivel.cartao::before {
    transform: scaleX(1);
    background: var(--linha);
    transition: transform var(--dur-lenta) var(--ease-entrada) var(--atraso, 0ms),
                background-color var(--dur-media) linear calc(var(--atraso, 0ms) + var(--dur-lenta));
  }
  .cartao-titulo {
    font-family: var(--f-corpo);
    font-weight: 700;
    font-size: var(--t-h3);
    line-height: 1.3;
    letter-spacing: -.005em;
    color: var(--tinta);
    margin-bottom: .5rem;
  }
  .cartao-texto  { font-size: var(--t-peq); }
  .cartao-marca {
    display: block;
    font-family: var(--f-corpo);
    font-weight: 700;
    font-size: var(--t-eyebrow);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ouro-fundo);
    margin-bottom: .75rem;
  }

  a.cartao:hover { transform: translateY(-2px); }
  a.cartao:hover::before,
  a.cartao:focus-visible::before { background: var(--ouro); }
  a.cartao:hover .cartao-titulo { color: var(--ouro-fundo); }
  .cartao-titulo { transition: color var(--dur-media) var(--ease); }

  /* ---- lista de links com hairline ---- */
  .lista-linhas { border-top: 1px solid var(--linha); }
  .lista-linhas li { border-bottom: 1px solid var(--linha); }
  .lista-linhas a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e-2);
    padding: .9rem 0;
    font-size: var(--t-peq);
    color: var(--grafite);
    transition: color var(--dur-media) var(--ease), padding-left var(--dur-media) var(--ease);
  }
  /* A seta fica visível o tempo todo: era o único sinal de que a linha é um
     link, e escondê-la até o hover deixava a lista com cara de texto. */
  .lista-linhas a::after {
    content: "→";
    color: var(--ouro-fundo);
    transition: transform var(--dur-media) var(--ease);
  }
  .lista-linhas a:hover { color: var(--ouro-fundo); padding-left: .5rem; }
  .lista-linhas a:active { color: var(--tinta); }
  .lista-linhas a:hover::after { transform: translateX(4px); }

  /* ---- citação em destaque ---- */
  .destaque {
    border-left: 2px solid var(--ouro);
    padding: var(--e-3) 0 var(--e-3) var(--e-4);
    font-size: var(--t-lead);
    line-height: 1.6;
    color: var(--tinta);
    max-width: 56ch;
  }
  .destaque-fonte {
    display: block;
    margin-top: var(--e-2);
    font-family: var(--f-corpo);
    font-weight: 700;
    font-size: var(--t-eyebrow);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ouro-fundo);
  }

  /* ---- marca d'água ---- */
  /* O símbolo da marca, gigante e quase apagado, encostado na borda direita
     da seção. Decorativo: fica fora do fluxo e do alcance do leitor de tela. */
  .marca-dagua {
    position: absolute;
    top: 50%;
    right: 0;
    height: 110%;
    width: auto;
    max-width: none;
    /* 35% da largura da própria marca sangra para fora da borda direita.
       Como o recuo é relativo à marca, e não à seção, o enquadramento é o
       mesmo numa seção curta e numa seção longa. */
    transform: translate(35%, -50%);
    opacity: var(--marca-dagua-opacidade, .07);
    pointer-events: none;
    user-select: none;
    z-index: 0;
  }
  @media (max-width: 899px) {
    .marca-dagua { height: 70%; transform: translate(46%, -50%); }
  }

  /* ---- afordância de clique nos cartões ---- */
  /* Sem isto o cartão parece texto solto: nada indica que ele leva a algum
     lugar. A seta aproxima do ponteiro no hover. */
  .cartao-mais {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .875rem;
    font-weight: 600;
    font-size: var(--t-peq);
    color: var(--ouro-fundo);
  }
  .cartao-mais::after {
    content: "→";
    transition: transform var(--dur-media) var(--ease);
  }
  a.cartao:hover .cartao-mais::after,
  a.cartao:focus-visible .cartao-mais::after { transform: translateX(4px); }

  /* Aviso curto no cabeçalho da seção: "isto aqui é clicável". */
  .dica-clique {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: var(--e-3);
    font-size: var(--t-peq);
    font-weight: 600;
    color: var(--ouro-fundo);
  }
  .dica-clique svg {
    width: 17px; height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
  }
  .secao-escura .dica-clique,
  .secao-ouro .dica-clique { color: var(--ouro); }
}

/* ============================ O FIO ============================ */
@layer componentes {
  /* Traço contínuo na calha esquerda. Preenche conforme o scroll — é
     decorativo e, ao mesmo tempo, indica progresso de leitura.

     Começa abaixo do topo fixo. Antes ele nascia em `top: 0` e os primeiros
     77px ficavam atrás do cabeçalho: os primeiros 8% de rolagem não moviam
     nada visível, e era metade da sensação de "não acompanha o scroll". */
  .fio {
    position: fixed;
    top: var(--altura-topo);
    left: 0;
    width: var(--calha-fio);
    height: calc(100dvh - var(--altura-topo));
    pointer-events: none;
    z-index: 1;
    display: none;
  }
  @media (min-width: 900px) {
    .fio { display: block; }
  }

  .fio-trilha {
    stroke: var(--ouro);
    stroke-width: 2.5;
    fill: none;
    opacity: .18;
    stroke-linecap: round;
  }
  .fio-traco {
    stroke: var(--ouro-fundo);
    stroke-width: 5;
    fill: none;
    opacity: 1;
    stroke-linecap: round;
    filter: drop-shadow(0 0 2px rgba(251, 251, 251, .85))
            drop-shadow(0 0 8px rgba(200, 143, 74, .40));
    /* pathLength="1" no SVG: o traço inteiro mede 1, então o preenchimento
       é o próprio dashoffset indo de 1 a 0. Sem JS nenhum no meio. */
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  /* Caminho preferido: animação atrelada à rolagem, resolvida pelo próprio
     navegador no compositor. Não passa pelo main thread, então não tem como
     ficar um quadro atrás do conteúdo. O JS em site.js só entra quando este
     @supports falha. */
  @keyframes fio-preenche {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
  }
  @supports (animation-timeline: scroll()) {
    .fio-traco {
      animation: fio-preenche linear forwards;
      animation-timeline: scroll(root block);
    }
  }
}

/* ============================ TOPO ============================ */
@layer componentes {
  .topo {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(251, 251, 251, .88);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-media) var(--ease);
  }
  .topo-rolado { border-bottom-color: var(--linha); }

  .topo-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    min-height: var(--altura-topo);
  }

  .marca { display: flex; align-items: center; gap: .875rem; }
  .marca img { width: 40px; height: 40px; flex: none; }
  .marca-nome {
    display: block;
    font-weight: 600;
    font-size: .9375rem;
    color: var(--tinta);
    line-height: 1.25;
  }
  .marca-papel {
    display: block;
    font-family: var(--f-corpo);
    font-weight: 700;
    font-size: .625rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ouro-fundo);
  }

  .nav { display: none; align-items: center; gap: var(--e-4); }
  @media (min-width: 1000px) { .nav { display: flex; } }
  .nav a {
    font-size: var(--t-peq);
    color: var(--grafite);
    transition: color var(--dur-media) var(--ease);
  }
  .nav a:hover { color: var(--ouro-fundo); }

  .topo-cta { display: none; }
  @media (min-width: 700px) { .topo-cta { display: inline-flex; } }

  /* menu mobile */
  .btn-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: none; border: none; cursor: pointer;
    color: var(--tinta);
  }
  @media (min-width: 1000px) { .btn-menu { display: none; } }
  .btn-menu svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; }

  /* O painel só existe abaixo de 1000px, onde a .nav horizontal some.
     Sem JS ele fica no fluxo, aberto: é a única navegação que resta nessa
     largura, e esconder o que o JS não vai revelar deixaria a página sem
     menu nenhum (a mesma regra do .js que vale para o .surge). */
  .menu {
    border-top: 1px solid var(--linha);
    padding-block: var(--e-3) var(--e-4);
  }
  @media (min-width: 1000px) { .menu { display: none; } }

  /* Com JS o painel sai do fluxo e paira sobre a página. Empurrar o conteúdo
     para baixo a cada toque desloca justamente o trecho que a pessoa estava
     lendo; pairando, a página fica onde estava e o menu se sobrepõe. */
  .js .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding-inline: var(--borda-pag);
    /* Celular deitado: o painel não pode passar do fim da tela sem rolagem */
    max-height: calc(100dvh - var(--altura-topo));
    overflow-y: auto;
    /* Opaco, e não translúcido como a barra: um elemento com backdrop-filter
       (o .topo) vira raiz de fundo, então o blur de um filho não enxerga a
       página atrás e o texto do hero atravessava o painel legível. */
    background: var(--areia);
    border-top-color: var(--linha);
    border-bottom: 1px solid var(--linha);
    box-shadow: 0 24px 44px -28px rgba(45, 45, 45, .5);
    opacity: 0;
    transform: translateY(-.625rem);
    /* `visibility` sai do foco e do leitor de tela quando fechado, e a
       transição de 0s adiada até o fim do fade evita que o painel suma
       antes de terminar de se apagar. */
    visibility: hidden;
    transition: opacity var(--dur-rapida) var(--ease),
                transform var(--dur-rapida) var(--ease),
                visibility 0s linear var(--dur-rapida);
  }
  .js .menu-aberto {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity var(--dur-media) var(--ease-entrada),
                transform var(--dur-media) var(--ease-entrada),
                visibility 0s;
  }

  .menu a {
    display: block;
    padding: .75rem 0;
    font-size: 1rem;
    color: var(--grafite);
    border-bottom: 1px solid var(--linha);
  }
  /* Os itens entram logo atrás do painel, um a um. O escalonamento é curto:
     é confirmação de que o menu abriu, não coreografia. */
  .js .menu a {
    opacity: 0;
    transform: translateY(-.35rem);
    transition: opacity var(--dur-rapida) var(--ease),
                transform var(--dur-rapida) var(--ease),
                color var(--dur-media) var(--ease);
  }
  .js .menu-aberto a { opacity: 1; transform: none; }
  .js .menu-aberto a:nth-child(1) { transition-delay:  60ms; }
  .js .menu-aberto a:nth-child(2) { transition-delay:  95ms; }
  .js .menu-aberto a:nth-child(3) { transition-delay: 130ms; }
  .js .menu-aberto a:nth-child(4) { transition-delay: 165ms; }
  .js .menu-aberto a:nth-child(5) { transition-delay: 200ms; }
  .js .menu-aberto a:nth-child(6) { transition-delay: 235ms; }
  .js .menu-aberto a:nth-child(7) { transition-delay: 270ms; }

  .menu .btn {
    margin-top: var(--e-3);
    width: 100%;
    border-bottom-color: transparent;
  }
  /* `.menu a` é mais específico que `.btn-principal` e pintava o texto do
     botão de grafite sobre o ouro escuro. */
  .menu .btn-principal,
  .menu .btn-principal:hover { color: var(--areia); }

  /* O traçado do ícone vira X pelo JS (o cabeçalho se repete em trinta
     arquivos, então trocar de <svg> no HTML sairia caro). */
}

/* ============================ WHATSAPP FLUTUANTE ============================ */
@layer componentes {
  .zap-nav {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 60;
  }
  .zap {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    min-height: 52px;
    padding: 0 1.375rem;
    border-radius: 999px;
    background: var(--ouro-fundo);
    color: var(--areia);
    font-weight: 600;
    font-size: var(--t-peq);
    box-shadow: 0 6px 24px rgba(45, 45, 45, .18);
    transition: background-color var(--dur-media) var(--ease),
                opacity var(--dur-media) var(--ease),
                transform var(--dur-media) var(--ease);
  }
  .zap:hover { background: var(--tinta); }
  .zap:active { transform: translateY(1px) scale(.98); }
  .zap svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
  .zap-texto { display: none; }
  @media (min-width: 560px) { .zap-texto { display: inline; } }
  @media (max-width: 559px) { .zap { padding: 0; width: 52px; justify-content: center; } }

  /* some quando a seção de contato está à vista, para não cobrir o mapa */
  .zap-oculto { opacity: 0; transform: translateY(8px) scale(.95); pointer-events: none; }
}

/* ============================ SEÇÕES ============================ */
@layer secoes {

  /* ---------- hero ---------- */
  /* A foto (e, quando chegar, o vídeo) não é mais um retângulo ao lado do
     texto: ocupa a faixa de fundo à direita e se dissolve para dentro da
     areia, como nas faixas "É conhecido o medo" e "Três décadas". O
     maquinário é o de .secao-retrato/.retrato-dir; aqui vão só os ajustes
     de proporção, que no hero são outros. */
  .hero {
    padding-block: clamp(3rem, 7vw, 6rem) var(--e-secao);
  }
  .hero h1 { max-width: 18ch; margin-bottom: var(--e-3); }
  .hero-lead {
    font-size: var(--t-lead);
    line-height: 1.6;
    max-width: 46ch;
    margin-bottom: var(--e-4);
  }
  .hero-fundo img,
  .hero-fundo video { width: 100%; height: 100%; object-fit: cover; }

  @media (min-width: 900px) {
    /* A coluna de texto é mais larga que a das outras faixas: aqui ela
       carrega manchete, parágrafo e dois botões, não uma citação. */
    .hero.retrato-dir .retrato-texto { width: 47%; }
    .hero.retrato-dir .retrato-fundo { width: 64%; }
    /* Ele está à esquerda do centro na foto, então a rampa abre mais cedo
       que a das outras faixas: sem isso o rosto cairia justamente na parte
       que se apaga. O opaco começa depois da coluna de texto assim mesmo. */
    .hero.retrato-dir .retrato-fundo img,
    .hero.retrato-dir .retrato-fundo video {
      object-position: 20% 24%;
      -webkit-mask-image: linear-gradient(to right, transparent 0 6%, rgba(0,0,0,.5) 30%, #000 58%);
      mask-image: linear-gradient(to right, transparent 0 6%, rgba(0,0,0,.5) 30%, #000 58%);
    }
  }

  /* Empilhado, a faixa vem depois do texto (é a ordem do HTML) e se dissolve
     nas duas pontas: a de cima para não deixar um corte reto logo abaixo do
     botão, a de baixo para entregar a página à faixa seguinte. */
  @media (max-width: 899px) {
    .hero { padding-bottom: 0; }
    .hero.retrato-dir .retrato-fundo {
      height: clamp(18rem, 68vw, 26rem);
      margin-top: var(--e-4);
      margin-bottom: 0;
    }
    .hero.retrato-dir .retrato-fundo img,
    .hero.retrato-dir .retrato-fundo video {
      object-position: 42% 22%;
      /* Só a ponta de cima se dissolve, para não deixar corte reto embaixo
         do botão. Embaixo a foto vai inteira até a borda da faixa. */
      -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 100%);
      mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 100%);
    }
  }

  /* ---------- quando procurar ----------
     Era a terceira grade de cartões iguais da página, e era a que menos
     combinava com o trabalho que o leitor está fazendo ali: ele não está
     comparando seis opções, está varrendo uma lista atrás de uma que seja a
     dele. Virou índice — linha larga, sintoma em corpo grande, explicação ao
     lado, régua separando. Reconhecer fica mais rápido, e a página deixa de
     repetir o mesmo cartão em três seções seguidas. */
  .sintomas { border-top: 1px solid var(--linha); }
  .sintomas li { border-bottom: 1px solid var(--linha); }

  /* Empilhado: sintoma e seta na primeira linha, explicação atravessando as
     duas colunas embaixo. A seta continua à vista — é o que diz que a linha
     leva a algum lugar, e escondê-la no celular tirava justamente de quem
     mais usa o site. */
  .sintomas a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .3rem var(--e-2);
    padding: var(--e-3) 0;
    align-items: baseline;
    transition: padding-left var(--dur-media) var(--ease);
  }
  .sintomas h3        { grid-row: 1; grid-column: 1; }
  .sintomas-seta      { grid-row: 1; grid-column: 2; }
  .sintomas p         { grid-row: 2; grid-column: 1 / -1; }

  @media (min-width: 820px) {
    .sintomas a {
      grid-template-columns: minmax(0, 21rem) minmax(0, 38rem) auto;
      gap: var(--e-4);
      padding: var(--e-4) 0;
    }
    .sintomas h3,
    .sintomas-seta,
    .sintomas p { grid-row: auto; grid-column: auto; }
  }

  .sintomas h3 {
    font-size: clamp(1.2rem, 2.1vw, 1.6rem);
    font-weight: 600;
    letter-spacing: -.012em;
    line-height: 1.25;
    transition: color var(--dur-media) var(--ease);
  }
  .sintomas p { font-size: var(--t-peq); }

  .sintomas-seta {
    color: var(--ouro-fundo);
    font-weight: 600;
    justify-self: end;
    transition: transform var(--dur-media) var(--ease);
  }
  .sintomas a:hover { padding-left: .625rem; }
  .sintomas a:active h3 { color: var(--tinta); }
  .sintomas a:hover h3 { color: var(--ouro-fundo); }
  .sintomas a:hover .sintomas-seta { transform: translateX(5px); }

  /* ---------- faixa de credenciais ---------- */
  /* Faixa em grafite. #FBFBFB sobre #424345 dá 9,57:1; o detalhe, em
     rgba(251,251,251,.86), dá 7,58:1. O ouro NÃO serve aqui: #C88F4A sobre
     grafite dá 3,53:1, que reprova para texto de corpo pequeno. */
  .credenciais {
    padding-block: var(--e-5);
    background: var(--grafite);
    color: rgba(251, 251, 251, .86);
  }
  .credenciais-grade {
    display: grid;
    gap: var(--e-4);
    grid-template-columns: 1fr;
  }
  @media (min-width: 640px)  { .credenciais-grade { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .credenciais-grade { grid-template-columns: repeat(4, 1fr); } }
  .credencial-titulo {
    display: block;
    font-family: var(--f-corpo);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--areia);
    line-height: 1.3;
    margin-bottom: .3rem;
  }
  .credencial-detalhe { display: block; font-size: var(--t-peq); line-height: 1.5; }

  /* O selo fica só nesta credencial, e de propósito: ele pertence à
     titularidade na SBCP, não às outras três. Espalhá-lo pela faixa daria a
     entender que a sociedade chancela a formação inteira. */
  .credencial-selada { display: flex; align-items: flex-start; gap: .875rem; }
  .credencial-selo {
    width: 3.25rem;
    height: 3.25rem;
    flex: none;
    margin-top: -.15rem;
    /* Disco claro por baixo: o verde da SBCP sobre o grafite dá 1,86:1 e
       sumiria. Recolorir a marca de outra instituição não é opção, então o
       que muda é o que está atrás dela. */
    background: var(--areia);
    border-radius: 50%;
    padding: .3rem;
    box-sizing: content-box;
  }

  /* ---------- passos da consulta ----------
     Linha do tempo de verdade: selo numerado grande sobre um trilho
     pontilhado, com o painel do passo pendurado abaixo. O trilho é
     horizontal no desktop e vertical quando os passos empilham. */
  .passos {
    --selo: 3.5rem;
    --folga-selo: 6px;
    --calha-passo: 4.5rem;
    position: relative;
    display: grid;
    gap: var(--calha-passo);
    padding-top: calc(var(--selo) / 2);
  }
  @media (min-width: 900px) {
    .passos { --calha-passo: var(--e-3); grid-template-columns: repeat(4, 1fr); }
  }

  .passo {
    position: relative;
    background: var(--areia);
    border: 1px solid var(--linha);
    border-radius: 16px;
    padding: calc(var(--selo) / 2 + var(--e-2)) var(--e-3) var(--e-3);
    transition: border-color var(--dur-media) var(--ease),
                transform var(--dur-media) var(--ease),
                box-shadow var(--dur-media) var(--ease);
  }
  /* Sem sombra larga aqui: borda de 1px somada a `box-shadow` de 32px de
     desfoque no mesmo elemento é o padrão "ghost-card". Escolhe-se um dos
     dois. Aqui é a borda, que já é a linguagem do site. */
  .passo:hover {
    border-color: var(--ouro);
    transform: translateY(-3px);
  }

  /* O selo cavalga a borda de cima do painel. O anel na cor da faixa é o
     que "corta" o trilho que passa por trás. */
  .passo-selo {
    position: absolute;
    top: calc(var(--selo) / -2);
    left: var(--e-3);
    z-index: 2;
    display: grid;
    place-items: center;
    width: var(--selo);
    height: var(--selo);
    border-radius: 50%;
    background: var(--areia);
    border: 2px solid var(--ouro);
    box-shadow: 0 0 0 var(--folga-selo) var(--nevoa);
    font-weight: 800;
    font-size: 1.375rem;
    line-height: 1;
    color: var(--ouro-fundo);
    font-variant-numeric: tabular-nums;
    transition: background-color var(--dur-media) var(--ease),
                border-color var(--dur-media) var(--ease),
                color var(--dur-media) var(--ease),
                transform var(--dur-lenta) var(--ease-entrada),
                opacity var(--dur-media) var(--ease-entrada);
  }
  .passo:hover .passo-selo {
    background: var(--ouro-fundo);
    border-color: var(--ouro-fundo);
    color: var(--areia);
  }

  /* Trilho.
     Empilhado: cada passo desenha o trecho que SAI dele, para baixo (::after).
     Lado a lado: cada passo desenha o trecho que CHEGA nele, para a esquerda
     (::before). Nos dois casos o trecho é pintado por cima do painel que já
     foi pintado, nunca por baixo do que vem depois — é isso que evita o
     trilho sumir sob o fundo do painel vizinho. */
  .passo::before,
  .passo::after {
    content: "";
    position: absolute;
    z-index: 0;
    opacity: .75;
  }
  .passo::before { display: none; }
  .passo::after {
    left: calc(var(--e-3) + var(--selo) / 2 - 1px);
    /* começa no pé do painel e morre onde o anel do próximo selo começa */
    top: 100%;
    height: calc(var(--calha-passo) - var(--selo) / 2 - var(--folga-selo));
    width: 2px;
    background-image: linear-gradient(var(--ouro) 0 55%, transparent 55%);
    background-size: 2px 12px;
  }
  .passo:last-child::after { display: none; }

  @media (min-width: 900px) {
    .passo::after  { display: none; }
    .passo::before {
      display: block;
      top: -1px;
      height: 2px;
      /* a calha some no cálculo: o painel anterior começa em -(100% + calha) */
      left: calc(-100% + var(--selo) + var(--folga-selo));
      right: calc(100% - var(--e-3) + var(--folga-selo));
      background-image: linear-gradient(90deg, var(--ouro) 0 55%, transparent 55%);
      background-size: 12px 2px;
    }
    .passo:first-child::before { display: none; }
  }

  .passo-etapa {
    display: block;
    font-weight: 700;
    font-size: var(--t-eyebrow);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ouro-fundo);
    margin-bottom: .4rem;
  }
  .passo h3 { margin-bottom: .5rem; }
  .passo p  { font-size: var(--t-peq); }

  /* ---------- retrato de fundo ----------
     A foto ocupa um dos lados da faixa e se dissolve para dentro dela por
     uma máscara lateral. É máscara, não sobreposição de cor: assim não
     existe emenda a acertar entre a foto e o fundo, seja ele o gradiente
     dourado ou a areia da página. A rampa termina antes da coluna de texto,
     para que nenhuma letra caia sobre pixel de foto. */
  .secao-retrato { position: relative; overflow: clip; }

  /* ---- grão ----
     Uma camada de ruído sobre a faixa inteira, foto e fundo chapado juntos.
     Serve a dois fins: dá textura a um fundo que era cor pura e disfarça a
     emenda da máscara, onde a foto vira fundo.

     O ruído é gerado no próprio CSS (feTurbulence num data URI), então não
     custa requisição nem arquivo. O `feComponentTransfer` estica o
     contraste do ruído: sem ele o grão é uma névoa cinzenta que escurece
     tudo por igual; com ele vira grão de verdade, quase todo transparente
     com pontos escuros esparsos, e é isso que deixa a textura visível sem
     mexer muito no tom.

     `multiply`, e não `soft-light`: sobre uma base quase branca (#FBFBFB) o
     soft-light satura, o desvio medido não passava de dois níveis e a
     textura não aparecia. Multiply só escurece, o que também é o que mantém
     o texto claro da faixa dourada dentro da faixa segura de contraste. */
  .secao-retrato::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-.7'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    mix-blend-mode: multiply;
    opacity: .11;
  }
  /* A faixa dourada é meio-tom e aguenta mais grão antes de aparecer como
     mudança de cor. */
  .secao-medo::after { opacity: .2; }
  /* O grão é irmão do texto e, por ser posicionado, pintaria por cima dele.
     A coluna sobe uma camada: assim o ruído fica só no fundo e na foto. */
  .secao-retrato > .contem { position: relative; z-index: 1; }


  .retrato-fundo {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  .retrato-fundo img { width: 100%; height: 100%; object-fit: cover; }

  .retrato-dir .retrato-fundo { inset: 0 0 0 auto; width: 72%; }
  .retrato-dir .retrato-fundo img {
    object-position: 58% 44%;
    -webkit-mask-image: linear-gradient(to right, transparent 0 30%, rgba(0,0,0,.45) 54%, #000 78%);
    mask-image: linear-gradient(to right, transparent 0 30%, rgba(0,0,0,.45) 54%, #000 78%);
  }

  .retrato-esq .retrato-fundo { inset: 0 auto 0 0; width: 54%; }
  .retrato-esq .retrato-fundo img {
    object-position: 50% 16%;
    -webkit-mask-image: linear-gradient(to left, transparent 0 6%, rgba(0,0,0,.45) 30%, #000 56%);
    mask-image: linear-gradient(to left, transparent 0 6%, rgba(0,0,0,.45) 30%, #000 56%);
  }

  @media (min-width: 900px) {
    .retrato-dir .retrato-texto { width: 44%; }
    .retrato-esq .retrato-texto { width: 50%; margin-left: auto; }
  }

  /* Empilhado: a foto sai do fundo e vira um bloco no topo da faixa, sangrando
     de borda a borda e dissolvendo para baixo. O texto vem embaixo, inteiro. */
  @media (max-width: 899px) {
    .secao-retrato { padding-top: 0; }
    .retrato-fundo {
      position: relative;
      inset: auto;
      width: 100%;
      height: clamp(19rem, 62vw, 27rem);
      margin-bottom: var(--e-4);
    }
    .retrato-dir .retrato-fundo,
    .retrato-esq .retrato-fundo { width: 100%; }
    .retrato-dir .retrato-fundo img,
    .retrato-esq .retrato-fundo img {
      object-position: 50% 16%;
      -webkit-mask-image: linear-gradient(to bottom, #000 0 46%, rgba(0,0,0,.45) 74%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 0 46%, rgba(0,0,0,.45) 74%, transparent 100%);
    }
    /* O retrato é 2:3. Numa calha larga e baixa o `cover` mostrava só uma
       faixa da altura da foto, e a dissolução começava logo abaixo do queixo:
       lia-se como recorte no pescoço. A calha do "Três décadas" fica mais
       alta e a rampa desce para o jaleco, então o que se apaga é o tronco. */
    .retrato-esq .retrato-fundo { height: clamp(25rem, 104vw, 34rem); }
    .retrato-esq .retrato-fundo img {
      object-position: 50% 0%;
      -webkit-mask-image: linear-gradient(to bottom, #000 0 66%, rgba(0,0,0,.45) 86%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 0 66%, rgba(0,0,0,.45) 86%, transparent 100%);
    }
  }

  /* ---------- currículo em cartões ---------- */
  .curriculo {
    display: grid;
    gap: .625rem;
    margin-top: var(--e-4);
  }
  @media (min-width: 1080px) { .curriculo { grid-template-columns: 1fr 1fr; } }

  .cred {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1rem;
    background: var(--areia);
    border: 1px solid var(--linha);
    border-radius: 12px;
    transition: border-color var(--dur-media) var(--ease),
                background-color var(--dur-media) var(--ease);
  }
  .cred:hover { border-color: var(--linha-forte); background: #fff; }

  .cred-icone {
    width: 22px; height: 22px;
    flex: none;
    margin-top: .1rem;
    fill: none;
    stroke: var(--ouro-fundo);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .cred-ano {
    display: block;
    font-weight: 700;
    font-size: .6875rem;
    letter-spacing: .12em;
    color: var(--ouro-fundo);
    margin-bottom: .1rem;
  }
  .cred-titulo {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--tinta);
    line-height: 1.3;
  }
  .cred-onde {
    font-size: var(--t-eyebrow);
    line-height: 1.45;
    margin-top: .15rem;
  }

  .registro {
    margin-top: var(--e-3);
    font-family: var(--f-corpo);
    font-weight: 700;
    font-size: var(--t-eyebrow);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ouro-fundo);
  }

  /* ---------- faixa do medo ----------
     Gradiente entre os dourados da paleta. A direção é horizontal de
     propósito, não diagonal: numa diagonal a posição da cor depende também da
     altura da faixa, e no mobile — faixa estreita e alta — o extremo claro
     descia para trás do texto e derrubava o contraste a 2,8:1. Na horizontal
     a cor de cada ponto depende só do x, que é previsível.

     Empilhado, o texto ocupa a largura toda, então o gradiente inteiro fica
     dentro da faixa segura: de #8F5C0B (5,48:1 com #FBFBFB) a #9A6410 (4,83:1).
     Lado a lado, o extremo claro (--ouro, #C88F4A) entra só depois de 72%,
     onde a foto já é opaca e não há texto — sob texto ele daria 2,02:1. */
  .secao-medo {
    color: var(--areia);
    background: linear-gradient(to bottom, #8F5C0B 0%, #935E0C 55%, #96600D 100%);
  }
  @media (min-width: 900px) {
    .secao-medo {
      background: linear-gradient(to right,
        #8F5C0B 0%,
        #935E0C 48%,
        #A96F1C 72%,
        var(--ouro) 100%);
    }
  }
  .secao-medo .eyebrow { color: var(--areia-quente); }
  .secao-medo .eyebrow::before { background: var(--areia-quente); opacity: .7; }

  .secao-medo .destaque {
    border-left-color: rgba(251, 251, 251, .45);
    color: var(--areia);
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    font-weight: 300;
    line-height: 1.55;
    max-width: 46ch;
  }
  .secao-medo .destaque-fonte { color: var(--areia-quente); }

  /* ---------- faixa de CTA ---------- */
  .faixa-cta { text-align: left; }
  .faixa-cta h2 { max-width: 20ch; margin-bottom: var(--e-3); }
  .faixa-cta p  { max-width: 52ch; margin-bottom: var(--e-4); }

  /* ---------- contato ---------- */
  /* ---------- cartão do WhatsApp ---------- */
  /* O agendamento é o único caminho de conversão da página, e como linha de
     lista ele tinha o mesmo peso do CEP. Aqui vira superfície cheia: o ouro
     escuro é o mesmo do botão principal, então o bloco lê como botão grande
     sem repetir um botão logo abaixo. Texto em areia, nunca em ouro. */
  .zap-cartao {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    margin-bottom: var(--e-4);
    border-radius: 18px;
    background: var(--ouro-fundo);
    color: var(--areia);
    transition: background-color var(--dur-media) var(--ease),
                transform var(--dur-rapida) var(--ease);
  }
  .zap-cartao:hover { background: var(--tinta); }
  .zap-cartao:active { transform: translateY(1px); }

  .zap-cartao-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(251, 251, 251, .14);
  }
  .zap-cartao-icone svg { width: 28px; height: 28px; fill: var(--areia); }

  .zap-cartao-texto { display: block; min-width: 0; }
  .zap-cartao-rotulo {
    display: block;
    font-family: var(--f-corpo);
    font-weight: 700;
    font-size: var(--t-eyebrow);
    letter-spacing: .14em;
    text-transform: uppercase;
    /* areia quente: 4,98:1 sobre o ouro escuro */
    color: var(--areia-quente);
  }
  .zap-cartao-numero {
    display: block;
    font-family: var(--f-corpo);
    font-weight: 600;
    font-size: clamp(1.375rem, 4.5vw, 1.75rem);
    line-height: 1.2;
    margin-top: .2rem;
  }
  .zap-cartao-nota {
    display: block;
    margin-top: .3rem;
    text-wrap: pretty;
    font-size: var(--t-peq);
    color: var(--areia-quente);
  }
  .zap-cartao-seta {
    flex: none;
    width: 22px; height: 22px;
    stroke: currentColor; fill: none; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform var(--dur-media) var(--ease);
  }
  .zap-cartao:hover .zap-cartao-seta { transform: translateX(4px); }

  @media (max-width: 419px) {
    .zap-cartao { padding: var(--e-3); gap: .875rem; }
    .zap-cartao-icone { width: 44px; height: 44px; }
    .zap-cartao-icone svg { width: 24px; height: 24px; }
    .zap-cartao-seta { display: none; }
  }

  .contato-dados { display: grid; gap: var(--e-4); }
  .dado-rotulo {
    display: block;
    font-family: var(--f-corpo);
    font-weight: 700;
    font-size: var(--t-eyebrow);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ouro-fundo);
    margin-bottom: .35rem;
  }
  .dado-valor { font-size: var(--t-peq); line-height: 1.7; color: var(--tinta); }
  .mapa {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--linha);
  }
  @media (min-width: 800px) { .mapa { aspect-ratio: 1 / 1; } }

  /* ---------- rodapé ---------- */
  /* `position` + `overflow: clip` são o que a marca d'água pede: ela se
     posiciona contra o rodapé e sangra para fora da borda direita sem
     alargar a página. Mesmo arranjo da faixa "Quanto antes você olha". */
  .rodape {
    position: relative;
    overflow: clip;
    background: var(--tinta);
    color: rgba(251, 251, 251, .70);
    padding-block: var(--e-6) var(--e-4);
  }
  .rodape-grade { display: grid; gap: var(--e-5); grid-template-columns: 1fr; }
  @media (min-width: 800px) { .rodape-grade { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--e-4); } }
  .rodape-nome { font-family: var(--f-corpo); font-weight: 300; font-size: 1.75rem; color: var(--areia); line-height: 1.1; }
  .rodape-nome strong { font-family: var(--f-corpo); font-weight: 800; color: var(--areia); }
  .rodape h3 {
    color: var(--areia);
    font-size: var(--t-eyebrow);
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: var(--e-2);
  }
  .rodape li a { display: block; padding-block: .3rem; font-size: var(--t-peq); transition: color var(--dur-media) var(--ease); }
  .rodape li a:hover { color: var(--ouro); }
  /* Grade, não flex: como item flex o aviso não crescia (o `flex-grow` é 0
     por padrão), e por isso ele se espremia em três linhas curtas à esquerda
     com um vazio enorme ao lado, por mais que a `max-width` fosse aumentada.
     Aqui ele ocupa a coluna inteira e o © fica na segunda. */
  .rodape-base {
    margin-top: var(--e-5);
    padding-top: var(--e-3);
    border-top: 1px solid rgba(251, 251, 251, .14);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--e-2) var(--e-4);
    font-size: .8125rem;
    /* linha longa precisa de mais entrelinha para o olho achar a próxima */
    line-height: 1.75;
  }
  .rodape-base > :last-child { justify-self: end; }
  .aviso { max-width: none; text-wrap: pretty; }

  @media (max-width: 599px) {
    .rodape-base { grid-template-columns: 1fr; }
    .rodape-base > :last-child { justify-self: start; }
  }
}

/* ============================ UTILIDADES ============================ */
@layer utilidades {
  .so-leitor {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .pular {
    position: absolute;
    left: var(--e-2);
    top: -100px;
    z-index: 100;
    padding: .75rem 1.25rem;
    background: var(--tinta);
    color: var(--areia);
    border-radius: 999px;
    font-size: var(--t-peq);
    transition: top var(--dur-media) var(--ease);
  }
  .pular:focus { top: var(--e-2); }

  .medida { max-width: var(--medida); }
  .sem-topo { margin-top: 0; }

  /* Reveal de entrada.
     O estado inicial escondido só é aplicado quando há JavaScript para
     revelá-lo depois (a classe .js entra por um script inline no <head>).
     Sem JS a página nasce visível — do contrário o site inteiro sumiria.

     São três entradas, não uma. Uma única entrada idêntica repetida em cada
     bloco da página é o reflexo uniforme: a página inteira "sobe 12px" e o
     movimento deixa de dizer qualquer coisa sobre o que está chegando. Cada
     entrada aqui é a do conteúdo que ela revela. */
  .js .surge {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--dur-lenta) var(--ease-entrada),
                transform var(--dur-lenta) var(--ease-entrada);
    transition-delay: var(--atraso, 0ms);
  }
  .js .surge-visivel { opacity: 1; transform: none; }

  /* Cartão: não sobe. O que entra é o fio dourado varrendo a régua de cima,
     que é a identidade do cartão — e o eco do fio da página. O corpo só
     aparece. Ver .cartao::before em componentes. */
  .js .surge-cartao { opacity: 0; transform: none; }
  .js .surge-cartao.surge-visivel { opacity: 1; }

  /* Passo da consulta: o painel aparece e o selo numerado entra depois,
     crescendo do centro. A sequência dos selos é o assunto da seção. */
  .js .surge-passo { opacity: 0; transform: none; }
  .js .surge-passo.surge-visivel { opacity: 1; }
  .js .surge-passo .passo-selo {
    transform: scale(.55);
    opacity: 0;
  }
  .js .surge-passo.surge-visivel .passo-selo {
    transform: none;
    opacity: 1;
    transition-delay: calc(var(--atraso, 0ms) + 160ms);
  }
}

/* ============================ MOVIMENTO REDUZIDO ============================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .surge { opacity: 1; transform: none; }
  .js .cartao::before { transform: none; background: var(--linha); }
  .js .surge-passo .passo-selo { transform: none; opacity: 1; }
  /* o bloco acima zera durações, não atrasos: sem isto o último item do menu
     ainda esperaria 270ms para aparecer */
  .js .menu-aberto a { transition-delay: 0s !important; }

  /* Exceção deliberada: o fio não é animação, é leitura de posição.
     Ele não se move sozinho — só reflete onde a rolagem está, que é um
     gesto do próprio leitor. Deixá-lo cheio e imóvel aqui, como estava,
     tirava o indicador de progresso de quem liga "reduzir movimento".
     O `.01ms` da regra universal o completava no primeiro pixel de scroll. */
  @supports (animation-timeline: scroll()) {
    .fio-traco { animation-duration: auto !important; }
  }
}