/* mapa-eolica-marina · Fusión Mapa de eólica marina Un solo HTML para 3 tamaños: 980, 565 y 290. La pieza se topa en 980 (D11). Sin JavaScript (D04). Medidas en specs/019-mapa-eolica-marina/design/medidas.md */ @font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/mapa-eolica-marina/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/mapa-eolica-marina/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/mapa-eolica-marina/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/mapa-eolica-marina/fonts/IberPangeaText-SmBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;} :root{ --om-green1:#007F33; /* nombre de país */ --om-forest:#00402A; /* chapa numerada */ --om-sand1:#FFFEFF; /* número de la chapa */ --om-sand4:#B0A9A3; /* borde de la ficha en 980 */ --om-sand3:#D8CFC7; /* borde de la ficha en 290 y 565 */ --om-borde:var(--om-sand3); /* el tramo grande lo cambia a Sand 4 */ --om-sand7:#3A3735; /* texto de los parques */ --om-naranja:#FF9C1A; /* conectores (Iberdrola Sunset) */ } /* ── BLINDAJE ANTI-THEME ───────────────────────────────────────────────────── Va aquí, en el primer commit del CSS, no al final. La pieza puede acabar inyectada en el DOM del portal (D13: partes-aerogenerador es documento completo, se sube como ZIP y aun así lo necesitó), y la HERENCIA pierde contra cualquier declaración del theme. */ #offshoremap{ /* La raíz tiene que DECLARAR todo lo heredable: si hereda, el `inherit` de abajo propaga fielmente el valor del theme hacia dentro. */ font-family:'IberPangea Text',Arial,sans-serif; font-size:16px; line-height:20px; color:var(--om-sand7); letter-spacing:normal; text-align:left; text-transform:none; white-space:normal; text-decoration:none; font-style:normal; font-weight:400; box-sizing:border-box; display:block !important; margin:0 auto; padding:0; container-type:inline-size; /* los tramos se deciden por el HUECO, no por la ventana */ max-width:980px; /* 980 es el ancho máximo de la pieza (D11) */ } #offshoremap *{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;} #offshoremap ul,#offshoremap ol,#offshoremap li{list-style:none;} #offshoremap li::marker{content:none;} #offshoremap li::before{content:'' !important; display:none !important; margin:0 !important;} /* `#offshoremap *` NO alcanza a los pseudo-elementos: hay que blindarlos aparte, y sin `content` para no crear pseudos donde no los hay. */ #offshoremap *::before,#offshoremap *::after{margin:0; padding:0; text-indent:0; letter-spacing:inherit; text-transform:inherit;} /* `display` NO se hereda, así que el `inherit` de arriba no vale: se declara. */ #offshoremap .om_inner,#offshoremap .om_mapa,#offshoremap .om_fichas, #offshoremap .om_ficha,#offshoremap .om_parques{display:block !important;} #offshoremap .om_pais,#offshoremap .om_parque{display:block !important;} #offshoremap .om_dibujo{display:block !important;} #offshoremap .om_num,#offshoremap .om_parque b{display:block !important;} /* El estado y la cifra se declaran POR TRAMO (bloque a 290, en línea desde 565), así que no van en este bloque: un `!important` aquí se comería el responsive. */ /* ── ESTRUCTURA ────────────────────────────────────────────────────────────── El padding va en .om_inner y no en la raíz: `@container` no reestila su propio contenedor, sólo a sus descendientes. */ /* ── TOPAR Y CENTRAR ───────────────────────────────────────────────────────── El escenario se dibuja SIEMPRE a su ancho de diseño (290, 565 o 980, el mayor que quepa) y se centra. Nunca se estira. Es lo que hace que la geometría cuadre en TODOS los anchos y no sólo en los tres marcos: si la posición va en % y la caja en px, en cuanto el contenedor crece el conector y su tarjeta se separan — llegaban a 75 px de hueco. Lo que se topa es el MAPA, no la pieza entera: por debajo de 980 las fichas van debajo del mapa, en su propia rejilla, y ahí sí ocupan el 100% del ancho disponible — no tiene sentido dejarlas cortas a 558 porque el dibujo mida 290. El dibujo, las pastillas y los conectores viven dentro de .om_mapa, así que topando .om_mapa la geometría sigue siendo exacta en todos los anchos. */ #offshoremap .om_inner{width:100%; margin:0 auto;} #offshoremap .om_mapa{ position:relative; aspect-ratio:1194 / 608; /* el dibujo escala sin deformarse y sin altos fijos */ width:100%; } #offshoremap .om_dibujo{width:100%; height:100%; object-fit:contain;} /* ── LA FICHA (igual en los 4 tamaños salvo la fila de título) ────────────── */ #offshoremap .om_ficha{ background:#fff; border-radius:15px; padding:16px; /* `box-shadow: inset` y NO `border`: Figma no cuenta el trazo interior en el tamaño del marco, así que con un borde real el contenido pierde 2 px (141 en vez de 143) y los textos parten donde en el diseño no parten. Ya nos pasó antes. */ box-shadow:inset 0 0 0 1px var(--om-borde); } #offshoremap .om_pais{ font-family:'IberPangea',Arial,sans-serif; font-weight:500; font-size:18px; line-height:22px; color:var(--om-green1); display:flex !important; align-items:center; /* el separador es el borde inferior del título, a ancho completo del contenido */ padding-bottom:10px; border-bottom:1px solid var(--om-borde); } #offshoremap .om_num{ flex:0 0 32px; width:32px; height:32px; border-radius:50%; background:var(--om-forest); color:var(--om-sand1); font-family:'IberPangea',Arial,sans-serif; font-weight:600; font-size:18px; line-height:32px; text-align:center; display:none !important; /* sólo se ve en 565 y 290 (D10) */ } #offshoremap .om_parques{padding-top:10px;} /* 11 y no 10: en Figma los parques van a paso de 51 y su caja de texto mide 41, pero el texto renderizado son 40 (dos líneas de 20). Resolviendo con las fichas de 3, 5 y 6 parques a la vez, el único par que cuadra en las tres es bloque 40 + hueco 11. */ #offshoremap .om_parque + .om_parque{margin-top:11px;} /* El NOMBRE del parque no parte nunca; la línea del estado (la de los MW/GW) sí. Decisión del usuario tras medirlo: hay nombres que necesitan 6-9 px más que su ficha y en Figma aparecen en una línea igual. Con el relleno de 16 px, ese exceso queda DENTRO del borde y no se nota. Los estados, en cambio, pueden necesitar 33-42 px en los tamaños pequeños: ahí forzar una línea los sacaría de la ficha. */ #offshoremap .om_parque b{ font-family:'IberPangea Text',Arial,sans-serif; font-weight:600; /* 14 en el tramo base: a 290 Figma baja el nombre del parque a 14 para que quepan las dos columnas. Desde 565 vuelve a 16. Y AQUÍ EL NOMBRE PARTE: con dos columnas de 125, «New England Wind 2» no cabe y Figma lo parte en dos líneas. Forzar una sola lo sacaba 11 px de la ficha. El `nowrap` se aplica desde 565, donde el exceso es de 6-9 px y queda dentro del relleno. */ font-size:14px; line-height:20px; color:var(--om-sand7); } #offshoremap .om_parque span{ font-family:'IberPangea Text',Arial,sans-serif; font-weight:400; font-size:14px; line-height:20px; color:var(--om-sand7); } /* El propio `li` lleva el mismo ritmo. Desde 565 el estado va EN LÍNEA, y entonces el alto de la línea lo fija el `strut` del bloque (su font/line-height), no el del span: heredando el 22 de la raíz, cada estado sumaba 2-3 px y la ficha se pasaba. */ #offshoremap .om_parque{ font-family:'IberPangea Text',Arial,sans-serif; font-size:14px; line-height:20px; } /* Australia no tiene nombre de parque: su primera línea es un ESTADO, y en Figma va en Regular, no en SmBold (es la única ficha así). En SmBold no cabe en los 99 px de la ficha y parte en dos, subiéndola de 115 a 135. */ #offshoremap .om_ficha--australia .om_parque b{font-weight:400;} /* Y su cifra («Hasta 3 GW») es un `span` sin clase: declara su `display` como los demás, o un theme con `span{display:block}` se lo cambia (la puerta de aislamiento, T13b). */ #offshoremap .om_ficha--australia .om_parque span{display:inline !important;} /* A 290 el ESTADO y la CIFRA van en dos líneas: nombre / estado / cifra. Es lo que pone Figma (la ficha de Francia mide 144 → 144-68-16 = 60 = tres líneas de 20) y además es lo único legible: dejando que partan solas, el corte cae donde toque y deja el guión colgando («En desarrollo -» / «375 MW»). El separador se esconde. */ #offshoremap .om_estado,#offshoremap .om_cifra{display:block !important;} #offshoremap .om_sep{display:none !important;} /* ── LO QUE VA SOBRE EL MAPA ───────────────────────────────────────────────── Anclado en % del contenedor del mapa, así escala con él (R4). */ #offshoremap .om_pastilla{ /* left/top son la ESQUINA, que es lo que da Figma; sin translate. */ position:absolute; background:#fff; border:1px solid var(--om-sand4); border-radius:19px; padding:8px 16px; height:38px; font-family:'IberPangea',Arial,sans-serif; font-weight:500; /* 16 en el tramo base: los seis textos de las pastillas de 290 miden 0,88-0,90 de lo que miden en 565, proporción uniforme que sobre 18 da 16. En >=565 vuelve a 18. */ font-size:16px; line-height:22px; color:var(--om-green1); white-space:nowrap; display:none !important; /* sólo en 565 y 290 */ } /* Conector: línea de 1,5 px en codo que sale del borde de su ficha (o de su pastilla en los tamaños pequeños), gira una vez y termina en un punto de ø8 sobre el país. Sacado del SVG de Figma con scripts/gen-conectores-019.js — las 24 coordenadas se generan, no se transcriben. Se ven en los cuatro tamaños. */ /* ORDEN DE PINTADO: la pastilla y la ficha SIEMPRE por encima del conector, para que un conector que se pase de largo quede por debajo y no se vea cruzando la tarjeta. El conector NO lleva `z-index`, y es importante: `.om_mapa` no crea contexto de apilado (posición absoluta sin z-index), así que un `z-index:1` en el conector lo promociona al contexto de `.om_inner` y lo pone POR ENCIMA de `.om_fichas` — que es justo lo contrario de lo que se quiere, y es lo que rompió el desktop. Sin z-index, el conector se pinta dentro del subárbol de `.om_mapa`, que va antes de `.om_fichas` en el DOM: las fichas quedan encima por orden. Y la pastilla, que sí es hermana del conector, gana con `z-index:2`. */ #offshoremap .om_con{position:absolute; display:block !important; box-sizing:border-box;} #offshoremap .om_con::after{ content:''; position:absolute; display:block !important; width:8px; height:8px; border-radius:50%; background:var(--om-naranja); } /* ════════════════════════════════════════════════════════════════════════════ TRAMO BASE (< 565) · el marco de 290: mapa arriba y fichas apiladas ════════════════════════════════════════════════════════════════════════════ */ /* El área del mapa lleva la proporción del MARCO, no la del dibujo: el dibujo va dentro, con aire alrededor donde el diseño pone las pastillas. */ #offshoremap .om_mapa{aspect-ratio:290 / 230;} /* El mapa lleva SU PROPIA caja en 290 y 565: los SVG de esos dos marcos traen un rect de 290x230 y 565x276 con radio 15, relleno blanco y trazo Sand 3 — el mismo borde que las fichas de estos tramos. En 980 el diseño NO trae marco (su SVG sólo lleva los seis recuadros de las fichas), así que allí se quita. `box-shadow: inset` y no `border`, por lo de siempre: un borde real comería 2 px de la caja y descolocaría todos los porcentajes del dibujo, las pastillas y los conectores. */ #offshoremap .om_mapa{ background:#fff; border-radius:15px; box-shadow:inset 0 0 0 1px var(--om-sand3); } #offshoremap .om_dibujo{ position:absolute; left:3.793%; top:20.435%; width:92.069%; height:59.130%; } /* Rejilla de fichas, con el orden de las chapas (5 nov 2026: Reino Unido, Alemania, Francia, EE.UU, Australia y Japón): Australia y Japón en fila, el resto a ancho completo. El hueco es 8 en todas las filas y columnas. */ #offshoremap .om_fichas{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; align-items:stretch; justify-items:stretch; /* declarado: un theme con `ul{align-items:…}` encoge la más baja */ margin-top:16px; } #offshoremap .om_ficha--uk,#offshoremap .om_ficha--alemania, #offshoremap .om_ficha--francia,#offshoremap .om_ficha--eeuu{grid-column:1 / -1;} /* Aquí la chapa numerada SÍ se ve (D10), y la fila de título pasa de 22 a 32. */ #offshoremap .om_num{display:block !important;} #offshoremap .om_pais{gap:8px;} /* Las pastillas de nombre van sobre el mapa. */ /* A 290, TODA ficha con más de un parque parte en DOS columnas de 125 con hueco 8 — EE.UU, Reino Unido y también Alemania. */ #offshoremap .om_ficha--eeuu .om_parques, #offshoremap .om_ficha--uk .om_parques, #offshoremap .om_ficha--alemania .om_parques{ /* multicolumna y NO rejilla: en Figma las dos columnas son independientes (cada una apila lo suyo, 220 y 150). Con rejilla las filas se alinean entre columnas y el alto sale 240 en vez de 220. */ display:block !important; columns:2; column-gap:8px; } #offshoremap .om_ficha--eeuu .om_parque, #offshoremap .om_ficha--uk .om_parque, #offshoremap .om_ficha--alemania .om_parque{break-inside:avoid; margin:0 0 10px;} #offshoremap .om_ficha--eeuu .om_parque:last-child, #offshoremap .om_ficha--uk .om_parque:last-child, #offshoremap .om_ficha--alemania .om_parque:last-child{margin-bottom:0;} #offshoremap .om_ficha--eeuu .om_parque + .om_parque, #offshoremap .om_ficha--uk .om_parque + .om_parque{margin-top:0;} #offshoremap .om_pastilla{display:block !important; z-index:2;} /* Ancladas por su PUNTO DE CONTACTO con el conector, no por su esquina (D18). Así la pastilla NO tiene que crecer con el mapa: el punto donde el conector la toca va en %, y de ahí la pastilla se extiende su tamaño fijo. Anclando la esquina, al crecer el mapa los % se separaban y el conector dejaba de llegarle. El desplazamiento va en PROPORCIÓN del ancho de la propia pastilla (`translateX`), no en píxeles: el CSS es único para ES/EN/PT y «Reino Unido» mide 119 px pero «UK» 55, así que en píxeles el contacto se salía de la pastilla y el conector quedaba a 40 px. El vertical sí va en píxeles, porque el alto es 38 en los tres idiomas. Generado por `scripts/gen-anclas-019.js`, que deduce el extremo libre de cada conector de sus bordes reales y comprueba que cae dentro de la pastilla. */ #offshoremap .om_pastilla--eeuu {left:19.305%; top:77.819%; transform:translateX(-63.2768%);} #offshoremap .om_pastilla--uk {left:35.178%; top:calc(22.174% - 38px); transform:translateX(-79.8319%);} #offshoremap .om_pastilla--francia {left:47.236%; top:77.819%; transform:translateX(-53.6932%);} #offshoremap .om_pastilla--alemania {left:56.897%; top:calc(22.174% - 38px); transform:translateX(-33.0879%);} #offshoremap .om_pastilla--japon {left:89.316%; top:calc(40.000% - 37px); transform:translateX(-73.1355%);} #offshoremap .om_pastilla--australia{left:80.345%; top:77.819%; transform:translateX(-51.9734%);} /* ════════════════════════════════════════════════════════════════════════════ TRAMO ≥ 565 · mapa arriba y fichas en rejilla de 3 / 2 / 1 ════════════════════════════════════════════════════════════════════════════ */ @container (min-width: 565px){ /* Multicolumna también aquí: EE.UU en 2 y Reino Unido en 3. En Figma las columnas son independientes; con rejilla las filas se alinean y el alto no cuadra. */ #offshoremap .om_ficha--eeuu .om_parques{columns:2;} /* Alemania vuelve a UNA columna desde 565 */ #offshoremap .om_ficha--alemania .om_parques{columns:auto;} #offshoremap .om_ficha--alemania .om_parque{margin:0;} /* 11 como el resto de una columna: es el redondeo de la caja de texto de Figma */ #offshoremap .om_ficha--alemania .om_parque + .om_parque{margin-top:11px;} #offshoremap .om_parque b{font-size:16px;} /* De 565 arriba el ESTADO tampoco parte. Los dos que no caben se pasan 3,7 y 7,3 px, que quedan dentro del relleno de 16 y no se ven — y así la ficha mide lo que dice Figma. A 290 sí parte, porque allí necesitan hasta 42 px y se saldrían. */ #offshoremap .om_parque span{white-space:nowrap;} /* Desde 565 el estado y la cifra vuelven a UNA línea, con su separador: la ficha mide 125 → 125-68-16 = 41 = dos líneas (nombre + estado). */ #offshoremap .om_estado,#offshoremap .om_cifra, #offshoremap .om_sep{display:inline !important;} #offshoremap .om_mapa{aspect-ratio:565 / 276;} #offshoremap .om_dibujo{left:7.434%; top:6.884%; width:85.133%; height:88.768%;} /* 6 columnas de 87,5 con hueco 8 (5 nov 2026, el orden nuevo): Reino Unido (374) y Alemania (183); Francia (183) y EE.UU (374); Australia y Japón, mitad y mitad (278,5). 374 = 4*87,5 + 3*8; 183 = 2*87,5 + 8. */ #offshoremap .om_fichas{grid-template-columns:repeat(6,minmax(0,1fr));} #offshoremap .om_ficha--uk,#offshoremap .om_ficha--eeuu{grid-column:span 4;} #offshoremap .om_ficha--alemania,#offshoremap .om_ficha--francia{grid-column:span 2;} #offshoremap .om_ficha--australia,#offshoremap .om_ficha--japon{grid-column:span 3;} /* el nombre se separa 16 de la chapa (en 290 son 8) */ #offshoremap .om_pais{gap:16px;} #offshoremap .om_pastilla{font-size:18px;} /* Mismo criterio que en el tramo base: ancladas por su punto de contacto. */ #offshoremap .om_pastilla--eeuu {left:12.926%; top:calc(51.438% - 2px); transform:translateX(-49.4814%);} #offshoremap .om_pastilla--uk {left:50.091%; top:calc(24.270% - 38px); transform:translateX(-49.3852%);} #offshoremap .om_pastilla--francia {left:47.788%; top:51.449%; transform:translateX(-51.0176%);} #offshoremap .om_pastilla--alemania {left:55.749%; top:calc(36.589% - 19px); transform:translateX(-0.0145%);} #offshoremap .om_pastilla--japon {left:81.062%; top:calc(27.531% - 38px); transform:translateX(-49.1386%);} #offshoremap .om_pastilla--australia{left:71.148%; top:calc(77.899% - 18px); transform:translateX(-98.1064%);} } /* Sólo de 565 a 979: Reino Unido, en 2 columnas como en Figma (5 nov 2026). A la izquierda, East Anglia ONE, West of Duddon Sands y East Anglia ONE North; a la derecha, East Anglia THREE, TWO y Scotwind. Rejilla y no multicolumna: las filas cuadran de dos en dos, y el orden no es el del HTML (que es el de 290). El estado parte, como en Figma («En construcción - / 964 MW»). Desde 980 manda la rejilla de su tramo. */ @container (min-width: 565px) and (max-width: 979.98px){ /* 11 y no 10, como desde 980: Figma declara 41 para dos líneas de 20 (de uno a otro, 51). */ #offshoremap .om_ficha--uk .om_parques{columns:auto; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:8px; row-gap:11px; align-items:stretch; justify-items:stretch;} #offshoremap .om_ficha--eeuu .om_parque{margin-bottom:11px;} #offshoremap .om_ficha--uk .om_parque{margin:0;} #offshoremap .om_ficha--uk .om_parque:nth-child(1){grid-area:1 / 1;} #offshoremap .om_ficha--uk .om_parque:nth-child(2){grid-area:2 / 1;} #offshoremap .om_ficha--uk .om_parque:nth-child(3){grid-area:1 / 2;} #offshoremap .om_ficha--uk .om_parque:nth-child(4){grid-area:2 / 2;} #offshoremap .om_ficha--uk .om_parque:nth-child(5){grid-area:3 / 1;} #offshoremap .om_ficha--uk .om_parque:nth-child(6){grid-area:3 / 2;} #offshoremap .om_ficha--uk .om_parque span{white-space:normal;} #offshoremap .om_ficha--uk .om_parque span.om_cifra{white-space:nowrap;} /* «964 MW» no se parte */ } /* ════════════════════════════════════════════════════════════════════════════ TRAMO ≥ 980 · las fichas van ALREDEDOR del mapa El escenario (.om_inner menos su padding) lleva la proporción del marco y todo se coloca en % sobre él, así que escala sin recalcular nada. El ALTO de las fichas es natural, no impuesto: si no coincide con el de Figma es que la tipografía está mal, y así se ve en la medida. ════════════════════════════════════════════════════════════════════════════ */ @container (min-width: 980px){ /* Aquí la chapa NO se ve (D10): sólo está en 565 y 290. Hay que apagarla explícitamente porque el tramo base la enciende. */ #offshoremap .om_num{display:none !important;} #offshoremap .om_pastilla{display:none !important;} #offshoremap .om_pais{gap:0;} /* De 980 arriba el marco es el de LA PIEZA, no el del mapa: por eso no aparece en los SVG del grupo del mapa. Y el `padding:32px` de aquí es precisamente su relleno interior — 980-64 = 916, el contenido que mide ese SVG. Trazo Sand 4, el mismo que las fichas de este tramo (igual que en 290 y 565 el marco del mapa va en Sand 3, el de sus fichas). */ /* La CAJA mide lo que la pieza, 980 como mucho (D11); el CONTENIDO va a su tamaño de diseño (916) y centrado (más abajo). */ #offshoremap .om_inner{position:relative; padding:32px; width:100%; background:#fff; border-radius:15px; box-shadow:inset 0 0 0 1px var(--om-sand4);} #offshoremap{--om-borde:var(--om-sand4);} #offshoremap .om_mapa{position:absolute; inset:32px; aspect-ratio:auto; width:auto; max-width:none; margin:0; /* sin marco: no está en el diseño de 980 */ background:none; border-radius:0; box-shadow:none;} /* margin:0 es imprescindible: el `margin-top:16px` del tramo base, sobre un elemento con `inset`, lo baja 16 px Y le recorta el alto — así los % de las fichas se calculaban sobre 605 en vez de 621 y cada una se desplazaba distinto. */ #offshoremap .om_fichas{position:absolute; inset:32px; margin:0; gap:0;} #offshoremap .om_ficha{position:absolute;} /* marco 980: escenario 916 x 621, el dibujo abajo (0,154 · 916x467) */ /* ALTO FIJO: 685 = 621 del escenario + los 32 de relleno x2. */ #offshoremap .om_inner{height:685px;} /* El escenario a su ancho, centrado en la caja. `right:auto` porque el `inset:32px` de arriba fija los cuatro lados y, con left+right+width, el navegador ignora uno de ellos por sobredeterminación: mejor decirlo explícitamente. */ #offshoremap .om_mapa,#offshoremap .om_fichas{left:calc(50% - 458px); right:auto; width:916px;} #offshoremap .om_dibujo{position:absolute; left:0; top:24.80%; width:100%; height:75.20%;} #offshoremap .om_ficha--uk {left:4.80%; top:0.48%; width:42.90%;} #offshoremap .om_ficha--alemania {left:53.17%; top:0.48%; width:21.40%;} #offshoremap .om_ficha--japon {left:79.91%; top:16.91%; width:20.09%;} #offshoremap .om_ficha--eeuu {left:0; top:64.90%; width:41.16%;} #offshoremap .om_ficha--francia {left:51.09%; top:64.73%; width:19.10%;} #offshoremap .om_ficha--australia{left:81.44%; top:60.39%; width:14.30%;} /* Reino Unido y EE.UU en dos columnas independientes (H2) */ /* REJILLA aquí, no multicolumna: a 980 todos los bloques miden 40, así que las filas se alinean sin daño y el alto es determinista. La multicolumna equilibra por altura y daba 222,5 en vez de 217. Abajo, con bloques desiguales, es al contrario. */ #offshoremap .om_ficha--uk .om_parques, #offshoremap .om_ficha--eeuu .om_parques{ columns:auto; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:10px; row-gap:11px; grid-auto-flow:column; grid-template-rows:repeat(3,auto); } /* Desde 980 el NOMBRE no parte: sus columnas son de 175-176 y los nombres más largos piden 175,8 — menos de 1 px, y Figma no los parte. Por debajo sí parten, porque allí el exceso es de 8,8 px sobre columnas de 167 y Figma también los parte. */ #offshoremap .om_parque b{white-space:nowrap;} /* 11 y no 10: es el redondeo de la caja de texto de Figma (declara 41 para dos líneas de 20). Con 10 las fichas de 3, 5 y 6 parques salían 2, 4 y 5 px cortas. */ #offshoremap .om_parque + .om_parque{margin-top:11px;} #offshoremap .om_ficha--uk .om_parque, #offshoremap .om_ficha--eeuu .om_parque{margin:0;} } /* ── conectores · 290 (tramo base) ────────────────────────── */ #offshoremap .om_con--australia{left:80.345%; top:69.130%; width:0.010%; height:8.696%; border:0; border-left:1.5px solid var(--om-naranja);} #offshoremap .om_con--australia::after{left:auto; right:auto; top:auto; bottom:auto; left:-4px; top:-4px;} #offshoremap .om_con--uk{left:35.183%; top:22.174%; width:9.300%; height:16.522%; border:0; border-left:1.5px solid var(--om-naranja); border-bottom:1.5px solid var(--om-naranja);} #offshoremap .om_con--uk::after{left:auto; right:auto; top:auto; bottom:auto; right:-4px; bottom:-4px;} #offshoremap .om_con--alemania{left:51.379%; top:22.174%; width:5.528%; height:18.261%; border:0; border-right:1.5px solid var(--om-naranja); border-bottom:1.5px solid var(--om-naranja);} #offshoremap .om_con--alemania::after{left:auto; right:auto; top:auto; bottom:auto; left:-4px; bottom:-4px;} #offshoremap .om_con--francia{left:47.241%; top:44.783%; width:0.010%; height:33.043%; border:0; border-left:1.5px solid var(--om-naranja);} #offshoremap .om_con--francia::after{left:auto; right:auto; top:auto; bottom:auto; left:-4px; top:-4px;} #offshoremap .om_con--japon{left:84.483%; top:40.000%; width:4.838%; height:6.087%; border:0; border-right:1.5px solid var(--om-naranja); border-bottom:1.5px solid var(--om-naranja);} #offshoremap .om_con--japon::after{left:auto; right:auto; top:auto; bottom:auto; left:-4px; bottom:-4px;} #offshoremap .om_con--eeuu{left:19.310%; top:47.391%; width:0.010%; height:30.435%; border:0; border-left:1.5px solid var(--om-naranja);} #offshoremap .om_con--eeuu::after{left:auto; right:auto; top:auto; bottom:auto; left:-4px; top:-4px;} /* ── conectores · 565 ────────────────────────── */ @container (min-width: 565px){ #offshoremap .om_con--uk{left:47.080%; top:24.275%; width:3.014%; height:7.971%; border:0; border-right:1.5px solid var(--om-naranja); border-bottom:1.5px solid var(--om-naranja);} #offshoremap .om_con--uk::after{left:auto; right:auto; top:auto; bottom:auto; left:-4px; bottom:-4px;} #offshoremap .om_con--francia{left:47.788%; top:41.667%; width:0.005%; height:9.783%; border:0; border-left:1.5px solid var(--om-naranja);} #offshoremap .om_con--francia::after{left:auto; right:auto; top:auto; bottom:auto; left:-4px; top:-4px;} #offshoremap .om_con--alemania{left:50.973%; top:36.594%; width:4.779%; height:0.011%; border:0; border-top:1.5px solid var(--om-naranja);} #offshoremap .om_con--alemania::after{left:auto; right:auto; top:auto; bottom:auto; left:-4px; top:-4px;} #offshoremap .om_con--japon{left:81.062%; top:27.536%; width:0.005%; height:12.319%; border:0; border-left:1.5px solid var(--om-naranja);} #offshoremap .om_con--japon::after{left:auto; right:auto; top:auto; bottom:auto; left:-4px; bottom:-4px;} #offshoremap .om_con--australia{left:71.150%; top:77.899%; width:4.779%; height:0.000%; border:0; border-top:1.5px solid var(--om-naranja);} #offshoremap .om_con--australia::after{left:auto; right:auto; top:auto; bottom:auto; right:-4px; bottom:-4px;} #offshoremap .om_con--eeuu{left:12.926%; top:43.478%; width:5.658%; height:7.971%; border:0; border-left:1.5px solid var(--om-naranja); border-top:1.5px solid var(--om-naranja);} #offshoremap .om_con--eeuu::after{left:auto; right:auto; top:auto; bottom:auto; right:-4px; top:-4px;} } /* ── conectores · 980 ────────────────────────── */ @container (min-width: 980px){ #offshoremap .om_con--alemania{left:49.854%; top:35.370%; width:11.875%; height:14.148%; border:0; border-right:1.5px solid var(--om-naranja); border-bottom:1.5px solid var(--om-naranja);} #offshoremap .om_con--alemania::after{left:auto; right:auto; top:auto; bottom:auto; left:-4px; bottom:-4px;} #offshoremap .om_con--francia{left:47.893%; top:52.894%; width:3.272%; height:16.564%; border:0; border-left:1.5px solid var(--om-naranja); border-bottom:1.5px solid var(--om-naranja);} #offshoremap .om_con--francia::after{left:auto; right:auto; top:auto; bottom:auto; left:-4px; top:-4px;} #offshoremap .om_con--uk{left:40.490%; top:35.370%; width:4.680%; height:12.058%; border:0; border-left:1.5px solid var(--om-naranja); border-bottom:1.5px solid var(--om-naranja);} #offshoremap .om_con--uk::after{left:auto; right:auto; top:auto; bottom:auto; right:-4px; bottom:-4px;} #offshoremap .om_con--australia{left:84.821%; top:78.617%; width:0.001%; height:5.466%; border:0; border-left:1.5px solid var(--om-naranja);} #offshoremap .om_con--australia::after{left:auto; right:auto; top:auto; bottom:auto; left:-4px; bottom:-4px;} #offshoremap .om_con--japon{left:87.545%; top:35.370%; width:5.778%; height:18.489%; border:0; border-right:1.5px solid var(--om-naranja); border-bottom:1.5px solid var(--om-naranja);} #offshoremap .om_con--japon::after{left:auto; right:auto; top:auto; bottom:auto; left:-4px; bottom:-4px;} #offshoremap .om_con--eeuu{left:10.534%; top:55.305%; width:8.166%; height:9.646%; border:0; border-left:1.5px solid var(--om-naranja); border-top:1.5px solid var(--om-naranja);} #offshoremap .om_con--eeuu::after{left:auto; right:auto; top:auto; bottom:auto; right:-4px; top:-4px;} } /* ════════════════════════════════════════════════════════════════════════════ PORTUGUÉS · el estado y la cifra, siempre en dos renglones ════════════════════════════════════════════════════════════════════════════ Los estados en portugués son bastante más largos que en castellano («Em desenvolvimento» frente a «En desarrollo»), y con el `nowrap` de 565 arriba el texto se salía de la ficha hasta 32 px y llegaba a desbordar la pieza 20. Dejarlo partir solo no vale: rompería en el espacio del separador y dejaría el guión colgando. Así que en portugués se aplica a todos los tamaños lo que en los demás idiomas es sólo cosa de 290: nombre / estado / cifra. ── OJO CON EL SELECTOR DE IDIOMA ────────────────────────────────────────────────── Va en `#offshoremap:lang(xx)`, NO en `html[lang="xx"]`. Dos razones, las dos comprobadas en producción: 1. `[lang="pt"]` es coincidencia EXACTA y el portal pone `pt-BR` y `en-US`, así que no casaba nunca: en el CMS se quedaban los valores del castellano. `:lang(pt)` sí casa con las subetiquetas (`pt`, `pt-BR`, `pt-PT`...). 2. Puesto en el propio scope funciona esté el `lang` en `html`, en `body` o en un `div` intermedio, porque `:lang()` resuelve el idioma del elemento por herencia. Y el idioma lo decide LA PÁGINA, no el fichero que subimos: la pieza se inyecta en el DOM del portal, así que nuestro `` se descarta. Funciona porque cada página de idioma incrusta su propio index_XX.html. */ #offshoremap:lang(pt) .om_estado, #offshoremap:lang(pt) .om_cifra{display:block !important;} #offshoremap:lang(pt) .om_sep{display:none !important;} /* Pero de 980 arriba vuelven a UNA línea, y se ensanchan las fichas que lo necesiten (D26). En el escenario compuesto las posiciones son fijas y no hay hueco vertical para un renglón más: la ficha de EUA pedía 277 de alto contra 218 disponibles a 980. Con dos renglones vuelve a caber, y el ancho sí se puede dar. */ @container (min-width: 980px){ #offshoremap:lang(pt) .om_estado, #offshoremap:lang(pt) .om_cifra, #offshoremap:lang(pt) .om_sep{display:inline !important;} } /* ════════════════════════════════════════════════════════════════════════════ INGLÉS · dos fichas necesitan más caja en los tramos grandes (D22) ════════════════════════════════════════════════════════════════════════════ Medido en 980: el contenido en inglés no cabe en el ancho del diseño español — Japan «In development - 375 MW» pide 165,7 y tiene 152 → le faltan 13,7 Australia «In development» pide 115,4 y tiene 99 → le faltan 16,4 USA «In development - 1.080 MW» pide 176,6 y su COLUMNA tiene 167,5 → le faltan 9,1 Lo que limita es la COLUMNA, no la ficha: USA va a dos columnas en 980, así que la caja sobraba de ancho pero la columna no. Medirlo contra la ficha lo daba por bueno. France se pasa 0,2 px y Reino Unido 0,4 — invisibles dentro del relleno de 16. Germany sobra. Así que se ensanchan estas tres, y sólo HACIA LA DERECHA: a las tres les llega el conector por abajo o por arriba, así que mover el borde derecho no las descuelga. Si les llegara por la derecha, esto lo rompería. Cada ancho es lo que pide el texto + 32 de relleno + 2 de aire: Japan 200 = 165,7 + 34 · Australia 150 = 115,4 + 34 USA = 179 x 2 columnas + 10 de hueco + 32 = 400 Y a Japan, al ensancharla, hay que RECOLOCARLA: ya acababa pegada al borde derecho del escenario, así que ensanchar la sacaba de él — y el escenario ES la caja del relleno de 32 (sale de `inset:32px`), o sea que se comía el relleno y quedaba pegada al borde de la pieza. Se le baja el `left` para que su borde derecho vuelva a coincidir con el del escenario (716 de 916). Al conector no le afecta: le llega por abajo con 56-96 px de holgura. USA no se mueve: está en `left:0` y le sobran 516 px por la derecha. */ @container (min-width: 980px){ #offshoremap:lang(en) .om_ficha--japon {left:78.1659%; width:21.8341%;} /* 716..916 */ #offshoremap:lang(en) .om_ficha--australia{width:16.3755%;} /* 150 de 916 */ #offshoremap:lang(en) .om_ficha--eeuu {width:43.6681%;} /* 400 de 916 */ } /* ════════════════════════════════════════════════════════════════════════════ INGLÉS · la pastilla de UK vuelve a su sitio por debajo de 565 (D25) ════════════════════════════════════════════════════════════════════════════ El anclaje va en proporción del ancho de la PROPIA pastilla (D18), que es lo único que mantiene el conector pegado a cualquier ancho. El efecto secundario es que una pastilla mucho más estrecha se desliza. Medido a 290, con la izquierda del mapa como referencia: UK «UK» mide 55 frente a los 119 de «Reino Unido» → se iba a 58,1 en vez de 7 (+51,1) EE.UU «USA» mide 65,1 frente a 77,4 → se va a 14,8 en vez de 7 (+7,8) las otras cuatro → 1,8 px o menos Se arregla UK moviendo su CONECTOR, no la pastilla: tiene un codo, y su extremo libre se puede desplazar sin tocar la bolita, que está en la otra punta. Con la pastilla en 7, el contacto va al CENTRO de la pastilla, en el 14,897 % de 290 que pidió el usuario (deja la pastilla en 15,7 en vez de en los 7 del español). El extremo libre baja a 14,897 % y el ancho sube a 29,586 % para que la bolita se quede en 44,483 %. Los dos valores van en el mismo %, así que escala igual que antes y el conector sigue pegado. Al centro y no al 79,83 % del español POR EL REDONDEO: la pastilla es un estadio de radio 19, y con 55 px de ancho la recta de su borde inferior va sólo de 19 a 36. El 79,83 % cae en 43,9, o sea DENTRO de la curva, y el trazo se queda a 1,6 px de la forma pintada aunque la distancia al rectángulo sea 0. El centro es el punto más lejano de las dos curvas. EE.UU NO se puede arreglar así: su conector es una línea VERTICAL y su x la comparten los dos extremos, así que moverla sacaría la bolita de Estados Unidos. Se probó anclando la pastilla por su borde izquierdo y es un error: sólo cuadra en el ancho de diseño, y al crecer el mapa el contacto avanza en % y la pastilla no — el auditor lo cazó con 30,2 px de separación a 564. Es la misma trampa que resolvió D18. Se acepta la deriva de 7,8. Va en un tramo `max-width` a propósito: metido en el de 565 se llevaba por delante la geometría propia del conector en 980 (el auditor: 48,2 px de separación). */ @container (max-width: 564.9px){ #offshoremap:lang(en) .om_pastilla--uk{left:14.897%; transform:translateX(-50%);} #offshoremap:lang(en) .om_con--uk {left:14.897%; width:29.586%;} } /* ════════════════════════════════════════════════════════════════════════════ PORTUGUÉS · anchos y posiciones de las fichas en los tramos grandes (D26) ════════════════════════════════════════════════════════════════════════════ Con el estado y la cifra en una línea (arriba), los altos vuelven a ser los del español y ya caben en el escenario. Lo que falta es ANCHO. Medido, con el estado en una línea y comparando contra SU COLUMNA: EUA «Em desenvolvimento - 1.080 MW» pide 210,8 · columna 167,5 Japón «Em desenvolvimento - 375 MW» pide 199,9 · columna 152 Australia «Em desenvolvimento» pide 154,5 · columna 99 Reino Unido «Em desenvolvimento - 900 MW» pide 202,9 · columna 175,5 Francia «Em operação - 496 MW» pide 151,4 · columna 143 Alemania cabe Se ensanchan, y las que ya tocaban el borde derecho del escenario se mueven a la izquierda para no salirse — el escenario es la caja del relleno de 32 (D23). Los conectores NO se tocan: en todos los casos su extremo libre sigue cayendo dentro de la ficha y en la parte recta del borde, y eso lo comprueba el auditor. ════════════════════════════════════════════════════════════════════════════ */ @container (min-width: 980px){ /* escenario 916 x 621 */ #offshoremap:lang(pt) .om_ficha--uk {left:0; width:47.7074%;} /* 0..437 */ #offshoremap:lang(pt) .om_ficha--alemania {left:51.5284%;} /* 472..668 */ #offshoremap:lang(pt) .om_ficha--japon {left:73.7991%; width:26.2009%;} /* 676..916 */ #offshoremap:lang(pt) .om_ficha--eeuu { width:50.2183%;} /* 0..460 */ #offshoremap:lang(pt) .om_ficha--francia { width:20.8515%;} /* 468..659 */ #offshoremap:lang(pt) .om_ficha--australia{left:72.8166%; width:21.2882%;} /* 667..862 */ } /* ── PORTUGUÉS · el conector de Francia, de 980 arriba (D27) ────────── Al ensanchar EUA de 377 a 460 (D26), el codo de Francia quedó DETRÁS de esa ficha: bajaba por x=438,7 hasta y=431,3 y giraba a la derecha hasta el borde izquierdo de Francia (468), y ese tramo cae dentro de EUA (x 0..460, y 403..620). Con las fichas por encima del conector, lo que se veía era la línea desapareciendo al llegar a EUA. Se rehace POR ARRIBA: sale del punto de Francia (438,7 · 328,5), va a la derecha hasta x=520 y baja al BORDE SUPERIOR de la ficha (y=402) — un píxel por encima de donde empieza EUA (403), así que ya no la cruza. La bolita no se mueve: sigue en la esquina superior izquierda de la caja, que es el punto de Francia en el mapa. 520 cae en la parte recta del borde superior (la ficha va de 468 a 659 con radio 15, o sea recto de 483 a 644). ──────────────────────────────────────────────────────────────────────────── */ @container (min-width: 980px){ #offshoremap:lang(pt) .om_con--francia{ left:47.893%; top:52.894%; /* el punto de Francia, sin tocar */ width:8.8755%; /* 438,7 → 520 */ height:11.8357%; /* 328,5 → 402, el borde superior de la ficha */ border:0; border-top:1.5px solid var(--om-naranja); border-right:1.5px solid var(--om-naranja); } }