/*=========================================================
    CUENTA REGRESIVA
=========================================================*/

.countdown-section{
    position:relative;

    min-height:78vh;

    display:flex;
    align-items:center;

    padding:100px 24px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            var(--vino-dark) 0%,
            var(--vino) 52%,
            #7c3042 100%
        );

    color:var(--blanco);
}

.countdown-section::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 18% 22%,
            rgba(255,255,255,.11),
            transparent 30%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(255,255,255,.07),
            transparent 34%
        );

    pointer-events:none;
}

.countdown-container{
    position:relative;
    z-index:var(--z-content);

    width:min(980px, 100%);

    margin-inline:auto;

    text-align:center;
}

.countdown-eyebrow{
    margin-bottom:12px;

    color:var(--plateado-light);

    font-size:.78rem;
    letter-spacing:4px;
    text-transform:uppercase;
}

.countdown-title{
    font-family:var(--font-title);
    font-size:clamp(3.4rem, 8vw, 6.5rem);
    font-weight:500;
    line-height:.95;
}

.countdown-divider{
    width:120px;
    height:1px;

    margin:34px auto 52px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--plateado),
            transparent
        );
}

.countdown{
    display:grid;
    grid-template-columns:
        minmax(110px, 1fr)
        auto
        minmax(110px, 1fr)
        auto
        minmax(110px, 1fr)
        auto
        minmax(110px, 1fr);

    align-items:center;

    gap:22px;
}

.countdown-item{
    display:flex;
    flex-direction:column;
    align-items:center;

    gap:10px;
}

.countdown-number{
    min-width:3ch;

    font-family:var(--font-title);
    font-size:clamp(3.4rem, 8vw, 6.2rem);
    font-weight:500;
    line-height:1;
}

.countdown-label{
    color:var(--plateado-light);

    font-size:.72rem;
    letter-spacing:3px;
    text-transform:uppercase;
}

.countdown-separator{
    align-self:start;

    margin-top:.28em;

    color:rgba(230,233,237,.7);

    font-family:var(--font-title);
    font-size:clamp(2.5rem, 5vw, 4.5rem);
}

.countdown-message{
    margin-top:52px;

    color:var(--plateado-light);

    font-size:.9rem;
    letter-spacing:4px;
    text-transform:uppercase;
}

/*=========================================================
    ANIMACIÓN
=========================================================*/

.countdown-eyebrow,
.countdown-title,
.countdown-divider,
.countdown,
.countdown-message{
    opacity:0;

    transform:translateY(30px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.countdown-section.is-visible .countdown-eyebrow{
    opacity:1;
    transform:none;
}

.countdown-section.is-visible .countdown-title{
    opacity:1;
    transform:none;

    transition-delay:.15s;
}

.countdown-section.is-visible .countdown-divider{
    opacity:1;
    transform:none;

    transition-delay:.3s;
}

.countdown-section.is-visible .countdown{
    opacity:1;
    transform:none;

    transition-delay:.45s;
}

.countdown-section.is-visible .countdown-message{
    opacity:1;
    transform:none;

    transition-delay:.6s;
}

/*=========================================================
    RESPONSIVE
=========================================================*/

@media (max-width:760px){

    .countdown-section{
        min-height:auto;

        padding:85px 20px;
    }

    .countdown{
        grid-template-columns:repeat(2, minmax(110px, 1fr));

        gap:34px 20px;
    }

    .countdown-separator{
        display:none;
    }

}

@media (max-width:420px){

    .countdown{
        grid-template-columns:repeat(2, minmax(90px, 1fr));
    }

    .countdown-number{
        font-size:3.4rem;
    }

}