/* =============================================================================
   East Anglia THREE  ·  estático de iberdrola.com
   Título, cuatro datos en tarjetas y un mapa del mar del Norte. Una animación:
   la línea de puntos del aerogenerador al globo crece con el scroll (main.js).
   Tres tamaños de diseño (290 / 565 / 980) y UN solo cambio de disposición
   (@container eath, RD-04). Fluida; el mapa, hasta 916 y centrado (RD-07).
   Medidas: specs/east-anglia-three/design/ y spec §4.1–§4.2 (Figma es la única fuente)
   ============================================================================= */

/* ===== IberPangea (self-contained, RD-02) ==================================== */
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/east-anglia-three/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/east-anglia-three/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/east-anglia-three/fonts/IberPangeaText-SmBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}

/* Tokens (design/tokens.json), siempre por variable (plan §4.4). Ojo: dos verdes
   oscuros de nombre casi igual, iberdrola-forest y Iberdrola Forest. */
#eastathree{
  --eath-green1:#007F33;   /* Green 1 */
  --eath-forest:#003020;   /* iberdrola-forest */
  --eath-forest2:#00402A;  /* Iberdrola Forest */
  --eath-sunset:#FF9C1A;   /* Iberdrola Sunset */
  --eath-sky3:#D8F3FF;     /* Opacidad/Sky 3 20% */
  --eath-sand3:#D8CFC7;    /* Sand 3 */
  --eath-white:#FFFFFF;
  --eath-pangea:'IberPangea',sans-serif;
  --eath-text:'IberPangea Text','IberPangea',sans-serif;
}

/* ===== Marco (RD-03, RD-04) ==================================================
   `margin:0 auto` SIN margen vertical. Sin `max-width`: crece con su columna. El
   borde, en el `::after`, por dentro y por encima (no cambia las medidas). */
#eastathree{
  container-name:eath; container-type:inline-size;
  width:100%; margin:0 auto; box-sizing:border-box;
  position:relative; overflow:hidden; overflow:clip; background:var(--eath-white);
  border-radius:15px;
}
#eastathree::after{content:'' !important; display:block !important; position:absolute;
  inset:0; z-index:3; border-radius:15px; box-shadow:inset 0 0 0 1px var(--eath-sand3);
  pointer-events:none;}

/* ===== Blindaje frente al theme de Liferay (spec §5) =========================
   La herencia PIERDE contra cualquier declaración del theme, por débil que sea.
   `inherit` sí es una declaración: gana al theme sin cambiar nada visualmente. */
#eastathree *{color:inherit; font:inherit; letter-spacing:inherit; text-align:inherit;
  text-transform:inherit; white-space:inherit; overflow-wrap:inherit; word-spacing:inherit;
  text-indent:0; text-decoration:none; margin:0; padding:0; box-sizing:border-box; border:0;
  background:transparent; box-shadow:none; text-shadow:none; float:none; min-width:0;}
#eastathree ul,#eastathree ol,#eastathree li{list-style:none;}
#eastathree li::marker{content:none;}
#eastathree li::before{content:'' !important; display:none !important; margin:0 !important;}
/* `#eastathree *` NO alcanza a los pseudo-elementos: se blindan aparte, sin `content`. */
#eastathree *::before,#eastathree *::after{margin:0; padding:0; text-indent:0;
  letter-spacing:inherit; text-transform:inherit; box-sizing:border-box;}
#eastathree img{max-width:none; max-height:none; min-height:0; border:0; box-shadow:none;
  border-radius:0; opacity:1; filter:none; object-fit:fill;}
#eastathree svg{overflow:visible; fill:none;}
/* La RAÍZ declara todo lo heredable: si no, hereda del portal y el `inherit` de
   arriba propaga fielmente el valor del theme hacia dentro. */
#eastathree{
  font-family:var(--eath-text); font-size:16px; line-height:20px;
  font-weight:400; font-style:normal; color:var(--eath-forest);
  letter-spacing:normal; text-align:left; text-transform:none; white-space:normal;
  text-decoration:none; word-spacing:normal; overflow-wrap:break-word;
  font-synthesis:none; font-kerning:normal;
}
/* Pesos declarados: el `font:inherit` del blindaje anula los de `strong`. */
#eastathree strong{font-weight:600;}

/* `display` NO se hereda: se declara elemento a elemento y con `!important`. */
#eastathree{display:block !important;}
#eastathree .eath_in,#eastathree .eath_body,#eastathree .eath_card,#eastathree .eath_txt,
#eastathree .eath_row,#eastathree .eath_city{display:flex !important;}
#eastathree .eath_list{display:grid !important;}
#eastathree .eath_title,#eastathree .eath_pre,#eastathree .eath_num,#eastathree .eath_lbl,
#eastathree .eath_post,#eastathree .eath_map,#eastathree .eath_art,#eastathree .eath_ln,
#eastathree .eath_link,#eastathree .eath_link_dot,#eastathree .eath_dist,#eastathree .eath_cities,
#eastathree .eath_dot,#eastathree .eath_cname,#eastathree img,#eastathree .eath_arrow{display:block !important;}
#eastathree .eath_dist_l1,#eastathree .eath_dist_l2,#eastathree .eath_dist strong{display:inline !important;}
#eastathree .eath_cl{display:block !important;}
/* El fondo de 980 y la raya de la distancia, sólo por encima de 501 de mapa (al final). */
#eastathree .eath_bg2,#eastathree .eath_t{display:none !important;}

/* ===== Columna (RD-04) =======================================================
   A los lados 16 → 32 entre 290 y 565 (exacto en los dos), 32 por encima. */
#eastathree .eath_in{flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:16px;
  padding:32px clamp(16px, calc(16px + (100cqi - 290px) * 16 / 275), 32px);}
#eastathree .eath_body{flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:20px;}

/* ===== Título (RD-05) ======================================================== */
#eastathree .eath_title{font-family:var(--eath-pangea); font-weight:600; font-size:30px;
  line-height:34px; color:var(--eath-green1) !important;}

/* ===== Tarjetas (RD-06) — composición de 290 ================================
   Borde por FUERA del padding, como Figma (el icono cae en 10 · 17). */
#eastathree .eath_list{grid-template-columns:minmax(0, 1fr); gap:10px; align-items:stretch;}
#eastathree .eath_card{flex-direction:row; flex-wrap:nowrap; align-items:center;
  justify-content:flex-start; gap:5px; padding:16px 16px 16px 9px;
  border:1px solid var(--eath-green1); border-radius:15px;}
#eastathree .eath_ico{flex:none; width:64px; height:64px;}
#eastathree .eath_txt{flex:1 1 auto; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start; gap:4px; padding-left:0;}
#eastathree .eath_card-hogares .eath_txt{gap:9px;}
#eastathree .eath_row{flex-direction:column; flex-wrap:nowrap; align-items:stretch;
  justify-content:flex-start; gap:4px;}
#eastathree .eath_pre,#eastathree .eath_lbl{font-size:16px; line-height:20px; color:var(--eath-forest);}
#eastathree .eath_post{font-size:16px; line-height:20px; color:var(--eath-forest2);}
#eastathree .eath_num{font-weight:600; font-size:24px; line-height:20px; color:var(--eath-forest2);}

/* ===== Mapa (RD-07, RD-08, DT6, DT10) ========================================
   451 de alto; ancho del contenido hasta 916, centrado. Cada posición se
   interpola entre la de 258 y la de 501 (`--eath-d`, de 0 a 243) y, por encima,
   entre la de 501 y la de 916 (`--eath-e`, de 0 a 415), spec §4.1. Las dos son
   longitudes SIN registrar: `100cqi` se resuelve en cada hijo contra ESTE contenedor. */
#eastathree .eath_map{position:relative; width:100%; max-width:916px; height:451px;
  margin:0 auto; border-radius:15px; overflow:hidden; background:var(--eath-sky3);
  container-name:eathmap; container-type:inline-size;
  --eath-d:min(100cqi - 258px, 243px);
  --eath-e:clamp(0px, 100cqi - 501px, 415px);
  --eath-bg-l:calc(-28.6284px + var(--eath-d) * 0.117812);
  --eath-bg-w:calc(390.5076px + var(--eath-d) * 0.454701);
  /* El fondo de 980 (DT9), de 615 en (−89, 0) a 930 en (−7, −194): el mismo zoom en los dos ejes. */
  --eath-bg2-l:calc(-89px + var(--eath-e) * 0.197590);
  --eath-bg2-t:calc(0px - var(--eath-e) * 0.467470);
  --eath-bg2-s:calc(615px + var(--eath-e) * 0.759036);
  --eath-globo-x:calc(124px + var(--eath-d) * 0.423868 + var(--eath-e) * 0.674699);
  --eath-globo-y:calc(14px - var(--eath-d) * 0.008230 + var(--eath-e) * 0.036144);
  --eath-globo-s:calc(121px + var(--eath-e) * 0.033735);
  --eath-dist-x:calc(31.3897px + var(--eath-d) * 0.187697 + var(--eath-e) * 0.400000);
  --eath-dist-w:calc(124.5482px + var(--eath-d) * 0.145022 + var(--eath-e) * 0.197212);
  --eath-dist-y:calc(128px - var(--eath-e) * 0.012048);
  --eath-fl-x:calc(79.4087px + var(--eath-d) * 0.243609 + var(--eath-e) * 0.478503);
  --eath-fl-w:calc(31.0958px + var(--eath-d) * 0.036208 + var(--eath-e) * 0.049238);
  --eath-fl-y:calc(311.6667px - var(--eath-e) * 0.082809);
  --eath-bx-l:calc(113px + var(--eath-d) * 0.284979 + var(--eath-e) * 0.532369);
  --eath-bx-r:calc(158.502px + var(--eath-d) * 0.331794 + var(--eath-e) * 0.602567);
  --eath-bx-te:calc(156.4px + var(--eath-d) * 0.329630 + var(--eath-e) * 0.599325);
  --eath-bx-t:calc(291.603px + var(--eath-d) * 0.001634 - var(--eath-e) * 0.107082);
  --eath-bx-b:calc(353px + var(--eath-d) * 0.002058 - var(--eath-e) * 0.031179);
  --eath-cn-e:calc(168px + var(--eath-d) * 0.423868 + var(--eath-e) * 0.671085);
  --eath-cn-y:calc(56px + var(--eath-e) * 0.039759);
  /* La raya de la distancia (la «T»), dibujada por encima de 501 (DT10). */
  --eath-tx1:calc(113px + var(--eath-e) * 0.491566);
  --eath-tx2:calc(196px + var(--eath-e) * 0.518072);
  --eath-ty:calc(168.5px - var(--eath-e) * 0.008434);
  --eath-tvx:calc(157.5px + var(--eath-e) * 0.501335);
  --eath-tvy:calc(303.5px - var(--eath-e) * 0.092771);
  /* Ciudades: punto 11 → 17 y nombre 11 → 15 de 501 a 916. */
  --eath-dot:calc(11px + var(--eath-e) * 0.014458);
  --eath-cfs:calc(11px + var(--eath-e) * 0.009639);
  /* Discontinuos (DT11): el trazo de cada tramo, interpolado entre los de Figma (spec §4.2); el nº de trazos
     sale de él a cada ancho, redondeado (abajo, `@supports`): exacto a 258, 501 y 916, y sin saltos entre medias. */
  --eath-st-cnv:calc(3.0206px + var(--eath-d) * 0.000021 - var(--eath-e) * 0.000018);
  --eath-st-bx:calc(3.0698px + var(--eath-d) * 0.000021 - var(--eath-e) * 0.000407);
  --eath-st-top:calc(3.1px - var(--eath-d) * 0.000354 - var(--eath-e) * 0.000202);
  --eath-st-bot:calc(2.8439px + var(--eath-d) * 0.001300 - var(--eath-e) * 0.000212);
  --eath-st-cnh:calc(2.3745px + var(--eath-d) * 0.003344 - var(--eath-e) * 0.000414);
  --eath-st-fl:calc(3.887px + var(--eath-d) * 0.000422 - var(--eath-e) * 0.000528);
  /* Sin `round()` o sin trigonometría en CSS, el nº de trazos de Figma por tramos: el de 258 por debajo del
     corte, el de 501 por encima y el de 916 desde 640 de pieza. */
  --eath-n-top:8; --eath-n-bot:9; --eath-n-cnh:3; --eath-n-fl:5; --eath-n-bx:11; --eath-n-cnv:40;
}
#eastathree .eath_art{position:absolute; inset:0; pointer-events:none;}
#eastathree .eath_bg{position:absolute; top:0; left:var(--eath-bg-l); width:var(--eath-bg-w);
  height:451px;}
/* El fondo de 980 (DT9), sólo por encima de 501: en el corte de 565 sustituye a `mapa-fondo.svg`. */
#eastathree .eath_bg2{position:absolute; left:var(--eath-bg2-l); top:var(--eath-bg2-t);
  width:var(--eath-bg2-s); height:var(--eath-bg2-s);}
#eastathree .eath_globe{position:absolute; left:var(--eath-globo-x); top:var(--eath-globo-y);
  width:var(--eath-globo-s); height:var(--eath-globo-s);}
/* La raya de la distancia (DT10): 1 px, extremos redondos (medio px de más a cada lado). */
#eastathree .eath_t{position:absolute; background:var(--eath-forest2); border-radius:0.5px;}
#eastathree .eath_t-h{left:calc(var(--eath-tx1) - 0.5px); top:calc(var(--eath-ty) - 0.5px);
  width:calc(var(--eath-tx2) - var(--eath-tx1) + 1px); height:1px;}
#eastathree .eath_t-v{left:calc(var(--eath-tvx) - 0.5px); top:calc(var(--eath-ty) - 0.5px);
  width:1px; height:calc(var(--eath-tvy) - var(--eath-ty) + 1px);}

/* Discontinuos (DT5): cada tramo, una línea de 1 px centrada en su eje (eje − 0,5),
   trazo = hueco = largo / (2 · (n − 1)) y medio trazo en cada extremo. */
#eastathree .eath_ln{position:absolute; --eath-s:calc(var(--eath-len) / (2 * (var(--eath-n) - 1)));}
#eastathree .eath_bx-l,#eastathree .eath_bx-r,#eastathree .eath_link_v{width:1px; height:var(--eath-len);
  background:repeating-linear-gradient(to bottom, var(--eath-forest2) 0 calc(var(--eath-s) / 2),
    transparent 0 calc(var(--eath-s) * 1.5), var(--eath-forest2) 0 calc(var(--eath-s) * 2));}
#eastathree .eath_bx-t,#eastathree .eath_bx-b,#eastathree .eath_link_h{height:1px; width:var(--eath-len);
  background:repeating-linear-gradient(to right, var(--eath-forest2) 0 calc(var(--eath-s) / 2),
    transparent 0 calc(var(--eath-s) * 1.5), var(--eath-forest2) 0 calc(var(--eath-s) * 2));}
#eastathree .eath_bx-l{--eath-n:var(--eath-n-bx); --eath-st:var(--eath-st-bx); --eath-len:calc(var(--eath-bx-b) - var(--eath-bx-t));
  left:calc(var(--eath-bx-l) - 0.5px); top:var(--eath-bx-t);}
#eastathree .eath_bx-r{--eath-n:var(--eath-n-bx); --eath-st:var(--eath-st-bx); --eath-len:calc(var(--eath-bx-b) - var(--eath-bx-t));
  left:calc(var(--eath-bx-r) - 0.5px); top:var(--eath-bx-t);}
#eastathree .eath_bx-t{--eath-n:var(--eath-n-top); --eath-st:var(--eath-st-top); --eath-len:calc(var(--eath-bx-te) - var(--eath-bx-l));
  left:var(--eath-bx-l); top:calc(var(--eath-bx-t) - 0.5px);}
#eastathree .eath_bx-b{--eath-n:var(--eath-n-bot); --eath-st:var(--eath-st-bot); --eath-len:calc(var(--eath-bx-r) - var(--eath-bx-l));
  left:var(--eath-bx-l); top:calc(var(--eath-bx-b) - 0.5px);}

/* La flecha de distancia: extremos redondos y una punta en «V» en cada lado (de su
   trazado, `Vector 1`). Sin viewBox: no se estira; 1 px a todos los anchos. */
#eastathree .eath_arrow{position:absolute; left:var(--eath-fl-x); top:calc(var(--eath-fl-y) - 4px);
  width:var(--eath-fl-w); height:8px; --eath-s:calc(var(--eath-fl-w) / (2 * (var(--eath-n-fl) - 1)));}
#eastathree .eath_arrow_ln,#eastathree .eath_arrow_hd{stroke:var(--eath-forest2); stroke-width:1px;
  stroke-linecap:round; stroke-linejoin:round; fill:none;}
#eastathree .eath_arrow_ln{stroke-dasharray:var(--eath-s); stroke-dashoffset:calc(var(--eath-s) / 2);}
/* El nº de trazos, a cada ancho (DT11): n − 1 = el largo entre dos trazos objetivo, redondeado. `tan(atan2(a, b))`
   es a / b sin unidades, que `calc()` no da dividiendo longitudes. */
@supports (width: calc(1px * round(nearest, tan(atan2(3px, 2px)), 1))){
  #eastathree .eath_ln{--eath-s:calc(var(--eath-len) / (2 * round(nearest, tan(atan2(var(--eath-len), 2 * var(--eath-st))), 1)));}
  #eastathree .eath_arrow{--eath-s:calc(var(--eath-fl-w) / (2 * round(nearest, tan(atan2(var(--eath-fl-w), 2 * var(--eath-st-fl))), 1)));}
}

/* El conector (A-001): vertical desde el recuadro hasta y 56 (72,5 a 916), horizontal
   hasta el punto. Completo por defecto: el JS sólo escribe --eath-pv/--eath-ph/--eath-pd. */
#eastathree .eath_link{position:absolute; inset:0;}
#eastathree .eath_link_v{--eath-n:var(--eath-n-cnv); --eath-st:var(--eath-st-cnv); --eath-len:calc(var(--eath-bx-t) - var(--eath-cn-y));
  left:calc(var(--eath-bx-r) - 0.5px); top:var(--eath-cn-y);
  clip-path:inset(calc((1 - var(--eath-pv, 1)) * 100%) 0 0 0);}
#eastathree .eath_link_h{--eath-n:var(--eath-n-cnh); --eath-st:var(--eath-st-cnh); --eath-len:calc(var(--eath-cn-e) - var(--eath-bx-r));
  left:var(--eath-bx-r); top:calc(var(--eath-cn-y) - 0.5px);
  clip-path:inset(0 calc((1 - var(--eath-ph, 1)) * 100%) 0 0);}
#eastathree .eath_link_dot{position:absolute; left:calc(var(--eath-cn-e) - 2.6667px); top:calc(var(--eath-cn-y) - 2.6667px);
  width:5.3333px; height:5.3333px; border-radius:50%; background:var(--eath-forest2);
  opacity:var(--eath-pd, 1);}
@media (prefers-reduced-motion: reduce){
  #eastathree .eath_link_v,#eastathree .eath_link_h{clip-path:none !important;}
  #eastathree .eath_link_dot{opacity:1 !important;}
}

/* La distancia, colocada por su caja como Figma (el texto arriba); sin alto fijo. */
#eastathree .eath_dist{position:absolute; left:var(--eath-dist-x); width:var(--eath-dist-w);
  top:var(--eath-dist-y); font-size:16px; line-height:17px; text-align:center; color:var(--eath-forest);
  overflow-wrap:anywhere;}
#eastathree .eath_dist_l1{line-height:20px; white-space:break-spaces;}  /* su espacio final cuenta al centrar, como en Figma */

/* Ciudades (RD-08, RD-09): se coloca el PUNTO; el nombre se ancla a él (4 px) y la
   fila se centra con el punto por `transform` (sin alto fijo). `--eath-cx/-cy`, la
   esquina del punto. Con el nombre a la izquierda, se ancla por la derecha. El punto
   (`--eath-dot`) y la letra (`--eath-cfs`) crecen de 501 a 916. */
#eastathree .eath_city{position:absolute; flex-direction:row; flex-wrap:nowrap; align-items:center;
  justify-content:flex-start; gap:4px; left:var(--eath-cx); right:auto;
  max-width:calc(100% - var(--eath-cx)); top:calc(var(--eath-cy) + var(--eath-dot) / 2); transform:translateY(-50%);
  font-size:var(--eath-cfs); line-height:20px; color:var(--eath-forest); text-align:left; overflow-wrap:anywhere;}
#eastathree .eath_city-l{flex-direction:row-reverse; left:auto; right:calc(100% - var(--eath-cx) - var(--eath-dot));
  max-width:calc(var(--eath-cx) + var(--eath-dot)); text-align:right;}
#eastathree .eath_dot{flex:none; width:var(--eath-dot); height:var(--eath-dot); border-radius:50%; background:var(--eath-sunset);}
#eastathree .eath_cname{flex:0 1 auto;}
#eastathree .eath_city-norwich{--eath-cx:calc(8.2115px + var(--eath-d) * 0.324233 + var(--eath-e) * 0.404819);
  --eath-cy:calc(271.5px + var(--eath-d) * 0.037037 - var(--eath-e) * 0.139759);}
#eastathree .eath_city-yarmouth{--eath-cx:calc(69.648px + var(--eath-d) * 0.207210 + var(--eath-e) * 0.448193);
  --eath-cy:calc(300.5px - var(--eath-e) * 0.068675);
  flex-direction:row-reverse; left:auto; right:calc(100% - var(--eath-cx) - var(--eath-dot));
  max-width:calc(var(--eath-cx) + var(--eath-dot)); text-align:right; line-height:var(--eath-cfs);}
/* Great Yarmouth: en dos líneas, cada una en su caja del alto de su letra (11/11 de Figma a 501; crecen juntas
   hasta 640 de pieza, donde pasa a una línea). Si un usuario agranda el alto de línea (WCAG 1.4.12), sus dos líneas no crecen
   hacia arriba sobre Norwich. */
#eastathree .eath_cl{height:var(--eath-cfs);}
#eastathree .eath_city-lowestoft{--eath-cx:calc(67.9713px + var(--eath-d) * 0.201764 + var(--eath-e) * 0.448193);
  --eath-cy:calc(324.5px - var(--eath-e) * 0.067470);
  flex-direction:row-reverse; left:auto; right:calc(100% - var(--eath-cx) - var(--eath-dot));
  max-width:calc(var(--eath-cx) + var(--eath-dot)); text-align:right;}
#eastathree .eath_city-ipswich{--eath-cx:calc(13.2115px + var(--eath-d) * 0.320117 + var(--eath-e) * 0.414458);
  --eath-cy:calc(377.5px - var(--eath-d) * 0.037037 + var(--eath-e) * 0.021687);}
#eastathree .eath_city-amsterdam{--eath-cx:calc(181px + var(--eath-d) * 0.440329 + var(--eath-e) * 0.648193);
  --eath-cy:calc(328.1667px - var(--eath-d) * 0.049383 - var(--eath-e) * 0.095092);}
#eastathree .eath_city-rotterdam{--eath-cx:calc(173px + var(--eath-d) * 0.395062 + var(--eath-e) * 0.628916);
  --eath-cy:calc(362.5px - var(--eath-d) * 0.020576 - var(--eath-e) * 0.036145);}

/* ===== Composición de 565 (un solo corte, RD-04) ============================= */
@container eath (min-width: 563px){
  #eastathree .eath_in{display:flex !important; flex-direction:column; gap:32px;}
  #eastathree .eath_title{font-size:32px; line-height:36px;}
  #eastathree .eath_list{display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr));}
  #eastathree .eath_card-hogares{grid-column:1 / -1; display:flex !important; flex-direction:column;
    align-items:center; justify-content:center;}
  #eastathree .eath_card-hogares .eath_txt{display:flex !important; flex:none; flex-direction:column;
    width:min(295px, 100%); align-items:stretch;}
  #eastathree .eath_row{display:flex !important; flex-direction:row; justify-content:center;
    align-items:flex-end; gap:4px;}
  #eastathree .eath_post{line-height:16px;}
  #eastathree .eath_card:not(.eath_card-hogares){display:flex !important; flex-direction:column;
    align-items:flex-start; justify-content:center; padding:16px 16px 16px 0;}
  #eastathree .eath_card:not(.eath_card-hogares) .eath_txt{display:flex !important; flex:none;
    flex-direction:column; padding-left:16px; max-width:calc(100% + 15px);}
  #eastathree .eath_card.eath_card-area:not(.eath_card-hogares) .eath_txt{padding-left:13px;}
  #eastathree .eath_map{--eath-n-top:10; --eath-n-bot:10; --eath-n-cnh:6; --eath-n-fl:6;}
  /* Norwich e Ipswich, con el nombre a la izquierda del punto (RD-09). */
  #eastathree .eath_city-norwich,#eastathree .eath_city-ipswich{display:flex !important;
    flex-direction:row-reverse; left:auto; right:calc(100% - var(--eath-cx) - var(--eath-dot));
    max-width:calc(var(--eath-cx) + var(--eath-dot)); text-align:right;}
}

/* ===== De 565 a 980 (ronda 2, DT9–DT11) ======================================
   Desde 565 de pieza (501 de mapa), el fondo de 980 en lugar del de 501 y la raya
   de la distancia dibujada; desde 640 de pieza (mapa de 576), Great Yarmouth en
   una línea (en dos, al crecer su letra, se acerca a Lowestoft) y, sin `round()`,
   el reparto de trazos de 916. */
@container eath (min-width: 565px){
  #eastathree .eath_bg{display:none !important;}
  #eastathree .eath_bg2,#eastathree .eath_t{display:block !important;}
}
@container eath (min-width: 640px){
  #eastathree .eath_map{--eath-n-top:15; --eath-n-bot:15; --eath-n-cnh:11; --eath-n-fl:9; --eath-n-bx:17; --eath-n-cnv:30;}
  #eastathree .eath_cl{display:inline !important; height:auto;}
  #eastathree .eath_city-yarmouth{line-height:11px;}   /* en una línea, el 11 de Figma a 980 */
}