/* ==========================================================================
   Dra. Eduarda Mageski — landing de uma página
   Direção: Suíço quente, adaptada. Estudo A (prompt 017) aprovado.
   Sistema de tokens herdado de _heros/base.css, já verificado.
   ========================================================================== */

:root {
  --surface-0: #fdfbf7;   /* papel */
  --surface-1: #f6efe2;   /* areia clara */
  --surface-2: #ffffff;
  --surface-ink: #13384b;

  --ink-1: #13384b;   /* navy do manual. 11,99:1 sobre papel */
  --ink-2: #3d5361;   /* 7,79:1 no papel, 5,95:1 na areia */
  --ink-3: #6e8089;   /* meta apenas, nunca conteúdo */
  --ink-inv: #fdfbf7;

  /* PALETA DO MANUAL DE MARCA dela (Caninde Atelie). O manual chegou em
     17/09/2026 junto com o pagamento e VENCE a amostragem do Instagram de
     10/09: navy #13384b, areia #e7ddc1, taupe #a08373.
     O taupe NAO e tinta. Medido: 3,39:1 no papel, 2,59:1 na areia, 3,53:1 no
     navy. Reprova como texto nas tres, e na areia reprova ate como contorno.
     Ele existe como filete sobre papel e mais nada. */
  --brand: #13384b;
  --brand-ink: #fdfbf7;
  --brand-soft: #a08373;   /* taupe. O azul-claro SAIU: era o campo que ela vetou */
  --brand-veu: #e7ddc1;
  --terra: #a08373;

  --line: #ded2b8;
  --line-inv: #3c3833;
  --focus: #8a6a58;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
  --step-1:  clamp(1.35rem, 1.25rem + 0.5vw, 1.6rem);
  --step-2:  clamp(1.8rem, 1.6rem + 1vw, 2.4rem);
  --step-3:  clamp(2.4rem, 2rem + 2vw, 3.6rem);
  --step-4:  clamp(3rem, 2.3rem + 3.4vw, 5.2rem);
  --step-5:  clamp(3.4rem, 2.4rem + 5vw, 6.6rem);

  --face-display: "Gambetta", Georgia, "Times New Roman", serif;
  --face-corpo: "Satoshi", -apple-system, "Segoe UI", Roboto, sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --space-20: 10rem;

  --gutter: clamp(1.25rem, 5vw, 6rem);

  --brand-fundo: #0d2938;   /* navy um degrau acima, só para hover sobre navy */
  --brand-linha: #ded2b8;   /* divisor sobre navy */
  --ink-sobre-navy: #e7ddc1;/* corpo sobre navy, 9,07:1 */
  --acento: #a08373;        /* taupe do manual. SO filete decorativo sobre papel */
  /* Duas variantes escurecidas do taupe, nascidas de medicao em 18/09/2026 e
     nao de gosto: o taupe puro da 3,39 no papel, 3,07 na areia-1 e 2,59 na
     areia-2, entao reprova como contorno de componente e como texto. */
  --linha-ui: #8a7466;      /* contorno de botao: 4,26 / 3,85 / 3,25, passa 3:1 nas tres */
  --acento-tinta: #6e594c;  /* numeral: 6,36 / 5,75 / 4,85, passa 4,5:1 nas tres */
  --r-botao: 8px;
  --r-card: 14px;
  --r-img: 4px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
  --d-micro: 160ms;
  --d-ui: 260ms;
  --d-reveal: 620ms;
  --d-hero: 1000ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--ink-1);
  font-family: var(--face-corpo);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--face-display); font-weight: 400; margin: 0; text-wrap: balance; }
h1 { font-size: var(--step-5); line-height: 1.0; letter-spacing: -0.028em; }
h2 { font-size: var(--step-3); line-height: 1.1; letter-spacing: -0.025em; }
h3 { font-size: var(--step-1); line-height: 1.2; letter-spacing: -0.02em; }
/* 48ch, nao 60ch. Medido em 18/09/2026 com a largura MEDIA real do texto (nao
   a do "0", que e mais larga e foi o que me enganou na primeira medicao): a
   60ch estes paragrafos rendiam 90 a 94 caracteres por linha, contra os 75 que
   a regua pede. A razao medida nesta tipografia e 1,57 caractere real por ch. */
p { margin: 0; max-width: 48ch; }

a { color: inherit; }

.rotulo {
  font-family: var(--face-corpo);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-2);
  margin: 0;
}

.contorno { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: var(--space-12); }
@media (min-width: 900px) { section { padding-block: var(--space-20); } }

/* --- botões ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 48px;
  padding: 0.8rem var(--space-3);   /* padding vertical real, min-height é piso */
  border: 1px solid transparent;
  border-radius: var(--r-botao);
  font-family: var(--face-corpo);
  font-size: var(--step-0);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--d-ui) var(--ease-ui),
              border-color var(--d-ui) var(--ease-ui),
              transform var(--d-micro) var(--ease-ui);
}
.btn-1 { background: var(--brand); color: var(--brand-ink); }
.btn-1:hover { background: var(--brand-fundo); }
.btn-1:active { transform: translateY(1px); }
.btn-2 { background: transparent; color: var(--ink-1); border-color: var(--linha-ui); }
.btn-2:hover { background: var(--surface-1); border-color: var(--ink-3); }
.btn-2:active { transform: translateY(1px); }
.btn-inv { background: var(--surface-0); color: var(--ink-1); }
.btn-inv:hover { background: #ffffff; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--focus);
  border-radius: var(--r-botao);
}
.superficie-escura :where(a, button, summary):focus-visible {
  box-shadow: 0 0 0 2px var(--brand), 0 0 0 4px var(--acento);
}

/* --- reveal, por animação CSS ------------------------------------------
   NÃO usa requestAnimationFrame para acender classe: rAF não dispara em aba
   de segundo plano nem com painel de preview oculto, e o conteúdo sumiria
   sem nenhum erro. O JS só marca .js; se ele morrer, nada fica escondido. */
/* Deslocamento puro, SEM opacidade. Reveal por opacidade deixa o texto
   invisivel enquanto o IntersectionObserver nao dispara, e ele nao dispara em
   aba de segundo plano, em painel oculto nem em captura headless. Medido aqui:
   82% do texto da pagina ficava em opacity 0 na leitura de um renderizador
   independente. Com transform, o pior caso e o conteudo aparecer sem animacao,
   nunca nao aparecer. */
html.js .reveal { transform: translateY(14px); }
.reveal { transition: transform var(--d-reveal) var(--ease-out); }
.reveal.visivel { transform: none; }

/* ================= HERO (prompt 017) ==================================== */
/* a superficie fica no elemento de largura cheia e o .contorno vai DENTRO,
   senao o bloco de cor para na largura do container e nao sangra */
.hero { min-height: 92svh; display: grid; grid-template-columns: minmax(0, 1fr); padding-block: var(--space-12) var(--space-8); }   /* sem a coluna declarada, a coluna implicita encolhe para o conteudo e o .contorno centraliza dentro dela, nao na viewport */
.hero-interno { display: grid; align-content: center; }
.linha { display: block; overflow: hidden; }
.linha > span { display: block; }
html.js .linha > span { animation: subir var(--d-hero) var(--ease-out) both; }
html.js .linha:nth-child(2) > span { animation-delay: 90ms; }
html.js .linha:nth-child(3) > span { animation-delay: 180ms; }
@keyframes subir { from { transform: translateY(102%); } to { transform: none; } }
@keyframes surgir { from { opacity: 0; } to { opacity: 1; } }

.hero-sub { font-size: var(--step-1); color: var(--ink-2); max-width: 34ch; margin-top: var(--space-4); }
.hero-acoes { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-6); }
.hero-ficha {
  margin-top: var(--space-8); padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  font-size: var(--step--1); color: var(--ink-2);
  font-feature-settings: "tnum";
}
.hero-ficha b { font-weight: 500; color: var(--ink-1); }

html.js .hero-sub   { animation: surgir var(--d-hero) var(--ease-out) 340ms both; }
html.js .hero-acoes { animation: surgir var(--d-hero) var(--ease-out) 460ms both; }
html.js .hero-ficha { animation: surgir var(--d-hero) var(--ease-out) 560ms both; }

/* ================= PILARES ============================================== */
/* fundo de .pilares vem do contexto (.sup-creme) */
.pilares-grade { display: grid; gap: var(--space-2); margin-top: var(--space-6); }
@media (min-width: 820px) {
  .pilares-grade { grid-template-columns: repeat(6, 1fr); }
  .pilar:nth-child(1) { grid-column: span 4; }
  .pilar:nth-child(2) { grid-column: span 2; }
  .pilar:nth-child(3) { grid-column: span 2; }
  .pilar:nth-child(4) { grid-column: span 4; }
}
.pilar {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--space-4);
  display: grid; align-content: space-between; gap: var(--space-6);
  min-height: 184px;
}
.pilar-cor { background: var(--surface-1); border-color: var(--acento); color: var(--ink-1); }
.pilar-cor .pilar-n { color: var(--acento-tinta); }
.pilar-quente { background: var(--surface-0); }
.pilar-n { font-size: var(--step--1); letter-spacing: 0.1em; color: var(--ink-2); font-feature-settings: "tnum"; }
.pilar h3 { font-size: var(--step-2); }
.pilar p { font-size: var(--step--1); color: var(--ink-2); margin-top: var(--space-1); }
.pilar-cor p { color: var(--ink-2); }

/* ================= CONSULTA (lista numerada, não cards) ================= */
.passos { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; gap: 0; }
.passo {
  display: grid; gap: var(--space-2);
  padding-block: var(--space-4);
  border-top: 1px solid var(--line);
}
@media (min-width: 780px) { .passo { grid-template-columns: 5rem 1fr; gap: var(--space-6); align-items: start; } }
.passo:last-child { border-bottom: 1px solid var(--line); }
.passo-n {
  font-family: var(--face-display);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--terra);
  font-feature-settings: "tnum";
}
.passo p { color: var(--ink-2); margin-top: var(--space-1); }

/* Consulta avulsa x plano anual, pedido por audio em 18/09/2026. Fica como
   bloco de prosa DEPOIS da lista numerada, nao como quinto passo: nao e etapa
   do atendimento, e formato de contratacao. Recuado a esquerda na mesma coluna
   de texto dos passos (5rem + gap), para ler como continuacao da secao e nao
   como bloco novo de largura cheia. */
.formatos { margin-top: var(--space-8); display: grid; gap: var(--space-3); }
.formatos p { color: var(--ink-2); }
/* 176px, nao 128px: o `.formatos` e IRMAO do `.passos-trilho`, e o trilho tem
   `padding-left: var(--space-6)` para abrir espaco para a regua. Entao alinhar
   com o texto dos passos custa DOIS `--space-6` (o do trilho e o gap da grade),
   mais os 5rem da coluna do numeral. Medido em 18/09/2026: com um `--space-6`
   so, o bloco parava em 288px contra os 336px do texto do passo. */
@media (min-width: 780px) { .formatos { margin-left: calc(5rem + var(--space-6) * 2); } }

/* ================= SOBRE ================================================ */
/* ACOPLAMENTO DESFEITO em 18/09/2026, e o motivo e um defeito medido.
   A moldura estava com `height: 100%` dentro de `align-items: stretch`, entao
   ela HERDAVA a altura da coluna de texto. Consequencia: qualquer edicao de
   copy no Sobre re-recortava a foto, sem ninguem tocar na foto. Foi o que
   aconteceu neste mesmo dia: acrescentar o paragrafo sobre PNL levou a coluna
   de texto a 964px, a moldura foi junto, e a proporcao dela caiu de 0,6 para
   0,462. Com a imagem em 0,792, o `cover` passou a jogar fora 318px de largura,
   42% do que era desenhado, e o ombro dela sumia do quadro.

   Agora a moldura declara a PROPRIA proporcao, 2/3, que e a nativa do ensaio
   (todas as originais sao 4024x6048). Texto e foto deixam de se puxar: mudar
   copy nao mexe mais no recorte. O preco e um vazio no pe da coluna da foto,
   que `align-items: start` empurra para baixo, onde o olho aceita, em vez de
   deixar no meio. A coluna da foto foi alargada de 0.8fr para 0.95fr para
   encurtar esse vazio.

   O recorte do arquivo tambem foi refeito: a versao anterior tirava 16% do topo
   e deixava a cabeca dela colada na borda. A nova encosta no rodape da foto
   (mantem o ombro inteiro) e centraliza o rosto em x. */
.sobre-grade { display: grid; gap: var(--space-6); align-items: start; }
.sobre-moldura { aspect-ratio: 2 / 3; overflow: hidden; }
.sobre-foto { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
@media (min-width: 900px) { .sobre-grade { grid-template-columns: 1fr 0.95fr; gap: var(--space-12); } }
.sobre-texto p + p { margin-top: var(--space-3); }
.sobre-texto p { color: var(--ink-2); }
.sobre-destaque {
  font-family: var(--face-display);
  font-size: var(--step-2);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink-1) !important;
  max-width: 22ch;
}

/* slot de foto: declara o que falta, não finge imagem */
.foto-slot {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-card);
  border: 1px dashed var(--line);
  background:
    radial-gradient(58% 44% at 62% 34%, var(--brand-veu) 0%, transparent 70%),
    linear-gradient(180deg, #f1e8dc 0%, #e8dccc 100%);
  display: grid; place-items: end start; padding: var(--space-3);
}
.foto-slot span {
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-img);
  padding: var(--space-1) var(--space-2);
}

/* ================= PERGUNTAS =========================================== */
/* fundo de .perguntas vem do contexto (.sup-veu) */
.pergunta { border-top: 1px solid var(--line); }
.pergunta:last-of-type { border-bottom: 1px solid var(--line); }
.pergunta summary {
  cursor: pointer; list-style: none;
  padding-block: var(--space-4);
  font-family: var(--face-display);
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after { content: "+"; color: var(--terra); font-family: var(--face-corpo); flex: 0 0 auto; }
.pergunta[open] summary::after { content: "–"; }
.pergunta p { color: var(--ink-2); padding-bottom: var(--space-4); max-width: 48ch; }

/* ================= CHAMADA FINAL ======================================= */
/* fundo de .final vem do contexto (.sup-navy) */
/* Fecho em duas colunas, foto a ESQUERDA. A largura vem declarada e o teto de
   altura vem DEPOIS, nessa ordem: com a largura fixa o max-height e honrado e
   quem cede e a proporcao. Invertido, o aspect-ratio encolheria a largura, que
   e o defeito medido em 16/09 na faixa antiga. */
.final-grade { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) {
  .final-grade { grid-template-columns: .68fr 1fr; gap: var(--space-12); }
}
.final-foto { margin: 0; }
.final-foto .moldura {
  position: relative; overflow: hidden;
  width: 100%;
  aspect-ratio: 4/5;
  max-height: min(58svh, 520px);
  border-radius: var(--r-img);
  background: var(--surface-1);
}
.final-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.final h2 { max-width: 18ch; }
.final p { margin-top: var(--space-3); }
.final .acoes { margin-top: var(--space-6); display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ================= RODAPÉ ============================================== */
.rodape { background: var(--surface-0); color: var(--ink-2); padding-block: var(--space-8); border-top: 1px solid var(--line); }
.rodape-grade { display: grid; gap: var(--space-6); }
@media (min-width: 780px) { .rodape-grade { grid-template-columns: repeat(3, 1fr); } }

.rodape .titulo-col { font-family: var(--face-corpo); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-2); margin: 0 0 var(--space-2); }
.rodape a { color: var(--ink-1); text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.rodape .registro { font-feature-settings: "tnum"; color: var(--ink-1); }
.rodape-fim { margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: var(--step--1); }

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

/* ==========================================================================
   SUPERFÍCIES ALTERNADAS — estrutura tirada do psiqclara.com.br, que é a
   referência que ela mandou. Medido lá: página curta (2714px) com blocos
   chapados de cor, um por seção, mostarda / creme / verde-sálvia / terracota.

   O que se copia é a ESTRUTURA. A paleta continua sendo a dela, amostrada da
   manual de marca dela: navy #13384b, areia #e7ddc1 e taupe #a08373.
   Copiar mostarda e verde-sálvia entregaria a identidade da clínica de outra
   pessoa, que é o erro oposto.

   Cada seção declara um contexto de tokens e os componentes leem esse
   contexto, em vez de cada seção sobrescrever cada componente por seletor
   descendente. Menos regra e sem disputa de especificidade.
   ========================================================================== */

.sup {
  background: var(--ctx-bg);
  color: var(--ctx-ink);
}
.sup h2, .sup h3 { color: var(--ctx-ink); }
.sup p { color: var(--ctx-ink-2); }
.sup .rotulo { color: var(--ctx-ink-2); }

/* .sup-azul REMOVIDA em 18/09/2026: era o campo azul-claro que a cliente vetou
   por audio ("nao quero fundo azul, fica muita baranguice"). */
.sup-creme { --ctx-bg: var(--surface-0); --ctx-ink: var(--ink-1); --ctx-ink-2: var(--ink-2); --ctx-line: var(--line); }
.sup-areia { --ctx-bg: var(--surface-1); --ctx-ink: var(--ink-1); --ctx-ink-2: var(--ink-2); --ctx-line: var(--line); }
.sup-veu   { --ctx-bg: #e7ddc1; --ctx-ink: var(--ink-1); --ctx-ink-2: var(--ink-2); --ctx-line: #cdbf9d; }   /* areia do manual */
.sup-navy  { --ctx-bg: var(--brand); --ctx-ink: var(--ink-inv); --ctx-ink-2: var(--ink-sobre-navy); --ctx-line: var(--brand-linha); }

/* bordas e filetes seguem o contexto */
.sup .passo { border-top-color: var(--ctx-line); }
.sup .passo:last-child { border-bottom-color: var(--ctx-line); }
.sup .pergunta { border-top-color: var(--ctx-line); }
.sup .pergunta:last-of-type { border-bottom-color: var(--ctx-line); }
.sup .hero-ficha { border-top-color: var(--ctx-line); }

/* botão secundário e numerais também */
.sup .btn-2 { color: var(--ctx-ink); border-color: var(--linha-ui); }   /* o contorno do botao NAO herda a linha decorativa do contexto: ela reprova 3:1 */
.sup-navy .btn-2:hover { background: var(--brand-fundo); border-color: #2a5d8a; }
.sup-veu .btn-2:hover { background: #dfd2b1; border-color: #bfae87; }
.sup-navy .passo-n, .sup-navy .pergunta summary::after { color: var(--acento); }
.sup-navy .pilar-n { color: var(--ink-sobre-navy); }

/* na faixa navy o botão primário inverte, senão navy sobre navy some */
.sup-navy .btn-1 { background: var(--surface-0); color: var(--ink-1); }
.sup-navy .btn-1:hover { background: #ffffff; }

/* cartão de pilar dentro de superfície colorida */
/* `:not(.pilar-cor)` é obrigatório aqui. Sem ele esta regra (0,2,0) vence a
   `.pilar-cor` (0,1,0) e apaga o fundo navy do primeiro cartão, MAS não mexe na
   `border-color`, que continua navy. O resultado é um cartão claro com contorno
   escuro e os outros três com contorno claro, que foi exatamente o sintoma. */
.sup-creme .pilar:not(.pilar-cor):not(.pilar-quente),
.sup-areia .pilar:not(.pilar-cor):not(.pilar-quente),
.sup-veu   .pilar:not(.pilar-cor):not(.pilar-quente) { background: var(--surface-2); }

/* ==========================================================================
   CAMADA DE MOTION (GSAP + ScrollTrigger + Lenis)
   Regra: nada aqui esconde conteúdo. Quem esconde é o gsap.from() em runtime,
   que só existe se o GSAP tiver carregado. Sem GSAP, sai página sem animação.
   ========================================================================== */

/* Com GSAP presente, o reveal do CSS sai de cena: dois animadores no mesmo
   transform brigam, e o JS marca `.gsap` no <html> assim que assume. */
html.gsap .reveal { transform: none; transition: none; }

/* trilho da lista de passos, com a régua que se desenha no scroll */
.passos-trilho { position: relative; }
@media (min-width: 780px) {
  .passos-trilho { padding-left: var(--space-6); }
  .passos-regua {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--terra);
    opacity: 0.5;
    transform-origin: top center;
  }
  /* sem GSAP a régua fica inteira, e isso é o certo: ela é decoração */
  html:not(.gsap) .passos-regua { transform: none; }
}
@media (max-width: 779px) { .passos-regua { display: none; } }

/* máscara dos títulos de seção: o span sobe por dentro dela */
.titulo-mascara { overflow: hidden; }
.titulo-mascara > span { display: block; }

/* a foto do sobre escala na entrada; o wrapper corta o excedente */
.sobre-moldura { overflow: hidden; border-radius: var(--r-card); }
.sobre-foto { will-change: transform; }

/* Lenis: só quando ele está de fato controlando o scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

@media (prefers-reduced-motion: reduce) {
  .passos-regua { transform: none !important; }
  .titulo-mascara { overflow: visible; }
}


/* ==========================================================================
   HERO COM FOTO — padrão portado do site da Lara Pansiere.
   A estrutura de lá: foto de largura cheia no fundo mais um véu em gradiente
   horizontal que garante o contraste do texto. O que NÃO veio: a aurora e a
   dica de rolagem, as duas proibidas pela design-sites.

   O véu aqui é uma camada de COR SÓLIDA com máscara em gradiente, e não um
   gradiente pintado. Assim o `background-color` dele continua sendo um valor
   único e legível, o que deixa a versão cinematográfica animar a cor e provar
   que animou. Gradiente pintado não se interpola nem se mede.
   ========================================================================== */

/* ==========================================================================
   HERO — tratamento C, "assimétrico com respiro". Escolhido por Marcelo em
   18/09/2026, substituindo o hero de foto-de-fundo com véu.

   O que saiu, e por quê: o hero antigo pintava a foto como BACKGROUND do
   .hero.sup-azul e usava um véu com máscara em gradiente para o texto ficar
   legível por cima. Isso existia porque o campo era azul-claro. A cliente
   vetou o campo azul, então o véu perdeu o objeto: sem campo colorido não há
   o que velar. A foto passa a ser <img> numa moldura, que é o arranjo em que a
   proporção do quadro não depende do tamanho natural do arquivo.
   ========================================================================== */

.hero { position: relative; }
.hero-grade { display: grid; gap: var(--space-8); }
.hero-moldura { position: relative; overflow: hidden; border-radius: var(--r-img); background: var(--surface-1); aspect-ratio: 4/5; }
/* `.hero-moldura img`, nao `.hero-moldura > img`: o <img> agora mora dentro de
   um <picture>, entao e neto da moldura. Seletor de filho direto morreria calado
   e a foto voltaria ao fluxo normal. */
.hero-moldura picture { position: absolute; inset: 0; display: block; }
.hero-moldura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
@media (max-width: 999px) { .hero-moldura img { object-position: 50% 50%; } }
.hero-risco { display: block; width: 120px; height: 1px; background: var(--acento); margin-bottom: var(--space-4); }

@media (min-width: 1000px) {
  /* ENQUADRADO E SIMETRICO, por pedido do Marcelo em 18/09/2026.

     Tres mudancas, e as tres tiram complexidade em vez de somar:

     1. A foto NAO sangra mais. Ela fica dentro da mesma margem do texto, entao
        os dois lados respiram igual. O sangramento deixava a direita colada na
        borda e a esquerda com margem, que era a assimetria incomoda.

     2. `align-items: stretch` no lugar de `end`. As duas colunas passam a
        dividir a MESMA altura, alinhadas em cima e embaixo. Antes a foto tinha
        proporcao fixa e ancorava no rodape, entao comecava bem abaixo do topo
        do texto e o bloco lia torto.

     3. Sem `aspect-ratio` no hero. A altura da foto passa a ser a altura da
        linha do grid, ou seja, a do proprio texto. Isso encerra de uma vez a
        familia de defeitos que me pegou tres vezes seguidas nesta pagina:
        proporcao fixa brigando com largura, com margem negativa e com teto de
        altura. Sem proporcao declarada nao existe dimensao derivada para
        nenhuma outra propriedade atropelar. */
  .hero-grade {
    /* `minmax(0, ...)` nas duas trilhas, e nao `1fr .82fr` puro. Medido em
       18/09/2026 a 1968px: com fr puro o `white-space: nowrap` da manchete
       impunha 602px de largura MINIMA a primeira trilha, a proporcao pedida era
       ignorada e sobravam 63px mortos na direita, que era exatamente a
       assimetria visivel. `minmax(0, ...)` deixa a trilha encolher abaixo do
       conteudo, entao a divisao passa a valer de verdade. */
    grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
    /* Gap de 64, nao 96, e a proporcao .72 em vez de .82. Os dois numeros saem
       de uma medida: o par de botoes do hero precisa de 551px para caber numa
       linha (251 + 16 + 284). Acima de ~1500px o gutter trava em 96 e a coluna
       de texto CAI para 523, entao os botoes empilhavam justamente nas telas
       maiores. Com estes valores a coluna fica em 572 no pior caso. */
    gap: var(--space-8);
    align-items: stretch;
  }
  .hero-moldura {
    width: 100%;
    aspect-ratio: auto;
    min-height: 26rem;
    border-radius: var(--r-img);
  }
  /* A manchete precisa CABER na trilha, agora que a trilha manda. Com o teto
     anterior de 6,6rem a linha "Saude mental" media 602px contra os 523px que a
     divisao 1 / .82 reserva. 5,6rem deixa ~536px de folga. */
  .hero-interno h1 { max-width: none; font-size: clamp(3rem, 4.6vw, 5.6rem); }
  .hero-interno h1 .linha > span { white-space: nowrap; }
}
}


/* ---------- Pilares no mobile ------------------------------------------
   No desktop o `gap: 48px` mais `min-height: 184px` é o que empurra o numeral
   para o topo e o conteúdo para o rodapé do cartão, que é o efeito pretendido
   numa grade assimétrica. Numa coluna de 335px isso vira buraco: o cartão fica
   alto, com o numeral solto lá em cima e um vazio no meio.
   Abaixo de 820px, que é onde a grade colapsa, os dois saem. */
@media (max-width: 819px) {
  .pilar {
    gap: var(--space-3);
    min-height: 0;
    padding: var(--space-3);
  }
  .pilar h3 { font-size: var(--step-1); }
  .pilares-grade { gap: var(--space-2); }
}


/* O bloco de "hero no mobile: a foto vira faixa" foi REMOVIDO em 18/09/2026.
   Ele existia para contornar a foto de FUNDO, que cortava o rosto dela no
   celular. Com a foto em <img> dentro de moldura, a grade de uma coluna já
   empilha texto e foto sozinha, com o enquadramento inteiro preservado. */

/* ---------- O cartão navy tem que vencer o contexto da seção -------------
   As regras de contexto (`.sup h3`, `.sup p`) têm especificidade (0,2,0) e
   ganham de `.pilar-cor` (0,1,0). Resultado: o cartão ficava navy e o texto
   dele recebia a cor de texto da seção CLARA, ou seja, escuro sobre escuro.

   Este é o terceiro sintoma do mesmo erro de origem: o bloco de superfícies
   por contexto foi escrito supondo que o cartão não tinha variante, e atropelou
   primeiro o fundo, depois o tom do cartão 03 e agora a cor do texto. A correção
   é declarar a variante DEPOIS e com especificidade maior, não caçar sintoma. */
/* O bloco que forcava texto claro aqui foi REMOVIDO em 18/09/2026 junto com o
   cartao navy. Com o cartao claro, forcar --brand-ink escreveria papel sobre
   areia. Sobra so o numeral em taupe, que e decorativo. */
.sup .pilar-cor .pilar-n { color: var(--acento-tinta); }

/* ---------- Alvo de toque em ponteiro grosso ---------------------------
   Medido em 16/09/2026 a 1418px: os links do rodapé (telefone, Instagram,
   política de privacidade) renderizavam com 22px e 17px de altura. Em mouse
   isso não atrapalha, em dedo atrapalha. `min-height` explícito, não padding:
   padding em rem encolhe junto com o `clamp()` da fonte, justamente no
   viewport estreito onde o alvo mais importa. Escopado a `pointer: coarse`
   para não esticar o rodapé de quem está no desktop. */
@media (pointer: coarse) {
  .rodape a,
  .rodape-fim a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ================= EVIDÊNCIA ==========================================
   Família de layout própria, e isso é o ponto. A página já tinha grade de
   cartões, lista numerada, texto com foto, acordeão e chamada centrada;
   somar mais um bloco de prosa seria repetir. Aqui o objeto visual é um
   DOCUMENTO: filete, citação recuada e linha bibliográfica de verdade, que
   é como a fonte apareceria num artigo, não num anúncio. */
.evidencia-grade { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 900px) {
  .evidencia-grade { grid-template-columns: 1fr 0.9fr; gap: var(--space-12); }
}

/* o `p { margin: 0 }` global cola paragrafos irmaos; aqui eles sao dois
   movimentos distintos (o que sustenta / o que isso NAO substitui) */
.evidencia-grade p + p { margin-top: var(--space-3); }

.citacao { margin: 0; padding-left: var(--space-4); border-left: 2px solid var(--ctx-line); }

.citacao-rotulo {
  font-family: var(--face-corpo);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-2);
  max-width: 34ch;
}

.citacao blockquote { margin: var(--space-3) 0 0; }

/* O escopo da referencia em caixa NORMAL, nao no rotulo. Medido em 16/09/2026:
   com a ressalva inteira dentro do eyebrow davam 57 caracteres em caixa alta e
   o `all-caps-body` do impeccable acusou, com razao: eyebrow e etiqueta curta,
   e caixa alta longa tira a forma da palavra, que e como a gente le. */
.citacao-escopo {
  margin-top: var(--space-3);
  font-family: var(--face-corpo);
  font-size: var(--step-0);
  color: var(--ink-2);
  max-width: 38ch;
}
.citacao blockquote p {
  font-family: var(--face-display);
  font-size: var(--step-2);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  max-width: 28ch;
}
.citacao blockquote b { font-weight: 500; }

/* A linha bibliográfica é o detalhe que faz o bloco ler como documento:
   figura tabular para o ano e o PMID não dançarem, e medida curta. */
.citacao figcaption {
  margin-top: var(--space-4);
  font-family: var(--face-corpo);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 46ch;
  font-feature-settings: "tnum";
}
.citacao cite { font-style: italic; }
.citacao figcaption a {
  color: var(--ink-1);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ctx-line);
}
.citacao figcaption a:hover { text-decoration-color: currentColor; }

/* ---------- Hero no mobile: a foto precisa espiar na primeira tela --------
   Medido em 18/09/2026 a 500px de largura: com os espaçamentos do desktop o
   bloco de texto terminava em 930px e a foto começava aí, contra uma viewport
   de 746. Ou seja, ZERO da foto aparecia antes de rolar.

   Isso não é preciosismo: o rosto dela é metade do argumento do hero, e o
   layout anterior tinha um bloco inteiro dedicado a garantir isso, que saiu
   junto com a foto de fundo. O CTA já estava acima da dobra e continua.

   Os cortes abaixo somam ~180px e são todos de espaçamento, nenhum de
   conteúdo: nenhuma linha da ficha some, diferente da versão anterior. */
@media (max-width: 999px) {
  .hero {
    min-height: 0;   /* o 92svh reservava altura para o texto e empurrava a foto */
    padding-block: var(--space-2) var(--space-8);
  }
  .hero-grade { gap: var(--space-4); }
  .hero-interno h1 { font-size: clamp(2.3rem, 8.4vw, 3rem); }
  .hero-acoes { margin-top: var(--space-4); }
  .hero-ficha { margin-top: var(--space-4); padding-top: var(--space-2); }
  /* Só a linha do ENDEREÇO sai no celular, e ela é a única das três que está
     repetida no rodapé. A do CRM fica porque é exigência de conselho, e a do
     horário fica porque não existe em nenhum outro lugar da página. */
  .hero-ficha span:nth-child(2) { display: none; }
  /* 4/5 em pe, nao 5/4 deitada. A moldura deitada sobre arquivo em pe jogava
     fora 46,8% da altura, e o que sobrava era a parede acima da cabeca dela.
     Com o arquivo mobile proprio (ja em 4:5) o `cover` nao descarta nada. */
  .hero-moldura { aspect-ratio: 4/5; }
}