:root{ --ipae-red:#2d3c96; --ipae-white:#fff; --ipae-bar-h:56px; --ipae-gap:16px; }

.ipae-bar{
  position:relative; z-index:9999; background:var(--ipae-red); color:var(--ipae-white);
  height:var(--ipae-bar-h); display:flex; align-items:center;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}
.ipae-wrap{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
  display:flex;
  align-items:center;       /* centra verticalmente */
  justify-content:center;   /* centra horizontalmente */
  gap:16px;                 /* espacio entre texto y círculos */
  flex-wrap:wrap;           /* para que en móviles baje a dos líneas si no entra */
  text-align:center;
}

.ipae-text{ font-weight:600; letter-spacing:.2px; white-space:nowrap; }

.ipae-timer{ display:flex; gap:var(--ipae-gap); align-items:center; }
.ring{ position:relative; width:48px; height:48px; display:grid; place-items:center; }
.ring svg{ width:48px; height:48px; transform:rotate(-90deg); }
.ring circle{ fill:none; stroke-width:8; stroke-linecap:round; }
.ring .bg{ stroke:rgba(255,255,255,.25); }
.ring .fg{ stroke:var(--ipae-white); stroke-dasharray:339.292; stroke-dashoffset:339.292; transition:stroke-dashoffset .6s ease; }
.ring .value{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; transform:translateY(1px); }
.ring strong{ font-size:14px; line-height:1; font-weight:700; }
.ring span{ display:block; font-size:10px; opacity:.9; margin-top:2px; }

/* ===== Ajustes de tamaño y separación dentro de los aros ===== */
#ipae-countdown .ring .value{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1;          /* compacta verticalmente */
}

#ipae-countdown .ring strong{
  font-size:22px;         /* ↑ número más grande (antes ~14) */
  font-weight:800;
  line-height:1;          /* sin aire extra */
  margin:0;               /* sin márgenes */
  color:#fff;
  text-shadow:0 0 1px rgba(0,0,0,.15);
}

#ipae-countdown .ring span{
  font-size:11px;         /* etiqueta un poco mayor */
  margin-top:-2px;        /* pega la etiqueta al número */
  letter-spacing:.1px;
  color:#fff;
}

/* Si quieres que los aros también queden un poco más juntos */
#ipae-countdown .ipae-wrap{ gap:12px; }          /* antes 16px */
#ipae-countdown .ring{ margin-inline:2px; }      /* ajusta separación entre aros */

/* Responsivo: en pantallas chicas baja un toque */
@media (max-width:640px){
  #ipae-countdown .ring{ width:42px; height:42px; }
  #ipae-countdown .ring svg{ width:42px; height:42px; }
  #ipae-countdown .ring strong{ font-size:18px; }
  #ipae-countdown .ring span{ font-size:10px; margin-top:-1px; }
}


@media (max-width:900px){ :root{ --ipae-bar-h:52px; --ipae-gap:12px; } .ring{ width:42px; height:42px; } .ring svg{ width:42px; height:42px; } }
@media (max-width:640px){ .ipae-text{ font-size:14px; } .ring strong{ font-size:13px; } .ring span{ font-size:9px; } }

/* ===== Mobile fixes (≤640px) ===== */
@media (max-width:640px){

  /* La franja ya no es de altura fija: que crezca según el contenido */
  #ipae-countdown.ipae-bar{
    height:auto;                 /* quita la altura fija */
    min-height:44px;
    padding:6px 10px;            /* respiración */
  }

  /* Envoltura centrada, con wrap y espacios compactos */
  #ipae-countdown .ipae-wrap{
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    column-gap:10px;
    row-gap:4px;
    text-align:center;
  }

  /* Reordenamos: Faltan | [aros] | texto final (texto final toma toda la fila) */
  #ipae-countdown .ipae-wrap .ipae-text:first-of-type{ order:1; }
  #ipae-countdown .ipae-timer{ order:2; }
  #ipae-countdown .ipae-wrap .ipae-text:last-of-type{
    order:3;
    flex:1 1 100%;               /* ocupa todo el ancho disponible */
    line-height:1.15;            /* junta líneas */
  }

  /* Tamaño de aros y tipografía un poco menor para que todo quepa */
  #ipae-countdown .ring{ width:40px; height:40px; }
  #ipae-countdown .ring svg{ width:40px; height:40px; }
  #ipae-countdown .ring strong{ font-size:16px; line-height:1; }
  #ipae-countdown .ring span{ font-size:9px; margin-top:-1px; }

  /* Texto “Faltan” y cola más compactos */
  #ipae-countdown .ipae-text{
    font-size:14px;
    line-height:1.15;            /* evita separación grande entre líneas */
    white-space:normal;          /* permite el quiebre natural */
  }
}
/* ===== Layout en dos líneas bien compactas ===== */
#ipae-countdown .ipae-wrap{
  flex-direction: column;      /* apilamos líneas */
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 4px;                    /* espacio mínimo entre líneas */
  flex-wrap: nowrap;
}

/* Primera línea: Faltan + círculos + texto final */
#ipae-countdown .count-line1{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;              /* si no entra, que quiebre sin separarse mucho */
}

/* Segunda línea */
#ipae-countdown .count-line2{
  font-size:14px;
  font-weight:500;
  line-height:1.2;             /* junta más las líneas */
}

/* Ajustes de los aros */
#ipae-countdown .ring{
  width:46px; height:46px;
}
#ipae-countdown .ring svg{
  width:46px; height:46px;
}
#ipae-countdown .ring strong{
  font-size:20px; line-height:1;
}
#ipae-countdown .ring span{
  font-size:11px;
  margin-top:-2px;             /* pegado al número */
}

/* ====== COUNTDOWN IPAE – CSS CONSOLIDADO ====== */
/* Colores y trazos siempre en blanco */
#ipae-countdown .ring .bg { stroke: rgba(255,255,255,.28) !important; }
#ipae-countdown .ring .fg { stroke: #fff !important; }

/* La barra nunca corta contenido */
#ipae-countdown.ipae-bar{
  height:auto;
  padding:10px 16px;
}

/* ---------- Base (desktop por defecto) ---------- */
/* En desktop TODO en una sola línea: 
   Faltan [DÍAS] [HORAS] para CADE Ejecutivos 2025  |  Cupos limitados... */
#ipae-countdown .ipae-wrap{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:14px;                /* espacio entre bloques */
  white-space:nowrap;      /* 1 sola línea */
  text-align:center;
}

#ipae-countdown .count-line1{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

#ipae-countdown .count-line1 .ipae-text{
  font-weight:700;
  font-size:15px;
  line-height:1.15;
}

#ipae-countdown .count-line2{
  display:flex;
  align-items:center;
  margin-left:10px;        /* pequeña separación después de la línea 1 */
  font-size:14px;
  line-height:1.2;
  white-space:nowrap;
}

/* Aros y tipografías (tamaño cómodo en desktop) */
#ipae-countdown .ring{ width:46px; height:46px; }
#ipae-countdown .ring svg{ width:46px; height:46px; }
#ipae-countdown .ring .value{
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
}
#ipae-countdown .ring strong{ font-size:20px; font-weight:800; line-height:1; }
#ipae-countdown .ring span{ font-size:11px; margin-top:-2px; }

/* ---------- Mobile (≤ 640px): 2 líneas exactas ----------
   L1: Faltan [DÍAS] [HORAS] para CADE Ejecutivos 2025  (una sola línea)
   L2: Cupos limitados, asegura tu lugar
*/
@media (max-width:640px){
  #ipae-countdown.ipae-bar{ padding:8px 10px; }

  #ipae-countdown .ipae-wrap{
    flex-direction:column;   /* fuerza 2 líneas */
    row-gap:6px;
    white-space:normal;      /* permitimos salto entre líneas 1 y 2 */
  }

  /* LÍNEA 1 (una sola línea, orden correcto) */
  #ipae-countdown .count-line1{
    order:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex-wrap:nowrap;
    white-space:nowrap;      /* NO se parte dentro de la línea 1 */
  }

  /* Orden dentro de la línea 1 */
  #ipae-countdown .count-line1 .ipae-text:first-of-type{ order:1; } /* "Faltan" */
  #ipae-countdown .count-line1 .ring:nth-of-type(1){ order:2; }     /* Días */
  #ipae-countdown .count-line1 .ring:nth-of-type(2){ order:3; }     /* Horas */
  #ipae-countdown .count-line1 .ipae-text:last-of-type{ order:4; }  /* "para CADE..." */

  #ipae-countdown .count-line1 .ipae-text{ font-size:14px; line-height:1.15; }

  /* Aros un toque más chicos para que quepa */
  #ipae-countdown .ring{ width:40px; height:40px; }
  #ipae-countdown .ring svg{ width:40px; height:40px; }
  #ipae-countdown .ring strong{ font-size:16px; }
  #ipae-countdown .ring span{ font-size:9px; margin-top:-1px; }

  /* LÍNEA 2 (debajo) */
  #ipae-countdown .count-line2{
    order:2;
    display:block;
    margin-left:0;
    font-size:14px;
    line-height:1.2;
    white-space:normal;      /* permite el salto natural si el ancho es muy chico */
    text-wrap:balance;       /* mejora el balance del salto en 2 líneas si aplica */
  }
}

/* ---------- Ajuste para laptops angostas (entre 640 y 992) ---------- */
@media (min-width:641px) and (max-width:991px){
  #ipae-countdown .ring{ width:44px; height:44px; }
  #ipae-countdown .ring svg{ width:44px; height:44px; }
  #ipae-countdown .ring strong{ font-size:19px; }
  #ipae-countdown .count-line1 .ipae-text{ font-size:15px; }
  #ipae-countdown .count-line2{ font-size:14px; }
}