/* ===== IberPangea Text (self-contained) ===== */
@font-face{font-family:'IberPangea Text';src:url('/wcorp/gc/prod/es_ES/estaticos/igualdad-oportunidades-mapa-2026/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/igualdad-oportunidades-mapa-2026/fonts/IberPangeaText-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}

:root{--iq-base:#DCEBE1; --iq-foot:#00A443; --iq-active:#00402A; --iq-green1:#007F33; --iq-border:#D8CFC7; --iq-sand:#FFF5EC;}

/* ===== Contenedor ===== */
#ioqmap{container-type:inline-size; width:100%; max-width:980px; margin:0 auto; position:relative; box-sizing:border-box; text-align:left;
  background:#fff; border:1px solid var(--iq-border); border-radius:15px; overflow:hidden;}
#ioqmap *{box-sizing:border-box; margin:0; padding:0;}
#ioqmap img{display:block; max-width:100%;}

#ioqmap .iq_stage{position:relative; width:100%; aspect-ratio:980 / 469.76;}

/* ===== Mapa ===== */
#ioqmap .iq_map{position:absolute; left:5.31%; top:5.11%; width:92.24%; aspect-ratio:904 / 423;}
#ioqmap .iq_map svg,#ioqmap .iq_map>img{width:100%; height:100%; display:block; overflow:visible;}
#ioqmap .iq_map svg path{transition:fill .22s ease;}

/* ===== Conectores (overlay dibujado por JS) ===== */
#ioqmap .iq_conn{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; overflow:visible;}
#ioqmap .iq_conn path{fill:none; stroke:var(--iq-active); stroke-width:1.5;}
#ioqmap .iq_conn circle{fill:var(--iq-active);}

/* ===== Cajas ===== */
#ioqmap .iq_box{position:absolute; display:inline-flex; align-items:center; gap:1.02cqi; white-space:nowrap;
  background:#fff; border:1px solid var(--iq-border); border-radius:1.53cqi; padding:1.02cqi 1.63cqi;
  font-family:'IberPangea Text',sans-serif;
  transition:border-color .18s ease, background-color .18s ease; z-index:2;}
/* botón-overlay = selector que cubre toda la caja (debajo del enlace) */
#ioqmap .iq_select{position:absolute; inset:0; z-index:1; border:0; margin:0; padding:0; background:transparent; cursor:pointer; border-radius:inherit; appearance:none; -webkit-appearance:none;}
#ioqmap .iq_flag{position:relative; z-index:2; width:3.16cqi; height:3.16cqi; border-radius:50%; object-fit:cover; flex:0 0 auto; pointer-events:none;}
#ioqmap .iq_flag--globe{border-radius:0;}
#ioqmap .iq_txt{position:relative; z-index:2; display:flex; flex-direction:column; gap:.41cqi; align-items:flex-start; pointer-events:none;}
#ioqmap .iq_name{font-weight:400; font-style:normal; font-size:1.63cqi; line-height:2.04cqi; color:#000;}
#ioqmap .iq_link{position:relative; z-index:3; font-style:italic; font-weight:400; font-size:1.43cqi; line-height:1.84cqi; color:var(--iq-green1); text-decoration:none;}
#ioqmap .iq_link:hover,#ioqmap .iq_link:focus-visible{text-decoration:underline;}
/* AJUSTE reversible (UX): el enlace solo es clicable cuando la caja está activa;
   inactiva -> el clic atraviesa al selector y activa la caja (evita abrir el enlace sin querer).
   Para revertir: poner pointer-events:auto por defecto y borrar estas 2 reglas. */
#ioqmap .iq_link{pointer-events:none;}
#ioqmap .iq_box.is-active .iq_link{pointer-events:auto;}

/* hover = solo aviso visual sobre el selector */
@media (hover:hover){ #ioqmap .iq_box:has(.iq_select:hover){border-color:var(--iq-green1);} }
/* caja activa (seleccionada) = fondo sand + borde verde (Figma nodo 22300:44888) */
#ioqmap .iq_box.is-active{background:var(--iq-sand); border-color:var(--iq-green1);}
#ioqmap .iq_select:focus-visible{outline:2px solid #007ACB; outline-offset:2px;}

/* posiciones (layout 980 — % del stage) */
#ioqmap .iq_box--us{left:2.45%; top:47.65%;}
#ioqmap .iq_box--br{left:5.31%; top:63.86%;}
#ioqmap .iq_box--uk{left:56.60%; top:15.21%;}
#ioqmap .iq_box--es{left:78.77%; top:45.73%;}
#ioqmap .iq_box--intl{left:47.14%; top:75.14%;}

/* ===== Recoloreo por caja activa (green1 -> forest) ===== */
#ioqmap[data-active="us"]   #united_states,
#ioqmap[data-active="br"]   #brazil,
#ioqmap[data-active="es"]   #spain,
#ioqmap[data-active="uk"]   #united_kingdom,
#ioqmap[data-active="uk"]   #ireland,
#ioqmap[data-active="intl"] #portugal,
#ioqmap[data-active="intl"] #france,
#ioqmap[data-active="intl"] #italy,
#ioqmap[data-active="intl"] #germany,
#ioqmap[data-active="intl"] #netherlands,
#ioqmap[data-active="intl"] #poland,
#ioqmap[data-active="intl"] #greece,
#ioqmap[data-active="intl"] #japan,
#ioqmap[data-active="intl"] #australia{fill:var(--iq-active);}
/* Cyprus y Qatar son footprint (verdes) pero NO pertenecen a Internacional -> se quedan verdes */

/* ================= LAYOUT 565 (contenedor <= 759) ================= */
@container (max-width:759px){
  #ioqmap .iq_stage{aspect-ratio:565 / 255.22;}
  #ioqmap .iq_map{left: 10.07%; top: 17.25%; width: 75%;}
  #ioqmap .iq_box{padding:1.77cqi 1.42cqi; gap:1.77cqi; border-radius:2.65cqi;}
  #ioqmap .iq_flag{width:5.66cqi; height:5.49cqi;}
  #ioqmap .iq_txt{gap:.71cqi;}
  #ioqmap .iq_name{font-size:2.12cqi; line-height:2.48cqi;}
  #ioqmap .iq_link{font-size:2.12cqi; line-height:2.83cqi;}
  #ioqmap .iq_box--us{left:2.83%; top:56.49%;}
  #ioqmap .iq_box--br{left:38.94%; top:71.87%;}
  #ioqmap .iq_box--uk{left:56.88%; top:18.08%;}
  #ioqmap .iq_box--es{left:70.10%; top:49.99%;}
  #ioqmap .iq_box--intl{left:9.88%; top:6.27%;}
}

/* ================= LAYOUT 290 (contenedor <= 429) — CON enlace, frame 290x153.25 ================= */
@container (max-width:429px){
  #ioqmap .iq_stage{aspect-ratio:290 / 153.25;}
  #ioqmap .iq_map{left:28.97%; top:19.74%; width:58.04%;}
  #ioqmap .iq_box{padding:1.38cqi 2.76cqi; gap:3.45cqi; border-radius:5.17cqi; white-space:normal;}
  #ioqmap .iq_flag{width:6.90cqi; height:6.90cqi;}
  /* width:min-content -> nombre y enlace envuelven a su palabra más larga = anchos de caja como Figma
     (us "Estados/Unidos", es enlace "Iberdrola/España") y robusto a EN/PT. */
  #ioqmap .iq_txt{gap:0; width:min-content;}
  #ioqmap .iq_name{font-size:3.79cqi; line-height:4.14cqi; white-space:normal;}          /* IberPangea Text 11/12 */
  #ioqmap .iq_link{font-size:2.41cqi; line-height:3.10cqi;}                               /* subtítulo-enlace visible (Italic 7/9 #007F33) */
  #ioqmap .iq_box--us{left:2.76%; top:39.31%;}
  #ioqmap .iq_box--br{left:15.17%; top:71.13%;}
  #ioqmap .iq_box--uk{left:32.07%; top:5.22%;}
  #ioqmap .iq_box--es{left:66.90%; top:12.40%;}
  #ioqmap .iq_box--intl{left:54.14%; top:68.29%;}
  /* PT: "Espanha" es más ancha que "España" -> desplazar es a la izquierda para respetar 8px al borde */
  html[lang="pt"] #ioqmap .iq_box--es{left:65.6%;}
}

@media (prefers-reduced-motion:reduce){#ioqmap *{transition:none !important;}}