/* ==========================================================
   ESTUDIO IDEAS — Contador Regresivo (v4.5.1)
   18 animaciones + espaciados controlables por variables CSS
   Tamaños responsivos vía Container Queries (cqi), no viewport (vw)
   Padding/gutter de móvil ajustables por separado del de escritorio
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;900&family=Poppins:wght@400;600;800&family=Montserrat:wght@400;700;900&family=Oswald:wght@400;600;700&family=Anton&family=Bebas+Neue&display=swap');

/* v4.5.1: el container query vive en este DIV que envuelve al wrapper,
   no en el wrapper mismo. Un elemento no puede "consultarse a sí mismo"
   por container query (rompería el padding), así que el ancho de
   referencia lo da este host (sin padding propio, mismo ancho que el
   espacio real disponible en la página). */
.ei-contador-cq-host {
    container-type: inline-size;
    container-name: ei-contador;
}

.ei-contador-regresivo-wrapper {
    --ei-color-numero: rgba(239, 3, 78, 0.55);
    --ei-color-etiqueta: #ffffff;
    --ei-color-fondo: transparent;
    --ei-fuente: 'DM Sans', sans-serif;
    --ei-tamano-numero: 40px;
    --ei-tamano-etiqueta: 12px;
    --ei-padding: 20px;
    --ei-gap: 0px;
    --ei-sep-encabezado: 18px;
    --ei-sep-pie: 16px;
    --ei-min-bloque: 90px;

    max-width: 1400px;
    margin: 0 auto;
    padding: var(--ei-padding, 20px);
    text-align: center;
    font-family: var(--ei-fuente);
    background: var(--ei-color-fondo);
    position: relative;

    /* v4.5.1: el número/etiqueta se calculan contra el ancho REAL del
       host (container query), no contra el viewport completo. Antes
       usábamos "vw", que ignoraba el padding de columnas/secciones de
       Elementor y hacía que el número se viera gigante y chocara con
       la etiqueta en pantallas angostas. */
}

.ei-contador-encabezado {
    margin-bottom: var(--ei-sep-encabezado, 18px);
}

.ei-contador-titulo {
    color: var(--ei-color-etiqueta);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.4;
    font-family: var(--ei-fuente);
}

.ei-contador-subtitulo {
    color: var(--ei-color-etiqueta);
    opacity: 0.75;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    font-family: var(--ei-fuente);
}

/* ==========================
   BLOQUES / NÚMEROS GRANDES
========================== */
.ei-contador-bloques {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--ei-gap, 0px);
    flex-wrap: wrap;
}

.ei-contador-bloque {
    flex: 1 1 0;
    min-width: var(--ei-min-bloque, 90px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ei-contador-numero-stack {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(min(var(--ei-tamano-numero), 24cqi) * 1.4);
    width: 100%;
    overflow: hidden;
    perspective: 600px;
}

.ei-contador-numero {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    font-family: var(--ei-fuente);
    font-weight: 900;
    font-size: min(var(--ei-tamano-numero), 24cqi);
    line-height: 1;
    color: var(--ei-color-numero);
    font-variant-numeric: tabular-nums;
    user-select: none;
    white-space: nowrap;
}

.ei-numero-actual {
    opacity: 1;
}

.ei-numero-siguiente {
    opacity: 0;
}

.ei-contador-etiqueta {
    position: relative;
    z-index: 2;
    color: var(--ei-color-etiqueta);
    font-family: var(--ei-fuente);
    font-size: min(var(--ei-tamano-etiqueta), 5cqi);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: var(--ei-sep-etiqueta, -0.15em);
    pointer-events: none;
}

/* ==========================
   ANIMACIONES (10 variantes, seleccionables por [data-animacion])
   Cada una define una salida (número saliente) y una entrada (número entrante).
   La duración la controla --ei-duracion-anim (variable inline, en ms).
========================== */

.ei-numero-actual.ei-animar-salida,
.ei-numero-siguiente.ei-animar-entrada {
    animation-duration: var(--ei-duracion-anim, 500ms);
    animation-fill-mode: forwards;
}

/* -------- 1. Zoom clásico (profundidad) -------- */
@keyframes ei-zoom-salida {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0px); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); filter: blur(2px); }
}
@keyframes ei-zoom-entrada {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(1.9); filter: blur(1px); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0px); }
}
[data-animacion="zoom"] .ei-numero-actual.ei-animar-salida { animation-name: ei-zoom-salida; animation-timing-function: ease-in; }
[data-animacion="zoom"] .ei-numero-siguiente.ei-animar-entrada { animation-name: ei-zoom-entrada; animation-timing-function: ease-out; }

/* -------- 2. Zoom con rebote elástico -------- */
[data-animacion="zoom_rebote"] .ei-numero-actual.ei-animar-salida { animation-name: ei-zoom-salida; animation-timing-function: ease-in; }
[data-animacion="zoom_rebote"] .ei-numero-siguiente.ei-animar-entrada { animation-name: ei-zoom-entrada; animation-timing-function: cubic-bezier(.34, 1.76, .64, 1); }

/* -------- 3. Deslizar hacia arriba -------- */
@keyframes ei-deslizar-arriba-salida {
    0%   { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
    100% { opacity: 0; transform: translate(-50%, -50%) translateY(-60%); }
}
@keyframes ei-deslizar-arriba-entrada {
    0%   { opacity: 0; transform: translate(-50%, -50%) translateY(60%); }
    100% { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
}
[data-animacion="deslizar_arriba"] .ei-numero-actual.ei-animar-salida { animation-name: ei-deslizar-arriba-salida; animation-timing-function: ease-in; }
[data-animacion="deslizar_arriba"] .ei-numero-siguiente.ei-animar-entrada { animation-name: ei-deslizar-arriba-entrada; animation-timing-function: ease-out; }

/* -------- 4. Deslizar hacia abajo -------- */
@keyframes ei-deslizar-abajo-salida {
    0%   { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
    100% { opacity: 0; transform: translate(-50%, -50%) translateY(60%); }
}
@keyframes ei-deslizar-abajo-entrada {
    0%   { opacity: 0; transform: translate(-50%, -50%) translateY(-60%); }
    100% { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
}
[data-animacion="deslizar_abajo"] .ei-numero-actual.ei-animar-salida { animation-name: ei-deslizar-abajo-salida; animation-timing-function: ease-in; }
[data-animacion="deslizar_abajo"] .ei-numero-siguiente.ei-animar-entrada { animation-name: ei-deslizar-abajo-entrada; animation-timing-function: ease-out; }

/* -------- 5. Deslizar lateral -------- */
@keyframes ei-deslizar-lateral-salida {
    0%   { opacity: 1; transform: translate(-50%, -50%) translateX(0); }
    100% { opacity: 0; transform: translate(-50%, -50%) translateX(-60%); }
}
@keyframes ei-deslizar-lateral-entrada {
    0%   { opacity: 0; transform: translate(-50%, -50%) translateX(60%); }
    100% { opacity: 1; transform: translate(-50%, -50%) translateX(0); }
}
[data-animacion="deslizar_lateral"] .ei-numero-actual.ei-animar-salida { animation-name: ei-deslizar-lateral-salida; animation-timing-function: ease-in; }
[data-animacion="deslizar_lateral"] .ei-numero-siguiente.ei-animar-entrada { animation-name: ei-deslizar-lateral-entrada; animation-timing-function: ease-out; }

/* -------- 6. Flip vertical (estilo reloj) -------- */
@keyframes ei-flip-v-salida {
    0%   { opacity: 1; transform: translate(-50%, -50%) rotateX(0deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) rotateX(90deg); }
}
@keyframes ei-flip-v-entrada {
    0%   { opacity: 0; transform: translate(-50%, -50%) rotateX(-90deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) rotateX(0deg); }
}
[data-animacion="flip_vertical"] .ei-numero-actual.ei-animar-salida { animation-name: ei-flip-v-salida; animation-timing-function: ease-in; }
[data-animacion="flip_vertical"] .ei-numero-siguiente.ei-animar-entrada { animation-name: ei-flip-v-entrada; animation-timing-function: ease-out; }

/* -------- 7. Flip horizontal -------- */
@keyframes ei-flip-h-salida {
    0%   { opacity: 1; transform: translate(-50%, -50%) rotateY(0deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) rotateY(90deg); }
}
@keyframes ei-flip-h-entrada {
    0%   { opacity: 0; transform: translate(-50%, -50%) rotateY(-90deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) rotateY(0deg); }
}
[data-animacion="flip_horizontal"] .ei-numero-actual.ei-animar-salida { animation-name: ei-flip-h-salida; animation-timing-function: ease-in; }
[data-animacion="flip_horizontal"] .ei-numero-siguiente.ei-animar-entrada { animation-name: ei-flip-h-entrada; animation-timing-function: ease-out; }

/* -------- 8. Girar en su eje -------- */
@keyframes ei-girar-salida {
    0%   { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(160deg) scale(0.4); }
}
@keyframes ei-girar-entrada {
    0%   { opacity: 0; transform: translate(-50%, -50%) rotate(-160deg) scale(1.6); }
    100% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
}
[data-animacion="girar"] .ei-numero-actual.ei-animar-salida { animation-name: ei-girar-salida; animation-timing-function: ease-in; }
[data-animacion="girar"] .ei-numero-siguiente.ei-animar-entrada { animation-name: ei-girar-entrada; animation-timing-function: ease-out; }

/* -------- 9. Desvanecer (fade suave, sin movimiento) -------- */
@keyframes ei-desvanecer-salida {
    0%   { opacity: 1; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, -50%); }
}
@keyframes ei-desvanecer-entrada {
    0%   { opacity: 0; transform: translate(-50%, -50%); }
    100% { opacity: 1; transform: translate(-50%, -50%); }
}
[data-animacion="desvanecer"] .ei-numero-actual.ei-animar-salida { animation-name: ei-desvanecer-salida; animation-timing-function: ease-in; }
[data-animacion="desvanecer"] .ei-numero-siguiente.ei-animar-entrada { animation-name: ei-desvanecer-entrada; animation-timing-function: ease-out; }

/* -------- 10. Rebote (bounce vertical, tipo pelota) -------- */
@keyframes ei-rebote-salida {
    0%   { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) translateY(-20%) scale(0.7); }
}
@keyframes ei-rebote-entrada {
    0%   { opacity: 0; transform: translate(-50%, -50%) translateY(-80%) scale(0.6); }
    45%  { opacity: 1; transform: translate(-50%, -50%) translateY(8%) scale(1.05); }
    70%  { transform: translate(-50%, -50%) translateY(-4%) scale(0.97); }
    100% { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); }
}
[data-animacion="rebote"] .ei-numero-actual.ei-animar-salida { animation-name: ei-rebote-salida; animation-timing-function: ease-in; }
[data-animacion="rebote"] .ei-numero-siguiente.ei-animar-entrada { animation-name: ei-rebote-entrada; animation-timing-function: linear; }


/* -------- 11. Zoom con desenfoque intenso -------- */
@keyframes ei-zoom-blur-salida {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0px); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); filter: blur(8px); }
}
@keyframes ei-zoom-blur-entrada {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); filter: blur(6px); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0px); }
}
[data-animacion="zoom_blur"] .ei-numero-actual.ei-animar-salida { animation-name: ei-zoom-blur-salida; animation-timing-function: ease-in; }
[data-animacion="zoom_blur"] .ei-numero-siguiente.ei-animar-entrada { animation-name: ei-zoom-blur-entrada; animation-timing-function: ease-out; }

/* -------- 12. Caída con gravedad y rebote -------- */
@keyframes ei-caida-salida {
    0%   { opacity: 1; transform: translate(-50%, -50%) translateY(0) rotate(0deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) translateY(100%) rotate(10deg); }
}
@keyframes ei-caida-entrada {
    0%   { opacity: 0; transform: translate(-50%, -50%) translateY(-120%); }
    55%  { opacity: 1; transform: translate(-50%, -50%) translateY(7%); }
    75%  { transform: translate(-50%, -50%) translateY(-4%); }
    90%  { transform: translate(-50%, -50%) translateY(2%); }
    100% { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
}
[data-animacion="caida"] .ei-numero-actual.ei-animar-salida { animation-name: ei-caida-salida; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
[data-animacion="caida"] .ei-numero-siguiente.ei-animar-entrada { animation-name: ei-caida-entrada; animation-timing-function: linear; }

/* -------- 13. Elástico lateral -------- */
@keyframes ei-elastico-salida {
    0%   { opacity: 1; transform: translate(-50%, -50%) translateX(0) scaleX(1); }
    30%  { transform: translate(-50%, -50%) translateX(8%) scaleX(1.2); }
    100% { opacity: 0; transform: translate(-50%, -50%) translateX(-70%) scaleX(1.4); }
}
@keyframes ei-elastico-entrada {
    0%   { opacity: 0; transform: translate(-50%, -50%) translateX(80%) scaleX(1.5); }
    60%  { opacity: 1; transform: translate(-50%, -50%) translateX(-8%) scaleX(0.9); }
    80%  { transform: translate(-50%, -50%) translateX(4%) scaleX(1.05); }
    100% { opacity: 1; transform: translate(-50%, -50%) translateX(0) scaleX(1); }
}
[data-animacion="elastico"] .ei-numero-actual.ei-animar-salida { animation-name: ei-elastico-salida; animation-timing-function: ease-in; }
[data-animacion="elastico"] .ei-numero-siguiente.ei-animar-entrada { animation-name: ei-elastico-entrada; animation-timing-function: linear; }

/* -------- 14. Glitch digital -------- */
@keyframes ei-glitch-salida {
    0%   { opacity: 1; transform: translate(-50%, -50%) skewX(0deg); }
    20%  { opacity: 0.8; transform: translate(-52%, -48%) skewX(8deg); }
    40%  { opacity: 0.5; transform: translate(-47%, -51%) skewX(-10deg); }
    60%  { opacity: 0.7; transform: translate(-53%, -50%) skewX(6deg); }
    80%  { opacity: 0.25; transform: translate(-48%, -49%) skewX(-14deg) scale(1.04); }
    100% { opacity: 0; transform: translate(-50%, -50%) skewX(0deg) scale(1.08); }
}
@keyframes ei-glitch-entrada {
    0%   { opacity: 0; transform: translate(-50%, -50%) skewX(14deg) scale(1.08); }
    20%  { opacity: 0.4; transform: translate(-47%, -52%) skewX(-10deg); }
    40%  { opacity: 0.75; transform: translate(-53%, -49%) skewX(8deg); }
    60%  { opacity: 0.55; transform: translate(-48%, -50%) skewX(-6deg); }
    80%  { opacity: 0.95; transform: translate(-51%, -50%) skewX(3deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) skewX(0deg) scale(1); }
}
[data-animacion="glitch"] .ei-numero-actual.ei-animar-salida { animation-name: ei-glitch-salida; animation-timing-function: steps(5, end); }
[data-animacion="glitch"] .ei-numero-siguiente.ei-animar-entrada { animation-name: ei-glitch-entrada; animation-timing-function: steps(5, end); }

/* -------- 15. Parpadeo neón -------- */
@keyframes ei-neon-salida {
    0%   { opacity: 1; transform: translate(-50%, -50%); text-shadow: none; }
    25%  { opacity: 0.2; transform: translate(-50%, -50%); }
    45%  { opacity: 0.9; transform: translate(-50%, -50%); text-shadow: 0 0 14px currentColor; }
    65%  { opacity: 0.1; transform: translate(-50%, -50%); }
    80%  { opacity: 0.5; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, -50%); text-shadow: none; }
}
@keyframes ei-neon-entrada {
    0%   { opacity: 0; transform: translate(-50%, -50%); text-shadow: none; }
    20%  { opacity: 0.7; transform: translate(-50%, -50%); text-shadow: 0 0 16px currentColor; }
    35%  { opacity: 0.1; transform: translate(-50%, -50%); }
    55%  { opacity: 0.9; transform: translate(-50%, -50%); text-shadow: 0 0 12px currentColor; }
    70%  { opacity: 0.3; transform: translate(-50%, -50%); }
    100% { opacity: 1; transform: translate(-50%, -50%); text-shadow: none; }
}
[data-animacion="neon"] .ei-numero-actual.ei-animar-salida { animation-name: ei-neon-salida; animation-timing-function: linear; }
[data-animacion="neon"] .ei-numero-siguiente.ei-animar-entrada { animation-name: ei-neon-entrada; animation-timing-function: linear; }

/* -------- 16. Espiral -------- */
@keyframes ei-espiral-salida {
    0%   { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(260deg) scale(0.05); }
}
@keyframes ei-espiral-entrada {
    0%   { opacity: 0; transform: translate(-50%, -50%) rotate(-260deg) scale(0.05); }
    100% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
}
[data-animacion="espiral"] .ei-numero-actual.ei-animar-salida { animation-name: ei-espiral-salida; animation-timing-function: ease-in; }
[data-animacion="espiral"] .ei-numero-siguiente.ei-animar-entrada { animation-name: ei-espiral-entrada; animation-timing-function: ease-out; }

/* -------- 17. Onda (aplastar y estirar, estilo cartoon) -------- */
@keyframes ei-onda-salida {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1, 1); }
    40%  { transform: translate(-50%, -50%) scale(0.8, 1.25); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5, 0.15); }
}
@keyframes ei-onda-entrada {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3, 1.6); }
    45%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2, 0.8); }
    70%  { transform: translate(-50%, -50%) scale(0.92, 1.08); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1, 1); }
}
[data-animacion="onda"] .ei-numero-actual.ei-animar-salida { animation-name: ei-onda-salida; animation-timing-function: ease-in; }
[data-animacion="onda"] .ei-numero-siguiente.ei-animar-entrada { animation-name: ei-onda-entrada; animation-timing-function: linear; }

/* -------- 18. Persiana vertical -------- */
@keyframes ei-persiana-salida {
    0%   { opacity: 1; transform: translate(-50%, -50%) scaleY(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scaleY(0); }
}
@keyframes ei-persiana-entrada {
    0%   { opacity: 0; transform: translate(-50%, -50%) scaleY(0); }
    100% { opacity: 1; transform: translate(-50%, -50%) scaleY(1); }
}
[data-animacion="persiana"] .ei-numero-actual.ei-animar-salida { animation-name: ei-persiana-salida; animation-timing-function: ease-in; }
[data-animacion="persiana"] .ei-numero-siguiente.ei-animar-entrada { animation-name: ei-persiana-entrada; animation-timing-function: ease-out; }

/* ==========================
   TEXTOS DE PIE / VENCIDO
========================== */
.ei-contador-pie {
    color: var(--ei-color-etiqueta);
    opacity: 0.6;
    font-size: 13px;
    font-weight: 400;
    margin: var(--ei-sep-pie, 16px) 0 0;
    font-family: var(--ei-fuente);
}

.ei-contador-vencido {
    color: var(--ei-color-etiqueta);
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    font-family: var(--ei-fuente);
}

/* ==========================
   MÓVIL (v4.5.1 — container queries)
   Se activa según el ancho REAL del host (.ei-contador-cq-host), no de
   la pantalla completa. Esto hace que se vea bien tanto en el celular
   real como dentro de columnas angostas de Elementor en desktop.
   Se mantiene SIEMPRE horizontal (4 en fila): los bloques se reparten
   por % del ancho disponible en vez de saltar de línea.
========================== */
@container ei-contador (max-width: 640px) {
    /* Padding y separación entre bloques en móvil: si vos configuraste
       un valor en "Padding en móvil" / "Separación entre bloques en
       móvil" se usa ese. Si lo dejaste en automático, cae a un valor
       proporcionalmente más chico que el de escritorio (no fijo), para
       no comerse espacio de los números. */
    .ei-contador-regresivo-wrapper {
        padding: var(--ei-padding-movil, min(var(--ei-padding, 20px), 12px));
    }

    .ei-contador-bloques {
        gap: var(--ei-gap-movil, var(--ei-gap, 0px));
    }

    .ei-contador-titulo {
        font-size: 16px;
    }

    /* Sin ancho mínimo fijo: cada bloque se reparte por % del ancho
       disponible (25% cada uno, menos el gutter), y el número se
       achica solo vía cqi. Así nunca salta de línea ni se rompe el
       layout horizontal. */
    .ei-contador-bloque {
        min-width: 0;
    }
}

/* Salvavidas para navegadores sin soporte de container queries
   (prácticamente ninguno hoy, pero por seguridad no dejamos el sitio
   roto): vuelve al comportamiento anterior basado en viewport. */
@supports not (container-type: inline-size) {
    @media (max-width: 640px) {
        .ei-contador-regresivo-wrapper {
            padding: var(--ei-padding-movil, min(var(--ei-padding, 20px), 12px));
        }

        .ei-contador-bloques {
            gap: var(--ei-gap-movil, var(--ei-gap, 0px));
        }

        .ei-contador-titulo {
            font-size: 16px;
        }

        .ei-contador-bloque {
            min-width: 0;
        }

        .ei-contador-numero-stack {
            height: calc(min(var(--ei-tamano-numero), 20vw) * 1.4);
        }

        .ei-contador-numero {
            font-size: min(var(--ei-tamano-numero), 20vw);
        }

        .ei-contador-etiqueta {
            font-size: min(var(--ei-tamano-etiqueta), 4.5vw);
        }
    }
}