/* Fôlego: site de vendas (folego.ia.br).
   Direção: noite com o verde do Fôlego como luz (respiro), alternando com seções claras de papel.
   Letra: Bricolage Grotesque (licença OFL, em site/fontes), um arquivo variável servido daqui; a conversa
   dentro do celular usa a letra do sistema, como num aparelho de verdade.
   Escala fixa de tipos: 12, 14, 16, 18, 20, 24, 28, 32, 40, 48 e 64 px (em rem). Grade de 8 px.
   Celular primeiro. Animação só com transform e opacity. Estados da página:
     sem script      tudo à mostra, parado, cada peça no estado final (nada se mexe sozinho);
     html.js         posto pelo heroi.js: conversa do herói animada, faixas que passam e peças em abas;
     html.calmo      junto do .js, quando o aparelho pede movimento reduzido: tudo parado, como sem script;
     html.vivo       posto pelo secoes.js: as seções entram quando chegam à tela;
     html.quieto     posto pelo botão de pausa do menu: tudo o que se mexe sozinho pára.
   Nada inline: a CSP do nginx é style-src 'self'. */

@font-face {
  font-family: "Bricolage";
  src: url("/estaticos/bricolage-grotesque-latin.fe6ce81700.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --noite: #040806;
  --noite-2: #0a110e;
  --noite-3: #121b17;
  --texto-e: #eef3f0;
  --suave-e: #a3b3ab;
  --linha-e: rgba(255, 255, 255, 0.1);
  --menta: #6fe3a5;
  --menta-clara: #b9f5d3;
  --verde: #1f7a4d;
  --verde-escuro: #145c39;
  --verde-claro: #e3f3e8;
  --papel: #f3f5f0;
  --branco: #ffffff;
  --tinta: #0d1512;
  --tinta-suave: #4b5852;
  --linha: #dce3dc;
  --coral: #ff9a86;
  --alerta: #a3361f;
  --alerta-claro: #fbece8;
  --lido: #53bdeb;
  --foco: #0d1512;

  --t-0: 0.75rem;
  --t-1: 0.875rem;
  --t-2: 1rem;
  --t-3: 1.125rem;
  --t-4: 1.25rem;
  --t-5: 1.5rem;
  --t-6: 1.75rem;
  --t-7: 2rem;
  --t-8: 2.5rem;
  --t-9: 3rem;
  --t-10: 4rem;

  --e-1: 8px;
  --e-2: 16px;
  --e-3: 24px;
  --e-4: 32px;
  --e-5: 40px;
  --e-6: 48px;
  --e-8: 64px;
  --e-10: 80px;
  --e-12: 96px;
  --e-16: 128px;

  --raio: 12px;
  --letra: "Bricolage", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --sistema: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: 88px; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: var(--t-3);
  line-height: 1.5;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
body.inicio { background: var(--noite); }

h1, h2, h3 { margin: 0 0 var(--e-2); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; }
h1 { font-size: var(--t-7); }
h2 { font-size: var(--t-6); }
h3 { font-size: var(--t-4); font-weight: 500; letter-spacing: -0.01em; }
p { margin: 0 0 var(--e-2); }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong, b { font-weight: 600; }
small { font-size: var(--t-1); }
img, svg, canvas { display: block; }

a { color: var(--verde-escuro); text-underline-offset: 3px; }
a:hover { color: var(--verde); }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: var(--raio); }
.escuro, .topo, .chamada { --foco: #ffffff; }
.escuro a { color: var(--menta); }
.escuro a:hover { color: var(--menta-clara); }

.icone { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icone.cheio { fill: currentColor; stroke: none; }
.simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }

.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: var(--e-2); top: -80px; z-index: 20; padding: var(--e-1) var(--e-2); background: var(--branco); color: var(--tinta); border-radius: var(--raio); }
.pular:focus { top: var(--e-1); }
main:focus { outline: none; }

.miolo { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--e-2); }
.estreito { max-width: 784px; }
.suave { color: var(--tinta-suave); }
.so-largo, .menu .so-largo { display: none; }

/* ------------------------------------------------------------ menu em pílula */

.topo { position: fixed; top: 12px; left: 0; right: 0; z-index: 10; padding: 0 12px; pointer-events: none; }
.pilula {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  max-width: 1200px;
  min-height: 56px;
  margin: 0 auto;
  padding: 0 6px 0 var(--e-2);
  border: 1px solid var(--linha-e);
  border-radius: 28px;
  background: rgba(8, 14, 11, 0.66);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 32px rgba(0, 0, 0, 0.28);
  color: var(--texto-e);
  pointer-events: auto;
}
.marca { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; font-size: var(--t-4); font-weight: 500; letter-spacing: -0.02em; text-decoration: none; }
.marca:hover { color: inherit; }
.marca svg { width: 28px; height: 28px; border-radius: 8px; }
.menu { display: flex; align-items: center; margin-left: auto; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 22px; color: inherit; font-size: var(--t-2); text-decoration: none; opacity: 0.82; }
.menu a:hover { color: inherit; opacity: 1; }
.interna .pilula, .sobre-claro .pilula { border-color: rgba(13, 21, 18, 0.1); background: rgba(255, 255, 255, 0.8); color: var(--tinta); box-shadow: 0 8px 32px rgba(13, 21, 18, 0.08); }
.interna .topo, .sobre-claro { --foco: #0d1512; }
.interna main { padding-top: 88px; }

/* Pausa geral (WCAG 2.2.2): um botão no menu, sempre à mão, pára tudo o que se mexe sozinho na página
   (a conversa do herói, a arte de fundo, as faixas que passam, as abas que avançam e as microanimações). */
.pausa { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pausa:focus-visible { border-radius: 50%; }
.pausa .icone { width: 20px; height: 20px; }
.pausa .icone + .icone, .pausa[aria-pressed="true"] .icone { display: none; }
.pausa[aria-pressed="true"] .icone + .icone { display: block; }
.pausa[aria-pressed="true"] { background: var(--menta); color: #03130b; }
.interna .pausa, .sobre-claro .pausa { background: rgba(13, 21, 18, 0.08); }
.sobre-claro .pausa[aria-pressed="true"] { background: var(--verde-escuro); color: #fff; }

/* ------------------------------------------------------------ botão e aviso de pré-lançamento */

.botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: var(--e-1) var(--e-4);
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(135deg, #a6f5cb 0%, #5fe09d 45%, #2bbf74 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 12px 32px rgba(63, 214, 139, 0.28);
  color: #03130b;
  font-size: var(--t-3);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform 0.2s var(--curva);
}
.botao::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); transform: translateX(-120%) skewX(-12deg); }
.escuro .botao, .botao:hover, .escuro .botao:hover { color: #03130b; }
.botao:hover { transform: translateY(-2px); }
.botao:hover::after { transform: translateX(320%) skewX(-12deg); transition: transform 0.7s ease-out; }
.botao:focus-visible { border-radius: 28px; }
.botao.menor { width: auto; min-height: 44px; padding: 0 var(--e-3); font-size: var(--t-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.botao.contorno { background: transparent; box-shadow: inset 0 0 0 1.5px var(--verde); color: var(--verde-escuro); }
.botao.contorno:hover { color: var(--verde-escuro); }
.botao.contorno .icone { width: 20px; height: 20px; }
.escuro .botao.contorno, .escuro .botao.contorno:hover { box-shadow: inset 0 0 0 1.5px var(--menta); color: var(--menta-clara); }
.botao.so-largo { display: none; }

.em-breve, .selo-breve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  margin: 0;
  padding: 0 var(--e-4);
  border: 1px solid rgba(111, 227, 165, 0.42);
  border-radius: 28px;
  background: rgba(111, 227, 165, 0.1);
  color: var(--menta-clara);
  font-size: var(--t-3);
  line-height: 1.2;
}
.em-breve { width: 100%; }
.em-breve strong { font-weight: 600; }
.em-breve i, .selo-breve i { width: 8px; height: 8px; border-radius: 50%; background: var(--menta); }
.js .em-breve i, .js .selo-breve i { animation: pisca 2.4s ease-in-out infinite; }
.selo-breve { min-height: 44px; padding: 0 var(--e-3); font-size: var(--t-2); font-weight: 500; }
.selo-breve.so-largo { display: none; }
.claro .em-breve, .branco .em-breve { border-color: rgba(31, 122, 77, 0.4); background: var(--verde-claro); color: var(--verde-escuro); }
.claro .em-breve i { background: var(--verde); }
.sobre-claro .selo-breve { border-color: rgba(31, 122, 77, 0.4); background: var(--verde-claro); color: var(--verde-escuro); }
.sobre-claro .selo-breve i { background: var(--verde); }

/* A chamada (preço e botão) fica presa no pé da tela no celular e entra na coluna do texto no computador. */
.chamada {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  padding: var(--e-1) var(--e-2);
  padding-bottom: calc(var(--e-1) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linha-e);
  background: rgba(6, 11, 9, 0.9);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.preco-linha { margin: 0 0 var(--e-1); color: var(--suave-e); font-size: var(--t-1); line-height: 1.3; text-align: center; }
.preco-linha b { color: var(--texto-e); }
.preco-linha span { display: inline-block; }
.chamada .botao, .chamada .em-breve { min-height: 48px; }
.com-barra { padding-bottom: 116px; }

/* ------------------------------------------------------------ 1. herói */

.escuro { background: var(--noite); color: var(--texto-e); }
.heroi { position: relative; padding: 88px 0 0; overflow: hidden; }
.heroi::before { content: ""; position: absolute; left: 50%; top: 34%; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; background: radial-gradient(circle, rgba(47, 191, 116, 0.3) 0%, rgba(31, 122, 77, 0.12) 38%, rgba(4, 8, 6, 0) 68%); pointer-events: none; }
.sopro { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
/* Sem script: pontilhado parado no lugar da arte que respira (o canvas vazio leva o desenho por CSS). */
html:not(.js) .sopro { background-image: radial-gradient(rgba(111, 227, 165, 0.5) 1.6px, rgba(111, 227, 165, 0) 2.2px); background-size: 14px 14px; -webkit-mask-image: radial-gradient(ellipse 70% 46% at 50% 46%, #000 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0) 78%); mask-image: radial-gradient(ellipse 70% 46% at 50% 46%, #000 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0) 78%); }

.palco { display: grid; grid-template-columns: minmax(0, 1fr); }
.heroi h1 { margin: 0 0 12px; font-size: var(--t-7); line-height: 1.06; text-align: center; }
.lide { max-width: 30ch; margin: 0 auto var(--e-2); color: var(--suave-e); font-size: var(--t-2); line-height: 1.4; text-align: center; }

.passos { display: flex; gap: 6px; margin: 0 auto var(--e-2); width: 100%; max-width: 372px; counter-reset: passo; }
/* No celular o botão de cada cena é um círculo de 44 px (40 px em tela muito estreita): alvo de toque.
   A cena atual vira uma pílula só com o rótulo (sem o número, que a posição já diz); se o rótulo não
   couber numa linha, quebra em duas dentro da pílula, em vez de ser cortado. */
.passo {
  position: relative;
  display: flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  min-width: 0;
  height: 44px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--linha-e);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--suave-e);
  font: inherit;
  font-size: var(--t-1);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  counter-increment: passo;
  -webkit-tap-highlight-color: transparent;
}
.passo::before { content: counter(passo); }
.passo[aria-current] { flex: 1 1 auto; justify-content: flex-start; padding: 0 var(--e-2); border-color: rgba(111, 227, 165, 0.5); background: rgba(111, 227, 165, 0.12); color: var(--menta-clara); }
.passo .rot { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.passo[aria-current]::before { content: none; }
.passo[aria-current] .rot { position: static; width: auto; height: auto; margin: 0; clip: auto; white-space: normal; text-align: left; line-height: 1.15; }
.passo i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--menta); transform: scaleX(0); transform-origin: 0 50%; }
.passo:not([aria-current]) i { display: none; }
.passo.ok i { transform: scaleX(1); }
.passo:focus-visible { border-radius: 22px; }

/* O aparelho: aro de metal, borda preta, ilha, reflexo e botões laterais. */
.aparelho {
  position: relative;
  width: 100%;
  max-width: 372px;
  margin: 0 auto;
  padding: 3px;
  border-radius: 58px;
  background: linear-gradient(145deg, #8b948f 0%, #2a2f2c 14%, #0e1110 38%, #303633 60%, #a4ada8 82%, #2c312e 100%);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 96px rgba(47, 191, 116, 0.16);
}
.aparelho::before, .aparelho::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #5c6460, #1b1f1d); }
.aparelho::before { left: -3px; top: 132px; height: 30px; box-shadow: 0 56px 0 #2c312e, 0 100px 0 #2c312e; }
.aparelho::after { right: -3px; top: 176px; height: 72px; }
.ap-corpo { position: relative; padding: 9px; border-radius: 55px; background: #030504; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ap-corpo::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 3; border-radius: 55px; background: linear-gradient(118deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.03) 20%, rgba(255, 255, 255, 0) 36%); pointer-events: none; }
.ilha { position: absolute; left: 50%; top: 20px; z-index: 2; width: 96px; height: 28px; margin-left: -48px; border-radius: 14px; background: #000; }
.ilha::after { content: ""; position: absolute; right: 12px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #26324a 0%, #0a0d14 60%); }
.ap-chao { display: none; }
.ap-tela { position: relative; overflow: hidden; border-radius: 46px; background: #070d0a; font-family: var(--sistema); }
.ap-tela::after { content: ""; position: absolute; left: 50%; bottom: 7px; z-index: 2; width: 128px; height: 4px; margin-left: -64px; border-radius: 2px; background: rgba(255, 255, 255, 0.4); }
.ap-barra { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 6px 30px 0; background: #0f1814; color: #fff; font-size: var(--t-1); font-weight: 600; }
.ap-sinais { display: flex; align-items: flex-end; gap: 3px; }
.ap-sinais i { width: 3px; height: 5px; border-radius: 1px; background: #fff; }
.ap-sinais i + i { height: 8px; }
.ap-sinais i + i + i { height: 11px; }
.ap-sinais b { position: relative; width: 24px; height: 12px; margin-left: 5px; border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 4px; }
.ap-sinais b::after { content: ""; position: absolute; left: 1.5px; top: 1.5px; bottom: 1.5px; width: 13px; border-radius: 1.5px; background: #fff; }

.ap-topo { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 4px 10px 6px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: #0f1814; color: #fff; }
.avatar { flex: none; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 2px rgba(111, 227, 165, 0.45); }
.avatar svg { width: 36px; height: 36px; }
.quem { flex: 1; min-width: 0; line-height: 1.25; }
.quem strong { display: flex; align-items: center; gap: 6px; font-size: var(--t-2); font-weight: 600; }
.selo-v { flex: none; width: 18px; height: 18px; fill: var(--lido); stroke: none; }
.selo-v .vz, #i-verificado .vz { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.st { position: relative; display: block; color: var(--menta); font-size: var(--t-1); }
.st-a, .st-b { transition: opacity 0.15s; }
/* "digitando..." entra no lugar de "atendimento automatizado": quem sai some na hora (visibility), quem
   entra aparece aos poucos (opacity). Os dois nunca ficam à mostra juntos. */
.st-b { position: absolute; left: 0; top: 0; visibility: hidden; opacity: 0; }
.digitando .st-a { visibility: hidden; opacity: 0; }
.digitando .st-b { visibility: visible; opacity: 1; }

.vidro { position: relative; background-color: #070d0a; background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, rgba(255, 255, 255, 0) 1.5px); background-size: 16px 16px; }
.legenda { margin: 0; color: var(--tinta-suave); font-size: var(--t-1); line-height: 1.43; }
.escuro .legenda { color: var(--suave-e); }
.vidro .legenda { position: relative; z-index: 1; width: -moz-fit-content; width: fit-content; margin: 0 auto; padding: 2px 12px; border-radius: 0 0 10px 10px; background: #2a2819; color: #f3e7b3; font-size: var(--t-0); line-height: 1.67; }
.tela { position: relative; overflow: hidden; }
.js .tela { height: 300px; height: clamp(232px, calc(100svh - 566px), 440px); }
.js.calmo .tela { height: auto; }
.cena { transition: opacity 0.25s; }
.sai .cena { opacity: 0; }
.fio { position: relative; display: flex; flex-direction: column; gap: var(--e-1); padding: 12px; transition: transform 0.45s var(--curva); will-change: transform; }

/* balões */
.m { position: relative; display: flex; flex-direction: column; max-width: 88%; }
.m.juh { align-self: flex-start; align-items: flex-start; }
.m.eu { align-self: flex-end; align-items: flex-end; }
.m.dia { align-self: center; max-width: none; }
.m.dia span { padding: 3px 12px; border-radius: 10px; background: #18221d; color: #c5d2cb; font-size: var(--t-0); font-weight: 600; line-height: 1.67; }

.bal { padding: var(--e-1) 12px; border-radius: 16px; background: #1a2520; color: #eef3f0; font-size: var(--t-2); line-height: 1.375; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); }
.juh .bal { border-top-left-radius: 4px; }
.eu .bal { border-top-right-radius: 4px; background: #0e5a3a; color: #f2fff8; }
.eu .hr { color: rgba(255, 255, 255, 0.8); }
.hr { display: inline-flex; float: right; align-items: center; gap: 4px; margin: 6px 0 -2px 12px; color: rgba(255, 255, 255, 0.62); font-size: var(--t-0); font-weight: 400; line-height: 1.34; }
.tq { position: relative; display: inline-block; width: 16px; height: 11px; color: rgba(255, 255, 255, 0.6); }
.tq svg, .tq2 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tq .az { color: var(--lido); }

.cp { white-space: nowrap; border-radius: 4px; background: rgba(111, 227, 165, 0.18); box-shadow: 0 0 0 2px rgba(111, 227, 165, 0.18); color: var(--menta-clara); }

.bts { display: flex; align-self: stretch; gap: 4px; margin-top: 4px; }
.bt { position: relative; flex: 1; overflow: hidden; padding: var(--e-1) 12px; border-radius: 14px; background: #1a2520; color: var(--menta); font-size: var(--t-2); font-weight: 600; line-height: 1.375; text-align: center; white-space: nowrap; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); }
.bt::after { content: ""; position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--menta); opacity: 0; }
.bt.on { background: #153d2a; }

.pts { position: absolute; left: 0; top: 0; display: flex; gap: 4px; padding: 14px 12px; border-radius: 16px; border-top-left-radius: 4px; background: #1a2520; opacity: 0; }
.pts i { width: 8px; height: 8px; border-radius: 50%; background: #8fa097; }

/* áudio */
.bal.audio { display: flex; align-items: flex-end; gap: var(--e-1); padding: var(--e-1) var(--e-1) 6px; }
.audio .hr { margin: 0; }
.au { display: grid; grid-template-columns: 28px 128px; align-items: center; column-gap: var(--e-1); row-gap: 2px; color: var(--menta-clara); }
.au .icone { width: 28px; height: 28px; }
.au small { grid-column: 2; color: rgba(255, 255, 255, 0.62); font-size: var(--t-0); line-height: 1.34; }
.onda { position: relative; display: block; width: 128px; height: 24px; overflow: hidden; }
.onda svg { width: 128px; height: 24px; fill: rgba(255, 255, 255, 0.34); }
.ench { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
.ench svg { fill: var(--menta-clara); }

/* foto do cupom */
.bal.foto { position: relative; padding: 4px; }
.foto .hr { position: absolute; right: 12px; bottom: var(--e-1); margin: 0; color: #fff; }
.foto .tq { color: #fff; }
.ft { position: relative; display: block; width: 208px; height: 152px; overflow: hidden; border-radius: 12px; background: linear-gradient(160deg, #8b908a, #565b57); }
.cupom { position: absolute; left: 36px; top: 12px; display: flex; flex-direction: column; gap: 5px; width: 136px; padding: 10px 12px 14px; background: #fffef6; color: #2a2d2b; font: 700 12px/1.34 ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; transform: rotate(-3deg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.cupom i { display: block; height: 3px; border-radius: 2px; background: #c9cdc8; }
.cupom i + i { width: 72%; }
.cupom i + i + i { width: 88%; }
.cupom .tot { display: flex; justify-content: space-between; padding-top: 5px; border-top: 1px dashed #8d9691; }
.cupom .quando { font-weight: 400; }
.dq { position: relative; }
.dq::after { content: ""; position: absolute; left: -5px; right: -5px; top: -3px; bottom: -3px; border: 2px solid #23a862; border-radius: 4px; background: rgba(35, 168, 98, 0.14); }
.vr { position: absolute; left: 0; right: 0; top: 0; height: 48px; border-bottom: 2px solid #8df0b8; background: linear-gradient(to bottom, rgba(141, 240, 184, 0), rgba(141, 240, 184, 0.45)); opacity: 0; }

/* plano e relatório */
.bal.cartao, .pg { display: flex; flex-direction: column; }
.bal.cartao { min-width: 256px; padding-bottom: 6px; }
.cartao .hr { align-self: flex-end; margin: 0; }
.tit { display: block; padding-bottom: 6px; color: var(--menta); font-size: var(--t-2); font-weight: 600; }
.ln { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: var(--t-1); line-height: 1.43; }
.ln > span { display: flex; align-items: center; color: #b7c5bd; }
.ln b { white-space: nowrap; }
.ln.soma { border-top-color: rgba(111, 227, 165, 0.6); }
.num { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: var(--e-1); border-radius: 50%; background: var(--menta); color: #03130b; font-size: var(--t-0); }
.bom { color: var(--menta); }
.res { display: block; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.1); color: #b7c5bd; font-size: var(--t-1); line-height: 1.43; }
.bal.doc { display: flex; flex-direction: column; gap: 4px; min-width: 256px; padding: 4px; }
.pg { padding: var(--e-1) 12px 2px; border-radius: 12px; background: #f4f6f2; color: var(--tinta); }
.pg .tit { padding-bottom: 4px; color: var(--verde-escuro); }
.pg .ln { padding: 4px 0; border-top-color: var(--linha); }
.pg .ln > span { color: var(--tinta-suave); }
.pg .bom { color: var(--verde); }
.arq { display: flex; align-items: center; gap: var(--e-1); margin: 0; padding: var(--e-1); border-radius: 12px; background: rgba(255, 255, 255, 0.07); font-size: var(--t-1); font-weight: 600; line-height: 1.43; overflow-wrap: anywhere; }
.arq .icone { color: var(--coral); }
.cap { display: block; padding: 4px var(--e-1) 2px; }

.ap-campo { display: flex; align-items: center; gap: var(--e-1); padding: var(--e-1) 10px 20px; color: #03130b; }
.ap-campo span { flex: 1; height: 40px; padding: 0 var(--e-2); border-radius: 20px; background: #1a2520; color: rgba(255, 255, 255, 0.5); font-size: var(--t-2); line-height: 40px; }
.ap-campo .icone { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: linear-gradient(135deg, #a6f5cb, #2bbf74); }

/* a conversa animada (só com o script) */
.js .bal, .js .bts, .js .tela .dia span { opacity: 0; transform: translateY(10px); }
.js .eu .bal { transform: translateY(10px) scale(0.94); transform-origin: 100% 100%; }
.js .juh .bal { transform: translateY(10px) scale(0.96); transform-origin: 0 100%; }
.js .on > .bal, .js .bts.on, .js .tela .dia.on span { opacity: 1; transform: none; transition: opacity 0.26s ease-out, transform 0.34s var(--curva); }
.js .dig > .pts { opacity: 1; }
.js .dig > .pts i { animation: pulo 1s ease-in-out infinite; }
.js .dig > .pts i + i { animation-delay: 0.15s; }
.js .dig > .pts i + i + i { animation-delay: 0.3s; }

.js .tq .az, .js .tela .cp, .js .dq::after { opacity: 0; }
.js .tela .ln, .js .res { opacity: 0; transform: translateX(-8px); }
.js .dq::after { transform: scale(1.3); }
.js .tq.on .az, .js .tela .cp.on { opacity: 1; transition: opacity 0.25s; }
.js .tela .ln.on, .js .res.on, .js .dq.on::after { opacity: 1; transform: none; transition: opacity 0.25s ease-out, transform 0.25s ease-out; }

.js .tela .ench { transform: translateX(-100%); }
.js .tela .ench svg { transform: translateX(100%); }
.js .au.on .ench, .js .au.on .ench svg { animation: enche-som 1.5s linear forwards; }
.js .ft.on .vr { animation: varre 0.85s ease-in-out 2; }
.js .bt.on { animation: aperta 0.3s ease-out; }
.js .bt.on::after { animation: toque 0.5s ease-out; }

.parado * { animation-play-state: paused !important; }
/* Pausa geral (o botão do menu põe .quieto no html): nada mais se mexe sozinho. As peças das seções ficam no
   estado final, as abas param de avançar e as faixas que passam ficam onde estavam, e dá para arrastá-las
   com o dedo. */
.quieto *, .quieto *::before, .quieto *::after { animation: none !important; transition: none !important; }
.calmo *, .calmo *::before, .calmo *::after { animation: none !important; transition: none !important; }
.quieto .selos-trilho { animation: corre 44s linear infinite paused !important; }
.quieto .frases-trilho { animation: corre 48s linear infinite paused !important; }
.quieto .frases-trilho.volta { animation: corre 56s linear infinite reverse paused !important; }
.quieto .selos, .quieto .frases { overflow-x: auto; scrollbar-width: none; }
.quieto .selos::-webkit-scrollbar, .quieto .frases::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------ 2. faixa de confiança */

/* Parada (sem script, ou com pedido de movimento reduzido) a faixa é uma lista que quebra em linhas, sem a
   cópia que emenda a volta. Com script ela passa; o botão de pausa do menu a segura no lugar. */
.selos { position: relative; padding: var(--e-5) 0 var(--e-6); overflow: hidden; }
.selos-trilho { display: flex; }
.selos-fila { display: flex; flex-wrap: wrap; justify-content: center; row-gap: var(--e-2); }
.selos-fila[aria-hidden], .frases ul + ul { display: none; }
.selos-fila li { display: flex; align-items: center; gap: 12px; padding: 0 var(--e-4); white-space: nowrap; }
.selos-fila .icone { width: 28px; height: 28px; color: var(--menta); }
.selos-fila .icone.azul { fill: var(--lido); stroke: none; }
.selos-fila span { display: flex; flex-direction: column; line-height: 1.3; }
.selos-fila b { font-size: var(--t-2); font-weight: 500; }
.selos-fila small { color: var(--suave-e); font-size: var(--t-0); letter-spacing: 0.08em; text-transform: uppercase; }
.js:not(.calmo) .selos-trilho { width: -moz-max-content; width: max-content; animation: corre 44s linear infinite; }
.js:not(.calmo) .selos-fila { flex-wrap: nowrap; }
.js:not(.calmo) .selos-fila[aria-hidden], .js:not(.calmo) .frases ul + ul { display: flex; }
.js:not(.calmo) .selos-fila li { border-right: 1px solid var(--linha-e); }
.selos:hover .selos-trilho, .frases:hover .frases-trilho { animation-play-state: paused; }
.js:not(.calmo) .selos::before, .js:not(.calmo) .selos::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 48px; pointer-events: none; }
.selos::before { left: 0; background: linear-gradient(90deg, var(--noite), rgba(4, 8, 6, 0)); }
.selos::after { right: 0; background: linear-gradient(270deg, var(--noite), rgba(4, 8, 6, 0)); }

/* ------------------------------------------------------------ seções: base */

.sec { position: relative; padding: var(--e-10) 0; overflow: hidden; }
.sec.junta { padding-top: 0; }
.claro { background: var(--papel); color: var(--tinta); }
.branco { background: var(--branco); color: var(--tinta); }
.sec.escuro::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 640px; background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, rgba(255, 255, 255, 0) 1.5px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 70% 30%, #000 0%, rgba(0, 0, 0, 0) 70%); mask-image: radial-gradient(ellipse 60% 70% at 70% 30%, #000 0%, rgba(0, 0, 0, 0) 70%); pointer-events: none; }
.sec.junta::before { display: none; }
/* Cada seção escura tem a sua luz e a sua textura: a rolagem não repete o mesmo fundo. */
#raio-x { background: radial-gradient(ellipse 70% 52% at 10% 16%, rgba(31, 122, 77, 0.32), rgba(4, 8, 6, 0) 70%), linear-gradient(180deg, var(--noite) 0%, #06120c 100%); }
#plano { background: linear-gradient(180deg, #06120c 0%, #0a1c13 52%, var(--noite) 100%); }
#plano::before { display: block; top: 0; bottom: 0; height: auto; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, rgba(255, 255, 255, 0) 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, rgba(255, 255, 255, 0) 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 46%, #000 0%, rgba(0, 0, 0, 0) 76%); mask-image: radial-gradient(ellipse 70% 60% at 50% 46%, #000 0%, rgba(0, 0, 0, 0) 76%); }
#pagou { background: radial-gradient(ellipse 56% 62% at 92% 58%, rgba(47, 191, 116, 0.22), rgba(4, 8, 6, 0) 70%), linear-gradient(160deg, #040806 0%, #0a1711 100%); }
#pagou::before { -webkit-mask-image: radial-gradient(ellipse 60% 70% at 24% 30%, #000 0%, rgba(0, 0, 0, 0) 70%); mask-image: radial-gradient(ellipse 60% 70% at 24% 30%, #000 0%, rgba(0, 0, 0, 0) 70%); }
#limites { background: radial-gradient(ellipse 64% 44% at 50% 0%, rgba(255, 154, 134, 0.13), rgba(4, 8, 6, 0) 72%), var(--noite-2); }
#limites::before { top: 0; bottom: 0; height: auto; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 16px); background-size: auto; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 78%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 78%); }

.olho { display: inline-flex; align-items: center; gap: var(--e-1); margin: 0 0 var(--e-2); color: var(--verde-escuro); font-size: var(--t-0); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.olho::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }
.escuro .olho { color: var(--menta); }
.escuro .olho::before { background: var(--menta); box-shadow: 0 0 12px var(--menta); }
.sec h2, .fecho h2 { max-width: 16ch; }
.sub { max-width: 32ch; margin: 0; color: var(--tinta-suave); font-size: var(--t-3); line-height: 1.45; }
.escuro .sub { color: var(--suave-e); }
.centro { display: flex; flex-direction: column; align-items: center; margin-bottom: var(--e-5); text-align: center; }
.centro h2 { max-width: 18ch; }
.duas { display: grid; gap: var(--e-5); }

.vivo [data-ver] .sobe { opacity: 0; transform: translateY(28px); }
.vivo [data-ver].on .sobe { opacity: 1; transform: none; transition: opacity 0.7s var(--curva), transform 0.8s var(--curva); }
.vivo [data-ver].on .a1 { transition-delay: 0.08s; }
.vivo [data-ver].on .a2 { transition-delay: 0.16s; }
.vivo [data-ver].on .a3 { transition-delay: 0.24s; }
.vivo [data-ver].on .a4 { transition-delay: 0.32s; }

/* abas que avançam sozinhas (um dia com a Juh) */
.aba { position: relative; display: flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.aba i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; }
.vivo .on .aba[aria-current] i { animation: enche 6.4s linear forwards; }
html:not(.js) .abas { display: none; }

/* ------------------------------------------------------------ 3. um dia com a Juh */

.umdia { display: grid; gap: var(--e-3); }
.umdia .abas { display: flex; gap: 6px; margin-top: var(--e-3); }
.umdia .aba { flex: 1; justify-content: center; overflow: hidden; border-radius: 22px; background: rgba(13, 21, 18, 0.06); color: var(--tinta-suave); font-size: var(--t-1); font-weight: 500; }
.umdia .aba[aria-current] { background: var(--tinta); color: var(--branco); }
.umdia .aba[aria-current] i { height: 3px; background: var(--menta); }
.umdia .aba:focus-visible { border-radius: 22px; }
.aba-t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* O palco. Cada momento é uma foto em cima (só fundo: nada escrito sobre o rosto) que escurece aos poucos
   até a hora, em letra grande, e a peça do produto, embaixo. Com script os momentos ficam empilhados na
   mesma célula (a altura é a do mais alto) e só a foto do atual, a do anterior (que some por baixo) e a do
   seguinte são pedidas; sem script, vêm um embaixo do outro. */
.dia-palco { position: relative; overflow: hidden; border-radius: 28px; background: #0a110e; box-shadow: 0 32px 64px rgba(13, 21, 18, 0.2); color: #fff; isolation: isolate; container-type: inline-size; }
.js .dia-palco { display: grid; grid-template-columns: minmax(0, 1fr); }
.painel { position: relative; display: flex; flex-direction: column; padding-top: 58%; overflow: hidden; background: #0a110e; isolation: isolate; }
.painel::before, .painel::after { content: ""; position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.painel::before { aspect-ratio: 4 / 5; }
/* sem a foto, um céu da hora do dia fica no lugar */
.painel::before { background: linear-gradient(180deg, #f6b98a 0%, #f7dfc0 46%, #cfe9d6 100%); }
.p1::before { background: linear-gradient(180deg, #6cc7d8 0%, #bfe9dc 52%, #eef8ec 100%); }
.p2::before { background: linear-gradient(180deg, #f0a25e 0%, #f8cf8e 48%, #f3e6c4 100%); }
.p3::before { background: linear-gradient(180deg, #06120e 0%, #0d2a20 60%, #17402f 100%); }
.p4::before { background: linear-gradient(180deg, #1f7a4d 0%, #57c98b 55%, #c8f3d9 100%); }
/* O escurecimento acompanha a foto (as medidas em cqw são frações da largura do palco: a foto tem 125 de
   altura) e fecha no pé do painel, onde o fundo já é liso. Sem cqw, vale a primeira regra. */
.painel::after { bottom: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 17, 14, 0) 0%, rgba(10, 17, 14, 0.5) 42%, #0a110e 78%); background: linear-gradient(180deg, rgba(10, 17, 14, 0) 0, rgba(10, 17, 14, 0) 40cqw, rgba(10, 17, 14, 0.5) 64cqw, rgba(10, 17, 14, 0.9) 94cqw, #0a110e 124cqw), linear-gradient(0deg, #0a110e 0, rgba(10, 17, 14, 0) 112px); }
.foto { width: 100%; height: 100%; object-fit: cover; }
.painel .foto { position: absolute; left: 0; top: 0; height: auto; aspect-ratio: 4 / 5; filter: saturate(0.94) contrast(1.03); }
.js .dia-palco .painel { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.js .dia-palco .painel.ant { visibility: visible; opacity: 1; }
.js .dia-palco .painel.at { z-index: 1; visibility: visible; opacity: 1; animation: surge 0.7s ease both; }
.js .dia-palco .painel:not(.at):not(.ant):not(.px) .foto { display: none; }
html:not(.js) .dia-palco .painel + .painel { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.momento { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding: 0 var(--e-2) var(--e-2); }
.hora-g { display: flex; align-items: center; gap: 12px; margin: 0; }
.hora-g span { flex: none; font-size: var(--t-9); font-weight: 200; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5); }
.hora-g small { color: rgba(255, 255, 255, 0.92); font-size: var(--t-2); font-weight: 500; line-height: 1.25; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.peca { display: flex; flex-direction: column; gap: var(--e-1); font-family: var(--sistema); }
.dia-palco > .legenda { position: relative; z-index: 3; margin: 0; padding: 0 var(--e-2) 14px; background: #0a110e; color: rgba(255, 255, 255, 0.74); font-size: var(--t-0); text-align: center; }

.etq { align-self: flex-start; padding: 2px 12px; border-radius: 12px; background: var(--menta); color: #03130b; font-size: var(--t-0); font-weight: 700; line-height: 1.67; }
.aviso { display: flex; align-items: flex-start; gap: 12px; padding: 14px var(--e-2); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 22px; background: rgba(28, 40, 34, 0.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); color: #fff; font-size: var(--t-3); line-height: 1.35; }
.aviso p { margin: 0; }
.aviso-i svg { width: 44px; height: 44px; border-radius: 12px; }
.aviso-c { flex: 1; min-width: 0; }
.aviso-q { display: flex; justify-content: space-between; gap: var(--e-1); }
.aviso-q { font-size: var(--t-2); }
.aviso-q span { color: rgba(255, 255, 255, 0.7); font-size: var(--t-1); }

.mini { display: flex; flex-direction: column; gap: 6px; }
.mb { max-width: 86%; padding: var(--e-1) 12px; border-radius: 16px; font-family: var(--sistema); font-size: var(--t-2); line-height: 1.375; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22); }
.mb.juh { align-self: flex-start; border-top-left-radius: 4px; background: #fff; color: var(--tinta); }
.mb.eu { align-self: flex-end; border-top-right-radius: 4px; background: #0e5a3a; color: #f2fff8; }
.mb .au { padding: 2px 0; }
.mbts { display: flex; gap: 6px; max-width: 86%; }
.mbts span { position: relative; flex: 1; overflow: hidden; padding: var(--e-1) 12px; border-radius: 16px; background: #fff; color: var(--verde-escuro); font-family: var(--sistema); font-size: var(--t-2); font-weight: 600; line-height: 1.375; text-align: center; white-space: nowrap; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22); }
.mbts .toque { background: #d5f2e0; }
.mb.foto-b { position: relative; width: 176px; height: 112px; padding: 0; overflow: hidden; background: linear-gradient(160deg, #8b908a, #565b57); }
.foto-b .cupom { left: 24px; top: 10px; width: 128px; }
.resumo { padding: 12px 12px 6px; border-radius: 20px; background: #fff; color: var(--tinta); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3); }
.resumo strong { display: block; margin: 6px 0 2px; font-family: var(--letra); font-size: var(--t-2); font-weight: 500; letter-spacing: -0.01em; }
.resumo .arq { display: inline-flex; padding: 4px 10px 4px 6px; background: var(--papel); font-size: var(--t-0); }
.resumo .arq .icone { width: 20px; height: 20px; color: var(--alerta); }
.resumo .ln { padding: 4px 0; border-top-color: var(--linha); font-size: var(--t-1); }
.resumo .ln > span { color: var(--tinta-suave); }
.resumo .bom { color: var(--verde); }

/* as peças de cada momento entram em sequência quando o momento fica à mostra */
.vivo .painel .e1, .vivo .painel .e2, .vivo .painel .e3, .vivo .painel .e4 { opacity: 0; transform: translateY(14px) scale(0.97); }
.vivo .on .painel.at .e1, .vivo .on .painel.at .e2, .vivo .on .painel.at .e3, .vivo .on .painel.at .e4 { opacity: 1; transform: none; transition: opacity 0.4s ease-out, transform 0.5s var(--curva); }
.vivo .on .painel.at .e1 { transition-delay: 0.35s; }
.vivo .on .painel.at .e2 { transition-delay: 1.1s; }
.vivo .on .painel.at .e3 { transition-delay: 1.9s; }
.vivo .on .painel.at .e4 { transition-delay: 3.1s; }
.vivo .on .painel.at .toque { animation: aperta 0.3s ease-out 2.7s both; }
.vivo .on .painel.at .foto-b .vr { animation: varre-p 0.9s ease-in-out 0.7s 2; }
.vivo .on .painel.at .mb .ench, .vivo .on .painel.at .mb .ench svg { animation: enche-som 1.6s linear 0.6s both; }
.vivo .painel .mb .ench { transform: translateX(-100%); }
.vivo .painel .mb .ench svg { transform: translateX(100%); }

/* ------------------------------------------------------------ 4. raio-x */

/* As contas espalhadas são miniaturas reconhecíveis: boleto de luz e fatura do cartão, cada uma com as suas
   linhas, o total e o código de barras desenhado. */
.raiox-cena { position: relative; padding-top: 104px; }
.papel { position: absolute; top: 0; z-index: 2; display: flex; flex-direction: column; gap: 6px; width: 96px; height: 128px; padding: 10px; overflow: hidden; border-radius: 8px; background: #fbfcf8; color: #1b221e; font-size: var(--t-0); line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); }
.papel b { display: flex; flex: none; align-items: center; gap: 4px; height: 16px; font-weight: 700; }
.papel em { display: block; flex: none; height: 4px; border-radius: 2px; background: #cfd6cf; }
.papel em + em { width: 70%; }
.papel .icone { width: 16px; height: 16px; color: #b9770e; stroke-width: 2.2; }
.pa-total { display: flex; flex: none; justify-content: space-between; margin-top: 2px; padding-top: 6px; border-top: 1px dashed #aab3ac; }
.pa-total em, .pa-total em + em { width: 30%; height: 5px; background: #1b221e; }
.cb { display: block; flex: none; height: 22px; margin-top: auto; background: repeating-linear-gradient(90deg, #1b221e 0, #1b221e 2px, rgba(27, 34, 30, 0) 2px, rgba(27, 34, 30, 0) 3px, #1b221e 3px, #1b221e 4px, rgba(27, 34, 30, 0) 4px, rgba(27, 34, 30, 0) 7px, #1b221e 7px, #1b221e 10px, rgba(27, 34, 30, 0) 10px, rgba(27, 34, 30, 0) 12px); }
.pa-luz, .pa-luz2 { border-left: 4px solid #e2a22e; }
.pa-fatura { left: 4%; transform: rotate(-8deg); }
.pa-fatura b { height: auto; margin: -10px -10px 2px; padding: 9px 10px; background: #18211c; color: #fff; }
.pa-fatura .chip { width: 18px; height: 13px; border-radius: 3px; background: linear-gradient(135deg, #f1d38a, #b98a2e); }
.pa-luz { left: 50%; margin-left: -48px; transform: translateY(-6px) rotate(3deg); }
.pa-luz2 { right: 4%; transform: rotate(9deg); }

.quadro, .plano-q { position: relative; border: 1px solid var(--linha-e); border-radius: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 32px 64px rgba(0, 0, 0, 0.5); }
.quadro { z-index: 1; padding: var(--e-3) var(--e-2) var(--e-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background-color: rgba(10, 17, 14, 0.8); }
.quadro-t { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--e-2); color: var(--suave-e); font-size: var(--t-0); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.etq-e { display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; border: 1px solid var(--linha-e); border-radius: 12px; color: var(--texto-e); font-size: var(--t-0); font-weight: 600; letter-spacing: 0.06em; line-height: 1.67; text-transform: uppercase; }
.etq-e .icone { width: 14px; height: 14px; }
.linhas li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linha-e); }
.ico { display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(111, 227, 165, 0.12); color: var(--menta); }
.ico .icone { width: 22px; height: 22px; }
.nome { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.nome b { font-size: var(--t-2); font-weight: 500; }
.nome small { color: var(--suave-e); font-size: var(--t-1); }
.val { font-size: var(--t-3); font-weight: 500; white-space: nowrap; }
.total-l { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-2); margin: 0; padding: var(--e-2) 0 12px; border-top: 1px solid rgba(111, 227, 165, 0.5); }
.total-l span { color: var(--suave-e); font-size: var(--t-2); }
.total-l b { font-size: var(--t-8); font-weight: 300; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.conta-l { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-2); margin: 0; padding: 6px 0; color: var(--suave-e); font-size: var(--t-2); }
.conta-l b { color: var(--texto-e); font-weight: 500; white-space: nowrap; }
.conta-l.c1 { padding-top: 12px; border-top: 1px solid var(--linha-e); }
.sobra-l { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); margin: var(--e-1) 0 0; padding: 12px var(--e-2); border-radius: 16px; background: rgba(111, 227, 165, 0.12); color: var(--menta-clara); font-size: var(--t-2); line-height: 1.3; }
.sobra-l b { font-size: var(--t-5); font-weight: 500; white-space: nowrap; }
.raiox > .legenda { margin-top: var(--e-2); text-align: center; }
.negocia > .legenda { margin-top: 4px; text-align: center; }

/* antes de entrar na tela: papéis espalhados e a lista vazia */
.vivo [data-ver]:not(.on) .pa-fatura { transform: translate(8px, 190px) rotate(-20deg) scale(1.25); }
.vivo [data-ver]:not(.on) .pa-luz { transform: translate(-36px, 360px) rotate(16deg) scale(1.3); }
.vivo [data-ver]:not(.on) .pa-luz2 { transform: translate(-24px, 250px) rotate(26deg) scale(1.25); }
.vivo [data-ver]:not(.on) .linhas li, .vivo [data-ver]:not(.on) .conta-l, .vivo [data-ver]:not(.on) .sobra-l { opacity: 0; transform: translateY(16px); }
.vivo [data-ver]:not(.on) .total-l { opacity: 0; }
/* a peça aparece com os papéis ainda espalhados; depois eles se juntam e a lista se forma */
.vivo .on .papel { transition: transform 1.1s var(--curva); }
.vivo .on .pa-luz { transition-delay: 1.1s; }
.vivo .on .pa-luz2 { transition-delay: 1.3s; }
.vivo .on .pa-fatura { transition-delay: 1.7s; }
.vivo .on .linhas li, .vivo .on .conta-l, .vivo .on .sobra-l { transition: opacity 0.5s ease-out, transform 0.6s var(--curva); }
.vivo .on .total-l { transition: opacity 0.5s ease-out 1.7s; }
.vivo .on .linhas .r1 { transition-delay: 1.7s; }
.vivo .on .linhas .r2 { transition-delay: 2.3s; }
/* cada linha acende quando o papel dela pousa na lista */
.vivo .on .linhas .ico { animation: pulsa 0.7s ease-out 1.9s both; }
.vivo .on .linhas .r2 .ico { animation-delay: 2.5s; }
.vivo .on .conta-l.c1 { transition-delay: 3.8s; }
.vivo .on .conta-l.c2 { transition-delay: 4.1s; }
.vivo .on .sobra-l { transition-delay: 4.6s; }

/* ------------------------------------------------------------ 5. plano */

.plano-q { display: grid; gap: var(--e-3); max-width: 1040px; margin: 0 auto; padding: var(--e-2); }
.plano-esq { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); }
.plano-esq .mini { align-self: stretch; }
.plano-esq .mb { max-width: 100%; box-shadow: none; }
.caminhos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.caminhos span { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--linha-e); border-radius: 16px; background: rgba(255, 255, 255, 0.05); line-height: 1.3; }
.caminhos b { color: var(--menta); font-size: var(--t-2); font-weight: 600; }
.caminhos small { color: var(--suave-e); font-size: var(--t-1); }
.caminhos .toque { border-color: rgba(111, 227, 165, 0.6); background: rgba(111, 227, 165, 0.14); }
.numeros { display: grid; gap: 0; align-self: stretch; margin: 0; }
.numeros div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-2); padding: 12px 0; border-top: 1px solid var(--linha-e); }
.numeros dt { flex: none; color: var(--suave-e); font-size: var(--t-1); }
.numeros dd { margin: 0; font-size: var(--t-3); line-height: 1.3; text-align: right; }
/* O gráfico: uma coluna por mês, com o valor em cima da barra. A altura de cada barra vem do HTML (atributo
   height do svg, em % da coluna), porque a CSP não deixa pôr estilo inline. */
.graf { display: flex; align-items: stretch; height: 232px; margin: 0 -4px; background: linear-gradient(var(--linha-e), var(--linha-e)) 0 calc(100% - 28px) / 100% 1px no-repeat; }
.gc { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.gv { flex: none; margin-bottom: 6px; color: var(--texto-e); font-size: var(--t-0); font-weight: 600; line-height: 1.34; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rs { display: none; }
.gb { flex: none; width: 68%; max-width: 48px; border-radius: 6px 6px 2px 2px; transform-origin: 50% 100%; }
.gz { display: flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; margin-bottom: 4px; border-radius: 50%; background: var(--menta); color: #03130b; }
.gz .icone { width: 16px; height: 16px; stroke-width: 3; }
.gm { flex: none; margin-top: var(--e-1); padding: 0 6px; border-radius: 10px; color: var(--suave-e); font-size: var(--t-0); line-height: 1.67; }
.b-cartao { fill: var(--menta); background: var(--menta); }
.b-luz { fill: #f1fff7; background: #f1fff7; }
.fim .gv { color: var(--menta-clara); }
.fim .gm { background: var(--menta); color: #03130b; font-weight: 700; }
.legenda-g { display: flex; flex-wrap: wrap; gap: 4px var(--e-2); margin-top: var(--e-2); color: var(--suave-e); font-size: var(--t-1); }
.legenda-g li { display: inline-flex; align-items: center; gap: var(--e-1); }
.legenda-g i { width: 12px; height: 12px; border-radius: 3px; }
.legenda-g .so-estreito { margin-left: auto; }
.ressalva { margin: var(--e-2) 0 0; padding: 12px var(--e-2); border-left: 3px solid var(--menta); border-radius: 0 12px 12px 0; background: rgba(111, 227, 165, 0.08); color: var(--texto-e); font-size: var(--t-2); line-height: 1.4; }
.plano-q > .legenda { text-align: center; }

/* A coluna da esquerda fica à mostra desde o início; o que se mexe é o gráfico: as barras sobem uma depois
   da outra, cada mês mais baixa que o anterior, e o valor aparece em cima de cada uma. */
.vivo [data-ver]:not(.on) .gb { transform: scaleY(0); }
.vivo [data-ver]:not(.on) .gv, .vivo [data-ver]:not(.on) .gz, .vivo [data-ver]:not(.on) .ressalva { opacity: 0; transform: translateY(8px); }
.vivo .on .gb { transition: transform 0.7s var(--curva) 0.5s; }
.vivo .on .gv, .vivo .on .gz, .vivo .on .ressalva { transition: opacity 0.4s ease-out 0.9s, transform 0.5s var(--curva) 0.9s; }
.vivo .on .k1 .gb { transition-delay: 0.78s; }
.vivo .on .k1 .gv { transition-delay: 1.18s; }
.vivo .on .k2 .gb { transition-delay: 1.06s; }
.vivo .on .k2 .gv { transition-delay: 1.46s; }
.vivo .on .k3 .gb { transition-delay: 1.34s; }
.vivo .on .k3 .gv { transition-delay: 1.74s; }
.vivo .on .k4 .gb { transition-delay: 1.62s; }
.vivo .on .k4 .gv { transition-delay: 2.02s; }
.vivo .on .k5 .gb { transition-delay: 1.9s; }
.vivo .on .k5 .gv { transition-delay: 2.3s; }
.vivo .on .k6 .gv, .vivo .on .k6 .gz { transition-delay: 2.7s; }
.vivo .on .ressalva { transition-delay: 3.1s; }
.vivo .on .caminhos .toque { animation: aperta 0.3s ease-out 0.9s both; }

/* ------------------------------------------------------------ 7. pagou, caiu */

.pagou-cena { display: grid; gap: var(--e-2); }
.placar { padding: var(--e-3) var(--e-2) var(--e-2); border: 1px solid var(--linha-e); border-radius: 28px; background: radial-gradient(ellipse 90% 80% at 50% 0%, rgba(47, 191, 116, 0.24), rgba(4, 8, 6, 0) 70%), var(--noite-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 32px 64px rgba(0, 0, 0, 0.5); }
.placar-t { margin: 0; color: var(--suave-e); font-size: var(--t-0); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.placar-n { margin: 4px 0 var(--e-2); font-size: var(--t-10); font-weight: 200; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.placar-n b { font-weight: 200; white-space: nowrap; }
.placar-l li { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linha-e); font-size: var(--t-2); }
.placar-l span { flex: 1; }
.placar-l b { font-weight: 500; white-space: nowrap; }
.placar-l em { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 6px; border-radius: 12px; background: var(--menta); color: #03130b; font-size: var(--t-0); font-style: normal; font-weight: 700; line-height: 1.67; }
.placar-l em .icone { width: 14px; height: 14px; stroke-width: 3; }
.quitada span, .quitada b { color: var(--suave-e); }
.quitada b { position: relative; }
.quitada b::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--coral); transform-origin: 0 50%; }
.pagou .mini { padding: 0 4px; }
.pagou .mb { max-width: 92%; box-shadow: none; }
.pagou .mb.juh { background: #1a2520; color: #eef3f0; }
.pagou .mbts { max-width: 92%; }
.pagou .mbts span { background: #1a2520; color: var(--menta); box-shadow: none; }
.pagou .mbts .toque { background: #153d2a; }
.pagou > .legenda { margin-top: var(--e-2); text-align: center; }

.vivo [data-ver]:not(.on) .pagou .e1, .vivo [data-ver]:not(.on) .pagou .e2, .vivo [data-ver]:not(.on) .pagou .e3, .vivo [data-ver]:not(.on) .pagou .e4 { opacity: 0; transform: translateY(14px) scale(0.97); }
.vivo [data-ver]:not(.on) .quitada em { opacity: 0; transform: scale(0.6); }
.vivo [data-ver]:not(.on) .quitada b::after { transform: scaleX(0); }
.vivo .on .pagou .e1, .vivo .on .pagou .e2, .vivo .on .pagou .e3, .vivo .on .pagou .e4 { transition: opacity 0.4s ease-out, transform 0.5s var(--curva); }
.vivo .on .pagou .e1 { transition-delay: 0.6s; }
.vivo .on .pagou .e2 { transition-delay: 1.6s; }
.vivo .on .pagou .e3 { transition-delay: 2.6s; }
.vivo .on .pagou .e4 { transition-delay: 4.6s; }
.vivo .on .pagou .toque { animation: aperta 0.3s ease-out 3.8s both; }
.vivo .on .quitada b::after { transition: transform 0.5s var(--curva) 5.2s; }
.vivo .on .quitada em { transition: opacity 0.4s ease-out 5.5s, transform 0.5s var(--curva) 5.5s; }

/* ------------------------------------------------------------ 6. negociação */

/* A foto (mãos, celular e caderno: sem rosto) fica na coluna dela, sem nada por cima; a folha do roteiro e o
   convite para treinar ficam na outra. No celular a peça é só a folha e o convite (a foto, escondida, nem é
   pedida: a seção fica mais curta). */
.negocia { display: grid; gap: 12px; }
.negocia-foto { display: none; position: relative; overflow: hidden; border-radius: 24px; background: linear-gradient(160deg, #cfe9d6, #8fd0aa); aspect-ratio: 2 / 1; }
.negocia-foto .foto { object-position: 50% 62%; filter: saturate(0.92) contrast(1.04); }
.negocia-col { display: grid; gap: 12px; }
.rot-folha { overflow: hidden; border: 1px solid rgba(13, 21, 18, 0.18); border-radius: 22px; background: var(--branco); box-shadow: 0 24px 56px rgba(13, 21, 18, 0.2); }
.rot-cab { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px var(--e-2); background: var(--noite-2); color: #fff; line-height: 1.25; }
.rot-cab span + span { display: flex; flex-direction: column; }
.rot-cab small, .rot-bl small { font-size: var(--t-0); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.rot-cab small { color: var(--menta); }
.rot-bl small { color: var(--verde-escuro); }
.rot-cab b { font-size: var(--t-4); font-weight: 500; letter-spacing: -0.01em; }
.claro .ico { background: var(--verde-claro); color: var(--verde-escuro); }
.claro .rot-cab .ico { background: rgba(111, 227, 165, 0.16); color: var(--menta); }
.rot-bl { padding: 10px var(--e-2); border-top: 1px solid var(--linha); }
.rot-bl p { margin: 2px 0 0; color: var(--tinta); font-size: var(--t-2); line-height: 1.35; }
/* a faixa: do mínimo ao máximo, com o valor escrito em cada ponta */
.trilho { position: relative; display: block; height: 8px; margin: 12px var(--e-1) 6px; border-radius: 4px; background: var(--linha); }
.trilho i { position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, #8ee8b8, var(--verde)); transform-origin: 0 50%; }
.trilho::before, .trilho::after { content: ""; position: absolute; top: -4px; z-index: 1; width: 16px; height: 16px; border: 3px solid var(--branco); border-radius: 50%; background: var(--verde); box-shadow: 0 2px 6px rgba(13, 21, 18, 0.3); }
.trilho::before { left: -8px; background: #57c98b; }
.trilho::after { right: -8px; }
.pontas { display: flex; justify-content: space-between; margin-bottom: 4px; color: var(--tinta-suave); font-size: var(--t-0); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.pontas b { color: var(--tinta); font-size: var(--t-1); font-weight: 700; letter-spacing: 0; }
.rot-pe { margin: 0; padding: 10px var(--e-2) 14px; border-top: 1px solid var(--linha); background: var(--papel); color: var(--tinta-suave); font-size: var(--t-1); line-height: 1.4; }
.rot-bolha { display: flex; flex-direction: column; gap: 6px; }
.rot-bolha .mb { max-width: 100%; align-self: stretch; }
.rot-bolha .mbts { align-self: stretch; max-width: none; }
.rot-bolha .mb, .rot-bolha .mbts span { box-shadow: 0 12px 32px rgba(13, 21, 18, 0.14); }
.rot-bolha .mb { border: 1px solid var(--linha); }
.rot-bolha .mbts span { border: 1px solid var(--linha); }
.vivo [data-ver]:not(.on) .rot-bl, .vivo [data-ver]:not(.on) .rot-pe, .vivo [data-ver]:not(.on) .rot-bolha { opacity: 0; transform: translateY(14px); }
.vivo [data-ver]:not(.on) .trilho i { transform: scaleX(0); }
.vivo .on .rot-bl, .vivo .on .rot-pe, .vivo .on .rot-bolha { transition: opacity 0.5s ease-out, transform 0.6s var(--curva); }
.vivo .on .trilho i { transition: transform 1s var(--curva) 1.5s; }
.vivo .on .negocia .e1 { transition-delay: 0.4s; }
.vivo .on .negocia .e2 { transition-delay: 0.8s; }
.vivo .on .negocia .e3 { transition-delay: 1.2s; }
.vivo .on .negocia .e4 { transition-delay: 1.8s; }
.vivo .on .negocia .e5 { transition-delay: 2.2s; }
.vivo .on .negocia .e6 { transition-delay: 2.7s; }

/* ------------------------------------------------------------ 7. três jeitos de falar */

.jeitos { display: grid; gap: var(--e-2); }
.jeito { padding: var(--e-1) var(--e-1) var(--e-3); border: 1px solid var(--linha); border-radius: 28px; background: var(--papel); }
.jeito h3 { display: flex; align-items: center; gap: 10px; margin: var(--e-3) var(--e-2) 4px; }
.jeito h3 .icone { color: var(--verde); }
.jeito p { margin: 0 var(--e-2); color: var(--tinta-suave); font-size: var(--t-2); }
.jeito-cena { position: relative; display: flex; height: 216px; overflow: hidden; border-radius: 20px; background: radial-gradient(ellipse 80% 70% at 50% 100%, rgba(47, 191, 116, 0.26), rgba(4, 8, 6, 0) 70%), var(--noite-2); color: var(--texto-e); font-family: var(--sistema); }
.j-texto { flex-direction: column; justify-content: flex-end; gap: 12px; padding: var(--e-2); }
.j-texto .mb { box-shadow: none; }
.jeito .campo { display: flex; align-items: center; gap: var(--e-1); margin: 0; padding: 4px 4px 4px var(--e-2); border: 1px solid var(--linha-e); border-radius: 26px; background: #111a16; color: var(--texto-e); font-size: var(--t-2); }
.digita { position: relative; flex: 1; overflow: hidden; white-space: nowrap; line-height: 44px; }
.digita i { position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-left: 2px solid var(--menta); background: #111a16; transform: translateX(100%); }
.campo b { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #a6f5cb, #2bbf74); color: #03130b; }
.j-audio { flex-direction: column; align-items: center; justify-content: center; gap: var(--e-2); }
.mic { position: relative; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #a6f5cb, #2bbf74); color: #03130b; }
.mic .icone { position: relative; width: 28px; height: 28px; }
.mic i { position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: 1px solid var(--menta); border-radius: 50%; opacity: 0; }
.barras { display: flex; align-items: center; gap: 3px; height: 40px; }
.barras i { width: 3px; height: 40px; border-radius: 2px; background: var(--menta-clara); transform: scaleY(0.2); }
.j-audio small { color: var(--suave-e); font-size: var(--t-1); font-variant-numeric: tabular-nums; }
.j-foto { align-items: center; justify-content: center; }
.boleto { position: relative; display: flex; flex-direction: column; gap: 7px; width: 168px; padding: 14px 14px 18px; border-radius: 6px; background: #fffef6; color: #2a2d2b; font: 700 12px/1.34 ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; transform: rotate(-4deg); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
.boleto i { display: block; height: 4px; border-radius: 2px; background: #cfd3ce; }
.boleto i + i { width: 64%; }
.boleto em { display: block; height: 20px; margin-top: 4px; background: repeating-linear-gradient(90deg, #2a2d2b 0, #2a2d2b 2px, rgba(42, 45, 43, 0) 2px, rgba(42, 45, 43, 0) 5px); }
.campo-l { position: relative; align-self: flex-start; }
.campo-l::after { content: ""; position: absolute; left: -5px; right: -5px; top: -3px; bottom: -3px; border: 2px solid #23a862; border-radius: 4px; background: rgba(35, 168, 98, 0.16); }
.j-foto .vr { height: 64px; }

.vivo .on .digita i { animation: digita 7s steps(20, end) infinite; }
.vivo .on .j-texto .mb { animation: responde 7s ease-out infinite; }
.vivo .on .mic i { animation: anel 2.4s ease-out infinite; }
.vivo .on .mic i + i { animation-delay: 1.2s; }
.vivo .on .barras i { animation: som 1.1s ease-in-out infinite alternate; }
.vivo .on .barras i:nth-child(3n) { animation-duration: 0.8s; animation-delay: -0.3s; }
.vivo .on .barras i:nth-child(3n + 1) { animation-duration: 1.3s; animation-delay: -0.7s; }
.vivo .on .barras i:nth-child(4n) { animation-delay: -0.5s; }
.vivo .on .barras i:nth-child(5n) { animation-duration: 0.95s; animation-delay: -0.15s; }
.vivo .on .j-foto .vr { animation: varre-j 3.2s ease-in-out infinite; }
.vivo .on .campo-l::after { animation: marca 3.2s ease-out infinite; }
.vivo .on .campo-l.c2::after { animation-delay: 0.5s; }

.frases { display: grid; gap: 12px; margin: var(--e-5) 0 0; overflow: hidden; }
.js:not(.calmo) .frases { margin-left: calc(var(--e-2) * -1); margin-right: calc(var(--e-2) * -1); -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 10%, #000 90%, rgba(0, 0, 0, 0)); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 10%, #000 90%, rgba(0, 0, 0, 0)); }
.frases-trilho { display: flex; }
.frases ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-right: 12px; }
.js:not(.calmo) .frases-trilho { width: -moz-max-content; width: max-content; animation: corre 48s linear infinite; }
.js:not(.calmo) .frases-trilho.volta { animation-direction: reverse; animation-duration: 56s; }
.js:not(.calmo) .frases ul { flex-wrap: nowrap; }
.frases li { display: flex; align-items: flex-end; gap: var(--e-1); padding: var(--e-1) 12px; border-radius: 16px; border-top-right-radius: 4px; background: #d9f3e2; color: var(--tinta); font-family: var(--sistema); font-size: var(--t-2); line-height: 1.375; white-space: nowrap; }
.tq2 { position: static; flex: none; width: 16px; height: 11px; margin-bottom: 4px; color: #2f8fd8; }

/* ------------------------------------------------------------ 8. o que a Juh não faz */

.naos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-1); }
.nao { padding: var(--e-3) var(--e-2); border: 1px solid var(--linha-e); border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)); }
.nao h3 { margin: var(--e-2) 0 4px; font-size: var(--t-3); line-height: 1.2; }
.nao p { margin: 0; color: var(--suave-e); font-size: var(--t-1); line-height: 1.4; }
.nao-i { position: relative; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 1px solid rgba(255, 154, 134, 0.4); border-radius: 50%; background: rgba(255, 154, 134, 0.08); color: #ffc7bb; }
.nao-i .icone { width: 28px; height: 28px; }
.nao-i i { position: absolute; left: -6px; right: -6px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--coral); box-shadow: 0 0 12px rgba(255, 154, 134, 0.6); transform: rotate(-45deg); }
.vivo [data-ver]:not(.on) .nao-i i { transform: rotate(-45deg) scaleX(0); }
.vivo .on .nao-i i { transition: transform 0.5s var(--curva) 0.7s; }
.vivo .on .nao-i .icone { animation: nega 0.5s ease-in-out 0.45s both; }
.vivo .on .a2 .nao-i i { transition-delay: 0.9s; }
.vivo .on .a2 .nao-i .icone { animation-delay: 0.65s; }
.vivo .on .a3 .nao-i i { transition-delay: 1.1s; }
.vivo .on .a3 .nao-i .icone { animation-delay: 0.85s; }
.vivo .on .a4 .nao-i i { transition-delay: 1.3s; }
.vivo .on .a4 .nao-i .icone { animation-delay: 1.05s; }

/* ------------------------------------------------------------ 9. preço */

.planos { display: grid; gap: var(--e-2); max-width: 880px; margin: 0 auto; }
.plano { display: flex; flex-direction: column; padding: var(--e-3); border: 1px solid var(--linha); border-radius: 28px; background: var(--branco); }
/* o mensal tem o mesmo acabamento do anual (borda em degradê, luz no canto e sombra), em versão clara */
.plano.leve { position: relative; overflow: hidden; border: 1.5px solid transparent; background: radial-gradient(ellipse 90% 60% at 80% 0%, rgba(47, 191, 116, 0.18), rgba(255, 255, 255, 0) 70%) padding-box, linear-gradient(var(--branco), var(--branco)) padding-box, linear-gradient(140deg, #57c98b 0%, #dce3dc 44%, rgba(31, 122, 77, 0.55) 100%) border-box; box-shadow: 0 24px 56px rgba(13, 21, 18, 0.12); }
.plano.destaque { --foco: #ffffff; position: relative; overflow: hidden; border: 1.5px solid transparent; background: radial-gradient(ellipse 90% 60% at 80% 0%, rgba(47, 191, 116, 0.34), rgba(4, 8, 6, 0) 70%) padding-box, linear-gradient(var(--noite-2), var(--noite-2)) padding-box, linear-gradient(140deg, #a6f5cb 0%, #1f7a4d 42%, rgba(255, 255, 255, 0.12) 100%) border-box; box-shadow: 0 32px 64px rgba(13, 21, 18, 0.28); color: var(--texto-e); }
.plano-n { display: flex; align-items: center; justify-content: space-between; gap: var(--e-1); margin: 0 0 12px; font-size: var(--t-1); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.plano-n em { padding: 2px 12px; border-radius: 12px; background: var(--menta); color: #03130b; font-size: var(--t-0); font-style: normal; letter-spacing: 0.04em; line-height: 1.67; }
.valor { margin: 0 0 var(--e-2); color: var(--tinta-suave); font-size: var(--t-2); line-height: 1.4; }
.destaque .valor { color: var(--suave-e); }
.valor strong { display: block; color: var(--tinta); font-size: var(--t-8); font-weight: 300; letter-spacing: -0.04em; line-height: 1.1; }
.destaque .valor strong { color: #fff; }
.inclui { display: grid; gap: var(--e-1); margin-bottom: 20px; font-size: var(--t-2); line-height: 1.35; }
.inclui li { display: flex; align-items: flex-start; gap: 12px; }
.inclui .icone { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--verde-claro); color: var(--verde-escuro); stroke-width: 2.6; }
.destaque .inclui .icone { background: rgba(111, 227, 165, 0.18); color: var(--menta); }
.plano .botao, .plano .em-breve { min-height: 48px; margin-top: auto; padding-left: var(--e-2); padding-right: var(--e-2); white-space: nowrap; }
.destaque .em-breve { border-color: rgba(111, 227, 165, 0.42); background: rgba(111, 227, 165, 0.1); color: var(--menta-clara); }
.destaque .em-breve i { background: var(--menta); }
.miudo { display: flex; align-items: flex-start; gap: 12px; max-width: 880px; margin: var(--e-2) auto 0; padding: 14px var(--e-2); border: 1px solid rgba(31, 122, 77, 0.32); border-radius: 20px; background: var(--verde-claro); color: var(--tinta); font-size: var(--t-1); line-height: 1.45; }
.miudo .icone { width: 28px; height: 28px; margin-top: 2px; color: var(--verde-escuro); }
.miudo strong { font-weight: 600; }

/* ------------------------------------------------------------ 10. perguntas */

#preco .centro { margin-bottom: var(--e-3); }
#perguntas h2 { margin-bottom: var(--e-3); }
.perguntas { display: grid; gap: var(--e-1); }
.perguntas details { border: 1px solid var(--linha); border-radius: 20px; background: var(--branco); }
.perguntas summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); min-height: 64px; padding: var(--e-1) var(--e-2) var(--e-1) var(--e-3); font-size: var(--t-3); font-weight: 500; line-height: 1.3; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.perguntas summary:focus-visible { border-radius: 20px; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: ""; flex: none; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(var(--verde-escuro), var(--verde-escuro)) 50% 50% / 14px 2px no-repeat, linear-gradient(var(--verde-escuro), var(--verde-escuro)) 50% 50% / 2px 14px no-repeat, var(--verde-claro); transition: transform 0.3s var(--curva); }
.perguntas details[open] summary::after { transform: rotate(45deg); }
.perguntas details > p { margin: 0; padding: 0 var(--e-3) var(--e-3); color: var(--tinta-suave); font-size: var(--t-2); }

/* ------------------------------------------------------------ fecho e rodapé */

.fecho { position: relative; padding: var(--e-10) 0; overflow: hidden; background: radial-gradient(ellipse 84% 64% at 50% 112%, rgba(31, 122, 77, 0.46), rgba(4, 8, 6, 0) 72%), var(--noite); text-align: center; }
.fecho .miolo { display: grid; gap: var(--e-5); justify-items: center; }
.fecho-arte { position: relative; width: 70%; max-width: 320px; }
.fecho-foto { position: relative; z-index: 1; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 160px 160px 28px 28px; background: linear-gradient(160deg, #1f7a4d, #0a110e); aspect-ratio: 4 / 5; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 0 96px rgba(47, 191, 116, 0.18); }
.fecho-foto .foto { filter: saturate(0.92) contrast(1.04); }
.fecho-foto::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(180deg, rgba(31, 122, 77, 0.12), rgba(4, 8, 6, 0.4)); }
.fecho-texto { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.fecho h2 { font-size: var(--t-8); }
.fecho .sub { margin-bottom: var(--e-4); color: var(--texto-e); }
.fecho .botao, .fecho .em-breve { width: auto; min-width: 280px; }
.aneis { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.aneis i { position: absolute; left: -220px; top: -220px; width: 440px; height: 440px; border: 1px solid rgba(111, 227, 165, 0.34); border-radius: 50%; }
.js .aneis i { animation: respira 8s ease-in-out infinite alternate; }
.aneis i + i { left: -320px; top: -320px; width: 640px; height: 640px; border-color: rgba(111, 227, 165, 0.2); }
.aneis i + i + i { left: -440px; top: -440px; width: 880px; height: 880px; border-color: rgba(111, 227, 165, 0.12); }
.js .aneis i + i { animation-delay: -0.6s; }
.js .aneis i + i + i { animation-delay: -1.2s; }

.rodape { padding: var(--e-6) 0 var(--e-5); border-top: 1px solid var(--linha-e); color: var(--suave-e); font-size: var(--t-1); }
.rodape .miolo { display: grid; gap: var(--e-4); }
.rodape h2 { max-width: none; margin-bottom: var(--e-1); color: var(--texto-e); font-size: var(--t-1); font-weight: 600; letter-spacing: 0; }
.rodape p { margin: 0 0 var(--e-1); }
.rodape address { font-style: normal; }
.rodape .elos { display: grid; gap: 0; }
.rodape .elos a { display: inline-flex; align-items: center; min-height: 44px; }
.rodape .miolo > .pequeno { grid-column: 1 / -1; max-width: 720px; }
.apoio { align-self: start; padding: var(--e-2); border: 1px solid var(--linha-e); border-radius: 20px; background: rgba(255, 255, 255, 0.04); color: var(--texto-e); }
.apoio p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ termos, privacidade e 404 */

.documento { padding: var(--e-5) 0 var(--e-8); font-family: var(--sistema); }
.documento h1, .documento h2, .documento h3, .vazio h1 { font-family: var(--letra); }
.documento h1 { margin-bottom: var(--e-3); font-size: var(--t-8); }
.documento h2 { margin: var(--e-6) 0 var(--e-2); font-size: var(--t-5); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.documento h3 { margin: var(--e-4) 0 var(--e-1); font-size: var(--t-3); }
.documento ul, .documento ol { margin: 0 0 var(--e-2); padding-left: var(--e-3); }
.documento ul { list-style: disc; }
.documento ol { list-style: decimal; }
.documento li { margin-bottom: var(--e-1); }
.documento .olho { margin-bottom: var(--e-1); }
.ficha { margin: 0 0 var(--e-3); color: var(--tinta-suave); font-size: var(--t-1); }
.ficha b { color: var(--tinta); }
.versao { margin-bottom: var(--e-4); padding: var(--e-2) var(--e-3); border: 1px solid var(--alerta); border-radius: 16px; background: var(--alerta-claro); color: var(--alerta); font-weight: 700; }
.sumario { margin-bottom: var(--e-3); padding: var(--e-3); border: 1px solid var(--linha); border-radius: 20px; background: var(--branco); }
.sumario > :last-child { margin-bottom: 0; }
.sumario ul { padding-left: var(--e-3); }
.indice { margin: 0 0 var(--e-5); padding: var(--e-2) var(--e-3); border: 1px solid rgba(31, 122, 77, 0.3); border-radius: 20px; background: var(--verde-claro); }
.indice p { margin: 0 0 4px; color: var(--verde-escuro); font-size: var(--t-0); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.indice ol { margin: 0; padding-left: var(--e-3); font-size: var(--t-2); }
.indice li { margin: 0; }
.indice a { display: inline-flex; align-items: center; min-height: 40px; }
.prazos { margin: 0 0 var(--e-2); border-top: 1px solid var(--linha); }
.prazos div { display: grid; gap: 0; padding: var(--e-2) 0; border-bottom: 1px solid var(--linha); }
.prazos dt { font-weight: 700; }
.prazos dd { margin: 0; color: var(--tinta-suave); }
.tabela { margin: 0 0 var(--e-3); overflow-x: auto; }
.documento table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: var(--t-2); line-height: 1.4; }
.documento caption { padding: 0 0 var(--e-1); color: var(--tinta-suave); font-size: var(--t-1); text-align: left; }
.documento th, .documento td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
.documento th { font-weight: 600; }
.documento thead th { border-bottom: 2px solid var(--tinta); font-size: var(--t-1); }
.documento .revisao { display: inline-block; padding: 1px 8px; border-radius: 10px; background: var(--alerta-claro); color: var(--alerta); font-size: var(--t-0); font-weight: 600; white-space: nowrap; }
.caixa { margin: 0 0 var(--e-3); padding: var(--e-2) var(--e-3); border-left: 4px solid var(--verde); border-radius: 0 16px 16px 0; background: var(--verde-claro); }
.caixa > :last-child { margin-bottom: 0; }
/* Cláusula que limita alguma coisa para a pessoa (cancelamento do anual, o que o Fôlego não controla): em
   destaque, como o Código de Defesa do Consumidor manda (art. 54, parágrafo 4). */
.clausula { margin: 0 0 var(--e-3); padding: var(--e-2) var(--e-3); border: 2px solid var(--tinta); border-radius: 16px; background: var(--branco); font-weight: 600; }
.clausula > :last-child { margin-bottom: 0; }
.clausula-t { margin-bottom: var(--e-1); color: var(--alerta); font-size: var(--t-0); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.fala { margin: 0 0 var(--e-3); padding: var(--e-2); border: 1px solid var(--linha); border-radius: 20px; background: #e9efe9; font-family: var(--sistema); }
.fala figcaption { margin-bottom: var(--e-1); color: var(--tinta-suave); font-size: var(--t-0); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.fala .balao { width: -moz-fit-content; width: fit-content; max-width: 100%; margin: 0 0 var(--e-1); padding: 10px 14px; border-radius: 4px 18px 18px 18px; background: var(--branco); font-size: var(--t-2); line-height: 1.4; box-shadow: 0 1px 1px rgba(13, 21, 18, 0.08); }
.fala .balao + .balao { border-radius: 18px; }
.botoes-fala { display: flex; flex-wrap: wrap; gap: var(--e-1); margin: 0; }
.botoes-fala span { padding: 10px 16px; border: 1px solid rgba(31, 122, 77, 0.4); border-radius: 18px; background: var(--branco); color: var(--verde-escuro); font-size: var(--t-2); font-weight: 600; }
.outros { margin-top: var(--e-8); padding-top: var(--e-3); border-top: 1px solid var(--linha); }
.outros p { margin: 0 0 var(--e-1); color: var(--tinta-suave); font-size: var(--t-0); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.outros ul { display: flex; flex-wrap: wrap; gap: 0 var(--e-3); }
.outros a { display: inline-flex; align-items: center; min-height: 44px; }

/* ------------------------------------------------------------ 12. tudo às claras (home) */

.claras { display: grid; gap: var(--e-2); max-width: 1040px; margin: 0 auto; }
.carta { display: flex; flex-direction: column; gap: 4px; min-height: 44px; padding: var(--e-3); border: 1px solid var(--linha); border-radius: 24px; background: var(--branco); color: var(--tinta); text-decoration: none; }
.carta b { font-size: var(--t-3); font-weight: 600; letter-spacing: -0.01em; }
.carta span { color: var(--tinta-suave); font-size: var(--t-2); line-height: 1.4; }
.carta i { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--e-1); color: var(--verde-escuro); font-size: var(--t-1); font-style: normal; font-weight: 600; }
.carta i .icone { width: 18px; height: 18px; }
.carta:hover { color: var(--tinta); border-color: var(--verde); }

.vazio { padding: var(--e-10) 0; text-align: center; }
.vazio h1 { font-size: var(--t-8); }
.vazio .botao { width: auto; }

/* ------------------------------------------------------------ toque e ponteiro: os cartões respondem */

@media (hover: hover) {
  .jeito, .nao, .plano, .carta, .perguntas details { transition: transform 0.3s var(--curva); }
  .jeito:hover, .nao:hover, .plano:hover, .carta:hover, .vivo [data-ver].on .jeito:hover, .vivo [data-ver].on .nao:hover, .vivo [data-ver].on .plano:hover, .vivo [data-ver].on .carta:hover { transform: translateY(-6px); transition-delay: 0s; }
  .perguntas details:hover { transform: translateX(4px); }
  .menu a, .rodape a { transition: opacity 0.2s; }
}

/* ------------------------------------------------------------ quadros de animação (só transform e opacity) */

@keyframes pulo { 0%, 60%, 100% { opacity: 0.5; transform: none; } 30% { opacity: 1; transform: translateY(-4px); } }
@keyframes enche-som { to { transform: translateX(0); } }
@keyframes varre { from { opacity: 1; transform: translateY(-48px); } to { opacity: 1; transform: translateY(152px); } }
@keyframes varre-p { from { opacity: 1; transform: translateY(-48px); } to { opacity: 1; transform: translateY(112px); } }
@keyframes varre-j { 0%, 100% { opacity: 1; transform: translateY(-64px); } 50% { opacity: 1; transform: translateY(216px); } }
@keyframes aperta { 40% { transform: scale(0.94); } }
@keyframes toque { from { opacity: 0.35; transform: scale(0.2); } to { opacity: 0; transform: scale(1.6); } }
@keyframes pisca { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: 0.35; transform: scale(0.8); } }
@keyframes corre { to { transform: translateX(-50%); } }
@keyframes enche { to { transform: scaleX(1); } }
@keyframes surge { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulsa { 0%, 100% { transform: none; } 40% { transform: scale(1.18); } }
@keyframes sobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes digita { 0%, 6% { transform: translateX(0); } 40%, 92% { transform: translateX(100%); } 100% { transform: translateX(0); } }
@keyframes responde { 0%, 50% { opacity: 0; transform: translateY(10px) scale(0.96); } 56%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes anel { from { opacity: 0.7; transform: scale(1); } to { opacity: 0; transform: scale(2.2); } }
@keyframes som { from { transform: scaleY(0.15); } to { transform: scaleY(1); } }
@keyframes marca { 0%, 30% { opacity: 0; transform: scale(1.3); } 42%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes nega { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@keyframes respira { from { opacity: 0.5; transform: scale(0.86); } to { opacity: 1; transform: scale(1.12); } }

/* Movimento reduzido: o heroi.js põe .calmo no html e as faixas que passam ficam como listas paradas (as
   regras de .js:not(.calmo) não valem). Aqui embaixo fica a trava para o resto. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------ telas menores e maiores */

/* Tela baixa (Android de 640 px de altura): a linha de apoio desce para depois do aparelho e o aparelho
   perde a barra de cima, para a conversa ficar inteira acima do botão preso no pé da tela. */
@media (max-height: 700px) and (max-width: 899px) {
  .lide { order: 1; margin: var(--e-2) auto 0; }
  .ap-barra, .ilha { display: none; }
  .ap-topo { padding-top: 10px; }
  .js .tela { height: clamp(152px, calc(100svh - 452px), 440px); }
}
/* Tela estreita: cada linha das tabelas dos documentos vira um bloco (rótulo em cima, valor embaixo), sem
   rolagem lateral; o cabeçalho fica só para o leitor de tela. */
@media (max-width: 599px) {
  .documento table { min-width: 0; }
  .documento thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .documento tbody, .documento tr, .documento th, .documento td { display: block; }
  .documento tr { padding: var(--e-2) 0; border-bottom: 1px solid var(--linha); }
  .documento th, .documento td { padding: 0 0 6px; border: 0; }
  .documento tbody th { font-size: var(--t-3); }
}
/* O menu ganhou o botão de pausa: abaixo de 375 px os links encolhem, e abaixo de 360 px a marca fica só
   com o símbolo (o nome continua no rótulo do link, para o leitor de tela). */
@media (max-width: 374px) {
  .menu a { padding: 0 var(--e-1); }
}
@media (max-width: 359px) {
  .heroi h1 { font-size: var(--t-6); }
  .passo { flex-basis: 40px; }
  .passo[aria-current] { padding: 0 12px; }
  .pilula { gap: 4px; padding-left: 10px; }
  .marca { justify-content: center; gap: 0; min-width: 44px; font-size: 0; }
  .hora-g span { font-size: var(--t-8); }
  .preco-linha { font-size: var(--t-0); }
  .chamada .botao { padding: 0 var(--e-2); font-size: var(--t-2); white-space: nowrap; }
  .naos { grid-template-columns: 1fr; }
  .ap-barra { padding: 6px 24px 0; }
  .au { grid-template-columns: 28px 104px; }
  .onda, .onda svg { width: 104px; }
  .bal.cartao, .bal.doc { min-width: 0; }
  .plano .botao { font-size: var(--t-2); }
}

@media (min-width: 600px) {
  .miolo { padding: 0 var(--e-3); }
  .prazos div { grid-template-columns: 2fr 3fr; gap: var(--e-3); }
  .indice ol { columns: 2; column-gap: var(--e-3); }
  .claras { grid-template-columns: 1fr 1fr; }
  .jeitos { grid-template-columns: repeat(3, 1fr); }
  .naos { grid-template-columns: repeat(4, 1fr); gap: var(--e-2); }
  .planos { grid-template-columns: 1fr 1fr; }
  .dia-palco, .raiox, .negocia { max-width: 520px; margin-left: auto; margin-right: auto; width: 100%; }
  .rs { display: inline; }
  .legenda-g .so-estreito { display: none; }
  .graf { margin: 0; }
  .plano-q { padding: var(--e-4); }
  .negocia-foto { display: block; }
  .pagou { max-width: 520px; margin-left: auto; margin-right: auto; width: 100%; }
  .frases { margin-left: 0; margin-right: 0; }
}

@media (min-width: 900px) {
  h2 { font-size: var(--t-9); line-height: 1.06; }
  .sec { padding: var(--e-16) 0; }
  .so-largo, .menu .so-largo, .botao.so-largo, .selo-breve.so-largo { display: inline-flex; }
  .topo { top: 20px; padding: 0 var(--e-3); }
  .pilula { min-height: 64px; padding: 0 10px 0 var(--e-3); border-radius: 32px; }
  .menu { margin: 0 auto; gap: var(--e-1); }
  .menu a { padding: 0 var(--e-2); }
  .com-barra { padding-bottom: 0; }
  .sub { font-size: var(--t-4); }
  .centro, #preco .centro { margin-bottom: var(--e-8); }

  .heroi { display: flex; align-items: center; min-height: 100vh; padding: 112px 0 var(--e-8); }
  .heroi::before { left: 74%; top: 50%; width: 1200px; height: 1200px; margin: -600px 0 0 -600px; }
  .palco {
    grid-template-columns: minmax(0, 1fr) 392px;
    grid-template-rows: 1fr auto auto auto auto 1fr;
    grid-template-areas: ". aparelho" "titulo aparelho" "lide aparelho" "chamada aparelho" "passos aparelho" ". aparelho";
    column-gap: var(--e-8);
    padding-right: 88px;
  }
  .heroi h1 { grid-area: titulo; max-width: 11ch; margin: 0 0 var(--e-3); font-size: var(--t-10); line-height: 1.02; letter-spacing: -0.035em; text-align: left; }
  .lide { grid-area: lide; max-width: 30ch; margin: 0 0 var(--e-4); font-size: var(--t-4); line-height: 1.45; text-align: left; }
  .chamada { position: static; grid-area: chamada; max-width: 520px; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .chamada .botao, .chamada .em-breve { width: auto; min-height: 56px; }
  .preco-linha { margin-bottom: var(--e-3); font-size: var(--t-2); text-align: left; }
  /* Os rótulos das cenas são um trilho só: cinco passos lado a lado e uma barra contínua em cima, que enche
     até a cena atual (os passos já vistos ficam cheios: classe .ok, posta pelo script). */
  .passos { grid-area: passos; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; max-width: 600px; margin: var(--e-6) 0 0; }
  .passo, .passo[aria-current] { flex: none; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--e-1); height: auto; min-height: 96px; padding: 14px var(--e-1) 0 0; overflow: visible; border: 0; border-top: 2px solid rgba(255, 255, 255, 0.14); border-radius: 0; background: none; color: var(--suave-e); font-size: var(--t-1); }
  .passo[aria-current] { color: var(--texto-e); }
  .passo::before { display: flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); font-size: var(--t-0); font-weight: 600; }
  .passo.ok::before { background: rgba(111, 227, 165, 0.22); color: var(--menta-clara); }
  .passo[aria-current]::before { content: counter(passo); background: var(--menta); color: #03130b; }
  .passo .rot { position: static; width: auto; height: auto; margin: 0; clip: auto; white-space: normal; text-align: left; line-height: 1.25; }
  .passo i, .passo:not([aria-current]) i { display: block; top: -2px; bottom: auto; }
  .passo:focus-visible { border-radius: 8px; }
  .passo:hover { color: var(--texto-e); }

  /* O aparelho ganha presença: maior, com luz na borda, sombra de contato e reflexo no chão. */
  .aparelho { grid-area: aparelho; max-width: 392px; isolation: isolate; box-shadow: 0 48px 96px rgba(0, 0, 0, 0.66), 0 0 120px rgba(47, 191, 116, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.05); }
  .ap-corpo::after { background: linear-gradient(118deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 22%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 82%, rgba(190, 255, 220, 0.07) 100%); }
  .ap-chao { display: block; position: absolute; left: -18%; right: -18%; top: 100%; z-index: -1; height: 88px; margin-top: -14px; background: radial-gradient(ellipse 38% 34% at 50% 16%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 100%), radial-gradient(ellipse 50% 70% at 50% 8%, rgba(111, 227, 165, 0.3) 0%, rgba(111, 227, 165, 0) 72%); pointer-events: none; }
  .ap-chao::after { content: ""; position: absolute; left: 14%; right: 14%; top: 22px; height: 60px; border-top: 1px solid rgba(255, 255, 255, 0.16); border-radius: 56px 56px 0 0; background: linear-gradient(180deg, rgba(190, 255, 220, 0.12) 0%, rgba(190, 255, 220, 0) 100%); -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 90%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 90%); }
  .js .tela { height: 480px; height: clamp(320px, calc(100vh - 400px), 600px); }

  .duas { grid-template-columns: 5fr 6fr; align-items: center; gap: var(--e-12); }
  .duas.inv .texto { order: 2; }
  .dia-palco, .raiox, .negocia { max-width: none; }

  .umdia { grid-template-columns: 5fr 6fr; align-items: center; column-gap: var(--e-12); }
  .umdia .abas { flex-direction: column; gap: 0; margin-top: var(--e-5); }
  .umdia .aba, .umdia .aba[aria-current] { flex: none; justify-content: flex-start; gap: var(--e-3); min-height: 64px; padding: var(--e-2) 0; border-top: 1px solid var(--linha); border-radius: 0; background: none; color: var(--tinta-suave); font-size: var(--t-3); font-weight: 400; }
  .umdia .aba[aria-current] { color: var(--tinta); font-weight: 500; }
  .umdia .aba[aria-current] i { height: 2px; background: var(--tinta); }
  .umdia .aba:focus-visible { border-radius: 8px; }
  .aba-h { flex: none; width: 64px; font-size: var(--t-1); font-variant-numeric: tabular-nums; }
  .umdia .aba-t { position: static; width: auto; height: auto; margin: 0; clip: auto; white-space: normal; }
  .dia-palco { border-radius: 36px; }
  .painel { padding-top: 50%; }
  .momento { gap: var(--e-2); padding: 0 var(--e-4) var(--e-3); }
  .hora-g span { font-size: var(--t-10); }
  .hora-g small { display: none; }
  .peca { max-width: 440px; }
  .dia-palco > .legenda { padding-bottom: var(--e-3); }
  .resumo { padding: var(--e-2); }
  .resumo strong { margin: var(--e-1) 0 4px; font-size: var(--t-4); }
  .resumo .ln { padding: 6px 0; font-size: var(--t-2); }

  .raiox-cena { padding-top: 120px; }
  .vivo [data-ver]:not(.on) .pa-fatura { transform: translate(-6px, 200px) rotate(-20deg) scale(1.3); }
  .vivo [data-ver]:not(.on) .pa-luz { transform: translate(-36px, 380px) rotate(16deg) scale(1.34); }
  .vivo [data-ver]:not(.on) .pa-luz2 { transform: translate(8px, 270px) rotate(26deg) scale(1.3); }
  .papel { width: 112px; height: 148px; padding: 12px; }
  .pa-fatura b { margin: -12px -12px 2px; padding: 10px 12px; }
  .cb { height: 26px; }
  .pa-luz { margin-left: -56px; }
  .plano-q { grid-template-columns: 5fr 7fr; column-gap: var(--e-6); padding: var(--e-5); }
  .plano-q > .legenda { grid-column: 1 / -1; }
  .graf { height: 300px; }
  .gv { font-size: var(--t-1); }
  .gb { max-width: 56px; }
  .numeros dd { font-size: var(--t-4); }
  .pagou { max-width: none; }
  .placar { padding: var(--e-4) var(--e-4) var(--e-3); }
  .quadro { padding: var(--e-4) var(--e-4) var(--e-3); }
  .total-l b { font-size: var(--t-9); }

  .duas.inv { grid-template-columns: 6fr 5fr; }
  .negocia { grid-template-columns: 5fr 8fr; grid-template-rows: auto 1fr; align-items: start; gap: var(--e-2) var(--e-3); }
  .negocia-foto { aspect-ratio: 4 / 5; border-radius: 28px; }
  .negocia-foto .foto { object-position: 50% 50%; }
  .negocia-col { display: contents; }
  .rot-folha { grid-column: 2; grid-row: 1 / span 2; }
  .rot-bolha { grid-column: 1; grid-row: 2; }
  .rot-bolha .mbts { flex-direction: column; }
  .rot-cab { padding: var(--e-2) var(--e-3); }
  .rot-bl { padding: 12px var(--e-3); }
  .rot-pe { padding: 12px var(--e-3) var(--e-2); }
  .negocia > .legenda { grid-column: 1 / -1; }

  .jeitos { gap: var(--e-3); }
  .jeito-cena { height: 264px; }
  .j-foto .vr { height: 80px; }
  .nao { padding: var(--e-4) var(--e-3); }
  .nao h3 { font-size: var(--t-5); }
  .nao p { font-size: var(--t-2); }
  .nao-i { width: 80px; height: 80px; }
  .nao-i .icone { width: 36px; height: 36px; }
  .planos { gap: var(--e-3); }
  .plano { padding: var(--e-5) var(--e-5) var(--e-4); }
  .valor { margin-bottom: var(--e-3); }
  .valor strong { font-size: var(--t-9); }
  .inclui { gap: 12px; margin-bottom: var(--e-4); }
  .plano-n { margin-bottom: var(--e-2); }
  .plano .botao, .plano .em-breve { min-height: 56px; }
  .miudo { margin-top: var(--e-3); padding: var(--e-3); font-size: var(--t-2); }
  .claras { grid-template-columns: repeat(3, 1fr); gap: var(--e-3); }
  .fecho { padding: var(--e-16) 0; text-align: left; }
  .fecho .miolo { grid-template-columns: 400px minmax(0, 1fr); align-items: center; justify-items: start; column-gap: var(--e-16); padding-left: var(--e-12); }
  .fecho-arte { width: 100%; max-width: none; }
  .fecho-texto { align-items: flex-start; }
  .fecho h2 { max-width: 15ch; font-size: var(--t-10); }
  .rodape .miolo { grid-template-columns: 2fr 1fr 1fr; gap: var(--e-6); }
}