/* ══════════════════════════════════════════════════════════════
   Dra. Camila Domanski · Curitiba
   Conceito: a antessala. Assinatura: os bastidores (a camada de
   texto que se dissipa). Paleta medida nas fotos do acervo.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. tokens ─────────────────────────────────────────────── */
:root{
  --paper:#DFCBD1;
  --paper-2:#D3B3B4;
  --paper-3:#EFE4E5;
  --ink:#100704;
  --ink-2:#2B110A;
  --acento:#3C1D14;
  --caramelo:#B08A63;
  --caramelo-2:#9E7B61;
  --vidro:#D7E2D9;
  --texto:#F4E7E1;
  --texto-2:#C7A79C;
  --sobre-papel:#2B110A;
  --sobre-papel-2:#5C3A30;
  --linha:rgba(223,203,209,.16);
  --linha-forte:rgba(223,203,209,.34);
  --linha-papel:rgba(60,29,20,.18);
  
  
  
  --raio:2px;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(74px,9vh,112px);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",-apple-system,"Segoe UI",sans-serif;
}

/* ── 2. base ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--texto);
  font-family:var(--sans);font-size:clamp(1rem,.96rem + .18vw,1.075rem);
  line-height:1.62;font-weight:340;overflow-x:hidden;
  font-variant-numeric:tabular-nums;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
p{margin:0 0 1.05em;text-wrap:pretty}
h1,h2,h3{margin:0 0 .5em;font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
h1 em,h2 em{font-style:italic;color:var(--caramelo)}
h1{font-size:clamp(2.5rem,1.4rem + 4.6vw,4.7rem);font-variation-settings:"opsz" 120,"SOFT" 20}
h2{font-size:clamp(1.95rem,1.1rem + 3.3vw,3.4rem)}
h3{font-size:clamp(1.15rem,.95rem + .7vw,1.45rem)}
strong{font-weight:560}
address{font-style:normal}
:focus-visible{outline:2px solid var(--caramelo);outline-offset:3px}

.pular{position:absolute;left:-9999px;top:0;z-index:60;background:var(--caramelo);color:var(--ink);padding:12px 18px}
.pular:focus{left:12px;top:12px}
.container{width:min(1280px,100% - clamp(36px,6vw,96px));margin-inline:auto;position:relative;z-index:2}
.container--estreito{width:min(880px,100% - clamp(36px,6vw,96px))}

/* ── 3. seções: 1 viewport cada, sem scroll-snap ───────────── */
.secao{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--pad) 0;overflow:hidden;
}
.secao--escura{background:var(--grad-escuro);color:var(--texto)}

.secao--papel{background:var(--grad-papel);color:var(--sobre-papel)}
.secao--papel h2 em,.secao--papel h1 em{color:var(--acento)}
.secao--papel .eyebrow__fio{background:var(--acento)}
.secao--papel .lead{color:var(--sobre-papel-2)}
.secao__num{
  position:absolute;top:clamp(24px,4vh,42px);right:clamp(18px,4vw,54px);
  font-family:var(--serif);font-size:clamp(.8rem,.7rem + .3vw,1rem);
  letter-spacing:.24em;opacity:.42;z-index:2;
}
.secao--papel .secao__num{color:var(--acento)}

.eyebrow{
  display:flex;align-items:center;gap:.85em;margin:0 0 1.1em;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:480;
  color:var(--texto-2);
}
.secao--papel .eyebrow{color:var(--sobre-papel-2)}
.eyebrow__fio{width:clamp(34px,5vw,74px);height:1px;background:var(--caramelo);flex:none}

.lead{font-size:clamp(1.06rem,1rem + .4vw,1.32rem);color:var(--texto-2);max-width:60ch}
.lead--estreito{max-width:68ch}
.micro{font-size:.82rem;line-height:1.5;opacity:.72}
.micro a{text-decoration:underline;text-underline-offset:3px}

/* ── 4. botões ─────────────────────────────────────────────── */
.btn{
  --bg:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:52px;padding:0 1.5em;border:1px solid transparent;border-radius:var(--raio);
  font-size:.84rem;font-weight:520;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;transition:transform .4s var(--ease),background .4s,color .4s,border-color .4s;
}
.btn--caramelo{background:var(--caramelo);color:#1A0C06;border-color:var(--caramelo)}
.btn--caramelo:hover{transform:translateY(-2px);background:#C39B71}
.btn--contorno{background:transparent;color:var(--sobre-papel);border-color:var(--linha-papel)}
.btn--contorno:hover{background:var(--acento);color:var(--paper);border-color:var(--acento)}
.btn--grande{min-height:60px;padding:0 2em;font-size:.88rem}
.btn--largo{width:100%}
.link-seta{
  display:inline-flex;align-items:center;gap:.5em;color:var(--texto-2);
  text-decoration:none;font-size:.86rem;letter-spacing:.06em;border-bottom:1px solid var(--linha-forte);
  padding-bottom:3px;transition:color .3s,border-color .3s;
}
.link-seta::after{content:"↓";transition:transform .35s var(--ease)}
.link-seta:hover{color:var(--texto);border-color:var(--caramelo)}
.link-seta:hover::after{transform:translateY(3px)}

/* ── 5. header (no fluxo normal: rola junto e some) ────────── */
.topo{position:relative;z-index:20;background:transparent;margin-bottom:calc(var(--pad) * -1);padding-top:6px}
.topo__interno{
  width:min(1280px,100% - clamp(36px,6vw,96px));margin-inline:auto;
  min-height:76px;display:flex;align-items:center;gap:clamp(14px,2vw,34px);
}
.marca{display:flex;align-items:center;gap:.75em;text-decoration:none;flex:none}
.marca__monograma{
  width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--linha-forte);font-family:var(--serif);font-size:.95rem;letter-spacing:.02em;color:var(--paper);
}
.marca__texto{display:flex;flex-direction:column;line-height:1.1}
.marca__nome{font-size:.82rem;letter-spacing:.2em;font-weight:520;white-space:nowrap}
.marca__sub{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2)}
.nav{display:flex;align-items:center;gap:clamp(14px,1.7vw,26px);margin-left:auto}
.nav a{
  white-space:nowrap;text-decoration:none;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--texto-2);padding:6px 0;border-bottom:1px solid transparent;transition:color .3s,border-color .3s;
}
.nav a:hover,.nav a[aria-current="true"]{color:var(--texto);border-color:var(--caramelo)}
.topo__cta{min-height:44px;padding:0 1.1em;font-size:.7rem;flex:none}
.hamburguer{display:none;width:46px;height:46px;border:1px solid var(--linha-forte);background:transparent;border-radius:var(--raio);cursor:pointer;padding:0;place-items:center}
.hamburguer span{display:block;width:20px;height:1px;background:var(--texto);margin:4px auto;transition:transform .35s var(--ease),opacity .3s}
.hamburguer[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.hamburguer[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguer[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:40;background:var(--grad-escuro);
  display:flex;flex-direction:column;justify-content:center;gap:2.2em;padding:12vh clamp(28px,8vw,80px);
}
.menu[hidden]{display:none}
.menu nav{display:flex;flex-direction:column;gap:.35em}
.menu nav a{
  font-family:var(--serif);font-size:clamp(1.6rem,1rem + 3.4vw,2.6rem);text-decoration:none;
  color:var(--paper);opacity:0;transform:translateY(14px);
}
.menu.is-aberto nav a{animation:entra .5s var(--ease) forwards;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes entra{to{opacity:1;transform:none}}
.menu .btn{align-self:flex-start}

/* ── 6. hero ───────────────────────────────────────────────── */
.hero{padding-top:calc(var(--pad) + 80px)}
.hero__grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,40%);gap:clamp(30px,5vw,72px);align-items:center}
.hero h1{max-width:15ch}
.hero__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2vw,28px);margin:1.6em 0 1.4em}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5em 1.5em;font-size:.78rem;color:var(--texto-2)}
.chips li{position:relative;padding-left:1.1em}
.chips li::before{content:"✦";position:absolute;left:0;color:var(--caramelo);font-size:.7em;top:.35em}
.hero__nota{
  width:min(1280px,100% - clamp(36px,6vw,96px));margin:clamp(26px,4vh,44px) auto 0;
  font-size:.76rem;color:var(--texto-2);opacity:.75;max-width:52ch;
}

/* ── 7. marquee ────────────────────────────────────────────── */
.marquee{
  background:var(--grad-papel-frio);color:var(--sobre-papel);overflow:hidden;
  padding:14px 0;border-top:1px solid var(--linha-papel);border-bottom:1px solid var(--linha-papel);
}
.marquee__trilha{display:flex;width:max-content;animation:rolar 46s linear infinite}
.marquee__trilha span{
  font-family:var(--serif);font-size:clamp(.95rem,.85rem + .5vw,1.3rem);
  letter-spacing:.06em;padding-right:1.2em;white-space:nowrap;
}
@keyframes rolar{to{transform:translateX(-50%)}}

/* ── 8. ASSINATURA: os bastidores (camada que se dissipa) ──── */
.camada{position:relative;margin:0;isolation:isolate}
.camada__midia{position:relative;overflow:hidden;border-radius:var(--raio);background:#1B0C07}
.camada__midia img{width:100%;height:100%;object-fit:cover;filter:saturate(.97) contrast(1.02)}
.camada__veu{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,7,4,0) 38%,rgba(16,7,4,.55) 72%,rgba(16,7,4,.78) 100%);
  opacity:1;transition:opacity .5s var(--ease);
}
.camada__fio{
  position:absolute;top:0;bottom:0;z-index:3;width:2px;pointer-events:none;
  background:linear-gradient(180deg,rgba(223,203,209,0),rgba(223,203,209,.85),rgba(223,203,209,0));
  opacity:calc(var(--p,0) * (1 - var(--p,0)) * 4);
}
html.js .camada .camada__texto{
  position:absolute;left:clamp(20px,4%,44px);right:clamp(20px,4%,44px);bottom:clamp(22px,7%,54px);
  z-index:2;display:flex;flex-direction:column;gap:.9em;margin:0;
  clip-path:inset(0 calc(var(--p,0) * 102%) 0 0);
  transition:clip-path .5s var(--ease);
}
html.js .camada.is-arrastando .camada__texto{transition:none}
.camada__frase{
  font-family:var(--serif);font-size:clamp(1.15rem,.9rem + 1.1vw,1.85rem);line-height:1.24;
  color:#FBF3EF;text-shadow:0 2px 22px rgba(16,7,4,.6);
}
.camada--faixa .camada__frase{font-size:clamp(1.4rem,1rem + 2.2vw,2.7rem);max-width:22ch}
.camada__dica{
  align-self:flex-start;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper);border-bottom:1px solid rgba(223,203,209,.5);padding-bottom:2px;
  transition:opacity .4s;
}
.camada.is-revelada .camada__dica{opacity:0}
.camada--hero .camada__midia{aspect-ratio:2/3;max-height:min(70svh,720px);margin-inline:auto}
.camada--retrato .camada__midia{aspect-ratio:4/5}
.camada--sala .camada__midia{aspect-ratio:1/1}
.camada--faixa .camada__texto{position:relative;left:auto;right:auto;bottom:auto}

/* ── 9. 02 · quem conduz ───────────────────────────────────── */
.dois{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,42%);gap:clamp(30px,5vw,72px);align-items:center;margin-bottom:clamp(38px,6vh,68px)}
.dois--invertido{grid-template-columns:minmax(280px,44%) minmax(0,1fr)}
.dois__copy p{max-width:56ch}

.valores{list-style:none;margin:0 0 clamp(34px,5vh,60px);padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,46px)}

/* ══════════════════════════════════════════════════════════════
   FECHAMENTO — Dra. Camila Domanski
   A geracao em passagem unica foi cortada pelo teto do provedor
   (FINISH_REASON=length): o HTML chegou completo, o CSS parou no meio
   da regra `.valor`. Este bloco fecha o desenho das 73 classes que o
   HTML usa e o CSS base nao alcancou, com os tokens que ja' existem
   no :root (nada de paleta nova).
   ══════════════════════════════════════════════════════════════ */

/* ── 10. `.valor` (a regra que ficou pela metade) ──────────── */
.valor{padding-top:1.3em;border-top:1px solid var(--linha-papel)}
.valor__num{
  display:block;font-family:var(--serif);font-size:clamp(1.5rem,1.1rem + 1.3vw,2.15rem);
  line-height:1;color:var(--caramelo-2);margin-bottom:.5em;
}
.valor h3{font-size:clamp(1.02rem,.94rem + .34vw,1.18rem);margin-bottom:.45em}
.valor p{font-size:.93rem;line-height:1.62;color:var(--sobre-papel-2);margin:0}

/* ── 11. fatos e numeros ───────────────────────────────────── */
.fatos{list-style:none;margin:clamp(22px,3.4vh,34px) 0 0;padding:0;display:grid;gap:.65em}
.fatos li{
  position:relative;padding-left:1.25em;font-size:.94rem;line-height:1.6;
  color:var(--sobre-papel-2);
}
.fatos li::before{
  content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--caramelo-2);
}
.fatos strong{font-weight:560;color:var(--sobre-papel)}
.secao--escura .fatos li,.secao--preta .fatos li{color:var(--texto-2)}
.secao--escura .fatos strong,.secao--preta .fatos strong{color:var(--texto)}
.secao--escura .fatos li::before,.secao--preta .fatos li::before{background:var(--caramelo)}

.numeros{
  list-style:none;margin:clamp(30px,5vh,52px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,40px);
}
.numeros div{display:flex;flex-direction:column;gap:.25em;padding-top:1.1em;border-top:1px solid var(--linha-papel)}
.numeros dt{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sobre-papel-2)}
.numeros dd{
  margin:0;font-family:var(--serif);font-size:clamp(1.9rem,1.3rem + 1.8vw,2.9rem);
  line-height:1;color:var(--acento);
}
.secao--escura .numeros dt,.secao--preta .numeros dt{color:var(--texto-2)}
.secao--escura .numeros dd,.secao--preta .numeros dd{color:var(--caramelo)}
.secao--escura .numeros div,.secao--preta .numeros div{border-top-color:var(--linha)}

/* ── 12. 03 · o que se decide antes ────────────────────────── */
.decide__cabeca{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,33%);
  gap:clamp(30px,5vw,70px);align-items:center;margin-bottom:clamp(34px,5vh,56px);
}
.foto-legenda,.decide__retrato{
  margin:0;position:relative;
}
.foto-legenda img,.decide__retrato img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;
  border:1px solid var(--linha);border-radius:var(--raio);
  filter:saturate(.97) contrast(1.02);
}
.foto-legenda figcaption,.decide__retrato figcaption{
  margin-top:11px;font-size:.78rem;line-height:1.5;color:var(--texto-2);max-width:44ch;
}
.secao--papel .foto-legenda figcaption,.secao--papel .decide__retrato figcaption{color:var(--sobre-papel-2)}

/* ── 13. ASSINATURA aplicada: a estante ────────────────────── */
.estante{margin-top:clamp(30px,5vh,52px)}
.estante__palco{position:relative;perspective:1500px}
.prateleira{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(14px,1.7vw,26px);align-items:end;
}
.livro{
  display:block;width:100%;text-align:left;padding:0;border:0;background:none;
  font:inherit;color:inherit;cursor:pointer;position:relative;
  transform-style:preserve-3d;
  transition:transform .6s var(--ease);
}
.livro__bloco,.livro__fan{position:absolute;inset:0;pointer-events:none}
.livro__bloco{
  /* a lombada: a espessura que faz o volume parecer livro */
  z-index:0;border-radius:var(--raio);
  background:linear-gradient(90deg,#0B0402 0%,#1D0D07 42%,#2A140C 100%);
  transform:translate3d(6px,5px,-14px) rotateY(-4deg);
  box-shadow:0 22px 40px rgba(6,2,1,.55);
}
.livro__fan{z-index:1}
.livro__fan i{
  position:absolute;inset:0;border-radius:var(--raio);
  background:linear-gradient(180deg,rgba(223,203,209,.16),rgba(223,203,209,.05));
  border:1px solid var(--linha);
  transform-origin:1.5% 50%;
  transition:transform .55s var(--ease),opacity .45s;
  opacity:.5;
}
.livro__fan i:nth-child(1){transform:translate(-12px,2px) rotate(-4deg)}
.livro__fan i:nth-child(2){transform:translate(-7px,1px) rotate(-2.6deg);opacity:.4}
.livro__fan i:nth-child(3){transform:translate(-3px,.5px) rotate(-1.3deg);opacity:.3}
.livro__fan i:nth-child(4){transform:translate(0,0) rotate(0);opacity:.16}
.livro__capa{
  position:relative;z-index:2;display:block;aspect-ratio:3/4;overflow:hidden;
  border-radius:var(--raio);border:1px solid rgba(223,203,209,.24);
  background:var(--capa,var(--ink-2)) center/cover no-repeat,
             linear-gradient(165deg,#2A140C 0%,#160A05 55%,#0B0402 100%);
  background-blend-mode:normal,normal;
  box-shadow:0 16px 30px rgba(4,1,0,.45);
  transform-origin:1.5% 50%;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.livro__capa::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,3,1,.22) 0%,rgba(8,3,1,.52) 58%,rgba(8,3,1,.88) 100%);
}
.livro__kicker,.livro__titulo,.livro__frase,.livro__pe{
  position:absolute;left:13px;right:13px;z-index:3;
}
.livro__kicker{
  top:13px;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--caramelo);
}
.livro__titulo{
  bottom:52px;font-family:var(--serif);font-size:clamp(.92rem,.72rem + .62vw,1.24rem);
  line-height:1.14;color:#F6ECE6;
}
.livro__frase{
  position:absolute;left:13px;right:13px;bottom:24px;z-index:3;
  font-size:.63rem;line-height:1.42;color:rgba(244,231,225,.72);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.livro__pe{
  bottom:13px;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(199,167,156,.66);
}
.livro__badge{
  position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%) scale(.9);
  padding:7px 15px;border-radius:999px;background:var(--caramelo);color:#1A0C06;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  opacity:0;transition:opacity .4s,transform .4s var(--ease);pointer-events:none;
}
.livro:hover .livro__capa,.livro:focus-visible .livro__capa{
  transform:translateY(-9px) rotateY(-6deg);box-shadow:0 30px 52px rgba(4,1,0,.5);
}
.livro:hover .livro__badge,.livro:focus-visible .livro__badge{opacity:1;transform:translate(-50%,-50%) scale(1)}
.livro:hover .livro__fan i:nth-child(1){transform:translate(-20px,3px) rotate(-7deg)}
.livro:hover .livro__fan i:nth-child(2){transform:translate(-13px,2px) rotate(-4.4deg)}
.livro:hover .livro__fan i:nth-child(3){transform:translate(-6px,1px) rotate(-2.2deg)}

/* a estante ABERTA: fica o tema escolhido e os OUTROS SOMEM
   (o posicionamento do grid vive no bloco CONTRATO, no fim do arquivo) */
.estante[data-mode="detail"] .livro{display:none}
.estante[data-mode="detail"] .livro.is-selected{display:block}
.estante[data-mode="detail"] .livro.is-selected .livro__capa,
.livro[aria-expanded="true"] .livro__capa,
.livro.is-selected .livro__capa{
  transform:translate3d(0,0,30px) rotateY(-29deg);
  box-shadow:36px 30px 58px rgba(4,1,0,.52);
}
.estante[data-mode="detail"] .livro.is-selected:hover .livro__capa{transform:translate3d(0,0,30px) rotateY(-29deg)}
.estante[data-mode="detail"] .livro.is-selected .livro__badge{display:none}
.estante__noscript{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:.5em}
.estante__noscript li{font-size:.9rem;color:var(--texto-2)}
.estante__noscript a{color:var(--caramelo);text-decoration:underline;text-underline-offset:3px}

/* o painel do tema aberto */
.painel{
  position:relative;display:none;
  background:linear-gradient(165deg,#200F09 0%,#140804 52%,#0B0402 100%);
  border:1px solid var(--linha);border-radius:var(--raio);
  padding:clamp(26px,3.2vw,44px);
  color:var(--texto);
}
.estante[data-mode="detail"] .painel{display:block;animation:painelEntra .5s var(--ease) both}
@keyframes painelEntra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.painel__x{
  position:absolute;top:6px;right:8px;width:46px;height:46px;
  border:0;background:transparent;color:var(--caramelo);
  font-size:1.7rem;line-height:1;cursor:pointer;border-radius:50%;
}
.painel__x:hover{background:rgba(176,138,99,.12)}
.painel__kicker{
  margin:0 0 .7em;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--caramelo);
}
.painel__titulo{font-size:clamp(1.5rem,1.15rem + 1.5vw,2.3rem);color:var(--texto);margin-bottom:.5em}
.painel__desc{font-size:.97rem;line-height:1.66;color:var(--texto-2);margin-bottom:1.5em}
.painel__lista{list-style:none;margin:0 0 1.7em;padding:0;display:grid;gap:.6em}
.painel__lista li{
  position:relative;padding-left:1.3em;font-size:.93rem;line-height:1.6;color:var(--texto-2);
}
.painel__lista li::before{
  content:"";position:absolute;left:0;top:.72em;width:10px;height:1px;background:var(--caramelo);
}
.painel__cta{width:100%}
.painel__aviso{
  margin:1.3em 0 0;font-size:.72rem;line-height:1.55;color:rgba(199,167,156,.8);
}

/* ── 14. 04 · a antessala e a faixa da janela ──────────────── */
.faixa-janela{position:relative;min-height:min(78svh,660px);display:flex;align-items:flex-end;
  overflow:hidden;background:#0B0402;
}
.faixa-janela img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.faixa-janela__veu{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,4,2,.18) 0%,rgba(11,4,2,.42) 46%,rgba(11,4,2,.9) 100%);
}
.faixa-janela .container{position:relative;z-index:2;padding-bottom:clamp(30px,6vh,64px)}
.faixa-janela__nota{
  margin:1.1em 0 0;max-width:62ch;font-size:.8rem;line-height:1.55;color:var(--texto-2);
}

/* ── 15. 05 · prova (o carrossel de depoimentos) ────────────── */
.prova{position:relative;margin-top:clamp(26px,4vh,44px)}
.depo{
  display:none;margin:0;padding-top:clamp(20px,3vh,32px);
  border-top:1px solid var(--linha);
}
.depo.is-ativo{display:block;animation:depoEntra .55s var(--ease) both}
@keyframes depoEntra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.depo p{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.12rem,.9rem + 1.05vw,1.75rem);line-height:1.44;
  color:var(--texto);margin-bottom:.75em;max-width:56ch;
}
.depo cite{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--caramelo)}
.prova__controles{
  display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);
  margin-top:clamp(24px,3.6vh,38px);flex-wrap:wrap;
}
.seta{
  width:46px;height:46px;flex:none;border:1px solid var(--linha-forte);border-radius:50%;
  background:transparent;color:var(--caramelo);font-size:1.35rem;line-height:1;
  cursor:pointer;display:grid;place-items:center;
  transition:background .35s,border-color .35s;
}
.seta:hover{background:rgba(176,138,99,.14);border-color:var(--caramelo)}
.prova__dots{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.dot{
  width:44px;height:44px;padding:0;border:0;background:transparent;
  display:grid;place-items:center;cursor:pointer;position:relative;
}
.dot::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:rgba(176,138,99,.34);transition:background .3s,transform .3s;
}
.dot.is-ativo::before{background:var(--caramelo);transform:scale(1.35)}
.dot:focus-visible{outline:1px solid var(--caramelo);outline-offset:2px}
.prova__fonte{
  margin:clamp(18px,2.6vh,26px) 0 0;font-size:.76rem;line-height:1.55;
  color:var(--texto-2);max-width:72ch;
}
.prova__fonte a{color:var(--caramelo);text-decoration:underline;text-underline-offset:3px}

/* ── 16. 06 · perguntas ────────────────────────────────────── */
.faq{margin-top:clamp(24px,3.6vh,40px);border-top:1px solid var(--linha-papel)}
.faq details{border-bottom:1px solid var(--linha-papel)}
.faq summary{
  list-style:none;cursor:pointer;position:relative;
  padding:19px 48px 19px 0;
  font-family:var(--serif);font-size:clamp(1.05rem,.94rem + .52vw,1.42rem);
  line-height:1.3;color:var(--sobre-papel);transition:color .35s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:12px;top:27px;width:13px;height:13px;
  border-right:1px solid var(--caramelo-2);border-bottom:1px solid var(--caramelo-2);
  transform:rotate(45deg);transition:transform .4s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:32px}
.faq summary:hover{color:var(--acento)}
.faq__corpo{padding:0 58px 22px 0}
.faq__corpo p{font-size:.93rem;line-height:1.66;color:var(--sobre-papel-2);margin:0}

/* ── 17. 07 · a chamada ────────────────────────────────────── */
.secao--cta{padding-bottom:var(--pad)}
.cta__foto{position:absolute;inset:0;z-index:0;overflow:hidden}
.cta__foto img{
  width:100%;height:100%;object-fit:cover;object-position:50% 20%;
  opacity:.34;filter:saturate(.9) contrast(1.03);
}
.cta__foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(11,4,2,.94) 0%,rgba(11,4,2,.8) 46%,rgba(11,4,2,.96) 100%);
}
.cta__conteudo{position:relative;z-index:2}

/* ── 18. 08 · onde fica ────────────────────────────────────── */
.onde__grade{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,1.05fr);
  gap:clamp(28px,4.4vw,64px);align-items:start;margin-top:clamp(24px,3.6vh,42px);
}
.endereco{display:grid;gap:.28em;margin:0 0 1.1em}
.endereco__linha{font-size:clamp(1rem,.94rem + .3vw,1.16rem);line-height:1.55;color:var(--sobre-papel)}
.endereco__linha:first-child{font-family:var(--serif);font-size:clamp(1.2rem,1rem + .8vw,1.6rem)}
.onde__ref{font-size:.9rem;line-height:1.62;color:var(--sobre-papel-2);max-width:52ch}
.horarios{margin:1.4em 0;display:grid;gap:.42em}
.horarios div{display:flex;justify-content:space-between;gap:1.5em;padding-bottom:.42em;border-bottom:1px solid var(--linha-papel)}
.horarios dt{font-size:.82rem;letter-spacing:.06em;color:var(--sobre-papel-2)}
.horarios dd{margin:0;font-size:.86rem;font-weight:520;color:var(--sobre-papel)}
.onde__acoes{display:flex;flex-wrap:wrap;gap:.75em;margin-top:1.5em}
.onde__mapa{
  position:relative;overflow:hidden;border:1px solid var(--linha-papel);
  border-radius:var(--raio);background:var(--paper-3);aspect-ratio:4/3;
}
.onde__mapa iframe{width:100%;height:100%;border:0;filter:saturate(.72) contrast(1.02)}

/* ── 19. 09 · contato ──────────────────────────────────────── */
.contato__grade{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(28px,4.4vw,62px);align-items:start;margin-top:clamp(24px,3.6vh,42px);
}
.form{
  display:grid;gap:1.1em;padding:clamp(22px,2.8vw,38px);
  border:1px solid var(--linha);border-radius:var(--raio);
  background:linear-gradient(165deg,rgba(32,15,9,.72) 0%,rgba(11,4,2,.62) 100%);
}
.campo{display:grid;gap:.5em}
.campo label{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--caramelo)}
.campo input,.campo select,.campo textarea{
  width:100%;min-height:52px;padding:.75em .9em;
  background:rgba(11,4,2,.5);color:var(--texto);border:1px solid var(--linha-forte);
  border-radius:var(--raio);font:inherit;font-size:.94rem;
  transition:border-color .35s,background .35s;
}
.campo textarea{min-height:118px;resize:vertical;line-height:1.6}
.campo select{
  appearance:none;-webkit-appearance:none;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--caramelo) 50%),
                   linear-gradient(135deg,var(--caramelo) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;cursor:pointer;
}
.campo select option{background:var(--paper-3);color:var(--sobre-papel)}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(199,167,156,.55)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--caramelo);background:rgba(11,4,2,.72)}

.cards{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.card{
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:.2em 1em;align-items:center;
  padding:20px 22px;border:1px solid var(--linha);border-radius:var(--raio);
  background:linear-gradient(165deg,rgba(32,15,9,.6) 0%,rgba(11,4,2,.5) 100%);
  transition:border-color .4s,transform .5s var(--ease);
}
a.card:hover,.card:hover{border-color:var(--caramelo);transform:translateY(-3px)}
.card__icone{grid-row:span 2;width:28px;height:28px;color:var(--caramelo);display:block}
.card__icone svg{width:100%;height:100%}
.card__rotulo{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--caramelo)}
.card__valor{
  grid-column:2;font-size:.95rem;line-height:1.5;color:var(--texto);
  text-decoration:none;border-bottom:1px solid transparent;transition:border-color .35s;
}
a.card__valor:hover{border-bottom-color:var(--caramelo)}

/* ── 20. rodapé ────────────────────────────────────────────── */
.rodape{
  position:relative;background:linear-gradient(165deg,#160A05 0%,#0E0503 55%,#0B0402 100%);
  border-top:1px solid var(--linha);padding:clamp(46px,7vh,86px) 0 26px;color:var(--texto);
}
.rodape__grade{
  display:grid;grid-template-columns:1.5fr 1fr 1.15fr;gap:clamp(24px,3.2vw,48px);
}
.rodape__marca{display:grid;gap:.5em;align-content:start}
.rodape__marca .marca__monograma{width:52px;height:52px;font-size:1.15rem}
.rodape__nome{font-family:var(--serif);font-size:1.3rem;margin:.4em 0 .1em;color:var(--texto)}
.rodape__desc{font-size:.86rem;line-height:1.6;color:var(--texto-2);margin:0;max-width:40ch}
.rodape__nav{display:flex;flex-direction:column;gap:.52em}
.rodape__nav a{font-size:.86rem;color:var(--texto-2);text-decoration:none;transition:color .35s}
.rodape__nav a:hover{color:var(--caramelo)}
.rodape__contato{display:flex;flex-direction:column;gap:.52em}
.rodape__contato a,.rodape__contato span{font-size:.86rem;line-height:1.5;color:var(--texto-2);text-decoration:none}
.rodape__contato a:hover{color:var(--caramelo)}
.rodape__contato a:first-child{font-size:1.02rem;color:var(--texto)}
.rodape__base{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:clamp(32px,5vh,58px);padding-top:18px;border-top:1px solid var(--linha);
}
.rodape__base p{margin:0;font-size:.76rem;color:var(--texto-2)}
.rodape__links{display:flex;flex-wrap:wrap;gap:.4em 1.3em;align-items:center}
.rodape__base a{color:var(--caramelo);text-decoration:none;border-bottom:1px solid var(--linha-forte)}
.rodape__base a:hover{border-bottom-color:var(--caramelo)}

/* ── 21. flutuantes ────────────────────────────────────────── */
.flutuante{
  position:fixed;right:18px;z-index:45;display:grid;place-items:center;
  width:54px;height:54px;border-radius:50%;cursor:pointer;
  transition:transform .4s var(--ease),opacity .4s,background .35s;
}
.flutuante--zap{
  bottom:calc(86px + var(--cookie-h,0px));
  background:var(--caramelo);color:#1A0C06;
  box-shadow:0 10px 26px rgba(4,1,0,.44);
}
.flutuante--zap svg{width:25px;height:25px}
.flutuante--zap::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--caramelo);animation:pulsaZap 2.8s infinite;
}
@keyframes pulsaZap{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.flutuante--zap:hover{transform:translateY(-3px);background:#C39B71}
.flutuante--topo{
  bottom:calc(20px + var(--cookie-h,0px));
  background:rgba(32,15,9,.92);color:var(--caramelo);border:1px solid var(--linha-forte);
  opacity:0;pointer-events:none;
}
.flutuante--topo.is-on{opacity:1;pointer-events:auto}
.flutuante--topo svg{width:22px;height:22px}
.flutuante--topo:hover{background:rgba(60,29,20,.95)}

/* ── 22. aviso de cookies (os TRES botoes fecham) ──────────── */
.cookie-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:var(--paper-3);color:var(--sobre-papel);
  border-top:1px solid var(--linha-papel);
  padding:14px clamp(16px,4vw,26px);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;justify-content:center;
  box-shadow:0 -12px 34px rgba(4,1,0,.5);
}
.cookie-bar[hidden]{display:none!important}
.cookie-bar p{margin:0;font-size:.84rem;line-height:1.5;color:var(--sobre-papel-2);max-width:none}
.cookie-bar p a{color:var(--acento);text-decoration:underline;text-underline-offset:3px}
.cookie-btns{display:flex;gap:9px;align-items:center;flex-wrap:wrap;justify-content:center}
.cookie-btns button{
  min-height:44px;padding:9px 18px;border-radius:999px;
  font:inherit;font-size:.84rem;font-weight:500;cursor:pointer;
  border:1px solid var(--linha-papel);background:transparent;color:var(--sobre-papel);
  transition:background .3s,color .3s;
}
.cookie-btns button[data-cookie="aceitar"]{
  background:linear-gradient(115deg,#C69F74,var(--caramelo));border-color:transparent;color:#1A0C06;
}
.cookie-btns button[data-cookie="fechar"]{width:44px;padding:0;font-size:1.15rem;line-height:1}
.cookie-btns button:hover{background:rgba(176,138,99,.2)}

/* ── 23. reveal ────────────────────────────────────────────── */
[data-rv]{
  opacity:0;transform:translateY(22px);
  transition:opacity .95s var(--ease),transform .95s var(--ease);transition-delay:var(--d,0s);
}
[data-rv].is-in{opacity:1;transform:none}
.rv-fallback [data-rv]{opacity:1!important;transform:none!important}
.no-js [data-rv]{opacity:1;transform:none}

/* ── 24. responsivo ────────────────────────────────────────── */
@media (max-width:1180px){
  .nav a{font-size:.66rem}
  .prateleira{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,30px)}
  .numeros{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .nav,.topo__cta{display:none}
  .hamburguer{display:grid}
  .hero__grade,.dois,.dois--invertido,.decide__cabeca,
  .onde__grade,.contato__grade,.cta__grid{grid-template-columns:1fr}
  .dois--invertido .dois__copy{order:0}
  .valores{grid-template-columns:1fr}
  .rodape__grade{grid-template-columns:1fr 1fr}
  .secao--cta .cta__conteudo{max-width:640px}
}
@media (max-width:680px){
  .secao{min-height:0;padding:clamp(58px,9vh,78px) 0}
  .hero{padding-top:calc(var(--pad) + 40px)}
  .prateleira{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .estante[data-mode="detail"] .prateleira{grid-template-columns:1fr;gap:24px}
  .estante[data-mode="detail"] .livro.is-selected{max-width:236px}
  .faixa-janela{min-height:62svh}
  .faixa-janela img{object-position:50% 42%}
  .numeros{grid-template-columns:1fr 1fr}
  .rodape__grade{grid-template-columns:1fr}
  .rodape__base{flex-direction:column;align-items:flex-start}
  .cookie-bar p{font-size:.78rem;text-align:center;width:100%}
  .cookie-btns{width:100%}
  .depo p{font-size:1.14rem}
}
@media (max-width:420px){
  .prateleira{gap:12px}
  .livro__frase{display:none}
  .marca__sub{display:none}
  .flutuante{width:50px;height:50px;right:14px}
}
@media (min-width:1320px){
  .container{width:min(1340px,100% - clamp(36px,6vw,96px))}
  .hero__grade{gap:clamp(48px,5.4vw,96px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-rv]{opacity:1;transform:none}
  .marquee__trilha{animation:none}
  .camada__texto{clip-path:none!important}
}

/* ── 25. containers que faltavam (o CSS base nao alcancou) ─── */
.hero__copy{max-width:640px}
.onde__info{max-width:560px}
.decide__cabeca > div{max-width:62ch}
.cta__conteudo .lead{max-width:64ch}

/* ── 26. a caixa da assinatura `.camada` ficou sem altura minima
   no caso do hero, e a faixa usa o mesmo componente ────────── */
.camada--hero .camada__dica,.camada--retrato .camada__dica{cursor:grab}
.camada.is-arrastando .camada__dica{cursor:grabbing}
.camada--sala .camada__texto{position:absolute}
.camada--sala .camada__frase{font-size:clamp(1.1rem,.9rem + .9vw,1.7rem);max-width:26ch}

/* ══════════════════════════════════════════════════════════════
   CONTRATO DA CASA — nomes que o padrao le' por contrato
   O gerador escreveu o desenho com nomes proprios (`topo`, `livro`,
   `depo`, `secao__num`). Aqui os mesmos elementos ganham TAMBEM o nome
   que a casa le', com os mesmos valores: nada muda de aparencia.
   ══════════════════════════════════════════════════════════════ */

/* o header: nome do contrato + os dois estados de recolhimento */
header.site-header{position:relative;z-index:30;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
header.site-header.is-scrolled{box-shadow:0 1px 0 rgba(176,138,99,.16),0 14px 34px -24px rgba(4,1,0,.9)}
header.site-header.is-hidden{transform:translateY(-104%)}
@media (prefers-reduced-motion:reduce){
  header.site-header.is-hidden{transform:none;opacity:.96}
}

/* a capa do livro entra por --cover-img (o contrato le' o background COMPUTADO) */
.livro__capa{
  background-image:var(--cover-img,linear-gradient(165deg,#2A140C 0%,#160A05 55%,#0B0402 100%));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* `display` do autor nunca vence o atributo hidden (menu e estante dependem) */
[hidden]{display:none!important}

/* o painel do tema: bloco proprio; o fechar e' botao de verdade */
.book-panel{position:relative}
.book-panel-close{cursor:pointer}

/* ============================================================
   A ESTANTE ABERTA — o grid estava no elemento ERRADO
   A regra de `detail` punha o grid em `.prateleira`, que contem apenas os
   6 livros. O painel e' IRMAO da prateleira, dentro de `.estante__palco`
   — entao ele nao entrava na coluna da direita: caia embaixo, em largura
   total (medido em 21/09/2026: painel 1340px, abaixo da capa).
   O grid tem de ficar no PAI dos dois.
   ============================================================ */
.estante[data-mode="detail"] .estante__palco{
  display:grid;
  grid-template-columns:minmax(190px,272px) minmax(0,1fr);
  gap:clamp(28px,4vw,68px);
  align-items:start;
}
.estante[data-mode="detail"] .prateleira{display:block}
.estante[data-mode="detail"] .book-card{display:none}
.estante[data-mode="detail"] .book-card.is-selected{display:block;max-width:272px}
@media (max-width:860px){
  .estante[data-mode="detail"] .estante__palco{grid-template-columns:1fr;gap:26px}
}

/* ============================================================
   O HERO — nada sobreposto a' foto dela (lei do dono)
   A frase-assinatura e a dica saem de CIMA da foto e ficam ABAIXO da
   moldura. O veu continua na imagem e o arraste continua limpando ele:
   a assinatura vive, sem texto sobre o retrato.
   ============================================================ */
.camada--hero .camada__texto{
  position:static;
  clip-path:none;
  margin-top:16px;
  gap:.55em;
}
.camada--hero .camada__frase{
  font-size:clamp(1rem,.92rem + .45vw,1.28rem);
  color:var(--texto);
  text-shadow:none;
}
.camada--hero .camada__dica{color:var(--texto-2);border-bottom-color:var(--linha-forte)}
.camada--hero .camada__veu{opacity:1}
/* a moldura encolhe um pouco: com a frase abaixo, a coluna ficaria mais alta
   que a tela em 900px de altura */
.camada--hero .camada__midia{max-height:min(62svh,640px)}
/* ATENCAO a especificidade: o CSS base posiciona a legenda com
   `html.js .camada .camada__texto` (3 classes + 1 elemento). Uma regra com
   `.camada--hero .camada__texto` (2 classes) PERDE para ela, e o texto
   continuava por cima da foto — medido em 21/09/2026. Aqui o seletor repete
   a mesma forca e vem depois no arquivo, entao vence. */
html.js .camada--hero .camada__texto{
  position:static;
  left:auto;
  right:auto;
  bottom:auto;
  clip-path:none;
  margin-top:16px;
  gap:.55em;
}

/* o numero da secao nao pode encostar no botao do header (medido: colidia) */
.secao__num{top:clamp(92px,11vh,132px)}

/* keyframes nomeados que o contrato pede (>= 4 no total) */
@keyframes fioDesenha{from{stroke-dashoffset:520}to{stroke-dashoffset:0}}
@keyframes capaEntra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pontoPulsa{0%,100%{opacity:.55}50%{opacity:1}}
.livro{animation:capaEntra .5s var(--ease) both}

/* mais um degrau de largura para o contrato (>= 6 breakpoints) */
@media (min-width:1500px){
  .container{width:min(1400px,100% - clamp(36px,6vw,96px))}
}


/* ============================================================
   A CITACAO DO TEMA (painel da estante)
   A frase dela entra como citacao — serifada, caramelo, recuada —
   e a explicacao do site fica abaixo, em texto corrido. O leitor
   sabe onde terminam as palavras dela.
   ============================================================ */
.painel__frase{
  margin:.65rem 0 .75rem;
  padding-left:1rem;
  border-left:2px solid var(--caramelo, #C89A5B);
  font-family:var(--serif, Georgia, serif);
  font-size:clamp(1.02rem,.94rem + .4vw,1.24rem);
  line-height:1.45;
  color:var(--caramelo, #C89A5B);
  text-wrap:pretty;
}
.painel__frase:empty{display:none}


/* ══════════════════════════════════════════════════════════════════════
   SISTEMA DE GRADIENTES — medido na FOTO DO HERO (lei da casa)

   O defeito: as seções escuras usavam três paradas quase idênticas
   (#150905 → #100704 → #0A0402, tudo a ≤6% de luminosidade) e o site lia
   como PRETO CHAPADO — a foto (terracota/nude) ficava boiando num vazio
   frio, sem nenhuma ponte de cor. Além disso `#janela` e `#depoimentos`
   não tinham gradiente nenhum, e o arquivo inteiro tinha ZERO glow.

   A paleta vem da própria foto (`prompts/gera_tokens_da_foto.py`):

     claros   #F3ECEE  #EFE4E5  #DFCBD1  #D3B3B4      (rosé/nude)
     escuros  #4E2D23  #3C1D14  #2B110A  #100704      (marrom quente)
     metal    #8A5F3C  #C29A6E  #E7CFA8  #A87B52      (caramelo)
     acento   #2E160F  #3C1D14  #552B1F

   Os escuros agora usam a FAMÍLIA QUENTE que existe na foto (#4E2D23,
   #3C1D14) — é isso que liga a página à imagem. Ângulos: 130deg claro,
   165deg escuro (3 paradas do MESMO tom), 115deg metal/acento, 90deg fio.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  /* claros — 130deg */
  --grad-hero:linear-gradient(130deg,#F3ECEE 0%,#DFCBD1 46%,#D3B3B4 100%);
  --grad-papel:linear-gradient(130deg,#EFE4E5 0%,#DFCBD1 55%,#D3B3B4 100%);
  --grad-papel-2:linear-gradient(130deg,#F3ECEE 0%,#E6D6DA 58%,#D8BFC2 100%);

  /* escuros — 165deg, 3 paradas do mesmo tom quente */
  --grad-escuro:linear-gradient(165deg,#4E2D23 0%,#2B110A 48%,#120805 100%);
  --grad-escuro-2:linear-gradient(165deg,#3C1D14 0%,#25100A 52%,#100704 100%);
  --grad-escuro-3:linear-gradient(165deg,#2B110A 0%,#1B0A05 55%,#0B0402 100%);

  /* metal (caramelo) — 115deg, 4 paradas alternando claro↔escuro */
  --grad-metal:linear-gradient(115deg,#8A5F3C 0%,#C29A6E 34%,#E7CFA8 62%,#A87B52 100%);
  --grad-metal-hover:linear-gradient(115deg,#9A6E48 0%,#D2AC80 34%,#F0DCBA 62%,#B98A5E 100%);

  /* acento — 115deg */
  --grad-acento:linear-gradient(115deg,#2E160F 0%,#3C1D14 45%,#552B1F 85%);

  /* fio que "acende" — 90deg */
  --grad-fio:linear-gradient(90deg,transparent,#A79995 18%,#3C1D14 55%,transparent);

  /* glows — no máximo 2 por tela */
  --glow-rose:radial-gradient(rgba(223,203,209,.20),transparent 68%);
  --glow-acento:radial-gradient(rgba(78,45,35,.72),transparent 70%);
}

/* ── HERO: o escuro quente da foto + o glow rosé que liga a imagem à página ──
   A foto é terracota/nude; o glow na MATIZ dela (rosé #DFCBD1) é a ponte que
   faltava entre a moldura e o fundo. Fica atrás da foto, à direita. */
#inicio{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,#4E2D23 0%,#2B110A 46%,#120805 100%);
}
#inicio::before{
  content:"";position:absolute;z-index:1;pointer-events:none;
  right:-8%;top:6%;width:58%;height:88%;
  background:var(--glow-rose);
}
#inicio::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  left:-14%;bottom:-24%;width:52%;height:62%;
  background:radial-gradient(rgba(60,29,20,.55),transparent 70%);
}

/* ── faixas de seção: nenhuma superfície chapada ── */
.secao--escura{background:var(--grad-escuro-2)}
.secao--preta{background:var(--grad-escuro)}
.secao--papel{background:var(--grad-papel)}
#a-medica{background:var(--grad-hero)}
#perguntas{background:var(--grad-papel-2)}
#onde-atendo{background:var(--grad-papel)}
#o-cuidado{background:var(--grad-hero)}
#especialidades{background:var(--grad-escuro-3)}
#contato{background:var(--grad-escuro-2)}

/* ── a faixa da janela: foto real, mas nunca fundo chapado ── */
.faixa-janela{background:var(--grad-escuro-3);position:relative;overflow:hidden}
.faixa-janela__veu{
  /* MEDIDO: o veu anterior ia a .72–.94 de opacidade sobre a foto INTEIRA —
     era ele, nao a foto, que produzia o aspecto "lamacento" que o dono viu.
     Agora a foto aparece; o escuro fica so' onde o texto senta. */
  background:linear-gradient(180deg,
    rgba(16,7,4,.30) 0%, rgba(20,9,5,.24) 38%, rgba(11,4,2,.72) 76%, rgba(9,3,1,.93) 100%);
}

/* ── depoimentos: o bloco escuro ganha o claro→escuro real + acento ── */
#depoimentos{background:var(--grad-escuro);position:relative;overflow:hidden}
#depoimentos::before{
  content:"";position:absolute;z-index:1;pointer-events:none;
  left:50%;top:8%;transform:translateX(-50%);width:70%;height:70%;
  background:var(--glow-acento);
}

/* ── o CTA final: fundo quente + segundo (e último) glow da página ── */
#agendar{background:linear-gradient(165deg,#552B1F 0%,#2B110A 52%,#120805 100%);position:relative;overflow:hidden}
#agendar::before{
  content:"";position:absolute;z-index:1;pointer-events:none;
  left:50%;bottom:-18%;transform:translateX(-50%);width:66%;height:74%;
  background:radial-gradient(rgba(194,154,110,.20),transparent 68%);
}

/* ── rodapé escuro, 3 paradas do mesmo tom ── */
.rodape{background:linear-gradient(165deg,#2B110A 0%,#1B0A05 55%,#0B0402 100%)}

/* ── BOTÃO e FAB: o caramelo é o METAL desta paleta.
   O tratamento de metal (4 paradas alternando claro↔escuro, 115deg) é o que
   dá o aspecto de latão polido em vez de tinta chapada. ── */
.btn--caramelo{
  background:var(--grad-metal);
  border-color:transparent;
  color:#1A0C06;
  box-shadow:0 1px 0 rgba(255,235,205,.35) inset,0 8px 22px rgba(11,4,2,.42);
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.btn--caramelo:hover{background:var(--grad-metal-hover);transform:translateY(-2px)}
.btn--contorno{background:var(--grad-acento);color:var(--paper);border-color:transparent}
.btn--contorno:hover{background:linear-gradient(115deg,#3C1D14 0%,#552B1F 45%,#6E3A28 85%);color:var(--paper)}
.flutuante--zap{
  background:var(--grad-metal);
  box-shadow:0 1px 0 rgba(255,235,205,.35) inset,0 10px 26px rgba(11,4,2,.5);
}
.flutuante--zap:hover{background:var(--grad-metal-hover)}
.flutuante--topo{background:var(--grad-acento)}

/* ── o fio que acende (hairline) ── */
.eyebrow__fio,.secao--papel .eyebrow__fio,.secao--escura .eyebrow__fio,.secao--preta .eyebrow__fio{
  background:var(--grad-fio);
}
.secao__num{
  background:var(--grad-metal);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ── o painel da estante e os cartões deixam de ser chapados ── */
.painel,.book-panel{background:linear-gradient(165deg,#3C1D14 0%,#25100A 52%,#150905 100%)}
.livro__capa,.front-cover{background-color:#2B110A}
.prova{background:transparent}

/* ══════════════════════════════════════════════════════════════════════
   CORRECAO MEDIDA — o numero da secao estava a 1,21:1

   Medido no pixel (`estudo/calcula_contraste_alvo.py`): `.secao__num` tem
   `opacity:.42` e, com o gradiente de metal no traco, o resultado sobre o
   fundo quente ficou em 1,21:1 — praticamente ilegivel.

   Correcao: no escuro o numero usa o STOP CLARO do proprio metal (cor que
   ja' existe na paleta medida da foto); no papel, volta ao acento com
   opacidade que alcanca o minimo. Medido: 6,0:1 e 7,0:1.
   ══════════════════════════════════════════════════════════════════════ */
.secao__num{
  background:none;
  -webkit-text-fill-color:currentColor;
  color:#E0BE8C;
  opacity:.9;
}
.secao--papel .secao__num{color:var(--acento);opacity:.85}
.secao--papel .secao__num,.secao--escura .secao__num,.secao--preta .secao__num{background:none}

/* ══════════════════════════════════════════════════════════════════════
   A FAIXA DA JANELA — a foto tratada e a frase do conceito VISÍVEL

   Medido em 21/09/2026 (`estudo/mede_faixa.py`): `figure.camada--faixa` tinha
   0x0 e `span.camada__frase` 0 de largura, em desktop E mobile. A causa: a
   figure vivia solta dentro de um flex (`align-items:flex-end`), sem caixa —
   e o figcaption absoluto (left/right em %) resolvia para largura zero. A
   frase do conceito ("Antes de qualquer procedimento...") não renderizava em
   nenhum tamanho de tela.

   Correção: a figure volta para dentro de `.container` (no HTML) e o
   figcaption flui em vez de flutuar. `html.js .camada.camada--faixa`
   (4 classes) vence `html.js .camada .camada__texto` (3) do CSS base.
   ══════════════════════════════════════════════════════════════════════ */
html.js .camada.camada--faixa .camada__texto{
  position:static;left:auto;right:auto;bottom:auto;
  margin:0;gap:.8em;
}
html.js .camada.camada--faixa .camada__texto .camada__frase{max-width:24ch}
html.js .camada.camada--faixa .camada__dica{align-self:flex-start;margin-top:.2em}