/* =====================================================================
   19 · Impacto econômico · Circuito Sportsland — p06 do plano
   Cena fixada: R$ 120 milhões em mega com raios elétricos, placa-
   amplificador "R$ 8 milhões de investimento direto" ligada por cabo ao
   número, e a equação 14 mil + 28 mil = 42 mil turistas* com cabos que
   se juntam. Fundo: tela de alto-falante, fachos de palco, multidão.
   Tudo sob #impacto.
   ===================================================================== */

#impacto .im-stage { background: transparent; }

/* ---------- Fundo de palco ---------- */
#impacto .im-bg {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  /* a base do palco (multidão, brilho) se dissolve no céu: sem degrau reto quando a cena sai da tela */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent);
}
#impacto .im-bg::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(45% 55% at 24% 42%, rgba(240, 0, 240, .16), transparent 70%),
    radial-gradient(40% 50% at 76% 38%, rgba(0, 216, 248, .12), transparent 70%),
    radial-gradient(80% 45% at 50% 105%, rgba(120, 0, 240, .45), transparent 72%);
}
#impacto .im-grille {
  position: absolute; inset: 6% 0 0 44%;
  background:
    radial-gradient(circle, rgba(210, 214, 230, .16) 0 1.3px, transparent 1.8px) 0 0 / 9px 9px,
    radial-gradient(circle, rgba(0, 0, 0, .7) 0 2.4px, transparent 2.8px) 4.5px 4.5px / 9px 9px;
  -webkit-mask-image: radial-gradient(70% 70% at 60% 45%, #000 30%, transparent 75%);
  mask-image: radial-gradient(70% 70% at 60% 45%, #000 30%, transparent 75%);
  opacity: .8;
}
#impacto .im-beam {
  position: absolute; bottom: -6%; width: 16vw; height: 118%;
  transform-origin: 50% 100%;
  background: linear-gradient(0deg, rgba(255, 255, 255, .0) 0%, var(--bc) 8%, transparent 78%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
  clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0);
  opacity: .5; mix-blend-mode: screen; will-change: transform;
}
#impacto .im-beam--1 { left: 50%; --bc: rgba(0, 216, 248, .35); transform: rotate(-24deg); }
#impacto .im-beam--2 { left: 62%; --bc: rgba(240, 0, 240, .32); transform: rotate(-8deg); }
#impacto .im-beam--3 { left: 74%; --bc: rgba(0, 216, 248, .3); transform: rotate(10deg); }
#impacto .im-beam--4 { left: 86%; --bc: rgba(240, 0, 240, .3); transform: rotate(24deg); }
#impacto .im-crowd { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 20%; overflow: visible; }
#impacto .im-crowd .im-crowd__back { fill: #07030f; }
#impacto .im-crowd .im-crowd__front { fill: #000; }
#impacto .im-crowd .im-crowd__rim { fill: none; stroke: url(#im-g-merge); stroke-width: 1.2; opacity: .55; }

/* ---------- Raios e cabos ---------- */
#impacto .im-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
#impacto .im-bolts path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#impacto .im-bolts .im-bolt__glow { stroke-width: 6; opacity: .35; filter: blur(3px); }
#impacto .im-bolts .im-bolt__core { stroke: #fff; stroke-width: 1.4; }
#impacto .im-bolts .is-c .im-bolt__glow { stroke: #00d8f8; }
#impacto .im-bolts .is-m .im-bolt__glow { stroke: #f000f0; }
#impacto .im-cable__glow { fill: none; stroke-width: 9; stroke-linecap: round; opacity: .3; filter: blur(3.5px); stroke-dasharray: 100 100; }
#impacto .im-cable__core { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100 100; }
#impacto .im-cable__hot { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 3 97; opacity: 0; filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px rgba(240, 0, 240, .9)); }
#impacto .im-cable--a path:not(.im-cable__hot) { stroke: var(--cyan); }
#impacto .im-cable--b path:not(.im-cable__hot) { stroke: var(--magenta); }
#impacto .im-cable--sum path:not(.im-cable__hot) { stroke: url(#im-g-merge); }
#impacto .im-cable--amp path:not(.im-cable__hot) { stroke: url(#im-g-amp); }

/* ---------- Grade ---------- */
#impacto .im-grid {
  position: relative; z-index: 2; height: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: center; gap: clamp(24px, 4vw, 72px);
  padding-top: calc(var(--hud-h) + clamp(4px, 1.6svh, 20px)); padding-bottom: clamp(14px, 3svh, 36px);
}
#impacto .im-left { display: grid; gap: clamp(8px, 1.8svh, 22px); align-content: center; min-width: 0; }
#impacto .im-title { font-size: clamp(34px, min(3.9vw, 6.6svh), 72px); line-height: 1.12; margin-top: 2px; }
#impacto .im-title .sw-mask { padding: .24em .14em .1em; margin: -.24em -.14em -.1em; }

#impacto .im-hero { display: grid; gap: clamp(4px, 1svh, 12px); }
#impacto .im-mega {
  position: relative; display: inline-grid; justify-items: start; justify-self: start;
  font-family: var(--f-mega); font-weight: 400; letter-spacing: -.01em;
  font-size: clamp(78px, min(9.2vw, 15.6svh), 168px);
  transform: skewX(-8deg); transform-origin: 0 100%;
  filter: drop-shadow(-3px 0 0 rgba(0, 216, 248, .9)) drop-shadow(3px 0 0 rgba(240, 0, 240, .85)) drop-shadow(0 0 22px rgba(240, 0, 240, .45)) drop-shadow(0 10px 26px rgba(0, 0, 0, .9));
}
#impacto .im-mega__row { display: inline-flex; align-items: flex-start; line-height: 1.04; padding-top: .06em; }
#impacto .im-cur { font-size: .5em; line-height: 1.04; margin: .1em .18em 0 0; }
#impacto .im-mil { font-size: .74em; line-height: 1.14; padding-top: .18em; margin-top: -.12em; text-transform: uppercase; }
#impacto .im-cur, #impacto .im-mil, #impacto .im-mega__n .odo__strip > span, #impacto .im-mega__n > span:not(.odo__col) {
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
}
#impacto .im-mega__n { color: #fff; }
#impacto .odo__col { text-align: center; }
#impacto .odo__strip > span { display: block; }
#impacto .im-hero__l { font-size: clamp(16px, .6vw + 10px, 21px); line-height: 1.4; color: #efeaff; max-width: 30ch; font-weight: 500; }

/* Amplificador */
#impacto .im-amp { filter: drop-shadow(0 0 14px rgba(240, 0, 240, .45)); max-width: 560px; }
#impacto .im-amp__plate { --bevel: 16px; display: grid; gap: clamp(8px, 1.2svh, 12px); padding: clamp(10px, 1.6svh, 16px) clamp(14px, 1.6vw, 22px) clamp(12px, 1.8svh, 18px); }
#impacto .im-amp__plate::before {
  background:
    radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px) 0 0 / 5px 5px,
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 30%),
    linear-gradient(160deg, #2a2236 0%, #0c0914 55%, #1b1526 100%);
}
#impacto .im-amp__top { display: flex; align-items: center; gap: clamp(8px, 1vw, 14px); }
#impacto .im-amp__jack {
  order: 9; margin-left: auto; width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: radial-gradient(circle, #000 0 4px, #8a90a2 4.5px 6px, #d6dae3 6.5px 7.5px, #3a3d4c 8px 10px);
  box-shadow: 0 0 10px rgba(240, 0, 240, .6);
}
#impacto .im-knob {
  position: relative; width: clamp(20px, 1.7vw, 26px); height: clamp(20px, 1.7vw, 26px); border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #f4f6fa 0, #b9bfcc 30%, #4b4f60 70%, #1a1a24 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .7), 0 0 0 2px #0a0710;
  will-change: transform;
}
#impacto .im-knob::after { content: ''; position: absolute; left: 50%; top: 8%; width: 2px; height: 36%; margin-left: -1px; background: var(--magenta); box-shadow: 0 0 5px var(--magenta); border-radius: 1px; }
#impacto .im-amp__leds { display: flex; gap: 3px; margin-left: 6px; }
#impacto .im-amp__leds i { width: 6px; height: 14px; background: #2a1030; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
#impacto .im-amp__leds i.is-on { background: var(--magenta); box-shadow: 0 0 8px var(--magenta); }
#impacto .im-amp__leds i:nth-child(-n + 4).is-on { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
#impacto .im-amp__leds i:nth-child(n + 5):nth-child(-n + 7).is-on { background: var(--violet); box-shadow: 0 0 8px var(--violet); }
#impacto .im-amp__screen {
  padding: clamp(8px, 1.4svh, 14px) clamp(12px, 1.4vw, 18px);
  background: linear-gradient(180deg, rgba(240, 0, 240, .1), rgba(20, 0, 30, .6)); box-shadow: inset 0 0 0 1px rgba(240, 0, 240, .55), inset 0 0 24px rgba(240, 0, 240, .2);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
#impacto .im-amp__n {
  display: flex; align-items: baseline; gap: .22em; white-space: nowrap;
  font-family: var(--f-mega); font-size: clamp(34px, min(3.3vw, 5.8svh), 58px); line-height: 1.04; padding-top: .06em; color: var(--magenta);
  filter: drop-shadow(0 0 12px rgba(240, 0, 240, .7)); transform: skewX(-8deg); transform-origin: 0 100%;
}
#impacto .im-cur2 { font-size: .62em; }
#impacto .im-amp__u { text-transform: uppercase; }
#impacto .im-amp__l {
  font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(15px, min(1.3vw, 2.3svh), 21px); line-height: 1.2; color: #fff; margin-top: 2px;
}

/* Equação */
#impacto .im-right { min-width: 0; display: grid; justify-items: center; }
#impacto .im-eq { display: grid; justify-items: center; width: min(100%, 620px); }
#impacto .im-eq__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(10px, 1.2vw, 18px); width: 100%; }
#impacto .im-add--a { filter: drop-shadow(0 0 14px rgba(0, 216, 248, .5)); }
#impacto .im-add--b { filter: drop-shadow(0 0 14px rgba(240, 0, 240, .5)); }
#impacto .im-add__plate { --bevel: 14px; display: grid; place-items: center; padding: clamp(12px, 2.2svh, 26px) clamp(10px, 1.2vw, 18px); }
#impacto .im-add__plate::before, #impacto .im-sum__plate::before {
  background:
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px) 0 0 / 6px 6px,
    linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 40%),
    linear-gradient(160deg, #1d1a2c 0%, #07050f 60%, #131024 100%);
}
#impacto .im-add__n {
  font-family: var(--f-mega); font-size: clamp(40px, min(4.4vw, 7.6svh), 84px); line-height: 1.04; padding-top: .06em; white-space: nowrap;
  text-transform: uppercase; transform: skewX(-8deg);
}
#impacto .im-add--a .im-add__n { color: var(--cyan); filter: drop-shadow(0 0 12px rgba(0, 216, 248, .6)); }
#impacto .im-add--b .im-add__n { color: var(--magenta); filter: drop-shadow(0 0 12px rgba(240, 0, 240, .6)); }
#impacto .im-node {
  display: grid; place-items: center; width: clamp(38px, 3.2vw, 54px); height: clamp(38px, 3.2vw, 54px); border-radius: 50%;
  font-family: var(--f-display); font-style: normal; font-weight: 900; font-size: clamp(28px, 2.4vw, 40px); line-height: 1; color: #fff;
  background: radial-gradient(circle at 35% 30%, #4a4e60, #14121e 70%); box-shadow: 0 0 0 2px #c9ced8, 0 0 0 4px #0a0710, 0 0 18px rgba(120, 0, 240, .8);
  position: relative; z-index: 2;
}
#impacto .im-eq__l {
  margin-top: clamp(10px, 1.8svh, 18px); padding: .55em 1em .5em; white-space: nowrap;
  font-family: var(--f-mono); font-weight: 700; font-size: clamp(11px, .85vw, 14px); letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: rgba(8, 4, 18, .85); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  position: relative; z-index: 2;
}
#impacto .im-node--eq { margin-top: clamp(30px, 6svh, 70px); }
#impacto .im-sum { margin-top: clamp(22px, 4.4svh, 52px); width: min(100%, 420px); filter: drop-shadow(0 0 20px rgba(0, 216, 248, .55)); }
#impacto .im-sum__plate { --bevel: 18px; display: grid; justify-items: center; padding: clamp(10px, 2svh, 22px) 20px clamp(12px, 2.2svh, 24px); }
#impacto .im-sum__n {
  font-family: var(--f-mega); font-size: clamp(64px, min(7.2vw, 12.4svh), 136px); line-height: 1.04; padding-top: .06em; white-space: nowrap;
  text-transform: uppercase; color: var(--cyan); filter: drop-shadow(0 0 16px rgba(0, 216, 248, .65)); transform: skewX(-8deg);
}
#impacto .im-sum__l {
  font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: .06em;
  font-size: clamp(18px, min(1.7vw, 3svh), 30px); line-height: 1.12; color: #fff; padding-top: .04em;
}

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  #impacto .im-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 28px; }
}

/* Coluna única (celular e tablet em pé): o bloco fica no meio da altura livre, e os tamanhos
   crescem com a tela — no celular de 390 px são os mesmos; no tablet deixam de parecer miniatura. */
@media (max-width: 820px) {
  #impacto .im-cable--amp { display: none; }
  #impacto .im-grid { grid-template-columns: minmax(0, 1fr); align-content: center; gap: clamp(14px, 3vw, 26px); padding-top: calc(var(--hud-h) + 10px); padding-bottom: 12px; }
  #impacto .im-left { gap: clamp(8px, 2vw, 16px); }
  #impacto .im-title { font-size: clamp(28px, min(8.4vw, 5svh), 52px); }
  #impacto .im-mega { font-size: clamp(56px, min(17vw, 9svh), 120px); }
  #impacto .im-hero__l { font-size: clamp(14.5px, 3.7vw, 19px); }
  #impacto .im-amp { max-width: none; }
  #impacto .im-amp__plate { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 8px 12px; --bevel: 12px; }
  #impacto .im-amp__top { flex-direction: column; gap: 6px; }
  #impacto .im-knob:nth-child(n + 4), #impacto .im-amp__leds, #impacto .im-amp__jack { display: none; }
  #impacto .im-knob { width: clamp(18px, 4.6vw, 26px); height: clamp(18px, 4.6vw, 26px); }
  #impacto .im-amp__screen { padding: 6px 10px; }
  #impacto .im-amp__n { font-size: clamp(30px, min(7.7vw, 4.4svh), 48px); }
  #impacto .im-amp__l { font-size: clamp(13px, 3.3vw, 18px); }
  #impacto .im-eq { width: 100%; }
  #impacto .im-add__plate { padding: clamp(8px, 2vw, 16px); --bevel: 10px; }
  #impacto .im-add__n { font-size: clamp(30px, min(9vw, 5.2svh), 60px); }
  #impacto .im-node { width: clamp(32px, 6vw, 46px); height: clamp(32px, 6vw, 46px); font-size: clamp(24px, 4.4vw, 34px); }
  #impacto .im-eq__l { margin-top: 8px; font-size: clamp(10.5px, 2.7vw, 13px); }
  #impacto .im-node--eq { margin-top: clamp(14px, 3.6vw, 26px); }
  #impacto .im-sum { margin-top: clamp(10px, 2.6vw, 20px); width: min(100%, max(300px, 54vw)); }
  #impacto .im-sum__plate { padding: 6px 14px 10px; --bevel: 12px; }
  #impacto .im-sum__n { font-size: clamp(46px, min(14vw, 7.6svh), 96px); }
  #impacto .im-sum__l { font-size: clamp(16px, 4vw, 26px); }
  #impacto .im-grille { inset: 30% 0 0 0; }
  #impacto .im-beam { width: 34vw; }
  #impacto .im-crowd { height: 12%; }
}

@media (max-width: 820px) and (max-height: 740px) {
  #impacto .im-mega { font-size: clamp(48px, 14vw, 64px); }
  #impacto .im-hero__l { font-size: 13px; }
  #impacto .im-sum__n { font-size: 44px; }
  #impacto .im-add__n { font-size: 30px; }
}

/* Movimento reduzido: a cena não fixa; tudo cabe e fica legível */
.reduced #impacto .im-stage { height: auto; min-height: 100vh; min-height: 100svh; }
.reduced #impacto .im-grid { min-height: 100vh; min-height: 100svh; height: auto; }