/* ==========================================================================
   BASE — reset, fontes, tipografia, container, utilitarios
   ========================================================================== */

/* ---------- Fontes ----------
   As duas sao variaveis: um arquivo cobre toda a faixa de peso.
   Subset latin do Google, que ja cobre toda a acentuacao do portugues. */

@font-face {
  font-family: 'Inter';
  src: url('../fontes/inter-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../fontes/playfair-display-var-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-header) + 1rem);
}

body {
  background: var(--creme);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  line-height: var(--lh-corpo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

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

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

ul, ol { list-style: none; }

a { color: inherit; }

/* ---------- Tipografia ---------- */

h1, h2, h3, h4 {
  font-family: var(--fonte-display);
  font-weight: 400;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--t-h1); line-height: var(--lh-h1); max-width: var(--medida-h1); }
h2 { font-size: var(--t-h2); line-height: var(--lh-h2); max-width: var(--medida-h2); }
h3 { font-size: var(--t-h3); line-height: var(--lh-h3); font-weight: 500; }

p, li { text-wrap: pretty; }

/* Enfase dentro de texto corrido. Sem italico real: os dois @font-face
   deste site so declaram font-style normal (nenhum arquivo italico
   carregado), entao italic aqui seria fake-italic do navegador — feio
   numa serifada de alto contraste. Peso 500 e a opcao que design.md
   sanciona igualmente e que o arquivo variavel realmente cobre. */
em { font-style: normal; font-weight: 500; }

p { max-width: var(--medida-corpo); }

/* Hifenizacao so onde a linha e curta. Acima de 768px a medida passa de
   60 caracteres e o hifen so polui. */
@media (max-width: 767px) {
  p, li { hyphens: auto; }
}
@media (min-width: 768px) {
  p, li { hyphens: manual; }
}

.lead {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  max-width: var(--medida-lead);
  color: var(--texto-suave);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--fonte-corpo);
  font-size: var(--t-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-suave);
  /* O letter-spacing deixa espaco fantasma depois do ultimo caractere.
     Sem isso, eyebrow centralizada nasce torta. */
  margin-right: -0.18em;
  margin-bottom: var(--e-4);
}

.eyebrow svg { flex: none; width: 12px; height: 12px; color: var(--ouro); }

.peq { font-size: var(--t-peq); color: var(--texto-suave); }

/* Links de texto: indigo com sublinhado coral. A cor do texto nao muda no
   hover porque coral sobre creme da 2,1:1 e reprova. */
.texto a,
a.link {
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness var(--transicao);
}
.texto a:hover,
a.link:hover { text-decoration-thickness: 3px; }

/* ---------- Blocos escuros ---------- */

/* Duas classes pintam fundo escuro: .escuro (indigo-800) e .estrelado
   (indigo-900 + campo estelar). As duas PRECISAM do mesmo tratamento de
   texto. Quando so .escuro tinha as regras de cor, todo titulo dentro de
   .estrelado ficava indigo sobre indigo — 1,16:1, invisivel. */
.escuro { background: var(--indigo-800); }
.estrelado { background-color: var(--indigo-900); }

/* Campo estelar: CSS puro, nunca imagem. Duas camadas estaticas de
   gradiente dao a densidade; o cintilar vem das estrelas individuais
   que site.js gera (ver "Ceu vivo" mais abaixo). Padrao do sistema
   desde 15/08/2026 — vale para as duas classes de bloco escuro, ver
   design.md secao 12.7. O position/isolation e o que ancora as camadas
   de estrela; sem ele elas escapariam para o ancestral posicionado. */
:is(.escuro, .estrelado) { position: relative; isolation: isolate; }

.escuro,
.estrelado { color: var(--texto-claro); }

:is(.escuro, .estrelado) :is(h1, h2, h3, h4) { color: var(--creme); }
:is(.escuro, .estrelado) .eyebrow { color: var(--ouro-claro); }
:is(.escuro, .estrelado) .eyebrow svg { color: var(--ouro-claro); }
:is(.escuro, .estrelado) .lead { color: var(--texto-claro); }
:is(.escuro, .estrelado) .peq { color: rgba(239, 233, 242, .72); }
/* Camada 1 da base densa. Estatica de proposito: quem cintila sao as
   estrelas individuais do .campo-vivo. Uma camada de background pulsa
   INTEIRA, em unissono, e le como fundo respirando — nunca como estrelas
   piscando, por mais pontos que tenha. */
:is(.escuro, .estrelado)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 3% 9%,   rgba(230,200,106,.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 9% 24%,  rgba(255,255,255,.6),  transparent 60%),
    radial-gradient(1.8px 1.8px at 15% 6%,  rgba(230,200,106,.7),  transparent 60%),
    radial-gradient(1.1px 1.1px at 21% 38%, rgba(230,200,106,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 27% 17%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 33% 52%, rgba(230,200,106,.5),  transparent 60%),
    radial-gradient(1.7px 1.7px at 39% 29%, rgba(230,200,106,.75), transparent 60%),
    radial-gradient(1.1px 1.1px at 45% 63%, rgba(230,200,106,.4),  transparent 60%),
    radial-gradient(1.4px 1.4px at 51% 12%, rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(1.9px 1.9px at 57% 46%, rgba(230,200,106,.65), transparent 60%),
    radial-gradient(1.2px 1.2px at 63% 71%, rgba(230,200,106,.55), transparent 60%),
    radial-gradient(1.6px 1.6px at 69% 20%, rgba(230,200,106,.6),  transparent 60%),
    radial-gradient(1.1px 1.1px at 75% 58%, rgba(230,200,106,.42), transparent 60%),
    radial-gradient(1.5px 1.5px at 81% 34%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.8px 1.8px at 87% 66%, rgba(230,200,106,.7),  transparent 60%),
    radial-gradient(1.2px 1.2px at 93% 15%, rgba(230,200,106,.55), transparent 60%),
    radial-gradient(1.6px 1.6px at 97% 49%, rgba(230,200,106,.6),  transparent 60%),
    radial-gradient(1.3px 1.3px at 6% 82%,  rgba(230,200,106,.5),  transparent 60%),
    radial-gradient(1.7px 1.7px at 44% 89%, rgba(230,200,106,.65), transparent 60%),
    radial-gradient(1.4px 1.4px at 80% 92%, rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(1.1px 1.1px at 25% 95%, rgba(230,200,106,.4),  transparent 60%),
    radial-gradient(1.5px 1.5px at 62% 5%,  rgba(230,200,106,.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 91% 80%, rgba(230,200,106,.45), transparent 60%),
    radial-gradient(1.6px 1.6px at 35% 78%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 1% 46%,  rgba(230,200,106,.52), transparent 60%),
    radial-gradient(1.7px 1.7px at 7% 63%,  rgba(230,200,106,.62), transparent 60%),
    radial-gradient(1.1px 1.1px at 13% 11%, rgba(230,200,106,.4),  transparent 60%),
    radial-gradient(1.5px 1.5px at 18% 47%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 23% 73%, rgba(230,200,106,.55), transparent 60%),
    radial-gradient(1.8px 1.8px at 29% 3%,  rgba(230,200,106,.7),  transparent 60%),
    radial-gradient(1.2px 1.2px at 34% 33%, rgba(230,200,106,.45), transparent 60%),
    radial-gradient(1.6px 1.6px at 40% 58%, rgba(230,200,106,.6),  transparent 60%),
    radial-gradient(1.1px 1.1px at 46% 84%, rgba(230,200,106,.4),  transparent 60%),
    radial-gradient(1.5px 1.5px at 52% 41%, rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(1.9px 1.9px at 58% 68%, rgba(230,200,106,.72), transparent 60%),
    radial-gradient(1.3px 1.3px at 64% 24%, rgba(230,200,106,.5),  transparent 60%),
    radial-gradient(1.7px 1.7px at 70% 53%, rgba(230,200,106,.65), transparent 60%),
    radial-gradient(1.2px 1.2px at 76% 87%, rgba(230,200,106,.45), transparent 60%),
    radial-gradient(1.6px 1.6px at 82% 44%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.1px 1.1px at 88% 8%,  rgba(230,200,106,.42), transparent 60%),
    radial-gradient(1.5px 1.5px at 94% 61%, rgba(230,200,106,.55), transparent 60%),
    radial-gradient(1.8px 1.8px at 99% 27%, rgba(230,200,106,.68), transparent 60%),
    radial-gradient(1.3px 1.3px at 4% 96%,  rgba(230,200,106,.5),  transparent 60%),
    radial-gradient(1.6px 1.6px at 16% 71%, rgba(230,200,106,.6),  transparent 60%),
    radial-gradient(1.1px 1.1px at 28% 20%, rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(1.7px 1.7px at 41% 96%, rgba(230,200,106,.65), transparent 60%),
    radial-gradient(1.2px 1.2px at 55% 79%, rgba(230,200,106,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 67% 32%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.9px 1.9px at 79% 6%,  rgba(230,200,106,.7),  transparent 60%),
    radial-gradient(1.3px 1.3px at 85% 92%, rgba(230,200,106,.5),  transparent 60%),
    radial-gradient(1.6px 1.6px at 96% 74%, rgba(230,200,106,.62), transparent 60%),
    radial-gradient(1.1px 1.1px at 11% 55%, rgba(230,200,106,.4),  transparent 60%),
    radial-gradient(1.4px 1.4px at 20% 84%, rgba(230,200,106,.52), transparent 60%),
    radial-gradient(1.7px 1.7px at 31% 62%, rgba(230,200,106,.65), transparent 60%),
    radial-gradient(1.2px 1.2px at 37% 8%,  rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(1.5px 1.5px at 48% 33%, rgba(230,200,106,.55), transparent 60%),
    radial-gradient(1.8px 1.8px at 60% 87%, rgba(230,200,106,.7),  transparent 60%),
    radial-gradient(1.1px 1.1px at 72% 4%,  rgba(230,200,106,.4),  transparent 60%),
    radial-gradient(1.6px 1.6px at 78% 39%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 90% 65%, rgba(230,200,106,.5),  transparent 60%),
    radial-gradient(1.5px 1.5px at 95% 93%, rgba(230,200,106,.58), transparent 60%),
    radial-gradient(1.2px 1.2px at 2% 18%,  rgba(230,200,106,.45), transparent 60%),
    radial-gradient(1.7px 1.7px at 10% 88%, rgba(230,200,106,.65), transparent 60%),
    radial-gradient(1.1px 1.1px at 24% 56%, rgba(230,200,106,.4),  transparent 60%),
    radial-gradient(1.6px 1.6px at 42% 15%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 50% 68%, rgba(230,200,106,.52), transparent 60%),
    radial-gradient(1.8px 1.8px at 65% 92%, rgba(230,200,106,.7),  transparent 60%),
    radial-gradient(1.2px 1.2px at 73% 27%, rgba(230,200,106,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 86% 50%, rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(1.9px 1.9px at 92% 96%, rgba(230,200,106,.72), transparent 60%),
    radial-gradient(1.3px 1.3px at 100% 12%, rgba(230,200,106,.5), transparent 60%);
}
/* Camada 2 da base densa, em posicoes que nao repetem a camada 1. */
:is(.escuro, .estrelado)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 4% 30%,  rgba(230,200,106,.9),  transparent 60%),
    radial-gradient(1.1px 1.1px at 12% 60%, rgba(255,255,255,.6),  transparent 60%),
    radial-gradient(1.7px 1.7px at 20% 22%, rgba(230,200,106,.65), transparent 60%),
    radial-gradient(1.2px 1.2px at 28% 78%, rgba(230,200,106,.5),  transparent 60%),
    radial-gradient(1.5px 1.5px at 36% 10%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.1px 1.1px at 44% 50%, rgba(230,200,106,.45), transparent 60%),
    radial-gradient(1.8px 1.8px at 53% 90%, rgba(230,200,106,.7),  transparent 60%),
    radial-gradient(1.2px 1.2px at 61% 35%, rgba(230,200,106,.5),  transparent 60%),
    radial-gradient(1.6px 1.6px at 69% 62%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 77% 15%, rgba(230,200,106,.6),  transparent 60%),
    radial-gradient(1.1px 1.1px at 88% 70%, rgba(230,200,106,.42), transparent 60%),
    radial-gradient(1.7px 1.7px at 95% 40%, rgba(230,200,106,.68), transparent 60%),
    radial-gradient(1.3px 1.3px at 8% 45%,  rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(1.5px 1.5px at 17% 90%, rgba(230,200,106,.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 32% 65%, rgba(230,200,106,.42), transparent 60%),
    radial-gradient(1.8px 1.8px at 48% 25%, rgba(230,200,106,.72), transparent 60%),
    radial-gradient(1.1px 1.1px at 58% 8%,  rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.6px 1.6px at 66% 95%, rgba(230,200,106,.6),  transparent 60%),
    radial-gradient(1.3px 1.3px at 74% 48%, rgba(230,200,106,.5),  transparent 60%),
    radial-gradient(1.9px 1.9px at 83% 82%, rgba(230,200,106,.7),  transparent 60%),
    radial-gradient(1.2px 1.2px at 91% 18%, rgba(230,200,106,.5),  transparent 60%),
    radial-gradient(1.5px 1.5px at 98% 58%, rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(1.1px 1.1px at 2% 72%,  rgba(230,200,106,.4),  transparent 60%),
    radial-gradient(1.7px 1.7px at 40% 42%, rgba(230,200,106,.62), transparent 60%),
    radial-gradient(1.4px 1.4px at 55% 68%, rgba(230,200,106,.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 22% 12%, rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(1.5px 1.5px at 3% 58%,  rgba(230,200,106,.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 9% 5%,   rgba(230,200,106,.48), transparent 60%),
    radial-gradient(1.7px 1.7px at 15% 80%, rgba(230,200,106,.65), transparent 60%),
    radial-gradient(1.1px 1.1px at 24% 35%, rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(1.6px 1.6px at 30% 68%, rgba(230,200,106,.6),  transparent 60%),
    radial-gradient(1.2px 1.2px at 37% 92%, rgba(230,200,106,.45), transparent 60%),
    radial-gradient(1.8px 1.8px at 43% 18%, rgba(230,200,106,.7),  transparent 60%),
    radial-gradient(1.1px 1.1px at 49% 56%, rgba(230,200,106,.4),  transparent 60%),
    radial-gradient(1.5px 1.5px at 56% 30%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.9px 1.9px at 62% 84%, rgba(230,200,106,.72), transparent 60%),
    radial-gradient(1.3px 1.3px at 68% 7%,  rgba(230,200,106,.5),  transparent 60%),
    radial-gradient(1.6px 1.6px at 75% 60%, rgba(230,200,106,.62), transparent 60%),
    radial-gradient(1.2px 1.2px at 81% 38%, rgba(230,200,106,.45), transparent 60%),
    radial-gradient(1.7px 1.7px at 87% 89%, rgba(230,200,106,.68), transparent 60%),
    radial-gradient(1.1px 1.1px at 93% 22%, rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(1.5px 1.5px at 97% 66%, rgba(230,200,106,.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 6% 26%,  rgba(230,200,106,.5),  transparent 60%),
    radial-gradient(1.6px 1.6px at 19% 52%, rgba(230,200,106,.6),  transparent 60%),
    radial-gradient(1.2px 1.2px at 26% 97%, rgba(230,200,106,.45), transparent 60%),
    radial-gradient(1.8px 1.8px at 34% 14%, rgba(230,200,106,.7),  transparent 60%),
    radial-gradient(1.1px 1.1px at 40% 73%, rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(1.5px 1.5px at 46% 46%, rgba(230,200,106,.55), transparent 60%),
    radial-gradient(1.9px 1.9px at 53% 4%,  rgba(230,200,106,.72), transparent 60%),
    radial-gradient(1.3px 1.3px at 60% 62%, rgba(230,200,106,.5),  transparent 60%),
    radial-gradient(1.6px 1.6px at 66% 28%, rgba(230,200,106,.62), transparent 60%),
    radial-gradient(1.2px 1.2px at 71% 94%, rgba(230,200,106,.45), transparent 60%),
    radial-gradient(1.7px 1.7px at 78% 50%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.1px 1.1px at 85% 16%, rgba(230,200,106,.4),  transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 76%, rgba(230,200,106,.58), transparent 60%),
    radial-gradient(1.8px 1.8px at 96% 44%, rgba(230,200,106,.7),  transparent 60%),
    radial-gradient(1.2px 1.2px at 1% 88%,  rgba(230,200,106,.45), transparent 60%),
    radial-gradient(1.6px 1.6px at 13% 63%, rgba(230,200,106,.6),  transparent 60%),
    radial-gradient(1.1px 1.1px at 21% 9%,  rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(1.4px 1.4px at 29% 41%, rgba(230,200,106,.52), transparent 60%),
    radial-gradient(1.7px 1.7px at 38% 85%, rgba(230,200,106,.65), transparent 60%),
    radial-gradient(1.2px 1.2px at 45% 20%, rgba(230,200,106,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 51% 71%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.9px 1.9px at 59% 33%, rgba(230,200,106,.72), transparent 60%),
    radial-gradient(1.3px 1.3px at 64% 98%, rgba(230,200,106,.5),  transparent 60%),
    radial-gradient(1.6px 1.6px at 70% 12%, rgba(230,200,106,.62), transparent 60%),
    radial-gradient(1.1px 1.1px at 76% 75%, rgba(230,200,106,.4),  transparent 60%),
    radial-gradient(1.5px 1.5px at 82% 54%, rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(1.8px 1.8px at 88% 31%, rgba(230,200,106,.7),  transparent 60%),
    radial-gradient(1.2px 1.2px at 94% 91%, rgba(230,200,106,.45), transparent 60%),
    radial-gradient(1.3px 1.3px at 99% 6%,  rgba(230,200,106,.5),  transparent 60%),
    radial-gradient(1.6px 1.6px at 5% 70%,  rgba(230,200,106,.6),  transparent 60%),
    radial-gradient(1.1px 1.1px at 33% 55%, rgba(230,200,106,.4),  transparent 60%),
    radial-gradient(1.5px 1.5px at 57% 47%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.7px 1.7px at 80% 68%, rgba(230,200,106,.65), transparent 60%);
}

/* ---------- Ceu vivo: estrelas que piscam de verdade ----------
   As camadas de gradiente acima pulsavam INTEIRAS, em unissono — o campo
   todo clareava e escurecia junto, o que le como "fundo respirando", nunca
   como estrelas cintilando. Por isso viraram base estatica (densidade) e o
   cintilar passou para estrelas individuais, cada uma com duracao e atraso
   proprios, geradas por site.js. E o unico jeito de cada estrela piscar no
   seu proprio tempo. */
.campo-vivo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.estrela-viva {
  position: absolute;
  border-radius: 50%;
  background: var(--ouro-claro);
  animation: estrela-cintilar var(--dur, 2s) ease-in-out var(--atraso, 0s) infinite;
}
/* Uma em cada oito ganha halo — sao elas que dao o "brilho" do ceu */
.estrela-brilhante {
  background: var(--branco-estrela);
  box-shadow: 0 0 6px 1px rgba(230, 200, 106, .85),
              0 0 14px 4px rgba(230, 200, 106, .3);
}
@keyframes estrela-cintilar {
  0%, 100% { opacity: .1;  transform: scale(.5); }
  50%      { opacity: 1;   transform: scale(1.3); }
}

/* Movimento reduzido: o ceu continua cheio e visivel, so para de cintilar.
   Sem isso, a regra global de .01ms congelaria as estrelas no quadro final
   (opacity .1) e o campo sumiria justamente para quem pediu menos motion. */
@media (prefers-reduced-motion: reduce) {
  .estrela-viva {
    animation: none !important;
    opacity: .8 !important;
    transform: none !important;
  }
}

/* ---------- Layout ---------- */

.container {
  width: min(var(--container), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.secao { padding-block: var(--secao-y); }

.fundo-creme-2 { background: var(--creme-2); }

.grid {
  display: grid;
  gap: var(--gap);
}

@media (min-width: 1024px) {
  .grid-12 { grid-template-columns: repeat(12, 1fr); }
}

/* Split de hero: 42% foto / 58% texto */
.split {
  display: grid;
  gap: var(--gap);
  align-items: center;
}
@media (min-width: 1024px) {
  .split { grid-template-columns: 42fr 58fr; gap: clamp(2rem, 5vw, 4.5rem); }
  .split-invertido { grid-template-columns: 58fr 42fr; }
}

/* Abaixo de 1024px os filhos empilham na ordem do DOM. Quando a foto e o
   primeiro filho (Hero e Sobre da Home, Sobre a autora da /livro), isso
   bota o retrato antes da mensagem — para quem chega pelo Instagram
   rolando rapido no celular, o gancho da pagina fica escondido atras de
   uma foto. .split-invertido ja nasce com o texto primeiro no DOM e nao
   e afetado por esta regra. */
@media (max-width: 1023px) {
  .split > .aura:first-child { order: 2; }
  .split > .aura:first-child + * { order: 1; }
}

/* Painel sobreposto. So a partir de 1024px: em coluna unica a sobreposicao
   vira colisao, nao profundidade. */
.painel {
  background: var(--branco);
  border-radius: var(--r-painel);
  padding: clamp(1.75rem, 4vw, 4rem);
  box-shadow: var(--sombra-suave);
}
@media (min-width: 1024px) {
  .painel-sobreposto { margin-top: -48px; }
}

/* ---------- Foto em blob organico ---------- */

.foto-blob {
  position: relative;
  border-radius: var(--r-foto);
  overflow: hidden;
  isolation: isolate;
}
.foto-blob img { width: 100%; height: 100%; object-fit: cover; }

/* Rotacao diferente para a foto do Sobre nao repetir a do hero */
.foto-blob-alt { border-radius: 58% 42% 52% 48% / 42% 56% 44% 58%; }

/* Aura lavanda atras da foto */
.aura { position: relative; }
.aura::before {
  content: '';
  position: absolute;
  inset: -8% -6% -4% -10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--lavanda), transparent 72%);
  opacity: .55;
}

/* Intensidade por contexto, so na Home: o Hero e o primeiro impacto da
   pagina e pode pesar mais; o Sobre e apoio a narrativa e nao pode
   competir com o texto ao lado. Mesma forma, mesmo componente — so a
   opacidade e o alcance do gradiente mudam. */
.aura.aura-forte::before { inset: -11% -9% -7% -13%; opacity: .7; }
.aura.aura-suave::before { opacity: .36; }

/* ---------- Utilitarios ---------- */

.centro { text-align: center; }
.centro h1, .centro h2, .centro p, .centro .lead { margin-inline: auto; }
.centro .eyebrow { justify-content: center; }

.texto > * + * { margin-top: var(--e-5); }
.texto h2 + p { margin-top: var(--e-5); }

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: var(--e-3) var(--e-5);
  background: var(--indigo-800);
  color: var(--creme);
  border-radius: 0 0 var(--r-card) 0;
}
.pular-para-conteudo:focus { left: 0; top: 0; }

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Foco ---------- */

:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
  border-radius: 4px;
}
.escuro :focus-visible,
.estrelado :focus-visible { outline-color: var(--ouro-claro); }

/* ---------- Movimento ---------- */

.revelar {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--revelar), transform var(--revelar);
}
.revelar.visivel { opacity: 1; transform: none; }

/* Entrada escalonada: quando o container pai (.revelar) fica visivel,
   os filhos de grade/lista entram um a um, nao todos de uma vez — a
   propria .revelar ja controla o "quando" via IntersectionObserver,
   isto so acrescenta o atraso entre irmaos. Sem JS novo. */
.diferenciais-grid > article,
.tratamentos-grid > article,
.timeline > .etapa {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--revelar), transform var(--revelar);
}
.painel.revelar.visivel .diferenciais-grid > article,
.tratamentos-grid.revelar.visivel > article,
.timeline.revelar.visivel > .etapa {
  opacity: 1;
  transform: none;
}
.diferenciais-grid > article:nth-child(1),
.tratamentos-grid > article:nth-child(1),
.timeline > .etapa:nth-child(1) { transition-delay: 0ms; }
.diferenciais-grid > article:nth-child(2),
.tratamentos-grid > article:nth-child(2),
.timeline > .etapa:nth-child(2) { transition-delay: 60ms; }
.diferenciais-grid > article:nth-child(3),
.tratamentos-grid > article:nth-child(3),
.timeline > .etapa:nth-child(3) { transition-delay: 120ms; }
.diferenciais-grid > article:nth-child(4),
.tratamentos-grid > article:nth-child(4),
.timeline > .etapa:nth-child(4) { transition-delay: 180ms; }
.tratamentos-grid > article:nth-child(5),
.timeline > .etapa:nth-child(5) { transition-delay: 240ms; }
.tratamentos-grid > article:nth-child(6),
.timeline > .etapa:nth-child(6) { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .revelar { opacity: 1; transform: none; }
}