/* ============================================================
   Dra. Vanessa Borges · Harmonização Orofacial · Uberlândia
   Papel #020003 (medido na marca dela) · champanhe #C19D6D (medido
   no metal do instrumental) · nude #DFCDC3 (medido no estúdio claro)
   Assinatura: A LINHA DE PROJEÇÃO (fio de 1,5px que desenha contorno
   e aponta ponto)
   ============================================================ */

:root{
  --paper:#020003;
  --paper-2:#0A0609;
  --paper-3:#130C11;
  --ink:#E8E2D9;
  --ink-2:#A79C92;
  --champagne:#C19D6D;
  --champagne-hi:#E0C79E;
  --nude:#DFCDC3;
  --nude-2:#C9B79B;
  --nude-hi:#F1E8E1;
  --mauve:#958B8E;
  --bronze:#6A4E2A;
  --line:rgba(193,157,109,.22);
  --line-2:rgba(193,157,109,.42);
  --line-dark:rgba(42,30,24,.16);
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(72px,9vh,124px);
  --wrap:1200px;
  --fio:1.5px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px;overflow-x:hidden}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:300;font-size:clamp(15.5px,1.05vw,17px);line-height:1.68;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img,svg,iframe{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:"Bodoni Moda",Georgia,serif;font-weight:400;line-height:1.06;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1 em,h2 em,h3 em{font-style:italic;color:var(--champagne-hi)}
p{margin:0 0 1em;text-wrap:pretty;max-width:62ch}
ul,ol{margin:0;padding:0;list-style:none}
blockquote{margin:0}
cite{font-style:normal}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--champagne);color:#120C08;padding:12px 18px;z-index:99}
.skip:focus{left:12px;top:12px}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.wrap--tight{width:min(100% - 40px,920px)}
.sec{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:var(--pad) 0}
.sec--paper{background:var(--paper);color:var(--ink)}
.sec--nude{background:var(--nude);color:#1C150F}
.sec--nude h1,.sec--nude h2,.sec--nude h3{color:#1C150F}
.sec--nude h2 em,.sec--nude h3 em{color:var(--bronze)}
.sec--center{align-items:center;text-align:center}

/* ---------- tipografia ---------- */
h1{font-size:clamp(38px,5.6vw,74px)}
h2{font-size:clamp(30px,3.9vw,52px);margin-bottom:.5em}
h3{font-size:clamp(19px,1.7vw,23px);margin-bottom:.4em}
.lead{font-size:clamp(16px,1.25vw,19.5px);color:var(--ink-2);max-width:64ch}
.sec--nude .lead,.sec--nude p{color:#3B2E24}
.lead--c{margin-inline:auto;text-align:center}
.lead--narrow{max-width:56ch}
.h2--c{text-align:center;max-width:22ch;margin-inline:auto}
.eyebrow{
  display:flex;align-items:center;gap:12px;margin:0 0 18px;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--champagne);font-weight:400;
}
.sec--nude .eyebrow{color:var(--bronze)}
.eyebrow--c{justify-content:center;text-align:center}
.rule{width:38px;height:1px;background:var(--line-2);flex:none}
.sec--nude .rule{background:rgba(106,78,42,.5)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:2px;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:400;
  transition:transform .5s var(--ease),background .4s,border-color .4s,color .4s;
}
.btn--gold{background:var(--champagne);color:#0B0705;border:1px solid var(--champagne)}
.btn--gold:hover{background:var(--champagne-hi);border-color:var(--champagne-hi);transform:translateY(-2px)}
.btn--ghost{border:1px solid var(--line-2);color:var(--champagne);padding:0 20px;min-height:44px;font-size:11.5px}
.btn--ghost:hover{border-color:var(--champagne);background:rgba(193,157,109,.09)}
.sec--nude .btn--ghost{color:var(--bronze);border-color:rgba(106,78,42,.45)}
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.05em;
  color:var(--champagne);border-bottom:1px solid var(--line);padding-bottom:4px;
  transition:border-color .4s,color .4s;
}
.link-arrow::after{content:"";width:22px;height:1px;background:currentColor;transition:width .45s var(--ease)}
.link-arrow:hover{border-color:var(--champagne);color:var(--champagne-hi)}
.link-arrow:hover::after{width:34px}
.sec--nude .link-arrow{color:var(--bronze);border-color:rgba(106,78,42,.35)}

/* ---------- header (no fluxo normal, rola junto e some) ---------- */
.head{position:relative;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.head__in{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);min-height:76px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand__mark{width:34px;flex:none}
.brand__mark svg{width:100%;height:auto}
.brand__txt{display:flex;flex-direction:column;line-height:1.15}
.brand__txt strong{font-family:"Bodoni Moda",serif;font-size:15px;letter-spacing:.2em;color:var(--ink);white-space:nowrap}
.brand__txt small{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--champagne);white-space:nowrap}
.nav{display:flex;gap:clamp(14px,1.7vw,26px);margin-left:auto}
.nav a{
  font-size:12.5px;letter-spacing:.06em;color:var(--ink-2);white-space:nowrap;
  padding:6px 0;border-bottom:1px solid transparent;transition:color .4s,border-color .4s;
}
.nav a:hover,.nav a.is-on{color:var(--ink);border-color:var(--champagne)}
.head__cta{flex:none;white-space:nowrap}
.burger{display:none;width:44px;height:44px;margin-left:auto;position:relative}
.burger span{position:absolute;left:10px;right:10px;height:1px;background:var(--champagne);transition:transform .4s var(--ease),opacity .3s}
.burger span:first-child{top:18px}
.burger span:last-child{top:26px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:60;background:var(--paper-2);
  display:flex;flex-direction:column;justify-content:center;gap:34px;padding:64px 28px;
  transform:translateY(-100%);transition:transform .6s var(--ease);visibility:hidden;
}
.menu.is-open{transform:none;visibility:visible}
.menu__x{position:absolute;top:18px;right:18px;font-size:34px;line-height:1;color:var(--champagne);width:48px;height:48px}
.menu__nav{display:flex;flex-direction:column;gap:6px}
.menu__nav a{font-family:"Bodoni Moda",serif;font-size:clamp(23px,6vw,32px);padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.menu__cta{align-self:flex-start}

/* ---------- 01 hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(var(--pad) * .8) 0 var(--pad);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 50% at 76% 34%,rgba(193,157,109,.16),transparent 70%),
    radial-gradient(46% 46% at 12% 82%,rgba(149,139,142,.10),transparent 72%),
    linear-gradient(180deg,#020003 0%,#060306 62%,#020003 100%);
}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,74px);align-items:center}
.hero__copy{max-width:640px}
.hero__quote{border-left:1px solid var(--line-2);padding-left:20px;margin:26px 0}
.hero__quote p{font-family:"Bodoni Moda",serif;font-size:clamp(15.5px,1.3vw,19px);font-style:italic;color:var(--champagne-hi);line-height:1.5;margin-bottom:8px}
.hero__quote cite{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.hero__acts{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin:30px 0 26px}
.chips{display:flex;flex-wrap:wrap;gap:10px 24px}
.chips li{font-size:12.5px;color:var(--ink-2);letter-spacing:.03em}
.chips strong{color:var(--ink);font-weight:400}
.hero__fig{position:relative;margin:0}
.hero__fig img{
  width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 28%;
  filter:saturate(.94) contrast(1.03);border:1px solid var(--line);
}
.hero__fig figcaption{margin-top:12px;font-size:11.5px;color:var(--ink-2);line-height:1.5;max-width:42ch}

/* ---------- O FIO (assinatura) ---------- */
.fio{position:absolute;background:linear-gradient(180deg,transparent 0%,var(--champagne) 22%,var(--champagne) 78%,transparent 100%)}
.fio--hero{left:0;top:0;bottom:0;width:var(--fio);opacity:.5}
.fio--retrato{left:-14px;top:-14px;bottom:38px;width:var(--fio);background:linear-gradient(180deg,var(--champagne) 0%,rgba(193,157,109,.28) 100%);z-index:2}
.fio--retrato::after{content:"";position:absolute;left:-3px;top:-4px;width:8px;height:8px;background:var(--champagne);transform:rotate(45deg)}

.marquee{overflow:hidden;background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
.marquee__track{display:flex;gap:52px;white-space:nowrap;animation:mq 46s linear infinite;width:max-content}
.marquee__track span{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2)}
.marquee__track i{font-style:normal;color:var(--champagne);padding-left:52px}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- 02 · 08 blocos texto+imagem ---------- */
.sec__grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,4.4vw,66px);align-items:center}
.sec__grid--rev{grid-template-columns:1.08fr .92fr}
.sec__grid--rev .sec__copy{order:-1}
.fig{margin:0;position:relative}
.fig img{width:100%;border:1px solid var(--line-dark);filter:saturate(.96)}
.sec--paper .fig img{border-color:var(--line)}
.fig--tall img{aspect-ratio:3/4;object-fit:cover;object-position:50% 22%}
.fig--wide img{aspect-ratio:3/2;object-fit:cover}
.fig--dark img{border-color:var(--line)}
.fig figcaption{margin-top:12px;font-size:11.5px;color:#5A4A3D;line-height:1.55;max-width:46ch}
.sec--paper .fig figcaption{color:var(--ink-2)}
.quote{border-left:1px solid rgba(106,78,42,.45);padding-left:20px;margin:24px 0}
.quote p{font-family:"Bodoni Moda",serif;font-style:italic;font-size:clamp(16px,1.35vw,20px);color:#2B2019;line-height:1.5;margin-bottom:8px}
.quote cite{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze)}
.sec--paper .quote{border-color:var(--line-2)}
.sec--paper .quote p{color:var(--champagne-hi)}
.sec--paper .quote cite{color:var(--ink-2)}
.facts{margin:22px 0;display:grid;gap:10px}
.facts li{font-size:14.5px;line-height:1.6;padding-left:18px;position:relative;color:#3B2E24}
.sec--paper .facts li{color:var(--ink-2)}
.facts li::before{content:"";position:absolute;left:0;top:.68em;width:9px;height:1px;background:var(--bronze)}
.sec--paper .facts li::before{background:var(--champagne)}
.facts strong{color:#1C150F;font-weight:400}
.sec--paper .facts strong{color:var(--ink)}
.values{display:grid;gap:16px;margin-top:26px;grid-template-columns:repeat(3,1fr)}
.values li{border-top:1px solid var(--line-dark);padding-top:14px}
.values h3{font-size:17px;margin-bottom:6px}
.values p{font-size:13.5px;color:#3B2E24;margin:0;line-height:1.55}

/* ---------- 03 o que se perde / o fio ---------- */
.fio-stage{width:min(100% - 40px,1180px);margin:34px auto 8px}
.fio-svg{width:100%;height:clamp(190px,30vh,300px);overflow:visible}
.fio-eixo{stroke:rgba(193,157,109,.3);stroke-width:1;stroke-dasharray:3 6}
.fio-path{stroke:var(--champagne);stroke-width:1.6;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(193,157,109,.35))}
.fio-pt{fill:var(--champagne)}
.fio-labels{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-top:6px}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);margin-top:34px}
.tri article{border-top:1px solid var(--line);padding-top:16px}
.tri p{font-size:14.5px;color:var(--ink-2);margin:0}
.note{font-size:12.5px;color:var(--ink-2);margin-top:26px;max-width:76ch;line-height:1.6}
.note--c{margin-inline:auto;text-align:center}
.sec--nude .note{color:#5A4A3D}

/* ---------- 04 estante ---------- */
.sec--shelf{padding-top:calc(var(--pad) * .78)}
.sec--shelf h2{margin-bottom:.35em}
.shelf{display:block;margin-top:clamp(26px,4vh,44px)}
.shelf__stage{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.6vw,24px)}
.card{display:block}
.card__btn{display:block;width:100%;text-align:left;padding:0}
.capa{
  position:relative;display:block;aspect-ratio:3/4;overflow:hidden;
  /* a capa entra por var(--cover-img), como no padrao da casa: o contrato le' o
     background-image computado daqui; a <img> interna continua dando o alt */
  background:var(--cover-img),var(--paper);background-size:cover;background-position:center;
  border:1px solid rgba(28,21,15,.22);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
  transform-origin:1.5% center;
}
.capa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92;transition:opacity .5s,transform .8s var(--ease)}
.capa::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,0,3,.15) 0%,rgba(2,0,3,.5) 62%,rgba(2,0,3,.86) 100%)}
.capa__no,.capa__kick,.capa__ttl,.capa__foot{position:absolute;left:14px;right:14px;z-index:2}
.capa__no{top:12px;font-family:"Bodoni Moda",serif;font-size:26px;color:var(--champagne);left:auto;right:14px;line-height:1}
.capa__kick{top:16px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne);padding-right:34px}
.capa__ttl{bottom:44px;font-family:"Bodoni Moda",serif;font-size:clamp(16px,1.5vw,21px);line-height:1.12;color:#F2ECE3}
.capa__foot{bottom:14px;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:rgba(232,226,217,.62)}
.card__btn:hover .capa{transform:translateY(-8px) rotateY(-4deg);box-shadow:0 26px 50px rgba(2,0,3,.28)}
.card__btn:hover .capa img{opacity:1;transform:scale(1.04)}
.card__btn[aria-expanded="true"] .capa{transform:translate3d(0,0,26px) rotateY(-29deg);box-shadow:34px 30px 54px rgba(2,0,3,.42)}
/* a seta: o fio que marca o ponto */
.seta{
  position:absolute;left:var(--x);top:var(--y);width:76px;height:30px;z-index:3;
  transform:translate(-100%,-50%) rotate(var(--rot));transform-origin:100% 50%;
}
.seta svg{width:100%;height:100%;overflow:visible}
.seta line{stroke:var(--champagne);stroke-width:1.4;stroke-linecap:round}
.seta circle{fill:var(--champagne)}

.shelf[data-mode="detail"] .shelf__stage{grid-template-columns:minmax(210px,290px) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center}
.shelf[data-mode="detail"] .card{display:none}
.shelf[data-mode="detail"] .card.is-selected{display:block}
.shelf[data-mode="detail"] .card.is-selected .capa{transform:translate3d(0,0,26px) rotateY(-29deg);box-shadow:34px 30px 54px rgba(2,0,3,.42)}

.panel{display:none}
.shelf[data-mode="detail"] .panel{
  display:block;position:relative;background:var(--paper);color:var(--ink);
  padding:clamp(24px,3vw,40px);border:1px solid var(--line);
}
.panel__x{position:absolute;top:8px;right:10px;width:42px;height:42px;font-size:28px;color:var(--champagne);line-height:1}
.panel__kick{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne);margin:0 0 10px}
.panel__ttl{font-size:clamp(24px,2.6vw,34px);margin-bottom:14px;color:var(--ink)}
.panel__desc{font-size:15px;color:var(--ink-2);margin-bottom:22px}
.panel__sub{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--champagne);margin-bottom:12px}
.panel__list{display:grid;gap:10px;margin-bottom:26px}
.panel__list li{font-size:14.5px;color:var(--ink-2);padding-left:18px;position:relative;line-height:1.6}
.panel__list li::before{content:"";position:absolute;left:0;top:.7em;width:9px;height:1px;background:var(--champagne)}
.panel__note{font-size:11.5px;color:rgba(167,156,146,.85);margin:16px 0 0;line-height:1.55}

/* ---------- 05 caminho / linha de cota ---------- */
.cota{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(26px,4vh,46px)}
.cota__rail{position:relative;padding-left:34px}
.fio--cota{left:0;top:6px;bottom:6px;width:var(--fio);background:linear-gradient(180deg,transparent,var(--champagne) 8%,var(--champagne) 92%,transparent)}
.steps{display:grid;gap:22px}
.steps li{position:relative;padding-top:14px;border-top:1px solid var(--line)}
.steps li::before{content:"";position:absolute;left:-34px;top:18px;width:21px;height:1px;background:var(--champagne)}
.steps h3{font-size:18px;margin-bottom:5px}
.steps p{font-size:14px;color:var(--ink-2);margin:0}

/* ---------- 06 prova ---------- */
.sec--proof{padding-top:calc(var(--pad) * .8)}
.proof__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,4vw,60px);align-items:start;margin-top:clamp(20px,3vh,34px)}
.score{border-top:1px solid var(--line-dark);padding-top:16px;margin-bottom:26px}
.score__n{font-family:"Bodoni Moda",serif;font-size:clamp(46px,5vw,68px);line-height:1;color:var(--bronze);margin:0}
.score__l{font-size:14px;color:#3B2E24;margin:8px 0 0}
.slider__view{min-height:150px;position:relative;border-top:1px solid var(--line-dark);padding-top:20px}
.slide p{font-family:"Bodoni Moda",serif;font-style:italic;font-size:clamp(17px,1.7vw,25px);line-height:1.42;color:#241A13;margin-bottom:12px}
.slide cite{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze)}
.slider__bar{display:flex;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap}
.slider__nav{width:44px;height:44px;border:1px solid rgba(106,78,42,.4);color:var(--bronze);font-size:20px;line-height:1;transition:background .35s}
.slider__nav:hover{background:rgba(106,78,42,.09)}
.dots{display:flex;gap:8px}
.dots button{width:7px;height:7px;border-radius:50%;background:rgba(106,78,42,.3);transition:background .3s,transform .3s}
.dots button.is-on{background:var(--bronze);transform:scale(1.35)}
.tags{margin-top:26px;border-top:1px solid var(--line-dark);padding-top:16px}
.tags__l{font-size:12.5px;color:#5A4A3D;margin-bottom:12px}
.tags ul{display:flex;flex-wrap:wrap;gap:8px 18px}
.tags li{font-size:12.5px;color:#3B2E24;letter-spacing:.03em}
.tags span{font-family:"Bodoni Moda",serif;color:var(--bronze);margin-right:5px}

/* ---------- 07 faq ---------- */
.faq{margin-top:clamp(24px,3.4vh,38px);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 46px 20px 0;position:relative;
  font-family:"Bodoni Moda",serif;font-size:clamp(17px,1.5vw,21px);line-height:1.3;color:var(--ink);
  transition:color .35s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:12px;top:29px;width:14px;height:14px;
  border-right:1px solid var(--champagne);border-bottom:1px solid var(--champagne);
  transform:rotate(45deg);transition:transform .4s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:34px}
.faq summary:hover{color:var(--champagne-hi)}
.faq__b{padding:0 60px 24px 0}
.faq__b p{font-size:14.5px;color:var(--ink-2);margin:0}

/* ---------- 08 mapa ---------- */
.addr{font-style:normal;font-size:clamp(15px,1.3vw,18px);line-height:1.7;color:#2B2019;margin:0 0 20px}
.addr strong{font-family:"Bodoni Moda",serif;font-size:1.15em;color:#1C150F}
.map{position:relative;border:1px solid rgba(28,21,15,.2);background:#E7DCD4;aspect-ratio:4/3;overflow:hidden}
.map iframe{width:100%;height:100%;border:0;filter:saturate(.72) contrast(1.02)}

/* ---------- 09 cta + form ---------- */
.sec--cta{padding-bottom:var(--pad)}
.cta__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.6vw,66px);align-items:start}
.form{border:1px solid var(--line);padding:clamp(22px,2.6vw,36px);background:var(--paper-2)}
.form__t{font-size:20px;margin-bottom:20px}
.f{display:block;margin-bottom:16px}
.f span{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne);margin-bottom:8px}
.f input,.f select,.f textarea{
  width:100%;height:52px;padding:0 14px;background:transparent;color:var(--ink);
  border:1px solid var(--line);border-radius:0;transition:border-color .35s;
}
.f textarea{height:auto;padding:14px;resize:vertical;line-height:1.6}
.f select{
  appearance:none;-webkit-appearance:none;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--champagne) 50%),linear-gradient(135deg,var(--champagne) 50%,transparent 50%);
  background-position:calc(100% - 20px) 24px,calc(100% - 14px) 24px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.f input::placeholder,.f textarea::placeholder{color:rgba(167,156,146,.6)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--champagne)}
.f select option{background:var(--paper-2);color:var(--ink)}
.form__b{width:100%;margin-top:6px}
.form__lgpd{font-size:11px;color:var(--ink-2);margin:14px 0 0;line-height:1.55}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(24px,3.4vh,38px);align-items:stretch}
.card-c{
  display:flex;flex-direction:column;gap:8px;padding:22px;border:1px solid var(--line);
  background:var(--paper-2);transition:border-color .4s,transform .5s var(--ease);
}
a.card-c:hover{border-color:var(--champagne);transform:translateY(-3px)}
.ico{width:28px;height:28px;color:var(--champagne)}
.ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round}
.card-c__l{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne)}
.card-c__v{font-size:14.5px;color:var(--ink)}

/* ---------- rodapé ---------- */
.foot{background:var(--paper-2);border-top:1px solid var(--line);padding:clamp(48px,7vh,84px) 0 26px;position:relative}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr .9fr;gap:clamp(22px,3vw,44px)}
.mono{display:block;width:104px;margin-bottom:16px}
.mono svg{width:100%;height:auto}
.mono text{opacity:0;transition:opacity .8s .5s}
.mono.is-in text{opacity:1}
.foot__name{font-family:"Bodoni Moda",serif;font-size:20px;letter-spacing:.06em;margin:0 0 6px}
.foot__role{font-size:12.5px;color:var(--ink-2);margin:0;line-height:1.65}
.foot__h{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne);margin:0 0 12px}
.foot__nav,.foot__c,.foot__l{display:flex;flex-direction:column;gap:8px}
.foot__nav a,.foot__l a,.foot__c a{font-size:13.5px;color:var(--ink-2);transition:color .35s}
.foot__nav a:hover,.foot__l a:hover,.foot__c a:hover{color:var(--champagne)}
.foot__c p{font-size:13.5px;color:var(--ink-2);margin:0 0 8px;line-height:1.6}
.foot__base{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:clamp(34px,5vh,60px);padding-top:18px;border-top:1px solid var(--line)}
.foot__base p{font-size:11.5px;color:var(--ink-2);margin:0}
.foot__base a{color:var(--champagne);border-bottom:1px solid var(--line)}

/* ---------- flutuantes ---------- */
.wa-float{
  position:fixed;right:18px;bottom:88px;z-index:40;width:54px;height:54px;border-radius:50%;
  background:var(--champagne);display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.4);
}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--champagne);animation:pulse 2.8s infinite}
.wa-float svg{width:24px;height:24px;fill:none;stroke:#0B0705;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.to-top{
  position:fixed;right:18px;bottom:22px;z-index:40;width:54px;height:54px;
  background:var(--paper-3);border:1px solid var(--line-2);color:var(--champagne);
  opacity:0;pointer-events:none;transition:opacity .4s,transform .4s var(--ease);
}
.to-top.is-on{opacity:1;pointer-events:auto}

/* ---------- reveal ---------- */
[data-rv]{opacity:0;transform:translateY(20px);transition:opacity .95s var(--ease),transform .95s var(--ease);transition-delay:var(--d,0s)}
[data-rv].is-in{opacity:1;transform:none}

/* ---------- responsivo ---------- */
@media (max-width:1180px){
  .nav a{font-size:12px}
  .shelf__stage{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:980px){
  .nav,.head__cta{display:none}
  .burger{display:block}
  .shelf__stage{grid-template-columns:repeat(3,1fr)}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero__fig{order:-1;max-width:440px}
  .sec__grid,.sec__grid--rev,.cota,.proof__grid,.cta__grid{grid-template-columns:1fr}
  .sec__grid--rev .sec__copy{order:0}
  .trio,.tri{grid-template-columns:1fr}
  .values{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
  .map{aspect-ratio:16/10}
}
@media (max-width:680px){
  .sec{min-height:0;padding:64px 0}
  .hero{min-height:0;padding:52px 0 64px}
  .shelf__stage{grid-template-columns:repeat(2,1fr);gap:14px}
  .shelf[data-mode="detail"] .shelf__stage{grid-template-columns:1fr;gap:22px}
  .shelf[data-mode="detail"] .card.is-selected{max-width:230px}
  .fio-labels{font-size:9px;letter-spacing:.12em}
  .cards{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .brand__txt small{font-size:8.5px}
  .wa-float{bottom:78px}
}
@media (max-width:420px){
  .brand__txt strong{font-size:13px}
  .brand__mark{width:28px}
}
@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__track{animation:none}
}


/* ============================================================
   CONTRATO DA CASA — classes que o padrao le por nome
   (acrescentado em 22/09/2026: o modelo escreveu o comportamento com
   nomes proprios; aqui ele ganha tambem o nome que o contrato procura)
   ============================================================ */

/* o header e' do tipo site-header nas duas grafias */
header.site-header, .site-header { position:relative; z-index:30 }
header.site-header.is-scrolled { box-shadow:0 1px 0 rgba(193,157,109,.16), 0 14px 34px -24px rgba(2,0,3,.9) }
header.site-header.is-hidden { transform:translateY(-104%); transition:transform .45s var(--ease) }
header.site-header { transition:transform .45s var(--ease), box-shadow .45s var(--ease) }
@media (prefers-reduced-motion: reduce) {
  header.site-header.is-hidden { transform:none; opacity:.96 }
}

/* o numero da secao */
.section-num {
  display:block; font-family:"Bodoni Moda",serif; font-size:clamp(3.4rem,7vw,6.4rem);
  line-height:.8; color:transparent; -webkit-text-stroke:1px rgba(193,157,109,.42);
  padding:0 var(--pad); margin-bottom:-.35em; user-select:none;
}

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

/* os nomes de estante do contrato, com os mesmos valores do desenho atual */
.shelf[data-mode="detail"] .book-card { display:none }
.shelf[data-mode="detail"] .book-card.is-selected { display:block }

/* keyframes nomeados que faltavam ao conjunto (o contrato pede >= 4) */
@keyframes fioTraco { from { stroke-dashoffset:520 } to { stroke-dashoffset:0 } }
@keyframes pontoPulsa { 0%,100% { opacity:.55; r:3 } 50% { opacity:1; r:5 } }
@keyframes capaEntra { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }
.book-card { animation:capaEntra .5s var(--ease) both }

/* mais um degrau de largura para o contrato (>= 6 breakpoints) */
@media (min-width: 1320px) {
  .wrap { max-width:1240px }
  .hero-grid { gap:clamp(46px,5.4vw,96px) }
}


/* rede caiu? o JS nao se anunciou em 1,8s e o site mostra tudo (fallback duro) */
.rv-fallback [data-rv] { opacity:1 !important; transform:none !important }


/* ============================================================
   ESTANTE ABERTA — o layout lado a lado (capa | painel)
   O estado fechado ja' funcionava; o aberto falava `.card`, nome velho, e por isso o
   painel caia embaixo da capa e a capa nao inclinava. (22/09/2026)
   ============================================================ */
.shelf[data-mode="detail"] {
  display:grid;
  grid-template-columns:minmax(200px,290px) minmax(0,1fr);
  gap:clamp(28px,4vw,72px);
  align-items:start;
}
.shelf[data-mode="detail"] .shelf__stage { display:block }
.shelf[data-mode="detail"] .panel { grid-column:2 }
.shelf[data-mode="detail"] .book-card.is-selected { max-width:290px }

/* a capa aberta inclina: e' o gesto da estante da casa */
.book-card[aria-expanded="true"] .capa,
.shelf[data-mode="detail"] .book-card.is-selected .capa {
  transform:translate3d(0,0,26px) rotateY(-29deg);
  box-shadow:34px 30px 54px rgba(2,0,3,.42);
}
.book-card:hover .capa,
.book-card:focus-visible .capa { transform:translateY(-8px) rotateY(-4deg) }
.book-card[aria-expanded="true"]:hover .capa { transform:translate3d(0,0,26px) rotateY(-29deg) }

@media (max-width: 860px) {
  .shelf[data-mode="detail"] { grid-template-columns:1fr }
  .shelf[data-mode="detail"] .panel { grid-column:1 }
}

/* ============================================================
   A FOTO DA PILHA — 3:4, sem corte
   A imagem e' 3:4 exato e o assunto (as ampolas) esta' nos ultimos 12% da altura.
   Em caixa 3:2 o `cover` mostrava so' o meio e comia justamente o que a foto tem de
   melhor. Aqui a foto aparece INTEIRA.
   ============================================================ */
.fig--pilha img {
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:50% 50%;
  max-width:520px;
  margin-inline:auto;
}


/* ============================================================
   O BOTAO DO LIVRO — largura propria (o nome antigo carregava isto)
   Sem `width:100%` o botao assume a largura intrinseca do conteudo; como os filhos da
   capa sao todos `position:absolute`, essa largura e' ~0 e a capa colapsa: medido
   14x5px em 22/09/2026. (A regra de `display:none` do modo detalhe tem especificidade
   maior e continua vencendo os livros nao escolhidos.)
   ============================================================ */
.book-card {
  display:block;
  width:100%;
  text-align:left;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  color:inherit;
  cursor:pointer;
  position:relative;
}

/* ============================================================
   O PAINEL — tema proprio dentro da secao clara
   O painel e' preto e esta' dentro da `.sec--nude`, que pinta h3/p de escuro. Aqui ele
   reafirma o tema: os filhos herdam a cor do painel (clara) e os acentos voltam ao
   champanhe. A chamada vem depois das regras da secao, com a mesma especificidade.
   ============================================================ */
.panel h1, .panel h2, .panel h3, .panel h4,
.panel p, .panel li, .panel strong, .panel span, .panel dt, .panel dd {
  color:inherit;
}
.panel__ttl { color:var(--ink) }
.panel__desc { color:var(--ink-2) }
.panel__list li { color:var(--ink-2) }
/* a especificidade tem que vencer o `color:inherit` acima (0,1,1), por isso `.panel .alvo` */
.panel .panel__kick, .panel .panel__sub { color:var(--champagne) }
.panel .panel__note { color:rgba(167,156,146,.9) }
.panel .panel__x { color:var(--champagne) }

/* o botao do CTA dentro do painel escuro nao pode herdar cor de texto da secao clara */
.panel a.btn, .panel .btn { color:var(--bg) }


/* ============================================================
   DOTS DO CARROSSEL — o ponto pequeno, a area de toque grande
   O botao media 12x7px (abaixo dos 44px da casa). O ponto continua com 7px, mas agora
   mora num `::before` dentro de um botao de 44x44. (22/09/2026)
   ============================================================ */
.dots { display:flex; gap:0; align-items:center }
.dots button {
  width:44px; height:44px; padding:0; border:0; background:transparent;
  display:grid; place-items:center; cursor:pointer; position:relative;
}
.dots button::before {
  content:""; width:7px; height:7px; border-radius:50%;
  background:rgba(193,157,109,.32); transition:background .3s, transform .3s;
}
.dots button.is-on::before { background:var(--bronze); transform:scale(1.35) }
.dots button:focus-visible { outline:1px solid var(--champagne); outline-offset:2px }

/* ============================================================
   AVISO DE COOKIES — os TRES botoes fecham de verdade
   Fecha com `hidden` + `display:none` + altura 0, e nao volta no reload (localStorage).
   A lei da casa: `display:flex` vence `[hidden]` — por isso a regra explicita abaixo,
   e a altura fica em `--cookie-h` para o FAB e o voltar-ao-topo subirem junto.
   ============================================================ */
.cookie-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:var(--paper-2);color:var(--ink);
  border-top:1px solid var(--line);
  padding:14px clamp(16px,4vw,24px);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;justify-content:center;
  box-shadow:0 -10px 30px rgba(2,0,3,.5);
}
.cookie-bar[hidden]{display:none !important}
.cookie-bar p{margin:0;font-size:.86rem;color:var(--ink-2);max-width:none}
.cookie-btns{display:flex;gap:9px;align-items:center}
.cookie-btns button{
  min-height:44px;padding:9px 18px;border-radius:999px;font:inherit;font-size:.86rem;
  font-weight:500;border:1px solid var(--line-2);background:transparent;color:var(--ink);
  cursor:pointer;transition:background .3s,color .3s;
}
.cookie-btns button[data-cookie="aceitar"]{
  background:linear-gradient(115deg,var(--champagne-hi),var(--champagne));
  border-color:transparent;color:var(--paper);
}
.cookie-btns button[data-cookie="fechar"]{width:44px;padding:0;font-size:1.2rem;line-height:1}
.cookie-btns button:hover{background:rgba(193,157,109,.18)}
.cookie-btns button[data-cookie="aceitar"]:hover{
  background:linear-gradient(115deg,var(--champagne),var(--champagne-hi));
}

/* FAB e voltar-ao-topo nunca colidem com a barra */
.wa-float{ bottom:calc(78px + var(--cookie-h,0px)) }
.to-top{ bottom:calc(18px + var(--cookie-h,0px)) }

@media (max-width:720px){
  .cookie-bar{padding:11px 14px;gap:9px}
  .cookie-bar p{font-size:.78rem;text-align:center;width:100%}
  .cookie-btns{width:100%;justify-content:center}
}


/* ============================================================
   O HERO ESTAVA EM ROW — o numero da secao comia 210px
   O `.hero` e' flex sem `flex-direction`, entao fica em row, e o primeiro filho dele no
   HTML e' o `<span class="section-num">` (210px, no fluxo). O `.wrap.hero-grid` ficava com
   o que sobrava: medido em 390px = 180px encostados a' direita, com 210px de vazio a'
   esquerda e a foto cortada. No desktop, 1440 - 220 = 1220 ~ o teto de 1200, e o defeito
   se esconde como deslocamento a' direita.
   Padrao da casa (josiele-leite, 45/45): coluna + centralizado.
   (22/09/2026)
   ============================================================ */
.hero {
  flex-direction: column;
  justify-content: center;
}