/* app.brams.cc: a landing de venda (24/10/2026, v4). Visual próprio de página de produto, nada do Wiki.
   Abre no claro (pedido do Adrien, 25/10/2026); o escuro é data-tema="escuro" no <html>, pelo botão da barra. Laranja do Brams.
   Sem vidro: a única exceção é o desfoque atrás da barra de cima, a pedido direto do Adrien (25/10/2026). */
@font-face{font-family:"GSF";src:url(gsf.woff2) format("woff2");font-weight:100 1000;font-display:swap}
:root{--fundo:#FBFAF7;--sup:#FFFFFF;--sup2:#F1EFEA;--sup3:#E6E3DD;--borda:#E8E5DF;--linha:#E1DED8;--txt:#141413;--txt2:#6B6862;--apagado:#D2CFC8;
  --nav:rgba(251,250,247,.94);--sombra:rgba(60,50,40,.09);--lite:#FFF2E7;--accT:#B3541A;--verde:#1E9E5E;color-scheme:light;--acc:#EE7B30;--acc2:#FFB067;--larg:1120px}
:root[data-tema="escuro"]{--fundo:#000;--sup:#0E0E0D;--sup2:#1A1A19;--sup3:#2A2A28;--borda:#1E1E1C;--linha:#2E2E2B;--txt:#F5F5F2;--txt2:#A1A09B;--apagado:#3A3A37;
  --nav:rgba(0,0,0,.92);--sombra:rgba(0,0,0,.35);--lite:#1E130B;--acc:#EE7B30;--acc2:#FFB067;--accT:#FFB067;--verde:#3DD68C;--larg:1120px;color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:64px}
body{background:var(--fundo);color:var(--txt);font-family:"GSF",system-ui,sans-serif;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip;
  transition:background .4s,color .4s}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.ic{width:1em;height:1em;fill:currentColor}
.ap-pular{position:absolute;left:-999px;top:8px;z-index:50;background:var(--acc);color:#000;padding:8px 14px;border-radius:999px}
.ap-pular:focus{left:12px}
:focus-visible{outline:3px solid var(--acc2);outline-offset:3px;border-radius:8px}

/* barra de cima: fina e sólida */
.nav{position:sticky;top:0;z-index:30;background:var(--nav);border-bottom:1px solid var(--borda);transition:background .4s;
  -webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root{--nav:rgba(251,250,247,.72)}:root[data-tema="escuro"]{--nav:rgba(0,0,0,.6)}}
@media (prefers-reduced-transparency:reduce){.nav{-webkit-backdrop-filter:none;backdrop-filter:none}:root{--nav:rgba(251,250,247,.96)}:root[data-tema="escuro"]{--nav:rgba(0,0,0,.94)}}
.nav-in{max-width:var(--larg);margin:0 auto;height:56px;padding:0 20px;display:flex;align-items:center;gap:12px}
.nav-marca{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;text-decoration:none}
.nav-marca img{border-radius:7px}
@media (max-width:360px){.nav-marca span{display:none}}
.nav-dir{display:flex;align-items:center;gap:10px;margin-left:auto}
/* idiomas: um menu só, com a bandeira */
.nav-lang{position:relative}
.nav-lang summary{display:flex;align-items:center;gap:4px;height:36px;padding:0 8px 0 6px;border-radius:999px;border:1px solid var(--linha);background:var(--sup);
  cursor:pointer;list-style:none;color:var(--txt2)}
.nav-lang summary::-webkit-details-marker{display:none}
.nav-lang summary .ic{width:14px;height:14px;transition:transform .2s}
.nav-lang[open] summary .ic{transform:rotate(180deg)}
.bandeira{width:22px;height:22px;border-radius:50%;flex:none;display:block}
.nav-lang ul{list-style:none;position:absolute;right:0;top:calc(100% + 8px);min-width:180px;padding:6px;border-radius:16px;background:var(--sup);border:1px solid var(--linha);
  box-shadow:0 10px 28px var(--sombra);z-index:5}
.nav-lang a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;text-decoration:none;font-size:15px;font-weight:600;color:var(--txt)}
.nav-lang a:hover{background:var(--sup2)}
.nav-lang a[aria-current]{color:var(--accT)}
@media (prefers-reduced-motion:no-preference){.nav-lang[open] ul{animation:abre .2s cubic-bezier(.2,.7,.2,1)}@keyframes abre{from{opacity:0;transform:translateY(-6px)}}}
.nav-tema{display:grid;place-items:center;width:36px;height:36px;border-radius:999px;border:1px solid var(--linha);background:var(--sup);color:var(--txt);cursor:pointer;font-size:18px}
.nav-tema span{display:grid}.nav-tema .ic-sol{display:none}
:root[data-tema="escuro"] .nav-tema .ic-sol{display:grid}
:root[data-tema="escuro"] .nav-tema .ic-lua{display:none}
.nav-cta{font-size:14px;font-weight:700;background:var(--acc);color:#000;text-decoration:none;padding:8px 16px;border-radius:999px;white-space:nowrap}

/* botões: pílulas */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:8px 32px;border-radius:999px;font-size:18px;font-weight:700;line-height:1.2;text-align:center;
  text-decoration:none;background:var(--acc);color:#000;transition:transform .2s,background .2s}
.botao:hover{background:var(--acc2);transform:scale(1.03)}
.botao-2{background:var(--sup3);color:var(--txt)}
.botao-2:hover{background:var(--linha)}
.mais{color:var(--accT);font-weight:600;text-decoration:none;font-size:18px}
.mais:hover{text-decoration:underline}
.acoes{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 28px}

/* texto */
.eb{font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--acc)}
.h1{font-size:clamp(44px,8.4vw,104px);line-height:1;font-weight:800;letter-spacing:-.045em}
.h2{font-size:clamp(36px,6vw,72px);line-height:1.02;font-weight:800;letter-spacing:-.04em}
.p{font-size:clamp(18px,2vw,22px);line-height:1.45;color:var(--txt2);margin-top:18px;max-width:34ch}
.centro{text-align:center;margin-inline:auto}
.nota{font-size:14px;color:var(--txt2);max-width:60ch;margin-top:28px}
.nota a{color:var(--accT);font-weight:600;text-decoration:none}
.grad{background:linear-gradient(90deg,#D9601A,var(--acc) 55%,#F59A4A);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-tema="escuro"] .grad{background-image:linear-gradient(90deg,var(--acc),var(--acc2) 55%,#FFC98A)}
section{padding:160px 24px}
@media (max-width:700px){section{padding:104px 20px}}

/* hero */
.hero{text-align:center;padding-top:112px;padding-bottom:56px;position:relative}
.hero h1{font-size:clamp(44px,8.2vw,112px);line-height:.98;font-weight:800;letter-spacing:-.05em;margin-top:18px}
.hero-sub{font-size:clamp(19px,2.4vw,26px);color:var(--txt2);max-width:30ch;margin:28px auto 40px;line-height:1.35}
.hero-palco{position:relative;max-width:1000px;margin:80px auto 0;perspective:1400px}
.hero-palco::before{content:"";position:absolute;inset:8% 6% -12%;background:radial-gradient(closest-side,rgba(238,123,48,.22),rgba(238,123,48,0));z-index:0}
.hero-tec{position:relative;z-index:1;border-radius:28px;transform-origin:50% 100%;transform:rotateX(var(--rx,22deg)) scale(var(--sc,.94));
  box-shadow:0 24px 56px -12px var(--sombra)}
.selos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 36px;margin-top:72px}
.selos li{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:var(--txt2)}
.selos .ic{width:22px;height:22px;color:var(--acc)}

/* frase que acende */
.frase{max-width:var(--larg);margin:0 auto}
.frase p{font-size:clamp(32px,5.4vw,64px);line-height:1.12;font-weight:800;letter-spacing:-.035em;color:var(--apagado)}
.frase span{transition:color .5s}
.frase span.on{color:var(--txt)}

/* temas: imagem presa e troca com a rolagem */
.temas{padding:0 24px;position:relative}
.temas-cola{position:sticky;top:56px;height:calc(100vh - 56px);max-width:var(--larg);margin:0 auto;display:grid;align-content:center;gap:40px}
.temas-img{position:relative;aspect-ratio:1440/1119}
.temas-img img{position:absolute;inset:0;width:100%;height:100%;border-radius:24px;opacity:0;transform:scale(.97);transition:opacity .6s,transform .6s;
  box-shadow:0 18px 48px -12px var(--sombra)}
.temas-img img.on{opacity:1;transform:none}
.tema-nome{margin-top:22px;font-size:20px;font-weight:700;color:var(--accT);min-height:1.5em}
.temas-passos div{height:75vh}
@media (min-width:900px){.temas-cola{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px}}
@media (max-width:899px){.temas-txt .p{display:none}.temas-cola{align-content:start;padding-top:48px}}

/* bento */
.bento{max-width:var(--larg);margin:0 auto}
.grade{display:grid;gap:18px;margin:72px 0}
@media (min-width:800px){.grade{grid-template-columns:repeat(3,minmax(0,1fr))}.cx-idiomas{grid-column:span 2}.cx-bp{grid-column:span 2;grid-row:span 2}}
.cx{background:var(--sup);border:1px solid var(--borda);border-radius:28px;padding:34px;overflow:hidden;position:relative}
.cx h3{font-size:clamp(24px,2.6vw,30px);line-height:1.12;font-weight:800;letter-spacing:-.02em;margin-top:16px}
.cx p{color:var(--txt2);margin-top:10px;font-size:17px}
.cx-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--sup3);color:var(--acc);font-size:28px}
.cx-ic.verde{color:var(--verde)}
.numero{display:block;font-size:clamp(96px,14vw,168px);line-height:.85;font-weight:800;letter-spacing:-.06em;background:linear-gradient(180deg,var(--acc2),var(--acc));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.linguas{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.linguas li{font-size:14px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--sup2);color:var(--txt2)}
.cx-bp img{border-radius:18px;margin-top:28px}
.bp{display:inline-grid;place-items:center;width:58px;height:54px;border-radius:13px;background:#1A8C4E;color:#fff;font-weight:800;font-size:22px;box-shadow:0 4px 0 #0F6636}

/* avaliações */
.avals{padding-left:0;padding-right:0}
.avals .h2{padding:0 24px}
.avals-fila{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:min(84vw,380px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:8px max(24px,calc((100vw - var(--larg))/2)) 24px;margin-top:64px;scrollbar-width:none}
.avals-fila::-webkit-scrollbar{display:none}
.aval{scroll-snap-align:center;background:var(--sup);border:1px solid var(--borda);border-radius:24px;padding:30px;display:flex;flex-direction:column;gap:16px}
.estrelas{display:flex;gap:3px;color:var(--acc);font-size:18px}
.aval blockquote{font-size:19px;line-height:1.45;font-weight:600;flex:1}
.aval small{font-size:13px;color:var(--txt2);font-style:italic}
.aval .quem{font-size:13px;color:var(--txt2)}
.avals .nota{padding:0 24px}

/* Lite e completo */
.versoes{max-width:var(--larg);margin:0 auto}
.versoes-grade{display:grid;gap:18px;margin-top:72px}
@media (min-width:800px){.versoes-grade{grid-template-columns:1fr 1fr}}
.versao{background:var(--sup);border:1px solid var(--borda);border-radius:28px;padding:40px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.versao-lite{border-color:var(--acc);background:linear-gradient(180deg,var(--lite),var(--sup) 45%)}
.versao img{border-radius:16px;margin-bottom:12px}
.versao h3{font-size:32px;font-weight:800;letter-spacing:-.03em}
.preco{color:var(--accT);font-weight:700}
.versao .botao{align-self:stretch}
@media (max-width:520px){.botao{font-size:clamp(14px,4.1vw,18px);padding:8px 16px;letter-spacing:-.01em}}
.versao ul{list-style:none;margin:20px 0 32px;display:grid;gap:12px;flex:1}
.versao li{display:flex;gap:10px;color:var(--txt2)}
.versao li .ic{flex:none;width:20px;height:20px;margin-top:2px;color:var(--acc)}

/* perguntas */
.faq{max-width:820px;margin:0 auto}
.faq-lista{margin-top:56px;border-top:1px solid var(--linha)}
.faq details{border-bottom:1px solid var(--linha)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 0;font-size:20px;font-weight:700;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{flex:none;transition:transform .25s;color:var(--txt2)}
.faq details[open] summary .ic{transform:rotate(45deg)}
.faq details p{color:var(--txt2);padding:0 0 24px;font-size:17px;max-width:62ch}

/* fim */
.final{text-align:center;background:radial-gradient(60% 70% at 50% 100%,rgba(238,123,48,.14),rgba(238,123,48,0))}
.final .h1{max-width:14ch;margin:0 auto 52px}
.final .botao{position:relative}
.final .botao::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid rgba(238,123,48,.45);opacity:0;pointer-events:none}
.pe{max-width:var(--larg);margin:0 auto;padding:32px 24px calc(32px + 90px);font-size:13px;color:var(--txt2);border-top:1px solid var(--borda)}
.pe p+p{margin-top:8px}
@media (min-width:900px){.pe{padding-bottom:32px}}

/* botão fixo do celular */
.fixo{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--fundo);border-top:1px solid var(--borda);
  display:flex;justify-content:center;transform:translateY(110%);transition:transform .3s}
.fixo.on{transform:none}
.fixo .botao{width:100%;max-width:440px;padding:6px 14px;font-size:clamp(14px,4.1vw,17px);line-height:1.2;text-align:center;letter-spacing:-.01em}  /* o texto inteiro do Lite em uma linha (K-307) */
@media (min-width:900px){.fixo{display:none}}

/* entrada e revelação */
@media (prefers-reduced-motion:no-preference){
  .sobe{animation:sobe 1s cubic-bezier(.2,.7,.2,1) both}.s1{animation-delay:.08s}.s2{animation-delay:.2s}.s3{animation-delay:.32s}
  @keyframes sobe{from{opacity:0;transform:translateY(28px)}}
  .rev{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
  .rev.visto{opacity:1;transform:none}
  .aval.rev:nth-child(2){transition-delay:.08s}.aval.rev:nth-child(3){transition-delay:.16s}.aval.rev:nth-child(4){transition-delay:.24s}
  .aval.rev:nth-child(5){transition-delay:.32s}.aval.rev:nth-child(6){transition-delay:.4s}
  .final .botao::after{animation:pulsa 2.8s ease-out infinite}
  @keyframes pulsa{0%{opacity:1;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.12,1.4)}}
}
@media (prefers-reduced-motion:reduce){
  .hero-tec{transform:none}.temas-img img{transition:none}.botao,.fixo,body{transition:none}
}

/* ---------- variação B (/scroll/): o teclado preso no centro, mudando com a rolagem ---------- */
.hero-curto{padding-bottom:32px}
.rola-dica{margin-top:56px;color:var(--txt2);font-weight:600}
.rola-dica span{display:inline-block;animation:dica 1.6s ease-in-out infinite}
@keyframes dica{50%{transform:translateY(6px)}}
.filme{height:900vh;padding:0;position:relative}
.filme-palco{position:sticky;top:56px;height:calc(100vh - 56px);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4vh;padding-bottom:84px}
.filme-luz{position:absolute;width:120vmin;height:120vmin;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--lz,.6));opacity:var(--lo,.5);
  background:radial-gradient(closest-side,rgba(238,123,48,.18),rgba(238,123,48,0));pointer-events:none;will-change:transform,opacity}
.filme-cena{position:relative;width:min(112vw,1000px)}  /* os quadros têm margem transparente em volta do teclado */
.filme-cv{display:block;width:100%;height:auto;aspect-ratio:3/2}
.filme-textos{list-style:none;position:relative;width:100%;height:clamp(150px,21vh,210px);text-align:center;padding:0 24px;pointer-events:none}
.filme-textos li{position:absolute;left:24px;right:24px;top:0;opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.filme-textos li.on{opacity:1;transform:none}
.filme-textos b{display:block;font-size:clamp(30px,4.6vw,56px);line-height:1.04;font-weight:800;letter-spacing:-.035em}
.filme-textos span{display:block;color:var(--txt2);font-size:clamp(16px,1.8vw,21px);margin-top:12px}
.so-full{display:inline-block;margin-top:14px;padding:5px 12px;border-radius:999px;border:1px solid var(--linha);background:var(--sup);font-style:normal;font-size:13px;font-weight:700;color:var(--accT)}
.filme-cta{position:absolute;top:7vh;left:0;right:0;display:flex;justify-content:center;opacity:0;transform:translateY(-12px);transition:opacity .4s,transform .4s;pointer-events:none}
.filme-cta.on{opacity:1;transform:none;pointer-events:auto}
@media (min-width:1000px){
  .filme-palco{display:grid;place-items:center;padding-bottom:0}
  .filme-textos{position:absolute;height:auto;bottom:0;left:auto;right:5vw;top:0;width:380px;text-align:left;display:grid;align-items:center}
  .filme-textos li{left:0;right:0;top:50%;bottom:auto;transform:translateY(calc(-50% + 28px))}
  .filme-textos li.on{transform:translateY(-50%)}
  .filme-cena{width:min(62vw,900px);margin-right:400px}
  .filme-luz{left:38%}
}
@media (prefers-reduced-motion:reduce){
  .filme{height:auto}.filme-palco{position:static;height:auto;display:block;padding:48px 24px}.filme-luz{display:none}
  .filme-cena{margin:0 auto}
  .filme-textos{position:static;width:auto;display:grid;gap:32px;margin-top:48px;text-align:left;max-width:var(--larg);margin-inline:auto}
  .filme-textos{height:auto}.filme-textos li{position:static;opacity:1;transform:none}.filme-cta{position:static;opacity:1;transform:none;pointer-events:auto;margin-top:48px}
  .rola-dica span{animation:none}
}