/* ============================================================================= El hogar electrificado y las soluciones que impulsan su eficiencia Estático de iberdrola.com. Hermana de elementos-instalacion-puesta-a-tierra (020). Dos anchos de diseño: 565 (cajas con texto) y 290 (bolitas numeradas). Un solo punto de cambio de layout: @container 565. Medidas: specs/022-hogar-electrificado-soluciones-eficiencia/design/ ============================================================================= */ /* ===== IberPangea + IberPangea Text (self-contained) ========================= Sin la fuente real el ancho de línea cambia y las medidas dejan de cuadrar (y con ellas el nº de líneas de la tarjeta, que gobierna su alto). */ @font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/hogar-electrificado-soluciones-eficiencia/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/hogar-electrificado-soluciones-eficiencia/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/hogar-electrificado-soluciones-eficiencia/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/hogar-electrificado-soluciones-eficiencia/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/hogar-electrificado-soluciones-eficiencia/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/hogar-electrificado-soluciones-eficiencia/fonts/IberPangeaText-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;} #electrichome{ --eh-green1:#007F33; --eh-forest:#00402A; --eh-sand1:#FFFEFF; --eh-sand3:#D8CFC7; --eh-sand7:#3A3735; --eh-foco:#0792E5; } /* ===== Marco ================================================================= El trazo va como `box-shadow: inset`, NO como `border`: en Figma el trazo no consume layout (el frame mide 565 con padding 24 y el contenido 517 = 565-48, no 515). Con `border:1px` todo saldría 2px desplazado. Igual para la tarjeta, las cajas y el contador. */ #electrichome{ container-type:inline-size; /* el tramo lo decide el HUECO, no la ventana */ width:100%; max-width:1256px; margin:0 auto; box-sizing:border-box; background:var(--eh-sand1); border-radius:15px; box-shadow:inset 0 0 0 1px var(--eh-sand3); position:relative; text-align:left; } /* ===== Blindaje frente al theme de Liferay (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 y conserva el valor del padre, así que no cambia nada visualmente y no rompe el responsive. */ #electrichome *{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; box-sizing:border-box;} #electrichome ul,#electrichome ol,#electrichome li{list-style:none;} #electrichome li::marker{content:none;} #electrichome li::before{content:'' !important; display:none !important; margin:0 !important;} /* `#electrichome *` NO alcanza a los pseudo-elementos: se blindan aparte y SIN `content`, para no crear pseudos donde no hay. */ #electrichome *::before,#electrichome *::after{margin:0; padding:0; text-indent:0; letter-spacing:inherit; text-transform:inherit;} #electrichome img{display:block; max-width:100%;} #electrichome svg{display:block;} #electrichome button{font:inherit; cursor:pointer; border:0; background:transparent; color:inherit; appearance:none; -webkit-appearance:none;} /* La RAÍZ tiene que declarar todo lo heredable: si no, hereda del portal y el `inherit` de arriba propaga fielmente el valor del theme hacia dentro. */ #electrichome{ font-family:'IberPangea Text',sans-serif; font-size:16px; line-height:20px; font-weight:400; font-style:normal; color:var(--eh-sand7); letter-spacing:normal; text-transform:none; white-space:normal; text-decoration:none; } /* `display` NO se hereda, así que `inherit` no vale: se declara elemento a elemento y con `!important`. Sólo se reafirma por tramo lo que de verdad cambia. */ #electrichome{display:block !important;} #electrichome .eh_escena,#electrichome .eh_arte,#electrichome .eh_guias{display:block !important;} #electrichome .eh_title,#electrichome .eh_intro,#electrichome .eh_nombre, #electrichome .eh_texto,#electrichome .eh_cuerpo{display:block !important;} #electrichome .eh_et{display:inline !important;} /* El contador es UN solo item flex (`.eh_val`) con dos inlines dentro. Si se cuelgan del flex directamente, `display:inline` se blockifica, pasan a ser dos items y el navegador se come el espacio de " de 6" -> se lee "1de 6". */ #electrichome .eh_val,#electrichome .eh_cur{display:inline !important;} #electrichome b{font-weight:600;} /* En una caja flex no basta con `display` y `flex-direction`: el theme mete `div,ul{flex-direction:column-reverse; gap:0; align-items:flex-end; justify-content:flex-end; flex-wrap:nowrap}` y pisa lo que no declaremos. */ #electrichome .eh_inner,#electrichome .eh_head,#electrichome .eh_pieblock, #electrichome .eh_slide{ display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start;} #electrichome .eh_cab,#electrichome .eh_nav{ display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center;} #electrichome .eh_pie{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:8px;} #electrichome .eh_count,#electrichome .eh_num,#electrichome .eh_pin{ display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center;} /* `.eh_caja` y `.eh_bolita` cambian de `display` entre tramos, asi que su `!important` NO puede vivir aqui: un `!important` fuera de una @container se come el responsive (leccion de la 010). Se declaran en cada tramo. Aqui solo el resto del juego flex. */ #electrichome .eh_caja,#electrichome .eh_bolita{flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center;} #electrichome .eh_cab{gap:10px; justify-content:flex-start;} #electrichome .eh_nav{gap:16px; align-items:flex-start;} #electrichome .eh_caja{gap:10px;} #electrichome .eh_head{gap:24px;} /* Los seis paneles APILADOS en una sola celda: la celda mide lo que el más alto A ESE ANCHO, así que la tarjeta no cambia de alto al pasar de elemento y las flechas no se mueven (RD-09), sin clavar ningún `min-height` a mano. `minmax(0,1fr)` y no `1fr`: `1fr` es `minmax(auto,1fr)` y su mínimo es el min-content de la celda; un título largo en la cabecera estiraría la pista por encima del hueco (pasó en la 020). */ #electrichome .eh_slides{display:grid !important; grid-template-areas:"s"; grid-template-columns:minmax(0,1fr); grid-auto-flow:row; gap:0; align-items:stretch; justify-items:stretch; justify-content:start; align-content:start;} #electrichome .eh_slide{grid-area:s; visibility:hidden;} #electrichome[data-active="1"] .eh_slide[data-slide="1"], #electrichome[data-active="2"] .eh_slide[data-slide="2"], #electrichome[data-active="3"] .eh_slide[data-slide="3"], #electrichome[data-active="4"] .eh_slide[data-slide="4"], #electrichome[data-active="5"] .eh_slide[data-slide="5"], #electrichome[data-active="6"] .eh_slide[data-slide="6"]{visibility:visible;} /* ============================================================================= TRAMO MÓVIL (base) — diseño de 290 ============================================================================= */ #electrichome .eh_inner{padding:24px 16px; gap:24px;} #electrichome .eh_head{padding-inline:8px;} /* el texto mide 242, no 258 */ #electrichome .eh_title{font-family:'IberPangea',sans-serif; font-weight:400; font-size:30px; line-height:34px; color:var(--eh-green1) !important;} #electrichome .eh_intro{font-size:18px; line-height:22px; color:var(--eh-sand7);} /* ===== Escenario ============================================================= El lienzo ESCALA con el hueco y las bolitas NO (mismo criterio que la 019). El `aspect-ratio` es el del viewBox del SVG (259x237), no el del grupo de Figma (258,0018x235,7898): manda el espacio de coordenadas del SVG, que es lo que ancla los % de las bolitas. Se topa en 517 para empalmar sin salto con el tramo desktop, que también mide 517. */ /* Se centra con `align-self`, no con `margin-inline:auto`: en un item flex el auto se resuelve en el layout y `getComputedStyle` devuelve 0px, pero bajo el ataque de flex del theme pasa a devolver el valor usado. La geometria era la misma, pero la puerta de aislamiento lo marcaba en rojo y un rojo que hay que explicar no sirve de puerta. */ #electrichome .eh_escena{position:relative; width:100%; max-width:517px; align-self:center; aspect-ratio:259/237;} #electrichome .eh_arte,#electrichome .eh_guias{position:absolute; inset:0;} #electrichome .eh_arte svg,#electrichome .eh_guias svg{width:100%; height:100%;} /* ===== Ilustración conmutable ================================================ Un solo SVG con seis grupos. El JS sólo mueve `data-active`; la opacidad la pone el CSS. El `opacity="0.2"` que traen los grupos en el fichero es un atributo de presentación: pierde contra cualquiera de estas reglas, y a cambio deja el SVG suelto siendo un estado 1 válido para el `