
/* ==========================================================================
   PERGE v8.5 — Responsive final layer
   Loaded after styles.css + v8.4.css.
   Targets: tablet, mobile, small mobile.
   ========================================================================== */

html{overflow-x:hidden}
body{overflow-x:hidden}
img,svg,video,iframe{max-width:100%}
button,a,input,select,textarea{touch-action:manipulation}
.mobile-menu-open{overflow:hidden}

/* Mobile menu shell */
@media(max-width:820px){
  .site-header{z-index:1000}
  .menu-button{
    width:46px;
    height:46px;
    min-width:46px;
    min-height:46px;
    display:grid;
    place-content:center;
    gap:5px;
  }
  .menu-button span:not(.sr-only){width:22px}
  .mobile-menu{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:999;
    background:rgba(7,9,11,.985);
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 40px rgba(0,0,0,.28);
  }
  .mobile-menu-inner{
    display:grid;
    gap:0;
    padding-top:8px;
    padding-bottom:12px;
  }
  .mobile-menu-inner a{
    display:flex;
    align-items:center;
    min-height:50px;
    padding:0;
    border-bottom:1px solid rgba(255,255,255,.06);
    font-size:1rem;
  }
  .mobile-menu-inner a:last-child{border-bottom:0}
  .nav-brand{width:140px;min-width:0}
}

/* =========================
   Tablet: 621–900
   ========================= */
@media(min-width:621px) and (max-width:900px){
  .shell{width:min(100% - 48px, var(--shell))}
  .hero{min-height:690px}
  .hero-inner{min-height:690px}
  .hero-wordmark--ingenieria{width:min(72vw,620px)}
  .areas-grid{grid-template-columns:1fr}
  .area-card{min-height:520px}

  .page-hero,.page-hero__content{min-height:470px}
  .page-hero__content h1{max-width:700px;font-size:clamp(2.8rem,7vw,4.4rem)}
  .page-hero__content>p:last-child{max-width:560px}

  .capability-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .capability-card{min-height:200px;padding:24px 22px}

  .people-grid{grid-template-columns:1fr}
  .people-photo,.people-photo img{min-height:360px}
  .people-copy{max-width:720px}

  .sector-carousel__track{grid-auto-columns:84%}
  .sector-slide{min-height:390px}

  .industry-list--v76{grid-template-columns:repeat(2,minmax(0,1fr))}
  .principles-showcase{grid-template-columns:1fr;grid-template-areas:"mission" "vision" "purpose"}
  .principle-card--mission{min-height:0}

  .contact-layout{grid-template-columns:1fr}
  .contact-form-wrap{margin-top:8px}
  .location-grid{grid-template-columns:1fr 1fr}

  .warranty-hero__grid{grid-template-columns:1fr}
  .warranty-hero__card{max-width:540px}
  .warranty-content__grid{grid-template-columns:1fr}
  .warranty-content__intro{position:static}
  .warranty-documents__grid{grid-template-columns:1fr 1fr}

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

/* =========================
   Mobile: <=620
   ========================= */
@media(max-width:620px){
  :root{--mobile-pad:20px}
  .shell{width:calc(100% - (var(--mobile-pad) * 2));max-width:none}
  .site-header .shell{width:calc(100% - 28px)}

  /* HOME */
  .hero{
    min-height:640px !important;
    height:auto !important;
  }
  .hero-inner{
    min-height:640px !important;
    height:auto !important;
    padding-top:100px;
    padding-bottom:46px;
  }
  .hero-copy{max-width:100%}
  .hero-wordmark--ingenieria{
    width:min(88vw,500px);
    max-width:100%;
  }
  .hero-media{background-position:center}
  .areas{padding-top:0}
  .areas-grid{grid-template-columns:1fr;gap:12px}
  .area-card{
    min-height:480px !important;
    border-radius:14px;
  }
  .area-card__content{padding:26px 22px}
  .area-card h2{font-size:clamp(2rem,10vw,3rem);line-height:.98}
  .area-card p{font-size:.96rem;line-height:1.55}

  /* NOSOTROS */
  .page-hero,.page-hero__content{
    min-height:450px !important;
  }
  .page-hero__content{
    justify-content:flex-end;
    padding-top:84px;
    padding-bottom:34px;
  }
  .page-hero__content h1{
    max-width:92%;
    font-size:clamp(2.45rem,11.5vw,3.55rem) !important;
    line-height:.95;
  }
  .page-hero__content>p:last-child{
    max-width:94%;
    margin-top:16px;
    font-size:1rem;
    line-height:1.52;
  }
  .page-hero--about .page-hero__image{
    object-position:58% center;
  }

  .v72-section{padding:54px 0}
  .about-intro__grid{gap:28px}
  .about-intro__title h2{font-size:clamp(2rem,9.5vw,2.8rem)}
  .about-intro__copy p{font-size:1rem;line-height:1.66}
  .about-intro__copy p+p{margin-top:18px}

  .capability-strip{padding-bottom:52px}
  .capability-grid{grid-template-columns:1fr;gap:10px}
  .capability-card{
    min-height:0;
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    column-gap:16px;
    padding:20px;
  }
  .capability-icon{
    grid-row:1 / span 2;
    width:44px;height:44px;
    margin:0;
  }
  .capability-card h3{margin:1px 0 5px;font-size:1.15rem}
  .capability-card p{font-size:.9rem;line-height:1.48}

  .people-section{padding:54px 0}
  .people-grid{grid-template-columns:1fr;gap:28px}
  .people-photo,.people-photo img{min-height:290px}
  .people-copy h2{font-size:clamp(1.9rem,9vw,2.6rem)}
  .people-copy p{font-size:.97rem;line-height:1.62}

  .v72-heading-row{grid-template-columns:1fr;gap:16px;margin-bottom:24px}
  .sector-carousel__track{grid-auto-columns:91%;gap:10px}
  .sector-slide{min-height:350px;border-radius:12px}
  .sector-slide__copy{padding:20px}
  .sector-slide__copy h3{font-size:clamp(1.55rem,7.5vw,2.15rem)}
  .sector-slide__copy p{font-size:.88rem;line-height:1.45}
  .sector-carousel__buttons button{width:46px;height:46px}

  .industries-grid{grid-template-columns:1fr;gap:30px}
  .industries-photo,.industries-photo img{min-height:320px}
  .industries-copy h2{font-size:clamp(2rem,9vw,2.7rem)}
  .industry-list--v76{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .industry-list--v76 span{
    min-height:52px;
    padding:10px !important;
    gap:8px;
  }
  .industry-list--v76 b{font-size:.8rem}
  .industry-list--v76 svg{width:18px;height:18px}

  .principles-section--v77{padding:56px 0 62px}
  .principles-heading--v77{grid-template-columns:1fr;gap:14px;margin-bottom:24px}
  .principles-heading--v77 h2{font-size:clamp(2rem,9vw,2.8rem)}
  .principles-showcase{grid-template-columns:1fr;grid-template-areas:"mission" "vision" "purpose";gap:10px}
  .principle-card{
    grid-template-columns:42px minmax(0,1fr);
    gap:14px;
    padding:20px;
  }
  .principle-card--mission{min-height:0}
  .principle-icon{width:40px;height:40px}
  .principle-card h3{font-size:1.3rem;margin:3px 0 10px}
  .principle-card p{font-size:.9rem;line-height:1.58}

  .about-closing{padding:54px 0 60px}
  .about-closing h2{font-size:clamp(2rem,10vw,3rem)}

  /* CONTACT */
  .contact-intro{padding:54px 0 38px}
  .contact-intro__grid{grid-template-columns:1fr;gap:16px}
  .contact-intro h1{font-size:clamp(2.4rem,11vw,3.45rem);line-height:.96}
  .contact-intro__grid>p{font-size:.97rem;line-height:1.58}
  .contact-main{padding-top:48px;padding-bottom:58px}
  .contact-layout{grid-template-columns:1fr;gap:30px}
  .contact-details--v77{gap:8px}
  .contact-card-v77{
    grid-template-columns:38px minmax(0,1fr) 22px;
    gap:10px;
    padding:13px;
    min-height:68px;
  }
  .contact-card-v77__icon{width:36px;height:36px}
  .contact-card-v77__body small{font-size:.62rem}
  .contact-card-v77__body strong{
    font-size:.86rem;
    line-height:1.28;
    overflow-wrap:anywhere;
  }
  .contact-card-v77__body em{font-size:.74rem}
  .contact-card-v77__arrow svg{width:17px;height:17px}

  .contact-form-wrap{
    padding:22px 18px;
    border-radius:14px;
  }
  .contact-form-wrap__intro h2{font-size:1.7rem}
  .contact-form{gap:16px}
  .form-row--two{grid-template-columns:1fr}
  .contact-form input,.contact-form select,.contact-form textarea{
    min-height:48px;
    font-size:16px !important;
    width:100%;
  }
  .contact-form textarea{min-height:140px}
  .form-footer{align-items:stretch;flex-direction:column;gap:14px}
  .v72-button--submit{width:100%;min-height:50px}

  .location-section{padding:54px 0 60px}
  .location-heading{gap:16px;margin-bottom:20px}
  .location-grid{grid-template-columns:1fr;gap:10px}
  .location-photo{height:260px;min-height:260px}
  .map-frame--compact{height:315px;min-height:315px}

  /* GARANTÍA */
  .warranty-hero{padding:58px 0 52px}
  .warranty-hero__grid{grid-template-columns:1fr;gap:28px}
  .warranty-hero h1{
    font-size:clamp(2.6rem,12vw,3.4rem);
    line-height:.96;
  }
  .warranty-hero__grid>div:first-child>p{font-size:1rem;line-height:1.58}
  .warranty-hero__actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:26px;
  }
  .warranty-hero__actions .v72-button,
  .warranty-secondary{
    width:100%;
    min-height:50px;
    justify-content:space-between;
  }
  .warranty-secondary{
    padding:0 18px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
  }
  .warranty-hero__card{padding:22px}

  .warranty-quick{padding:18px 0 54px}
  .warranty-quick__grid{grid-template-columns:1fr;gap:10px}
  .warranty-quick article{padding:20px}
  .warranty-quick article>span{margin-bottom:18px}

  .warranty-alert{padding-bottom:54px}
  .warranty-alert__inner{
    align-items:stretch;
    flex-direction:column;
    gap:22px;
    padding:24px 20px;
  }
  .warranty-alert__inner .v72-button{width:100%}

  .warranty-content{padding:56px 0}
  .warranty-content__grid{grid-template-columns:1fr;gap:26px}
  .warranty-content__intro{position:static}
  .warranty-content__intro h2{font-size:clamp(2rem,9vw,2.7rem)}
  .warranty-item summary{
    min-height:58px;
    padding:14px 0;
    font-size:.94rem;
    line-height:1.35;
  }
  .warranty-item summary>span:first-child{min-width:0;padding-right:8px}
  .warranty-item__plus{
    flex:0 0 34px;
    width:34px;height:34px;
  }
  .warranty-item__body{padding:0 0 18px}
  .warranty-item__body p{font-size:.92rem;line-height:1.62}

  .warranty-documents{padding:54px 0 60px}
  .warranty-documents__heading{grid-template-columns:1fr;gap:12px;margin-bottom:20px}
  .warranty-documents__grid{grid-template-columns:1fr;gap:10px}
  .document-card{
    grid-template-columns:42px minmax(0,1fr) 28px;
    gap:12px;
    padding:16px;
  }
  .document-card__icon{width:40px;height:40px}
  .document-card__body strong{font-size:.9rem}
  .document-card__body small{font-size:.73rem}

  /* FOOTER */
  .footer-v77{
    grid-template-columns:1fr;
    gap:28px;
    padding-top:42px;
    padding-bottom:32px;
  }
  .footer-v77__brand img{width:160px}
  .footer-v77__brand p{margin-top:16px;font-size:.86rem}
  .footer-v77__group{gap:8px}
  .footer-v77__group h3{margin-bottom:4px}
  .footer-v77__group>a{
    font-size:.84rem;
    overflow-wrap:anywhere;
  }
  .footer-v77__bottom{
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
    padding-top:16px;
    padding-bottom:20px;
  }
}

/* =========================
   Small mobile: <=390
   ========================= */
@media(max-width:390px){
  :root{--mobile-pad:16px}
  .site-header .shell{width:calc(100% - 24px)}
  .nav-brand{width:126px}

  .hero,.hero-inner{min-height:610px !important}
  .hero-inner{padding-top:88px;padding-bottom:38px}
  .area-card{min-height:450px !important}

  .page-hero,.page-hero__content{min-height:430px !important}
  .page-hero__content h1{font-size:clamp(2.2rem,11vw,3rem) !important}
  .page-hero__content>p:last-child{font-size:.94rem}

  .industry-list--v76{grid-template-columns:repeat(2,minmax(0,1fr))}
  .industry-list--v76 span{padding:9px 8px !important}
  .industry-list--v76 b{font-size:.74rem}

  .contact-card-v77{
    grid-template-columns:36px minmax(0,1fr);
  }
  .contact-card-v77__arrow{display:none}
  .contact-card-v77__body strong{font-size:.82rem}

  .location-photo{height:235px;min-height:235px}
  .map-frame--compact{height:290px;min-height:290px}

  .warranty-hero__card{padding:18px}
  .warranty-item summary{font-size:.9rem}

  .footer-v77__brand img{width:148px}
}

/* Tiny screens */
@media(max-width:340px){
  :root{--mobile-pad:14px}
  .industry-list--v76{grid-template-columns:1fr}
  .hero,.hero-inner{min-height:590px !important}
  .area-card{min-height:430px !important}
}

/* Touch devices: disable hover lift and provide active feedback */
@media(hover:none){
  .capability-card:hover,
  .sector-slide:hover,
  .principle-card:hover,
  .contact-card-v77:hover,
  .document-card:hover,
  .warranty-quick article:hover,
  .location-photo:hover,
  .map-frame--compact:hover{
    transform:none !important;
    box-shadow:none !important;
  }
  .capability-card:active,
  .contact-card-v77:active,
  .document-card:active{
    border-color:rgba(242,101,34,.4);
  }
}

/* Accessibility / motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}


/* ==========================================================================
   PERGE v8.6 — fix menú móvil
   El atributo hidden debe ganar siempre frente a cualquier display del menú.
   ========================================================================== */
.mobile-menu[hidden]{
  display:none !important;
}

@media(max-width:820px){
  .mobile-menu:not([hidden]){
    display:block;
  }
}
