html,body{margin:0;padding:0}img{max-width:100%}[hidden]{display:none!important}
/* Layout: faixas de largura total alternando o modo escuro (azul-marinho) e o modo claro (branco lilás) do próprio app.
   Cada função = texto + composição de painéis de vidro com movimento. É o desenho da página antiga, refeito sem remendos:
   celulares de verdade (iPhone 15 Pro em 3D com as telas reais), poucos laços ao mesmo tempo, tudo parado fora da tela. */
:root{
  --navy:#081224;
  --navy-2:#0f2147;
  --fg-d:#eef2f9;
  --muted-d:#97a7c3;
  --line-d:rgba(190,210,245,.16);
  --paper:#f4f5fb;
  --paper-2:#e9e8f6;
  --ink:#0d1a36;
  --muted-l:#5d6a85;
  --line-l:rgba(30,50,100,.10);
  --blue:#8fb2e8;
  --blue-deep:#2f5fb3;
  --gelo:#dbe7fb;
  --gold:var(--gelo); /* nome antigo: é azul gelo, não ouro */
  --f-display:"Wix Madefor Display", "SF Pro Display", -apple-system, "Segoe UI", sans-serif;
  --f-body:"Wix Madefor Text", -apple-system, "Segoe UI", Roboto, sans-serif;
  /* movimento */
  --ease:cubic-bezier(.2,.7,.2,1);          /* a curva antiga: só no que ficou igual (menu, planos) */
  --e-out:cubic-bezier(.16,1,.3,1);         /* entradas e assentamentos */
  --e-suave:cubic-bezier(.22,.61,.36,1);    /* estados, toques, trocas */
  --e-respira:cubic-bezier(.37,0,.63,1);    /* laços senoidais */
  --e-ios:cubic-bezier(.32,.72,0,1);        /* navegação entre telas do iPhone */
  --e-vaivem:cubic-bezier(.65,0,.35,1);     /* ida e volta longas */
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--navy);color:var(--fg-d);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--f-display);text-wrap:balance;margin:0;letter-spacing:-.025em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px, env(safe-area-inset-left, 0px));padding-right:max(20px, env(safe-area-inset-right, 0px))}

/* ---------- faixas ---------- */
.dark{background:var(--navy);color:var(--fg-d);position:relative;overflow:hidden}
.dark.glow{background:radial-gradient(90% 60% at 80% 0%, #17305e 0%, transparent 60%),radial-gradient(70% 60% at 0% 100%, #122a57 0%, transparent 60%),var(--navy)}
.light{background:radial-gradient(70% 60% at 100% 0%, #e2e0f6 0%, transparent 60%),radial-gradient(60% 60% at 0% 100%, #e3ecfb 0%, transparent 60%),var(--paper);color:var(--ink);position:relative;overflow:hidden}
.eyebrow{font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;display:flex;align-items:center;gap:14px;font-weight:600}
.dark .eyebrow{color:var(--muted-d)}
.light .eyebrow{color:#6d7894}
.eyebrow::after{content:"";height:1px;width:80px;background:currentColor;opacity:.35;transform-origin:left}
/* o sobretítulo é um <p> dentro de .copy: não herda o tamanho nem a cor do parágrafo */
.copy>.eyebrow{font-size:11.5px;max-width:none}
.dark .copy>.eyebrow{color:var(--muted-d)}
.light .copy>.eyebrow{color:#6d7894}

/* ---------- cabeçalho ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:30;padding-top:env(safe-area-inset-top, 0px)}
.top::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(8,18,36,.86);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-d);opacity:0;transition:opacity .35s var(--e-suave)}
.top.solid::before{opacity:1}
.top .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:17px;text-decoration:none;color:var(--fg-d)}
.orb{width:30px;height:30px;border-radius:50%;flex:none;display:inline-block;
  background:radial-gradient(circle at 35% 30%, #e3edff 0%, #86a9e6 22%, #3a5fa8 52%, #142a59 82%, #0c1937 100%);
  box-shadow:0 0 18px rgba(120,160,230,.45), inset -3px -4px 8px rgba(0,0,0,.35)}
.top-cta{font-size:13px;font-weight:700;text-decoration:none;padding:9px 18px;border-radius:999px;background:#fff;color:var(--ink);font-family:var(--f-display);transition:translate .25s var(--e-suave)}
@media (hover:hover){.top-cta:hover{translate:0 -2px}}
.hdr-r{display:flex;align-items:center;gap:10px}
.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;border:1px solid rgba(200,220,255,.28);background:rgba(160,190,240,.1);color:#fff;font:700 13px var(--f-display);cursor:pointer}
.lang-btn svg{width:16px;height:16px}
.lang-btn .car{font-size:9px;opacity:.7;transition:transform .25s var(--ease)}
.lang.open .car{transform:rotate(180deg)}
.lang-menu{position:absolute;right:0;top:44px;min-width:170px;padding:6px;border-radius:18px;display:grid;gap:2px;transform-origin:top right;
  background:linear-gradient(180deg,rgba(32,52,92,.96),rgba(14,28,58,.97));border:1px solid rgba(200,220,255,.22);box-shadow:0 24px 50px -10px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97);pointer-events:none;transition:opacity .2s, transform .25s var(--ease), visibility 0s .25s}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.lang-menu button{display:flex;align-items:center;gap:10px;padding:10px 12px;border:0;border-radius:12px;background:transparent;color:#e6edf8;font:600 14px var(--f-body);cursor:pointer;text-align:left}
.lang-menu button b{font:800 11px var(--f-display);letter-spacing:.08em;width:24px;color:var(--blue)}
.lang-menu button:hover,.lang-menu button[aria-checked="true"]{background:rgba(160,190,240,.14)}
.lang-menu button[aria-checked="true"]::after{content:"✓";margin-left:auto;color:var(--gelo)}
main{transition:opacity .35s}
body.switching main{opacity:.25;transition:opacity .18s}
@media (max-width:420px){.brand{font-size:15px;gap:8px}.brand .orb{width:26px;height:26px}.lang-btn{padding:0 10px}.lang-btn .car{display:none}.top-cta{padding:9px 14px}.hdr-r{gap:6px}}

/* ---------- botões (sem brilho varrendo) ---------- */
.cta{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:17px;padding:15px 28px 15px 20px;border-radius:999px;position:relative}
.cta:not(.rv){transition:translate .3s var(--e-suave)}
.cta svg{width:22px;height:22px;flex:none}
.cta small{display:block;font-family:var(--f-body);font-weight:500;font-size:11px;opacity:.65}
.cta.w{background:linear-gradient(180deg,#fff,#dfe7f5);color:var(--ink);box-shadow:0 12px 34px rgba(120,160,230,.3)}
@media (hover:hover){.cta:hover{translate:0 -2px}}
.cta:active{translate:0 1px;transition-duration:.1s}
.ghost{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:999px;border:1px solid var(--line-d);background:rgba(160,190,240,.06);text-decoration:none;font-weight:600;font-size:14px;color:var(--muted-d)}
.ghost svg{width:18px;height:18px}
.ghost em{font-style:normal;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gelo)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}

/* ---------- seções de função (comum) ---------- */
.feat{padding-block:100px;display:grid;gap:56px;align-items:center}
@media (min-width:900px){.feat{grid-template-columns:.9fr 1.1fr;gap:70px}.feat.flip .comp{order:-1}.feat.flip{grid-template-columns:1.1fr .9fr}}
.copy{display:grid;gap:18px;min-width:0}
.copy h2{font-size:clamp(32px,7vw,50px);line-height:1.04;font-weight:800}
.copy>p{font-size:17.5px;max-width:31em}
.dark .copy>p{color:#bccadf}
.light .copy>p{color:var(--muted-l)}
.points{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:12px}
.points li{display:grid;grid-template-columns:24px 1fr;gap:12px;font-size:15.5px}
.points svg{width:20px;height:20px;margin-top:2px}
.dark .points svg{color:var(--blue)}
.light .points svg{color:var(--blue-deep)}
.comp{position:relative;min-width:0;min-height:460px;display:grid;place-items:center}
/* manchas de cor paradas: o mesmo disco borrado de antes, desenhado como degradê (sem filtro, sem laço) */
.blob{position:absolute;border-radius:50%;pointer-events:none}
.glass{border-radius:28px;padding:22px;position:relative;z-index:2}
.dark .glass{background:linear-gradient(180deg,rgba(160,190,240,.16),rgba(160,190,240,.05));border:1px solid rgba(200,220,255,.2);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12)}
.light .glass{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.6));border:1px solid rgba(255,255,255,.95);
  box-shadow:0 40px 80px -30px rgba(25,40,90,.3), 0 2px 6px rgba(25,40,90,.05), inset 0 1px 0 #fff}
.g-main{width:min(400px,100%)}
.g-side{position:absolute;width:240px;z-index:3}
.small-lbl{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:600}
.dark .small-lbl{color:#93a3bf}
.light .small-lbl{color:#7a86a0}
.ref-pill{display:inline-block;font-size:10px;letter-spacing:.2em;padding:5px 11px;border-radius:999px;font-weight:700}
.dark .ref-pill{background:rgba(190,210,245,.12);color:#c5d2e6}
.light .ref-pill{background:#eef1f8;color:#4a5878}
.sec-head{display:grid;gap:14px;max-width:42em;padding-top:100px}
.sec-head h2{font-size:clamp(32px,7vw,50px);line-height:1.04;font-weight:800}
@media (max-width:640px){
  .feat{padding-block:56px;gap:22px}
  .sec-head{padding-top:56px}
  .comp{min-height:0;display:flex;flex-direction:column;align-items:center;gap:14px}
  .g-side{position:relative;inset:auto;width:min(320px,94%);margin-top:-10px}
}

/* ---------- o orbe (mesmo desenho em todo lugar; respira devagar, o brilho é uma camada que só muda opacidade) ---------- */
.orbwrap{position:relative;width:200px;height:200px;display:grid;place-items:center}
.orbwrap::before{content:"";position:absolute;inset:-10%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle, rgba(140,175,245,.45) 0%, rgba(140,175,245,.18) 38%, rgba(140,175,245,0) 66%);
  opacity:.45;animation:orbe-brilho 5.6s var(--e-respira) infinite}
.big-orb{width:150px;height:150px;border-radius:50%;position:relative;z-index:2;
  background:radial-gradient(circle at 34% 28%, #eef4ff 0%, #8db0ea 20%, #3a5fa8 50%, #142a59 80%, #0c1937 100%);
  box-shadow:0 0 80px rgba(120,160,235,.6), inset -12px -16px 30px rgba(0,0,0,.45);animation:orbe-respira 5.6s var(--e-respira) infinite}
.ring{position:absolute;inset:25px;border-radius:50%;border:1.5px solid rgba(143,178,232,.55);opacity:0;z-index:1;animation:orbe-onda 4.8s var(--e-suave) infinite}
.ring:nth-child(2){animation-delay:-1.6s}.ring:nth-child(3){animation-delay:-3.2s}
@keyframes orbe-brilho{0%,100%{opacity:.45}50%{opacity:.9}}
@keyframes orbe-respira{50%{transform:scale(1.035)}}
@keyframes orbe-onda{0%{transform:scale(.82);opacity:0}12%{opacity:.7}100%{transform:scale(1.8);opacity:0}}

/* ---------- laços: só existem com a seção na tela (base.js põe .na-tela nas [data-loop]) ----------
   Fora da tela a animação é RETIRADA (animation-name:none), não pausada: uma animação despausada fica presa no
   main thread do navegador; uma que recomeça do zero vai para a GPU e não custa nada por quadro. */
[data-loop]:not(.na-tela) .loop,[data-loop]:not(.na-tela) .loop::before,[data-loop]:not(.na-tela) .loop::after,
[data-loop]:not(.na-tela) .orbwrap::before,[data-loop]:not(.na-tela) .big-orb,[data-loop]:not(.na-tela) .ring,
.aba-oculta .loop,.aba-oculta .orbwrap::before,.aba-oculta .big-orb,.aba-oculta .ring{animation-name:none!important}

/* ---------- revelar ao rolar: só o que está abaixo da dobra é armado ---------- */
.rv{transition:opacity .8s var(--e-out) var(--rv-delay,0ms), transform .8s var(--e-out) var(--rv-delay,0ms), translate .3s var(--e-suave)}
.rv[data-par]{transition:opacity .8s var(--e-out) var(--rv-delay,0ms), transform .8s var(--e-out) var(--rv-delay,0ms)}
/* entrada com desfoque de movimento: chega borrada e assenta nítida. O desfoque é uma animação de uma vez, na
   chegada; antes dela não há filtro nenhum parado (filtro parado em elemento escondido fazia o navegador trabalhar a cada quadro) */
.mov .rv:not(.in),.rv.armed{opacity:0;transform:translate3d(0,24px,0)}
.mov .rv.in:not(.glass){animation:v3-foco .62s var(--e-out) var(--rv-delay,0ms) backwards}
.mov .glass.rv.in>*{animation:v3-foco .62s var(--e-out) var(--rv-delay,0ms) backwards}
@keyframes v3-foco{from{filter:blur(7px)}to{filter:blur(0)}}
.mov .rv.l:not(.in),.rv.armed.l{transform:translate3d(-24px,0,0)}
.mov .rv.r:not(.in),.rv.armed.r{transform:translate3d(24px,0,0)}
.mov .rv.s:not(.in),.rv.armed.s{transform:translate3d(0,16px,0) scale(.97)}
.sec-head .eyebrow::after{transition:transform .9s var(--e-out) .15s}
.sec-head.armed .eyebrow::after,.mov .sec-head:not(.in) .eyebrow::after{transform:scaleX(0)}

/* ---------- rodapé e barra fixa do celular ---------- */
footer{border-top:1px solid var(--line-d);background:var(--navy)}
footer .wrap{padding-block:26px 120px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:13px;color:#64748f}
@media (min-width:900px){footer .wrap{padding-bottom:48px}}
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px max(14px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  transform:translateY(120%);opacity:0;transition:transform .32s var(--e-suave), opacity .32s var(--e-suave)}
.sticky.show{transform:none;opacity:1;transition:transform .52s var(--e-out), opacity .52s var(--e-out);animation:sticky-entra .52s var(--e-out)}
@keyframes sticky-entra{from{filter:blur(6px)}to{filter:blur(0)}}
.sticky a{display:flex;align-items:center;gap:12px;max-width:520px;margin:0 auto;padding:10px 10px 10px 14px;border-radius:999px;text-decoration:none;color:#fff;
  background:linear-gradient(180deg,rgba(40,60,100,.92),rgba(16,30,60,.95));border:1px solid rgba(190,210,245,.25);box-shadow:0 14px 34px rgba(0,0,0,.45);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.sticky .t{flex:1;min-width:0;font-size:13px;line-height:1.25}
.sticky .t b{display:block;font-family:var(--f-display);font-size:14px}
.sticky .t span{color:#a9b9d6}
.sticky .go{background:#fff;color:var(--ink);font-family:var(--f-display);font-weight:700;padding:10px 18px;border-radius:999px;font-size:14px}
@media (min-width:900px){.sticky{display:none}}

/* ---------- movimento reduzido: a página parada já é a página pronta ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .loop,.loop::before,.loop::after,.orbwrap::before,.big-orb,.ring{animation:none!important}
  .ring:nth-child(1){transform:scale(1.15);opacity:.4}
  .ring:nth-child(2){transform:scale(1.45);opacity:.18}
  .rv,.sticky,.top::before,.lang-menu,.cta{transition-duration:.15s!important;transition-delay:0s!important}
  .rv,.rv>*,.sticky{filter:none!important;animation:none!important}
}

/* Fone: um iPhone 15 Pro em titânio, montado em 3D com CSS.
   Todas as medidas estão nas unidades do desenho original (corpo de 426,2 x 885,2; espessura 49, cerca de 11,5% da largura).
   --u é quanto vale uma unidade em px; mude só --w (largura do aparelho) e tudo acompanha. */

.fone {
  --w: 300px;
  --u: calc(var(--w) / 426.2);
  position: relative;
  width: var(--w);
  aspect-ratio: 426.2 / 885.2;
  flex: none;
  -webkit-tap-highlight-color: transparent;
}
.fone-sombra, .fone-flutua, .fone-giro { position: absolute; inset: 0; pointer-events: none; }

/* sombra no fundo: textura borrada pintada uma vez; o ângulo só mexe na transformação */
.fone-sombra i {
  position: absolute; left: 50%; top: 50%;
  background-size: 100% 100%; background-repeat: no-repeat;
  transform-origin: 50% 50%; will-change: transform;
}

/* flutuar: 2 a 3 px, devagar, no compositor; a sombra respira junto */
.fone.vive .fone-flutua { animation: fone-flutua 7.4s ease-in-out infinite; }
.fone.vive .fone-sombra { animation: fone-sombra 7.4s ease-in-out infinite; }
.fone.fora .fone-flutua, .fone.fora .fone-sombra { animation-name: none; }
@keyframes fone-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--u) * -3.6)); } }
@keyframes fone-sombra { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .9; transform: scale(1.012); } }

.fone-giro {
  transform-style: preserve-3d;
  transform: perspective(calc(var(--w) * 4.6)) rotateY(-16deg) rotateX(8deg);
}

/* faixa lateral, botões e costas: planos de verdade no espaço */
.fone-f, .fone-b {
  position: absolute; left: 50%; top: 50%;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background-color: #8f939a;
}
.fone-b { border-radius: calc(var(--u) * 1.2); }
.fone-costas {
  position: absolute; inset: 0;
  border-radius: calc(var(--u) * 71.6);
  background: #2c2e32;
  transform: translateZ(calc(var(--u) * -24.5)) rotateY(180deg);
}

/* frente: aro de titânio, vidro preto, tela, ilha, vidro por cima */
.fone-frente {
  position: absolute; inset: 0;
  border-radius: calc(var(--u) * 71.6);
  transform: translateZ(calc(var(--u) * 24.5));
}
.fone-aro {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(90deg, #46494e 0, #b9bdc3 1.2%, #8c9198 3%, #979ba1 50%, #878c93 97%, #b4b8be 98.8%, #404348 100%);
  box-shadow: inset 0 0 0 calc(var(--u) * .8) rgba(255, 255, 255, .16);
}
.fone-aro::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, .04) 1.2%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, .18) 98.8%, rgba(0, 0, 0, .45) 100%);
}
.fone-luz { position: absolute; inset: 0; border-radius: inherit; opacity: 0; z-index: 1; }
.fone-luz.t { background: linear-gradient(to bottom, rgba(255, 255, 255, .95), rgba(255, 255, 255, .25) .5%, rgba(255, 255, 255, 0) 1.1%); }
.fone-luz.b { background: linear-gradient(to top, rgba(255, 255, 255, .95), rgba(255, 255, 255, .25) .5%, rgba(255, 255, 255, 0) 1.1%); }
.fone-luz.l { background: linear-gradient(to right, rgba(255, 255, 255, .95), rgba(255, 255, 255, .25) 1%, rgba(255, 255, 255, 0) 2.2%); }
.fone-luz.r { background: linear-gradient(to left, rgba(255, 255, 255, .95), rgba(255, 255, 255, .25) 1%, rgba(255, 255, 255, 0) 2.2%); }
.fone-luz.e { background: #0b0c0e; }
.fone-ant { position: absolute; background: #3a3c40; opacity: .85; z-index: 2; }

.fone-bisel {
  position: absolute; inset: calc(var(--u) * 7.2);
  border-radius: calc(var(--u) * 64.4);
  background: #050506;
  box-shadow: inset 0 0 0 calc(var(--u) * 1) #1c1d1f, inset 0 0 0 calc(var(--u) * 2.2) rgba(255, 255, 255, .045);
}

.fone-tela {
  position: absolute;
  left: calc(var(--u) * 16.6); top: calc(var(--u) * 16.6);
  width: calc(var(--u) * 393); height: calc(var(--u) * 852);
  border-radius: calc(var(--u) * 55);
  overflow: hidden; background: #000; isolation: isolate;
}
.fone-cena { position: absolute; inset: 0; display: none; }
.fone-cena.on { display: block; }
.fone-cap { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; }
.fone-abas { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; display: block; z-index: 2; }
.fone-veu { position: absolute; left: 0; right: 0; top: 0; height: 9.6%; opacity: 0; z-index: 1; }
.fone-escuro { position: absolute; inset: 0; opacity: 0; z-index: 3; background: #000; }
.fone-cena.mascara {
  -webkit-mask-image: linear-gradient(to bottom, transparent 10.4%, #000 10.85%);
  mask-image: linear-gradient(to bottom, transparent 10.4%, #000 10.85%);
}
.fone-cena.empurra { box-shadow: calc(var(--u) * -6) 0 calc(var(--u) * 26) rgba(0, 0, 0, .38); }

.fone-barras { position: absolute; left: 0; right: 0; top: 0; z-index: 5; }
.fone-barras img { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; opacity: 0; }
.fone-barras img.on { opacity: 1; }

/* o toque: um dedo discreto, como o indicador de toques do iOS */
.fone-dedo { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.fone-dedo i {
  position: absolute; width: 13%; aspect-ratio: 1; border-radius: 50%;
  opacity: 0; transform: translate(-50%, -50%);
  background: radial-gradient(circle closest-side, rgba(150, 157, 172, .62) 0, rgba(150, 157, 172, .5) 70%, rgba(150, 157, 172, .34) 92%, rgba(150, 157, 172, .2) 100%);
  box-shadow: inset 0 0 0 calc(var(--u) * 1.4) rgba(255, 255, 255, .34), 0 0 0 calc(var(--u) * 1) rgba(20, 28, 48, .18);
}

.fone-ilha {
  position: absolute;
  left: calc(var(--u) * 150.1); top: calc(var(--u) * 27.6);
  width: calc(var(--u) * 126); height: calc(var(--u) * 37.33);
  border-radius: calc(var(--u) * 18.67);
  background: #000; z-index: 3;
}
.fone-lente {
  position: absolute;
  left: calc(var(--u) * 101.3); top: calc(var(--u) * 12.47);
  width: calc(var(--u) * 12.4); height: calc(var(--u) * 12.4); border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #2a3350 0, #0c0f1a 32%, #050608 70%);
}
.fone-lente::after {
  content: ""; position: absolute; left: 28%; top: 21%; width: 18%; height: 18%; border-radius: 50%;
  background: #7f93c9; opacity: .5;
}
.fone-mic {
  position: absolute; left: calc(var(--u) * 81.7); top: calc(var(--u) * 16.17);
  width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: 50%;
  background: #ff9f0a; opacity: 0; transition: opacity .3s;
}
.fone[data-mic] .fone-mic { opacity: 1; }
.fone-inicio {
  position: absolute; left: calc(var(--u) * 146.1); top: calc(var(--u) * 855.8);
  width: calc(var(--u) * 134); height: calc(var(--u) * 5); border-radius: calc(var(--u) * 2.5);
  background: #fff; opacity: .9; z-index: 3;
}

/* vidro: o reflexo do ambiente desliza conforme o ângulo; nunca sozinho */
.fone-vidro {
  position: absolute; inset: calc(var(--u) * 7.2);
  border-radius: calc(var(--u) * 64.4);
  overflow: hidden; z-index: 4; pointer-events: none;
}
.fone-reflexo {
  position: absolute; left: -70%; top: -70%; width: 240%; height: 240%;
  will-change: transform, opacity;
  background:
    linear-gradient(116deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, .105) 47.8%, rgba(255, 255, 255, .045) 50.5%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(40% 30% at 38% 36%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 70%);
}

/* plano (vários aparelhos na tela): o reflexo fica parado, sem camada própria; as faces da faixa têm pontas redondas */
.fone.plano .fone-reflexo { will-change: auto; }

/* fundo claro: sombra azul-marinho e menos densa */
.fone[data-fundo="claro"] .fone-luz.e { background: #17191d; }

@media (prefers-reduced-motion: reduce) {
  .fone.vive .fone-flutua, .fone.vive .fone-sombra { animation: none; }
}

/* tela apagada (não existe captura real da tela de bloqueio): vidro preto, sem barra, sem indicador de início */
.fone.apagado .fone-tela { background: #030406; }
.fone.apagado .fone-tela::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .04) 26%, rgba(255, 255, 255, 0) 44%), radial-gradient(120% 60% at 80% 110%, rgba(120, 150, 210, .10), rgba(120, 150, 210, 0) 60%); }
.fone.apagado .fone-inicio, .fone.apagado .fone-barras { opacity: 0; }

/* ===== topo ===== */
/* TOPO: herói (texto, palco com o iPhone 15 Pro, chave sol/lua, selos), "Zero religiosidade" e a faixa de situações.
   O desenho é o da página antiga com os remendos já resolvidos; o movimento é novo: poucos laços, tudo pausa fora da tela. */

/* ---------- herói: texto ---------- */
.hero{padding-block:110px 70px;display:grid;gap:40px;align-items:center}
.hero>div{min-width:0}
@media (min-width:900px){.hero{grid-template-columns:1.05fr .95fr;padding-block:130px 90px}}
.hero .badge{display:inline-flex;align-items:center;gap:12px;padding:9px 18px 9px 9px;border-radius:999px;font-size:clamp(14px,3.6vw,17px);font-weight:600;
  background:rgba(255,255,255,.07);border:1px solid rgba(143,178,232,.55);color:#f2f6fc;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.hero .badge b{background:#fff;color:#0d1a36;font-size:11px;letter-spacing:.14em;padding:6px 10px;border-radius:999px;white-space:nowrap}
.hero h1{font-size:clamp(42px,10.5vw,76px);line-height:1;font-weight:800;margin-top:22px}
/* o degradê parado no quadro 0 do brilho antigo (sem faixa correndo) */
.hero h1 .gr{background:linear-gradient(90deg,#fff 0%,#a9c4f0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .rotator{font-family:var(--f-display);font-size:clamp(20px,4.6vw,26px);font-weight:600;margin-top:20px;color:#c3cfe2;display:flex;flex-wrap:wrap;gap:0 .35em;align-items:baseline}
/* a palavra que gira: as cinco empilhadas na mesma célula (a largura é a da maior, nada pula) */
.hero .rot{display:inline-grid;height:1.3em;overflow:hidden;color:#fff}
.hero .rot span{grid-area:1/1;white-space:nowrap;line-height:1.25;opacity:0;transform:translateY(.55em)}
.hero .rot span.on{opacity:1;transform:none;
  transition:opacity .64s var(--e-out) .12s,transform .64s var(--e-out) .12s;animation:v3-foco-leve .5s var(--e-out) .12s backwards}
.hero .rot span.out{opacity:0;transform:translateY(-.45em);
  transition:opacity .42s var(--e-suave),transform .42s var(--e-suave);animation:v3-desfoca .42s var(--e-suave) forwards}
@keyframes v3-foco-leve{from{filter:blur(3px)}to{filter:blur(0)}}
@keyframes v3-desfoca{to{filter:blur(3px)}}
.hero .lede{font-size:17px;color:#b3c1d7;max-width:31em;margin-top:16px}
.hero .cta-row{margin-top:28px}

/* entrada do texto no carregamento: 20 px, desfoque curto só no começo (a base põe .in em cascata pelo data-d) */
.hero .rv{transition:opacity .85s var(--e-out) var(--rv-delay,0ms),transform .85s var(--e-out) var(--rv-delay,0ms)}
.mov .hero .rv:not(.in){transform:translate3d(0,20px,0)}

/* faixa de confiança: vidro com os nove destaques correndo (36 px/s; a duração sai da largura, no JS) */
.hero .info-strip{margin-top:24px;max-width:100%;border-radius:999px;overflow:hidden;position:relative;padding:10px 0;
  background:rgba(255,255,255,.06);border:1px solid rgba(143,178,232,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 30px -14px rgba(0,0,0,.5);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.hero .is-track{display:flex;gap:26px;width:max-content;padding-left:26px}
.hero .is-track.loop{animation:topo-corre var(--dur,43s) linear infinite;will-change:transform}
.hero .is-track span{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:#e6eefb;white-space:nowrap}
.hero .is-track span i{flex:none;width:6px;height:6px;border-radius:50%;background:#8fb2e8;box-shadow:0 0 8px #8fb2e8}
.hero .info-strip.fora .loop{animation-name:none}
.hero .info-strip:focus-within .loop{animation-play-state:paused}
@media (hover:hover){.hero .info-strip:hover .loop{animation-play-state:paused}}
@keyframes topo-corre{to{transform:translate3d(-50%,0,0)}}

/* ---------- herói: palco ---------- */
.stage-hero{position:relative;display:flex;justify-content:center;align-items:center;perspective:1400px;min-height:560px}
.stage-hero .halo{position:absolute;width:520px;height:520px;max-width:120%;left:50%;top:50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(110,150,225,.4),transparent 62%);
  translate:-50% -50%;scale:1.06;opacity:.88;transition:opacity .6s var(--e-suave),scale .6s var(--e-suave)}
/* a tela clara acende: o halo clareia junto */
.stage-hero.lt .halo{opacity:1;scale:1.1}
.stage-hero .ph-entra{position:relative;display:flex;justify-content:center}
/* o iPhone 15 Pro (fone.js): 300 px no computador */
.stage-hero .fone-heroi{--w:min(300px,78vw)}
@media (min-width:641px){.stage-hero .fone-heroi{rotate:1deg}}
/* o aparelho do herói não boia: a vida vem da tela real e dos selos (o laço do palco é a coreografia) */
.stage-hero .fone.vive .fone-flutua,.stage-hero .fone.vive .fone-sombra{animation:none}
/* véu do topo nas telas que rolam: o mesmo degradê horizontal do fundo real (medido nas capturas), sumindo para baixo */
.stage-hero .fone-cena[data-tela="hoje-claro"] .fone-veu,.stage-hero .fone-cena[data-tela="hoje-feita"] .fone-veu{
  -webkit-mask-image:linear-gradient(#000 0,#000 62%,transparent 100%);mask-image:linear-gradient(#000 0,#000 62%,transparent 100%)}
.stage-hero .fone-cena[data-tela="hoje-claro"] .fone-veu{
  background:linear-gradient(90deg,#e9f1fa 0%,#e8f0fb 16.5%,#ecf2fb 33%,#f0f5fd 49.6%,#f5f8fe 66%,#fafcfe 82.7%,#fff 100%)!important}
.stage-hero .fone-cena[data-tela="hoje-feita"] .fone-veu{
  background:linear-gradient(90deg,#182b5b 0%,#192c5f 16.5%,#182b5b 33%,#162854 49.6%,#15264e 66%,#122346 82.7%,#101f3f 100%)!important}
/* indicador de início: escuro sobre a tela clara (camada própria, só opacidade) */
.stage-hero .fone-inicio::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#0b0d12;opacity:0;transition:opacity .6s var(--e-suave)}
.stage-hero.lt .fone-inicio::after{opacity:1}

/* chave sol/lua (a do desenho antigo; o fundo claro e os ícones trocam só por opacidade) */
.stage-hero .theme-tg{position:absolute;z-index:9;top:2%;right:6%;width:92px;height:44px;border-radius:999px;border:1px solid rgba(200,220,255,.28);cursor:pointer;padding:0;overflow:hidden;
  background:linear-gradient(180deg,#2e4470,#18294b);
  box-shadow:0 14px 30px -10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.15);-webkit-tap-highlight-color:transparent}
.stage-hero .theme-tg::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(235,240,250,.75),rgba(205,215,235,.7));opacity:0;transition:opacity .5s var(--e-suave)}
.stage-hero .theme-tg[aria-pressed="false"]::before{opacity:1}
.stage-hero .theme-tg .knob{position:absolute;z-index:1;top:4px;left:4px;width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,#fff,#dfe7f5);
  box-shadow:0 4px 10px rgba(0,0,0,.35);transition:transform .5s var(--e-suave)}
.stage-hero .theme-tg[aria-pressed="true"] .knob{transform:translateX(48px)}
.stage-hero .theme-tg svg{position:absolute;z-index:2;top:12px;width:18px;height:18px;transition:opacity .4s var(--e-suave)}
.stage-hero .theme-tg .ic-sun{left:12px;color:#8a95ad}
.stage-hero .theme-tg .ic-sun.aceso{color:#2f5fb3;opacity:0}
.stage-hero .theme-tg[aria-pressed="false"] .ic-sun.aceso{opacity:1}
.stage-hero .theme-tg[aria-pressed="false"] .ic-sun:not(.aceso){opacity:0}
.stage-hero .theme-tg .ic-moon{right:12px;color:#0d1a36}
.stage-hero .theme-tg .ic-moon.apagada{color:#c9d5ea;opacity:0}
.stage-hero .theme-tg[aria-pressed="false"] .ic-moon.apagada{opacity:1}
.stage-hero .theme-tg[aria-pressed="false"] .ic-moon:not(.apagada){opacity:0}

/* selos de vidro: o invólucro leva a paralaxe (translate, no JS); o cartão leva a entrada e o "acender" */
.stage-hero .chipf{position:absolute;z-index:8}
.stage-hero .chip{position:relative;display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:18px;font-size:13px;font-weight:600;white-space:nowrap;
  background:linear-gradient(180deg,#2b4271,#142647);border:1px solid rgba(200,220,255,.25);
  box-shadow:0 20px 40px -10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.15)}
.stage-hero .chip small{display:block;font-weight:500;font-size:11px;color:var(--muted-d)}
.stage-hero .chip .ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(143,178,232,.2);color:#cfe0ff;flex:none}
.stage-hero .chip .ic svg{width:17px;height:17px}
.stage-hero .chip .orb{width:32px;height:32px}
.stage-hero .c3 .ic{background:rgba(143,178,232,.22);color:var(--gelo)}
/* acender: uma borda clara que aparece e some uma vez, junto com a subida de 6 px (nada em laço) */
.stage-hero .chip::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;border:1px solid rgba(190,212,250,.6);
  box-shadow:0 0 24px -6px rgba(143,178,232,.55),inset 0 0 14px -6px rgba(170,198,245,.45);opacity:0;transition:opacity .7s var(--e-suave)}
.stage-hero .chip.aceso::after{opacity:1;transition-duration:.35s}
.stage-hero .c1{left:-4%;top:18%}
.stage-hero .c2{right:-4%;top:46%}
.stage-hero .c3{left:2%;bottom:10%}

/* entrada do palco: só com html.mov; o JS põe .entrou quando o palco aparece (computador: no carregamento) */
.mov .stage-hero:not(.entrou) .halo,.mov .stage-hero:not(.entrou) .ph-entra,
.mov .stage-hero:not(.entrou) .theme-tg,.mov .stage-hero:not(.entrou) .chip{visibility:hidden}
.stage-hero.entrou .halo{animation:topo-surge .9s var(--e-suave) .1s backwards}
.stage-hero.entrou .ph-entra{animation:topo-fone-entra .9s var(--e-out) .18s backwards}
.stage-hero.entrou .theme-tg{animation:topo-chave-entra .6s var(--e-out) .64s backwards}
.stage-hero.entrou .chip{animation:topo-selo-entra .7s var(--e-out) .76s backwards}
.stage-hero.entrou .c2 .chip{animation-delay:.88s}
.stage-hero.entrou .c3 .chip{animation-delay:1s}
@keyframes topo-surge{from{opacity:0}}
@keyframes topo-fone-entra{from{opacity:0;transform:translateY(40px) rotateY(-12deg)}}
@keyframes topo-chave-entra{from{opacity:0;transform:translateY(-8px)}}
@keyframes topo-selo-entra{0%{opacity:0;transform:translateY(10px) scale(.94);filter:blur(4px)}45%{filter:blur(0)}}

/* ---------- zero religiosidade ---------- */
.zero{background:#fff;color:var(--ink);border-top:1px solid var(--line-l)}
.zero .wrap{padding-block:44px;display:grid;justify-items:center;text-align:center}
.zero p{max-width:36em;font-size:clamp(17px,2.4vw,20px);line-height:1.55;color:var(--muted-l)}
.zero p b{color:var(--ink)}

/* ---------- faixa de situações: duas fileiras em sentidos opostos (34 e 30 px/s) ---------- */
.marquee{padding-block:26px;display:grid;gap:12px;overflow:hidden;background:#fff;color:var(--ink);border-block:1px solid var(--line-l)}
.marquee .mq-faixa{min-width:0}
.mov .marquee .mq-faixa.r:not(.in){transform:translate3d(48px,0,0)}
.mov .marquee .mq-faixa.l:not(.in){transform:translate3d(-48px,0,0)}
.marquee .mq-row{display:flex;width:max-content}
.marquee .mq-row.loop{animation:topo-corre var(--dur,54s) linear infinite;will-change:transform}
.marquee .mq-row.rev.loop{animation-direction:reverse}
/* margem em cada pílula (não gap): -50% cai exatamente no começo da cópia, sem pulo na costura */
.marquee .mq-row span{flex:none;display:inline-flex;align-items:center;gap:8px;margin-right:12px;padding:10px 18px;border-radius:999px;font-weight:600;font-size:15px;white-space:nowrap;
  background:var(--paper);border:1px solid var(--line-l)}
.marquee .mq-row span i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--blue-deep);opacity:.6}
.marquee .mq-row.rev span{background:#0f2147;color:#e7eefb;border-color:#0f2147}
.marquee .mq-row.rev span i{background:var(--gelo);opacity:1}
@media (hover:hover){.marquee .mq-faixa:hover .loop{animation-play-state:paused}}

/* ---------- celular ---------- */
@media (max-width:640px){
  .hero{padding-block:92px 36px;gap:26px}
  .hero .lede{font-size:16px}
  .hero .cta-row{justify-content:center}
  .hero .cta-row .cta{width:100%;justify-content:center}
  .hero .info-strip{margin-top:18px}
  .stage-hero{min-height:0;padding-top:56px}
  .stage-hero .halo{width:340px;height:340px}
  .stage-hero .fone-heroi{--w:240px}
  .stage-hero .theme-tg{top:0;left:0;right:0;margin-inline:auto}
  .stage-hero .chip{font-size:11px;padding:8px 10px;gap:8px;border-radius:14px}
  .stage-hero .chip .ic,.stage-hero .chip .orb{width:26px;height:26px}
  .stage-hero .chip small{font-size:10px}
  .stage-hero .c1{left:-6px;top:30%}
  .stage-hero .c2{right:-6px;top:58%}
  .stage-hero .c3{left:-6px;bottom:6%}
}

/* ---------- movimento reduzido: tudo parado e pronto; as faixas viram roláveis com o dedo ---------- */
@media (prefers-reduced-motion:reduce){
  .hero .rot span{transition:none!important}
  .stage-hero.entrou .halo,.stage-hero.entrou .ph-entra,.stage-hero.entrou .theme-tg,.stage-hero.entrou .chip{animation:none}
  .hero .info-strip,.marquee .mq-faixa{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
  .hero .info-strip::-webkit-scrollbar,.marquee .mq-faixa::-webkit-scrollbar{display:none}
  .hero .is-track{padding-right:26px}
  .hero .is-track .clone,.marquee .mq-row .clone{display:none}
  .hero .is-track span,.marquee .mq-row span{scroll-snap-align:start}
  .stage-hero .halo,.stage-hero .theme-tg::before,.stage-hero .theme-tg .knob,.stage-hero .theme-tg svg,.stage-hero .fone-inicio::after,.stage-hero .chip::after{transition-duration:.15s}
}

/* ===== dentro ===== */
/* Por dentro do app: o carrossel de oito iPhones 15 Pro com as telas reais.
   Mesmas medidas da página antiga (já com todos os remendos aplicados); o movimento é do regente em dentro.js:
   um índice só ("vez"), três laços no máximo (o passo da rolagem, a demonstração da vez, o selo da vez), tudo parado fora da tela. */

.inside .sec-head{padding-top:90px}
.inside .car-wrap{position:relative}
/* coverflow: a vez no centro, de frente; os vizinhos menores, mais fundos e girados para o centro (o giro é do
   próprio iPhone 3D, pela mola, em dentro.js). --d é a distância com sinal ao centro, em passos; --ad, a mesma sem sinal */
.inside{--sw:290px;--cfx:-30px;--cfs:.15}
.inside .scar{position:relative;display:flex;gap:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  padding:34px calc(50% - var(--sw) / 2) 26px;scroll-padding-inline:0}
.inside .scar::-webkit-scrollbar{display:none}
.inside .slide{flex:0 0 auto;width:var(--sw);display:grid;justify-items:center;align-content:start;gap:22px;scroll-snap-align:center;position:relative;cursor:pointer}
.inside .slide.vez{cursor:default}
.inside .sl-stage{position:relative;padding-inline:26px;transform-origin:50% 60%;
  transform:translateX(calc(var(--d, 0) * var(--cfx))) scale(calc(1 - var(--cfs) * var(--ad, 0)));
  opacity:calc(1 - .3 * var(--ad, 0))}
.inside .sl-cap{opacity:calc(1 - 1.25 * var(--ad, 0));transform:translateY(calc(var(--ad, 0) * 10px))}

/* o aparelho: 240 px de largura dá 240 x 498, a mesma altura do aparelho desenhado antigo (230 x 498) */
.inside .sl-fone{--w:240px;width:var(--w);aspect-ratio:426.2/885.2}
/* o aparelho da vez não flutua: no carrossel quem flutua é o selo da vez (orçamento de três laços) */
.inside .fone.vive .fone-flutua,.inside .fone.vive .fone-sombra{animation:none}

/* legenda */
.inside .sl-cap{text-align:center;display:grid;gap:4px;max-width:260px}
.inside .sl-cap h4{font-size:19px;font-weight:700;color:var(--fg-d)}
.inside .sl-cap p{font-size:14px;color:var(--muted-d);line-height:1.4}

/* selos: só o do aparelho da vez aparece (os outros saem de cena e voltam quando ele chega ao centro) */
.inside .chipf{position:absolute;z-index:8;display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:18px;font-size:12px;font-weight:600;white-space:nowrap;color:var(--fg-d);
  background:linear-gradient(180deg,#2b4271,#142647);border:1px solid rgba(200,220,255,.25);
  box-shadow:0 20px 40px -10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.15);
  transition:opacity .5s var(--e-suave), translate .6s var(--e-out)}
.inside .slide:not(.vez) .chipf{opacity:0;translate:0 10px;pointer-events:none}
.mov .inside .slide.vez .chipf{animation:v3-foco .5s var(--e-out) backwards}
.inside .chipf small{display:block;font-weight:500;font-size:10.5px;color:var(--muted-d)}
.inside .chipf .ic{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;background:rgba(143,178,232,.2);color:#cfe0ff}
.inside .chipf .ic.forte{background:rgba(143,178,232,.22);color:#dbe7fb}
.inside .chipf .ic svg{width:15px;height:15px}
.inside .chipf .orb{width:28px;height:28px}
.inside .sl-chip.l{left:-14px;bottom:22%}
.inside .sl-chip.r{right:-14px;top:24%}
.inside .sl-chip.r.low{top:auto;bottom:40%}
.inside .sl-chip.l.hi{bottom:30%}

/* setas */
.inside .car-nav{position:absolute;top:calc(50% - 70px);z-index:10;width:48px;height:48px;border-radius:50%;border:1px solid rgba(200,220,255,.28);cursor:pointer;
  background:linear-gradient(180deg,#2b4271,#16294d);color:#fff;font:400 28px/1 var(--f-display);
  display:grid;place-items:center;padding:1px 6px 4px;
  transition:transform .12s var(--e-suave)}
.inside .car-nav:active{transform:scale(.96)}
.inside .car-nav.prev{left:max(12px, calc((100vw - 1180px) / 2))}
.inside .car-nav.next{right:max(12px, calc((100vw - 1180px) / 2))}
@media (hover:hover){.inside .car-nav:hover{background:linear-gradient(180deg,#355088,#1b3260)}}

/* pontos: andam com a vez (a largura de 8 pontos de 7 px é a única exceção a "só transform e opacity") */
.inside .car-dots{display:flex;justify-content:center;gap:7px;padding:4px 0 56px}
.inside .car-dots i{width:7px;height:7px;border-radius:7px;background:rgba(190,210,245,.3);transition:width .45s var(--e-suave), background-color .45s var(--e-suave)}
.inside .car-dots i.on{width:22px;background:#fff}

/* "Deslize para ver mais telas", só no celular */
.inside .swipe-hint{display:none;text-align:center;font-size:13px;font-weight:600;color:#cfe0ff;margin-top:-30px;padding-bottom:40px;transition:opacity .4s var(--e-suave)}
.inside .swipe-hint span{display:inline-block}
.inside .swipe-hint.gone{opacity:0}

/* entrada dos aparelhos (uma vez, só se a seção estava abaixo da dobra no carregamento) */
.inside.armada .sl-stage{opacity:0;
  transform:translateX(calc(var(--d, 0) * var(--cfx))) translateY(28px) scale(calc(1 - var(--cfs) * var(--ad, 0)))}
.inside.armada.entrou .sl-stage{opacity:calc(1 - .3 * var(--ad, 0));animation:v3-foco .6s var(--e-out) calc(120ms + var(--i, 0) * 70ms) backwards;
  transform:translateX(calc(var(--d, 0) * var(--cfx))) scale(calc(1 - var(--cfs) * var(--ad, 0)));
  transition:opacity .8s var(--e-out) calc(120ms + var(--i, 0) * 70ms), transform .8s var(--e-out) calc(120ms + var(--i, 0) * 70ms)}

/* ---------- sobreposições nas telas reais (coordenadas medidas nas capturas de 786 de largura; 1 cqw = 7,86 unidades) ---------- */
.inside .fone-cena{container-type:inline-size}

/* tela 1, modo claro: o véu do topo acompanha o degradê real do fundo (azul gelo à esquerda, branco à direita) */
.inside .fone-cena[data-tela="hoje-claro"] .fone-veu{height:9.6%;
  background:linear-gradient(90deg,#ebf2fd 0%,#e8f0fb 16%,#ebf2fb 32%,#f0f5fd 47%,#f5f8fe 63%,#f9fbfd 79%,#fefefe 95%,#fff 100%)!important;
  -webkit-mask-image:linear-gradient(#000 0,#000 66%,transparent 100%);mask-image:linear-gradient(#000 0,#000 66%,transparent 100%)}

/* tela 2: o disco vivo é a mesma captura recortada (raio 170 em volta de 392,5 ; 755): em escala 1 some */
.inside .orbe-vivo{position:absolute;left:28.31%;top:34.33%;width:43.26%;aspect-ratio:1;border-radius:50%;z-index:1;pointer-events:none;
  background:url(../img/orbe-falando.webp) no-repeat 49.89% 42.89% / 231.18% auto;
  -webkit-mask-image:radial-gradient(closest-side,#000 82%,transparent 97%);mask-image:radial-gradient(closest-side,#000 82%,transparent 97%)}
.inside .orbe-vivo i{position:absolute;inset:0;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,rgba(205,224,255,.38),rgba(205,224,255,0) 70%)}

/* tela 4: o realce da linha "Briguei com alguém" (x 40 a 746, y 505 a 602) e a resposta real por cima */
.inside .toque{position:absolute;left:5.09%;top:29.64%;width:89.82%;height:5.69%;border-radius:3.56cqw 3.56cqw 0 0;
  background:rgba(255,255,255,.10);opacity:0;z-index:1;pointer-events:none}
.inside .fone-cena .resposta{position:absolute;left:0;top:0;width:100%;height:auto;display:block;opacity:0;z-index:1}

/* tela 7: a gota de luz do story (o grão em 224 ; 523, o rastro de 415 a 522) */
.inside .gota{position:absolute;left:28.50%;top:30.69%;width:.8cqw;height:.8cqw;margin:-.4cqw 0 0 -.4cqw;border-radius:50%;
  background:#f2f6ff;opacity:0;z-index:1;pointer-events:none;
  box-shadow:0 0 0 .13cqw rgba(242,246,255,.35),0 0 1.3cqw .25cqw rgba(191,213,245,.55),0 0 4.3cqw 1cqw rgba(127,163,212,.18)}
.inside .gota i{position:absolute;left:50%;bottom:50%;width:.25cqw;margin-left:-.125cqw;height:6cqw;border-radius:1cqw;
  transform-origin:50% 100%;transform:scaleY(0);
  background:linear-gradient(rgba(191,213,245,0),rgba(191,213,245,.75))}
.inside .clarao{position:absolute;left:28.50%;top:30.69%;width:7cqw;aspect-ratio:1;margin:-3.5cqw 0 0 -3.5cqw;border-radius:50%;opacity:0;z-index:1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(242,246,255,.9),rgba(191,213,245,.35) 40%,rgba(127,163,212,0) 100%)}

/* ---------- celular: telas vizinhas aparecendo nas bordas, apagadas pela distância ao centro (--d, 0 a 1, posto pela rolagem) ---------- */
@media (max-width:640px){
  .inside{--sw:62vw;--cfx:-14px;--cfs:.14}
  .inside .scar{padding:20px calc(50% - var(--sw) / 2) 6px}
  .inside .slide{gap:14px}
  .inside .sl-stage{padding-inline:0}
  .inside .sl-fone{--w:58vw}
  .inside .sl-cap{max-width:62vw}
  .inside .sl-chip.l{left:-18px}
  .inside .sl-chip.r{right:-18px}
  .inside .car-nav{display:none}
  .inside .car-dots{padding-bottom:36px}
  .inside .swipe-hint{display:block}
}

/* movimento reduzido: nada desliza; o foco do celular fica só na opacidade */
@media (prefers-reduced-motion:reduce){
  .inside .sl-stage{transform:none!important}
  .inside .chipf{transition:none}
  .inside .car-nav,.inside .car-dots i,.inside .swipe-hint{transition-duration:.15s}
  .inside.armada .sl-stage{opacity:1;animation:none}
}

/* ===== funcoes ===== */
/* Seções de função: Hoje, O Conselheiro, Conselhos, Trilhas, Comunidade e Mesa, Conquistas.
   O desenho é o da página antiga (medidas e cores iguais). O movimento mora em funcoes.js: uma linha do tempo por seção,
   que só anda com a seção ativa (.ativa, posta pela base). Aqui ficam os estados de repouso e os laços CSS (só com .ativa).
   Todos os seletores começam por .fn / .fn-<seção>. */

/* ---------- revelar: a base dá o sistema; aqui só o deslocamento de cada tipo de bloco ---------- */
.fn .g-main.rv{transition:opacity .85s var(--e-out) var(--rv-delay,0ms),transform .85s var(--e-out) var(--rv-delay,0ms)}
.mov .fn .g-main.rv.s:not(.in){transform:scale(.94)}
.fn .g-side.rv{transition:opacity .8s var(--e-out) var(--rv-delay,0ms),transform .8s var(--e-out) var(--rv-delay,0ms)}
.mov .fn .g-side.rv.l:not(.in){transform:translate3d(-32px,0,0)}
.mov .fn .g-side.rv.r:not(.in){transform:translate3d(32px,0,0)}

/* textos empilhados no mesmo lugar (trocam só por opacidade; todos ficam no DOM e a tradução cuida deles) */
.fn .pilha{display:inline-grid}
.fn .pilha>*{grid-area:1/1}
.fn .pilha>:not(:first-child){opacity:0}

/* manchas paradas: o mesmo disco com desfoque de 40 px de antes, desenhado como degradê (a caixa sobra 100 px de cada lado) */
.fn .blob{margin:-100px}
.fn .blob.b1{width:500px;height:500px;left:5%;top:5%;background:radial-gradient(closest-side,rgba(185,205,243,1) 0%,rgba(185,205,243,.98) 24%,rgba(185,205,243,.91) 36%,rgba(185,205,243,.8) 44%,rgba(185,205,243,.64) 52%,rgba(185,205,243,.45) 60%,rgba(185,205,243,.27) 68%,rgba(185,205,243,.13) 76%,rgba(185,205,243,.05) 84%,rgba(185,205,243,.02) 92%,rgba(185,205,243,0) 100%)}
.fn .blob.b2{width:460px;height:460px;right:0;bottom:0;background:radial-gradient(closest-side,rgba(217,207,243,.99) 0%,rgba(217,207,243,.98) 17.4%,rgba(217,207,243,.9) 30.4%,rgba(217,207,243,.79) 39.1%,rgba(217,207,243,.63) 47.8%,rgba(217,207,243,.44) 56.5%,rgba(217,207,243,.26) 65.2%,rgba(217,207,243,.13) 73.9%,rgba(217,207,243,.05) 82.6%,rgba(217,207,243,.02) 91.3%,rgba(217,207,243,0) 100%)}
.fn .blob.b3{width:520px;height:520px;right:0;top:0;background:radial-gradient(closest-side,rgba(195,212,245,1) 0%,rgba(195,212,245,.98) 26.9%,rgba(195,212,245,.91) 38.5%,rgba(195,212,245,.8) 46.2%,rgba(195,212,245,.64) 53.8%,rgba(195,212,245,.45) 61.5%,rgba(195,212,245,.27) 69.2%,rgba(195,212,245,.13) 76.9%,rgba(195,212,245,.05) 84.6%,rgba(195,212,245,.02) 92.3%,rgba(195,212,245,0) 100%)}
.fn .blob.b4{width:420px;height:420px;left:0;bottom:10%;background:radial-gradient(closest-side,rgba(230,216,243,.98) 0%,rgba(230,216,243,.97) 9.5%,rgba(230,216,243,.89) 23.8%,rgba(230,216,243,.78) 33.3%,rgba(230,216,243,.62) 42.9%,rgba(230,216,243,.43) 52.4%,rgba(230,216,243,.25) 61.9%,rgba(230,216,243,.12) 71.4%,rgba(230,216,243,.05) 81%,rgba(230,216,243,.02) 90.5%,rgba(230,216,243,0) 100%)}
.fn .blob.b5{width:500px;height:500px;left:10%;top:0;background:radial-gradient(closest-side,rgba(191,208,243,1) 0%,rgba(191,208,243,.98) 24%,rgba(191,208,243,.91) 36%,rgba(191,208,243,.8) 44%,rgba(191,208,243,.64) 52%,rgba(191,208,243,.45) 60%,rgba(191,208,243,.27) 68%,rgba(191,208,243,.13) 76%,rgba(191,208,243,.05) 84%,rgba(191,208,243,.02) 92%,rgba(191,208,243,0) 100%)}

/* ---------- Hoje (claro) ---------- */
.fn-hoje .today h3{font-size:22px;line-height:1.2;font-weight:700;margin-top:10px}
.fn-hoje .today .sub{color:var(--muted-l);font-size:14.5px;margin-top:8px}
.fn-hoje .today .hr{height:1px;background:var(--line-l);margin:16px 0}
.fn-hoje .today .act-l{font-size:12px;letter-spacing:.1em;color:var(--blue-deep);font-weight:700}
.fn-hoje .today .act{font-weight:600;font-size:16px;line-height:1.35;margin-top:6px}
.fn-hoje .habit{display:flex;align-items:center;gap:12px;margin-top:16px}
.fn-hoje .habit .sh{width:34px;height:36px;border:1.6px solid var(--blue-deep);border-radius:9px 9px 15px 15px;display:grid;place-items:center;color:var(--blue-deep)}
.fn-hoje .habit .sh svg{width:16px;height:16px}
.fn-hoje .habit .hb{font-size:14.5px}
.fn-hoje .dots{display:flex;gap:4px;margin-top:5px;align-items:center}
.fn-hoje .dots i{position:relative;width:16px;height:5px;border-radius:3px;border:1.2px solid var(--blue-deep)}
.fn-hoje .dots i.f{background:var(--blue-deep)}
.fn-hoje .dots .enche{position:absolute;inset:-1.2px;border-radius:3px;background:var(--blue-deep);transform:scaleX(0);transform-origin:left center}
.fn-hoje .dots em{font-style:normal;font-size:12px;color:var(--muted-l);margin-left:8px}
.fn-hoje .ifiz{margin-top:18px;height:50px;border-radius:999px;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:16px;position:relative;isolation:isolate;
  background:linear-gradient(180deg,#14284f,#0b1834);color:#fff}
.fn-hoje .ifiz .feito{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,#5f8bd4,#2f5fb3);opacity:0}
.fn-hoje .ifiz .pilha{justify-items:center}
.fn-hoje .ifiz .plus{position:absolute;right:20px;top:50%;font-size:14px;color:var(--ink);opacity:0;transform:translateY(-50%)}
.fn-hoje .acts{display:flex;justify-content:space-around;margin-top:14px;font-size:11px;color:var(--muted-l);text-align:center}
.fn-hoje .acts div{display:grid;justify-items:center;gap:3px}
.fn-hoje .acts svg{width:17px;height:17px}
.fn-hoje .semana{padding:16px}
.fn-hoje .sem-top{display:flex;justify-content:space-between;font-size:13px}
.fn-hoje .sem-top .cont{color:var(--muted-l);justify-items:end}
.fn-hoje .week{display:flex;justify-content:space-between;margin-top:12px}
.fn-hoje .week div{display:grid;justify-items:center;gap:6px;font-size:11px;color:var(--muted-l);font-weight:600}
.fn-hoje .week span{width:24px;height:24px;border-radius:50%;border:1.4px solid #c9d1e3;display:grid;place-items:center}
.fn-hoje .week span.f{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
.fn-hoje .week svg{width:13px;height:13px}
/* hoje: o anel, o disco azul e o tique são camadas, para a troca ser só de opacidade e escala */
.fn-hoje .week .hoje{position:relative;border:0;color:#fff}
.fn-hoje .week .hoje i{position:absolute;inset:0;border-radius:50%}
.fn-hoje .week .anel{border:2px solid var(--ink)}
.fn-hoje .week .disco{background:var(--blue-deep);opacity:0;transform:scale(.4)}
.fn-hoje .week .tq{position:relative;opacity:0}
@media (min-width:641px){.fn-hoje .semana{right:-10px;top:-30px}}
/* acima de 900: o cartão da semana sobe e não cobre mais o título do cartão principal (medido na auditoria) */
@media (min-width:900px){.fn-hoje .comp{top:40px}.fn-hoje .semana{top:-84px}}

/* ---------- O Conselheiro (escuro) ---------- */
.fn-voz .voice-comp{display:grid;justify-items:center;gap:22px;width:min(420px,100%)}
/* o orbe respira pela base; aqui ele só anda com a seção ativa */
.fn-voz:not(.ativa) .big-orb,.fn-voz:not(.ativa) .orbwrap::before{animation-name:none}
/* os anéis deixam de pulsar sozinhos: o 1º é o fio de luz colado no orbe (acende ao falar), os outros dois saem a cada fala */
.fn-voz .ring{animation:none;opacity:0}
.fn-voz .ring.fio{inset:21px;border-color:#cfe0ff;box-shadow:0 0 14px rgba(160,195,245,.55)}
.fn-voz .wave{display:flex;gap:4px;align-items:center;height:30px}
.fn-voz .wave i{width:4px;height:28px;border-radius:3px;background:#a9c4f0;transform:scaleY(var(--r,.3))}
.fn-voz .wave i:nth-child(1){--r:.25}.fn-voz .wave i:nth-child(2){--r:.45}.fn-voz .wave i:nth-child(3){--r:.3}.fn-voz .wave i:nth-child(4){--r:.6}
.fn-voz .wave i:nth-child(5){--r:.35}.fn-voz .wave i:nth-child(6){--r:.5}.fn-voz .wave i:nth-child(7){--r:.3}.fn-voz .wave i:nth-child(8){--r:.7}
.fn-voz .wave i:nth-child(9){--r:.4}.fn-voz .wave i:nth-child(10){--r:.55}.fn-voz .wave i:nth-child(11){--r:.3}.fn-voz .wave i:nth-child(12){--r:.45}
.fn-voz .wave i:nth-child(13){--r:.25}.fn-voz .wave i:nth-child(14){--r:.35}
.fn-voz .vstate{display:grid;justify-items:center;font:700 11px var(--f-display);letter-spacing:.3em;text-transform:uppercase;color:#a9c4f0;margin-top:-8px;min-height:16px}
.fn-voz .vstate>*{grid-area:1/1}
.fn-voz .vstate>:not(:first-child){opacity:0}
.fn-voz .conv{display:grid;gap:12px;width:100%;min-height:250px;align-content:start}
.fn-voz .msg{font-size:15px;padding:13px 16px;border-radius:20px;max-width:88%}
.fn-voz .msg.me{justify-self:end;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);border-bottom-right-radius:6px}
.fn-voz .msg.ai{justify-self:start;padding:16px 18px;border-bottom-left-radius:6px}
.fn-voz .msg.ai b{display:block;margin-bottom:4px;margin-top:8px}

/* ---------- Conselhos (claro) ---------- */
.fn-cons .ask{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 16px;border-radius:999px;background:#fff;border:1px solid #dfe4ef;font-size:15px;box-shadow:0 6px 18px -8px rgba(25,40,90,.2)}
.fn-cons .ask>svg{width:18px;height:18px;color:#8a95ad;flex:none}
.fn-cons .typed{flex:1;min-width:0;white-space:nowrap;overflow:hidden;font-weight:600}
.fn-cons .typed .lin{display:inline-flex;align-items:center;position:relative;vertical-align:top}
.fn-cons .typed .tx{position:relative;z-index:1}
/* seleção do texto antes de trocar a pergunta, e o cursor do campo (só enquanto digita) */
.fn-cons .typed .sel{position:absolute;left:-1px;top:0;bottom:0;width:0;border-radius:3px;background:#dfe7f8;opacity:0}
.fn-cons .typed .cursor{flex:none;width:2px;height:1.1em;margin-left:1px;border-radius:1px;background:var(--blue-deep);opacity:0}
.fn-cons .ask .go{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none}
.fn-cons .ans{margin-top:16px;display:grid;gap:12px;align-content:start}
.fn-cons .ans .ref-pill{justify-self:start}
.fn-cons .ans h3{font-size:21px;line-height:1.2;font-weight:700}
.fn-cons .trap{border-left:3px solid var(--gelo);padding:4px 0 4px 14px;font-size:14.5px;color:var(--muted-l)}
.fn-cons .trap b{display:block;color:var(--ink);font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:3px}
.fn-cons .steps{display:grid;gap:10px;counter-reset:s}
.fn-cons .steps div{display:grid;grid-template-columns:26px 1fr;gap:10px;font-size:14px;line-height:1.4}
.fn-cons .steps div::before{counter-increment:s;content:counter(s);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:#eef1f8;color:var(--blue-deep)}
.fn-cons .tool{padding:16px}
.fn-cons .tool .say{font-size:14px;line-height:1.45;margin:10px 0 12px;color:var(--ink);font-weight:600}
/* Copiar / Copiado: duas pílulas no mesmo lugar, cada uma do tamanho do seu texto; a azul acende por cima */
.fn-cons .copy-b{display:inline-grid;font:700 12px var(--f-display);color:#fff;transform-origin:left center;vertical-align:top}
.fn-cons .copy-b>span{grid-area:1/1;justify-self:start;padding:7px 14px;border-radius:999px;background:var(--ink);white-space:nowrap}
.fn-cons .copy-b>span+span{background:var(--blue-deep);opacity:0}
.fn-cons .temas{padding:10px 16px}
.fn-cons .temas>.small-lbl{padding:8px 4px 4px}
.fn-cons .sit{display:grid;gap:2px;position:relative}
.fn-cons .sit div{position:relative;display:flex;align-items:center;gap:12px;padding:11px 4px;font-size:14.5px;font-weight:600;border-bottom:1px solid var(--line-l)}
.fn-cons .sit div:last-child{border:0}
.fn-cons .sit svg{width:17px;height:17px;color:var(--blue-deep);flex:none}
.fn-cons .sit div.hl{color:var(--blue-deep)}
.fn-cons .sit div::after{content:"›";margin-left:auto;color:#a1abc0}
/* o realce do tema ativo: uma pílula só, que desliza de uma linha para a outra */
.fn-cons .realce{position:absolute;left:-6px;right:-6px;top:0;height:46px;border-radius:12px;background:rgba(47,95,179,.08);pointer-events:none}
@media (min-width:641px){.fn-cons .tool{right:-30px;top:-40px}.fn-cons .temas{left:-40px;bottom:-40px}}
/* acima de 900: a ferramenta sobe para o canto de cima e deixa a busca à vista (os Temas ficam onde estavam) */
@media (min-width:900px){.fn-cons .comp{top:56px}.fn-cons .tool{top:-166px}}

/* ---------- Trilhas (escuro) ---------- */
.fn-tri .tri-wrap{padding-top:100px}
.fn-tri .copy{max-width:40em}
.fn-tri .trails{display:grid;gap:14px;width:100%;overflow:hidden;padding-block:50px 40px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* a faixa tem as trilhas duas vezes; o recuo à direita fecha o laço sem pulo (-50% = uma volta exata) */
.fn-tri .trk{display:flex;gap:14px;width:max-content;padding-right:14px}
.fn-tri .trk.loop{animation:fn-trilhas 55s linear infinite}
.fn-tri .trk.rev.loop{animation-direction:reverse;animation-duration:62s}
.fn-tri:not(.ativa) .trk.loop{animation-name:none}
@keyframes fn-trilhas{to{transform:translateX(-50%)}}
.fn-tri .tcard{width:250px;flex:none;border-radius:24px;padding:18px;display:grid;gap:10px;
  background:linear-gradient(180deg,rgba(160,190,240,.15),rgba(160,190,240,.05));border:1px solid rgba(200,220,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.fn-tri .tcard .ic{width:40px;height:40px;border-radius:50%;background:rgba(190,210,245,.14);display:grid;place-items:center;color:#d6e2f5}
.fn-tri .tcard .ic svg{width:19px;height:19px}
.fn-tri .tcard h4{font-size:18px;font-weight:700}
.fn-tri .tcard p{font-size:13.5px;color:#a7b5cc}
.fn-tri .tbar{height:5px;border-radius:5px;background:rgba(190,210,245,.15);overflow:hidden}
.fn-tri .tbar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#7ea2dc,#c8daf6);width:var(--p)}
.fn-tri .tcard small{font-size:11.5px;color:#93a3bf}
.fn-tri .study-wrap{padding-bottom:100px}
.fn-tri .study{display:grid;gap:22px}
.fn-tri .study h3{font-size:clamp(22px,4.5vw,28px);font-weight:800;line-height:1.15;margin-top:8px}
.fn-tri .study p{color:#bccadf;margin-top:10px;font-size:15.5px;max-width:40em}
.fn-tri .study-chips{display:flex;flex-wrap:wrap;gap:8px}
/* o estado aceso é uma camada (::after) por cima da camada de repouso (::before): troca só de opacidade */
.fn-tri .study-chips span{position:relative;isolation:isolate;padding:9px 14px;border-radius:999px;font-size:13.5px;font-weight:600;border:1px solid transparent;color:#dbe4f3}
.fn-tri .study-chips span::before,.fn-tri .study-chips span::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;transition:opacity .4s var(--e-suave)}
.fn-tri .study-chips span::before{background:rgba(190,210,245,.1);border:1px solid rgba(200,220,255,.18)}
.fn-tri .study-chips span::after{background:rgba(143,178,232,.18);border:1px solid rgba(143,178,232,.6);opacity:0}
.fn-tri .study-chips span.on{color:#fff}
.fn-tri .study-chips span.on::before{opacity:0}
.fn-tri .study-chips span.on::after{opacity:1}
@media (min-width:900px){.fn-tri .study{grid-template-columns:1fr 1fr;align-items:center;gap:40px}}

/* ---------- Comunidade e Mesa (claro) ---------- */
.fn-mesa .ranking{padding:20px 14px 14px}
.fn-mesa .ranking>.small-lbl{padding:0 10px 12px}
.fn-mesa .rank{position:relative;height:288px}
.fn-mesa .rrow{position:absolute;left:0;right:0;top:0;height:42px;display:grid;grid-template-columns:30px 36px 1fr auto;align-items:center;gap:10px;padding:0 10px;border-radius:14px;font-size:15px}
.fn-mesa .rrow .n{color:#8a95ad;font-size:13px;font-weight:600}
.fn-mesa .rrow .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;background:#eef1f8;color:#3b4a6b}
.fn-mesa .rrow .p{font-variant-numeric:tabular-nums;font-weight:700}
.fn-mesa .rrow.me{background:linear-gradient(90deg,#0f2147,#1d3a72);color:#fff;z-index:2}
.fn-mesa .rrow.me .n{color:#b9c9e6}
.fn-mesa .rrow.me .av{background:var(--gelo);color:var(--ink)}
.fn-mesa .toast{position:absolute;right:16px;top:-16px;z-index:4;background:#fff;color:var(--ink);font-weight:700;font-size:13px;padding:7px 12px;border-radius:999px;opacity:0;transform:translateY(8px)}
.fn-mesa .testi p{font-size:13.5px;line-height:1.45;margin-top:8px;color:var(--muted-l)}
.fn-mesa .testi p b{color:var(--ink)}
.fn-mesa .reacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.fn-mesa .reacts>span{font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:999px;background:#eef1f8;color:#3b4a6b}
.fn-mesa .reacts>span>b{margin-right:3px}
.fn-mesa .reacts i{font-style:normal}
.fn-mesa .harvest .hv{margin-top:8px}
.fn-mesa .harvest .de{color:var(--muted-l);font-size:14px}
.fn-mesa .harvest .big{font-family:var(--f-display);font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fn-mesa .harvest .bar{height:8px;border-radius:8px;background:#e5e9f2;overflow:hidden;margin-top:12px}
.fn-mesa .harvest .bar i{display:block;height:100%;width:53%;border-radius:8px;background:linear-gradient(90deg,#2f5fb3,#8fb2e8)}
@media (min-width:641px){.fn-mesa .testi{width:250px;left:-40px;top:-50px}.fn-mesa .harvest{right:-20px;bottom:-50px}}
/* acima de 900: o testemunho e a colheita saem de cima do ranking (o canto continua sobreposto) */
@media (min-width:900px){.fn-mesa .comp{top:40px}.fn-mesa .testi{top:-128px}.fn-mesa .harvest{right:-36px;bottom:-104px}}

/* ---------- celular (até 640): a mesma página, com as proporções da antiga ---------- */
@media (max-width:640px){
  .fn .feat .copy{display:contents}
  .fn .feat .copy>.eyebrow{order:1}
  .fn .feat .copy>h2{order:2}
  .fn .feat .copy>p{order:3}
  .fn .feat .comp{order:4}
  .fn .feat .copy>.points{order:5}
  .fn .points{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(-1 * max(20px, env(safe-area-inset-left, 0px)));padding:2px max(20px, env(safe-area-inset-left, 0px)) 8px}
  .fn .points::-webkit-scrollbar{display:none}
  .fn .points li{flex:0 0 74%;scroll-snap-align:start;grid-template-columns:1fr;gap:10px;padding:16px;border-radius:18px;font-size:14.5px;line-height:1.45}
  .fn.dark .points li{background:rgba(160,190,240,.08);border:1px solid var(--line-d)}
  .fn.light .points li{background:rgba(255,255,255,.8);border:1px solid #fff;box-shadow:0 10px 24px -16px rgba(25,40,90,.3)}
  /* revelar no celular: o texto revela pelos filhos (o .copy não tem caixa), deslocamentos menores, sem desfoque */
  .fn .feat .copy>.rv{transition:opacity .7s var(--e-out) var(--rv-delay,0ms),transform .7s var(--e-out) var(--rv-delay,0ms)}
  .mov .fn .feat .copy>.rv:not(.in){transform:translate3d(0,18px,0)}
  .fn .g-side.rv{transition:opacity .7s var(--e-out) var(--rv-delay,0ms),transform .7s var(--e-out) var(--rv-delay,0ms)}
  .mov .fn .g-side.rv.l:not(.in),.mov .fn .g-side.rv.r:not(.in){transform:translate3d(0,18px,0)}
  .fn-voz .voice-comp{gap:14px}
  .fn-voz .orbwrap{width:150px;height:150px}
  .fn-voz .big-orb{width:108px;height:108px}
  .fn-voz .ring{inset:21px}
  .fn-voz .ring.fio{inset:18px}
  .fn-voz .conv{min-height:0}
  .fn-tri .study-wrap{padding-bottom:56px}
}

/* ---------- movimento reduzido: a página parada é a página pronta ---------- */
@media (prefers-reduced-motion:reduce){
  .fn-voz .ring{transform:none;opacity:0}
  .fn-voz .ring.fio{opacity:.35}
  /* trilhas paradas e roláveis com o dedo; sem a cópia do laço */
  .fn-tri .trk{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-inline:max(20px,8%);scroll-padding-inline:max(20px,8%)}
  .fn-tri .trk::-webkit-scrollbar{display:none}
  .fn-tri .tcard{scroll-snap-align:start}
  .fn-tri .tcard.dup{display:none}
  .fn-tri .study-chips span::before,.fn-tri .study-chips span::after{transition:none}
}

/* ===================== mais limpo: cartões lado a lado, nada cobrindo nada, sombras leves ===================== */
.light.fn .glass{box-shadow:0 30px 60px -38px rgba(25,40,90,.28),0 1px 2px rgba(25,40,90,.05),inset 0 1px 0 #fff}
.dark.fn .glass{box-shadow:0 40px 70px -40px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.1)}
@media (min-width:641px){
  .fn-hoje .comp,.fn-cons .comp,.fn-mesa .comp{top:0;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:center;align-items:start;
    place-items:initial;width:min(560px,100%);justify-self:center;min-height:0}
  .fn-hoje .comp>.g-main,.fn-cons .comp>.g-main,.fn-mesa .comp>.g-main{grid-column:1/-1;width:100%}
  .fn-hoje .comp>.g-side,.fn-cons .comp>.g-side,.fn-mesa .comp>.g-side{position:relative;inset:auto;top:auto;right:auto;bottom:auto;left:auto;width:auto;margin:0;height:100%}
  .fn-hoje .comp>.semana{grid-column:1/-1}
}
@media (max-width:640px){
  .fn .comp>.glass{width:100%;max-width:420px;margin-top:0}
}

/* ===================== O Conselheiro: o orbe do app, vidro luminoso com um aro fino de luz, sem barras de áudio ===================== */
.fn-voz .voice-comp{gap:28px;width:min(440px,100%)}
.fn-voz .orbwrap{width:280px;height:280px}
.fn-voz .orbwrap::before{inset:-30%;background:radial-gradient(circle, rgba(150,185,245,.30) 0%, rgba(120,160,235,.11) 42%, rgba(120,160,235,0) 70%)}
.fn-voz .big-orb{width:196px;height:196px;
  background:radial-gradient(circle at 33% 29%, #ffffff 0%, #eef4ff 7%, #bcd2f7 22%, #80a3e3 44%, #4c74c2 66%, #34599f 84%, #2d4f93 100%);
  box-shadow:0 0 70px rgba(120,160,240,.36), 0 40px 80px -30px rgba(4,10,30,.9), inset -22px -30px 50px rgba(20,40,100,.5), inset 14px 16px 40px rgba(255,255,255,.2)}
.fn-voz .ring{inset:31px;border:1px solid rgba(200,220,255,.4)}
.fn-voz .ring.fio{inset:31px;border:1.5px solid rgba(222,234,255,.7);opacity:.55;
  box-shadow:0 0 14px rgba(170,200,250,.38), inset 0 0 8px rgba(170,200,250,.18)}
.fn-voz .vstate{font:600 11px var(--f-display);letter-spacing:.4em;color:rgba(205,222,250,.72);margin-top:-10px}
.fn-voz .conv{gap:14px;min-height:240px}
.fn-voz .msg{font-size:15px;line-height:1.5}
.fn-voz .msg.me{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:22px 22px 6px 22px;padding:14px 18px;color:#e9eff9;max-width:86%}
.fn-voz .msg.ai{border-radius:22px 22px 22px 6px;padding:18px 20px 20px;max-width:94%;color:#c9d6ea;
  background:linear-gradient(180deg,rgba(160,190,240,.12),rgba(160,190,240,.04));border:1px solid rgba(200,220,255,.14);box-shadow:0 30px 60px -34px rgba(0,0,0,.7)}
.fn-voz .msg.ai b{font:700 16px/1.3 var(--f-display);color:#fff;margin:12px 0 6px;letter-spacing:-.01em}
@media (max-width:640px){
  .fn-voz .orbwrap{width:210px;height:210px}
  .fn-voz .big-orb{width:146px;height:146px}
  .fn-voz .ring,.fn-voz .ring.fio{inset:23px}
}
@media (prefers-reduced-motion:reduce){.fn-voz .ring.fio{opacity:.55}}

/* ===================== Conquistas: a tela do app (Perfil > Conquistas), com as medalhas do app ===================== */
/* quatro famílias, quatro silhuetas; o desenho de cada medalha é pintado uma vez. O que se mexe são camadas que o
   navegador só gira, escala ou esmaece: o brilho do aro (degradê cônico girando sob a máscara do contorno), o trecho
   andado respirando e o farol da ponta. Nada disso repinta a medalha. */
.fn-conq .conq-app{width:min(470px,100%);display:grid;gap:18px}
.fn-conq .md-box{position:relative;display:block}
.fn-conq .md{display:block;width:100%;height:auto;overflow:visible}
.fn-conq .vitrine{padding:20px 20px 18px;border-radius:28px}
.fn-conq .vt-tit{font:700 13px var(--f-display);letter-spacing:.09em;color:#cfdcf0}
.fn-conq .vt-row{display:grid;grid-template-columns:1fr 1fr;margin-top:14px}
.fn-conq .vt-md{display:grid;justify-items:center;gap:10px;text-align:center}
.fn-conq .vt-md .md-box{width:104px}
.fn-conq .vt-md>span:last-child{font:600 14px var(--f-body);color:#eef1f6}

.fn-conq .filtros{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:-2px;padding:2px;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.fn-conq .filtros::-webkit-scrollbar{display:none}
.fn-conq .ch{flex:none;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px 0 12px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(200,220,255,.18);background:rgba(160,190,240,.07);color:#c3cfe2;font:500 14px var(--f-body);
  transition:background .3s var(--e-suave),color .3s var(--e-suave),border-color .3s var(--e-suave)}
.fn-conq .ch svg{width:18px;height:18px;fill:currentColor}
.fn-conq .ch[aria-pressed="true"]{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff;font-weight:700}
@media (hover:hover){.fn-conq .ch:hover{color:#fff;border-color:rgba(200,220,255,.32)}}
.fn-conq .ch:active{translate:0 1px}

.fn-conq .grade{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 6px;text-align:center;padding-top:4px}
.fn-conq .gm{display:grid;justify-items:center;align-content:start;gap:3px;padding:8px 2px 6px}
.fn-conq .gm.fora{display:none}
.fn-conq .gm .md-box{width:86px;margin-bottom:8px}
.fn-conq .gm b{font:600 13px/1.25 var(--f-body);color:#eef1f6}
.fn-conq .gm.curso b{font-weight:500;color:#b4bcc9}
.fn-conq .gm small{font:600 12px var(--f-body);color:#bfd5f5}
.fn-conq .gm.curso small{color:#7e8a9c}

/* o brilho que dá voltas no aro das ganhas (3,2 s por volta): só gira, sob a máscara do contorno */
.fn-conq .md-luz{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.fn-conq .md-luz i{position:absolute;inset:-15%;border-radius:50%;will-change:transform;
  background:conic-gradient(from 0deg,rgba(255,255,255,0) 0deg 240deg,rgba(255,255,255,.14) 292deg,rgba(255,255,255,.5) 336deg,#fff 356deg,rgba(255,255,255,0) 360deg);
  animation:md-gira 3.2s linear infinite}
.fn-conq .vt-md:nth-child(2) .md-luz i{animation-delay:-1.1s}
.fn-conq .gm:nth-child(1) .md-luz i{animation-delay:-2.1s}
.fn-conq .gm:nth-child(2) .md-luz i{animation-delay:-.5s}
@keyframes md-gira{to{transform:rotate(360deg)}}

/* em curso: o trecho andado numa camada própria que respira por opacidade; a ponta é um farol que só escala e some */
.fn-conq .md-arco{position:absolute;inset:0;will-change:opacity;animation:md-respira 1.8s var(--e-respira) infinite alternate}
.fn-conq .md-andado,.fn-conq .md-andado-veu{fill:none;stroke:#7fa3d4;stroke-linecap:round;stroke-dasharray:var(--p) 200;stroke-dashoffset:0;
  transition:stroke-dashoffset 1.1s var(--e-out) calc(var(--atraso, 0ms) + 150ms)}
.fn-conq .md-andado{stroke-width:2.8}
.fn-conq .md-andado-veu{stroke-width:8;stroke-opacity:.14}
.fn-conq .md-ponta{position:absolute;width:0;height:0;transition:opacity .4s var(--e-suave) calc(var(--atraso, 0ms) + 1100ms)}
.fn-conq .md-ponta i{position:absolute;border-radius:50%;left:50%;top:50%}
.fn-conq .md-ponta .miolo{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:#eaf1ff;box-shadow:0 0 6px 1px rgba(191,213,245,.7)}
.fn-conq .md-ponta .farol{width:14px;height:14px;margin:-7px 0 0 -7px;border:1.4px solid #bfd5f5;opacity:0;will-change:transform,opacity;animation:md-farol 1.8s var(--e-suave) infinite}
.fn-conq .gm:nth-child(4) .farol,.fn-conq .gm:nth-child(4) .md-arco{animation-delay:-.45s}
.fn-conq .gm:nth-child(5) .farol,.fn-conq .gm:nth-child(5) .md-arco{animation-delay:-.9s}
.fn-conq .gm:nth-child(6) .farol,.fn-conq .gm:nth-child(6) .md-arco{animation-delay:-1.35s}
@keyframes md-respira{from{opacity:.68}to{opacity:1}}
@keyframes md-farol{0%{opacity:.9;transform:scale(.45)}100%{opacity:0;transform:scale(1.5)}}
.fn-conq:not(.ativa) .loop,.aba-oculta .fn-conq .loop{animation-name:none}

/* a chegada (uma vez, quando a seção fica ativa): as duas da vitrine pousam, a grade entra na diagonal,
   o trecho andado se desenha do topo até onde a pessoa chegou e a ponta acende no fim */
.fn-conq .vt-md,.fn-conq .gm{transition:opacity .7s var(--e-out) var(--atraso, 0ms),transform .8s var(--e-out) var(--atraso, 0ms)}
.fn-conq.md-chegou .vt-md,.fn-conq.md-chegou .gm{animation:v3-foco .6s var(--e-out) var(--atraso, 0ms) backwards}
.fn-conq .vt-md{--atraso:calc(var(--i) * 140ms)}
.fn-conq .gm{--atraso:calc(260ms + (var(--l) + var(--c)) * 80ms)}
.fn-conq.md-armado .vt-md{opacity:0;transform:scale(.86)}
.fn-conq.md-armado .gm{opacity:0;transform:translateY(12px) scale(.94)}
.fn-conq.md-armado .md-andado,.fn-conq.md-armado .md-andado-veu{stroke-dashoffset:var(--p)}
.fn-conq.md-armado .md-ponta{opacity:0}

@media (max-width:640px){
  .fn-conq .conq-app{width:100%}
  .fn-conq .vt-md .md-box{width:92px}
  .fn-conq .gm .md-box{width:76px}
}
@media (prefers-reduced-motion:reduce){
  .fn-conq .md-luz{display:none}
  .fn-conq .loop{animation:none!important}
  .fn-conq .md-ponta .farol{opacity:.5;transform:scale(1)}
  .fn-conq .vt-md,.fn-conq .gm,.fn-conq .md-andado,.fn-conq .md-andado-veu,.fn-conq .md-ponta,.fn-conq .ch{transition:none}
}

/* ===== fim ===== */
/* Parte "fim": Rotina (tela de bloqueio + oito minis), Como começar (o mapa), preço, perguntas e fecho.
   Mesmo desenho da página antiga; entradas por transform/opacity, toques pela propriedade translate, tudo preso às seções .fim-*. */

/* ---------- títulos: o h2 sai de um desfoque curto junto com a entrada (só aqui, uma vez) ---------- */
/* os títulos chegam pelo .rv da base (a animação de foco de uma vez) */

/* ==================== Rotina: "Pensado para caber na sua rotina" ==================== */
.fim-rotina .lock{display:grid;gap:28px;align-items:center;margin-top:40px;padding:28px}
@media (min-width:900px){.fim-rotina .lock{grid-template-columns:1fr 1fr;padding:40px;gap:50px}}
.fim-rotina .lock h3{font-size:clamp(24px,5vw,32px);font-weight:800;line-height:1.12;margin-top:8px}
.fim-rotina .lock-copy p{color:var(--muted-l);margin-top:12px;font-size:16px}

/* o iPhone 15 Pro apagado: tela de 300 x 650 como a antiga (corpo 325 px); entra 120 ms depois do cartão */
.fim-rotina .ios-wrap{display:flex;justify-content:center;min-width:0;
  transition:opacity .9s var(--e-out) calc(var(--rv-delay,0ms) + 120ms), transform .9s var(--e-out) calc(var(--rv-delay,0ms) + 120ms)}
.mov .fim-rotina .lock.rv:not(.in) .ios-wrap{opacity:0;transform:translate3d(0,32px,0)}
.mov .fim-rotina .lock.rv.in .ios-wrap{animation:v3-foco .7s var(--e-out) calc(var(--rv-delay,0ms) + 120ms) backwards}
.fim-rotina .lock-fone{--w:min(272px, calc(100vw - 110px))}
/* sem laço neste cartão: o aparelho só inclina com o ponteiro (ou de leve com a rolagem no toque) */
.fim-rotina .lock-fone.fone .fone-flutua,.fim-rotina .lock-fone.fone .fone-sombra{animation:none}

/* os oito minis */
.fim-rotina .minis{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));padding-block:40px 100px}
.fim-rotina .mini{display:grid;gap:10px;align-content:start}
.fim-rotina .mini .ic{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:#0f2147;color:#cfe0ff}
.fim-rotina .mini .ic svg{width:21px;height:21px}
.fim-rotina .mini h4{margin-top:6px;font-size:20px;font-weight:700}
.fim-rotina .mini p{color:var(--muted-l);font-size:15px}
@media (hover:hover){.fim-rotina .mini:hover{translate:0 -4px}}

@media (max-width:640px){
  .fim-rotina .lock{padding:20px;margin-top:24px;gap:22px}
  .fim-rotina .lock h3{font-size:24px}
  .fim-rotina .minis{grid-template-columns:1fr 1fr;gap:10px;padding-block:20px 64px}
  .fim-rotina .mini{padding:16px;border-radius:20px;gap:6px}
  .fim-rotina .mini .ic{width:36px;height:36px;border-radius:11px}
  .fim-rotina .mini .ic svg{width:18px;height:18px}
  .fim-rotina .mini h4{font-size:15.5px;margin-top:4px;line-height:1.2}
  .fim-rotina .mini p{font-size:12.5px;line-height:1.45}
}

/* ==================== Como começar: o mapa ==================== */
.fim-como .mm{position:relative;width:100%;aspect-ratio:1000/600;margin-block:30px 100px;transition:transform .8s var(--e-out)}
/* montagem (uma vez): fim.js arma o mapa só se ele estiver abaixo da dobra e põe .in quando ele aparece.
   O mapa só desliza 24 px; quem aparece é cada nó (centro 0, passos 120/200/280, folhas 360 a 560 ms) e as arestas. */
.mov .fim-como .mm.armado:not(.in){transform:translate3d(0,24px,0)}
.fim-como .mm svg.edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* arestas: a base fica sempre; por cima, um fio com halo borrado e um núcleo fino, que só mudam de opacidade */
.fim-como .mm .ar{transition:opacity .4s var(--e-suave) .2s}
.mov .fim-como .mm.armado:not(.in) .ar{opacity:0}
.fim-como .mm .e{fill:none;stroke:rgba(143,178,232,.28);stroke-width:1.6}
.fim-como .mm .main>.e{stroke-width:2.2}
.fim-como .mm .e-halo{fill:none;stroke:rgba(143,178,232,.3);stroke-width:6;stroke-linecap:round;opacity:0;transition:opacity .4s var(--e-suave)}
.fim-como .mm .e-luz{fill:none;stroke:#8fb2e8;stroke-width:1.6;stroke-linecap:round;opacity:0;transition:opacity .4s var(--e-suave)}
.fim-como .mm .main>.e-luz{stroke-width:2.2}
.fim-como .mm .on>.e-halo,.fim-como .mm .on>.e-luz{opacity:1;transition-duration:.5s}

/* nós: centrados por transform; a escala (montagem e aceso) é a propriedade scale, em torno do centro */
.fim-como .mm .node{position:absolute;transform:translate(-50%,-50%);transform-origin:0 0;z-index:2;
  transition:opacity .7s var(--e-out) var(--md,0ms), scale .7s var(--e-out) var(--md,0ms)}
.mov .fim-como .mm.armado:not(.in) .node{opacity:0;scale:.96}
.mov .fim-como .mm.armado.in .node{animation:v3-foco .55s var(--e-out) var(--md,0ms) backwards}
.fim-como .mm.pronto .node{transition:scale .5s var(--e-suave)}
.fim-como .mm.pronto .n-leaf{transition-duration:.4s}
.fim-como .mm .node.on{scale:1.04}
.fim-como .mm.pronto .n-step.on{transition-duration:.6s}

/* posições (as mesmas do LAY de fim.js) */
.fim-como .mm [data-id="hub"]{left:50%;top:47.5%}
.fim-como .mm [data-id="s1"]{left:20%;top:30%}
.fim-como .mm [data-id="s2"]{left:80%;top:30%}
.fim-como .mm [data-id="s3"]{left:50%;top:77.5%}
.fim-como .mm [data-id="l1a"]{left:11%;top:65.8333%}
.fim-como .mm [data-id="l1b"]{left:25.5%;top:7.5%}
.fim-como .mm [data-id="l2a"]{left:74.5%;top:7.5%}
.fim-como .mm [data-id="l2b"]{left:89%;top:65.8333%}
.fim-como .mm [data-id="l3a"]{left:26.5%;top:93.3333%}
.fim-como .mm [data-id="l3b"]{left:73.5%;top:93.3333%}

/* centro */
.fim-como .n-hub{display:grid;justify-items:center;gap:8px;text-align:center;font:700 14px var(--f-display);color:#cfdaec}
.fim-como .n-hub .orbwrap{width:120px;height:120px}
.fim-como .n-hub .big-orb{width:84px;height:84px}

/* passos */
.fim-como .n-step{width:240px;padding:16px 18px;border-radius:22px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;
  background:linear-gradient(180deg,#1a2f5a,#0f1f40);border:1px solid rgba(200,220,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.fim-como .n-step::after{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;pointer-events:none;
  border:1px solid rgba(143,178,232,.8);box-shadow:0 0 0 4px rgba(143,178,232,.12),0 20px 50px -10px rgba(0,0,0,.6);
  opacity:0;transition:opacity .5s var(--e-suave)}
.fim-como .n-step.on::after{opacity:1;transition-duration:.6s}
.fim-como .n-step .num{grid-row:span 2;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;position:relative;
  font:800 14px var(--f-display);background:rgba(143,178,232,.16);color:#cfe0ff;border:1px solid rgba(143,178,232,.45)}
.fim-como .n-step .num::after{content:attr(data-n);position:absolute;inset:-1px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:#0d1a36;box-shadow:inset 0 0 0 1px rgba(143,178,232,.45);opacity:0;transition:opacity .4s var(--e-suave)}
.fim-como .n-step.on .num::after{opacity:1}
.fim-como .n-step h4{font-size:16.5px;font-weight:700;line-height:1.2}
.fim-como .n-step p{font-size:12.5px;color:var(--muted-d);line-height:1.35}

/* folhas: a pele acesa é uma camada por baixo do texto; o texto (o mesmo nó) só clareia */
.fim-como .n-leaf{max-width:180px;padding:9px 14px;border-radius:999px;font-size:13px;font-weight:600;text-align:center;line-height:1.25;
  background:#0f1c37;border:1px solid rgba(200,220,255,.16);color:#9fb0cb}
.fim-como .n-leaf::after{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:0;pointer-events:none;
  background:#16294f;border:1px solid rgba(143,178,232,.55);opacity:0;transition:opacity .4s var(--e-suave)}
.fim-como .n-leaf>span{position:relative;z-index:1;display:block;transition:filter .4s var(--e-suave)}
.fim-como .n-leaf.on::after{opacity:1}
.fim-como .n-leaf.on>span{filter:brightness(1.62)}

/* o grão de luz: núcleo + halo + esteira, movido só por transform (WAAPI) */
.fim-como .grao{position:absolute;left:0;top:0;width:0;height:0;z-index:1;pointer-events:none;opacity:0}
.fim-como .grao i{position:absolute;left:0;top:0;border-radius:50%;width:3.4px;height:3.4px;margin:-1.7px 0 0 -1.7px;background:#bfd5f5}
.fim-como .grao .cab{width:30px;height:30px;margin:-15px 0 0 -15px;
  background:radial-gradient(circle closest-side,#f2f6ff 0,#f2f6ff 14%,rgba(242,246,255,0) 17%),
    radial-gradient(circle closest-side,rgba(191,213,245,.55) 0,rgba(191,213,245,0) 40%),
    radial-gradient(circle closest-side,rgba(127,163,212,.18) 0,rgba(127,163,212,0) 93%)}
.fim-como .grao i:nth-child(2){opacity:.5}
.fim-como .grao i:nth-child(3){opacity:.38}
.fim-como .grao i:nth-child(4){opacity:.28;width:3.2px;height:3.2px;margin:-1.6px 0 0 -1.6px}
.fim-como .grao i:nth-child(5){opacity:.2;width:3px;height:3px;margin:-1.5px 0 0 -1.5px}
.fim-como .grao i:nth-child(6){opacity:.12;width:2.8px;height:2.8px;margin:-1.4px 0 0 -1.4px}
.fim-como .grao i:nth-child(7){opacity:.06;width:2.6px;height:2.6px;margin:-1.3px 0 0 -1.3px}

/* layout vertical até 900 px (o desenho largo aperta em 820) */
@media (max-width:899px){
  .fim-como .mm{aspect-ratio:360/920;max-width:400px;margin-inline:auto}
  .fim-como .n-step{width:236px;padding:13px 14px}
  .fim-como .n-leaf{max-width:150px;font-size:12px;padding:8px 11px}
  .fim-como .mm [data-id="hub"]{left:50%;top:7.8261%}
  .fim-como .mm [data-id="s1"]{left:50%;top:24.4565%}
  .fim-como .mm [data-id="l1a"]{left:75.5556%;top:37.5%}
  .fim-como .mm [data-id="l1b"]{left:24.4444%;top:37.5%}
  .fim-como .mm [data-id="s2"]{left:50%;top:52.1739%}
  .fim-como .mm [data-id="l2a"]{left:24.4444%;top:65.2174%}
  .fim-como .mm [data-id="l2b"]{left:75.5556%;top:65.2174%}
  .fim-como .mm [data-id="s3"]{left:50%;top:79.8913%}
  .fim-como .mm [data-id="l3a"]{left:24.4444%;top:93.4783%}
  .fim-como .mm [data-id="l3b"]{left:75.5556%;top:93.4783%}
}
@media (max-width:640px){.fim-como .mm{margin-block:16px 64px}}

/* movimento reduzido: sem montagem, sem relógio, sem grão; as três arestas principais acesas */
.rm .fim-como .mm .main>.e-halo,.rm .fim-como .mm .main>.e-luz{opacity:1}

/* ==================== Preço ==================== */
.fim-preco .price{max-width:600px;margin:100px auto 0;border-radius:36px;padding:clamp(28px,6vw,60px);position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(100% 120% at 0% 0%, #1d3a72 0%, #10234a 50%, #0b1834 100%);display:grid;gap:22px;text-align:center;
  box-shadow:0 50px 100px -40px rgba(15,35,80,.6)}
.fim-preco .price .p-orb{position:absolute;right:-90px;top:-90px;width:320px;height:320px;border-radius:50%;opacity:.55;pointer-events:none;
  background:radial-gradient(circle at 35% 30%, #e3edff 0%, #6f93d6 26%, #27457f 60%, transparent 72%);
  transition:opacity 1.2s var(--e-out) calc(var(--rv-delay,0ms) + 150ms), transform 1.4s var(--e-out) calc(var(--rv-delay,0ms) + 150ms)}
.mov .fim-preco .price.rv:not(.in) .p-orb{opacity:0;transform:translate3d(28px,-28px,0) scale(.94)}
.fim-preco .price-cab{display:grid;gap:16px;position:relative}
.fim-preco .price-corpo{display:grid;gap:20px;position:relative}
.fim-preco .price .eyebrow{justify-content:center;color:#a9b9d6}
.fim-preco .price .eyebrow::after{display:none}
.fim-preco .price h2{font-size:clamp(30px,7vw,48px);line-height:1.05;font-weight:800}
/* os filhos entram depois do bloco: cabeçalho 0, anual 120, mensal 180, nota 240, botão 300 ms */
.fim-preco .pc{transition:opacity .7s var(--e-out) calc(var(--rv-delay,0ms) + var(--d,0ms)), transform .7s var(--e-out) calc(var(--rv-delay,0ms) + var(--d,0ms))}
.mov .fim-preco .price.rv:not(.in) .pc{opacity:0;transform:translate3d(0,12px,0)}
.mov .fim-preco .price.rv.in .pc{animation:v3-foco .55s var(--e-out) calc(var(--rv-delay,0ms) + var(--d,0ms)) backwards}

.fim-preco .plans{display:grid;gap:12px;position:relative}
.fim-preco .plan{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:20px 22px;border-radius:22px;cursor:pointer;
  background-color:rgba(255,255,255,.06);border:1.5px solid rgba(200,220,255,.2);text-align:left;color:#fff;font:inherit;width:100%;
  transition:opacity .7s var(--e-out) calc(var(--rv-delay,0ms) + var(--d,0ms)), transform .7s var(--e-out) calc(var(--rv-delay,0ms) + var(--d,0ms)),
    translate .3s var(--ease), border-color .3s, background-color .3s}
@media (hover:hover){.fim-preco .plan:hover{translate:0 -2px}}
.fim-preco .plan[aria-pressed="true"]{border-color:#8fb2e8;background-color:rgba(143,178,232,.12)}
.fim-preco .plan .radio{width:22px;height:22px;border-radius:50%;border:2px solid rgba(200,220,255,.5);display:grid;place-items:center;transition:border-color .3s}
.fim-preco .plan .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .3s var(--ease)}
.fim-preco .plan[aria-pressed="true"] .radio{border-color:#8fb2e8}
.fim-preco .plan[aria-pressed="true"] .radio::after{transform:scale(1)}
.fim-preco .plan .nm{font:700 18px var(--f-display);display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.fim-preco .plan .nm em{font:800 10px var(--f-display);font-style:normal;letter-spacing:.12em;text-transform:uppercase;background:#fff;color:#0d1a36;padding:4px 8px;border-radius:999px}
.fim-preco .plan .ds{display:block;font-size:13px;line-height:1.45;color:#a9b9d6;margin-top:2px}
.fim-preco .plan .pr{text-align:right;font:800 clamp(30px,6vw,40px)/1 var(--f-display);letter-spacing:-.03em;white-space:nowrap}
.fim-preco .plan .pr small{display:block;margin-top:6px;font:500 13px var(--f-body);color:#a9b9d6;letter-spacing:0}
.fim-preco .trial-note{font-size:13px;color:#a9b9d6;position:relative;text-align:center}
.fim-preco .price .cta-row{justify-content:center}

@media (max-width:640px){
  .fim-preco .price{margin-top:64px;border-radius:28px}
  .fim-preco .plan{grid-template-columns:auto 1fr;padding:16px;gap:4px 12px}
  .fim-preco .plan .pr{grid-column:2;text-align:left;font-size:30px;margin-top:6px}
  .fim-preco .plan .pr small{display:inline;margin-left:6px}
  .fim-preco .plan .ds{font-size:12px}
  .fim-preco .plan .nm em{white-space:nowrap}
}

/* ==================== Perguntas ==================== */
.fim-preco .faq{display:grid;gap:10px;padding-block:30px 100px;max-width:780px}
.fim-preco .faq details{border-radius:20px;background:rgba(255,255,255,.8);border:1px solid #fff;padding:0 22px;box-shadow:0 10px 30px -18px rgba(25,40,90,.3)}
.fim-preco .faq summary{cursor:pointer;list-style:none;padding:19px 0;font-family:var(--f-display);font-weight:700;font-size:17px;display:flex;justify-content:space-between;gap:16px;color:var(--ink)}
.fim-preco .faq summary::-webkit-details-marker{display:none}
.fim-preco .faq summary::after{content:"+";color:var(--blue-deep);font-size:24px;line-height:1;transition:transform .36s var(--e-suave)}
.fim-preco .faq details[open] summary::after{transform:rotate(45deg)}
.fim-preco .faq details p{padding-bottom:20px;color:var(--muted-l);font-size:15px;max-width:60ch}
.fim-preco .faq details[open]>p{animation:fim-abre .36s var(--e-suave) both}
@keyframes fim-abre{from{opacity:0;transform:translate3d(0,-6px,0)}}
/* entrada das perguntas: 700 ms, 16 px (a cascata de 50 ms vem do base.js) */
.fim-preco .faq .rv{transition-duration:.7s,.7s,.3s}
.mov .fim-preco .faq .rv:not(.in){transform:translate3d(0,16px,0)}
@media (max-width:640px){.fim-preco .faq{padding-block:20px 72px}}

/* ==================== Fecho ==================== */
.fim-fecho .final{text-align:center;display:grid;justify-items:center;gap:22px;padding-block:110px 90px;position:relative}
.fim-fecho .final .orbwrap{width:160px;height:160px}
.fim-fecho .final .big-orb{width:110px;height:110px}
.fim-fecho .final h2{font-size:clamp(34px,8vw,58px);line-height:1.02;font-weight:800;max-width:13em}
.fim-fecho .final p{color:var(--muted-d);max-width:30em}
/* em sequência 0/90/180/270 ms (data-d), 20 px */
.mov .fim-fecho .final .rv:not(.in){transform:translate3d(0,20px,0)}
.mov .fim-fecho .final .rv.s:not(.in){transform:translate3d(0,20px,0) scale(.97)}
@media (max-width:640px){
  .fim-fecho .final{padding-block:80px 70px}
  .fim-fecho .final .orbwrap{width:130px;height:130px}
  .fim-fecho .final .big-orb{width:90px;height:90px}
}

/* ==================== movimento reduzido: a página parada é a página pronta ==================== */
@media (prefers-reduced-motion:reduce){
  .fim-como .mm .main>.e-halo,.fim-como .mm .main>.e-luz{opacity:1}
  .fim-como .grao{display:none}
  .fim-como .mm,.fim-como .mm .node,.fim-como .mm .ar,.fim-como .n-step::after,.fim-como .n-step .num::after,.fim-como .n-leaf::after,.fim-como .n-leaf>span{transition:none}
  .fim-rotina .ios-wrap,.fim-preco .pc,.fim-preco .price .p-orb,.fim-rotina .sec-head h2,.fim-como .sec-head h2,.fim-preco .sec-head h2{transition:none}
  .fim-preco .faq summary::after{transition:none}
  .fim-preco .faq details[open]>p{animation:none}
}