/* ===== IberPangea + IberPangea Text (self-contained) ===== */ @font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/partes-aerogenerador/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/partes-aerogenerador/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/partes-aerogenerador/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/partes-aerogenerador/fonts/IberPangeaText-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;} :root{ /* No hay `--pa-green` (#00A443) a propósito: el blanco sobre él sólo da 3,27:1 y no llega a AA. Los círculos numerados van en Green1 (5,18:1) por indicación de diseño (D16). */ --pa-green1:#007F33; --pa-sunset:#FF9C1A; --pa-forest:#00402A; --pa-sand:#FFF5EC; --pa-sand1:#FFFEFF; --pa-sand6:#615D5A; } /* ===== Caja exterior ===== */ #partaero{ container-type:inline-size; width:100%; max-width:980px; margin:0 auto; box-sizing:border-box; background:var(--pa-sand); border-radius:15px; text-align:left; position:relative; } /* --- Blindaje frente al theme de Liferay (docs/VALIDACION.md) ------------------- La herencia PIERDE contra cualquier declaración del theme, por debilísima que sea. `inherit` sí es una declaración: gana al theme y conserva el valor del padre. */ #partaero *{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;} #partaero ul,#partaero ol,#partaero li{list-style:none;} #partaero li::marker{content:none;} #partaero li::before{content:'' !important; display:none !important; margin:0 !important;} /* `#partaero *` NO alcanza a los pseudo-elementos: hay que blindarlos aparte, y sin `content` para no crear pseudos donde no los hay. El theme les mete `margin-left` negativo. */ #partaero *::before,#partaero *::after{margin:0; padding:0; text-indent:0; letter-spacing:inherit; text-transform:inherit;} #partaero img{display:block; max-width:100%;} #partaero button{font:inherit; cursor:pointer; border:0; background:transparent; color:inherit; appearance:none; -webkit-appearance:none;} #partaero{font-family:'IberPangea Text',sans-serif; color:var(--pa-sand6); font-size:16px; line-height:20px;} /* El padding va DENTRO: `@container` no reestila el propio contenedor, sólo sus descendientes. */ /* Figma: 24 entre el título y el cuerpo, y 16 entre las tres piezas del cuerpo. */ #partaero .pa_inner{display:flex; flex-direction:column; gap:24px; padding:16px;} #partaero .pa_body{display:flex; flex-direction:column; gap:16px;} /* ===== Título ===== */ /* !important: en móvil el theme pinta los títulos con color:#427314 !important */ #partaero .pa_title{font-family:'IberPangea',sans-serif; font-weight:600; font-size:30px; line-height:34px; color:var(--pa-green1) !important; max-width:208px;} /* ===== Tarjeta de la escena =================================================== La caja de referencia de los once puntos es la propia tarjeta, y sus posiciones van en % de ella (design/indicadores/medidas.md). El botón mide 32 px FIJOS en los dos tamaños: la posición va en %, el tamaño en px. */ #partaero .pa_card{background:#fff; border-radius:15px; overflow:hidden;} /* La escena NO escala nunca: crece con la pieza hasta su tamaño de diseño y ahí se para, centrada. Como los once puntos se posicionan en % DE LA ESCENA, al no crecer ésta se quedan exactamente donde están sin tocar ninguna coordenada. El tope se pone con `max-width`, no con otro breakpoint: por debajo no llega a aplicarse y por encima manda. */ #partaero .pa_scene{position:relative; width:100%; max-width:501px; margin-inline:auto; aspect-ratio:258/510;} #partaero .pa_art{position:absolute;} #partaero .pa_art--turbina{left:34.787%; top:4.706%; width:30.424%; height:41.569%;} #partaero .pa_art--zoom {left:6.202%; top:50.980%; width:87.597%; height:44.313%;} /* ===== Los once puntos ===== */ #partaero .pa_pt{ --c:var(--pa-sunset); /* gobierna círculo, línea y bolita a la vez */ position:absolute; width:32px; height:32px; border-radius:50%; background:var(--c); color:var(--pa-sand1); font-family:'IberPangea',sans-serif; font-weight:600; font-size:18px; line-height:1.071; display:flex; align-items:center; justify-content:center; z-index:2; } #partaero .pa_pt span{pointer-events:none;} #partaero .pa_pt:focus-visible{outline:2px solid #007ACB; outline-offset:2px;} @media (hover:hover){ #partaero .pa_pt:hover{--c:var(--pa-green1);} } /* El conector: línea de 1px desde el borde del botón. `--l` es su largo visible y `--d` la dirección. Los puntos 4 y 5 no llevan (se apoyan sobre la pieza). */ /* Línea de 1px + BOLITA de 5,33 en el extremo que apunta al dibujo, los dos del color del punto (medido en los assets de Figma: `fill="#00A443"` el activo, `fill="#FF9C1A"` los inactivos). `--l` es la distancia del borde del botón al extremo; la bolita va centrada ahí. */ #partaero .pa_pt::after,#partaero .pa_pt::before{content:''; position:absolute; background:var(--c); z-index:-1;} #partaero .pa_pt::before{width:5.33px; height:5.33px; border-radius:50%;} #partaero .pa_pt:not([data-d])::after,#partaero .pa_pt:not([data-d])::before{content:none;} /* el 4 y el 5 no llevan */ #partaero .pa_pt[data-d="i"]::after{width:var(--l); height:1px; right:100%; top:calc(50% - .5px);} #partaero .pa_pt[data-d="d"]::after{width:var(--l); height:1px; left:100%; top:calc(50% - .5px);} #partaero .pa_pt[data-d="b"]::after{height:var(--l); width:1px; top:100%; left:calc(50% - .5px);} #partaero .pa_pt[data-d="a"]::after{height:var(--l); width:1px; bottom:100%;left:calc(50% - .5px);} #partaero .pa_pt[data-d="i"]::before{right:calc(100% + var(--l) - 2.665px); top:calc(50% - 2.665px);} #partaero .pa_pt[data-d="d"]::before{left:calc(100% + var(--l) - 2.665px); top:calc(50% - 2.665px);} #partaero .pa_pt[data-d="b"]::before{top:calc(100% + var(--l) - 2.665px); left:calc(50% - 2.665px);} #partaero .pa_pt[data-d="a"]::before{bottom:calc(100% + var(--l) - 2.665px);left:calc(50% - 2.665px);} /* El activo, en verde */ #partaero[data-active="1"] .pa_pt[data-go="1"], #partaero[data-active="2"] .pa_pt[data-go="2"], #partaero[data-active="3"] .pa_pt[data-go="3"], #partaero[data-active="4"] .pa_pt[data-go="4"], #partaero[data-active="5"] .pa_pt[data-go="5"], #partaero[data-active="6"] .pa_pt[data-go="6"], #partaero[data-active="7"] .pa_pt[data-go="7"], #partaero[data-active="8"] .pa_pt[data-go="8"], #partaero[data-active="9"] .pa_pt[data-go="9"], #partaero[data-active="10"] .pa_pt[data-go="10"], #partaero[data-active="11"] .pa_pt[data-go="11"]{--c:var(--pa-green1);} /* posiciones — 290 */ #partaero .pa_pt[data-go="1"] {left:78.682%; top:5.294%;} #partaero .pa_pt[data-go="2"] {left:18.605%; top:26.471%;} #partaero .pa_pt[data-go="3"] {left:75.581%; top:42.353%;} #partaero .pa_pt[data-go="4"] {left:10.078%; top:70.784%;} #partaero .pa_pt[data-go="5"] {left:79.457%; top:65.882%;} #partaero .pa_pt[data-go="6"] {left:35.934%; top:64.118%; --l:19px;} #partaero .pa_pt[data-go="7"] {left:46.899%; top:56.667%; --l:30px;} #partaero .pa_pt[data-go="8"] {left:56.477%; top:86.667%; --l:38px;} #partaero .pa_pt[data-go="9"] {left:54.651%; top:49.216%; --l:57px;} #partaero .pa_pt[data-go="10"]{left:64.229%; top:79.608%; --l:31px;} #partaero .pa_pt[data-go="11"]{left:71.593%; top:86.275%; --l:58px;} #partaero .pa_pt[data-go="1"],#partaero .pa_pt[data-go="3"]{--l:39px;} #partaero .pa_pt[data-go="2"]{--l:27px;} /* ===== Panel de la parte ====================================================== Los once apilados en la MISMA celda de grid: el alto es el del más alto y la pieza no da saltos al navegar (D06). Ocultos con visibility (salen del árbol de accesibilidad) + inert (foco y clics). Sin transición: no hay animación (D03). */ #partaero .pa_panel{display:grid; background:#fff; border-radius:15px;} #partaero .pa_slide{grid-area:1/1; display:flex; flex-direction:column; gap:16px; padding:16px; visibility:hidden;} #partaero[data-active="1"] .pa_slide[data-slide="1"], #partaero[data-active="2"] .pa_slide[data-slide="2"], #partaero[data-active="3"] .pa_slide[data-slide="3"], #partaero[data-active="4"] .pa_slide[data-slide="4"], #partaero[data-active="5"] .pa_slide[data-slide="5"], #partaero[data-active="6"] .pa_slide[data-slide="6"], #partaero[data-active="7"] .pa_slide[data-slide="7"], #partaero[data-active="8"] .pa_slide[data-slide="8"], #partaero[data-active="9"] .pa_slide[data-slide="9"], #partaero[data-active="10"] .pa_slide[data-slide="10"], #partaero[data-active="11"] .pa_slide[data-slide="11"]{visibility:visible;} /* En 290 el texto NO se estira: con el panel a alto fijo, el sobrante debe quedar al final y no abrirse entre el texto y la ilustración. En 565 sí crece, para repartir el ancho con la figura. */ #partaero .pa_txt{display:flex; flex-direction:column; gap:16px; flex:0 0 auto; min-width:0;} #partaero .pa_head{display:flex; align-items:center; gap:16px;} /* El número del panel va SIEMPRE en verde, aunque su punto esté naranja por no ser el activo */ /* Green1, no el verde normal: blanco sobre Green1 da 5,18:1 y pasa AA; sobre el verde normal daba 3,27 y no llegaba. Cambio pedido por diseño el 1 sep 2026 (D16). */ #partaero .pa_num{flex:0 0 auto; width:32px; height:32px; border-radius:50%; background:var(--pa-green1); color:var(--pa-sand1); font-family:'IberPangea',sans-serif; font-weight:600; font-size:18px; line-height:1.071; display:flex; align-items:center; justify-content:center;} /* `text-wrap:balance` reparte las líneas para que no quede una suelta y corta al final. No cambia el número de líneas, así que no altera ninguna de las medidas. */ #partaero .pa_name{font-family:'IberPangea',sans-serif; font-weight:500; font-size:18px; line-height:22px; color:var(--pa-green1) !important; text-wrap:balance;} #partaero .pa_desc{font-size:16px; line-height:20px; color:var(--pa-sand6); text-wrap:balance;} /* La caja tiene medida propia: si se dejara al alto natural de la imagen, cada slide daría un alto distinto (los SVG de 290 van recortados a su contenido y no comparten proporción). */ #partaero .pa_fig{position:relative; background:var(--pa-sand); border-radius:15px; overflow:hidden; width:100%; aspect-ratio:226/168;} /* La imagen se ajusta sola a lo que quepa: NO se le fija medida, se le pone tope. Con `width/height:100%` la altura no llegaba a resolverse y el dibujo crecía por debajo de la caja (7 de 11 slides, hasta 34,6 px), y el `overflow:hidden` lo tapaba. Así no se sale nunca, sea cual sea la proporción del dibujo y la de la caja. */ /* Posicionada en absoluto: así la caja de referencia es definida siempre y `object-fit:contain` puede hacer su trabajo. Con medidas en % sobre el flujo normal, el porcentaje de alto no llegaba a resolverse contra la caja y el dibujo se pintaba a su tamaño natural, saliéndose por abajo. */ #partaero .pa_fig img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;} /* --- Slide 3 (Base): DOS cajas ------------------------------------------------- Es el único con dos dibujos, y en Figma reparte el panel distinto que los demás: texto 226,5 e ilustraciones 226,5 (en vez de 245 / 208). Las dos cajas miden 105,25 con un hueco de 16 — y el radio de 15 lo pinta el CSS, no el SVG, para que no se escale con el dibujo. */ #partaero .pa_figs{display:flex; gap:16px; width:100%; aspect-ratio:226/168;} #partaero .pa_figs .pa_fig{flex:1 1 0; width:auto; aspect-ratio:auto; height:100%;} /* ===== Controles ===== */ #partaero .pa_ctrl{display:flex; align-items:center; justify-content:space-between; height:32px;} #partaero .pa_count{border:1px solid var(--pa-forest); border-radius:24px; padding:6px 16px; font-family:'IberPangea Text',sans-serif; font-style:italic; font-size:14px; line-height:18px; color:var(--pa-forest); white-space:nowrap;} #partaero .pa_cur{color:var(--pa-green1);} #partaero .pa_nav{display:flex; gap:16px;} #partaero .pa_arrow{width:32px; height:32px; background-repeat:no-repeat; background-size:100% 100%;} /* Un único asset: en Figma la flecha «anterior» es la misma volteada, no un dibujo aparte (comprobado: los dos SVG que exportó el conector eran idénticos byte a byte). */ #partaero .pa_arrow{background-image:url('/wcorp/gc/prod/es_ES/estaticos/partes-aerogenerador/images/flecha.svg');} #partaero .pa_prev{transform:scaleX(-1);} /* El «disabled» de Figma es el mismo dibujo con opacity .5: se reproduce en CSS */ #partaero .pa_arrow:disabled{opacity:.5; cursor:default;} #partaero .pa_arrow:focus-visible{outline:2px solid #007ACB; outline-offset:2px; border-radius:50%;} @media (hover:hover){ #partaero .pa_arrow:not(:disabled):hover{opacity:.75;} } /* ============================================================================== 565 — ÚNICO punto de cambio de layout: la escena pasa de apilada a lado a lado y el panel de columna a fila. ============================================================================== */ @container (min-width:480px){ #partaero .pa_title{font-size:32px; line-height:36px; max-width:none;} #partaero .pa_scene{aspect-ratio:501/375;} #partaero .pa_art--turbina{left:13.822%; top:21.867%; width:15.667%; height:56.533%;} #partaero .pa_art--zoom {left:38.673%; top:12.000%; width:57.086%; height:76.267%;} #partaero .pa_pt[data-go="1"] {left:34.331%; top:13.600%;} #partaero .pa_pt[data-go="2"] {left:7.186%; top:53.067%;} #partaero .pa_pt[data-go="3"] {left:32.136%; top:76.800%;} #partaero .pa_pt[data-go="4"] {left:41.317%; top:53.867%;} #partaero .pa_pt[data-go="5"] {left:86.427%; top:40.800%;} #partaero .pa_pt[data-go="6"] {left:58.625%; top:33.067%; --l:38px;} #partaero .pa_pt[data-go="7"] {left:66.866%; top:29.067%; --l:25px;} #partaero .pa_pt[data-go="8"] {left:71.799%; top:73.867%; --l:46px;} #partaero .pa_pt[data-go="9"] {left:71.058%; top:16.267%; --l:57px;} #partaero .pa_pt[data-go="10"]{left:76.789%; top:58.933%; --l:31px;} #partaero .pa_pt[data-go="11"]{left:81.180%; top:68.000%; --l:58px;} #partaero .pa_inner{padding:24px 32px;} #partaero .pa_slide{flex-direction:row; align-items:stretch;} #partaero .pa_txt{flex:1 0 0;} /* La ilustración del slide no se ensancha —se queda en 208 y crece el texto—, pero SÍ necesita alto mínimo: la caja se estira con la columna de texto, y al ensanchar la pieza el texto ocupa menos líneas, la caja se queda más baja y `contain` reducía el dibujo por altura (a 980 salía al 52 %). Con el mínimo en 208 —su alto a 565— el dibujo se mantiene a tamaño completo a cualquier ancho, y el alto de la pieza deja de bailar. */ #partaero .pa_slide > .pa_fig{flex:0 0 208px; width:208px; aspect-ratio:auto; min-height:208px;} /* Figma reparte el panel de la 3 a mitades: texto 226,5 e ilustraciones 226,5. NO se clava en px —no caben cuando la pieza mide menos de 565 y desbordaba a 480-520—: con las dos columnas a `flex:1 1 0` se reparten a partes iguales el espacio que queda tras el hueco de 16, que a 565 da exactamente 226,5 cada una y sigue cuadrando a cualquier ancho. */ /* Las dos cajas del slide 3: se reparten a mitades mientras quepan y se paran en 226,5, así que a partir de 565 dejan de crecer y el sobrante se lo lleva el texto. */ #partaero .pa_figs{flex:1 1 0; max-width:226.5px; aspect-ratio:auto; align-self:stretch; min-height:208px;} #partaero .pa_slide[data-slide="3"] .pa_txt{flex:1 1 0;} }