/* =============================================================================
   Resiliencia  ·  estático de iberdrola.com
   Cabecera, ocho consejos en tarjetas, fuente y un paisaje decorativo al pie.
   Sin JS, sin interacción ni animación (RF-01, D06).
   Dos composiciones (290 / 565) y UN solo cambio de disposición (@container rs,
   RD-04): una columna ↔ dos. Fluida a los dos lados; por encima de 565 la pieza
   sigue creciendo y los dibujos no escalan (RD-09, RD-10).
   Medidas: specs/resiliencia/design/  (Figma es la única fuente)
   ============================================================================= */

/* ===== IberPangea (self-contained, RD-02) ==================================== */
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/resiliencia/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/resiliencia/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/resiliencia/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/resiliencia/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/resiliencia/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/resiliencia/fonts/IberPangeaText-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}

/* Tokens (design/tokens.json). */
#resiliencia{
  --rs-green1:#007F33;  --rs-green4:#5BD38C;  --rs-forest:#00402A;
  --rs-sand3:#D8CFC7;   --rs-sand7:#3A3735;   --rs-white:#FFFFFF;
  --rs-pangea:'IberPangea',sans-serif;
  --rs-text:'IberPangea Text','IberPangea',sans-serif;
}

/* ===== Marco (RD-03, RD-04) ==================================================
   `margin:0 auto` SIN margen vertical: se incrusta y el sitio pone su espaciado.
   Sin `max-width`: crece con su columna. ÚNICO contenedor. El borde, en el
   `::after`, por ENCIMA del paisaje (en Figma el trazo del marco se pinta sobre
   los hijos: el suelo llega al borde y el borde se ve encima). */
#resiliencia{
  container-name:rs; container-type:inline-size;
  width:100%; margin:0 auto; box-sizing:border-box;
  position:relative; overflow:hidden; overflow:clip; background:var(--rs-white);
  border-radius:15px;
}
#resiliencia::after{content:'' !important; display:block !important; position:absolute;
  inset:0; z-index:3; border-radius:15px; box-shadow:inset 0 0 0 1px var(--rs-sand3);
  pointer-events:none;}

/* ===== Blindaje frente al theme de Liferay (spec §5, 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. */
#resiliencia *{color:inherit; font:inherit; letter-spacing:inherit; text-align:inherit;
  text-transform:inherit; white-space:inherit; overflow-wrap:inherit; text-indent:0;
  text-decoration:none; margin:0; padding:0; box-sizing:border-box; border:0;
  background:transparent; box-shadow:none; text-shadow:none; float:none;}
#resiliencia ul,#resiliencia ol,#resiliencia li{list-style:none;}
#resiliencia li::marker{content:none;}
#resiliencia li::before{content:'' !important; display:none !important; margin:0 !important;}
/* `#resiliencia *` NO alcanza a los pseudo-elementos: se blindan aparte, sin `content`. */
#resiliencia *::before,#resiliencia *::after{margin:0; padding:0; text-indent:0;
  letter-spacing:inherit; text-transform:inherit; box-sizing:border-box;}
#resiliencia img{max-width:none; max-height:none; min-width:0; min-height:0; border:0;
  box-shadow:none; border-radius:0; opacity:1; filter: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. */
#resiliencia{
  font-family:var(--rs-text); font-size:16px; line-height:20px;
  font-weight:400; font-style:normal; color:var(--rs-sand7);
  letter-spacing:normal; text-align:left; text-transform:none; white-space:normal;
  text-decoration:none; word-spacing:normal;
  /* Una palabra más larga que su caja (letra al 200 %) se parte antes que salirse. */
  overflow-wrap:break-word;
}
/* Pesos y estilos declarados: el `font:inherit` del blindaje anula los de `strong`. */
#resiliencia strong{font-weight:600;}

/* `display` NO se hereda: se declara elemento a elemento y con `!important`. */
#resiliencia{display:block !important;}
#resiliencia .rs_in,#resiliencia .rs_head,#resiliencia .rs_card{display:flex !important;
  flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; align-items:stretch;}
#resiliencia .rs_card_head{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  justify-content:flex-start; align-items:center;}
#resiliencia .rs_list{display:grid !important;}
#resiliencia .rs_title,#resiliencia .rs_sub,#resiliencia .rs_card_title,
#resiliencia .rs_card_text,#resiliencia .rs_src,#resiliencia .rs_scene,
#resiliencia .rs_trees,#resiliencia .rs_ground,#resiliencia img{display:block !important;}
#resiliencia .rs_card{display:flex !important;}
#resiliencia strong{display:inline !important;}
/* Cortes de Figma (RD-08), sin `<br>`. Tramo que va junto mientras cabe: si no
   cabe (letra al 200 %), se parte por dentro en vez de salirse; nunca `nowrap`.
   `rs_nw` en las dos composiciones, `rs_nw1`/`rs_l2` sólo en la de 290 y `rs_nw2`
   sólo en la de 565. `rs_l2`/`rs_l2i`: en la de 565, segunda línea del título de
   la tarjeta («Recuerda / tus éxitos»). Se reafirman en el corte. */
#resiliencia .rs_nw,#resiliencia .rs_nw1,#resiliencia .rs_l2{display:inline-block !important;
  max-width:100%;}
#resiliencia .rs_nw2,#resiliencia .rs_l2i{display:inline !important;}
/* La montaña que no toca, oculta a los dos lados del corte. */
#resiliencia .rs_mont-565{display:none !important;}

/* ===== Columna (RD-04) =======================================================
   A los lados 16 → 32 entre 290 y 565 (exacto en los dos), 32 por encima.
   Abajo, la distancia de la fuente al pie: el paisaje se ancla al pie. */
#resiliencia .rs_in{position:relative; z-index:1;
  padding:32px clamp(16px, calc(16px + (100cqi - 290px) * 16 / 275), 32px) 218px;}

/* ===== Cabecera (T05, RD-07) ================================================= */
#resiliencia .rs_head{gap:16px;}
#resiliencia .rs_title{font-family:var(--rs-pangea); font-weight:400; font-size:30px;
  line-height:34px; color:var(--rs-green1) !important;}
#resiliencia .rs_sub{font-family:var(--rs-pangea); font-weight:400; font-size:21px;
  line-height:24px; color:var(--rs-forest);}

/* ===== Tarjetas (T06, RD-06) ================================================= */
#resiliencia .rs_list{grid-template-columns:minmax(0, 1fr); gap:8px; align-items:stretch;
  margin-top:25px;}
#resiliencia .rs_card{gap:4px; min-width:0; padding:16px; border-radius:15px;
  box-shadow:inset 0 0 0 1px var(--rs-sand3);}
#resiliencia .rs_card_head{gap:8px;}
#resiliencia .rs_card_ico{flex:none; width:48px; height:48px;}
#resiliencia .rs_card_title{flex:1 1 0; min-width:0; font-family:var(--rs-pangea);
  font-weight:500; font-size:18px; line-height:22px; color:var(--rs-green1) !important;}
#resiliencia .rs_card_text{font-family:var(--rs-text); font-weight:400; font-size:16px;
  line-height:20px; color:var(--rs-sand7);}

/* ===== Fuente (T07, RD-11) =================================================== */
#resiliencia .rs_src{margin-top:24px; font-family:var(--rs-text); font-weight:400;
  font-style:italic; font-size:12px; line-height:16px; color:var(--rs-sand7);}

/* ===== Paisaje (T08, RD-09) ==================================================
   Decorativo y anclado al pie, con las distancias de metadata.xml. Sin z-index
   en `.rs_scene` (no crea contexto de apilamiento): el bosque queda detrás de las
   tarjetas y lo demás delante (la bandera pisa la tarjeta 8, como en Figma).
   Cada dibujo con su ancho y alto exactos: no escalan. */
#resiliencia .rs_scene{position:absolute; inset:0; pointer-events:none;}
#resiliencia .rs_scene > *{position:absolute; pointer-events:none;}
#resiliencia .rs_trees{z-index:0; left:0; right:0; bottom:-12px; height:179.004px;
  background:url('/wcorp/gc/prod/es_ES/estaticos/resiliencia/images/arboles.svg') no-repeat;
  background-size:580.997px 179.004px; background-position:left -53px top 0;}
#resiliencia .rs_mont,#resiliencia .rs_ground,#resiliencia .rs_flor,
#resiliencia .rs_sol,#resiliencia .rs_nube{z-index:2;}
#resiliencia .rs_mont-290{width:234.348px; height:243.59px; right:-54.348px; bottom:25.41px;}
#resiliencia .rs_mont-565{width:201.925px; height:212.318px; right:-29.462px; bottom:24.044px;}
#resiliencia .rs_ground{left:0; right:0; bottom:0; height:26px; border-radius:5px 5px 0 0;
  background:var(--rs-green4);}
#resiliencia .rs_flor{width:26px; height:21px; bottom:26px;}
#resiliencia .rs_flor-1{left:14px;}
#resiliencia .rs_flor-2{left:45px;}
#resiliencia .rs_sol{width:25px; height:25px; right:167px; bottom:163px;}
#resiliencia .rs_nube{width:73px; height:20.042px; right:180px; bottom:159.958px;}

/* ===== Composición de 565 (un solo corte, RD-04 / RD-05; T09) ================ */
@container rs (min-width: 562px){
  #resiliencia .rs_in{padding-top:40px; padding-bottom:168px;}
  #resiliencia .rs_title{font-size:32px; line-height:36px;}
  #resiliencia .rs_sub{font-size:24px; line-height:28px;}
  #resiliencia .rs_list{display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr));
    margin-top:28px;}
  #resiliencia .rs_card{gap:8px;}
  #resiliencia .rs_src{margin-top:16px; font-size:14px; line-height:18px;}
  #resiliencia .rs_trees{bottom:-16px; background-repeat:repeat-x;
    background-position:right 0 top 0;}
  #resiliencia .rs_nw1{display:inline !important;}
  #resiliencia .rs_nw2{display:inline-block !important; max-width:100%;}
  #resiliencia .rs_l2,#resiliencia .rs_l2i{display:block !important;}
  #resiliencia .rs_mont-290{display:none !important;}
  /* D08: en EN y PT la última línea de la tarjeta 8 llega hasta la bandera; la fila crece y deja
     el hueco donde se apoya (la bandera, como en Figma: 34,4 sobre el pie de la tarjeta). */
  #resiliencia:lang(en) .rs_card:last-child,#resiliencia:lang(pt) .rs_card:last-child{padding-bottom:38px;}
  #resiliencia .rs_mont-565{display:block !important;}
  #resiliencia .rs_ground{height:24px; border-radius:0;}
  #resiliencia .rs_flor{bottom:24px;}
  #resiliencia .rs_flor-1{left:43px;}
  #resiliencia .rs_flor-2{left:74px;}
  #resiliencia .rs_sol{right:214px; bottom:122px;}
  #resiliencia .rs_nube{right:227px; bottom:118.958px;}
}