/* ===== IberPangea + IberPangea Text (self-contained) ===== */
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/fases-economia-circular-2026/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/fases-economia-circular-2026/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/fases-economia-circular-2026/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/fases-economia-circular-2026/fonts/IberPangea-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea Text';src:url('/wcorp/gc/prod/es_ES/estaticos/fases-economia-circular-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/fases-economia-circular-2026/fonts/IberPangeaText-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'IberPangea Text';src:url('/wcorp/gc/prod/es_ES/estaticos/fases-economia-circular-2026/fonts/IberPangeaText-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea Text';src:url('/wcorp/gc/prod/es_ES/estaticos/fases-economia-circular-2026/fonts/IberPangeaText-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/fases-economia-circular-2026/fonts/IberPangeaText-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

:root{
  --fc-green1:#007F33; --fc-green:#00A443; --fc-green3:#26BF64; --fc-forest:#00402A;
  --fc-text:#3A3735; --fc-white:#FFFEFF; --fc-border:#D8CFC7;
}

/* ===== Caja exterior (card) ===== */
#fecirc26{
  container-type:inline-size;
  width:100%; max-width:980px; margin:0 auto; box-sizing:border-box;
  background:#fff; box-shadow:inset 0 0 0 1px var(--fc-border); border-radius:15px;
  text-align:left; position:relative;
}
#fecirc26 *{font-family:'IberPangea Text',sans-serif; box-sizing:border-box; margin:0; padding:0; font-style:normal;}
#fecirc26 img{display:block; max-width:100%;}
#fecirc26 button{font:inherit; cursor:pointer; border:0; background:transparent; padding:0; margin:0; color:inherit; text-align:inherit; appearance:none; -webkit-appearance:none;}

#fecirc26 .fc_inner{display:flex; flex-direction:column; gap:24px; padding:32px 16px 16px;}   /* móvil */

/* ===== Título ===== */
#fecirc26 .fc_title{font-family:'IberPangea',sans-serif; font-weight:400; color:var(--fc-green1); font-size:28px; line-height:1.14;}
#fecirc26 .fc_title strong{font-weight:600;}

/* ===== Anillo ===== */
#fecirc26 .fc_ring{position:relative; width:100%; margin:0 auto; aspect-ratio:258/263;}  /* móvil: ocupa todo el ancho */
#fecirc26 .fc_arrows,#fecirc26 .fc_conn{position:absolute; pointer-events:none; z-index:1;}
#fecirc26 .fc_arrows svg{display:block; width:100%; height:100%;}
#fecirc26 .fc_conn{inset:0; width:100%; height:100%;}         /* elipse en coords del anillo -> llena el anillo, va DETRÁS */
/* flechas: rect del grupo compensando el margen de trazo del export (para que el lazo llegue al borde) */
#fecirc26 .fc_arrows--m{left:-2.91%; width:105.81%; top:8.56%; height:90.11%;}
#fecirc26 .fc_arrows--d,#fecirc26 .fc_conn--d{display:none;}   /* base = móvil */

/* ítems (círculo + etiqueta) — van DELANTE (z-index 2) y tapan la línea */
#fecirc26 .fc_item{position:absolute; width:var(--d); left:var(--x); top:var(--y); z-index:2; border-radius:50%;}
#fecirc26 .fc_circle{position:relative; width:100%; height:auto; border-radius:50%; clip-path:circle(50%);}  /* disco OPACO: ocluye la línea */
#fecirc26 .fc_item::after{content:""; position:absolute; inset:0; border-radius:50%; background:rgba(255,255,255,.8); pointer-events:none; transition:opacity .22s ease;}  /* velo = atenuado inactivo, pero OPACO abajo */
/* hover = solo aviso visual sobre el selector (aclara un poco el círculo); NO cambia la fase (eso es clic/tap) */
@media (hover:hover){ #fecirc26 .fc_item:hover::after{opacity:.5;} }
#fecirc26 .fc_label{display:none;}                /* móvil: sin etiquetas alrededor */

/* posiciones móvil (258x263) */
#fecirc26 .fc_item{--d:31.53%;}
#fecirc26 .fc_item[data-phase="1"]{--x:34.09%; --y:0;}
#fecirc26 .fc_item[data-phase="2"]{--x:65.62%; --y:18.95%;}
#fecirc26 .fc_item[data-phase="3"]{--x:65.62%; --y:53.51%;}
#fecirc26 .fc_item[data-phase="4"]{--x:34.09%; --y:69.11%;}
#fecirc26 .fc_item[data-phase="5"]{--x:2.56%; --y:53.51%;}
#fecirc26 .fc_item[data-phase="6"]{--x:2.56%; --y:18.95%;}

/* badge numérico */
#fecirc26 .fc_num{flex:0 0 auto; width:27px; height:27px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'IberPangea',sans-serif; font-weight:600; font-size:18px; line-height:1;}

/* ===== Panel de fase ===== */
#fecirc26 .fc_panel{position:relative; border:1px solid var(--fc-border); border-radius:16px; overflow:hidden; display:grid;}  /* apila las fases -> alto estable (= la más alta), sin saltos */
#fecirc26 .fc_slide{grid-area:1/1; opacity:0; visibility:hidden; transition:opacity .22s ease, visibility 0s .22s;}
#fecirc26 .fc_head{display:flex; align-items:center; gap:8px; background:var(--fc-green1); padding:8px 24px;}
#fecirc26 .fc_head .fc_num{width:26px; height:26px; background:var(--fc-white); color:var(--fc-forest);}
#fecirc26 .fc_htitle{font-family:'IberPangea Text',sans-serif; font-weight:500; color:var(--fc-white); font-size:18px; line-height:1.33;}
#fecirc26 .fc_desc{color:var(--fc-text); font-size:16px; line-height:1.25; padding:16px;}
#fecirc26 .fc_desc strong{font-weight:600;}

/* ===== Pie: contador + botonera ===== */
#fecirc26 .fc_foot{display:flex; align-items:center; justify-content:space-between;}
#fecirc26 .fc_count{font-style:italic; font-size:14px; line-height:1.28; color:var(--fc-forest); border:1px solid var(--fc-forest); border-radius:24px; padding:5px 16px;}
#fecirc26 .fc_cur{font-style:italic; color:var(--fc-green1);}
#fecirc26 .fc_nav{display:flex; gap:16px;}
#fecirc26 .fc_btn{width:32px; height:32px; border-radius:50%; background:transparent; border:1px solid var(--fc-forest); display:flex; align-items:center; justify-content:center; color:var(--fc-forest);}
#fecirc26 .fc_btn svg{width:14.55px; height:10.71px;}
#fecirc26 .fc_btn:disabled{opacity:.5; cursor:default;}
#fecirc26 .fc_item:focus-visible,#fecirc26 .fc_btn:focus-visible{outline:2px solid #007ACB; outline-offset:2px;}

/* contador dinámico según fase activa */
#fecirc26[data-active="1"] .fc_cur::before{content:"1";}
#fecirc26[data-active="2"] .fc_cur::before{content:"2";}
#fecirc26[data-active="3"] .fc_cur::before{content:"3";}
#fecirc26[data-active="4"] .fc_cur::before{content:"4";}
#fecirc26[data-active="5"] .fc_cur::before{content:"5";}
#fecirc26[data-active="6"] .fc_cur::before{content:"6";}

/* estado ACTIVO: sin velo (círculo a todo color), panel visible */
#fecirc26[data-active="1"] .fc_item[data-phase="1"]::after,
#fecirc26[data-active="2"] .fc_item[data-phase="2"]::after,
#fecirc26[data-active="3"] .fc_item[data-phase="3"]::after,
#fecirc26[data-active="4"] .fc_item[data-phase="4"]::after,
#fecirc26[data-active="5"] .fc_item[data-phase="5"]::after,
#fecirc26[data-active="6"] .fc_item[data-phase="6"]::after{opacity:0;}
#fecirc26[data-active="1"] .fc_slide[data-phase="1"],
#fecirc26[data-active="2"] .fc_slide[data-phase="2"],
#fecirc26[data-active="3"] .fc_slide[data-phase="3"],
#fecirc26[data-active="4"] .fc_slide[data-phase="4"],
#fecirc26[data-active="5"] .fc_slide[data-phase="5"],
#fecirc26[data-active="6"] .fc_slide[data-phase="6"]{opacity:1; visibility:visible; transition:opacity .22s ease, visibility 0s 0s;}

/* ================= DESKTOP (contenedor >= 520) ================= */
@container (min-width:520px){
  #fecirc26 .fc_inner{gap:32px; padding:32px;}
  #fecirc26 .fc_title{font-size:32px; line-height:1.125;}

  #fecirc26 .fc_ring{max-width:501px; aspect-ratio:501/522;}
  #fecirc26 .fc_arrows--m,#fecirc26 .fc_conn--m{display:none;}
  #fecirc26 .fc_arrows--d{display:block; left:-2.30%; width:104.59%; top:0.96%; height:97.89%;}
  #fecirc26 .fc_conn--d{display:block;}

  /* círculos 122/501 y posiciones 565 */
  #fecirc26 .fc_item{--d:24.35%;}
  #fecirc26 .fc_item[data-phase="1"]{--x:39.73%; --y:0;}
  #fecirc26 .fc_item[data-phase="2"]{--x:68.38%; --y:10.73%;}
  #fecirc26 .fc_item[data-phase="3"]{--x:71.13%; --y:50.53%;}
  #fecirc26 .fc_item[data-phase="4"]{--x:39.73%; --y:66.13%;}
  #fecirc26 .fc_item[data-phase="5"]{--x:7.82%; --y:47.21%;}
  #fecirc26 .fc_item[data-phase="6"]{--x:7.67%; --y:10.79%;}

  /* etiquetas centradas bajo el círculo (pastilla). Atenuado inactivo = opacity (no tapa nada). */
  #fecirc26 .fc_label{display:inline-flex; align-items:center; gap:10px; position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:8px; white-space:nowrap; padding:10px 12px; border-radius:15px; background:var(--fc-white); box-shadow:inset 0 0 0 1px var(--fc-border); overflow:hidden;}
  #fecirc26 .fc_label::after{content:""; position:absolute; inset:0; border-radius:inherit; background:rgba(255,255,255,.8); pointer-events:none; transition:opacity .22s ease;}  /* velo = atenuado inactivo, pero OPACO: tapa la elipse discontinua */
  #fecirc26 .fc_label .fc_num{background:var(--fc-green1); color:var(--fc-white);}
  #fecirc26 .fc_name{font-family:'IberPangea',sans-serif; font-weight:500; font-size:16px; line-height:1.375; color:var(--fc-forest); text-align:left;}

  /* fase ACTIVA: etiqueta visible = pastilla verde (sin velo) */
  #fecirc26[data-active="1"] .fc_item[data-phase="1"] .fc_label,
  #fecirc26[data-active="2"] .fc_item[data-phase="2"] .fc_label,
  #fecirc26[data-active="3"] .fc_item[data-phase="3"] .fc_label,
  #fecirc26[data-active="4"] .fc_item[data-phase="4"] .fc_label,
  #fecirc26[data-active="5"] .fc_item[data-phase="5"] .fc_label,
  #fecirc26[data-active="6"] .fc_item[data-phase="6"] .fc_label{background:var(--fc-green1); box-shadow:none;}
  #fecirc26[data-active="1"] .fc_item[data-phase="1"] .fc_label::after,
  #fecirc26[data-active="2"] .fc_item[data-phase="2"] .fc_label::after,
  #fecirc26[data-active="3"] .fc_item[data-phase="3"] .fc_label::after,
  #fecirc26[data-active="4"] .fc_item[data-phase="4"] .fc_label::after,
  #fecirc26[data-active="5"] .fc_item[data-phase="5"] .fc_label::after,
  #fecirc26[data-active="6"] .fc_item[data-phase="6"] .fc_label::after{opacity:0;}
  #fecirc26[data-active="1"] .fc_item[data-phase="1"] .fc_name,
  #fecirc26[data-active="2"] .fc_item[data-phase="2"] .fc_name,
  #fecirc26[data-active="3"] .fc_item[data-phase="3"] .fc_name,
  #fecirc26[data-active="4"] .fc_item[data-phase="4"] .fc_name,
  #fecirc26[data-active="5"] .fc_item[data-phase="5"] .fc_name,
  #fecirc26[data-active="6"] .fc_item[data-phase="6"] .fc_name{color:var(--fc-white);}
  #fecirc26[data-active="1"] .fc_item[data-phase="1"] .fc_num,
  #fecirc26[data-active="2"] .fc_item[data-phase="2"] .fc_num,
  #fecirc26[data-active="3"] .fc_item[data-phase="3"] .fc_num,
  #fecirc26[data-active="4"] .fc_item[data-phase="4"] .fc_num,
  #fecirc26[data-active="5"] .fc_item[data-phase="5"] .fc_num,
  #fecirc26[data-active="6"] .fc_item[data-phase="6"] .fc_num{background:var(--fc-white); color:var(--fc-forest);}

  #fecirc26 .fc_htitle{font-size:18px;}
  #fecirc26 .fc_desc{padding:16px;}
}

/* ===== Accesibilidad de movimiento ===== */
@media (prefers-reduced-motion: reduce){
  #fecirc26 *,#fecirc26 *::after{transition:none !important; animation:none !important;}
}