/* =============================================================================
   La sexta gran extinción en cifras — infografía estática de iberdrola.com
   Dos anchos de diseño (290 y 565) y UN solo punto de cambio de layout, en 565,
   medido sobre el HUECO (la raíz es el contenedor). Por encima no crece; por
   debajo, la disposición de 290 se estira al ancho (D-05).
   Medidas: specs/sexta-extincion/design/ — cero valores «a ojo». Sin JS (RF-01).
   ============================================================================= */

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

/* ===== Marco y contenedor ===================================================
   Trazo como `box-shadow: inset`, no `border`: en Figma el trazo no ocupa, así que
   el contenido mide 504 / 258 con sus paddings. El padding va en `.se_in`: una
   @container no reestila su propio contenedor, y con padding en la raíz la
   consulta vería 504 y nunca pasaría a 565 (lead engineer).
   `box-sizing` incluye la RAÍZ (`#scope *` no la alcanza). Sin `overflow:hidden`:
   taparía un desborde y dejaría ciego el barrido. */
#sixthextinction,#sixthextinction *,
#sixthextinction *::before,#sixthextinction *::after{box-sizing:border-box;}

#sixthextinction{
  --se-green1:#007F33;   /* Green 1 · título y cifras */
  --se-forest:#00402A;   /* Iberdrola Forest · subtítulos, nombres y cifras de la lista roja */
  --se-green:#00A443;    /* Iberdrola Green · relleno de barras, Pérdida de hábitats */
  --se-sand:#FFF5EC;     /* Iberdrola Sand · fondo de las tarjetas */
  --se-sand1:#FFFEFF;    /* Sand 1 · carril de las barras de especies */
  --se-sand3:#D8CFC7;    /* Sand 3 · trazos */
  --se-sand7:#3A3735;    /* Sand 7 · cuerpo y nota */
  --se-forest1:#DCEBE1;  /* Forest 1 · carril de la lista roja y cuadro «evaluadas» */
  --se-forest3:#699282;  /* Forest 3 · Especies invasoras */
  --se-sunset:#FF9C1A;   /* Iberdrola Sunset · Sobreexplotación */
  --se-sky:#0DA9FF;      /* Iberdrola Sky · Contaminación */
  --se-sunset4:#FFCD52;  /* Sunset 4 · Cambio climático */
  --se-fam:'IberPangea',Arial,Helvetica,sans-serif;
  --se-fam-text:'IberPangea Text',Arial,Helvetica,sans-serif;

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

/* ===== Blindaje frente al theme de Liferay (docs/VALIDACION.md) ============= */
#sixthextinction *{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; border:0; background:none;
  box-shadow:none; float:none; opacity:1; min-width:0; max-width:none; min-height:0;}
#sixthextinction ul,#sixthextinction ol,#sixthextinction li{list-style:none;}
#sixthextinction li::marker{content:none;}
#sixthextinction li::before{content:'' !important; display:none !important; margin:0 !important;}
#sixthextinction *::before,#sixthextinction *::after{margin:0; padding:0; text-indent:0;
  letter-spacing:inherit; text-transform:inherit;}

/* La RAÍZ declara todo lo heredable: si no, hereda del portal y el `inherit` de
   arriba propaga ese valor hacia dentro. */
#sixthextinction{
  font-family:var(--se-fam-text); font-size:16px; line-height:20px; font-weight:400;
  font-style:normal; color:var(--se-sand7); letter-spacing:normal; text-align:left;
  text-transform:none; white-space:normal; text-decoration:none; word-spacing:normal;
  overflow-wrap:normal; word-break:normal; hyphens:manual;
}

/* `display` no se hereda: se declara elemento a elemento y con `!important`. Lo que
   cambia entre tramos se reafirma dentro de cada @container (un `!important` fuera
   de la consulta se comería el responsive, lección de la 010). */
#sixthextinction{display:block !important;}
#sixthextinction .se_in{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start; gap:0;}
#sixthextinction .se_titulo,#sixthextinction .se_sub,#sixthextinction .se_esp_cifra,
#sixthextinction .se_esp_nombre,#sixthextinction .se_barra,#sixthextinction .se_barra i,
#sixthextinction .se_esp_img,#sixthextinction .se_roja,#sixthextinction .se_roja_tit,
#sixthextinction .se_roja_c1,#sixthextinction .se_roja_c2,#sixthextinction .se_amenazas,
#sixthextinction .se_am_tit,#sixthextinction .se_am_ico,#sixthextinction .se_am_txt,
#sixthextinction .se_ley_txt,
#sixthextinction .se_nota{display:block !important;}
#sixthextinction .se_especies,#sixthextinction .se_esp,#sixthextinction .se_roja_graf,
#sixthextinction .se_am_lista{display:grid !important;}
#sixthextinction .se_leyenda{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start; gap:8px;}
#sixthextinction .se_ley,#sixthextinction .se_am{display:flex !important; flex-direction:row;
  flex-wrap:nowrap; align-items:center; justify-content:flex-start;}
#sixthextinction strong{display:inline !important; font-weight:600;}
/* Saltos: `.se_d` sólo en 565, `.se_m` sólo por debajo. Un `<br>` sólo se OCULTA en
   su tramo, nunca se vuelve a mostrar con otro `display`. `#scope .se_d` (1-1-0)
   gana a `#scope br` (1-0-1). */
#sixthextinction br{display:inline !important;}

/* Sólo para lector de pantalla */
#sixthextinction .se_oculto{display:block !important; position:absolute !important;
  width:1px !important; height:1px !important; margin:-1px !important; padding:0 !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important;
  white-space:nowrap !important; border:0 !important;}

/* ===== Tramo < 565: disposición de 290, estirada al ancho =================== */
#sixthextinction .se_in{padding:32px 16px;}

/* Cabecera — Mobile/Título 30/34 y Mobile/Subtítulo 21/24 */
#sixthextinction .se_titulo{font-family:var(--se-fam); font-size:30px; line-height:34px;
  font-weight:400; color:var(--se-green1) !important;}
#sixthextinction .se_sub{margin-top:16px; font-family:var(--se-fam); font-size:21px;
  line-height:24px; font-weight:400; color:var(--se-forest) !important;}

/* Especies: una por fila. Rejilla cifra (caja de 63) + nombre; barra y dibujo a todo el ancho */
#sixthextinction .se_especies{margin-top:24px; grid-template-columns:minmax(0,1fr);
  row-gap:8px; column-gap:0; align-items:start; justify-items:stretch;
  align-content:start; justify-content:start;}
#sixthextinction .se_esp{grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto;
  column-gap:8px; row-gap:0; align-items:center; justify-items:stretch; padding:16px;
  background:var(--se-sand); border-radius:15px;}
#sixthextinction .se_esp_cifra{grid-column:1; min-width:63px; font-family:var(--se-fam);
  font-size:32px; line-height:36px; font-weight:600; color:var(--se-green1);}
#sixthextinction .se_esp_nombre{grid-column:2; font-family:var(--se-fam); font-size:18px;
  line-height:22px; font-weight:500; color:var(--se-forest);}
#sixthextinction .se_esp .se_barra{grid-column:1 / -1; margin-top:16px;}
#sixthextinction .se_esp_img{grid-column:1 / -1; justify-self:center; align-self:start;
  margin-top:8px; width:var(--w); height:var(--h); max-width:none;}
/* Dibujos a su tamaño de Figma (ancho Y alto: el viewBox de los SVG está redondeado) */
#sixthextinction .se_esp--cicadas{--w:117.37px; --h:72.1px;}
#sixthextinction .se_esp--corales{--w:117.37px; --h:66.4px;}
#sixthextinction .se_esp--anfibios{--w:122.17px; --h:72.1px;}
#sixthextinction .se_esp--tiburones{--w:126.13px; --h:72.1px;}
#sixthextinction .se_esp--coniferas{--w:94.24px; --h:72.1px;}
#sixthextinction .se_esp--crustaceos{--w:121.4px; --h:72.1px;}

/* Barra: carril + relleno al porcentaje */
#sixthextinction .se_barra{height:12px; border-radius:15px; background:var(--se-sand1);
  overflow:hidden;}
#sixthextinction .se_barra i{width:var(--p); height:100%; border-radius:15px;
  background:var(--se-green);}

/* Lista roja */
#sixthextinction .se_roja{position:relative; margin-top:24px; padding:16px; border-radius:15px;
  box-shadow:inset 0 0 0 1px var(--se-sand3);}
#sixthextinction .se_roja_tit{font-family:var(--se-fam); font-size:21px; line-height:24px;
  font-weight:400; color:var(--se-forest) !important;}
/* Cifras centradas sobre su tramo (D-17): rejilla 28,08 % / resto compartida con la
   barra; `margin-inline:auto` centra y, si la cifra no cabe en su tramo, la apoya en
   el borde de entrada (a 290, «48.600 (28%)» en x=0 como en Figma). */
#sixthextinction .se_roja_graf{margin-top:16px; grid-template-columns:28.08% minmax(0,1fr);
  grid-template-rows:auto auto; column-gap:0; row-gap:0; align-items:end;}
#sixthextinction .se_roja_c1,#sixthextinction .se_roja_c2{grid-row:1; align-self:end;
  margin-inline:auto; text-align:center; white-space:nowrap; font-family:var(--se-fam);
  font-size:21px; line-height:24px; font-weight:400; color:var(--se-forest);}
#sixthextinction .se_roja_c1{grid-column:1;}
#sixthextinction .se_roja_c2{grid-column:2;}
#sixthextinction .se_barra--roja{grid-row:2; grid-column:1 / -1; margin-top:11px; height:16px;
  background:var(--se-forest1); --p:28.08%;}
#sixthextinction .se_leyenda{margin-top:16px;}
#sixthextinction .se_ley{gap:16px; min-height:40px; font-family:var(--se-fam-text);
  font-size:16px; line-height:20px; color:var(--se-sand7);}
#sixthextinction .se_ley_txt{flex:1 1 0;}
#sixthextinction .se_ley--evaluadas::before,#sixthextinction .se_ley--amenazadas::before{
  content:'' !important; display:block !important; flex:0 0 24px; width:24px; height:24px;
  border-radius:5px; order:-1; position:static !important; float:none !important;
  transform:none !important; border:0 !important; top:auto; left:auto;}
#sixthextinction .se_ley--evaluadas::before{background:var(--se-forest1);}
#sixthextinction .se_ley--amenazadas::before{background:var(--se-green);}

/* Amenazas: una por fila, la lista al 80 % (sólo la lista, nunca también cada una) */
#sixthextinction .se_amenazas{margin-top:24px;}
#sixthextinction .se_am_tit{font-family:var(--se-fam); font-size:21px; line-height:24px;
  font-weight:400; color:var(--se-forest) !important;}
#sixthextinction .se_am_lista{margin-top:16px; grid-template-columns:minmax(0,1fr);
  row-gap:8px; column-gap:8px; align-items:stretch; justify-items:stretch;
  align-content:start; justify-content:start; opacity:.8;}
#sixthextinction .se_am{gap:8px; min-height:64px; padding:8px 16px; border-radius:15px;
  box-shadow:inset 0 0 0 1px var(--c);}
#sixthextinction .se_am--habitats{--c:var(--se-green);}
#sixthextinction .se_am--sobreexplotacion{--c:var(--se-sunset);}
#sixthextinction .se_am--contaminacion{--c:var(--se-sky);}
#sixthextinction .se_am--invasoras{--c:var(--se-forest3);}
#sixthextinction .se_am--clima{--c:var(--se-sunset4);}
#sixthextinction .se_am_ico{flex:0 0 48px; width:48px; height:48px;}
#sixthextinction .se_am_txt{flex:1 1 0; font-family:var(--se-fam-text); font-size:16px;
  line-height:20px; color:var(--se-sand7);}

/* Nota — Mobile/Nota al pie 12/16 */
#sixthextinction .se_nota{margin-top:24px; font-family:var(--se-fam-text); font-style:italic;
  font-size:12px; line-height:16px; color:var(--se-sand7);}

@container se (width < 565px){
  #sixthextinction .se_d{display:none !important;}
}

/* ===== Tramo ≥ 565 ========================================================== */
@container se (min-width:565px){
  #sixthextinction .se_m{display:none !important;}

  #sixthextinction .se_in{padding:40px 29px 40px 32px;}   /* D-06: contenido 504 */

  #sixthextinction .se_titulo{max-width:480px; font-size:32px; line-height:36px;}
  #sixthextinction .se_sub{max-width:480px; font-size:24px; line-height:28px;}

  /* Rejilla 3 × 2; cada tarjeta, 4 filas en subgrid (cifra · nombre · barra · dibujo)
     para que las barras de una fila sigan alineadas si un nombre crece (RF-07). */
  #sixthextinction .se_especies{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;}
  #sixthextinction .se_esp{grid-row:span 4; grid-template-columns:minmax(0,1fr);
    grid-template-rows:subgrid; row-gap:0; column-gap:0; align-content:start;
    align-items:start; padding:16px 16px 0;}
  #sixthextinction .se_esp_cifra{grid-column:1; min-width:0;}
  #sixthextinction .se_esp_nombre{grid-column:1; margin-top:8px; min-height:44px;}
  #sixthextinction .se_esp .se_barra{grid-column:1;}
  /* Alto por fila (D-11): la celda del dibujo mide el alto de la tarjeta en Figma − 148 */
  #sixthextinction .se_esp_img{grid-column:1; margin-top:16px;
    margin-bottom:calc(var(--b) - var(--h));}
  #sixthextinction .se_esp--cicadas{--w:130.67px; --h:80.27px; --b:89.36px;}
  #sixthextinction .se_esp--corales{--w:130.67px; --h:73.93px; --b:89.93px;}
  #sixthextinction .se_esp--anfibios{--w:130.67px; --h:77.12px; --b:89.36px;}
  #sixthextinction .se_esp--tiburones{--w:139.36px; --h:79.66px; --b:89.36px;}
  #sixthextinction .se_esp--coniferas{--w:104.12px; --h:79.66px; --b:95.66px;}
  #sixthextinction .se_esp--crustaceos{--w:134.12px; --h:79.66px; --b:89.36px;}

  #sixthextinction .se_roja{padding:16px 24px;}
  #sixthextinction .se_roja_tit{font-size:24px; line-height:28px;}
  #sixthextinction .se_roja_c1,#sixthextinction .se_roja_c2{font-size:24px; line-height:28px;}
  #sixthextinction .se_barra--roja{margin-top:9px;}
  #sixthextinction .se_ley{min-height:24px;}

  #sixthextinction .se_am_tit{font-size:24px; line-height:28px;}
  #sixthextinction .se_am_lista{grid-template-columns:repeat(2,minmax(0,1fr));}
  #sixthextinction .se_am--clima{grid-column:1 / -1;}

  #sixthextinction .se_nota{font-size:14px; line-height:18px;}
}