/* ===== La fuente, INCRUSTADA ===============================================================
   Sin esto la pieza cae a una fuente de respaldo MAS ANCHA que descuadra el wrapping y, con
   el, todas las medidas. No es cosmetico: es la diferencia entre medir la pieza y medir otra. */
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/como-funciona-la-electricidad/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/como-funciona-la-electricidad/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/como-funciona-la-electricidad/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/como-funciona-la-electricidad/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/como-funciona-la-electricidad/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/como-funciona-la-electricidad/fonts/IberPangeaText-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}

/* ¿Cómo funciona la electricidad? — estático de iberdrola.com.
 *
 * Infografía con tres desplegables en ACORDEÓN: sólo uno abierto a la vez (D-01). Al abrir uno,
 * la ilustración general da paso, con un zoom, a la individual de ese concepto. Las llamadas de
 * encima del dibujo son la otra puerta al mismo sitio.
 *
 * Las cifras salen de specs/027-como-funciona-la-electricidad/design/. No se tocan a ojo.
 * Dos tamaños: 565 y 290. No hay 980.
 */

/* ===== Blindaje frente al theme de Liferay =================================================
   La pieza vive dentro del DOM del portal y 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. */
#howelectricity {
    font-family: 'IberPangea', sans-serif;
    font-size: 16px;
    line-height: 1.25;
    color: #3A3735;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    white-space: normal;
    text-decoration: none;
    font-style: normal;
}

#howelectricity * {
    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;
}

/* Los desplegables van en un <ul>: el theme les mete su propia viñeta. El `display:none` del
   pseudo importa — con sólo `content:''` el pseudo se crea igual y, si el `li` es flex, cuenta
   como un item más y mete un hueco fantasma (pasó en la 013). */
#howelectricity ul,
#howelectricity li { list-style: none; }
#howelectricity li::marker { content: none; }
#howelectricity li::before {
    content: '' !important;
    display: none !important;
    margin: 0 !important;
}

/* `#scope *` NO alcanza a los pseudo-elementos: se blindan aparte, y sin `content`, para no crear
   pseudos donde no los hay. El theme les mete `margin-left` negativo. */
#howelectricity *::before,
#howelectricity *::after {
    margin: 0;
    padding: 0;
    text-indent: 0;
    letter-spacing: inherit;
    text-transform: inherit;
}

/* Los botones son lo que más pisa el theme: fondo, borde, tipografía y cursor. Se declara todo. */
#howelectricity button {
    background: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    text-align: inherit;
}

/* `display` NO se hereda, así que `inherit` no sirve: se declara elemento a elemento y con
   `!important`. Ninguno de éstos cambia entre tramos, así que no hay que reafirmarlos dentro de
   la @media (un `!important` fuera de una @media se come el responsive). */
/* Y con `display` NO basta: el theme ataca los `div,ul` con
       flex-direction:column-reverse; gap:0; align-items:flex-end; justify-content:flex-end
   así que todo lo que se apoye en flex tiene que declarar TAMBIÉN dirección, hueco y alineación.
   Sin esto los tres desplegables se ponían en fila y se encogían a 212 px. */
#howelectricity,
#howelectricity .he_cabecera,
#howelectricity .he_lista,
#howelectricity .he_panel,
#howelectricity .he_fila {
    flex-direction: column !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
}
/* La ALINEACION va aparte y con el valor que cada uno tenia, porque `align-items` no es un detalle
   cosmetico: decide si los hijos se estiran o se encogen a su contenido. Ponerlo a `flex-start` en
   los cinco de golpe —para cegar el `flex-end` del theme— quito el `stretch` por defecto a la lista
   y al panel, y los desplegables y las celdas se encogieron al ancho de su texto. La lista quedo en
   escalera y lo tuvo que cazar el cliente. `stretch` tambien es una declaracion: ciega igual al
   theme, pero conserva el comportamiento. */
#howelectricity,
#howelectricity .he_cabecera { align-items: flex-start !important; }
#howelectricity .he_lista,
#howelectricity .he_panel,
#howelectricity .he_fila { align-items: stretch !important; }
#howelectricity .he_cab,
#howelectricity .he_llamada,
#howelectricity .he_cab_ico {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

#howelectricity { display: flex !important; }
#howelectricity .he_titulo,
#howelectricity .he_subtitulo { display: block !important; }
#howelectricity .he_escena { display: block !important; }
#howelectricity .he_dibujos { display: block !important; }
#howelectricity .he_dibujo { display: block !important; }
#howelectricity .he_lista { display: flex !important; }
#howelectricity .he_item { display: block !important; }
#howelectricity .he_cab { display: flex !important; }
#howelectricity .he_llamada { display: flex !important; }
#howelectricity .he_panel { display: flex !important; }
/* La fila NO es flex en el tramo estrecho: alli se DISUELVE (`display:contents`) para que sus
   seis hijos pasen a ser hijos del panel y puedan intercalarse con `order`. Va aqui sin
   `!important` fuera de la @media a proposito: un `!important` suelto se comeria el tramo ancho,
   que es justo el fallo de la 010. El valor de cada tramo se declara abajo. */
#howelectricity .he_fila { display: contents !important; }
#howelectricity .he_celda { display: block !important; }
/* La celda es flex para centrar su contenido, y por eso su texto va en UN SOLO <span>: con el
   texto suelto, el <b> del tramo destacado se convierte en otro item y el párrafo se despedaza. */
#howelectricity .he_dato { display: flex !important; }
#howelectricity .he_dato > span { display: block !important; }
#howelectricity [hidden] { display: none !important; }

/* LA RAIZ VA EN LA LISTA. `#howelectricity *` NO se alcanza a si mismo, asi que el marco se
   quedaba en `content-box` y su `max-width` medía solo la caja de contenido: la pieza salia 50 px
   mas ancha de lo que decia (565 -> 615, 980 -> 1030) y el dibujo, que va en % del contenido, 48 px
   mas grande que en Figma. Estaba asi desde el principio y no lo cazo nadie porque la asercion
   miraba el `max-width` declarado, no el ancho que de verdad ocupa. */
#howelectricity,
#howelectricity *,
#howelectricity *::before,
#howelectricity *::after { box-sizing: border-box; }

/* ===== El marco ===========================================================================
   Valores del inspector de Figma, idénticos en 565 y 290. El fondo es BLANCO PURO: otras piezas
   nuestras usan Sand 1 (#FFFEFF) y aquí sería un error. */
#howelectricity {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px !important;
    /* El marco llega a 980 como el resto de infografías, para ajustarse al ancho de la columna
       donde se incrusta. El DIBUJO no crece con él: se topa en su ancho de diseño y se centra
       (ver `.he_escena` en la @media). Elegido por el usuario. */
    max-width: 980px;
    /* El relleno NO es el mismo en los dos tamaños: 24/16 en el estrecho y 32/24 en el ancho.
       Ponerlo a 32/24 en los dos estrangulaba la etiqueta «Resistencia Ω» a 290 y la partía en
       dos líneas. Sale de la geometría de cada frame: `Frame 105` arranca en x=16 y=24 a 290,
       y en x=24 y=32 a 565. */
    padding: 24px 16px;
    margin: 0 auto;
    border-radius: 15px;
    border: 1px solid #D8CFC7;
    background: #FFF;
    overflow: hidden;
}

/* ===== Cabecera ===========================================================================
   La tipografía CAMBIA entre tramos: Figma declara dos escalas, Desktop/ y Mobile/. Aquí va la
   estrecha, que es la base, y la @media de abajo pone la ancha. */
#howelectricity .he_titulo {
    /* En móvil el theme pinta h1/h2/h3 con `color:#427314 !important`. Sin este !important el
       título se ve bien en una plantilla y verde pistacho en otra. */
    color: #007F33 !important;
    font-family: 'IberPangea', sans-serif;
    font-weight: normal;
    font-size: 30px;
    line-height: 34px;
    width: 100%;
}

/* El tramo destacado del título va AL FINAL («…la electricidad?»), no al principio. */
#howelectricity .he_titulo strong {
    font-family: 'IberPangea', sans-serif;
    font-weight: 600;
}

/* El hueco titulo<->subtitulo es del GRUPO, no del marco: el `gap:32` del marco separa los tres
   bloques (cabecera, escena, lista). Sin este grupo los dos huecos se sumaban y daban 48. */
#howelectricity .he_cabecera {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px !important;
    width: 100%;
}

#howelectricity .he_subtitulo {
    color: #3A3735;
    font-family: 'IberPangea', sans-serif;
    font-weight: normal;
    font-size: 21px;
    line-height: 24px;
    width: 100%;
}

/* Los DOS saltos del subtítulo. Figma los pone en sitios distintos en cada tramo, así que no vale
   uno solo que se oculte: hay dos, y cada uno se enseña en el suyo.
       565:  «…resistencia: las tres fuerzas ↵ que hacen funcionar…»
       290:  «…resistencia: ↵ las tres fuerzas que hacen funcionar…»
   Los dos estados se DECLARAN: un `display:none !important` suelto fuera de la @media se comería
   el responsive. */
#howelectricity .he_br--e { display: inline !important; }
#howelectricity .he_br--a { display: none !important; }

/* ===== La escena ========================================================================== */
/* La ESCENA es la caja que contiene el dibujo Y las llamadas, y es un pelo más grande que el
   dibujo: a 565 la píldora de Voltaje sobresale 7 px por la izquierda, que es justo la diferencia
   entre los 517 de la escena y los 509,9 del dibujo.
   Por eso el dibujo va posicionado DENTRO de la escena y no al revés: si la escena fuera el dibujo,
   la píldora de Voltaje se saldría o habría que recortarla. */
#howelectricity .he_escena {
    position: relative;
    width: 100%;
    aspect-ratio: 258 / 179;
}

#howelectricity .he_dibujos {
    /* El dibujo que sale escala a 1,6: se recorta AQUÍ, en su propia caja, para que se lea como
       que sale de cuadro. Recortarlo en la pieza entera taparía también las llamadas. */
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 2.450%;
    width: 100%;
    height: 97.316%;
}

/* Las cuatro ilustraciones, superpuestas en el mismo sitio: es lo que permite animar el paso de
   una a otra. Con una sola etiqueta cambiando de `src` no hay nada que animar y además parpadea.

   EL ZOOM (variante A, elegida por el usuario). Lo que lo hace significar algo no es la duración:
   es que **arranca en la plataforma de ese concepto**, no en el centro del dibujo. Así se lee como
   «me acerco a esto» y no como «cambia la imagen».
   Y el origen no está puesto a ojo: son las coordenadas de la **bolita de su conector**, que por
   definición cae sobre su plataforma. El zoom entra justo por donde el conector señalaba.

   El que entra viene del 0,55 y el que sale se va al 1,6, los dos hacia el mismo punto: si el que
   sale sólo se desvaneciera, el movimiento se leería como un fundido y no como un acercamiento. */
#howelectricity .he_dibujo {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.55);
    transform-origin: var(--he-org, 50% 50%);
    transition: opacity 450ms cubic-bezier(.22,.61,.36,1),
                transform 450ms cubic-bezier(.22,.61,.36,1);
}

#howelectricity .he_dibujo.is-visible { opacity: 1; transform: scale(1); }
#howelectricity .he_dibujo.is-saliendo { opacity: 0; transform: scale(1.6); }

/* SIN JS: el `hidden` del HTML deja sólo la general, y esta regla la enseña sin transición.
   Va atada a `:not([data-js])` —el marcador que pone el JS al arrancar— y no a «no tiene clases»:
   con eso último, en cuanto el JS quitaba el `hidden` se veían las cuatro a la vez. */
#howelectricity:not([data-js]) .he_dibujo:not([hidden]) { opacity: 1; transform: none; }

/* Origen del zoom = la bolita del conector de cada concepto. Tramo estrecho (escena 258 x 179). */
#howelectricity [data-dib="voltaje"]     { --he-org: 17.550% 63.993%; }
#howelectricity [data-dib="resistencia"] { --he-org: 64.541% 27.108%; }
#howelectricity [data-dib="corriente"]   { --he-org: 59.891% 63.608%; }
/* La general no hace zoom hacia ningún concepto: sale y entra desde su centro. */
#howelectricity [data-dib="general"]     { --he-org: 50% 50%; }

/* Quien pide menos movimiento no ve zoom: el dibujo cambia y ya. */
@media (prefers-reduced-motion: reduce) {
    #howelectricity .he_dibujo { transition: none; transform: none; }
    #howelectricity .he_dibujo.is-saliendo { transform: none; }
}

#howelectricity .he_dibujo svg,
#howelectricity .he_dibujo img {
    display: block !important;
    width: 100%;
    height: 100%;
}

/* ===== Los desplegables ==================================================================== */
#howelectricity .he_lista {
    gap: 8px !important;
    width: 100%;
}

#howelectricity .he_cab {
    width: 100%;
    align-items: center;
    /* Relleno ASIMÉTRICO a propósito: el botón redondo de la derecha ya trae su propio aire. */
    padding: 8px 8px 8px 16px;
    gap: 16px;
    border-radius: 15px;
    background: #007F33;
    color: #FFFEFF;
    font-family: 'IberPangea Text', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
}

#howelectricity .he_cab_ico {
    flex: 0 0 auto;
    display: flex !important;
    width: 33.6px;
    height: 33.6px;
}

#howelectricity .he_cab_ico .he_ico { width: 100%; height: 100%; }

#howelectricity .he_cab_et { flex: 1 1 auto; min-width: 0; }

/* El botón redondo. El `+` y la `✕` se dibujan con dos barras, así no hacen falta dos ficheros
   más y el giro de una a otra es animable. */
#howelectricity .he_cab_bot {
    flex: 0 0 auto;
    position: relative;
    display: block !important;
    width: 32px;
    height: 32px;
    border-radius: 20px;
    border: 1px solid transparent;
    background: #00402A;
}

#howelectricity .he_cab_bot::before,
#howelectricity .he_cab_bot::after {
    content: '' !important;
    display: block !important;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    color: #FFFEFF;
    transform: translate(-50%, -50%);
}

#howelectricity .he_cab_bot::after { transform: translate(-50%, -50%) rotate(90deg); }

/* HOVER: el botón INVIERTE — blanco con borde y glifo verdes. Ojo, es el patrón CONTRARIO al de
   la 023, donde el hover oscurecía. */
@media (hover: hover) {
    #howelectricity .he_cab:hover .he_cab_bot {
        background: #FFFEFF;
        border-color: #007F33;
    }
    #howelectricity .he_cab:hover .he_cab_bot::before,
    #howelectricity .he_cab:hover .he_cab_bot::after { color: #007F33; }
}

/* ABIERTO: la ✕ es el `+` girado 45°, y el círculo pasa a blanco. */
#howelectricity .he_cab[aria-expanded="true"] .he_cab_bot {
    background: #FFFEFF;
    border-color: #FFFEFF;
}
#howelectricity .he_cab[aria-expanded="true"] .he_cab_bot::before { transform: translate(-50%, -50%) rotate(45deg); color: #00402A; }
#howelectricity .he_cab[aria-expanded="true"] .he_cab_bot::after  { transform: translate(-50%, -50%) rotate(-45deg); color: #00402A; }

#howelectricity .he_cab:focus-visible { outline: 3px solid #0792E5; outline-offset: 3px; }

/* ===== El panel =========================================================================== */
#howelectricity .he_panel {
    gap: 8px !important;
    width: 100%;
    margin-top: 8px;
}

#howelectricity .he_fila { gap: 8px !important; width: 100%; }

/* ===== El panel en el tramo ESTRECHO: cabecera y su texto, intercalados ====================
   Apilar la fila de cabeceras y despues la de textos dejaba las tres etiquetas juntas y los
   tres parrafos debajo, sin saber cual era de cual. En Figma cada cabecera lleva su texto
   pegado. Como estan en DOS contenedores distintos, `order` por si solo no puede mezclarlos:
   la fila se disuelve con `display:contents` y los seis pasan a ser hijos del panel. */
#howelectricity .he_celda--unidad { order: 1; }
#howelectricity .he_dato--unidad  { order: 2; }
#howelectricity .he_celda--que    { order: 3; }
#howelectricity .he_dato--que     { order: 4; }
#howelectricity .he_celda--mas    { order: 5; }
#howelectricity .he_dato--mas     { order: 6; }

#howelectricity .he_celda {
    border-radius: 8px;
    background: #5BD38C;
    color: #00402A;
    font-family: 'IberPangea', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    padding: 8px 10px;
    text-align: center;
}

#howelectricity .he_dato {
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #D8CFC7;
    color: #3A3735;
    font-family: 'IberPangea Text', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    padding: 16px;
}

#howelectricity .he_dato--unidad { padding: 8px; text-align: center; }
#howelectricity .he_dato b { font-family: 'IberPangea Text', sans-serif; font-weight: 600; }

/* ===== Las llamadas ======================================================================= */
#howelectricity .he_llamada {
    position: absolute;
    align-items: center;
    background: #FFFEFF;
    /* El borde va como SOMBRA INTERIOR, no como `border`. En Figma el trazo de la píldora es
       interior: la caja mide 64 de alto en total. Con `border` sumaba 2 px por fuera y la píldora
       salía de 66, y con ella se descolocaba el arranque del conector. */
    box-shadow: inset 0 0 0 1px #D8CFC7;
    color: #3A3735;
    font-family: 'IberPangea Text', sans-serif;
    font-weight: 600;
}

#howelectricity .he_llamada:focus-visible { outline: 3px solid #0792E5; outline-offset: 3px; }

/* ===== Los conectores =====================================================================
   La línea que une cada llamada con su plataforma, y la bolita del extremo. No vienen en el SVG
   del dibujo: viven en el grupo `textos` de Figma, que se dejó fuera para que las llamadas fueran
   HTML. Pero SÍ vienen en el export de la escena completa que pidió el usuario, y de ahí salen
   estas coordenadas — exactas, no estimadas.

   SON DE ÁNGULO RECTO. Se leyó mal al principio: el vector de Corriente mide `58,583 x 47,636` y
   se tomó por una diagonal. **Es la caja que envuelve una L.** Dibujada como hipotenusa no llegaba
   a la bolita, que es lo que cazó el cliente.

   Y son hijos de la ESCENA, no de su botón: así sus medidas van en % de la escena y escalan con
   ella. Dentro del botón los % se resolverían contra el botón —que mide siempre lo mismo— y el
   conector dejaría de llegar a su bolita en cuanto la pieza cambiara de ancho.
   Van ANTES que los botones en el DOM para quedar por debajo: la píldora tapa el tramo que le pasa
   por encima y no hay que recortar nada. */
#howelectricity .he_con {
    position: absolute;
    display: block !important;
    pointer-events: none;
    border: 0 solid #00402A;
}

#howelectricity .he_con::after {
    content: '' !important;
    display: block !important;
    position: absolute;
    border-radius: 50%;
    background: #00402A;
    /* La bolita se centra en el extremo de la línea. */
    transform: translate(-50%, -50%);
}

/* Con un detalle abierto la ilustracion es OTRA, y los conectores apuntarian a un punto que ya no
   existe: ni siquiera el de la llamada activa tiene a donde apuntar, y ademas se entiende solo por
   estar activa. En Figma el estado abierto no los lleva. Cuelga de `data-abierto`, que el JS ya
   escribe en la raiz con el unico estado de la pieza. */
#howelectricity[data-abierto]:not([data-abierto='']) .he_con,
#howelectricity[data-abierto]:not([data-abierto='']) .he_llamada {
    display: none !important;
}

/* Los iconos de las llamadas van en VERDE #00A443, no en el color del texto. Es el único sitio
   donde el icono lleva color propio: dentro del desplegable va en blanco. */
#howelectricity .he_llamada_ico { color: #00A443; }
#howelectricity .he_llamada:hover .he_llamada_ico,
#howelectricity .he_llamada:focus-visible .he_llamada_ico,
#howelectricity .he_llamada.is-activa .he_llamada_ico { color: #FFFEFF; }

/* --- Tramo estrecho · escena 258 x 179 -----------------------------------------------------
   Rectos: una línea vertical desde el borde superior del círculo hasta la bolita. Arrancan en el
   círculo y no debajo porque el propio círculo tapa ese tramo. */
#howelectricity .he_con--voltaje     { left: 17.550%; top: 34.254%; width: 0; height: 29.740%; border-left-width: 1px; }
#howelectricity .he_con--resistencia { left: 64.542%; top:  0%;     width: 0; height: 27.106%; border-left-width: 1px; }
/* La L de Corriente: sube desde el círculo y tuerce a la izquierda hasta la bolita. Una caja con
   el borde superior y el derecho ES esa forma. */
#howelectricity .he_con--corriente   { left: 59.891%; top: 63.609%; width: 8.260%; height: 7.162%;
                                       border-top-width: 1px; border-right-width: 1px; }

#howelectricity .he_con::after { width: 5.35px; height: 5.35px; }
#howelectricity .he_con--voltaje::after,
#howelectricity .he_con--resistencia::after { left: 0; top: 100%; }
#howelectricity .he_con--corriente::after   { left: 0; top: 0; }

/* El componente `cajas-titulos-infografia` de Figma (nodo 24604:2661) tiene DOS estados,
   `default` y `hover` — no tres. El verde relleno es el HOVER:
       default  fondo #FFFEFF · borde #D8CFC7 · texto #3A3735 · icono #00A443
       hover    fondo #007F33 · borde #007F33 · texto e icono #FFFEFF
   En el paquete de diseño lo había anotado como «activa», y por eso la píldora no tenía hover.
   `:focus-visible` va en la misma regla para que el teclado vea lo mismo que el ratón, y se
   conserva `.is-activa` porque el JS sigue marcando el concepto abierto. */
#howelectricity .he_llamada:hover,
#howelectricity .he_llamada:focus-visible,
#howelectricity .he_llamada.is-activa {
    background: #007F33;
    box-shadow: inset 0 0 0 1px #007F33;
    color: #FFFEFF;
}

/* DÓNDE VA CADA LLAMADA.
   Los porcentajes salen del `get_metadata` de Figma, convertidos al espacio de la escena. Las
   instancias de píldora y de círculo tienen x/y limpios; lo que NO es fiable en este archivo son
   los CONECTORES, que llevan transformación y devuelven el origen en vez de la esquina.
   Se anclan por su esquina superior izquierda, que es lo que da Figma. */
/* Se anclan por su CENTRO, en el MISMO porcentaje al que llega su conector, y se corrigen medio
   ancho con `translateX(-50%)`.
   Antes se anclaban por la esquina izquierda, y como el círculo mide 32 px FIJOS mientras la escena
   crece con el ancho, su centro (esquina + 16 px) se quedaba atrás y la línea seguía avanzando: a
   290 cuadraba por medio píxel, pero a 375 la línea salía ya 6 px del lado del círculo, y a 520,
   15 px. Lo vio la compañera. Anclado por el centro coinciden por construcción a cualquier ancho,
   no por casualidad al ancho de diseño.
   El de Corriente es una L: su vertical baja por el borde DERECHO de la caja del conector, así que
   su porcentaje es `left + width` = 59,891 + 8,260. */
#howelectricity .he_llamada[data-llamada="voltaje"]     { left: 17.550%; top: 34.254%; }
#howelectricity .he_llamada[data-llamada="resistencia"] { left: 64.542%; top:  0%; }
#howelectricity .he_llamada[data-llamada="corriente"]   { left: 68.151%; top: 70.771%; }
#howelectricity .he_llamada { transform: translateX(-50%); }


/* Tramo estrecho: círculo numerado. Los TRES iguales, a 32 con el número a 18 (D-06): en Figma
   miden 28,79 · 28,79 · 32,04, que es residuo de escalar la instancia, y el usuario decidió
   igualarlos al mayor. 32 es además lo que miden los botones +/✕. */
#howelectricity .he_llamada {
    justify-content: center !important;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 100px;
    box-shadow: none;
    background: #00402A;
    color: #FFFEFF;
    font-family: 'IberPangea', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.071;
}

/* A 290 el icono desaparece —es decorativo— pero la ETIQUETA no se puede ocultar con
   `display:none`: eso la saca del árbol de accesibilidad y el botón pasaría a llamarse «1».
   Se oculta a la vista conservándola para el lector. El número sí es decorativo: va `aria-hidden`
   en el HTML, así que no se lee dos veces. */
#howelectricity .he_llamada_ico { display: none !important; }
#howelectricity .he_llamada_et {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}
#howelectricity .he_llamada_num { display: block !important; }

/* =============================================================================
   TRAMO ANCHO — diseño de 565
   ============================================================================= */
/* PROVISIONAL: el corte se mide en T-11 y lo valida el usuario. 565 es el ancho del frame, no
   una medida del punto en que la maqueta ancha deja de caber. */
@media (min-width: 565px) {

    #howelectricity { padding: 32px 24px; }

    /* La escena cambia de proporción y el dibujo se mete 7 px por la izquierda: ahí es donde
       sobresale la píldora de Voltaje. */
    /* El lienzo se topa en los 517 de Figma y se centra. Por encima de ahí el marco sigue
       creciendo —la cabecera, los desplegables y el panel reflowan— pero el dibujo no se estira:
       es la regla de siempre, que el dibujo no escala sobre su ancho de diseño. */
    #howelectricity .he_escena {
        aspect-ratio: 517 / 357;
        max-width: 517px;
        /* `align-self`, no margenes automaticos: el lienzo es un item flex del marco, un margen
           `auto` resuelve a un valor que depende de la maqueta —`getComputedStyle` lo devuelve
           unas veces y otras no— y ademas `align-self` ciega el `align-items` del theme. */
        align-self: center;
    }
    #howelectricity .he_dibujos { left: 1.371%; top: 3.425%; width: 98.629%; height: 96.417%; }

    /* Aquí las llamadas son PÍLDORAS y se anclan por su esquina, que es lo que da Figma: su
       conector no llega al centro sino al borde. Se anula el centrado del tramo estrecho. */
    #howelectricity .he_llamada { transform: none; }

    #howelectricity .he_llamada[data-llamada="voltaje"]     { left:  0%;      top: 37.023%; }
    #howelectricity .he_llamada[data-llamada="resistencia"] { left: 41.278%;  top:  0%; }
    #howelectricity .he_llamada[data-llamada="corriente"]   { left: 55.423%;  top: 70.118%; }

    /* --- Tramo ancho · escena 517 x 357 --- */
    #howelectricity .he_con--voltaje     { left: 18.679%; top: 37.023%; height: 27.376%; }
    #howelectricity .he_con--resistencia { left: 65.027%; top:  0%;     height: 24.266%; }
    #howelectricity .he_con--corriente   { left: 60.441%; top: 64.019%; width: 8.244%; height: 6.100%; }
    #howelectricity .he_con::after { width: 10.7px; height: 10.7px; }

    /* El origen del zoom cambia con la escena: los mismos puntos, otros porcentajes. */
    #howelectricity [data-dib="voltaje"]     { --he-org: 18.679% 64.399%; }
    #howelectricity [data-dib="resistencia"] { --he-org: 65.027% 24.266%; }
    #howelectricity [data-dib="corriente"]   { --he-org: 60.441% 64.019%; }

    #howelectricity .he_titulo { font-size: 32px; line-height: 36px; }
    #howelectricity .he_cabecera { gap: 24px !important; }
    #howelectricity .he_subtitulo { font-size: 24px; line-height: 28px; }

    #howelectricity .he_br--e { display: none !important; }
    #howelectricity .he_br--a { display: inline !important; }

    #howelectricity .he_celda { font-size: 16px; }

    /* El contenido pasa a TRES COLUMNAS. La de unidad va fija; las otras dos se reparten.
       Se REAFIRMA con `!important` porque el blindaje lo declara así fuera de la @media: un
       `!important` suelto ahí fuera se comería el responsive. */
    #howelectricity .he_fila {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
    }
    /* Vuelven las dos filas: el orden lo da el DOM y el intercalado del estrecho sobra. */
    #howelectricity .he_celda,
    #howelectricity .he_dato { order: 0; }
    #howelectricity .he_celda--unidad { flex: 0 0 98px; }
    #howelectricity .he_celda--que,
    #howelectricity .he_celda--mas { flex: 1 1 0; min-width: 0; }
    #howelectricity .he_dato--unidad { flex: 0 0 100px; }
    #howelectricity .he_dato--que,
    #howelectricity .he_dato--mas { flex: 1 1 0; min-width: 0; }
    #howelectricity .he_celda { display: flex !important; align-items: center; justify-content: center; }

    /* Las llamadas vuelven a ser PÍLDORAS con icono y texto. */
    #howelectricity .he_llamada {
        justify-content: flex-start !important;
        width: auto;
        height: auto;
        gap: 10px;
        padding: 16px 16px 16px 8px;
        border-radius: 30px;
        box-shadow: inset 0 0 0 1px #D8CFC7;
        background: #FFFEFF;
        color: #3A3735;
        font-family: 'IberPangea Text', sans-serif;
        font-weight: 600;
        font-size: 16px;
        line-height: 20px;
    }
    #howelectricity .he_llamada_ico { display: flex !important; flex: 0 0 auto; width: 32px; height: 32px; }
    #howelectricity .he_llamada_ico .he_ico { width: 100%; height: 100%; }
    #howelectricity .he_llamada_et {
        display: block !important;
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        white-space: normal;
        clip-path: none;
    }
    #howelectricity .he_llamada_num { display: none !important; }

}