/* =====================================================================
   18 · Alcance — p05 do plano
   Cena fixada: +35.000* atletas (circuito) em mega, radiotelescópio em
   wireframe 3D com anéis de sinal subindo, Instagram (3 placas) e
   E-mails (placa com envelope e medidor de 25%). Foto real rock-gesto.
   Tudo sob #alcance.
   ===================================================================== */

#alcance .al-stage { background: transparent; }
#alcance .al-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 58% 92%, rgba(0, 216, 248, .16), transparent 70%),
    radial-gradient(55% 60% at 18% 40%, rgba(32, 0, 88, .55), transparent 72%),
    radial-gradient(50% 60% at 86% 30%, rgba(240, 0, 240, .14), transparent 70%);
  /* a cor some antes das bordas: na chegada e na saída do palco não fica linha reta de cor */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 88%, transparent 100%);
}

/* ---------- Foto (metade direita, dissolvendo no preto) ---------- */
#alcance .al-photo {
  position: absolute; top: 0; right: 0; bottom: 0; width: 46%;
  margin: 0;
}
#alcance .al-photo__win {
  position: absolute; inset: 0; overflow: hidden;
  /* borda de cima em degradê também: na entrada a foto não chega com uma aresta reta */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 16%, #000 36%), linear-gradient(0deg, transparent 0%, #000 22%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 16%, #000 36%), linear-gradient(0deg, transparent 0%, #000 22%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
#alcance .al-photo__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 22%; /* em janela alta (tablet em pé) o logo da camiseta segue inteiro */
  will-change: transform;
}
#alcance .al-photo__grade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, transparent 18%),
    linear-gradient(200deg, rgba(120, 0, 240, .22), transparent 55%),
    radial-gradient(70% 60% at 50% 30%, transparent 40%, rgba(5, 1, 15, .5) 100%);
}
#alcance .al-photo__scan {
  position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 4px);
}
#alcance .al-photo__cap { position: absolute; right: clamp(16px, 3vw, 44px); bottom: clamp(16px, 3.4svh, 40px); }

/* ---------- Radiotelescópio (SVG em px da cena) ---------- */
#alcance .al-dish {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  /* os anéis não passam por cima da coluna de dados */
  -webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 58%); mask-image: linear-gradient(90deg, transparent 38%, #000 58%);
}
#alcance .al-waves path { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; mix-blend-mode: screen; }
#alcance .al-waves path:nth-child(3n + 1) { stroke: #00d8f8; }
#alcance .al-waves path:nth-child(3n + 2) { stroke: #9b3dff; }
#alcance .al-waves path:nth-child(3n) { stroke: #f000f0; }
#alcance .al-waves { filter: drop-shadow(0 0 5px rgba(0, 216, 248, .6)); }
#alcance .al-dish__fill { stroke: none; }
#alcance .al-dish__rings { fill: none; stroke: rgba(201, 206, 216, .55); stroke-width: 1; }
#alcance .al-dish__ribs { fill: none; stroke: rgba(0, 216, 248, .45); stroke-width: 1; }
#alcance .al-dish__sweep { fill: none; stroke: #bff8ff; stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 6px #00d8f8); opacity: .9; }
#alcance .al-dish__rim { fill: none; stroke-width: 3; filter: drop-shadow(0 0 8px rgba(120, 0, 240, .9)) drop-shadow(0 0 16px rgba(0, 216, 248, .5)); }
#alcance .al-dish__struts { fill: none; stroke: rgba(230, 234, 244, .75); stroke-width: 1.4; }
#alcance .al-dish__mount { fill: url(#al-g-mfill); stroke: url(#al-g-mount); stroke-width: 1.4; }
#alcance .al-dish__brace { fill: none; stroke: url(#al-g-brace); stroke-width: 1; }
#alcance .al-dish__feed { fill: #fff; filter: drop-shadow(0 0 6px #00d8f8) drop-shadow(0 0 14px #00d8f8); }
#alcance .al-dish__halo { mix-blend-mode: screen; }

/* ---------- Coluna de dados ---------- */
#alcance .al-grid {
  position: relative; z-index: 2; height: 100%;
  display: flex; align-items: center;
  padding-top: calc(var(--hud-h) + clamp(6px, 2svh, 24px)); padding-bottom: clamp(14px, 3svh, 36px);
}
#alcance .al-copy { width: min(clamp(680px, 40vw, 780px), 53vw); display: grid; gap: clamp(10px, 2.2svh, 26px); }
#alcance .al-head { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 20px; }
#alcance .al-kicker { flex-basis: 100%; }
#alcance .al-title { font-size: clamp(38px, min(4.4vw, 7.4svh), 80px); line-height: 1.12; margin-top: 2px; }
#alcance .al-title .sw-mask { padding: .24em .14em .1em; margin: -.24em -.14em -.1em; }

#alcance .al-hero { display: flex; align-items: flex-end; flex-wrap: wrap; column-gap: clamp(14px, 1.6vw, 26px); row-gap: 2px; margin-top: calc(-1 * clamp(2px, 1svh, 12px)); }
#alcance .al-mega {
  position: relative; display: inline-flex; align-items: flex-start;
  font-family: var(--f-mega); font-weight: 400; line-height: 1.04; letter-spacing: -.01em;
  font-size: clamp(76px, min(10.4vw, 17.5svh), 184px);
  transform: skewX(-8deg); padding-top: .06em;
  filter: drop-shadow(-3px 0 0 rgba(0, 216, 248, .85)) drop-shadow(3px 0 0 rgba(240, 0, 240, .8)) drop-shadow(0 8px 24px rgba(0, 0, 0, .9));
}
#alcance .al-mega__n { color: #fff; }
#alcance .al-mega__n .odo__strip > span,
#alcance .al-mega__n > span:not(.odo__col) {
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
}
#alcance .al-mega__n > .odo__pre { margin-right: .05em; }
#alcance .al-mega__ast { font-size: .42em; line-height: 1; margin-left: .06em; margin-top: .12em; color: #fff; }
#alcance .al-hero__l {
  display: grid; padding-bottom: .5em;
  font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: clamp(28px, min(3vw, 5svh), 54px); line-height: 1.12; color: #fff;
  filter: drop-shadow(0 0 14px rgba(240, 0, 240, .35));
}
#alcance .al-hero__l small {
  font-family: var(--f-mono); font-style: normal; font-weight: 500; font-size: clamp(10.5px, .8vw, 13px);
  letter-spacing: .16em; color: var(--cyan); margin-top: 4px;
}

#alcance .al-group { display: grid; gap: clamp(6px, 1.1svh, 12px); }
#alcance .al-group__k {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: clamp(20px, min(1.8vw, 3.2svh), 30px); line-height: 1.12; color: var(--magenta);
  filter: drop-shadow(0 0 10px rgba(240, 0, 240, .55)); padding-top: .06em;
}
#alcance .al-group__k i { flex: 1; height: 2px; background: linear-gradient(90deg, var(--magenta), var(--violet) 40%, transparent); transform-origin: 0 50%; }
#alcance .al-group__k--c { color: var(--cyan); filter: drop-shadow(0 0 10px rgba(0, 216, 248, .55)); }
#alcance .al-group__k--c i { background: linear-gradient(90deg, var(--cyan), var(--violet) 40%, transparent); }

#alcance .al-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1vw, 16px); }
#alcance .al-stat { display: grid; }
#alcance .al-stat--c { filter: drop-shadow(0 0 10px rgba(0, 216, 248, .35)); }
#alcance .al-stat--m { filter: drop-shadow(0 0 10px rgba(240, 0, 240, .35)); }
#alcance .al-stat__plate { --bevel: 14px; display: grid; align-content: center; gap: 4px; padding: clamp(12px, 1.8svh, 20px) clamp(12px, 1.2vw, 20px) clamp(12px, 1.8svh, 18px); }
#alcance .al-stat__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, .06), transparent 40%), linear-gradient(160deg, #1a1628 0%, #07050f 60%, #120e22 100%); }
#alcance .al-stat__n {
  display: flex; align-items: baseline; gap: .22em; white-space: nowrap;
  font-family: var(--f-mega); font-size: clamp(38px, min(3.6vw, 6.4svh), 66px); line-height: 1.04; padding-top: .06em;
  transform: skewX(-8deg); transform-origin: 0 100%;
}
#alcance .al-unit { font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: lowercase; font-size: .46em; letter-spacing: .01em; }
#alcance .al-stat--c .al-stat__n { color: var(--cyan); filter: drop-shadow(0 0 10px rgba(0, 216, 248, .55)); }
#alcance .al-stat--m .al-stat__n { color: var(--magenta); filter: drop-shadow(0 0 10px rgba(240, 0, 240, .55)); }
#alcance .al-stat__l { font-size: clamp(13px, .45vw + 8px, 16px); line-height: 1.3; color: #e7e3f6; }

#alcance .al-mail { filter: drop-shadow(0 0 12px rgba(0, 216, 248, .35)); }
#alcance .al-mail__plate {
  --bevel: 16px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.15fr) auto; align-items: center; gap: clamp(12px, 1.4vw, 24px);
  padding: clamp(12px, 1.8svh, 20px) clamp(16px, 1.6vw, 26px);
}
#alcance .al-mail__plate::before { background: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px) 0 0 / 6px 6px, linear-gradient(180deg, rgba(0, 216, 248, .08), transparent 50%), linear-gradient(160deg, #141a2c 0%, #06050f 60%, #0f1226 100%); }
#alcance .al-env { width: clamp(46px, 3.8vw, 62px); height: auto; overflow: visible; }
#alcance .al-env__box, #alcance .al-env__flap, #alcance .al-env__fold { fill: none; stroke: var(--cyan); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 100 100; filter: drop-shadow(0 0 4px rgba(0, 216, 248, .8)); }
#alcance .al-env__box { fill: rgba(0, 216, 248, .06); }
#alcance .al-mail__item { display: grid; line-height: 1.2; font-size: clamp(13px, .45vw + 8px, 16px); color: #e7e3f6; }
#alcance .al-mail__item b {
  font-family: var(--f-mega); font-weight: 400; font-size: clamp(28px, min(2.4vw, 4.4svh), 44px); line-height: 1.04; color: var(--cyan);
  filter: drop-shadow(0 0 10px rgba(0, 216, 248, .5)); display: inline-block; transform: skewX(-8deg); transform-origin: 0 100%; padding-top: .06em; white-space: nowrap;
}
#alcance .al-mail__rate { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; }
#alcance .al-mail__rate > span { grid-column: 2; }
#alcance .al-gauge { grid-row: 1 / span 2; width: clamp(38px, 3vw, 48px); height: auto; transform: rotate(-90deg); }
#alcance .al-gauge__bg { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 5; }
#alcance .al-gauge__arc { fill: none; stroke: var(--magenta); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 25 100; filter: drop-shadow(0 0 4px rgba(240, 0, 240, .9)); }
#alcance .al-mail__rate b { color: var(--magenta); filter: drop-shadow(0 0 10px rgba(240, 0, 240, .5)); }
#alcance .al-mail__per {
  display: inline-block; padding: .5em .8em .45em; white-space: nowrap;
  font-family: var(--f-mono); font-size: clamp(11px, .8vw, 13px); letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: rgba(0, 216, 248, .1); box-shadow: inset 0 0 0 1px rgba(0, 216, 248, .5);
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}

/* Passar o mouse numa placa: ela sobe um pouco e a antena dispara uma rajada (JS) */
@media (hover: hover) and (pointer: fine) {
  #alcance .al-stat__plate, #alcance .al-mail__plate { transition: transform .45s var(--ease-out); }
  #alcance .al-stat, #alcance .al-mail { transition: filter .45s var(--ease-out); }
  #alcance .al-stat:hover .al-stat__plate, #alcance .al-mail:hover .al-mail__plate { transform: translateY(-4px); }
  #alcance .al-stat--c:hover, #alcance .al-mail:hover { filter: drop-shadow(0 0 18px rgba(0, 216, 248, .6)); }
  #alcance .al-stat--m:hover { filter: drop-shadow(0 0 18px rgba(240, 0, 240, .6)); }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  #alcance .al-copy { width: min(640px, 60vw); }
  #alcance .al-mail__plate { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
  #alcance .al-mail__period { grid-column: 2 / -1; }
}

@media (max-width: 820px) {
  #alcance .al-dish { -webkit-mask-image: none; mask-image: none; }
  #alcance .al-photo { left: 0; width: 100%; top: 0; bottom: auto; height: 38%; }
  #alcance .al-photo__win {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 52%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 52%, transparent 100%);
  }
  #alcance .al-photo__img { object-position: 50% 6%; }
  #alcance .al-photo__cap { display: none; }
  #alcance .al-grid { align-items: flex-end; padding-top: calc(var(--hud-h) + 12px); padding-bottom: 12px; }
  #alcance .al-copy { width: 100%; gap: 8px; }
  #alcance .al-title { font-size: clamp(32px, 9.4vw, 44px); }
  #alcance .al-mega { font-size: clamp(60px, 19.5vw, 88px); }
  #alcance .al-hero__l { font-size: clamp(24px, 7vw, 30px); padding-bottom: .1em; }
  #alcance .al-group { gap: 5px; }
  #alcance .al-stats { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  #alcance .al-stat__plate { grid-template-columns: 7.2em minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 6px 12px; --bevel: 10px; }
  #alcance .al-stat__n { font-size: 32px; }
  #alcance .al-stat__l { font-size: 13px; }
  #alcance .al-mail__plate { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 10px; row-gap: 6px; padding: 10px 12px; --bevel: 12px; }
  #alcance .al-env { width: 34px; }
  #alcance .al-mail__item { font-size: 12.5px; }
  #alcance .al-mail__item b { font-size: 25px; }
  #alcance .al-gauge { width: 30px; }
  #alcance .al-mail__rate { column-gap: 7px; }
  #alcance .al-mail__period { grid-column: 1 / -1; }
  #alcance .al-mail__per { font-size: 10.5px; }
  #alcance .al-group__k { font-size: 18px; }
}

@media (max-width: 820px) and (max-height: 740px) {
  #alcance .al-photo { height: 30%; }
  #alcance .al-stat__plate { padding-block: 4px; }
  #alcance .al-stat__n { font-size: 27px; }
  #alcance .al-mega { font-size: clamp(54px, 16vw, 72px); }
  #alcance .al-title { font-size: 30px; }
}

/* Movimento reduzido: a cena não fixa; o conteúdo cabe inteiro */
.reduced #alcance .al-stage { height: auto; min-height: 100vh; min-height: 100svh; }
.reduced #alcance .al-grid { min-height: 100vh; min-height: 100svh; height: auto; }