/* ==================================================================
   RENOVA ECOPEÇAS · Landing page premium (mobile-first)
   ================================================================== */

:root{
  --verde:#12b866; --verde-2:#0f9d58; --verde-3:#0b7a44; --verde-4:#075232;
  --lima:#8ff0a4;
  --tinta:#0c1f16; --tinta-2:#10231a;
  --cinza:#5a6b62; --cinza-2:#8a988f;
  --branco:#ffffff; --creme:#f4fbf7; --creme-2:#eafaf0;
  --borda:#e0efe7;
  --glass:rgba(255,255,255,.72);
  --sombra:0 12px 34px rgba(11,122,68,.14);
  --sombra-forte:0 26px 60px rgba(11,122,68,.28);
  --raio:22px; --raio-sm:14px;
  --topo:72px;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--tinta); background:var(--branco); line-height:1.55; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(86px + env(safe-area-inset-bottom));
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
.wrap{ width:100%; max-width:600px; margin:0 auto; padding:0 20px; position:relative; z-index:2; }

/* animações-base para reveal */
[data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal="left"]{ transform:translateX(-34px); }
[data-reveal="right"]{ transform:translateX(34px); }
[data-reveal="zoom"]{ transform:scale(.9); }
[data-reveal].vis{ opacity:1; transform:none; }

/* ---------- Barra topo ---------- */
header.topo{
  position:sticky; top:0; z-index:80; height:var(--topo);
  display:flex; align-items:center; justify-content:space-between; padding:0 20px;
  background:rgba(255,255,255,0.96);
  border-bottom:1px solid var(--borda); transition:box-shadow .3s ease;
  transform:translateZ(0); /* Força aceleração por GPU */
}
header.topo.scrolled{ box-shadow:0 8px 24px rgba(11,122,68,.08); }
.marca{ display:flex; align-items:center; }
.marca .logo-img{ height:48px; width:auto; display:block; }
.topo .mini-cta{ background:linear-gradient(135deg,var(--verde),var(--verde-3)); color:#fff; font-weight:700; font-size:13px; padding:9px 15px; border-radius:999px; box-shadow:var(--sombra); transition:transform .15s ease; cursor:pointer; }
.topo .mini-cta:active{ transform:scale(.94); }

/* ---------- Faixa do galpão ---------- */
.galpao{ position:relative; }
.galpao-vp{ position:relative; overflow:hidden; height:220px; background:#0a1f15; }
.galpao-track{ display:flex; height:100%; width:max-content; animation:galpaoScroll 30s linear infinite; will-change:transform; }
.galpao-track img{ height:100%; width:220px; object-fit:cover; display:block; }
@keyframes galpaoScroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.galpao-grad{ position:absolute; inset:0; background:linear-gradient(to top, rgba(8,48,29,.82), rgba(8,48,29,.15) 45%, rgba(8,48,29,.35)); pointer-events:none; }
.galpao-tag{ position:absolute; left:20px; bottom:16px; right:20px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.5); }
.galpao-tag b{ display:block; font-size:clamp(17px,4.8vw,21px); letter-spacing:-.02em; line-height:1.15; }
.galpao-tag span{ display:inline-block; margin-top:5px; font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:var(--verde); color:#062a19; padding:4px 11px; border-radius:999px; }
.galpao-pill{ position:absolute; top:14px; right:14px; display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.94); color:var(--verde-4); font-weight:800; font-size:12px; padding:7px 13px; border-radius:999px; box-shadow:var(--sombra); }
.galpao-pill .gp-dot{ width:8px; height:8px; border-radius:50%; background:var(--verde); animation:pulse 1.8s infinite; }

/* chips de especialidade */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
.chips span{ font-size:12.5px; font-weight:750; color:var(--verde-3); background:#fff; border:1px solid var(--borda); padding:7px 12px; border-radius:999px; box-shadow:0 3px 10px rgba(12,31,22,.05); }

/* destaque pagamento na entrega */
.pgto-entrega{ display:flex; align-items:center; gap:12px; margin-top:14px; background:linear-gradient(135deg,var(--creme-2),#fff); border:1px solid #bfe9cf; border-radius:15px; padding:13px 15px; box-shadow:0 6px 18px rgba(12,31,22,.06); }
.pgto-entrega .pe-ic{ width:42px; height:42px; flex:none; border-radius:12px; background:linear-gradient(135deg,var(--verde),var(--verde-3)); display:grid; place-items:center; box-shadow:var(--sombra); }
.pgto-entrega .pe-ic svg{ width:22px; height:22px; }
.pgto-entrega b{ font-size:15px; letter-spacing:-.01em; } .pgto-entrega small{ display:block; font-size:12.5px; color:var(--cinza); margin-top:1px; }

/* ---------- HERO ---------- */
.hero{ position:relative; padding:30px 0 24px; overflow:hidden; }
#bg-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero::before{ /* mesh gradient */
  content:""; position:absolute; inset:-20% -20% auto -20%; height:120%; z-index:0;
  background:
    radial-gradient(50% 40% at 20% 12%, rgba(143,240,164,.55), transparent 60%),
    radial-gradient(45% 40% at 88% 8%, rgba(18,184,102,.35), transparent 60%),
    radial-gradient(60% 50% at 50% 100%, rgba(234,250,240,.9), transparent 70%);
  animation:mesh 14s ease-in-out infinite alternate;
}
@keyframes mesh{ 0%{ transform:translate3d(0,0,0) scale(1);} 100%{ transform:translate3d(0,-14px,0) scale(1.06);} }

.selo{ display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--verde-3); font-size:12.5px; font-weight:800; padding:7px 14px; border-radius:999px; box-shadow:var(--sombra); border:1px solid var(--borda); }
.selo .ponto{ width:8px; height:8px; border-radius:50%; background:var(--verde); animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(18,184,102,.5);} 100%{ box-shadow:0 0 0 11px rgba(18,184,102,0);} }

.hero h1{ font-size:clamp(30px,8.5vw,44px); line-height:1.08; letter-spacing:-.035em; font-weight:850; margin:16px 0 14px; }
.hero h1 .grad{ background:linear-gradient(100deg,var(--verde),var(--verde-3) 60%,var(--verde-4)); -webkit-background-clip:text; background-clip:text; color:transparent; position:relative; }
.hero h1 .grad::after{ content:""; position:absolute; left:0; bottom:2px; height:8px; width:100%; background:linear-gradient(90deg,rgba(143,240,164,.6),rgba(18,184,102,.15)); z-index:-1; border-radius:6px; transform:scaleX(0); transform-origin:left; animation:sublinha 1s .5s forwards cubic-bezier(.2,.8,.2,1); }
@keyframes sublinha{ to{ transform:scaleX(1);} }
.hero p.sub{ font-size:16.5px; color:var(--cinza); max-width:440px; margin-bottom:24px; }

.cta-primaria{
  display:inline-flex; align-items:center; gap:12px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--verde),var(--verde-3)); color:#fff; font-weight:800; font-size:16.5px;
  padding:16px 26px; border-radius:16px; box-shadow:var(--sombra-forte); transition:transform .16s ease;
  cursor:pointer; border:none; font-family:inherit;
}
.cta-primaria:active{ transform:scale(.97); }
.cta-primaria .ico{ width:24px; height:24px; }
.cta-primaria::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg); animation:brilho 3.2s ease-in-out infinite; }
@keyframes brilho{ 0%{ left:-120%;} 55%,100%{ left:140%;} }
.cta-sub{ font-size:12.5px; color:var(--cinza-2); margin-top:10px; display:flex; align-items:center; gap:6px; }
.cta-sub svg{ width:14px; height:14px; }

/* ---------- Assistente (personagem) ---------- */
.assistente-hero{ margin-top:30px; position:relative; }
.assistente-card{
  position:relative; background:linear-gradient(165deg,#ffffff,#f2fbf6);
  border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra);
  padding:20px 18px; display:flex; gap:15px; align-items:center;
}
.assistente-card::before{ content:""; position:absolute; inset:0; border-radius:var(--raio); padding:1px; background:linear-gradient(140deg,rgba(18,184,102,.5),transparent 40%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.retrato{
  width:96px; height:96px; flex:none; border-radius:24px; position:relative;
  background:linear-gradient(160deg,var(--lima),var(--verde-2));
  box-shadow:var(--sombra); overflow:hidden; animation:flutua 5s ease-in-out infinite;
}
@keyframes flutua{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-7px);} }
.retrato svg, .retrato img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.retrato .anel{ position:absolute; inset:-3px; border-radius:26px; border:2px solid rgba(255,255,255,.6); animation:girar 8s linear infinite; }
@keyframes girar{ to{ transform:rotate(360deg);} }
.status-on{ position:absolute; right:4px; bottom:4px; width:17px; height:17px; border-radius:50%; background:#37d67a; border:3px solid #fff; z-index:5; box-shadow:0 0 0 0 rgba(55,214,122,.6); animation:pulse2 1.8s infinite; }
@keyframes pulse2{ 0%{ box-shadow:0 0 0 0 rgba(55,214,122,.6);} 100%{ box-shadow:0 0 0 9px rgba(55,214,122,0);} }

.assistente-fala{ flex:1; min-width:0; }
.assistente-nome{ font-weight:850; font-size:15px; display:flex; align-items:center; gap:7px; }
.assistente-nome .tag{ font-size:10.5px; font-weight:800; color:var(--verde-3); background:var(--creme-2); padding:2px 9px; border-radius:999px; }
.bolha{ background:#fff; border:1px solid var(--borda); border-radius:14px; border-top-left-radius:4px; padding:11px 13px; margin:9px 0 12px; font-size:14.5px; color:var(--tinta-2); box-shadow:0 4px 14px rgba(12,31,22,.05); min-height:44px; }
.bolha .cursor{ display:inline-block; width:2px; height:1em; background:var(--verde-2); margin-left:1px; vertical-align:-2px; animation:pisca-cursor .8s step-end infinite; }
@keyframes pisca-cursor{ 50%{ opacity:0;} }
/* player de voz da Sofia */
.voz-player{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--borda); border-radius:16px; padding:9px 12px 9px 9px; box-shadow:0 6px 18px rgba(12,31,22,.06); }
.voz-play{ flex:none; width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--verde),var(--verde-3)); display:grid; place-items:center; box-shadow:var(--sombra); transition:transform .15s ease; }
.voz-play:active{ transform:scale(.94); }
.voz-play svg{ width:18px; height:18px; }
.voz-play .ic-pause{ display:none; } .voz-play.tocando .ic-play{ display:none; } .voz-play.tocando .ic-pause{ display:grid; }
.voz-mid{ flex:1; min-width:0; }
.voz-topo{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.voz-label{ font-size:13.5px; font-weight:800; color:var(--verde-3); }
.voz-time{ font-size:11.5px; color:var(--cinza-2); font-variant-numeric:tabular-nums; }
.voz-barra{ position:relative; height:7px; background:var(--creme-2); border-radius:6px; cursor:pointer; touch-action:none; }
.voz-barra i{ position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,var(--verde),var(--verde-3)); border-radius:6px; }
.voz-barra b{ position:absolute; top:50%; left:0%; width:15px; height:15px; border-radius:50%; background:#fff; border:3px solid var(--verde-2); transform:translate(-50%,-50%); box-shadow:0 2px 6px rgba(12,31,22,.2); transition:opacity .2s ease; }

.scroll-hint{ display:flex; justify-content:center; margin-top:26px; }
.scroll-hint .mouse{ width:26px; height:42px; border:2px solid var(--verde-2); border-radius:14px; position:relative; opacity:.7; }
.scroll-hint .mouse::after{ content:""; position:absolute; left:50%; top:8px; width:4px; height:8px; background:var(--verde-2); border-radius:3px; transform:translateX(-50%); animation:scroll 1.6s infinite; }
@keyframes scroll{ 0%{ opacity:1; top:8px;} 70%{ opacity:0; top:20px;} 100%{ opacity:0;} }

/* ---------- Marquee ---------- */
.marquee{ background:linear-gradient(100deg,var(--verde-3),var(--verde-4)); color:#eafaf0; padding:13px 0; overflow:hidden; white-space:nowrap; }
.marquee .track{ display:inline-flex; gap:34px; animation:desliza 18s linear infinite; will-change:transform; }
.marquee span{ font-weight:800; font-size:14px; letter-spacing:.01em; display:inline-flex; align-items:center; gap:10px; }
.marquee span::before{ content:"✓"; color:var(--lima); font-weight:900; }
@keyframes desliza{ to{ transform:translateX(-50%);} }

/* ---------- Stats ---------- */
.stats{ padding:34px 0 8px; }
.stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.stat{ background:#fff; border:1px solid var(--borda); border-radius:var(--raio-sm); padding:16px 10px; text-align:center; box-shadow:0 6px 18px rgba(12,31,22,.05); }
.stat .n{ font-size:clamp(22px,6vw,28px); font-weight:850; letter-spacing:-.03em; background:linear-gradient(135deg,var(--verde),var(--verde-3)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .l{ font-size:11.5px; color:var(--cinza); font-weight:600; margin-top:3px; line-height:1.25; }

/* ---------- seções ---------- */
section.bloco{ padding:40px 0; position:relative; }
.titulo-sec{ text-align:center; margin-bottom:24px; }
.titulo-sec .kicker{ font-size:12.5px; font-weight:850; letter-spacing:.11em; text-transform:uppercase; color:var(--verde-2); }
.titulo-sec h2{ font-size:clamp(24px,6vw,31px); letter-spacing:-.03em; margin-top:7px; line-height:1.12; }
.titulo-sec p{ color:var(--cinza); font-size:15px; margin-top:9px; }

/* ---------- Vídeo (mockup celular) ---------- */
.fone{ position:relative; width:min(280px,76%); margin:0 auto; aspect-ratio:9/16; background:#0a1f15; border-radius:40px; padding:10px; box-shadow:var(--sombra-forte); border:2px solid #123a28; transition:box-shadow .35s ease, transform .35s ease; }
.fone.destaque{ box-shadow:0 0 0 4px var(--verde),0 26px 60px rgba(18,184,102,.4); transform:translateY(-4px); }
.fone::before{ content:""; position:absolute; top:16px; left:50%; transform:translateX(-50%); width:42%; height:20px; background:#0a1f15; border-radius:0 0 14px 14px; z-index:4; }
.fone .tela{ position:relative; width:100%; height:100%; border-radius:30px; overflow:hidden; background:#08301d; }
.fone .tela video{ width:100%; height:100%; object-fit:contain; background:#000; }
.video-vazio{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:22px; background:linear-gradient(160deg,var(--verde-3),#08301d); color:#dff5e8; }
.video-vazio .ic{ width:56px; height:56px; margin:0 auto 12px; border-radius:50%; background:rgba(255,255,255,.14); display:grid; place-items:center; animation:flutua 4s ease-in-out infinite; }
.video-vazio h3{ font-size:15px; margin-bottom:5px; } .video-vazio code{ background:rgba(255,255,255,.16); padding:2px 7px; border-radius:6px; font-size:12.5px; }
.fone .reflexo{ position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,.14),transparent 40%); pointer-events:none; z-index:1; }

/* player customizado (sem pause, só voltar 10s) */
.v-play-ov{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:linear-gradient(180deg,rgba(8,48,29,.15),rgba(8,48,29,.5)); }
.v-play-circ{ width:74px; height:74px; border-radius:50%; background:rgba(255,255,255,.95); display:grid; place-items:center; box-shadow:0 12px 34px rgba(0,0,0,.35); animation:pulseBtn 2s ease-in-out infinite; }
.v-play-circ svg{ width:32px; height:32px; margin-left:4px; }
@keyframes pulseBtn{ 0%,100%{ transform:scale(1); box-shadow:0 12px 34px rgba(0,0,0,.35);} 50%{ transform:scale(1.06); box-shadow:0 16px 40px rgba(0,0,0,.45);} }
.v-play-txt{ color:#fff; font-weight:800; font-size:15px; text-shadow:0 2px 8px rgba(0,0,0,.5); letter-spacing:.01em; }

.v-som{ position:absolute; top:14px; right:14px; z-index:6; display:inline-flex; align-items:center; gap:7px; background:rgba(8,20,14,.6); border:1px solid rgba(255,255,255,.4); color:#fff; font-weight:800; font-size:12.5px; padding:9px 13px; border-radius:999px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 4px 14px rgba(0,0,0,.3); transition:transform .14s ease, background .2s ease; animation:pulseSom 2.2s ease-in-out infinite; }
.v-som:active{ transform:scale(.92); }
.v-som svg{ width:17px; height:17px; }
@keyframes pulseSom{ 0%,100%{ box-shadow:0 4px 14px rgba(0,0,0,.3);} 50%{ box-shadow:0 4px 20px rgba(18,184,102,.7);} }
.v-ctrl{ position:absolute; left:0; right:0; bottom:0; z-index:5; display:flex; align-items:center; gap:11px; padding:14px 16px; background:linear-gradient(0deg,rgba(8,20,14,.72),transparent); pointer-events:none; }
.v-prog{ flex:1; height:5px; background:rgba(255,255,255,.28); border-radius:5px; overflow:hidden; }
.v-prog i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--lima),var(--verde)); border-radius:5px; }
.v-replay{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:6; display:inline-flex; align-items:center; gap:9px; background:linear-gradient(135deg,var(--verde),var(--verde-3)); color:#fff; font-weight:800; font-size:15px; padding:14px 22px; border-radius:14px; box-shadow:var(--sombra-forte); }
.v-replay svg{ width:20px; height:20px; }

/* ---------- Passo a passo ---------- */
.guia-wrap{ position:relative; }
.linha-prog{ position:absolute; left:39px; top:10px; bottom:10px; width:3px; background:var(--creme-2); border-radius:3px; overflow:hidden; }
.linha-prog i{ position:absolute; inset:0; height:var(--fill,0%); background:linear-gradient(180deg,var(--verde),var(--verde-3)); transition:height .2s linear; }
.passos{ display:flex; flex-direction:column; gap:16px; position:relative; }
.passo{ display:flex; gap:16px; align-items:flex-start; }
.passo .num{ flex:none; width:44px; height:44px; border-radius:14px; background:#fff; color:var(--verde-3); display:grid; place-items:center; font-weight:850; font-size:18px; border:2px solid var(--creme-2); z-index:2; box-shadow:var(--sombra); transition:.3s ease; }
.passo.feito .num, .passo.ativo .num{ background:linear-gradient(135deg,var(--verde),var(--verde-3)); color:#fff; border-color:var(--verde); transform:scale(1.06); }
.passo .card{ flex:1; background:#fff; border:1px solid var(--borda); border-radius:var(--raio-sm); padding:15px 16px; box-shadow:0 6px 18px rgba(12,31,22,.05); }
.passo h3{ font-size:16.5px; letter-spacing:-.01em; }
.passo p{ font-size:14px; color:var(--cinza); margin-top:4px; }
.passo .ouvir{ margin-top:12px; display:inline-flex; align-items:center; gap:8px; background:var(--creme); color:var(--verde-3); font-weight:750; font-size:13px; padding:8px 13px; border-radius:999px; border:1px solid var(--borda); transition:.2s ease; }
.passo .ouvir:active{ transform:scale(.96); } .passo .ouvir.tocando{ background:linear-gradient(135deg,var(--verde),var(--verde-3)); color:#fff; border-color:var(--verde); }
.passo .ouvir svg{ width:14px; height:14px; }

/* ---------- Benefícios ---------- */
.benes{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.bene{ background:#fff; border:1px solid var(--borda); border-radius:var(--raio-sm); padding:18px 15px; box-shadow:0 6px 18px rgba(12,31,22,.05); transition:transform .3s ease, box-shadow .3s ease; }
.bene:hover{ transform:translateY(-5px); box-shadow:var(--sombra); }
.bene .bi{ width:46px; height:46px; border-radius:13px; background:linear-gradient(160deg,var(--creme-2),#fff); border:1px solid var(--borda); display:grid; place-items:center; margin-bottom:12px; }
.bene .bi svg{ width:24px; height:24px; }
.bene h4{ font-size:15px; letter-spacing:-.01em; } .bene p{ font-size:13px; color:var(--cinza); margin-top:4px; }

/* ---------- CTA final ---------- */
.cta-final{ position:relative; overflow:hidden; border-radius:var(--raio); color:#fff; text-align:center; padding:40px 24px; box-shadow:var(--sombra-forte); background:linear-gradient(150deg,var(--verde-2),var(--verde-4)); }
.cta-final::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 50% at 30% 0%, rgba(143,240,164,.4), transparent 60%), radial-gradient(50% 40% at 100% 100%, rgba(18,184,102,.5), transparent 60%); animation:mesh 12s ease-in-out infinite alternate; }
.cta-final > *{ position:relative; z-index:2; }
.cta-final .badge-and{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.24); color:#eafaf0; font-size:12px; font-weight:700; padding:6px 13px; border-radius:999px; margin-bottom:14px; }
.cta-final h2{ font-size:27px; letter-spacing:-.03em; margin-bottom:9px; }
.cta-final p{ color:#dff5e8; font-size:15px; max-width:380px; margin:0 auto 22px; }
.btn-apk{ display:inline-flex; align-items:center; gap:13px; position:relative; overflow:hidden; background:#fff; color:var(--verde-4); font-weight:850; font-size:17px; padding:17px 30px; border-radius:16px; box-shadow:0 16px 40px rgba(0,0,0,.25); transition:transform .16s ease; cursor:pointer; }
.btn-apk:active{ transform:scale(.97); }
.btn-apk .ico-and{ width:26px; height:26px; }
.btn-apk small{ display:block; font-size:10.5px; font-weight:700; color:var(--verde-2); letter-spacing:.02em; }
.btn-apk::after{ content:""; position:absolute; top:0; left:-120%; width:55%; height:100%; background:linear-gradient(100deg,transparent,rgba(18,184,102,.25),transparent); transform:skewX(-18deg); animation:brilho 3.4s ease-in-out infinite; }

.instalar{ margin-top:18px; text-align:left; max-width:360px; margin-left:auto; margin-right:auto; }
.instalar summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:center; gap:8px; font-size:13.5px; font-weight:700; color:#eafaf0; padding:9px; border:1px solid rgba(255,255,255,.24); border-radius:12px; background:rgba(255,255,255,.08); }
.instalar summary::-webkit-details-marker{ display:none; }
.instalar summary .chev{ transition:transform .25s ease; } .instalar[open] summary .chev{ transform:rotate(180deg); }
.instalar ol{ margin:12px 6px 0; padding-left:20px; color:#dff5e8; font-size:13.5px; }
.instalar ol li{ margin-bottom:7px; }

/* ---------- Rodapé ---------- */
footer{ text-align:center; padding:34px 0 22px; color:var(--cinza); font-size:12.5px; }
footer .logo-foot{ height:74px; width:auto; margin:0 auto 2px; display:block; }
footer .redes{ display:flex; gap:11px; justify-content:center; margin:14px 0; }
footer .redes a{ width:38px; height:38px; border-radius:12px; background:#fff; border:1px solid var(--borda); display:grid; place-items:center; box-shadow:0 4px 12px rgba(12,31,22,.05); transition:transform .2s ease; }
footer .redes a:active{ transform:scale(.92); } footer .redes svg{ width:18px; height:18px; }

/* ---------- Barra fixa ---------- */
.barra-fixa{ position:fixed; left:0; right:0; bottom:0; z-index:90; background:var(--glass); backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px); border-top:1px solid var(--borda); padding:11px 18px calc(11px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:13px; transition:transform .35s ease; }
.barra-fixa .info{ flex:1; min-width:0; }
.barra-fixa .info b{ font-size:14px; display:block; letter-spacing:-.01em; }
.barra-fixa .info small{ font-size:11.5px; color:var(--cinza); }
.barra-fixa button.baixar{ flex:none; display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,var(--verde),var(--verde-3)); color:#fff; font-weight:800; font-size:15px; padding:13px 20px; border-radius:14px; box-shadow:var(--sombra); transition:transform .15s ease; border:none; font-family:inherit; cursor:pointer; }
.barra-fixa button.baixar:active{ transform:scale(.95); } .barra-fixa button.baixar svg{ width:18px; height:18px; }

/* toast */
.toast{ position:fixed; left:50%; bottom:calc(100px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(20px); background:var(--tinta); color:#fff; font-size:13.5px; font-weight:600; padding:11px 18px; border-radius:12px; box-shadow:var(--sombra-forte); opacity:0; pointer-events:none; transition:.3s ease; z-index:200; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- Carrossel de ofertas ---------- */
.carrossel{ position:relative; max-width:600px; margin:0 auto; padding:0 20px; }
.carr-vp{ overflow:hidden; border-radius:22px; box-shadow:var(--sombra-forte); background:#0a1f15; }
.carr-track{ display:flex; will-change:transform; }
.slide{ min-width:100%; position:relative; }
.slide img{ width:100%; display:block; aspect-ratio:1/1; object-fit:cover; }
.slide a.slide-cta{ position:absolute; inset:0; z-index:2; }
.carr-nav{ position:absolute; top:calc(50% - 24px); transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--verde-3); font-size:26px; font-weight:700; display:grid; place-items:center; box-shadow:var(--sombra); z-index:4; line-height:0; padding-bottom:4px; transition:transform .15s ease, background .2s ease; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.carr-nav:active{ transform:translateY(-50%) scale(.9); }
.carr-nav.prev{ left:28px; } .carr-nav.next{ right:28px; }
.carr-dots{ display:flex; gap:8px; justify-content:center; margin-top:16px; }
.carr-dots button{ width:9px; height:9px; border-radius:50%; background:var(--creme-2); border:1px solid var(--borda); transition:.35s cubic-bezier(.2,.8,.2,1); }
.carr-dots button.on{ background:linear-gradient(90deg,var(--verde),var(--verde-3)); width:28px; border-radius:6px; border-color:transparent; }
.carr-barra{ height:3px; background:var(--creme-2); border-radius:3px; max-width:560px; margin:14px auto 0; overflow:hidden; }
.carr-barra i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--verde),var(--verde-3)); border-radius:3px; }
.carr-barra i.run{ animation:carrLoad 4.5s linear forwards; }
@keyframes carrLoad{ from{ width:0%; } to{ width:100%; } }

@media (min-width:560px){ .benes{ grid-template-columns:repeat(2,1fr);} }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } [data-reveal]{ opacity:1 !important; transform:none !important; } }

/* ---------- Modal: O aplicativo já foi baixado ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:999;
  background:rgba(12,31,22,.65);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:16px; opacity:0; pointer-events:none;
  transition:opacity .28s cubic-bezier(.2,.8,.2,1);
}
.modal-overlay.show{ opacity:1; pointer-events:auto; }

.modal-card-baixado{
  background:#ffffff; width:100%; max-width:375px;
  border-radius:28px; padding:28px 20px 22px;
  box-shadow:0 24px 60px rgba(0,0,0,.25);
  transform:translateY(24px) scale(.95);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
  text-align:center; position:relative;
}
.modal-overlay.show .modal-card-baixado{ transform:translateY(0) scale(1); }

.modal-logo{ height:38px; width:auto; margin:0 auto 16px; display:block; }
.modal-title{ font-size:22px; font-weight:850; letter-spacing:-.025em; color:#111827; margin-bottom:8px; line-height:1.2; }
.modal-sub{ font-size:14px; color:#6b7280; line-height:1.45; margin-bottom:20px; }

.modal-steps-box{
  background:#f3f4f6; border-radius:20px;
  padding:18px 16px; text-align:left;
  margin-bottom:20px; display:flex; flex-direction:column; gap:15px;
}
.modal-step-item{ display:flex; gap:12px; align-items:flex-start; }
.modal-step-badge{
  width:26px; height:26px; border-radius:50%;
  background:#0f172a; color:#ffffff;
  font-weight:850; font-size:13.5px;
  display:grid; place-items:center; flex:none; margin-top:1px;
}
.modal-step-text{ font-size:13.5px; color:#374151; line-height:1.42; flex:1; }
.modal-step-text b{ color:#111827; font-weight:750; }

.btn-modal-video{
  display:block; width:100%; background:#f3f4f6; color:#111827;
  font-weight:800; font-size:15px; padding:15px 20px;
  border-radius:16px; border:none; cursor:pointer;
  text-decoration:none; text-align:center; transition:all .15s ease;
}
.btn-modal-video:hover{ background:#e5e7eb; }
.btn-modal-video:active{ transform:scale(.97); }

.link-modal-fechar{
  display:inline-block; color:#6b7280; font-size:13.5px;
  font-weight:600; text-decoration:none; margin-top:16px;
  cursor:pointer; transition:color .2s ease;
}
.link-modal-fechar:hover{ color:#111827; }

/* ---------- Modal: WhatsApp WebView ---------- */
.modal-wv-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:flex; align-items:flex-end; justify-content:center;
  padding:0; opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.modal-wv-overlay.show{ opacity:1; pointer-events:auto; }

.modal-wv-card{
  background:#ffffff; width:100%; max-width:480px;
  border-radius:28px 28px 0 0; padding:30px 24px 40px;
  box-shadow:0 -20px 60px rgba(0,0,0,.4);
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  text-align:center;
}
.modal-wv-overlay.show .modal-wv-card{ transform:translateY(0); }

.modal-wv-icon{
  width:72px; height:72px; border-radius:20px; margin:0 auto 16px;
  background:linear-gradient(135deg,#25D366,#128C7E);
  display:grid; place-items:center; box-shadow:0 12px 30px rgba(37,211,102,.35);
}
.modal-wv-icon svg{ width:38px; height:38px; }
.modal-wv-title{ font-size:21px; font-weight:850; color:#111827; margin-bottom:8px; letter-spacing:-.02em; }
.modal-wv-sub{ font-size:14px; color:#6b7280; line-height:1.5; margin-bottom:24px; }

.btn-wv-chrome{
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; padding:16px 20px; border-radius:16px; border:none; cursor:pointer;
  background:linear-gradient(135deg,#4285F4,#1a73e8); color:#fff;
  font-size:16px; font-weight:800; font-family:inherit;
  box-shadow:0 10px 30px rgba(66,133,244,.4); transition:transform .15s ease;
  margin-bottom:12px; text-decoration:none;
}
.btn-wv-chrome:active{ transform:scale(.97); }
.btn-wv-chrome svg{ width:22px; height:22px; }

.btn-wv-copy{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:14px 20px; border-radius:16px; border:1px solid #e5e7eb; cursor:pointer;
  background:#f9fafb; color:#374151;
  font-size:15px; font-weight:700; font-family:inherit;
  transition:transform .15s ease;
}
.btn-wv-copy:active{ transform:scale(.97); }
.btn-wv-copy svg{ width:18px; height:18px; }
.wv-hint{ font-size:12px; color:#9ca3af; margin-top:16px; line-height:1.5; }