@media (max-width: 480px) and (orientation: portrait){
        /* =========================
            BOTÓN WHATSAPP FLOTANTE
        ========================== */
        .whatsapp-float{
            width: 64px;
            height: 64px;
            right: 16px;
            bottom: 16px;
        }
        .whatsapp-float img{
            width: 34px;
            height: 34px;
        }

        /* =========================
            TOP BAR + HEADER
        ========================== */
        .top-bar{
            padding: 6px 10px;
        }

        .contenido-top-bar{
            justify-content: center;
            flex-wrap: wrap;
            column-gap: 15px;
            row-gap: 4px;
        }

        .top-item{
            font-size: 10px;
            margin-left: 0;
            white-space: nowrap;
        }

        .selector-lenguaje{
            font-size: 10px;
            padding-right: 16px;
            white-space: nowrap;
        }

        /* =========================
            NAV / LOGO / MENÚ
        ========================== */
        .navegador{
            position: relative;
            padding: 0px 12px;
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            justify-content: initial;
        }

        .navegador-links{
            display: none;
        }

        .logo{
            position: static;
            justify-self: center;
            transform: none;
            display: flex;
            justify-content: center;
        }

        .logo img{
            height: 92px;
        }

        .menu-btn{
            display: inline-block;
            position: absolute;
            right: 14px;
            top: 100%;
            transform: translateY(-50%);
            transition: top .28s ease, transform .28s ease;
            will-change: top, transform;
        }

        /* Header shrink (cuando haces scroll) */
        body.header-shrink .navegador{
            padding: 0 !important;
            height: 60px !important;
            min-height: 0 !important;
        }

        body.header-shrink .menu-btn{
            top: 50%;
            transform: translateY(-50%) scale(0.92);
        }

        /* Logo mark (mini) */
        .logo-mark{
            width: 43px;
            height: 40px;
            border-radius: 50%;
            background: url("https://i.imgur.com/Ay5yawO.png") center/contain no-repeat;
            position: absolute;
            top: 50%;
            left: -70px;
            transform: translate(229px, -103%);
            opacity: 0;
            z-index: 1;
            pointer-events: none;
            transition: transform .28s ease, opacity .5s ease;
            will-change: transform;
        }

        body.header-shrink .logo-mark{
            opacity: 1;
            transform: translateY(30%) scale(1.3);
            filter: blur(0px);
        }

        /* Drawer full-screen en móvil */
        .drawer{
            width: 100vw !important;
            height: 100dvh !important;
            max-width: none !important;
            border-radius: 0 !important;
            inset: 0 !important;
            right: 0 !important;
            left: 0 !important;
        }

        /* Si el menú está abierto, no ocultes la top bar */
        body.menu-open .top-bar{
            transform: translateY(0) !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            height: auto !important;
            padding: 6px 10px !important;
            margin: 0 !important;
            overflow: visible !important;
            transition: none !important;
        }

        body.menu-open .drawer{
            height: calc(100dvh - 32px) !important;
        }

        /* =========================
            HERO / BANNER
        ========================== */
        .banner{
            min-height: 100svh !important;
            padding-top: 10px;
        }

        .hero-content{
            padding: 18px 14px 18px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 14px;
        }

        .glass-card{
            width: 90vw;
            max-width: 520px;
            text-align: center;
            transform: translateX(-180px) translateY(120px)!important;
        }

        .glass-title{
            font-size: 1.7rem;
            line-height: 1.15;
        }

        .glass-text{
            font-size: 0.95rem;
            line-height: 1.5;
        }

        .glass-btn{
            width: 100%;
            max-width: 360px;
            justify-content: center;
        }

        /* Vehículo del hero: abajo y más pequeño */
        .hero-vehicle{
            width: min(92vw, 420px);
            height: auto;
            margin-top: 6px;
            transform: translateY(40px) !important;
        }

        /* =========================
            NUESTRA EMPRESA / ABOUT
        ========================== */
        .about-section{
            padding-top: 50px;
        }

        .about-layout{
            display: flex;
            flex-direction: column;
            gap: 16px;
            padding: 0 14px;
        }

        .about-img{
            width: 90%;
            height: auto;
            border-radius: 18px;
        }

        .about-container{
            width: 100%;
            padding: 0 6%;
        }

        .about-title{
            text-align: center;
            font-size: 1.6rem;
            padding-top: 30px;
        }

        .about-text{
            font-size: 0.98rem;
            line-height: 1.55;
            text-align: center;
        }

        .about-layout .about-img:nth-of-type(2){
            margin-bottom: 40px;
        }

        /* =========================
            POR QUÉ ELEGIRNOS
        ========================== */
        .why-wrap{
            padding: 0 14px;
        }

        .why-title{
            text-align: center;
            font-size: 1.6rem;
        }

        .why-subtitle{
            text-align: center;
            font-size: 0.98rem;
        }

        .why-grid{
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
        }

        .why-card{
            text-align: left;
        }

        /* =========================
            SERVICIOS
        ========================== */
        .services-wrap{
            padding: 0 14px;
        }

        .services-title{
            text-align: center;
            font-size: 1.6rem;
        }

        .services-subtitle{
            text-align: center;
            font-size: 0.98rem;
        }

        .services-grid{
            grid-template-columns: 1fr;
            gap: 12px;
        }

        .service-card{
            padding: 16px;
        }

        .service-head h3{
            font-size: 1.05rem;
        }

        .service-desc{
            font-size: 0.98rem;
            line-height: 1.55;
        }

        /* =========================
            CONVENIOS
        ========================== */
        .agreements-wrap{
            padding: 0 14px;
        }

        .agreements-title{
            text-align: center;
            font-size: 1.55rem;
            line-height: 1.2;
        }

        .agreements-subtitle{
            text-align: center;
            font-size: 0.98rem;
        }

        .agreements-grid{
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
            justify-items: center;
        }

        .agreements-grid > *:last-child:nth-child(odd){
            grid-column: 1 / -1;
            justify-self: center;
        }

        .agreement-card{
            padding: 14px;
        }

        .agreement-logo{
            height: 76px;
        }

        .agreement-logo img{
            height: 76px;
            max-width: 150px;
        }

        /* =========================
            BENEFICIOS
        ========================== */
        .benefits-wrap{
            padding: 0 14px;
        }

        .benefits-title{
            text-align: center;
            font-size: 1.35rem;
        }

        .benefits-subtitle{
            text-align: center;
            font-size: 0.98rem;
        }

        .benefits-grid{
            grid-template-columns: 1fr;
            gap: 12px;
            justify-items: center;
        }

        .benefits-btn{
            width: 100%;
            max-width: 360px;
            margin: 8px 0;
        }

        .benefit-card img{
            width: min(92%, 360px);
            max-width: 360px;
        }

        /* =========================
            FLOTA (CARRUSEL)
        ========================== */
        .fleet-wrap{
            padding: 0 14px;
        }

        .fleet-title{
            text-align: center;
            font-size: 1.55rem;
            line-height: 1.2;
        }

        .fleet-subtitle{
            text-align: center;
            line-height: 1.55;
            font-size: 0.98rem;
        }

        .fleet-track{
            height: 380px !important;
        }

        .fleet-card{
            width: 80% !important;
        }

        .fleet-card.is-left,
        .fleet-card.is-right{
            opacity: 0;
            pointer-events: none;
        }

        .fleet-card.is-center{
            transform: translate(-50%, -50%) scale(1.02);
        }

        .fleet-prev,
        .fleet-next{
            display: none !important;
        }

        .fleet-footer{
            padding: 0 14px 8px !important;
        }

        .fleet-footer-text{
            text-align: center !important;
            padding: 0 18px !important;
            padding-bottom: 30px !important;
            max-width: 520px;
            margin: 0 auto !important;
            line-height: 1.6;
        }

        .fleet-footer-btn{
            width: 100%;
            max-width: 350px;
        }

        /* =========================
            MODAL FLOTA COMPLETA
        ========================== */
        .fleet-modal__panel{
            width: 94vw;
            max-height: 86vh;
            border-radius: 18px;
        }

        .fleet-modal__content{
            padding: 14px 14px 18px;
        }

        .fleet-modal__grid{
            grid-template-columns: 1fr;
            gap: 12px;
        }

        .fleet-modal-photo{
            height: 150px;
        }

        /* =========================
            CONTACTO
        ========================== */
        .contact-section{
            padding: 56px 14px;
        }

        .contact-title{
            text-align: center;
            font-size: 2rem;
        }

        .contact-subtitle{
            text-align: center;
            font-size: 0.98rem;
        }

        .contact-grid{
            display: flex !important;
            flex-direction: column !important;
            gap: 16px !important;
        }

        .insta-grid{
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .f-2col{
            grid-template-columns: 1fr;
        }

        .contact-card-title{
            text-align: center;
        }

        .f-btn{
            width: 100%;
        }

        .contact-card{ order: 1 !important; }
        .contact-aside{ order: 2 !important; }

        .contact-aside{
            display: flex !important;
            flex-direction: column !important;
            gap: 16px !important;
        }
        .contact-aside .insta-card{ order: 1 !important; }
        .contact-aside .quick-card{ order: 2 !important; }

        /* =========================
            FOOTER — SOLO MOBILE (FIX REAL)
        ========================== */

        .site-footer{
            padding-top: 20px !important;
        }

        .site-footer .footer-wrap{
            grid-template-columns: 1fr;
            text-align: center;
            gap: 16px !important;
            padding: 10px 22px 8px !important;
        }

        .site-footer .footer-col:nth-child(2) .footer-list{
            display: grid !important;
            grid-template-columns: repeat(2, 1fr);
            gap: 6px 18px;
            padding: 0 !important;
            margin: 0 auto !important;
            max-width: 320px;
        }

        .site-footer .footer-col:nth-child(3) .footer-list{
            display: flex !important;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 0 !important;
            margin: 0 auto !important;
        }

        .site-footer .footer-icons li{
            display: flex !important;
            align-items: center;
            gap: 6px;
            padding-left: 0 !important;
            text-align: left;
        }

        .site-footer .footer-icons li::before{
            position: static !important;  /* deja que fluya con el texto */
            margin-right: 6px;
        }

        .site-footer .footer-bottom{
            padding: 8px 14px !important;
            line-height: 1.45;
            text-align: center;
        }

        /* =========================
            CARDS 2 MOVIL
        ========================== */

        /* Oculta cards en móvil */
        .services-grid{ display: none; }

        /* Muestra accordion en móvil */
        .services-accordion{ display: grid; gap: 12px; }

        .svc{
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 10px 26px rgba(0,0,0,.10);
            overflow: hidden;
            border: 1px solid rgba(0,0,0,0.04);
        }

        .svc__sum{
            list-style: none;
            cursor: pointer;
            padding: 16px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-family: 'Montserrat', sans-serif;
            font-weight: 800;
            color: #0c2238;
        }

        /* Flecha (emoji) a la derecha */
        .svc__sum::after{
            content: "▶";
            margin-left: 12px;
            flex: 0 0 auto;
            font-size: 1.05rem;
        }

        /* Cuando el <details> está abierto, cambia a flecha hacia abajo */
        .svc[open] > .svc__sum::after{
            content: "▼";
        }

        .svc__sum::-webkit-details-marker{ display:none; }

        .svc__left{
            display:flex;
            align-items:center;
            gap: 12px;
        }

        .svc__icon{
            width: 44px;
            height: 44px;
            border-radius: 14px;
            display:grid;
            place-items:center;
            background: rgba(9, 139, 133, 0.12);
            border: 1px solid rgba(9, 139, 133, 0.18);
            color: #0b6fa0;
            font-size: 18px;
        }

        .svc__body{
            padding: 0 16px 16px;
        }

        .svc__desc{
            font-family: 'Monserrat', sans-serif;
            margin: 0;
            color: #5c6b78;
            line-height: 1.65;
            font-size: 0.95rem;
        }

        }