/* ============================================
   Index/Landing Page Mobile Fixes
   ============================================ */

/* Prevenir overflow horizontal */
* {
    box-sizing: border-box;
}

html, body {
    max-width: 100vw;
    overflow-x: hidden !important;
}

/* Mobile specific fixes */
@media (max-width: 768px) {

    /* ===== NAVBAR ===== */
    .navbar,
    .navbar-content {
        padding: 1rem !important;
        width: 100% !important;
    }

    .navbar-content > div {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: flex-start !important;
    }

    .navbar h1 {
        font-size: 1.25rem !important;
    }

    /* ===== HERO SECTION ===== */
    .hero-section {
        padding: 2rem 1rem !important;
        min-height: auto !important;
    }

    .hero-section h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    .hero-section p {
        font-size: 1rem !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
    }

    /* Botones del hero */
    .hero-section a,
    .hero-section button {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0.5rem 0 !important;
        padding: 1rem !important;
        font-size: 1rem !important;
        white-space: normal !important;
        text-align: center !important;
    }

    /* Container de botones */
    [style*="display: flex"][style*="gap: 1.5rem"] {
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
        padding: 0 1rem !important;
    }

    /* ===== STATS CARDS (5,000+ Usuarios, etc) ===== */
    .glass-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0.5rem 0 !important;
        padding: 1.5rem 1rem !important;
    }

    /* Grid de stats */
    [style*="grid-template-columns"][style*="minmax(200px"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 1rem !important;
        width: 100% !important;
    }

    /* ===== SECTIONS ===== */
    section {
        padding: 3rem 1rem !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    section > div {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Títulos de secciones */
    section h2 {
        font-size: 1.75rem !important;
        padding: 0 1rem !important;
        text-align: center !important;
    }

    section p {
        font-size: 1rem !important;
        padding: 0 1rem !important;
        text-align: center !important;
    }

    /* ===== FEATURE CARDS ===== */
    .feature-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 1.5rem !important;
        padding: 1.5rem !important;
    }

    /* Grids de features */
    [style*="grid-template-columns"][style*="minmax(250px"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 0 !important;
    }

    /* ===== ACADEMY SECTION ===== */
    [style*="padding: 4rem"] {
        padding: 2rem 1rem !important;
    }

    /* Game cards */
    [style*="background: var(--color-gray-900)"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem !important;
    }

    /* ===== FOOTER ===== */
    footer {
        padding: 2rem 1rem !important;
    }

    footer > div {
        flex-direction: column !important;
        gap: 2rem !important;
    }

    footer h3 {
        font-size: 1.125rem !important;
    }

    /* ===== BADGES ===== */
    .badge {
        font-size: 0.875rem !important;
        padding: 0.5rem 1rem !important;
        white-space: nowrap !important;
    }

    /* ===== CONTAINERS GENÉRICOS ===== */
    [style*="max-width: 1400px"],
    [style*="max-width: 1200px"],
    [style*="max-width: 900px"],
    [style*="max-width: 800px"],
    [style*="max-width: 700px"],
    [style*="max-width: 600px"] {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* ===== ELEMENTOS DECORATIVOS ===== */
    /* Ocultar elementos decorativos grandes en móvil */
    [style*="position: absolute"][style*="width: 300px"],
    [style*="position: absolute"][style*="width: 400px"],
    [style*="position: absolute"][style*="width: 500px"] {
        display: none !important;
    }

    /* ===== HERO GRID ===== */
    .hero-grid {
        background-size: 30px 30px !important;
    }

    /* ===== TEXT GRADIENT ===== */
    .text-gradient {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    /* ===== BUTTONS OVERRIDE ===== */
    .btn-primary,
    .btn-secondary {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0.5rem 0 !important;
    }
}

/* Extra small devices */
@media (max-width: 480px) {

    .hero-section h1 {
        font-size: 1.5rem !important;
    }

    .text-gradient {
        font-size: 1.5rem !important;
    }

    section h2 {
        font-size: 1.5rem !important;
    }

    .glass-card {
        padding: 1rem !important;
    }

    .feature-card {
        padding: 1rem !important;
    }
}

/* Fixes para elementos inline con estilos */
@media (max-width: 768px) {

    /* Forzar width 100% en divs con display flex */
    div[style*="display: flex"] {
        width: 100% !important;
    }

    /* Asegurar que no haya padding excesivo */
    [style*="padding: 6rem"],
    [style*="padding: 5rem"],
    [style*="padding: 4rem"] {
        padding: 2rem 1rem !important;
    }

    /* Ajustar margins */
    [style*="margin: 4rem"],
    [style*="margin: 3rem"] {
        margin: 2rem 0 !important;
    }

    /* Gaps */
    [style*="gap: 3rem"] {
        gap: 1.5rem !important;
    }

    [style*="gap: 2rem"] {
        gap: 1rem !important;
    }
}