/* =============================================================================
   Claves educativas para afrontar el cambio climático  ·  estático de iberdrola.com
   Título + dibujo (globo con 4 escenas) + slider de 4 cajas («N de 4» y flechas).
   Dos anchos de diseño, 565 y 290: la misma columna salvo la caja, que es el
   ÚNICO cambio de disposición (vertical ↔ horizontal). Entre los dos se
   interpola con `cqi` (exacto en los dos). Por encima de 565 la pieza sigue
   creciendo y el dibujo se topa en 517.
   Medidas: specs/claves-educativas-cambio-climatico/design/  (Figma es la única fuente)
   Todo el estado sale de `data-active` en la raíz: el carril y las escenas.
   ============================================================================= */

/* ===== IberPangea (self-contained) ===========================================
   Sin la fuente real cambia el ancho de línea, y con él el nº de líneas de las
   cajas, que es quien decide su alto. */
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/claves-educativas-cambio-climatico/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/claves-educativas-cambio-climatico/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/claves-educativas-cambio-climatico/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/claves-educativas-cambio-climatico/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/claves-educativas-cambio-climatico/fonts/IberPangeaText-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}

/* Tokens (design/tokens.json). */
#educlima{
  --ec-green1:#007F33;  --ec-green2:#008C39;  --ec-forest:#00402A;  --ec-forest-t:#003020;
  --ec-sand1:#FFFEFF;   --ec-sand3:#D8CFC7;   --ec-white:#FFFFFF;
  --ec-hover:#00A443;   /* flecha al pasar el ratón: Iberdrola Green, del componente */
}

/* ===== 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 (el dibujo, 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. */
#educlima{
  container-name:ec; container-type:inline-size;
  width:100%; margin:0 auto; box-sizing:border-box;
  position:relative; overflow:hidden; background:var(--ec-white); border-radius:15px;
  box-shadow:inset 0 0 0 1px var(--ec-sand3);
}

/* ===== Blindaje frente al theme de Liferay (docs/VALIDACION.md) ==============
   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. */
#educlima *{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;}
#educlima ul,#educlima ol,#educlima li{list-style:none;}
#educlima li::marker{content:none;}
#educlima li::before{content:'' !important; display:none !important; margin:0 !important;}
/* `#educlima *` NO alcanza a los pseudo-elementos: se blindan aparte, sin `content`. */
#educlima *::before,#educlima *::after{margin:0; padding:0; text-indent:0;
  letter-spacing:inherit; text-transform:inherit;}
#educlima img{max-width:none; border:0;}
#educlima 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. */
#educlima{
  font-family:'IberPangea Text','IberPangea',sans-serif; font-size:16px; line-height:20px;
  font-weight:400; font-style:normal; color:var(--ec-forest-t);
  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, también dirección y hueco. */
#educlima{display:block !important;}
#educlima .ec_in{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start; gap:24px;}
#educlima .ec_main{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start; gap:24px;}
#educlima .ec_head{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start; gap:32px;}
#educlima .ec_title,#educlima .ec_src{display:block !important;}
#educlima .ec_ilu{display:block !important;}
#educlima .ec_ilu svg,#educlima .ec_ilu img{display:block !important;}
#educlima .ec_slider{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start; gap:16px;}
#educlima .ec_viewport{display:block !important;}
/* `align-items:stretch` es lo que da «misma altura en todas las cajas» (RF-05):
   todas miden lo que la más alta y su texto se centra en lo que sobra. */
#educlima .ec_track{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start; gap:20px;}
/* Caja: vertical por defecto (móvil); el tramo horizontal la reafirma abajo. */
#educlima .ec_card{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start; gap:0;}
#educlima .ec_ico{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:center; gap:0;}
#educlima .ec_ico img{display:block !important;}
#educlima .ec_txt{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:flex-start; gap:0;}
#educlima .ec_txt p{display:block !important;}
#educlima .ec_nav{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:space-between; gap:16px;}
#educlima .ec_cont{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:center; gap:0;}
#educlima .ec_cont_v,#educlima .ec_cur{display:inline !important;}
#educlima .ec_arrows{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:flex-start; gap:16px;}
#educlima .ec_arrow{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:center;}
#educlima .ec_arrow svg{display:block !important;}
/* Tramo que va junto (corte de Figma a 565: «…afrontar / el cambio climático»).
   Sólo desde 490 (abajo, en su `@container`), donde ya cabe con «…para
   afrontar» en una línea: desde 353 dejaba «afrontar» sola en medio (9 oct 2026).
   Por debajo, el título reparte sus líneas (`balance`), sin palabras solas; a 290
   da el corte de Figma, «para afrontar el / cambio climático». Allí es
   `inline-block` y no `nowrap`, para que con la letra aumentada, si no cabe en
   una línea, se parta en vez de salirse. */
#educlima .ec_nw{display:inline !important;}
#educlima strong{display:inline !important; font-weight:600;}

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

/* =============================================================================
   Interpolación 290 → 565 (RD-04). `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
   `.ec_in` y no en la raíz: `@container`/`cqi` no miden contra el propio
   contenedor.
   ============================================================================= */
#educlima .ec_in{
  padding:clamp(24px, calc(24px + (100cqi - 290px) * 8 / 275), 32px)
          clamp(16px, calc(16px + (100cqi - 290px) * 8 / 275), 24px);
}

/* ===== Título (RD-07) ========================================================
   !important en el color: en móvil el theme pinta los h2 con `#427314 !important`.
   El tramo SmBold va a 36 de alto de línea: en Figma el espacio tras «educativas»
   está a 32/36, así que a 290 la primera línea mide 36 (bloque de 104). A 565
   todas miden 36 y no cambia nada. */
#educlima .ec_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(--ec-green1) !important; text-wrap:balance;}
#educlima .ec_title strong{font-weight:600; line-height:36px;}

/* ===== Dibujo (RD-06, RD-09, RF-02) ==========================================
   A todo el ancho del contenido (258 a 290, 517 a 565) y topado en 517, centrado.
   La caja guarda el sitio con la proporción antes de que llegue el SVG. */
#educlima .ec_ilu{width:100%; max-width:517px; margin:0 auto; aspect-ratio:517 / 427;}
#educlima .ec_ilu svg,#educlima .ec_ilu img{width:100%; height:100%;}
/* Escenas: la de la caja activa al 100 %, las otras al 20 %; fondo y globo
   (`#ec_ilu_base`) no se tocan. Reglas por N a mano, como el carril. */
#educlima .ec_ilu [data-ec-escena]{opacity:.2;}
#educlima[data-active="1"] #ec_ilu_1,
#educlima[data-active="2"] #ec_ilu_2,
#educlima[data-active="3"] #ec_ilu_3,
#educlima[data-active="4"] #ec_ilu_4{opacity:1;}

/* ===== Visor y carril (A-001) ================================================
   El carril se desplaza `(-100% - 20px) × (N-1)`: mide lo que el visor. Durante
   el arrastre el JS suma `--ec-drag` en px y al soltar lo vuelve a 0. Las
   cajas que esperan fuera las recorta el visor. */
#educlima .ec_viewport{position:relative; overflow:hidden; touch-action:pan-y;}
#educlima[data-js] .ec_viewport{cursor:grab;}
#educlima[data-drag] .ec_viewport{cursor:grabbing;}
#educlima[data-drag] .ec_viewport *{user-select:none; -webkit-user-select:none;}
#educlima .ec_track{--ec-n:0;
  transform:translateX(calc((-100% - 20px) * var(--ec-n) + var(--ec-drag, 0px)));}
#educlima[data-active="2"] .ec_track{--ec-n:1;}
#educlima[data-active="3"] .ec_track{--ec-n:2;}
#educlima[data-active="4"] .ec_track{--ec-n:3;}

/* ===== Caja (RD-05, RD-10, RF-05) ============================================
   Borde Sand 3 por dentro (sombra, debajo de los hijos: la zona verde lo tapa por
   su lado, como el trazo de Figma), radio 16, sin fondo. SIN alto: el carril la
   estira al de la más alta y el texto se centra en lo que sobra.
   Vertical (móvil): barra verde de 44 a todo el ancho arriba, texto debajo. */
#educlima .ec_card{flex:0 0 100%; min-width:0; border-radius:16px;
  box-shadow:inset 0 0 0 1px var(--ec-sand3);}
#educlima .ec_ico{flex:0 0 auto; min-height:44px; border-radius:15px; background:var(--ec-green2);}
#educlima .ec_ico img{width:44px; height:44px; flex:0 0 auto;
  -webkit-user-drag:none; user-select:none;}
#educlima .ec_txt{flex:1 0 auto; padding:16px;}
#educlima .ec_txt p{flex:1 1 auto; min-width:0; font-family:'IberPangea Text','IberPangea',sans-serif;
  font-weight:400; font-size:16px; line-height:20px; color:var(--ec-forest-t);}
#educlima .ec_txt strong{font-weight:600;}

/* Horizontal (grande): columna verde de 72 a todo el alto a la izquierda, texto a
   la derecha. ÚNICO corte de la pieza, a 353 (T13: desde ahí la caja más alta, en horizontal, no mide más que en vertical en ningún idioma; el peor, EN). Se
   reafirman `display` y dirección: fuera de aquí van con `!important`. */
@container ec (min-width: 353px){
  #educlima .ec_card{display:flex !important; flex-direction:row;}
  #educlima .ec_ico{display:flex !important; flex:0 0 72px; width:72px; min-height:0;}
  #educlima .ec_txt{display:flex !important; flex:1 1 auto; min-width:0;}
}

/* El corte de Figma a 565 en el título, desde que cabe: en ES, «Claves educativas para
   afrontar» entra en una línea desde 478 (490 deja margen). No es un cambio de
   disposición. Aquí, sin `balance`: repartiría «…para / afrontar el cambio climático». */
@container ec (min-width: 490px){
  #educlima .ec_nw{display:inline-block !important;}
  #educlima .ec_title:has(.ec_nw){text-wrap:wrap;}
}

/* ===== Navegación: contador y flechas (RD-11, RD-12) =========================
   Una sola vez, fuera del carril: no se desliza con la caja. */
#educlima .ec_nav{min-height:32px; padding:0 8px;}   /* mínimo, no fijo: aguanta el espaciado de texto aumentado */
#educlima .ec_cont{min-height:32px; padding:5px 16px; border-radius:24px;
  box-shadow:inset 0 0 0 1px var(--ec-forest);
  font-family:'IberPangea Text','IberPangea',sans-serif; font-style:italic; font-weight:400;
  font-size:14px; line-height:18px; color:var(--ec-forest); white-space:nowrap;}
#educlima .ec_cur{color:var(--ec-green1);}
/* Normal = trazo y punta Forest; al pasar el ratón y al pulsar = relleno #00A443
   y punta Sand 1; apagada = la normal a .5 y sin reaccionar. */
#educlima .ec_arrow{width:32px; height:32px; flex:0 0 auto; border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--ec-forest); color:var(--ec-forest);
  background:transparent;}
#educlima .ec_arrow svg{width:32px; height:32px; fill:currentColor;}
#educlima .ec_prev svg{transform:rotate(180deg);}
@media (hover:hover){
  #educlima .ec_arrow:not([aria-disabled="true"]):hover{background:var(--ec-hover);
    box-shadow:none; color:var(--ec-sand1);}
}
#educlima .ec_arrow:not([aria-disabled="true"]):active{background:var(--ec-hover);
  box-shadow:none; color:var(--ec-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. */
#educlima .ec_arrow[aria-disabled="true"]{box-shadow:inset 0 0 0 1px rgba(0, 64, 42, .5); cursor:default;}
#educlima .ec_arrow[aria-disabled="true"] svg{opacity:.5;}
#educlima .ec_arrow:focus-visible{outline:3px solid var(--ec-forest) !important;
  outline-offset:2px !important;}

/* ===== Fuente (RD-13) ======================================================== */
#educlima .ec_src{font-family:'IberPangea Text','IberPangea',sans-serif; font-style:italic;
  font-weight:400; font-size:14px; line-height:18px; color:var(--ec-forest);}

/* Alto contraste de Windows: quita las sombras, y con ellas los trazos. Sólo ahí. */
@media (forced-colors: active){
  #educlima,#educlima .ec_card,#educlima .ec_cont,#educlima .ec_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. El carril y las escenas, con
   la misma duración: van a la vez (D03). */
#educlima[data-anim] .ec_track{transition:transform .3s ease;}
#educlima[data-anim] .ec_ilu [data-ec-escena]{transition:opacity .3s ease;}
#educlima[data-anim] .ec_arrow{transition:background-color .15s ease, color .15s ease,
  box-shadow .15s ease;}
#educlima[data-drag] .ec_track{transition:none;}
@media (prefers-reduced-motion: reduce){
  #educlima[data-anim] .ec_track,
  #educlima[data-anim] .ec_ilu [data-ec-escena],
  #educlima[data-anim] .ec_arrow{transition:none;}
}

/* ===== Sin JS (RF-08) ========================================================
   Ningún control muerto: fuera contador y flechas, y las 4 cajas apiladas con
   su alto natural (gap 16, el de los nodos EN/PT). Con la media query y no con
   `:not([data-js])`: así, con JS, no se ve ni un instante la columna de 4. */
@media (scripting: none){
  #educlima .ec_nav{display:none !important;}
  #educlima .ec_track{flex-direction:column; align-items:stretch; gap:16px; transform:none;}
  #educlima .ec_card{flex:0 0 auto;}
}