/* ============================================================================= 10 Principios Fundamentales del Carbono (CCP) · estático de iberdrola.com Dos anchos de diseño: 565 (horizontal) y 290 (vertical). Un solo punto de cambio de layout: @container 565. Medidas: specs/021-carbon-core-principles-ccp/design/ ============================================================================= */ /* ===== IberPangea + IberPangea Text (self-contained) ========================= Cinco caras. Sin la fuente real cambia el número de líneas del texto de la tarjeta, que es justo lo que gobierna el alto del panel. */ @font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/carbon-core-principles-ccp/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/carbon-core-principles-ccp/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/carbon-core-principles-ccp/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/carbon-core-principles-ccp/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/carbon-core-principles-ccp/fonts/IberPangeaText-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;} #carbonccp{ --ccp-green1:#007F33; --ccp-green:#00A443; --ccp-green3:#26BF64; --ccp-forest:#00402A; --ccp-sand1:#FFFEFF; --ccp-sand:#FFF5EC; --ccp-sand3:#D8CFC7; --ccp-foco:#0792E5; } /* ===== Marco de la pieza ===================================================== El trazo va como `box-shadow: inset`, NO como `border`: en Figma el trazo no consume caja (el frame mide 565 con padding 32 y el contenido 501 = 565-64, no 499). Lo mismo vale para la tarjeta y el contador. `overflow:hidden` porque la escena va a sangre y hay que recortarla al radio. */ #carbonccp{ container-type:inline-size; /* el tramo se decide por el HUECO, no por la ventana */ width:100%; max-width:1256px; margin:0 auto; box-sizing:border-box; background:var(--ccp-sand1); border-radius:15px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--ccp-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. */ #carbonccp *{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;} #carbonccp ul,#carbonccp ol,#carbonccp li{list-style:none;} #carbonccp li::marker{content:none;} #carbonccp li::before{content:'' !important; display:none !important; margin:0 !important;} /* `#carbonccp *` NO alcanza a los pseudo-elementos: se blindan aparte y SIN `content`, para no crear pseudos donde no hay. El theme les mete margen negativo. */ #carbonccp *::before,#carbonccp *::after{margin:0; padding:0; text-indent:0; letter-spacing:inherit; text-transform:inherit;} #carbonccp img{display:block; max-width:100%;} #carbonccp button{font:inherit; cursor:pointer; border:0; background:transparent; color:inherit; appearance:none; -webkit-appearance:none;} #carbonccp svg{display:block;} /* 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. */ #carbonccp{ font-family:'IberPangea Text',sans-serif; font-size:16px; line-height:20px; font-weight:400; font-style:normal; color:var(--ccp-forest); 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`. */ #carbonccp{display:block !important;} #carbonccp .ccp_escena{display:block !important;} #carbonccp .ccp_panel,#carbonccp .ccp_suelo{display:block !important;} #carbonccp .ccp_art{display:block !important;} #carbonccp .ccp_title,#carbonccp .ccp_intro,#carbonccp .ccp_txt{display:block !important;} #carbonccp .ccp_ico{display:block !important;} #carbonccp .ccp_arrow{display:block !important;} #carbonccp .ccp_link{display:inline !important;} #carbonccp b{font-weight:600;} /* Las diez slides APILADAS en la misma celda de rejilla: la celda mide lo que la más alta, así que el panel no cambia de alto al pasar de principio (D04) SIN clavar un `min-height` a mano. Y como se recalcula a cada ancho, no deja aire de más. Las que no tocan se ocultan con `visibility`, que sí ocupa sitio y además las saca del árbol de accesibilidad; el `inert` del HTML es el cinturón para el foco y los clics. */ #carbonccp .ccp_slides{display:grid !important; grid-template-areas:"s";} #carbonccp .ccp_slide{display:block !important; grid-area:s; visibility:hidden;} #carbonccp[data-active="1"] .ccp_slide[data-slide="1"], #carbonccp[data-active="2"] .ccp_slide[data-slide="2"], #carbonccp[data-active="3"] .ccp_slide[data-slide="3"], #carbonccp[data-active="4"] .ccp_slide[data-slide="4"], #carbonccp[data-active="5"] .ccp_slide[data-slide="5"], #carbonccp[data-active="6"] .ccp_slide[data-slide="6"], #carbonccp[data-active="7"] .ccp_slide[data-slide="7"], #carbonccp[data-active="8"] .ccp_slide[data-slide="8"], #carbonccp[data-active="9"] .ccp_slide[data-slide="9"], #carbonccp[data-active="10"] .ccp_slide[data-slide="10"]{visibility:visible;} /* En una caja flex no basta con declarar `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 lo que no declaremos, lo pisa. Así que se declara el juego COMPLETO en cada contenedor flex. */ #carbonccp .ccp_cab,#carbonccp .ccp_zona,#carbonccp .ccp_caja{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start;} #carbonccp .ccp_barra,#carbonccp .ccp_nav{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center;} #carbonccp .ccp_pie{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:8px;} #carbonccp .ccp_count{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center;} #carbonccp .ccp_nav{gap:16px;} /* La rejilla también hay que blindarla: el theme mete `gap:0` y `justify-items` a los div, y aquí el apilado depende de que la celda sea una sola. `minmax(0,1fr)` y no `1fr` a secas: `1fr` es `minmax(auto,1fr)` y su mínimo es el min-content de la celda, así que un texto largo ensancharía la pista por encima del hueco y sacaría la tarjeta del padding. */ #carbonccp .ccp_slides{grid-template-columns:minmax(0,1fr); grid-auto-flow:row; gap:0; align-items:stretch; justify-items:stretch; justify-content:start; align-content:start;} /* ===== Ritmo vertical (normalizado, DF-07 y DF-08) =========================== El padding va DENTRO de los envoltorios: `@container` no reestila el propio contenedor, sólo sus descendientes. La escena queda FUERA de ellos para sangrar. Móvil: 32 arriba, 44 entre bloques y 44 abajo; laterales 16 (258 = 290-32). */ #carbonccp .ccp_cab{padding:32px 16px 0; gap:16px;} #carbonccp .ccp_escena{margin-top:44px;} #carbonccp .ccp_zona{margin-top:44px; padding:0 16px 44px; gap:24px;} /* ===== Cabecera ===== */ #carbonccp .ccp_title{font-family:'IberPangea',sans-serif; font-weight:400; font-size:32px; line-height:36px; color:var(--ccp-green1) !important;} #carbonccp .ccp_title b{font-weight:600;} #carbonccp .ccp_intro{font-size:18px; line-height:24px; color:var(--ccp-forest);} /* El blindaje pone `text-decoration:none` a todo: hay que devolver el subrayado con más especificidad (1-1-0 gana a 1-0-0). */ #carbonccp .ccp_link{text-decoration:underline; color:var(--ccp-forest);} #carbonccp .ccp_link:focus-visible{outline:3px solid var(--ccp-foco); outline-offset:2px;} /* ===== Escena a sangre ======================================================= Los SVG entregados YA traen dentro el panel arena y la franja de suelo llegando a los dos bordes (medido: x=0 y x=289 son #26BF64 en el móvil). En el tramo móvil, por tanto, basta con el SVG al 100 %: las bandas CSS sobran y van apagadas. */ #carbonccp .ccp_escena{position:relative;} #carbonccp .ccp_art{width:100%; height:auto; position:relative; z-index:1;} #carbonccp .ccp_art--desk{display:none !important;} #carbonccp .ccp_panel,#carbonccp .ccp_suelo{display:none !important;} /* ===== Barra verde (fija: no forma parte de la tarjeta que cambia) ===== */ #carbonccp .ccp_barra{min-height:44px; padding:0 24px; border-radius:16px; background:var(--ccp-forest); color:var(--ccp-sand); font-size:16px; line-height:20px; text-align:center;} /* ===== Tarjeta =============================================================== `height:100%` porque en una rejilla apilada sólo se estira el item (la slide), no su contenido: sin esto la tarjeta corta se quedaría a su alto y dejaría un hueco. */ #carbonccp .ccp_caja{height:100%; padding:8px; gap:4px; border-radius:16px; box-shadow:inset 0 0 0 1px var(--ccp-forest); align-items:center; justify-content:flex-start;} #carbonccp .ccp_ico{position:relative; width:60px; height:60px; flex:0 0 auto; overflow:hidden;} #carbonccp .ccp_ico svg{position:absolute; max-width:none;} #carbonccp .ccp_txt{width:100%; font-size:16px; line-height:20px; color:var(--ccp-forest);} #carbonccp .ccp_txt b{font-weight:600;} /* Encaje exacto de cada icono dentro de su caja de 60. Los archivos vienen al tamaño de su tinta (de 33x42 a 42x42) y NO centrados: centrarlos se desvía hasta 0,70 px del diseño. La tinta arranca en (0,0) del viewBox en los diez (medido), así que el desplazamiento es literalmente la x/y de Figma. */ #carbonccp .ccp_ico--1 svg{left:9.35625px; top:9.575px; width:41px; height:42px;} #carbonccp .ccp_ico--2 svg{left:11.925px; top:9.44375px; width:37px; height:42px;} #carbonccp .ccp_ico--3 svg{left:9.39375px; top:10.8px; width:42px; height:39px;} #carbonccp .ccp_ico--4 svg{left:9.375px; top:9.3875px; width:42px; height:42px;} #carbonccp .ccp_ico--5 svg{left:9.625px; top:9.24375px; width:41px; height:42px;} #carbonccp .ccp_ico--6 svg{left:9.355868px; top:9.442299px; width:42px; height:42px;} #carbonccp .ccp_ico--7 svg{left:13.10625px; top:9.375px; width:33px; height:42px;} #carbonccp .ccp_ico--8 svg{left:9.39375px; top:9.60625px; width:42px; height:42px;} #carbonccp .ccp_ico--9 svg{left:9.7px; top:9.192135px; width:42px; height:42px;} #carbonccp .ccp_ico--10 svg{left:9.4375px; top:9.375px; width:42px; height:42px;} /* ===== Pie del slider ===== */ #carbonccp .ccp_pie{height:32px;} #carbonccp .ccp_count{height:32px; padding:5px 16px; border-radius:24px; box-shadow:inset 0 0 0 1px var(--ccp-forest); font-style:italic; font-size:14px; line-height:18px; color:var(--ccp-forest); white-space:nowrap;} #carbonccp .ccp_cur{color:var(--ccp-green1);} /* El valor va envuelto en un solo elemento: si el «1» y el « de 10» fuesen dos items flex hermanos, el espacio inicial del segundo se colapsa (es principio de bloque) y se lee «1de 10». Dentro de un mismo item el espacio está a mitad de línea y sobrevive. */ #carbonccp .ccp_val,#carbonccp .ccp_cur{display:inline !important;} /* Un único dibujo de flecha para todo el sitio (el mismo asset que da Figma y que ya usa la 020). El hover verde relleno es el canon del sitio. */ #carbonccp .ccp_arrow{width:32px; height:32px; flex:0 0 auto; background-repeat:no-repeat; background-size:100% 100%;} #carbonccp .ccp_prev{background-image:url('/wcorp/gc/prod/es_ES/estaticos/carbon-core-principles-ccp/images/ico-prev.svg');} #carbonccp .ccp_next{background-image:url('/wcorp/gc/prod/es_ES/estaticos/carbon-core-principles-ccp/images/ico-next.svg');} @media (hover:hover){ #carbonccp .ccp_prev:not(:disabled):hover{background-image:url('/wcorp/gc/prod/es_ES/estaticos/carbon-core-principles-ccp/images/ico-prev-hover.svg');} #carbonccp .ccp_next:not(:disabled):hover{background-image:url('/wcorp/gc/prod/es_ES/estaticos/carbon-core-principles-ccp/images/ico-next-hover.svg');} } #carbonccp .ccp_arrow:disabled{opacity:.5; cursor:default;} #carbonccp .ccp_arrow:focus-visible{outline:3px solid var(--ccp-foco); outline-offset:3px;} /* ============================================================================= TRAMO HORIZONTAL — a partir de 565 de HUECO (no de ventana) ============================================================================= */ @container (min-width: 565px){ #carbonccp .ccp_cab{padding:40px 32px 0; gap:24px;} #carbonccp .ccp_escena{margin-top:48px;} #carbonccp .ccp_zona{margin-top:48px; padding:0 32px 40px; gap:16px;} /* El dibujo NO escala por encima del ancho de diseño: se topa en 565 y se centra. Lo que sí se estira es el fondo — panel arena y franja de suelo — con dos bandas a todo el ancho por detrás. Como llevan el mismo color que las del SVG, la unión es invisible. Geometría y color medidos sobre el propio SVG renderizado. */ #carbonccp .ccp_escena{height:292px;} #carbonccp .ccp_art--mob{display:none !important;} #carbonccp .ccp_art--desk{display:block !important; width:565px; height:292px; margin:0 auto;} #carbonccp .ccp_panel{display:block !important; position:absolute; z-index:0; left:0; right:0; top:47.026px; height:244.721px; border-radius:30px; background:var(--ccp-sand);} #carbonccp .ccp_suelo{display:block !important; position:absolute; z-index:0; left:0; right:0; top:242.763px; height:27.162px; background:var(--ccp-green3);} #carbonccp .ccp_barra{min-height:57px; padding:0 13px; font-family:'IberPangea',sans-serif; font-size:21px; line-height:24px; white-space:nowrap;} /* Fila con el icono a la izquierda. Alto por contenido con mínimo 92 = 16+60+16: con 1, 2 o 3 líneas sale exactamente los 92 de Figma, y si una traducción se va a 4 líneas la tarjeta crece en vez de recortar. */ #carbonccp .ccp_caja{flex-direction:row; align-items:center; gap:8px; padding:16px; min-height:92px;} #carbonccp .ccp_txt{flex:1 1 auto; min-width:0; width:auto;} }