/* ============================================================
   RESPONSIVE DESIGN SYSTEM - PREMIOS BYD
   Adaptabilidad universal para Smartphones, Tablets y Laptops
   ============================================================ */

/* 1. Reset y límites de viewport anti-desborde */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

img, video, iframe, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* 2. Tipografía Fluida */
h1, .h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h2, .h2 { font-size: clamp(1.4rem, 3vw, 2.2rem); }
h3, .h3 { font-size: clamp(1.2rem, 2.5vw, 1.75rem); }
h4, .h4 { font-size: clamp(1.05rem, 2vw, 1.4rem); }

/* 3. Contenedores y espaciados */
@media (max-width: 767.98px) {
    .container, .container-fluid {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .py-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* 4. Navbar y Menú en Móviles */
@media (max-width: 991.98px) {
    .navbar-premium {
        padding: 10px 0 !important;
    }
    
    .navbar-premium .navbar-collapse {
        background: #0f172a;
        border-radius: 16px;
        padding: 18px;
        margin-top: 10px;
        border: 1px solid rgba(255,255,255,0.12);
        box-shadow: 0 15px 35px rgba(0,0,0,0.6);
    }
    
    .navbar-premium .nav-link {
        padding: 10px 14px !important;
        border-radius: 10px;
    }
    
    .navbar-premium .nav-link:hover {
        background: rgba(255,255,255,0.06);
    }

    .brand-text {
        font-size: 1.15rem !important;
    }
}

/* 5. Tarjetas de Rifas en Móvil y Tablet */
@media (max-width: 767.98px) {
    .rifa-card-gs, .rifa-card-premium {
        border-radius: 16px !important;
    }
    
    .rifa-card-gs .rifa-img, .rifa-card-premium img {
        height: 180px !important;
    }
    
    .rifa-card-gs .p-4, .rifa-card-premium .card-body {
        padding: 16px !important;
    }
    
    .btn-comprar-ahora, .btn-cta-primary, .btn-mp-pay {
        font-size: 1.05rem !important;
        padding: 14px 20px !important;
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .rifa-card-gs .rifa-img {
        height: 155px !important;
    }
    
    .badge-modalidad, .badge-bendecidas-count {
        font-size: 0.7rem !important;
        padding: 4px 8px !important;
    }
}

/* 6. Grilla de Paquetes de Compra Rápida */
@media (max-width: 767.98px) {
    .paquetes-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .paquete-card {
        padding: 12px 8px !important;
        border-radius: 14px !important;
    }
    
    .paquete-cant {
        font-size: 1.4rem !important;
    }
    
    .paquete-precio {
        font-size: 1.1rem !important;
    }
}

@media (max-width: 360px) {
    .paquetes-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 7. Boletas Doradas y Azules Bendecidas */
@media (max-width: 767.98px) {
    .gold-ticket-box, .blue-ticket-box, .badge-numero-gold, .badge-numero-blue {
        font-size: 1.25rem !important;
        padding: 8px 12px !important;
        min-width: 75px !important;
    }
}

@media (max-width: 480px) {
    .gold-ticket-box, .blue-ticket-box, .badge-numero-gold, .badge-numero-blue {
        font-size: 1.1rem !important;
        padding: 6px 10px !important;
        min-width: 65px !important;
    }
}

/* 8. Modales en Móviles (Full-width Touch) */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }
    
    .modal-content-dark, .modal-content {
        border-radius: 18px !important;
        padding: 6px !important;
    }
}

/* 9. Botones y Elementos Táctiles (Touch-Friendly) */
button, .btn, a.btn, input, select, textarea {
    touch-action: manipulation;
}

@media (max-width: 767.98px) {
    .btn, input.form-control, select.form-select {
        min-height: 46px;
    }
}