/* ============================================================================= Tabla comparativa · central eléctrica tradicional vs. virtual Estático de iberdrola.com. Sin interacción y SIN JS: lo que se ve es lo que hay. Tres anchos de diseño (980 / 565 / 290) y UN solo cambio de forma: dos columnas con los iconos en el canal central ↔ los dos bloques apilados. Entre 290 y 565 no hay segundo corte: los tres valores que cambian (padding del marco y hueco icono↔tarjeta) se ligan al contenedor con `cqw`. Medidas: specs/024-tabla-comparativa-centrales-virtuales/design/ ============================================================================= */ @font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/tabla-comparativa-centrales-virtuales/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/tabla-comparativa-centrales-virtuales/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/tabla-comparativa-centrales-virtuales/fonts/IberPangea-SmBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;} #vppcompare{ --vc-green1:#007F33; /* títulos de columna */ --vc-forest:#00402A; /* texto de las tarjetas */ --vc-sand1:#FFFEFF; /* fondo de tarjeta */ --vc-sand:#FFF5EC; /* fondo del marco */ --vc-icono:68px; --vc-hueco:0px; /* lo fija cada tramo; el valor de aquí es sólo el respaldo */ } /* ===== Marco ================================================================= El radio del marco es 15 y el de las tarjetas 16. Son distintos A PROPÓSITO (dato del usuario): no unificarlos. */ #vppcompare{ container-type:inline-size; width:100%; max-width:980px; margin:0 auto; box-sizing:border-box; background:var(--vc-sand); border-radius:15px; 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 y conserva el valor del padre, así que no cambia nada de lo nuestro. */ #vppcompare *{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;} #vppcompare ul,#vppcompare ol,#vppcompare li{list-style:none;} #vppcompare li::marker{content:none;} /* El `display:none` importa: con sólo `content:''` el pseudo SE CREA y, en un `li` flex, cuenta como un item más y mete un hueco fantasma (pasó en la 013). */ #vppcompare li::before{content:'' !important; display:none !important; margin:0 !important;} #vppcompare *::before,#vppcompare *::after{margin:0; padding:0; text-indent:0; letter-spacing:inherit; text-transform:inherit;} #vppcompare img{display:block; max-width:100%;} /* La RAÍZ declara todo lo heredable: si no, hereda del portal y el `inherit` de arriba propaga fielmente hacia dentro el valor del theme. */ #vppcompare{ font-family:'IberPangea',sans-serif; font-size:18px; line-height:22px; font-weight:500; font-style:normal; color:var(--vc-forest); letter-spacing:normal; text-transform:none; white-space:normal; text-decoration:none; } /* `display` no se hereda: se declara elemento a elemento y con `!important`. Lo que cambia por tramo se reafirma EN su tramo — un `!important` fuera de la @container se come el responsive (lección de la 010). */ #vppcompare{display:block !important;} #vppcompare .vc_titulo,#vppcompare .vc_texto{display:block !important;} #vppcompare .vc_caja{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:flex-start;} #vppcompare .vc_icono{display:block !important; flex:0 0 auto;} #vppcompare .vc_icono img{display:block !important;} #vppcompare b{font-weight:600;} /* En una caja flex hay que declarar el juego COMPLETO: el theme mete `div,ul{flex-direction:column-reverse; gap:0; align-items:flex-end; …}`. */ #vppcompare .vc_inner,#vppcompare .vc_col,#vppcompare .vc_lista{ display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start;} #vppcompare .vc_fila{ display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:flex-start;} /* ===== Piezas comunes a los tres anchos ====================================== La tipografía NO cambia en ningún ancho: 24/28 el título y 18/22 las tarjetas. Lo que cambia es la FORMA y los huecos. */ #vppcompare .vc_titulo{ font-size:24px; line-height:28px; font-weight:400; color:var(--vc-green1) !important; /* en móvil el theme pinta los h2 de verde suyo */ } #vppcompare .vc_col{gap:24px;} /* título → primera tarjeta */ /* EL TÍTULO EMPIEZA EN LA TARJETA, NUNCA SOBRE LOS ICONOS. En Figma el título vive dentro del mismo frame que las tarjetas, y la columna de iconos es un hermano que queda fuera. Aquí el icono va dentro de la fila, así que hay que apartar el título justo lo que ocupan el icono y su hueco — y recortarlo por el otro lado, para que tampoco sea más ancho que la tarjeta (a 980 medía 458 en vez de 375,5). */ #vppcompare .vc_titulo{margin-inline-start:calc(var(--vc-icono) + var(--vc-hueco));} /* La tarjeta blanca es la CAJA, no la fila: en el diseño el icono va FUERA, sobre el fondo Sand. Meterlo dentro subía la fila de 68 a 92 (68 del icono + 24 de padding). */ #vppcompare .vc_caja{ flex:1 1 auto; min-width:0; background:var(--vc-sand1); border-radius:16px; padding:12px 16px; min-height:68px; } /* `min-height` y no `height`: a 980 y 565 ningún texto pasa de dos líneas y da 68 exactos (22·2 + 12·2), y a 290 crece solo hasta los 90/112/134 del diseño. Ni una altura clavada. */ #vppcompare .vc_texto{font-size:18px; line-height:22px; font-weight:500; min-width:0;} #vppcompare .vc_icono{width:var(--vc-icono); height:var(--vc-icono);} #vppcompare .vc_icono img{width:100%; height:100%;} /* ===== Tramo ANCHO: dos columnas y los iconos en el canal ==================== Cada columna mide 458 = 375,5 de texto + 14,5 de hueco + 68 de icono, y las dos suman los 916 del contenido: por eso NO hay hueco entre columnas. La fila de la izquierda se invierte VISUALMENTE (row-reverse) para que su icono caiga en el canal; el orden del DOM no se toca. EL CORTE EN 958 ESTÁ MEDIDO, no elegido: por debajo de ahí «Alta capacidad de adaptación y respuesta en tiempo real» se va a tres líneas, su fila crece a 90 y deja de cuadrar con la del otro lado — y con ella los dos iconos del canal. Es coherente con el diseño: Figma no tiene ningún frame entre 565 y 980, así que por debajo de 980 la forma que prescribe es la apilada. */ @container (min-width:958px){ #vppcompare .vc_inner{ flex-direction:row !important; align-items:flex-start; gap:0; padding:40px 32px; } #vppcompare .vc_inner{--vc-hueco:14.5px;} #vppcompare .vc_col{flex:1 1 0; min-width:0;} #vppcompare .vc_lista{gap:16px;} #vppcompare .vc_fila{gap:var(--vc-hueco);} #vppcompare .vc_col--trad .vc_fila{flex-direction:row-reverse;} /* En el lado tradicional la tarjeta va PRIMERO, así que el título ya arranca donde debe; lo que sobra es por la derecha. */ #vppcompare .vc_col--trad .vc_titulo{ margin-inline-start:0; margin-inline-end:calc(var(--vc-icono) + var(--vc-hueco));} /* Los saltos del frame de 980 sólo valen a 980. */ #vppcompare .vc_br{display:inline !important;} /* EN, tercera fila. «Makes use of existing assets, such as renewable energy facilities, batteries and flexible consumption» necesita 405 px para dos líneas y la tarjeta mide 375,5: se va a tres. En vez de subir las seis filas —que deja la tabla con demasiado aire—, crece SÓLO ella y su pareja del otro lado, para que la fila siga cuadrando y con ella los dos iconos del canal. Decisión de diseño, 15 sep 2026. `:lang(en)` y no `[lang="en"]`: el portal sirve `en-US` y el selector exacto no casaría. */ #vppcompare:lang(en) .vc_fila:nth-child(3) .vc_caja{min-height:90px;} } /* ===== Tramo APILADO: un bloque debajo del otro, icono a la izquierda ======== Cubre 565 y 290 sin un segundo corte. Los dos valores que el diseño mueve entre esos dos anchos se interpolan con `cqw`, que es el ancho del propio marco: padding lateral 16 (a 290) → 32 (a 565) padding vertical 32 (a 290) → 40 (a 565) hueco icono↔texto 0 (a 290) → 16 (a 565) Las constantes salen de la recta que pasa por los dos frames, no de tantear. */ @container (max-width:957.98px){ #vppcompare .vc_inner{ /* `align-items` NO es opcional aquí. El tramo ancho lo pone en `flex-start`, y si este no lo devuelve a `stretch` las columnas dejan de estirarse: las tarjetas blancas se quedan del ancho de su texto y no llegan al borde del marco. Lo cazó el usuario a 900. Es la regla de siempre: lo que un tramo cambia, el otro lo reafirma. */ flex-direction:column !important; align-items:stretch; gap:24px; padding-inline:clamp(16px, 5.81818cqw - 0.873px, 32px); padding-block:clamp(32px, 2.90909cqw + 23.564px, 40px); } #vppcompare .vc_inner{--vc-hueco:clamp(0px, 5.81818cqw - 16.873px, 16px);} #vppcompare .vc_lista{gap:8px;} #vppcompare .vc_fila{gap:var(--vc-hueco);} /* Apilados, los DOS lados llevan el icono a la izquierda: los dos títulos se apartan. */ #vppcompare .vc_col--trad .vc_titulo{ margin-inline-start:calc(var(--vc-icono) + var(--vc-hueco)); margin-inline-end:0;} /* Sin `flex-direction` explícita aquí heredaríamos la del tramo ancho en el lado tradicional: hay que devolverla. */ #vppcompare .vc_col--trad .vc_fila{flex-direction:row;} /* Saltos forzados fuera: en una tarjeta estrecha el texto rompe solo, y forzarlos aquí empeora el reparto de líneas (lección de la 022). */ #vppcompare .vc_br{display:none !important;} } /* Sin `container-type` (navegador viejo) no hay @container y la pieza se quedaría sin layout. Este bloque le da el apilado, que es el que funciona a cualquier ancho. */ @supports not (container-type:inline-size){ #vppcompare .vc_inner{ flex-direction:column !important; align-items:stretch; gap:24px; padding:32px 16px; --vc-hueco:0px;} #vppcompare .vc_lista{gap:8px;} #vppcompare .vc_br{display:none !important;} }