/* Base do site — Dra. Leandra Bittencourt. Carrega depois de hero.css (que define as cores e fontes em :root). */
:root {
  --claro: #f7f1e6;          /* gesso iluminado */
  --parede: #e4dbc9;         /* parede na meia-luz */
  --noite: #231c15;          /* sala com a luz apagada: só o L aceso */
  --noite-2: #2f261d;
  --texto-noite: #f3ead9;
  --texto-noite-2: #cfc3ae;
  --ouro: #8a5f2a;           /* caramelo do veio escurecido: passa AA sobre claro */
  --fio: #fffaf0;            /* a linha de luz */
  --t-h2: clamp(2.3rem, 4.9vw, 4.4rem);
  --t-h3: clamp(1.45rem, 2.1vw, 1.9rem);
  --t-texto: clamp(1.02rem, 1.12vw, 1.125rem);
  --t-rotulo: .875rem;
  --sec: clamp(5rem, 10.5vw, 9.5rem);
  --larg: 78rem;
  --raio: 14px;
}
html { scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; background: var(--marmore); }
img { max-width: 100%; height: auto; }
::selection { background: #f3d9a4; color: var(--tinta); }

/* granulado único, fixo, por cima da página */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .2 0 0 0 0 .14 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero .grao { display: none; }

/* ---------- seção: uma parede da sala, com o L de luz no canto ---------- */
.wf-sec {
  position: relative; isolation: isolate;
  padding: var(--sec) var(--margem);
  background: var(--wf-fundo, var(--marmore));
  color: var(--tinta);
}
.wf-dentro { max-width: var(--larg); margin-inline: auto; position: relative; }
.wf-tom-marmore { --wf-fundo: radial-gradient(90vmax 60vmax at 12% 0% in oklab, #f7efe0, transparent 70%), radial-gradient(70vmax 50vmax at 100% 100% in oklch, oklch(.86 .055 80 / .55), transparent 70%), var(--marmore); }
.wf-tom-claro   { --wf-fundo: radial-gradient(80vmax 50vmax at 85% 0% in oklab, #fffaf0, transparent 70%), radial-gradient(70vmax 50vmax at 0% 100% in oklch, oklch(.93 .04 72 / .6), transparent 70%), var(--claro); }
.wf-tom-parede  { --wf-fundo: radial-gradient(80vmax 55vmax at 20% 10% in oklab, #efe7d8, transparent 70%), radial-gradient(60vmax 50vmax at 95% 90% in oklab, #d6cbb6, transparent 70%), var(--parede); }
.wf-tom-noite   { --wf-fundo: radial-gradient(70vmax 50vmax at 14% 0% in oklab, #4a3a28, transparent 70%), radial-gradient(60vmax 45vmax at 100% 100% in oklab, #3a2c1e, transparent 70%), var(--noite); color: var(--texto-noite); }

/* o L de luz: um fio horizontal no alto da seção e uma perna que desce num dos lados */
.wf-L { position: absolute; z-index: 0; top: clamp(1.5rem, 3.4vw, 3rem); left: var(--margem); right: var(--margem); height: clamp(4.5rem, 9vw, 8rem); pointer-events: none; }
.wf-L::before, .wf-L::after {
  content: ""; position: absolute; background: var(--fio); border-radius: 2px;
  box-shadow: 0 0 6px #fff3dc, 0 0 22px rgb(255 214 150 / .9), 0 0 60px rgb(255 200 120 / .55);
  opacity: .18; transition: opacity 1.4s ease .2s, transform 1.5s cubic-bezier(.2,.7,.15,1) .1s;
}
.wf-L::before { top: 0; left: 0; height: 3px; width: min(38%, 26rem); transform: scaleX(0); transform-origin: left; }
.wf-L::after  { top: 0; left: 0; width: 3px; height: 100%; transform: scaleY(0); transform-origin: top; }
.wf-L--dir::before { left: auto; right: 0; transform-origin: right; }
.wf-L--dir::after  { left: auto; right: 0; }
.wf-visto > .wf-L::before, .wf-visto > .wf-L::after { opacity: 1; transform: none; }
.wf-tom-claro .wf-L::before, .wf-tom-claro .wf-L::after, .wf-tom-marmore .wf-L::before, .wf-tom-marmore .wf-L::after, .wf-tom-parede .wf-L::before, .wf-tom-parede .wf-L::after {
  box-shadow: 0 0 0 1px rgb(201 163 111 / .35), 0 0 10px #fff3dc, 0 0 30px rgb(255 205 130 / .95), 0 0 70px rgb(255 190 110 / .5);
}

/* ---------- tipografia das seções ---------- */
.wf-olho { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.4rem; font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ouro); }
.wf-olho::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; flex: none; }
.wf-tom-noite .wf-olho { color: #e2bd84; }
.wf-h2 { margin: 0; font-family: var(--f-titulo); font-weight: 400; font-size: var(--t-h2); line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
.wf-h3 { margin: 0; font-family: var(--f-titulo); font-weight: 400; font-size: var(--t-h3); line-height: 1.15; }
.wf-texto { margin: 0; font-size: var(--t-texto); line-height: 1.65; color: var(--tinta-2); text-wrap: pretty; max-width: 36rem; }
.wf-texto + .wf-texto { margin-top: 1.1em; }
.wf-tom-noite .wf-texto { color: var(--texto-noite-2); }
.wf-texto strong { font-weight: 600; color: var(--tinta); }
.wf-tom-noite .wf-texto strong { color: var(--texto-noite); }
.wf-rotulo { font-size: var(--t-rotulo); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--tinta-2); }
.wf-tom-noite .wf-rotulo { color: var(--texto-noite-2); }

/* citação: sempre Bellefair, aspa caramelo, assinatura em versalete */
.wf-cita { margin: 0; }
.wf-cita blockquote { margin: 0; font-family: var(--f-titulo); font-size: clamp(1.45rem, 2.3vw, 2.1rem); line-height: 1.22; }
.wf-cita blockquote::before { content: "“"; color: var(--veio); margin-right: .04em; }
.wf-cita blockquote::after { content: "”"; }
.wf-cita figcaption { margin-top: .9rem; font-size: var(--t-rotulo); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--tinta-2); }
.wf-tom-noite .wf-cita figcaption { color: var(--texto-noite-2); }

/* botões fora do hero (o hero tem os dele) */
.wf-botao { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 56px; padding: 0 1.9rem; border-radius: 999px; font-weight: 600; font-size: .98rem; letter-spacing: .02em; text-decoration: none; white-space: nowrap; color: var(--luz); background: var(--tinta); box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 18px 40px -18px rgb(84 56 20 / .65); transition: background-color .4s, box-shadow .5s, transform .5s var(--curva); }
.wf-botao:hover, .wf-botao:focus-visible { background: #3a2f23; box-shadow: 0 0 0 5px rgb(255 243 220 / .7), 0 22px 46px -16px rgb(255 205 130 / .9); }
.wf-tom-noite .wf-botao { background: var(--luz); color: var(--tinta); box-shadow: 0 0 0 1px #fff, 0 0 40px -6px rgb(255 205 130 / .8); }
.wf-elo { display: inline-flex; align-items: center; min-height: 48px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .34em; text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); transition: text-decoration-color .4s; }
.wf-elo:hover, .wf-elo:focus-visible { text-decoration-color: currentColor; }

/* ---------- entrada pela rolagem: um gesto por seção ---------- */
.js [data-wf] { opacity: 0; transform: translateY(20px); transition: opacity 1s ease, transform 1.1s var(--curva); transition-delay: calc(var(--i, 0) * 110ms); }
.js [data-wf].wf-visto { opacity: 1; transform: none; }

/* ---------- botão que acompanha a rolagem no celular ---------- */
.wf-fixo { position: fixed; z-index: 80; left: 50%; bottom: max(.9rem, env(safe-area-inset-bottom)); translate: -50% 140%; transition: translate .6s var(--curva); display: none; }
.wf-fixo.wf-mostra { translate: -50% 0; }
.wf-fixo a { display: inline-flex; align-items: center; gap: .6rem; min-height: 52px; padding: 0 1.5rem; border-radius: 999px; background: var(--tinta); color: var(--luz); font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap; box-shadow: 0 0 0 1px rgb(255 243 220 / .5), 0 16px 34px -12px rgb(40 26 8 / .7); }
@media (max-width: 899.98px) { .wf-fixo { display: block; } }

/* ---------- rodapé ---------- */
.wf-rodape { position: relative; background: var(--noite); color: var(--texto-noite-2); padding: clamp(3.5rem, 7vw, 6rem) var(--margem) clamp(5.5rem, 7vw, 3rem); font-size: .95rem; overflow: hidden; }
.wf-rodape a { color: var(--texto-noite); }
.wf-rodape-grade { max-width: var(--larg); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(2rem, 5vw, 5rem); position: relative; }
.wf-rodape-marca { display: flex; gap: 1.1rem; align-items: flex-start; }
.wf-rodape-marca svg { width: 34px; height: 54px; flex: none; color: var(--fio); filter: drop-shadow(0 0 5px #fff3dc) drop-shadow(0 0 18px rgb(255 205 130 / .9)); }
.wf-rodape-marca b { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: 1.7rem; line-height: 1.1; color: var(--texto-noite); }
.wf-rodape-marca span { display: block; margin-top: .45rem; }
.wf-rodape h2 { margin: 0 0 .9rem; font-family: var(--f-texto); font-size: var(--t-rotulo); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: #e2bd84; }
.wf-rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.wf-rodape li a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.wf-rodape li a:hover { text-decoration: underline; text-underline-offset: .3em; }
.wf-rodape address { font-style: normal; line-height: 1.6; }
.wf-rodape-fim { max-width: var(--larg); margin: clamp(2.5rem, 5vw, 4rem) auto 0; padding-top: 1.4rem; border-top: 1px solid rgb(243 234 217 / .16); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; font-size: .875rem; }
.wf-selo a { text-decoration: underline; text-underline-offset: .3em; display: inline-flex; min-height: 44px; align-items: center; }
@media (max-width: 760px) { .wf-rodape-grade { grid-template-columns: minmax(0, 1fr); } }