/* ========================================= */
/* ===== SILVER MONDAY - ESTILOS NUEVOS ==== */
/* ========================================= */

/* --- VARIABLES --- */
:root {
    --sm-neon: #ff4500;
    /* Color Naranja Neón */
    --sm-bg-dark: #000000;
    --sm-text-color: #ffffff;
}

/* ================= MODAL ================= */

/* Fondo oscuro pantalla completa */
.sm-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    /* Muy alto para estar encima de todo */
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    /* Flex para centrar el modal */
    align-items: center;
    justify-content: center;
}

/* Caja del Modal (La imagen es el fondo) */
.sm-modal-box {
    position: relative;
    width: 1000px;
    height: 460px;
    /* Altura fija según la imagen */
    max-width: 95vw;
    background-color: var(--sm-bg-dark);
    /* RUTA DE LA IMAGEN - Asegúrate que sea correcta */
    background-image: url('../imagenes/sm-bg.png');
    background-size: cover;
    /* Cubre todo el cuadro */
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255, 69, 0, 0.3);
    /* Sombra neón sutil */
    overflow: hidden;
}

/* Botón Cerrar (X) */
.sm-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: transparent;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10;
}

/* Contenedor del contenido "VIVO" (Contador y botón) */
/* Posicionado abajo a la derecha */
.sm-live-content {
    position: absolute;
    bottom: 30px;
    right: 40px;
    width: 320px;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Alinear todo a la derecha */
}

/* Texto "La oferta finaliza en" */
.sm-label {
    color: white;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    font-family: sans-serif;
    opacity: 0.9;
}

/* --- CONTADOR --- */
.sm-countdown {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

/* Cada círculo del tiempo */
.sm-timer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* El círculo con el número */
.sm-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--sm-neon);
    color: var(--sm-neon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.5);
    /* Brillo */
    margin-bottom: 5px;
    background: rgba(0, 0, 0, 0.4);
    /* Fondo semi-transparente para legibilidad */
}

/* Texto debajo (DAYS, HRS...) */
.sm-timer-item small {
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
}

/* --- BOTÓN CTA --- */
.sm-cta-btn {
    display: inline-block;
    padding: 10px 30px;
    /* border: 1px solid var(--sm-neon); */
    background: black;
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(227, 53, 13, 1) 100%);
    color: white;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 0 5px rgba(255, 69, 0, 0.3);
}

.sm-cta-btn:hover {
    background: var(--sm-neon);
    color: black;
    box-shadow: 0 0 20px rgba(255, 69, 0, 0.8);
}


/* ================= SECCIÓN ================= */
/* Estilos para la sección dentro de la página */

.sm-section-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline:  2rem;
    background-color: #050505;
    color: white;
    gap: 40px;
    max-width: 100%;
    /* IMPORTANTE: Hidden aquí asegura que el difuminado no ensanche la página */
    overflow: hidden;
    /* box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.8); */
    position: relative;
}

.sm-text-col {
    flex: 1;
    max-width: 600px;
    padding-left: 5%;
    /* Un poco de aire a la izquierda */
}

.sm-text-col h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.sm-text-col p {
    font-size: 1.2rem;
    opacity: 0.8;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.sm-img-col {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    /* CAMBIO CLAVE: El gradiente debe terminar en transparente, no en negro sólido */
background: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(242, 83, 44, 1) 3%, rgba(0, 0, 0, 0) 67%);    /* Opcional: difuminar los bordes del propio contenedor de fondo */
    /* filter: blur(10px); */
}

.sm-featured-img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 0 15px rgba(255, 69, 0, 0.2));

    /* CAMBIO CLAVE: Usar máscara RADIAL es mejor para figuras centrales */
    /* Esto hace que el centro sea 100% visible y los bordes se desvanezcan */
    -webkit-mask-image: radial-gradient(circle,
            black 50%,
            /* Centro totalmente visible */
            transparent 95%
            /* Bordes se vuelven invisibles suavemente */
        );
    mask-image: radial-gradient(circle,
            black 50%,
            transparent 95%);
}

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

@media (max-width: 768px) {

    /* Modal Móvil */
    .sm-modal-box {
        height: auto;
        min-height: 450px;
        background-position: top center;
        /* Ajustar imagen */
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        /* Empujar contenido abajo */
    }

    .sm-live-content {
        position: relative;
        bottom: auto;
        right: auto;
        width: 100%;
        align-items: center;
        /* Centrar todo */
        padding: 20px;
        background: linear-gradient(to top, black 20%, transparent);
        /* Oscurecer abajo para leer texto */
    }

    .sm-label {
        text-align: center;
    }

    .sm-circle {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    /* Sección Móvil */
    .sm-section-container {
        flex-direction: column-reverse;
        /* Imagen arriba o abajo según gusto */
        text-align: center;
        padding: 2rem 1rem;
    }

    .sm-text-col {
        padding-left: 0;
    }

    .sm-text-col h1 {
        font-size: 2.5rem;
    }
}