/* =========================================================
   CHANGAN PUEBLA — RESPONSIVE FINAL PASS V1
   Loaded after main.css, so these rules intentionally win.
   ========================================================= */

html{
  overflow-x:hidden;
}
body{
  overflow-x:hidden;
}
img{
  max-width:100%;
}

/* ---------- 1440 / 1366 desktop ---------- */
@media (max-width:1440px){
  .header-inner,
  .container{
    width:min(calc(100% - 56px),var(--container));
  }

  .hero.hero-photo .hero-grid{
    grid-template-columns:minmax(360px,560px) 1fr;
  }

  .hero.hero-photo .hero-copy{
    max-width:560px;
  }

  .hero.hero-photo h1{
    font-size:clamp(54px,5vw,76px);
  }

  .model-card{
    flex-basis:calc((100% - 54px)/4);
  }

  .promo-copy{
    max-width:500px;
  }

  .footer-grid{
    gap:26px;
  }
}

@media (max-width:1366px){
  .main-nav{
    gap:14px;
  }

  .main-nav a{
    font-size:12px;
  }

  .header-actions{
    gap:10px;
  }

  .hero.hero-photo{
    background-position:58% center;
  }

  .quick{
    padding-left:22px;
    padding-right:22px;
  }
}

/* ---------- Laptop / small desktop ---------- */
@media (max-width:1180px){
  .header-inner,
  .container{
    width:min(calc(100% - 44px),var(--container));
  }

  .branch-pill{
    display:none;
  }

  .hero.hero-photo{
    min-height:680px;
    background-position:64% center;
  }

  .hero.hero-photo .hero-grid{
    min-height:680px;
    grid-template-columns:minmax(340px,500px) 1fr;
  }

  .hero.hero-photo h1{
    font-size:clamp(50px,5.4vw,68px);
  }

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

  .quick{
    border-bottom:1px solid var(--line);
  }

  .model-card{
    flex-basis:calc((100% - 36px)/3);
  }

  .promo{
    min-height:540px;
  }

  .promo-copy{
    max-width:470px;
  }

  .energy-grid{
    grid-template-columns:.85fr 1.15fr;
  }

  .lead-grid,
  .dealership-grid{
    gap:42px;
  }

  .location{
    grid-template-columns:.9fr 1.1fr;
  }
}

/* ---------- 1024 / tablet landscape ---------- */
@media (max-width:1024px){
  :root{
    --header:76px;
  }

  .site-header{
    height:var(--header);
  }

  .header-inner{
    width:min(calc(100% - 36px),var(--container));
  }

  .brand{
    width:132px;
  }

  .menu-toggle{
    display:flex;
  }

  .main-nav{
    position:fixed;
    left:0;
    right:0;
    top:var(--header);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:18px 28px 30px;
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:0 18px 35px rgba(9,42,70,.12);
    transform:translateY(-115%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:transform .25s ease,opacity .2s ease,visibility .2s ease;
    max-height:calc(100svh - var(--header));
    overflow-y:auto;
    z-index:115;
  }

  .main-nav.open,
  body.menu-open .main-nav{
    transform:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .main-nav a{
    width:100%;
    padding:14px 0;
    font-size:15px;
    border-bottom:1px solid var(--line);
  }

  .header-actions .btn{
    min-height:42px;
    padding:0 18px;
  }

  .hero.hero-photo{
    min-height:720px;
    background-position:69% center;
  }

  .hero.hero-photo .hero-grid{
    min-height:720px;
    grid-template-columns:1fr;
    align-items:flex-start;
    padding-top:72px;
  }

  .hero-photo-overlay{
    background:
      linear-gradient(
        180deg,
        rgba(246,251,255,.99) 0%,
        rgba(246,251,255,.95) 39%,
        rgba(246,251,255,.48) 62%,
        rgba(246,251,255,.04) 100%
      );
  }

  .hero.hero-photo .hero-copy{
    max-width:600px;
  }

  .hero.hero-photo h1{
    font-size:clamp(50px,7vw,66px);
  }

  .model-card{
    flex-basis:calc((100% - 18px)/2);
  }

  .promo{
    min-height:600px;
    align-items:flex-end;
  }

  .promo-media::before{
    background-position:center;
  }

  .promo-media::after{
    background:linear-gradient(
      180deg,
      rgba(5,15,25,.02) 0%,
      rgba(5,15,25,.16) 42%,
      rgba(5,15,25,.88) 77%,
      rgba(5,15,25,.97) 100%
    );
  }

  .promo-inner{
    display:block;
    padding-bottom:54px;
  }

  .promo-copy{
    max-width:640px;
    margin:0;
  }

  .energy-grid,
  .lead-grid,
  .dealership-grid{
    grid-template-columns:1fr;
  }

  .energy-copy{
    max-width:680px;
  }

  .energy-scene{
    min-height:300px;
  }

  .lead-copy,
  .dealership-copy{
    max-width:720px;
  }

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

  .testdrive-visual,
  .testdrive-photo{
    min-height:360px;
  }

  .testdrive-copy{
    padding:58px 7vw;
  }

  .dealership-photo,
  .dealership-photo img{
    min-height:360px;
  }

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

  .location-info{
    padding:58px 7vw;
  }

  .map{
    min-height:430px;
  }

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

  .aoa{
    align-items:flex-start;
  }
}

/* ---------- 768 tablet portrait ---------- */
@media (max-width:768px){
  .header-inner,
  .container{
    width:min(calc(100% - 32px),var(--container));
  }

  .header-actions .btn{
    display:none;
  }

  .hero.hero-photo{
    min-height:690px;
    background-position:72% center;
  }

  .hero.hero-photo .hero-grid{
    min-height:690px;
    padding-top:58px;
  }

  .hero.hero-photo .hero-copy{
    max-width:520px;
  }

  .hero.hero-photo h1{
    font-size:clamp(46px,8.8vw,60px);
  }

  .hero-cta{
    flex-wrap:wrap;
  }

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

  .quick{
    min-height:92px;
  }

  .section{
    padding-top:66px;
    padding-bottom:66px;
  }

  .section-head{
    align-items:flex-end;
    gap:20px;
  }

  .section-head h2{
    font-size:clamp(38px,7vw,50px);
  }

  .filters{
    margin-top:28px;
  }

  .filter-row{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:5px;
    scrollbar-width:none;
  }

  .filter-row::-webkit-scrollbar{
    display:none;
  }

  .filter{
    flex:0 0 auto;
  }

  .models{
    overflow:hidden;
  }

  .models-carousel{
    overflow:visible;
  }

  .model-card{
    flex-basis:calc((100% - 18px)/2);
  }

  .energy-scene img{
    width:108%;
    margin-left:-4%;
  }

  .lead-form{
    max-width:680px;
  }

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

  .footer-bottom{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }
}

/* ---------- phones ---------- */
@media (max-width:620px){
  :root{
    --header:68px;
  }

  body{
    padding-bottom:calc(60px + env(safe-area-inset-bottom));
  }

  .header-inner,
  .container{
    width:min(calc(100% - 28px),var(--container));
  }

  .brand{
    width:118px;
  }

  .menu-toggle{
    width:40px;
    height:40px;
  }

  .hero.hero-photo{
    min-height:650px;
    background-position:75% center;
  }

  .hero.hero-photo .hero-grid{
    min-height:650px;
    padding-top:42px;
    padding-bottom:42px;
  }

  .hero-photo-overlay{
    background:
      linear-gradient(
        180deg,
        rgba(247,252,255,.995) 0%,
        rgba(247,252,255,.965) 35%,
        rgba(247,252,255,.62) 55%,
        rgba(247,252,255,.10) 78%,
        rgba(247,252,255,0) 100%
      );
  }

  .hero.hero-photo h1{
    font-size:clamp(39px,11.3vw,48px);
    line-height:.97;
  }

  .hero.hero-photo .hero-copy>p{
    max-width:340px;
    font-size:15px;
    line-height:1.55;
  }

  .hero-cta{
    display:grid;
    grid-template-columns:1fr;
    width:min(100%,310px);
  }

  .hero-cta .btn{
    width:100%;
  }

  .hero-caption{
    display:none;
  }

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

  .quick{
    min-height:80px;
    padding:15px 6px;
    border-left:0 !important;
  }

  .quick>span.quick-icon{
    width:38px;
    height:38px;
  }

  .section{
    padding-top:58px;
    padding-bottom:58px;
  }

  .section-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .carousel-arrows{
    align-self:flex-end;
  }

  .section-head h2{
    font-size:clamp(36px,10.5vw,44px);
    line-height:1;
  }

  .filters{
    margin-top:24px;
    margin-bottom:22px;
  }

  .filter-row{
    margin-left:-14px;
    margin-right:-14px;
    padding-left:14px;
    padding-right:14px;
  }

  .filter{
    min-height:38px;
    padding:8px 13px;
    font-size:12px;
  }

  .models-track{
    gap:14px;
  }

  .model-card{
    flex-basis:88%;
    min-height:445px;
    padding:18px;
  }

  .model-title{
    font-size:26px;
  }

  .model-image{
    height:178px;
  }

  .model-image img{
    max-height:168px;
  }

  .model-actions{
    gap:8px;
  }

  .model-actions a{
    min-height:42px;
    font-size:12px;
  }

  .microcopy{
    font-size:9px;
    line-height:1.5;
  }

  .promo{
    min-height:650px;
  }

  .promo-media::before{
    background-position:54% center;
  }

  .promo-inner{
    padding-bottom:38px;
  }

  .promo-copy{
    max-width:100%;
  }

  .promo h2{
    font-size:clamp(40px,11vw,50px);
  }

  .promo-lead{
    font-size:15px;
  }

  .promo-price strong{
    font-size:31px;
  }

  .promo-actions{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }

  .energy{
    min-height:auto;
  }

  .energy-grid{
    gap:22px;
  }

  .energy-copy h2,
  .lead-copy h2,
  .testdrive-copy h2,
  .dealership-copy h2{
    font-size:clamp(37px,10vw,46px);
    line-height:1;
  }

  .energy-scene{
    min-height:205px;
    margin:0 -14px;
    overflow:hidden;
  }

  .energy-scene img{
    width:122%;
    max-width:none;
    margin-left:-9%;
  }

  .lead-grid{
    gap:28px;
  }

  .lead-points{
    padding-left:0;
  }

  .lead-form{
    padding:21px;
    gap:15px;
    border-radius:8px;
  }

  .lead-form input,
  .lead-form select,
  .mini-form input,
  .mini-form select{
    min-height:50px;
    font-size:16px;
  }

  .lead-form fieldset{
    gap:10px;
  }

  .testdrive-visual,
  .testdrive-photo{
    min-height:235px;
  }

  .testdrive-copy{
    padding:46px 22px 52px;
  }

  .mini-form{
    gap:10px;
  }

  .dealership-photo,
  .dealership-photo img{
    min-height:235px;
  }

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

  .location-info{
    padding:48px 22px;
  }

  .location-info h2{
    font-size:39px;
  }

  .contact-lines{
    align-items:flex-start;
    flex-direction:column;
    gap:9px;
  }

  .map{
    min-height:340px;
  }

  .faq details{
    padding:0 14px;
  }

  .faq summary{
    font-size:15px;
    line-height:1.35;
  }

  .footer{
    padding-top:42px;
  }

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

  .footer-main nav{
    gap:8px 14px;
  }

  .aoa{
    align-items:flex-start;
  }

  .footer-bottom{
    margin-top:25px;
    padding-bottom:12px;
  }

  .mobile-sticky-contact{
    height:calc(60px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
  }

  .mobile-sticky-contact a{
    min-width:0;
    font-size:12px;
  }
}

/* ---------- 430 ---------- */
@media (max-width:430px){
  .hero.hero-photo{
    min-height:625px;
    background-position:77% center;
  }

  .hero.hero-photo .hero-grid{
    min-height:625px;
  }

  .hero.hero-photo h1{
    font-size:42px;
  }

  .model-card{
    flex-basis:90%;
  }

  .services{
    gap:8px;
  }
}

/* ---------- 390 ---------- */
@media (max-width:390px){
  .header-inner,
  .container{
    width:min(calc(100% - 24px),var(--container));
  }

  .brand{
    width:112px;
  }

  .hero.hero-photo{
    min-height:610px;
    background-position:78% center;
  }

  .hero.hero-photo h1{
    font-size:40px;
  }

  .hero.hero-photo .hero-copy>p{
    font-size:14px;
  }

  .model-card{
    flex-basis:91%;
  }

  .promo h2{
    font-size:40px;
  }

  .lead-form{
    padding:18px;
  }

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

  .mobile-sticky-contact a{
    font-size:11px;
  }
}

/* ---------- 360 ---------- */
@media (max-width:360px){
  .header-inner,
  .container{
    width:min(calc(100% - 20px),var(--container));
  }

  .hero.hero-photo h1{
    font-size:37px;
  }

  .hero-cta{
    width:100%;
  }

  .section-head h2{
    font-size:35px;
  }

  .model-card{
    flex-basis:93%;
  }

  .promo-price strong{
    font-size:28px;
  }

  .location-info{
    padding-left:18px;
    padding-right:18px;
  }

  .mobile-contact-icon{
    display:none;
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}


/* ===== Mobile navigation compatibility fix · 2026-10-01 ===== */
@media (max-width:1024px){
  body.menu-open{
    overflow:hidden;
  }

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

  .menu-toggle{
    position:relative;
    z-index:121;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
}