/* =============================================================================
   Serie "wired" — secciones técnicas de scroll (SVG puro, sin vídeo)
   B vivienda · C parque solar · D aerogenerador · E balance 24 h
   ========================================================================== */

/* Ritmo del trazo. Se deja aquí, y no en el JS, para poder afinarlo sin tocar
   código. Deliberadamente LENTO: a 4 s por escena el dibujo se ve trazarse
   mientras se lee el titular, que es el efecto buscado; a las décimas de
   segundo habituales en web, el trazo ya ha terminado antes de que nadie mire. */
.gi-wired{--wired-draw:4s}

.gi-wired{
  position:relative;
  /* El gutter nunca baja de 20 px: en pantallas estrechas el texto se pegaba
     a los bordes. clamp() con mínimo en rem lo garantiza. */
  padding:clamp(2.5rem,2rem + 5vw,6rem) max(1.25rem, var(--gi-gutter));
  overflow:hidden;
}
.gi-wired__interior{
  max-width:1180px;margin-inline:auto;
  display:grid;gap:clamp(1.5rem,1rem + 3vw,3.5rem);
  grid-template-columns:1fr;
  align-items:center;
}
/* E rompe el zig-zag de B-C-D: una sola columna, texto arriba y gráfico a
   ancho completo, para devolver el scroll a una lectura normal. */
.gi-wired--apilada .gi-wired__interior{grid-template-columns:minmax(0,1fr)}
.gi-wired--apilada .gi-wired__texto{max-width:60ch;margin-inline:auto}
/* En E el texto acompaña al gráfico, así que va a su mismo ancho en vez de
   quedarse encajado en una columna estrecha en el centro.
   El selector lleva también .gi-wired--apilada: con una sola clase perdía por
   especificidad contra la regla de arriba y no surtía efecto. */
.gi-wired--apilada .gi-wired__texto--ancho{max-width:none;margin-inline:0}
.gi-wired--apilada .gi-wired__texto--ancho p{max-width:none}
.gi-wired--apilada .gi-wired__interior{gap:clamp(1.25rem,.8rem + 1.5vw,2rem)}
.gi-wired--apilada .gi-wired__texto p{max-width:none}

@media (min-width:64rem){
  .gi-wired__interior{grid-template-columns:minmax(0,26rem) minmax(0,1fr)}
  .gi-wired--apilada .gi-wired__interior{grid-template-columns:minmax(0,1fr)}
  /* Zigzag automático (26/09/2026): en .gi-zigzag (front-page.php) las
     escenas pares llevan el texto a la derecha. El lado no vive en ninguna
     escena: insertar una no obliga a tocar las demás.
     El DIBUJO se queda la columna ancha y el texto la estrecha: mover solo el
     orden dejaba el dibujo apretado en 26rem. */
  .gi-zigzag>.gi-wired:nth-child(even) .gi-wired__interior{grid-template-columns:minmax(0,1fr) minmax(0,26rem)}
  .gi-zigzag>.gi-wired:nth-child(even) .gi-wired__interior>.gi-wired__texto{order:2}
}
.gi-wired__etiqueta{
  font-family:var(--gi-titular);font-size:var(--gi-t-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gi-verde);
  display:block;margin-bottom:.75rem;
}
.gi-wired__texto p{color:rgba(233,239,236,.82);max-width:42ch}
.gi-wired__lienzo{width:100%}
.gi-wired__lienzo svg{width:100%;height:auto;display:block}

/* --- Convenciones del dibujo técnico -------------------------------------- */
.gi-w-obj   {fill:none;stroke:var(--gi-cota);stroke-width:1.6;
             stroke-linecap:round;stroke-linejoin:round}
.gi-w-panel {fill:none;stroke:var(--gi-verde);stroke-width:2}
.gi-w-relleno-panel{fill:rgba(39,168,85,.13);stroke:none}
.gi-w-cota  {fill:none;stroke:var(--gi-cota-suave);stroke-width:1;
             stroke-dasharray:4 3}
.gi-w-cota-solida{fill:none;stroke:var(--gi-cota-suave);stroke-width:1}
.gi-w-sombra{fill:rgba(255,255,255,.055);stroke:none}
/* Dos fluidos, dos colores: la línea eléctrica en verde de marca y la tubería
   de agua en azul. Mezclarlos hacía que el esquema no se pudiera leer. */
.gi-w-agua  {fill:none;stroke:var(--gi-agua);stroke-width:2;stroke-linecap:round}
.gi-w-relleno-agua{fill:rgba(63,167,224,.16);stroke:none}
/* Halo del color del fondo detrás de cada etiqueta. paint-order:stroke dibuja
   primero el contorno y encima el relleno, así que el texto se recorta contra
   lo que tenga debajo en vez de cruzarse con las líneas. Es la solución general
   al problema de "los textos se pisan con las cotas", y por eso va aquí y no
   caso por caso. */
.gi-w-texto,.gi-w-texto--tenue,.gi-w-texto--acento{
  /* Halo al mínimo: sobre fondo plano basta con 2 px para que la etiqueta se
     recorte contra una línea que pase por debajo, sin que se lea como borde. */
  paint-order:stroke;stroke:var(--gi-tecnico);stroke-width:2px;
  stroke-linejoin:round;stroke-linecap:round;
}
/* Tamaños medidos EN PANTALLA: el viewBox de 900 se pinta a escala ~0,8 en
   escritorio, así que 16px aquí son ~12,8px reales (mínimo legible pedido:
   12-13). En móvil la escala baja más: las escenas son apoyo del texto, no
   la única vía de la información. */
.gi-w-texto {fill:var(--gi-cota);font-family:var(--gi-cuerpo);font-size:16px;
             letter-spacing:.04em}
.gi-w-texto--tenue{fill:var(--gi-cota-suave);font-size:15px}
/* Letras de la escala energética: oscuras sobre los colores oficiales
   (contraste >=4,2:1 en las siete barras, medido) */
.gi-k-letra{fill:#10161A;font-family:var(--gi-titular);font-weight:700;font-size:20px}
.gi-w-texto--acento{fill:var(--gi-verde);font-weight:600}

/* --- Animación de trazo ---------------------------------------------------
   El JS mide cada trazo y fija --gi-largo. Sin JS, se ve el dibujo completo:
   la animación es un adorno, no el contenido.                              */
.gi-wired[data-animar] .gi-w-traza,
[data-animar] .gi-w-traza{
  stroke-dasharray:var(--gi-largo);
  stroke-dashoffset:var(--gi-largo);
}
.gi-wired[data-animar].gi-esta-dentro .gi-w-traza,
[data-animar].gi-esta-dentro .gi-w-traza{
  animation:gi-dibujar var(--wired-draw,4s) cubic-bezier(.4,0,.25,1) forwards;
  animation-delay:var(--gi-retardo,0s);
}
@keyframes gi-dibujar{to{stroke-dashoffset:0}}

.gi-wired[data-animar] .gi-w-aparece,
[data-animar] .gi-w-aparece{opacity:0}
.gi-wired[data-animar].gi-esta-dentro .gi-w-aparece,
[data-animar].gi-esta-dentro .gi-w-aparece{
  animation:gi-fundido .55s ease forwards;animation-delay:var(--gi-retardo,.5s);
}
@keyframes gi-fundido{to{opacity:1}}
/* OJO: gi-w-aparece termina en opacity:1, así que PISA la opacidad propia de
   cualquier elemento que la use como estilo (un relleno al 16 %, por ejemplo).
   Para esos casos, la clase va en un <g> envolvente y el elemento conserva la
   suya. Costó una barra de datos invisible. */

/* Quien pide menos movimiento ve el dibujo terminado, no una animación rápida */
@media (prefers-reduced-motion:reduce){
  /* !important a propósito: las reglas de trazado llevan cuatro clases de
     especificidad y esta anulación perdía contra ellas, así que la animación
     seguía corriendo pese a la preferencia del usuario. En una anulación de
     accesibilidad, ganar es el requisito. */
  [data-animar] .gi-w-traza{
    stroke-dasharray:none !important;stroke-dashoffset:0 !important;
    animation:none !important;
  }
  [data-animar] .gi-w-aparece{opacity:1 !important;animation:none !important}
}

/* --- Vida después del trazado ---------------------------------------------
   Cuando la escena termina de dibujarse, el JS añade .gi-ha-dibujado. A partir
   de ahí, y solo mientras la sección está en pantalla, el dibujo se mueve un
   poco. Es ambiental: nada de esto aporta información, así que desaparece
   entero con prefers-reduced-motion.                                        */
/* La especificidad tiene que superar a .gi-wired[data-animar].gi-esta-dentro,
   que es (0,4,0); si no, la regla de trazado sigue mandando y no pasa nada.
   Y el opacity:1 es obligatorio: al reemplazar la animación se pierde el
   `forwards` del fundido y el rotor volvería a opacity 0. */
.gi-wired[data-animar].gi-esta-dentro.gi-ha-dibujado .gi-rotor{
  opacity:1;
  transform-box:view-box;transform-origin:404px 173px;
  animation:gi-girar 16s linear infinite;
}
@keyframes gi-girar{ to{ transform:rotate(360deg) } }

/* El fluido: guiones recorriendo el circuito. Caliente sube hacia la bomba,
   frío baja de vuelta al terreno — por eso los sentidos son opuestos. */
.gi-wired[data-animar].gi-esta-dentro.gi-ha-dibujado .gi-flujo-calor,
.gi-wired[data-animar].gi-esta-dentro.gi-ha-dibujado .gi-flujo-frio{
  stroke-dasharray:9 15;stroke-dashoffset:0;
}
.gi-wired[data-animar].gi-esta-dentro.gi-ha-dibujado .gi-flujo-calor{animation:gi-fluir-sube 1.9s linear infinite}
.gi-wired[data-animar].gi-esta-dentro.gi-ha-dibujado .gi-flujo-frio {animation:gi-fluir-baja 1.9s linear infinite}
@keyframes gi-fluir-sube{ to{ stroke-dashoffset:24 } }
@keyframes gi-fluir-baja{ to{ stroke-dashoffset:-24 } }

@media (prefers-reduced-motion:reduce){
  .gi-wired .gi-rotor{animation:none !important;opacity:1}
  .gi-wired .gi-flujo-calor,
  .gi-wired .gi-flujo-frio{animation:none !important;stroke-dasharray:none}
}

.gi-sombra-cipres{fill:rgba(0,0,0,.55);stroke:none;opacity:0}
.gi-wired[data-animar].gi-esta-dentro.gi-ha-dibujado .gi-sombra-cipres{
  animation:gi-barrer 20s linear infinite;
}
@keyframes gi-barrer{
  0%   {transform:translate(0,0);            opacity:0}
  12%  {opacity:.9}
  88%  {opacity:.9}
  100% {transform:translate(173.1px,100.3px); opacity:0}
}
@media (prefers-reduced-motion:reduce){ .gi-sombra-cipres{display:none} }

/* --- E: gráfico de balance ------------------------------------------------ */
.gi-bal__banda-punta{fill:var(--gi-punta)}
.gi-bal__banda-llano{fill:var(--gi-llano)}
.gi-bal__banda-valle{fill:var(--gi-valle)}
.gi-bal__eje      {stroke:rgba(255,255,255,.28);stroke-width:1}
.gi-bal__cero     {stroke:rgba(255,255,255,.45);stroke-width:1.25}
.gi-bal__rejilla  {stroke:rgba(255,255,255,.10);stroke-width:1}
.gi-bal__fv       {fill:none;stroke:var(--gi-fv);stroke-width:2;stroke-linejoin:round}
.gi-bal__fv-area  {fill:var(--gi-fv);opacity:.16}
.gi-bal__capa-area{}  /* envoltorio: aquí va la animación de aparición */
.gi-bal__consumo  {fill:none;stroke:var(--gi-consumo);stroke-width:2;stroke-linejoin:round}
.gi-bal__carga    {fill:var(--gi-bat-carga);opacity:.85}
.gi-bal__descarga {fill:var(--gi-bat-descarga);opacity:.85}
/* 2px de hueco de superficie entre barras contiguas */
.gi-bal__carga,.gi-bal__descarga{stroke:var(--gi-tecnico);stroke-width:2}

.gi-bal__barrido{stroke:rgba(255,255,255,.5);stroke-width:1;stroke-dasharray:3 4}
@media (prefers-reduced-motion:reduce){ .gi-bal__barrido{display:none} }

.gi-bal__pie{
  display:flex;flex-wrap:wrap;gap:1rem 1.75rem;align-items:center;
  justify-content:center;
  margin-top:1.5rem;padding-inline:max(1.25rem, 2rem);
}
.gi-bal__leyenda{display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;margin:0;padding:0;list-style:none}
.gi-bal__leyenda li{
  display:flex;align-items:center;gap:.5rem;
  font-size:var(--gi-t-xs);color:rgba(233,239,236,.8);
}
.gi-bal__muestra{width:14px;height:14px;border-radius:3px;flex:none}
.gi-bal__muestra--fv{background:var(--gi-fv)}
.gi-bal__muestra--consumo{background:var(--gi-consumo)}
.gi-bal__muestra--carga{background:var(--gi-bat-carga)}
.gi-bal__muestra--descarga{background:var(--gi-bat-descarga)}

/* Tabla de datos: la identidad nunca depende solo del color */
/* La tabla comparte ancho y márgenes con el gráfico: nunca más ancha que él,
   y nunca pegada al borde izquierdo del contenedor. */
.gi-bal__tabla{
  margin:2rem auto 0;font-size:var(--gi-t-xs);
  max-width:100%;padding-inline:max(1.25rem, 2rem);
}
/* Procedencia de los datos. Sin esto, un gráfico con esta pinta de rigor
   invita a leerlo como medidas reales, y no lo son. */
.gi-bal__origen{
  caption-side:top;text-align:left;max-width:56ch;margin:0 auto 1rem;
  color:rgba(233,239,236,.62);font-size:var(--gi-t-xs);line-height:1.5;
}
/* Ni el gráfico ni la tabla deben forzar scroll horizontal en móvil. */
.gi-wired__lienzo{max-width:100%;overflow-x:hidden}
.gi-bal__tabla table{display:block;overflow-x:auto;max-width:100%}
@media (min-width:36rem){ .gi-bal__tabla table{display:table} }
/* En móvil la sección ya aporta sus 20 px: el padding propio de la tabla y del
   pie se suma y deja la tabla en 256 px de ancho útil. Se retira ahí. */
@media (max-width:36rem){
  .gi-bal__tabla,.gi-bal__pie{padding-inline:0}
}
.gi-bal__tabla summary{
  cursor:pointer;color:rgba(233,239,236,.8);
  text-align:center;list-style-position:inside;
}
.gi-bal__tabla summary:hover{color:#fff}
.gi-bal__tabla table{
  border-collapse:collapse;margin:1rem auto 0;width:100%;max-width:38rem;
}
.gi-bal__tabla th,.gi-bal__tabla td{
  text-align:right;padding:.3em .7em;border-bottom:1px solid rgba(255,255,255,.12);
  color:rgba(233,239,236,.85);
}
.gi-bal__tabla th:first-child,.gi-bal__tabla td:first-child{text-align:left}

/* --- Móvil: diagrama COMPLETO, sin desplazamiento lateral ------------------
   Criterio fijado por JAE (2026-09-21): en móvil prima ver el diagrama
   entero sobre el tamaño del texto — quien necesite leer las cotas abre la
   versión de escritorio. El SVG escala a lo que dé el ancho del viewport
   (~0,4x, texto ~6px reales) y NO panea. El paneo se mantiene solo donde
   procede: la tabla de datos de la escena E (.gi-bal__tabla table). */