/* =============================================================================
   ODS 13 · Acción por el clima — infografía estática de iberdrola.com
   Rehace la pieza anterior de este mismo módulo: no se hereda nada de ella.
   Dos anchos de diseño (290 y 565) y UN solo punto de cambio de layout, en 565.
   Entre medias TODO se interpola: ningún valor salta (spec RD-04, plan §2.2).
   Medidas: specs/030-ods-13-actualizacion/design/ — cero valores «a ojo».
   Sin JS y sin animación (D-03).
   ============================================================================= */

/* ===== IberPangea + IberPangea Text (autocontenidas) =========================
   Sin la fuente real cambian los anchos de línea y con ellos el número de líneas:
   las medidas dejarían de cuadrar. Rutas absolutas, como toda la pieza. */
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/ods-13/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/ods-13/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/ods-13/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/ods-13/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/ods-13/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/ods-13/fonts/IberPangeaText-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}

/* ===== Marco y contenedor ====================================================
   El trazo va como `box-shadow: inset`, NO como `border`: en Figma el trazo no
   consume layout, así que el contenido sigue midiendo 501 y 258 con sus paddings.
   El marco va en LOS DOS tamaños (D-11, desviación autorizada: Figma sólo lo pone
   en el frame de 565).
   `box-sizing` incluye la RAÍZ: `#scope *` no la alcanza (costó semanas en la 027).
   NO se pone `overflow:hidden`: si algo desbordara, lo taparía y dejaría ciega la
   aserción `scrollWidth − clientWidth` del barrido. */
#climateaction,#climateaction *,
#climateaction *::before,#climateaction *::after{box-sizing:border-box;}

#climateaction{
  --ca-green1:#007F33;   /* Green 1 · títulos */
  --ca-forest:#00402A;   /* Iberdrola Forest · subtítulo y título del mapa */
  --ca-sunset:#FF9C1A;   /* Iberdrola Sunset · callouts */
  --ca-sand:#FFF5EC;     /* Iberdrola Sand · fondo de las tarjetas Sand */
  --ca-sand3:#D8CFC7;    /* Sand 3 · trazos */
  --ca-sand7:#3A3735;    /* Sand 7 · cuerpo de texto */
  --ca-fam:'IberPangea',Arial,Helvetica,sans-serif;
  --ca-fam-text:'IberPangea Text',Arial,Helvetica,sans-serif;

  container-type:inline-size; container-name:ca;   /* manda el HUECO, no la ventana */
  width:100%; max-width:980px; margin:0 auto;      /* se incrusta: sin margen vertical */
  background:#FFFFFF; border-radius:15px;
  box-shadow:inset 0 0 0 1px var(--ca-sand3);
  position:relative;
}

/* ===== Blindaje frente al theme de Liferay (docs/VALIDACION.md) ==============
   Va desde el PRIMER commit del CSS, no al final. La herencia pierde contra
   cualquier declaración del theme, por débil que sea; `inherit` sí es una
   declaración: gana al theme y conserva el valor del padre, así que no cambia
   nada visualmente ni rompe el responsive.
   `font-size`/`line-height`/`letter-spacing` aparte del `font:` abreviado, porque
   en la 025 un `strong{font-size}` del theme se coló por ahí. */
#climateaction *{color:inherit; font:inherit; font-size:inherit; line-height:inherit;
  letter-spacing:inherit; text-align:inherit; text-transform:inherit; white-space:inherit;
  text-indent:0; text-decoration:none; margin:0; padding:0;}
#climateaction ul,#climateaction ol,#climateaction li{list-style:none;}
#climateaction li::marker{content:none;}
/* El `display:none` importa: con sólo `content:''` el pseudo SE CREA y, si el `li`
   fuese flex, contaría como un item más y metería un hueco fantasma (lección 013). */
#climateaction li::before{content:'' !important; display:none !important; margin:0 !important;}
/* `#climateaction *` NO alcanza a los pseudo-elementos: se blindan aparte y SIN
   `content`, para no crear pseudos donde no hay. */
#climateaction *::before,#climateaction *::after{margin:0; padding:0; text-indent:0;
  letter-spacing:inherit; text-transform:inherit;}
#climateaction img{display:block; max-width:100%; border:0;}

/* La RAÍZ tiene que declarar todo lo heredable: si no, hereda del portal y el
   `inherit` de arriba propaga fielmente el valor del theme hacia dentro. */
#climateaction{
  font-family:var(--ca-fam); font-size:16px; line-height:20px; font-weight:400;
  font-style:normal; color:var(--ca-sand7); letter-spacing:normal; text-align:left;
  text-transform:none; white-space:normal; text-decoration:none; word-spacing:normal;
}

/* `display` NO se hereda, así que `inherit` no vale: se declara elemento a elemento
   y con `!important`. Lo que NO cambia entre tramos puede vivir fuera de la
   @container; lo que sí cambia (`.ca_cab`) se reafirma en cada tramo, porque un
   `!important` fuera de la consulta se comería el responsive (lección de la 010). */
#climateaction{display:block !important;}
#climateaction .ca_titulo,#climateaction .ca_sub,#climateaction .ca_badge,
#climateaction .ca_hueco,
#climateaction .ca_mapa_tit,#climateaction .ca_escena,#climateaction .ca_planisferio,
#climateaction .ca_circ,#climateaction .ca_lin,#climateaction .ca_nombres,
#climateaction .ca_n,#climateaction .ca_ico,#climateaction .ca_card_tit,
#climateaction .ca_card_txt,#climateaction .ca_pie{display:block !important;}
#climateaction b{display:inline !important; font-weight:600;}
/* Los saltos forzados: el `<br>` sin clase está en los dos tramos (el corte tras
   «impactos» del título del mapa lo tienen los dos frames); `.ca_salto` sólo en el
   estrecho. Se REAFIRMA en cada tramo — un `!important` fuera de la consulta se
   comería el cambio. `#climateaction .ca_salto` (1-1-0) gana a `#climateaction br`
   (1-0-1), que es lo que hace que el de abajo pueda apagarlo. */
#climateaction br{display:inline !important;}

/* En una caja flex no basta con el `display`: el theme mete
   `div,ul{flex-direction:column-reverse; gap:0; align-items:flex-end; …}` y pisa
   lo que no declaremos. `align-items:stretch` y NUNCA `flex-start`: `flex-start`
   quita el estirado y encoge los hijos al ancho de su texto (así rompí la 027). */
#climateaction .ca_inner{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start;}
/* `stretch`, no `flex-start`: con `flex-start` el título y el subtítulo encogen al
   ancho de su propio texto en vez de ocupar la columna. En ES no se notaba —su texto
   ya pasaba de 385 y la caja salía 385 igual—, pero en EN, con los saltos forzados,
   la caja del título se quedaba en 284 de 385 y el texto dejaba de repartirse como
   debía. Es la misma trampa que rompió la 027. */
#climateaction .ca_txt{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start;}
#climateaction .ca_mapa{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start;}
#climateaction .ca_card{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start;}
#climateaction .ca_card_cab{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:flex-start; justify-content:flex-start;}
#climateaction .ca_clave,#climateaction .ca_sand{display:grid !important;
  align-items:stretch; justify-items:stretch;}

/* =============================================================================
   INTERPOLACIÓN 290 ↔ 565
   Bloque GENERADO por scripts/gen-interpolacion-030.py a partir de los dos frames
   de Figma y de los SVG reales de los callouts. No se edita a mano: se regenera.
   Copia literal de specs/030-ods-13-actualizacion/design/mapa/interpolacion.css
   ============================================================================= */
/* <<< INTERPOLACION GENERADA >>> */
/* GENERADO por scripts/gen-interpolacion-030.py — no editar a mano (T06).
   Fórmula de plan.md §2.2: exacto a 290 y a 565, continuo en medio.
   Las variables se declaran en la RAÍZ y se usan en los descendientes: `cqi`
   resuelve contra el contenedor más cercano, que es #climateaction, y una
   @container nunca reestila su propio contenedor (por eso el override del
   tramo ancho va en .ca_inner, no en la raíz). */
#climateaction{
  /* --- Raíz --- */
  --ca-pad-x: max(16px, calc(5.8182cqi - 0.8727px));   /* 16 → 32 · Padding lateral del contenido */
  --ca-pad-y: max(32px, calc(2.9091cqi + 23.5636px));   /* 32 → 40 · Padding superior e inferior */
  --ca-gap: max(16px, calc(2.9091cqi + 7.5636px));   /* 16 → 24 · Hueco entre bloques */
  /* --- Tipografía --- */
  --ca-h1-fs: max(30px, calc(0.7273cqi + 27.8909px));   /* 30 → 32 · Título · tamaño */
  --ca-h1-lh: max(34px, calc(0.7273cqi + 31.8909px));   /* 34 → 36 · Título · interlínea */
  --ca-h2-fs: max(21px, calc(1.0909cqi + 17.8364px));   /* 21 → 24 · Subtítulo y título del mapa · tamaño */
  --ca-h2-lh: max(24px, calc(1.4545cqi + 19.7818px));   /* 24 → 28 · Subtítulo y título del mapa · interlínea */
  --ca-pie-fs: max(12px, calc(0.7273cqi + 9.8909px));   /* 12 → 14 · Pie · tamaño */
  --ca-pie-lh: max(16px, calc(0.7273cqi + 13.8909px));   /* 16 → 18 · Pie · interlínea */
  /* --- Cabecera --- */
  --ca-badge: max(68.5157px, calc(17.267cqi + 18.4413px));   /* 68.5157 → 116 · Badge del ODS 13 (lado) */
  --ca-badge-top: min(5.2422px, calc(-1.9063cqi + 10.7703px));   /* 5.2422 → 0 · Badge · desplazamiento superior */
  --ca-sub-w: max(258px, calc(46.1818cqi + 124.0727px));   /* 258 → 385 · Subtítulo · ancho de la caja */
  /* --- Escena --- */
  --ca-esc-h: max(235px, calc(7.2391cqi + 214.0065px));   /* 235 → 254.9076 · Escena del mapa · alto */
  --ca-map-top: min(62px, calc(-22.5455cqi + 127.3818px));   /* 62 → 0 · Planisferio · desplazamiento superior */
  --ca-map-h: max(130.8805px, calc(45.1008cqi + 0.0883px));   /* 130.8805 → 254.9076 · Planisferio · alto */
  /* --- Etiquetas --- */
  --ca-cari-c1: max(71px, calc(5.0909cqi + 56.2364px));   /* 71 → 85 · Caribe · ancho mínimo de la columna 1 */
  --ca-cari-c2: max(76px, calc(3.2727cqi + 66.5091px));   /* 76 → 85 · Caribe · ancho mínimo de la columna 2 */
  --ca-mi-w: max(69px, calc(3.2727cqi + 59.5091px));   /* 69 → 78 · Myanmar/India · ancho mínimo */
  --ca-lib-w: max(36px, calc(2.5455cqi + 28.6182px));   /* 36 → 43 · Libia · ancho mínimo */
  --ca-fil-w: max(62px, calc(1.4545cqi + 57.7818px));   /* 62 → 66 · Filipinas · ancho mínimo */
  --ca-cari-top: 0px;   /* 0 → 0 · Caribe · borde superior en la escena */
  --ca-mi-top: max(191px, calc(3.3236cqi + 181.3615px));   /* 191 → 200.14 · Myanmar/India · borde superior */
  --ca-fil-top: max(63px, calc(2.5455cqi + 55.6182px));   /* 63 → 70 · Filipinas · borde superior */
  --ca-lib-gap: 7.2684px;   /* 7.2684 → 7.2684 · Libia · hueco entre la línea y la etiqueta (tramo móvil) */
  /* --- Callouts --- */
  --ca-c1-cx: max(66.1969px, calc(22.5423cqi + 0.8244px));   /* 66.1969 → 128.1881 · Caribe · centro X del círculo */
  --ca-c1-cy: max(130.894px, calc(0.5135cqi + 129.4049px));   /* 130.894 → 132.3061 · Caribe · centro Y del círculo */
  --ca-c1-d: max(37.6138px, calc(4.7431cqi + 23.8589px));   /* 37.6138 → 50.6572 · Caribe · diámetro (eje del trazo) */
  --ca-c1-lx: max(65.4469px, calc(22.4088cqi + 0.4614px));   /* 65.4469 → 127.0711 · Caribe · X de la línea */
  --ca-c1-ll: min(35.0472px, calc(-0.2979cqi + 35.9111px));   /* 35.0472 → 34.228 · Caribe · largo de la línea */
  --ca-c1-dx: min(10.0531px, calc(-3.6815cqi + 20.7295px));   /* 10.0531 → -0.0711 · Caribe · desfase etiqueta ↔ línea */
  --ca-c1-ly: min(76.29px, calc(-1.56cqi + 80.814px));   /* 76.29 → 72 · Caribe · Y de arranque de la línea */
  --ca-c2-cx: max(119.0703px, calc(51.5336cqi - 30.3772px));   /* 119.0703 → 260.7878 · Libia · centro X del círculo */
  --ca-c2-cy: min(128.0703px, calc(-2.076cqi + 134.0908px));   /* 128.0703 → 122.3612 · Libia · centro Y del círculo */
  --ca-c2-d: min(46.6396px, calc(-0.4091cqi + 47.826px));   /* 46.6396 → 45.5146 · Libia · diámetro (eje del trazo) */
  --ca-c2-lx: max(118.3199px, calc(51.5336cqi - 31.1275px));   /* 118.3199 → 260.0373 · Libia · X de la línea */
  --ca-c2-ll: min(31.5918px, calc(-0.2685cqi + 32.3705px));   /* 31.5918 → 30.8534 · Libia · largo de la línea */
  --ca-c2-dx: min(0.6801px, calc(-0.3681cqi + 1.7477px));   /* 0.6801 → -0.3323 · Libia · desfase etiqueta ↔ línea */
  --ca-c3-cx: max(178.6485px, calc(63.5254cqi - 5.5751px));   /* 178.6485 → 353.3433 · Myanmar/India · centro X del círculo */
  --ca-c3-cy: max(131.5785px, calc(1.0381cqi + 128.5681px));   /* 131.5785 → 134.4332 · Myanmar/India · centro Y del círculo */
  --ca-c3-d: max(35.3574px, calc(9.0362cqi + 9.1524px));   /* 35.3574 → 60.207 · Myanmar/India · diámetro (eje del trazo) */
  --ca-c3-lx: max(178.7543px, calc(63.7597cqi - 6.1489px));   /* 178.7543 → 354.0935 · Myanmar/India · X de la línea */
  --ca-c3-ll: min(34px, calc(-1.1442cqi + 37.3182px));   /* 34 → 30.8534 · Myanmar/India · largo de la línea */
  --ca-c3-dx: min(2.7457px, calc(-1.3961cqi + 6.7943px));   /* 2.7457 → -1.0935 · Myanmar/India · desfase etiqueta ↔ línea */
  --ca-c3-ly: max(150.003px, calc(5.5577cqi + 133.8856px));   /* 150.003 → 165.2867 · Myanmar/India · Y de arranque de la línea */
  --ca-c4-cx: max(215.505px, calc(71.2737cqi + 8.8111px));   /* 215.505 → 411.5078 · Filipinas · centro X del círculo */
  --ca-c4-cy: max(136.0857px, calc(4.8275cqi + 122.0861px));   /* 136.0857 → 149.3612 · Filipinas · centro Y del círculo */
  --ca-c4-d: max(26.3311px, calc(6.9758cqi + 6.1012px));   /* 26.3311 → 45.5146 · Filipinas · diámetro (eje del trazo) */
  --ca-c4-lx: max(215.8837px, calc(70.8631cqi + 10.3806px));   /* 215.8837 → 410.7573 · Filipinas · X de la línea */
  --ca-c4-ll: min(35.0472px, calc(-1.525cqi + 39.4698px));   /* 35.0472 → 30.8534 · Filipinas · largo de la línea */
  --ca-c4-dx: min(0.1163px, calc(-0.394cqi + 1.259px));   /* 0.1163 → -0.9673 · Filipinas · desfase etiqueta ↔ línea */
  --ca-c4-ly: max(87.57px, calc(2.7018cqi + 79.7347px));   /* 87.57 → 95 · Filipinas · Y de arranque de la línea */
}

@container ca (min-width: 565px){
  /* Por encima de 565 todo se congela en los valores del frame de 565. */
  #climateaction .ca_inner{
    --ca-pad-x: 32px;
    --ca-pad-y: 40px;
    --ca-gap: 24px;
    --ca-h1-fs: 32px;
    --ca-h1-lh: 36px;
    --ca-h2-fs: 24px;
    --ca-h2-lh: 28px;
    --ca-pie-fs: 14px;
    --ca-pie-lh: 18px;
    --ca-badge: 116px;
    --ca-badge-top: 0px;
    --ca-sub-w: 385px;
    --ca-esc-h: 254.9076px;
    --ca-map-top: 0px;
    --ca-map-h: 254.9076px;
    --ca-cari-c1: 85px;
    --ca-cari-c2: 85px;
    --ca-mi-w: 78px;
    --ca-lib-w: 43px;
    --ca-fil-w: 66px;
    --ca-cari-top: 0px;
    --ca-mi-top: 200.14px;
    --ca-fil-top: 70px;
    --ca-lib-gap: 7.2684px;
    --ca-c1-cx: 128.1881px;
    --ca-c1-cy: 132.3061px;
    --ca-c1-d: 50.6572px;
    --ca-c1-lx: 127.0711px;
    --ca-c1-ll: 34.228px;
    --ca-c1-dx: -0.0711px;
    --ca-c1-ly: 72px;
    --ca-c2-cx: 260.7878px;
    --ca-c2-cy: 122.3612px;
    --ca-c2-d: 45.5146px;
    --ca-c2-lx: 260.0373px;
    --ca-c2-ll: 30.8534px;
    --ca-c2-dx: -0.3323px;
    --ca-c3-cx: 353.3433px;
    --ca-c3-cy: 134.4332px;
    --ca-c3-d: 60.207px;
    --ca-c3-lx: 354.0935px;
    --ca-c3-ll: 30.8534px;
    --ca-c3-dx: -1.0935px;
    --ca-c3-ly: 165.2867px;
    --ca-c4-cx: 411.5078px;
    --ca-c4-cy: 149.3612px;
    --ca-c4-d: 45.5146px;
    --ca-c4-lx: 410.7573px;
    --ca-c4-ll: 30.8534px;
    --ca-c4-dx: -0.9673px;
    --ca-c4-ly: 95px;
  }
}
/* <<< FIN INTERPOLACION GENERADA >>> */

/* Derivadas de las anteriores (pura composición, no cifras nuevas).
   El bloque del Caribe se centra sobre la línea de su callout y se TOPA en el borde
   izquierdo de la escena: a 290 el centro ideal caería en −10, y ese tope es justo
   lo que hace que en Figma empiece en x = 0.

   ⚠️ Van en `.ca_inner`, NO en la raíz, y no es un capricho. Una variable que usa
   otra se sustituye en el elemento donde se DECLARA, no donde se usa: declarada en
   la raíz se quedaría con la fórmula interpolada para siempre y no vería el override
   del tramo ancho —que vive en `.ca_inner`—. Y al evaluarse esa fórmula, su `cqi`
   resolvería contra el contenedor de fuera (o el viewport), porque una consulta nunca
   resuelve contra sí misma. A 980 daba `--ca-c3-lx` = 618 px y mandaba «Myanmar» y
   «India» fuera del mapa, mientras los círculos —que usan las variables directamente—
   seguían en su sitio. */
#climateaction .ca_inner{
  --ca-cari-w:calc(var(--ca-cari-c1) + 4px + var(--ca-cari-c2));
  --ca-cari-left:max(0px, calc(var(--ca-c1-lx) + var(--ca-c1-dx) - var(--ca-cari-w) / 2));
  --ca-cari-c2-left:calc(var(--ca-cari-left) + var(--ca-cari-c1) + 4px);
  --ca-mi-left:calc(var(--ca-c3-lx) + var(--ca-c3-dx) - var(--ca-mi-w) / 2);
}

/* =============================================================================
   TRAMO BASE — diseño de 290, interpolando hasta 564
   ============================================================================= */

#climateaction .ca_inner{
  padding:var(--ca-pad-y) var(--ca-pad-x);
  gap:var(--ca-gap);
}

/* ===== 1 · Cabecera ==========================================================
   A 290 el título (198,577 de ancho) PISA la x del badge (189,484): por eso el
   bloque va posicionado, con el badge anclado arriba a la derecha. A 565 el badge
   pasa a ser un item de la fila y el hueco con el texto es 0 (385 + 116 = 501).
   El solape va de 9,09 px a 0 de forma continua, así que no hay salto en el corte. */
#climateaction .ca_cab{display:block !important; position:relative;}
#climateaction .ca_txt{gap:16px;}
/* El hueco del badge. En Figma, a 290, la caja del título mide 198,577 porque el badge
   se le echa encima a partir de 189,48: no es un ancho estético, es el sitio que hay.
   Copiar ese 198,577 como ancho fijo aproxima bien el español y miente en los demás
   idiomas: en PT «Desenvolvimento» mide 234,7 a 30 px, se salía de su caja y, con el
   interlineado que exige 1.4.12, se salía 15 px de la pieza entera.
   Así que en vez de aproximar el hueco se REPRODUCE: un flotante del tamaño exacto del
   badge recorta las líneas que quedan a su lado y deja enteras las de debajo, que es
   justo lo que hace el diseño. El título pasa a ocupar el ancho del contenido y el
   badge sigue donde estaba. Para el español no cambia ni un píxel: sus cuatro líneas
   caben todas en 189,48. */
#climateaction .ca_hueco{
  float:right; width:var(--ca-badge);
  height:calc(var(--ca-badge-top) + var(--ca-badge));
}
#climateaction .ca_titulo{
  /* Con la caja al ancho del contenido, `break-word` sólo entra cuando una palabra no
     cabe de verdad —con el interlineado de 1.4.12—, no en el uso normal. */
  overflow-wrap:break-word;
  font-family:var(--ca-fam); font-weight:400;
  font-size:var(--ca-h1-fs); line-height:var(--ca-h1-lh);
  /* En móvil el theme pinta los h* con #427314 !important: el color del título
     necesita `!important` por nuestra parte. */
  color:var(--ca-green1) !important;
}
#climateaction .ca_sub{
  width:var(--ca-sub-w);
  font-family:var(--ca-fam); font-weight:400;
  font-size:var(--ca-h2-fs); line-height:var(--ca-h2-lh);
  color:var(--ca-forest);
}
#climateaction .ca_badge{
  position:absolute; right:0; top:var(--ca-badge-top);
  width:var(--ca-badge); height:var(--ca-badge);
}

/* ===== 2 y 4 · Tarjetas ======================================================
   Trazo de 1 px como `box-shadow: inset` (RD-09) y radio 15. Las alturas de Figma
   son MÍNIMOS: no se fija ningún `height`, las tarjetas crecen con su contenido y
   las de una misma fila se igualan entre sí por el estirado de la rejilla (RD-10). */
#climateaction .ca_clave{grid-template-columns:minmax(0,1fr); gap:8px;}
#climateaction .ca_sand{grid-template-columns:minmax(0,1fr); gap:16px;}
#climateaction .ca_card{
  gap:16px; padding:16px; border-radius:15px;
  box-shadow:inset 0 0 0 1px var(--ca-sand3); background:transparent;
}
#climateaction .ca_card--sand{box-shadow:none; background:var(--ca-sand);}
#climateaction .ca_card_cab{gap:8px;}
#climateaction .ca_ico{width:40px; height:40px; flex:0 0 auto;}
#climateaction .ca_card_tit{
  font-family:var(--ca-fam); font-weight:500; font-size:18px; line-height:22px;
  color:var(--ca-green1) !important;
}
#climateaction .ca_card_txt{
  font-family:var(--ca-fam-text); font-weight:400; font-size:16px; line-height:20px;
  color:var(--ca-sand7);
}

/* ===== 3 · Mapa ==============================================================
   La escena NO lleva `aspect-ratio`: su proporción cambia de 0,911 a 0,509 porque
   a 290 hay una banda de etiquetas encima del mapa y otra debajo, y a 565 no.
   Quien copie el `aspect-ratio` de la 029 rompe la pieza.
   Tres capas por orden de pintado (sin z-index): planisferio, callouts, etiquetas. */
#climateaction .ca_mapa{gap:16px;}
#climateaction .ca_mapa_tit{
  font-family:var(--ca-fam); font-weight:400;
  font-size:var(--ca-h2-fs); line-height:var(--ca-h2-lh);
  color:var(--ca-forest) !important;
}
#climateaction .ca_escena{
  position:relative; width:100%; max-width:501px; height:var(--ca-esc-h);
  /* se centra con `align-self`: `margin-inline:auto` en un hijo de flex anula el
     `max-width` y el ancho lo acabaría decidiendo el contenido */
  align-self:center;
}
#climateaction .ca_planisferio{
  position:absolute; left:0; top:var(--ca-map-top);
  width:100%; height:var(--ca-map-h); max-width:none;
}

/* Los callouts se DIBUJAN, no son assets: los SVG exportados llevan
   `preserveAspectRatio="none"` y a un tamaño interpolado saldrían elipses, y su
   trazo dejaría de medir 1,5 px (daría 0,77 a 290 y 2,9 a 565).
   El círculo se ancla por su CENTRO, nunca por la esquina de su caja. */
/* El anillo va como `box-shadow: inset`, NO como `border`: Chromium redondea el
   ancho de un borde a un entero de píxel CSS —comprobado, a DPR 1 y a DPR 2 un
   `border:1.5px` se usa como 1px— y el trazo del diseño es de **1,5**. El
   `box-shadow` conserva el 1,5 exacto. Al ser interior, el borde exterior del trazo
   coincide con la caja, así que la caja mide `d + 1,5` y el eje del trazo, `d`. */
#climateaction .ca_circ{
  position:absolute; transform:translate(-50%,-50%);
  box-shadow:inset 0 0 0 1.5px var(--ca-sunset); border-radius:50%;
}
#climateaction .ca_lin{position:absolute; width:1.5px; background:var(--ca-sunset);}

#climateaction .ca_circ--1{left:var(--ca-c1-cx); top:var(--ca-c1-cy);
  width:calc(var(--ca-c1-d) + 1.5px); height:calc(var(--ca-c1-d) + 1.5px);}
#climateaction .ca_lin--1{left:calc(var(--ca-c1-lx) - 0.75px);
  top:var(--ca-c1-ly); height:var(--ca-c1-ll);}

#climateaction .ca_circ--2{left:var(--ca-c2-cx); top:var(--ca-c2-cy);
  width:calc(var(--ca-c2-d) + 1.5px); height:calc(var(--ca-c2-d) + 1.5px);}
/* Libia es el único callout que CONMUTA de lado: en el tramo base la línea cuelga
   por debajo del círculo (y la etiqueta debajo de ella) y en el ancho va por
   encima. Por eso su `y` no se interpola: aquí se deriva del propio círculo. */
#climateaction .ca_lin--2{left:calc(var(--ca-c2-lx) - 0.75px);
  top:calc(var(--ca-c2-cy) + var(--ca-c2-d) / 2 + 0.75px); height:var(--ca-c2-ll);}

#climateaction .ca_circ--3{left:var(--ca-c3-cx); top:var(--ca-c3-cy);
  width:calc(var(--ca-c3-d) + 1.5px); height:calc(var(--ca-c3-d) + 1.5px);}
#climateaction .ca_lin--3{left:calc(var(--ca-c3-lx) - 0.75px);
  top:var(--ca-c3-ly); height:var(--ca-c3-ll);}

#climateaction .ca_circ--4{left:var(--ca-c4-cx); top:var(--ca-c4-cy);
  width:calc(var(--ca-c4-d) + 1.5px); height:calc(var(--ca-c4-d) + 1.5px);}
#climateaction .ca_lin--4{left:calc(var(--ca-c4-lx) - 0.75px);
  top:var(--ca-c4-ly); height:var(--ca-c4-ll);}

/* Etiquetas: texto HTML (nunca dentro del SVG), 16/20 FIJO en todo el rango —sólo
   escala la geografía— y centradas en los dos tramos (D-09). Cada una se ancla a
   la línea de SU callout (`--ca-cN-lx`), que es el mismo punto de referencia que
   usa la línea: así no pueden despegarse (AC-05 se cumple por construcción). */
#climateaction .ca_nombres{position:absolute; left:0; top:0; width:100%; height:100%;}
/* Sin `height`: la caja la da la propia línea (20 px), que es lo que dice el diseño.
   Fijarla recortaba el texto en cuanto 1.4.12 fuerza `line-height:1.5` — que es
   justo el criterio que prohíbe los altos fijos (RD-10). */
#climateaction .ca_n{
  position:absolute;
  font-family:var(--ca-fam-text); font-weight:400; font-size:16px; line-height:20px;
  color:var(--ca-sand7); text-align:center; white-space:nowrap;
}
#climateaction .ca_n--dominica,#climateaction .ca_n--haiti,#climateaction .ca_n--granada{
  left:var(--ca-cari-left); width:var(--ca-cari-c1);}
#climateaction .ca_n--honduras,#climateaction .ca_n--bahamas,#climateaction .ca_n--nicaragua{
  left:var(--ca-cari-c2-left); width:var(--ca-cari-c2);}
#climateaction .ca_n--dominica,#climateaction .ca_n--honduras{top:var(--ca-cari-top);}
#climateaction .ca_n--haiti,#climateaction .ca_n--bahamas{top:calc(var(--ca-cari-top) + 24px);}
#climateaction .ca_n--granada,#climateaction .ca_n--nicaragua{top:calc(var(--ca-cari-top) + 48px);}

#climateaction .ca_n--myanmar,#climateaction .ca_n--india{
  left:var(--ca-mi-left); width:var(--ca-mi-w);}
#climateaction .ca_n--myanmar{top:var(--ca-mi-top);}
#climateaction .ca_n--india{top:calc(var(--ca-mi-top) + 24px);}

/* Libia y Filipinas son etiquetas sueltas: se centran sobre su línea y crecen si el
   idioma lo pide (EN «Libya» mide 39,56 y no cabría en la caja de 36 del diseño ES).
   `min-width` + `width:max-content` da el ancho de Figma cuando el texto cabe y lo
   ensancha, simétricamente, cuando no. */
#climateaction .ca_n--libia{
  left:calc(var(--ca-c2-lx) + var(--ca-c2-dx)); transform:translateX(-50%);
  min-width:var(--ca-lib-w); width:max-content;
  top:calc(var(--ca-c2-cy) + var(--ca-c2-d) / 2 + 0.75px
           + var(--ca-c2-ll) + var(--ca-lib-gap));
}
#climateaction .ca_n--filipinas{
  left:calc(var(--ca-c4-lx) + var(--ca-c4-dx)); transform:translateX(-50%);
  min-width:var(--ca-fil-w); width:max-content;
  top:var(--ca-fil-top);
}

/* ===== 5 · Pie ===============================================================
   La cursiva se declara AQUÍ, en su propia regla: el blindaje pone
   `font-style:normal` en la raíz y `font:inherit` en `*`, y sin esto se perdería. */
#climateaction .ca_pie{
  font-family:var(--ca-fam-text); font-weight:400; font-style:italic;
  font-size:var(--ca-pie-fs); line-height:var(--ca-pie-lh);
  color:var(--ca-sand7);
}

/* =============================================================================
   TRAMO ANCHO — diseño de 565 y en adelante
   Todas las magnitudes se congelan en sus valores de 565 (el override generado va
   en `.ca_inner`, porque una @container NO reestila su propio contenedor). Lo único
   que sigue creciendo hasta 980 son las cajas de texto y las tarjetas: la escena
   del mapa, el badge y los iconos se topan y se centran (RD-03).
   ============================================================================= */
@container ca (min-width: 565px){

  /* La cabecera pasa de bloque posicionado a fila. El `display` se REAFIRMA aquí:
     el `!important` del blindaje, fuera de la consulta, se comería el cambio. */
  #climateaction .ca_cab{
    display:flex !important; flex-direction:row; flex-wrap:nowrap;
    align-items:flex-start; justify-content:flex-start;
    gap:0;   /* 385 + 116 = 501: el hueco del diseño es 0, no se inventa uno */
  }
  #climateaction .ca_txt{flex:1 1 auto; min-width:0;}
  #climateaction .ca_sub{width:auto;}
  /* Aquí el badge ya no se solapa con el texto: es un item más de la fila y la columna
     de texto mide 385. El hueco sobra y se apaga; se reafirma en este tramo porque el
     `display` del blindaje lleva `!important`. */
  #climateaction .ca_hueco{display:none !important;}
  #climateaction .ca_badge{
    position:static; flex:0 0 var(--ca-badge);
    width:var(--ca-badge); height:var(--ca-badge);
  }

  /* 2 + 1: la tercera tarjeta ocupa la fila entera. `minmax(0,1fr)` y no `1fr` a
     secas: con `1fr` la columna del texto más ancho le roba sitio a la otra. */
  #climateaction .ca_clave{grid-template-columns:repeat(2,minmax(0,1fr));}
  #climateaction .ca_card--ancha{grid-column:1 / -1;}
  #climateaction .ca_sand{grid-template-columns:repeat(2,minmax(0,1fr));}

  /* El salto del subtítulo es sólo del frame estrecho: aquí el texto reparte solo.
     Apagarlo no cambia el NÚMERO de líneas (dos a los dos lados del corte), así que
     no rompe la continuidad de RD-04: sólo se mueve una palabra de línea. */
  #climateaction .ca_salto{display:none !important;}

  /* Libia cruza al otro lado: la línea sale del círculo hacia ARRIBA y la etiqueta
     queda por encima, centrada verticalmente en 52,5 (su caja de Figma mide 15 y no
     una línea completa, así que se sitúa por el centro, no por la `y`). */
  #climateaction .ca_lin--2{top:68px;}
  #climateaction .ca_n--libia{top:42.5px;}
}