/* Página inicial (landing). Mobile primeiro; telas grandes ajustadas em @media (min-width). Sóbrio: bastante espaço, linhas finas, pouco brilho. */
body.landing { background: #fff; }
.landing section { padding: clamp(72px, 10vw, 120px) 0; position: relative; }
.landing .cabeca { max-width: 660px; margin: 0 auto clamp(40px, 6vw, 64px); text-align: center; }
.landing .cabeca h2 { margin-bottom: .45em; }
.landing .cabeca p:not(.rotulo) { color: var(--suave); font-size: clamp(1rem, 2vw, 1.125rem); margin-bottom: 0; }
.landing .rotulo { margin: 0 0 14px; font: 600 .78rem/1 var(--corpo); letter-spacing: .14em; text-transform: uppercase; color: var(--principal); }
.rodape .marca svg rect:first-child, .dash .lateral .marca svg rect:first-child { fill: #1a3a80; }

/* ---------- Hero ---------- */
.heroi { position: relative; padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px) !important; background: radial-gradient(70% 60% at 85% 0%, #e8efff 0%, rgba(232, 239, 255, 0) 70%), radial-gradient(50% 50% at 8% 100%, #eef3ff 0%, rgba(238, 243, 255, 0) 70%), #fff; overflow: hidden; isolation: isolate; }
.heroi-grade { position: relative; z-index: 1; display: grid; gap: 56px; align-items: center; }
@media (min-width: 960px) { .heroi-grade { grid-template-columns: 1.08fr .92fr; gap: 40px; } }
/* fundo tecnológico do topo: malha de pontos em onda (canvas, ver fundo.js) */
.fundo-tec { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fundo-tec canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.selo-topo { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 6px 14px; border: 1px solid var(--linha); border-radius: 999px; background: rgba(255, 255, 255, .85); backdrop-filter: blur(6px); color: var(--suave); font: 500 var(--t-micro)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.selo-topo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.heroi h1 { font-size: var(--t-h1); line-height: 1.02; letter-spacing: var(--e-h1); margin-bottom: 22px; max-width: 11.5em; }
.heroi .lead { font-size: var(--t-lead); line-height: 1.6; color: var(--suave); max-width: 33em; margin-bottom: 26px; }
.destaque-lembrete { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; max-width: 34em; margin: 0 0 26px; padding: 12px 16px; border-radius: 14px; background: rgba(234, 240, 252, .85); border: 1px solid #cddbf6; color: var(--escura); font-size: .98rem; font-weight: 500; line-height: 1.4; backdrop-filter: blur(6px); }
.destaque-lembrete svg { width: 22px; height: 22px; flex: none; color: var(--principal); }
.destaque-lembrete > span:not(.chip-breve) { flex: 1 1 14em; }
.chip-breve { display: inline-block; padding: 3px 9px; border-radius: 999px; background: #fff; color: var(--principal); font: 500 .64rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.reversao { display: flex; align-items: center; gap: 8px; margin: 0 0 22px; font-size: var(--t-pequeno); font-weight: 500; color: #166534; }
.reversao svg { width: 18px; height: 18px; flex: none; }
.garantias { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 0; color: var(--suave); font-size: .9rem; font-weight: 450; }
.garantias li { display: inline-flex; align-items: center; gap: 8px; }
.garantias svg { width: 16px; height: 16px; color: var(--principal); flex: none; }

/* ---------- Celular: smartphone topo de linha, em 3D (genérico: não copia nenhuma marca) ---------- */
.celular-cena { position: relative; display: grid; justify-items: center; gap: 16px; }
.palco-3d { position: relative; perspective: 2000px; perspective-origin: 50% 36%; padding: 22px 34px 40px; }
/* sombra difusa no chão: acompanha a flutuação (afasta e some um pouco quando o aparelho sobe) */
.palco-3d::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: 8px; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(11, 27, 63, .5), rgba(11, 27, 63, .18) 55%, rgba(11, 27, 63, 0)); filter: blur(9px); opacity: 0; transform: scale(.7); animation: ap-sombra-entra 1s ease-out forwards, ap-sombra-vida 8s ease-in-out 1s infinite alternate; }
@keyframes ap-sombra-entra { to { opacity: .95; transform: scale(1); } }
@keyframes ap-sombra-vida { from { opacity: .95; transform: scale(1); } to { opacity: .6; transform: scale(.82); } }
.aparelho { --w: min(326px, 76vw); --prof: calc(var(--w) * .106); --r: calc(var(--w) * .145); --aro: calc(var(--w) * .019); --tela-borda: calc(var(--w) * .0155);
  position: relative; width: var(--w); aspect-ratio: 77 / 163; transform-style: preserve-3d; transform-origin: 50% 50% calc(var(--prof) * -.5); transform: rotateY(-16deg) rotateX(3deg);
  animation: ap-entrada 1s cubic-bezier(.22, .8, .24, 1) both, ap-flutua 8s ease-in-out 1s infinite alternate; will-change: transform; }
/* giro curto e suave: no máximo 28 graus; nunca fica de lado e nunca mostra o verso */
@keyframes ap-entrada { 0% { transform: translateY(70px) rotateY(-28deg) rotateX(9deg) scale(.88); opacity: 0; } 14% { opacity: 1; } 100% { transform: translateY(0) rotateY(-16deg) rotateX(3deg) scale(1); opacity: 1; } }
@keyframes ap-flutua { from { transform: translateY(0) rotateY(-16deg) rotateX(3deg); } to { transform: translateY(-14px) rotateY(-9deg) rotateX(1.200deg); } }
/* laterais com volume: 14 camadas de metal preto (grafite), a do meio mais clara = o brilho da quina chanfrada */
.aparelho .camada { position: absolute; inset: 0; border-radius: var(--r); transform: translateZ(calc(var(--k) * var(--prof) / -14)); background: linear-gradient(180deg, #d4d8df 0%, #959ca8 20%, #c4c8d0 46%, #838a96 74%, #666d79 100%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .10) 0 1px, rgba(0, 0, 0, .05) 1px 2px); background-size: 100% 100%, 100% 100%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, calc(.75 * (1 - var(--m, 1)) + .08)), inset 0 0 0 2px rgba(0, 0, 0, calc(.22 * var(--m, 1))); }
.aparelho .verso { position: absolute; inset: 0; border-radius: var(--r); background: linear-gradient(150deg, #b9bec8 0%, #8c929e 45%, #6b717d 100%); transform: translateZ(calc(var(--prof) * -1)) rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: inset 0 0 0 1.500px rgba(255, 255, 255, .1); }
.modulo-camera { position: absolute; right: 9%; top: 5.500%; width: 41%; aspect-ratio: 1; border-radius: 24%; background: linear-gradient(145deg, #2c2f36, #0e0f12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 6px 14px rgba(0, 0, 0, .5); }
.modulo-camera b { position: absolute; width: 36%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3c466a, #05070d 62%); box-shadow: 0 0 0 3.500px #1b1d22, inset 0 0 0 1px rgba(255, 255, 255, .12); }
.modulo-camera b:nth-child(1) { left: 12%; top: 10%; } .modulo-camera b:nth-child(2) { left: 12%; top: 54%; }
/* frente: moldura preta fosca com brilho metálico só nas quinas e no fio da borda */
.frente { position: absolute; inset: 0; border-radius: var(--r); padding: var(--aro); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(135deg, #e9ecf0 0%, #b3b9c3 16%, #868e9a 40%, #717886 52%, #9aa1ad 72%, #d2d6dd 90%, #a9afb9 100%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .12) 0 1px, rgba(0, 0, 0, .05) 1px 2px); background-size: 220% 100%, 100% 100%; background-position: 30% 0, 0 0; animation: ap-metal 8s ease-in-out 1s infinite alternate;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .95), inset 0 -2px 0 rgba(60, 66, 78, .6), inset 1.500px 0 0 rgba(255, 255, 255, .6), inset -1.500px 0 0 rgba(255, 255, 255, .45), 0 0 0 .8px #4a505c; }
.frente::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 6; background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 20%); mix-blend-mode: soft-light; } /* luz suave vinda de cima */
.frente::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 6; /* brilho metálico nas 4 quinas */
  background: radial-gradient(circle at 12% 7%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 8%), radial-gradient(circle at 88% 7%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 9%), radial-gradient(circle at 12% 93%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 8%), radial-gradient(circle at 88% 93%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 8%); mix-blend-mode: screen; }
.botao-lat { position: absolute; z-index: 0; width: calc(var(--w) * .0145); min-width: 3.500px; border-radius: 2.500px; background: linear-gradient(90deg, #7d8490 0%, #eceef2 48%, #98a0ac 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(40, 46, 58, .55), 0 0 0 .5px rgba(30, 36, 48, .75), 1px 0 2px rgba(0, 0, 0, .35); transform: translateZ(calc(var(--prof) * -.5)); }
.botao-lat.acao { left: calc(var(--w) * -.0125); top: 13%; height: 3.400%; } .botao-lat.vol1 { left: calc(var(--w) * -.0125); top: 19.500%; height: 6.400%; } .botao-lat.vol2 { left: calc(var(--w) * -.0125); top: 27.800%; height: 6.400%; } .botao-lat.power { right: calc(var(--w) * -.0125); top: 23.500%; height: 10.200%; background: linear-gradient(90deg, #98a0ac 0%, #eceef2 52%, #7d8490 100%); }
.vidro { position: relative; width: 100%; height: 100%; border-radius: calc(var(--r) - var(--aro)); background: #000; box-shadow: 0 0 0 1px rgba(0, 0, 0, .85); padding: var(--tela-borda); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 0 12px rgba(0, 0, 0, .9); }
/* reflexo do vidro: faixas suaves que correm pela tela conforme o aparelho se inclina */
.reflexo { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; mix-blend-mode: screen;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, .11) 34%, rgba(255, 255, 255, .025) 46%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .05) 82%, rgba(255, 255, 255, 0) 100%); background-size: 230% 100%; background-position: 15% 0; animation: ap-vidro 8s ease-in-out 1s infinite alternate; }
.reflexo.r2 { background: linear-gradient(104deg, transparent 38%, rgba(255, 255, 255, .22) 49%, transparent 60%); background-size: 280% 100%; background-position: 180% 0; animation: ap-brilho 1.400s cubic-bezier(.3, .6, .3, 1) both; opacity: .9; }
@keyframes ap-metal { from { background-position: 18% 0, 0 0; } to { background-position: 88% 0, 0 0; } }
@keyframes ap-vidro { from { background-position: 15% 0; } to { background-position: 85% 0; } }
@keyframes ap-brilho { 0% { background-position: 180% 0; } 100% { background-position: -40% 0; } }

/* tela do WhatsApp (tudo em "em", proporcional ao aparelho) */
.tela { position: relative; width: 100%; height: 100%; border-radius: calc(var(--r) - var(--aro) - var(--tela-borda)); overflow: hidden; background: #efeae2; display: flex; flex-direction: column; font-size: calc(var(--w) * .0385); color: #111b21; }
.status { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: .85em 1.7em .5em; background: #f7f8fa; font: 600 .86em/1 var(--corpo); letter-spacing: -.01em; }
.camera-frontal { position: absolute; left: 50%; top: .75em; width: 1.3em; height: 1.3em; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #3a4670 0%, #0b0f1c 38%, #020305 72%); box-shadow: 0 0 0 .22em #05070b, inset 0 0 0 .5px rgba(255, 255, 255, .12); transform: translateX(-50%); }
.sinais { display: inline-flex; align-items: center; gap: .42em; }
.sinais svg { height: .82em; width: auto; fill: currentColor; }
.sinais .i-sinal { height: .8em; } .sinais .i-bateria { height: .86em; }
.wa-topo { position: relative; z-index: 2; display: flex; align-items: center; gap: .55em; padding: .65em .9em .75em .55em; background: #f7f8fa; border-bottom: 1px solid #e3e6ea; }
.wa-voltar { width: 1.5em; height: 1.5em; flex: none; color: #11766b; }
.avatar { width: 2.75em; height: 2.75em; flex: none; border-radius: 50%; overflow: hidden; background: #0b1b3f; box-shadow: 0 0 0 1px rgba(11, 27, 63, .12); }
.avatar svg { width: 100%; height: 100%; display: block; }
.wa-nome { min-width: 0; flex: 1; }
.wa-nome b { display: block; font-size: 1.04em; font-weight: 600; line-height: 1.15; }
.wa-nome small { display: block; font-size: .8em; color: #4f6169; line-height: 1.2; }
.wa-acoes { display: inline-flex; gap: .95em; color: #4f6169; }
.wa-acoes svg { width: 1.35em; height: 1.35em; }
.wa-corpo { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .38em; padding: .7em .6em .7em; overflow: hidden; background-color: #efeae2; background-image: radial-gradient(rgba(11, 20, 26, .06) 1px, transparent 1.4px), radial-gradient(rgba(11, 20, 26, .035) 1px, transparent 1.2px); background-size: 14px 14px, 22px 22px; background-position: 0 0, 7px 7px; -webkit-mask-image: linear-gradient(transparent 0, #000 10%); mask-image: linear-gradient(transparent 0, #000 10%); transition: opacity .5s; }
.wa-corpo.some { opacity: 0; }
.dia-chip { align-self: center; margin-bottom: .3em; padding: .22em .8em; border-radius: .6em; background: rgba(255, 255, 255, .92); color: #54656f; font: 500 .7em/1.2 var(--corpo); letter-spacing: .02em; text-transform: uppercase; box-shadow: 0 1px 0 rgba(11, 20, 26, .1); }
.wa-barra { position: relative; z-index: 2; display: flex; align-items: center; gap: .5em; padding: .55em .55em 1.7em; background: #efeae2; }
.wa-barra .campo { flex: 1; display: flex; align-items: center; gap: .55em; padding: .62em .8em; border-radius: 2em; background: #fff; color: #667781; box-shadow: 0 1px 0 rgba(11, 20, 26, .1); }
.wa-barra .campo em { flex: 1; font-style: normal; font-size: .92em; }
.wa-barra .campo svg { width: 1.35em; height: 1.35em; flex: none; }
.wa-barra .mic { width: 2.9em; height: 2.9em; flex: none; border-radius: 50%; display: grid; place-items: center; background: #11766b; color: #fff; box-shadow: 0 1px 2px rgba(11, 20, 26, .25); }
.wa-barra .mic svg { width: 1.3em; height: 1.3em; }
.home-ind { position: absolute; left: 50%; bottom: .5em; width: 34%; height: .38em; border-radius: 99px; background: rgba(0, 0, 0, .78); transform: translateX(-50%); z-index: 4; }
.msg { position: relative; max-width: 86%; padding: .42em .6em .36em .62em; border-radius: .7em; font-size: .94em; line-height: 1.34; color: #111b21; box-shadow: 0 1px 0 rgba(11, 20, 26, .13); animation: entra-msg .45s var(--suave-ease) both; overflow-wrap: anywhere; }
.msg.eu { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 0; transform-origin: top right; }
.msg.san { align-self: flex-start; background: #fff; border-top-left-radius: 0; transform-origin: top left; }
.msg.eu::before, .msg.san::before { content: ""; position: absolute; top: 0; width: .6em; height: .75em; }
.msg.eu::before { right: -.55em; background: #d9fdd3; clip-path: polygon(0 0, 100% 0, 0 100%); }
.msg.san::before { left: -.55em; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.msg .linha { display: block; }
.msg strong { font-weight: 600; color: #1d4ed8; }
.msg .hora { display: inline-flex; align-items: center; gap: .22em; float: right; margin: .55em 0 -.1em .6em; font-size: .72em; line-height: 1; color: #667781; }
.msg .tiques { width: 1.35em; height: .9em; color: #53bdeb; }
.msg.digitando { display: inline-flex; gap: .28em; padding: .8em .85em; }
.msg.digitando i { width: .48em; height: .48em; border-radius: 50%; background: #8696a0; animation: pontinho 1.1s infinite; }
.msg.digitando i:nth-child(2) { animation-delay: .15s; } .msg.digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pontinho { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-.3em); opacity: 1; } }
@keyframes entra-msg { from { opacity: 0; transform: translateY(.8em) scale(.94); } }
.msg.audio { min-width: 14em; }
.audio-linha { display: flex; align-items: center; gap: .5em; }
.audio-linha .play { width: 2.1em; height: 2.1em; flex: none; border-radius: 50%; background: #11766b; color: #fff; display: grid; place-items: center; }
.audio-linha .play svg { width: .9em; height: .9em; margin-left: .08em; }
.onda { flex: 1; display: flex; align-items: center; gap: .14em; height: 1.7em; }
.onda i { flex: 1; min-width: 2px; border-radius: 2px; background: #a8b4ba; height: var(--h, 40%); transition: background .15s; }
.onda i.on { background: #11766b; }
.audio-linha .dur { font-size: .75em; color: #4f6169; }
.transcricao { display: block; margin-top: .5em; padding-top: .45em; border-top: 1px solid rgba(11, 20, 26, .12); font-size: .94em; font-style: italic; color: #3b4a54; animation: entra-msg .45s var(--suave-ease) both; }
/* mensagem com imagem (resumo em gráfico) */
.msg.img { width: 84%; max-width: none; padding: .22em; }
.msg.img .img-resumo { display: block; width: 100%; height: auto; border-radius: .5em; }
.msg.img .legenda { display: block; padding: .35em .35em 0; font-size: .92em; line-height: 1.3; }
.msg.img .hora { margin-top: .2em; }
.msg.img.sem-legenda .hora { position: absolute; right: .55em; bottom: .5em; float: none; margin: 0; padding: .18em .45em; border-radius: .8em; background: rgba(11, 20, 26, .55); color: #fff; }
.legenda-exemplo { margin: 0; font-size: .78rem; color: var(--suave); }

/* ---------- Faixa de frases: balões verdes de WhatsApp ---------- */
.faixa-frases { overflow: hidden; border-block: 1px solid #e3ddd2; background-color: #efeae2; background-image: radial-gradient(rgba(11, 20, 26, .05) 1px, transparent 1.4px); background-size: 16px 16px; padding: 22px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.faixa-frases .trilho { display: flex; width: max-content; gap: 22px; padding-right: 22px; animation: correr 70s linear infinite; }
.faixa-frases:hover .trilho { animation-play-state: paused; }
.faixa-frases span { position: relative; padding: 10px 15px 9px; border-radius: 12px 2px 12px 12px; background: #d9fdd3; color: #111b21; font-size: .98rem; font-weight: 450; line-height: 1.3; white-space: nowrap; box-shadow: 0 1px 1px rgba(11, 20, 26, .18); }
.faixa-frases span::before { content: ""; position: absolute; top: 0; right: -7px; width: 9px; height: 12px; background: #d9fdd3; clip-path: polygon(0 0, 100% 0, 0 100%); }
.faixa-frases span::after { content: "✓✓"; margin-left: 10px; font-size: .62rem; letter-spacing: -.12em; color: #2b9bd0; vertical-align: -3px; }
@keyframes correr { to { transform: translateX(-50%); } }

/* ---------- Como funciona ---------- */
.como { background: var(--fundo); border-block: 1px solid var(--linha); }
.passos { display: grid; gap: 32px; position: relative; }
@media (min-width: 900px) { .passos { grid-template-columns: repeat(3, 1fr); gap: 40px; } .passos::before { content: ""; position: absolute; left: 14%; right: 14%; top: 23px; border-top: 1px dashed #b9c8e8; transform: scaleX(0); transform-origin: left; transition: transform 1.3s .2s var(--suave-ease); } .passos.visto::before { transform: scaleX(1); } }
.passo { position: relative; }
.passo .num { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid #b9c8e8; color: var(--principal); font: 600 1.1rem var(--titulo); margin-bottom: 20px; position: relative; z-index: 1; box-shadow: 0 0 0 8px var(--fundo); }
.passo h3 { font-size: 1.2rem; margin-bottom: 6px; }
.passo > p { color: var(--suave); font-size: .96rem; }
.mini { margin-top: 18px; background: #efeae2; border: 1px solid var(--linha); border-radius: 14px; padding: 14px; display: grid; gap: 7px; }
.mini .b { font-size: .86rem; padding: 7px 11px; border-radius: 9px; max-width: 90%; line-height: 1.35; color: #111b21; box-shadow: 0 1px 0 rgba(11, 20, 26, .12); }
.mini .b.eu { background: #d9fdd3; justify-self: end; border-top-right-radius: 2px; }
.mini .b.san { background: #fff; border-top-left-radius: 2px; }
.mini .b.san strong { color: var(--principal); font-weight: 600; }

/* ---------- Benefícios ---------- */
.beneficios { background: #fff; }
.ben-grade { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ben-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .ben-audio { grid-column: 1 / -1; } }
.ben { min-width: 0; position: relative; display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: 20px; padding: clamp(24px, 3.4vw, 36px); background: #fff; transition: border-color .3s, box-shadow .3s; }
.ben:hover { border-color: #c5d3f2; box-shadow: var(--sombra); }
.ben .icone { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--clara); color: var(--principal); margin-bottom: 20px; }
.ben .icone svg { width: 23px; height: 23px; }
.ben h3 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); margin-bottom: 8px; }
.ben > p, .ben-audio-texto > p { color: var(--suave); font-size: .98rem; }
.exemplo-ilustrativo { margin: 18px 0 0 !important; padding-top: 14px; border-top: 1px solid var(--linha); font-size: .82rem !important; line-height: 1.5; color: var(--suave); }
.exemplo-ilustrativo strong { color: var(--escura); font-weight: 600; }
/* planilha x San */
.vs { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; margin: 6px 0 20px; }
@media (max-width: 460px) { .vs { grid-template-columns: minmax(0, 1fr); } }
.vs-col { border-radius: 14px; padding: 14px 16px 16px; border: 1px solid var(--linha); background: var(--fundo); }
.vs-titulo { display: block; margin-bottom: 10px; font: 600 .72rem/1 var(--corpo); letter-spacing: .12em; text-transform: uppercase; color: #5d6982; }
.vs-planilha ol { list-style: none; counter-reset: p; margin: 0; padding: 0; display: grid; gap: 7px; }
.vs-planilha li { counter-increment: p; display: flex; align-items: center; gap: 9px; font-size: .86rem; color: #44516c; opacity: 0; transform: translateX(-6px); transition: opacity .5s var(--suave-ease), transform .5s var(--suave-ease); transition-delay: calc(var(--n) * 160ms + 200ms); }
.vs-planilha li::before { content: counter(p); flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #e6ebf5; color: #5d6982; font: 600 .68rem var(--corpo); }
.vs.visto .vs-planilha li { opacity: 1; transform: none; }
.vs-san { background: var(--escura); border-color: var(--escura); color: #d5def2; display: flex; flex-direction: column; }
.vs-san .vs-titulo { color: var(--destaque); }
.vs-msg { align-self: flex-start; padding: 8px 12px; border-radius: 10px 10px 10px 2px; background: #d9fdd3; color: #111b21; font-size: .88rem; opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .5s var(--suave-ease) 1.3s, transform .5s var(--suave-ease) 1.3s; }
.vs-resp { align-self: flex-start; margin-top: 8px; padding: 8px 12px; border-radius: 2px 10px 10px 10px; background: #fff; color: #111b21; font-size: .84rem; line-height: 1.4; opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .5s var(--suave-ease) 2s, transform .5s var(--suave-ease) 2s; }
.vs-resp strong { color: var(--principal); font-weight: 600; }
.vs.visto .vs-resp { opacity: 1; transform: none; }
.vs-pronto { margin-top: auto; padding-top: 14px; display: flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; color: #fff; opacity: 0; transition: opacity .6s .35s; }
.vs-pronto svg { width: 16px; height: 16px; flex: none; padding: 3px; border-radius: 50%; background: var(--vivo); color: #fff; }
.vs.visto .vs-msg { opacity: 1; transform: none; }
.vs.visto .vs-pronto { opacity: 1; transition-delay: 2.6s; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 10px 16px; }
.checks li { display: flex; align-items: center; gap: 9px; font-size: .92rem; font-weight: 500; color: var(--escura); }
.checks svg { width: 20px; height: 20px; flex: none; padding: 4px; border-radius: 50%; background: var(--clara); color: var(--principal); }
/* calculadora */
.calc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 4px; padding: 18px; border-radius: 14px; background: var(--fundo); border: 1px solid var(--linha); }
.calc label { font-size: .88rem; font-weight: 500; color: var(--escura); }
.calc-campo { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 12px; background: #fff; border: 1px solid #cdd7ea; transition: border-color .2s, box-shadow .2s; }
.calc-campo:focus-within { border-color: var(--principal); box-shadow: 0 0 0 3px rgba(29, 78, 216, .15); }
.calc-rs { font-weight: 600; color: var(--suave); }
.calc-campo input { flex: 1; width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; padding: 12px 0; font: 600 1.5rem/1.2 var(--titulo); letter-spacing: -.02em; color: var(--escura); }
.calc-rapidos { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-rapidos button { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--linha); background: #fff; color: var(--escura); font: 500 .85rem var(--corpo); cursor: pointer; transition: border-color .2s, background .2s; }
.calc-rapidos button:hover { border-color: var(--principal); background: var(--clara); }
.calc-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; margin: 0; }
.calc-res > div { padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--linha); }
.calc-res > div:last-child { background: var(--escura); border-color: var(--escura); }
.calc-res dt { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: #5d6982; }
.calc-res dd { margin: 4px 0 0; font: 600 clamp(1.15rem, 2.6vw, 1.5rem)/1.2 var(--titulo); letter-spacing: -.02em; color: var(--escura); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-res > div:last-child dt { color: var(--destaque); } .calc-res > div:last-child dd { color: #fff; }
.calc-txt { margin: 0 !important; font-size: .8rem !important; color: var(--suave) !important; }
/* áudio vira texto */
.ben-audio { display: grid; gap: 28px; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ben-audio { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; } }
.palco { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: clamp(16px, 3vw, 28px); border-radius: 16px; background: #efeae2; border: 1px solid var(--linha); background-image: radial-gradient(rgba(11, 20, 26, .045) 1px, transparent 1.4px); background-size: 16px 16px; transition: opacity .5s; }
.palco.saindo { opacity: 0; }
.palco-audio { justify-self: end; display: flex; align-items: center; gap: 10px; width: min(100%, 330px); padding: 10px 14px; border-radius: 12px 2px 12px 12px; background: #d9fdd3; box-shadow: 0 1px 0 rgba(11, 20, 26, .13); }
.p-play { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #128c7e; color: #fff; }
.p-play svg { width: 13px; height: 13px; margin-left: 1px; }
.p-onda { flex: 1; display: flex; align-items: center; gap: 2px; height: 28px; }
.p-onda i { flex: 1; min-width: 2px; border-radius: 2px; background: #a8b4ba; height: var(--h); transition: background .15s, transform .15s; }
.p-onda i.on { background: #128c7e; transform: scaleY(1.12); }
.p-dur { font-size: .72rem; color: #4f6169; }
.p-passo { display: grid; gap: 4px; padding: 11px 14px; border-radius: 2px 12px 12px 12px; background: #fff; box-shadow: 0 1px 0 rgba(11, 20, 26, .13); max-width: min(100%, 360px); color: #111b21; font-size: .95rem; opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .5s var(--suave-ease), transform .5s var(--suave-ease); }
.p-passo small { font: 600 .68rem/1 var(--corpo); letter-spacing: .1em; text-transform: uppercase; color: #5d6982; }
.p-texto { min-height: 1.5em; font-style: italic; }
.p-texto:empty::after { content: "…"; color: #8696a0; }
.p-anotou b { color: var(--principal); font-weight: 600; }
.palco.ouviu .p-ouviu, .palco.anotou .p-anotou, .palco.fim .p-passo { opacity: 1; transform: none; }

/* ---------- Recursos ---------- */
.recursos { background: #fff; }
.bento { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 680px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.bloco { position: relative; border-radius: var(--raio); padding: clamp(22px, 3vw, 28px); background: #fff; border: 1px solid var(--linha); display: flex; flex-direction: column; transition: transform .35s var(--suave-ease), box-shadow .35s, border-color .3s; }
@media (hover: hover) { .bloco:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: #c5d3f2; } .bloco:hover .icone { background: var(--principal); color: #fff; } }
.bloco .icone { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--clara); color: var(--principal); margin-bottom: 18px; transition: background .3s, color .3s; }
.bloco .icone svg { width: 22px; height: 22px; }
.bloco h3 { font-size: 1.15rem; margin-bottom: 6px; }
.bloco p { color: var(--suave); margin-bottom: 18px; font-size: .95rem; }
.selo { position: absolute; top: 22px; right: 22px; background: var(--clara); color: var(--principal); font: 600 .68rem/1 var(--corpo); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; }
.bloco .visual { margin-top: auto; padding-top: 4px; }
.audio-ex { display: grid; gap: 10px; }
.onda-fixa { display: flex; align-items: center; gap: 3px; height: 40px; padding: 0 14px; border-radius: 10px; background: var(--fundo); border: 1px solid var(--linha); }
.onda-fixa i { flex: 1; min-width: 2px; border-radius: 2px; background: #b9c8e8; height: var(--h); }
.visto .onda-fixa i { animation: onda-cor 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * 60ms); }
@keyframes onda-cor { 0%, 30%, 100% { background: #b9c8e8; } 12% { background: var(--principal); } }
.transc { font-size: .92rem; font-style: italic; color: var(--escura); padding: 10px 14px; border-radius: 10px; background: var(--clara); }
.frases-cat { display: grid; gap: 8px; }
.frases-cat .par { display: grid; justify-items: start; gap: 6px; opacity: 0; transform: translateY(6px); }
.frases-cat { gap: 14px; }
.visto .frases-cat .par { animation: par-entra .6s var(--suave-ease) forwards; animation-delay: calc(var(--n) * .25s + .15s); }
@keyframes par-entra { to { opacity: 1; transform: none; } }
.frases-cat q { quotes: none; padding: 6px 12px; border-radius: 9px; background: #d9fdd3; font-size: .86rem; color: #111b21; }
.frases-cat .tag { padding: 5px 11px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--clara); color: var(--escura); }
.dica-mini { padding: 14px 16px; border-radius: 12px; background: var(--fundo); border: 1px solid var(--linha); font-size: .9rem; color: var(--escura); line-height: 1.5; }
.dica-mini b { display: block; font: 600 .7rem var(--corpo); letter-spacing: .1em; text-transform: uppercase; color: var(--principal); margin-bottom: 4px; }
.qa { display: grid; gap: 7px; font-size: .86rem; padding: 12px; margin-top: auto; border-radius: 12px; background: #efeae2; border: 1px solid var(--linha); }
.bloco .visual.qa { padding-top: 12px; }
.qa .q { justify-self: end; max-width: 92%; background: #d9fdd3; padding: 7px 11px; border-radius: 9px 2px 9px 9px; color: #111b21; box-shadow: 0 1px 0 rgba(11, 20, 26, .12); }
.qa .a { max-width: 96%; background: #fff; padding: 7px 11px; border-radius: 2px 9px 9px 9px; color: #111b21; box-shadow: 0 1px 0 rgba(11, 20, 26, .12); }
.qa .a strong { color: var(--principal); font-weight: 600; }
.mini-barras { display: flex; align-items: flex-end; gap: 7px; height: 96px; padding-top: 0 !important; margin-top: auto; }
.mini-barras i { flex: 1; border-radius: 4px 4px 1px 1px; background: var(--vivo); height: 0; transition: height .9s var(--suave-ease); transition-delay: calc(var(--n) * 70ms + 200ms); }
.mini-barras i:nth-child(odd) { background: #93b4f5; }
.visto .mini-barras i { height: var(--h); }

/* ---------- Prévia do painel ---------- */
.previa { background: var(--fundo); border-block: 1px solid var(--linha); overflow: hidden; }
.moldura { position: relative; max-width: 1060px; margin: 0 auto; }
.janela { position: relative; border-radius: 16px; background: #fff; border: 1px solid var(--linha); box-shadow: 0 60px 100px -56px rgba(11, 27, 63, .55), 0 2px 8px rgba(11, 27, 63, .06); overflow: hidden; opacity: 0; transform: translateY(36px) scale(.985); transition: transform 1.1s var(--suave-ease), opacity .9s; }
.moldura.visto .janela { transform: none; opacity: 1; }
.janela .barra-jan { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: #f1f4fa; border-bottom: 1px solid var(--linha); }
.janela .barra-jan i { width: 10px; height: 10px; border-radius: 50%; background: #d3dbea; }
.janela .barra-jan span { margin-left: 12px; flex: 1; max-width: 360px; display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 7px; background: #fff; border: 1px solid var(--linha); font-size: .72rem; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.janela .barra-jan span svg { width: 11px; height: 11px; flex: none; }
.dash { display: grid; grid-template-columns: 1fr; font-size: .85rem; }
@media (min-width: 760px) { .dash { grid-template-columns: 196px 1fr; } }
.dash .lateral { display: none; flex-direction: column; padding: 20px 14px 16px; background: var(--escura); color: #aebcdc; opacity: 0; transform: translateX(-14px); transition: opacity .8s .3s, transform .8s .3s var(--suave-ease); }
@media (min-width: 760px) { .dash .lateral { display: flex; } }
.moldura.visto .dash .lateral { opacity: 1; transform: none; }
.dash .lateral .marca { color: #fff; font-size: 1.15rem; margin-bottom: 24px; }
.dash .lateral .marca svg { width: 26px; height: 26px; }
.dash .lateral ul { padding: 0; margin: 0; }
.dash .lateral li { list-style: none; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; margin-bottom: 3px; font-weight: 500; }
.dash .lateral li svg { width: 16px; height: 16px; flex: none; }
.dash .lateral li.ativo { background: rgba(255, 255, 255, .11); color: #fff; }
.dash .lateral .lat-rodape { margin: auto 0 0; padding: 12px 4px 0; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .72rem; line-height: 1.45; color: #8ea2cc; }
.dash .conteudo { padding: clamp(14px, 2.6vw, 26px); background: var(--fundo); display: grid; gap: 14px; align-content: start; }
.dash .topo-dash { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash .topo-dash b { display: block; font: 600 1.15rem/1.2 var(--titulo); color: var(--escura); letter-spacing: -.02em; }
.dash .topo-dash small { color: var(--suave); font-size: .74rem; }
.dash .topo-dash .sel { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 9px; background: #fff; border: 1px solid var(--linha); font-weight: 500; font-size: .76rem; }
.dash .topo-dash .sel svg { width: 12px; height: 12px; }
.nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; opacity: 0; transform: translateY(12px); transition: opacity .6s var(--suave-ease), transform .6s var(--suave-ease); }
.moldura.visto .kpi { opacity: 1; transform: none; }
.kpi:nth-child(1) { transition-delay: .45s; } .kpi:nth-child(2) { transition-delay: .55s; } .kpi:nth-child(3) { transition-delay: .65s; }
.kpi small { color: var(--suave); font-size: .72rem; display: block; }
.kpi strong { display: block; font: 600 clamp(.82rem, 2.3vw, 1.3rem)/1.3 var(--titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--escura); white-space: nowrap; }
.kpi .var { display: none; margin-top: 2px; font-size: .7rem; color: var(--suave); }
.kpi.sai strong { color: var(--perigo); } .kpi.ent strong { color: var(--positivo); } .kpi.sal strong { color: var(--principal); }
.kpi .spark { display: none; position: absolute; right: 12px; bottom: 12px; width: 64px; height: 22px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.kpi .spark path { stroke-dasharray: 130; stroke-dashoffset: 130; transition: stroke-dashoffset 1.4s var(--suave-ease) 1s; }
.kpi.ent .spark { stroke: var(--positivo); } .kpi.sai .spark { stroke: var(--perigo); } .kpi.sal .spark { stroke: var(--vivo); }
.moldura.visto .kpi .spark path { stroke-dashoffset: 0; }
@media (min-width: 640px) { .kpi { padding: 14px 16px; } .kpi .var, .kpi .spark { display: block; } .kpi .var { padding-right: 70px; } }
.paineis { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .paineis { grid-template-columns: 1fr 1.3fr; } }
.paineis .pn { background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 14px 16px; }
.paineis .pn h4 { margin: 0 0 12px; font: 600 .8rem var(--corpo); color: var(--escura); }
.rosca-mock { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; }
.rosca-caixa { position: relative; width: 112px; height: 112px; }
.rosca-caixa svg { width: 112px; height: 112px; transform: rotate(-90deg); }
.rosca-mock circle { fill: none; stroke-width: 6; stroke-dasharray: 0 100; transition: stroke-dasharray 1.3s var(--suave-ease); transition-delay: calc(var(--n) * .12s + .8s); }
.moldura.visto .rosca-mock circle { stroke-dasharray: var(--d) 100; }
.rosca-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.rosca-centro small { font-size: .62rem; color: var(--suave); }
.rosca-centro b { font: 600 .8rem var(--titulo); letter-spacing: -.02em; color: var(--escura); }
.leg-mock { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .74rem; }
.leg-mock li { display: grid; grid-template-columns: 9px 1fr auto; gap: 7px; align-items: center; }
.leg-mock li i { width: 9px; height: 9px; border-radius: 3px; }
.leg-mock b { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--escura); }
.barras-wrap { position: relative; }
.barras-mock { display: flex; align-items: flex-end; gap: 3px; height: 112px; padding-bottom: 1px; border-bottom: 1px solid var(--linha); background: repeating-linear-gradient(to top, transparent 0, transparent 27px, #eef1f7 27px, #eef1f7 28px); }
.barras-mock i { flex: 1; border-radius: 3px 3px 0 0; background: #93b4f5; height: 0; transition: height .9s var(--suave-ease); transition-delay: calc(var(--n) * 24ms + 1s); }
.barras-mock i.pico { background: var(--principal); }
.moldura.visto .barras-mock i { height: var(--h); }
.dica-barra { position: absolute; left: calc(31.5% + 12px); top: 2px; padding: 6px 10px; border-radius: 8px; background: var(--escura); color: #e8eeff; font-size: .68rem; line-height: 1.35; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .5s 2.2s, transform .5s 2.2s var(--suave-ease); }
.dica-barra::before { content: ""; position: absolute; left: -4px; top: 12px; width: 8px; height: 8px; background: var(--escura); transform: rotate(45deg); }
.moldura.visto .dica-barra { opacity: 1; transform: none; }
.eixo-x { display: flex; justify-content: space-between; margin-top: 6px; font-size: .66rem; color: var(--suave); }
.lista-mock { background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 4px 16px 6px; }
.lm-cab { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 8px; border-bottom: 1px solid #edf1f8; }
.lm-cab b { font: 600 .8rem var(--corpo); color: var(--escura); }
.lm-filtro { padding: 3px 10px; border-radius: 999px; background: var(--clara); color: var(--principal); font-size: .7rem; font-weight: 500; }
.lista-mock > div:not(.lm-cab) { display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid #edf1f8; font-size: .78rem; opacity: 0; transform: translateX(14px); transition: opacity .6s var(--suave-ease), transform .6s var(--suave-ease); transition-delay: calc(var(--n) * 110ms + 1.4s); }
.lista-mock > div:last-child { border-bottom: 0; }
.moldura.visto .lista-mock > div:not(.lm-cab) { opacity: 1; transform: none; }
.lm-d { color: var(--suave); font-variant-numeric: tabular-nums; }
.lm-t { color: var(--escura); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-c { display: none; align-items: center; gap: 6px; font-size: .72rem; color: var(--suave); }
.lm-c i { width: 8px; height: 8px; border-radius: 50%; }
@media (min-width: 560px) { .lista-mock > div:not(.lm-cab) { grid-template-columns: 42px 1fr 130px auto; } .lm-c { display: flex; } }
.lista-mock b.neg, .lista-mock b.pos { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; } .lista-mock .neg { color: var(--perigo); } .lista-mock .pos { color: var(--positivo); }
.moldura .rotulo-dados { text-align: center; margin: 18px 0 0; font-size: .82rem; color: var(--suave); }

/* ---------- Comparação em 3 cartões ---------- */
.comparacao { background: #fff; }
.trio { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: stretch; max-width: 1120px; margin: 0 auto; }
@media (min-width: 960px) { .trio { grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr) minmax(0, 1fr); gap: 22px; align-items: center; } }
.cartao-neg, .cartao-pos { position: relative; border-radius: 22px; padding: clamp(24px, 3vw, 32px); }
.cartao-neg h3, .cartao-pos h3 { font-size: 1.2rem; margin-bottom: 18px; }
.cartao-neg { background: #fff6f5; border: 1px solid #f6d3d0; color: #6b2a24; }
.cartao-neg h3 { color: #8a2f27; }
.lista-x, .lista-ok { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.lista-x li, .lista-ok li { position: relative; padding-left: 34px; font-size: .96rem; line-height: 1.45; }
.lista-x li::before, .lista-ok li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 12px; }
.lista-x li::before { background-color: #fbe0dd; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='3.200' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.cartao-pos { background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 70%); border: 1.500px solid #86d9a3; box-shadow: 0 40px 70px -34px rgba(21, 128, 61, .45), 0 4px 14px rgba(21, 128, 61, .1); padding: clamp(28px, 3.6vw, 44px) clamp(24px, 3vw, 36px); color: #0f3d22; z-index: 1; }
@media (min-width: 960px) { .cartao-pos { transform: translateY(-6px); } }
.cartao-pos h3 { font-size: clamp(1.45rem, 2.6vw, 1.8rem); color: #0f5132; margin-bottom: 22px; letter-spacing: -.03em; }
.lista-ok { gap: 15px; margin-bottom: 28px; }
.lista-ok li { font-size: 1rem; font-weight: 500; color: #12351f; }
.lista-ok li::before { background-color: #16a34a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.500' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.500l4.500 4.500L19 7.500'/%3E%3C/svg%3E"); }
.selo-pos { display: inline-block; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; background: #15803d; color: #fff; font: 600 .7rem/1 var(--corpo); letter-spacing: .08em; text-transform: uppercase; }
.cartao-pos .botao { width: 100%; --b-fundo: #15803d; }
.cartao-pos .botao:hover { box-shadow: 0 12px 26px -12px rgba(21, 128, 61, .8); }
.cartao-pos .chip-breve { margin-left: 8px; vertical-align: 1px; background: #dcfce7; color: #166534; }
.legenda-comp { text-align: center; color: var(--suave); font-size: .82rem; margin: 26px auto 0; max-width: 46em; }
@media (max-width: 959px) { .cartao-pos { order: -1; } }

/* ---------- Segurança ---------- */
.seguranca { background: var(--escura); color: #c3cfe8; }
.seguranca h2 { color: #fff; }
.seguranca h2 em { color: var(--destaque); }
.seguranca .cabeca p:not(.rotulo) { color: #aebcdc; }
.seguranca .rotulo { color: var(--destaque); }
.seg-layout { display: grid; gap: 40px; }
.seg-layout .cabeca { margin: 0; text-align: left; max-width: 34em; }
@media (min-width: 960px) { .seg-layout { grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: start; } .seg-layout .cabeca { position: sticky; top: 112px; } }
.seg-lista { display: grid; }
.seg { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.seg:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.seg > svg { width: 44px; height: 44px; padding: 10px; border-radius: 11px; background: rgba(157, 191, 255, .12); color: var(--destaque); }
.seg h3 { color: #fff; font-size: 1.05rem; margin-bottom: 4px; }
.seg p { margin: 0; color: #aebcdc; font-size: .94rem; }
.selo.em-linha { position: static; display: inline-block; margin-left: 10px; vertical-align: middle; background: rgba(157, 191, 255, .16); color: var(--destaque); }
.seg-links { margin: 26px 0 0 !important; display: flex; gap: 22px; flex-wrap: wrap; }
.seg-links a { color: var(--destaque); font-weight: 500; font-size: .95rem; }

/* ---------- Avaliações (prints de WhatsApp) ---------- */
.avaliacoes { background: var(--fundo); border-bottom: 1px solid var(--linha); }
.prints { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 340px)); justify-content: center; max-width: 1080px; margin: 0 auto; }
.print { border-radius: 18px; overflow: hidden; border: 1px solid var(--linha); background: #efeae2; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.print .cab-wa { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #f7f8fa; border-bottom: 1px solid #e3e6ea; color: #111b21; }
.print .cab-wa .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #c9d4ea; color: var(--escura); font: 600 .95rem var(--titulo); flex: none; }
.print .cab-wa b { display: block; font-size: .92rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.print .cab-wa small { font-size: .7rem; color: #4f6169; }
.print .conv { flex: 1; display: grid; align-content: start; gap: 6px; padding: 14px 12px 18px; min-height: 170px; background-image: radial-gradient(rgba(11, 20, 26, .045) 1px, transparent 1.4px); background-size: 16px 16px; }
.print .dia { justify-self: center; margin-bottom: 6px; padding: 3px 10px; border-radius: 7px; background: rgba(255, 255, 255, .85); color: #46565e; font: 500 .68rem var(--corpo); text-transform: uppercase; letter-spacing: .04em; }
.print .m { max-width: 90%; padding: 7px 10px 5px; border-radius: 9px; font-size: .88rem; line-height: 1.4; color: #111b21; box-shadow: 0 1px 0 rgba(11, 20, 26, .13); overflow-wrap: anywhere; }
.print .m .hora { display: block; text-align: right; font-size: .62rem; color: #4f6169; margin-top: 2px; }
.print .m.rec { justify-self: start; background: #fff; border-top-left-radius: 2px; }
.print .m.env { justify-self: end; background: #d9fdd3; border-top-right-radius: 2px; }
.print.modelo .m.rec { border: 1px dashed #b8921d; background: #fffdf0; }
.avaliacoes .nota-prints { text-align: center; margin: 22px 0 0; font-size: .85rem; color: var(--suave); }

/* ---------- Preços ---------- */
.precos { background: #fff; }
.planos { display: grid; gap: 20px; align-items: stretch; max-width: 920px; margin: 0 auto; }
@media (min-width: 800px) { .planos { grid-template-columns: 1.12fr .88fr; } }
.plano { position: relative; display: flex; flex-direction: column; padding: 34px 32px 28px; border-radius: 20px; background: #fff; border: 1px solid var(--linha); transition: box-shadow .3s, border-color .3s; }
.plano:hover { box-shadow: var(--sombra); border-color: #c5d3f2; }
.plano-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.plano h3 { font: 600 .78rem/1 var(--corpo); letter-spacing: .12em; text-transform: uppercase; color: var(--suave); margin: 0; }
.plano .linha-preco { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; }
.plano .preco { font: 600 clamp(2.3rem, 5.4vw, 2.9rem)/1 var(--titulo); letter-spacing: -.04em; color: var(--escura); }
.plano .periodo { color: var(--suave); font-size: .98rem; }
.plano .desconto { align-self: center; padding: 5px 11px; border-radius: 999px; background: var(--principal); color: #fff; font: 600 .78rem/1 var(--corpo); letter-spacing: .02em; white-space: nowrap; }
.plano .equiv { margin: 12px 0 0; font-size: 1.05rem; color: #d5def2; }
.plano .equiv strong { color: #fff; font-weight: 600; }
.plano .equiv .de { display: block; margin-top: 2px; font-size: .82rem; color: #8ea2cc; }
.plano .nota { margin: 10px 0 22px; color: var(--suave); font-size: .86rem; }
.plano ul { list-style: none; padding: 20px 0 0; margin: 0 0 26px; border-top: 1px solid var(--linha); display: grid; gap: 12px; flex: 1; align-content: start; }
.plano li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; }
.plano li::before { content: ""; width: 18px; height: 18px; flex: none; margin-top: 2px; border-radius: 50%; background: var(--clara) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='3.500' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.500l4.500 4.500L19 7.500'/%3E%3C/svg%3E") center / 11px no-repeat; }
.plano .botao { width: 100%; }
.plano .renova { margin: 12px 0 0; text-align: center; font-size: .82rem; line-height: 1.45; color: var(--suave); }
.plano.destaque { background: var(--escura); border-color: var(--escura); color: #c3cfe8; box-shadow: 0 40px 70px -36px rgba(11, 27, 63, .65); }
.plano.destaque h3 { color: var(--destaque); } .plano.destaque .preco { color: #fff; } .plano.destaque .periodo, .plano.destaque .nota { color: #aebcdc; }
.plano.destaque ul { border-top-color: rgba(255, 255, 255, .14); }
.plano.destaque .renova { color: #aebcdc; }
.plano.destaque li::before { background-color: rgba(157, 191, 255, .18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239dbfff' stroke-width='3.500' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.500l4.500 4.500L19 7.500'/%3E%3C/svg%3E"); }
.plano .etiqueta-plano { padding: 5px 11px; border-radius: 999px; background: rgba(157, 191, 255, .16); color: var(--destaque); font: 600 .7rem/1 var(--corpo); letter-spacing: .06em; text-transform: uppercase; }
.plano:not(.destaque) .etiqueta-plano { background: var(--clara); color: var(--principal); }
.faixa-oferta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: -6px 0 22px; padding: 10px 14px; border-radius: 12px; background: rgba(157, 191, 255, .12); border: 1px solid rgba(157, 191, 255, .28); }
.faixa-oferta.em-previa { border-style: dashed; }
.selo-oferta { font: 600 .72rem/1 var(--corpo); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.selo-oferta::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--destaque); vertical-align: 1px; }
.faixa-oferta .ate { font-size: .82rem; color: #c3cfe8; }
.precos .aviso { max-width: 920px; margin: 24px auto 0; }
.vale-a-pena { max-width: 920px; margin: 0 auto 26px; padding: 18px 22px; border-radius: 16px; background: var(--fundo); border: 1px solid var(--linha); text-align: center; }
.vap-frase { margin: 0 0 6px; font-size: 1.02rem; color: var(--escura); }
.vap-frase strong { font-weight: 600; color: var(--principal); }
.vale-a-pena small { color: var(--suave); font-size: .8rem; }
.plano .por-dia { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(157, 191, 255, .14); border: 1px solid rgba(157, 191, 255, .3); color: #e8eeff; font-size: 1.02rem; }
.plano .por-dia strong { color: #fff; font-weight: 600; }
.plano .por-dia .de { display: block; margin-top: 2px; font-size: .82rem; color: #aebcdc; }
.plano .botao-principal { padding-block: 17px; font-size: 1.05rem; }
.garantia { max-width: 920px; margin: 24px auto 0; display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-radius: 16px; background: #f0fdf4; border: 1px solid #bfe8cc; color: #14532d; }
.garantia svg { width: 34px; height: 34px; flex: none; color: #16a34a; }
.garantia strong { display: block; font-weight: 600; font-size: 1.02rem; }
.garantia span { display: block; font-size: .84rem; color: #3f6b4f; margin-top: 2px; }
.selos-confianca { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; max-width: 920px; margin: 20px auto 0; padding: 0; font-size: .9rem; font-weight: 500; color: var(--suave); }
.selos-confianca li { display: inline-flex; align-items: center; gap: 8px; }
.selos-confianca svg { width: 18px; height: 18px; flex: none; padding: 3px; border-radius: 50%; background: var(--clara); color: var(--principal); }
.selos-confianca li.em-previa { outline: 1px dashed #b8921d; outline-offset: 4px; border-radius: 6px; }

/* ---------- FAQ ---------- */
.faq { background: var(--fundo); border-top: 1px solid var(--linha); }
.acordeao { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--linha); }
.item-faq { border-bottom: 1px solid var(--linha); }
.item-faq button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; padding: 22px 4px; background: none; border: 0; cursor: pointer; font: 500 1.05rem/1.4 var(--titulo); color: var(--escura); letter-spacing: -.01em; border-radius: 8px; }
.item-faq button:hover { color: var(--principal); }
.item-faq .mais { flex: none; width: 24px; height: 24px; position: relative; }
.item-faq .mais::before, .item-faq .mais::after { content: ""; position: absolute; left: 4px; top: 11px; width: 16px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .35s var(--suave-ease), opacity .3s; }
.item-faq .mais::after { transform: rotate(90deg); }
.item-faq.aberto .mais::after { transform: rotate(0deg); opacity: 0; }
.item-faq .resp { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--suave-ease); }
.item-faq.aberto .resp { grid-template-rows: 1fr; }
.item-faq .resp > div { overflow: hidden; visibility: hidden; transition: visibility 0s .4s; }
.item-faq.aberto .resp > div { visibility: visible; transition-delay: 0s; }
.item-faq .resp p { margin: 0; padding: 0 40px 24px 4px; color: var(--suave); }

/* ---------- Chamada final ---------- */
.final { background: #fff; padding-block: clamp(64px, 9vw, 112px) !important; }
.final-cartao { position: relative; overflow: hidden; border-radius: 24px; padding: clamp(44px, 8vw, 88px) clamp(22px, 5vw, 64px); text-align: center; background: radial-gradient(60% 90% at 90% 0%, rgba(59, 130, 246, .38), rgba(59, 130, 246, 0) 70%), var(--escura); color: #fff; }
.final h2 { color: #fff; font-size: clamp(2rem, 5.6vw, 3.4rem); line-height: 1.08; letter-spacing: -.035em; max-width: 14em; margin: 0 auto 16px; }
.final h2 em { color: var(--destaque); }
.final-cartao > p { color: #c3cfe8; font-size: clamp(1rem, 2vw, 1.15rem); max-width: 30em; margin: 0 auto 32px; }
.final .acoes { justify-content: center; margin-bottom: 0; }
.final .pequeno-final { margin: 26px auto 0 !important; max-width: none !important; font-size: .86rem; color: #8ea2cc !important; overflow-wrap: anywhere; }

/* ---------- Botão "Começar agora" fixo (só no celular) ---------- */
.cta-fixo { position: fixed; z-index: 65; left: 14px; right: 80px; bottom: max(14px, env(safe-area-inset-bottom)); display: none; opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity .3s, transform .4s var(--suave-ease); }
.cta-fixo .botao { width: 100%; padding: 13px 18px; box-shadow: 0 10px 28px -10px rgba(11, 27, 63, .6); }
@media (max-width: 899px) { .cta-fixo { display: block; } .cta-fixo.mostrar { opacity: 1; transform: none; pointer-events: auto; } }

/* ---------- Animações ao rolar (discretas) ---------- */
.js [data-rev] { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .7s var(--suave-ease), transform .8s var(--suave-ease); transition-delay: var(--d, 0ms); }
.js [data-rev="zoom"] { transform: translate3d(0, 10px, 0) scale(.98); }
.js [data-rev].visto { opacity: 1; transform: none; }

/* ---------- Menos movimento ---------- */
.reduz [data-rev], .reduz .janela { opacity: 1 !important; transform: none !important; transition: none !important; }
.reduz .faixa-frases .trilho { animation: none; flex-wrap: wrap; width: auto; justify-content: center; padding: 0 20px; }
.reduz .faixa-frases .copia { display: none; }
.reduz .faixa-frases { -webkit-mask-image: none; mask-image: none; }
.reduz .frases-cat .par, .reduz .lista-mock div { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
.reduz .vs-planilha li, .reduz .vs-msg, .reduz .vs-resp, .reduz .vs-pronto, .reduz .kpi, .reduz .dash .lateral, .reduz .dica-barra, .reduz .p-passo { opacity: 1 !important; transform: none !important; transition: none !important; }
.reduz .kpi .spark path { stroke-dashoffset: 0; transition: none; }
.reduz .mini-barras i { height: var(--h); transition: none; } .reduz .barras-mock i { height: var(--h); transition: none; } .reduz .rosca-mock circle { stroke-dasharray: var(--d) 100; transition: none; } .reduz .passos::before { transform: scaleX(1); transition: none; }
.reduz .msg, .reduz .transcricao, .reduz .onda-fixa i { animation: none !important; }

/* ---------- O que você recebe ---------- */
.recebe { background: #fff; }
.recebe-grade { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .recebe-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .recebe-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1180px) { .recebe-grade { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
.recebe-item { position: relative; padding: 26px 24px 24px; border-radius: 18px; border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(140deg, #dbe5fb, #f4f7fe 42%, #cfdcfa) border-box; transition: transform .35s var(--suave-ease), box-shadow .35s, background .35s; }
.recebe-item:hover { transform: translateY(-3px); box-shadow: var(--sombra); background: linear-gradient(#fff, #fff) padding-box, linear-gradient(140deg, #9dbfff, #1d4ed8 55%, #60a5fa) border-box; }
.recebe-item .icone { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(145deg, #eef3ff, #dbe6fb); color: var(--principal); box-shadow: inset 0 0 0 1px rgba(29, 78, 216, .08); transition: background .3s, color .3s; }
.recebe-item:hover .icone { background: linear-gradient(145deg, #1d4ed8, #3b82f6); color: #fff; }
.recebe-item .icone svg { width: 23px; height: 23px; }
.recebe-item h3 { margin: 18px 0 6px; font-size: 1.05rem; }
.recebe-item p { margin: 0; color: var(--suave); font-size: .93rem; line-height: 1.55; }
.recebe-item .chip-breve { position: absolute; top: 22px; right: 20px; background: var(--clara); }
.faixa-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; max-width: 920px; margin: 40px auto 0; padding: 22px 28px; border-radius: 20px; border: 1px solid transparent; background: linear-gradient(#f8faff, #f8faff) padding-box, linear-gradient(120deg, #9dbfff, #1d4ed8 60%, #60a5fa) border-box; }
.faixa-cta strong { display: block; font: 600 1.25rem/1.3 var(--titulo); letter-spacing: -.02em; color: var(--escura); }
.faixa-cta span { display: block; margin-top: 2px; font-size: .9rem; color: var(--suave); }
.botao:not(.vazado):not(.desativado):not(.fantasma) { position: relative; overflow: hidden; }
.botao:not(.vazado):not(.desativado):not(.fantasma)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); transform: translateX(-120%); transition: transform .7s var(--suave-ease); pointer-events: none; }
.botao:not(.vazado):not(.desativado):not(.fantasma):hover::after { transform: translateX(120%); }
.cartao-pos { border: 1.500px solid transparent; background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 70%) padding-box, linear-gradient(140deg, #86efac, #16a34a 55%, #bbf7d0) border-box; }
.plano.destaque { border: 1px solid transparent; background: linear-gradient(var(--escura), var(--escura)) padding-box, linear-gradient(140deg, #9dbfff, #1d4ed8 50%, #60a5fa) border-box; }
.reduz .aparelho { animation: none; transform: rotateY(-9deg) rotateX(3deg); }
.reduz .palco-3d::after { animation: none; opacity: 1; }
.reduz .reflexo.r2 { animation: none; opacity: 0; }

/* ===== Topo escuro e imersivo (azul quase preto) ===== */
.landing { --noite: #050b1c; --noite2: #081430; }
.heroi { background: radial-gradient(60% 70% at 78% 38%, rgba(37, 99, 235, .28) 0%, rgba(37, 99, 235, 0) 70%), radial-gradient(50% 50% at 12% 100%, rgba(29, 78, 216, .22) 0%, rgba(29, 78, 216, 0) 70%), linear-gradient(180deg, var(--noite) 0%, var(--noite2) 100%); color: #fff; margin-top: -68px; padding: calc(68px + clamp(36px, 6vw, 72px)) 0 clamp(64px, 9vw, 110px) !important; min-height: min(100svh, 880px); display: flex; align-items: center; }
.heroi .heroi-grade { width: min(1120px, 100% - 40px); }
.heroi h1 { color: #fff; font-size: clamp(2.6rem, 6.6vw + .4rem, 4.8rem); line-height: 1.01; max-width: 9.5em; margin-bottom: 20px; }
.heroi h1 em { color: #9dbfff; }
.apoio { margin: 0 0 32px; font: 500 clamp(1.15rem, 1.4vw + .8rem, 1.5rem)/1.45 var(--titulo); letter-spacing: -.015em; color: #c9d6f2; max-width: 22em; }
.apoio span { display: inline-block; margin-right: .3em; white-space: nowrap; }
.apoio span:last-child { color: #fff; }
.heroi .acoes { margin-bottom: 18px; }
.heroi .botao:not(.vazado) { --b-fundo: #2563eb; box-shadow: 0 10px 30px -10px rgba(37, 99, 235, .9); }
.heroi .botao:not(.vazado):hover { box-shadow: 0 14px 38px -10px rgba(59, 130, 246, 1); }
.heroi .botao.vazado { --b-texto: #fff; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); }
.heroi .botao.vazado:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }
.heroi .reversao { color: #86efac; margin: 0; }
.heroi .legenda-exemplo { color: #8ea2cc; }
.fundo-tec { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .6) 40%, #000 72%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .6) 40%, #000 72%); }
@media (max-width: 959px) { .heroi .heroi-grade { gap: 34px; } .fundo-tec { -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, #000 55%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, #000 55%); } .heroi { align-items: flex-start; } }
.palco-3d::after { background: radial-gradient(closest-side, rgba(0, 0, 0, .75), rgba(0, 0, 0, .25) 55%, rgba(0, 0, 0, 0)); }
/* menu transparente sobre o topo escuro; vira branco ao rolar */
.landing .topo:not(.rolou):not(.menu-aberto) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.landing .topo:not(.rolou):not(.menu-aberto) .marca { color: #fff; }
.landing .topo:not(.rolou):not(.menu-aberto) .marca .sufixo { color: #9dbfff; }
.landing .topo:not(.rolou):not(.menu-aberto) .marca svg rect:first-child { fill: #1a3a80; }
.landing .topo:not(.rolou):not(.menu-aberto) .menu a:not(.botao) { color: #c3cfe8; }
.landing .topo:not(.rolou):not(.menu-aberto) .menu a:not(.botao):hover { color: #fff; background: rgba(255, 255, 255, .08); }
.landing .topo:not(.rolou):not(.menu-aberto) .menu .botao { --b-fundo: #2563eb; }
.landing .topo:not(.rolou):not(.menu-aberto) .menu-botao { color: #fff; }
/* a faixa de frases e as demais seções seguem claras */
.recebe .garantias { justify-content: center; margin: -8px 0 22px; }
.recebe .destaque-lembrete { margin: 0 auto 30px; justify-content: center; text-align: center; }
.recebe .destaque-lembrete > span:not(.chip-breve) { flex: 0 1 auto; }
.ben-grade { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ben-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ben-audio { grid-column: auto; } }
.ben-audio { grid-template-columns: minmax(0, 1fr) !important; gap: 22px; align-items: start; }
/* celular: letras maiores e menos mensagens visíveis */
.tela { font-size: calc(var(--w) * .0455); }
.status { font-size: .74em; } .wa-topo { font-size: .86em; } .wa-barra { font-size: .86em; }
.msg { font-size: 1em; max-width: 88%; }
.recebe .destaque-lembrete { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; width: fit-content; max-width: min(36em, 100%); gap: 8px 12px; text-align: left; }

/* ===== Painel web: seção escura (mesmo azul quase preto do topo), maquete clara em destaque ===== */
.previa { position: relative; background: radial-gradient(55% 45% at 50% 62%, rgba(37, 99, 235, .34) 0%, rgba(37, 99, 235, 0) 70%), radial-gradient(40% 30% at 12% 0%, rgba(29, 78, 216, .2) 0%, rgba(29, 78, 216, 0) 70%), linear-gradient(180deg, #050b1c 0%, #081430 55%, #050b1c 100%); border-block: 0; color: #c3cfe8; }
.previa .cabeca h2 { color: #fff; }
.previa .cabeca h2 em { color: #9dbfff; }
.previa .cabeca p:not(.rotulo) { color: #b4c2e0; }
.previa .rotulo { color: #7fb0ff; }
.previa .janela { border-color: rgba(255, 255, 255, .14); box-shadow: 0 70px 120px -30px rgba(0, 0, 0, .85), 0 30px 60px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06), 0 0 90px -10px rgba(59, 130, 246, .35); }
.previa .moldura .rotulo-dados { color: #8ea2cc; }
.previa .janela { color: #0b1b3f; }
.previa .moldura .rotulo-dados { color: #9fb2d8; }

.reduz .frente { animation: none; }