/* Atlas (inicio) */
.atlas { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; }
.terreno, .glifos, .viento-capa, .lineas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lineas { overflow: visible; pointer-events: none; }
.lineas .tendido { fill: none; stroke: var(--ink); stroke-width: 1; opacity: .35; vector-effect: non-scaling-stroke; }
.lineas .flujo { fill: none; stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.sitio { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: baseline; transform: translate(-7px, -7px); z-index: 3; }
.sitio .pulso { grid-row: 1 / 4; width: 14px; height: 14px; border-radius: 50%; background: var(--c); position: relative; align-self: start; box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg) 70%, transparent); }
.sitio .pulso::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid var(--c); animation: pulsoSitio 2.6s ease-out infinite; }
.sitio[data-k=solar] { --c: var(--sol); } .sitio[data-k=viento] { --c: var(--viento); } .sitio[data-k=bateria] { --c: var(--bateria); }
@keyframes pulsoSitio { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.s-num { color: var(--c); }
.s-nombre { grid-column: 2; font-weight: 650; font-size: 15px; font-variation-settings: 'wdth' 88; background: color-mix(in srgb, var(--bg) 75%, transparent); padding: 0 6px; margin-left: -6px; }
.s-dato { grid-column: 2; color: var(--soft); }
.s-dato b { color: var(--ink); font-weight: 500; }
.sitio:hover .s-nombre { color: var(--c); }
.sitio:hover .pulso { transform: scale(1.35); transition: transform .3s; }

.atlas::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(70% 60% at 12% 88%, var(--bg) 18%, color-mix(in srgb, var(--bg) 60%, transparent) 46%, transparent 72%); }
.atlas-texto { position: absolute; left: var(--gutter); bottom: 118px; max-width: min(760px, 62vw); z-index: 4; pointer-events: none; }
.kicker { color: var(--soft); margin-bottom: 18px; }
.titular { font-size: clamp(56px, 8.6vw, 148px); line-height: .86; letter-spacing: -.03em; font-weight: 760; }
.titular span { display: block; white-space: nowrap; will-change: font-variation-settings; }
.titular span:last-child { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.bajada { margin-top: 22px; max-width: 470px; font-size: 15px; color: var(--soft); pointer-events: auto; }

.tablero { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-46%); width: 250px; padding: 18px; z-index: 4; border: 1px solid var(--linea); background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tablero > p:first-child { display: flex; justify-content: space-between; color: var(--soft); margin-bottom: 12px; }
.tablero output { color: var(--ink); }
.tablero dl { margin: 0; display: grid; gap: 10px; }
.tablero dl div { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--linea); padding-top: 8px; }
.tablero dt { color: var(--soft); display: flex; align-items: center; gap: 8px; }
.tablero dt i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.tablero dd { margin: 0; font-variant-numeric: tabular-nums; }
.tablero dd b { font-size: 26px; font-weight: 600; font-variation-settings: 'wdth' 75; letter-spacing: -.02em; }
.tablero dd span { font-family: var(--mono); font-size: 11px; color: var(--soft); margin-left: 4px; }
.curva { width: 100%; height: 70px; margin-top: 14px; overflow: visible; }
.curva path { fill: none; vector-effect: non-scaling-stroke; stroke-width: 1.3; }
.curva .cur { stroke: var(--ink); stroke-width: 1; }
.t-nota { margin-top: 8px; color: var(--soft); font-size: 9px; }
.pista-scroll { position: absolute; right: var(--gutter); bottom: 34px; color: var(--soft); z-index: 4; }

/* índice */
.indice { padding: 140px var(--gutter) 120px; position: relative; }
.indice-kicker { color: var(--soft); margin-bottom: 36px; }
.filas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.filas li { border-bottom: 1px solid var(--linea); }
.filas a { display: grid; grid-template-columns: 70px 1fr 1fr 220px; align-items: center; gap: 24px; padding: 22px 0; position: relative; }
.f-n { color: var(--soft); }
.f-t { font-size: clamp(38px, 5.4vw, 92px); line-height: 1; font-weight: 700; letter-spacing: -.03em; font-variation-settings: 'wdth' 70; transition: font-variation-settings .7s cubic-bezier(.2,.8,.2,1), color .4s; }
.f-d { color: var(--soft); font-size: 15px; max-width: 330px; }
.f-prev { width: 220px; height: 110px; opacity: 0; transform: scale(.92); transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); border-radius: 4px; }
.filas a:hover .f-t, .filas a:focus-visible .f-t { font-variation-settings: 'wdth' 125; color: var(--luz); }
.filas a:hover .f-prev, .filas a:focus-visible .f-prev { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .atlas::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(70% 60% at 12% 88%, var(--bg) 18%, color-mix(in srgb, var(--bg) 60%, transparent) 46%, transparent 72%); }
.atlas-texto { max-width: none; right: var(--gutter); bottom: 96px; }
  .titular { font-size: 15vw; }
  .bajada { font-size: 14px; }
  .tablero { top: 92px; transform: none; width: auto; left: var(--gutter); right: var(--gutter); padding: 10px 14px; }
  .tablero dl { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .tablero dl div { flex-direction: column; border: 0; padding: 0; }
  .tablero dd b { font-size: 18px; }
  .tablero .curva, .tablero .t-nota, .tablero > p:first-child { display: none; }
  .s-nombre { font-size: 13px; }
  /* en vertical los sitios suben para no chocar con el titular */
  .sitio[data-k=viento] { --x: .58 !important; --y: .3 !important; }
  .sitio[data-k=solar] { --x: .22 !important; --y: .42 !important; }
  .sitio[data-k=bateria] { --x: .6 !important; --y: .55 !important; }
  .kicker { margin-bottom: 12px; }
  .filas a { grid-template-columns: 40px 1fr; }
  .f-d { grid-column: 2; }
  .f-prev { display: none; }
}