/* O Que Cai · página de vendas v2 */
/* fontes hospedadas na página (Google Fonts, subconjunto latino) */
@font-face{font-family:"Fraunces";font-style:italic;font-weight:600;font-display:swap;src:url(fonts/Fraunces-italic.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600 700;font-display:swap;src:url(fonts/Fraunces-normal.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/InstrumentSans-normal.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:optional;src:url(fonts/Newsreader-italic.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 600;font-display:optional;src:url(fonts/Newsreader-normal.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --papel:#FFFFFF; --papel-2:#F3F4F6;
  --tinta:#1F2933; --tinta-2:#52606D; --tinta-3:#6B7785;
  --fio:#9AA5B1; --trilho:#E4E7EB; --borda:#D9DEE4;
  --area:#334E68; --noite:#243B55; --noite-2:#1B2D42; --noite-3:#162536;
  --facil:#B9CCE0; --media:#6B8DB3; --dificil:#243B55;
  --historia:#8E2C3A; --historia-graf:#A32D3F;
  --geografia:#0F6E6B; --geografia-graf:#0E8A7A;
  --filosofia:#5B3A7A; --filosofia-graf:#6E44A3;
  --sociologia:#9C4A0F; --sociologia-graf:#C4621A;

  --f-display:"Fraunces","Fraunces Fallback",Georgia,serif;
  --f-texto:"Newsreader","Newsreader Fallback",Georgia,serif;
  --f-ui:"Instrument Sans","Instrument Sans Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;

  --r-card:8px; --r-bar:2px;
  --gutter:20px; --max:1200px; --leitura:640px;
  --sec:88px;
  --topo-h:56px;
}
@font-face{font-family:"Fraunces Fallback";src:local("Georgia");size-adjust:104%;ascent-override:96%;descent-override:25%}
@font-face{font-family:"Newsreader Fallback";src:local("Georgia");size-adjust:92%;ascent-override:100%;descent-override:28%}
@font-face{font-family:"Instrument Sans Fallback";src:local("Arial");size-adjust:98%;ascent-override:96%;descent-override:24%}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topo-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 1.125rem/1.55 var(--f-texto);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--area);outline-offset:2px}
.sec-noite :focus-visible{outline-color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.leitura{max-width:var(--leitura)}
section{padding:var(--sec) 0}
.sec-p2{background:var(--papel-2)}
.sec-noite{background:var(--noite);color:#fff}

/* tipografia */
h1,h2,h3{font-family:var(--f-display);font-weight:600;font-variation-settings:"opsz" 144,"SOFT" 50;letter-spacing:-.01em;margin:0;color:inherit}
h1{font-size:clamp(2.75rem,9vw,5rem);line-height:1.02}
h2{font-size:clamp(1.875rem,5vw,2.875rem);line-height:1.1;max-width:22ch}
h3{font-size:1.375rem;line-height:1.2;font-variation-settings:"opsz" 36,"SOFT" 50}
h1 em,h2 em{font-style:italic;font-weight:600}
p{margin:0}
.rotulo{font:600 .875rem/1.4 var(--f-ui);color:var(--area);display:block;margin-bottom:12px}
.sec-noite .rotulo{color:#B9CCE0}
.lead{font-size:1.1875rem;line-height:1.5;color:var(--tinta-2);margin-top:16px}
.sec-noite .lead{color:#D5DEE8}
.txt+.txt,.lead+.txt,h2+.txt,h2+.lead{margin-top:16px}
h2+.txt{margin-top:20px}
.txt{max-width:var(--leitura)}
.fonte{font:400 .8125rem/1.4 var(--f-ui);color:var(--tinta-2);margin-top:16px}
.sec-noite .fonte{color:#B9C6D4}
.num{font-family:var(--f-ui);font-variant-numeric:tabular-nums}
strong{font-weight:600}

/* botões */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 24px;border-radius:var(--r-card);font:700 1.0625rem/1.2 var(--f-ui);text-decoration:none;cursor:pointer;border:0;text-align:center;transition:background-color .12s,filter .12s}
.btn-kit{background:var(--noite);color:#fff;width:100%}
.btn-kit:hover{background:#1E3249}
.btn-kit:active{background:#1B2D42}
.sec-noite .btn-kit{background:#fff;color:var(--noite)}
.sec-noite .btn-kit:hover{background:#E9EEF3}
.btn-avulsa{background:transparent;color:var(--disc,var(--tinta));border:1.5px solid currentColor;width:100%;min-height:48px;font-size:1rem}
.btn-avulsa:hover{background:color-mix(in srgb,var(--disc,var(--tinta)) 8%,transparent)}
.cta{max-width:440px;margin-top:28px}
.cta-centro{margin-left:auto;margin-right:auto}
.reforco{font:400 .8125rem/1.4 var(--f-ui);color:var(--tinta-2);margin-top:10px;text-align:center}
.sec-noite .reforco{color:#C7D2DE}
@media (min-width:768px){.btn-kit{width:auto;min-width:360px}.cta .btn-kit{width:100%;min-width:0}}

/* barra superior */
.topo{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.97);border-bottom:1px solid var(--borda);height:var(--topo-h)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;height:100%}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 1.25rem/1 var(--f-display);font-variation-settings:"opsz" 144,"SOFT" 50;letter-spacing:-.02em}
.marca svg{flex:none}
.topo-link{font:600 .9375rem/1 var(--f-ui);text-decoration:underline;text-decoration-color:var(--fio);text-underline-offset:4px;padding:14px 0}
.topo-btn{display:none}
@media (min-width:1024px){
  .topo-link{display:none}
  .topo-btn{display:flex;min-height:40px;width:auto;min-width:0;padding:0 18px;font-size:.9375rem}
}

/* topo / hero */
.hero{position:relative;padding:32px 0 56px;overflow:hidden}
.hero-chips{position:absolute;inset:0;pointer-events:none;overflow:hidden;display:none}
@media (min-width:1024px){.hero-chips{display:block}}
.hero-chips span{position:absolute;font:700 .8125rem/1 var(--f-ui);font-variant-numeric:tabular-nums;color:#C9D2DC;border:1px solid #E1E6EC;border-bottom:3px solid #DCE5EF;border-radius:var(--r-bar);padding:5px 7px;background:#fff;opacity:.55}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.hero h1{margin-top:4px}
.hero .lead{max-width:34ch}
.hero-nums{font:600 .9375rem/1.5 var(--f-ui);color:var(--tinta);margin-top:20px;display:flex;flex-wrap:wrap;gap:4px 0}
.hero-nums span:not(:last-child)::after{content:"·";margin:0 8px;color:var(--fio)}
.hero .cta{margin-top:20px}
.contador{display:flex;align-items:baseline;gap:10px;margin-top:24px;padding:14px 16px;border:1px solid var(--borda);border-left:4px solid var(--noite);border-radius:var(--r-card);background:#fff;min-height:64px;max-width:440px}
.contador[hidden]{display:none}
.contador b{font:700 2rem/1 var(--f-display);font-variation-settings:"opsz" 144,"SOFT" 50;font-variant-numeric:lining-nums tabular-nums;color:var(--noite)}
.contador span{font:500 .9375rem/1.35 var(--f-ui);color:var(--tinta-2)}

/* leque de capas */
.leque{position:relative;width:100%;max-width:520px;aspect-ratio:1.18/1;margin:4px auto 0}
.leque .pg-fundo{position:absolute;width:44%;right:2%;top:2%;transform:rotate(9deg);border:1px solid var(--borda);border-radius:4px;box-shadow:0 18px 36px -24px rgba(31,41,51,.35);background:#fff;opacity:.9}
.leque .capa{position:absolute;width:43%;top:9%;border-radius:3px 6px 6px 3px;box-shadow:0 24px 48px -24px rgba(31,41,51,.45);background:var(--papel-2)}
.leque .c1{left:3%;transform:rotate(-7deg);top:12%}
.leque .c2{left:28.5%;transform:rotate(-1deg);top:5%;z-index:2}
.leque .c3{left:52%;transform:rotate(6deg);top:13%;z-index:1}
@media (min-width:1024px){
  .hero{padding:56px 0 72px}
  .hero-grid{grid-template-columns:minmax(0,55fr) minmax(0,45fr);grid-template-areas:"a c" "b c";align-items:center;column-gap:40px;row-gap:0}
  .hero-a{grid-area:a;align-self:end}.hero-b{grid-area:b;align-self:start}.hero-c{grid-area:c}
  .hero .lead{max-width:30ch}
  .leque{max-width:none}
}
@media (max-width:767px){
  .hero{padding-top:24px}
  .hero h1{font-size:clamp(2.6rem,11.5vw,3.25rem)}
  .hero .lead{font-size:1.0625rem;margin-top:12px}
  .hero-grid{gap:12px}
  .leque{max-width:340px;aspect-ratio:1.45/1;margin-top:0}
  .leque .capa{width:37%}
  .leque .c1{left:8%}.leque .c2{left:31.5%}.leque .c3{left:55%}
  .leque .pg-fundo{width:36%;right:5%}
  .hero-nums{margin-top:12px;font-size:.875rem}
  .hero .cta{margin-top:14px}
}

/* números */
.numeros-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;margin-top:40px}
.herois{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.heroi b{display:block;font:700 clamp(4rem,16vw,6.5rem)/.9 var(--f-display);font-variation-settings:"opsz" 144,"SOFT" 50;font-variant-numeric:lining-nums;letter-spacing:-.02em}
.heroi span{display:block;font:500 1rem/1.4 var(--f-ui);color:#D5DEE8;margin-top:8px;max-width:26ch}
.waffle-box{max-width:460px}
.waffle{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px}
.waffle i{aspect-ratio:1;border-radius:var(--r-bar);background:rgba(255,255,255,.12);transition:background-color .35s}
.waffle-leg{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;font:500 .9375rem/1.3 var(--f-ui)}
.waffle-leg li{display:flex;align-items:center;gap:8px}
.waffle-leg li::before{content:"";width:14px;height:14px;border-radius:var(--r-bar);background:var(--c);flex:none}
.waffle-leg b{font-variant-numeric:tabular-nums}
.waffle-titulo{font:600 1rem/1.4 var(--f-ui);margin-bottom:14px;color:#fff}
@media (min-width:1024px){
  .numeros-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
  .herois{grid-template-columns:repeat(3,minmax(0,1fr))}
  .heroi b{font-size:clamp(4rem,7vw,7rem)}
}

/* problema */
.problema-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
.dado-heroi{border-top:4px solid var(--historia);padding-top:20px}
.dado-heroi b{font:700 clamp(3.5rem,13vw,5.5rem)/1 var(--f-display);font-variation-settings:"opsz" 144,"SOFT" 50;color:var(--historia);display:block}
.dado-heroi p{font:500 1.0625rem/1.45 var(--f-ui);margin-top:8px;max-width:30ch}
@media (min-width:1024px){.problema-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px}}

/* figura ampliável */
.zoom{display:block;padding:0;border:1px solid var(--borda);background:#fff;border-radius:var(--r-card);overflow:hidden;cursor:zoom-in;width:100%;position:relative;text-align:left}
.zoom img{width:100%}
.zoom::after{content:"Ampliar";position:absolute;right:8px;bottom:8px;font:600 .75rem/1 var(--f-ui);background:rgba(31,41,51,.82);color:#fff;padding:6px 8px;border-radius:4px}
.zoom:hover{border-color:var(--fio)}
figcaption,.legenda{font:400 .8125rem/1.4 var(--f-ui);color:var(--tinta-2);margin-top:8px}

/* mapa: abas */
.abas{display:flex;gap:8px;overflow-x:auto;margin:32px calc(-1*var(--gutter)) 0;padding:0 var(--gutter) 4px;scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.aba{flex:none;min-height:44px;padding:0 16px;border:1px solid var(--borda);border-radius:var(--r-card);background:#fff;font:600 .9375rem/1 var(--f-ui);cursor:pointer;color:var(--tinta)}
.aba:hover{border-color:var(--fio)}
.aba[aria-selected="true"]{background:var(--disc);border-color:var(--disc);color:#fff}
.painel-aba{margin-top:24px}
.painel-aba[hidden]{display:none}
.mapa-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.mapa-card{background:#fff;border:1px solid var(--borda);border-top:6px solid var(--disc);border-radius:var(--r-card);padding:24px 20px}
.mapa-card h3{font-size:1.25rem}
.mapa-card .metade{font:700 2.75rem/1 var(--f-display);font-variation-settings:"opsz" 144,"SOFT" 50;color:var(--disc);margin-top:6px}
.mapa-card .metade small{font:500 1rem/1.3 var(--f-ui);color:var(--tinta-2);display:block;margin-top:6px}
.escada{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.escada li{display:grid;grid-template-columns:44px minmax(0,1fr) 34px;gap:4px 10px;align-items:center}
.escada .cod{font:700 .8125rem/1 var(--f-ui);font-variant-numeric:tabular-nums;color:var(--tinta-2)}
.escada .nome{font:500 .9375rem/1.3 var(--f-ui)}
.escada .n{font:700 1rem/1 var(--f-ui);font-variant-numeric:tabular-nums;text-align:right;grid-row:1/3;grid-column:3}
.escada .barra{grid-column:2;height:10px;background:var(--trilho);border-radius:var(--r-bar);overflow:hidden}
.escada .barra i{display:block;height:100%;width:var(--w);background:var(--disc-graf,var(--disc));border-radius:var(--r-bar);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.como-ler{margin-top:20px;background:var(--papel-2);border-radius:var(--r-card);padding:14px 16px;font:400 .9375rem/1.45 var(--f-ui);color:var(--tinta-2)}
.como-ler b{color:var(--tinta)}
@media (min-width:1024px){
  .abas{margin:40px 0 0;padding:0}
  .mapa-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px;align-items:start}
  .mapa-card{padding:32px}
}

/* 4 passos */
.passos{list-style:none;padding:0 var(--gutter);margin:32px calc(-1*var(--gutter)) 0;display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;counter-reset:passo}
.passos::-webkit-scrollbar{display:none}
.passos li{scroll-snap-align:start;counter-increment:passo}
.passos .zoom{aspect-ratio:4/3.1}
.passos .zoom img{height:100%;object-fit:cover;object-position:top}
.passos h3{margin-top:16px;font-size:1.25rem;display:flex;gap:10px;align-items:baseline}
.passos h3::before{content:counter(passo);font:700 .875rem/1 var(--f-ui);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--noite);color:#fff;flex:none;transform:translateY(-2px)}
.passos p{font-size:1rem;color:var(--tinta-2);margin-top:6px}
@media (min-width:1024px){.passos{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin:40px 0 0;padding:0;gap:24px}}

/* TRI */
.tri-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
.fmd{margin-top:28px;background:#fff;border:1px solid var(--borda);border-radius:var(--r-card);padding:20px}
.fmd-titulo{font:600 .9375rem/1.4 var(--f-ui)}
.fmd-titulo span{color:var(--tinta-2);font-weight:400}
.fmd-barra{display:flex;height:28px;margin-top:14px;border-radius:var(--r-bar);overflow:hidden;gap:2px}
.fmd-barra i{flex:var(--n) 1 0;transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.fmd-barra .f{background:var(--facil)}.fmd-barra .m{background:var(--media)}.fmd-barra .d{background:var(--dificil)}
.fmd-leg{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font:500 .875rem/1.3 var(--f-ui);font-variant-numeric:tabular-nums}
.fmd-leg span{display:flex;align-items:center;gap:6px}
.fmd-leg span::before{content:"";width:12px;height:12px;border-radius:var(--r-bar);background:var(--c)}
.fmd-mini .fmd-barra{height:12px;margin-top:8px}
.fmd-mini .fmd-leg{font-size:.8125rem;margin-top:8px}
@media (min-width:1024px){.tri-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px}}

/* veja por dentro */
.carrossel{position:relative;margin-top:32px}
.trilho{list-style:none;margin:0 calc(-1*var(--gutter));padding:0 var(--gutter) 8px;display:grid;grid-auto-flow:column;grid-auto-columns:80%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
.trilho::-webkit-scrollbar{display:none}
.trilho>li{scroll-snap-align:start}
.dentro-card{background:var(--noite-2);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-card);padding:20px 16px 20px;height:100%;display:flex;flex-direction:column}
.dentro-card h3{font-size:1.25rem;margin-top:18px}
.dentro-card p{font-size:1rem;color:#D5DEE8;margin-top:6px}
.dentro-card .dado{font:600 .875rem/1.35 var(--f-ui);color:#fff;margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.14)}
.dentro-card p+.dado{margin-top:14px}
.car-nav{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.car-pos{font:600 .9375rem/1 var(--f-ui);font-variant-numeric:tabular-nums;color:#D5DEE8}
.car-btns{display:flex;gap:8px}
.car-btn{width:48px;height:48px;border-radius:var(--r-card);border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center}
.car-btn:hover{background:rgba(255,255,255,.08)}
.car-btn:disabled{opacity:.35;cursor:default}
@media (min-width:1024px){
  .trilho{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;margin:0;padding:0;gap:24px}
  .car-nav{display:none}
}

/* mockup de aparelho (CSS): tablet, porque os recortes da apostila são largos */
.cel{position:relative;width:100%;max-width:300px;margin:0 auto;aspect-ratio:3/3.85;background:#0E141B;border-radius:22px;padding:14px 10px 10px;box-shadow:0 24px 48px -24px rgba(0,0,0,.6)}
.cel::before{content:"";position:absolute;top:5px;left:50%;width:5px;height:5px;margin-left:-2.5px;background:#2A3542;border-radius:50%}
.cel .tela{width:100%;height:100%;background:#fff;border-radius:8px;overflow:hidden;position:relative}
.cel .tela button{all:unset;display:block;width:100%;height:100%;cursor:zoom-in}
.cel .tela img{width:100%;height:auto;background:#fff}
.cel .tela button:focus-visible{outline:2px solid var(--area);outline-offset:-4px}

/* animação questão → parecer */
.demo{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:center;margin-top:48px;padding-top:40px;border-top:1px solid rgba(255,255,255,.14)}
.demo h3{font-size:1.5rem}
.demo p{color:#D5DEE8;margin-top:8px;font-size:1rem}
.demo-passos{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px;font:500 .9375rem/1.35 var(--f-ui);color:#D5DEE8}
.demo-passos li{display:flex;gap:10px}
.demo-passos b{color:#fff;font-variant-numeric:tabular-nums}
.cel-demo{max-width:280px}
.cel-demo .tela img{position:absolute;top:0;left:0;opacity:0}
.cel-demo .q{animation:demo-q 10s infinite}
.cel-demo .p{animation:demo-p 10s infinite}
.toque{position:absolute;width:34px;height:34px;border-radius:50%;background:rgba(36,59,85,.35);border:2px solid #243B55;top:var(--ty,24%);left:var(--tx,74%);transform:translate(-50%,-50%) scale(.6);opacity:0;z-index:3;animation:demo-toque 10s infinite}
.cel-demo .rot{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font:600 .75rem/1 var(--f-ui);background:rgba(31,41,51,.88);color:#fff;padding:6px 10px;border-radius:4px;white-space:nowrap;z-index:3}
.cel-demo .rot span{position:absolute;inset:0;padding:6px 10px;opacity:0}
.cel-demo .rot span:nth-child(1){position:static;animation:demo-r1 10s infinite}
.cel-demo .rot span:nth-child(2){animation:demo-r2 10s infinite}
@keyframes demo-q{0%,38%{opacity:1}42%,88%{opacity:0}92%,100%{opacity:1}}
@keyframes demo-p{0%,38%{opacity:0}42%,88%{opacity:1}92%,100%{opacity:0}}
@keyframes demo-toque{0%,26%{opacity:0;transform:translate(-50%,-50%) scale(.6)}30%{opacity:1;transform:translate(-50%,-50%) scale(1)}36%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}37%,100%{opacity:0}}
@keyframes demo-r1{0%,38%{opacity:1}42%,88%{opacity:0}92%,100%{opacity:1}}
@keyframes demo-r2{0%,38%{opacity:0}42%,88%{opacity:1}92%,100%{opacity:0}}
@media (min-width:1024px){.demo{grid-template-columns:minmax(0,1fr) 280px minmax(0,1fr)}.demo .cta{margin-top:0}}

/* raio-x */
.rx-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:32px}
.rx-q,.rx-p{background:#fff;border:1px solid var(--borda);border-radius:var(--r-card);padding:20px;border-top:4px solid var(--historia)}
.rx-cab{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:600 .8125rem/1.3 var(--f-ui);color:var(--tinta-2);padding-bottom:12px;border-bottom:1px solid var(--trilho)}
.chip{display:inline-block;font:700 .8125rem/1 var(--f-ui);font-variant-numeric:tabular-nums;color:var(--tinta);border:1px solid var(--borda);border-bottom:3px solid var(--nivel,var(--facil));border-radius:var(--r-bar);padding:5px 7px;background:#fff}
.nivel{font:600 .75rem/1 var(--f-ui);padding:5px 7px;border-radius:var(--r-bar);background:var(--facil);color:var(--tinta)}
.rx-hab{font:500 .875rem/1.4 var(--f-ui);color:var(--tinta-2);margin-top:12px}
.rx-q .base{font-size:1.0625rem;margin-top:12px}
.rx-q .ref{font:400 .8125rem/1.4 var(--f-ui);color:var(--tinta-2);margin-top:6px}
.rx-q .cmd{font-size:1.0625rem;margin-top:12px;font-weight:500}
.alts{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;font-size:1.0625rem}
.alts b{font:700 .9375rem/1 var(--f-ui);display:inline-block;width:22px}
.rx-p .resp{margin-left:auto;font:700 .875rem/1 var(--f-ui);color:var(--tinta)}
.rx-bloco{margin-top:14px;font-size:1.0625rem}
.rx-bloco b{font:700 .9375rem/1.4 var(--f-ui);color:var(--historia)}
.rx-armadilha{background:#F8EEF0;border-left:4px solid var(--historia);padding:12px 14px;border-radius:0 var(--r-card) var(--r-card) 0}
.rx-nota{font:500 .9375rem/1.45 var(--f-ui);color:var(--tinta-2);margin-top:20px;max-width:var(--leitura)}
@media (min-width:1024px){.rx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}}

/* plano em 3 fases */
.fases{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:32px;list-style:none;padding:0}
.fase{background:#fff;border:1px solid var(--borda);border-radius:var(--r-card);padding:24px 20px}
.fase-n{font:600 .875rem/1 var(--f-ui);color:var(--area)}
.fase h3{margin-top:6px;font-size:1.5rem}
.fase p{font-size:1rem;color:var(--tinta-2);margin-top:6px}
.cobre{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
.cobre li{display:grid;grid-template-columns:96px minmax(0,1fr) 42px;align-items:center;gap:10px;font:500 .875rem/1.2 var(--f-ui)}
.cobre .barra{height:8px;background:var(--trilho);border-radius:var(--r-bar);overflow:hidden}
.cobre .barra i{display:block;height:100%;width:var(--w);background:var(--c);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.cobre b{text-align:right;font-variant-numeric:tabular-nums}
.fase .objs{font:500 .8125rem/1.5 var(--f-ui);color:var(--tinta-2);margin-top:16px;padding-top:12px;border-top:1px solid var(--trilho)}
.fase .objs b{color:var(--tinta)}
.ver-pagina{margin-top:20px;display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 .9375rem/1 var(--f-ui);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--fio);text-underline-offset:4px}
@media (min-width:1024px){.fases{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}

/* apostilas */
.apostilas{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:32px;list-style:none;padding:0}
.apostila{--disc:var(--tinta);border:1px solid var(--borda);border-radius:var(--r-card);overflow:hidden;background:#fff;display:flex;flex-direction:column}
.apostila.h{--disc:var(--historia);--disc-graf:var(--historia-graf)}
.apostila.g{--disc:var(--geografia);--disc-graf:var(--geografia-graf)}
.apostila.f{--disc:var(--filosofia);--disc-graf:var(--filosofia-graf)}
.apostila-capa{background:var(--disc);border-top:8px solid color-mix(in srgb,var(--disc) 70%,#000);padding:24px 20px 0;display:flex;justify-content:center}
.apostila-capa img{width:52%;max-width:200px;border-radius:2px 4px 0 0;box-shadow:0 -1px 0 rgba(255,255,255,.15),0 16px 32px -16px rgba(0,0,0,.5)}
.apostila-corpo{padding:20px;display:flex;flex-direction:column;gap:16px;flex:1}
.apostila h3{font-size:1.5rem;color:var(--disc)}
.apostila .meta{font:500 .875rem/1.4 var(--f-ui);color:var(--tinta-2);margin-top:4px;font-variant-numeric:tabular-nums}
.apostila .top3{list-style:none;padding:0;margin:0;display:grid;gap:6px;font:500 .875rem/1.35 var(--f-ui)}
.apostila .top3 li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px}
.apostila .top3 .cod{color:var(--tinta-2);font-variant-numeric:tabular-nums}
.apostila .top3 .n{font-weight:700;font-variant-numeric:tabular-nums}
.apostila .sub{font:600 .8125rem/1.3 var(--f-ui);color:var(--tinta-2)}
.apostila .extra{font:500 .875rem/1.4 var(--f-ui);border-left:3px solid var(--disc);padding-left:10px}
.miolo{list-style:none;margin:0 -20px;padding:0 20px 4px;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.miolo::-webkit-scrollbar{display:none}
.miolo li{flex:0 0 31%;scroll-snap-align:start}
.miolo .zoom{border-radius:4px}
.miolo .zoom::after{display:none}
.apostila-compra{margin-top:auto;padding-top:16px;border-top:1px solid var(--trilho);display:flex;flex-direction:column;gap:12px}
.preco-avulsa{font:600 .9375rem/1.2 var(--f-ui);color:var(--tinta-2)}
.preco-avulsa b{font:700 1.5rem/1 var(--f-display);color:var(--tinta);margin-left:4px}
@media (min-width:1024px){.apostilas{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* para quem */
.quem{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:32px}
.quem-box{background:#fff;border:1px solid var(--borda);border-radius:var(--r-card);padding:24px 20px}
.quem-box h3{font-size:1.25rem}
.quem-box ul{margin:14px 0 0;padding-left:20px;display:grid;gap:8px;font-size:1.0625rem}
.quem-box p{margin-top:12px;font-size:1.0625rem}
.quem-box.nao{background:transparent}
.quem-box.pais{border-top:4px solid var(--noite)}
@media (min-width:1024px){.quem{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}

/* lado a lado */
.tabela{width:100%;border-collapse:collapse;margin-top:32px;font:500 .9375rem/1.4 var(--f-ui)}
.tabela th,.tabela td{padding:14px 12px;text-align:left;border-bottom:1px solid var(--trilho);vertical-align:top}
.tabela thead th{font-weight:600;color:var(--tinta-2);border-bottom:1px solid var(--fio)}
.tabela .oqc{background:#EEF2F6;font-weight:700;color:var(--noite)}
.tabela thead .oqc{color:var(--noite)}
.tabela tbody th{font-weight:600}
@media (max-width:767px){
  .tabela,.tabela tbody,.tabela tr,.tabela th,.tabela td{display:block}
  .tabela thead{display:none}
  .tabela tr{border:1px solid var(--borda);border-radius:var(--r-card);margin-bottom:12px;overflow:hidden;background:#fff}
  .tabela tbody th{padding:12px 14px;background:var(--papel-2);border-bottom:1px solid var(--borda)}
  .tabela td{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:10px 14px;border-bottom:1px solid var(--trilho)}
  .tabela td:last-child{border-bottom:0}
  .tabela td::before{content:attr(data-col);color:var(--tinta-2);font-weight:500}
}

/* oferta */
.oferta{padding-bottom:96px}
.oferta h2,.oferta>.wrap>.lead{text-align:center;margin-left:auto;margin-right:auto}
.kit{position:relative;max-width:760px;margin:40px auto 0;background:#fff;color:var(--tinta);border-radius:var(--r-card);padding:28px 20px 24px;text-align:center}
.selo{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font:700 .875rem/1 var(--f-ui);background:#EEF2F6;color:var(--noite);border:1px solid var(--area);padding:8px 12px;border-radius:var(--r-bar);white-space:nowrap}
.kit-capas{display:flex;justify-content:center;align-items:flex-end;margin:4px auto 0;max-width:340px}
.kit-capas img{width:31%;border-radius:2px 4px 4px 2px;box-shadow:0 16px 28px -18px rgba(31,41,51,.5)}
.kit-capas img:nth-child(1){transform:rotate(-5deg) translateX(12%)}
.kit-capas img:nth-child(2){position:relative;z-index:1;width:34%}
.kit-capas img:nth-child(3){transform:rotate(5deg) translateX(-12%)}
.kit h3{font-size:1.75rem;margin-top:20px}
.kit-lista{list-style:none;padding:0;margin:20px auto 0;max-width:460px;text-align:left;display:grid;gap:8px;font:500 .9688rem/1.4 var(--f-ui)}
.kit-lista li{padding-left:22px;position:relative}
.kit-lista li::before{content:"";position:absolute;left:2px;top:.45em;width:10px;height:6px;border-left:2px solid var(--noite);border-bottom:2px solid var(--noite);transform:rotate(-45deg)}
.preco-box{margin-top:24px;padding-top:20px;border-top:1px solid var(--trilho)}
.ancora{font:500 1rem/1.3 var(--f-ui);color:var(--tinta-2)}
.ancora s{color:var(--tinta-2)}
.preco{font-family:var(--f-display);font-variation-settings:"opsz" 144,"SOFT" 50;font-weight:700;color:var(--noite);line-height:1;margin-top:8px;display:inline-flex;align-items:flex-start;gap:4px}
.preco .rs{font:600 1.375rem/1 var(--f-ui);margin-top:.5rem}
.preco .int{font-size:4rem;letter-spacing:-.02em}
.preco .cent{font-size:1.75rem;margin-top:.45rem}
.parcela{font:500 .9375rem/1.4 var(--f-ui);color:var(--tinta-2);margin-top:6px}
.por-questao{font:400 .8125rem/1.4 var(--f-ui);color:var(--tinta-2);margin-top:4px}
.kit-compra{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:20px;align-items:center;text-align:left}
.kit-compra .reforco{text-align:center}
.garantia-mini{display:flex;gap:12px;align-items:flex-start;background:var(--papel-2);border-radius:var(--r-card);padding:14px 16px;font:500 .875rem/1.45 var(--f-ui);color:var(--tinta-2)}
.garantia-mini svg{flex:none;margin-top:2px}
.garantia-mini b{color:var(--tinta)}
@media (min-width:768px){.kit{padding:40px 48px 32px}.kit-compra{grid-template-columns:minmax(0,1fr) 220px}}
.avulsas-tit{text-align:center;font:600 1.0625rem/1.3 var(--f-ui);margin-top:56px;color:#fff}
.avulsas{list-style:none;padding:0;margin:20px auto 0;max-width:1000px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.avulsa{--disc:var(--tinta);display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px 14px;align-items:center;background:var(--noite-2);border:1px solid rgba(255,255,255,.12);border-left:4px solid var(--disc-claro);border-radius:var(--r-card);padding:14px}
.avulsa.h{--disc-claro:#D98A97}.avulsa.g{--disc-claro:#5FC2B3}.avulsa.f{--disc-claro:#B79AD8}
.avulsa img{width:64px;border-radius:2px;grid-row:1/3}
.avulsa h3{font-size:1.125rem}
.avulsa p{font:500 .875rem/1.3 var(--f-ui);color:#C7D2DE;margin-top:2px}
.avulsa .btn-avulsa{grid-column:1/-1;color:#fff;border-color:rgba(255,255,255,.55);margin-top:6px}
.avulsa .btn-avulsa:hover{background:rgba(255,255,255,.08)}
@media (min-width:1024px){.avulsas{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}

/* garantia */
.garantia{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:760px}
.garantia h2{max-width:none}
@media (min-width:768px){.garantia{grid-template-columns:56px minmax(0,1fr);gap:24px;align-items:start}}

/* FAQ */
.faq{max-width:760px;margin:32px 0 0;padding:0;list-style:none;border-top:1px solid var(--borda)}
.faq li{border-bottom:1px solid var(--borda)}
.faq h3{font:inherit;margin:0}
.faq-q{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;min-height:60px;padding:14px 0;cursor:pointer;font:600 1.0625rem/1.35 var(--f-ui);color:var(--tinta)}
.faq-q:focus-visible{outline:2px solid var(--area);outline-offset:2px}
.faq-q .ico{flex:none;width:20px;height:20px;position:relative}
.faq-q .ico::before,.faq-q .ico::after{content:"";position:absolute;left:3px;right:3px;top:9px;height:1.5px;background:var(--tinta);transition:transform .2s}
.faq-q .ico::after{transform:rotate(90deg)}
.faq-q[aria-expanded="true"] .ico::after{transform:rotate(0)}
.faq-r{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease}
.faq-r>div{overflow:hidden}
.faq-r p{padding:0 0 18px;font-size:1.0625rem;color:var(--tinta-2);max-width:var(--leitura)}
.faq-q[aria-expanded="true"]+.faq-r{grid-template-rows:1fr}

/* fechamento */
.fecho{text-align:center}
.fecho h2{margin:0 auto;max-width:18ch}
.fecho .big{display:block;margin:0 0 4px;font:700 clamp(4rem,16vw,8rem)/1 var(--f-display);font-variation-settings:"opsz" 144,"SOFT" 50;font-variant-numeric:lining-nums;margin-bottom:8px}

/* rodapé */
.rodape{background:var(--noite-3);color:rgba(255,255,255,.85);padding:56px 0 calc(96px + env(safe-area-inset-bottom));font:400 .875rem/1.55 var(--f-ui)}
.rodape .marca{color:#fff}
.rodape nav{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:20px}
.rodape nav a{display:inline-block;padding:10px 0;text-underline-offset:4px}
.rodape p{margin-top:12px;max-width:72ch}
@media (min-width:1024px){.rodape{padding-bottom:56px}}

/* barra fixa (celular) */
.barra-fixa{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid var(--borda);padding:8px var(--gutter) calc(8px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px;transform:translateY(110%);transition:transform .2s ease;min-height:64px}
.barra-fixa:not(.on){visibility:hidden;transition:transform .2s ease,visibility 0s .2s}
.barra-fixa.on{transform:none}
.barra-fixa .bf-txt{font:600 .875rem/1.25 var(--f-ui)}
.barra-fixa .bf-txt s{color:var(--tinta-2);font-weight:500}
.barra-fixa .bf-txt b{font:700 1.125rem/1 var(--f-display);color:var(--noite)}
.barra-fixa .btn-kit{width:auto;min-height:48px;padding:0 20px;flex:none}
@media (min-width:1024px){.barra-fixa{display:none}}

/* visualizador */
.lightbox{border:0;padding:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:rgba(14,20,27,.96)}
.lightbox::backdrop{background:rgba(14,20,27,.96)}
.lb-inner{width:100%;height:100%;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:72px 12px 24px;touch-action:pan-x pan-y pinch-zoom}
.lb-inner img{max-width:min(100%,1000px);height:auto;background:#fff;border-radius:4px}
.lb-close{position:fixed;top:12px;right:12px;width:52px;height:52px;border-radius:var(--r-card);border:1px solid rgba(255,255,255,.4);background:rgba(14,20,27,.7);color:#fff;cursor:pointer;display:grid;place-items:center;z-index:2}
.lb-cap{position:fixed;top:24px;left:16px;right:76px;color:#fff;font:500 .875rem/1.35 var(--f-ui)}

/* entrada */
.js .rv{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.js .rv.in{opacity:1;transform:none}
.js .cresce{transform:scaleX(0)}
.js .in .cresce,.js .cresce.in{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* o movimento lento das capas do topo continua; o resto da página fica parado */
  :not(.leque,.leque *),:not(.leque,.leque *)::before,:not(.leque,.leque *)::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  .js .cresce{transform:none}
  .cel-demo .tela .q{opacity:1}
  .cel-demo .rot span:nth-child(2){display:none}
}

.kit .btn-kit{background:var(--noite);color:#fff}
.kit .btn-kit:hover{background:#1E3249}
.kit .btn-kit:active{background:#1B2D42}
.kit .reforco{color:var(--tinta-2)}
.nw{white-space:nowrap}
@media (max-width:767px){.kit{padding:28px 14px 20px}.apostila-capa img{width:40%}}
@media (max-width:400px){.btn{font-size:1rem;padding:0 16px}}

/* ===== ajustes v2.1: logo, destaques, topo animado, plano, apostilas, tabela ===== */
:root{--acento:#0E7C74;--acento-claro:#7FD6CB;--acento-fundo:#E6F4F2;--grifo:#BFE6E0}

/* logo */
.marca img{width:32px;height:32px;border-radius:50%;flex:none}
.rodape .marca{gap:10px}

/* destaques de texto */
.rotulo{color:var(--acento)}
h1 em,h2 em{color:var(--acento)}
.sec-noite h2 em{color:var(--acento-claro)}
.txt strong,.lead strong,.rx-nota strong,.ler-plano strong,.quem-box strong{font-weight:600;color:var(--tinta);text-decoration:underline;text-decoration-color:var(--grifo);text-decoration-thickness:.42em;text-underline-offset:-.24em;text-decoration-skip-ink:none}
.sec-noite .txt strong{color:#fff;text-decoration-color:rgba(127,214,203,.4)}
.hero-nums b{color:var(--acento);font-weight:700}
.dentro-card .dado{color:var(--acento-claro)}
.heroi:nth-child(3) b{color:var(--acento-claro)}
.fmd-titulo{color:var(--tinta)}

/* topo: capas maiores e animadas */
.leque{transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.leque::before{content:"";position:absolute;left:12%;right:12%;top:4%;aspect-ratio:1;border-radius:50%;background:var(--acento-fundo);animation:circulo-entra 1s cubic-bezier(.2,.7,.2,1) backwards}
.leque .c1,.leque .c2,.leque .c3{transform:none}
.leque .capa{rotate:var(--r);transition:scale .3s ease,box-shadow .3s ease;animation:capa-entra .95s cubic-bezier(.2,.7,.2,1) var(--d) backwards,capa-flutua 7s ease-in-out calc(var(--d) + 1.3s) infinite}
.leque .capa:hover{scale:1.04;box-shadow:0 32px 56px -24px rgba(31,41,51,.55)}
.leque .pg-fundo{transform:none;rotate:9deg;animation:pagina-entra 1s cubic-bezier(.2,.7,.2,1) .45s backwards,capa-flutua 9s ease-in-out 1.6s infinite}
@keyframes capa-entra{from{opacity:0;rotate:0deg;translate:var(--dx) 28px;scale:.9}}
@keyframes pagina-entra{from{opacity:0;translate:-30% 10%;rotate:0deg}}
@keyframes circulo-entra{from{opacity:0;scale:.6}}
@keyframes capa-flutua{0%,100%{translate:0 0}50%{translate:0 -9px}}
@media (min-width:1024px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .leque{aspect-ratio:1.02/1;max-width:640px;justify-self:end;width:100%}
  .leque .capa{width:47%}
  .leque .c1{left:0;top:16%}.leque .c2{left:26%;top:7%}.leque .c3{left:52%;top:17%}
  .leque .pg-fundo{width:46%;right:-2%;top:0}
}
@media (max-width:767px){
  .leque{max-width:none;aspect-ratio:1.32/1}
  .leque .capa{width:42%}
  .leque .c1{left:4%;top:14%}.leque .c2{left:29%;top:6%}.leque .c3{left:54%;top:15%}
  .leque .pg-fundo{width:40%;right:1%}
}

/* plano: como ler */
.ler-plano{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:28px;background:#fff;border:1px solid var(--borda);border-left:4px solid var(--acento);border-radius:var(--r-card);padding:20px}
.ler-tit{font:700 .9375rem/1.3 var(--f-ui);color:var(--acento);margin-bottom:6px}
.ler-plano p{font-size:1rem;line-height:1.5}
.cod-chip{display:inline-block;font:700 .8125rem/1 var(--f-ui);font-variant-numeric:tabular-nums;border:1px solid var(--borda);border-bottom:3px solid var(--historia);border-radius:var(--r-bar);padding:3px 6px;background:#fff;color:var(--tinta);vertical-align:1px;flex:none}
.ex-objs{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:7px;font:500 .9375rem/1.3 var(--f-ui)}
.ex-objs li{display:flex;gap:10px;align-items:center}
.ler-plano .ex-res{margin-top:14px;font:500 1rem/1.4 var(--f-ui)}
.ex-pct{color:var(--historia);font-size:1.375rem;font-family:var(--f-display)}
.cob-tit{font:600 .8125rem/1.3 var(--f-ui);color:var(--tinta-2);margin-top:16px}
.fase .cobre{margin-top:10px}
.objs-tit{display:block;font-weight:700;color:var(--acento);margin-bottom:4px}
@media (min-width:1024px){.ler-plano{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding:28px}}

/* apostilas lado a lado */
.apostilas{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:767px){
  .apostilas{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin:28px calc(-1*var(--gutter)) 0;padding:0 var(--gutter) 8px;scrollbar-width:none}
  .apostilas::-webkit-scrollbar{display:none}
  .apostilas>li{scroll-snap-align:start}
  .deslize{display:block}
}
.deslize{display:none;font:500 .875rem/1.3 var(--f-ui);color:var(--tinta-2);margin-top:8px}
@media (min-width:768px) and (max-width:1023px){.apostila-corpo{padding:16px}.apostila h3{font-size:1.25rem}.apostila .top3 li{grid-template-columns:40px minmax(0,1fr) auto}}
@media (min-width:1024px){.apostilas{gap:24px}}

/* tabela comparativa */
.tabela-box{margin-top:32px;border:1px solid var(--borda);border-radius:12px;overflow:hidden;background:#fff}
.tabela-box .tabela{margin-top:0}
.tabela thead th{background:var(--papel-2);padding:16px 14px;color:var(--tinta-2)}
.tabela thead th.oqc{background:var(--noite);color:#fff;font-size:1rem}
.oqc-cab{display:inline-flex;align-items:center;gap:8px}
.oqc-cab img{border-radius:50%}
.tabela td.oqc{background:var(--acento-fundo);color:#0B5F59;font-weight:700}
.tabela td.neg{color:var(--tinta-3)}
.tabela td.meio{color:var(--tinta-2)}
.tabela tbody th{color:var(--tinta)}
@media (min-width:768px){
  .tabela th,.tabela td{padding:16px 14px}
  .tabela td.oqc::before{content:"✓";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--acento);color:#fff;font-size:.75rem;margin-right:10px;vertical-align:-4px}
  .tabela td.neg::before{content:"✕";color:#B42318;margin-right:8px;font-weight:700}
  .tabela tbody tr:last-child th,.tabela tbody tr:last-child td{border-bottom:0}
  .tabela tbody tr:hover th,.tabela tbody tr:hover td:not(.oqc){background:#FAFBFC}
  .tabela tbody tr:last-child td.oqc{font-size:1.0625rem}
}
@media (max-width:767px){
  .tabela-box{border:0;border-radius:0;overflow:visible;background:none}
  .tabela tr{border-color:var(--borda)}
  .tabela td.oqc{border-left:4px solid var(--acento)}
}

/* correções v2.1 */
@media (max-width:767px){.deslize{display:block}}
.btn{display:block;padding:16px 24px;line-height:1.5}
.btn-avulsa{padding:11px 16px;line-height:1.35}
.topo-btn{padding:9px 18px}
@media (min-width:1024px){.topo-btn{display:block}}
.barra-fixa .btn-kit{padding:12px 20px}
@media (max-width:400px){.btn{padding:16px}}
@media (max-width:1023px){.topo-btn{display:none}}
@media (max-width:767px){.apostila .btn-avulsa{font-size:.9375rem;padding:11px 10px}.apostila-corpo{padding:18px 16px}}

/* ===== v2.2: topo em movimento constante ===== */
/* capa = span com a imagem dentro; o span balança, a imagem leva a sombra e o brilho */
.leque .capa{display:block;background:none;box-shadow:none;border-radius:0;overflow:visible;
  animation:capa-entra .95s cubic-bezier(.2,.7,.2,1) var(--d) backwards,capa-balanca var(--bt) ease-in-out calc(var(--d) + 1s) infinite}
.leque .capa:hover{scale:1;box-shadow:none}
.leque .c1{--bt:6.2s}.leque .c2{--bt:5.6s}.leque .c3{--bt:6.8s}
.leque .capa img{display:block;width:100%;height:auto;border-radius:3px 6px 6px 3px;background:var(--papel-2);
  animation:capa-sombra var(--bt) ease-in-out calc(var(--d) + 1s) infinite}
.leque .capa::after{content:"";position:absolute;inset:0;border-radius:3px 6px 6px 3px;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.34) 46%,rgba(255,255,255,.08) 54%,transparent 64%) no-repeat;
  background-size:260% 100%;background-position:160% 0;animation:capa-brilho 7s ease-in-out calc(var(--d) * 6 + 1.4s) infinite}
@keyframes capa-balanca{
  0%,100%{translate:0 0;rotate:var(--r)}
  50%{translate:0 -16px;rotate:calc(var(--r) + 1.6deg)}
}
@keyframes capa-sombra{
  0%,100%{box-shadow:0 22px 34px -20px rgba(31,41,51,.55)}
  50%{box-shadow:0 44px 52px -26px rgba(31,41,51,.32)}
}
@keyframes capa-brilho{
  0%,55%{background-position:160% 0}
  85%,100%{background-position:-60% 0}
}

/* página do mapa atrás: deriva lenta */
.leque .pg-fundo{animation:pagina-entra 1s cubic-bezier(.2,.7,.2,1) .45s backwards,pagina-deriva 10s ease-in-out 1.5s infinite}
@keyframes pagina-deriva{0%,100%{translate:0 0;rotate:9deg}50%{translate:-8px -12px;rotate:11deg}}

/* círculo de fundo: respira */
.leque::before{animation:circulo-entra 1s cubic-bezier(.2,.7,.2,1) backwards,circulo-respira 8s ease-in-out 1s infinite}
@keyframes circulo-respira{0%,100%{scale:1}50%{scale:1.05}}

/* chips de questão flutuando em volta */
.flut{position:absolute;inset:0;pointer-events:none;z-index:4}
.ch{position:absolute;font:700 .8125rem/1 var(--f-ui);font-style:normal;font-variant-numeric:tabular-nums;color:var(--tinta);
  background:#fff;border:1px solid var(--borda);border-bottom:3px solid var(--nv);border-radius:var(--r-bar);padding:6px 8px;
  box-shadow:0 10px 18px -12px rgba(31,41,51,.45);animation:chip-flutua var(--t) ease-in-out var(--dl) infinite}
.ch.f1{left:-2%;top:6%}
.ch.f2{left:42%;top:-3%}
.ch.f3{right:-1%;top:12%}
.ch.f4{left:-4%;top:48%}
.ch.f5{right:-3%;top:56%}
.ch.f6{left:8%;bottom:2%}
.ch.f7{right:12%;bottom:-2%}
.ch.f8{left:46%;bottom:-4%}
@keyframes chip-flutua{
  0%,100%{translate:0 0;rotate:0deg}
  25%{translate:7px -10px;rotate:3deg}
  50%{translate:0 -18px;rotate:0deg}
  75%{translate:-7px -9px;rotate:-3deg}
}
@media (max-width:767px){
  .ch{font-size:.75rem;padding:5px 6px}
  .ch.f1{left:0;top:2%}.ch.f3{right:0;top:6%}
  .ch.f4{left:-1%;top:52%}.ch.f5{right:-1%;top:60%}
  .ch.f2,.ch.f7{display:none}
  .ch.f6{left:10%;bottom:0}.ch.f8{left:56%;bottom:-2%}
}
@media (min-width:1024px){.ch{font-size:.875rem;padding:7px 9px}}

/* v2.3: destaque do "É para você se" */
.quem-box.sim{position:relative;background:var(--acento-fundo);border:2px solid var(--acento);padding:30px 22px 24px}
.sim-selo{position:absolute;top:-13px;left:20px;font:700 .8125rem/1 var(--f-ui);background:var(--acento);color:#fff;padding:7px 10px;border-radius:var(--r-bar)}
.quem-box.sim h3{color:#0B5F59;font-size:1.5rem}
.quem-box.sim ul,.quem-box.nao ul{list-style:none;padding-left:0}
.quem-box.sim li{position:relative;padding-left:34px;color:var(--tinta)}
.quem-box.sim li::before{content:"✓";position:absolute;left:0;top:.2em;width:22px;height:22px;border-radius:50%;background:var(--acento);color:#fff;display:grid;place-items:center;font:700 .75rem/1 var(--f-ui)}
.quem-box.nao h3{color:var(--tinta-2)}
.quem-box.nao li{position:relative;padding-left:28px;color:var(--tinta-2)}
.quem-box.nao li::before{content:"✕";position:absolute;left:4px;top:.1em;color:var(--tinta-3);font:700 .875rem/1.6 var(--f-ui)}
.quem{margin-top:40px}
@media (min-width:1024px){.quem{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);align-items:start}}

/* FAQ: o botão fica dentro do h3, então a resposta abre pelo item */
.faq li.aberto .faq-r,.faq li:has(.faq-q[aria-expanded="true"]) .faq-r{grid-template-rows:1fr}

/* ===== v2.4: textos curtos/longos, plano resumido, ajustes do celular ===== */
.curto{display:none}
.ler-plano .ler-tit{display:inline;margin:0;font-size:inherit}
.ler-plano p{margin:0}
.ler-plano .ex-pct{font-size:1.125rem}

/* cards com preço: capa maior */
.avulsa{grid-template-columns:88px minmax(0,1fr)}
.avulsa img{width:88px}

@media (max-width:767px){
  .longo{display:none}
  .curto{display:inline}

  /* Humanas em números: 3 KPIs numa linha, waffle menor */
  .numeros-grid{gap:28px;margin-top:24px}
  .herois{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .heroi b{font-size:2.5rem}
  .heroi span{font-size:.8125rem;margin-top:6px}
  .waffle-box{max-width:270px}
  .waffle{gap:4px}
  .waffle-titulo{font-size:.875rem;margin-bottom:10px}
  .waffle-leg{font-size:.8125rem;gap:6px 12px;margin-top:12px}
  .waffle-leg li::before{width:11px;height:11px}

  /* mapa da prova: card mais compacto */
  .painel-aba{margin-top:16px}
  .mapa-grid{gap:16px}
  .mapa-card{padding:16px 14px}
  .mapa-card h3{font-size:1.0625rem}
  .mapa-card .metade{font-size:1.875rem;margin-top:4px}
  .mapa-card .metade small{font-size:.8125rem;margin-top:4px}
  .escada{margin-top:14px;gap:9px}
  .escada li{grid-template-columns:38px minmax(0,1fr) 28px;gap:3px 8px}
  .escada .cod{font-size:.75rem}
  .escada .nome{font-size:.8125rem}
  .escada .n{font-size:.875rem}
  .escada .barra{height:7px}
  .como-ler{margin-top:12px;padding:10px 12px;font-size:.8125rem}
  .aba{min-height:40px;padding:0 12px;font-size:.875rem}

  /* exemplo de Raio-X: texto bem menor */
  .rx-grid{gap:14px;margin-top:20px}
  .rx-q,.rx-p{padding:14px 13px}
  .rx-cab{font-size:.75rem;gap:4px 8px;padding-bottom:10px}
  .rx-hab{font-size:.75rem;margin-top:8px}
  .rx-q .base,.rx-q .cmd{font-size:.875rem;line-height:1.45;margin-top:8px}
  .rx-q .ref{font-size:.6875rem}
  .alts{font-size:.875rem;gap:3px;margin-top:6px}
  .alts b{font-size:.8125rem;width:18px}
  .rx-bloco{font-size:.875rem;line-height:1.45;margin-top:10px}
  .rx-bloco b{font-size:.8125rem}
  .rx-armadilha{padding:9px 11px}
  .rx-nota{font-size:.8125rem;margin-top:14px}

  /* animação questão → Raio-X: maior */
  .demo{margin-top:36px;padding-top:28px;gap:20px}
  .cel-demo{max-width:none;width:100%}

  /* plano em 3 fases: mais compacto */
  .ler-plano{gap:10px;padding:14px 14px;margin-top:20px}
  .ler-plano p{font-size:.875rem;line-height:1.45}
  .ler-plano .cod-chip{font-size:.75rem;padding:2px 5px}
  .fases{gap:12px;margin-top:20px}
  .fase{padding:16px 14px}
  .fase h3{font-size:1.1875rem;margin-top:2px}
  .fase p{font-size:.875rem;margin-top:4px}
  .fase-n{font-size:.75rem}
  .cob-tit{font-size:.75rem;margin-top:10px}
  .cobre{gap:8px}
  .cobre li{grid-template-columns:78px minmax(0,1fr) 38px;font-size:.8125rem;gap:8px}
  .cobre .barra{height:6px}
  .fase .objs{font-size:.75rem;margin-top:12px;padding-top:10px}

  /* tabela comparativa: tabela de verdade, compacta */
  .tabela-box{border:1px solid var(--borda);border-radius:10px;overflow:hidden;background:#fff;margin-top:20px}
  .tabela{display:table;table-layout:fixed;font-size:.8125rem}
  .tabela thead{display:table-header-group}
  .tabela tbody{display:table-row-group}
  .tabela tr{display:table-row;border:0;margin:0;border-radius:0;background:none}
  .tabela th,.tabela td{display:table-cell;padding:10px 6px;border-bottom:1px solid var(--trilho);vertical-align:middle;line-height:1.25}
  .tabela td::before{content:none}
  .tabela thead th{padding:10px 6px;font-size:.75rem;background:var(--papel-2)}
  .tabela thead th:first-child{width:31%}
  .tabela thead th.oqc{width:27%}
  .tabela tbody th{background:none;border-bottom:1px solid var(--trilho);font-size:.8125rem;padding-left:10px}
  .tabela td.oqc{border-left:0;font-size:.8125rem}
  .tabela tbody tr:last-child th,.tabela tbody tr:last-child td{border-bottom:0}
  .oqc-cab{gap:5px}
  .oqc-cab img{width:16px;height:16px}

  /* cards com preço: capa maior */
  .apostila-capa img{width:58%}
  .avulsa{grid-template-columns:104px minmax(0,1fr);gap:8px 14px}
  .avulsa img{width:104px}
}
/* textos longo/curto: precisam vencer regras como ".heroi span{display:block}" */
.curto{display:none!important}
@media (max-width:767px){.longo{display:none!important}.curto{display:inline!important}}

/* ===== v2.5: escala única e menor no celular =====
   títulos 26px · texto 15px · conteúdo de card 13–14px · rótulos 12px · mínimo 11px */
@media (max-width:767px){
  :root{--sec:56px}
  body{font-size:.9375rem;line-height:1.5}
  h2{font-size:1.625rem;line-height:1.15}
  h3{font-size:1.0625rem}
  .rotulo{font-size:.75rem;margin-bottom:8px}
  .txt,.lead{font-size:.9375rem;line-height:1.5}
  h2+.txt,h2+.lead,.txt+.txt{margin-top:12px}
  .fonte,figcaption,.legenda{font-size:.6875rem}
  .btn{font-size:.9375rem;min-height:50px;padding:14px 16px}
  .btn-avulsa{font-size:.8125rem;min-height:42px;padding:10px 12px}
  .reforco{font-size:.6875rem}
  .cta{margin-top:20px}

  /* topo */
  .hero h1{font-size:2.375rem}
  .hero .lead{font-size:.9375rem}
  .hero-nums{font-size:.8125rem}
  .contador{padding:10px 12px;min-height:52px}
  .contador b{font-size:1.625rem}
  .contador span{font-size:.8125rem}

  /* problema */
  .dado-heroi b{font-size:2.75rem}
  .dado-heroi p{font-size:.875rem}

  /* 4 passos */
  .passos{margin-top:20px}
  .passos h3{font-size:1rem;margin-top:12px}
  .passos h3::before{width:24px;height:24px;font-size:.75rem}
  .passos p{font-size:.8125rem}

  /* TRI */
  .fmd{padding:14px;margin-top:18px}
  .fmd-titulo{font-size:.8125rem}
  .fmd-barra{height:20px}
  .fmd-leg{font-size:.75rem}

  /* veja por dentro */
  .carrossel{margin-top:20px}
  .dentro-card{padding:14px 12px}
  .dentro-card h3{font-size:1.0625rem;margin-top:12px}
  .dentro-card p{font-size:.8125rem}
  .dentro-card .dado{font-size:.75rem}
  .demo h3{font-size:1.1875rem}
  .demo p,.demo-passos{font-size:.8125rem}

  /* apostilas */
  .apostila-capa{padding:16px 16px 0}
  .apostila-corpo{padding:14px 13px;gap:12px}
  .apostila h3{font-size:1.125rem}
  .apostila .meta{font-size:.75rem}
  .apostila .sub{font-size:.6875rem}
  .apostila .top3{font-size:.75rem;gap:4px}
  .apostila .top3 li{grid-template-columns:36px minmax(0,1fr) auto}
  .apostila .extra{font-size:.75rem}
  .fmd-mini .fmd-barra{height:9px}
  .fmd-mini .fmd-leg{font-size:.6875rem}
  .apostila-compra{padding-top:12px;gap:10px}
  .preco-avulsa{font-size:.8125rem}
  .preco-avulsa b{font-size:1.1875rem}
  .deslize{font-size:.75rem}

  /* para quem */
  .quem{margin-top:24px;gap:14px}
  .quem-box{padding:16px 14px}
  .quem-box.sim{padding:22px 14px 16px}
  .quem-box h3,.quem-box.sim h3{font-size:1.0625rem}
  .quem-box ul{font-size:.875rem;gap:6px;margin-top:10px}
  .quem-box p{font-size:.875rem;margin-top:8px}
  .quem-box.sim li{padding-left:28px}
  .quem-box.sim li::before{width:18px;height:18px;font-size:.625rem}
  .sim-selo{font-size:.6875rem;padding:5px 8px;top:-11px}

  /* tabela */
  .tabela{font-size:.6875rem}
  .tabela thead th{font-size:.625rem;padding:8px 4px}
  .tabela th,.tabela td{padding:8px 4px;overflow-wrap:anywhere}
  .tabela tbody th{font-size:.6875rem;padding-left:8px}
  .tabela td.oqc{font-size:.6875rem;padding-left:6px}
  .tabela thead th:first-child{width:30%;padding-left:8px}
  .tabela thead th:nth-child(2){width:20%}
  .tabela thead th:nth-child(3){width:23%}
  .tabela thead th.oqc{width:27%}
  .oqc-cab img{width:14px;height:14px}

  /* oferta */
  .kit{padding:24px 14px 18px;margin-top:28px}
  .kit h3{font-size:1.25rem;margin-top:14px}
  .kit-lista{font-size:.8125rem;gap:6px;margin-top:14px}
  .preco-box{margin-top:18px;padding-top:16px}
  .ancora{font-size:.8125rem}
  .preco .int{font-size:3.25rem}
  .preco .cent{font-size:1.375rem}
  .preco .rs{font-size:1.125rem}
  .parcela{font-size:.8125rem}
  .por-questao{font-size:.6875rem}
  .garantia-mini{font-size:.75rem;padding:10px 12px}
  .selo{font-size:.75rem;padding:6px 10px}
  .avulsas-tit{font-size:.9375rem;margin-top:36px}
  .avulsa{padding:12px}
  .avulsa h3{font-size:1rem}
  .avulsa p{font-size:.75rem}

  /* garantia */
  .garantia svg{width:36px;height:36px}

  /* FAQ */
  .faq{margin-top:20px}
  .faq-q{font-size:.875rem;min-height:48px;padding:11px 0;gap:12px}
  .faq-q .ico{width:16px;height:16px}
  .faq-q .ico::before,.faq-q .ico::after{top:7px}
  .faq-r p{font-size:.8125rem;line-height:1.5;padding-bottom:14px}

  /* fechamento e rodapé */
  .fecho .big{font-size:3.5rem}
  .rodape{font-size:.75rem;padding-top:40px}
  .marca{font-size:1.125rem}
  .marca img{width:28px;height:28px}
}
@media (max-width:767px){.apostila .btn-avulsa{font-size:.8125rem;padding:10px 8px}}
