/* ==========================================================
   CHANGAN Puebla — Responsive General Hardening V1
   Applies after each page's normal CSS.
   Breakpoints: 1180 / 1024 / 900 / 768 / 620 / 430 / 390 / 360
   ========================================================== */

html,body{max-width:100%;overflow-x:hidden}
img,video,iframe,svg{max-width:100%}
input,select,textarea,button{max-width:100%}
table{max-width:100%}

/* Prevent long strings/numbers/URLs from causing horizontal overflow */
.footer,
.footer *,
.contact-route-card,
.contact-location-list,
.service-contact-block,
.warranty-card,
.roadside-service-card,
.provider-card,
.model-card,
.finance-card,
.promo-card{
  overflow-wrap:anywhere;
}

/* Header / navigation */
@media(max-width:1180px){
  .header-inner{gap:18px}
  .main-nav{gap:16px}
  .brand{width:138px}
  .header-actions .btn{padding-inline:16px}
  .branch-pill{padding:10px 12px}
}

@media(max-width:1024px){
  .site-header{height:auto;min-height:72px}
  .header-inner{min-height:72px;width:min(calc(100% - 36px),var(--container));gap:12px}
  .brand{width:132px}
  .header-actions{margin-left:auto}
  .header-actions .branch-pill{display:none}
  .header-actions .btn{min-height:40px;padding:0 14px;font-size:11px}
}

@media(max-width:900px){
  .header-inner{width:min(calc(100% - 28px),var(--container))}
  .header-actions{display:none}
  .menu-toggle{display:block}
  .main-nav{
    position:fixed;
    top:72px;
    left:0;
    right:0;
    bottom:0;
    z-index:150;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin:0;
    padding:18px 20px 96px;
    overflow-y:auto;
    background:rgba(255,255,255,.985);
    transform:translateX(100%);
    visibility:hidden;
    pointer-events:none;
    transition:transform .28s ease,visibility .28s ease;
    border-top:1px solid #e1e8ee;
  }
  body.menu-open{overflow:hidden}
  body.menu-open .main-nav,
  .main-nav.open{
    transform:translateX(0);
    visibility:visible;
    pointer-events:auto;
  }
  .main-nav>a,
  .main-nav .nav-models-link{
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 4px;
    border-bottom:1px solid #e8eef2;
    font-size:15px;
  }
  .nav-models{width:100%}
}

/* Core spacing */
@media(max-width:768px){
  .container{width:min(calc(100% - 34px),var(--container))}
  .section{padding:76px 0}
}

@media(max-width:620px){
  .container{width:min(calc(100% - 26px),var(--container))}
  .section{padding:64px 0}
  .btn{min-height:44px;padding-inline:18px;font-size:11px}
  input,select,textarea{font-size:16px!important} /* prevents iOS zoom */
}

/* Footer */
@media(max-width:900px){
  .footer{padding-bottom:104px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .footer-bottom div{flex-wrap:wrap}
}

@media(max-width:620px){
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .footer-main nav{gap:8px 14px}
  .footer .aoa{align-items:flex-start;text-align:left}
  .footer .aoa img{margin-left:0}
  .footer-bottom{gap:12px}
}

/* Sticky contact */
@media(max-width:900px){
  .sticky-contact{display:none!important}
  .mobile-sticky-contact,
  .mobile-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:220;
    display:grid!important;
    grid-template-columns:repeat(3,1fr);
    min-height:64px;
    background:#fff;
    border-top:1px solid #dbe4eb;
    box-shadow:0 -7px 24px rgba(13,48,78,.10);
  }
  .mobile-sticky-contact>a,
  .mobile-bar>a{
    min-width:0;
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:7px 5px;
    text-align:center;
    font-size:11px;
    line-height:1.15;
  }
}

/* ================= HOME ================= */
@media(max-width:1180px){
  .hero-grid{grid-template-columns:minmax(320px,.9fr) minmax(460px,1.1fr)}
  .hero-visual{min-height:500px}
  .quick{padding-inline:18px}
  .model-card{flex-basis:calc((100% - 44px)/3)}
}

@media(max-width:900px){
  .hero{min-height:auto}
  .hero-grid{min-height:auto;grid-template-columns:1fr;padding:72px 0 42px}
  .hero-copy{max-width:720px}
  .hero-visual{min-height:380px;margin-top:12px}
  .hero-visual img{width:min(760px,105%);transform:none}
  .hero-caption{position:static;margin:0 auto;padding:0 17px 20px}
  .quick-grid{grid-template-columns:1fr 1fr}
  .quick:nth-child(odd){border-left:1px solid var(--line)}
  .model-card{flex-basis:calc((100% - 22px)/2)}
  .lead-grid,.dealership-grid{grid-template-columns:1fr}
  .testdrive{grid-template-columns:1fr}
  .testdrive-visual{min-height:380px}
  .location{grid-template-columns:1fr}
  .map{min-height:430px}
  .faq-grid{grid-template-columns:1fr}
}

@media(max-width:620px){
  .hero-grid{padding-top:54px}
  .hero h1{font-size:clamp(44px,13vw,60px)}
  .hero-copy>p{font-size:15px}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
  .hero-visual{min-height:290px}
  .quick-grid{grid-template-columns:1fr}
  .quick{min-height:88px;border-left:1px solid var(--line)}
  .model-card{flex-basis:100%;min-height:480px}
  .filter-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .filter-row::-webkit-scrollbar{display:none}
  .filter{flex:0 0 auto}
  .promo{min-height:620px}
  .promo-inner{align-items:flex-end;min-height:620px;padding-bottom:42px}
  .promo-copy{max-width:100%;margin:0}
  .promo-media::after{background:linear-gradient(180deg,rgba(5,15,25,.05) 0%,rgba(5,15,25,.30) 45%,rgba(5,15,25,.92) 76%,rgba(5,15,25,.97) 100%)}
  .promo-actions{align-items:stretch;flex-direction:column}
  .energy-grid{grid-template-columns:1fr}
  .energy-cars{height:300px}
  .lead-form{grid-template-columns:1fr;padding:22px}
  .lead-form fieldset,.lead-form .btn-wide,.lead-form>small,.privacy{grid-column:auto}
  .mini-form{grid-template-columns:1fr}
  .mini-form .btn{grid-column:auto}
  .testdrive-copy{padding:58px 17px}
  .location-info{padding:58px 17px}
}

/* ================= PROMOCIONES ================= */
@media(max-width:1024px){
  .promo-grid,.promos-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:620px){
  .promo-grid,.promos-grid{grid-template-columns:1fr!important}
  .promo-hero,.promotions-hero{min-height:auto}
  .promo-hero-grid,.promotions-hero-grid{grid-template-columns:1fr!important}
  .promo-form,.promotions-form{grid-template-columns:1fr!important}
}

/* ================= FINANCIAMIENTO ================= */
@media(max-width:1024px){
  .finance-hero-grid,.finance-explorer-grid,.finance-lead-grid{grid-template-columns:1fr!important}
  .finance-summary{max-width:760px;margin-inline:auto}
}
@media(max-width:620px){
  .finance-hero h1{font-size:clamp(44px,13vw,60px)!important}
  .finance-products,.finance-plan-grid,.finance-process-grid{grid-template-columns:1fr!important}
  .finance-form{grid-template-columns:1fr!important}
  .finance-form>*{grid-column:auto!important}
  .finance-summary img{max-width:100%!important}
}

/* ================= MODEL MASTER ================= */
@media(max-width:1024px){
  .model-hero-grid,.model-performance-grid,.model-dimensions-grid,.model-quote-grid,.model-testdrive-grid{
    grid-template-columns:1fr!important;
  }
  .model-hero-visual{min-height:440px!important}
  .model-pillar-grid,.model-safety-grid,.model-related-grid{grid-template-columns:repeat(2,1fr)!important}
  .model-gallery-main{min-height:460px!important}
}
@media(max-width:620px){
  .model-hero{min-height:auto!important}
  .model-hero-grid{padding-top:48px!important}
  .model-hero h1{font-size:clamp(44px,13vw,60px)!important}
  .model-hero-actions{flex-direction:column!important}
  .model-hero-actions .btn{width:100%!important}
  .model-hero-visual{min-height:300px!important}
  .model-hero-visual img{max-height:290px!important}
  .model-sticky-nav{overflow-x:auto!important;justify-content:flex-start!important;scrollbar-width:none}
  .model-sticky-nav::-webkit-scrollbar{display:none}
  .model-sticky-nav a{flex:0 0 auto!important;white-space:nowrap}
  .model-pillar-grid,.model-safety-grid,.model-related-grid{grid-template-columns:1fr!important}
  .model-gallery-main{min-height:310px!important}
  .model-gallery-main img{max-height:290px!important}
  .model-quote-form{grid-template-columns:1fr!important}
  .model-quote-form>*{grid-column:auto!important}
}

/* ================= SERVICIO MAIN ================= */
@media(max-width:1024px){
  .service-hero-grid,.service-warranty-grid,.service-energy-grid,.service-appointment-grid{grid-template-columns:1fr!important}
  .service-hero-media,.service-energy-image{max-width:850px}
  .service-cards{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:620px){
  .service-hero h1{font-size:clamp(44px,13vw,60px)!important}
  .service-hero-actions{flex-direction:column!important}
  .service-hero-actions .btn{width:100%!important}
  .service-quick-grid,.service-cards{grid-template-columns:1fr!important}
  .service-contact-block{grid-template-columns:1fr!important}
  .service-form{grid-template-columns:1fr!important}
  .service-form-full{grid-column:auto!important}
  .service-energy-image img,.service-image-frame img{min-height:260px;object-fit:cover}
}

/* ================= SERVICE INTERNAL ================= */
@media(max-width:1024px){
  .owner-hero-grid,.charge-home-grid,.warranty-policy-grid,.roadside-process-grid,
  .warranty-help-visual-grid,.roadside-visual-band-grid{
    grid-template-columns:1fr!important;
  }
  .owner-hero-grid{padding-block:58px}
  .owner-hero-media{max-width:850px}
  .benefit-grid,.public-grid,.provider-grid,.roadside-service-grid,.roadside-scope-panel{grid-template-columns:repeat(2,1fr)!important}
  .warranty-grid,.warranty-grid-electric{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:620px){
  .owner-hero h1{font-size:clamp(44px,13vw,60px)!important}
  .owner-hero-actions{flex-direction:column!important}
  .owner-hero-actions .btn{width:100%!important}
  .owner-hero-media,.owner-hero-media img{min-height:300px!important;height:300px!important}
  .owner-tabs,.warranty-tabs{overflow-x:auto!important;flex-wrap:nowrap!important;scrollbar-width:none}
  .owner-tabs::-webkit-scrollbar,.warranty-tabs::-webkit-scrollbar{display:none}
  .owner-tab{flex:0 0 auto}
  .benefit-grid,.public-grid,.provider-grid,.roadside-service-grid,.roadside-scope-panel,
  .warranty-grid,.warranty-grid-electric{grid-template-columns:1fr!important}
  .maint-table-scroll{-webkit-overflow-scrolling:touch}
  .maint-table-scroll img{min-width:900px!important}
  .plugshare-frame{height:410px!important}
}

/* ================= NOSOTROS ================= */
@media(max-width:1024px){
  .about-intro-grid,.about-experience-grid,.about-location-grid{grid-template-columns:1fr!important}
  .about-pillar-grid{grid-template-columns:repeat(2,1fr)!important}
  .about-service-grid{grid-template-columns:1fr!important}
  .about-aoa-grid{grid-template-columns:1fr!important}
}
@media(max-width:620px){
  .about-hero,.about-hero-content{min-height:560px!important}
  .about-hero h1{font-size:clamp(44px,13vw,60px)!important}
  .about-hero-actions,.about-intro-actions,.about-final-actions{flex-direction:column!important;width:100%}
  .about-hero-actions .btn,.about-intro-actions .btn,.about-final-actions .btn{width:100%}
  .about-pillar-grid{grid-template-columns:1fr!important}
  .about-contact-list{grid-template-columns:1fr!important}
  .about-map,.about-map iframe{min-height:390px!important}
}

/* ================= CONTACTO ================= */
@media(max-width:1024px){
  .contact-hero-grid{grid-template-columns:1fr!important}
  .contact-hero-panel{display:none!important}
  .contact-route-grid{grid-template-columns:1fr!important}
  .contact-form-grid,.contact-location-grid{grid-template-columns:1fr!important}
}
@media(max-width:620px){
  .contact-hero,.contact-hero-grid{min-height:560px!important}
  .contact-hero h1{font-size:clamp(44px,13vw,60px)!important}
  .contact-hero-actions{flex-direction:column!important}
  .contact-hero-actions .btn{width:100%}
  .contact-form{grid-template-columns:1fr!important;padding:22px!important}
  .contact-form-wide{grid-column:auto!important}
  .contact-location-list a{align-items:flex-start}
  .contact-map,.contact-map iframe{min-height:390px!important}
  .contact-quick-grid{grid-template-columns:1fr!important}
}

/* ================= LEGAL ================= */
@media(max-width:768px){
  .legal-hero,.legal-page-hero{padding-block:58px!important}
  .legal-grid,.legal-layout{grid-template-columns:1fr!important}
  .legal-sidebar{position:static!important}
}

/* Ultra-small phones */
@media(max-width:430px){
  .container{width:min(calc(100% - 22px),var(--container))}
  .header-inner{width:calc(100% - 22px)}
  .brand{width:122px}
  .hero h1,.model-hero h1,.service-hero h1,.owner-hero h1,.about-hero h1,.contact-hero h1{
    letter-spacing:-.02em!important;
  }
  .footer-brand{width:140px}
}
@media(max-width:390px){
  .container{width:calc(100% - 18px)}
  .header-inner{width:calc(100% - 18px)}
  .btn{padding-inline:14px}
}
@media(max-width:360px){
  .container{width:calc(100% - 14px)}
  .header-inner{width:calc(100% - 14px)}
  .brand{width:116px}
  .mobile-sticky-contact>a,.mobile-bar>a{font-size:10px}
}


/* ==========================================================
   MOBILE MENU — FULL VIEWPORT FIX V1
   Ensures every navigation item is reachable on phones/tablets.
   Supports both body.menu-open and .main-nav.open JS implementations.
   ========================================================== */
@media (max-width:1024px){
  .site-header{
    overflow:visible !important;
  }

  .main-nav{
    position:fixed !important;
    top:var(--header,72px) !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:100% !important;
    height:calc(100dvh - var(--header,72px)) !important;
    max-height:calc(100dvh - var(--header,72px)) !important;
    min-height:0 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:0 !important;

    margin:0 !important;
    padding:8px 20px calc(100px + env(safe-area-inset-bottom)) !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    touch-action:pan-y;

    background:#fff !important;
    border-top:1px solid #e1e8ee !important;
    box-shadow:0 18px 40px rgba(9,42,70,.14) !important;
    z-index:9999 !important;

    transform:translateX(105%) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:transform .25s ease,opacity .2s ease,visibility .2s ease !important;
  }

  body.menu-open .main-nav,
  .main-nav.open{
    transform:translateX(0) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  body.menu-open{
    overflow:hidden !important;
    touch-action:none;
  }

  /* Keep all six menu rows from shrinking/disappearing. */
  .main-nav > .nav-models,
  .main-nav > a{
    display:block !important;
    flex:0 0 auto !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }

  .main-nav > a,
  .main-nav .nav-models-link{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    min-height:50px !important;
    padding:12px 2px !important;
    margin:0 !important;
    border-bottom:1px solid #e6edf2 !important;
    font-size:15px !important;
    line-height:1.25 !important;
    color:#243b50 !important;
    white-space:normal !important;
  }

  .main-nav > a:last-child{
    border-bottom:0 !important;
  }

  /* Mega menu remains desktop-only; "Modelos" stays a normal mobile row. */
  .models-mega{
    display:none !important;
  }

  .nav-models{
    width:100% !important;
    flex:0 0 auto !important;
  }

  .nav-models-chevron{
    display:none !important;
  }
}

/* Fallback for browsers where dvh is not available. */
@supports not (height:100dvh){
  @media (max-width:1024px){
    .main-nav{
      height:calc(100vh - var(--header,72px)) !important;
      max-height:calc(100vh - var(--header,72px)) !important;
    }
  }
}