/* =====================================================================
   MedEleven — site institucional (rodada 5).

   UM tema só, o claro. Fundo branco gelo e uma família de azuis — do gelo
   ao marinho — que são a MESMA cor em intensidades diferentes (§7).
   Verde e vermelho só em Acertei/Errei do card (gesto, rodada 8).

   Regra de contraste (pedido do cliente): texto escuro SÓ sobre superfície
   clara. Toda superfície marinho (procedência, plano anual) usa
   exclusivamente --sobre-marinho e --sobre-marinho-suave.

   Tipografia: Bricolage Grotesque nos títulos, Instrument Sans no texto E
   nos rótulos/dados (o cliente vetou a mono; a classe `.mono` manteve o
   nome, mas hoje é Instrument Sans 600 em caixa alta). O card fica em
   Inter, como no app.

   Sem seção fixa (sticky/pinned): a rolagem é a do navegador e os links do
   menu caem no lugar (scroll-margin-top = altura do topo).

   Miolo largo (rodada 6): o conteúdo vai até perto da borda da tela —
   1480px de teto e respiro lateral proporcional (--pad-x). Só o texto
   corrido continua com medida tipográfica (max-width em ch).

   Rodada 7 (acabamento): títulos entram palavra a palavra, o card da
   abertura inclina com o mouse, fio de progresso no topo, aurora na
   seção marinho, pulso no ECG, fita de bancas rolante e hover em tudo
   que é tocável. Tudo transform/opacity — nada de layout por quadro.

   Rodada 8 (checkup): a abertura ocupa exatamente a primeira tela e o
   bloco texto+malha fica centrado no que sobra abaixo do topo — respiro
   igual em cima e embaixo, e a malha encolhe em telas baixas para caber.
   "Como funciona" vira faixa branca colada à dobra, o ECG é simétrico
   (três batimentos, o do meio no centro) e os planos ficam centrados.
   ===================================================================== */

:root {
  color-scheme: light only;

  --gelo: #F3F7FC;
  --papel: #FFFFFF;
  --azul-05: #EAF2FB;
  --azul-15: #D3E4F7;
  --azul-30: #A9CBEF;
  --azul-40: #7FB1E6;
  --azul: #3D86D6;
  --azul-70: #205FA8;
  --marinho: #0F3561;
  --marinho-2: #17436F;
  --tinta: #0B1F36;
  --tinta-2: #3F5875;
  --tinta-3: #5B7594;
  --sobre-azul: #FFFFFF;
  --sobre-marinho: #FFFFFF;
  --sobre-marinho-suave: #BFDCF7;

  --errei-tint: rgba(190, 79, 74, 0.10); --errei-linha: rgba(190, 79, 74, 0.24); --errei-text: #A9433E;
  --c1-tint: rgba(58, 132, 94, 0.08);  --c1-linha: rgba(58, 132, 94, 0.18);  --c1-text: #3A7255;
  --c2-tint: rgba(45, 124, 84, 0.14);  --c2-linha: rgba(45, 124, 84, 0.26);  --c2-text: #2F6F4F;
  --c3-tint: rgba(32, 112, 73, 0.20);  --c3-linha: rgba(32, 112, 73, 0.34);  --c3-text: #216043;

  --sombra-card: 0 1px 2px rgba(15, 53, 97, 0.05), 0 12px 32px rgba(15, 53, 97, 0.10), 0 32px 64px rgba(15, 53, 97, 0.08);
  --sombra-leve: 0 1px 2px rgba(15, 53, 97, 0.05), 0 4px 14px rgba(15, 53, 97, 0.06);

  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;

  --display: "Bricolage Grotesque", "Instrument Sans", -apple-system, sans-serif;
  --texto: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --card-fonte: Inter, "Instrument Sans", -apple-system, sans-serif;

  --largura: 1480px;
  --pad-x: clamp(20px, 3vw, 48px);
  --topo-altura: 72px;
  --secao-y: clamp(88px, 10vw, 136px);
  --abertura-respiro: 48px;   /* folga mínima acima e abaixo do bloco da abertura */
  --legenda-altura: 34px;     /* quanto a legenda desce abaixo da malha (bottom: -34px) */
}

/* ───────────────────────────── Base ───────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--gelo); }
body {
  margin: 0;
  background: var(--gelo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
strong { font-weight: 600; }
.mono { font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); }
.vis-oculta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--azul); color: var(--sobre-azul); padding: 12px 20px; border-radius: var(--r-md); }
.pular:focus { left: 16px; }

/* Fio de progresso da leitura, rente ao topo. O JS só ajusta o scaleX. */
.progresso { position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 60; background: linear-gradient(90deg, var(--azul-70), var(--azul)); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* Títulos divididos em palavras pelo JS: cada palavra sobe de trás de
   uma máscara de overflow. Sem JS não existe .palavra — nada muda. */
.palavra { display: inline-block; overflow: hidden; vertical-align: top; }
.palavra-int { display: inline-block; will-change: transform; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 6px; }

/* Os links do menu caem logo abaixo do topo fixo, em qualquer seção. */
[id] { scroll-margin-top: var(--topo-altura); }

.miolo { max-width: var(--largura); margin: 0 auto; padding: 0 var(--pad-x); }
.kicker { margin-bottom: 14px; color: var(--azul-70); }
.titulo { font-size: clamp(30px, 4.2vw, 48px); max-width: 16ch; }
.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--tinta-2); max-width: 58ch; }
.lead-curto { max-width: 52ch; }
.titulo + .lead { margin-top: 18px; }

/* ───────────────────────────── Topo ───────────────────────────── */

.topo { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--topo-altura); transition: background-color 240ms, box-shadow 240ms; }
.topo-compacto { background: rgba(243, 247, 252, 0.86); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); box-shadow: 0 1px 0 var(--azul-15); }
.topo-faixa { max-width: var(--largura); height: 100%; margin: 0 auto; padding: 0 var(--pad-x); display: flex; align-items: center; gap: 36px; }
.marca { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--marinho); }
/* A marca Batida: o traçado de ECG que desenha um M. O viewBox é a caixa
   visual do traço, então a borda de baixo do SVG é a linha — e, com o
   align-items: baseline do .marca, ela pousa na baseline da palavra,
   com os picos batendo na altura das maiúsculas (cap = 0.66em). */
.marca-sinal { height: 0.66em; width: auto; flex: none; transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.marca:hover .marca-sinal { transform: scale(1.08); }
.marca-sinal path { fill: none; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.marca-sinal .ms-ponta { stroke: var(--marinho); }
.marca-sinal .ms-pico { stroke: var(--azul); }
.marca-eleven { color: var(--azul); }
.menu { display: flex; gap: 28px; margin-left: auto; font-weight: 500; font-size: 15px; color: var(--tinta-2); }
.menu a { position: relative; padding: 6px 0; transition: color 160ms; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 1px; background: var(--azul); transform: scaleX(0); transform-origin: 0 50%; transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.menu a:hover, .menu a.ativo { color: var(--tinta); }
.menu a:hover::after, .menu a.ativo::after { transform: scaleX(1); }

/* ─────────────────────── Abertura (rodada 8) ───────────────────────
   O véu só existe com JS (classe .js no html); sem ele, ou com movimento
   reduzido, a página abre direto. O M usa o MESMO viewBox recortado do
   cabeçalho (borda de baixo = linha do traçado) com overflow visível
   para o brilho do ponto; o nome é revelado pela LARGURA da caixa — o
   flex centrado empurra o M para a esquerda no mesmo movimento. */
.intro { display: none; }
.js .intro { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: var(--gelo); }
.intro-lockup { display: flex; align-items: baseline; font-size: clamp(52px, 9vw, 88px); }
.intro-m { height: 0.66em; width: auto; overflow: visible; }
/* O estado inicial da abertura mora AQUI, não no JS (rodada 10, pedido do
   cliente: "pisca e depois vai a animação normal"). Entre a primeira
   pintura e o DOMContentLoaded o navegador mostrava o lockup pronto — M
   pequeno, nome inteiro — e o JS então saltava para o M grande com o nome
   escondido: a piscada. A escala vive numa variável porque o JS lê a
   MESMA; dois "3,4" em arquivos diferentes dessincronizam na primeira
   mudança. */
.js .intro-m { --intro-escala: 3.4; transform: scale(var(--intro-escala)); }
.js .intro-nome-caixa { width: 0; }
.js .intro-nome { opacity: 0; }
.intro-m .medidor { fill: none; stroke: none; }
.intro-m .tra { fill: none; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.intro-m .tra-ponta { stroke: var(--marinho); }
.intro-m .tra-pico { stroke: var(--azul); }
.intro-ponto, .intro-ponto-brilho { fill: var(--azul); opacity: 0; }
.intro-ponto-brilho { filter: blur(4px); opacity: 0; }
.intro-nome-caixa { display: inline-block; overflow: hidden; white-space: nowrap; }
.intro-nome { display: inline-block; margin-left: 0.24em; font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; color: var(--marinho); }
.intro-eleven { color: var(--azul); }
/* Já vista nesta sessão (marcado no <head> antes da primeira pintura): o
   véu não chega a aparecer. Sem isto, a recarga mostrava o M por ~1,4 s
   até o JS remover o elemento. */
.sem-intro .intro { display: none !important; }
@media (prefers-reduced-motion: reduce) { .intro { display: none !important; } }

/* ───────────────────────────── Botões ───────────────────────────── */

.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: var(--r-pill); font-weight: 600; font-size: 15px; transition: transform 160ms, background-color 160ms, box-shadow 160ms; }
.btn:active { transform: scale(0.97); }

/* Brilho que varre botões e lojas no hover. */
.btn::before, .loja::before { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-20deg); transition: left 600ms ease; pointer-events: none; }
.btn:hover::before, .loja:hover::before { left: 130%; }
.btn-contorno::before { background: linear-gradient(105deg, transparent, rgba(61, 134, 214, 0.14), transparent); }
.btn-azul { background: var(--azul); color: var(--sobre-azul); box-shadow: 0 6px 18px rgba(61, 134, 214, 0.28); }
.btn-azul:hover { background: var(--azul-70); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(61, 134, 214, 0.36); }
.btn-topo { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-contorno { border: 1.5px solid var(--azul-30); color: var(--azul-70); background: transparent; }
.btn-contorno:hover { background: var(--azul-05); }
.btn-branco { background: #FFFFFF; color: var(--marinho); }
.btn-branco:hover { background: var(--azul-05); }

.lojas { display: flex; flex-wrap: wrap; gap: 12px; }
.loja { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px 0 14px; border-radius: 14px; background: var(--marinho); color: var(--sobre-marinho); box-shadow: 0 8px 22px rgba(15, 53, 97, 0.22); transition: transform 160ms, background-color 160ms, box-shadow 160ms; }
.loja:hover { background: var(--marinho-2); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 53, 97, 0.3); }
.loja:active { transform: scale(0.97); }
.loja-icone { width: 24px; height: 24px; fill: currentColor; }
.loja-txt { display: flex; flex-direction: column; line-height: 1.1; }
.loja-txt small { font-size: 11px; color: var(--sobre-marinho-suave); }
.loja-txt strong { font-size: 16px; }
.nota { margin-top: 16px; }

/* ───────────────────────────── Abertura ───────────────────────────── */

/* A abertura é a primeira tela inteira: o bloco texto+malha fica centrado
   no espaço abaixo do topo fixo, com o mesmo respiro acima e abaixo. A
   malha encolhe em telas baixas (notebook com barra do navegador) para o
   quadro inteiro — malha e legenda — caber sem cortar. */
.abertura { position: relative; display: grid; align-content: center; min-height: 100vh; min-height: 100svh; padding: calc(var(--topo-altura) + var(--abertura-respiro)) 0 var(--abertura-respiro); }
.abertura::before { content: ""; position: absolute; inset: 0; background: radial-gradient(640px 460px at 82% 18%, rgba(61, 134, 214, 0.09), transparent 70%); pointer-events: none; }
.abertura-grade { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--pad-x); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(56px, 7vw, 120px); align-items: center; }
.titulo-abertura { font-size: clamp(38px, 5.4vw, 64px); font-weight: 700; letter-spacing: -0.03em; max-width: 14ch; }
.abertura-texto .lead { margin: 22px 0 32px; }

.abertura-visual { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 600px; max-width: min(600px, calc(100svh - var(--topo-altura) - var(--legenda-altura) - 2 * var(--abertura-respiro))); margin: 0 0 var(--legenda-altura) auto; perspective: 1400px; }
.malha { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 1fr); gap: 6px; }
.malha i { display: block; border-radius: 4px; background: var(--azul-15); }
.card-cena { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d; will-change: transform; }
.malha-legenda { position: absolute; left: 0; right: 0; bottom: -34px; text-align: center; }

/* ───────────────────────────── Card (§3.2) ───────────────────────────── */

.card-porta { position: relative; width: min(100%, 380px); transform-style: preserve-3d; will-change: transform; }
.card { position: relative; width: 100%; min-height: 330px; border-radius: var(--r-lg); background: var(--papel); box-shadow: var(--sombra-card); font-family: var(--card-fonte); color: var(--tinta); cursor: pointer; transform-style: preserve-3d; transition: box-shadow 320ms ease; }
.card:hover, .card:focus-visible { box-shadow: 0 2px 4px rgba(15, 53, 97, 0.06), 0 20px 48px rgba(15, 53, 97, 0.17), 0 48px 96px rgba(15, 53, 97, 0.13); }
.card-face { position: absolute; inset: 0; padding: 22px; border-radius: inherit; display: flex; flex-direction: column; gap: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card-verso { transform: rotateY(180deg); }
.card-rotulo { color: var(--tinta-3); }
.card-pergunta { font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; margin-top: auto; }
.card-dica { margin-top: auto; color: var(--azul); }
.card-resposta { margin-top: auto; font-size: 17px; font-weight: 600; line-height: 1.35; }
.card-explicacao { font-size: 14px; line-height: 1.5; color: var(--tinta-2); }
.card-ocorrencias { margin-top: auto; font-size: 11px; color: var(--tinta-3); text-transform: none; letter-spacing: 0.02em; }
/* Rodada 9: os controles sob o card saíram a pedido — o gesto da
   demonstração conta a história sozinho. A troca de frente/verso é
   dirigida por CLASSE na metade do giro, além do backface-visibility:
   em navegadores que achatam o 3D (Safari em certas composições), o
   texto da frente vazava espelhado no verso. */
.js .card.virado .card-frente { visibility: hidden; }
.js .card:not(.virado) .card-verso { visibility: hidden; }
/* "Carimbo" e não "selo": .selo já é a etiqueta "Melhor preço" dos
   planos — o nome repetido apagava a etiqueta (opacity herdada). */
.carimbo { position: absolute; top: 42px; font-weight: 800; font-size: 15px; padding: 4px 12px; border: 2px solid; border-radius: 10px; background: rgba(255, 255, 255, 0.85); opacity: 0; pointer-events: none; }
.carimbo-acertei { left: 16px; color: var(--c3-text); border-color: var(--c3-text); }
.carimbo-errei { right: 16px; color: var(--errei-text); border-color: var(--errei-text); }

/* ───────────────────────────── Seções ───────────────────────────── */

.secao { padding: var(--secao-y) 0; }
.secao-papel { background: var(--papel); box-shadow: inset 0 1px 0 var(--azul-15), inset 0 -1px 0 var(--azul-15); }
/* Logo abaixo da dobra a abertura já deixou seu respiro; a faixa branca
   marca a virada de tela e começa mais perto do topo. */
#metodo { padding-top: clamp(64px, 7vw, 96px); }
/* Marinho com "aurora": dois brilhos azuis desfocados derivando devagar
   ao fundo. Só transform anima; com movimento reduzido eles param. */
.secao-marinho { position: relative; overflow: hidden; background: var(--marinho); color: var(--sobre-marinho); }
.secao-marinho .miolo { position: relative; z-index: 1; }
.secao-marinho::before, .secao-marinho::after { content: ""; position: absolute; width: 540px; height: 540px; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.secao-marinho::before { background: rgba(61, 134, 214, 0.35); top: -220px; right: -140px; animation: derivar 16s ease-in-out infinite alternate; }
.secao-marinho::after { background: rgba(11, 42, 78, 0.9); bottom: -260px; left: -160px; animation: derivar 22s ease-in-out infinite alternate-reverse; }
@keyframes derivar { to { transform: translate3d(60px, 40px, 0); } }
.secao-marinho .kicker, .secao-marinho .mono { color: var(--sobre-marinho-suave); }
.secao-marinho .lead { color: var(--sobre-marinho-suave); }

.passos { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2vw, 28px); counter-reset: passo; }
.passos li { position: relative; overflow: hidden; padding: 28px 26px 30px; border-radius: var(--r-lg); background: var(--papel); box-shadow: var(--sombra-leve); transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 300ms; }
.passos li::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--azul), var(--azul-40)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.passos li:hover { transform: translateY(-6px); box-shadow: var(--sombra-card); }
/* Na faixa branca os passos viram lajotas gelo com fio, e só no hover
   ganham o branco e a sombra — branco sobre branco não se lia. */
.secao-papel .passos li { background: var(--gelo); border: 1px solid var(--azul-15); box-shadow: none; transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 300ms, background-color 300ms; }
.secao-papel .passos li:hover { background: var(--papel); box-shadow: var(--sombra-card); }
.passos li:hover::before { transform: scaleX(1); }
.passo-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--azul); color: var(--sobre-azul); font-size: 17px; margin-bottom: 18px; transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.passos li:hover .passo-n { transform: scale(1.12) rotate(-8deg); }
.passos h3 { font-size: 21px; margin-bottom: 10px; }
.passos p, .fatos p { color: var(--tinta-2); font-size: 16px; line-height: 1.55; }

/* auto-fit e não repeat(3): com o bloco Revisão fora (rodada 11) os dois
   restantes ocupam a linha inteira, em vez de deixar um buraco à direita. */
.prontuario { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(20px, 2vw, 28px); }
.prontuario > div { padding: 26px 24px; border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1), background-color 300ms, border-color 300ms; }
.prontuario > div:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.26); }
.prontuario dt { margin-bottom: 12px; }
.prontuario dd { font-size: 17px; line-height: 1.5; color: var(--sobre-marinho); }
.prontuario .exemplo { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.14); text-transform: none; letter-spacing: 0.02em; }

/* DNA: duas fitas de pontos e os degraus entre elas (anime.js move tudo). */
.dna { position: relative; height: 150px; margin: 40px 0 8px; display: grid; grid-template-columns: repeat(var(--n, 30), 1fr); align-items: center; }
.dna > span { position: relative; height: 100%; display: block; }
.dna b { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--azul); will-change: transform; }
.dna b.fita-b { background: var(--azul-70); }
.dna .degrau { position: absolute; left: 50%; top: 50%; width: 2px; height: 80px; margin: -40px 0 0 -1px; background: var(--azul-30); will-change: transform; }

.numeros { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2vw, 28px); }
.numeros > div { padding: 22px 24px; border-radius: var(--r-lg); background: var(--papel); box-shadow: var(--sombra-leve); transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 300ms; }
.numeros > div:hover { transform: translateY(-5px); box-shadow: var(--sombra-card); }
.numeros dt { font-family: var(--display); font-size: clamp(34px, 4vw, 48px); font-weight: 700; letter-spacing: -0.03em; color: var(--marinho); font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.numeros dd { margin-top: 6px; color: var(--tinta-2); }
.numeros + .lead { margin-top: 32px; }

/* Fita de bancas: com JS ela rola em CSS (o JS só duplica os chips para
   o laço fechar) e pausa no hover; sem JS os chips ficam parados,
   quebrando linha. */
.bancas { margin-top: 28px; overflow: hidden; }
.js .bancas { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.bancas-trilho { display: flex; flex-wrap: wrap; gap: 10px; width: max-content; max-width: 100%; }
.js .bancas-trilho { flex-wrap: nowrap; gap: 0; max-width: none; animation: rolar 36s linear infinite; }
.js .banca { margin-right: 10px; }
.bancas:hover .bancas-trilho { animation-play-state: paused; }
@keyframes rolar { to { transform: translateX(-50%); } }
.banca { flex: none; padding: 9px 18px; border-radius: var(--r-pill); background: var(--papel); border: 1px solid var(--azul-15); box-shadow: var(--sombra-leve); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-2); transition: color 160ms, border-color 160ms, transform 160ms; }
.banca:hover { color: var(--azul-70); border-color: var(--azul-30); transform: translateY(-2px); }

.ecg-caixa { position: relative; margin-bottom: 40px; }
.ecg { display: block; width: 100%; height: 90px; }
.ecg-traco { fill: none; stroke: var(--azul); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* O pulso que percorre o traçado: um ponto posicionado pelo JS em % do
   viewBox, com um anel ecoando em volta. Sem JS, fica invisível. */
.ecg-ponto { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--azul); opacity: 0; pointer-events: none; }
.ecg-ponto::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid rgba(61, 134, 214, 0.45); animation: ecoar 1.4s ease-out infinite; }
@keyframes ecoar { from { transform: scale(0.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }

/* O título do ECG fica numa linha só no desktop (o pedido é não sobrar
   uma palavra na segunda linha); em telas estreitas quebra normalmente. */
#dia .titulo { max-width: none; }
.fatos { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(36px, 4vw, 56px); }
.fatos h3 { font-size: 21px; margin-bottom: 10px; }

/* Planos: a seção inteira centrada — cabeçalho, os dois cards e a nota. */
#planos .miolo { text-align: center; }
#planos .titulo, #planos .lead { margin-left: auto; margin-right: auto; }
.planos { margin: 44px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2vw, 28px); align-items: stretch; max-width: 1120px; text-align: left; }
.plano { position: relative; display: flex; flex-direction: column; padding: 30px 28px; border-radius: var(--r-xl); background: var(--papel); box-shadow: var(--sombra-leve); transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 300ms; }
.plano:hover { transform: translateY(-6px); box-shadow: var(--sombra-card); }
.plano-anual:hover { box-shadow: 0 2px 4px rgba(15, 53, 97, 0.08), 0 24px 60px rgba(15, 53, 97, 0.3); }
.plano h3 { font-size: 13px; }
.preco { font-family: var(--display); font-size: 56px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 18px 0 8px; color: var(--marinho); }
.cifra { font-size: 20px; vertical-align: top; margin-right: 4px; letter-spacing: 0; }
.centavos { font-size: 24px; letter-spacing: -0.02em; }
.periodo { margin-bottom: 14px; }
/* Quanto se economiza em relação ao mensal — azul, não verde: é desconto, não acerto. */
.economia { display: inline-block; align-self: flex-start; margin-bottom: 22px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--azul-15); color: var(--azul-70); font-size: 13px; font-weight: 600; }
.plano-anual .economia { background: rgba(255, 255, 255, 0.14); color: var(--sobre-marinho); }
.economia-vazia { visibility: hidden; }
.plano .btn { margin-top: auto; }
.plano-anual { background: var(--marinho); color: var(--sobre-marinho); box-shadow: var(--sombra-card); }
.plano-anual .mono, .plano-anual .preco { color: var(--sobre-marinho); }
.plano-anual .periodo { color: var(--sobre-marinho-suave); }
.plano-anual .selo { position: absolute; top: -13px; left: 28px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--azul); color: var(--sobre-azul); font-size: 11px; }
.planos + .lead { margin-top: 32px; }
.planos + .lead strong { color: var(--tinta); }

.fechamento { padding: var(--secao-y) 0; background: var(--papel); box-shadow: inset 0 1px 0 var(--azul-15); text-align: center; }
.fechamento .miolo { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.titulo-grande { font-size: clamp(44px, 7vw, 88px); font-weight: 700; letter-spacing: -0.04em; color: var(--marinho); background: linear-gradient(100deg, var(--marinho) 30%, var(--azul) 85%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fechamento .lojas { justify-content: center; margin-top: 10px; }

/* ───────────────────────────── Rodapé ───────────────────────────── */

.rodape { padding: 32px 0 24px; box-shadow: inset 0 1px 0 var(--azul-15); }
.rodape-faixa { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.rodape-links { display: flex; gap: 28px; }
.rodape-links a:hover { color: var(--tinta); }
.rodape-base { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--azul-15); }
.disclaimer { font-size: 13px; line-height: 1.5; color: var(--tinta-3); max-width: 72ch; }
.copyright { flex: none; }

/* ───────────────────────────── Movimento ───────────────────────────── */

/* Só com JS: o que vai entrar animado começa invisível. Sem JS, tudo à vista. */
.js [data-entrada], .js [data-revelar], .js [data-revelar-grupo] > * { opacity: 0; }
.js .malha i { opacity: 0; }
.js [data-ecg] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-entrada], .js [data-revelar], .js [data-revelar-grupo] > *, .js .malha i, .js [data-ecg] { opacity: 1; }
  .btn, .loja, .menu a::after, .marca-sinal, .passos li, .passos li::before, .passo-n, .prontuario > div, .numeros > div, .plano, .banca, .card { transition: none; }
  .btn::before, .loja::before { display: none; }
  .secao-marinho::before, .secao-marinho::after, .ecg-ponto::after { animation: none; }
  .js .bancas { -webkit-mask-image: none; mask-image: none; }
  .js .bancas-trilho { animation: none; flex-wrap: wrap; gap: 10px; max-width: 100%; }
  .js .banca { margin-right: 0; }
}

/* ───────────────────────────── Responsivo ───────────────────────────── */

@media (max-width: 960px) {
  .abertura-grade { grid-template-columns: 1fr; gap: 64px; }
  .abertura-visual { margin: 0 auto var(--legenda-altura); max-width: 460px; }
  .passos, .prontuario, .fatos, .planos { grid-template-columns: 1fr; }
  .numeros { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .menu { display: none; }
  .btn-topo { margin-left: auto; }
  .abertura-visual { max-width: 100%; }
  .dna { height: 120px; }
  .numeros dt { font-size: 30px; }
  .rodape-faixa, .rodape-base { flex-direction: column; align-items: flex-start; gap: 16px; }
}