/* =============================================================================
   Estoicismo  ·  estático de iberdrola.com
   Cabecera, diagrama (dos preguntas → No / Sí), «¿Y cómo se consigue?» y
   «¿Qué se consigue?»: tabla (composición de 565) o tres desplegables (de 290).
   Dos composiciones y UN solo cambio de disposición (@container es, RD-05);
   fluida a los dos lados. Por encima de 565 la pieza sigue creciendo; los
   dibujos no escalan (RD-06).
   Medidas: specs/estoicismo/design/  (Figma es la única fuente)
   Estado: `es_js` en la raíz (lo pone main.js); sin él, todo en su estado
   final (RF-09).
   ============================================================================= */

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

/* Tokens (design/tokens.json). */
#estoicismo{
  --es-green1:#007F33;  --es-green:#00A443;   --es-green4:#5BD38C;  --es-forest:#00402A;
  --es-forest1:#DCEBE1; --es-sky:#0DA9FF;     --es-sky4:#6BDAFF;    --es-sky20:#D8F3FF;
  --es-sunset:#FF9C1A;  --es-sunset4:#FFCD52; --es-sunset50:#FFE5A8;
  --es-sand:#FFF5EC;    --es-sand1:#FFFEFF;   --es-sand3:#D8CFC7;   --es-sand7:#3A3735;
  --es-white:#FFFFFF;
  --es-text:'IberPangea Text','IberPangea',sans-serif;
}
/* Color de cada grupo: fuerte (--c), fondo claro (--cbg), línea clara (--cl). */
#estoicismo .es_r--g,#estoicismo .es_acc--g{--c:var(--es-green);  --cbg:var(--es-forest1); --cl:var(--es-green4);}
#estoicismo .es_r--b,#estoicismo .es_acc--b{--c:var(--es-sky);    --cbg:var(--es-sky20);   --cl:var(--es-sky4);}
#estoicismo .es_r--o,#estoicismo .es_acc--o{--c:var(--es-sunset); --cbg:var(--es-sunset50);--cl:var(--es-sunset4);}

/* ===== 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. 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. ÚNICO contenedor. */
#estoicismo{
  container-name:es; container-type:inline-size;
  width:100%; margin:0 auto; box-sizing:border-box;
  position:relative; overflow:hidden; background:var(--es-white); border-radius:15px;
  box-shadow:inset 0 0 0 1px var(--es-sand3);
}

/* ===== 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. */
#estoicismo *{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;}
#estoicismo ul,#estoicismo ol,#estoicismo li{list-style:none;}
#estoicismo li::marker{content:none;}
#estoicismo li::before{content:'' !important; display:none !important; margin:0 !important;}
/* `#estoicismo *` NO alcanza a los pseudo-elementos: se blindan aparte, sin `content`. */
#estoicismo *::before,#estoicismo *::after{margin:0; padding:0; text-indent:0;
  letter-spacing:inherit; text-transform:inherit; box-sizing:border-box;}
#estoicismo img{max-width:none; border:0;}
#estoicismo svg{overflow:visible;}
#estoicismo button{font:inherit; cursor:pointer; border:0; background:transparent;
  color:inherit; appearance:none; -webkit-appearance:none; border-radius:0; min-width:0;
  min-height:0; box-shadow:none; text-shadow:none; text-transform:none; outline:0;}
/* La tabla: el theme le pone bordes, fondos de fila alterna y padding. */
#estoicismo table,#estoicismo thead,#estoicismo tbody,#estoicismo tr,#estoicismo th,#estoicismo td{
  border:0; background:transparent; box-shadow: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. */
#estoicismo{
  font-family:'IberPangea',sans-serif; font-size:16px; line-height:20px;
  font-weight:400; font-style:normal; color:var(--es-forest);
  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 %, «fitnessrevolucionario.com»)
     se parte antes que salirse. A su tamaño nada se parte por esto. */
  overflow-wrap:break-word;
}
#estoicismo strong{font-weight:600;}

/* `display` NO se hereda: se declara elemento a elemento y con `!important`. */
#estoicismo{display:block !important;}
#estoicismo .es_in,#estoicismo .es_head,#estoicismo .es_flow,#estoicismo .es_how,
#estoicismo .es_what{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  justify-content:flex-start;}
#estoicismo .es_title,#estoicismo .es_lead,#estoicismo .es_h3,#estoicismo .es_text,
#estoicismo .es_qbox,#estoicismo .es_anbox,#estoicismo .es_src,#estoicismo .es_card_t,
#estoicismo .es_acc_t,#estoicismo .es_lbl,#estoicismo .es_box,#estoicismo .es_ct,
#estoicismo .es_ilu,
#estoicismo .es_q_line,#estoicismo .es_qt{display:block !important;}
#estoicismo strong,#estoicismo .es_nw,#estoicismo .es_nwt,#estoicismo .es_src_k{display:inline !important;}
#estoicismo .es_nwt{white-space:nowrap;}
#estoicismo br{display:inline !important;}
#estoicismo .es_ilu img,#estoicismo .es_ilu svg{display:block !important;}
#estoicismo .es_ico,#estoicismo .es_chev{display:block !important;}
#estoicismo .es_tbl{display:table !important;}
#estoicismo .es_tbl thead{display:table-header-group !important;}
#estoicismo .es_tbl tbody{display:table-row-group !important;}
#estoicismo .es_tbl tr{display:table-row !important;}
#estoicismo .es_tbl th,#estoicismo .es_tbl td{display:table-cell !important;}

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

/* ===== Cabecera (T05) ======================================================== */
#estoicismo .es_head{align-items:stretch; gap:16px;}
#estoicismo .es_title{font-family:'IberPangea',sans-serif; font-weight:600; font-size:32px;
  line-height:36px; color:var(--es-green1) !important;}
#estoicismo .es_lead,#estoicismo .es_text{font-family:var(--es-text); font-weight:400;
  font-size:18px; line-height:24px; color:var(--es-forest);}
#estoicismo .es_h3{font-family:'IberPangea',sans-serif; font-weight:500; font-size:24px;
  line-height:28px; color:var(--es-green1) !important;}

/* ===== Diagrama (T06 a 290, T07 a 565; RD-07, RD-11) =========================
   Los conectores, anclados a lo que unen (bordes de caja, centros de círculo y
   de columna), no a coordenadas: entre medias siguen uniendo lo mismo. */
#estoicismo .es_flow{align-items:stretch; gap:24px; position:relative;}
#estoicismo .es_qs{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start; gap:11px;}
#estoicismo .es_q{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:center; justify-content:flex-end; gap:0; position:relative; min-width:0;}
#estoicismo .es_q--1{--c:var(--es-green);}
#estoicismo .es_q--2{--c:var(--es-sunset);}
#estoicismo .es_ilu{position:relative; flex:none; width:132px; height:137px; z-index:1;}
#estoicismo .es_ilu img,#estoicismo .es_ilu svg{width:100%; height:100%;}
#estoicismo .es_q_line{flex:none; width:1px; height:16px; background:var(--c);}
#estoicismo .es_qbox{align-self:stretch; position:relative; padding:8px 16px;
  border-radius:15px; background:var(--es-white); box-shadow:inset 0 0 0 1px var(--c);
  font-family:'IberPangea',sans-serif; font-weight:500; font-size:16px; line-height:20px;
  color:var(--es-forest); text-align:center;}
/* Conectores grises: 1 px Sand 3. */
#estoicismo .es_q--1 .es_qbox::after,#estoicismo .es_q--2 .es_qbox::after,
#estoicismo .es_answers::before,#estoicismo .es_answers::after,
#estoicismo .es_anbox::before{content:'' !important; display:block !important;
  position:absolute; border:0 solid var(--es-sand3); pointer-events:none;}
/* 290: de la caja verde al círculo naranja (Vector 22, 16 de alto). */
#estoicismo .es_q--1 .es_qbox::after{left:calc(50% - .5px); top:100%; width:1px; height:16px;
  background:var(--es-sand3);}
#estoicismo .es_q--2 .es_qbox::after{display:none !important;}

#estoicismo .es_answers{display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:stretch; gap:8px; position:relative;}
#estoicismo .es_ans{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:center; justify-content:flex-start; gap:0; min-width:0;}
#estoicismo .es_dot{display:flex !important; flex-direction:row; align-items:center;
  justify-content:center; flex:none; position:relative; z-index:1; width:40px; height:40px;
  margin-bottom:8px; border-radius:50%; background:var(--es-forest);
  font-family:var(--es-text); font-weight:600; font-size:16px; line-height:20px;
  color:var(--es-sand1) !important; white-space:nowrap;}
#estoicismo .es_ans--si .es_dot{background:var(--es-green1);}
/* Línea bajo el círculo: 8 (290) / 16 (565). */
#estoicismo .es_dot::after{content:'' !important; display:block !important; position:absolute;
  left:calc(50% - .5px); top:100%; width:1px; height:8px; background:var(--es-sand3);}
#estoicismo .es_card{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:center; justify-content:flex-start; gap:6px; align-self:stretch; flex:1 0 auto; padding:10px;
  border-radius:15px; background:var(--es-white); box-shadow:inset 0 0 0 1px var(--es-sand3);
  font-family:var(--es-text); font-weight:400; font-size:14px; line-height:18px;
  color:var(--es-sand7); text-align:left;}
#estoicismo .es_card_t{align-self:stretch; order:2; min-width:0;}
#estoicismo .es_ico{flex:none; order:1; width:40px; height:40px;}
/* 290: la llave hacia las respuestas (Vector 23), absoluta (no ocupa sitio). Un
   tramo baja del centro, se abre a los centros de las dos columnas y entra en
   los círculos (que la tapan). */
#estoicismo .es_answers::before{left:calc(50% - .5px); top:-19px; width:1px; height:13px;
  background:var(--es-sand3);}
#estoicismo .es_answers::after{left:calc((100% - 8px) / 4 - .5px); right:calc((100% - 8px) / 4 - .5px);
  top:-6.75px; height:11.75px; border-width:1px 1px 0 1px; border-radius:8px 8px 0 0;}

/* ===== «¿Y cómo se consigue?» (T08; RD-12) =================================== */
#estoicismo .es_how{align-items:stretch; gap:16px; padding:16px; border-radius:15px;
  background:var(--es-sand);}
#estoicismo .es_an{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:center; justify-content:flex-start; gap:16px; position:relative;}
#estoicismo .es_ilu--analisis{width:191px; height:144px;}
#estoicismo .es_anbox{position:relative; padding:8px 16px; border-radius:50px;
  background:var(--es-white); box-shadow:inset 0 0 0 1px var(--es-sand3);
  font-family:var(--es-text); font-weight:400; font-size:16px; line-height:20px;
  color:var(--es-sand7); text-align:center; white-space:nowrap;}
/* 290 (Group 29): de la píldora de arriba, por la izquierda, al corazón; de la de
   abajo, por la derecha, al cerebro. Anclados al centro de la columna. */
#estoicismo .es_anbox--emo::before{left:calc(50% - 105px); right:100%; top:50%; height:53px;
  border-width:1px 0 1px 1px; border-radius:8px 0 0 8px;}
#estoicismo .es_anbox--rac::before{left:100%; right:calc(50% - 97px); top:calc(50% - 160px);
  bottom:calc(50% - 1px); border-width:1px 1px 1px 0; border-radius:0 8px 8px 0;}

/* ===== «¿Qué se consigue?» (T09 tabla, T11 desplegables) ===================== */
#estoicismo .es_what{align-items:stretch; gap:16px;}
#estoicismo .es_tbl{display:none !important;}

/* Tabla (565, RD-09). `border-spacing` hace el hueco de 16 entre filas; el
   margen negativo quita el de arriba y el de abajo. */
#estoicismo .es_tbl{width:100%; table-layout:fixed; border-collapse:separate;
  border-spacing:0 16px; margin:-16px 0;}
#estoicismo .es_tbl th,#estoicismo .es_tbl td{padding:0; vertical-align:middle;
  text-align:center; font-family:var(--es-text); font-weight:400; font-size:14px;
  line-height:20px; color:var(--es-sand7);}
#estoicismo .es_tbl thead th{padding:0 0 8px; box-shadow:inset 0 -1px 0 var(--es-sand3);
  font-family:'IberPangea',sans-serif; font-weight:500; font-size:18px; line-height:22px;
  color:var(--es-green1) !important;}
#estoicismo .es_tbl thead th:nth-child(1){padding-right:10.67px;}
#estoicismo .es_tbl thead th:nth-child(2){padding-left:5.33px; padding-right:5.33px;}
#estoicismo .es_tbl thead th:nth-child(3){padding-left:10.67px;}
#estoicismo .es_c--acc .es_ct{font-weight:600;}
/* Texto y barra se apoyan ABAJO en su fila, con el centro de la barra a la distancia
   del borde inferior que tiene en Figma (13 la 1.ª fila, 12 la última, 8 la 2.ª
   subfila, 0 la 1.ª): la barra toca siempre el lateral recto de su caja, que ocupa
   todo el alto de la fila, tenga el texto o la caja las líneas que tenga (EN, PT),
   y las dos barras de una fila quedan a la misma altura. */
#estoicismo .es_tbl .es_c{vertical-align:bottom;}
#estoicismo .es_r--g .es_c{padding-bottom:13px;}
#estoicismo .es_r--o .es_c{padding-bottom:12px;}
/* La línea: Figma la mide por el centro del trazo (texto + 10 hasta el centro):
   la celda sigue midiendo lo de Figma. 2 px la acción, con los extremos rectos;
   6 px el corto plazo, redondeada sólo a la izquierda y recta a la derecha, donde
   toca la caja de resultado (Frame 106). Las juntas caen en medio píxel (columnas
   de 172,33): para que no quede rendija a ningún ancho ni zoom, se montan. La fina
   pasa 3 px por debajo del comienzo de la gruesa (que se pinta después) y la gruesa
   4 px por debajo de la caja, que va encima. */
#estoicismo .es_tbl .es_c::after{content:'' !important; display:block !important; height:2px;
  margin-top:9px; margin-bottom:-1px; margin-right:-3px; border-radius:0; background:var(--cl);
  clip-path:inset(0);}
#estoicismo .es_tbl .es_c--corto::after{height:6px; margin-top:7px; margin-bottom:-3px;
  margin-right:-4px; border-radius:3px 0 0 3px; background:var(--c);}
#estoicismo .es_r--a .es_c{padding-top:8px;}
#estoicismo .es_r--z .es_c{padding-bottom:8px;}
#estoicismo .es_tbl .es_res{position:relative; z-index:1; padding:8px; border-radius:8px; background:var(--cbg);
  box-shadow:inset 0 0 0 1px var(--c); font-weight:600; color:var(--es-forest);}
#estoicismo .es_r--o .es_c,#estoicismo .es_r--o .es_res{line-height:18px;}

/* Desplegables (290, RD-10). En el documento: botón → cuerpo → flechas (orden de
   lectura); se ven cuerpo, botón, flechas. Gap 0: los 16 van dentro de cada capa,
   para que cerrado mida 88. Sin JS (RF-09): abiertos, sin chevron ni flechas. */
#estoicismo .es_accs{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start; gap:8px;}
#estoicismo .es_acc{display:grid !important; grid-template-columns:minmax(0, 1fr);
  grid-template-rows:auto auto auto; gap:0; align-items:stretch; justify-items:stretch;
  align-content:start; padding:16px; border-radius:15px;
  background:var(--es-white); box-shadow:inset 0 0 0 1px var(--c);}
/* Cuerpo y flechas: cada uno, una rejilla de una fila que pasa de 0fr a 1fr (A-003);
   la capa interior recorta. (Con las tres filas del desplegable en `fr`, todas
   tomarían el alto de la mayor.) */
#estoicismo .es_acc_body,#estoicismo .es_acc_nav{display:grid !important;
  grid-template-columns:minmax(0, 1fr); grid-template-rows:1fr; align-items:stretch;
  justify-items:stretch; min-height:0;}
#estoicismo .es_acc_body{grid-row:1; grid-column:1;}
#estoicismo .es_acc_inner{min-height:0; overflow:hidden;}
#estoicismo .es_acc_btn{grid-row:2; grid-column:1; display:flex !important; flex-direction:row;
  flex-wrap:nowrap; align-items:center; justify-content:flex-start; gap:10px; width:100%; padding:8px 16px;
  border-radius:8px; background:var(--cbg); box-shadow:inset 0 0 0 1px var(--c);
  font-family:var(--es-text); font-weight:600; font-size:14px; line-height:20px;
  color:var(--es-forest); text-align:center;}
#estoicismo .es_acc--o .es_acc_btn{line-height:18px;}
#estoicismo .es_acc_t{flex:1 1 auto; min-width:0;}
#estoicismo .es_chev{display:none !important; flex:none; width:24px; height:24px; color:var(--c);}
#estoicismo .es_acc_nav{grid-row:3; grid-column:1;}
#estoicismo .es_acc_nav{display:none !important;}
#estoicismo .es_acc_inner{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start; gap:16px;}
#estoicismo .es_steps,#estoicismo .es_step{display:flex !important; flex-direction:column;
  flex-wrap:nowrap; align-items:stretch; justify-content:flex-start; gap:16px;}
#estoicismo .es_grp{display:block !important;}
#estoicismo .es_lbl{position:relative; margin-bottom:16px; padding-bottom:10px;
  box-shadow:inset 0 -1px 0 var(--es-sand3); font-family:'IberPangea',sans-serif;
  font-weight:400; font-size:16px; line-height:22px; color:var(--es-green1); text-align:center;}
#estoicismo .es_lbl strong{font-weight:500;}
#estoicismo .es_lbl::after{content:'' !important; display:block !important; position:absolute;
  left:calc(50% - .5px); top:100%; width:1px; height:16px; background:var(--es-sand3);}
#estoicismo .es_box{padding:8px 16px; border-radius:8px; background:var(--es-white);
  font-family:var(--es-text); font-weight:400; font-size:14px; line-height:20px;
  color:var(--es-sand7); text-align:center;}
#estoicismo .es_box--acc{font-weight:600; box-shadow:inset 0 0 0 1px var(--cl);}
#estoicismo .es_box--corto{box-shadow:inset 0 0 0 2px var(--c);}
#estoicismo .es_acc--o .es_steps .es_box{line-height:18px;}

/* Con JS: plegados; uno abierto (D02); pasos superpuestos con el alto del mayor (RF-03). */
#estoicismo.es_js .es_acc_body,#estoicismo.es_js .es_acc_nav{grid-template-rows:0fr;}
#estoicismo.es_js .es_acc.is-open .es_acc_body,
#estoicismo.es_js .es_acc.is-open .es_acc_nav{grid-template-rows:1fr;}
#estoicismo.es_js .es_chev{display:block !important;}
#estoicismo.es_js .es_acc.is-open .es_chev{transform:rotate(180deg);}
#estoicismo.es_js .es_acc_nav{display:grid !important;}
/* Las flechas: 16 encima y 6 debajo, para que el recorte de la capa no se coma el
   foco (3 + 2); esos 6 los devuelve el padding del desplegable abierto (16 → 10). */
#estoicismo.es_js .es_acc--b.is-open{padding-bottom:10px;}
#estoicismo.es_js .es_acc_nav .es_acc_inner{display:flex !important; flex-direction:row;
  justify-content:center; align-items:center; gap:16px;}
/* Con margen y no con padding: un padding no deja plegar la capa a 0. */
#estoicismo.es_js .es_acc_nav .es_arrow{margin:16px 0 6px;}
/* Plegado = ni se ve ni se lee ni recibe foco (además de `inert`, que pone main.js). */
#estoicismo.es_js .es_acc:not(.is-open) .es_acc_body,
#estoicismo.es_js .es_acc:not(.is-open) .es_acc_nav{visibility:hidden;}
#estoicismo.es_js .es_steps{display:grid !important; grid-template-columns:minmax(0, 1fr); gap:0;
  align-items:start; justify-items:stretch;}
#estoicismo.es_js .es_step{grid-area:1 / 1;}
#estoicismo.es_js .es_acc:not([data-p="2"]) .es_step[data-paso="2"],
#estoicismo.es_js .es_acc[data-p="2"] .es_step[data-paso="1"]{visibility:hidden;}
#estoicismo .es_acc_btn:focus-visible{outline:3px solid var(--es-forest) !important;
  outline-offset:2px !important;}

/* Flechas (Boton-flecha de vehiculos-tipos-slider, D09). Normal = aro y punta
   Forest; al pasar el ratón y al pulsar = relleno #00A443 y punta Sand 1;
   apagada = la normal a .5 y sin reaccionar. */
#estoicismo .es_arrow{display:block !important; width:32px; height:32px; flex:none;
  border-radius:50%; box-shadow:inset 0 0 0 1px var(--es-forest); color:var(--es-forest);
  background:transparent;}
#estoicismo .es_arrow svg{display:block !important; width:32px; height:32px; fill:currentColor;}
#estoicismo .es_prev svg{transform:rotate(180deg);}
@media (hover:hover){
  #estoicismo .es_arrow:not([aria-disabled="true"]):hover{background:var(--es-green);
    box-shadow:none; color:var(--es-sand1);}
}
#estoicismo .es_arrow:not([aria-disabled="true"]):active{background:var(--es-green);
  box-shadow:none; color:var(--es-sand1);}
/* El .5 en lo que se ve (punta y aro), no en el botón: el foco no queda a medias. */
#estoicismo .es_arrow[aria-disabled="true"]{box-shadow:inset 0 0 0 1px rgba(0, 64, 42, .5); cursor:default;}
#estoicismo .es_arrow[aria-disabled="true"] svg{opacity:.5;}
#estoicismo .es_arrow:focus-visible{outline:3px solid var(--es-forest) !important;
  outline-offset:2px !important;}

/* ===== Fuente (T12, RD-13) =================================================== */
#estoicismo .es_src{font-family:var(--es-text); font-style:italic; font-weight:400;
  font-size:14px; line-height:18px; color:var(--es-sand7);}
#estoicismo .es_src_k{color:var(--es-green1);}

/* Sólo para lector de pantalla (fuera de las dos composiciones). */
#estoicismo .es_sr{display:block !important; position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;}

/* ===== 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 es (min-width: 561px){
  #estoicismo .es_nw{white-space:nowrap;}

  /* Diagrama: preguntas en dos columnas con la línea entre cajas (36). */
  #estoicismo .es_qs{display:grid !important; grid-template-columns:minmax(0, 1fr) 36px minmax(0, 1fr);
    align-items:end; gap:0; padding:0 24px;}
  #estoicismo .es_q--1{grid-column:1;}
  #estoicismo .es_q--2{grid-column:3;}
  /* Las dos cajas igual de altas y el texto centrado si una tiene más líneas (PT; decidido
     por quien encarga, 9 oct): los dibujos quedan a la misma altura. */
  #estoicismo .es_qs{align-items:stretch;}
  #estoicismo .es_q .es_qbox{flex:1 0 auto; display:flex !important; flex-direction:column;
    flex-wrap:nowrap; justify-content:center; align-items:stretch;}
  #estoicismo .es_q--1 .es_qbox::after{left:100%; top:calc(50% - .5px); width:36px; height:1px;}
  /* Vector 31, tramo vertical: de la mitad de la caja naranja al borde de la
     columna y abajo hasta el centro de los círculos (24 de hueco + 20). */
  #estoicismo .es_q--2 .es_qbox::after{display:block !important; left:100%; top:calc(50% - .5px);
    width:24px; bottom:-45px; height:auto; background:none; border-width:1px 1px 1px 0;
    border-radius:0 8px 8px 0;}

  #estoicismo .es_answers{display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px; padding:0 24px;}
  #estoicismo .es_dot{margin-bottom:16px;}
  #estoicismo .es_dot::after{height:16px;}
  /* En fila; las dos del mismo alto (si una tiene más líneas, como en PT). */
  #estoicismo .es_card{display:flex !important; flex-direction:row; align-items:center; flex:1 0 auto;}
  #estoicismo .es_card_t{flex:1 1 auto; order:1; align-self:auto;}
  #estoicismo .es_ico{order:2;}
  #estoicismo .es_ans{justify-content:flex-start;}
  /* Vector 31, tramo horizontal: del círculo «No» al borde de la columna, por
     detrás del «Sí». La llave de 290, fuera. */
  #estoicismo .es_answers::before{display:none !important;}
  #estoicismo .es_answers::after{left:calc(24px + (100% - 72px) / 4 + 20px); right:24px;
    top:20px; height:1px; border-width:1px 0 0 0; border-radius:0;}

  /* «¿Y cómo se consigue?»: fila caja · dibujo · caja; conectores Vector 11/12
     desde el corazón y el cerebro hasta el centro de cada caja. */
  #estoicismo .es_an{display:grid !important; grid-template-columns:minmax(0, 1fr) 191px minmax(0, 1fr);
    align-items:center; gap:0;}
  #estoicismo .es_anbox{border-radius:15px; white-space:normal;}
  #estoicismo .es_anbox--emo::before{left:calc(50% - .5px); right:-2px; top:calc(50% - 53.5px);
    height:calc(53.5px - 50%); bottom:auto; border-width:1px 0 0 1px; border-radius:8px 0 0 0;}
  #estoicismo .es_anbox--rac::before{left:0; right:calc(50% - .5px); top:calc(50% - 53.5px);
    height:calc(53.5px - 50%); bottom:auto; border-width:1px 1px 0 0; border-radius:0 8px 0 0;}

  /* «¿Qué se consigue?»: la tabla; los desplegables, fuera (lo oculto no se lee). */
  #estoicismo .es_tbl{display:table !important;}
  #estoicismo .es_accs{display:none !important;}
}
@container es (max-width: 560.98px){
  #estoicismo .es_tbl{display:none !important;}
  #estoicismo .es_accs{display:flex !important;}
}

/* ===== Animaciones (animations.md) ===========================================
   Los estados «antes», sólo con `es_js` y hasta `is-in` (RF-09): sin JS o si
   main.js no carga, todo está en su estado final. */
#estoicismo .es_acento{transform-box:fill-box; transform-origin:center;}
#estoicismo.es_js .es_ilu:not(.is-in) .es_acento{transform:scale(0); opacity:0;}
#estoicismo.es_js .es_tbl:not(.is-in) .es_c::after{clip-path:inset(0 0 0 100%);}
/* Hasta inyectar el SVG, el <img> no se ve (con su hueco); si falla, vuelve (DT15). */
#estoicismo.es_js .es_ilu:not(.is-fallo) img{visibility:hidden;}
/* Transiciones sólo con `es_anim`, que main.js pone tras el primer fotograma. */
#estoicismo.es_anim .es_acento{transition:transform .5s ease-out, opacity .5s ease-out;}
#estoicismo.es_anim .es_tbl .es_c::after{transition:clip-path .5s ease-out;}
#estoicismo.es_anim .es_acc_body,#estoicismo.es_anim .es_acc_nav{transition:grid-template-rows .3s ease;}
#estoicismo.es_anim .es_acc{transition:padding-bottom .3s ease;}
#estoicismo.es_anim .es_acc:not(.is-open) .es_acc_body,
#estoicismo.es_anim .es_acc:not(.is-open) .es_acc_nav{transition:grid-template-rows .3s ease, visibility 0s linear .3s;}
#estoicismo.es_anim .es_chev{transition:transform .3s ease;}
#estoicismo.es_anim .es_arrow{transition:background-color .15s ease, color .15s ease, box-shadow .15s ease;}
@media (prefers-reduced-motion: reduce){
  #estoicismo.es_anim .es_acento,#estoicismo.es_anim .es_tbl .es_c::after,
  #estoicismo.es_anim .es_acc,#estoicismo.es_anim .es_chev,
  #estoicismo.es_anim .es_acc .es_acc_body,#estoicismo.es_anim .es_acc .es_acc_nav,
  #estoicismo.es_anim .es_acc:not(.is-open) .es_acc_body,#estoicismo.es_anim .es_acc:not(.is-open) .es_acc_nav,
  #estoicismo.es_anim .es_arrow{transition:none;}
}

/* Alto contraste de Windows: quita las sombras, y con ellas los trazos. */
@media (forced-colors: active){
  /* La raíz con `outline`: un borde le quitaría 2 px al contenedor y movería el corte. */
  #estoicismo{outline:1px solid CanvasText; outline-offset:-1px;}
  #estoicismo .es_qbox,#estoicismo .es_card,#estoicismo .es_anbox,
  #estoicismo .es_acc,#estoicismo .es_acc_btn,#estoicismo .es_box,#estoicismo .es_res,
  #estoicismo .es_arrow{border:1px solid CanvasText;}
}