/* --- ESTILOS BASE --- */
body { font-family: 'Inter', sans-serif; overflow-x: hidden; }

/* Animación del fondo dinámico */
@keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.bg-dinamico {
    background: linear-gradient(-45deg, #f8fafc, #e2e8f0, #dbeafe, #f1f5f9);
    background-size: 400% 400%;
    animation: gradient-animation 15s ease infinite;
    min-height: 100vh;
}

/* --- TARJETAS PRINCIPALES (Look Premium) --- */
.premium-card { 
    border-radius: 2.5rem !important; 
    cursor: pointer;
    transition: all 0.3s ease-in-out; 
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.premium-card:active {
    transform: scale(0.98); /* Efecto de pulsación al hacer clic */
}
.premium-card:hover { 
    transform: translateY(-12px); 
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); 
}

/* --- TEMPORIZADOR ESTILO BANNER --- */
.timer-banner {
    background: linear-gradient(90deg, #1e293b 0%, #334155 100%);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 1.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 600;
}
.timer-clock { color: #fbbf24; font-weight: 900; }

/* --- RESPONSIVIDAD MÓVIL (Look 3ra Imagen) --- */
@media (max-width: 768px) {
    .premium-card { border-radius: 1.5rem !important; }
    header h2 { font-size: 2.5rem !important; }
    /* Ajuste Modal Móvil */
    .modal-container { 
        border-radius: 1.5rem !important; 
        max-height: 95vh !important; 
    }
    .modal-content-wrapper { flex-direction: column !important; }
    .modal-image-box { height: 250px !important; width: 100% !important; }
    .modal-info-box { width: 100% !important; padding: 1.5rem !important; }
}

/* Animación Pulso WhatsApp */
@keyframes pulse-green {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(34, 197, 94, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.btn-whatsapp-pulse { animation: pulse-green 2s infinite; }
[x-cloak] { display: none !important; }
.descripcion-texto { white-space: pre-wrap; }

@media (max-width: 768px) {
    /* Reducimos el header para que no ocupe toda la pantalla */
    header { padding: 3rem 1rem !important; margin-bottom: 2rem !important; }
    header h2 { font-size: 1.8rem !important; }
    header input { py: 3; px: 6; font-size: 1rem !important; }

    /* Tarjetas principales más compactas */
    .premium-card { border-radius: 1.2rem !important; }
    .premium-card .p-10 { padding: 1.5rem !important; } /* Bajamos de 10 a 1.5 */
    .premium-card h4 { font-size: 1.2rem !important; margin-bottom: 1rem !important; }
    .premium-card .text-4xl { font-size: 1.8rem !important; } /* Precio más pequeño */

    /* Modal (Detalle) optimizado para celular */
    .modal-container { 
        width: 100% !important; 
        height: 100% !important; 
        max-height: 100vh !important; 
        border-radius: 0 !important; /* Pantalla completa en móvil se ve mejor */
    }
    
    .modal-content-wrapper { flex-direction: column !important; }
    
    .modal-image-box { 
        height: 200px !important; 
        width: 100% !important; 
        border-radius: 0 !important;
    }

    .modal-info-box { 
        width: 100% !important; 
        padding: 1.2rem !important; /* Espacio más cómodo */
    }

    .modal-info-box h3 { font-size: 1.5rem !important; margin-bottom: 1rem !important; }
    
    /* Banner de tiempo más delgado */
    .timer-banner { 
        padding: 0.6rem 1rem !important; 
        font-size: 0.8rem !important; 
        border-radius: 0.8rem !important; 
    }

    /* Botón de WhatsApp más pequeño para que no tape contenido */
    .btn-whatsapp-pulse {
        bottom: 1.5rem !important;
        right: 1.5rem !important;
        padding: 1rem !important;
    }
}