/* Página de venda do PedUp (pedup.app). Medidas numa grade de 8 px; tipografia em escala fixa (Manrope).
   Movimento: palavras saem do desfoque ao rolar, telas reais do sistema rodando de ladinho, botões de vidro laranja. */
:root {
  --laranja: #FF6B00; --laranja-2: #FF8A33; --laranja-escuro: #E85D00; --laranja-suave: #FFF1E6;
  --tinta: #151826; --tinta-2: #1E2234; --cinza: #5E6578; --cinza-claro: #6B7184;
  --laranja-titulo: #EB5A00; --laranja-texto: #C94A00; --laranja-botao: #DC5600; --ok-texto: #137A4A;
  --fundo: #FFFFFF; --fundo-2: #F5F6F8; --linha: #E6E8EE; --linha-escura: rgba(255, 255, 255, .1);
  --ok: #1F9D61;
  --ease: cubic-bezier(.16, 1, .3, 1); --mola: cubic-bezier(.34, 1.56, .64, 1);
  --raio: 24px; --raio-p: 16px;
  --largura: 1200px;
  --lado: max(24px, env(safe-area-inset-left, 0px));
  --sombra-tela: 0 36px 80px -28px rgba(0, 0, 0, .55), 0 12px 26px -14px rgba(0, 0, 0, .32);
  color-scheme: light;
}
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { background: var(--fundo); color: var(--tinta); font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; height: auto; min-height: 100%; overflow-x: clip; }
a { color: inherit; }
p, li, .lead { text-wrap: pretty; }
img, video { max-width: 100%; display: block; }
.wrap { width: 100%; max-width: calc(var(--largura) + 2 * 24px); margin: 0 auto; padding-left: var(--lado); padding-right: max(24px, env(safe-area-inset-right, 0px)); }

/* ---------------------------------------------------------------- tipografia */
.selo { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border: 1px solid var(--linha); border-radius: 99px; background: rgba(255, 255, 255, .7); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza); }
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--laranja); box-shadow: 0 0 0 4px rgba(255, 107, 0, .14); }
.escuro .selo { background: rgba(255, 255, 255, .06); border-color: var(--linha-escura); color: #B9BECC; }
/* Presente do aluno MPW (link ?cupom=MPW): faixa com os dias a mais */
.presente-faixa {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 7px 16px 7px 7px; border-radius: 99px;
  background: linear-gradient(90deg, #FFF1E6, #FFE2CB); box-shadow: inset 0 0 0 1px #FFC89F, 0 10px 24px -14px rgba(232, 93, 0, .6);
  font-size: 15px; font-weight: 600; color: #7A3300; animation: pf-entra .6s cubic-bezier(.34, 1.56, .64, 1) both;
}
.presente-faixa b { color: var(--laranja-texto); font-weight: 800; }
.presente-faixa s { margin-left: 4px; color: #B07A55; font-weight: 500; text-decoration-thickness: 2px; }
.pf-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--laranja-botao); color: #fff; }
.pf-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.presente-faixa::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent); transform: skewX(-18deg); animation: pf-brilho 3.8s ease 1s infinite; }
@keyframes pf-entra { from { opacity: 0; transform: translateY(-6px) scale(.94); } }
@keyframes pf-brilho { 0%, 70% { left: -40%; } 100% { left: 130%; } }
.com-presente .ab-texto .selo { display: none; }
/* Pedruzo do presente: aparece no meio, desce a escadinha e fica em cima da faixa avisando */
.pz-camada { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 35; pointer-events: none; }
.pz-camada.voando { z-index: 45; } /* durante a descida passa por cima do menu do topo */
.pz { position: absolute; left: 0; top: 0; width: 46px; height: 67px; margin: -64px 0 0 -23px; opacity: 0; pointer-events: auto; cursor: pointer; will-change: transform; }
.pz-camada.apareceu .pz, .pz-camada.pousou .pz { opacity: 1; }
.pz svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 96%; }
.pz-sombra { fill: rgba(60, 30, 0, .18); }
.pz-olhos { transform-box: fill-box; transform-origin: center; animation: pz-pisca 4.2s infinite; }
.pz-camada.pousou .pz-corpo { animation: pz-respira 2.6s ease-in-out infinite; }
.pz-braco { transform-box: fill-box; transform-origin: 50% 8%; }
.pz-camada.acena .pz-braco { animation: pz-acena .65s ease-in-out; }
.pz-degrau { position: absolute; width: 40px; height: 11px; margin-left: -20px; border-radius: 4px; background: linear-gradient(180deg, #FF9A4D, #E85D00); box-shadow: 0 5px 0 -1px #B84800, 0 12px 16px -8px rgba(120, 50, 0, .45); animation: pz-degrau .38s cubic-bezier(.34, 1.56, .64, 1) both; }
.pz-balao {
  position: absolute; margin: 0; padding: 10px 14px; border-radius: 16px; transform: translateY(-100%); transform-origin: 100% 100%;
  background: #fff; color: var(--tinta); font-size: 14px; line-height: 1.35; text-wrap: pretty;
  box-shadow: 0 0 0 1px rgba(255, 107, 0, .28), 0 16px 32px -14px rgba(120, 50, 0, .45);
  opacity: 0; scale: .85; transition: opacity .25s ease, scale .45s cubic-bezier(.34, 1.56, .64, 1); pointer-events: none;
}
.pz-balao::after { content: ""; position: absolute; right: -6px; bottom: 16px; width: 13px; height: 13px; background: #fff; rotate: 45deg; box-shadow: 1px -1px 0 0 rgba(255, 107, 0, .28); }
.pz-balao b { display: block; color: var(--laranja-texto); font-weight: 800; }
.pz-camada.falando .pz-balao { opacity: 1; scale: 1; }
@keyframes pz-pisca { 0%, 92%, 100% { transform: none; } 95% { transform: scaleY(.1); } }
@keyframes pz-respira { 50% { transform: translateY(-1.4px); } }
@keyframes pz-acena { 0%, 100% { transform: none; } 30%, 70% { transform: rotate(-150deg); } 50% { transform: rotate(-115deg); } }
@keyframes pz-degrau { from { opacity: 0; transform: translateY(10px) scale(.6); } }
@media (max-width: 900px) { .com-presente .presente-faixa { margin-top: 58px; } .pz-balao { font-size: 13px; padding: 9px 12px; } }
@media (prefers-reduced-motion: reduce) { .pz-olhos, .pz-camada.pousou .pz-corpo, .pz-camada.acena .pz-braco { animation: none; } .pz-balao { transition: none; } }
@media (max-width: 480px) { .presente-faixa { gap: 8px; padding: 5px 12px 5px 5px; font-size: 13.5px; white-space: nowrap; max-width: 100%; } .pf-ico { width: 26px; height: 26px; } .pf-ico svg { width: 15px; height: 15px; } }
@media (prefers-reduced-motion: reduce) { .presente-faixa, .presente-faixa::after { animation: none; } }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.035em; text-wrap: balance; }
h1 { font-size: clamp(40px, 6.2vw, 76px); line-height: 1.02; }
h2 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.06; }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; font-weight: 650; }
h1 em, h2 em { font-style: normal; color: var(--laranja-titulo); }
.lead { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: var(--cinza); margin: 0; max-width: 60ch; }
.escuro .lead { color: #A7ADBD; }
.cab { display: grid; gap: 16px; margin-bottom: 56px; }
.cab .selo, .final-txt .selo { justify-self: start; }
.cab.centro { justify-items: center; text-align: center; }
.cab.centro .selo { justify-self: center; }
.cab.centro .lead { margin: 0 auto; }
.cab.lado { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 24px 64px; }
.cab.lado .selo { grid-column: 1 / -1; justify-self: start; }

/* ---------------------------------------------------------------- botões de vidro */
.bt { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 99px; border: 0; font: inherit; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s; -webkit-tap-highlight-color: transparent; }
.bt:active { transform: scale(.97); }
.bt .seta { transition: transform .35s var(--ease); }

/* laranja: vidro com brilho em cima (reflexo) e sombra colorida embaixo */
.bt-vidro { color: #fff; text-shadow: 0 1px 1px rgba(110, 35, 0, .35); background: linear-gradient(180deg, #F2711A 0%, var(--laranja-botao) 55%, #C44B00 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(120, 40, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 28px -10px rgba(255, 107, 0, .75), 0 2px 6px -2px rgba(160, 60, 0, .35); }
.bt-vidro::before { content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; top: 2px; height: 48%; border-radius: 99px; background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); pointer-events: none; }
.bt-vidro::after { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(120px 60px at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .35), transparent 70%); opacity: 0; transition: opacity .3s; pointer-events: none; }


/* claro: vidro fosco */
.bt-claro { color: var(--tinta); background: rgba(255, 255, 255, .62); backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(21, 24, 38, .1), 0 6px 18px -10px rgba(21, 24, 38, .25); }

.escuro .bt-claro, .bt-claro.no-escuro { color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .14); }

.bt-branco { color: var(--laranja-texto); background: #fff; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08), 0 10px 28px -12px rgba(0, 0, 0, .45); }

.bt-p { height: 40px; padding: 0 18px; font-size: 14px; }

/* ---------------------------------------------------------------- topo de vidro */
.topo { position: fixed; z-index: 40; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 12px); padding: 0 16px; pointer-events: none; }
.topo-in { pointer-events: auto; max-width: 1180px; margin: 0 auto; height: 64px; display: flex; align-items: center; gap: 24px; padding: 0 8px 0 20px; border-radius: 99px;
  background: rgba(255, 255, 255, .64); backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(21, 24, 38, .07), 0 10px 32px -14px rgba(21, 24, 38, .22); transition: background .4s, box-shadow .4s, color .4s; }
.topo.escuro .topo-in { color: #fff; background: rgba(22, 25, 40, .62); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 32px -14px rgba(0, 0, 0, .5); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.marca img { width: 32px; height: 32px; }
.menu { display: flex; gap: 4px; }
.menu a { text-decoration: none; font-size: 14.5px; font-weight: 550; color: inherit; opacity: .72; padding: 8px 12px; border-radius: 99px; transition: opacity .2s, background .2s; }


.topo .acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.entrar { text-decoration: none; font-weight: 600; font-size: 14.5px; padding: 10px 14px; border-radius: 99px; }


/* ---------------------------------------------------------------- abertura (texto à esquerda, tela real rodando à direita) */
.abertura { position: relative; padding: calc(env(safe-area-inset-top, 0px) + 136px) 0 24px; overflow: clip; }
.abertura::before { content: ""; position: absolute; inset: 0 0 auto; height: 1000px; background: radial-gradient(55% 55% at 72% 30%, rgba(255, 138, 51, .16), transparent 70%), radial-gradient(40% 40% at 10% 10%, rgba(255, 107, 0, .06), transparent 70%); pointer-events: none; }
.ab-grade { position: relative; max-width: 1320px; margin: 0 auto; padding: 0 var(--lado); display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; align-items: center; }
.ab-texto { display: grid; gap: 24px; justify-items: start; }
.abertura h1 { font-size: clamp(40px, 3.9vw, 56px); }
.abertura h1 em { display: block; }
.abertura .lead { max-width: 46ch; }
.botoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.garantias { display: flex; gap: 8px 20px; flex-wrap: wrap; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cinza); }
.garantias span { display: inline-flex; align-items: center; gap: 8px; }
.garantias span::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--laranja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/10px no-repeat; }
.ab-palco { position: relative; min-width: 0; padding: 40px 0 0; }

/* palco das telas: o notebook vem "deitado" e levanta ao rolar; fica de ladinho e mexe com o mouse */
.palco { position: relative; width: 100%; margin: 0; perspective: 2000px; --rx: 4deg; --ry: 12deg; --s: .97; --ty: 0px; --mx: 0deg; --my: 0deg; }
.janela-pilha { position: relative; transform-style: preserve-3d; transform: translateY(var(--ty)) rotateX(calc(var(--rx) + var(--my))) rotateY(calc(var(--ry) + var(--mx))) scale(var(--s)); transform-origin: 0% 50%; transition: transform .8s var(--ease); will-change: transform; }
.janela-pilha.rolando { transition: transform .12s linear; }
/* janelas de trás (o "baralho") */
.janela-fundo { position: absolute; left: 50%; top: 0; width: 100%; height: 46px; border-radius: 16px 16px 0 0; background: #fff; box-shadow: inset 0 0 0 1px rgba(21, 24, 38, .08); transform-origin: 50% 100%; display: flex; align-items: flex-start; padding-top: 4px; line-height: 14px; justify-content: center; font-size: 11.5px; color: var(--cinza-claro); transition: opacity .4s; }
.janela-fundo.f1 { transform: translate(-50%, -22px) scale(.94); }
.janela-fundo.f2 { transform: translate(-50%, -40px) scale(.88); opacity: .7; }
.janela { position: relative; border-radius: 16px; background: #fff; box-shadow: var(--sombra-tela), inset 0 0 0 1px rgba(21, 24, 38, .08); overflow: hidden; }
.janela-barra { height: 40px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--linha); background: linear-gradient(#FBFBFC, #F4F5F7); }
.bolinhas { display: flex; gap: 7px; }
.bolinhas i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.bolinhas i:nth-child(2) { background: #FEBC2E; } .bolinhas i:nth-child(3) { background: #28C840; }
.endereco { height: 24px; padding: 0 14px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--linha); font-size: 12px; color: var(--cinza); display: flex; align-items: center; gap: 6px; }
.endereco::before { content: ""; width: 9px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B91A2' stroke-width='3' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat; }
.telas { position: relative; aspect-ratio: 16 / 10; background: #F3F4F7; }
.tela { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease), transform .8s var(--ease); transform: scale(1.015); pointer-events: none; }
.tela.ativa { opacity: 1; transform: none; }
.tela video, .tela img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.seta-nav { position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--tinta);
  background: rgba(255, 255, 255, .72); backdrop-filter: blur(12px) saturate(1.6); -webkit-backdrop-filter: blur(12px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(21, 24, 38, .1), 0 8px 20px -10px rgba(21, 24, 38, .4); transition: transform .3s var(--ease), background .2s; }

.palco .seta-nav.esq { left: -22px; } .palco .seta-nav.dir { right: -22px; }
.seta-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* abas das 7 telas (puláveis) */
.abas-telas { display: flex; justify-content: center; gap: 2px; flex-wrap: wrap; margin: 64px auto 0; padding: 5px; width: max-content; max-width: 100%; border-radius: 99px; background: var(--fundo-2); box-shadow: inset 0 0 0 1px var(--linha); }
.abas-telas button { position: relative; overflow: hidden; border: 0; background: none; height: 34px; padding: 0 13px; border-radius: 99px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--cinza); cursor: pointer; transition: color .25s, background .25s; }

.abas-telas button.on { color: var(--tinta); background: #fff; box-shadow: 0 1px 2px rgba(21, 24, 38, .08), inset 0 0 0 1px var(--linha); }
.abas-telas button .prog { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: rgba(255, 107, 0, .16); overflow: hidden; opacity: 0; }
.abas-telas button.on .prog { opacity: 1; }
.abas-telas button .prog i { display: block; height: 100%; width: 100%; background: var(--laranja); transform-origin: left; transform: scaleX(var(--p, 0)); }
.legenda-tela { margin: 14px auto 0; font-size: 14.5px; color: var(--cinza); min-height: 24px; text-align: center; max-width: 52ch; }

/* ---------------------------------------------------------------- seções */
.secao { padding: 128px 0; position: relative; }
.secao.cinza { background: var(--fundo-2); }
.secao.junto { padding-top: 0; }

/* o que muda: 4 itens em 2 colunas */
.muda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; }
.muda li { list-style: none; display: grid; grid-template-columns: 48px 1fr; gap: 4px 20px; padding: 32px 0; border-top: 1px solid var(--linha); }
.muda ul { margin: 0; padding: 0; display: contents; }
.ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(180deg, #FFF6EE, #FFE8D6); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 107, 0, .14); grid-row: span 2; }
.ico svg { width: 22px; height: 22px; fill: none; stroke: var(--laranja); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.muda p { margin: 0; color: var(--cinza); }

/* funções: bloco escuro com abas, cada uma com a tela real rodando */
.funcoes-bloco { position: relative; border-radius: 32px; background: radial-gradient(80% 60% at 70% 0%, #2A2F48 0%, transparent 60%), linear-gradient(180deg, #1A1E30 0%, #12141F 100%); color: #fff; padding: 72px 64px 48px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(21, 24, 38, .6); }
.funcoes-bloco::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 300px at 15% 100%, rgba(255, 107, 0, .18), transparent 70%); pointer-events: none; }
.funcoes-bloco .cab { position: relative; }
/* a janela fica à esquerda, de ladinho; o texto e os cartões de vidro à direita. A janela nunca muda de tamanho. */
.f-palco { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "tela cab" "tela cartoes"; gap: 24px 56px; align-items: center; }
.f-cab { grid-area: cab; align-self: end; display: grid; gap: 16px; }
.f-cab h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.03em; }
.f-cab p { margin: 0; color: #A7ADBD; font-size: 16.5px; }
.f-num { display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 14px 0 6px; border-radius: 99px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #C9CDD8; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--linha-escura); }
.f-num b { display: grid; place-items: center; height: 20px; padding: 0 7px; border-radius: 99px; background: var(--laranja-texto); color: #fff; font-weight: 700; letter-spacing: .04em; }
.f-tela { grid-area: tela; position: relative; perspective: 1800px; }
.f-moldura { position: relative; transform-style: preserve-3d; transform: rotateY(calc(9deg + var(--mx, 0deg))) rotateX(calc(3deg + var(--my, 0deg))); transition: transform .8s var(--ease); }
.f-tela .janela { box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8), 0 14px 30px -16px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.f-tela .seta-nav.esq { left: -22px; } .f-tela .seta-nav.dir { right: -22px; }
/* cartões de vidro ("silicone") com iconezinho */
.f-cartoes { grid-area: cartoes; align-self: start; list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.f-cartoes li { position: relative; display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 16px; min-height: 76px; padding: 14px 18px 14px 14px; border-radius: 20px; color: #E4E6EE; font-size: 15.5px; font-weight: 550; line-height: 1.4;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .035)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .09), 0 18px 36px -24px rgba(0, 0, 0, .7);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
.f-txt b { display: block; color: #fff; font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; }
.f-txt span { display: block; margin-top: 3px; color: #A7ADBD; font-size: 13.5px; font-weight: 450; line-height: 1.45; }
.f-cartoes li::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 46%); pointer-events: none; }
.f-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(180deg, rgba(255, 138, 51, .3), rgba(255, 107, 0, .12)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 138, 51, .38), 0 8px 18px -10px rgba(255, 107, 0, .6); }
.f-ic svg { width: 21px; height: 21px; fill: none; stroke: #FFB27A; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.f-troca { animation: f-entra .6s var(--ease) both; }
@keyframes f-entra { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
/* embaixo: um iconezinho de vidro por função (o da vez fica branco) */
.f-nav { position: relative; display: grid; justify-items: center; gap: 18px; margin-top: 56px; }
.f-icones { display: flex; gap: 10px; max-width: 100%; }
.f-icones button { position: relative; flex: none; width: 52px; height: 52px; border: 0; border-radius: 16px; display: grid; place-items: center; cursor: pointer; color: #C3C8D4;
  background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 20px -14px rgba(0, 0, 0, .7);
  transition: transform .3s var(--ease), color .25s, background .25s, box-shadow .25s; }

.f-icones button.on { color: var(--laranja); background: linear-gradient(180deg, #FFFFFF, #EEF0F4); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 255, 255, .5), 0 12px 26px -10px rgba(255, 107, 0, .6); }
.f-icones svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.f-icones button::after { content: attr(data-nome); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 4px); white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: #fff; color: var(--tinta); font-size: 12.5px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
@media (hover: hover) { .f-icones button:hover::after { opacity: 1; transform: translate(-50%, 0); } }
.f-linha { display: flex; align-items: center; gap: 14px; width: min(420px, 100%); color: #8B91A2; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.f-linha .barra { flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.f-linha .barra i { display: block; height: 100%; background: var(--laranja); transform-origin: left; transform: scaleX(var(--p, 0)); }
/* aviso que salta do canto da janela quando algo acontece na tela (ex.: pedido chegou) */
.aviso-flutua { position: absolute; z-index: 5; left: -32px; bottom: 12%; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 18px; min-width: 230px; max-width: 300px; color: var(--tinta); pointer-events: none;
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(21, 24, 38, .06), 0 24px 48px -18px rgba(21, 24, 38, .45), 0 8px 16px -10px rgba(21, 24, 38, .25);
  opacity: 0; transform: translateZ(60px) translateY(10px) scale(.92); filter: blur(6px); transition: opacity .45s ease, transform .7s var(--mola), filter .45s ease; }
.aviso-flutua.on { opacity: 1; transform: translateZ(60px); filter: none; }
.aviso-flutua .av-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(180deg, #FFF6EE, #FFE6D2); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 107, 0, .16); }
.aviso-flutua .av-ic svg { width: 20px; height: 20px; fill: none; stroke: var(--laranja); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.aviso-flutua b { display: block; font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.aviso-flutua small { display: block; color: var(--cinza); font-size: 12.5px; line-height: 1.35; margin-top: 2px; }

/* sem × com */
.compara { display: grid; gap: 12px; }
.compara-cab, .compara-linha { display: grid; grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.compara-cab span { font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza-claro); padding: 0 20px; }
.compara-cab span.com { color: var(--laranja-texto); }
.compara-linha > b { align-self: center; font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza-claro); }
.compara-linha > div { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 18px 20px; border-radius: var(--raio-p); font-size: 15.5px; line-height: 1.5; }
.compara-linha .sem { background: var(--fundo-2); color: var(--cinza); }
.compara-linha .com { background: #fff; color: var(--tinta); box-shadow: inset 0 0 0 1.5px rgba(255, 107, 0, .3), 0 12px 28px -18px rgba(255, 107, 0, .55); }
.compara-linha i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.compara-linha .sem i { background: #E3E5EA; }
.compara-linha .com i { background: var(--laranja); }
.compara-linha i svg { width: 12px; height: 12px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.compara-linha .sem i svg { stroke: #8B91A2; } .compara-linha .com i svg { stroke: #fff; }

/* 3 passos */
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: passo; }
.passos li { counter-increment: passo; position: relative; padding: 32px; border-radius: var(--raio); background: #fff; box-shadow: inset 0 0 0 1px var(--linha); display: grid; gap: 8px; align-content: start; min-height: 220px; }
.passos li::before { content: counter(passo, decimal-leading-zero); font-size: 48px; font-weight: 650; letter-spacing: -0.04em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 107, 0, .55); margin-bottom: 24px; }
.passos p { margin: 0; color: var(--cinza); }
.centro-bt { display: flex; justify-content: center; margin-top: 48px; }

/* depoimentos (fotos dos lojistas) */
.depo-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.depo-card { position: relative; margin: 0; min-height: 440px; border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: 28px; color: #fff; background: var(--tinta); box-shadow: 0 30px 60px -36px rgba(21, 24, 38, .6); transition: transform .6s var(--ease); }

.depo-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }

.depo-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(10, 12, 20, .88) 100%); }
.depo-card > *:not(img):not(.depo-fundo) { position: relative; z-index: 1; }
.depo-estrelas { color: #FFB547; letter-spacing: 2px; font-size: 14px; }
.depo-card blockquote { margin: 0; font-size: 19px; line-height: 1.4; font-weight: 600; letter-spacing: -0.015em; }
.depo-quem { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.depo-quem img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #fff; }
.depo-quem b { display: block; } .depo-quem span span { color: #C9CDD8; font-size: 13px; }
.depo-quem .ini { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--laranja); font-weight: 700; }
.depo-mande { text-align: center; margin: 32px 0 0; color: var(--cinza); font-size: 15px; }
.depo-mande a { color: var(--laranja-texto); font-weight: 650; text-decoration: none; }

/* planos */
.alternar { display: inline-flex; background: #fff; box-shadow: inset 0 0 0 1px var(--linha); border-radius: 99px; padding: 4px; gap: 4px; }
.alternar button { border: 0; background: none; border-radius: 99px; height: 40px; padding: 0 20px; font: inherit; font-weight: 600; font-size: 14.5px; color: var(--cinza); cursor: pointer; }
.alternar button[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.alternar em { font-style: normal; color: var(--ok-texto); font-weight: 700; margin-left: 4px; }
.alternar button[aria-pressed="true"] em { color: #7FE0B0; }
.planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plano { position: relative; background: #fff; border-radius: var(--raio); padding: 32px; display: flex; flex-direction: column; box-shadow: inset 0 0 0 1px var(--linha); }
.plano.dest { box-shadow: inset 0 0 0 2px var(--laranja), 0 30px 60px -30px rgba(255, 107, 0, .45); }
.plano .fita { position: absolute; top: -13px; left: 32px; height: 26px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 99px; color: #fff; font-size: 12px; font-weight: 700; background: linear-gradient(180deg, #E86000, var(--laranja-texto)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.plano h3 { font-size: 22px; }
.plano .frase { color: var(--cinza); font-size: 14.5px; margin: 8px 0 24px; min-height: 46px; }
.plano .valor { display: flex; align-items: baseline; gap: 4px; }
/* aluno MPW (link do cupom): preço cheio riscado e o motivo do desconto, pequeno, em cima do valor */
.plano .valor-de { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 8px; color: var(--cinza); font-size: 13px; }
.plano .valor-de s { text-decoration-thickness: 1.5px; }
.plano .valor-de em { font-style: normal; font-size: 11.5px; font-weight: 650; color: var(--ok-texto); background: #E9F7EF; padding: 2px 8px; border-radius: 99px; }
.aluno-planos { display: inline-block; margin: 14px auto 0; padding: 7px 16px; border-radius: 14px; background: #E9F7EF; color: var(--ok-texto); font-size: 13.5px; line-height: 1.5; animation: aluno-entra .6s var(--ease) both; }
.aluno-planos b { font-weight: 700; }
@keyframes aluno-entra { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .aluno-planos { animation: none; } }
.plano .valor b { font-size: 44px; font-weight: 650; letter-spacing: -0.04em; line-height: 1; }
.plano .valor small { color: var(--cinza); font-size: 14px; }
.plano .detalhe { color: var(--cinza); font-size: 13px; min-height: 40px; line-height: 1.5; margin-top: 8px; }
.plano .detalhe em { font-style: normal; color: #0E7A4A; font-weight: 650; }
.plano .bt { margin: 24px 0; width: 100%; }
.plano ul { list-style: none; padding: 24px 0 0; margin: 0; border-top: 1px solid var(--linha); display: grid; gap: 12px; font-size: 14.5px; }
.plano li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.plano li::before { content: ""; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--laranja-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6B00' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/11px no-repeat; }
.plano li.mais { font-weight: 650; } .plano li.mais::before { background: none; }
.nota-planos { max-width: 72ch; margin-left: auto; margin-right: auto; text-align: center; color: var(--cinza); font-size: 14px; margin: 32px auto 0; max-width: 70ch; }

/* perguntas em 2 colunas */
.perguntas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; align-items: start; }
.perguntas details { border-top: 1px solid var(--linha); }
.perguntas summary { cursor: pointer; list-style: none; padding: 22px 0; font-weight: 600; font-size: 16px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--fundo-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151826' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/12px no-repeat; transition: transform .35s var(--ease), background-color .2s; }
.perguntas details[open] summary::after { transform: rotate(45deg); background-color: var(--laranja-suave); }
.perguntas details p { margin: -6px 0 22px; color: var(--cinza); line-height: 1.65; max-width: 60ch; }

/* chamada final: bloco laranja que abre do centro */
.final { position: relative; overflow: hidden; border-radius: 32px; padding: 88px 72px; color: #fff; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: center;
  background: linear-gradient(135deg, #D85700 0%, #C44B00 50%, #A23C00 100%); box-shadow: 0 50px 100px -50px rgba(255, 107, 0, .8); }
.final::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 420px; height: 420px; background: url("logo.svg") center/contain no-repeat; opacity: .08; transform: rotate(-12deg); pointer-events: none; }
.final .selo { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); color: #fff; }
.final .selo::before { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); }
.final h2 { color: #fff; } .final h2 em { color: #FFE2CC; }
.final .lead { color: #fff; }
.final-txt { display: grid; gap: 20px; justify-items: start; position: relative; z-index: 1; }
.incluso { position: relative; z-index: 1; border-radius: 20px; padding: 28px; background: rgba(0, 0, 0, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); backdrop-filter: blur(6px); }
.incluso small { display: block; font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .92); margin-bottom: 16px; }
.incluso ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.incluso li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: 15.5px; }
.incluso li::before { content: "→"; color: rgba(255, 255, 255, .7); }

/* rodapé */
.rodape { background: #0E1019; color: #A7ADBD; padding: 96px 0 40px; margin-top: 128px; }
.rodape-grade { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 48px; padding-bottom: 64px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.rodape .marca { color: #fff; margin-bottom: 16px; }
.rodape-frase { color: #fff; font-size: 22px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.3; margin: 0; max-width: 18ch; }
.rodape-frase em { font-style: normal; color: var(--laranja-2); }
.rodape h4 { margin: 0 0 16px; font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: #9096A8; }
.rodape nav { display: grid; gap: 12px; font-size: 15px; }
.rodape a { text-decoration: none; transition: color .2s; }
.rodape-fim { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 32px; font-size: 13px; color: #9096A8; }

/* ---------------------------------------------------------------- cadastro (janela) */
.cadastro { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(14, 16, 25, .48); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s var(--ease); }
.cadastro.on { opacity: 1; }
.ficha { position: relative; width: min(480px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: #fff; border-radius: 28px; padding: 36px 32px 28px; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .5); transform: translateY(24px) scale(.97); transition: transform .5s var(--ease); }
.cadastro.on .ficha { transform: none; }
.ficha-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--fundo-2); cursor: pointer; display: grid; place-items: center; }
.ficha-x svg { width: 14px; height: 14px; stroke: var(--tinta); stroke-width: 2.4; stroke-linecap: round; }
.ficha h2 { font-size: 26px; letter-spacing: -0.03em; }
.ficha h2 b { color: var(--laranja); font-weight: 650; }
.ficha > div > p { margin: 8px 0 24px; color: var(--cinza); font-size: 15px; }
.ficha form { display: grid; gap: 12px; }
.ficha input:not([type=checkbox]) { width: 100%; height: 50px; border: 1.5px solid var(--linha); border-radius: 14px; padding: 0 16px; font: inherit; font-size: 15.5px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.ficha input:focus { border-color: var(--laranja); outline: none; box-shadow: 0 0 0 4px rgba(255, 107, 0, .12); }
.ficha .bt { width: 100%; margin-top: 4px; height: 54px; }
.ficha .letra { font-size: 13.5px; color: var(--cinza); text-align: center; margin: 4px 0 0; }
.ficha .letra a { color: var(--laranja-escuro); font-weight: 650; }
.ficha .err { color: #C93A3F; background: #FDE8E8; border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.ficha .dica { color: var(--cinza); font-size: 12.5px; margin-top: -4px; }
.ficha .indicado { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 6px 12px; border-radius: 99px; background: var(--laranja-suave); color: var(--laranja-escuro); font-size: 13px; font-weight: 650; }
.ficha .aceite { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--cinza); line-height: 1.45; cursor: pointer; }
.ficha .aceite input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--laranja); }
.ficha .aceite a { color: var(--laranja-escuro); }
.ver-senha-wrap { position: relative; }
body.sem-rolar { overflow: hidden; }

/* oferta depois do cadastro */
.oferta { position: fixed; inset: 0; z-index: 70; background: #fff; overflow-y: auto; display: flex; flex-direction: column; }
.of-faixa { position: relative; background: linear-gradient(160deg, #FF8A33 0%, #FF6B00 55%, #E85D00 100%); height: 250px; flex: none; overflow: hidden; }
.of-fita { position: absolute; left: -10%; width: 120%; height: 30px; background: #151826; color: #FFD3B0; font-weight: 750; font-size: 13px; letter-spacing: .08em; white-space: nowrap; display: flex; align-items: center; overflow: hidden; }
.of-fita::before { content: 'OFERTA DE CADASTRO  ·  OFERTA DE CADASTRO  ·  OFERTA DE CADASTRO  ·  OFERTA DE CADASTRO  ·  OFERTA DE CADASTRO  ·  OFERTA DE CADASTRO  ·  OFERTA DE CADASTRO  ·  OFERTA DE CADASTRO'; padding-left: 12px; }
.of-f1 { top: 26px; transform: rotate(-3deg); } .of-f2 { bottom: 26px; transform: rotate(2deg); }
.of-palco { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 22px; }
.of-cartao { background: #151826; color: #fff; border-radius: 16px; padding: 14px 18px; box-shadow: 0 16px 40px rgba(0,0,0,.25); display: grid; gap: 2px; min-width: 170px; }
.of-cartao small { color: #FFB27A; font-weight: 650; font-size: 12px; }
.of-cartao b { font-size: 30px; font-weight: 750; letter-spacing: -0.02em; }
.of-cartao span { color: #B8BDD0; font-size: 12.5px; }
.of-mascote { width: 120px; height: 120px; filter: drop-shadow(0 14px 24px rgba(0,0,0,.25)); background: #fff; border-radius: 50%; padding: 6px; }
.of-corpo { width: 100%; max-width: 460px; margin: 0 auto; padding: 26px 20px 40px; display: flex; flex-direction: column; gap: 16px; }
.of-corpo h2 { font-size: 22px; text-align: center; letter-spacing: -0.02em; }
.of-preco { display: flex; align-items: center; gap: 16px; background: var(--fundo-2); border-radius: 14px; padding: 14px 16px; }
.of-off { background: #FFE2CC; color: var(--laranja-escuro); font-weight: 750; border-radius: 10px; padding: 8px 12px; font-size: 16px; white-space: nowrap; }
.of-preco s { color: var(--cinza); font-size: 13px; } .of-preco b { font-size: 24px; font-weight: 750; letter-spacing: -0.02em; } .of-preco small { color: var(--cinza); font-size: 12.5px; display: block; }
.of-corpo ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.of-corpo li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; font-size: 15px; }
.of-corpo li i { width: 34px; height: 34px; border-radius: 50%; background: var(--laranja-suave); display: grid; place-items: center; }
.of-corpo li svg { width: 18px; height: 18px; fill: none; stroke: var(--laranja); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.of-teste { margin: 0; text-align: center; color: var(--cinza); font-size: 13.5px; }
.of-sim { width: 100%; }
.of-nao { background: none; border: 0; color: var(--cinza); text-decoration: underline; font: inherit; font-size: 14.5px; padding: 6px; cursor: pointer; }

/* WhatsApp e barrinha do celular */
.zap-flutua { position: fixed; z-index: 30; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 14px; border-radius: 99px; color: #fff; text-decoration: none; font-weight: 650; font-size: 14.5px; text-shadow: 0 1px 1px rgba(0, 60, 25, .35); background: linear-gradient(180deg, #22B05C, #128A45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 12px 28px -12px rgba(20, 140, 70, .8); transition: transform .4s var(--ease), opacity .3s; }
.zap-flutua svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }

.barra-cel { display: none; }

/* ---------------------------------------------------------------- movimento ao rolar */
/* palavras: saem do desfoque, uma depois da outra */
.rv-palavras .pl { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(.45em) rotate(2deg); transition: opacity .45s ease, transform .6s var(--ease), filter .5s ease; transition-delay: calc(var(--i, 0) * 32ms); }
.rv-palavras.on .pl { opacity: 1; filter: none; transform: none; }
.rv { opacity: 0; transform: translateY(20px); filter: blur(4px); transition: opacity .5s ease, transform .7s var(--ease), filter .6s ease; transition-delay: var(--d, 0ms); }
.rv.on { opacity: 1; transform: none; filter: none; }
.rv-cartao { opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .5s ease, transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.rv-cartao.on { opacity: 1; transform: none; }
.rv-abre { clip-path: inset(8% 6% round 56px); transition: clip-path 1s var(--ease); }
.rv-abre.on { clip-path: inset(0 round 32px); }
@media (prefers-reduced-motion: reduce) {
  .rv-palavras .pl, .rv, .rv-cartao { opacity: 1; filter: none; transform: none; transition: none; }
  .rv-abre { clip-path: none; transition: none; }
    .janela-pilha { transition: none; }
}

/* ---------------------------------------------------------------- telas menores */
@media (max-width: 1080px) {
  .menu { display: none; }
  .ab-grade { grid-template-columns: 1fr; gap: 40px; }
  .ab-palco { padding: 24px 24px 0 32px; }
  .cab.lado { grid-template-columns: 1fr; }
  .funcoes-bloco { padding: 56px 32px 40px; }
  .f-palco { grid-template-columns: 1fr; grid-template-areas: "cab" "tela" "cartoes"; gap: 32px; }
  .f-cab { justify-items: center; text-align: center; max-width: 620px; margin: 0 auto; }
  .f-cartoes { width: 100%; max-width: 620px; margin: 0 auto; }
  .f-moldura { transform: rotateY(calc(5deg + var(--mx, 0deg))) rotateX(calc(2deg + var(--my, 0deg))); }
  .planos { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .plano .frase { min-height: 0; }
  .final { grid-template-columns: 1fr; padding: 64px 40px; }
  .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .depo-lista { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .depo-card { min-height: 380px; }
}
@media (max-width: 720px) {
  :root { --lado: max(16px, env(safe-area-inset-left, 0px)); }
  .wrap { padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  body { font-size: 15.5px; }
  .topo { top: calc(env(safe-area-inset-top, 0px) + 8px); padding: 0 8px; }
  .topo-in { height: 56px; padding: 0 6px 0 14px; gap: 8px; }
  .marca { font-size: 17px; } .marca img { width: 28px; height: 28px; }
  .entrar { padding: 8px 10px; font-size: 14px; }
  .topo .bt-p { padding: 0 14px; }
  .abertura { padding-top: calc(env(safe-area-inset-top, 0px) + 104px); }
  .ab-texto { gap: 18px; }
  .abertura h1 { font-size: 40px; }
  .abertura .lead { font-size: 16px; }
  .so-pc { display: none !important; }
  .ab-palco { padding: 16px 8px 0 20px; }
  .botoes { width: 100%; flex-direction: column; }
  .botoes .bt { width: 100%; }
  .garantias { justify-content: flex-start; gap: 8px 16px; font-size: 11px; }
  .seta-nav { width: 36px; height: 36px; margin-top: -18px; }
  .palco .seta-nav.esq, .f-tela .seta-nav.esq { left: -10px; } .palco .seta-nav.dir, .f-tela .seta-nav.dir { right: -10px; }
  .aviso-flutua { left: -6px; bottom: -22px; min-width: 0; max-width: 240px; padding: 9px 14px 9px 9px; gap: 10px; border-radius: 14px; }
  .aviso-flutua .av-ic { width: 32px; height: 32px; border-radius: 10px; } .aviso-flutua .av-ic svg { width: 17px; height: 17px; }
  .aviso-flutua b { font-size: 13px; } .aviso-flutua small { font-size: 11.5px; }
  .janela-barra { height: 28px; padding: 0 10px; } .bolinhas i { width: 8px; height: 8px; } .bolinhas { gap: 5px; } .endereco { height: 18px; font-size: 10px; padding: 0 8px; }
  .janela-fundo { height: 30px; font-size: 9px; border-radius: 12px 12px 0 0; }
  .janela { border-radius: 12px; }
    .abas-telas { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: auto; margin: 40px 0 0; max-width: none; }
  .abas-telas::-webkit-scrollbar { display: none; }
  .abas-telas button { flex: none; height: 34px; padding: 0 14px; font-size: 13px; }
  .legenda-tela { font-size: 14px; }
  .secao { padding: 88px 0; }
  .cab { margin-bottom: 40px; }
  .muda { grid-template-columns: 1fr; }
  .muda li { padding: 24px 0; grid-template-columns: 44px 1fr; gap: 4px 16px; }
  .ico { width: 44px; height: 44px; }
  .funcoes-bloco { border-radius: 24px; padding: 40px 20px 28px; margin: 0 calc(-1 * var(--lado) + 8px); }
  .f-palco { gap: 24px; }
  .f-cab { gap: 12px; }
  .f-cab h3 { font-size: 24px; }
  .f-cab p { font-size: 15.5px; }
  .f-moldura { transform: rotateY(4deg) rotateX(2deg); }
  .f-cartoes { gap: 10px; margin-top: 12px; }
  .f-cartoes li { min-height: 68px; grid-template-columns: 40px 1fr; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 18px; font-size: 14.5px; }
  .f-txt b { font-size: 14.5px; } .f-txt span { font-size: 13px; }
  .f-ic { width: 40px; height: 40px; border-radius: 13px; }
  .f-nav { margin: 36px -20px 0; gap: 16px; }
  .f-icones { overflow-x: auto; scrollbar-width: none; padding: 6px 20px; scroll-snap-type: x proximity; }
  .f-icones::-webkit-scrollbar { display: none; }
  .f-icones button { width: 48px; height: 48px; border-radius: 15px; scroll-snap-align: center; }
  .f-linha { width: auto; margin: 0 20px; justify-self: stretch; }
      .compara-cab { display: none; }
  .compara-linha { grid-template-columns: 1fr; gap: 8px; padding-bottom: 16px; }
  .compara-linha > b { margin-top: 8px; }
  .passos { grid-template-columns: 1fr; }
  .passos li { min-height: 0; padding: 28px; }
  .perguntas { grid-template-columns: 1fr; }
  .final { padding: 48px 24px; border-radius: 24px; gap: 32px; }
  .final .bt { width: 100%; }
  .final-txt { justify-items: stretch; }
  .rodape { padding: 72px 0 calc(env(safe-area-inset-bottom, 0px) + 96px); margin-top: 88px; }
  .rodape-grade { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .rodape-grade > div:first-child { grid-column: 1 / -1; }
  .ficha { padding: 32px 20px 24px; border-radius: 24px; }
  .zap-flutua { padding: 0; width: 52px; height: 52px; justify-content: center; bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }
  .zap-flutua span { display: none; }
  body:not(.passou-topo) .zap-flutua { opacity: 0; transform: scale(.8); pointer-events: none; }
  .barra-cel { display: flex; position: fixed; z-index: 30; left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 99px;
    background: rgba(255, 255, 255, .78); backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(21, 24, 38, .08), 0 16px 40px -16px rgba(21, 24, 38, .4);
    transform: translateY(140%); transition: transform .5s var(--ease); }
  .barra-cel.on { transform: none; }
  .barra-cel div { display: grid; line-height: 1.25; font-size: 13.5px; } .barra-cel small { color: var(--cinza); font-size: 12px; }
  .barra-cel .bt { margin-left: auto; height: 44px; padding: 0 18px; font-size: 14.5px; }
}

/* efeitos de passar o mouse: só com mouse de verdade (no celular o toque deixava o botão "levantado") */
@media (hover: hover) and (pointer: fine) {
  .bt:hover .seta { transform: translateX(4px); }
  .bt-vidro:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(120, 40, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .18), 0 16px 36px -12px rgba(255, 107, 0, .85), 0 2px 6px -2px rgba(160, 60, 0, .35); }
  .bt-vidro:hover::after { opacity: 1; }
  .bt-claro:hover { background: rgba(255, 255, 255, .9); transform: translateY(-1px); }
  .escuro .bt-claro:hover { background: rgba(255, 255, 255, .14); }
  .bt-branco:hover { transform: translateY(-1px); }
  .menu a:hover { opacity: 1; background: rgba(21, 24, 38, .05); }
  .topo.escuro .menu a:hover { background: rgba(255, 255, 255, .08); }
  .entrar:hover { background: rgba(21, 24, 38, .05); }
  .seta-nav:hover { background: #fff; transform: scale(1.06); }
  .abas-telas button:hover { color: var(--tinta); }
  .f-icones button:not(.on):hover { color: #fff; transform: translateY(-2px); }
  .depo-card:hover { transform: translateY(-6px); }
  .depo-card:hover .depo-fundo { transform: scale(1.04); }
  .rodape a:hover { color: #fff; }
  .zap-flutua:hover { transform: translateY(-2px); }
}
/* celular: entra só com movimento e transparência, sem desfoque (pesa em celular fraco) */
@media (pointer: coarse) {
  .rv-palavras .pl, .rv { filter: none !important; }
  .f-troca { animation-name: f-entra-leve; }
}
@keyframes f-entra-leve { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }