/* =============================================================================
   Nuestra capacidad instalada y en construcción · estático de iberdrola.com
   Rediseño de la pieza que había (se retiró Swiper). Familia 020/022.
   Dos anchos de diseño: 980 y 290. Tres puntos de corte, cada uno con su cometido:
   400 el ARTE de las tarjetas, 565 el GRÁFICO y 700 el LAYOUT y la paginación.
   Medidas: specs/023-capacidad-instalada-construccion/design/
   ============================================================================= */

@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/capacidad-instalada-construccion/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/capacidad-instalada-construccion/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/capacidad-instalada-construccion/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/capacidad-instalada-construccion/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/capacidad-instalada-construccion/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/capacidad-instalada-construccion/fonts/IberPangeaText-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}

#installedcap{
  --ic-green1:#007F33;  --ic-green:#00A443;   --ic-forest:#00402A;
  --ic-forest1:#DCEBE1; --ic-forest3:#699282; --ic-sand1:#FFFEFF; --ic-sand:#FFF5EC;
  --ic-sky:#0DA9FF;     --ic-sunset:#FF9C1A;  --ic-foco:#0792E5;
}

/* ===== Marco ================================================================= */
#installedcap{
  container-type:inline-size;
  width:100%; max-width:980px; margin:0 auto; box-sizing:border-box;
  background:var(--ic-sand); border-radius:15px;
  position:relative; text-align:left;
}

/* ===== Blindaje frente al theme de Liferay (docs/VALIDACION.md) ==============
   La herencia PIERDE contra cualquier declaración del theme. `inherit` sí es una
   declaración: gana y conserva el valor del padre, así que no cambia nada. */
#installedcap *{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;}
#installedcap ul,#installedcap ol,#installedcap li{list-style:none;}
#installedcap li::marker{content:none;}
#installedcap li::before{content:'' !important; display:none !important; margin:0 !important;}
#installedcap *::before,#installedcap *::after{margin:0; padding:0; text-indent:0;
  letter-spacing:inherit; text-transform:inherit;}
#installedcap img{display:block; max-width:100%;}
#installedcap button{font:inherit; cursor:pointer; border:0; background:transparent;
  color:inherit; appearance:none; -webkit-appearance: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. */
#installedcap{
  font-family:'IberPangea Text',sans-serif; font-size:16px; line-height:20px;
  font-weight:400; font-style:normal; color:var(--ic-forest);
  letter-spacing:normal; text-transform:none; white-space:normal; text-decoration:none;
}
/* `display` no se hereda: elemento a elemento y con `!important`. Lo que cambia por
   tramo se reafirma en su tramo, nunca aquí (un !important fuera de la @container se
   come el responsive — lección de la 010). */
#installedcap{display:block !important;}
#installedcap .ic_titulo,#installedcap .ic_panel_tit,#installedcap .ic_t_texto,
#installedcap .ic_g_total,#installedcap .ic_g_pildora{display:block !important;}
#installedcap .ic_arte_img{display:block !important;}
#installedcap b{font-weight:600;}
#installedcap i{font-style:italic;}
#installedcap .ic_val,#installedcap .ic_cur,#installedcap .ic_tot{display:inline !important;}
/* En una caja flex hay que declarar el juego COMPLETO: el theme mete
   `div,ul{flex-direction:column-reverse; gap:0; align-items:flex-end; …}`. */
#installedcap .ic_inner,#installedcap .ic_filas,#installedcap .ic_panel,
#installedcap .ic_panel_caja,#installedcap .ic_tarjeta{
  display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start;}
#installedcap .ic_fila,#installedcap .ic_panel_cab,#installedcap .ic_pie,
#installedcap .ic_nav,#installedcap .ic_count,#installedcap .ic_t_cab{
  display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:flex-start;}
#installedcap .ic_inner{gap:16px; padding:16px;}
/* Frame 82: en móvil las dos filas van dentro de una tarjeta blanca de radio 16 y
   padding 16, igual que en 980 pero con su propio radio. Sin ella, la fila (arena) queda
   sobre el marco (arena) y la píldora no se ve. */
#installedcap .ic_filas{gap:16px; background:#FFFFFF; border-radius:16px; padding:16px;
  align-items:center;}
#installedcap .ic_panel_caja{gap:16px;}
#installedcap .ic_panel_cab{gap:10px;}
#installedcap .ic_nav{gap:16px; align-items:flex-start;}
#installedcap .ic_count{justify-content:center;}
#installedcap .ic_t_cab{gap:8px;}
#installedcap .ic_pie{justify-content:space-between;}

/* ===== Estado: qué se ve según `data-abierto` ================================
   Sin JS no hay `data-js` y NO se oculta nada: se lee todo el contenido. */
#installedcap[data-js] .ic_panel{display:none !important;}
#installedcap[data-js][data-abierto="1"] #ic_p1,
#installedcap[data-js][data-abierto="2"] #ic_p2{display:flex !important;}
#installedcap[data-js][data-abierto="1"] .ic_filas,
#installedcap[data-js][data-abierto="2"] .ic_filas{display:none !important;}

/* ===== Título ================================================================ */
/* 32/36 en los dos tramos: el frame de 290 usa el mismo tamaño que el de 980. Lo tuve
   en 24/28 por suponerlo, y el auditor llegó a AFIRMARLO — una aserción escrita mirando
   la implementación en vez del diseño no valida nada, sólo blinda el error. */
#installedcap .ic_titulo{font-family:'IberPangea',sans-serif; font-weight:400;
  font-size:32px; line-height:36px; color:var(--ic-green1) !important;}
#installedcap .ic_titulo b{font-weight:600;}

/* ===== Cuerpo y arte ========================================================= */
#installedcap .ic_cuerpo{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start; gap:16px;}
/* Cada dibujo se topa en su TAMAÑO NATURAL y se centra. Es la regla del repo («el dibujo
   no escala por encima de su ancho de diseño») y aquí no es cosmética: `ilustracion-m.svg`
   está dibujada para 259px con trazos gruesos a propósito, y al estirarla a ~667 los trazos
   salían brutales. Topándola, eso no puede pasar. */
#installedcap .ic_arte{background:#FFFFFF; border-radius:15px; overflow:hidden;
  display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:center; justify-content:center; padding:8px;}
#installedcap .ic_arte_img{width:100%; height:auto;}
#installedcap .ic_arte_img--mob{max-width:259px;}
#installedcap .ic_arte_img--desk{display:none !important; max-width:470px;}

/* ===== Filas plegables ======================================================= */
#installedcap .ic_fila{background:var(--ic-sand); border-radius:15px; padding:16px;
  gap:10px; width:100%; text-align:left;}
#installedcap .ic_fila_et{flex:1 1 auto; min-width:0;
  font-family:'IberPangea',sans-serif; font-weight:500; font-size:18px; line-height:22px;
  color:var(--ic-forest);}
#installedcap .ic_fila_mas{flex:0 0 auto; width:32px; height:32px;
  background:url('/wcorp/gc/prod/es_ES/estaticos/capacidad-instalada-construccion/images/ico-mas.svg') center/32px 32px no-repeat;}
@media (hover:hover){
  #installedcap .ic_fila:hover .ic_fila_mas{background-image:url('/wcorp/gc/prod/es_ES/estaticos/capacidad-instalada-construccion/images/ico-mas-hover.svg');}
}
#installedcap .ic_fila:focus-visible{outline:3px solid var(--ic-foco); outline-offset:3px;}

/* ===== Panel ================================================================= */
#installedcap .ic_panel{background:#FFFFFF; border-radius:15px; gap:0;}
#installedcap .ic_panel_caja{padding:16px;}
#installedcap .ic_panel_tit{flex:1 1 auto; min-width:0;
  font-family:'IberPangea',sans-serif; font-weight:400; font-size:24px; line-height:28px;
  color:var(--ic-green1) !important;}
#installedcap .ic_cerrar{flex:0 0 auto; width:32px; height:32px;
  background:url('/wcorp/gc/prod/es_ES/estaticos/capacidad-instalada-construccion/images/ico-cerrar.svg') center/32px 32px no-repeat;}
/* La X no tenía hover. Se le pone el mismo par que el «+» de las filas de fuera:
   #007F33 en reposo y #00402A al pasar por encima. */
@media (hover:hover){
  #installedcap .ic_cerrar:hover{background-image:url('/wcorp/gc/prod/es_ES/estaticos/capacidad-instalada-construccion/images/ico-cerrar-hover.svg');}
}
#installedcap .ic_cerrar:focus-visible{outline:3px solid var(--ic-foco); outline-offset:3px;}
/* El título recibe el foco al abrir el panel (para que el lector de pantalla aterrice ahí),
   pero es foco PROGRAMÁTICO: sin esto el navegador le pinta su anillo por defecto y se veía
   un recuadro azul alrededor del título. Con teclado sí debe verse, de ahí el focus-visible. */
/* Ni `:focus` ni `:focus-visible`: el título recibe el foco al abrir para que el lector de
   pantalla aterrice en el panel, pero NO es interactivo y el anillo ahí sólo es ruido
   (Chrome lo considera focus-visible aunque se haya abierto con el ratón). El foco visible
   se reserva para lo que sí se pulsa: filas, X y flechas. */
#installedcap .ic_panel_tit:focus,#installedcap .ic_panel_tit:focus-visible{outline:none;}

/* ===== Tarjetas ==============================================================
   Las páginas se apilan en UNA celda de rejilla: la celda mide lo que la página más
   alta a ese ancho, así que el panel no salta al pasar de página (patrón de la 020).
   El JS agrupa las tarjetas en `.ic_pagina` según `--ic-por-pagina`. */
/* `--ic-por-pagina` vive en `.ic_tarjetas`, NO en la raiz: `@container` no reestila a su
   propio contenedor, asi que puesta en `#installedcap` no cambiaba nunca y el JS leia
   siempre 3. Es la trampa que ya nos costo la 010 y la acciones-medioambiente. */
#installedcap .ic_tarjetas{--ic-por-pagina:2; display:grid !important; grid-template-areas:"p";
  grid-template-columns:minmax(0,1fr); gap:0;
  align-items:stretch; justify-items:stretch; justify-content:start; align-content:start;}
#installedcap .ic_pagina{grid-area:p; display:grid !important; gap:16px;
  grid-template-columns:minmax(0,1fr); align-content:start; visibility:hidden;}
/* La página visible la marca el JS con una clase. Antes se emparejaban a mano
   `[data-pag="N"]` con `[data-p="N"]`, una regla por número, y la lista llegaba hasta 3: con
   2 tarjetas por página el módulo de 6 hace justo 3 páginas, así que la siguiente tarjeta que
   alguien añadiera habría dejado una página invisible sin que nada avisara. */
#installedcap .ic_pagina--on{visibility:visible;}
#installedcap .ic_tarjeta{background:#FFFFFF; border-radius:8px;
  box-shadow:inset 0 0 0 1px var(--ic-green1); padding:16px 24px; gap:8px;}
#installedcap .ic_t_ico{flex:0 0 auto; width:45px; height:45px;}
#installedcap .ic_t_nombre{font-family:'IberPangea',sans-serif; font-weight:500;
  font-size:18px; line-height:22px; color:var(--ic-forest);}
#installedcap .ic_t_cifra{font-family:'IberPangea',sans-serif; font-weight:400;
  font-size:24px; line-height:28px; color:var(--ic-green1);}
/* Por debajo de 565 la tarjeta no lleva dibujo: así lo hace Figma en 290 y así se evita el
   pilón de alto que generaba ponerlo debajo del texto. */
#installedcap .ic_t_arte{display:none !important;}
#installedcap .ic_t_txt{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start; gap:8px; min-width:0;}
#installedcap .ic_tarjeta--texto .ic_t_nombre{color:var(--ic-green1);}
#installedcap .ic_t_texto{font-size:16px; line-height:20px; color:var(--ic-forest);}

/* ===== Pie =================================================================== */
#installedcap .ic_pie{height:32px;}
#installedcap .ic_count{height:32px; padding:5px 16px; border-radius:24px;
  box-shadow:inset 0 0 0 1px var(--ic-forest);
  font-style:italic; font-size:14px; line-height:18px; color:var(--ic-forest);}
#installedcap .ic_cur{color:var(--ic-green1);}
#installedcap .ic_arrow{width:32px; height:32px; background-repeat:no-repeat;
  background-position:center; background-size:32px 32px;}
#installedcap .ic_prev{background-image:url('/wcorp/gc/prod/es_ES/estaticos/capacidad-instalada-construccion/images/ico-prev.svg');}
#installedcap .ic_next{background-image:url('/wcorp/gc/prod/es_ES/estaticos/capacidad-instalada-construccion/images/ico-next.svg');}
@media (hover:hover){
  #installedcap .ic_prev:not(:disabled):hover{background-image:url('/wcorp/gc/prod/es_ES/estaticos/capacidad-instalada-construccion/images/ico-prev-hover.svg');}
  #installedcap .ic_next:not(:disabled):hover{background-image:url('/wcorp/gc/prod/es_ES/estaticos/capacidad-instalada-construccion/images/ico-next-hover.svg');}
}
/* DESHABILITADA: vuelve al círculo en CONTORNO, que es lo que dice Figma
   (`20599:14587` → `Boton-flecha`: rect con `stroke:#00402A` y el grupo a `opacity:0.5`).
   Sólo la flecha ACTIVA va rellena. Se cambiaron las dos de golpe en la primera pasada de esta
   ronda y la deshabilitada quedaba como un círculo verde pálido, que no es el diseño. */
#installedcap .ic_arrow:disabled{opacity:.5; cursor:default;}
#installedcap .ic_prev:disabled{background-image:url('/wcorp/gc/prod/es_ES/estaticos/capacidad-instalada-construccion/images/ico-prev-off.svg');}
#installedcap .ic_next:disabled{background-image:url('/wcorp/gc/prod/es_ES/estaticos/capacidad-instalada-construccion/images/ico-next-off.svg');}
#installedcap .ic_arrow:focus-visible{outline:3px solid var(--ic-foco); outline-offset:3px;}

/* ===== Gráfico del módulo 2 ==================================================
   La barra mide 368,7 sobre un panel de 908 y va centrada: 40,6 %. Los tramos van
   en % del total (9,5 GW), calculados por el generador, así que la barra escala con
   el panel sin recalcular nada. */
/* ---- Gráfico, MÓVIL: las barras van EN VERTICAL --------------------------------
   No es el de 980 apilado: en 290 las dos barras se ponen de pie, las cuatro cifras a
   la izquierda y la leyenda a la derecha (frame 20615:18706).
   La regla que lo ordena todo: **las dos columnas espejan la barra**. Cada cifra y cada
   leyenda ocupan el alto de SU tramo (`height:var(--w)`); las cifras se alinean al
   INICIO del tramo y las leyendas van CENTRADAS en él. Con eso salen las posiciones de
   Figma (180/239/272/316 y 175/290) sin un solo número mágico. */
/* Las tres primeras columnas van a `max-content`, NO a `auto`: una pista `auto` absorbe el
   espacio libre y las barras se ensanchaban de 19,7 a 32,4, dejando a la leyenda 42,9 para
   89 de texto — que se salía cortada. Con `max-content` cada barra mide lo suyo y la leyenda
   se queda con el resto. */
/* Las dos columnas de los lados van a `1fr` IGUALES, así el par de barras queda centrado
   en el bloque y alineado con el título. Y se topa en 320: si se deja crecer, entre 400 y
   565 la leyenda se iba al otro extremo y quedaba un hueco enorme en medio. */
#installedcap .ic_grafico{display:grid !important;
  grid-template-columns:minmax(0,1fr) max-content max-content minmax(0,1fr); gap:8px 12px;
  align-items:start; justify-items:center; padding:16px 16px 0;
  max-width:320px; margin-inline:auto;}
/* En vertical las dos píldoras NO van juntas: «9,5 GW» arriba de las barras y
   «75% con CfDs o PPAs» debajo (Figma 20614:18703: una en y 121 y la otra en y 362).
   `display:contents` las suelta en la rejilla para poder ponerlas en filas distintas. */
#installedcap .ic_g_pildoras{display:contents !important;}
#installedcap .ic_g_total{grid-column:1/-1; grid-row:1; justify-self:center;}
#installedcap .ic_g_pildora{grid-column:1/-1; grid-row:3; justify-self:center;}
#installedcap .ic_g_barra{width:19.7px; min-width:0; height:174.5px;}

/* `width:max-content` es imprescindible: con `auto`, la pista de la rejilla se
   dimensionaba por el icono (26px) e ignoraba la cifra, el bloque se salía 44px y la
   barra le pasaba por encima cortando los números. */
#installedcap .ic_g_pies{flex-direction:column !important; align-items:flex-end;
  width:max-content; min-width:0; height:174.5px; grid-column:1; grid-row:2;}
#installedcap .ic_g_pie > *{flex:0 0 auto;}
#installedcap .ic_g_pie{height:var(--w); align-items:flex-start; gap:4px;
  font-family:'IberPangea Text',sans-serif; font-size:16px; line-height:20px;}
#installedcap .ic_g_ico{width:24px; height:24px; -webkit-mask-size:24px 24px; mask-size:24px 24px;}
#installedcap .ic_g_barra--desglose{grid-column:2; grid-row:2;}
#installedcap .ic_g_barra--reparto{grid-column:3; grid-row:2;}
#installedcap .ic_g_leyenda{grid-column:4; grid-row:2; display:flex !important;
  flex-direction:column; flex-wrap:nowrap; align-items:flex-start; justify-content:flex-start;
  height:174.5px;}
/* La leyenda tiene 120px de columna y el texto ENVUELVE: «En construcción» no cabe en una
   línea junto a las dos barras y las cifras (quedan ~100px libres de los 258). Antes iba a
   `max-content` y se salía cortada por el borde del panel. */
#installedcap .ic_g_lado{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:flex-start; justify-content:center; min-width:0;}
#installedcap .ic_g_lado b,#installedcap .ic_g_lado i{white-space:normal;}
/* Los anchos de las etiquetas son los de Figma (67 y 99), que es lo que hace que partan
   en «Ready to / build» y «En / construcción». Sin toparlas, caben en una línea y el salto
   desaparece. Al traducir habrá que revisarlos. */
#installedcap .ic_g_lado--izq i{max-width:67px;}
#installedcap .ic_g_lado--der i{max-width:99px;}
#installedcap .ic_g_lado--izq{height:25%;}
#installedcap .ic_g_lado--der{height:75%;}
#installedcap .ic_g_lado b{font-family:'IberPangea Text',sans-serif; font-weight:400;
  font-size:16px; line-height:20px;}
#installedcap .ic_g_lado i{font-size:14px; line-height:16px;}
#installedcap .ic_g_total{font-size:18px; line-height:27px; height:27px;}
/* Sólo lo compartido: el tamaño lo pone cada tramo (móvil 18/27, 980 16/30). Si aquí
   quedara un `font-size`, ganaría por orden de fichero al override de móvil. */
#installedcap .ic_g_total,#installedcap .ic_g_pildora{padding:0 10px; border-radius:8px;
  font-family:'IberPangea Text',sans-serif; font-weight:600; text-align:center;
  white-space:nowrap;}
#installedcap .ic_g_total{background:var(--ic-forest); color:var(--ic-sand1);}
#installedcap .ic_g_pildora{background:var(--ic-forest1); color:var(--ic-forest);
  height:30px; line-height:30px; font-size:16px;}
/* Sólo lo COMPARTIDO por los dos tramos. El tamaño y la dirección los pone cada tramo:
   en móvil la barra va de pie y en 980 tumbada, y si aquí quedara un `width` la base
   ganaría por orden de fichero al override de móvil (que va antes). */
/* Ni radio ni recorte: la forma (extremos y arcos) la trae el propio SVG. */
#installedcap .ic_g_barra{display:block !important;}
/* El que crece es el RELLENO, no cada tramo. La barra se queda con el radio y el recorte,
   así que los extremos redondeados no se deforman durante la animación. */
#installedcap .ic_g_relleno{display:block !important; width:100%; height:100%;}
/* Las barras son SVG generados desde los datos: cada tramo es una rodaja de cilindro con
   su arco y el extremo lleva su elipse. Van los dos sentidos en el DOM y cada tramo enseña
   el suyo; pesan ~600 B cada uno. */
#installedcap .ic_g_svg{display:block !important; width:100%; height:100%;}
#installedcap .ic_g_svg--h{display:none !important;}
/* Crecen desde el extremo PLANO: el redondeado es la meta (regla del repo). */
#installedcap .ic_g_barra--reparto .ic_g_tramo[data-r="0"]{background:var(--ic-forest);}
#installedcap .ic_g_barra--reparto .ic_g_tramo[data-r="1"]{background:var(--ic-green);}
#installedcap .ic_g_tramo[data-k="eolica-marina"]{background:var(--ic-sky);}
#installedcap .ic_g_tramo[data-k="eolica-terrestre"]{background:var(--ic-green);}
#installedcap .ic_g_tramo[data-k="solar"]{background:var(--ic-sunset);}
#installedcap .ic_g_tramo[data-k="baterias"]{background:var(--ic-forest3);}
#installedcap .ic_g_lado{font-family:'IberPangea',sans-serif;}
#installedcap .ic_g_lado b{display:block; font-weight:400;}
#installedcap .ic_g_lado i{display:block; font-family:'IberPangea Text',sans-serif;
  font-weight:600;}
#installedcap .ic_g_lado--izq{color:var(--ic-forest);}
#installedcap .ic_g_lado--izq i{font-style:italic;}
#installedcap .ic_g_lado--der{color:var(--ic-green);}
#installedcap .ic_g_lado--der i{font-style:normal;}
#installedcap .ic_g_pies{display:flex !important; flex-wrap:nowrap;
  justify-content:flex-start; gap:0;}
#installedcap .ic_g_pie{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  justify-content:flex-start; color:var(--c);}
/* El icono es el MISMO svg de la tarjeta, en monocromo: se pinta con `mask` para
   poder tintarlo por tramo sin duplicar ficheros. */
#installedcap .ic_g_ico{flex:0 0 auto; width:43px; height:43px; background:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:43px 43px; mask-size:43px 43px;}

/* =============================================================================
   TRAMO 400 — a partir de aquí el dibujo grande es el de escritorio y las tarjetas
   ponen el texto a la izquierda y la ilustración a la derecha, en vez de apilarlos.
   El 400 está MEDIDO, no elegido a ojo: recorriendo de 320 a 600 con el dibujo forzado,
   los nombres aguantan en una línea hasta 360 (a 350 «Eólica terrestre» envuelve) y el
   dibujo llega a su tamaño natural (133) a partir de 410. 400 deja ~45px de margen sobre
   el punto de rotura real.
   Es un segundo punto de corte además del de 700: se aparta de RD-03 («un solo punto»)
   a petición del usuario, y cada uno tiene su cometido —400 el ARTE, 700 el LAYOUT y la
   paginación—, así que no se pisan.
   ============================================================================= */
@container (min-width: 400px){
  #installedcap .ic_arte_img--desk{display:block !important;}
  #installedcap .ic_arte_img--mob{display:none !important;}

  #installedcap .ic_tarjeta--dato{flex-direction:row; align-items:flex-start; gap:16px;}
  #installedcap .ic_t_txt{flex:1 1 auto;}
  /* El dibujo se topa por ALTURA (114,75, la de Figma), no por un % de ancho: son piezas
     verticales (el aerogenerador es 66x150) y topándolas por ancho la tarjeta se iba a 445
     de alto. Así cada una queda como en el diseño y la tarjeta no crece. */
  #installedcap .ic_t_arte{display:block !important; flex:0 0 auto; margin-left:auto;
    align-self:flex-end; width:auto; height:auto; max-height:114.75px; max-width:45%;}
}

/* =============================================================================
   TRAMO 565 — el gráfico pasa a HORIZONTAL.
   El vertical es un layout de MÓVIL: a 690 de ancho una barra de pie con la leyenda al
   otro extremo no tiene sentido. MEDIDO: el horizontal cabe desde 460, pero hasta ~560
   las leyendas van apretadas, así que el cambio se hace en 565.
   ============================================================================= */
@container (min-width: 565px){
  #installedcap .ic_grafico{max-width:none; margin-inline:0;}
  /* Gráfico horizontal: leyenda | barra | leyenda. La barra mide 368,7 sobre 908
     (40,6 %) y va centrada, así que las leyendas caen a sus lados como en Figma. */
  /* Sin padding lateral: así el 40,6 % se calcula sobre los 908 del panel y la barra mide
     los 368,7 de Figma, con las dos columnas de los extremos exactamente iguales. */
  #installedcap .ic_grafico{grid-template-columns:1fr minmax(240px,40.6%) 1fr;
    gap:10px 16px; align-items:center; padding:24px 0 0;}
  /* Cada píldora a su lado: «9,5 GW» al borde izquierdo de la barra y «75% con CfDs» al
     derecho. En Figma la primera arranca en 275 con la barra en 269,65, y la segunda acaba
     en 635 con la barra en 638,35. */
  #installedcap .ic_g_pildoras{grid-column:2; justify-self:stretch;
    display:flex !important; flex-direction:row; flex-wrap:wrap;
    align-items:center; justify-content:space-between; gap:12px;}
  /* A partir de aquí la barra va tumbada: se enseña el SVG horizontal y se esconde el
     vertical. Los dos están en el DOM porque la geometría no se puede girar por CSS. */
  #installedcap .ic_g_svg--v{display:none !important;}
  #installedcap .ic_g_svg--h{display:block !important;}
  #installedcap .ic_g_barra{width:100%; height:41.5px; border-radius:21px;}
  #installedcap .ic_g_relleno{flex-direction:row;}
  #installedcap .ic_g_tramo{width:var(--w); height:100%;}
  #installedcap .ic_g_barra--reparto{grid-column:2; grid-row:2;}
  #installedcap .ic_g_barra--desglose{grid-column:2; grid-row:3;}
  #installedcap .ic_g_pies{flex-direction:row !important; align-items:center;
    width:100%; height:auto; grid-column:2; grid-row:4;}
  #installedcap .ic_g_pie{height:auto; align-items:center; gap:8px;
    font-family:'IberPangea',sans-serif; font-size:24px; line-height:28px;}
  #installedcap .ic_g_ico{width:43px; height:43px; -webkit-mask-size:43px 43px; mask-size:43px 43px;}
  #installedcap .ic_g_leyenda{display:contents !important;}
  #installedcap .ic_g_lado{height:auto;}
  #installedcap .ic_g_lado--izq{grid-column:1; grid-row:2; align-items:flex-end; text-align:right;}
  #installedcap .ic_g_lado--der{grid-column:3; grid-row:2; align-items:flex-start; text-align:left;}
  #installedcap .ic_g_lado--izq i,#installedcap .ic_g_lado--der i{max-width:none;}
  #installedcap .ic_g_lado b{font-family:'IberPangea',sans-serif; font-size:24px; line-height:28px;}
  #installedcap .ic_g_lado i{font-size:16px; line-height:20px;}
  #installedcap .ic_g_total{font-size:16px; line-height:30px; height:30px;}
}

/* =============================================================================
   TRAMO DESKTOP — diseño de 980
   ============================================================================= */
@container (min-width: 700px){
  /* El número de tarjetas por página ya NO cambia aquí: son 2 en todos los anchos. Estaba en 3
     para el tramo estrecho y 2 para el ancho, y eso dejaba el módulo de 4 tarjetas en 3 + 1 en
     móvil — una página con tres y otra con una sola, que es lo que canta a la vista. */
  #installedcap .ic_inner{gap:24px; padding:36px;}


  /* Cerrado: dos columnas blancas iguales con 24 de hueco. Abierto, el panel ocupa
     el cuerpo entero y la ilustración y las filas desaparecen (D-05 / RF-04). */
  #installedcap .ic_cuerpo{flex-direction:row; gap:24px; align-items:stretch;}
  #installedcap .ic_arte{flex:1 0 0; min-width:0; display:flex !important;
    flex-direction:column; flex-wrap:nowrap; align-items:center; justify-content:center;}
  #installedcap .ic_arte_img--desk{display:block !important;}
  #installedcap .ic_arte_img--mob{display:none !important;}
  #installedcap .ic_filas{flex:1 0 0; min-width:0; border-radius:15px; padding:24px;
    gap:24px; justify-content:stretch;}
  #installedcap .ic_fila{flex:1 0 0;}
  #installedcap[data-js][data-abierto="1"] .ic_arte,
  #installedcap[data-js][data-abierto="2"] .ic_arte{display:none !important;}
  #installedcap .ic_panel{flex:1 0 0; min-width:0;}

  /* Dos tarjetas por página, en fila */
  #installedcap .ic_panel_caja{padding:24px;}
  #installedcap .ic_pagina{grid-template-columns:repeat(2,minmax(0,1fr));}

}

/* ===== Animaciones (animations.md) ==========================================
   A1 el despliegue y A2 el crecimiento de las barras. Nada más se anima: el cambio
   de página es instantáneo. */
#installedcap .ic_panel{animation:ic-abre 250ms ease;}
@keyframes ic-abre{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
/* Crece la barra ENTERA, no cada tramo por su cuenta. En vertical (móvil) crece de abajo
   arriba, y en horizontal (980) de izquierda a derecha: siempre desde el extremo plano. */
#installedcap[data-anima] .ic_g_relleno{animation:ic-crece-v 600ms ease-out 150ms backwards;
  transform-origin:center bottom;}
@keyframes ic-crece-v{from{transform:scaleY(0);} to{transform:scaleY(1);}}
@container (min-width: 565px){
  #installedcap[data-anima] .ic_g_relleno{animation-name:ic-crece-h;
    transform-origin:left center;}
}
@keyframes ic-crece-h{from{transform:scaleX(0);} to{transform:scaleX(1);}}
@media (prefers-reduced-motion: reduce){
  #installedcap .ic_panel{animation:none;}
  #installedcap[data-anima] .ic_g_relleno{animation:none;}
}
#installedcap .ic_g_ico--eolica-marina{-webkit-mask-image:url('/wcorp/gc/prod/es_ES/estaticos/capacidad-instalada-construccion/images/icono-eolica-marina.svg');mask-image:url('/wcorp/gc/prod/es_ES/estaticos/capacidad-instalada-construccion/images/icono-eolica-marina.svg');}
#installedcap .ic_g_ico--eolica-terrestre{-webkit-mask-image:url('/wcorp/gc/prod/es_ES/estaticos/capacidad-instalada-construccion/images/icono-eolica-terrestre.svg');mask-image:url('/wcorp/gc/prod/es_ES/estaticos/capacidad-instalada-construccion/images/icono-eolica-terrestre.svg');}
#installedcap .ic_g_ico--solar{-webkit-mask-image:url('/wcorp/gc/prod/es_ES/estaticos/capacidad-instalada-construccion/images/icono-solar.svg');mask-image:url('/wcorp/gc/prod/es_ES/estaticos/capacidad-instalada-construccion/images/icono-solar.svg');}
#installedcap .ic_g_ico--baterias{-webkit-mask-image:url('/wcorp/gc/prod/es_ES/estaticos/capacidad-instalada-construccion/images/icono-baterias.svg');mask-image:url('/wcorp/gc/prod/es_ES/estaticos/capacidad-instalada-construccion/images/icono-baterias.svg');}