/* ==========================================================================
   LUZ DO VALE · kit visual do deck Vale Empreender 2026
   Toda cena linka este arquivo (assets/vale.css) e assets/vale.js.
   Palco lógico fixo 1920x1080 dentro de .palco (escala via --k, feita no JS).
   Camadas de tela cheia (fundo, foto, canvas) ficam FORA de .palco.
   Estados: elementos com data-in="n" (e opcional data-out="m") ganham .on
   quando o beat atual n <= b < m. Delay de entrada SÓ na regra .on (--d).
   ========================================================================== */

@font-face{font-family:'Geist';font-style:italic;font-weight:300 600;font-display:block;src:url(fonts/geist-italic-300_600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist';font-style:italic;font-weight:300 600;font-display:block;src:url(fonts/geist-italic-300_600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 800;font-display:block;src:url(fonts/geist-normal-300_800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 800;font-display:block;src:url(fonts/geist-normal-300_800-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:block;src:url(fonts/geistmono-normal-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:block;src:url(fonts/geistmono-normal-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:block;src:url(fonts/geistmono-normal-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:block;src:url(fonts/geistmono-normal-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --noite:#030913; --abismo:#061224; --navy:#0A1F3B; --navy2:#0E2A4F; --navy3:#163A66;
  --azul:#2E6FC4; --azul2:#4A8BE0; --luz:#8EC5FF; --gelo:#CFE3FA; --branco:#F3F7FC;
  --aco:#7F9CC2; --cinza:#93A4BC; --linha:rgba(142,197,255,.16); --linha2:rgba(142,197,255,.30);
  --coral:#D0736B;
  --suave:cubic-bezier(.22,1,.36,1); --mola:cubic-bezier(.34,1.4,.5,1); --entra:cubic-bezier(.16,1,.3,1);
  --mono:'Geist Mono',ui-monospace,monospace; --sans:'Geist',system-ui,sans-serif;
  --k:1;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:var(--noite);color:var(--branco);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;font-feature-settings:'ss01','cv11'}
body{user-select:none;-webkit-user-select:none}
.nw{white-space:nowrap}
img{display:block}

/* ---------- atmosfera (tela cheia, fora do palco) ---------- */
#atmo{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 55% at var(--ax,62%) var(--ay,38%), rgba(46,111,196,.30), rgba(14,42,79,.22) 38%, transparent 72%),
    radial-gradient(90% 45% at 50% 112%, rgba(74,139,224,.22), transparent 70%),
    radial-gradient(120% 90% at 50% 50%, var(--navy) 0%, var(--abismo) 55%, var(--noite) 100%);}
#atmo::after{content:'';position:absolute;inset:0;background:radial-gradient(130% 100% at 50% 50%, transparent 55%, rgba(1,4,10,.72) 100%)}
canvas.fx{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
#grao{position:fixed;inset:-50%;z-index:40;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grao 1.2s steps(6) infinite}
@keyframes grao{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ---------- palco lógico ---------- */
.palco{position:absolute;left:50%;top:50%;width:1920px;height:1080px;z-index:10;transform:translate(-50%,-50%) scale(var(--k));transform-origin:50% 50%}
.palco > *{position:absolute}

/* ---------- tipografia (px no palco de 1920) ---------- */
.eyebrow{font-family:var(--mono);font-size:22px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--luz)}
.eyebrow.dim{color:var(--aco)}
.coord{font-family:var(--mono);font-size:17px;letter-spacing:.24em;text-transform:uppercase;color:var(--aco)}
.h-xxl{font-size:220px;line-height:.88;font-weight:620;letter-spacing:-.05em}
.h-xl{font-size:164px;line-height:.92;font-weight:600;letter-spacing:-.046em}
.h-l{font-size:118px;line-height:.98;font-weight:590;letter-spacing:-.04em}
.h-m{font-size:84px;line-height:1.04;font-weight:560;letter-spacing:-.034em}
.h-s{font-size:60px;line-height:1.1;font-weight:520;letter-spacing:-.026em}
.lead{font-size:40px;line-height:1.32;font-weight:330;color:var(--gelo);letter-spacing:-.012em}
.corpo{font-size:30px;line-height:1.42;font-weight:380;color:var(--gelo)}
.miudo{font-size:24px;line-height:1.4;color:var(--cinza)}
.it{font-style:italic;font-weight:300;padding-right:.09em;margin-right:-.09em;background:linear-gradient(100deg,var(--gelo) 0%,var(--luz) 45%,var(--azul2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.luz{color:var(--luz)}
.gelo{color:var(--gelo)}
.aco{color:var(--aco)}
.fonte{font-family:var(--mono);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--aco);opacity:.85}

/* ---------- revelação por estado ---------- */
.rv{opacity:0;filter:blur(14px);transform:translate3d(0,26px,0);transition:opacity .45s var(--suave),filter .5s var(--suave),transform .7s var(--suave)}
.rv.on{opacity:1;filter:blur(0);transform:none;transition:opacity .8s var(--suave) var(--d,0s),filter .9s var(--suave) var(--d,0s),transform 1.1s var(--entra) var(--d,0s)}
.rv.so-fade{transform:none}
.rv.de-lado{transform:translate3d(-40px,0,0)}
.rv.de-lado.on{transform:none}
.rv.zoom{transform:scale(.92)}
.rv.zoom.on{transform:none}
/* palavra a palavra: .pal (o JS envolve cada palavra em .w com --i) */
.pal .w{display:inline-block;opacity:0;filter:blur(12px);transform:translate3d(0,.32em,0);transition:opacity .35s var(--suave),filter .4s var(--suave),transform .5s var(--suave)}
.pal.on .w{opacity:1;filter:blur(0);transform:none;transition:opacity .7s var(--suave) calc(var(--d,0s) + var(--i)*55ms),filter .8s var(--suave) calc(var(--d,0s) + var(--i)*55ms),transform 1s var(--entra) calc(var(--d,0s) + var(--i)*55ms)}
/* máscara de baixo pra cima */
.sobe{clip-path:inset(0 0 100% 0);transform:translate3d(0,30px,0);transition:clip-path .5s var(--suave),transform .6s var(--suave)}
.sobe.on{clip-path:inset(-10% -5% -12% -5%);transform:none;transition:clip-path 1s var(--entra) var(--d,0s),transform 1.1s var(--entra) var(--d,0s)}
/* apagar o que já passou sem sair (foco no novo) */
.recua{transition:opacity .6s var(--suave),filter .6s var(--suave)}
.recua.on{opacity:.22;filter:blur(2px)}
/* camada de tela cheia: sempre com visibility gate */
.camada{visibility:hidden;opacity:0;transition:opacity .6s var(--suave),visibility 0s linear .6s}
.camada.on{visibility:visible;opacity:1;transition:opacity .9s var(--suave) var(--d,0s),visibility 0s}

/* elementos com ::before/::after absolutos: relative só quando não são filhos diretos do palco */
:where(.vidro,.pivo,.chat,.fone,.feito,.legenda,.notif){position:relative}

/* ---------- vidro ---------- */
.vidro{border-radius:30px;background:linear-gradient(160deg,rgba(38,84,148,.40),rgba(12,34,64,.34) 46%,rgba(5,14,28,.50));-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(207,227,250,.20),inset 0 0 0 1px rgba(142,197,255,.10),0 40px 90px -30px rgba(0,0,0,.75),0 0 80px -20px rgba(46,111,196,.30)}
.vidro::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(140deg,rgba(207,227,250,.62),rgba(142,197,255,.10) 28%,rgba(142,197,255,0) 58%,rgba(142,197,255,.30));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.vidro.claro{background:linear-gradient(160deg,rgba(74,139,224,.30),rgba(22,58,102,.32) 50%,rgba(8,22,44,.46))}
.vidro.plano{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(160deg,rgba(30,70,125,.34),rgba(10,31,59,.55) 50%,rgba(6,16,32,.70))}

/* ---------- chip ---------- */
.chip{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 26px;border-radius:999px;font-size:25px;font-weight:450;color:var(--gelo);background:rgba(14,42,79,.55);box-shadow:inset 0 0 0 1px var(--linha2),inset 0 1px 0 rgba(207,227,250,.14);white-space:nowrap}
.chip .pt{width:10px;height:10px;border-radius:50%;background:var(--luz);box-shadow:0 0 14px var(--luz)}
.tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:17px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--luz);padding:9px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--linha2);background:rgba(10,31,59,.6)}

/* ---------- pivô (círculo irrigado com braço que gira) ---------- */
.pivo{--s:160px;width:var(--s);height:var(--s);border-radius:50%;
  background:
    radial-gradient(circle,rgba(142,197,255,.0) 0 22%,rgba(142,197,255,.10) 22.5% 23%,transparent 23.5% 44%,rgba(142,197,255,.10) 44.5% 45%,transparent 45.5% 66%,rgba(142,197,255,.10) 66.5% 67%,transparent 67.5%),
    radial-gradient(circle,rgba(46,111,196,.30),rgba(14,42,79,.25) 60%,rgba(10,31,59,.10) 71%,transparent 72%);
  box-shadow:inset 0 0 0 1.5px rgba(142,197,255,.45),0 0 40px -6px rgba(74,139,224,.45)}
.pivo::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 90deg,rgba(142,197,255,0) 0deg,rgba(142,197,255,0) 250deg,rgba(142,197,255,.42) 358deg,rgba(207,227,250,.0) 360deg);opacity:0;transition:opacity .8s var(--suave)}
.pivo::after{content:'';position:absolute;left:50%;top:50%;width:50%;height:2px;margin-top:-1px;transform-origin:0 50%;background:linear-gradient(90deg,var(--gelo),rgba(207,227,250,.35));box-shadow:0 0 12px rgba(142,197,255,.9);border-radius:2px}
.pivo i.centro{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--branco);box-shadow:0 0 16px var(--luz),0 0 4px #fff;z-index:2}
.pivo.gira::before{opacity:1;animation:pivogira var(--t,5s) linear infinite}
.pivo.gira::after{animation:pivogira var(--t,5s) linear infinite}
.pivo.apagado{box-shadow:inset 0 0 0 1.5px rgba(142,197,255,.16);filter:saturate(.4) brightness(.7)}
@keyframes pivogira{to{transform:rotate(360deg)}}

/* ---------- legenda de termo técnico ---------- */
.legenda{display:inline-flex;align-items:baseline;gap:16px;padding:16px 24px 16px 20px;border-radius:18px;background:rgba(6,18,36,.72);box-shadow:inset 0 0 0 1px var(--linha2);font-size:25px;line-height:1.35;color:var(--gelo);max-width:900px}
.legenda b{font-family:var(--mono);font-weight:500;font-size:17px;letter-spacing:.2em;text-transform:uppercase;color:var(--luz);white-space:nowrap}
.legenda strong{font-weight:600;color:var(--branco)}

/* ---------- cabeçalho de degrau da trilha ---------- */
.degrau{display:flex;align-items:center;gap:30px}
.degrau .num{font-size:120px;line-height:.8;font-weight:250;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(142,197,255,.75)}
.degrau .sel{display:flex;flex-direction:column;gap:12px}
.degrau .sel .nome{font-size:64px;line-height:1;font-weight:600;letter-spacing:-.03em}
.degrau .sel .alt{font-family:var(--mono);font-size:19px;letter-spacing:.26em;text-transform:uppercase;color:var(--luz)}

/* mini mapa da trilha (8 pivôs no rio) */
.minitrilha{display:flex;align-items:center;gap:0;height:40px}
.minitrilha i{position:relative;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(142,197,255,.35);background:rgba(10,31,59,.8)}
.minitrilha i + i{margin-left:34px}
.minitrilha i + i::before{content:'';position:absolute;right:100%;top:50%;width:34px;height:1.5px;background:rgba(142,197,255,.22)}
.minitrilha i.passou{background:rgba(142,197,255,.45);box-shadow:inset 0 0 0 1.5px rgba(142,197,255,.7)}
.minitrilha i.aqui{background:var(--luz);box-shadow:0 0 0 6px rgba(142,197,255,.16),0 0 22px var(--luz)}
.minitrilha i.virada::after{content:'';position:absolute;left:-26px;top:-14px;width:1.5px;height:44px;background:linear-gradient(180deg,transparent,rgba(207,227,250,.7),transparent)}
.minitrilha span{font-family:var(--mono);font-size:15px;letter-spacing:.2em;color:var(--aco);text-transform:uppercase;margin-left:26px}

/* O PROBLEMA · O QUE A IA FAZ · COMO FAZER */
.passos{display:flex;gap:44px;font-family:var(--mono);font-size:19px;letter-spacing:.24em;text-transform:uppercase;color:rgba(127,156,194,.55)}
.passos span{position:relative;transition:color .5s var(--suave)}
.passos span::after{content:'';position:absolute;left:0;right:0;bottom:-12px;height:2px;background:var(--luz);box-shadow:0 0 12px var(--luz);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--suave)}
.passos span.at{color:var(--luz)}
.passos span.at::after{transform:scaleX(1)}

/* Feito quando */
.feito{display:flex;align-items:center;gap:22px;padding:22px 30px 22px 22px;border-radius:22px;background:rgba(6,18,36,.66);box-shadow:inset 0 0 0 1px var(--linha2)}
.feito svg{width:52px;height:52px;flex:none}
.feito svg circle{fill:none;stroke:rgba(142,197,255,.3);stroke-width:2}
.feito svg path{fill:none;stroke:var(--luz);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .3s}
.feito.on svg path{stroke-dashoffset:0;transition:stroke-dashoffset .8s var(--suave) calc(var(--d,0s) + .35s)}
.feito .q{display:flex;flex-direction:column;gap:6px}
.feito .q b{font-family:var(--mono);font-weight:500;font-size:16px;letter-spacing:.24em;text-transform:uppercase;color:var(--luz)}
.feito .q span{font-size:30px;font-weight:450;color:var(--branco);letter-spacing:-.01em}

/* ---------- chat da IA (computador) ---------- */
.chat{border-radius:30px;padding:34px 38px;display:flex;flex-direction:column;gap:22px}
.chat .eu{align-self:flex-end;max-width:84%;padding:20px 26px;border-radius:24px 24px 6px 24px;background:rgba(46,111,196,.42);box-shadow:inset 0 0 0 1px rgba(142,197,255,.28);font-size:27px;line-height:1.38;color:var(--branco)}
.chat .ia{display:flex;gap:18px;align-items:flex-start;font-size:27px;line-height:1.42;color:var(--gelo)}
.chat .ia .av{flex:none;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--gelo),var(--azul) 60%,var(--navy2));box-shadow:0 0 18px rgba(142,197,255,.5)}
.chat .ia .tx{padding-top:4px}
.chat .rotulo{font-family:var(--mono);font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--aco);margin-bottom:6px}
.digitando{display:inline-flex;gap:8px;padding:14px 4px}
.digitando i{width:10px;height:10px;border-radius:50%;background:var(--luz);opacity:.3;animation:dig 1.1s infinite}
.digitando i:nth-child(2){animation-delay:.15s}.digitando i:nth-child(3){animation-delay:.3s}
@keyframes dig{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-6px)}}
.cursor::after{content:'';display:inline-block;width:3px;height:1em;margin-left:4px;vertical-align:-.12em;background:var(--luz);animation:pisca .9s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}

/* ---------- celular (WhatsApp com tema da noite) ---------- */
.fone{width:440px;height:900px;border-radius:70px;padding:14px;background:linear-gradient(150deg,#2a3a52,#0b1422 40%,#1c2a40);box-shadow:0 0 0 1.5px rgba(207,227,250,.18),inset 0 0 0 1.5px rgba(0,0,0,.6),0 60px 120px -30px rgba(0,0,0,.85),0 0 120px -30px rgba(46,111,196,.55)}
.fone .tela{position:relative;width:100%;height:100%;border-radius:57px;overflow:hidden;background:#07111f;display:flex;flex-direction:column}
.fone .ilha{position:absolute;left:50%;top:14px;width:126px;height:36px;margin-left:-63px;border-radius:20px;background:#000;z-index:5}
.fone .status{height:58px;flex:none;display:flex;justify-content:space-between;align-items:flex-end;padding:0 38px 8px;font-size:19px;font-weight:600;color:var(--branco)}
.fone .topo{flex:none;display:flex;align-items:center;gap:14px;padding:12px 20px 14px;background:rgba(14,42,79,.85);box-shadow:0 1px 0 rgba(142,197,255,.12)}
.fone .topo .av{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--gelo),var(--azul) 62%,var(--navy2));flex:none}
.fone .topo .nm{display:flex;flex-direction:column;gap:2px}
.fone .topo .nm b{font-size:21px;font-weight:600;color:var(--branco)}
.fone .topo .nm span{font-size:15px;color:var(--luz)}
.fone .msgs{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:18px 16px 22px;background:
  radial-gradient(120% 60% at 50% 0%,rgba(46,111,196,.12),transparent 60%),#06101d;overflow:hidden}
.fone .m{max-width:82%;padding:12px 16px 22px;border-radius:18px;font-size:20px;line-height:1.36;position:relative;color:var(--branco)}
.fone .m.c{align-self:flex-start;background:#13243b;border-top-left-radius:6px}
.fone .m.n{align-self:flex-end;background:#1d4a85;border-top-right-radius:6px}
.fone .m small{position:absolute;right:12px;bottom:5px;font-size:12px;color:rgba(207,227,250,.6)}
.fone .m.sis{align-self:center;background:rgba(142,197,255,.10);color:var(--luz);font-family:var(--mono);font-size:14px;letter-spacing:.1em;padding:8px 14px;border-radius:10px;text-transform:uppercase}
.fone .m{opacity:0;transform:translateY(16px) scale(.97);transition:opacity .3s,transform .3s}
.fone .m.on{opacity:1;transform:none;transition:opacity .5s var(--suave),transform .7s var(--mola)}
.fone .barra{flex:none;height:76px;display:flex;align-items:center;gap:12px;padding:0 16px 10px;background:#0a1626}
.fone .barra i{flex:1;height:46px;border-radius:23px;background:#13243b}
.fone .barra b{width:46px;height:46px;border-radius:50%;background:var(--azul)}

/* ---------- notificação ---------- */
.notif{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:22px;background:rgba(19,36,59,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 0 0 1px rgba(142,197,255,.14),0 20px 40px -20px rgba(0,0,0,.8)}
.notif .ic{flex:none;width:42px;height:42px;border-radius:12px;background:linear-gradient(140deg,var(--azul2),var(--navy3));box-shadow:inset 0 0 0 1px rgba(207,227,250,.25)}
.notif .tx{display:flex;flex-direction:column;gap:4px;font-size:19px;line-height:1.35;color:var(--gelo)}
.notif .tx b{font-size:16px;font-weight:600;color:var(--branco);display:flex;justify-content:space-between;gap:20px}
.notif .tx b em{font-style:normal;font-weight:400;color:var(--aco)}

/* ---------- número grande ---------- */
.numero{font-size:300px;line-height:.82;font-weight:640;letter-spacing:-.06em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff 0%,var(--gelo) 45%,var(--luz) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 40px rgba(74,139,224,.35))}

/* ---------- linhas cartográficas ---------- */
.regua{height:1.5px;background:linear-gradient(90deg,transparent,rgba(142,197,255,.55),transparent)}
.marco{width:10px;height:10px;border-radius:50%;background:var(--luz);box-shadow:0 0 0 6px rgba(142,197,255,.14),0 0 20px var(--luz)}

/* ---------- moldura das cenas de degrau (cabeçalho fixo nos 3 cliques) ---------- */
.d-cab{left:120px;top:60px}
.d-mt{right:120px;top:66px}
.d-pas{right:120px;top:142px}
.d-cab .degrau .num{font-size:112px}
.d-cab .degrau .sel .nome{font-size:58px}
.alerta{display:flex;align-items:center;gap:20px;font-size:40px;font-weight:500;letter-spacing:-.02em;color:var(--branco)}
.alerta i{flex:none;width:14px;height:14px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 7px rgba(208,115,107,.16),0 0 22px rgba(208,115,107,.8)}
.alerta span{font-weight:300;color:var(--gelo)}
.selo{position:absolute;right:30px;bottom:22px}

/* ---------- foto ---------- */
.foto{position:fixed;z-index:2;pointer-events:none}
.foto img{width:100%;height:100%;object-fit:cover}

/* standalone: dica de navegação some no embed */
.so-solo{position:fixed;right:28px;bottom:22px;z-index:50;font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:rgba(127,156,194,.5);text-transform:uppercase}
html.embed .so-solo{display:none}