/* Solar */
.astro { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; }
.trama { position: absolute; inset: 0; width: 100%; height: 100%; }
.astro-texto { position: absolute; left: var(--gutter); bottom: 110px; z-index: 2; pointer-events: none; }
.astro-texto > .mono:first-child, .astro-estado { color: var(--soft); margin-bottom: 10px; display: inline-block; background: var(--bg); padding: 4px 8px; margin-left: -8px; }
.solar-t { font-size: clamp(90px, 20vw, 340px); line-height: .78; font-weight: 900; letter-spacing: -.045em; font-variation-settings: 'wdth' 125; margin-left: -.04em; mix-blend-mode: difference; color: #fff; }
.astro-estado { margin-top: 18px; color: var(--soft); }
.astro-estado b { color: var(--ink); font-weight: 500; }
.astro-datos { position: absolute; right: var(--gutter); bottom: 120px; z-index: 2; display: grid; gap: 14px; margin: 0; text-align: right; }
.astro-datos dt { color: var(--soft); }
.astro-datos dd { margin: 2px 0 0; font-size: 15px; }
.astro-datos div { background: var(--bg); padding: 8px 12px; }
.astro-datos b { font-family: var(--sans); font-size: 34px; font-weight: 650; letter-spacing: -.02em; font-variation-settings: 'wdth' 72; }

.campo { position: relative; display: grid; grid-template-columns: 1.55fr 1fr; min-height: 100vh; border-top: 1px solid var(--linea); }
.campo-escena { position: relative; min-height: 70vh; touch-action: pan-y; }
.campo-escena canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.campo-texto { padding: 120px var(--gutter) 120px 40px; display: flex; flex-direction: column; justify-content: center; gap: 24px; border-left: 1px solid var(--linea); }
.campo-k { color: var(--soft); }
.campo-texto h2 { font-size: clamp(40px, 4.4vw, 74px); line-height: .95; font-weight: 720; letter-spacing: -.03em; font-variation-settings: 'wdth' 82; }
.campo-texto h2 em { font-style: normal; color: var(--sol); font-variation-settings: 'wdth' 125; }
.campo-texto > p.aparece { color: var(--soft); max-width: 420px; }
.campo-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 10px 0 0; border-top: 1px solid var(--linea); padding-top: 16px; }
.campo-datos dt { color: var(--soft); }
.campo-datos dd { margin: 6px 0 0; font-family: var(--sans); font-size: 30px; font-weight: 650; text-transform: none; letter-spacing: -.02em; font-variation-settings: 'wdth' 75; }

.viaje { padding: 140px var(--gutter) 120px; border-top: 1px solid var(--linea); }
.viaje-cabeza { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 40px; }
.viaje-cabeza .mono { color: var(--soft); }
.viaje-cabeza h2 { font-size: clamp(36px, 4vw, 64px); line-height: 1; font-weight: 720; letter-spacing: -.03em; text-align: right; font-variation-settings: 'wdth' 90; }
.viaje-pantalla { position: relative; aspect-ratio: 21 / 9; border: 1px solid var(--linea); overflow: hidden; }
.viaje-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.viaje-pasos { position: absolute; left: 18px; top: 16px; display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.viaje-pasos button { padding: 7px 12px; border: 1px solid var(--linea); border-radius: 999px; font: inherit; color: var(--soft); position: relative; overflow: hidden; }
.viaje-pasos button[aria-selected=true] { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.viaje-pasos button i { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--sol); width: 0; }
.viaje-leyenda { position: absolute; left: 18px; bottom: 16px; max-width: 460px; font-size: 14px; color: var(--soft); }

.dia { padding: 140px var(--gutter) 140px; border-top: 1px solid var(--linea); }
.dia-cabeza { display: flex; justify-content: space-between; align-items: end; margin-bottom: 30px; }
.dia-cabeza .mono { color: var(--soft); }
.dia-cabeza h2 { font-size: clamp(48px, 6vw, 110px); line-height: .9; font-weight: 800; letter-spacing: -.04em; text-align: right; font-variation-settings: 'wdth' 70; }
.dia-grafica { position: relative; height: 360px; }
.grafica { width: 100%; height: 100%; overflow: visible; }
.grafica .eje { stroke: var(--linea); vector-effect: non-scaling-stroke; }
.grafica .irr { fill: color-mix(in srgb, var(--sol) 14%, transparent); stroke: none; }
.grafica .gen { fill: none; stroke: var(--sol); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 2400; stroke-dashoffset: 2400; transition: stroke-dashoffset 2.4s cubic-bezier(.6,0,.2,1); }
.dia-grafica.visto .gen { stroke-dashoffset: 0; }
.grafica .cursor { stroke: var(--ink); vector-effect: non-scaling-stroke; }
.grafica text { font: 10px var(--mono); fill: var(--soft); }
.grafica-lectura { position: absolute; top: 0; display: flex; gap: 14px; transform: translateX(10px); pointer-events: none; white-space: nowrap; }
.grafica-lectura i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dia-totales { display: grid; grid-template-columns: repeat(4, 1fr); margin: 70px 0 0; border-top: 1px solid var(--linea); }
.dia-totales div { padding: 22px 20px 0 0; }
.dia-totales dt { color: var(--soft); }
.dia-totales dd { margin: 10px 0 0; }
.dia-totales b { font-size: clamp(40px, 4.6vw, 76px); font-weight: 750; letter-spacing: -.03em; font-variation-settings: 'wdth' 70; }
.dia-totales span { font-family: var(--mono); font-size: 12px; color: var(--soft); margin-left: 6px; }

.siguiente { display: block; position: relative; height: 60vh; min-height: 420px; overflow: hidden; border-top: 1px solid var(--linea); }
.siguiente .mono { position: absolute; left: var(--gutter); top: 30px; color: var(--soft); z-index: 2; }
.sig-t { position: absolute; left: var(--gutter); bottom: 40px; z-index: 2; font-size: clamp(90px, 16vw, 280px); line-height: .8; font-weight: 850; letter-spacing: -.05em; font-variation-settings: 'wdth' 62; transition: font-variation-settings 1s cubic-bezier(.2,.8,.2,1); }
.siguiente:hover .sig-t { font-variation-settings: 'wdth' 125; }
.sig-cv { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (max-width: 860px) {
  .solar-t { font-size: 23vw; font-variation-settings: 'wdth' 92; }
  .astro-datos { left: var(--gutter); right: auto; top: 100px; bottom: auto; text-align: left; grid-template-columns: repeat(3, auto); gap: 18px; }
  .astro-datos b { font-size: 22px; }
  .campo { grid-template-columns: 1fr; }
  .campo-escena { min-height: 60vh; }
  .campo-texto { border-left: 0; padding: 50px var(--gutter) 80px; }
  .viaje-cabeza { flex-direction: column; align-items: start; }
  .viaje-cabeza h2 { text-align: left; }
  .viaje-pantalla { aspect-ratio: 4 / 5; }
  .dia-totales { grid-template-columns: 1fr 1fr; }
  .dia-cabeza { flex-direction: column; align-items: start; gap: 14px; }
  .dia-cabeza h2 { text-align: left; }
  .dia-grafica { height: 240px; }
}