/* ==========================================================================
   REGION: FUENTES E IMPORTACIONES
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Orbitron:wght@700;800&display=swap');
/* END REGION: FUENTES E IMPORTACIONES */


/* ==========================================================================
   REGION: TITULOS DE PROMOCIONES (BIENVENIDA)
   ========================================================================== */
#titulo-promociones-one,
#titulo-promociones-two,
#titulo-promociones-three {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    line-height: 1.05;
    letter-spacing: -0.8px;
    text-align: center;
}

#titulo-promociones-one {
    font-weight: 800;
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    color: #1a1a1a;
}

#titulo-promociones-two {
    font-weight: 700;
    font-size: clamp(1.5rem, 3.5vw, 2.7rem);
    color: #2b2b2b;
    margin-top: 4px;
}

#titulo-promociones-three {
    font-weight: 900;
    font-size: clamp(2.4rem, 5.5vw, 4.8rem);
    color: #ff7a00;
    margin-top: 6px;
    text-transform: uppercase;
    text-shadow: 0 2px 0 #d9480f, 0 4px 8px rgba(255, 69, 0, .45), 0 8px 18px rgba(255, 69, 0, .55), 0 12px 30px rgba(255, 69, 0, .35);
}
/* END REGION: TITULOS DE PROMOCIONES (BIENVENIDA) */


/* ==========================================================================
   REGION: UTILERIAS DE TEXTO (COLORES)
   ========================================================================== */
.texto-negro {
    color: #1a1a1a;
}

.texto-naranja {
    color: #ff7a00;
}

.texto-blanco {
    color: #ffffff;
}
/* END REGION: UTILERIAS DE TEXTO (COLORES) */


/* ==========================================================================
   REGION: ANIMACIONES DE ENTRADA (TITULOS)
   ========================================================================== */
#titulo-promociones-one,
#titulo-promociones-two {
    opacity: 0;
    transform: translateY(-8px);
    animation: aparecerSuave .9s forwards ease-out;
}

#titulo-promociones-three {
    opacity: 0;
    transform: translateY(8px) scale(.96);
    animation: aparecerMarca 1s forwards ease-out;
    animation-delay: .75s;
}

@keyframes aparecerSuave {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes aparecerMarca {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* END REGION: ANIMACIONES DE ENTRADA (TITULOS) */


/* ==========================================================================
   REGION: FLECHA INDICADORA ANIMADA
   ========================================================================== */
.bi-chevron-down {
    cursor: pointer;
}
#titulo-promociones-flecha {
    font-size: 3.5rem;
    line-height: 1;
    animation: flechaBajar 1.4s ease-in-out infinite;
}

@keyframes flechaBajar {
    0%,100% {
        transform: translateY(0);
        opacity: .7;
    }

    50% {
        transform: translateY(12px);
        opacity: 1;
    }
}
/* END REGION: FLECHA INDICADORA ANIMADA */


/* ==========================================================================
   REGION: CONTADOR DE TIEMPO
   ========================================================================== */
.bor-contador {
    background: rgba(255,255,255,.92);
    border: 2px solid #ff7a00;
    border-radius: 22px;
    padding: 22px 18px;
    backdrop-filter: blur(10px);
    transition: .25s ease;
    box-shadow: 0 16px 40px rgba(0,0,0,.45), inset 0 0 18px rgba(255,122,0,.25);
    cursor: pointer;

    
}

.bdr-titulo {
    border-radius: 15px;
    border-color: orangered;
    border-style: solid;
    border-width: 3px;
    padding: 10px;
}

.contador-titulo {
    font-family: 'Montserrat', sans-serif;
    font-size: .9rem;
    font-weight: 800;
    color: #ff7a00;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.contador-type {
    font-family: 'Montserrat', sans-serif;
    font-size: .9rem;
    font-weight: 800;
    color: #ff7a00;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.contador-promocion {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.3rem;
    font-weight: 800;
    color: #1a1a1a; /* Números negros */
    letter-spacing: 2px;
    text-shadow: 0 2px 8px rgba(255,122,0,.15);
    line-height: 1;
}

    .contador-promocion span {
        display: inline-block;
        font-size: .30em; /* Más pequeño */
        font-weight: 700;
        color: #ff7a00; /* Naranja */
        transform: translateY(10px);
        margin-left: 2px;
        margin-right: 8px;
        letter-spacing: .5px;
        text-transform: lowercase;
    }


/* END REGION: CONTADOR DE TIEMPO */
/* ==========================================================================
   REGION: BORDE CONTADOR ANIMADO
   ========================================================================== */
.bor-contador {
    opacity: 0;
    animation: aparecerContador .7s ease forwards;
    animation-delay: 1.5s;
}

@keyframes aparecerContador {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(-2px);
    }
}
/* END REGION: BORDE CONTADOR ANIMADO */
/* ==========================================================================
   REGION: DESCRIPCIÓN PROMOCION ANIMADO
   ========================================================================== */
.promo-pulse {
    animation: promoRespirar 2.8s ease-in-out infinite;
    transform-origin: center;
}

@keyframes promoRespirar {

    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 22px 60px rgba(0,0,0,.12);
    }

    50% {
        transform: translateY(-8px) scale(1.015);
        box-shadow: 0 34px 80px rgba(0,0,0,.18), 0 0 28px rgba(255,122,0,.18);
    }
}
/* END REGION: DESCRIPCIÓN PROMOCION ANIMADO */

/* ==========================================================================
   REGION: TARJETA DE EXHIBICION DE PROMOCION (CARD)
   ========================================================================== */
.promo-display-card {
    min-height: 430px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 34px;
    padding: 38px;
    margin-bottom: 20px;
    border-radius: 32px;
    background: #ffffff;
    border: 1px solid rgba(255,122,0,.22);
    box-shadow: 0 22px 60px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.7);
    overflow: hidden;
}

.promo-label {
    display: inline-block;
    margin-bottom: 16px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #ff7a00;
    color: #fff;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .78rem;
}

.promo-title {
    margin: 0 0 22px;
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    font-weight: 900;
    line-height: .98;
    color: #171717;
}

.promo-price-box {
    margin-top: 12px;
}

.promo-before {
    margin: 0 0 8px;
    color: #6c757d;
    font-size: 1.25rem;
    font-weight: 700;
}

    .promo-before span {
        text-decoration: line-through;
    }

.promo-now {
    margin: 0;
    color: #ff4d00;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

    .promo-now span {
        font-size: clamp(3.2rem, 8vw, 7rem);
        text-shadow: 0 4px 0 rgba(120,40,0,.18), 0 12px 28px rgba(255,77,0,.28);
    }

    .promo-now small {
        font-size: clamp(1.3rem, 3vw, 2.2rem);
        color: #171717;
    }

.promo-schedule {
    margin-top: 22px;
    font-size: 1.15rem;
    font-weight: 800;
    color: #343a40;
}

    .promo-schedule i {
        color: #ff7a00;
        margin-right: 6px;
    }

.promo-image-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.promo-image {
    width: min(100%, 430px);
    max-height: 360px;
    object-fit: contain;
    transform: rotate(-1deg);
}
/* END REGION: TARJETA DE EXHIBICION DE PROMOCION (CARD) */


/* ==========================================================================
   REGION: RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================================================== */
.promotion-image {
    max-width: 260px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

    @media (max-width: 1000px) {
        .promotion-image {
            max-height: 190px;
            max-width: 300px;
            transform: translateY(25px);
        }

        #titulo-promociones-one {
   
            margin-top: 20px;
        }

        #titulo-promociones-two {
          
            margin-bottom: 12px;
        }

        #titulo-promociones-three {
       
            margin-bottom: 12px;
        }

        #titulo-promociones-flecha {
            margin-top: 3px;
        }
    }

    @media (max-width: 768px) {
        .promo-display-card {
            grid-template-columns: 1fr;
            padding: 26px 20px;
            text-align: center;
            gap: 22px;
        }

        .promo-image {
            max-height: 230px;
            transform: none;
        }
    }
    /* END REGION: RESPONSIVE DESIGN (MEDIA QUERIES) */
    /* ==========================================================================
   REGION: SÍN PROMOCIONES
   ========================================================================== */
    .promo-empty-container {
        min-height: 420px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px 20px;
    }

    .proxima-countdown-box {
        max-height: 120px;
    }

    .promo-empty-card {
        max-width: 550px;
        max-height: 600px;
        width: 100%;
        background: #fff;
        border-radius: 28px;
        padding: 45px 35px;
        text-align: center;
        border: 2px solid #ff7a00;
        box-shadow: 0 18px 45px rgba(0,0,0,.12), 0 0 40px rgba(255,122,0,.15);
        transition: .35s;
    }

        .promo-empty-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 55px rgba(0,0,0,.18), 0 0 55px rgba(255,122,0,.25);
        }

    .promo-empty-icon {
        width: 90px;
        height: 90px;
        margin: 0 auto 25px;
        border-radius: 50%;
        background: linear-gradient(135deg,#ff8a00,#ff5100);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 55px;
        box-shadow: 0 12px 30px rgba(255,102,0,.35);
        animation: promoFloat 2.5s ease-in-out infinite;
    }

    .promo-empty-title {
        color: #ff6200;
        font-size: 2rem;
        font-weight: 800;
        margin-bottom: 15px;
        letter-spacing: .5px;
    }

    .promo-empty-text {
        color: #666;
        font-size: 1.08rem;
        line-height: 1.8;
        margin-bottom: 35px;
    }

    .btn-promo-refresh {
        background: linear-gradient(135deg,#ff7a00,#ff4d00);
        color: white;
        border: none;
        padding: 14px 38px;
        border-radius: 40px;
        font-size: 1rem;
        font-weight: 700;
        transition: .3s;
        box-shadow: 0 12px 30px rgba(255,102,0,.30);
    }

        .btn-promo-refresh:hover {
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 18px 40px rgba(255,102,0,.45);
        }

        .btn-promo-refresh i {
            margin-right: 8px;
        }

    @keyframes promoFloat {
        0%,100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-10px);
        }
    }

    @media (max-width:768px) {

        .promo-empty-card {
            padding: 35px 25px;
        }

        .promo-empty-title {
            font-size: 1.6rem;
        }

        .promo-empty-icon {
            width: 90px;
            height: 90px;
            font-size: 45px;
        }
    }

    .empty-promos-next {
        margin-top: 18px;
        margin-bottom: 14px;
        font-size: 1.05rem;
        font-weight: 800;
        color: #444;
        text-align: center;
    }

    .proxima-countdown-box {
        margin: 12px auto 0;
        padding: 16px 18px;
        max-width: 420px;
        border-radius: 18px;
        background: #fff7ef;
        border: 2px dashed #ff8a00;
        text-align: center;
    }

        .proxima-countdown-box span {
            display: block;
            font-size: .95rem;
            font-weight: 800;
            color: #333;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: .5px;
        }

        .proxima-countdown-box strong {
            display: block;
            font-size: 2.35rem;
            font-weight: 900;
            color: #d62828;
            letter-spacing: 3px;
            font-family: Consolas, monospace;
        }

    @media (max-width: 768px) {

        .promo-empty-container {
            min-height: auto;
            padding: 18px 14px;
        }

        .promo-empty-card {
            padding: 24px 18px 20px;
            border-radius: 24px;
        }

            .promo-empty-card:hover {
                transform: none;
            }

        .promo-empty-icon {
            width: 78px;
            height: 78px;
            font-size: 38px;
            margin-bottom: 18px;
        }

        .promo-empty-title {
            font-size: 1.55rem;
            line-height: 1.15;
            margin-bottom: 14px;
        }

        .promo-empty-text {
            font-size: .96rem;
            line-height: 1.55;
            margin-bottom: 18px;
        }

        .empty-promos-next {
            margin-top: 12px;
            margin-bottom: 10px;
            font-size: .95rem;
            line-height: 1.45;
        }

        .proxima-countdown-box {
            margin-top: 10px;
            padding: 12px 10px;
            border-radius: 16px;
        }

            .proxima-countdown-box span {
                font-size: .76rem;
                line-height: 1.3;
                margin-bottom: 6px;
            }

            .proxima-countdown-box strong {
                font-size: 1.85rem;
                letter-spacing: 2px;
            }

        .btn-promo-refresh {
            margin-top: 14px !important;
            width: 100%;
            max-width: 280px;
            padding: 12px 18px;
            font-size: .92rem;
        }
    }
    /* END REGION: SÍN PROMOCIONES */
    /* ==========================================================================
   REGION: CONTADOR VACÍO / PRÓXIMAMENTE
   ========================================================================== */
    .promo-expired-box {
        background: rgba(255, 255, 255, 0.95);
        border: 2px dashed #ff7a00;
        border-radius: 22px;
        padding: 30px 20px;
        box-shadow: 0 12px 35px rgba(255, 122, 0, 0.1);
        animation: expiredPulse 2s infinite ease-in-out;
    }

    .expired-badge-icon {
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #ff8a00, #ff5100);
        color: #fff;
        font-size: 26px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto 15px;
        box-shadow: 0 8px 20px rgba(255, 102, 0, 0.25);
    }

    .expired-title {
        color: #ff5100;
        font-size: 1.5rem;
        font-weight: 800;
        margin-bottom: 8px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .expired-subtitle {
        color: #555;
        font-size: 0.95rem;
        font-weight: 600;
        line-height: 1.4;
        margin: 0;
    }

    /* Efecto de pulso sutil en los bordes */
    @keyframes expiredPulse {
        0%, 100% {
            transform: translateY(0);
            box-shadow: 0 12px 35px rgba(255, 122, 0, 0.1);
        }

        50% {
            transform: translateY(-4px);
            box-shadow: 0 16px 40px rgba(255, 122, 0, 0.22);
        }
    }
    /* REGION: INFO SUCURSAL */
    .sucursal-info {
        display: inline-flex;
        align-items: center;
        gap: 8px; /* Espaciado perfecto entre elementos */
        margin-top: 15px;
        margin-bottom: 10px;
        font-size: 1.1rem; /* Tamaño elegante, legible en celular */
    }

    .sucursal-txt {
        color: #495057; /* Un gris oscuro discreto */
        font-weight: 700; /* Negrita estándar */
    }

        .sucursal-txt i {
            color: #ff7a00; /* El naranja característico de la Pollería */
        }

    .sucursal-divider {
        color: #dee2e6; /* Gris clarito para el separador '|' */
        font-weight: 300;
    }

    .sucursal-name {
        color: #ff4d00; /* Color fuerte e impactante para resaltar el nombre */
        font-weight: 900; /* Ultra negrita para llamar la atención */
        text-transform: uppercase;
    }

        .sucursal-name i {
            color: #ff4d00; /* Mismo tono para su ícono correspondiente */
        }
    /* END REGION: INFO SUCURSAL */
    .empty-promos-next {
        margin-top: 24px;
        text-align: center;
        font-size: 1.08rem;
        font-weight: 700;
        color: #555;
        line-height: 1.6;
    }

    .proxima-countdown-box {
        margin-top: 18px;
        padding: 18px 20px;
        border-radius: 18px;
        background: #fff7ef;
        border: 2px dashed #ff9b3d;
        text-align: center;
    }

        .proxima-countdown-box span {
            display: block;
            font-size: 1rem;
            color: #444;
            font-weight: 700;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: .8px;
        }


    #contador-proxima-promocion {
        font-size: 1.3rem;
        font-weight: 900;
        color: #d62828;
        font-family: Consolas, monospace;
        line-height: 1;
    }

        #contador-proxima-promocion span {
            display: inline-block;
            font-size: .42em;
            font-weight: 700;
            color: #666;
            margin-left: 2px;
            margin-right: 8px;
        }