/* Mobile-only overrides for the landing (inicio).
   Loaded only from views/inicio.ejs with media="(max-width: 768px)".
*/

@media screen and (max-width: 768px) {
    /* Use small viewport units on mobile browsers (address bar safe) */
    body.landing .hero {
        height: 100svh;
    }

    /* Acortar título de fondo */
    body.landing .brand-bg {
        top: 25%;
        left: 50%;
        font-size: clamp(2.5rem, 10vw, 4rem);
        letter-spacing: 5px;
        white-space: nowrap;
        text-align: center;
        width: 100%;
    }

    /* Ajustes para la escena 3D + GSAP */
    body.landing .bike-container {
        width: 94vw;
    }

    body.landing .three-stage {
        min-height: 60svh;
    }

    /* Ajustar barra de navegación (solo landing; otras páginas usan partial header) */
    body.landing .navbar {
        flex-direction: column;
        justify-content: center;
        padding: 10px;
        height: auto;
        background: rgba(13, 13, 13, 0.92);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    body.landing .nav-left {
        gap: 15px;
        margin-bottom: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }

    body.landing .nav-link {
        font-size: 0.7rem;
    }

    body.landing .cta-button {
        padding: 0.5rem 1rem;
        font-size: 0.7rem;
    }

    /* Bajar las cajas de texto de descripción al fondo de la pantalla */
    body.landing .details-section {
        align-items: flex-end;
        padding-bottom: 2rem;
    }

    /* Ajustar las cajas de texto de descripción */
    body.landing .details-content {
        padding: 1.5rem;
        width: 90vw;
        margin: 0 auto !important;
    }

    body.landing .details-content h2 {
        font-size: 1.4rem;
    }

    body.landing .details-content p {
        font-size: 0.85rem;
    }

    body.landing .motivational-phrase {
        bottom: 2%;
        z-index: 50;
    }

    body.landing .motivational-phrase h2 {
        font-size: 1rem;
    }

    body.landing .performance-metrics,
    body.landing .process-timeline,
    body.landing .floating-reviews-grid {
        grid-template-columns: 1fr;
    }
}