/* =========================================
   HOJA DE ESTILOS ESPECÍFICA PARA MÓVIL
   ========================================= */

@media (max-width: 1024px) {

    /* --- OPTIMIZACIÓN DEL MENÚ DE NAVEGACIÓN --- */
    /* Soluciona el problema de que el menú estaba muy separado y no se leía todo */

    #mobile-nav {
        /* Cambiamos a flex-start para que si el menú es alto, se pueda scrollear desde arriba */
        justify-content: flex-start !important;
        padding-top: 90px;
        /* Espacio para no chocar con el botón de cerrar */
        padding-bottom: 40px;
        overflow-y: auto;
        /* Habilita scroll si el contenido excede la pantalla */
    }

    #mobile-nav ul {
        display: flex;
        flex-direction: column;
        gap: 0;
        /* Eliminamos gaps grandes, usaremos padding en los links */
        width: 100%;
        max-width: 320px;
        /* Ancho máximo para que no se vea tan disperso */
        margin: 0 auto;
    }

    #mobile-nav li {
        margin: 0 !important;
        /* Sobrescribimos el margen de 25px original */
        width: 100%;
    }

    #mobile-nav a {
        font-size: 1.35rem !important;
        /* Reducimos de 2rem a 1.35rem para que quepan todos */
        padding: 12px 0;
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        /* Separador sutil */
        line-height: 1.2;
    }

    /* Estilo especial para el botón de catálogo dentro del menú */
    #mobile-nav a[download] {
        background-color: rgba(201, 22, 25, 0.15);
        border: 1px solid var(--primary-red);
        border-radius: 8px;
        margin-top: 20px;
        font-size: 1rem !important;
        padding: 15px;
        color: #fff !important;
        text-shadow: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    /* --- OPTIMIZACIÓN SECCIÓN INICIO (HERO) --- */
    /* Ajustes de tamaño para que el contenido entre en pantallas móviles */

    #inicio .page-content {
        padding-top: 80px !important;
        justify-content: center;
    }

    #inicio .section-logo-img {
        max-width: 150px !important;
        /* Reducido de 280px para ganar espacio */
        margin-bottom: 15px !important;
    }

    #inicio h2 {
        font-size: 2rem !important;
        /* Reducido drásticamente para evitar cortes */
        line-height: 1.1 !important;
        margin-bottom: 15px !important;
    }

    #inicio .subtitle {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        padding: 0 10px;
    }

    /* --- OPTIMIZACIÓN SECCIÓN NOSOTROS --- */
    /* Ajustes para que entre toda la información en pantalla sin cortes */

    #nosotros {
        padding: 50px 0 20px 0 !important;
        /* Reducimos aún más el padding vertical */
        height: auto !important;
        /* Permitimos que la sección crezca */
        min-height: auto !important;
        overflow-y: visible !important;
        display: block !important;
        /* Evita centrado vertical forzado que genera espacios */
    }

    #nosotros .page-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #nosotros h2,
    #nosotros .premium-split-layout h2 {
        font-size: 1.6rem !important;
        margin-bottom: 10px !important;
        line-height: 1.1 !important;
    }

    #nosotros .subtitle {
        font-size: 0.9rem !important;
        margin-bottom: 15px !important;
        line-height: 1.3 !important;
    }

    .about-us-features,
    .about-us-features-vertical {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 5px !important;
    }

    .feature-card {
        padding: 15px 20px !important;
        min-height: auto !important;
        margin-bottom: 0 !important;
    }

    /* Ocultar iconos en tarjetas (Nosotros y Beneficios) */
    .feature-card .feature-icon,
    .benefit-item i {
        display: none !important;
    }

    .feature-card h3 {
        font-size: 1.1rem !important;
        margin-bottom: 3px !important;
    }

    .feature-card p {
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
    }

    /* --- OPTIMIZACIÓN SECCIÓN PRODUCTOS --- */
    /* Reducción de espacios para ganar área visible */

    #productos {
        padding-top: 40px !important;
        display: block !important;
        height: auto !important;
    }

    #productos .page-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Quitar espacio arriba del buscador */
    .search-container {
        margin-top: 0 !important;
        /* Eliminamos el margen superior de 20px */
        margin-bottom: 15px !important;
        width: 100%;
        max-width: 100% !important;
    }

    .productos-header {
        margin-bottom: 5px !important;
        padding-bottom: 5px !important;
        gap: 5px !important;
    }

    /* --- QUITAR RAJA ROJA LATERAL (SCROLLBAR) --- */
    ::-webkit-scrollbar {
        width: 0px !important;
        background: transparent !important;
    }

    /* --- OPTIMIZACIÓN SECCIÓN BENEFICIOS --- */
    /* Ocultar título móvil y compactar contenido */

    #beneficios {
        padding: 30px 0 10px 0 !important;
        height: auto !important;
        min-height: auto !important;
        display: block !important;
    }

    #beneficios .page-content {
        padding: 0 20px !important;
        margin-top: 0 !important;
    }

    .mobile-benefits-title {
        display: none !important;
    }

    .benefits-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 0 !important;
    }

    .benefit-item {
        padding: 12px 15px !important;
        min-height: auto !important;
        margin-bottom: 0 !important;
        border-radius: 12px !important;
    }

    .benefit-item h3 {
        font-size: 1.1rem !important;
        margin-bottom: 2px !important;
    }

    .benefit-item p {
        font-size: 0.85rem !important;
        line-height: 1.2 !important;
    }

    /* --- OPTIMIZACIÓN SECCIÓN TUTORIALES --- */
    /* Reducción de espacio superior y ajustes de contenido */

    #tutoriales {
        padding: 30px 0 20px 0 !important;
        height: auto !important;
        min-height: auto !important;
        display: block !important;
    }

    #tutoriales .page-content {
        padding: 0 20px !important;
        margin-top: 0 !important;
    }

    .academy-full-header {
        margin-bottom: 15px !important;
    }

    .academy-full-header h2 {
        font-size: 1.6rem !important;
        margin-bottom: 5px !important;
        line-height: 1.1 !important;
    }

    /* --- OPTIMIZACIÓN SECCIÓN TIENDAS (EXPANSIVE) --- */
    #tiendas {
        padding: 80px 0 !important;
        height: auto !important;
        display: block !important;
    }

    .stores-open-layout {
        grid-template-columns: 1fr !important;
        gap: 50px !important;
        padding: 0 20px !important;
    }

    .stores-branding-side h2 {
        font-size: 2.2rem !important;
        line-height: 1.1 !important;
        text-align: center !important;
        letter-spacing: -1px !important;
    }

    .stores-branding-side .subtitle {
        text-align: center !important;
        max-width: 100% !important;
        width: 100% !important;
        font-size: 1.05rem !important;
        margin-bottom: 35px !important;
        line-height: 1.5 !important;
        overflow: visible !important;
    }

    .stores-features-inline {
        display: flex;
        flex-direction: column;
        gap: 25px;
        margin-bottom: 45px;
    }

    .store-feature-item-mini {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }

    .store-feature-item-mini i {
        font-size: 32px;
        color: var(--primary-red);
    }

    .main-partner-spotlight {
        padding: 25px 20px !important;
        border-radius: 25px !important;
    }

    .partner-card-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 15px !important;
        text-align: left !important;
        margin-bottom: 20px !important;
    }

    .partner-logo-box {
        padding: 8px !important;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        flex-shrink: 0;
    }

    .partner-logo-box img {
        height: 40px !important;
        width: auto !important;
    }

    .partner-title-group h3 {
        font-size: 1.2rem !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    .partner-title-group p {
        font-size: 0.75rem !important;
        margin: 0 !important;
        letter-spacing: 0 !important;
    }

    .partner-badges-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: flex-start !important;
    }

    .partner-badges-row span {
        font-size: 0.7rem !important;
        padding: 4px 10px !important;
    }

    .partner-action-inline {
        margin-top: 20px !important;
        padding-top: 15px !important;
        text-align: center !important;
    }

    /* --- OPTIMIZACIÓN SECCIÓN ÚNETE --- */
    /* Reducción de espacios y ajustes de tamaño */

    #unete {
        padding: 30px 0 20px 0 !important;
        height: auto !important;
        min-height: auto !important;
        display: block !important;
    }

    #unete .page-content {
        padding: 0 20px !important;
        margin-top: 0 !important;
    }

    .join-revolution-card {
        margin: 0 !important;
        border-radius: 20px !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .join-content {
        padding: 25px 20px !important;
        text-align: center !important;
    }

    .join-content h2 {
        font-size: 1.6rem !important;
        margin-bottom: 10px !important;
        line-height: 1.1 !important;
    }

    .join-content .subtitle {
        font-size: 0.9rem !important;
        margin-bottom: 20px !important;
    }

    .join-stats {
        padding: 25px 20px !important;
        gap: 15px !important;
        flex-direction: column !important;
    }

    .stat-num {
        font-size: 2rem !important;
        margin-bottom: 0 !important;
    }

    .stat-label {
        font-size: 0.75rem !important;
    }

    /* --- OPTIMIZACIÓN CARRITO DE COMPRAS --- */
    /* Scroll interno para items y altura controlada */

    #carrito-container {
        width: auto !important;
        left: 15px !important;
        right: 15px !important;
        bottom: 20px !important;
    }

    #carrito-flotante {
        max-height: 60vh !important;
        /* Altura máxima controlada */
        border-radius: 16px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    }

    .carrito-item {
        padding: 15px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        background: #fff;
    }

    /* --- SCROLLBAR ROJO EN CARRITO MÓVIL --- */
    /* Sobrescribimos la regla global que oculta el scrollbar */
    .carrito-body::-webkit-scrollbar {
        width: 5px !important;
    }

    .carrito-body::-webkit-scrollbar-thumb {
        background: var(--primary-red) !important;
        border-radius: 4px !important;
    }

    /* --- BOTÓN DE MENÚ A LA IZQUIERDA --- */
    #mobile-menu-toggle {
        left: 25px !important;
        right: auto !important;
    }
}