/* ===== IberPangea self-contained (local == plataforma) ===== */
@font-face { font-family:'IberPangea'; src:url('/wcorp/gc/prod/es_ES/estaticos/finanzas-sostenibles-2025/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/finanzas-sostenibles-2025/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/finanzas-sostenibles-2025/fonts/IberPangea-SmBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'IberPangea'; src:url('/wcorp/gc/prod/es_ES/estaticos/finanzas-sostenibles-2025/fonts/IberPangea-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

:root {
  --sf-green:#00A443; --sf-green1:#007F33; --sf-forest:#00402A;
  --sf-text:#3A3735; --sf-sub:#615D5A; --sf-border:#B0A9A3;
  --sf-white:#FFFEFF; --sf-sand:#FFF5EC;
}

#sustfin25 {
  width:100%; max-width:980px; margin:0 auto; box-sizing:border-box;   /* 980 (ancho completo) / contenido real 746; Figma 565 */
  background:var(--sf-white); border:1px solid var(--sf-border); border-radius:15px;
  padding:24px 16px 20px; text-align:left; position:relative; overflow:hidden;
}
#sustfin25 * { font-family:'IberPangea',sans-serif; box-sizing:border-box; margin:0; padding:0; font-style:normal; }
#sustfin25 ul { list-style:none; }
#sustfin25 img { display:block; }

#sustfin25 .sf_title { color:var(--sf-green1); font-weight:400; font-size:32px; line-height:38px; margin-bottom:6px; }
#sustfin25 .sf_title strong { font-weight:700; }
#sustfin25 .sf_sub { display:none; color:var(--sf-sub); font-size:16px; line-height:1; } /* móvil: sin subtítulo (frame 290 no lo lleva) */

/* ---- Gráfico ---- */
#sustfin25 .sf_graph { position:relative; }
/* El anillo llena el ancho del contenido (viewBox recortado, sin blanco lateral). Sin sangrado:
   el +32px provocaba desborde/recorte de la bolita 3. width:100% da el tamaño correcto. */
#sustfin25 .sf_dwrap { position:relative; width:100%; max-width:300px; margin:0 auto; }
#sustfin25 .sf_donut { display:block; width:100%; height:auto; }
#sustfin25 .sf_donut--d { display:none; } /* base = móvil */
#sustfin25 .sf_total { position:absolute; top:49.75%; left:46.7%; transform:translate(-50%,-50%); text-align:center; color:var(--sf-green1); font-weight:500; font-size:20px; line-height:1.2; width:52%; } /* centro del anillo (desplazado izq porque las bolitas cargan a la derecha) */
#sustfin25 .sf_total strong { display:block; font-weight:600; font-size:36px; line-height:1; margin-bottom:2px; }
#sustfin25 .sf_bridges { display:none; } /* puentes conector→etiqueta: solo desktop ancho (>565) */

/* lista: base = leyenda apilada (móvil): nombre / [bolita nº + línea] / cifra */
#sustfin25 .sf_list { counter-reset:sfn; margin-top:16px; }
#sustfin25 .sf_item { counter-increment:sfn; margin-bottom:16px; }
#sustfin25 .sf_item span { display:block; color:var(--sf-text); font-size:16px; line-height:1.25; margin-bottom:9px; padding-left:36px; } /* texto indentado (Figma) */
#sustfin25 .sf_div { display:block; position:relative; height:30px; margin-bottom:9px; }
#sustfin25 .sf_div:before { content:counter(sfn); position:absolute; left:0; top:0; width:30px; height:30px; border:1px solid var(--sf-border); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:600; color:var(--sf-text); background:var(--sf-white); z-index:1; }
#sustfin25 .sf_div:after { content:""; position:absolute; left:30px; right:0; top:15px; border-top:1px solid var(--sf-border); }
#sustfin25 .sf_item strong { display:block; color:var(--sf-text); font-size:20px; font-weight:600; line-height:1.1; padding-left:36px; }

#sustfin25 .sf_nota { color:var(--sf-text); font-size:13px; font-style:italic; line-height:1.2; margin:20px 0 20px; }

/* ---- Caja sand (destacados) ---- base = móvil: fila [cifra + icono] y texto debajo */
#sustfin25 .sf_high { background:var(--sf-sand); border-radius:15px; padding:16px; display:flex; flex-direction:column; gap:16px; }
#sustfin25 .sf_high_item { background:var(--sf-white); border-radius:15px; padding:16px; display:flex; flex-direction:column; gap:8px; }
#sustfin25 .sf_high_item--2 { gap:4px; }
#sustfin25 .sf_high_head { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
#sustfin25 .sf_fig { color:var(--sf-green); font-weight:500; font-size:32px; line-height:1; }
#sustfin25 .sf_fig--sm { font-size:24px; line-height:22px; }
#sustfin25 .sf_lead { color:var(--sf-forest); font-size:16px; line-height:18px; }
#sustfin25 .sf_desc { color:var(--sf-forest); font-size:16px; line-height:18px; }
#sustfin25 .sf_ico { flex:0 0 auto; height:40px; width:auto; }
#sustfin25 .sf_ico--d { display:none; } /* card2: móvil usa globo+logo (sin manos) */

/* ================= DESKTOP (≥565): composición fija dentro de 565 ================= */
@media (min-width:565px) {
  #sustfin25 { padding:24px 30px 28px; } /* borde 1 + pad 30 = 31 (inicio de contenido Figma); contenido = 503 exacto */
  #sustfin25 .sf_title { margin-bottom:8px; }
  #sustfin25 .sf_sub { display:block; font-size:20px; margin-bottom:0; }
  #sustfin25 .sf_div { display:none; } /* el divisor de la leyenda es solo móvil */

  #sustfin25 .sf_graph { width:100%; height:630px; margin:16px auto 0; } /* fluido: llena TODO el contenido (donut fijo centrado; etiquetas y conectores hasta el borde, también a 980) */
  #sustfin25 .sf_dwrap { position:absolute; inset:0; width:auto; max-width:none; margin:0; }
  #sustfin25 .sf_donut--m { display:none; }
  #sustfin25 .sf_donut--d { display:block; position:absolute; left:50%; top:0; transform:translateX(-50%); width:503px; height:630px; } /* donut centrado en el gráfico fluido */

  /* puentes: prolongan la línea del conector (del SVG centrado) hasta la etiqueta (en el borde) */
  #sustfin25 .sf_bridges { display:block; position:absolute; inset:0; pointer-events:none; }
  /* 1px nítido (height:1px, no transform), top = Ylínea-0.5 para casar píxel a píxel con el trazo del SVG,
     y +3px de solape (248.5 en vez de 251.5) para que la unión no tenga corte */
  #sustfin25 .sf_bridges i { position:absolute; width:calc(50% - 248.5px); height:1px; background:var(--sf-border); }
  #sustfin25 .sf_bridges i:nth-child(1){ left:0;  top:27px }
  #sustfin25 .sf_bridges i:nth-child(2){ right:0; top:73px }
  #sustfin25 .sf_bridges i:nth-child(3){ right:0; top:336px }
  #sustfin25 .sf_bridges i:nth-child(4){ right:0; top:461px }
  #sustfin25 .sf_bridges i:nth-child(5){ right:0; top:575px }
  #sustfin25 .sf_bridges i:nth-child(6){ left:0;  top:570.5px }
  #sustfin25 .sf_bridges i:nth-child(7){ left:0;  top:462px }
  #sustfin25 .sf_bridges i:nth-child(8){ left:0;  top:169px }

  /* total en el centro del donut (contenido 251.5, 198.5) */
  #sustfin25 .sf_total { left:50%; top:154px; transform:translateX(-50%); width:180px; font-size:20px; } /* centro del donut (= centro del gráfico) */
  #sustfin25 .sf_total strong { font-size:36px; line-height:1; margin-bottom:2px; }

  /* etiquetas radiales: la CIFRA se ancla a su Y exacta de Figma (= fin del conector);
     el nombre va justo encima. Coords de contenido = frame-(31,177). */
  #sustfin25 .sf_list { counter-reset:none; margin:0; }
  #sustfin25 .sf_item { position:absolute; padding:0; margin:0; min-height:0; display:flex; flex-direction:column; justify-content:flex-end; }
  #sustfin25 .sf_item:before { display:none; }
  /* nombre = bloque estático pegado a la BASE del li (flex justify-end del .sf_item) → crece hacia
     arriba; su base queda donde termina en ES sea cual sea el nº de líneas (EN/PT quedan alineados). */
  #sustfin25 .sf_item span { display:block; font-size:17px; line-height:1.29; margin-bottom:0; }
  #sustfin25 .sf_item strong { position:absolute; left:0; right:0; font-size:20px; line-height:1; } /* cifra: Y exacta (fin del conector) */

  /* Equilibrio: nombre (base del li) y cifra a 9px cada uno de su línea/conector (Y del grafico.svg).
     height = (Ylínea - 9) - top;  strong{top} = (Ylínea + 9) - top.  Líneas (contenido): 27.5,73.5,336.5,461.5,575.5,571,462.5,169.5 */
  #sustfin25 .sf_item:nth-child(1){left:0;top:0;text-align:left;width:130px;height:18.5px}     #sustfin25 .sf_item:nth-child(1) strong{top:36.5px}
  #sustfin25 .sf_item:nth-child(2){right:0;top:20px;text-align:right;width:178px;height:44.5px} #sustfin25 .sf_item:nth-child(2) strong{top:62.5px}
  #sustfin25 .sf_item:nth-child(3){right:0;top:259px;text-align:right;width:115px;height:68.5px} #sustfin25 .sf_item:nth-child(3) strong{top:86.5px}
  #sustfin25 .sf_item:nth-child(4){right:0;top:387px;text-align:right;width:127px;height:65.5px} #sustfin25 .sf_item:nth-child(4) strong{top:83.5px}
  #sustfin25 .sf_item:nth-child(5){right:0;top:521px;text-align:right;width:202px;height:45.5px} #sustfin25 .sf_item:nth-child(5) strong{top:63.5px}
  #sustfin25 .sf_item:nth-child(6){left:0;top:521px;text-align:left;width:177px;height:41px}    #sustfin25 .sf_item:nth-child(6) strong{top:59px}
  #sustfin25 .sf_item:nth-child(7){left:0;top:387px;text-align:left;width:110px;height:66.5px}  #sustfin25 .sf_item:nth-child(7) strong{top:84.5px}
  #sustfin25 .sf_item:nth-child(8){left:0;top:97px;text-align:left;width:105px;height:63.5px}   #sustfin25 .sf_item:nth-child(8) strong{top:81.5px}

  #sustfin25 .sf_nota { margin:8px 0 24px; font-size:14px; }

  /* leyenda desktop: sin indent (etiquetas posicionadas) */
  #sustfin25 .sf_item span, #sustfin25 .sf_item strong { padding-left:0; }

  /* caja sand en fila; tarjetas 193/242 (no 50/50); icono arriba, texto debajo */
  #sustfin25 .sf_high { flex-direction:row; gap:13px; padding:28px; }
  #sustfin25 .sf_high_item { padding:19px; gap:0; }
  #sustfin25 .sf_high_item:first-child { flex:193 1 0; }
  #sustfin25 .sf_high_item:last-child { flex:242 1 0; }
  #sustfin25 .sf_high_head { flex-direction:column-reverse; align-items:flex-start; justify-content:flex-start; }
  #sustfin25 .sf_high_item:first-child .sf_high_head { gap:0; } /* solo la caja 99% (desktop): sin gap icono-cifra */
  #sustfin25 .sf_ico { height:auto; max-height:56px; width:auto; margin-bottom:14px; }
  #sustfin25 .sf_ico--d { display:block; } /* desktop card2: manos+globo+logo */
  #sustfin25 .sf_ico--m { display:none; }
  #sustfin25 .sf_fig { margin-bottom:6px; }
  #sustfin25 .sf_lead { margin-bottom:2px; }
  #sustfin25 .sf_fig--sm { margin-bottom:2px; }
  #sustfin25 .sf_high_item--2 { gap:0; }
}