:root {
  --navy-950:#041225;
  --navy-900:#071b36;
  --navy-850:#0a2344;
  --navy-800:#0c2b52;
  --navy-700:#123b6e;
  --blue-500:#2f74c8;
  --gold-500:#e7b64b;
  --gold-400:#f4c45b;
  --gold-300:#f8d982;
  --red-500:#e2292f;
  --ink:#10213b;
  --muted:#617089;
  --line:#dfe6ef;
  --surface:#ffffff;
  --surface-2:#f5f7fb;
  --surface-3:#eef2f7;
  --success:#25a769;
  --shadow-sm:0 10px 30px rgba(8,30,60,.08);
  --shadow-md:0 24px 70px rgba(8,30,60,.16);
  --shadow-lg:0 34px 90px rgba(1,11,28,.32);
  --radius-sm:12px;
  --radius-md:20px;
  --radius-lg:32px;
  --container:1180px;
  --header-h:78px;
  --font-sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif:Georgia, "Times New Roman", serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);color:var(--ink);background:var(--surface);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
::selection{background:var(--gold-300);color:var(--navy-950)}
.container{width:min(calc(100% - 40px),var(--container));margin-inline:auto}
.section{padding:112px 0}
.section--dark{background:var(--navy-950);color:white}
.section--light{background:var(--surface-2)}
.section--navy{background:var(--navy-900);color:white}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:12px;left:12px;z-index:9999;padding:12px 18px;border-radius:10px;background:white;color:var(--navy-950);transform:translateY(-150%);transition:.2s}
.skip-link:focus{transform:translateY(0)}

.topbar{background:var(--gold-400);color:var(--navy-950);font-size:.82rem;font-weight:600}
.topbar__inner{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.topbar a{font-weight:800}

.site-header{height:var(--header-h);position:sticky;top:0;z-index:100;background:rgba(4,18,37,.96);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08);transition:box-shadow .25s,background .25s}
.site-header.is-scrolled{box-shadow:0 12px 38px rgba(2,12,28,.28);background:rgba(4,18,37,.985)}
.nav-wrap{height:100%;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:14px;min-width:max-content;color:white}
.brand img{width:142px;height:auto}
.brand__divider{width:1px;height:30px;background:rgba(255,255,255,.18)}
.brand__product{font-size:.83rem;font-weight:800;text-transform:uppercase;letter-spacing:.13em;color:var(--gold-300)}
.main-nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.main-nav a{color:rgba(255,255,255,.75);font-size:.92rem;font-weight:650;transition:.2s}
.main-nav a:hover,.main-nav a:focus-visible{color:white}
.nav-actions{display:flex;align-items:center;gap:12px}
.link-button{color:white;font-weight:700;font-size:.92rem;padding:10px 6px}
.menu-toggle{display:none;border:0;background:transparent;width:42px;height:42px;border-radius:10px;padding:9px;margin-left:auto}
.menu-toggle span:not(.sr-only){display:block;height:2px;background:white;margin:5px 0;border-radius:2px;transition:.2s}

.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:1px solid transparent;border-radius:12px;background:var(--navy-800);color:white;font-weight:800;letter-spacing:-.01em;box-shadow:0 8px 24px rgba(8,41,79,.16);transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
.button:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(8,41,79,.24)}
.button:focus-visible,.demo-tab:focus-visible,.menu-toggle:focus-visible,summary:focus-visible,input:focus-visible,.preview-toolbar button:focus-visible{outline:3px solid rgba(244,196,91,.55);outline-offset:3px}
.button--small{min-height:42px;padding:0 18px;font-size:.9rem;border-radius:10px;background:var(--gold-400);color:var(--navy-950)}
.button--gold{background:var(--gold-400);color:var(--navy-950);box-shadow:0 12px 34px rgba(231,182,75,.2)}
.button--gold:hover{background:var(--gold-300);box-shadow:0 15px 38px rgba(231,182,75,.3)}
.button--ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16);box-shadow:none}
.button--ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.25)}
.button--ghost svg{width:18px;height:18px;fill:currentColor}
.button--secondary{background:white;color:var(--navy-900);border-color:var(--line);box-shadow:none}
.button--full{width:100%}
.text-link{display:inline-flex;align-items:center;gap:8px;color:var(--navy-800);font-weight:800;border-bottom:1px solid rgba(12,43,82,.25);padding-bottom:3px}
.text-link:hover{border-color:var(--navy-800)}

.eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;color:var(--gold-300);font-size:.78rem;font-weight:850;text-transform:uppercase;letter-spacing:.13em}
.eyebrow--light{color:var(--navy-700)}
.status-dot{width:8px;height:8px;border-radius:50%;background:#53d890;box-shadow:0 0 0 5px rgba(83,216,144,.12)}
.section-heading{max-width:670px;margin-bottom:54px}
.section-heading--center{text-align:center;margin-inline:auto;margin-bottom:62px}
.section-heading h2,.demo-copy h2,.faq-intro h2,.product-showcase__content h2,.preview-copy h2,.content-intro h2{margin:0 0 18px;font-size:clamp(2.15rem,4vw,3.45rem);line-height:1.07;letter-spacing:-.045em}
.section-heading p,.demo-copy>p,.faq-intro>p,.product-showcase__content>p,.preview-copy>p,.content-intro>p{font-size:1.08rem;color:var(--muted);margin:0;max-width:640px}
.section--navy .section-heading p,.section--navy .preview-copy>p{color:rgba(255,255,255,.68)}

.hero{position:relative;overflow:hidden;min-height:690px}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,18,37,1) 0%,rgba(4,18,37,.97) 44%,rgba(4,18,37,.72) 100%),radial-gradient(circle at 75% 30%,rgba(27,76,132,.55),transparent 45%)}
.hero::after{content:"";position:absolute;inset:0;opacity:.08;background-image:linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to right,transparent,black)}
.hero__glow{position:absolute;width:520px;height:520px;border-radius:50%;right:6%;top:7%;background:rgba(25,88,158,.28);filter:blur(90px)}
.hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:58px;align-items:center;min-height:690px;padding-top:58px;padding-bottom:68px}
.hero__content{max-width:680px}
.hero h1{font-size:clamp(3.15rem,6vw,5.25rem);line-height:.98;letter-spacing:-.062em;margin:0 0 26px;font-weight:860}
.hero h1 span{color:var(--gold-400)}
.hero__lead{font-size:1.16rem;line-height:1.7;color:rgba(255,255,255,.72);max-width:640px;margin:0 0 34px}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:38px}
.hero__proof{display:flex;gap:0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);max-width:620px;margin-bottom:18px}
.hero__proof>div{padding:20px 28px 20px 0;display:flex;flex-direction:column;min-width:150px}
.hero__proof>div+div{border-left:1px solid rgba(255,255,255,.12);padding-left:28px}
.hero__proof strong{font-size:1.35rem;color:white;letter-spacing:-.03em}
.hero__proof span{font-size:.78rem;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.07em}
.microcopy{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.55);font-size:.84rem;margin:0}
.microcopy svg{width:18px;height:18px;fill:#63d79a;flex:0 0 auto}
.hero__visual{position:relative;min-height:555px;display:grid;place-items:center}
.book-stage{position:relative;width:min(100%,470px);height:570px;display:grid;place-items:center}
.book-halo{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(244,196,91,.24),rgba(40,104,177,.2) 45%,transparent 70%);filter:blur(6px)}
.book-cover{position:relative;z-index:2;width:365px;height:auto;max-height:570px;object-fit:contain;filter:drop-shadow(0 38px 45px rgba(0,0,0,.48));transform:rotate(2deg)}
.float-card{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid rgba(255,255,255,.15);background:rgba(8,30,60,.84);backdrop-filter:blur(16px);border-radius:14px;box-shadow:0 18px 46px rgba(0,0,0,.28)}
.float-card--top{right:-2px;top:96px}
.float-card--bottom{left:-18px;bottom:78px}
.float-card__icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(244,196,91,.14);color:var(--gold-400);font-weight:900}
.float-card div{display:flex;flex-direction:column}
.float-card strong{font-size:.87rem}
.float-card small{font-size:.7rem;color:rgba(255,255,255,.57)}

.trust-strip{background:white;border-bottom:1px solid var(--line)}
.trust-strip__grid{display:grid;grid-template-columns:repeat(4,1fr);min-height:116px}
.trust-strip__grid>div{display:flex;align-items:center;gap:14px;padding:24px 28px}
.trust-strip__grid>div+div{border-left:1px solid var(--line)}
.trust-strip__grid div div{display:flex;flex-direction:column}
.trust-strip strong{font-size:.93rem}
.trust-strip small{font-size:.78rem;color:var(--muted)}
.icon-badge{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#eef4fb;color:var(--navy-700);font-size:1.18rem}

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature-card{position:relative;min-height:302px;padding:30px;border:1px solid var(--line);border-radius:var(--radius-md);background:white;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s,border-color .25s}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:#cbd7e6}
.feature-card__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;margin-bottom:24px;background:var(--navy-900);color:var(--gold-400);font-size:1.3rem;font-weight:900}
.feature-card h3{font-size:1.22rem;line-height:1.28;margin:0 0 12px;letter-spacing:-.025em}
.feature-card p{font-size:.95rem;color:var(--muted);margin:0 0 22px}
.feature-card__tag{position:absolute;left:30px;bottom:26px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--navy-700);background:#edf3fa;border-radius:99px;padding:6px 10px}

.demo-section{background:white;overflow:hidden}
.demo-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:70px;align-items:center}
.demo-copy{max-width:440px}
.demo-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:30px 0 24px}
.demo-tab{border:1px solid var(--line);background:white;color:var(--muted);border-radius:999px;padding:8px 13px;font-size:.78rem;font-weight:800}
.demo-tab.is-active{background:var(--navy-900);border-color:var(--navy-900);color:white}
.demo-description{min-height:144px}
.demo-description h3{font-size:1.18rem;margin:0 0 8px}
.demo-description p{color:var(--muted);margin:0 0 28px}
.app-window{border:1px solid #ccd7e5;border-radius:20px;overflow:hidden;background:#e9eef5;box-shadow:0 34px 90px rgba(6,31,64,.19);transform:perspective(1200px) rotateY(-1deg)}
.app-window__top{height:54px;display:grid;grid-template-columns:100px 1fr 100px;align-items:center;padding:0 16px;background:var(--navy-900);color:white}
.window-dots{display:flex;gap:6px}.window-dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35)}
.app-window__title{text-align:center;font-size:.75rem;font-weight:800}
.app-window__timer{text-align:right;color:var(--gold-300);font-size:.72rem;font-variant-numeric:tabular-nums}
.app-shell{display:grid;grid-template-columns:190px 1fr;min-height:520px}
.app-sidebar{background:#f6f8fb;border-right:1px solid #dfe5ed;padding:22px 14px;display:flex;flex-direction:column;gap:6px}
.app-sidebar__label{font-size:.62rem;color:#8a98ab;font-weight:850;letter-spacing:.12em;padding:0 10px 7px}
.app-sidebar button{border:0;background:transparent;text-align:left;padding:10px;border-radius:8px;color:#65748a;font-size:.72rem}
.app-sidebar button.is-active{background:#e3ebf5;color:var(--navy-900);font-weight:800}
.progress-card{margin-top:auto;background:var(--navy-900);color:white;border-radius:12px;padding:14px}
.progress-card span{font-size:.62rem;color:rgba(255,255,255,.6)}
.progress-card strong{display:block;margin:3px 0 8px}
.progress-card>div{height:5px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden}
.progress-card i{display:block;height:100%;background:var(--gold-400);border-radius:99px}
.reader{background:#eef2f7;overflow:hidden}
.reader__toolbar{height:48px;background:white;border-bottom:1px solid #dfe5ed;display:flex;align-items:center;gap:6px;padding:0 12px}
.reader__toolbar button{border:1px solid #d9e0e9;background:white;color:#425168;border-radius:7px;height:30px;padding:0 9px;font-size:.65rem;font-weight:750}
.reader__toolbar>span{width:1px;height:20px;background:#d9e0e9;margin:0 4px}
.reader__toolbar .marker{width:24px;padding:0}.marker--yellow{background:#ffe88a}.marker--blue{background:#a7d9ff}.marker--pink{background:#ffc1db}
.reader__paper{background:white;width:86%;min-height:420px;margin:24px auto;padding:34px 44px;box-shadow:0 8px 30px rgba(16,33,59,.1);font-family:var(--font-serif);color:#1d2939;font-size:.76rem;line-height:1.75}
.reader__law{display:block;text-align:center;font-family:var(--font-sans);font-size:.55rem;letter-spacing:.09em;color:#6c7788}
.reader__paper h3{text-align:center;font-size:.85rem;margin:18px 0 2px}.reader__paper h4{text-align:center;margin:0 0 20px;font-weight:500}
.reader__paper p{margin:8px 0}.reader__paper mark{background:#ffe68a;padding:2px}.underlined{text-decoration:underline 2px #4a9fe8;text-underline-offset:3px}
.note-card{font-family:var(--font-sans);display:flex;flex-direction:column;background:#fff6cf;border-left:3px solid var(--gold-500);padding:10px 12px;margin-top:16px;border-radius:0 7px 7px 0;font-size:.62rem}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.step{padding:34px 28px 34px 0;display:flex;gap:18px}
.step+.step{border-left:1px solid rgba(255,255,255,.12);padding-left:28px}
.step>span{font-size:.72rem;font-weight:900;color:var(--gold-400);padding-top:4px}
.step h3{font-size:1rem;margin:0 0 7px}.step p{font-size:.84rem;color:rgba(255,255,255,.58);margin:0}

.product-section{background:#f1f4f8}
.product-showcase{display:grid;grid-template-columns:.78fr 1.22fr;align-items:center;background:white;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.product-showcase__image{align-self:stretch;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#214d80,#071b36 68%);min-height:630px;padding:48px;position:relative;overflow:hidden}
.product-showcase__image::after{content:"";position:absolute;inset:0;opacity:.08;background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);background-size:40px 40px}
.product-showcase__image img{position:relative;z-index:1;width:310px;filter:drop-shadow(0 26px 32px rgba(0,0,0,.46));transform:rotate(-1.5deg)}
.product-showcase__content{padding:68px 72px}
.product-showcase__content h2{font-size:clamp(2.3rem,4vw,3.65rem)}
.product-facts{display:flex;flex-wrap:wrap;gap:9px;margin:28px 0}
.product-facts span{font-size:.78rem;font-weight:800;color:var(--navy-700);background:#edf3fa;padding:8px 12px;border-radius:999px}
.check-list{list-style:none;padding:0;margin:26px 0;display:grid;gap:11px}
.check-list li{position:relative;padding-left:29px;color:#44536a}
.check-list li::before{content:"✓";position:absolute;left:0;top:0;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e2f6ec;color:var(--success);font-size:.72rem;font-weight:900}
.check-list--light li{color:rgba(255,255,255,.72)}
.check-list--light li::before{background:rgba(83,216,144,.14);color:#63d79a}
.price-line{display:flex;align-items:end;justify-content:space-between;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:30px 0}
.price-line>div{display:flex;flex-direction:column}.price-line small{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.68rem}.price-line strong{font-size:2.2rem;letter-spacing:-.04em;color:var(--navy-900)}
.price-line>span{font-size:.74rem;font-weight:800;color:var(--success);background:#e7f8ef;padding:7px 10px;border-radius:99px}
.product-showcase__actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}

.testimonials-section{background:white}

.testimonial{margin:0;padding:28px;border:1px solid var(--line);border-radius:var(--radius-md);background:white;box-shadow:var(--shadow-sm)}
.quote-mark{font-family:var(--font-serif);font-size:4rem;line-height:.7;color:var(--gold-500)}
.testimonial p{font-size:1.02rem;line-height:1.65;color:#34445b;min-height:106px}
.testimonial footer{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:17px}
.testimonial footer strong{font-size:.9rem}.testimonial footer span{font-size:.73rem;color:var(--muted)}

.faq-section{background:var(--surface-2)}
.faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:80px;align-items:start}
.faq-intro{position:sticky;top:125px}
.faq-intro .text-link{margin-top:28px}
.accordion{background:white;border:1px solid var(--line);border-radius:var(--radius-md);padding:0 26px}
.accordion details+details{border-top:1px solid var(--line)}
.accordion summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px 0;font-weight:800;cursor:pointer}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"+";font-size:1.35rem;font-weight:500;color:var(--navy-700);transition:.2s}
.accordion details[open] summary::after{transform:rotate(45deg)}
.accordion p{margin:-8px 0 24px;color:var(--muted);font-size:.93rem;padding-right:28px}

.final-cta{padding:84px 0;position:relative;overflow:hidden}
.final-cta::after{content:"";position:absolute;right:-8%;top:-90%;width:500px;height:500px;border-radius:50%;background:rgba(43,109,183,.28);filter:blur(80px)}
.final-cta__inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:40px}
.final-cta h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;letter-spacing:-.045em;max-width:780px;margin:0}
.final-cta .eyebrow{margin-bottom:15px}

.site-footer{background:#020b17;color:white;padding:72px 0 24px}
.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:50px;padding-bottom:58px}
.footer-brand img{width:176px}.footer-brand p{color:rgba(255,255,255,.5);font-size:.85rem;max-width:310px}
.footer-grid>div:not(.footer-brand){display:flex;flex-direction:column;gap:11px}
.footer-grid strong{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--gold-300);margin-bottom:6px}
.footer-grid a{color:rgba(255,255,255,.56);font-size:.85rem}.footer-grid a:hover{color:white}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;justify-content:space-between;gap:20px;color:rgba(255,255,255,.38);font-size:.72rem}
.back-to-top{position:fixed;z-index:80;left:22px;bottom:22px;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:var(--navy-900);color:white;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transform:translateY(10px);transition:.2s}
.back-to-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}

/* Product detail */
.product-hero{position:relative;overflow:hidden}
.product-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 32%,rgba(32,92,160,.52),transparent 42%),linear-gradient(135deg,#041225,#071b36 64%,#0b2b52)}
.product-hero__grid{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center;padding-top:76px;padding-bottom:92px}
.product-hero__image{display:grid;place-items:center}
.product-cover-panel{position:relative;width:min(100%,460px);padding:50px;border:1px solid rgba(255,255,255,.1);border-radius:28px;background:rgba(255,255,255,.04);box-shadow:var(--shadow-lg)}
.product-cover-panel::before{content:"";position:absolute;inset:12%;border-radius:50%;background:rgba(244,196,91,.14);filter:blur(50px)}
.product-cover-panel img{position:relative;width:100%;max-height:600px;object-fit:contain;filter:drop-shadow(0 30px 34px rgba(0,0,0,.45))}
.product-cover-panel__badge{position:absolute;left:24px;top:24px;background:var(--gold-400);color:var(--navy-950);font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding:8px 10px;border-radius:9px}
.product-hero__content{color:white;max-width:650px}
.back-link{display:inline-flex;color:rgba(255,255,255,.58);font-size:.82rem;font-weight:750;margin-bottom:28px}.back-link:hover{color:white}
.product-hero h1{font-size:clamp(3rem,6vw,5.15rem);line-height:.96;letter-spacing:-.06em;margin:0 0 22px}.product-hero h1 span{color:var(--gold-400)}
.product-hero__content>p{font-size:1.12rem;color:rgba(255,255,255,.68);margin:0 0 24px;max-width:590px}
.product-hero__facts{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 26px}
.product-hero__facts span{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.04);padding:8px 11px;border-radius:99px;color:rgba(255,255,255,.7);font-size:.78rem}.product-hero__facts strong{color:white}
.offer-card{background:white;color:var(--ink);border-radius:20px;padding:25px;box-shadow:0 24px 64px rgba(0,0,0,.28);max-width:520px}
.offer-card__price{display:grid;grid-template-columns:1fr auto;align-items:end;padding-bottom:16px;border-bottom:1px solid var(--line)}
.offer-card__price small{grid-column:1;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:.66rem}.offer-card__price strong{grid-column:1;font-size:2.45rem;color:var(--navy-900);line-height:1.08;letter-spacing:-.045em}.offer-card__price span{grid-row:1/3;grid-column:2;color:var(--success);font-size:.72rem;font-weight:800;background:#e8f8ef;padding:6px 9px;border-radius:99px;align-self:center}
.offer-card ul{list-style:none;padding:0;margin:17px 0;display:grid;gap:8px}.offer-card li{font-size:.84rem;color:#45546a;padding-left:22px;position:relative}.offer-card li::before{content:"✓";position:absolute;left:0;color:var(--success);font-weight:900}
.offer-card .button+.button{margin-top:9px}.offer-card .button--ghost{color:var(--navy-900);border-color:var(--line);background:white}.offer-card>p{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:.7rem;margin:13px 0 0}.offer-card>p svg{width:15px;fill:var(--success)}
.mini-benefits{background:white;border-bottom:1px solid var(--line)}
.mini-benefits__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.mini-benefits__grid>div{display:flex;align-items:center;justify-content:center;gap:12px;padding:27px 18px;font-size:1.2rem;color:var(--navy-700)}
.mini-benefits__grid>div+div{border-left:1px solid var(--line)}
.mini-benefits span{display:flex;flex-direction:column}.mini-benefits strong{font-size:.84rem;color:var(--ink)}.mini-benefits small{font-size:.7rem;color:var(--muted)}
.content-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:80px;align-items:start}
.content-intro{position:sticky;top:125px}
.search-field{height:52px;margin-top:28px;background:white;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;gap:10px;padding:0 14px;box-shadow:var(--shadow-sm)}
.search-field svg{width:20px;fill:#8190a5}.search-field input{border:0;outline:0;width:100%;background:transparent;color:var(--ink)}
.law-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.law-list li{display:flex;align-items:center;gap:14px;padding:16px;background:white;border:1px solid var(--line);border-radius:13px;min-height:76px;transition:.2s}
.law-list li:hover{border-color:#bdcadb;box-shadow:var(--shadow-sm)}
.law-list li>span{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:9px;background:#edf3fa;color:var(--navy-700);font-size:.68rem;font-weight:900}
.law-list li>div{display:flex;flex-direction:column}.law-list strong{font-size:.84rem;line-height:1.25}.law-list small{font-size:.68rem;color:var(--muted);margin-top:3px}.law-list__empty{grid-column:1/-1!important;justify-content:center;color:var(--muted)}
.tools-section{background:white}
.tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tool-card{padding:26px;border:1px solid var(--line);border-radius:17px;background:white;min-height:218px}
.tool-card>span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--navy-900);color:var(--gold-400);font-weight:900;margin-bottom:20px}
.tool-card h3{font-size:1rem;line-height:1.3;margin:0 0 9px}.tool-card p{font-size:.83rem;color:var(--muted);margin:0}
.preview-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:70px;align-items:center}
.preview-copy{max-width:430px}
.preview-card{background:#e8edf4;border:1px solid rgba(255,255,255,.16);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);color:var(--ink)}
.preview-card__header{height:54px;background:#0d284d;color:white;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:0 18px;font-size:.75rem;font-weight:800}
.preview-progress{height:5px;background:rgba(255,255,255,.15);border-radius:99px;overflow:hidden}.preview-progress i{display:block;height:100%;background:var(--gold-400)}
.preview-toolbar{height:50px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px;padding:0 14px}.preview-toolbar button{height:31px;border:1px solid var(--line);background:white;border-radius:8px;color:#526177;font-size:.7rem;font-weight:750;padding:0 10px}.preview-toolbar button:hover{background:#f4f7fa}
.preview-paper{width:86%;min-height:330px;margin:26px auto;padding:38px 44px;background:white;box-shadow:0 8px 24px rgba(16,33,59,.1);font-family:var(--font-serif);line-height:1.9}.preview-paper small{font-family:var(--font-sans);color:#7f8b9c;font-size:.58rem;letter-spacing:.09em}.preview-paper h3{font-size:1.25rem;line-height:1.25}.preview-paper p{transition:.2s}.preview-paper p.is-highlighted{background:linear-gradient(transparent 58%,#ffe27b 58%)}.preview-paper p.is-underlined{text-decoration:underline 3px #5da8e6;text-underline-offset:5px}.preview-paper p.is-hidden{background:#26374d;color:transparent;border-radius:4px;user-select:none}
.preview-note{font-family:var(--font-sans);display:flex;flex-direction:column;background:#fff7d9;border-left:3px solid var(--gold-500);padding:12px 14px;font-size:.72rem;border-radius:0 8px 8px 0}.preview-note span{color:#58667a}
.preview-card__footer{height:46px;background:white;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 16px;color:var(--muted);font-size:.68rem}.preview-card__footer button{border:0;background:transparent;color:var(--navy-700);font-weight:800}
.sticky-purchase{position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(4,18,37,.97);backdrop-filter:blur(18px);color:white;border-top:1px solid rgba(255,255,255,.12);transform:translateY(110%);transition:.25s}
.sticky-purchase.is-visible{transform:translateY(0)}
.sticky-purchase__inner{min-height:72px;display:flex;justify-content:space-between;align-items:center;gap:20px}.sticky-purchase__inner>div{display:flex;align-items:center;gap:18px}.sticky-purchase__inner>div:first-child{flex-direction:column;align-items:flex-start;gap:0}.sticky-purchase__inner span{color:rgba(255,255,255,.55);font-size:.72rem}.sticky-purchase__inner>div:last-child>strong{font-size:1.25rem;color:var(--gold-300)}

/* Auth */
.auth-page{min-height:100vh;background:var(--surface-2)}
.auth-layout{min-height:100vh;display:grid;grid-template-columns:.86fr 1.14fr}
.auth-brand-panel{position:relative;overflow:hidden;background:radial-gradient(circle at 60% 30%,#164a83,transparent 42%),linear-gradient(145deg,#041225,#071b36);color:white;padding:48px 7vw;display:flex;flex-direction:column}
.auth-brand-panel::after{content:"";position:absolute;right:-120px;bottom:-170px;width:500px;height:500px;border:1px solid rgba(244,196,91,.18);border-radius:50%;box-shadow:0 0 0 60px rgba(244,196,91,.035),0 0 0 120px rgba(244,196,91,.025)}
.auth-brand-panel--signup{background:radial-gradient(circle at 28% 62%,#164a83,transparent 46%),linear-gradient(145deg,#041225,#071b36)}
.auth-logo{position:relative;z-index:1}.auth-logo img{width:184px}
.auth-brand-copy{position:relative;z-index:1;margin:auto 0;max-width:540px}.auth-brand-copy h1{font-size:clamp(2.8rem,5vw,4.8rem);line-height:1;letter-spacing:-.055em;margin:0 0 24px}.auth-brand-copy>p{font-size:1.08rem;color:rgba(255,255,255,.65);max-width:510px}.auth-stat{display:flex;align-items:center;gap:18px;border-top:1px solid rgba(255,255,255,.13);margin-top:34px;padding-top:28px;max-width:460px}.auth-stat strong{font-size:2.5rem;color:var(--gold-400);letter-spacing:-.05em}.auth-stat span{font-size:.8rem;color:rgba(255,255,255,.58);max-width:210px}.auth-legal{position:relative;z-index:1;color:rgba(255,255,255,.35);font-size:.7rem}
.auth-form-panel{display:grid;place-items:center;padding:54px 6vw;background:white}
.auth-form-wrap{width:min(100%,470px)}.auth-form-wrap--wide{width:min(100%,610px)}
.auth-form-panel .back-link{color:var(--muted);margin-bottom:44px}
.auth-heading span{display:block;color:var(--navy-700);font-size:.72rem;font-weight:850;text-transform:uppercase;letter-spacing:.1em}.auth-heading h2{font-size:2.25rem;letter-spacing:-.045em;margin:7px 0}.auth-heading p{margin:0;color:var(--muted)}
.form-card{margin-top:28px;display:grid;gap:18px}.form-card label{display:grid;gap:7px;font-size:.79rem;font-weight:800;color:#344359}.form-card label small{font-weight:500;color:var(--muted)}
.form-card input[type="text"],.form-card input[type="email"],.form-card input[type="password"],.form-card input[type="tel"]{width:100%;height:52px;border:1px solid #d6deea;border-radius:11px;padding:0 14px;color:var(--ink);background:white;transition:.2s}.form-card input:focus{border-color:var(--blue-500);box-shadow:0 0 0 4px rgba(47,116,200,.1)}
.input-with-action{position:relative;display:block}.input-with-action input{padding-right:76px!important}.input-with-action button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--navy-700);font-size:.68rem;font-weight:850}
.form-row{display:flex;justify-content:space-between;align-items:center;gap:20px}.form-row>a,.form-help a,.form-switch a,.checkbox a{color:var(--navy-700);font-weight:800}
.checkbox{display:flex!important;grid-template-columns:auto 1fr!important;align-items:flex-start;gap:9px!important;font-weight:500!important;color:var(--muted)!important}.checkbox input{margin-top:4px;accent-color:var(--navy-700)}.checkbox--terms{font-size:.74rem!important;line-height:1.5}
.form-divider{display:flex;align-items:center;gap:10px;color:#98a4b4;font-size:.72rem;margin:0}.form-divider::before,.form-divider::after{content:"";height:1px;background:var(--line);flex:1}.form-help,.form-switch{text-align:center;color:var(--muted);font-size:.78rem}/* align-items:start — sem isto, a mensagem de erro sob um campo (ex.: "A senha
   deve ter ao menos 8 caracteres") estica a celula e CENTRALIZA o campo vizinho,
   que desce torto (visto no cadastro, 07/08/2026). Com start, o vizinho fica no
   topo e so a celula com erro cresce para baixo. */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
/* Recuperar senha (01/08/2026): "Esqueci minha senha" no login e o botao que
   parece link dentro do texto de ajuda. NAO reusar .link-button aqui — aquela e
   do menu do topo e e branca, sumiria no fundo claro do formulario. */
.form-forgot{margin:-6px 0 0;text-align:right;font-size:.78rem}.form-forgot a{color:var(--navy-700);font-weight:800}
.link-inline{border:0;background:none;padding:0;font:inherit;color:var(--navy-700);font-weight:800;text-decoration:underline;cursor:pointer}
.toast{position:fixed;right:24px;bottom:24px;z-index:1000;background:var(--navy-950);color:white;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px 17px;box-shadow:var(--shadow-md);font-size:.82rem;opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s}.toast.is-visible{opacity:1;transform:translateY(0)}

/* Motion */
.reveal{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}.reveal.animate-ready{opacity:0;transform:translateY(18px)}.reveal.animate-ready.is-visible{opacity:1;transform:none}.reveal--delay,.reveal--delay-1{transition-delay:.08s}.reveal--delay-2{transition-delay:.16s}.reveal--delay-3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal,.reveal.animate-ready{opacity:1;transform:none;transition:none}.button,.feature-card,.site-header,.sticky-purchase,.back-to-top{transition:none}}

@media (max-width:1020px){
  :root{--header-h:70px}
  .main-nav{position:fixed;inset:calc(36px + var(--header-h)) 0 auto 0;background:var(--navy-950);border-top:1px solid rgba(255,255,255,.08);padding:22px 20px;display:none;flex-direction:column;align-items:stretch;gap:0;box-shadow:0 18px 30px rgba(0,0,0,.25)}
  .main-nav.is-open{display:flex}.main-nav a{padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.07)}
  .menu-toggle{display:block;order:3;margin-left:10px}
  /* No celular o menu sanfona escondia a porta de entrada: 'Entrar' (ou
     'Meu painel', para quem já tem conta) fica visível ao lado dos três
     risquinhos, como botão. Pedido do dono, 10/08/2026. */
  .nav-actions{order:2;margin-left:auto}
  .nav-actions .link-button{display:none}
  .nav-actions .link-button.nav-mob{display:inline-flex;align-items:center;justify-content:center;
    padding:9px 18px;border-radius:10px;background:var(--gold,#f4c45b);color:#10233f;
    font-weight:750;font-size:.88rem;text-decoration:none}
  .hero__grid,.product-hero__grid{grid-template-columns:1fr;gap:30px}.hero__content{padding-top:20px}.hero__visual{min-height:470px}.book-stage{height:490px}.book-cover{width:300px;max-height:485px}.hero__grid{padding-top:42px}.hero{min-height:unset}
  .trust-strip__grid{grid-template-columns:1fr 1fr}.trust-strip__grid>div:nth-child(3){border-left:0;border-top:1px solid var(--line)}.trust-strip__grid>div:nth-child(4){border-top:1px solid var(--line)}
  .feature-grid{grid-template-columns:1fr 1fr}.demo-grid,.product-showcase,.faq-grid,.content-grid,.preview-grid{grid-template-columns:1fr}.demo-copy,.preview-copy{max-width:none}.app-window{transform:none}.steps{grid-template-columns:1fr 1fr}.step:nth-child(3){border-left:0;border-top:1px solid rgba(255,255,255,.12)}.step:nth-child(4){border-top:1px solid rgba(255,255,255,.12)}
  .product-showcase__image{min-height:480px}.product-showcase__content{padding:52px}.testimonial-grid{grid-template-columns:1fr 1fr}.testimonial:last-child{grid-column:1/-1}.faq-intro,.content-intro{position:static}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}.footer-grid>div:last-child{grid-column:2}.product-hero__image{order:1}.product-hero__content{order:2;max-width:none}.product-cover-panel{max-width:430px}.mini-benefits__grid{grid-template-columns:1fr 1fr}.mini-benefits__grid>div:nth-child(3){border-left:0;border-top:1px solid var(--line)}.mini-benefits__grid>div:nth-child(4){border-top:1px solid var(--line)}.tools-grid{grid-template-columns:1fr 1fr}
  .auth-layout{grid-template-columns:1fr}.auth-brand-panel{min-height:430px;padding:38px 7vw}.auth-brand-copy{margin:70px 0}.auth-brand-copy h1{max-width:700px}.auth-form-panel{padding:60px 24px}
}

@media (max-width:680px){
  .container{width:min(calc(100% - 28px),var(--container))}.section{padding:78px 0}.topbar__inner{min-height:42px}.topbar__inner a{display:none}.topbar{text-align:center;font-size:.74rem}.brand img{width:124px}.brand__divider,.brand__product{display:none}.nav-actions .button{display:none}.nav-actions .button.nav-mob{display:inline-flex}
  .hero__grid{padding-top:30px;padding-bottom:54px}.hero h1{font-size:2.9rem}.hero__lead{font-size:1rem}.hero__actions{flex-direction:column}.hero__actions .button{width:100%}.hero__proof{display:grid;grid-template-columns:1fr 1fr}.hero__proof>div{padding:15px 16px 15px 0;min-width:0}.hero__proof>div+div{padding-left:16px}.hero__proof>div:nth-child(3){border-left:0;border-top:1px solid rgba(255,255,255,.12);grid-column:1/-1}.hero__visual{min-height:390px}.book-stage{height:405px}.book-cover{width:245px;max-height:390px}.float-card{padding:10px}.float-card--top{right:-4px;top:60px}.float-card--bottom{left:-4px;bottom:35px}.float-card strong{font-size:.72rem}.float-card small{font-size:.58rem}
  .trust-strip__grid{grid-template-columns:1fr}.trust-strip__grid>div{padding:18px 10px}.trust-strip__grid>div+div,.trust-strip__grid>div:nth-child(3){border-left:0;border-top:1px solid var(--line)}
  .feature-grid,.testimonial-grid,.law-list,.tools-grid{grid-template-columns:1fr}.testimonial:last-child{grid-column:auto}.feature-card{min-height:280px}.section-heading h2,.demo-copy h2,.faq-intro h2,.product-showcase__content h2,.preview-copy h2,.content-intro h2{font-size:2.25rem}.section-heading{margin-bottom:40px}.section-heading--center{margin-bottom:42px}
  .app-shell{grid-template-columns:1fr}.app-sidebar{display:none}.app-window__top{grid-template-columns:54px 1fr 65px}.reader__paper{width:92%;padding:24px 22px}.steps{grid-template-columns:1fr;border-bottom:0}.step,.step+.step{border-left:0;border-top:1px solid rgba(255,255,255,.12);padding:24px 0}.step:first-child{border-top:0}
  .product-showcase__image{min-height:390px;padding:34px}.product-showcase__image img{width:225px}.product-showcase__content{padding:34px 24px}.price-line{align-items:flex-start;gap:12px}.price-line strong{font-size:1.9rem}.product-showcase__actions{align-items:stretch;flex-direction:column}.product-showcase__actions .button{width:100%}.product-showcase__actions .text-link{align-self:flex-start}
  .faq-grid{gap:42px}.accordion{padding:0 18px}.final-cta__inner{align-items:flex-start;flex-direction:column}.final-cta__inner .button{width:100%}.footer-grid{grid-template-columns:1fr 1fr;gap:34px}.footer-brand{grid-column:1/-1}.footer-grid>div:last-child{grid-column:auto}.footer-bottom{flex-direction:column}.back-to-top{left:14px;right:auto;bottom:14px}
  .product-hero__grid{padding-top:44px;padding-bottom:70px}.product-hero h1{font-size:3rem}.product-cover-panel{padding:32px}.offer-card{padding:20px}.offer-card__price strong{font-size:2.05rem}.mini-benefits__grid{grid-template-columns:1fr}.mini-benefits__grid>div+div,.mini-benefits__grid>div:nth-child(3){border-left:0;border-top:1px solid var(--line)}.content-grid{gap:40px}.law-list li{min-height:70px}.preview-paper{width:92%;padding:28px 22px}.preview-toolbar{overflow-x:auto}.preview-toolbar button{flex:0 0 auto}.preview-card__header{grid-template-columns:auto 1fr auto;gap:10px}.sticky-purchase__inner{min-height:82px}.sticky-purchase__inner>div:first-child{display:none}.sticky-purchase__inner>div:last-child{width:100%;justify-content:space-between}.sticky-purchase__inner>div:last-child .button{min-width:170px}
  .auth-brand-panel{min-height:360px;padding:28px 24px}.auth-brand-copy{margin:55px 0}.auth-brand-copy h1{font-size:2.75rem}.auth-form-panel{padding:48px 20px}.auth-form-panel .back-link{margin-bottom:34px}.form-grid{grid-template-columns:1fr}.auth-heading h2{font-size:2rem}.form-row{align-items:flex-start}.toast{left:14px;right:14px;bottom:14px}
}

/* ============================================================================
   PORTE PARA A PLATAFORMA (integração 31/07/2026) — daqui para baixo NÃO é do
   protótipo: vitrine multi-produto vinda do banco, capas reais sem distorção,
   e a PRÉVIA REAL (iframe do leitor previa.php) no lugar dos mocks.
   ============================================================================ */

/* Capa real sem esticar: moldura 2:3 (proporção das capas geradas no admin)
   + object-fit cover. Era o bug da imagem "esticada" do protótipo, que usava
   width:100% com max-height solto. */
.cover-frame{position:relative;aspect-ratio:2/3;overflow:hidden;border-radius:12px;
  background:linear-gradient(160deg,var(--navy-800),var(--navy-950))}
.cover-frame img{width:100%;height:100%;object-fit:cover;display:block}
.cover-fallback{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;padding:14%;color:#f4e9cf;border:1px solid rgba(244,196,91,.35);border-radius:12px}
.cover-fallback b{font-family:var(--font-serif);font-size:1rem;line-height:1.3}
.cover-fallback small{margin-top:8px;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-300)}

/* Hero: leque de capas REAIS do catálogo (multi-produto). Se o dono subir uma
   imagem própria em assets/img/site/hero.png, o PHP usa a imagem no lugar. */
.hero-fan{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-end}
.hero-fan .cover-frame{width:236px;box-shadow:0 38px 60px rgba(0,0,0,.5);border:1px solid rgba(244,196,91,.28)}
.hero-fan .cover-frame:nth-child(2){width:296px;margin:0 -44px;z-index:2;transform:rotate(1.6deg)}
.hero-fan .cover-frame:first-child{transform:rotate(-7deg) translateY(18px)}
.hero-fan .cover-frame:last-child{transform:rotate(7deg) translateY(18px)}
.hero-fan .cover-frame:only-child{width:330px;transform:rotate(2deg);margin:0}
@media (max-width:1020px){.hero-fan .cover-frame{width:180px}.hero-fan .cover-frame:nth-child(2){width:230px}
  .hero-fan .cover-frame:only-child{width:250px}}

/* Vitrine em formato LOJA na landing (grid dinâmico, um card por vade mecum) */
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px;margin-top:44px}
.store-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease}
.store-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.store-card__cover{display:flex;justify-content:center;padding:28px 28px 0;
  background:radial-gradient(120% 100% at 50% 0%,#16406f,var(--navy-900) 78%)}
.store-card__cover .cover-frame{width:168px;box-shadow:0 20px 34px rgba(0,0,0,.45)}
.store-card__body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.store-card__body h3{margin:0 0 4px;font-size:1.05rem;line-height:1.35}
.store-card__body .sub{margin:0 0 12px;color:var(--muted);font-size:.84rem;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.store-card__facts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.store-card__facts span{font-size:.7rem;font-weight:700;color:var(--navy-700);background:var(--surface-3);
  border-radius:999px;padding:4px 10px}
/* Com o preco em 5x o <strong> ficou longo e quebrava no meio ("5x R$" numa
   linha, "17,98" na outra). O valor nunca quebra; a explicacao vai para a
   linha de baixo, inteira, e a pilula de desconto fica ao lado do valor. */
.store-card__price{margin-top:auto;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.store-card__price strong{font-size:1.5rem;color:var(--navy-900);white-space:nowrap}
.store-card__price small{color:var(--muted);font-size:.72rem;order:2;flex:1 1 100%;line-height:1.35}
.store-card__price .off-pill{order:1}
.store-card__actions{margin-top:12px;display:grid;gap:8px}
.store-card__owned{display:flex;justify-content:center;font-size:.85rem;font-weight:800;color:var(--success);
  border:1px solid rgba(37,167,105,.4);border-radius:10px;padding:10px}

/* PRÉVIA REAL — o leitor de verdade num iframe (previa.php). */
.pv-frame{display:block;width:100%;height:min(78vh,760px);min-height:520px;border:0;background:#F7F5F0}
.live-frame{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-md);background:#F7F5F0}
.live-frame--dark{border-color:rgba(255,255,255,.14);box-shadow:var(--shadow-lg)}
.live-frame--dark .pv-frame{height:600px;min-height:440px}
.live-frame__bar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--navy-900);
  color:#fff;font-size:.78rem}
.live-frame__bar b{font-weight:800}
.live-frame__bar .selo{font-size:.62rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-300);border:1px solid rgba(244,196,91,.4);border-radius:999px;padding:3px 9px}
.live-frame__bar .dica{margin-left:auto;opacity:.75}
@media (max-width:760px){.pv-frame{height:74vh;min-height:420px}.live-frame--dark .pv-frame{height:70vh}}

/* Capa do produto sem distorção (corrige o protótipo) */
.product-cover-panel img{width:100%;height:auto;max-height:none;aspect-ratio:2/3;object-fit:cover;border-radius:14px}
.product-cover-panel .cover-frame{width:100%}

/* Formulários REAIS (entrar/cadastro): flash de erro/sucesso do servidor */
.form-flash{border-radius:12px;padding:12px 16px;font-size:.9rem;margin-bottom:18px}
.form-flash--erro{background:#fdecec;color:#8f1f1f;border:1px solid #f3c2c2}
.form-flash--ok{background:#e8f7ef;color:#14603c;border:1px solid #bfe6d1}
.err-msg{color:#c0392b;font-size:.8rem;margin-top:4px}

/* Botão de compra REAL (POST + CSRF) dentro dos cards do protótipo */
.offer-card form{display:block;margin:0}
.offer-card form + .button{margin-top:10px}
.sticky-purchase form{display:inline-flex;margin:0}
.store-card__actions form{display:block;margin:0}
.store-card__actions form .button{width:100%}

/* Mobile: o leitor embutido em quadro pequeno tremia na horizontal (dois scrolls
   brigando). Até 860px o iframe SOME e entra o convite "Testar agora", que abre a
   prévia em TELA CHEIA — a experiência real, não uma miniatura espremida. */
.try-cta{display:none;flex-direction:column;gap:14px;align-items:stretch;
  border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-md);
  padding:26px 22px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  box-shadow:var(--shadow-lg);color:#fff}
.try-cta strong{font-size:1.08rem}
.try-cta p{margin:0;font-size:.88rem;opacity:.85;line-height:1.55}
.try-cta .button{width:100%;justify-content:center;text-align:center}
.try-cta .microcopy{margin:0;font-size:.74rem;opacity:.65}
.frame-fullscreen{display:inline-flex;margin-top:14px}
@media (max-width:860px){
  .live-frame{display:none}
  .frame-fullscreen{display:none}
  .try-cta{display:flex}
}

/* Hero com FOTO própria: sem rotação, sem sombra e SEM máscara CSS. O desvane-
   cimento das bordas agora vai ASSADO na própria imagem (vinheta retangular
   fundindo no navy #041225 do site) — a máscara radial daqui não zerava a
   opacidade na borda física da foto e a linha reta do retângulo aparecia. */
/* Foto do hero com FUNDO TRANSPARENTE (o reflexo vem embutido na imagem).
   Dimensionada pela ALTURA do palco, não por largura fixa: assim ela encolhe
   junto nos breakpoints e o reflexo nunca é cortado pelo overflow:hidden do
   .hero. filter:none de propósito — um drop-shadow seguiria a silhueta e
   duplicaria a sombra que a imagem já traz. */
.book-cover--photo{transform:none;filter:none;width:auto;max-width:100%;height:100%;max-height:100%;object-fit:contain}
.book-stage--photo picture{display:contents}
/* Com o fundo removido o halo passou a aparecer POR TRÁS da imagem. Suavizado e
   puxado para cima, ele fica como brilho atrás dos livros em vez de manchar o
   reflexo, que é a parte clara da composição. */
.book-stage--photo .book-halo{opacity:.5;transform:translateY(-14%)}
@media (max-width:1020px){.book-cover--photo{width:340px}}
@media (max-width:760px){.book-cover--photo{width:280px}}

/* HOME no celular: em vez de sumir, o quadro vira um RETRATO AO VIVO da
   plataforma (iframe sem interação — pointer-events:none mata o "tremido"
   de dois scrolls brigando) com o botão Testar agora logo abaixo.
   As demais páginas (.try-cta sem .demo-shot) continuam só com o botão. */
@media (max-width:860px){
  .demo-shot .live-frame{display:block;position:relative;height:400px;overflow:hidden;
    pointer-events:none;margin-bottom:14px}
  .demo-shot .live-frame .pv-frame{position:absolute;left:0;top:44px;width:100%;
    height:calc(100% - 44px);min-height:0}
  .demo-shot .live-frame__bar{position:relative;z-index:2}
  .demo-shot .live-frame__bar .dica{display:none}
  /* véu de fade no rodapé do retrato, convidando pro botão */
  .demo-shot .live-frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;
    background:linear-gradient(180deg,transparent,rgba(4,18,37,.92));z-index:1;pointer-events:none}
}

/* RETRATO AO VIVO (desktop E mobile, decisão do dono 31/07): o leitor real como
   "vitrine viva" — iframe SEM interação (pointer-events:none, mata o tremido e o
   scroll preso) + botão grande "Testar agora" que abre a prévia em TELA CHEIA.
   O quadro inteiro é clicável (role=link via site.js). */
.live-shot{display:block;position:relative;height:604px;border-radius:var(--radius-md);overflow:hidden;
  border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow-lg);background:#F7F5F0;cursor:pointer}
/* iOS ignora height em iframe no fluxo e expande para o conteúdo inteiro — por
   isso o retrato "crescia" no celular. Absoluto dentro de um wrapper de altura
   fixa com overflow:hidden é a única medida que ele respeita. */
.live-shot .pv-frame{position:absolute;left:0;top:44px;width:100%;height:calc(100% - 44px);
  pointer-events:none;min-height:0}
.live-shot .live-frame__bar{position:relative;z-index:2;min-height:44px;box-sizing:border-box}
.live-shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;
  background:linear-gradient(180deg,transparent,rgba(4,18,37,.94));z-index:1;pointer-events:none}
.live-shot__cta{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:2;
  display:inline-flex;align-items:center;gap:9px;background:var(--gold-400);color:var(--navy-950);
  font-weight:900;font-size:1.02rem;border-radius:13px;padding:15px 30px;white-space:nowrap;
  box-shadow:0 18px 44px rgba(0,0,0,.5);transition:transform .15s ease,background .15s ease}
.live-shot:hover .live-shot__cta{background:var(--gold-300);transform:translateX(-50%) translateY(-2px)}
.live-shot__hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:2;
  font-size:.68rem;color:rgba(255,255,255,.78);white-space:nowrap}
.live-shot:focus-visible{outline:3px solid var(--gold-300);outline-offset:2px}
@media (max-width:860px){
  .live-shot{height:464px}
  .live-shot__cta{font-size:.92rem;padding:13px 22px;bottom:30px}
}

/* Escassez / ancoragem de preço (P10) */
.price-de{display:block;font-size:.85rem;color:var(--muted)}
.price-de s{color:inherit;opacity:.85}
.offer-card .price-de{color:rgba(255,255,255,.75)}
.off-pill{display:inline-flex;align-items:center;gap:6px;background:var(--red-500);color:#fff;
  font-size:.72rem;font-weight:900;letter-spacing:.04em;border-radius:999px;padding:4px 11px;
  text-transform:uppercase;white-space:nowrap}
.promo-count{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:.82rem;font-weight:700}
.promo-count b{font-variant-numeric:tabular-nums;color:var(--gold-300)}
.sticky-purchase .price-de{display:inline;font-size:.78rem;margin-right:6px}
.store-card__price .off-pill{margin-left:auto}

/* ---------- páginas institucionais (Termos, Privacidade) ---------- */
.legal{padding:calc(var(--header-h) + 46px) 0 90px;background:var(--surface-2)}
.legal__wrap{width:min(calc(100% - 40px),820px)}
.legal-head{margin-bottom:34px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.legal-head h1{margin:.35rem 0 .5rem;font-size:2.15rem;line-height:1.15;letter-spacing:-.02em}
.legal-meta{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--muted);font-size:.82rem}
.legal-meta b{color:var(--ink)}
.legal-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:34px 38px;box-shadow:var(--shadow-sm)}
.legal-card h2{margin:34px 0 12px;font-size:1.16rem;line-height:1.35;scroll-margin-top:110px}
.legal-card h2:first-child{margin-top:0}
.legal-card h3{margin:22px 0 8px;font-size:.99rem}
.legal-card p,.legal-card li{color:#33445e;font-size:.94rem;line-height:1.72}
.legal-card ul,.legal-card ol{padding-left:22px;margin:10px 0}
.legal-card li{margin-bottom:7px}
.legal-card strong{color:var(--ink)}
.legal-card a{color:var(--navy-700);text-decoration:underline;text-underline-offset:2px}
.legal-card hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.legal-toc{background:var(--surface-3);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:18px 22px;margin-bottom:30px}
.legal-toc strong{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px}
.legal-toc ol{margin:0;padding-left:20px;columns:2;column-gap:26px}
.legal-toc li{margin-bottom:5px;font-size:.87rem}
.legal-toc a{color:var(--navy-700);text-decoration:none}
.legal-toc a:hover{text-decoration:underline}
/* Destaque para as cláusulas que o aluno PRECISA ver (não escondemos nada nas
   entrelinhas — transparência também protege a empresa). */
.legal-nota{border-left:3px solid var(--gold-400);background:#fdf8ec;border-radius:0 10px 10px 0;
  padding:15px 20px;margin:16px 0}
.legal-nota p:last-child{margin-bottom:0}
.legal-aviso{border-left:3px solid var(--red-500);background:#fdf0f0;border-radius:0 10px 10px 0;
  padding:15px 20px;margin:16px 0}
.legal-aviso p:last-child{margin-bottom:0}
.legal-def{background:var(--surface-3);border-radius:10px;padding:16px 20px;margin:14px 0}
.legal-def dt{font-weight:700;color:var(--ink);font-size:.9rem;margin-top:10px}
.legal-def dt:first-child{margin-top:0}
.legal-def dd{margin:2px 0 0;font-size:.9rem;color:#33445e;line-height:1.65}
.legal-contato{margin-top:30px;background:var(--navy-900);color:#fff;border-radius:var(--radius-md);padding:26px 30px}
.legal-contato h2{color:#fff;margin-top:0}
.legal-contato p{color:rgba(255,255,255,.85)}
.legal-contato a{color:var(--gold-300)}
@media (max-width:760px){
  .legal{padding-top:calc(var(--header-h) + 26px)}
  .legal-card{padding:26px 22px}
  .legal-head h1{font-size:1.6rem}
  .legal-toc ol{columns:1}
}

/* Micro-copy sob o CTA principal: tira a dúvida de "preciso criar conta antes?" */
.offer-card__micro{margin:10px 0 0;font-size:.76rem;line-height:1.5;color:rgba(255,255,255,.62);text-align:center}

/* Selo da oferta acima do bloco de preço (fora do grid — ver comentário no PHP) */
.offer-card > .off-pill{margin-bottom:12px}
.offer-card__price small s{color:inherit;opacity:.8;text-decoration-thickness:2px}

/* Cadastro pós-compra: nome/e-mail/telefone vêm da Eduzz e ficam recolhidos —
   a pessoa só cria a senha. "alterar" (details nativo, sem JS) abre os campos. */
.form-dados{border:1px solid var(--line);border-radius:12px;background:var(--surface-2);margin-bottom:4px}
.form-dados summary{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;cursor:pointer;font-size:.88rem;color:var(--ink);list-style:none}
.form-dados summary::-webkit-details-marker{display:none}
.form-dados summary strong{word-break:break-all}
.form-dados__alt{flex:0 0 auto;font-size:.78rem;font-weight:800;color:var(--navy-700);
  text-decoration:underline;text-underline-offset:2px}
.form-dados[open] .form-dados__alt{display:none}
.form-dados__campos{padding:4px 16px 14px}

/* ============================================================
   Bolha de suporte no WhatsApp (site_whats_widget do site_ui.php).
   O cartão abre sozinho depois de ~1min e só uma vez por visitante —
   quem fecha não é importunado de novo (o site.js guarda no localStorage).
   ============================================================ */
.wz{position:fixed;right:18px;bottom:18px;z-index:900;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.wz-bt{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;box-shadow:0 10px 26px rgba(37,211,102,.4);
  transition:transform .2s ease,box-shadow .2s ease}
.wz-bt:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(37,211,102,.5)}
.wz-card{position:relative;width:min(300px,calc(100vw - 36px));padding:18px 18px 16px;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 22px 48px rgba(8,41,79,.18);
  opacity:0;transform:translateY(10px);transition:opacity .28s ease,transform .28s ease}
.wz-card.is-open{opacity:1;transform:none}
.wz-card strong{display:block;font-size:1rem;color:var(--ink);margin-bottom:4px}
.wz-card p{margin:0 0 12px;font-size:.82rem;line-height:1.5;color:var(--muted)}
.wz-cta{display:block;text-align:center;padding:11px 14px;border-radius:10px;
  background:#25D366;color:#fff;font-weight:800;font-size:.86rem}
.wz-num{display:block;text-align:center;margin-top:8px;font-size:.78rem;color:var(--muted);font-weight:700}
.wz-x{position:absolute;top:6px;right:8px;width:28px;height:28px;border-radius:8px;
  font-size:1.25rem;line-height:1;color:var(--muted)}
.wz-x:hover{background:#f2f4f8;color:var(--ink)}
@media (max-width:760px){
  .wz{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .wz-bt{width:52px;height:52px}
}
@media print{.wz{display:none!important}}

/* ===== Correção visual da landing: nova logo e banner acima do texto ===== */
.topbar{display:none!important}

/* Logo sem fundo: a altura controla o tamanho e impede recorte no cabeçalho. */
.brand img{width:auto!important;height:58px!important;max-width:180px;object-fit:contain}
.footer-brand img{width:auto!important;height:112px!important;max-width:220px;object-fit:contain}
.auth-logo img{width:auto!important;height:106px!important;max-width:220px;object-fit:contain}

/* O hero deixa de ser duas colunas. O banner ocupa uma linha própria e o texto
   vem abaixo, sem compartilhar espaço nem usar position absoluta. */
.hero{min-height:0;overflow:hidden;background:var(--navy-950)}
.hero__grid{
  position:relative;
  z-index:2;
  display:flex!important;
  flex-direction:column;
  gap:0!important;
  align-items:stretch!important;
  min-height:0!important;
  padding-top:0!important;
  padding-bottom:68px!important;
}
.hero__visual.hero-banner{
  position:relative;
  display:block!important;
  width:100%;
  min-height:0!important;
  height:clamp(430px,55vw,650px);
  margin:0 0 52px;
  overflow:hidden;
  background:#000;
  isolation:isolate;
}
.hero-banner__picture{display:block;width:100%;height:100%}
.hero-banner__image{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center 48%;
}
/* Funde as bordas pretas da foto no navy da seção, evitando o retângulo. */
.hero-banner::before,
.hero-banner::after{
  content:"";
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  pointer-events:none;
}
.hero-banner::before{top:0;height:70px;background:linear-gradient(180deg,var(--navy-950),transparent)}
.hero-banner::after{bottom:0;height:120px;background:linear-gradient(180deg,transparent,var(--navy-950))}
.hero-banner .float-card{z-index:3}
.hero-banner .float-card--top{top:32px;right:28px}
.hero-banner .float-card--bottom{left:28px;bottom:38px}
.hero__content{
  position:relative;
  z-index:4;
  width:min(100%,820px);
  max-width:820px!important;
  padding:0!important;
}
.hero__actions{margin-bottom:0!important}

@media (max-width:1020px){
  .brand img{height:54px!important;max-width:168px}
  .hero__visual.hero-banner{height:clamp(390px,62vw,560px)}
}

@media (max-width:760px){
  .site-header{height:72px}
  .brand img{height:50px!important;max-width:148px}
  .footer-brand img{height:96px!important;max-width:190px}
  .auth-logo img{height:92px!important;max-width:190px}
  .hero__grid{padding-bottom:52px!important}
  .hero__visual.hero-banner{
    height:clamp(310px,84vw,460px);
    margin-bottom:36px;
  }
  .hero-banner__image{object-position:center 46%}
  .hero-banner::before{height:48px}
  .hero-banner::after{height:90px}
  .hero-banner .float-card--top{top:14px;right:12px}
  .hero-banner .float-card--bottom{left:12px;bottom:18px}
  .hero__content{width:100%}
}

/* ===== Ajustes v3: logo maior e novo hero integrado ao fundo do site ===== */
.brand{gap:14px}
.brand img{
  display:block;
  height:64px !important;
  width:auto !important;
  max-width:none !important;
}
.footer-brand img{
  display:block;
  height:118px !important;
  width:auto !important;
  max-width:none !important;
}
.auth-logo img{
  display:block;
  height:110px !important;
  width:auto !important;
  max-width:none !important;
}

.hero__visual.hero-banner{
  height:clamp(390px,50vw,590px);
  margin:8px 0 42px;
  background:transparent;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 20px 48px rgba(1,8,22,.26);
}
.hero-banner__image{
  object-fit:cover;
  object-position:center center;
}
.hero-banner::before{height:26px;background:linear-gradient(180deg,rgba(4,18,37,.10),transparent)}
.hero-banner::after{height:42px;background:linear-gradient(180deg,transparent,rgba(4,18,37,.18))}
.hero-banner .float-card--top{top:26px;right:22px}
.hero-banner .float-card--bottom{left:22px;bottom:24px}

@media (max-width: 1020px){
  .brand img{height:58px !important}
}
@media (max-width: 760px){
  .brand img{height:52px !important}
  .footer-brand img{height:94px !important}
  .auth-logo img{height:92px !important}
  .hero__visual.hero-banner{
    height:clamp(260px,62vw,380px);
    margin:8px 0 28px;
    border-radius:20px;
  }
  .hero-banner .float-card--top{top:12px;right:10px}
  .hero-banner .float-card--bottom{left:10px;bottom:12px}
}

/* ===== Flutuantes: WhatsApp à direita, "voltar ao topo" à esquerda =====
   Empilhados do mesmo lado eles se cobriam (print do dono, 10/08/2026). E na
   página de venda ainda havia a barra fixa de compra por baixo: quando ela
   aparece, os dois sobem a altura dela em vez de ficarem por cima. */
@media (max-width:760px){
  .back-to-top{
    left:14px;
    right:auto;
    bottom:calc(14px + env(safe-area-inset-bottom,0px));
    z-index:880;
  }
  .wz{
    right:12px;
    left:auto;
    bottom:calc(12px + env(safe-area-inset-bottom,0px));
  }
}
body.tem-barra-compra .back-to-top{bottom:calc(104px + env(safe-area-inset-bottom,0px))}
body.tem-barra-compra .wz{bottom:calc(102px + env(safe-area-inset-bottom,0px))}
@media (max-width:760px){
  body.tem-barra-compra .back-to-top{bottom:calc(112px + env(safe-area-inset-bottom,0px))}
  body.tem-barra-compra .wz{bottom:calc(110px + env(safe-area-inset-bottom,0px))}
}

/* ===== Ajuste v5: logo legível e hero um pouco mais largo ===== */
.brand img{
  width:118px !important;
  height:auto !important;
  max-width:none !important;
}
.footer-brand img{
  width:190px !important;
  height:auto !important;
  max-width:none !important;
}
.auth-logo img{
  width:190px !important;
  height:auto !important;
  max-width:none !important;
}

.hero__visual.hero-banner{
  width:min(calc(100% + 120px), 1320px);
  max-width:1320px;
  margin:8px auto 42px;
}

@media (max-width: 1020px){
  .brand img{width:106px !important}
}
@media (max-width: 760px){
  .brand img{width:88px !important}
  .footer-brand img{width:150px !important}
  .auth-logo img{width:150px !important}
  .hero__visual.hero-banner{
    width:100%;
    margin:8px 0 28px;
  }
}

/* ===== Ajuste v7: logo alinhada sem distorção ===== */
.site-header{overflow:visible;}
.brand{
  display:flex;
  align-items:center;
  gap:16px;
}
.brand img{
  display:block !important;
  width:104px !important;
  height:auto !important;
  max-width:none !important;
  object-fit:contain !important;
  flex:0 0 auto;
}
.brand__product{
  align-self:center;
}
.footer-brand img{
  display:block !important;
  width:176px !important;
  height:auto !important;
  max-width:none !important;
  object-fit:contain !important;
}
.auth-logo img{
  display:block !important;
  width:176px !important;
  height:auto !important;
  max-width:none !important;
  object-fit:contain !important;
}
@media (max-width: 760px){
  .brand{gap:12px;}
  .brand img{width:92px !important;}
  .footer-brand img,.auth-logo img{width:148px !important;}
}

/* ===== Ajuste v8: logo um pouco maior e cabeçalho levemente mais alto ===== */
.site-header{
  min-height:82px !important;
}
.brand{
  min-height:82px;
  gap:18px;
}
.brand img{
  width:128px !important;
  height:auto !important;
}
.brand__product{
  font-size:1.05rem;
  letter-spacing:.08em;
}
.nav{
  min-height:82px;
}

@media (max-width: 1020px){
  .site-header{min-height:78px !important;}
  .brand{min-height:78px;gap:16px;}
  .brand img{width:118px !important;}
  .nav{min-height:78px;}
}

@media (max-width: 760px){
  .site-header{min-height:74px !important;}
  .brand{min-height:74px;gap:12px;}
  .brand img{width:102px !important;}
  .brand__product{font-size:.98rem;}
  .nav{min-height:74px;}
}

/* ===== Ajuste v10: fundo ambiente mais rico e imagens em WEBP ===== */
.hero{
  background:
    linear-gradient(180deg,rgba(4,18,37,.90),rgba(4,18,37,.96)),
    url('/vademecum/assets/img/site/ambient-bg.webp') center top / cover no-repeat !important;
}
.hero::before{
  background:
    linear-gradient(90deg,rgba(4,18,37,.70) 0%,rgba(4,18,37,.46) 36%,rgba(4,18,37,.34) 100%),
    radial-gradient(circle at 76% 24%,rgba(27,76,132,.22),transparent 42%) !important;
}
.hero::after{
  opacity:.12 !important;
}
.hero__grid,
.hero__content,
.hero__visual{
  position:relative;
  z-index:1;
}
.section--dark{
  background-color:var(--navy-950);
}

/* ===== Hotfix v12: deixar o fundo visível ===== */
.hero{
  background:
    url('img/site/ambient-bg.webp') center top / cover no-repeat !important;
}
.hero::before{
  background:
    linear-gradient(180deg,
      rgba(4,18,37,.18) 0%,
      rgba(4,18,37,.30) 46%,
      rgba(4,18,37,.68) 100%) !important;
}
.hero::after{
  opacity:.045 !important;
}

/* Quem atende, dentro do cartão do WhatsApp. Rosto + nome convertem mais que
   uma marca anônima; enquanto a foto não existir, entram as iniciais. */
.wz-quem{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.wz-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:2px solid #25d366;background:#0d2a4a}
.wz-avatar--ini{display:flex;align-items:center;justify-content:center;
  font:600 15px/1 system-ui,sans-serif;color:#fff;letter-spacing:.5px}
.wz-quem__txt{display:flex;flex-direction:column;min-width:0}
.wz-quem__txt b{font-size:.9rem;color:var(--ink);line-height:1.2}
.wz-quem__txt i{font-style:normal;font-size:.74rem;color:var(--muted);line-height:1.3}
.wz-quem__txt i::before{content:"●";color:#25d366;font-size:.6em;vertical-align:middle;margin-right:5px}

/* ── Preço do cartão de oferta com a PARCELA como protagonista ─────────────
   Pedido do dono (07/08/2026): o "5x de" estava num small minúsculo e ninguém
   percebia o parcelamento; o à vista também sumia. Agora o strong carrega o
   "5x de R$ 15,98" inteiro (fonte um degrau menor para caber) e o à vista tem
   linha própria, legível, logo abaixo. */
/* Parcela em dourado-escuro (familia do gold da marca, #a8770a: contraste 4.6:1
   sobre branco) — pedido do dono: o 5x tem de saltar aos olhos. */
/* A pilula 'sem juros' cola no valor, e nao flutua na coluna da direita: o
   dono quis a leitura continua "5x de R$ 15,98 sem juros". Por isso o grid
   herdado (que jogava todo <span> para a col. 2, linha 1/3) e desfeito aqui. */
.offer-card__price--parc{display:block;grid-template-columns:none}
.offer-card__price--parc small{display:block;grid-column:auto}
.offer-card__price--parc strong{display:inline;font-size:2.05rem;white-space:nowrap;color:#a8770a;grid-column:auto}
/* 'sem juros' faz parte da FRASE, nao e um selo: a pilula verde colada num
   numero de 2rem brigava com ele. Mesmo tom dourado, um degrau menor, na
   linha de base — le-se "5x de R$ 15,98 sem juros" de uma vez so. */
.offer-card__price--parc span{display:inline;grid-row:auto;grid-column:auto;align-self:auto;
  background:none;border:0;border-radius:0;padding:0;margin-left:9px;
  font-size:1.02rem;font-weight:700;color:#b8860b;white-space:nowrap;vertical-align:baseline}
.offer-card__avista{margin:10px 0 0;font-size:.98rem;color:#45546a}
.offer-card__avista strong{font-size:1.18rem;color:var(--navy-900)}

/* ── "Testar o Raio X" nas páginas de venda ─────────────────────────────────
   Paleta do SITE (navy + dourado), não o azul claro da 1ª tentativa. O teste
   roda no próprio cartão: convite → varredura de 5s → relatório de exemplo.
   Os estados trocam por [hidden], e cada um precisa da regra de display no
   próprio seletor — sem isso o `display:flex` do convite vence o atributo e
   ele fica na tela junto com o resultado (bug visto em 10/08/2026). */
.rxd-section{background:var(--navy-900);color:#eaf1fb}
.rxd-section .section-heading p{color:#c3d3e8}
.rxd-titulo{color:#fff}
.rxd-titulo-ouro{color:var(--gold-400)}

.rxd-card{position:relative;max-width:880px;margin:0 auto;padding:1.7rem 1.9rem;border-radius:var(--radius-md);
  border:1px solid rgba(244,196,91,.28);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  box-shadow:0 18px 44px rgba(1,11,28,.28)}
.rxd-pill{display:inline-block;padding:.24rem .68rem;border-radius:999px;border:1px solid rgba(244,196,91,.55);
  color:var(--gold-300);font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* radar do convite: alvo + linha varrendo de cima a baixo (igual à do produto) */
.rxd-convite[hidden],.rxd-rodando[hidden],.rxd-resultado[hidden]{display:none}
.rxd-convite{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.rxd-radar{position:relative;flex:0 0 auto;width:92px;height:92px;overflow:hidden;border-radius:50%}
.rxd-radar svg{width:100%;height:100%;fill:none;stroke:rgba(255,255,255,.32);stroke-width:1.4}
.rxd-radar svg circle:first-child{stroke:var(--gold-500);opacity:.55}
/* A varredura anda por TRANSFORM, não por `top`: animar `top` obriga o
   navegador a recalcular layout a cada quadro e a seção inteira "engasga"
   (o dono sentiu travadinha em 10/08/2026). Com translate3d o trabalho vai
   para o compositor e a página nem repinta. */
.rxd-radar i{position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:var(--gold-400);
  box-shadow:0 0 10px 1px rgba(232,182,76,.55);will-change:transform;
  animation:rxdScan 2.1s ease-in-out infinite}
@keyframes rxdScan{
  0%,100%{transform:translate3d(0,6px,0);opacity:.35}
  50%    {transform:translate3d(0,84px,0);opacity:1}
}
.rxd-convite-txt{flex:1;min-width:230px}
.rxd-convite-txt h3{margin:0 0 .3rem;font-size:1.28rem;color:#fff}
.rxd-convite-txt p{margin:0 0 .75rem;font-size:.92rem;line-height:1.55;color:#c3d3e8;max-width:30rem}
.rxd-pills{display:flex;gap:.5rem;flex-wrap:wrap}
.rxd-ir{flex:0 0 auto;white-space:nowrap}

/* varredura — a mesma peça da animação do produto (raiox.css) */
.rxd-rodando{text-align:center;padding:.6rem 0 .8rem}
.rxd-alvo{position:relative;width:170px;height:170px;margin:1.1rem auto;overflow:hidden}
.rxd-alvo svg{width:100%;height:100%;fill:none;stroke:rgba(255,255,255,.32);stroke-width:1.4}
.rxd-alvo svg circle:first-child{stroke:var(--gold-500);opacity:.55}
.rxd-linha{position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:var(--gold-400);
  box-shadow:0 0 12px 2px rgba(232,182,76,.55);will-change:transform;
  animation:rxdLinha 2.1s ease-in-out infinite}
@keyframes rxdLinha{
  0%,100%{transform:translate3d(0,10px,0);opacity:.35}
  50%    {transform:translate3d(0,158px,0);opacity:1}
}
.rxd-fase{margin:.4rem 0 .9rem;color:#eaf1fb;font-size:1rem}
.rxd-prog{width:min(340px,86%);height:5px;margin:0 auto;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden}
.rxd-prog i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center;border-radius:3px;background:var(--gold-400);will-change:transform}

/* relatório de exemplo */
.rxd-res-topo{display:flex;gap:1.4rem;align-items:flex-start;margin:.9rem 0 1.1rem;flex-wrap:wrap}
.rxd-anel{position:relative;flex:0 0 auto;width:100px;height:100px;border-radius:50%;display:grid;
  place-content:center;text-align:center;
  background:conic-gradient(var(--gold-400) 0 27.3%,rgba(255,255,255,.14) 27.3% 100%)}
.rxd-anel::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--navy-900)}
.rxd-anel strong{position:relative;font-size:1.5rem;line-height:1.1;color:#fff}
.rxd-anel span{position:relative;font-size:.6rem;color:#c3d3e8}
.rxd-res-txt{flex:1;min-width:250px}
.rxd-res-txt h3{margin:0 0 .4rem;font-size:1.25rem;color:#fff}
.rxd-res-txt p{margin:0 0 .5rem;font-size:.92rem;line-height:1.6;color:#c3d3e8}
.rxd-legenda{display:block;font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.rxd-grade{display:grid;grid-template-columns:repeat(28,1fr);gap:4px;margin:0 0 1.1rem}
.rxd-grade i{aspect-ratio:1;border-radius:2px;background:rgba(255,255,255,.13)}
.rxd-grade i.on{background:var(--gold-400)}
.rxd-nota{margin:0 0 .9rem;font-size:.9rem;line-height:1.55;color:#eaf1fb}
.rxd-borrado i{display:block;height:12px;border-radius:6px;margin:9px 0;background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.07) 60%,rgba(255,255,255,.13))}
.rxd-borrado i:nth-child(1){width:88%}
.rxd-borrado i:nth-child(2){width:64%}
.rxd-borrado i:nth-child(3){width:76%}
.rxd-acoes{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin-top:1.2rem}
.rxd-denovo{background:none;border:0;cursor:pointer;color:#c3d3e8;font:inherit;font-size:.85rem;text-decoration:underline}
.rxd-denovo:hover{color:#fff}

/* os 3 passos */
.rxd-passos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;max-width:880px;margin:1.8rem auto 0}
.rxd-passo{position:relative;padding:1.6rem 1.3rem 1.3rem;border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.rxd-passo-n{position:absolute;top:-14px;left:1.1rem;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:var(--gold-400);color:var(--navy-900);font-weight:800;font-size:.85rem}
.rxd-passo h3{margin:.2rem 0 .45rem;font-size:1rem;color:#fff}
.rxd-passo p{margin:0;font-size:.86rem;line-height:1.55;color:#c3d3e8}

@media (max-width:760px){
  .rxd-convite{flex-direction:column;align-items:flex-start}
  .rxd-ir{width:100%;text-align:center}
  .rxd-grade{grid-template-columns:repeat(20,1fr)}
  .rxd-passos{grid-template-columns:1fr;gap:1.5rem}
}
@media (prefers-reduced-motion:reduce){
  /* Sem congelar a varredura — só mais devagar e sem o pulso dos anéis.
     O dono usa "reduzir animações" e ficava com a linha parada no meio. */
  .rxd-radar i,.rxd-linha{animation-duration:4.2s}
}

/* ===== v13: mobile enxuto (pedido do dono, 11/08/2026) =====================
   Celular ganha versão resumida: textos longos somem (.m-hide) ou trocam por
   frase curta (.m-only), loja vira lista compacta, benefícios/passos viram
   grades 2x2 só com título, um depoimento em vez de três. Desktop intacto. */
.m-only{display:none}
@media (max-width:760px){
  .m-only{display:inline}
  .m-hide{display:none !important}

  .section{padding:52px 0}
  .section-heading{margin-bottom:24px}
  .section-heading--center{margin-bottom:26px}
  .section-heading h2,.demo-copy h2,.faq-intro h2{font-size:1.68rem;letter-spacing:-.025em}
  .section-heading p,.faq-intro p{font-size:.94rem}
  .hero h1{font-size:2.05rem}
  .hero__lead{font-size:.97rem}
  .hero__grid{padding-top:16px;padding-bottom:36px}
  .hero__actions{gap:10px}
  .hero__actions .button{width:min(100%,320px);margin-inline:auto;
    padding:13px 18px;font-size:.95rem;border-radius:12px}

  /* aba da demo: os 144px eram a reserva do parágrafo que o mobile esconde —
     sem isto sobrava um buraco em branco (print do dono, 11/08/2026) */
  .demo-tabs{margin:22px 0 14px}
  .demo-description{min-height:0}
  .demo-description h3{font-size:1.02rem;margin:0 0 4px}

  /* "Ver tudo o que vem no material": no celular vira botão contornado,
     em vez de link sublinhado solto (dono, 11/08/2026) */
  .demo-copy .text-link{display:flex;align-items:center;justify-content:center;gap:9px;
    width:min(100%,320px);margin:10px auto 0;padding:13px 18px;
    border:1.5px solid var(--navy-800);border-radius:12px;
    background:var(--surface);color:var(--navy-800);
    font-size:.95rem;box-shadow:var(--shadow-sm)}
  .demo-copy .text-link span{color:var(--gold-500)}

  /* faixa de confiança: fora do celular (X do dono, 11/08/2026).
     A seção "como funciona" foi removida do site inteiro. */
  .trust-strip{display:none}

  /* loja: card grande vira linha compacta — capa miniatura + nome + preço + botão */
  .store-grid{grid-template-columns:1fr;gap:12px;margin-top:24px}
  .store-card{display:grid;grid-template-columns:100px 1fr;align-items:stretch;border-radius:14px}
  .store-card:hover{transform:none}
  .store-card__cover{padding:12px 0 12px 12px;align-items:center}
  .store-card__cover .cover-frame{width:88px;box-shadow:0 8px 16px rgba(0,0,0,.35)}
  .store-card__body{padding:12px 14px 12px 14px}
  .store-card__body h3{font-size:.94rem;margin-bottom:2px;line-height:1.3}
  .store-card__body .sub,.store-card__facts{display:none}
  .price-de{font-size:.7rem}
  .store-card__price strong{font-size:1.1rem}
  .store-card__price small{font-size:.65rem}
  .store-card__actions{margin-top:8px}
  .store-card__actions .button{padding:9px 12px;font-size:.8rem}
  .store-card__owned{font-size:.78rem}

  /* benefícios: 2x2 só com ícone + título (a etiqueta sobrepunha o texto) */
  .feature-grid{grid-template-columns:1fr 1fr;gap:10px}
  .feature-card{min-height:0;padding:16px 13px 16px}
  .feature-card p,.feature-card__tag{display:none}
  .feature-card h3{font-size:.9rem;line-height:1.35;margin:10px 0 0}
  .feature-card__icon{transform:scale(.85);margin:0;transform-origin:left top}

  /* prova social: um depoimento resolve no celular */
  .testimonial-grid{grid-template-columns:1fr}
  .testimonial:nth-child(n+2){display:none}

  /* Raio X: card e passos compactos, passos só com título */
  .rxd-card{padding:1.1rem 1rem}
  .rxd-convite{gap:.9rem}
  .rxd-convite-txt h3{font-size:1.05rem}
  .rxd-convite-txt p{font-size:.88rem}
  .rxd-ir{width:100%}
  .rxd-res-txt h3{font-size:1rem}
  .rxd-res-txt p{font-size:.85rem}
  .rxd-passos{display:none}

  /* rodapé enxuto */
  .footer-brand p{display:none}
  .final-cta h2{font-size:1.45rem}
  .final-cta .eyebrow{font-size:.68rem}
}

/* ===== v14.1: hero com os vade mecums (dono, 11/08/2026) ===================
   1ª versão invadia a headline (cover esticava os livros até o centro). Agora
   a arte do desktop foi REMONTADA: vão central alargado (canvas 2400px), livros
   14% menores colados nas bordas e com 80% de opacidade. No celular entra só a
   FAIXA dos livros, acima do "Domine a lei seca" — o padding-top do conteúdo
   (no index.php) abre o espaço; nada fica atrás do texto. */
.hero{
  background:
    url('img/site/hero-livros-desktop-v3.webp') center / cover no-repeat !important;
  background-color:#050f22 !important;
}
.hero-livros-mob{display:none}
@media (max-width:760px){
  /* Celular: fundo liso; o leque entra como <img> em bloco próprio, acima do
     texto (o ?v= do PHP ainda resolve o cache que o background não fura). */
  .hero{background:#050f22 !important}
  .hero-livros-mob{display:block;width:100vw;max-width:none;height:auto;
    margin:0 calc(50% - 50vw) 6px}
  /* Virou <picture> (12/08/2026, para o desktop não baixar a imagem do celular):
     o elemento com a classe agora é o <picture>, então o <img> de dentro é quem
     precisa ocupar a largura toda. */
  .hero-livros-mob img{display:block;width:100%;height:auto}
}

/* ===== v16: APROVAÇÕES — modelo aprovado pelo dono (mock de 11/08/2026) ====
   Cabeçalho + barra de números + filtros por carreira + palco (destaque grande
   com a foto sangrando à direita) ao lado da lista + faixa de chamada. Onde o
   mock tinha botão de vídeo, aqui o clique abre o CARD ORIGINAL publicado pela
   escola — é a prova que temos, e é melhor que vídeo nenhum. */
.apv-sec{position:relative;overflow:hidden;padding:clamp(56px,6vw,92px) 0 clamp(48px,5vw,78px);
  background:radial-gradient(1100px 620px at 50% 0%,rgba(24,64,112,.26),transparent 60%),
    linear-gradient(180deg,#071426 0%,#050f22 100%)}

/* --- cabeçalho ---------------------------------------------------------- */
.apv-cab{text-align:center;max-width:820px;margin:0 auto}
.apv-eyebrow{display:inline-flex;align-items:center;gap:14px;color:#e8b64c;font-size:.78rem;
  font-weight:850;letter-spacing:.24em;text-transform:uppercase;margin-bottom:18px}
.apv-eyebrow::before,.apv-eyebrow::after{content:"";width:30px;height:2px;border-radius:1px;background:#e8b64c}
.apv-cab h2{font-size:clamp(1.9rem,3.6vw,3.05rem);line-height:1.1;letter-spacing:-.03em;
  color:#fff;margin:0 0 14px}
.apv-cab p{color:#b9c4d4;font-size:1.02rem;line-height:1.55;margin:0 auto;max-width:56ch}

/* --- barra de números --------------------------------------------------- */
.apv-selos{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  max-width:820px;margin:26px auto 0;padding:0;border-radius:16px;
  border:1px solid rgba(232,182,76,.38);background:rgba(6,17,34,.55)}
.apv-selos li{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 18px;text-align:center}
.apv-selos li + li{border-left:1px solid rgba(232,182,76,.28)}
.apv-selos b{font-size:2.3rem;line-height:1;font-weight:900;color:#e8b64c;font-variant-numeric:tabular-nums}
.apv-selos span{font-size:.82rem;line-height:1.35;color:#b9c4d4;max-width:22ch}

/* --- palco: destaque + lista -------------------------------------------- */
.apv-palco{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(300px,1fr);gap:20px;
  align-items:stretch;margin-top:30px}
.apv-destaque{position:relative;overflow:hidden;min-height:430px;display:flex;align-items:center;border-radius:18px;
  border:1px solid rgba(232,182,76,.3);background:#08172c;box-shadow:0 20px 46px rgba(0,0,0,.4)}
.apv-destaque img{position:absolute;inset:0 0 0 auto;height:100%;width:62%;object-fit:cover;
  object-position:center 22%}
.apv-destaque::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#08172c 30%,rgba(8,23,44,.86) 46%,rgba(8,23,44,0) 72%)}
.apv-destaque.is-trocando img{animation:apv-entra .45s ease}
@keyframes apv-entra{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.apv-destaque-tx{position:relative;z-index:2;max-width:56%;padding:34px 30px 34px 34px}
.apv-selo{display:inline-flex;align-items:center;gap:9px;padding:8px 15px 8px 11px;border-radius:999px;
  border:1px solid rgba(232,182,76,.5);background:rgba(232,182,76,.1);color:#e8b64c;margin-bottom:20px}
.apv-selo svg{width:17px;height:17px}
.apv-selo b{font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.apv-destaque-tx h3{margin:0 0 10px;color:#fff;font-size:clamp(1.5rem,2.3vw,2.1rem);
  line-height:1.15;letter-spacing:-.02em;font-weight:860}
.apv-destaque-tx p{margin:0;color:#e8b64c;font-size:1.02rem;font-weight:700}
.apv-vercard{display:inline-flex;align-items:center;gap:9px;margin-top:26px;padding-bottom:6px;
  color:#fff;font-size:.82rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;border-bottom:2px solid #e8b64c}
.apv-vercard:hover{color:#e8b64c}

.apv-lista{display:flex;flex-direction:column;gap:10px}
.apv-linha{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:center;
  padding:9px 16px 9px 9px;border-radius:14px;text-decoration:none;
  border:1px solid rgba(255,255,255,.09);background:rgba(8,23,44,.6);transition:.18s;cursor:pointer}
.apv-linha:hover{border-color:rgba(232,182,76,.5);background:rgba(11,30,56,.8)}
.apv-linha.is-on{border-color:rgba(232,182,76,.75);background:rgba(13,34,62,.9)}
.apv-linha[hidden]{display:none}
.apv-linha img{width:88px;height:88px;border-radius:10px;object-fit:cover;display:block}
.apv-linha strong{display:block;color:#fff;font-size:1rem;line-height:1.25;font-weight:800}
.apv-linha i{display:block;margin-top:5px;font-style:normal;color:#e8b64c;font-size:.82rem;line-height:1.35}
.apv-linha i b{color:#fff;font-weight:800}

/* --- faixa de chamada --------------------------------------------------- */
.apv-cta{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;
  margin-top:22px;padding:26px 30px;border-radius:18px;
  border:1px solid rgba(232,182,76,.3);background:rgba(6,17,34,.55)}
.apv-alvo{display:grid;place-items:center;width:64px;height:64px;color:#e8b64c;flex:0 0 auto}
.apv-alvo svg{width:56px;height:56px}
.apv-cta-tx strong{display:block;color:#fff;font-size:1.42rem;line-height:1.2;letter-spacing:-.02em}
.apv-cta-tx small{display:block;margin-top:7px;color:#b9c4d4;font-size:.92rem}
.apv-cta-acoes{display:flex;flex-direction:column;align-items:center;gap:12px}
.apv-cta-acoes .button{white-space:nowrap;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase}
.apv-vertodos{display:inline-flex;align-items:center;gap:8px;padding:0 0 3px;border:0;background:none;
  cursor:pointer;font:inherit;font-size:.82rem;font-weight:800;color:#e8b64c;
  border-bottom:1px solid rgba(232,182,76,.5)}
.apv-vertodos:hover{color:#fff}

/* --- galeria (as fotos de formatura) ------------------------------------ */
.apv-galeria{margin-top:30px;scroll-margin-top:90px}
.apv-galeria-rot{margin:0 0 14px;text-align:center;color:#8fa0b8;font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase}
.apv-foto{cursor:zoom-in}
.apv-nota{margin:24px auto 0;text-align:center;font-size:.74rem;color:#7c8ba1;max-width:70ch}

/* --- lupa --------------------------------------------------------------- */
.apv-lupa{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:24px;
  background:rgba(3,8,18,.92);opacity:0;transition:opacity .2s}
.apv-lupa.is-open{opacity:1}
.apv-lupa[hidden]{display:none}
.apv-lupa figure{margin:0;max-width:min(720px,92vw);text-align:center}
.apv-lupa img{max-width:100%;max-height:78vh;border-radius:14px;display:block;
  border:1px solid rgba(232,182,76,.35);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.apv-lupa figcaption{margin-top:14px;color:#e6ebf3;font-size:.92rem}
.apv-x{position:absolute;top:16px;right:20px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:rgba(10,20,38,.8);color:#fff;
  font-size:1.6rem;line-height:1;cursor:pointer}
body.apv-travado{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .apv-destaque.is-trocando img{animation:none}
  .apv-foto:hover img{transform:none}
}
@media (max-width:1080px){
  .apv-palco{grid-template-columns:1fr}
  .apv-destaque{min-height:360px}
  .apv-destaque-tx{max-width:58%}
}
@media (max-width:760px){
  .apv-sec{padding:44px 0 40px}
  .apv-cab h2{font-size:1.62rem}
  .apv-cab p{font-size:.92rem}
  .apv-eyebrow{font-size:.64rem;letter-spacing:.16em;gap:9px}
  .apv-eyebrow::before,.apv-eyebrow::after{width:16px}
  .apv-selos{grid-template-columns:1fr 1fr;margin-top:20px;border-radius:13px}
  .apv-selos li{padding:13px 10px;gap:3px}
  .apv-selos li + li{border-left:1px solid rgba(232,182,76,.28)}
  .apv-selos li:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid rgba(232,182,76,.28)}
  .apv-selos b{font-size:1.6rem}
  .apv-selos span{font-size:.7rem;max-width:26ch}
  /* destaque: foto em cima, texto embaixo — nada por trás das letras */
  .apv-destaque{min-height:0;display:block}
  .apv-destaque img{position:static;width:100%;height:230px;object-position:center 20%}
  .apv-destaque::after{inset:auto 0 0 0;height:150px;
    background:linear-gradient(180deg,rgba(8,23,44,0),#08172c 78%)}
  .apv-destaque-tx{max-width:none;padding:18px 18px 20px}
  .apv-selo{margin-bottom:14px;padding:6px 12px 6px 9px}
  .apv-selo b{font-size:.64rem}
  .apv-destaque-tx h3{font-size:1.25rem}
  .apv-destaque-tx p{font-size:.9rem}
  .apv-vercard{margin-top:16px;font-size:.74rem}
  .apv-lista{gap:9px;margin-top:12px}
  .apv-linha{grid-template-columns:74px 1fr;gap:12px;padding:8px 12px 8px 8px;border-radius:12px}
  .apv-linha img{width:74px;height:74px;border-radius:9px}
  .apv-linha strong{font-size:.88rem}
  .apv-linha i{font-size:.72rem;margin-top:3px}
  /* chamada final empilhada */
  .apv-cta{grid-template-columns:1fr;gap:14px;text-align:center;padding:20px 16px;margin-top:18px}
  .apv-alvo{width:44px;height:44px;margin:0 auto}
  .apv-alvo svg{width:40px;height:40px}
  .apv-cta-tx strong{font-size:1.12rem}
  .apv-cta-tx small{font-size:.84rem}
  .apv-cta-acoes{width:100%}
  .apv-cta-acoes .button{width:100%;justify-content:center}
  .apv-nota{font-size:.68rem;margin-top:18px}
}

/* Vozes: os depoimentos que viviam numa seção branca separada agora moram
   dentro das aprovações — prova social existe uma vez só na página. */
.apv-vozes{margin-top:30px;padding-top:30px;border-top:1px solid rgba(255,255,255,.1)}
.apv-vozes-rot{text-align:center;font-size:.72rem;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:#8fa0b8;margin-bottom:22px}
.apv-vozes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.apv-voz{margin:0;border-left:2px solid rgba(232,182,76,.55);padding-left:16px}
.apv-voz p{margin:0 0 12px;color:#cfd8e6;font-size:.95rem;line-height:1.6}
.apv-voz footer strong{display:block;color:#fff;font-size:.85rem;font-weight:800}
.apv-voz footer span{display:block;margin-top:2px;color:#8fa0b8;font-size:.72rem}
@media (max-width:760px){
  .apv-vozes{margin-top:24px;padding-top:22px}
  .apv-vozes-grid{grid-template-columns:1fr;gap:16px}
  .apv-voz p{font-size:.88rem;margin-bottom:9px}
}

/* ===== v17: ESTEIRAS DE FOTOS (dono, 11/08/2026) =========================
   As turmas correm em duas faixas, uma para cada lado, no PC e no celular.
   No celular entra ainda uma faixa com os aprovados que têm nome, no lugar do
   palco. Laço fechado por duas cópias + translateX(-50%); segurar o dedo (ou
   parar o mouse em cima) pausa. As medidas vão no <img>: sem elas o Safari
   calcula largura ZERO antes de a imagem chegar e o ladrilho vira um risco. */
.apv-esteira{display:none}
.apv-esteira-faixa{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.apv-esteira-faixa + .apv-esteira-faixa{margin-top:12px}
.apv-esteira-trilha{display:flex;gap:12px;width:max-content;
  animation:apv-rola var(--dur,72s) linear infinite;will-change:transform}
.apv-esteira-faixa--volta .apv-esteira-trilha{--dur:84s;animation-direction:reverse}
.apv-esteira-faixa:hover .apv-esteira-trilha,
.apv-esteira-faixa:active .apv-esteira-trilha{animation-play-state:paused}
@keyframes apv-rola{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.apv-ladrilho{position:relative;flex:0 0 auto;display:block;height:210px;min-width:110px;
  border-radius:12px;overflow:hidden;line-height:0;border:1px solid rgba(232,182,76,.24);
  background:#0a1c38;box-shadow:0 10px 22px rgba(0,0,0,.35)}
.apv-ladrilho img{height:210px;width:auto;max-width:none;display:block;object-fit:cover;
  filter:saturate(.94) brightness(.95);transition:filter .2s}
.apv-ladrilho:hover img{filter:none}
.apv-ladrilho span{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;
  gap:2px;padding:22px 12px 9px;line-height:1.2;text-align:left;
  background:linear-gradient(180deg,transparent,rgba(3,10,22,.95) 62%)}
.apv-ladrilho b{color:#fff;font-size:.74rem;font-weight:800}
.apv-ladrilho i{color:#e8b64c;font-style:normal;font-size:.64rem;font-weight:700}
.apv-esteira-dica{display:none;margin:12px 0 0;text-align:center;color:#8fa0b8;
  font-size:.72rem;letter-spacing:.08em}
.apv-galeria .apv-esteira-faixa{margin-inline:calc(50% - 50vw);width:100vw}

/* Movimento reduzido no sistema (no Windows: Configurações > Acessibilidade >
   Efeitos visuais > Efeitos de animação): a esteira não anda sozinha, mas
   continua rolável com o dedo/mouse — ninguém fica sem ver as fotos. Andar
   BEM devagar seria pior que parar: é justamente o que incomoda quem liga
   essa opção. */
@media (prefers-reduced-motion:reduce){
  .apv-esteira-trilha{animation:none}
  .apv-esteira-faixa{overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:thin;cursor:grab}
  .apv-ladrilho{scroll-snap-align:center}
}
@media (max-width:760px){
  /* no celular o palco, os depoimentos e a nota saem: a esteira já entrega a
     prova e o resto é rolagem a mais (dono, 11/08/2026) */
  .apv-palco,.apv-vertodos,.apv-vozes,.apv-nota{display:none}
  .apv-esteira{display:block;margin:22px calc(50% - 50vw) 12px;width:100vw}
  .apv-esteira-dica{display:block}
  .apv-galeria{margin-top:0}
  .apv-galeria-rot{display:none}
  .apv-esteira-faixa + .apv-esteira-faixa{margin-top:10px}
  .apv-esteira-trilha{gap:10px;--dur:46s}
  .apv-esteira-faixa--volta .apv-esteira-trilha{--dur:54s}
  .apv-ladrilho{height:180px;min-width:96px;border-radius:11px}
  .apv-ladrilho img{height:180px}
  .apv-ladrilho b{font-size:.7rem}
  .apv-ladrilho i{font-size:.6rem}
  .apv-cta{margin-top:22px}
}

/* "Uso número internacional" (dono, 11/08/2026): caixinha discreta embaixo de
   qualquer campo de telefone. O fone-br.js cria uma quando o formulário não
   traz — por isso o estilo mora aqui, e não junto de cada tela. */
.fone-intl{display:flex;align-items:center;gap:7px;margin:6px 2px 0;
  font-size:12.5px;line-height:1.3;color:var(--muted,#7a8797);cursor:pointer;
  user-select:none;flex:1 1 100%}
.fone-intl input{width:15px;height:15px;margin:0;accent-color:#e8b64c;cursor:pointer;flex:0 0 auto}
.fone-intl:hover{color:var(--ink,#25313f)}
/* No cadastro o campo de telefone divide a linha com o nome: a caixinha fica
   alinhada à DIREITA, embaixo do campo (pedido do dono, 11/08/2026). E não pode
   herdar o .form-card label (grid + negrito), que empilhava quadradinho e texto. */
.form-card .fone-intl{justify-content:flex-end;font-weight:500;font-size:12px;
  color:var(--muted);margin:7px 0 0}