/* ==========================================================================
   Seguridad eléctrica en casa · 1 — Cuadro eléctrico e interruptores
   Scope: #segelcu · BEM cu_ · Figma 2T2026 · 21342:3384 (565) y 21249:10478 (290)
   ========================================================================== */

@font-face{font-family:'IberPangea';src:url(/wcorp/gc/prod/es_ES/estaticos/seguridad-electrica-cuadro/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/seguridad-electrica-cuadro/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/seguridad-electrica-cuadro/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/seguridad-electrica-cuadro/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/seguridad-electrica-cuadro/fonts/IberPangeaText-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea Text';src:url(/wcorp/gc/prod/es_ES/estaticos/seguridad-electrica-cuadro/fonts/IberPangeaText-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap;}

/* ===== Tokens ===== */
#segelcu{
  --cu-green:#00A443;
  --cu-green1:#007F33;   /* Green 1 — titulares */
  --cu-green4:#5BD38C;   /* Green 4 — panel y pestaña activa, familia ID */
  --cu-sky:#0DA9FF;      /* Iberdrola Sky — borde de pestaña, familia SPD */
  --cu-sky4:#6BDAFF;     /* Sky 4 — panel y pestaña activa, familia SPD */
  --cu-forest:#00402A;   /* Iberdrola Forest — entradilla y flechas */
  --cu-sand:#FFF5EC;     /* Iberdrola Sand */
  --cu-sand3:#D8CFC7;
  --cu-sand7:#3A3735;    /* Sand 7 — cuerpo */
  --cu-white:#FFFFFF;
}

/* ===== Contenedor ===== */
#segelcu{
  container-type:inline-size; container-name:cu;
  width:100%; max-width:980px; margin:0 auto;
  box-sizing:border-box; position:relative; text-align:left;
  background:var(--cu-white); border-radius:15px;
  /* `outline` y no `border`: Figma dibuja el trazo dentro del frame y con `border` el contenido
     perdería 2px de ancho. Ojo: los outlines se pintan POR ENCIMA de los descendientes, así que
     donde haya un hijo que sobresalga hay que usar `border` (ver la tarjeta de riesgo de la pieza 2). */
  outline:1px solid var(--cu-sand3); outline-offset:-1px;
  font-family:'IberPangea Text',Arial,sans-serif; font-size:16px; line-height:20px;
  color:var(--cu-sand7);
  margin-bottom: 2rem !important;
}

/* ===== Blindaje frente al CSS del sitio anfitrión (Liferay) =====
   La HERENCIA pierde contra cualquier declaración del theme, por débil que sea. Todo lo que se
   herede en vez de declararse, el CMS lo pisa. Ver docs/VALIDACION.md → Puerta de aislamiento. */
#segelcu *,#segelcu *::before,#segelcu *::after{box-sizing:border-box;}
#segelcu *{
  color:inherit; font:inherit; letter-spacing:inherit;
  text-align:inherit; text-transform:inherit; white-space:inherit;
  text-indent:0; text-decoration:none; margin:0; padding:0;
}
#segelcu *::before,#segelcu *::after{
  margin:0; padding:0; text-indent:0; letter-spacing:inherit; text-transform:inherit;
}
#segelcu ul,#segelcu ol,#segelcu li{list-style:none;}
#segelcu li::marker{content:none;}
#segelcu li::before{content:'' !important; display:none !important; margin:0 !important;}
#segelcu img,#segelcu svg{display:block; max-width:100%;}
#segelcu button{background:none; border:0; font:inherit; color:inherit; cursor:pointer;}

#segelcu .cu_sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}
/* Foco: el mismo anillo que el resto del catálogo (`fases-economia-circular-2026`), sin añadidos.
   Decisión del usuario: nos ceñimos a lo que hay, no inventamos nada que Figma no dibuje.
   Consecuencia conocida: sobre el panel verde y el sky el azul se queda en 2,40:1 y 2,84:1, por
   debajo del 3:1 de WCAG 1.4.11. Sólo afecta al borde inferior del anillo de la pestaña activa,
   que es la única parte que cae sobre el panel; el resto cae sobre blanco (4,52:1). */
#segelcu :focus-visible{outline:2px solid #007ACB; outline-offset:2px;}

/* ===== Estructura =====
   Un solo punto de cambio de layout, a 565 (T09). No a 520 como la pieza 2: en 565 la caja de la
   secuencia mide justo 517, su ancho de diseño. Por debajo, las cuatro llamadas —que van fijadas en
   % sobre una ilustración de proporción fija— se estrecharían, el texto envolvería más y chocaría
   con los conectores. Así el composición de escritorio sólo aparece cuando cabe exacta. */
#segelcu .cu_in{display:flex; flex-direction:column; gap:24px; padding:24px 16px;}
@container cu (min-width: 565px){ #segelcu .cu_in{padding:24px;} }

/* ===== Tipografía ===== */
#segelcu .cu_title{display:flex; flex-direction:column; gap:16px;}
#segelcu .cu_h1{                                    /* Título negrita infografía 32/36 */
  font-family:'IberPangea',Arial,sans-serif; font-weight:600;
  font-size:32px; line-height:36px; color:var(--cu-green1) !important;
}                                                   /* !important: el theme pinta los h2/h3 con #427314 en móvil */
#segelcu .cu_h1 span{font-weight:400;}              /* los dos puntos y «claves básicas», en Regular */
#segelcu .cu_lead{font-size:18px; line-height:24px; color:var(--cu-forest);}
#segelcu .cu_lead b{font-weight:700;}
#segelcu .cu_h2{                                    /* Subtítulo infografía 24/28 */
  font-family:'IberPangea',Arial,sans-serif; font-weight:400;
  font-size:24px; line-height:28px; color:var(--cu-green1) !important;
}
#segelcu .cu_h2 b{font-weight:600;}
#segelcu .cu_p{font-size:16px; line-height:20px; color:var(--cu-sand7);}
#segelcu .cu_p b{font-weight:700;}

/* ==========================================================================
   B2 · Secuencia del cuadro eléctrico
   Figma 21342:3388 / 21342:3758 (565) · 21271:2522 / 21280:6728 (290)
   ========================================================================== */
#segelcu .cu_sec{display:flex; flex-direction:column; gap:16px;}

/* La caja beige, los conectores y sus puntos de anclaje van DENTRO del SVG (viewBox 517 × 653,954).
   Escalándolo al ancho del contenedor, los anclajes escalan con él, así que las llamadas colocadas
   en % caen siempre sobre su conector sin recalcular nada: ni overlay, ni ResizeObserver. */
#segelcu .cu_seq{position:relative; display:flex; flex-direction:column; gap:16px;}
#segelcu .cu_seq_in{display:flex; flex-direction:column; gap:16px;}

/* La ilustración SOBRESALE de la caja por los lados, como en Figma: el contenedor `89` mide 537 en un
   lienzo de 517 y arranca en x −9, así que asoma **9 por la izquierda y 11 por la derecha** (en 290,
   ~6 por los cuatro lados). El `viewBox` de los dos SVG se ensanchó para no recortarlo.
   Para que ese desbordamiento NO altere la geometría, la imagen va **absoluta** y el alto de la caja
   lo fija `aspect-ratio` con el lienzo exacto: así `.cu_seq_art` sigue midiendo el lienzo y los
   conectores y llamadas colocados en % siguen cayendo donde deben. */
/* `pointer-events:none` porque la ilustración es DECORATIVA y su caja desborda el bloque por arriba y
   por abajo (no dibuja nada ahí, pero interceptaba los clics de las pestañas y la selección del texto
   de encima). El `aria-hidden` ya la saca del árbol de accesibilidad; esto la saca del ratón. */
#segelcu .cu_seq_art{position:relative; width:100%; aspect-ratio:258 / 174; pointer-events:none;}
/* `max-width:none` a propósito: el blindaje pone `max-width:100%` a todas las imágenes y aquí capaba
   la ilustración al ancho de la caja, con lo que asomaba sólo por la izquierda. */
#segelcu .cu_seq_art img,#segelcu .cu_seq_art svg{position:absolute; height:auto; max-width:none;}
/* 269,92 / 258 = 104,620155 %  ·  6 / 258 = 2,325581 %  ·  6 / 174 = 3,448276 % */
#segelcu .cu_v290{left:-2.325581%; top:-3.448276%; width:104.620155%;}
/* 537 / 517 = 103,868472 %  ·  9 / 517 = 1,740812 %  ·  sin desborde vertical */
#segelcu .cu_v565{left:-1.740812%; top:0; width:103.868472%;}
#segelcu .cu_v565{display:none;}                    /* la de escritorio, con las 4 llamadas */

/* Conector de 290 · un solo trazo vertical de 1px hasta el borde superior de la tarjeta.
   Es una forma rellena en Figma (`fill:#00402A`), no un `stroke`. Las coordenadas van en % del
   lienzo de 258 × 174 para que sigan al anclaje cuando la ilustración escala. `bottom:-16px`
   cubre el hueco entre la ilustración y la tarjeta (Figma: la tarjeta empieza en y=190 = 174+16). */
#segelcu .cu_conn{
  position:absolute; width:1px; bottom:-16px; background:var(--cu-forest); display:none;
}
/* La bolita del anclaje. En 565 va dentro del SVG: círculo de r 2,667 en `#00402A` al final del
   trazo, medido sobre `seq-conn-1`. En 290 Figma NO la dibuja —`Vector 13` es un vector de ancho 0
   en los cuatro pasos— pero el usuario la pidió para que los dos tamaños se lean igual (D24).
   El diámetro se traslada tal cual porque el trazo también mide 1px en los dos tamaños. */
#segelcu .cu_conn::before{
  content:''; position:absolute; left:50%; top:0;
  width:5.333px; height:5.333px; border-radius:100px;
  background:var(--cu-forest); transform:translate(-50%,-50%);
}
#segelcu .cu_conn--1{left:22.48062%; top:80.45977%;}   /* ICP            · x 58 · y 140 */
#segelcu .cu_conn--2{left:50.77519%; top:57.47126%;}   /* ID             · x 131 · y 100 */
#segelcu .cu_conn--3{left:35.27132%; top:70.11494%;}   /* Magnetotérmico · x 91 · y 122 */
#segelcu .cu_conn--4{left:41.08527%; top:67.24138%;}   /* SPD            · x 106 · y 117 */

/* Las cuatro llamadas. Mismo marcado en los dos tamaños: en 565 se fijan sobre la ilustración y en
   290 se apilan en la MISMA celda de grid (D07), así el bloque mide lo que la más alta y no salta
   al navegar. Los % de escritorio son del lienzo de 517 × 653,954. */
#segelcu .cu_calls{display:grid;}
#segelcu .cu_call{
  grid-area:1 / 1;
  display:flex; flex-direction:column; gap:8px; justify-content:center;
  padding:16px; border-radius:15px; background:var(--cu-white); min-width:0;
  /* En 290 la tarjeta SÍ lleva trazo (en 565 no). `outline` con offset negativo para no robar los
     2px de ancho al contenido: 258 − 32 = 226. */
  outline:1px solid var(--cu-sand3); outline-offset:-1px;
}
/* La fila del encabezado mide 40 en 290, no los 32 del badge: en Figma el botón numerado va
   centrado dentro de una fila de 40 (`y=4`) en los cuatro pasos. De ahí salen los altos de
   tarjeta 140 y 180. En 565 no aplica: allí la fila la marca el título (20 o 40 según líneas). */
#segelcu .cu_call_h{display:flex; gap:16px; align-items:center; min-height:40px;}
#segelcu .cu_num{                                   /* índice numerado, sólo en 290 */
  flex:0 0 auto; width:32px; height:32px; border-radius:100px;
  background:var(--cu-green1); color:var(--cu-white);
  display:flex; align-items:center; justify-content:center;
  font-family:'IberPangea',Arial,sans-serif; font-weight:600;
  font-size:16px; line-height:1.071; text-align:center;
}
#segelcu .cu_call_t{flex:1 1 0; min-width:0; font-size:16px; line-height:20px; color:var(--cu-green1);}
#segelcu .cu_call_t b{font-weight:700;}
#segelcu .cu_call_p{font-size:16px; line-height:20px; color:var(--cu-sand7);}
#segelcu .cu_call_p b{font-weight:700;}

/* ==========================================================================
   B3 · Caja de pestañas ID / SPD
   Figma 21271:1416 (los dos estados en 565) · 21249:10797 y 21250:13322 (290)
   Estados del botón medidos en design/boton-pestana/medidas.md
   ========================================================================== */
#segelcu .cu_tabs{
  /* Cada pestaña conserva SU familia también cuando está inactiva; lo que cambia con la selección
     es el panel. De ahí que el color de trazo vaya por botón y el del panel por `data-fam`. */
  --panel:var(--cu-green4);
}
#segelcu .cu_tabs[data-fam="sky"]{--panel:var(--cu-sky4);}

/* Alineados ARRIBA, no abajo: en Figma los dos botones están en `y=0` dentro de la barra, así que
   el inactivo —15,38 más bajo que el activo— deja ese hueco **debajo** y no llega a tocar el panel.
   Con `flex-end` se pegaba al panel y parecía una segunda pestaña activa. */
#segelcu .cu_tabs_bar{display:flex; gap:16px; align-items:flex-start;}
#segelcu .cu_tab{
  flex:1 1 0; min-width:0;
  display:flex; gap:16px; align-items:center; justify-content:center;
  overflow:clip; border-radius:15px;
  /* `padding` 7/15 y no 8/16: el trazo de Figma se dibuja DENTRO del frame, y como aquí el alto es
     automático el `border` de CSS sumaría 2px (94,09 → 96,08). Con 7 + 1 de borde el contenido
     empieza igualmente a 8 del borde y las medidas cuadran. */
  padding:7px 15px;                                 /* reposo y hover */
  background:var(--cu-white); border:1px solid var(--tab-line);
  color:var(--cu-forest);                           /* el texto es forest en los tres estados */
  font-family:'IberPangea',Arial,sans-serif; font-weight:500;
  font-size:18px; line-height:22px; text-align:left;
  transition:background-color 220ms ease;
}
#segelcu .cu_tab--id {--tab-line:var(--cu-green); --tab-bg:var(--cu-green4);}
#segelcu .cu_tab--spd{--tab-line:var(--cu-sky);   --tab-bg:var(--cu-sky4);}
@media (hover:hover){
  #segelcu .cu_tab[aria-selected="false"]:hover{background:var(--tab-bg);}
}
/* Activo: mismo fondo que el panel, SIN borde y SIN radio inferior, y 16 más de `padding-bottom`.
   Así se pega al panel sin junta visible: no hace falta `margin` negativo ni `z-index`. */
#segelcu .cu_tab[aria-selected="true"]{
  background:var(--tab-bg); border-color:transparent;
  padding:7px 15px 23px; border-radius:15px 15px 0 0;
}
/* El alto lo marca el icono, con el tamaño exacto de Figma: 77,47 el del ID y 78,09 el del SPD.
   De ahí salen los 109,47 del activo (8 + 77,47 + 24) y los 94,09 del inactivo (8 + 78,09 + 8). */
#segelcu .cu_tab_ico{flex:0 0 auto; width:auto;}
#segelcu .cu_tab--id  .cu_tab_ico{height:77.47px;}
#segelcu .cu_tab--spd .cu_tab_ico{height:78.09px;}

/* Los dos paneles se APILAN en la misma celda de grid (el patrón D07 que ya usa el slider de esta
   pieza), así que la fila mide siempre lo que el panel más alto y el alto NO CAMBIA al cambiar de
   pestaña. Sin esto, el panel del ID es 20-40px más alto que el del SPD (varía con el ancho y con el
   idioma): al pasar a SPD la pieza encogía, todo lo de debajo subía y, al final del documento, el
   navegador recortaba el scroll. Se autoajusta, sin px clavados. */
#segelcu .cu_panels{display:grid;}
#segelcu .cu_panel{
  grid-area:1 / 1;
  display:flex; flex-direction:column;
  background:var(--panel); padding:16px;
  border-radius:0 15px 15px 15px;                   /* ID activo: esquina superior izquierda en escuadra */
}
/* El sobrante del apilado se lo come la ÚLTIMA tarjeta blanca, en vez de dejarlo como un hueco de
   color al final del panel más corto. El sobrante cambia con el ancho y con el idioma, y también
   cambia cuál de los dos paneles es el corto: así se resuelve solo en los dos. */
#segelcu .cu_qs{flex:1 1 auto;}
#segelcu .cu_q:last-child{flex:1 1 auto;}
/* El inactivo se oculta con `visibility`, NO con el atributo `hidden`: `hidden` es `display:none`,
   lo saca del grid y el alto volvería a saltar. `visibility:hidden` lo saca también del árbol de
   accesibilidad —el lector de pantalla sigue leyendo un solo juego de preguntas— y deja de ser
   enfocable; el JS añade además `inert` como cinturón. */
#segelcu .cu_panel:not([data-activa="1"]){visibility:hidden;}
#segelcu .cu_tabs[data-fam="sky"] .cu_panel{
  border-radius:15px 0 15px 15px;                   /* SPD activo: se invierte */
}
#segelcu .cu_panel_t{                               /* nombre del interruptor, sólo visible en 290 */
  font-family:'IberPangea',Arial,sans-serif; font-weight:500;
  font-size:18px; line-height:22px; color:var(--cu-forest);
  margin-bottom:16px;
}
#segelcu .cu_qs{display:flex; flex-direction:column; gap:16px;}
#segelcu .cu_q{
  background:var(--cu-white); border-radius:15px; padding:16px;
  display:flex; flex-direction:column; gap:8px;
}
#segelcu .cu_q_t{                                   /* verde en las DOS familias, no cambia a sky */
  font-family:'IberPangea',Arial,sans-serif; font-weight:500;
  font-size:18px; line-height:22px; color:var(--cu-green1) !important;
}
#segelcu .cu_q_p{font-size:16px; line-height:20px; color:var(--cu-sand7);}
#segelcu .cu_q_p b{font-weight:700;}

/* En 290 la etiqueta desaparece de la vista pero SIGUE EN EL DOM: así el botón tiene el mismo
   nombre accesible en los dos anchos y no hay que mantener un `aria-label` por idioma. */
#segelcu .cu_tab_lbl{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}
@container cu (min-width: 565px){
  #segelcu .cu_tab_lbl{
    position:static; width:auto; height:auto; overflow:visible;
    clip-path:none; white-space:normal;
  }
  /* Tope a la medida de diseño del rótulo, por lo mismo que en las tarjetas de riesgo: la pestaña
     crece con el ancho (458 a 980) y el texto se juntaría en una línea, cuando Figma lo dibuja a
     DOS en el ID (44 de alto) y a TRES en el SPD (66). Los valores son el hueco disponible a 565:
     218,5 de contenido − 16 de gap − el ancho de cada icono (47,67 y 42,5). */
  #segelcu .cu_tab--id  .cu_tab_lbl{max-width:154.83px;}
  #segelcu .cu_tab--spd .cu_tab_lbl{max-width:160px;}
  #segelcu .cu_panel_t{display:none;}               /* en 565 el nombre ya está en la pestaña */
}

/* ==========================================================================
   ANIMACIÓN de la secuencia (A-001 a A-004)
   TODO cuelga de `.cu--anim`, que el JS sólo añade si de verdad vamos a animar: sin JS y con
   `prefers-reduced-motion` el HTML por defecto YA es el estado final, así que no hay nada que
   deshacer. Ver plan.md y animations.md.
   ========================================================================== */

/* Mientras se descarga el SVG inline la ilustración se oculta, para no ver el cuadro abierto y que
   luego dé un salto al estado cerrado. El `<img>` del estado final sigue ahí si el fetch falla. */
#segelcu.cu--anim .cu_seq_art{visibility:hidden;}
#segelcu.cu--anim.cu--listo .cu_seq_art{visibility:visible;}

/* Estado inicial: cuadro cerrado y nada más. */
#segelcu.cu--anim #seq-puerta-cerrada{display:block;}
#segelcu.cu--anim #seq-puerta-abierta,
#segelcu.cu--anim #seq-escalera,
#segelcu.cu--anim #seq-operarios{opacity:0;}
#segelcu.cu--anim .cu_conn,
#segelcu.cu--anim [id^="seq-conn-"]{opacity:0;}

/* A-001 · la puerta se abre (700ms). Cross-fade de capa: entre los dos estados la puerta está
   REDIBUJADA, no transformada, así que un giro real no sale de estos assets (D04). */
/* Los dos tiempos están DESINCRONIZADOS a propósito: con un cross-fade simétrico se ven las dos
   puertas al 50% a la vez —y son dibujos distintos en sitios distintos, así que queda sucio—. Con la
   cerrada saliendo antes y la abierta entrando con retardo, en cada instante domina una sola.
   Los tiempos se alargaron en la ronda R1 (C2: la apertura se sentía brusca) manteniendo la
   proporción entre los dos: 160/300+120 → 260/520+180. */
#segelcu.cu--play #seq-puerta-cerrada{opacity:0; transition:opacity 260ms ease-out;}
#segelcu.cu--play #seq-puerta-abierta{opacity:1; transition:opacity 520ms cubic-bezier(.22,.61,.36,1) 180ms;}

/* A-002 · escalera y operarios aparecen, SIN desplazarse: en Figma tienen la misma posición en los
   dos estados, así que moverlos sería inventar. Entran cuando la puerta ya casi ha acabado. */
#segelcu.cu--play #seq-escalera,
#segelcu.cu--play #seq-operarios{opacity:1; transition:opacity 520ms ease-out 560ms;}

/* A-003 · cada conector se DIBUJA desde su anclaje y después entra su tarjeta con fade puro (D08).
   Los de la fila de arriba crecen desde abajo (el anclaje queda bajo la tarjeta) y los de abajo
   desde arriba. `transform-box: fill-box` es obligatorio: sin él el origen es el del lienzo. */
#segelcu.cu--anim [id^="seq-conn-"]{transform:scaleY(0); transform-box:fill-box;}
#segelcu.cu--anim #seq-conn-1,
#segelcu.cu--anim #seq-conn-2{transform-origin:bottom;}
#segelcu.cu--anim #seq-conn-3,
#segelcu.cu--anim #seq-conn-4{transform-origin:top;}
#segelcu.cu--play [id^="seq-conn-"]{
  opacity:1; transform:scaleY(1);
  transition:transform 320ms ease-out, opacity 1ms;
}
#segelcu.cu--play #seq-conn-1{transition-delay:1000ms;}
#segelcu.cu--play #seq-conn-2{transition-delay:1160ms;}
#segelcu.cu--play #seq-conn-3{transition-delay:1320ms;}
#segelcu.cu--play #seq-conn-4{transition-delay:1480ms;}

/* Las llamadas entran con fade puro (D08). El retardo viaja en una custom property y no en
   `transition-delay`: así no pelea con el `transition` de la regla que lo aplica, que es más
   específica. Y la puerta de «todavía no» necesita ganar a las reglas del slider (1-4-0) y del
   @container (1-3-0), de ahí las tres clases de estado. */
#segelcu .cu_call{--d:1200ms;}                      /* en 290 sólo hay una visible */
#segelcu.cu--js.cu--anim:not(.cu--play) .cu_calls .cu_call{opacity:0;}
#segelcu.cu--js.cu--anim.cu--play .cu_calls .cu_call{transition:opacity 360ms ease-out var(--d);}

/* A-004 · en 290 sólo hay una llamada visible y un conector; el resto lo gobierna el slider. */
#segelcu.cu--play .cu_conn[data-activa="1"]{opacity:1; transition:opacity 320ms ease-out 1000ms;}

/* Cinturón: con reduced-motion nada se mueve. `::before` incluido — en la 008 falta y ahí viven
   conectores y viñetas. El estado final ya está en el HTML, así que no hace falta deshacer nada. */
@media (prefers-reduced-motion: reduce){
  #segelcu *,#segelcu *::before,#segelcu *::after{
    animation:none !important; transition:none !important;
  }
}

/* ===== Pie del slider de 290 — mismo bloque que la pieza 2 ===== */
#segelcu .cu_sl{--sl-page:0;}
#segelcu .cu_sl_foot{display:flex; align-items:center; justify-content:space-between; gap:16px;}
#segelcu .cu_sl_count{
  display:flex; align-items:center; justify-content:center;
  min-height:32px; padding:5px 16px; border-radius:24px;
  border:1px solid var(--cu-forest);
  font-family:'IberPangea Text',Arial,sans-serif; font-style:italic;
  font-size:14px; line-height:18px; color:var(--cu-forest); white-space:nowrap;
}
#segelcu .cu_sl_cur{font-style:italic; color:var(--cu-green1);}
#segelcu .cu_sl_nav{display:flex; gap:16px;}
#segelcu .cu_sl_btn{
  width:32px; height:32px; border-radius:100px; overflow:hidden;
  border:1px solid var(--cu-forest); background:transparent; color:var(--cu-forest);
  display:flex; align-items:center; justify-content:center;
  transition:background-color 220ms ease, color 220ms ease;
}
#segelcu .cu_sl_btn svg{width:14.5455px; height:10.7112px; display:block;}
#segelcu .cu_sl_prev svg{transform:scaleX(-1);}
#segelcu .cu_sl_btn[aria-disabled="true"]{opacity:.5; cursor:default;}
@media (hover:hover){
  #segelcu .cu_sl_btn:not([aria-disabled="true"]):hover{
    background:var(--cu-forest); color:var(--cu-white);
  }
}
/* Sin JS se ven las cuatro llamadas apiladas y el pie no aparece: no navega nada. */
#segelcu .cu_sl_foot{display:none;}
#segelcu.cu--js .cu_sl_foot{display:flex;}
#segelcu.cu--js .cu_calls .cu_call{opacity:0; visibility:hidden;}
#segelcu.cu--js .cu_calls .cu_call[data-activa="1"]{opacity:1; visibility:visible;}
#segelcu.cu--js .cu_conn[data-activa="1"]{display:block;}

@container cu (min-width: 565px){
  #segelcu .cu_v565{display:block;}
  #segelcu .cu_v290{display:none;}
  /* En 565 no hay slider: se ven las cuatro llamadas y los conectores van dentro del SVG.
     El selector del conector activo se repite con la MISMA forma que arriba (1-3-0) porque si no,
     `#segelcu .cu_conn` (1-1-0) no le gana y quedaba una línea colgando bajo la caja beige. */
  #segelcu .cu_conn,#segelcu.cu--js .cu_conn[data-activa="1"],
  #segelcu .cu_sl_foot,#segelcu.cu--js .cu_sl_foot{display:none;}
  /* Sin flex ni gap: las llamadas van absolutas (alto 0) y el pie está oculto, así que el `gap`
     de la columna metía 16px fantasma entre la ilustración y ellas.
     TOPE DE ANCHO (C4): sin él, a 980 el arte llegaba a 932 × 1179 (×1,803) y la pieza se comía la
     pantalla. `width:100%` explícito y no sólo `max-width`: `.cu_seq` es flex-item de una columna y
     un margen auto en el eje transversal DESACTIVA el `stretch`, con lo que el bloque caería a
     `fit-content` y el `max-width` no mandaría nada.
     `container-type` para poder atar los altos de tarjeta al ancho del propio bloque (ver abajo). */
  /* El CREMA va a ANCHO COMPLETO y lo que se topa es la CAJA, centrada dentro: así no queda un
     blancal a los lados a 980, y las llamadas y conectores —que se colocan en % de la caja— quedan
     limitados con ella sin readaptar nada. El crema que trae el SVG dentro (`seq-fondo`, el lienzo de
     517) queda por debajo, del mismo color, así que no se ve la costura.
     La caja topa en **746** (D20). El alto de las tarjetas NO depende de eso: se anclan por el borde
     que toca su conector, así que el tope se puede mover sin que engorde nada. Ver D30. */
  #segelcu .cu_seq{
    display:block; width:100%;
    background:var(--cu-sand); border-radius:15px;
  }
  #segelcu .cu_seq_in{
    display:block; position:relative;
    width:100%; max-width:746px; margin-inline:auto;
    /* EL ALTO NO ES EL LIENZO ESCALADO, es lo que de verdad hace falta:
         12,0928 (margen) + 140 (fila 1) + banda de conectores + 160 (fila 2) + 16 (margen)
       Lo ÚNICO que escala es la banda, porque los conectores viven dentro del SVG. Las dos filas son
       las de Figma y no escalan, así que sus franjas tampoco: antes iban dentro del lienzo escalado y
       a 746 dejaban ~62 px de crema muerto arriba y ~71 abajo, que crecían con el ancho. Ver D31. */
    /* Las dos franjas: margen + alto de fila. Figma da 12,0928 + 140 y 160 + 16; el usuario las
       igualó a 20 de margen arriba y abajo porque en escritorio queda mejor (D32).
       ⚠️ VAN EN VARIABLES Y NO SE TOCAN SUELTAS: las tarjetas se anclan a esa MISMA distancia del
       canto (abajo), así que si una de las dos cambia sin la otra el conector se despega exactamente
       esa diferencia. Cambiando la variable, todo sigue cuadrando. */
    --cu-franja1:160px;    /* margen superior + 140 de la fila de arriba */
    --cu-franja2:180px;    /* 160 de la fila de abajo + margen inferior */
    padding-block:var(--cu-franja1) var(--cu-franja2);
  }
  /* La BANDA: del extremo de un conector al del otro (152,0928 → 478 del lienzo). */
  #segelcu .cu_seq_art{aspect-ratio:517 / 325.907;}
  /* La ilustración se cuelga de la banda: su lienzo empieza 152,0928 (escalados) por encima del
     extremo superior del conector → 152,0928 / 325,907 = 46,6678 % del alto de la banda. */
  #segelcu .cu_v565{top:-46.6678%;}
  #segelcu .cu_calls{display:block;}
  #segelcu .cu_call{position:absolute; outline:none;}
  #segelcu .cu_call_h{min-height:0;}                /* en 565 la fila la marca el título */
  #segelcu.cu--js .cu_calls .cu_call{opacity:1; visibility:visible;}
  /* escalonado de la entrada, sólo en 565: en 290 se ve una sola llamada a la vez */
  #segelcu .cu_call--1{--d:1200ms;}
  #segelcu .cu_call--2{--d:1360ms;}
  #segelcu .cu_call--3{--d:1520ms;}
  #segelcu .cu_call--4{--d:1680ms;}
  /* `min-height` reproduce el estirado de la fila en Figma: las dos tarjetas de abajo comparten
     alto (160) porque la del SPD lleva el título a dos líneas, y la del magnetotérmico se estira y
     centra su contenido. Es ritmo vertical de diseño, no un px clonado: si EN o PT necesitan más,
     crecen.
     CADA TARJETA SE ANCLA POR EL BORDE QUE TOCA SU CONECTOR (C1): la fila de arriba por `bottom` y la
     de abajo por `top`. Los conectores viven dentro del SVG y escalan con él, así que fijando ESE
     borde el conector clava a cualquier escala **sin tocar el alto**. Antes la fila de arriba iba
     anclada por `top` y entonces el único modo de que se encontraran era estirar el alto: a 746 las
     tarjetas engordaban de 140/160 a 202/230 y la pieza crecía en vertical justo lo que se ahorraba
     topando la ilustración. Lo que escala es el ancho y la posición; si el texto pide más, la tarjeta
     crece hacia AFUERA —arriba la de arriba, abajo la de abajo— sin despegarse del conector.
     Con el alto del bloque ya ajustado (ver `.cu_seq_in`), ese borde queda a distancia FIJA del canto,
     y es **la misma franja** que el `padding` del bloque: por eso van los dos con la misma variable.
     Si se cambian sueltos, el conector se despega exactamente esa diferencia. De aquí sale además el
     hueco 0 en vez del 0,9 que trae el diseño, que dibuja la fila de abajo en y=477,0928 y los
     conectores llegando a 478. */
  #segelcu .cu_call--1{left:2.70793%;  bottom:calc(100% - var(--cu-franja1)); width:49.70986%; min-height:140px;}
  #segelcu .cu_call--2{left:53.96518%; bottom:calc(100% - var(--cu-franja1)); width:43.52031%; min-height:140px;}
  #segelcu .cu_call--3{left:3.09478%;  top:calc(100% - var(--cu-franja2));         width:53.57834%; min-height:160px;}
  #segelcu .cu_call--4{left:58.22050%; top:calc(100% - var(--cu-franja2));         width:39.26499%; min-height:160px;}
  #segelcu .cu_num{display:none;}                   /* el índice numerado sólo existe en 290 */
}