/* =============================================================================
   La generación alfa de un vistazo  ·  estático de iberdrola.com
   Título + Características (5 tarjetas) + Categorías (slider de 10) + fuente.
   Dos anchos de diseño, 565 y 290. Entre los dos se interpola con `cqi` (exacto
   en los dos); la disposición cambia en UN solo corte (RD-04): por encima,
   Características en 3 + 2 y el slider de 2 en 2; por debajo, una columna y el
   slider de 1 en 1. Por encima de 565 la pieza sigue creciendo; los dibujos no.
   Medidas: specs/generacion-alfa/design/  (Figma es la única fuente)
   Todo el estado sale de `data-active` en la raíz y de `--ga-k` en el carril.
   ============================================================================= */

/* ===== IberPangea (self-contained) ===========================================
   Sin la fuente real cambia el ancho de línea, y con él el nº de líneas de las
   tarjetas, que es quien decide su alto. */
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/generacion-alfa/fonts/IberPangea-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/generacion-alfa/fonts/IberPangea-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/generacion-alfa/fonts/IberPangea-SmBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea Text';src:url('/wcorp/gc/prod/es_ES/estaticos/generacion-alfa/fonts/IberPangeaText-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea Text';src:url('/wcorp/gc/prod/es_ES/estaticos/generacion-alfa/fonts/IberPangeaText-SmBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea Text';src:url('/wcorp/gc/prod/es_ES/estaticos/generacion-alfa/fonts/IberPangeaText-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}

/* Tokens (design/tokens.json). */
#genalfa{
  --ga-green1:#007F33;  --ga-forest:#00402A;  --ga-sand7:#3A3735;
  --ga-sand:#FFF5EC;    --ga-sky20:#D8F3FF;   --ga-sand1:#FFFEFF;
  --ga-sand3:#D8CFC7;   --ga-white:#FFFFFF;
  --ga-hover:#00A443;   /* flecha al pasar el ratón: Iberdrola Green, del componente de la base */
}

/* ===== Marco de la pieza (RD-03, RD-06) ======================================
   `margin:0 auto` SIN margen vertical: se incrusta y el sitio pone su espaciado.
   Sin `max-width`: la pieza crece con su columna (los dibujos, no). El trazo va
   como sombra interior: con `border` el `inline-size` del contenedor bajaría 2 px
   y la interpolación dejaría de ser exacta en 290 y 565. ÚNICO contenedor. */
#genalfa{
  container-name:ga; container-type:inline-size;
  width:100%; margin:0 auto; box-sizing:border-box;
  position:relative; overflow:hidden; background:var(--ga-white); border-radius:15px;
  box-shadow:inset 0 0 0 1px var(--ga-sand3);
}

/* ===== Blindaje frente al theme de Liferay (F4) ==============================
   La herencia PIERDE contra cualquier declaración del theme, por débil que sea.
   `inherit` sí es una declaración: gana al theme sin cambiar nada visualmente. */
#genalfa *{color:inherit; font:inherit; letter-spacing:inherit; text-align:inherit;
  text-transform:inherit; white-space:inherit; text-indent:0; text-decoration:none;
  margin:0; padding:0; box-sizing:border-box;}
#genalfa ul,#genalfa ol,#genalfa li{list-style:none;}
#genalfa li::marker{content:none;}
#genalfa li::before{content:'' !important; display:none !important; margin:0 !important;}
/* `#genalfa *` NO alcanza a los pseudo-elementos: se blindan aparte, sin `content`. */
#genalfa *::before,#genalfa *::after{margin:0; padding:0; text-indent:0;
  letter-spacing:inherit; text-transform:inherit;}
#genalfa img{max-width:none; border:0;}
#genalfa button{font:inherit; cursor:pointer; border:0; background:transparent;
  color:inherit; appearance:none; -webkit-appearance:none; border-radius:0; min-width:0;
  min-height:0; box-shadow:none;}
/* La RAÍZ declara todo lo heredable: si no, hereda del portal y el `inherit` de
   arriba propaga fielmente el valor del theme hacia dentro. */
#genalfa{
  font-family:'IberPangea',sans-serif; font-size:16px; line-height:20px;
  font-weight:400; font-style:normal; color:var(--ga-forest);
  letter-spacing:normal; text-align:left; text-transform:none; white-space:normal;
  text-decoration:none;
}
/* `display` NO se hereda: se declara elemento a elemento y con `!important`. En
   cada flex y cada rejilla, también dirección y hueco. */
#genalfa{display:block !important;}
#genalfa .ga_in{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start;}
#genalfa .ga_title,#genalfa .ga_sub,#genalfa .ga_source,#genalfa .ga_feat_txt{display:block !important;}
#genalfa .ga_body{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start; gap:24px;}
#genalfa .ga_block{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start; gap:16px;}
#genalfa .ga_feats{display:grid !important; grid-template-columns:minmax(0, 1fr);
  grid-auto-flow:row; align-items:start; justify-content:start; align-content:start; gap:8px;}
#genalfa .ga_feat{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start; gap:8px;}
#genalfa .ga_feat_head{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:flex-start; gap:4px;}
#genalfa .ga_ico{display:block !important;}
#genalfa .ga_feat_name{display:block !important;}
#genalfa .ga_slider{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start; gap:16px;}
#genalfa .ga_viewport{display:block !important;}
/* El carril: una fila de columnas, una por categoría; cada categoría es una
   subrejilla de 3 filas (título · dibujo · valor). Así TODAS las cajas de título,
   de dibujo y de valor miden lo de la más alta de las 10 (RF-07, RD-12), sin alto
   fijo. `--ga-k` = categorías por página (2 en ancho, 1 en estrecho). */
#genalfa .ga_track{display:grid !important; grid-auto-flow:column;
  grid-template-rows:auto auto auto; row-gap:0; column-gap:8px; align-items:stretch;
  justify-content:start; align-content:start;}
#genalfa .ga_cat{display:grid !important; grid-row:span 3; grid-template-rows:subgrid;
  grid-template-columns:minmax(0, 1fr);
  row-gap:0; align-items:stretch; justify-content:start; align-content:start;}
#genalfa .ga_cat_name{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:center; gap:0;}
#genalfa .ga_cat_ilu{display:block !important;}
#genalfa .ga_cat_ilu img{display:block !important;}
#genalfa .ga_cat_val{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:center; gap:0;}
#genalfa .ga_cat_t,#genalfa .ga_cat_v{display:block !important;}   /* un solo hijo del flex */
#genalfa .ga_nav{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:space-between; gap:16px;}
#genalfa .ga_cont{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:center; gap:0;}
#genalfa .ga_cont_v,#genalfa .ga_cur,#genalfa .ga_tot{display:inline !important;}
#genalfa .ga_arrows{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:flex-start; gap:16px;}
#genalfa .ga_arrow{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:center;}
#genalfa .ga_arrow svg{display:block !important;}
/* Tramo que va junto (RD-09, cortes de Figma): `inline-block` y no `nowrap`, para
   que con la letra aumentada, si no cabe en una línea, se parta en vez de salirse. */
#genalfa .ga_nw{display:inline-block !important;}
#genalfa .ga_nwa{display:inline !important;}   /* sólo va junto en la disposición ancha */
#genalfa strong{display:inline !important; font-weight:600;}

/* Sólo para lectores de pantalla. */
#genalfa .ga_sr{position:absolute !important; width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;}

/* =============================================================================
   Interpolación 290 → 565 (RD-05). `100cqi` = ancho de la pieza (el único
   contenedor). a + (b − a) · (100cqi − 290px) / 275, topado con `clamp`: exacto en
   290 y 565, y por encima de 565 se queda en el valor de 565. Va en el wrapper
   `.ga_in` y en sus hijos, no en la raíz: `cqi` no mide contra el propio
   contenedor. Independiente del corte de disposición: sin saltos tipográficos.
   ============================================================================= */
#genalfa .ga_in{
  padding:clamp(32px, calc(32px + (100cqi - 290px) * 8 / 275), 40px)
          clamp(16px, calc(16px + (100cqi - 290px) * 16 / 275), 32px)
          clamp(35px, calc(35px + (100cqi - 290px) * 5 / 275), 40px);
  gap:clamp(23px, calc(27px - (100cqi - 290px) * 4 / 275), 27px);   /* título → cuerpo */
}

/* ===== Cabecera y subtítulos (RD-05) =========================================
   !important en el color: en móvil el theme pinta h1-h3 con `#427314 !important`. */
#genalfa .ga_title{font-family:'IberPangea',sans-serif; font-weight:400;
  font-size:clamp(30px, calc(30px + (100cqi - 290px) * 2 / 275), 32px);
  line-height:clamp(34px, calc(34px + (100cqi - 290px) * 2 / 275), 36px);
  color:var(--ga-green1) !important;}
#genalfa .ga_title strong{font-weight:600;}
#genalfa .ga_sub{font-family:'IberPangea',sans-serif; font-weight:400;
  font-size:clamp(21px, calc(21px + (100cqi - 290px) * 3 / 275), 24px);
  line-height:clamp(24px, calc(24px + (100cqi - 290px) * 4 / 275), 28px);
  color:var(--ga-forest) !important;}
/* «Categorías» → slider: 27 a 290, 14 a 565 (lo que dibuja Figma en cada uno). */
#genalfa .ga_block_cats{gap:clamp(14px, calc(27px - (100cqi - 290px) * 13 / 275), 27px);}
#genalfa .ga_source{font-family:'IberPangea Text','IberPangea',sans-serif; font-style:italic; font-weight:400;
  font-size:clamp(12px, calc(12px + (100cqi - 290px) * 2 / 275), 14px);
  line-height:clamp(16px, calc(16px + (100cqi - 290px) * 2 / 275), 18px);
  color:var(--ga-sand7);}

/* ===== Características (RD-04, RD-09) ======================================== */
#genalfa .ga_feat{padding:16px; border-radius:15px; background:var(--ga-sand);}
#genalfa .ga_ico{width:40px; height:40px; flex:0 0 auto;}
#genalfa .ga_feat_name{font-family:'IberPangea',sans-serif; font-weight:500;
  font-size:18px; line-height:22px; white-space:nowrap; color:var(--ga-green1) !important;}
#genalfa .ga_feat_txt{font-family:'IberPangea Text','IberPangea',sans-serif; font-weight:400;
  font-size:16px; line-height:20px; color:var(--ga-sand7);}
#genalfa .ga_feat_txt strong{font-weight:600;}

/* ===== Visor y carril (A-001) ================================================
   El carril se desplaza `(-100% - 8px) × (P-1)`: mide lo que el visor y una página
   son `k` columnas y sus huecos. Durante el arrastre el JS suma `--ga-drag` en px
   y al soltar lo vuelve a 0. Las categorías que esperan fuera las recorta el visor. */
#genalfa .ga_viewport{position:relative; overflow:hidden; touch-action:pan-y;}
#genalfa[data-js] .ga_viewport{cursor:grab;}
#genalfa[data-drag] .ga_viewport{cursor:grabbing;}
#genalfa[data-drag] .ga_viewport *{user-select:none; -webkit-user-select:none;}
#genalfa .ga_track{--ga-k:1; --ga-n:0;
  grid-auto-columns:calc((100% - 8px * (var(--ga-k) - 1)) / var(--ga-k));
  transform:translateX(calc((-100% - 8px) * var(--ga-n) + var(--ga-drag, 0px)));}
#genalfa[data-active="2"] .ga_track{--ga-n:1;}
#genalfa[data-active="3"] .ga_track{--ga-n:2;}
#genalfa[data-active="4"] .ga_track{--ga-n:3;}
#genalfa[data-active="5"] .ga_track{--ga-n:4;}
#genalfa[data-active="6"] .ga_track{--ga-n:5;}
#genalfa[data-active="7"] .ga_track{--ga-n:6;}
#genalfa[data-active="8"] .ga_track{--ga-n:7;}
#genalfa[data-active="9"] .ga_track{--ga-n:8;}
#genalfa[data-active="10"] .ga_track{--ga-n:9;}

/* ===== Categoría (RD-07, RF-07) ==============================================
   Caja de título (56 de mínimo) ENCIMA; la caja del dibujo (121) se mete 19 por
   debajo (102 a la vista); el dibujo, a su tamaño de Figma, centrado y apoyado
   abajo; el valor a 8. */
#genalfa .ga_cat{min-width:0;}
#genalfa .ga_cat_name{position:relative; z-index:1; min-height:56px; padding:8px;
  border-radius:15px; background:var(--ga-green1);
  font-family:'IberPangea Text','IberPangea',sans-serif; font-weight:400;
  font-size:16px; line-height:20px; color:var(--ga-sand1); text-align:center;}
#genalfa .ga_cat_ilu{position:relative; z-index:0; height:121px; margin-top:-19px;
  border-radius:15px; background:var(--ga-sky20); overflow:hidden;}
#genalfa .ga_cat_ilu img{position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:auto; height:auto; -webkit-user-drag:none; user-select:none;}
#genalfa .ga_cat_val{margin-top:8px; font-family:'IberPangea',sans-serif; font-weight:500;
  font-size:18px; line-height:22px; color:var(--ga-forest); text-align:center;}

/* ===== Navegación: contador y flechas (RD-10, RD-11) =========================
   Una sola vez, fuera del carril: no se desliza con las categorías. */
#genalfa .ga_nav{min-height:32px;}   /* mínimo, no fijo: aguanta el espaciado de texto aumentado */
#genalfa .ga_cont{min-height:32px; padding:5px 16px; border-radius:24px;
  box-shadow:inset 0 0 0 1px var(--ga-forest);
  font-family:'IberPangea Text','IberPangea',sans-serif; font-style:italic; font-weight:400;
  font-size:14px; line-height:18px; color:var(--ga-forest); white-space:nowrap;}
#genalfa .ga_cur{color:var(--ga-green1);}
/* Normal = trazo y punta Forest; al pasar el ratón y al pulsar (H4) = relleno
   #00A443 y punta Sand 1; apagada = la normal a .5 y sin reaccionar. */
#genalfa .ga_arrow{width:32px; height:32px; flex:0 0 auto; border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--ga-forest); color:var(--ga-forest);
  background:transparent;}
#genalfa .ga_arrow svg{width:32px; height:32px; fill:currentColor;}
#genalfa .ga_prev svg{transform:rotate(180deg);}
@media (hover:hover){
  #genalfa .ga_arrow:not([aria-disabled="true"]):hover{background:var(--ga-hover);
    box-shadow:none; color:var(--ga-sand1);}
}
#genalfa .ga_arrow:not([aria-disabled="true"]):active{background:var(--ga-hover);
  box-shadow:none; color:var(--ga-sand1);}
/* El .5 va en lo que se ve de la flecha (punta y trazo), no en el botón: si no,
   también el contorno de foco quedaría a medias cuando se llega al tope. */
#genalfa .ga_arrow[aria-disabled="true"]{box-shadow:inset 0 0 0 1px rgba(0, 64, 42, .5); cursor:default;}
#genalfa .ga_arrow[aria-disabled="true"] svg{opacity:.5;}
#genalfa .ga_arrow:focus-visible{outline:3px solid var(--ga-forest) !important;
  outline-offset:2px !important;}

/* =============================================================================
   EL CORTE DE DISPOSICIÓN (RD-04, plan §3.2). Por encima: Características en 3 + 2
   (rejilla de 6 columnas; cada fila, a la tarjeta más alta) y el slider de 2 en
   2. Por debajo (lo de arriba): una columna, cada tarjeta a su alto, y de 1 en 1.
   `display`, dirección y huecos se reafirman aquí (F4).
   ============================================================================= */
@container ga (min-width: 543px){
  #genalfa .ga_feats{display:grid !important; grid-template-columns:repeat(6, minmax(0, 1fr));
    grid-auto-flow:row; align-items:stretch; gap:8px;}
  #genalfa .ga_feat:nth-child(-n+3){grid-column:span 2;}
  #genalfa .ga_feat:nth-child(n+4){grid-column:span 3;}
  #genalfa .ga_nwa{display:inline-block !important;}
  #genalfa .ga_track{--ga-k:2;}
}

/* Alto contraste de Windows: quita las sombras, y con ellas los trazos. Sólo ahí. */
@media (forced-colors: active){
  #genalfa,#genalfa .ga_cont,#genalfa .ga_arrow{border:1px solid CanvasText;}
}

/* ===== Animaciones (animations.md) ===========================================
   Sólo con `data-anim`, que el JS pone DESPUÉS del primer fotograma: si el estado
   inicial las llevara, la primera pintada animaría. Al cruzar el corte el JS lo
   quita un momento: el carril se recoloca sin animar. */
#genalfa[data-anim] .ga_track{transition:transform .3s ease;}
#genalfa[data-anim] .ga_arrow{transition:background-color .15s ease, color .15s ease,
  box-shadow .15s ease;}
#genalfa[data-drag] .ga_track{transition:none;}
@media (prefers-reduced-motion: reduce){
  #genalfa[data-anim] .ga_track,
  #genalfa[data-anim] .ga_arrow{transition:none;}
}

/* ===== Sin JS (RF-08) ========================================================
   Ningún control muerto: fuera contador y flechas, y las 10 categorías en
   rejilla de `k` columnas (2 en ancho, apiladas en estrecho), a 8 entre filas.
   Con la media query y no con `:not([data-js])`: así, con JS, no se ve ni un
   instante la rejilla de 10. */
@media (scripting: none){
  #genalfa .ga_nav{display:none !important;}
  #genalfa .ga_track{grid-auto-flow:row; grid-template-rows:none; grid-auto-rows:auto;
    grid-template-columns:repeat(var(--ga-k), minmax(0, 1fr)); row-gap:8px; transform:none;}
}