/* =============================================================================
   Pensamiento crítico  ·  estático de iberdrola.com
   Título, la chica que piensa (con su bocadillo) junto a la caja arena con seis
   tarjetas, y la fuente. Dos composiciones y UN solo cambio de disposición
   (@container pc, RD-05); fluida a los dos lados. Por encima de 565 la caja y
   sus tarjetas se ensanchan; el dibujo no escala (RD-06).
   Medidas: specs/pensamiento-critico/design/  (Figma es la única fuente)
   Animaciones: `pc_js` en la raíz (lo pone main.js) e `is-in` al llegar a la
   pantalla; sin ellas, todo en su estado final (RF-05).
   ============================================================================= */

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

/* Tokens (design/tokens.json). */
#pensamiento-critico{
  --pc-green1:#007F33; --pc-forest:#00402A; --pc-sand:#FFF5EC; --pc-sand3:#D8CFC7;
  --pc-sand7:#3A3735;  --pc-white:#FFFFFF;
  --pc-title:'IberPangea',sans-serif; --pc-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.
   El trazo, 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. */
#pensamiento-critico{
  container-name:pc; container-type:inline-size;
  width:100%; max-width:980px; margin:0 auto; box-sizing:border-box;
  position:relative; background:var(--pc-white); border-radius:15px;
  box-shadow:inset 0 0 0 1px var(--pc-sand3);
}

/* ===== Blindaje frente al theme de Liferay (spec §5) =========================
   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. */
#pensamiento-critico *{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;}
#pensamiento-critico ul,#pensamiento-critico ol,#pensamiento-critico li{list-style:none;}
#pensamiento-critico li::marker{content:none;}
#pensamiento-critico li::before{content:'' !important; display:none !important; margin:0 !important;}
/* `#pensamiento-critico *` NO alcanza a los pseudo-elementos: se blindan aparte, sin `content`. */
#pensamiento-critico *::before,#pensamiento-critico *::after{margin:0; padding:0; text-indent:0;
  letter-spacing:inherit; text-transform:inherit; box-sizing:border-box;}
/* Los SVG en línea: su tamaño y su `display`, a salvo de un `svg{max-width:100%;height:auto}`
   del theme, que encogería el dibujo. Los `fill` van en atributo. */
#pensamiento-critico svg{overflow:visible; max-width:none !important; max-height:none !important;}
/* 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. */
#pensamiento-critico{
  font-family:var(--pc-text); font-size:16px; line-height:20px;
  font-weight:400; font-style:normal; color:var(--pc-sand7);
  letter-spacing:normal; text-align:left; text-transform:none; white-space:normal;
  text-decoration:none;
  /* Una palabra más larga que su caja (la letra al 200 %) se parte antes que salirse. */
  overflow-wrap:break-word;
}
#pensamiento-critico strong{font-weight:600;}
#pensamiento-critico em{font-style:italic;}

/* `display` NO se hereda: se declara elemento a elemento y con `!important`. */
#pensamiento-critico{display:block !important;}
#pensamiento-critico .pc_in{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  justify-content:flex-start;}
#pensamiento-critico .pc_title,#pensamiento-critico .pc_title_b,#pensamiento-critico .pc_txt,
#pensamiento-critico .pc_src{display:block !important;}
#pensamiento-critico .pc_box,#pensamiento-critico .pc_win{display:flex !important; flex-direction:column;
  flex-wrap:nowrap; justify-content:flex-start; align-items:stretch;}
#pensamiento-critico .pc_title_a,#pensamiento-critico .pc_txt strong,
#pensamiento-critico .pc_src em{display:inline !important;}
#pensamiento-critico .pc_list{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  justify-content:flex-start; align-items:stretch; gap:8px;}
#pensamiento-critico .pc_girl_svg,#pensamiento-critico .pc_ico{display:block !important;}

/* ===== Columna (RD-04) =======================================================
   Padding y hueco 16 → 24 entre 290 y 565 (exactos en los dos), 24 por encima.
   En un wrapper: el contenedor no se reestila. */
#pensamiento-critico .pc_in{align-items:stretch;
  gap:clamp(16px, calc(16px + (100cqi - 290px) * 8 / 275), 24px);
  padding:clamp(16px, calc(16px + (100cqi - 290px) * 8 / 275), 24px);}

/* ===== Título (T05, DT6) ===================================================== */
#pensamiento-critico .pc_title{font-family:var(--pc-title); font-weight:400; font-size:32px;
  line-height:36px; color:var(--pc-green1) !important;}
/* La parte destacada empieza línea (los dos tamaños de Figma). */
#pensamiento-critico .pc_title_b{font-weight:600;}

/* ===== Composición (T06; RD-06..09) ==========================================
   La línea inferior Forest, superpuesta (no ocupa sitio, DT13): pisa el último
   píxel de la caja y de la base, como el trazo interior de Figma. */
#pensamiento-critico .pc_fig{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  justify-content:flex-start; align-items:stretch; gap:0; position:relative;}
#pensamiento-critico .pc_fig::after{content:'' !important; display:block !important;
  position:absolute !important; left:0; right:0; bottom:0; height:1px; z-index:1;
  background:var(--pc-forest);}
/* 290: la chica recortada a la cintura (Figma 19063:2787): el dibujo a ×1,149
   (225,21 de ancho), centrado y 58 por encima, en una ventana de 326. */
#pensamiento-critico .pc_girl{display:block !important; position:relative; flex:none;
  height:326px; overflow:hidden; overflow:clip;}
#pensamiento-critico .pc_girl_svg{position:absolute; top:-58px; left:50%;
  width:225.212px; height:717px; transform:translateX(-50%);}
/* Caja arena: la ventana (`pc_win`) recorta la lista para A-002; el borde de la
   caja no sirve, con su padding se verían 13 px de la primera tarjeta. La ventana
   llena la caja y la lista llena la ventana (las tarjetas, arriba): si la caja se
   estira al alto de la chica (DT13), las tarjetas siguen subiendo desde su base. */
#pensamiento-critico .pc_box{flex:none; min-width:0; padding:16px; border-radius:15px 15px 0 0;
  background:var(--pc-sand);}
#pensamiento-critico .pc_win{flex:1 0 auto; overflow:hidden; overflow:clip;}
#pensamiento-critico .pc_list{flex:1 0 auto;}

/* ===== Tarjetas (T07) ======================================================== */
#pensamiento-critico .pc_card{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  justify-content:flex-start; align-items:flex-start; gap:10px; padding:16px; border-radius:8px;
  background:var(--pc-white);}
#pensamiento-critico .pc_ico{flex:none; width:38px; height:38px;}
#pensamiento-critico .pc_txt{align-self:stretch; min-width:0; font-family:var(--pc-text);
  font-weight:400; font-size:16px; line-height:20px; color:var(--pc-sand7);}

/* ===== Fuente (T08, RD-11) =================================================== */
#pensamiento-critico .pc_src{font-family:var(--pc-text); font-style:italic; font-weight:400;
  font-size:14px; line-height:18px; color:var(--pc-sand7);}

/* ===== EL CAMBIO DE DISPOSICIÓN (RD-05) ======================================
   Uno solo para toda la pieza. Por debajo, la composición de 290; desde aquí, la
   de 565. `display`, dirección, hueco y columnas, reafirmados (con `!important`
   en los dos lados: uno fuera de la @container se come el responsive). */
@container pc (min-width: 561px){
  /* Chica 196 a la izquierda, caja estirada al alto de la fila (DT13). */
  #pensamiento-critico .pc_fig{display:grid !important; grid-template-columns:196px minmax(0, 1fr);
    align-items:stretch; column-gap:16px; row-gap:0;}
  #pensamiento-critico .pc_girl{display:flex !important; flex-direction:column; flex-wrap:nowrap;
    justify-content:flex-end; align-items:stretch; height:auto; min-height:624px; overflow:visible;}
  #pensamiento-critico .pc_girl_svg{position:static; flex:none; width:196px; height:624px;
    transform:none;}
  #pensamiento-critico .pc_card{display:flex !important; flex-direction:row; flex-wrap:nowrap;
    align-items:flex-start; gap:10px;}
  #pensamiento-critico .pc_txt{flex:1 1 0; align-self:auto;}
}
@container pc (max-width: 560.98px){
  #pensamiento-critico .pc_fig{display:flex !important; flex-direction:column;}
  #pensamiento-critico .pc_card{display:flex !important; flex-direction:column;}
}

/* ===== Animaciones (animations.md; T10) ======================================
   A-001: el bocadillo crece de su caja de Default (nube 7 × 4, punto 1 × 1) a la
   de Variant2, por eje (como Smart Animate), desde el punto que lleva una a la
   otra (P = (T − s·C) / (1 − s), en unidades del SVG: vale igual a ×1,149).
   A-002: la lista entera sube desde 3 px por debajo de su ventana.
   Los estados «antes», sólo con `pc_js` (main.js) y hasta `is-in`, y sólo en
   pantalla sin reduced-motion: sin JS, al imprimir o con reduced-motion, todo
   en su estado final (RF-04, RF-05, RF-07). Las transiciones, sólo en el estado
   de llegada: poner `pc_js` es un salto, nunca una bajada animada (DT14). */
#pensamiento-critico .pc_bub{transform-box:view-box;}
#pensamiento-critico .pc_bub--nube{transform-origin:128.482px 82.986px;}
#pensamiento-critico .pc_bub--punto{transform-origin:93.505px 127.517px;}
@media screen and (prefers-reduced-motion: no-preference){
  #pensamiento-critico.pc_js:not(.is-in) .pc_bub--nube{transform:scale(.06767, .06019);}
  #pensamiento-critico.pc_js:not(.is-in) .pc_bub--punto{transform:scale(.08867, .08458);}
  #pensamiento-critico.pc_js:not(.is-in) .pc_list{transform:translateY(calc(100% + 3px));}
  /* Tarjetas: 1200 ms frenando suave (D03). */
  #pensamiento-critico.pc_js.is-in .pc_list{transition-property:transform; transition-duration:1200ms;
    transition-delay:0s; transition-timing-function:cubic-bezier(.22, 1, .36, 1);}
  /* Bocadillo: el muelle «Gentle» de Figma (rigidez 100, amortiguación 15, masa 1) en
     tiempo real, hasta asentarse al 0,1 % (800 ms, DT15); la curva de respaldo, para
     los navegadores sin `linear()`. */
  #pensamiento-critico.pc_js.is-in .pc_bub{transition-property:transform; transition-duration:800ms;
    transition-delay:0s; transition-timing-function:cubic-bezier(.34, 1.3, .64, 1);
    transition-timing-function:linear(0, .0181, .0653, .1325, .2121, .2982, .3862, .4726, .5547, .6308,
      .7, .7615, .8153, .8616, .9006, .9329, .9592, .98, .9962, 1.0083, 1.0169, 1.0228, 1.0263, 1.028,
      1.0283, 1.0276, 1.0261, 1.0241, 1.0218, 1.0193, 1.0168, 1.0144, 1.0121, 1.01, 1.0081, 1.0064,
      1.0049, 1.0036, 1.0026, 1.0017, 1);}
}

/* Alto contraste de Windows: quita las sombras, y con ellas el marco. */
@media (forced-colors: active){
  /* La raíz con `outline`: un borde le quitaría 2 px al contenedor y movería el corte. */
  #pensamiento-critico{outline:1px solid CanvasText; outline-offset:-1px;}
  #pensamiento-critico .pc_card{border:1px solid CanvasText;}
}