/* =====================================================
   RESPONSIVE FINAL — HM SOLUCIONES INTEGRALES
===================================================== */

/* Evita desplazamiento horizontal en cualquier dispositivo */
html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

img,
input,
select,
button{
    max-width:100%;
}


/* =====================================================
   TABLET HORIZONTAL Y LAPTOP PEQUEÑA
===================================================== */

@media (max-width:1100px){

    .container{
        width:92%;
    }

    .header-content{
        gap:20px;
    }

    .brand-text strong{
        font-size:22px;
    }

    .menu ul{
        gap:24px;
    }

    /* HERO: solo texto e imagen */
    .hero,
    .hero-grid{
        min-height:500px !important;
    }

    .hero-grid{
        grid-template-columns:1fr !important;
        padding:55px 0 !important;
    }

    .hero-content{
        width:65%;
        max-width:720px;
    }

    .hero-content h1{
        max-width:720px;
        font-size:56px;
        line-height:1.05;
    }

    /* BENEFICIOS */
    .benefits-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .benefit-card{
        min-height:165px;
    }

    .benefit-card:nth-child(2),
    .benefit-card:nth-child(4){
        border-right:none;
    }

    /* NUEVA COTIZACIÓN:
       continúa en dos columnas en tablet */
    .quote-section{
        padding:60px 0;
    }

    .quote-layout{
        grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
        gap:38px;
        align-items:center;
    }

    .quote-info h2{
        font-size:40px;
    }

    .quote-info p{
        font-size:16px;
        line-height:1.65;
    }

    .quote-list li{
        font-size:16px;
    }

    .quote-section .quote-card{
        width:100%;
        max-width:360px;
        margin-left:auto;
        padding:25px;
    }

    /* SERVICIOS Y PROCESO */
    .services-grid,
    .process-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .about-grid{
        gap:45px;
    }
}


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

@media (max-width:860px){

    .top-bar{
        display:none;
    }

    .header-content{
        min-height:76px;
    }

    .brand img{
        width:54px;
        height:54px;
    }

    .brand-text strong{
        font-size:20px;
    }

    .brand-text span{
        display:none;
    }

    /* MENÚ MÓVIL */
    .menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .menu{
        position:fixed;
        top:76px;
        left:-100%;
        width:100%;
        max-width:100%;
        background:#ffffff;
        box-shadow:0 15px 30px rgba(0,0,0,.14);
        transition:left .35s ease;
        z-index:999;
    }

    .menu.active{
        left:0;
    }

    .menu ul{
        flex-direction:column;
        gap:0;
        padding:10px 0;
    }

    .menu li{
        width:100%;
    }

    .menu a{
        display:block;
        width:100%;
        padding:17px 7%;
        border-bottom:1px solid #eeeeee;
    }

    .menu a::after{
        display:none;
    }

    /* HERO */
    .hero,
    .hero-grid{
        min-height:500px !important;
    }

    .hero{
        background-position:65% center;
    }

    .hero-grid{
        padding:50px 0 !important;
    }

    .hero-content{
        width:75%;
        max-width:620px;
    }

    .hero-content h1{
        font-size:48px;
    }

    .hero-content p{
        font-size:17px;
    }

    /* COTIZACIÓN:
       todavía lado a lado en tablet */
    .quote-layout{
        grid-template-columns:minmax(0,1fr) 310px;
        gap:28px;
    }

    .quote-info h2{
        font-size:34px;
    }

    .quote-section .quote-card{
        max-width:310px;
        padding:22px;
    }

    .quote-section .quote-card h3{
        font-size:22px;
    }

    .quote-card input,
    .quote-card select{
        height:44px;
    }

    /* OTRAS SECCIONES */
    .section-heading,
    .about-grid,
    .works-grid{
        grid-template-columns:1fr;
    }

    .section-heading{
        gap:16px;
    }

    .section-heading > p{
        margin-left:0;
    }

    .about-grid{
        gap:40px;
    }

    .footer-content{
        flex-direction:column;
        text-align:center;
    }

    .footer-brand{
        flex-direction:column;
    }

    .footer-social,
    .social-icons{
        justify-content:center;
        align-items:center;
    }
}


/* =====================================================
   CELULARES
===================================================== */

@media (max-width:600px){

    .container{
        width:92%;
    }

    /* HEADER */
    .header-content{
        min-height:70px;
    }

    .brand{
        min-width:0;
        gap:10px;
    }

    .brand img{
        width:48px;
        height:48px;
        padding:6px;
        flex-shrink:0;
    }

    .brand-text{
        min-width:0;
    }

    .brand-text strong{
        display:block;
        font-size:16px;
        white-space:nowrap;
    }

    .menu{
        top:70px;
    }

    .menu-toggle{
        width:42px;
        height:42px;
        flex-shrink:0;
    }

    /* HERO */
    .hero,
    .hero-grid{
        min-height:470px !important;
    }

    .hero{
        background-position:69% center !important;
    }

    .hero-grid{
        display:flex !important;
        align-items:center;
        padding:42px 0 !important;
    }

    .hero-content{
        width:100%;
        max-width:100%;
        padding-right:0;
    }

    .hero-tag{
        max-width:100%;
        font-size:12px;
        line-height:1.4;
        margin-bottom:14px;
    }

    .hero-content h1{
    width:100% !important;
    max-width:100% !important;
    font-size:31px !important;
    line-height:1.08 !important;
    letter-spacing:-1.2px !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    }

    .hero-content p{
        width:100%;
        max-width:100%;
        font-size:16px;
        line-height:1.55;
    }

    /* BENEFICIOS: una columna */
    .benefits{
        padding:0 0 45px;
    }

    .benefits-grid{
        width:100%;
        margin-top:0;
        grid-template-columns:1fr;
    }

    .benefit-card{
        width:100%;
        min-height:auto;
        padding:25px 22px;
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.18);
    }

    .benefit-card:last-child{
        border-bottom:none;
    }

    /* COTIZACIÓN: texto arriba y formulario abajo */
    .quote-section{
        padding:55px 0;
    }

    .quote-layout{
        display:grid;
        grid-template-columns:1fr;
        gap:32px;
    }

    .quote-info{
        width:100%;
    }

    .quote-info h2{
        max-width:100%;
        font-size:35px;
        line-height:1.12;
        margin:14px 0 17px;
    }

    .quote-info p{
        font-size:16px;
        line-height:1.65;
        margin-bottom:24px;
    }

    .quote-list li{
        font-size:16px;
        line-height:1.4;
        margin-bottom:13px;
    }

    .quote-section .quote-card{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:25px 21px !important;
        border-radius:14px;
    }

    .quote-section .quote-card h3{
        font-size:24px;
        line-height:1.15;
    }

    .quote-section .quote-card > p{
        font-size:14px;
        line-height:1.45;
    }

    .quote-card input,
    .quote-card select{
        width:100%;
        height:46px;
    }

    .quote-button{
        width:100%;
        min-height:47px;
    }

    .quote-card small{
        width:100%;
        font-size:11px;
    }

    /* SECCIONES */
    .services,
    .about,
    .works,
    .process{
        padding:60px 0;
    }

    .section-heading{
        margin-bottom:28px;
    }

    .section-heading h2,
    .about h2,
    .works h2,
    .process h2{
        font-size:33px;
        line-height:1.14;
    }

    .section-heading > p,
    .about-content > p{
        font-size:16px;
    }

    .services-grid,
    .process-grid{
        grid-template-columns:1fr;
    }

    .service-image{
        height:240px;
    }

    .about-image{
        box-shadow:11px 11px 0 #110664;
    }

    .about-image img{
        height:350px;
    }

    .work-card{
        min-height:380px;
        padding:25px;
    }

    .process-card{
        min-height:auto;
    }

    /* FOOTER */
    .footer{
        width:94%;
        margin-top:35px;
    }

    .footer-content{
        padding:22px 20px 20px;
        gap:25px;
    }

    .footer-brand img{
        width:65px;
        height:65px;
    }

    .footer-brand h3{
        font-size:21px;
    }
}


/* =====================================================
   CELULARES MUY PEQUEÑOS
===================================================== */

@media (max-width:390px){

    .brand-text strong{
        font-size:14px;
    }

    .hero-content h1{
        font-size:33px !important;
    }

    .hero-content p{
        font-size:15px;
    }

    .quote-info h2{
        font-size:31px;
    }

    .section-heading h2,
    .about h2,
    .works h2,
    .process h2{
        font-size:29px;
    }
}