/* ========================================================================== Cyberskills Framework — infografía con acordeón de niveles Scope: #cskills · BEM ck_ · Figma 2T2026 21973:37688 (565 y 290) ========================================================================== */ @font-face{font-family:'IberPangea';src:url(/wcorp/gc/prod/es_ES/estaticos/infografia-cyberskills-framework/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/infografia-cyberskills-framework/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/infografia-cyberskills-framework/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/infografia-cyberskills-framework/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/infografia-cyberskills-framework/fonts/IberPangeaText-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:'IberPangea Text';src:url(/wcorp/gc/prod/es_ES/estaticos/infografia-cyberskills-framework/fonts/IberPangeaText-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap;} /* ===== Tokens de Figma (get_variable_defs 21970:7575) ===== */ #cskills{ --ck-green1:#007F33; /* Green 1 — titular, cabecera abierta, botón + */ --ck-forest:#00402A; /* Iberdrola Forest — títulos y textos */ --ck-sand:#FFF5EC; /* Iberdrola Sand — fondo de apartado y caja Objetivo */ --ck-sand1:#FFFEFF; /* Sand 1 — pastillas y botón × */ --ck-sand3:#D8CFC7; /* Sand 3 — bordes */ --ck-sand7:#3A3735; /* Sand 7 — cuerpo de texto */ --ck-white:#FFFFFF; --ck-ico:url(/wcorp/gc/prod/es_ES/estaticos/infografia-cyberskills-framework/images/boton-mas.svg?t=001); } /* ===== Contenedor ===== A diferencia de otras piezas, esta va a ANCHO COMPLETO: sin borde ni fondo propio. `container-name` obligatorio (si no, un descendiente con container-type secuestra las @container de dentro — lección de la 011). */ #cskills{ container-type:inline-size; container-name:ck; width:100%; max-width: 980px; margin:0 auto; /* ANCHO COMPLETO del contenido sin margen vertical: la pieza se incrusta */ box-sizing:border-box; position:relative; text-align:left; font-family:'IberPangea Text',Arial,sans-serif; font-size:16px; line-height:20px; color:var(--ck-sand7); } /* ===== 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. */ #cskills *,#cskills *::before,#cskills *::after{box-sizing:border-box;} #cskills *{ 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; } /* `#cskills *` NO alcanza a los pseudo-elementos: se blindan aparte (sin `content`, para no crear pseudos donde no hay). El theme les mete margin negativo. */ #cskills *::before,#cskills *::after{ margin:0; padding:0; text-indent:0; letter-spacing:inherit; text-transform:inherit; } /* Listas: en el `li` además del `ul`, y el `li::before` con !important porque el theme pinta ahí SU viñeta con !important (esta pieza usa listas en Perfiles, pastillas y leyenda). */ #cskills ul,#cskills ol,#cskills li{list-style:none;} #cskills li::marker{content:none;} /* `display:none` además de `content:''`: con solo `content:''` se CREA un pseudo-elemento vacío que, en los `li` que son flex container (aquí las tarjetas de Perfiles), cuenta como un flex item más y añade un gap fantasma — 4 px por tarjeta. Con `display:none` no se genera caja y sigue anulando la viñeta que el theme intente pintar. */ #cskills li::before{content:'' !important; display:none !important; margin:0 !important;} #cskills img,#cskills svg{display:block; max-width:100%;} #cskills button{background:none; border:0; font:inherit; color:inherit; cursor:pointer;} #cskills .ck__inner{ padding:24px 0; /* ancho completo: sin padding lateral */ display:flex; flex-direction:column; gap:32px; } /* ===== Titular ===== */ #cskills .ck_title{ font-family:'IberPangea',Arial,sans-serif; font-weight:400; font-size:32px; line-height:36px; color:var(--ck-green1) !important; } #cskills .ck_title_r{font-weight:400;} #cskills .ck_title_b{font-weight:600;} /* SmBold */ /* ===== Apartados ===== */ #cskills .ck_sec{display:flex; flex-direction:column; gap:8px;} #cskills .ck_niveles,#cskills .ck_sec--cat{gap:16px;} #cskills .ck_h{ font-family:'IberPangea',Arial,sans-serif; font-weight:400; font-size:24px; line-height:28px; color:var(--ck-forest); } #cskills .ck_box{background:var(--ck-sand); border-radius:15px;} /* ===== B1 · Enfoque ===== */ #cskills .ck_enfoque{padding:24px 16px; display:flex; flex-direction:column; gap:16px;} #cskills .ck_enfoque_ill{width:100%; height:auto; border-radius:15px;} #cskills .ck_pills{display:flex; flex-direction:column; gap:8px;} #cskills .ck_pill{ background:var(--ck-sand1); border-radius:15px; padding:12px 24px; font-family:'IberPangea',Arial,sans-serif; font-size:16px; line-height:normal; color:var(--ck-forest); text-align:center; } #cskills .ck_pill:last-child{padding:16px 24px;} /* Figma: la de 2 líneas lleva 16 */ /* ===== B2 · Perfiles ===== */ #cskills .ck_perfiles{padding:16px;} #cskills .ck_grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:4px; row-gap:16px; } #cskills .ck_perfil{ display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:flex-end; } #cskills .ck_perfil_t{ /* 23 y no `normal`: Figma da 46 de alto para 2 líneas; con `normal` IberPangea calcula 25 y la tarjeta se va a 108 en vez de 104. */ font-family:'IberPangea',Arial,sans-serif; font-size:18px; line-height:23px; color:var(--ck-forest); text-align:center; } #cskills .ck_perfil_i{ flex:0 0 auto; width:54px; height:54px; background:var(--ck-white); border:1px solid var(--ck-forest); border-radius:15px; display:flex; align-items:center; justify-content:center; overflow:hidden; } /* ===== B3 · Niveles ===== */ #cskills .ck_ills{padding:24px 18px;} #cskills .ck_ills_row{display:flex; gap:4px; align-items:flex-end; justify-content:center;} /* La activa al 100 %, el resto al 20 % (comentario de diseño). */ /* `max-height` y no `height`: la fila necesita 548 y el layout de 565 llega hasta 460. Con el alto clavado, el flex encogía SOLO el ancho (ilustraciones aplastadas) y por debajo de ~515 desbordaba. Con el alto libre bajan a escala, sin deformarse. A 565 siguen a 128 exactos. */ #cskills .ck_ill{max-height:128px; height:auto; width:auto; min-width:0; opacity:.2;} #cskills .ck_niveles[data-nivel="4"] .ck_ill[data-ill="4"], #cskills .ck_niveles[data-nivel="3"] .ck_ill[data-ill="3"], #cskills .ck_niveles[data-nivel="2"] .ck_ill[data-ill="2"], #cskills .ck_niveles[data-nivel="1"] .ck_ill[data-ill="1"]{opacity:1;} #cskills .ck_lvls{display:flex; flex-direction:column; gap:16px;} /* --- desplegable cerrado --- */ #cskills .ck_lvl_head{ width:100%; display:flex; align-items:center; gap:16px; padding:7px 15px; /* 8/16 de Figma menos el borde: en Figma va por dentro */ background:var(--ck-white); border:1px solid var(--ck-sand3); border-radius:16px; text-align:left; } #cskills .ck_lvl_t{ flex:1 1 0; min-width:0; font-family:'IberPangea',Arial,sans-serif; font-weight:500; font-size:18px; line-height:normal; color:var(--ck-forest); } #cskills .ck_lvl_body{display:none;} /* --- desplegable abierto --- */ #cskills .ck_lvl.is-open{ background:var(--ck-white); border:1px solid var(--ck-sand3); border-radius:17px; overflow:hidden; /* recorta el header verde a la forma del contenedor: el borde sand3 no asoma por las esquinas superiores */ display:flex; flex-direction:column; gap:8px; padding-bottom:7px; } #cskills .ck_lvl.is-open .ck_lvl_head{ background:var(--ck-green1); border-color:var(--ck-green1); cursor:default; /* el abierto no se pulsa (D04) */ } #cskills .ck_lvl.is-open .ck_lvl_t{color:var(--ck-white);} #cskills .ck_lvl.is-open .ck_lvl_body{display:block;} #cskills .ck_lvl_in{display:flex; flex-direction:column; gap:24px; padding:8px 16px 16px;} #cskills .ck_lvl_d{ font-family:'IberPangea Text',Arial,sans-serif; font-weight:400; font-size:13px; line-height:normal; color:var(--ck-sand7); } #cskills .ck_obj{ background:var(--ck-sand); border-radius:50px; padding:8px 0; font-family:'IberPangea Text',Arial,sans-serif; font-weight:400; font-size:15px; line-height:20px; color:var(--ck-forest); text-align:center; } #cskills .ck_obj b{font-weight:700;} /* Icono + / × : un solo asset como MÁSCARA, así el color se controla por CSS (igual que la 012) */ #cskills .ck_ico{ flex:0 0 auto; width:32px; height:32px; border-radius:20px; background:var(--ck-green1); display:flex; align-items:center; justify-content:center; } #cskills .ck_ico::before{ content:''; width:13.5px; height:13.5px; background:var(--ck-sand1); -webkit-mask:var(--ck-ico) center/13.5px 13.5px no-repeat; mask:var(--ck-ico) center/13.5px 13.5px no-repeat; } #cskills .ck_lvl.is-open .ck_ico{ background:var(--ck-sand1); border:1px solid var(--ck-green1); transform:rotate(-45deg); /* el "+" girado ES la "×" */ } #cskills .ck_lvl.is-open .ck_ico::before{background:var(--ck-green1);} /* ===== B4 · Catálogos ===== */ #cskills .ck_txt{ font-family:'IberPangea Text',Arial,sans-serif; font-weight:400; font-size:16px; line-height:20px; color:var(--ck-sand7); } #cskills .ck_leg{display:flex; flex-direction:column; gap:8px; padding:8px 0;} #cskills .ck_leg_row{display:flex; gap:16px; align-items:center;} #cskills .ck_leg_i{ display:flex; gap:8px; align-items:center; font-family:'IberPangea Text',Arial,sans-serif; font-style:italic; font-weight:400; font-size:14px; line-height:18px; color:var(--ck-forest); white-space:nowrap; } #cskills .ck_leg_i img{flex:0 0 auto;} /* ===== Estados de los botones (A-001) ===== Figma no define hover para este componente; se toma el tratamiento de la 012 (D05). `box-shadow` y no `border`: un borde real restaría ancho al contenido y movería el texto. */ #cskills .ck_lvl:not(.is-open) .ck_lvl_head:hover{box-shadow:inset 0 0 0 1px var(--ck-sand3);} #cskills .ck_lvl:not(.is-open) .ck_lvl_head:hover .ck_ico{background:var(--ck-forest);} #cskills .ck_lvl_head:focus-visible{outline:2px solid var(--ck-green1); outline-offset:2px;} /* Variantes de ilustración y saltos manuales: por defecto manda el diseño de 565 */ #cskills .ck_v290{display:none;} #cskills .ck_lvl_ill{display:none;} #cskills .ck_br290{display:none;} /* ========================================================================== Móvil (Figma 290) — un solo punto de cambio El 290 NO es el 565 apilado: cambia la tipografía, Perfiles va en 3/2/3 y la ilustración de cada nivel se mete DENTRO de su desplegable. ========================================================================== */ @container ck (max-width:459px){ #cskills .ck__inner{padding:16px 0; gap:24px;} #cskills .ck_title{font-size:30px; line-height:34px;} /* Los saltos manuales son del 565: aquí parten las frases donde no toca. */ #cskills .ck_br565{display:none;} /* Al reves: en 290 los titulos de nivel SI parten tras el guion (asi esta en Figma, y por eso los cuatro cerrados miden 62 aunque el texto quepa en una linea). */ #cskills .ck_br290{display:inline;} #cskills .ck_sec,#cskills .ck_niveles,#cskills .ck_sec--cat{gap:8px;} /* --- B1 · Enfoque: otra ilustración, no la misma escalada --- */ #cskills .ck_v565{display:none;} #cskills .ck_v290{display:block;} /* --- B2 · Perfiles: filas de 3 / 2 / 3 --- 6 columnas y spans, para que la fila de 2 salga de la MISMA lista (un solo