/* ========================================================================== Seguridad eléctrica en casa · 2 — Riesgos y toma de tierra Scope: #segelri · BEM ri_ · Figma 2T2026 · 21280:7193 (565) y 21280:7500 (290) ========================================================================== */ @font-face{font-family:'IberPangea';src:url(/wcorp/gc/prod/es_ES/estaticos/seguridad-electrica-riesgos/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-riesgos/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-riesgos/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-riesgos/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-riesgos/fonts/IberPangeaText-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;} /* La cursiva REAL hace falta para la pastilla «n de N»: si se sintetiza la oblicua, ni la inclinación ni el ancho coinciden con Figma. */ @font-face{font-family:'IberPangea Text';src:url(/wcorp/gc/prod/es_ES/estaticos/seguridad-electrica-riesgos/fonts/IberPangeaText-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap;} /* ===== Tokens (get_variable_defs 21342:3384 y 21280:7385) ===== */ #segelri{ --ri-green:#00A443; /* Iberdrola Green — viñetas */ --ri-green1:#007F33; /* Green 1 — titulares y títulos de caja */ --ri-forest:#00402A; /* Iberdrola Forest — entradillas */ --ri-sand1:#FFFEFF; --ri-sand3:#D8CFC7; /* Sand 3 — bordes */ --ri-sand7:#3A3735; /* Sand 7 — cuerpo */ --ri-white:#FFFFFF; } /* ===== Contenedor ===== `container-name` obligatorio: sin él, un descendiente con container-type secuestra las @container de dentro (lección de la 011). Sin margen vertical: la pieza se incrusta y el sitio destino pone su propio espaciado. */ #segelri{ container-type:inline-size; container-name:ri; width:100%; max-width:980px; margin:0 auto; box-sizing:border-box; position:relative; text-align:left; background:var(--ri-white); border-radius:15px; /* Figma dibuja el trazo DENTRO del frame: con `border` de CSS el contenido perdería 2px de ancho (517 → 515). `outline` con offset negativo no ocupa layout y se pinta el último, por encima de los fondos de los hijos — a diferencia de `box-shadow: inset`, que queda debajo. */ outline:1px solid var(--ri-sand3); outline-offset:-1px; font-family:'IberPangea Text',Arial,sans-serif; font-size:16px; line-height:20px; color:var(--ri-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. */ #segelri *,#segelri *::before,#segelri *::after{box-sizing:border-box;} #segelri *{ 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; } /* `#segelri *` NO alcanza a los pseudo-elementos: se blindan aparte, sin `content`, para no crear pseudos donde no hay. El theme les mete margin negativo. */ #segelri *::before,#segelri *::after{ margin:0; padding:0; text-indent:0; letter-spacing:inherit; text-transform:inherit; } /* Listas: en el `li` además del `ul`. El `li::before` con !important porque el theme pinta ahí SU viñeta con !important. `display:none` además de `content:''`: con solo `content:''` el pseudo SE CREA y, en un `li` que es flex container, cuenta como un item más y mete un gap fantasma. */ #segelri ul,#segelri ol,#segelri li{list-style:none;} #segelri li::marker{content:none;} #segelri li::before{content:'' !important; display:none !important; margin:0 !important;} #segelri img,#segelri svg{display:block; max-width:100%;} #segelri button{background:none; border:0; font:inherit; color:inherit; cursor:pointer;} /* Texto solo para lector de pantalla. NO se llama `sr-only`: Liferay sirve Bootstrap y esa clase ya existe en el theme. Especificidad 1-1-0 para que el blindaje de arriba (1-0-0) no la pise. */ #segelri .ri_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). */ #segelri :focus-visible{outline:2px solid #007ACB; outline-offset:2px;} /* ===== Estructura de la tarjeta ===== */ #segelri .ri_in{ display:flex; flex-direction:column; gap:24px; padding:24px 16px; } @container ri (min-width: 520px){ #segelri .ri_in{padding:24px;} } /* ===== Tipografía común ===== */ #segelri .ri_h2{ /* Subtítulo infografía 24/28 */ font-family:'IberPangea',Arial,sans-serif; font-weight:400; font-size:24px; line-height:28px; color:var(--ri-green1) !important; } /* !important: el theme pinta los h2/h3 con #427314 en móvil */ #segelri .ri_h2 b{font-weight:600;} /* tramo SmBold del titular */ #segelri .ri_lead{ /* Entradilla infografía 18/24 */ font-size:18px; line-height:24px; color:var(--ri-forest); } #segelri .ri_lead b{font-weight:700;} #segelri .ri_h3{ /* Título caja infografía 18/22 Medium */ font-family:'IberPangea',Arial,sans-serif; font-weight:500; font-size:18px; line-height:22px; color:var(--ri-green1) !important; } #segelri .ri_p{font-size:16px; line-height:20px; color:var(--ri-sand7);} #segelri .ri_p b{font-weight:700;} /* ========================================================================== Bloque SLIDER (compartido con seguridad-electrica-cuadro) El nº de ítems por página lo manda el CSS, NO el JS: la pieza va incrustada y el ancho del viewport no es el suyo (565 dentro de una ventana de 1400 diría «1 de 2» con 4 tarjetas). El JS lee --sl-per con getComputedStyle. Ver plan.md. ========================================================================== */ #segelri .ri_sl{ --sl-per:1; --sl-gap:16px; --sl-page:0; display:flex; flex-direction:column; gap:16px; } @container ri (min-width: 520px){ #segelri .ri_sl{--sl-per:2;} } /* Sin JS: la pista envuelve y se ven las 4 tarjetas; el pie no aparece porque no navega nada. Así el criterio 6 (sin JS se ve todo) se cumple sin deshacer nada después. */ #segelri .ri_sl_track{ display:flex; flex-wrap:wrap; gap:var(--sl-gap); align-items:stretch; list-style:none; margin:0; padding:0; } #segelri .ri_sl_item{ flex:0 0 calc((100% - (var(--sl-per) - 1) * var(--sl-gap)) / var(--sl-per)); min-width:0; /* sin esto un texto largo revienta el reparto */ } #segelri .ri_sl_foot{display:none;} /* Con JS: ventana recortada, pista en una sola línea y desplazamiento por páginas. */ /* `overflow:hidden` recorta en los DOS ejes, así que se comía lo que la ilustración de la tarjeta sobresale por arriba. El recorte sucede en la caja de PADDING: con padding arriba el sobresaliente cae dentro y se ve, y el margen negativo devuelve el bloque a su sitio para no alterar ninguna medida. No sirve `overflow-x:hidden; overflow-y:visible`: si un eje es hidden, el otro computa a `auto` y aparece barra de scroll. */ #segelri.ri--js .ri_sl_win{overflow:hidden; padding-top:16px; margin-top:-16px;} #segelri.ri--js .ri_sl_track{ flex-wrap:nowrap; transform:translateX(calc(var(--sl-page) * -1 * (100% + var(--sl-gap)))); transition:transform 300ms cubic-bezier(.4,0,.2,1); } #segelri.ri--js .ri_sl_foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; } /* Pastilla «n de N» — reutilizada de fases-economia-circular-2026. `padding` 5px da 30 de alto y Figma pide 32 → min-height, que además aguanta si en EN o PT el texto envuelve. Nada de tocar el line-height, que es un token. */ #segelri .ri_sl_count{ display:flex; align-items:center; justify-content:center; min-height:32px; padding:5px 16px; border-radius:24px; border:1px solid var(--ri-forest); font-family:'IberPangea Text',Arial,sans-serif; font-style:italic; font-size:14px; line-height:18px; color:var(--ri-forest); white-space:nowrap; } #segelri .ri_sl_cur{font-style:italic; color:var(--ri-green1);} /* el número actual, en verde */ /* Botonera — flecha idéntica a la de la 008 (14,5455 × 10,7112) */ #segelri .ri_sl_nav{display:flex; gap:16px;} #segelri .ri_sl_btn{ width:32px; height:32px; border-radius:100px; overflow:hidden; border:1px solid var(--ri-forest); background:transparent; color:var(--ri-forest); display:flex; align-items:center; justify-content:center; transition:background-color 220ms ease, color 220ms ease; } #segelri .ri_sl_btn svg{width:14.5455px; height:10.7112px; display:block;} #segelri .ri_sl_prev svg{transform:scaleX(-1);} /* Tope: `aria-disabled`, NO `disabled` real — así el foco no se cae al al pulsar hasta el final (criterio 11). El aspecto es el mismo que dibuja Figma para el estado Disabled. */ #segelri .ri_sl_btn[aria-disabled="true"]{opacity:.5; cursor:default;} /* Hover: no existe en Figma ni en la 008; se define aquí (D10). Dentro de @media (hover:hover), o en táctil se queda pegado tras el tap. */ @media (hover:hover){ #segelri .ri_sl_btn:not([aria-disabled="true"]):hover{ background:var(--ri-forest); color:var(--ri-white); } } /* ========================================================================== B4 · Riesgos eléctricos más comunes Figma 21280:7202 (565) · 21280:7574 (290) ========================================================================== */ #segelri .ri_riesgos{display:flex; flex-direction:column; gap:16px;} /* Tarjeta de riesgo — 250,5 × 298 (565) · 258 × 296 (290). `outline` en vez de `border` por lo mismo que el resto: Figma dibuja el trazo dentro y el contenido debe medir 218,5 (565) / 226 (290). */ #segelri .ri_card{ height:100%; display:flex; flex-direction:column; gap:8px; align-items:center; /* Figma justifica al final, pero eso hace que el hueco sobrante aparezca ARRIBA y empuje la ilustración hacia dentro de la caja en cuanto un texto ocupa una línea menos (en EN/PT pasa seguro). Con `flex-start` el sobrante va abajo y la ilustración sobresale SIEMPRE lo que manda el diseño. Es indistinguible cuando los cuatro textos miden lo mismo, que es el caso. */ justify-content:flex-start; border-radius:15px; background:var(--ri-white); /* Aquí el trazo va con `border`, no con `outline` como en las demás cajas: los OUTLINES se pintan al final, POR ENCIMA de los descendientes, y la línea cruzaba la ilustración que sobresale. `border:1px` + `padding:15px` deja el mismo hueco interior que `outline` + `padding:16px` (250,5 − 2 − 30 = 218,5), así que no cambia ninguna medida, y el borde queda debajo de la ilustración — igual que en Figma, donde la ilustración es hija de la tarjeta. */ border:1px solid var(--ri-sand3); padding:15px; } /* La ilustración SOBRESALE por arriba de la caja, 24 (565) / 26 (290) por encima del padding: está así en el diseño de las cuatro tarjetas y hay que permitirlo. Margen negativo, no alto fijo, para que el alto de la tarjeta siga siendo del contenido. */ #segelri .ri_card_ill{ flex:0 0 auto; width:100%; height:150px; overflow:hidden; margin-top:-26px; } @container ri (min-width: 520px){ #segelri .ri_card_ill{margin-top:-24px;} } #segelri .ri_card_ill img{width:100%; height:100%; object-fit:contain;} #segelri .ri_card_t{ /* título centrado, a dos líneas */ width:100%; text-align:center; font-family:'IberPangea',Arial,sans-serif; font-weight:500; font-size:18px; line-height:22px; color:var(--ri-green1) !important; } #segelri .ri_card_p{width:100%; font-size:16px; line-height:20px; color:var(--ri-sand7);} /* La tarjeta crece con el ancho (a 980 mide 458) y los títulos largos acaban cabiendo en una línea, cuando en Figma van a dos SIEMPRE. Se limita la MEDIDA del título al valor de diseño de cada tamaño en vez de meter saltos duros: no toca el texto, vale en los tres idiomas y hace que envuelva donde envuelve Figma a cualquier ancho intermedio. En los anchos de diseño (226 a 290 y 218,5 a 565) el tope no cambia nada. */ #segelri .ri_card_t{max-width:226px;} @container ri (min-width: 520px){ #segelri .ri_card_t{max-width:218.5px;} } /* ========================================================================== B5 · Toma de tierra Figma 21280:7385 (565) · 21280:7652 (290) ========================================================================== */ #segelri .ri_tierra{display:flex; flex-direction:column; gap:16px;} #segelri .ri_tierra_box{ /* mismo motivo que el contenedor: outline, no border */ border-radius:15px; padding:16px; outline:1px solid var(--ri-sand3); outline-offset:-1px; } /* Rejilla única para los dos tamaños: cambia el reparto de áreas, no el marcado. 565 → la ilustración va a la derecha de la LISTA (485 = 360,64 + 16 + 108,358) 290 → baja y se pone a la derecha del CIERRE (226 = 149 + 16 + 61) El orden del DOM (encabezado, lista, ilustración, cierre) no cambia: la ilustración es decorativa, así que no interviene en el orden de lectura. */ #segelri .ri_tierra_grid{ display:grid; gap:16px; grid-template-columns:minmax(0,1fr) 61px; grid-template-areas: "head head" "list list" "end ill"; } #segelri .ri_tierra_head{grid-area:head; display:flex; flex-direction:column; gap:8px;} #segelri .ri_tierra_list{grid-area:list;} #segelri .ri_tierra_ill {grid-area:ill; align-self:end;} #segelri .ri_tierra_end {grid-area:end;} @container ri (min-width: 520px){ #segelri .ri_tierra_grid{ grid-template-columns:minmax(0,1fr) 108.358px; grid-template-areas: "head head" "list ill" "end end"; } #segelri .ri_tierra_ill{align-self:stretch;} } /* Lista de viñetas — la viñeta es un ELEMENTO REAL, no un ::before: el blindaje mata los pseudos de los `li` con !important para neutralizar la viñeta del theme. */ #segelri .ri_bullets{display:flex; flex-direction:column; gap:8px;} #segelri .ri_bullet{display:flex; gap:8px; align-items:flex-start;} #segelri .ri_dot{ flex:0 0 auto; width:12px; height:20px; position:relative; } #segelri .ri_dot::after{ /* círculo r=6 centrado en cy=10 (Figma 21280:7396) */ content:''; position:absolute; left:0; top:4px; width:12px; height:12px; border-radius:50%; background:var(--ri-green); } #segelri .ri_bullet_t{flex:1 1 0; min-width:0;} #segelri .ri_tierra_ill img{width:100%; height:auto;}