:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* TwoBible · site institucional. Mesma identidade do funil v7: céu claro ao fundo (aqui em CSS, sem WebGL, para a página ficar leve),
   conteúdo em cartões de vidro claro, azul-noite para ação, dourado para luz, Crimson Pro nos títulos e Figtree no texto.
   Sempre tema claro (como o funil). */
@font-face{font-family:"Figtree Fallback"; src:local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust:99.8%; ascent-override:95.2%; descent-override:25%; line-gap-override:0%}
@font-face{font-family:"Crimson Pro Fallback"; src:local("Georgia"); size-adjust:92%; ascent-override:96%; descent-override:26%}
:root{
  color-scheme:light;
  --ink:#1F2433; --ink-2:#3F4A63; --ink-3:#545E72;
  --accent:#24345E; --accent-2:#1B2849; --accent-soft:#E9EEF8; --accent-line:rgba(36,52,94,.55);
  --gold:#E8C77A; --gold-2:#D9A94A; --gold-ink:#5A4410; --gold-soft:#FBF1D9;
  --brick:#B0533F; --brick-soft:#F6E3DC; --ok:#2E6B4E; --ok-soft:#E3F0E8;
  --paper:#F7F3EE; --paper-2:#FBF9F6; --card:#FFFDFA; --line:rgba(36,52,94,.13); --line-2:rgba(36,52,94,.08);
  --glass:rgba(255,253,250,.72); --glass-2:rgba(255,253,250,.90); --glass-line:rgba(255,255,255,.75);
  --serif:"Crimson Pro","Crimson Pro Fallback",Georgia,"Times New Roman",serif;
  --sans:"Figtree","Figtree Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-lg:20px; --r-md:14px;
  --shadow-1:0 1px 2px rgba(27,40,73,.05), 0 8px 24px -14px rgba(27,40,73,.22);
  --shadow-2:0 2px 6px rgba(27,40,73,.06), 0 22px 48px -22px rgba(27,40,73,.38);
  --ease:cubic-bezier(.2,.8,.2,1);
  --blur:blur(10px) saturate(1.2);
  --gut:max(16px, env(safe-area-inset-left,0px));
  --gut-r:max(16px, env(safe-area-inset-right,0px));
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:76px}
html,body{background:var(--paper); color:var(--ink)}
body{margin:0; font-family:var(--sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip; min-height:100vh}
a{color:var(--accent); text-underline-offset:3px; -webkit-tap-highlight-color:transparent}
button{font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent}
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.i{display:block; flex:none}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.wrap{max-width:1080px; margin:0 auto; padding-left:var(--gut); padding-right:var(--gut-r)}
.narrow{max-width:780px}

/* ---------- céu em CSS (amanhecer claro; nuvens lentas; para com "reduzir movimento") ---------- */
.sky{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:radial-gradient(120% 60% at 85% -5%, rgba(255,244,226,.85), rgba(255,244,226,0) 60%),
    linear-gradient(180deg,#9DB6E2 0%,#BCCDEB 24%,#DCDCEC 44%,#F3E6E0 58%,#F7F3EE 74%,#F7F3EE 100%)}
.sky i{position:absolute; border-radius:50%; background:radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.55) 55%, rgba(255,255,255,0)); filter:blur(2px); will-change:transform}
.sky i:nth-child(1){width:520px; height:150px; top:7%; left:-10%; animation:drift 95s linear infinite}
.sky i:nth-child(2){width:380px; height:110px; top:18%; left:45%; opacity:.85; animation:drift 120s linear -40s infinite}
.sky i:nth-child(3){width:620px; height:170px; top:30%; left:10%; opacity:.6; animation:drift 140s linear -70s infinite}
.sky i:nth-child(4){width:300px; height:90px; top:4%; left:70%; opacity:.7; animation:drift 110s linear -20s infinite}
@keyframes drift{from{transform:translate3d(-30vw,0,0)} to{transform:translate3d(60vw,0,0)}}
.sky .sun{position:absolute; top:-120px; right:-60px; width:420px; height:420px; border-radius:50%; background:radial-gradient(closest-side, rgba(255,240,206,.9), rgba(255,240,206,.35) 55%, rgba(255,240,206,0)); animation:glow 9s ease-in-out infinite}
@keyframes glow{50%{transform:scale(1.06); opacity:.85}}
main, .top, .foot, .cookie{position:relative; z-index:1}

/* ---------- marca ---------- */
.mark{display:block; flex:none; width:24px; height:24px; color:var(--accent)}
.brand .mark{width:27px; height:27px}
.mark path{fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round}
.brand{display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:var(--ink); min-height:44px}
.brand b{font-family:var(--serif); font-weight:600; font-size:23px; letter-spacing:-.01em; line-height:1}

/* ---------- topo ---------- */
.top{position:sticky; top:0; z-index:20; padding-top:env(safe-area-inset-top,0px); background:rgba(247,243,238,.72); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border-bottom:1px solid var(--line-2)}
.top .wrap{display:flex; align-items:center; gap:10px; height:62px}
.top nav{display:none; gap:2px; margin-left:auto}
.top nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 10px; border-radius:10px; color:var(--ink-2); font-weight:600; font-size:15px; text-decoration:none}
.top nav a:hover{background:rgba(36,52,94,.06); color:var(--ink)}
.lang{display:inline-flex; border:1px solid var(--line); border-radius:999px; background:rgba(255,253,250,.8); padding:2px}
.top .wrap > .lang{display:none}
.menu .lang{margin-top:14px}
.lang button{min-width:38px; height:38px; border:0; background:transparent; border-radius:999px; font-size:13px; font-weight:700; color:var(--ink-3); letter-spacing:.03em}
.lang button[aria-pressed="true"]{background:var(--accent); color:#fff}
.menubtn{width:44px; height:44px; border:0; border-radius:12px; background:transparent; display:grid; place-items:center; color:var(--ink)}
.top .cta.sm{margin-left:auto; flex:none}
@media (max-width:359px){ .top .wrap{gap:6px} .top .cta.sm{padding:0 11px; font-size:14px} .brand b{font-size:19px} }
.menu{position:absolute; left:0; right:0; top:100%; background:var(--card); border-bottom:1px solid var(--line); box-shadow:var(--shadow-2); padding:8px var(--gut-r) 16px var(--gut);
  max-height:calc(100vh - 62px - env(safe-area-inset-top,0px)); max-height:calc(100dvh - 62px - env(safe-area-inset-top,0px)); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
/* celular deitado: o menu rola por dentro, para nenhum item ficar fora da tela */
.menu a:not(.cta){display:flex; align-items:center; min-height:48px; padding:0 4px; border-bottom:1px solid var(--line-2); color:var(--ink); font-weight:600; text-decoration:none}
.menu .cta{margin-top:12px}
@media (min-width:960px){ .top nav{display:flex} .top .wrap > .lang{display:inline-flex; margin-left:8px} .menubtn, .menu{display:none!important} .top .cta.sm{margin-left:0} }

/* ---------- botões (o principal tem o brilho do funil) ---------- */
.cta{position:relative; overflow:hidden; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:56px; padding:0 26px; border:0; border-radius:16px;
  background:linear-gradient(100deg,#24345E 0%,#34497F 100%); color:#fff; font-weight:700; font-size:17px; letter-spacing:-.005em; text-decoration:none; text-align:center; line-height:1.2;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 14px 28px -16px rgba(27,40,73,.75); transition:transform .12s ease, box-shadow .2s ease}
.cta:active{transform:scale(.985)}
.cta:focus-visible{outline:3px solid var(--gold); outline-offset:3px}
.cta.sm{min-height:44px; padding:0 16px; font-size:15px; border-radius:12px}
.cta.full{width:100%}
.cta > span{position:relative; z-index:2}
.cta .sw{position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none; z-index:1}
/* ===== BRILHO DOS BOTÕES PRINCIPAIS (igual ao funil): faixa branca larga, na diagonal, a cada 2,8 s ===== */
:root{--sheen-w:40%; --sheen-t:2.8s}
.cta .sw::after{content:""; position:absolute; top:-45%; bottom:-45%; left:0; width:var(--sheen-w);
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.12) 22%, rgba(255,255,255,.36) 40%, rgba(255,255,255,.45) 50%, rgba(255,255,255,.36) 60%, rgba(255,255,255,.12) 78%, rgba(255,255,255,0) 100%);
  transform:translate3d(-150%,0,0) skewX(-24deg); animation:sheen var(--sheen-t) cubic-bezier(.45,.05,.35,1) .5s infinite}
@keyframes sheen{0%{transform:translate3d(-150%,0,0) skewX(-24deg)} 62%,100%{transform:translate3d(300%,0,0) skewX(-24deg)}}
/* ===== fim do bloco do brilho ===== */
.btn2{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 20px; border-radius:14px; border:1px solid var(--accent-line); background:rgba(255,253,250,.75); color:var(--accent); font-weight:700; font-size:16px; text-decoration:none}
.btn2:hover{background:#fff}
.linkbtn{border:0; background:none; padding:0; color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; min-height:44px}

/* ---------- seções da institucional ---------- */
section{padding:56px 0}
section.tight{padding:36px 0}
.eyebrow{margin:0 0 8px; font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent)}
h1, h2{font-family:var(--serif); font-weight:600; color:var(--ink); letter-spacing:-.015em; margin:0}
h2{font-size:clamp(28px, 6.4vw, 40px); line-height:1.1}
h1 em, h2 em{font-style:italic; font-weight:600; color:var(--accent)}
h3{font-size:18px; line-height:1.3; margin:0}
.lead{font-size:18px; color:var(--ink-2); margin:12px 0 0; max-width:60ch}
.sec-head{max-width:720px; margin-bottom:24px}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center}
.sec-head.center .lead{margin-left:auto; margin-right:auto}
.card{background:var(--glass-2); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--glass-line); border-radius:var(--r-lg); box-shadow:var(--shadow-1); padding:20px}
.grid{display:grid; gap:14px}
@media (min-width:640px){ .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(2,minmax(0,1fr))} .g4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:960px){ .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} }
.ic{width:44px; height:44px; border-radius:13px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; margin-bottom:12px}
.card p{margin:6px 0 0; color:var(--ink-2); font-size:15.5px}
/* no celular, cartões de recurso mais baixos: ícone à esquerda */
@media (max-width:639px){ .feat{display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:14px; padding:16px} .feat .ic{margin:0; grid-row:1 / span 2} .feat h3, .feat p{grid-column:2} .feat h3{align-self:center} }
.muted{color:var(--ink-3); font-size:14px}
.verse{font-family:var(--serif); font-style:italic; font-size:19px; color:var(--ink-2)}

/* herói */
.hero{padding:32px 0 48px}
.hero .wrap{display:grid; gap:28px; align-items:center}
.hero h1{font-size:clamp(38px, 10.5vw, 64px); line-height:1.02; margin-top:6px}
.hero .lead{font-size:clamp(17px, 4.6vw, 20px)}
.tagline{display:inline-flex; align-items:center; gap:8px; margin:0; font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent)}
.tagline.nome{text-transform:none; letter-spacing:.005em; font-size:17px}
.tagline.nome .mark{width:26px; height:26px}
.hero .acts{display:flex; flex-direction:column; gap:10px; margin-top:24px; max-width:420px}
.hero .acts .btn2{background:transparent; border-color:transparent; text-decoration:underline; text-underline-offset:4px; min-height:44px}
.hero .ec{margin:18px 0 0}
.subcta{margin:10px 0 0; font-size:14px; color:var(--ink-3); max-width:42ch}
.hero-art{position:relative; width:100%; max-width:520px; margin:0 auto}
/* dois celulares desenhados em HTML (sem imagem): leves e nítidos em qualquer tela */
.phones{display:flex; justify-content:center; gap:12px; padding-bottom:26px}
.fone{flex:1 1 0; max-width:248px; aspect-ratio:9/17.6; border-radius:clamp(26px,7vw,38px); background:#121829; padding:clamp(5px,1.4vw,8px); box-shadow:0 2px 0 rgba(255,255,255,.08) inset, 0 30px 60px -28px rgba(18,24,41,.75), 0 10px 22px -12px rgba(18,24,41,.35); position:relative}
.fone::before{content:""; position:absolute; top:clamp(10px,2.6vw,15px); left:50%; width:30%; height:clamp(12px,3.2vw,18px); transform:translateX(-50%); border-radius:999px; background:#121829; z-index:2}
.fone.b{transform:translateY(26px)}
.scr{height:100%; border-radius:clamp(21px,5.6vw,31px); overflow:hidden; background:linear-gradient(180deg,#EEF2FA 0%, #FBF9F6 34%); padding:clamp(26px,7vw,40px) clamp(8px,2.3vw,13px) 10px; display:flex; flex-direction:column; gap:clamp(5px,1.4vw,8px); font-size:clamp(10.5px,2.85vw,13px); line-height:1.3; color:var(--ink)}
.scr .sb{position:absolute; top:clamp(11px,2.9vw,16px); left:clamp(18px,5vw,28px); font-size:clamp(9px,2.3vw,11px); font-weight:700; color:var(--ink)}
.scr .nt{display:flex; gap:7px; align-items:flex-start; padding:7px 8px; border-radius:12px; background:rgba(255,255,255,.95); box-shadow:0 6px 16px -10px rgba(27,40,73,.5)}
.scr .nt b{display:block; font-size:.9em; color:var(--ink-3)}
.scr .app{width:2.1em; height:2.1em; border-radius:.55em; background:var(--accent); display:grid; place-items:center; flex:none}
.scr .app .mark{width:1.5em; height:1.5em; color:#fff}
.scr .d1{font-size:.82em; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-top:2px}
.scr .d2{font-family:var(--serif); font-weight:600; font-size:1.45em; line-height:1.05; margin-top:-3px}
.scr .q{font-family:var(--serif); font-size:1.18em; line-height:1.2; font-weight:600; color:var(--ink)}
.scr .q.sm{font-size:1em; color:var(--ink-2)}
.scr .ans{background:#fff; border:1px solid var(--line); border-radius:11px; padding:6px 8px; color:var(--ink-2)}
.scr .ans.me{background:var(--accent-soft); border-color:transparent}
.scr .who{display:flex; align-items:center; justify-content:space-between; gap:4px; font-weight:700; color:var(--ink); font-size:.92em; margin-bottom:2px}
.scr .lk{display:inline-flex; align-items:center; gap:3px; font-weight:600; font-size:.86em; color:var(--accent)}
.scr .blur{color:transparent; text-shadow:0 0 7px rgba(36,52,94,.55); user-select:none}
.scr .inp{display:grid; border:1.5px dashed var(--accent-line); border-radius:11px; padding:7px 8px; color:var(--ink-3)}
.scr .inp > span, .scr .lk > span{grid-area:1 / 1}
.scr .lk{display:inline-grid}
.scr .lk > span{display:inline-flex; align-items:center; gap:3px; justify-content:flex-end}
.scr .orou{font-size:.9em; font-weight:600; color:var(--ink-2); padding:6px 8px; border-radius:10px; background:rgba(255,255,255,.7)}
.scr .ref{display:flex; align-items:center; gap:4px; font-size:.86em; font-weight:600; color:var(--accent)}
/* a revelação, uma vez: a Clara responde e a resposta do Davi abre */
.fone.a .p1, .fone.a .l1{opacity:0}
.fone.a .p1{color:var(--ink)}
.fone.a .p0{animation:tbOut .3s 2.2s forwards}
.fone.a .p1{animation:tbIn .5s 2.4s forwards}
.fone.a .inp{animation:tbSolid .4s 2.4s forwards}
.fone.a .l0{animation:tbOut .3s 3.3s forwards}
.fone.a .l1{animation:tbIn .4s 3.5s forwards}
.fone.a .blur{animation:tbClear .9s 3.4s forwards}
@keyframes tbOut{to{opacity:0}}
@keyframes tbIn{to{opacity:1}}
@keyframes tbSolid{to{border-style:solid; border-color:var(--line); background:#fff}}
@keyframes tbClear{to{color:var(--ink-2); text-shadow:0 0 0 rgba(36,52,94,0)}}
.scr .vis{font-size:.86em; font-weight:600; color:var(--ink-3)}
.scr .pray{display:flex; align-items:center; justify-content:center; gap:5px; border-radius:11px; background:var(--accent); color:#fff; font-weight:700; padding:7px 6px; margin-top:auto}
.scr .brk{display:flex; align-items:center; justify-content:center; gap:5px; border-radius:999px; background:var(--gold-soft); color:var(--gold-ink); font-weight:700; font-size:.9em; padding:5px 6px}
.scr .i{flex:none}
.pill{display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:2px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:13px; font-weight:600}
.pill.ok{background:var(--ok-soft); color:var(--ok)}
.pill.gold{background:var(--gold-soft); color:var(--gold-ink)}
@media (min-width:880px){ .hero{padding:56px 0 72px} .hero .wrap{grid-template-columns:1.05fr .95fr; gap:40px} .hero .acts{max-width:none} .hero .acts .cta{align-self:flex-start} }

/* passos */
.steps{counter-reset:p; list-style:none; padding:0; margin:0}
.steps li{position:relative; padding-top:56px}
.steps li::before{counter-increment:p; content:counter(p); position:absolute; top:18px; left:20px; width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; font-size:15px; display:grid; place-items:center}
.note-line{display:flex; gap:10px; align-items:flex-start; margin:18px 0 0; padding:12px 16px; border-radius:14px; background:var(--gold-soft); color:var(--gold-ink); font-size:15px}

/* para quem é + modos */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; padding:0; list-style:none}
.chips li{padding:8px 14px; border-radius:999px; background:var(--glass-2); border:1px solid var(--line); font-weight:600; font-size:15px}
.mode h3{font-family:var(--serif); font-size:24px}
.mode ul{margin:10px 0 0; padding:0; list-style:none; display:grid; gap:8px}
.mode li{display:flex; gap:8px; align-items:flex-start; font-size:15.5px; color:var(--ink-2)}
.mode li .i{color:var(--ok); margin-top:3px}

/* princípios */
.princ{display:grid; gap:12px}
@media (min-width:760px){ .princ{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* assinatura */
.plans{display:grid; gap:14px}
@media (min-width:760px){ .plans{grid-template-columns:repeat(3,minmax(0,1fr))} }
.plan h3{font-family:var(--serif); font-size:23px}
.plan .tag{display:inline-flex; margin-bottom:8px}
.facts{margin:14px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.facts li{display:flex; gap:10px; align-items:flex-start; font-size:15.5px; color:var(--ink-2)}
.facts li .i{color:var(--accent); margin-top:3px}
.legal-links{margin:16px 0 0; font-size:15px}

/* perguntas */
.faq{display:grid; gap:10px}
.faq details{background:var(--glass-2); border:1px solid var(--glass-line); border-radius:16px; box-shadow:var(--shadow-1)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:56px; padding:12px 18px; font-weight:700; font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i{transition:transform .2s; color:var(--ink-3)}
.faq details[open] summary .i{transform:rotate(180deg)}
.faq details p{margin:0; padding:0 18px 16px; color:var(--ink-2)}

/* ajuda (faixa) */
.helpband{display:flex; flex-direction:column; gap:10px; padding:18px 20px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-1)}
.helpband b{display:flex; align-items:center; gap:8px; font-size:17px; color:var(--ink)}
.helpband b .i{color:var(--brick)}
.nums{display:flex; flex-wrap:wrap; gap:8px}
.num{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border-radius:12px; background:var(--accent-soft); color:var(--accent); font-weight:700; text-decoration:none}
.num small{font-weight:600; color:var(--ink-2)}

/* selos das lojas (marcadores) */
.stores{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.store{display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:6px 16px 6px 12px; border-radius:12px; background:#111; color:#fff; text-decoration:none; opacity:.92}
.store small{display:block; font-size:11px; opacity:.8; line-height:1.1}
.store b{display:block; font-size:16px; line-height:1.15}

/* CTA final */

/* ---------- seções da home v2: ritmo variado (faixa branca, faixa azul-noite, foto) em vez de cartões iguais ---------- */
.band-w{background:rgba(255,253,250,.86); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.dor{text-align:center; padding:60px 0}
.dor h2{font-size:clamp(30px, 7.4vw, 46px)}
.dor .lines{list-style:none; margin:26px auto 0; padding:0; display:grid; gap:4px; max-width:620px}
.dor .lines li{font-family:var(--serif); font-size:clamp(22px, 5.6vw, 30px); line-height:1.3; color:var(--ink-2); padding:10px 0; border-bottom:1px solid var(--line-2)}
.dor .lines li:last-child{border-bottom:0}
.dor .close{margin:20px 0 0; font-weight:700; font-size:17px; color:var(--accent)}
.dor .close .nf{display:block; font-family:var(--serif); font-style:italic; font-weight:600; font-size:clamp(22px,5.4vw,28px); line-height:1.2; color:var(--ink); margin-bottom:8px}
.ritual{list-style:none; counter-reset:r; margin:0; padding:0; display:grid; gap:22px}
@media (min-width:760px){ .ritual{grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px} }
.ritual li{counter-increment:r; position:relative; padding-top:16px; border-top:2px solid var(--accent)}
.ritual li::before{content:counter(r); display:block; font-family:var(--serif); font-size:44px; line-height:1; font-weight:600; color:var(--gold-2); margin-bottom:8px}
.ritual h3{font-family:var(--serif); font-size:23px; line-height:1.15; font-weight:600}
.ritual p{margin:8px 0 0; color:var(--ink-2)}
@media (max-width:759px){ .ritual{gap:16px} .ritual li{display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:12px; padding-top:14px} .ritual li::before{grid-row:1 / span 2; font-size:34px; margin:0} .ritual h3, .ritual p{grid-column:2} .ritual p{margin-top:4px} }
.keys{display:grid; gap:10px; margin-top:26px}
@media (min-width:760px){ .keys{grid-template-columns:repeat(2,minmax(0,1fr))} }
.key{display:flex; gap:10px; align-items:flex-start; margin:0; font-size:15.5px; color:var(--ink-2)}
.key .i{color:var(--accent); margin-top:2px}
.midcta{margin-top:30px; display:flex; flex-direction:column; align-items:flex-start}
.midcta .cta{width:100%; max-width:420px}
@media (min-width:640px){ .midcta .cta{width:auto} }
/* Casa na Rocha: faixa azul-noite, o único bloco escuro da página */
.rocha{background:linear-gradient(170deg,#1B2849 0%,#24345E 100%); color:#fff; padding:60px 0}
.rocha .wrap{display:grid; gap:26px; align-items:center}
@media (min-width:860px){ .rocha .wrap{grid-template-columns:1fr 1fr; gap:48px} }
.rocha .eyebrow{color:var(--gold)}
.rocha h2{color:#fff}
.rocha h2 em{color:var(--gold)}
.rocha p{color:rgba(255,255,255,.86); font-size:17px; margin:14px 0 0; max-width:52ch}
.rocha p.sm{font-size:15px; color:rgba(255,255,255,.7)}
.rocha-art{max-width:440px; width:100%; margin:0 auto}
.casa{display:block; width:100%; height:auto}
.casa .sun{fill:rgba(232,199,122,.9); filter:drop-shadow(0 0 18px rgba(232,199,122,.55))}
.casa .rock{fill:#3B4E85}
.casa .rock-l{fill:none; stroke:rgba(255,255,255,.18); stroke-width:2; stroke-linecap:round}
.casa .roof{fill:none; stroke:rgba(255,255,255,.42); stroke-width:2.5; stroke-dasharray:7 7; stroke-linecap:round; stroke-linejoin:round}
.casa .win{fill:none; stroke:rgba(255,255,255,.42); stroke-width:2; stroke-dasharray:5 5}
.casa .b.f{fill:var(--gold)}
.casa .b.e{fill:none; stroke:rgba(255,255,255,.32); stroke-width:1.4}
.casa .b.novo{fill:#F3DCA0; transform-box:fill-box; transform-origin:center; animation:brick 4.8s var(--ease) infinite}
@keyframes brick{0%,12%{transform:translateY(-34px); opacity:0} 34%,100%{transform:translateY(0); opacity:1}}
.casa .cloud{fill:#E9EEF8}
.casa .rn{stroke:#9DB6E2; stroke-width:2.2; stroke-linecap:round; stroke-dasharray:7 9; animation:rain .7s linear infinite}
@keyframes rain{to{stroke-dashoffset:-32}}
.casa-st{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:10px 0 0!important; font-size:13.5px!important}
.casa-st span{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.1); color:#fff; font-weight:600}
.casa-st .i{color:var(--gold)}
/* para quem é */
.solo{display:grid; gap:24px; align-items:center}
@media (min-width:820px){ .solo{grid-template-columns:.8fr 1.2fr; gap:48px} }
.solo-foto{display:block; width:100%; max-width:360px; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:26px; box-shadow:var(--shadow-2); margin:0 auto}
@media (max-width:819px){ .solo-foto{max-width:none; aspect-ratio:16/10; object-position:50% 40%} }
.solo .lead{font-size:17px}
.solo .chips{margin:18px 0 0}
/* privacidade em lista, sem cartões */
.priv{list-style:none; margin:0; padding:0; display:grid; gap:14px}
@media (min-width:760px){ .priv{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:36px} }
.priv li{display:flex; gap:12px; align-items:flex-start; font-size:16px; color:var(--ink-2); padding-bottom:14px; border-bottom:1px solid var(--line-2)}
.priv li .i{color:var(--accent); margin-top:2px}
@media (min-width:760px){ .priv li:last-child{grid-column:1 / -1} }
.subs .plans{display:grid; gap:0; grid-template-columns:none}
.subs .plan{padding:4px 0 16px; border-bottom:1px solid var(--line-2)}
.subs .plan + .plan{padding-top:16px}
.subs .plan p{margin-top:4px}
@media (min-width:760px){ .subs .plans{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px} .subs .plan + .plan{padding-top:4px} }
/* recursos no celular: lista leve, sem caixa em volta de cada item */
@media (max-width:639px){ #recursos .feat{background:none; -webkit-backdrop-filter:none; backdrop-filter:none; border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; padding:14px 0} #recursos .grid{gap:0} }
/* moldura de celular para prints reais (proporção do iPhone: o print vem sem a barra de status, que a moldura desenha) */
.devframe{position:relative; width:100%; padding:clamp(5px,1.4vw,8px); border-radius:clamp(28px,7.5vw,42px); background:#121829; box-shadow:0 2px 0 rgba(255,255,255,.08) inset, 0 30px 60px -28px rgba(18,24,41,.75), 0 10px 22px -12px rgba(18,24,41,.35)}
.devframe::before{content:""; position:absolute; top:clamp(11px,2.9vw,16px); left:50%; width:30%; height:clamp(12px,3.3vw,19px); transform:translateX(-50%); border-radius:999px; background:#121829; z-index:2}
.devframe .scrn{display:grid; border-radius:clamp(23px,6.2vw,34px); overflow:hidden; background:#EEE8E1; padding-top:clamp(24px,6.6vw,36px); container-type:inline-size}
.devframe .tela{grid-area:1 / 1; display:block; width:100%; height:auto; opacity:0; transition:opacity .4s var(--ease)}
.devframe .tela.on{opacity:1}
/* telas desenhadas (espanhol e inglês), no visual do app; tudo em cqw = % da largura da tela */
.appscr{position:relative; aspect-ratio:560 / 1146; overflow:hidden; background:#EEE8E1; color:#1E1C1A; font-family:var(--sans); font-size:3.4cqw; line-height:1.3; text-align:left}
.appscr p{margin:0}
.appscr .ai{width:1em; height:1em; flex:none; display:inline-block; vertical-align:-.15em}
.appscr .a-cap{font-size:2.95cqw; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#5D5852; display:flex; align-items:center; gap:1.5cqw}
.appscr .a-h1{font-family:var(--serif); font-weight:700; font-size:8.3cqw; line-height:1.05; letter-spacing:-.01em}
.appscr .a-h2{font-family:var(--serif); font-weight:700; font-size:6.4cqw; line-height:1.1}
.appscr .a-h3{font-family:var(--serif); font-weight:700; font-size:6.3cqw; line-height:1.15; text-align:center}
.appscr .a-top{display:flex; align-items:center; gap:2.6cqw; padding:5cqw 4cqw 0}
.appscr .a-top > div{flex:1; min-width:0}
.appscr .a-circ{width:10.4cqw; height:10.4cqw; border-radius:50%; background:#E6DBD1; display:grid; place-items:center; font-size:4.2cqw; color:#3C3833}
.appscr .a-plus{margin-left:auto; width:10cqw; height:10cqw; border-radius:50%; background:#1F2023; color:#fff; display:grid; place-items:center; font-size:5.2cqw}
.appscr .a-who{display:flex; align-items:center; padding:4cqw 4cqw 0}
.appscr .a-av{width:14.6cqw; height:14.6cqw; border-radius:50%; display:grid; place-items:center; font-family:var(--serif); font-weight:700; font-size:6cqw; color:#2C2A28; border:.7cqw solid #EEE8E1}
.appscr .a-av.c{background:linear-gradient(160deg,#9FB1D6,#E7B79C)}
.appscr .a-av.d{background:#EBCFCB; color:#8D8781; margin-left:-3.5cqw}
.appscr .a-chip{margin-left:4cqw; display:inline-flex; align-items:center; gap:1.4cqw; padding:1.4cqw 3.4cqw; border-radius:99px; background:#EFD9D2; color:#9C4B3E; font-size:3.7cqw; font-weight:600}
.appscr .a-devo{margin:5cqw 4cqw 0; padding:5.5cqw 5.5cqw 5cqw; border-radius:7cqw; background:linear-gradient(180deg,#D399A3 0%,#DFAFA9 50%,#E9BEAB 100%)}
.appscr .a-dia{font-size:4.3cqw; font-weight:600; margin-top:1.6cqw}
.appscr .a-sm{font-size:3.3cqw; color:#3E3532; margin-top:.8cqw}
.appscr .a-devo .a-h2{margin-top:1.2cqw}
.appscr .a-pills{display:flex; gap:2cqw; margin-top:2.6cqw; flex-wrap:nowrap}
.appscr .a-pills span{display:inline-flex; align-items:center; gap:1cqw; padding:1.2cqw 2.6cqw; background:#fff; border-radius:99px; font-size:3.6cqw; white-space:nowrap}
.appscr .a-sm2{font-size:3.8cqw; margin-top:3cqw; color:#2C2523}
.appscr .a-btn{display:flex; align-items:center; justify-content:center; height:13.6cqw; margin-top:2.6cqw; border-radius:99px; background:#1F2023; color:#fff; font-weight:600; font-size:4.3cqw}
.appscr .a-link{text-align:center; font-size:3.8cqw; margin-top:3.8cqw; color:#2C2523}
.appscr .a-card{margin:4cqw 4cqw 0; padding:4.4cqw 5cqw; border-radius:5.6cqw; background:#fff}
.appscr .a-seq p{display:flex; align-items:center; gap:1.6cqw; font-size:3.9cqw; color:#4A4540}
.appscr .a-seq b{font-family:var(--serif); font-size:6.6cqw; color:#1E1C1A}
.appscr .fl{color:#C2513F; font-size:5cqw}
.appscr .a-graca{margin-left:auto; display:inline-flex; align-items:center; gap:1.2cqw; padding:1.2cqw 3cqw; border-radius:99px; background:#F2CE8A; color:#3B2C10; font-size:3.2cqw; font-weight:600}
.appscr .a-dias{display:flex; justify-content:space-between; margin-top:4cqw}
.appscr .a-dias span{display:grid; justify-items:center; gap:1.6cqw; font-size:2.9cqw; color:#5D5852}
.appscr .a-dias i{width:8.6cqw; height:8.6cqw; border-radius:50%; border:.35cqw dashed #C9C0B6}
.appscr .a-dias .hj i{border:.6cqw solid #C2513F}
.appscr .a-tabs{position:absolute; left:3cqw; right:3cqw; bottom:6.5cqw; display:flex; justify-content:space-around; padding:3.2cqw 2cqw 2.8cqw; border-radius:8cqw; background:rgba(250,247,243,.96); box-shadow:0 2cqw 6cqw rgba(0,0,0,.08)}
.appscr .a-tabs span{display:grid; justify-items:center; gap:1.2cqw; font-size:3cqw; color:#5D5852}
.appscr .a-tabs .ai{font-size:5.6cqw}
.appscr .a-tabs .on{color:#1E1C1A; font-weight:700}
.appscr .a-seg{display:flex; margin:4.4cqw 4cqw 0; padding:1cqw; border-radius:99px; background:#E5DAD0}
.appscr .a-seg span{flex:1; text-align:center; padding:2.2cqw 0; border-radius:99px; font-size:3.9cqw; color:#5D5852}
.appscr .a-seg .on{background:#fff; color:#1E1C1A; font-weight:600}
.appscr .a-vazio{display:grid; justify-items:center; gap:3.4cqw; padding:13cqw 9cqw 0}
.appscr .a-quad{width:23cqw; height:23cqw; display:grid; place-items:center; background:#B0B9D3; color:#3C3833; font-size:8cqw}
.appscr .a-txt{font-size:4.25cqw; line-height:1.6; text-align:center; color:#4A4540}
.appscr .a-pad{padding:5cqw 4cqw 0}
.appscr .a-sub{padding:3cqw 4cqw 0; font-size:3.9cqw; color:#5D5852}
.appscr .a-quiz{margin:4.4cqw 4cqw 0; padding:5.5cqw; border-radius:6.4cqw; background:linear-gradient(180deg,#879BC0 0%,#B9A9B4 52%,#E7B799 100%)}
.appscr .a-quiz .a-cap{color:#2E2B33}
.appscr .a-quiz .a-h2{margin-top:2cqw}
.appscr .a-sm3{font-size:4cqw; color:#3E3A37; margin-top:1.4cqw}
.appscr .a-b{font-size:4.2cqw; font-weight:700; margin-top:3cqw}
.appscr .a-casa{display:flex; align-items:center; gap:3cqw; padding:5cqw 5.5cqw}
.appscr .a-casa > div{flex:1}
.appscr .a-casa .a-h2{margin-top:1.6cqw}
.appscr .ch{color:#5D5852; font-size:5cqw}
.appscr .a-qtop{position:relative; display:flex; align-items:center; justify-content:center; padding:4cqw 4cqw 0; font-size:4.1cqw; font-weight:600}
.appscr .a-qtop .ai{position:absolute; left:4.4cqw; font-size:5cqw}
.appscr .a-prog{height:.8cqw; margin:4.6cqw 4cqw 0; background:#DDD3C8; border-radius:9px; overflow:hidden}
.appscr .a-prog i{display:block; width:10%; height:100%; background:#1F2023}
.appscr .a-q{padding:2.6cqw 4cqw 0; font-family:var(--serif); font-weight:700; font-size:7.6cqw; line-height:1.15}
.appscr .a-ops{display:grid; gap:3.4cqw; padding:6cqw 4cqw 0}
.appscr .a-ops span{display:flex; align-items:center; height:13.4cqw; padding:0 5cqw; border-radius:99px; background:#fff; border:.5cqw solid #E2D8CC; font-size:4.1cqw}
.appscr .a-par{display:grid; justify-items:center; gap:4cqw; padding:4cqw 4cqw 0}
.appscr .a-quad2{width:40cqw; height:40cqw; display:flex; align-items:center; justify-content:center; background:#B0B9D3}
.appscr .a-quad2 .a-av{width:13.5cqw; height:13.5cqw; border-color:#fff; border-width:.6cqw}
.appscr .a-pad2{margin:4.6cqw 4cqw 0}
.appscr .a-btn2{display:flex; align-items:center; justify-content:center; height:13.6cqw; margin:3cqw 4cqw 0; border-radius:99px; background:#fff; font-weight:700; font-size:4.3cqw}
.appscr .a-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:3cqw; margin:4.6cqw 4cqw 0}
.appscr .a-stats span{display:grid; justify-items:center; gap:1cqw; padding:4cqw 1cqw; border-radius:5cqw; background:#fff; font-size:3.2cqw; text-align:center; color:#4A4540}
.appscr .a-stats b{font-family:var(--serif); font-size:6.8cqw; color:#1E1C1A}
.appscr .a-row{display:flex; align-items:center; gap:3.4cqw; margin-top:3cqw}
.appscr .a-row > div{flex:1}
.appscr .a-row .ai:first-child{font-size:4.6cqw}
.phones.real{align-items:flex-start}
.phones.real .devframe{flex:1 1 0; max-width:250px}
.phones.real .devframe.b{transform:translateY(28px)}
/* como funciona: celular que troca de tela + lista de etapas */
.tabsapp{display:grid; gap:24px; align-items:center}
.tabs-phone{width:min(250px, 66vw); margin:0 auto; perspective:1300px}
/* o celular um pouco de lado; ao trocar de etapa, ele balança e a tela nova entra deslizando */
.tabs-phone .devframe{transform:rotateY(-13deg) rotateX(5deg) rotateZ(2.5deg); transform-origin:50% 60%; box-shadow:0 2px 0 rgba(255,255,255,.08) inset, 28px 40px 60px -30px rgba(18,24,41,.75), 0 10px 22px -12px rgba(18,24,41,.35)}
.tabs-phone .devframe.swing{animation:swing .75s var(--ease)}
@keyframes swing{0%{transform:rotateY(-13deg) rotateX(5deg) rotateZ(2.5deg)} 30%{transform:rotateY(7deg) rotateX(2deg) rotateZ(-1.5deg) translateY(-8px) scale(1.02)} 62%{transform:rotateY(-17deg) rotateX(5deg) rotateZ(3.5deg)} 100%{transform:rotateY(-13deg) rotateX(5deg) rotateZ(2.5deg)}}
.tabs-phone .devframe .tela{transform:translateX(18px) scale(.985); transition:opacity .45s var(--ease), transform .55s var(--ease)}
.tabs-phone .devframe .tela.on{transform:none}
.tabs-list{display:grid; gap:4px}
.tabs-list button{display:block; width:100%; text-align:left; border:0; background:none; padding:12px 0 14px; border-bottom:1px solid var(--line); cursor:pointer}
.tabs-list .t{display:block; font-family:var(--serif); font-weight:600; font-size:clamp(21px,5.4vw,27px); line-height:1.15; color:rgba(31,36,51,.38); transition:color .25s}
.tabs-list .d{display:none; margin-top:6px; font-size:15.5px; line-height:1.5; color:var(--ink-2); max-width:46ch}
.tabs-list .bar{display:none; height:2px; margin-top:12px; background:var(--line); border-radius:2px; overflow:hidden}
.tabs-list .bar i{display:block; height:100%; width:0; background:var(--accent)}
.tabs-list button[aria-selected="true"] .t{color:var(--ink)}
.tabs-list button[aria-selected="true"] .d, .tabs-list button[aria-selected="true"] .bar{display:block}
.tabs-list button[aria-selected="true"] .bar i{width:100%}
.tabs-list button.run .bar i{width:0; animation:tabbar 6.5s linear forwards}
@keyframes tabbar{to{width:100%}}
.tabs-list button:hover .t{color:var(--ink-2)}
@media (min-width:860px){ .tabsapp{grid-template-columns:300px minmax(0,1fr); gap:56px} .tabs-phone{width:100%; max-width:290px} }
/* Casa na Rocha: a foto com movimento leve (zoom lento e chuva fina do lado da nuvem) */
.casa-foto{position:relative; overflow:hidden; border-radius:22px; box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.casa-foto img{display:block; width:100%; height:auto; animation:casaZoom 26s ease-in-out infinite alternate; transform-origin:45% 60%}
@keyframes casaZoom{from{transform:scale(1)} to{transform:scale(1.07)}}
.casa-foto .chuva{position:absolute; inset:0; pointer-events:none; opacity:.3;
  background:repeating-linear-gradient(103deg, rgba(220,230,255,0) 0 9px, rgba(220,230,255,.32) 9px 10px, rgba(220,230,255,0) 10px 23px);
  background-size:100% 160px; animation:chuvaCai .55s linear infinite;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 22%,transparent 50%); mask-image:linear-gradient(90deg,#000 0%,#000 22%,transparent 50%)}
@keyframes chuvaCai{from{background-position:0 0} to{background-position:-36px 160px}}
@media (min-width:860px){ .rocha-art{max-width:none} }
/* como funciona em etapas, com prints reais (português) */
.passos-app{list-style:none; counter-reset:pa; margin:0; padding:0; display:grid; gap:26px}
.passos-app li{counter-increment:pa; display:grid; grid-template-columns:clamp(124px,36vw,170px) minmax(0,1fr); gap:16px; align-items:center}
.passos-app .frame{position:relative; padding:5px; border-radius:24px; background:#121829; box-shadow:0 2px 0 rgba(255,255,255,.08) inset, 0 22px 40px -24px rgba(18,24,41,.7)}
.passos-app .frame::before{content:""; position:absolute; top:9px; left:50%; width:30%; height:11px; transform:translateX(-50%); border-radius:999px; background:#121829; z-index:2}
.passos-app .scrn{border-radius:20px; overflow:hidden; background:#EEE8E1; padding-top:20px}
.passos-app img{display:block; width:100%; height:auto}
.passos-app .txt::before{content:counter(pa); display:block; font-family:var(--serif); font-size:36px; line-height:1; font-weight:600; color:var(--gold-2); margin-bottom:6px}
.passos-app h3{font-family:var(--serif); font-size:clamp(20px,5.2vw,23px); line-height:1.15; font-weight:600}
.passos-app p{margin:6px 0 0; color:var(--ink-2); font-size:15.5px}
@media (min-width:860px){ .passos-app{grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px} .passos-app li{grid-template-columns:none; align-items:start} .passos-app .frame{max-width:230px; width:100%; margin:0 auto; border-radius:34px; padding:7px} .passos-app .frame::before{top:13px; height:15px} .passos-app .scrn{border-radius:28px; padding-top:30px} .passos-app .txt{padding-top:6px} }
/* prints reais do app em molduras de celular */
.shots{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 14px}
@media (min-width:860px){ .shots{grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px} }
.shot{margin:0}
.shot .frame{position:relative; max-width:250px; margin:0 auto; padding:clamp(5px,1.4vw,7px); border-radius:clamp(26px,7vw,36px); background:#121829; box-shadow:0 2px 0 rgba(255,255,255,.08) inset, 0 26px 50px -26px rgba(18,24,41,.7)}
.shot .frame::before{content:""; position:absolute; top:clamp(10px,2.6vw,14px); left:50%; width:30%; height:clamp(11px,3vw,16px); transform:translateX(-50%); border-radius:999px; background:#121829; z-index:2}
.shot .scrn{border-radius:clamp(21px,5.8vw,30px); overflow:hidden; background:#EEE8E1; padding-top:clamp(22px,6vw,32px)}
.shot img{display:block; width:100%; height:auto}
.shot figcaption{margin:12px auto 0; max-width:250px; text-align:center; font-size:14.5px; line-height:1.4; color:var(--ink-2)}
/* planos: só a existência dos dois (decisão da dona) */
.planos{display:grid; gap:12px}
@media (min-width:760px){ .planos{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px} }
.plano{display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border-radius:var(--r-lg); background:var(--card); border:1px solid var(--line)}
.plano > .i{color:var(--accent); margin-top:3px}
.plano h3{font-family:var(--serif); font-size:22px; font-weight:600}
.plano p{margin:4px 0 0; color:var(--ink-2); font-size:15.5px}
/* depois da compra */
.after h2{font-size:clamp(25px, 6vw, 32px)}
.after-steps{margin:14px 0 0; padding-left:22px; display:grid; gap:6px; color:var(--ink-2)}
/* CTA final com a foto do casal */
.final{text-align:left}
.final-card{display:grid; overflow:hidden; border-radius:28px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-2)}
.final-card img{display:block; width:100%; height:100%; max-height:300px; object-fit:cover; object-position:50% 45%}
.final-txt{padding:26px 22px 30px}
.final-txt h2{margin-top:10px}
.final-txt .verse{margin:12px 0 0}
.final-txt .cta{margin-top:20px; width:100%; max-width:420px}
@media (min-width:640px){ .final-txt .cta{width:auto} }
@media (min-width:860px){ .final-card{grid-template-columns:1fr 1fr; align-items:center} .final-card img{max-height:none; aspect-ratio:auto; min-height:460px} .final-txt{padding:40px 44px} }

/* ---------- páginas legais e de suporte ---------- */
.doc{padding:28px 0 56px}
.doc .paper{background:var(--card); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-1); padding:24px 20px}
@media (min-width:760px){ .doc .paper{padding:40px 48px} }
@media (max-width:420px){ .doc .paper{padding:20px 14px; border-radius:18px} }
.doc h1{font-size:clamp(32px, 8vw, 46px); line-height:1.06}
.doc .meta{margin:10px 0 0; color:var(--ink-3); font-size:14px}
.doc h2{font-size:clamp(23px, 5.4vw, 28px); margin:36px 0 10px}
.doc h3{font-size:17px; margin:20px 0 6px}
.doc h2 .i{display:inline-block; vertical-align:-3px; margin-right:4px; color:var(--accent)}
.doc .lead{margin-left:0}
.doc .nums .num{min-height:52px}
.langnote .i{flex:none}
.doc p, .doc li{color:var(--ink-2); font-size:16px}
.doc li{margin:4px 0}
.doc ul, .doc ol{padding-left:22px}
.doc strong{color:var(--ink)}
.langnote{display:flex; gap:10px; align-items:center; margin:0 0 18px; padding:10px 14px; border-radius:12px; background:var(--gold-soft); color:var(--gold-ink); font-size:14.5px; font-weight:600}
.summary{margin:20px 0 8px; padding:16px 18px; border-radius:16px; background:var(--accent-soft); border:1px solid rgba(36,52,94,.12)}
.summary h2{margin:0 0 8px; font-size:20px}
.summary ul{margin:0; padding-left:20px}
.toc{margin:18px 0 0; padding:14px 18px; border-radius:16px; border:1px solid var(--line); background:var(--paper-2)}
.toc b{display:block; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
.toc ol{margin:0; padding-left:22px; columns:1}
@media (min-width:760px){ .toc ol{columns:2; column-gap:32px} }
.toc li{break-inside:avoid; font-size:15px}
.toc li{line-height:1.45; padding:3px 0}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
.tbl{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:10px 0; border:1px solid var(--line); border-radius:12px}
.tbl table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:560px}
.tbl th, .tbl td{text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--line-2); color:var(--ink-2)}
.tbl th{background:var(--paper-2); color:var(--ink); font-weight:700}
.tbl tr:last-child td{border-bottom:0}
.ph-t{background:var(--gold-soft); color:var(--gold-ink); padding:0 4px; border-radius:4px; font-weight:600}
.backtop{margin-top:28px; font-size:15px}

/* ---------- rodapé ---------- */
.foot{margin-top:24px; padding:40px 0 calc(28px + env(safe-area-inset-bottom,0px)); background:rgba(255,253,250,.9); border-top:1px solid var(--line)}
.foot .cols{display:grid; gap:22px}
@media (min-width:860px){ .foot .cols{grid-template-columns:1.3fr 1fr 1fr} }
.foot .tl{margin:8px 0 0; color:var(--ink-2); font-size:15px}
.foot h4{margin:0 0 6px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.foot ul{list-style:none; margin:0; padding:0}
.foot li a, .foot li button{display:inline-flex; align-items:center; min-height:40px; color:var(--ink); font-weight:600; font-size:15px; text-decoration:none; border:0; background:none; padding:0; text-align:left}
.foot li a:hover, .foot li button:hover{text-decoration:underline}
.foot .co{margin-top:24px; padding-top:18px; border-top:1px solid var(--line-2); display:grid; gap:6px; font-size:14px; color:var(--ink-2)}
.foot .co p{margin:0}
.foot .crisis{font-weight:700; color:var(--ink)}
.foot .crisis a{color:inherit}

/* ---------- banner de cookies ---------- */
.cookie{position:fixed; left:0; right:0; bottom:0; z-index:40; padding:0 var(--gut-r) calc(12px + env(safe-area-inset-bottom,0px)) var(--gut); pointer-events:none}
.cookie .box{pointer-events:auto; max-width:760px; margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-2); padding:16px 18px}
.cookie p{margin:0; font-size:14.5px; color:var(--ink-2)}
.cookie .row{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px}
.cookie .row .wide{grid-column:1/-1}
@media (min-width:640px){ .cookie .row.r3{grid-template-columns:auto 1fr 1fr} .cookie .row .wide{grid-column:auto} }
.cookie .linkbtn{min-height:0; font-size:inherit; padding:0; border-radius:0; font-weight:700}
@media (max-width:639px){ .cookie .box{padding:12px 14px} .cookie p{font-size:13.5px} .cookie button{min-height:44px} }
.cookie button{min-height:46px; border-radius:12px; font-weight:700; font-size:15px; padding:0 14px}
.cookie .acc, .cookie .rej{border:0; background:var(--accent); color:#fff}
.cookie .pref{border:1px solid var(--line); background:#fff; color:var(--accent)}
.cookie .opts{display:grid; gap:8px; margin-top:12px}
.cookie label{display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:12px; font-size:14.5px; color:var(--ink-2)}
.cookie label b{color:var(--ink); display:block}
.cookie input{width:22px; height:22px; margin:2px 0 0; accent-color:var(--accent); flex:none}

/* aparece ao rolar (só quando o JavaScript liga a classe js-rev) */
.js-rev [data-rev]{opacity:0; transform:translateY(24px); transition:opacity .75s var(--ease), transform .75s var(--ease)}
.js-rev [data-rev].vis{opacity:1; transform:none}
.js-rev .tabs-phone[data-rev]{transform:translateY(24px)}
.js-rev .tabs-phone[data-rev].vis{transform:none}
.phones .devframe, .phones .fone{will-change:transform}
@media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important; animation-iteration-count:1!important; transition:none!important; scroll-behavior:auto!important} .sky i, .sky .sun{animation:none!important} }

/* --- site estático: troca de idioma como links (mesma aparência dos botões) --- */
.lang a{min-width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; border-radius:999px; font-size:13px; font-weight:700; color:var(--ink-3); letter-spacing:.03em; text-decoration:none}
.lang a[aria-pressed="true"]{background:var(--accent); color:#fff}

/* --- preços nos planos do institucional (site estático) --- */
.plano .preco{margin:10px 0 0; font-size:15px; color:var(--ink); font-weight:600}
.plano .preco s{color:var(--ink-3); font-weight:500; margin-right:4px}
.plano .preco b{color:var(--accent); font-size:17px}
.plano .preco-sub{margin:4px 0 0; font-size:13px; color:var(--ink-3); line-height:1.45}
.planos-nota{grid-column:1 / -1; margin:16px 0 0; font-size:13.5px; color:var(--ink-3); line-height:1.5}

/* --- ferramentas grátis --- */
.toolcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;margin:18px 0;box-shadow:var(--shadow-1)}
.toolcard.gold{background:var(--gold-soft);border-color:rgba(217,169,74,.35)}
.tool-verse{font-family:var(--serif);font-size:23px;line-height:1.42;color:var(--ink);margin:0 0 8px}
.tool-cite{font-size:14px;color:var(--ink-3);font-weight:600}
.toolbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.toolbtn{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--accent);background:var(--accent);color:#fff;font-weight:700;font-size:14px;cursor:pointer}
.toolbtn.ghost{background:transparent;color:var(--accent)}
.plan-row{display:flex;gap:12px;align-items:flex-start;padding:10px 4px;border-bottom:1px solid var(--line-2)}
.plan-row input{width:22px;height:22px;margin-top:2px;accent-color:var(--accent);flex:none}
.plan-row b{color:var(--ink)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:var(--glass);padding:2px;margin-bottom:8px}
.seg button{min-width:64px;height:38px;border:0;background:transparent;border-radius:999px;font-weight:700;font-size:14px;color:var(--ink-3);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
@media print{.top,.foot,.cookie,.crumbs,.guide-cta,.toolbtns,.seg{display:none!important} .sky{display:none}}

/* --- índice de guias --- */
.guidelist{list-style:none;padding:0;margin:8px 0 24px;display:grid;gap:12px}
.guidelist a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none;box-shadow:var(--shadow-1);transition:border-color .2s}
.guidelist a:hover{border-color:var(--accent-line)}
.guidelist b{display:block;color:var(--accent);font-size:16px;margin-bottom:2px}
.guidelist span{display:block;color:var(--ink-3);font-size:14px;line-height:1.45}
.paper .crumbs a{text-decoration:none}