/* ════ KIGAR site-v2 — paleta e tipografia do kigar.pro, estrutura do Titan v2 ════ */
/* Manrope e Space Grotesk vêm de /fonts/, o MESMO arquivo das páginas internas (cache de 1 ano no
   nginx): quem vai da home para o About não baixa a fonte de novo. */
@font-face{font-family:"Manrope";font-weight:300 800;font-display:swap;
  src:url(/fonts/manrope-latin.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:300 700;font-display:swap;
  src:url(/fonts/space-grotesk-latin.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/instrument-serif-italic.woff2) format("woff2")}

:root{
  /* cores vindas do kigar.pro, sem inventar nenhuma */
  --bg:#0B211D; --teal-deep:#0A1917; --surface:#132422; --surface2:#17302C;
  --teal-1:#12564A; --teal-2:#0E3A34;
  --ac:#8FEFD1; --ac-2:#5AC8A8; --ac-ink:#06201A;
  --tx:#F5F7F6; --prose:#C0D0CB; --mu:#93A8A2;
  --neg:#FF6B6B;
  --line:rgba(143,239,209,.10); --line2:rgba(143,239,209,.19);
  --sans:"Manrope",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --disp:"Space Grotesk","Manrope",ui-sans-serif,system-ui,sans-serif;
  --mono:"Space Grotesk",ui-monospace,"SF Mono",Menlo,monospace;
  --serif:"Instrument Serif",Iowan Old Style,Georgia,serif;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.16,1.1,.3,1);
  --vidro:linear-gradient(180deg,rgba(255,255,255,.048),rgba(255,255,255,.016));
  --realce:inset 0 1px 0 rgba(255,255,255,.08);
  --r-lg:20px; --r-md:14px; --gut:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--sans);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(143,239,209,.22);color:var(--tx)}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:4px}
a{color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
svg.ico,.chips svg,.fx-seta,.placa-ico{fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
svg.ico{width:22px;height:22px;color:var(--ac)}
svg.ico.sm{width:15px;height:15px}

/* ── a fita ── */
.fita-camada{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fita-camada::before{content:"";position:absolute;inset:0;
  background:radial-gradient(125% 72% at 50% -12%,rgba(18,86,74,.50),transparent 62%)}
.fita{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;
  transition:opacity 1.1s var(--ease)}
.tem-fita .fita{opacity:.95}

/* No celular o texto ocupa a largura inteira e fica muito mais em cima da fita.
   Aqui ela recua de verdade — leitura primeiro. Também poupa bateria. */
@media (max-width:820px){ .tem-fita .fita{opacity:.56} }
.casca{position:relative;z-index:1}

/* ── revelação (CSS mostra por padrão; o JS só esconde com a página visível) ── */
.rev{transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
html.rev-on .rev[data-oculto]{opacity:0;transform:translateY(24px);filter:blur(5px)}

/* ── navegação ── */
.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:28px;
  padding:14px var(--gut);backdrop-filter:blur(14px) saturate(1.3);
  background:linear-gradient(180deg,rgba(11,33,29,.86),rgba(11,33,29,.46));
  border-bottom:1px solid var(--line)}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:.04em}
/* lockup KIGAR: --cap = altura das maiusculas; a caixa tem 1.04 cap de altura (pernil do G) e 4.3386 cap de largura */
.lockup{--cap:16px;display:block;flex:none;width:calc(var(--cap)*4.3386);height:calc(var(--cap)*1.04)}
.marca{min-height:28px}
.nav-links{display:flex;gap:26px;margin-left:12px}
.nav-links a{color:var(--mu);text-decoration:none;font-size:14.5px;transition:color .2s var(--ease)}
.nav-links a:hover{color:var(--tx)}
.nav-dir{margin-left:auto;display:flex;align-items:center;gap:14px}

.btn{display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:999px;
  font-size:14.5px;font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .16s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
.btn:active{transform:scale(.975)}
.btn-ac{background:linear-gradient(180deg,var(--ac),var(--ac-2));color:var(--ac-ink)}
.btn-fan{background:var(--surface2);color:var(--tx);border-color:var(--line2)}
.btn-fan:hover{background:var(--teal-2)}
.btn .chip{display:grid;place-items:center;width:22px;height:22px;border-radius:999px;
  background:rgba(0,0,0,.18);transition:transform .2s var(--ease)}
.btn-fan .chip{background:rgba(255,255,255,.08)}
.btn:hover .chip{transform:translate(2px,-1px)}

/* ── hero ── */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(28px,5vw,72px);
  align-items:center;padding:clamp(56px,9vh,110px) var(--gut) clamp(60px,10vh,120px)}
.sobrancelha{display:inline-flex;align-items:center;gap:9px;padding:6px 13px;border-radius:999px;
  border:1px solid var(--line2);background:rgba(143,239,209,.07);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--ac)}
h1{margin:22px 0 0;font-family:var(--disp);font-size:clamp(34px,4.6vw,60px);line-height:1.06;
  letter-spacing:-.028em;font-weight:700;text-wrap:balance}
h1 em,h2 em{font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:-.01em;font-size:1.08em;color:var(--ac)}
.lead{margin:22px 0 0;max-width:54ch;color:var(--prose);font-size:clamp(15.5px,1.2vw,17px)}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:32px}
.acoes small{font-family:var(--mono);font-size:12.5px;color:var(--mu)}
.acoes a.escrito{color:var(--ac);text-decoration:none;border-bottom:1px solid var(--line2)}
.confianca{display:flex;flex-wrap:wrap;gap:10px 22px;margin:26px 0 0;padding:0;list-style:none;
  font-family:var(--mono);font-size:12px;color:var(--mu)}
.confianca li{display:flex;align-items:center;gap:7px}
.confianca li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--ac);opacity:.8}

/* ── cartão de pagamento, inclina com o ponteiro ── */
.palco{perspective:900px}
.fluxo{position:relative;border-radius:var(--r-lg);border:1px solid var(--line2);
  background:var(--vidro);box-shadow:var(--realce),0 30px 80px -30px rgba(0,0,0,.92);
  overflow:hidden;transform-style:preserve-3d;
  transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) rotateZ(var(--rz,0deg));
  transition:transform .5s var(--ease)}
.fluxo.vivo{transition:transform .08s linear}
.fluxo::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(420px 320px at var(--mx,70%) var(--my,10%),rgba(255,255,255,.07),transparent 62%)}
.f-topo{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line)}
.f-topo h2{margin:0;font-family:var(--disp);font-size:15px;font-weight:600;letter-spacing:-.01em}
.f-meta{font-family:var(--mono);font-size:12px;color:var(--mu)}
.f-estado{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ac)}
.pag{padding:20px 18px}
.pag-linha{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.pag-linha:last-of-type{border-bottom:0}
.pag-linha span{font-family:var(--mono);font-size:12.5px;color:var(--mu)}
.pag-linha b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;font-weight:600}
.pag-linha b.ac{color:var(--ac);font-size:21px}
.pag-linha b.zero{color:var(--ac)}
.pag-rodape{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line2)}
.pag-rodape .btn{flex:1;justify-content:center}
.faceid{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;color:var(--mu)}

/* ── blocos ── */
.sec{position:relative;z-index:1;padding:clamp(72px,11vh,132px) var(--gut);max-width:1280px;margin:0 auto}
.cabeca{max-width:62ch;margin-bottom:clamp(34px,5vh,56px)}
h2{margin:18px 0 0;font-family:var(--disp);font-size:clamp(26px,3.4vw,46px);line-height:1.1;
  letter-spacing:-.026em;font-weight:700;text-wrap:balance}
h3{margin:0;font-family:var(--disp);font-size:16.5px;font-weight:600;letter-spacing:-.012em}
.sec .lead{margin:16px 0 0;color:var(--prose);max-width:60ch}
.nota{margin:14px 0 0;font-family:var(--mono);font-size:12px;color:var(--mu);max-width:54ch}

.trilhos{position:relative;z-index:1;padding:8px var(--gut) 28px;max-width:1280px;margin:0 auto}
.trilho-txt{margin:0 0 16px;font-family:var(--mono);font-size:12.5px;color:var(--mu)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.chips li{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--line2);background:var(--vidro);box-shadow:var(--realce);
  font-family:var(--mono);font-size:12.5px;color:var(--prose)}
.chips li b{color:var(--ac);font-weight:600}

.dupla{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:16px}
.vidro{padding:24px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--vidro);box-shadow:var(--realce);
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.vidro:hover{border-color:var(--line2);transform:translateY(-2px)}
.vidro h3{margin-top:14px}
.vidro p{margin:10px 0 0;color:var(--prose);font-size:14.5px}
.marcas{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.marcas li{position:relative;padding-left:22px;font-size:14.5px;color:var(--prose)}
.marcas li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1.5px;
  background:var(--ac);opacity:.85;border-radius:1px}

/* ── placa de acento ── */
.placa-area{position:relative;z-index:1;padding:clamp(20px,4vh,46px) var(--gut);max-width:1280px;margin:0 auto}
.placa{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;
  gap:28px;padding:clamp(34px,6vw,62px);border-radius:28px;color:var(--tx);
  background:
    radial-gradient(120% 140% at 88% 10%,rgba(143,239,209,.16),transparent 56%),
    linear-gradient(150deg,#19332E 0%,#102421 44%,#0A1714 100%);
  border:1px solid rgba(143,239,209,.20);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.08),inset 0 0 90px rgba(0,0,0,.40),
             0 34px 70px -34px rgba(0,0,0,.9)}
.placa p{margin:0;font-family:var(--disp);font-size:clamp(22px,3vw,38px);line-height:1.16;
  letter-spacing:-.025em;font-weight:700}
.placa em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ac)}
.placa-ico{width:clamp(44px,5vw,70px);height:clamp(44px,5vw,70px);flex:none;
  color:var(--ac);opacity:.30;stroke-width:1.1}

.passos-grandes{margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.passos-grandes li{padding:24px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--vidro);box-shadow:var(--realce)}
.passos-grandes b.num{display:block;font-family:var(--mono);font-size:12.5px;color:var(--ac);margin-bottom:16px}
.passos-grandes h3{margin-bottom:8px}
.passos-grandes p{margin:0;color:var(--prose);font-size:14.5px}

.faq{display:grid;gap:10px;max-width:74ch}
details{border-radius:var(--r-md);border:1px solid var(--line);background:var(--vidro);
  box-shadow:var(--realce);overflow:hidden}
summary{padding:17px 20px;cursor:pointer;font-weight:600;font-size:15.5px;list-style:none;
  display:flex;align-items:center;gap:12px;transition:color .2s var(--ease)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";margin-left:auto;width:9px;height:9px;flex:none;
  border-right:1.5px solid var(--mu);border-bottom:1.5px solid var(--mu);
  transform:rotate(45deg);transition:transform .3s var(--ease)}
details[open] summary::after{transform:rotate(-135deg)}
details[open] summary{color:var(--ac)}
details p{margin:0;padding:0 20px 18px;color:var(--prose);font-size:14.5px;max-width:68ch}

.cta-dupla{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:18px}
.cta-escuro{display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.cta-acento{position:relative;overflow:hidden;padding:clamp(28px,4vw,46px);border-radius:var(--r-lg);
  color:var(--tx);
  background:
    radial-gradient(110% 130% at 90% 8%,rgba(143,239,209,.15),transparent 58%),
    linear-gradient(150deg,#19332E 0%,#102421 46%,#0A1714 100%);
  border:1px solid rgba(143,239,209,.20);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.08),0 34px 70px -34px rgba(0,0,0,.9)}
.cta-acento h2{margin-top:14px}
.cta-acento p{margin:14px 0 0;max-width:48ch;color:var(--prose);font-size:15px}
.cta-acento .sobrancelha{border-color:var(--line2);background:rgba(143,239,209,.07);color:var(--ac)}
.btn-escuro{background:linear-gradient(180deg,var(--ac),var(--ac-2));color:var(--ac-ink)}
.btn-escuro .chip{background:rgba(0,0,0,.18)}

.rodape{position:relative;z-index:1;border-top:1px solid var(--line);
  padding:clamp(40px,6vh,64px) var(--gut) 40px;max-width:1280px;margin:clamp(40px,7vh,80px) auto 0}
.rodape-topo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:36px}
.colunas{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:26px}
.colunas h4{margin:0 0 13px;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.08em;color:var(--mu);text-transform:uppercase}
.colunas a{display:block;margin-bottom:9px;color:var(--mu);text-decoration:none;font-size:14px;
  transition:color .2s var(--ease)}
.colunas a:hover{color:var(--tx)}
.rodape-aviso{margin-top:38px;padding-top:24px;border-top:1px solid var(--line);
  display:grid;gap:11px;max-width:96ch}
.rodape-aviso p{margin:0;font-size:12.5px;line-height:1.7;color:var(--mu)}
.rodape-aviso strong{color:var(--prose);font-weight:600}
/* endosso Zenite: subordinado, abre o bloco legal; a margem negativa alinha a tinta (a arte tem 24/625.38 de respiro) a borda da haste */
.rodape-aviso .endosso{margin:-6px 0 2px}
.endosso a{display:block;width:fit-content;margin-left:-6.75px;border-radius:8px}
.endosso img{display:block;width:175.89px;height:auto}
/* rodape: KIGAR com 22 px de maiuscula e a Zenite com 9 (0,41; teto do kit 0,5): o simbolo da Zenite (14,7 px)
   fica menor que o K */
.rodape .marca .lockup{--cap:22px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:980px){
  .hero,.cta-dupla,.rodape-topo{grid-template-columns:1fr}
  .nav-links{display:none}
  .palco{perspective:none}
  .fluxo{transform:none!important}
  .placa{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rev{transition:none!important}
  html.rev-on .rev[data-oculto]{opacity:1!important;transform:none!important;filter:none!important}
  .fluxo{transform:none!important}
}

/* ════ FLUXO VIVO ════ */
.vivo-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.etapas{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.etapas li{position:relative;display:grid;grid-template-columns:28px 1fr auto;align-items:center;
  gap:12px;padding:13px 4px;transition:opacity .4s var(--ease)}
.etapas li + li::before{content:"";position:absolute;left:13px;top:-2px;width:2px;height:16px;
  background:var(--line2);border-radius:2px;transition:opacity .4s var(--ease)}
/* o trilho entre etapas acende quando o pacote passa */
.etapas li[data-estado="feito"] + li::before,
.etapas li[data-estado="executando"] + li::before{background:var(--ac)}
.etapas .ponto{position:relative;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--line2);background:var(--surface);transition:all .35s var(--ease)}
.etapas .ponto::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--mu);
  transition:all .35s var(--ease)}
.etapas b{font-size:14.5px;font-weight:600;letter-spacing:-.01em;transition:color .35s var(--ease)}
.etapas span{display:block;font-family:var(--mono);font-size:11.5px;color:var(--mu);margin-top:2px}
.etapas em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--mu);
  font-variant-numeric:tabular-nums;min-width:58px;text-align:right}

/* etapa pendente: só a bolinha e o trilho recuam. O texto fica na cor normal — com opacidade
   ele caía para 2:1 a 3,6:1 sobre o vidro e reprovava o contraste AA. */
.etapas li[data-estado="aguardando"] .ponto,
.etapas li[data-estado="aguardando"]::before{opacity:.42}
.etapas li[data-estado="executando"] .ponto{border-color:var(--ac);
  box-shadow:0 0 0 0 rgba(143,239,209,.45);animation:bate 1.5s var(--ease) infinite}
.etapas li[data-estado="executando"] .ponto::after{background:var(--ac);width:9px;height:9px}
.etapas li[data-estado="executando"] b{color:var(--ac)}
.etapas li[data-estado="executando"] em{color:var(--ac)}
.etapas li[data-estado="feito"] .ponto{border-color:var(--ac);background:rgba(143,239,209,.14)}
.etapas li[data-estado="feito"] .ponto::after{width:0;height:0}
.etapas li[data-estado="feito"] .ponto::before{content:"";position:absolute;width:9px;height:5px;
  border-left:1.8px solid var(--ac);border-bottom:1.8px solid var(--ac);
  transform:rotate(-45deg) translate(1px,-1px)}
@keyframes bate{0%,100%{box-shadow:0 0 0 0 rgba(143,239,209,.42)}50%{box-shadow:0 0 0 6px rgba(143,239,209,0)}}

.vivo-cab{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.vivo-rota{font-family:var(--mono);font-size:13px;color:var(--ac);font-weight:600}
.vivo-valor{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:26px;font-weight:700;
  letter-spacing:-.02em;margin:4px 0 18px;display:block}

/* ════ ZONA DO CARTÃO ════ */
.cartao-grade{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,5vw,64px);align-items:center}
.cartao-palco{perspective:1100px}
.cartao{position:relative;aspect-ratio:1.586;border-radius:18px;padding:26px;
  display:flex;flex-direction:column;justify-content:space-between;
  /* grafite profundo da própria família do site, em vez de saltar pro teal claro */
  background:
    radial-gradient(130% 90% at 88% 6%,rgba(143,239,209,.13),transparent 58%),
    linear-gradient(158deg,#1A332E 0%,#102421 38%,#0A1714 72%,#070F0D 100%);
  border:1px solid rgba(143,239,209,.16);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.10),      /* bisel: a luz bate em cima à esquerda */
    inset -1px -1px 0 rgba(0,0,0,.55),          /* e a sombra fecha embaixo à direita */
    inset 0 0 70px rgba(0,0,0,.42),
    0 40px 80px -36px rgba(0,0,0,.95),
    0 2px 6px rgba(0,0,0,.5);
  transform-style:preserve-3d;
  transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) rotateZ(var(--rz,0deg));
  transition:transform .5s var(--ease)}
/* brilho especular que corre com a inclinação: é o que dá leitura de material */
.cartao::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(100deg,transparent 28%,rgba(255,255,255,.10) 46%,
             rgba(255,255,255,.015) 54%,transparent 70%);
  transform:translateX(calc((var(--sx,50) - 50) * 0.9%));
  transition:transform .4s var(--ease)}
/* grão fino: tira o aspecto de vetor chapado */
.cartao-grao{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cartao.vivo{transition:transform .08s linear}
.cartao::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(360px 260px at var(--mx,72%) var(--my,12%),rgba(255,255,255,.09),transparent 62%)}
.cartao-topo{display:flex;align-items:flex-start;justify-content:space-between}
.cartao-marca{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;
  letter-spacing:.06em;font-size:15px}
.cartao-marca{min-height:24px}
.cartao-marca .lockup{--cap:15.4px}
.cartao-selo{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;border:1px solid rgba(143,239,209,.26);
  background:rgba(143,239,209,.07);color:var(--ac)}
.cartao-chip{position:relative;width:44px;height:33px;border-radius:6px;
  background:linear-gradient(135deg,#D9E6DF 0%,#8FA8A0 26%,#F2F7F4 48%,#7F9A92 72%,#C8D8D1 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.5)}
.cartao-chip::after{content:"";position:absolute;inset:6px 7px;border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.26) 0 1px,transparent 1px 8px),
             repeating-linear-gradient(0deg,rgba(0,0,0,.20) 0 1px,transparent 1px 11px)}
.cartao-num{font-family:var(--mono);font-size:16px;letter-spacing:.26em;color:#DCE8E3;opacity:.72;
  text-shadow:0 1px 0 rgba(0,0,0,.6)}
.cartao-pe{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.cartao-pe small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mu);margin-bottom:4px}
.cartao-pe b{font-family:var(--disp);font-size:14px;font-weight:600}
.bandeira{font-family:var(--disp);font-size:22px;font-weight:700;letter-spacing:.10em;
  color:#FFFFFF;opacity:.96;text-shadow:0 1px 2px rgba(0,0,0,.55)}

@media (max-width:980px){
  .vivo-grade,.cartao-grade{grid-template-columns:1fr}
  .cartao-palco{perspective:none}
  .cartao{transform:none!important}
}
@media (prefers-reduced-motion:reduce){
  .etapas li[data-estado="executando"] .ponto{animation:none}
  .cartao{transform:none!important}
}

/* ── texto solto sobre a fita: sombra suave em vez de véu escuro ──
   É invisível no fundo liso e só aparece onde a fita passa por trás.
   (véu escuro já foi testado e apagava a fita junto) */
h1,h2,.lead,.sec > div > .marcas li,.cabeca .sobrancelha,.vivo-valor{
  text-shadow:0 1px 14px rgba(5,20,17,.92),0 0 3px rgba(5,20,17,.55)}
.cartao *,.fone *{text-shadow:none}

/* ════ CELULAR COM AS TELAS DO APP ════ */
.app-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(28px,5vw,64px);align-items:center}
.fone-palco{perspective:1200px;display:flex;justify-content:center}
.fone{position:relative;width:min(304px,84vw);aspect-ratio:.462;border-radius:42px;padding:9px;
  background:linear-gradient(160deg,#243B36,#0D1A17 46%,#060D0B);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.12),inset -1px -1px 0 rgba(0,0,0,.6),
             0 44px 90px -38px rgba(0,0,0,.96);
  transform-style:preserve-3d;
  transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
  transition:transform .5s var(--ease)}
.fone.vivo{transition:transform .08s linear}
.tela{position:relative;height:100%;border-radius:34px;overflow:hidden;
  background:var(--bg);                       /* o app usa o MESMO fundo do site */
  border:1px solid rgba(143,239,209,.09)}
.ilha{position:absolute;top:9px;left:50%;transform:translateX(-50%);z-index:3;
  width:76px;height:21px;border-radius:999px;background:#05100E}
.barra{display:flex;align-items:center;justify-content:space-between;padding:12px 18px 4px;
  font-family:var(--mono);font-size:10.5px;color:var(--prose);opacity:.8}
.barra i{display:inline-block;width:15px;height:8px;border:1px solid currentColor;border-radius:2px;
  position:relative}
.barra i::after{content:"";position:absolute;inset:1.5px;background:currentColor;border-radius:1px}

.telas{position:relative;height:calc(100% - 30px)}
.telaC{position:absolute;inset:0;padding:14px 16px;opacity:0;transform:translateY(10px) scale(.985);
  transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none;
  display:flex;flex-direction:column;gap:11px}
.telaC[data-ativa]{opacity:1;transform:none}
.t-rot{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.t-saldo{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:26px;font-weight:700;
  letter-spacing:-.02em;margin:1px 0 0}
.t-moeda{font-family:var(--mono);font-size:11px;color:var(--ac)}
.t-link{font-family:var(--mono);font-size:10.5px;color:var(--mu)}
.t-acoes{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:3px}
.t-acoes div{display:grid;place-items:center;gap:5px;padding:10px 3px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);
  font-family:var(--mono);font-size:8.5px;color:var(--prose);text-align:center}
.t-acoes svg{width:15px;height:15px;color:var(--ac);fill:none;stroke:currentColor;stroke-width:1.7}
.t-lista{display:grid;gap:7px;margin-top:4px}
.t-lin{display:grid;grid-template-columns:1fr auto;gap:8px;padding:9px 11px;border-radius:11px;
  background:var(--surface);border:1px solid var(--line)}
.t-lin b{font-size:11.5px;font-weight:600;letter-spacing:-.005em}
.t-lin small{display:block;font-family:var(--mono);font-size:9px;color:var(--mu);margin-top:2px}
.t-lin em{font-style:normal;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:11.5px;align-self:center}
.t-lin em.mais{color:var(--ac)}
.t-cab{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;color:var(--mu)}
.t-tit{font-family:var(--disp);font-size:17px;font-weight:700;letter-spacing:-.02em;margin:2px 0 0}
.t-sub{font-family:var(--mono);font-size:10px;color:var(--mu)}
.t-campo{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:10px 11px;border-radius:11px;background:var(--surface);border:1px solid var(--line)}
.t-campo span{font-family:var(--mono);font-size:9.5px;color:var(--mu)}
.t-campo b{font-family:var(--mono);font-size:11.5px;font-weight:600;text-align:right}
.t-campo b.ac{color:var(--ac);font-size:15px}
.t-btn{margin-top:auto;display:grid;place-items:center;padding:13px;border-radius:999px;
  background:linear-gradient(180deg,var(--ac),var(--ac-2));color:var(--ac-ink);
  font-size:12.5px;font-weight:700}
.t-face{display:grid;place-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;
  color:var(--mu);margin-top:7px}
.t-ok{flex:1;display:grid;place-items:center;align-content:center;gap:10px;text-align:center}
.t-ok .circ{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:rgba(143,239,209,.12);border:1.5px solid var(--ac)}
.t-ok .circ::after{content:"";width:17px;height:9px;border-left:2.2px solid var(--ac);
  border-bottom:2.2px solid var(--ac);transform:rotate(-45deg) translate(2px,-2px)}
.t-ok b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:21px;font-weight:700}
.t-ok span{font-family:var(--mono);font-size:10px;color:var(--mu);max-width:22ch}

.fone-nota{margin:18px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--mu);text-align:center}

@media (max-width:980px){ .app-grade{grid-template-columns:1fr} .fone-palco{perspective:none}
  .fone{transform:none!important} }
@media (prefers-reduced-motion:reduce){ .telaC{transition:none} }