/* ==========================================================================
   Dra. Juliana Elisei — site (página única) · v2 "a linha do processo"
   Kit de UI JE · 16-08-2026
   Fonte da verdade estética: 04_NEGOCIOS\dra_juliana_elisei\...\design-tokens.json
   ========================================================================== */

/* ---------- Fontes (self-hosted, subset latin) ---------- */
@font-face{font-family:"Cormorant Garamond";font-weight:300;font-style:normal;font-display:swap;src:url(assets/fonts/cormorant-300.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:400;font-style:normal;font-display:swap;src:url(assets/fonts/cormorant-400.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:normal;font-display:swap;src:url(assets/fonts/cormorant-500.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:400;font-style:italic;font-display:swap;src:url(assets/fonts/cormorant-400i.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:300;font-style:normal;font-display:swap;src:url(assets/fonts/inter-300.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url(assets/fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-style:normal;font-display:swap;src:url(assets/fonts/inter-500.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:swap;src:url(assets/fonts/inter-600.woff2) format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --verde:#162127; --verde-2:#1F2D34;
  --perg:#E8DCC4; --perg-2:#FAF6E8; --perg-3:#F5EFE0;
  --borg:#6B2C2F; --borg-hover:#5A2426;
  --rosa:#A87A78;
  --esp:#2A1B15;
  --tx:#2A1B15; --tx-2:#162127; --tx-mudo:#6B5D52;
  --bd-sutil:#D4C8B0; --bd-forte:#2A1B15;
  --dk-tx:#E8DCC4; --dk-tx-2:#D4C8B0; --dk-mudo:#A89A8A; --dk-bd:#2A3A42;
  --f-display:"Cormorant Garamond",Garamond,Georgia,serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --s-xs:4px; --s-sm:8px; --s-md:16px; --s-lg:24px; --s-xl:32px; --s-2xl:48px; --s-3xl:64px; --s-4xl:96px; --s-5xl:128px;
  --sec:96px; --wrap:1180px; --pad:96px;
  --r-sm:2px; --r-md:4px; --r-lg:8px;
  --sh-sm:0 1px 2px rgba(22,33,39,.04); --sh-md:0 2px 8px rgba(22,33,39,.06); --sh-lg:0 4px 16px rgba(22,33,39,.08); --sh-xl:0 8px 32px rgba(22,33,39,.10);
  --ease:cubic-bezier(.16,1,.3,1); /* exponential ease-out */
  --rail:56px; /* largura da faixa da linha do processo, à esquerda do conteúdo */
}
@media (max-width:1024px){:root{--pad:48px;--sec:72px}}
@media (max-width:640px){:root{--pad:20px;--sec:56px;--rail:28px}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--perg);color:var(--tx);font-family:var(--f-body);font-size:16px;line-height:1.65;font-weight:400;position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;background:url(assets/img/tex-light.jpg) center/900px repeat;opacity:.24;pointer-events:none;z-index:-1}
img,svg{max-width:100%;height:auto;display:block}
svg{overflow:visible}
a{color:var(--borg);text-decoration:underline;text-decoration-color:var(--rosa);text-underline-offset:4px;transition:color .2s var(--ease)}
a:hover{color:var(--borg-hover)}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;color:var(--tx);text-wrap:balance}
h1{font-weight:300;font-size:clamp(38px,5vw,62px);line-height:1.06;letter-spacing:-.02em}
h2{font-weight:400;font-size:clamp(30px,3.4vw,46px);line-height:1.15;letter-spacing:-.01em}
h3{font-weight:400;font-size:clamp(23px,2.2vw,30px);line-height:1.25;letter-spacing:-.005em}
h4{font-weight:500;font-size:22px;line-height:1.35}
p{margin:0 0 var(--s-md)}
.eyebrow{font-family:var(--f-body);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--borg);margin:0 0 var(--s-md)}
.lead{font-size:19px;line-height:1.6;font-weight:300}
.muted{color:var(--tx-mudo)}
.small{font-size:14px;line-height:1.6}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.sec{padding-top:var(--sec);padding-bottom:var(--sec)}
.orn{width:120px;height:1px;background:var(--rosa);border:0;margin:var(--s-lg) 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--borg);color:var(--perg)}
:focus-visible{outline:2px solid var(--borg);outline-offset:3px;border-radius:2px}
.dark :focus-visible{outline-color:var(--rosa)}
html{scrollbar-color:var(--rosa) var(--perg-3)}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--perg-3)}::-webkit-scrollbar-thumb{background:var(--rosa);border-radius:5px;border:2px solid var(--perg-3)}

/* temas */
.dark{background:var(--verde);color:var(--dk-tx);position:relative}
.dark::before{content:"";position:absolute;inset:0;background:url(assets/img/tex-dark.jpg) center/900px repeat;opacity:.12;pointer-events:none}
.dark>*{position:relative}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--dk-tx)}
.dark .eyebrow{color:var(--rosa)}
.dark .muted{color:var(--dk-mudo)}
.dark a{color:var(--rosa)} .dark a:hover{color:var(--dk-tx)}
.light-2{background:var(--perg-2)}

/* botões */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:var(--r-md);font-family:var(--f-body);font-weight:500;font-size:16px;letter-spacing:.02em;text-decoration:none;border:1.5px solid transparent;cursor:pointer;line-height:1;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh-lg)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--borg);color:var(--perg);border-color:var(--borg)}
.btn-primary:hover{background:var(--borg-hover);border-color:var(--borg-hover);color:var(--perg)}
.dark .btn-primary{background:var(--perg);color:var(--verde);border-color:var(--perg)}
.dark .btn-primary:hover{background:var(--perg-2);border-color:var(--perg-2);color:var(--verde)}
.btn-secondary{background:transparent;color:var(--verde);border-color:var(--verde)}
.btn-secondary:hover{background:var(--verde);color:var(--perg)}
.dark .btn-secondary{color:var(--perg);border-color:var(--perg)}
.dark .btn-secondary:hover{background:var(--perg);color:var(--verde)}
.link-ghost{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--borg);text-decoration:none;border-bottom:1px solid var(--rosa);padding-bottom:3px;transition:color .2s}
.link-ghost svg{transition:transform .25s var(--ease)}
.link-ghost:hover{color:var(--borg-hover)}
.link-ghost:hover svg{transform:translateX(5px)}
.link-ghost svg{width:16px;height:16px}
.dark .link-ghost{color:var(--perg)}

/* ícones (Lucide-style, traço 1.5) */
.ic{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-lg{width:32px;height:32px}
.ic-sm{width:16px;height:16px}

/* ---------- Navegação ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(232,220,196,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--bd-sutil);transition:box-shadow .3s}
.nav.scrolled{box-shadow:var(--sh-md)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tx);font-family:var(--f-display);font-size:22px;font-weight:500;letter-spacing:.01em}
.brand img{height:34px;width:34px}
.nav-links{display:flex;align-items:center;gap:26px;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.nav-links a{color:var(--tx);text-decoration:none;font-weight:500;position:relative;padding:4px 0}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--borg);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:not(.btn):hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a:hover{color:var(--borg)}
.nav-links .btn,.nav-links .btn:hover{color:var(--perg);padding:11px 18px;font-size:13px;letter-spacing:.06em}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--tx)}
@media (max-width:860px){
  .nav-links{display:none;position:absolute;left:0;right:0;top:72px;background:var(--perg-2);border-bottom:1px solid var(--bd-sutil);flex-direction:column;align-items:flex-start;padding:16px var(--pad) 24px;gap:18px}
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
}

/* ---------- Revelação na entrada ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
.no-motion .rv{opacity:1;transform:none;transition:none}
.no-motion .fio .ln{animation:none;stroke-dashoffset:0}.no-motion .fio .pulse{animation:none;opacity:0}.no-motion .met .barra i{transition:none}

/* ---------- Hero ---------- */
.hero{position:relative;padding-top:var(--s-4xl);padding-bottom:var(--s-3xl);overflow:hidden}
.hero .mono{position:absolute;right:-4vw;top:-6vh;width:min(38vw,520px);opacity:.07;pointer-events:none;user-select:none}
.hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-4xl);align-items:center;position:relative}
.hero h1 em{font-style:italic;font-weight:400;color:var(--borg)}
.hero .lead{max-width:560px;color:#4A3B33}
.hero .ctas{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:var(--s-xl)}
/* entregas (3 checks) */
.entregas{list-style:none;margin:0 0 var(--s-lg);padding:0;display:grid;gap:8px}
.entregas li{display:flex;align-items:center;gap:10px;font-size:16px}
.entregas li b{font-weight:600}
.entregas .ic{width:20px;height:20px;color:var(--borg)}
/* a foto e os marcos */
.hero-pic{position:relative;justify-self:end;width:min(100%,380px);margin:0}
.hero-pic img{width:100%;aspect-ratio:1/1;object-fit:cover;box-shadow:var(--sh-lg)}
.hero-pic::after{content:"";position:absolute;left:-12px;top:12px;right:12px;bottom:-12px;border:1px solid var(--rosa);z-index:-1;pointer-events:none}
.hero-pic figcaption{margin-top:14px;padding:0 20px 0 22px;font-size:13px;line-height:1.5;color:var(--tx-mudo)}
.marcos{list-style:none;margin:0;padding:0;position:absolute;left:0;top:0;bottom:0;width:0}
.marcos::before{content:"";position:absolute;left:-1px;top:10%;bottom:-40px;width:1.5px;background:var(--rosa)}
.marcos li{position:absolute;left:0;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;flex-direction:row-reverse}
.marcos li:nth-child(1){top:12%}.marcos li:nth-child(2){top:37%}.marcos li:nth-child(3){top:62%}.marcos li:nth-child(4){top:87%}
.marcos .no{width:40px;height:40px;border-radius:50%;background:var(--perg-2);border:1.2px solid var(--rosa);display:grid;place-items:center;position:relative;flex:none;color:var(--tx-2)}
.marcos .no .ic{width:20px;height:20px}
.marcos li.on .no{background:var(--borg);border-color:var(--borg);color:var(--perg)}
.marcos .pulse{position:absolute;inset:0;border-radius:50%;background:var(--borg);opacity:.35;animation:pulse 2.4s ease-out 1.2s infinite}
.marcos .lb{position:absolute;right:calc(100% + 12px);white-space:nowrap;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-mudo);text-align:right;line-height:1.2}
.marcos .lb small{display:block;font-size:10px;letter-spacing:.06em;color:var(--borg);font-weight:600}
.marcos li.on .lb{color:var(--tx);font-weight:600}
@keyframes pulse{0%{transform:scale(1);opacity:.35}70%{transform:scale(2.2);opacity:0}100%{transform:scale(2.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.marcos .pulse{animation:none;opacity:0}}
.no-motion .marcos .pulse{animation:none;opacity:0}
@media (max-width:860px){.hero-pic{justify-self:end;width:min(100% - 140px,320px)}}
/* (diagrama antigo, mantido para o Kit) */
.fio{position:relative}
.fio svg{width:100%;height:auto}
.fio .no{fill:var(--perg-2);stroke:var(--rosa);stroke-width:1.2}
.fio .no.on{fill:var(--borg);stroke:var(--borg)}
.fio .lb{font-family:var(--f-body);font-size:11px;letter-spacing:.08em;text-transform:uppercase;fill:var(--tx-mudo)}
.fio .lb.on{fill:var(--tx);font-weight:600}
.fio .ln{stroke:var(--rosa);stroke-width:1.2;fill:none;stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 2.2s var(--ease) .3s forwards}
.fio .ic{stroke:var(--tx-2)}
.fio .ic.on{stroke:var(--perg)}
.fio .pulse{fill:var(--borg);opacity:.35;transform-origin:center;transform-box:fill-box;animation:pulse 2.4s ease-out 1.6s infinite}
.fio .cap{font-family:var(--f-display);font-style:italic;font-size:19px;fill:var(--tx-2)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pulse{0%{transform:scale(1);opacity:.35}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.fio .ln{animation:none;stroke-dashoffset:0}.fio .pulse{animation:none;opacity:0}}
@media (max-width:860px){.hero{padding-top:var(--s-2xl)}.hero .wrap{grid-template-columns:1fr;gap:var(--s-2xl)}.hero .mono{width:70vw;right:-20vw;top:auto;bottom:-10vh}}

/* ---------- Junções do fio (desenhadas por JS) ---------- */
.join{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.join path{fill:none;stroke:var(--rosa);stroke-width:1.5;stroke-dasharray:2000;stroke-dashoffset:2000;transition:stroke-dashoffset 1.6s var(--ease)}
.join.in path{stroke-dashoffset:0}
.no-motion .join path{stroke-dashoffset:0;transition:none}
.cta-final{position:relative}

/* ---------- O fio (linha do processo) ---------- */
.trilho{position:relative}
.trilho .wrap{position:relative;padding-left:calc(var(--pad) + var(--rail))}
/* a linha */
.fio-v{position:absolute;left:calc(max(0px,(100% - var(--wrap))/2) + var(--pad) + 14px);top:0;bottom:0;width:2px;pointer-events:none;z-index:2}
.fio-v .base{position:absolute;inset:0;background:var(--bd-sutil)}
.fio-v .prog{position:absolute;left:0;right:0;top:0;bottom:0;background:var(--rosa);transform:scaleY(0);transform-origin:top;transition:transform .12s linear}
.dark .fio-v .base{background:var(--dk-bd)} .dark .fio-v .prog{background:var(--rosa)}
/* estação */
.est{position:relative}
.est>.wrap>.no,.est>.wrap>figure>.no{position:absolute;left:calc(var(--pad) + 6px);top:.35em;width:18px;height:18px;z-index:3;border-radius:50%;background:var(--perg);border:1.5px solid var(--rosa);transition:background .4s var(--ease),transform .4s var(--ease),box-shadow .4s}
.dark .est>.wrap>.no{background:var(--verde-2);border-color:var(--rosa)}
.est.on>.wrap>.no{background:var(--borg);border-color:var(--borg);transform:scale(1.15);box-shadow:0 0 0 6px rgba(107,44,47,.12)}
.est .mom{font-family:var(--f-body);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--borg);margin:0 0 var(--s-sm)}
.dark .est .mom{color:var(--rosa)}
.est h2{margin-bottom:var(--s-md)}
@media (max-width:640px){.fio-v{left:calc(var(--pad) + 6px)}.est>.wrap>.no{left:calc(var(--pad) + 0px);width:14px;height:14px}}

/* ---------- Estação 1: quem lê os dois lados ---------- */
.quem .wrap{display:block}
.quem h2{max-width:820px}
.quem h2 em{font-style:italic;font-weight:400;color:var(--borg)}
.quem .lead{max-width:720px}
.quem-pic{position:relative;width:min(100%,360px)}
.quem-pic img{aspect-ratio:1/1;object-fit:cover;width:100%;box-shadow:var(--sh-lg)}
.quem-pic::after{content:"";position:absolute;left:-12px;top:12px;right:12px;bottom:-12px;border:1px solid var(--rosa);z-index:-1}
.creds{list-style:none;margin:var(--s-xl) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0 var(--s-lg);border-top:1px solid var(--rosa)}
.creds li{display:flex;gap:12px;align-items:flex-start;padding:14px 4px;border-bottom:1px solid var(--bd-sutil);transition:transform .3s var(--ease)}
.creds li:hover{transform:translateX(6px)}
.creds li .ic{color:var(--tx-2);margin-top:2px}
.creds b{display:block;font-family:var(--f-display);font-size:20px;font-weight:500;line-height:1.2}
.creds span{font-size:13px;color:var(--tx-mudo)}
@media (max-width:960px){.creds{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.creds{grid-template-columns:1fr}}

/* ---------- Estação 2: o que eu faço (linhas expansíveis) ---------- */
.serv{list-style:none;margin:var(--s-lg) 0 0;padding:0;border-top:1px solid var(--rosa)}
.serv li{border-bottom:1px solid var(--bd-sutil)}
.serv summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:var(--s-lg);padding:26px 12px;transition:background .3s var(--ease)}
.serv summary>*{transition:transform .35s var(--ease)}
.serv summary::-webkit-details-marker{display:none}
.serv summary:hover{background:var(--perg-2)}
.serv summary:hover>*{transform:translateX(8px)}
.serv details[open] summary{background:var(--perg-2)}
.serv .ic{color:var(--tx-2)}
.serv .t{font-family:var(--f-display);font-size:clamp(22px,2.2vw,28px);font-weight:500;line-height:1.2}
.serv .t small{display:block;font-family:var(--f-body);font-size:14px;font-weight:400;color:var(--tx-mudo);margin-top:4px}
.serv .chev{width:22px;height:22px;transition:transform .35s var(--ease);color:var(--tx-mudo)}
.serv details[open] .chev{transform:rotate(180deg)}
.serv .body{display:grid;grid-template-columns:1fr;padding:0 12px 28px 76px}
.serv .body ul{margin:0 0 var(--s-md);padding:0;list-style:none}
.serv .body li{border:0;padding:5px 0 5px 26px;position:relative;font-size:15px}
.serv .body li::before{content:"";position:absolute;left:0;top:14px;width:14px;height:1px;background:var(--rosa);transform-origin:left;transition:transform .3s var(--ease)}
.serv .body li:hover::before{transform:scaleX(1.45)}
.serv .etapas{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.serv .etapas li{font-family:var(--f-display);font-size:18px;font-weight:500;color:var(--tx-2);background:var(--perg);border:1px solid var(--rosa);border-radius:var(--r-md);padding:8px 14px;position:relative}
.serv .etapas li+li::before{content:"";position:absolute;left:-9px;top:50%;width:10px;height:1px;background:var(--rosa)}
.serv .promessa{font-family:var(--f-display);font-style:italic;font-size:20px;line-height:1.35;color:var(--tx-2);margin:0 0 var(--s-md);max-width:640px}
.serv .tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--tx-mudo)}
.serv .tags b{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--tx-2)}
.serv .tags span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--tx-2);border:1px solid var(--bd-sutil);border-radius:2px;padding:3px 8px}
.serv .tags em{font-style:normal;flex-basis:100%;margin-top:4px}
@media (max-width:640px){.serv summary{grid-template-columns:32px 1fr auto;gap:14px;padding:20px 6px}.serv .body{padding-left:52px}}

/* animação de abertura de <details> */
details .body{animation:open .45s var(--ease)}
@keyframes open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){details .body{animation:none}}

/* ---------- Faixa escura: os dois lados ---------- */
.lados{overflow:hidden}
.lados .mono{position:absolute;left:-8vw;bottom:-14vh;width:min(46vw,640px);opacity:.06;pointer-events:none}
.lados .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3xl);align-items:center}
.lados blockquote{margin:0;font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(26px,2.8vw,36px);line-height:1.35;color:var(--dk-tx)}
.lados .mesa{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--dk-bd);border-radius:var(--r-lg);overflow:hidden;background:rgba(31,45,52,.6)}
.lados .lado{padding:var(--s-lg);position:relative;transition:background .35s var(--ease)}
.lados .lado:first-child{border-right:1px solid var(--rosa)}
.lados .lado:hover{background:rgba(31,45,52,.95)}
.lados .lado .ic{color:var(--rosa);margin-bottom:12px}
.lados .lado h3{font-size:22px;font-weight:500;margin-bottom:6px;color:var(--dk-tx)}
.lados .lado p{font-size:14px;color:var(--dk-tx-2);margin:0}
.lados .lado ul{margin:10px 0 0;padding:0;list-style:none;font-size:13px;color:var(--dk-mudo)}
.lados .lado li{padding:4px 0 4px 16px;position:relative}
.lados .lado li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:1px;background:var(--rosa)}
.lados .nota{margin-top:var(--s-md);font-size:13px;color:var(--dk-mudo)}
@media (max-width:860px){.lados .wrap{grid-template-columns:1fr;gap:var(--s-2xl)}}
@media (max-width:480px){.lados .mesa{grid-template-columns:1fr}.lados .lado:first-child{border-right:0;border-bottom:1px solid var(--rosa)}}

/* ---------- Estação 3: método (nós horizontais no fio) ---------- */
.met{margin-top:var(--s-xl);position:relative}
.met .barra{position:absolute;left:0;right:0;top:22px;height:1px;background:var(--bd-sutil)}
.met .barra i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--rosa);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease)}
.met.on .barra i{transform:scaleX(1)}
.met ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-lg);counter-reset:passo}
.met li{position:relative;padding-top:60px;cursor:pointer}
.met li .no{position:absolute;left:0;top:11px;width:24px;height:24px;border-radius:50%;background:var(--perg);border:1.5px solid var(--rosa);display:grid;place-items:center;transition:background .35s var(--ease),transform .35s var(--ease)}
.met li .no .ic{width:12px;height:12px;color:var(--perg);opacity:0;transition:opacity .3s}
.met li:hover .no,.met li.on .no{background:var(--borg);border-color:var(--borg);transform:scale(1.15)}
.met li:hover .no .ic,.met li.on .no .ic{opacity:1;color:var(--perg)}
.met li h3{font-size:22px;font-weight:500;margin-bottom:6px;transition:color .3s}
.met li:hover h3{color:var(--borg)}
.met li p{font-size:15px;margin:0;color:var(--tx-mudo)}
.met li .prazo{display:inline-block;margin-top:10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--tx-2);opacity:0;transform:translateY(4px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.met li:hover .prazo,.met li.on .prazo,.met li:focus-visible .prazo{opacity:1;transform:none}
@media (max-width:960px){.met .barra{display:none}.met ol{grid-template-columns:1fr;gap:var(--s-lg);position:relative;padding-left:44px}.met ol::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:1px;background:var(--rosa)}.met li{padding-top:0}.met li .no{left:-44px;top:2px}}

/* ---------- Estação 4: o que o perito olha (3 perguntas expansíveis) ---------- */
.olha{list-style:none;margin:var(--s-lg) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-lg)}
.olha li{position:relative}
.olha details{height:100%;background:var(--perg-2);border:1px solid var(--bd-sutil);border-radius:var(--r-lg);transition:border-color .3s,box-shadow .3s var(--ease),transform .3s var(--ease)}
.olha details:hover{border-color:var(--rosa);box-shadow:var(--sh-md);transform:translateY(-2px)}
.olha summary{list-style:none;cursor:pointer;padding:var(--s-lg)}
.olha summary::-webkit-details-marker{display:none}
.olha .ic{color:var(--tx-2);margin-bottom:14px}
.olha h3{font-size:22px;font-weight:500;margin-bottom:8px}
.olha .q{font-family:var(--f-display);font-style:italic;font-size:19px;line-height:1.4;color:var(--tx-2);margin:0}
.olha .mais{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--tx-2)}
.olha .mais .ic{width:14px;height:14px;margin:0;transition:transform .3s var(--ease)}
.olha details[open] .mais .ic{transform:rotate(180deg)}
.olha .body{padding:0 var(--s-lg) var(--s-lg);font-size:15px;border-top:1px solid var(--bd-sutil);margin:0 var(--s-lg);padding-left:0;padding-right:0;padding-top:14px}
@media (max-width:960px){.olha{grid-template-columns:1fr}}

/* ---------- Estação FAP: calculadora ---------- */
.calc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-2xl);align-items:start;margin-top:var(--s-lg)}
.calc-in{background:var(--perg-2);border:1px solid var(--bd-sutil);border-radius:var(--r-lg);padding:var(--s-lg);box-shadow:var(--sh-sm)}
.calc-in label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--tx-mudo);margin-bottom:6px}
.calc-in .f{margin-bottom:var(--s-md)}
.calc-in input[type=text],.calc-in select{width:100%;font:inherit;font-size:16px;color:var(--tx);background:var(--perg-2);border:1px solid var(--bd-sutil);border-radius:var(--r-md);padding:12px 14px;outline:none;transition:border-color .2s}
.calc-in input[type=text]:focus,.calc-in select:focus{border-color:var(--borg)}
.calc-in input[type=range]{width:100%;accent-color:var(--borg);margin-top:8px}
.calc-in .fapv{font-family:var(--f-display);font-size:26px;font-weight:500;color:var(--borg);text-transform:none;letter-spacing:0}
.calc-out{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-md)}
.calc-out .co{padding:18px 20px;border:1px solid var(--bd-sutil);border-radius:var(--r-lg);background:var(--perg-2);transition:transform .3s var(--ease),box-shadow .3s}
.calc-out .co:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.calc-out .co span{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-mudo);margin-bottom:6px}
.calc-out .co b{font-family:var(--f-display);font-size:clamp(26px,2.6vw,34px);font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--tx)}
.calc-out .co.big{grid-column:1/-1;background:var(--verde);border-color:var(--verde);color:var(--perg)}
.calc-out .co.big span{color:var(--rosa)} .calc-out .co.big b{color:var(--perg);font-size:clamp(34px,3.6vw,48px)}
.calc-out .co.big small{display:block;font-size:13px;color:var(--dk-tx-2);margin-top:6px}
.calc-nota{font-size:13px;color:var(--tx-mudo);margin-top:var(--s-md)}
@media (max-width:860px){.calc{grid-template-columns:1fr}}

/* ---------- Kit ---------- */
.kit .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s-3xl);align-items:start}
.kit h2 em{font-style:italic;font-weight:400;color:var(--borg)}
.selo{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--perg);background:var(--verde);padding:8px 14px;border-radius:2px;margin:0 0 var(--s-md)}
.selo .ic{width:16px;height:16px}
.kitbox{position:relative}
.kitbox .capa{position:relative;background:var(--verde);color:var(--perg);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:26px 28px 22px;overflow:hidden;box-shadow:var(--sh-md)}
.kitbox .capa::before{content:"";position:absolute;inset:0;background:url(assets/img/tex-dark.jpg) center/700px repeat;opacity:.14}
.kitbox .capa img{position:absolute;right:-30px;top:-20px;width:170px;opacity:.12}
.kitbox .capa b{position:relative;display:block;font-family:var(--f-display);font-weight:500;font-size:34px;line-height:1}
.kitbox .capa span{position:relative;display:block;font-family:var(--f-display);font-style:italic;font-size:17px;color:var(--dk-tx-2);margin:6px 0 10px;max-width:300px}
.kitbox .capa i{position:relative;display:inline-block;font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--rosa)}
.kitbox .form{border-radius:0 0 var(--r-lg) var(--r-lg);border-top:0}
.kit .lista{margin:var(--s-md) 0 0;padding:0;list-style:none}
.kit .lista li{padding:8px 0 8px 30px;position:relative;font-size:15px}
.kit .lista li .ic{position:absolute;left:0;top:9px;width:18px;height:18px;color:var(--tx-2)}
.form{background:var(--perg-2);border:1px solid var(--bd-sutil);border-radius:var(--r-lg);padding:var(--s-xl);box-shadow:var(--sh-md)}
.form h3{margin-bottom:var(--s-sm)}
.field{margin-bottom:var(--s-md)}
.field label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--tx-mudo);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:16px;color:var(--tx);background:var(--perg-2);border:1px solid var(--bd-sutil);border-radius:var(--r-md);padding:14px 16px;outline:none;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--borg);box-shadow:0 0 0 3px rgba(107,44,47,.08)}
.field input::placeholder{color:#A89A8A}
.form .btn{width:100%;justify-content:center;margin-top:var(--s-sm)}
.form .fine{font-size:12px;color:var(--tx-mudo);margin:var(--s-md) 0 0}
.form-ok{display:none;padding:var(--s-lg);border:1px solid var(--rosa);border-radius:var(--r-md);background:var(--perg)}
.form-ok h3{font-size:24px;font-weight:500;margin-bottom:var(--s-sm)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
@media (max-width:860px){.kit .wrap{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--rosa)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s-lg);padding:22px 0;font-family:var(--f-display);font-size:23px;font-weight:500;line-height:1.3;color:var(--tx);transition:color .25s,transform .3s var(--ease)}
.faq summary:hover{color:var(--borg);transform:translateX(8px)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{color:var(--tx-mudo);transition:transform .35s var(--ease)}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq .body{padding:0 0 22px;max-width:680px;font-size:15px}
.faq .body p:last-child{margin:0}

/* ---------- Sobre ---------- */
.sobre .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s-3xl);align-items:start}
.sobre-pic{width:min(100%,380px);position:relative}
.sobre-pic img{aspect-ratio:4/5;object-fit:cover;width:100%;box-shadow:var(--sh-lg)}
.sobre-pic::after{content:"";position:absolute;right:-12px;top:12px;left:12px;bottom:-12px;border:1px solid var(--rosa);z-index:-1}
.sobre .reg{margin-top:var(--s-lg);font-size:13px;color:var(--tx-mudo);letter-spacing:.04em}
.sobre .reg b{color:var(--tx);font-weight:500}
@media (max-width:860px){.sobre .wrap{grid-template-columns:1fr;gap:var(--s-2xl)}.sobre-pic{width:min(100%,300px)}}

/* ---------- Parceria ---------- */
.parceria .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s-3xl);align-items:center}
.parceria .wrap>div:first-child{position:relative}
.parceria .pmono{position:absolute;left:-40px;top:-60px;width:220px;opacity:.06;pointer-events:none}
.parceria h2 em{font-style:italic;font-weight:400;color:var(--borg)}
.parceria .lead{max-width:520px}
.parceria .form h3{margin-bottom:var(--s-md)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s-md)}
@media (max-width:860px){.parceria .wrap{grid-template-columns:1fr;gap:var(--s-2xl)}}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}

/* ---------- CTA final ---------- */
.cta-final{text-align:center;overflow:hidden}
.cta-final .mono{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(60vw,720px);opacity:.05;pointer-events:none}
.cta-final h2{max-width:760px;margin:0 auto var(--s-md)}
.cta-final .lead{max-width:600px;margin:0 auto 52px;color:var(--dk-tx-2)}
.cta-final .alt{margin-top:var(--s-lg);font-size:14px;color:var(--dk-mudo)}
.cta-final .alt a{color:var(--dk-tx-2)}

/* ---------- Footer ---------- */
.footer{background:var(--verde);color:var(--dk-mudo);border-top:1px solid var(--dk-bd);font-size:13px}
.footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:var(--s-xl);padding-top:var(--s-2xl);padding-bottom:var(--s-2xl)}
.footer .brand{color:var(--dk-tx);font-size:20px;margin-bottom:var(--s-md)}
.footer h5,.footer .h5{font-family:var(--f-body);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--rosa);margin:0 0 var(--s-sm)}
.footer a{color:var(--dk-tx-2)}
.footer p{margin:0 0 6px}
.footer .legal{border-top:1px solid var(--dk-bd)}
.footer .legal .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s-md);padding-top:var(--s-md);padding-bottom:var(--s-md);font-size:12px}
@media (max-width:860px){.footer .wrap{grid-template-columns:1fr}}

/* WhatsApp flutuante */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:40;display:inline-flex;align-items:center;gap:10px;background:var(--verde);color:var(--perg);padding:12px 16px;border-radius:var(--r-md);text-decoration:none;font-size:14px;font-weight:500;box-shadow:var(--sh-xl);border:1px solid var(--dk-bd);transition:transform .3s var(--ease),background .3s}
.wa-float:hover{background:var(--verde-2);color:var(--perg);transform:translateY(-2px)}
.wa-float svg{width:18px;height:18px}
@media (max-width:640px){.wa-float span{display:none}.wa-float{padding:12px}}
