/* =====================================================================
   16 · Números da edição 2026 (p08) — painel de controle de missão
   Quatro módulos em placas metálicas (gênero, idade, origem, procedência),
   a placa magenta do impacto estimado em 2027 e a foto real loira-grito.
   2026 = ciano (dado), 2027 = magenta (projeção), violeta faz a ponte.
   ===================================================================== */
#numeros {
  --nm-top: calc(var(--hud-h) + clamp(12px, 3vh, 34px));
  --nm-bot: clamp(14px, 3vh, 34px);
  --nm-gap: clamp(10px, 1.5vh, 16px);
}

/* ---------- Fundo: grade de sala de controle, "2026" gigante, varredura ---------- */
#numeros .num-stage { isolation: isolate; }
#numeros .num-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: clip; }
#numeros .num-bg::before { /* chão escuro para o texto, o céu do ato IV aparece nas bordas */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 80% at 32% 55%, rgba(2, 1, 10, .82), rgba(2, 1, 10, .45) 60%, transparent 100%);
}
#numeros .num-bg__grid {
  position: absolute; inset: -10% -5%;
  background-image: linear-gradient(rgba(0, 216, 248, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 216, 248, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(60% 60% at 40% 60%, #000 20%, transparent 80%); mask-image: radial-gradient(60% 60% at 40% 60%, #000 20%, transparent 80%);
}
#numeros .num-bg__year {
  position: absolute; left: -1vw; bottom: -7vh; transform: skewX(-8deg);
  font-family: var(--f-mega); font-size: min(38vw, 70vh); line-height: 1; letter-spacing: -.02em; color: transparent;
  -webkit-text-stroke: 1.5px rgba(0, 216, 248, .11); user-select: none;
}
#numeros .num-bg__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 16vh; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(0, 216, 248, .08) 70%, rgba(170, 245, 255, .35) 98%, transparent);
}

/* ---------- Grade ---------- */
#numeros .num-grid {
  position: relative; height: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 29vw, 450px); grid-template-rows: auto minmax(0, 1fr);
  column-gap: clamp(24px, 3.4vw, 60px); row-gap: clamp(10px, 2.2vh, 24px);
  padding-top: var(--nm-top); padding-bottom: var(--nm-bot);
}
#numeros .num-head { grid-column: 1; grid-row: 1; display: grid; justify-items: start; gap: clamp(4px, 1vh, 12px); }
#numeros .num-title { font-size: clamp(40px, min(4.9vw, 8.4vh), 92px); line-height: 1.12; white-space: nowrap; }
#numeros .num-title__l2 { display: inline; }
/* tela alta: título em duas linhas, como na lâmina */
@media (min-width: 821px) and (min-height: 860px) {
  #numeros .num-title { font-size: clamp(44px, min(5.7vw, 8.6vh), 100px); white-space: normal; }
  #numeros .num-title__l2 { display: block; }
}
#numeros .num-title .sw { padding-right: .05em; }
#numeros .sw-mask { padding-top: .26em; margin-top: -.26em; padding-bottom: .1em; margin-bottom: -.1em; padding-right: .08em; margin-right: -.08em; }
#numeros .num-year { color: var(--cyan); }
#numeros .title-chrome .num-year .sw, #numeros .title-chrome .num-year .sc { background: linear-gradient(178deg, #e6fbff 0%, #7befff 40%, #00d8f8 55%, #b8f6ff 80%); -webkit-background-clip: text; background-clip: text; }

/* ---------- Console ---------- */
#numeros .num-console {
  grid-column: 1; grid-row: 2; align-self: start; min-height: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nm-gap);
}
/* padding lateral >= 26px: o parafuso da placa (centro a .95 x --bevel do canto) não encosta no "01" nem no LED.
   container: o número se mede pela largura REAL do módulo (em 1920 a coluna é estreita para 3,5vw) */
#numeros .num-mod { overflow: clip; container-type: inline-size; display: grid; align-content: start; gap: clamp(6px, 1.1vh, 12px); padding: clamp(12px, 1.8vh, 20px) clamp(26px, 2vw, 32px) clamp(14px, 2vh, 22px); --c1: var(--cyan); --c2: var(--violet); }
#numeros .num-mod__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#numeros .num-mod__h { display: inline-flex; align-items: baseline; gap: .8em; font-family: var(--f-mono); font-weight: 500; font-size: clamp(10.5px, .55vw + 4px, 12px); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
#numeros .num-mod__h span { color: var(--cyan); font-weight: 700; }
#numeros .num-led { width: 8px; height: 8px; border-radius: 50%; background: #00d8f8; box-shadow: 0 0 10px rgba(0, 216, 248, .9); flex: none; }

#numeros .num-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
#numeros .num-v { display: grid; justify-items: start; gap: 2px; }
#numeros .num-v--end { justify-items: end; text-align: right; }
#numeros .num-v__line { display: inline-flex; align-items: baseline; gap: .22em; }
#numeros .num-v__n {
  font-family: var(--f-mega); font-size: clamp(30px, min(3.5vw, 6.2vh, 17cqi), 64px); line-height: 1.04; padding-top: .06em;
  display: inline-flex; transform: skewX(-8deg); font-variant-numeric: tabular-nums;
}
#numeros .num-v__u { font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(15px, 1.25vw, 22px); letter-spacing: .03em; }
#numeros .num-v__l { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: clamp(12.5px, min(.6vw + 6px, 6cqi), 16px); line-height: 1.15; color: #e9e6f7; }
#numeros .num-v--c .num-v__n, #numeros .num-v--c .num-v__u { color: var(--cyan); filter: drop-shadow(0 0 12px rgba(0, 216, 248, .55)); }
#numeros .num-v--m .num-v__n, #numeros .num-v--m .num-v__u { color: var(--magenta); filter: drop-shadow(0 0 12px rgba(240, 0, 240, .55)); }
#numeros .num-v--v .num-v__n, #numeros .num-v--v .num-v__u { color: #b27cff; filter: drop-shadow(0 0 12px rgba(120, 0, 240, .8)); }
#numeros .num-v__n .odo__col { height: 1.04em; }

/* 01 · barra dividida 55/45 */
#numeros .num-bar { position: relative; height: 10px; margin-top: 2px; background: rgba(255, 255, 255, .06); }
#numeros .num-bar__c, #numeros .num-bar__m { position: absolute; top: 0; bottom: 0; }
#numeros .num-bar__c { left: 0; width: calc(55% - 3px); transform-origin: 0 50%; background: linear-gradient(90deg, rgba(0, 216, 248, .55), var(--cyan)); box-shadow: 0 0 12px rgba(0, 216, 248, .7); }
#numeros .num-bar__m { right: 0; width: calc(45% - 3px); transform-origin: 100% 50%; background: linear-gradient(270deg, rgba(240, 0, 240, .55), var(--magenta)); box-shadow: 0 0 12px rgba(240, 0, 240, .7); }
#numeros .num-bar__spark { position: absolute; left: 55%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: radial-gradient(circle, #fff 0 22%, rgba(120, 0, 240, .9) 40%, transparent 70%); }

/* 02 · régua de idade 0–60 */
#numeros .num-ruler { position: relative; height: 30px; margin-top: 2px; }
#numeros .num-ruler__track { position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 1px, transparent 1px calc(100% / 12)) , rgba(255, 255, 255, .08); background-size: 100% 6px, 100% 2px; background-repeat: no-repeat; }
#numeros .num-ruler__track::before { content: ''; position: absolute; left: 0; right: 0; top: -3px; height: 8px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 1px, transparent 1px 100%); background-size: calc(100% / 6 - .1px) 100%; }
#numeros .num-ruler__fill { position: absolute; left: 0; top: 8px; height: 2px; width: 100%; transform-origin: 0 50%; }
#numeros .num-ruler__fill--a { background: linear-gradient(90deg, rgba(0, 216, 248, .3), var(--cyan)); box-shadow: 0 0 8px rgba(0, 216, 248, .8); transform: scaleX(.7); }
#numeros .num-ruler__fill--k { top: 7px; height: 4px; background: linear-gradient(90deg, rgba(120, 0, 240, .4), #b27cff); box-shadow: 0 0 8px rgba(120, 0, 240, .9); transform: scaleX(.11333); }
#numeros .num-ruler__mk { position: absolute; left: 0; top: 0; width: 100%; height: 18px; pointer-events: none; }
#numeros .num-ruler__mk::before { content: ''; position: absolute; left: -6px; top: 3px; width: 12px; height: 12px; transform: rotate(45deg); border: 2px solid #fff; }
#numeros .num-ruler__mk--a { transform: translateX(70%); }
#numeros .num-ruler__mk--a::before { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
#numeros .num-ruler__mk--k { transform: translateX(11.333%); }
#numeros .num-ruler__mk--k::before { background: var(--violet); box-shadow: 0 0 10px var(--violet); }
#numeros .num-ruler__t { position: absolute; left: var(--x); bottom: -2px; transform: translateX(-50%); font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; color: var(--mute-2); }
#numeros .num-ruler__t:first-of-type { transform: none; }
#numeros .num-ruler__t:last-of-type { transform: translateX(-100%); }

/* 03 · medidor 64/36 */
#numeros .num-orig { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(10px, 1.2vw, 20px); }
#numeros .num-gauge { width: 100%; height: auto; overflow: visible; }
#numeros .num-gauge__track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 12; }
#numeros .num-gauge__arc { fill: none; stroke-width: 12; }
#numeros .num-gauge__arc--c { stroke: var(--cyan); filter: drop-shadow(0 0 6px rgba(0, 216, 248, .9)); }
#numeros .num-gauge__arc--m { stroke: var(--magenta); filter: drop-shadow(0 0 6px rgba(240, 0, 240, .9)); }
#numeros .num-gauge__ticks line { stroke: rgba(255, 255, 255, .35); stroke-width: 1.2; }
#numeros .num-gauge__needle path { fill: #fff; filter: drop-shadow(0 0 5px rgba(255, 255, 255, .8)); }
#numeros .num-gauge__needle circle { fill: #0b0620; stroke: #fff; stroke-width: 2; }
#numeros .num-orig__vals { display: grid; gap: clamp(4px, .8vh, 10px); }
#numeros .num-orig__vals .num-v__n { font-size: clamp(28px, min(2.9vw, 5.2vh, 14cqi), 54px); }

/* 04 · procedência */
#numeros .num-mod--from { grid-template-rows: auto minmax(0, 1fr); }
#numeros .num-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-self: center; }
#numeros .num-trio .num-v { justify-items: center; text-align: center; padding-inline: 6px; }
#numeros .num-trio .num-v + .num-v { border-left: 1px solid rgba(0, 216, 248, .22); }

/* Impacto 2027 */
#numeros .num-impact {
  grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(14px, 2vw, 34px);
  padding: clamp(12px, 1.8vh, 20px) clamp(20px, 2.6vw, 42px);
}
#numeros .num-impact__k {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.15;
  font-size: clamp(15px, .9vw + 5px, 22px); color: #fff; max-width: 21ch; padding-right: clamp(14px, 2vw, 34px); border-right: 2px solid rgba(240, 0, 240, .6);
}
#numeros .num-impact__v {
  /* O valor se ajusta à largura REAL da coluna (container query): "R$ 18 milhões" nunca é cortado pela placa */
  justify-self: stretch; min-width: 0; container-type: inline-size; display: flex; align-items: baseline; gap: .22em; white-space: nowrap;
  font-family: var(--f-mega); font-size: clamp(30px, min(4.6vw, 8.4vh), 84px); line-height: 1.04; padding-top: .06em;
  color: var(--magenta); transform: skewX(-8deg); filter: drop-shadow(0 0 14px rgba(240, 0, 240, .7)) drop-shadow(0 0 32px rgba(240, 0, 240, .35));
}
#numeros .num-impact__n { display: inline-flex; }
/* ~6,9 em de largura no Anton inclinado: cabe em 100cqi com folga para a inclinação */
#numeros .num-impact__v > span { font-size: min(1em, calc(100cqi / 7)); }
#numeros .num-impact__bolts { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#numeros .num-bolt { vector-effect: non-scaling-stroke; }
#numeros .num-photo__bolts .num-bolt { stroke: url(#g-neon-v); }

/* ---------- Foto ---------- */
#numeros .num-photo { grid-column: 2; grid-row: 1 / -1; position: relative; align-self: center; justify-self: end; width: 100%; max-height: 100%; display: grid; gap: 8px; }
#numeros .num-photo__frame { position: relative; width: 100%; aspect-ratio: 936 / 1316; max-height: calc(100svh - var(--nm-top) - var(--nm-bot) - 26px); --bv: clamp(26px, 3.4vw, 60px); }
#numeros .num-photo__in {
  position: absolute; inset: 6px; overflow: hidden;
  clip-path: polygon(calc(var(--bv) - 3px) 0, calc(100% - var(--bv) + 3px) 0, 100% calc(var(--bv) - 3px), 100% calc(100% - var(--bv) + 3px), calc(100% - var(--bv) + 3px) 100%, calc(var(--bv) - 3px) 100%, 0 calc(100% - var(--bv) + 3px), 0 calc(var(--bv) - 3px));
}
#numeros .num-photo__in img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transform-origin: 50% 40%; }
/* max-width: none — o núcleo limita todo svg a 100%, e aí o raio "da direita" caía DENTRO da foto, sobre o rosto */
#numeros .num-photo__bolts { position: absolute; left: -7%; top: 4%; height: calc(100% - 34px - 8%); width: 114%; max-width: none; overflow: visible; pointer-events: none; }
#numeros .num-photo__cap { justify-self: end; }

/* ---------- Notebook baixo (1280×600, 1366×650 com a barra do navegador): painel mais justo ---------- */
@media (min-width: 821px) and (max-height: 680px) {
  #numeros { --nm-top: calc(var(--hud-h) + 10px); --nm-bot: 12px; --nm-gap: 8px; }
  #numeros .num-grid { row-gap: 8px; }
  #numeros .num-head { gap: 2px; }
  #numeros .num-mod { padding-block: 9px 10px; gap: 4px; }
  #numeros .num-ruler { height: 26px; }
  #numeros .num-impact { padding-block: 8px; }
}

@media (min-width: 821px) and (max-height: 580px) {
  #numeros { --nm-top: calc(var(--hud-h) + 6px); --nm-gap: 6px; }
  #numeros .num-grid { row-gap: 6px; }
  #numeros .num-title { font-size: clamp(34px, min(4.9vw, 8vh), 92px); }
  #numeros .num-v__n { font-size: clamp(26px, min(3.5vw, 6vh, 17cqi), 64px); }
  #numeros .num-orig__vals .num-v__n { font-size: clamp(24px, min(2.9vw, 5vh, 14cqi), 54px); }
  #numeros .num-ruler { height: 24px; }
  #numeros .num-impact__v { font-size: clamp(30px, min(4.6vw, 7vh), 84px); }
}

/* ---------- Celular (e celular deitado, altura < 520): sem fixar, tudo em fluxo ---------- */
@media (max-width: 820px), (max-height: 519px) {
  #numeros { --nm-top: calc(var(--hud-h) + 28px); --nm-bot: 170px; }
  #numeros .num-stage { height: auto; overflow: visible; }
  #numeros .num-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 18px; height: auto; }
  #numeros .num-head { grid-column: 1; grid-row: auto; }
  #numeros .num-title { font-size: clamp(40px, 12vw, 60px); white-space: normal; }
  #numeros .num-title__l2 { display: block; }
  #numeros .num-photo { grid-column: 1; grid-row: auto; justify-self: center; width: min(100%, 420px); }
  #numeros .num-photo__frame { aspect-ratio: 4 / 4.3; max-height: none; --bv: 30px; }
  #numeros .num-photo__cap { justify-self: start; }
  #numeros .num-photo__bolts { left: -3%; width: 106%; }
  #numeros .num-head { order: 1; } #numeros .num-photo { order: 2; } #numeros .num-console { order: 3; }
  /* 58 + 18 de row-gap: na parada do painel (módulo 01 a 64 px do topo) a legenda da foto já saiu inteira por cima, nada atrás do HUD */
  #numeros .num-console { grid-column: 1; grid-row: auto; grid-template-columns: minmax(0, 1fr); gap: 9px; margin-top: 58px; }
  #numeros .num-mod { padding: 11px 20px 12px; gap: 6px; }
  #numeros .num-impact { grid-template-columns: minmax(0, 1fr); gap: 4px; justify-items: start; padding: 12px 20px 13px; }
  #numeros .num-impact__k { border-right: 0; padding-right: 0; max-width: none; font-size: 16px; }
  #numeros .num-impact__v { font-size: clamp(40px, 13vw, 58px); }
  #numeros .num-v__n { font-size: clamp(36px, min(11vw, 15cqi), 52px); }
  #numeros .num-orig__vals .num-v__n { font-size: clamp(30px, min(8.8vw, 10cqi), 40px); }
  #numeros .num-gauge { max-width: 250px; justify-self: center; } /* tablet em pé: o medidor não vira um painel inteiro */
  #numeros .num-bg__year { font-size: 60vw; bottom: auto; top: 30%; }
  #numeros .num-bg::before { background: rgba(2, 1, 10, .55); }
}
/* celular baixo (375×667): painel compacto para os quatro módulos e o impacto caberem numa tela abaixo do HUD */
@media (max-width: 820px) and (max-height: 720px), (max-height: 519px) {
  #numeros .num-console { gap: 7px; }
  #numeros .num-mod { padding: 8px 20px 9px; gap: 3px; }
  #numeros .num-v__n { font-size: clamp(32px, min(10vw, 12cqi), 44px); }
  #numeros .num-orig__vals .num-v__n { font-size: clamp(28px, min(8vw, 9cqi), 36px); }
  #numeros .num-orig__vals { gap: 2px; }
  #numeros .num-gauge { max-width: 190px; }
  #numeros .num-ruler { height: 27px; }
  #numeros .num-impact { padding: 9px 20px 10px; gap: 2px; }
  #numeros .num-impact__v { font-size: clamp(38px, 11.5vw, 48px); }
}
/* Celular baixo em pé (320×568, 360×640): o painel não cabe numa tela e vira duas paradas.
   O respiro antes do módulo 03 faz a 2ª parada começar limpa: o 02 já saiu inteiro por cima do HUD. */
@media (max-width: 820px) and (max-height: 659px) {
  #numeros { --nm-bot: max(170px, 42svh); } /* rolagem para a 2ª parada ancorar o 03 no topo */
  #numeros .num-mod--orig { margin-top: 64px; }
}
/* Celular deitado (844×390): título ao lado da foto; o painel em duas "páginas" (01–02, depois
   03–04 com o impacto), separadas por respiro para nenhuma parada mostrar bloco pela metade sob o HUD */
@media (min-width: 821px) and (max-height: 519px) {
  #numeros .num-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); column-gap: 24px; }
  #numeros .num-head { grid-column: 1; grid-row: 1; align-self: center; }
  #numeros .num-title { font-size: clamp(40px, 6.4vw, 56px); }
  #numeros .num-photo { grid-column: 2; grid-row: 1; width: 100%; justify-self: end; }
  #numeros .num-photo__frame { aspect-ratio: 16 / 10; }
  #numeros .num-console { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #numeros .num-mod { padding-inline: 26px; }
  #numeros .num-mod--orig, #numeros .num-mod--from { margin-top: 60px; }
  #numeros .num-impact { margin-top: 50px; }
}
/* só em tela muito estreita o medidor vai para cima dos valores (em 360–380 lado a lado ainda cabe) */
@media (max-width: 340px) {
  #numeros .num-orig { grid-template-columns: minmax(0, 1fr); }
  #numeros .num-gauge { max-width: 220px; }
}