/*====================================
    LAPTOPS CHICAS (~1280px de ancho)
    A este ancho el titulo envolvia a 3 lineas en vez de 2, lo que
    empujaba el precio hacia abajo lo suficiente para chocar con el
    WhatsApp flotante en ventanas de poco alto. Mas ancho de columna
    alcanza para que vuelva a entrar en 2 lineas.
====================================*/

@media (min-width:861px) and (max-width:1400px){

    .hero-content{ width:46vw; }

}

/*====================================
    COMPACTACION POR ALTO DE PANTALLA
    Mismo criterio que ya funciona en el sitio de referencia
    (ComCargo): el hero no necesita "entrar en una sola pantalla"
    como las secciones ancladas por menu, pero en monitores wide
    (altos cortos, ~900-1100px) el espaciado de escritorio completo
    se siente estirado. Se compacta un poco, sin tocar laptops
    normales con mas altura disponible.
====================================*/

@media (min-width:861px) and (max-height:1100px){

    .hero-inner{

        padding-top:calc(var(--text-pad-top) - 25px);
        padding-bottom:40px;

    }

    .hero-price-cta-row{

        margin:16px 0 20px;

    }

    .hero-commercial-price{

        padding:16px 24px 14px;

    }

}

/*====================================
    COMPACTACION POR ALTO — CALIDAD
    8 tarjetas en 2 filas no entraban en un laptop tipico (768px de
    alto). Mismo criterio de ComCargo: compactar padding en vez de
    sacar contenido.
====================================*/

@media (max-height:850px) and (min-width:861px){

    #calidad{ padding:50px 0; }
    #calidad .section-lede{ margin-bottom:24px; }
    #calidad .specs-grid{ gap:14px; }
    #calidad .spec-card{ padding:16px 16px; }
    #calidad .spec-icon{ margin-bottom:10px; }

}

/*====================================
    COMPACTACION POR ALTO — COTIZACION
    El formulario completo (5 campos + boton) es la seccion mas alta
    del sitio, empujaba el footer casi fuera de pantalla al aterrizar
    desde el menu. Mismo criterio: compactar, no sacar campos.
====================================*/

@media (max-height:850px) and (min-width:861px){

    #contacto{ padding:36px 0; }
    #contacto .section-lede{ margin-bottom:18px; }
    .quote-panel{ padding:26px; }
    .form-grid{ gap:12px; margin-bottom:12px; }
    .field{ gap:5px; }
    .field textarea{ min-height:50px; }
    .quote-submit{ padding:12px 26px; }
    .quote-note{ margin-top:8px; }

}

/*====================================
    TABLET
====================================*/

@media (max-width:860px){

    .logo-badge img{ width:150px; }

    .nav-links{ display:none; }
    .nav-cta{ display:none; }
    .burger{ display:flex; }
    .nav{ padding:16px 0; }

    .mobile-panel{ top:77px; }

    .hero{ height:auto; min-height:900px; padding-top:0; }
    .hero-inner{ padding:28px 0 40px 28px; }

    .narrative{ background-attachment:scroll; padding:100px 0; }

    /* Grids de contenido que nunca tuvieron version tablet/mobile:
       se armaron pensando solo en escritorio, con columnas fijas que
       se aplastan en pantallas chicas. Colapsan a 1-2 columnas aca. */

    .price-showcase{ grid-template-columns:1fr; gap:24px; }
    .price-row{ max-width:none; }

    .nosotros-grid{ grid-template-columns:1fr; gap:32px; }
    .nosotros-grid .map-card{ order:-1; }

    .servicio-card{ grid-template-columns:1fr; gap:24px; padding:28px 26px; }
    .servicio-list{ padding-left:0; border-left:none; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); }

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

    .beneficio{ flex-basis:calc(50% - 16px); }

    .sector-card{ flex-basis:calc(50% - 10px); }

    .form-grid{ grid-template-columns:1fr; }

    .footer-grid{ grid-template-columns:1fr; gap:32px; }

    h1{ font-size:34px; }
    .tagline{ font-size:18px; }

    .hero-content{ width:auto; max-width:520px; }

    .hero-price-panel{

        position:relative;
        top:0;
        right:0;
        margin:40px 28px 0;
        width:auto;
        flex-direction:row;
        flex-wrap:wrap;
        border-radius:var(--radius-md);
        gap:16px 24px;

    }

    .hero-commercial-price{

        margin:18px 0 22px;

    }

}

/*====================================
    MÓVIL
====================================*/

@media (max-width:680px){

    .logo-badge img{ width:96px; }

    .hero{ min-height:auto; }

    .hero-scrim{

        background:linear-gradient(180deg,
            rgba(255,255,255,.94) 0%,
            rgba(255,255,255,.9) 55%,
            rgba(255,255,255,.55) 75%,
            rgba(255,255,255,.15) 100%);

    }

    h1{ font-size:28px; }

    .hero-commercial-price{

        margin:14px 0 18px;

    }

    .specs-grid{ grid-template-columns:1fr; }

    .beneficio{ flex-basis:100%; }

    .sector-card{ flex-basis:100%; }

}