@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@500;600;700;800&display=swap');

:root{
  --black:#07090a;
  --black2:#0d1012;
  --white:#f4f4f2;
  --cream:#efede8;
  --orange:#d58a36;
  --muted:#a7abad;
  --line:rgba(255,255,255,.15);
  --green:#25d366;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:#fff;font-family:Inter,Arial,sans-serif}
a{text-decoration:none;color:inherit}
button,input,textarea{font:inherit}
img{display:block;width:100%}

.site-header{
  position:fixed;left:0;right:0;top:0;height:82px;z-index:80;
  display:flex;align-items:center;gap:35px;
  padding:0 clamp(20px,4.5vw,82px);
  background:linear-gradient(180deg,rgba(4,6,7,.92),rgba(4,6,7,.45),transparent);
}
.brand{display:flex;align-items:center;gap:12px;white-space:nowrap}
.brand>span:last-child{display:flex;flex-direction:column;line-height:1}
.brand b{font-size:15px;letter-spacing:.5px}
.brand small{font-size:8px;letter-spacing:3px;margin-top:5px;color:#ccc}
.brand-mark{width:34px;height:41px;display:flex;gap:3px;align-items:flex-end}
.brand-mark i{display:block;width:7px;border:2px solid var(--orange);border-bottom:0;transform:skewY(-17deg)}
.brand-mark i:nth-child(1){height:24px}.brand-mark i:nth-child(2){height:33px}.brand-mark i:nth-child(3){height:41px}

.site-header nav{margin-left:auto;display:flex;gap:28px;font-size:13px;text-transform:uppercase;letter-spacing:.7px}
.site-header nav a{opacity:.84}.site-header nav a:hover{opacity:1}
.header-cta{padding:11px 16px;border:1px solid rgba(255,255,255,.55);font-size:12px;text-transform:uppercase;font-weight:700}
.menu-btn{display:none;margin-left:auto;border:0;background:none;padding:0}
.menu-btn span{display:block;width:26px;height:2px;background:#fff;margin:5px}

.model-stage{
  position:relative;height:100vh;min-height:680px;overflow:hidden;background:#050708;
}
.model-bg{position:absolute;inset:0}
.model-bg img{width:100%;height:100%;object-fit:cover;transition:opacity .35s ease,transform 1s ease;transform:scale(1.02)}
.model-stage.changing .model-bg img{opacity:.15;transform:scale(1.06)}
.model-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(4,6,7,.92) 0%,rgba(4,6,7,.72) 25%,rgba(4,6,7,.20) 58%,rgba(4,6,7,.26) 100%),
    linear-gradient(0deg,rgba(3,4,5,.72),transparent 38%,rgba(3,4,5,.20));
}
.model-content{
  position:absolute;left:clamp(70px,10vw,190px);top:50%;transform:translateY(-50%);
  z-index:5;max-width:760px;
}
.eyebrow{font-size:11px;letter-spacing:2.5px;font-weight:800;color:#fff;text-transform:uppercase}
.dark-text{color:#674116}
.model-content h1{
  font-family:Montserrat,Arial,sans-serif;font-size:clamp(58px,7.4vw,126px);
  line-height:.88;letter-spacing:-4px;margin:16px 0 18px;text-transform:uppercase;
}
.tagline{font-size:clamp(18px,2vw,28px);margin:0;color:#e7e7e7}
.hero-actions{display:flex;align-items:center;gap:26px;margin-top:34px;flex-wrap:wrap}
.hex-button{
  min-width:230px;border:0;color:#fff;background:transparent;padding:0;display:flex;align-items:center;
  cursor:pointer;text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:.7px;
}
.hex-button span{background:#fff;color:#090b0c;padding:17px 20px;flex:1;text-align:left}
.hex-button b{
  width:51px;height:51px;display:grid;place-items:center;color:#fff;background:#0a0c0e;
  border:1px solid rgba(255,255,255,.65);font-size:22px;font-weight:400;
  clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%)
}
.text-action{font-size:13px;font-weight:700;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.75);padding-bottom:5px}

.side-selector{
  position:absolute;z-index:7;left:28px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:6px;
}
.model-dot{border:0;background:none;color:#fff;cursor:pointer;padding:8px;display:flex;align-items:center;gap:8px;opacity:.45}
.model-dot:after{content:"";width:24px;height:1px;background:#fff;transition:.25s}
.model-dot.active{opacity:1}.model-dot.active:after{width:54px}
.model-dot span{font-size:10px;letter-spacing:1px}

.model-specs{
  position:absolute;z-index:6;left:clamp(70px,10vw,190px);bottom:38px;
  display:flex;border-top:1px solid rgba(255,255,255,.35);padding-top:17px;gap:0;
}
.model-specs div{min-width:150px;padding:0 24px;border-right:1px solid rgba(255,255,255,.22)}
.model-specs div:first-child{padding-left:0}.model-specs div:last-child{border-right:0}
.model-specs small{display:block;color:#b7bbbd;font-size:9px;letter-spacing:1.4px;margin-bottom:6px}
.model-specs strong{font-size:13px}

.model-controls{
  position:absolute;z-index:7;right:45px;bottom:38px;display:flex;align-items:center;gap:16px;
}
.model-controls button{width:48px;height:48px;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.2);color:#fff;font-size:20px;cursor:pointer}
.model-controls span{font-size:12px}.model-controls b{font-size:17px}
.scroll-hint{
  position:absolute;right:32px;top:50%;z-index:5;writing-mode:vertical-rl;
  font-size:8px;letter-spacing:2px;color:#ddd;display:flex;align-items:center;gap:12px;
}
.scroll-hint span{width:1px;height:62px;background:rgba(255,255,255,.55)}

.section{padding:100px max(5vw,24px)}
.selection{background:var(--cream);color:#111}
.section-head{max-width:1320px;margin:0 auto 44px;display:flex;justify-content:space-between;align-items:end;gap:50px}
.section-head h2{font-family:Montserrat,Arial,sans-serif;font-size:clamp(42px,5vw,76px);line-height:.95;letter-spacing:-3px;text-transform:uppercase;margin:12px 0 0}
.section-head p{max-width:470px;line-height:1.7;color:#62676a}.section-head code{font-size:12px;background:#ddd8cf;padding:2px 5px}
.filters{max-width:1320px;margin:0 auto 28px;display:flex;gap:8px;flex-wrap:wrap}
.filters button{border:1px solid #b9b5ae;background:transparent;padding:10px 18px;text-transform:uppercase;font-size:11px;cursor:pointer}
.filters button.active{background:#101214;color:#fff;border-color:#101214}

.vehicle-grid{max-width:1320px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.vehicle-card{background:#fff;min-height:550px;position:relative;overflow:hidden;color:#111}
.vehicle-card img{height:355px;object-fit:cover;transition:.5s}
.vehicle-card:hover img{transform:scale(1.03)}
.vehicle-card-body{padding:25px}
.vehicle-card small{font-size:10px;letter-spacing:1.8px;color:#75797c}
.vehicle-card h3{font-family:Montserrat;font-size:28px;text-transform:uppercase;margin:9px 0 18px}
.vehicle-card-meta{display:flex;justify-content:space-between;gap:10px;color:#686d70;font-size:12px;border-top:1px solid #ddd;padding-top:15px}
.vehicle-card button{position:absolute;right:18px;bottom:18px;width:46px;height:46px;border:1px solid #222;background:#111;color:white;font-size:22px;cursor:pointer}

.experience{height:720px;position:relative;overflow:hidden}
.experience-image{position:absolute;inset:0;background:url('assets/vehiculos/vehiculo-02.jpg') center/cover no-repeat;transform:scale(1.03)}
.experience-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,8,.95),rgba(5,7,8,.70) 40%,rgba(5,7,8,.14))}
.experience-copy{position:absolute;z-index:3;left:clamp(30px,8vw,150px);top:50%;transform:translateY(-50%);max-width:660px}
.experience-copy h2{font-family:Montserrat;font-size:clamp(48px,5.5vw,84px);text-transform:uppercase;line-height:.93;letter-spacing:-3px;margin:15px 0 24px}
.experience-copy p{max-width:600px;color:#d7d9da;line-height:1.75}
.btn-light{display:inline-block;margin-top:25px;background:#fff;color:#111;padding:15px 21px;text-transform:uppercase;font-weight:800;font-size:12px}

.dark-section{background:#0b0e10}
.light-head p{color:#a8adaf}.light-head h2{color:#fff}
.support-grid{max-width:1320px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.support-grid article{padding:40px 28px;min-height:290px;border-right:1px solid var(--line)}
.support-grid article:last-child{border-right:0}
.support-grid span{font-size:11px;color:var(--orange);letter-spacing:2px}
.support-grid h3{font-family:Montserrat;font-size:28px;text-transform:uppercase;margin:38px 0 14px}
.support-grid p{color:#9fa5a8;line-height:1.65;font-size:14px}

.contact{background:#f1efea;color:#111;display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start}
.contact-copy{max-width:550px;margin-left:auto}
.contact-copy h2{font-family:Montserrat;font-size:clamp(44px,5vw,76px);line-height:.95;text-transform:uppercase;letter-spacing:-3px;margin:13px 0 18px}
.contact-copy p{color:#686d70;line-height:1.6}
#vehicleForm{max-width:750px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
#vehicleForm label{display:flex;flex-direction:column;gap:8px}
#vehicleForm label.wide{grid-column:1/-1}
#vehicleForm label span{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;font-weight:800}
#vehicleForm input,#vehicleForm textarea{width:100%;border:0;border-bottom:1px solid #8d8d8a;background:transparent;padding:13px 0;outline:0}
#vehicleForm button{grid-column:1/-1;border:0;background:#111;color:#fff;padding:17px 22px;text-transform:uppercase;font-weight:800;cursor:pointer}

footer{min-height:130px;padding:32px max(5vw,30px);display:flex;align-items:center;justify-content:space-between;gap:30px;background:#050708;border-top:1px solid rgba(255,255,255,.08)}
footer p{font-size:11px;color:#7f8588}footer>a:last-child{font-size:12px;color:#ddd}

.wa-float{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;align-items:center;gap:9px;background:var(--green);color:#fff;padding:11px 14px;border-radius:999px;box-shadow:0 15px 40px rgba(0,0,0,.35)}
.wa-float svg{width:28px;height:28px}.wa-float span{display:flex;flex-direction:column;line-height:1.05}.wa-float b{font-size:13px}.wa-float small{font-size:9px;margin-top:4px}

.vehicle-modal{position:fixed;z-index:100;inset:0;background:#080a0b;color:#fff;display:grid;grid-template-columns:1.2fr .8fr;opacity:0;pointer-events:none;transform:translateY(40px);transition:.35s}
.vehicle-modal.open{opacity:1;pointer-events:auto;transform:none}
.modal-close{position:absolute;z-index:4;right:25px;top:20px;width:48px;height:48px;border:1px solid rgba(255,255,255,.45);background:#080a0b;color:#fff;font-size:28px;cursor:pointer}
.modal-image img{height:100vh;object-fit:cover}
.modal-content{padding:120px 7vw 70px;display:flex;flex-direction:column;justify-content:center}
.modal-content h2{font-family:Montserrat;font-size:clamp(45px,5vw,76px);line-height:.92;text-transform:uppercase;margin:15px 0 20px}
.modal-content p{color:#aeb3b5;line-height:1.7}
.modal-spec-grid{display:grid;grid-template-columns:1fr 1fr;margin:28px 0;border-top:1px solid var(--line)}
.modal-spec-grid div{padding:18px 0;border-bottom:1px solid var(--line)}
.modal-spec-grid small{display:block;color:#858b8e;font-size:9px;letter-spacing:1.2px;margin-bottom:5px}
.btn-primary{display:inline-block;align-self:flex-start;background:#fff;color:#111;padding:15px 22px;text-transform:uppercase;font-weight:800;font-size:12px}

@media(max-width:1000px){
  .site-header nav,.header-cta{display:none}.menu-btn{display:block}
  .site-header nav.open{display:flex;position:fixed;left:0;right:0;top:76px;background:#080a0b;flex-direction:column;padding:24px}
  .side-selector{left:10px}
  .model-content{left:70px}
  .model-specs{left:70px}
  .vehicle-grid{grid-template-columns:1fr 1fr}.support-grid{grid-template-columns:1fr 1fr}.support-grid article:nth-child(2){border-right:0}
  .contact{grid-template-columns:1fr}.contact-copy{margin:0}
}
@media(max-width:720px){
  .site-header{height:68px;padding:0 18px}
  .brand b{font-size:13px}
  .model-stage{min-height:720px}
  .model-content{left:24px;right:24px;top:43%}
  .model-content h1{font-size:52px;letter-spacing:-2px}
  .side-selector{display:none}
  .model-specs{left:22px;right:22px;bottom:85px;display:grid;grid-template-columns:1fr 1fr}
  .model-specs div{min-width:0;padding:11px 12px;border-right:0;border-bottom:1px solid rgba(255,255,255,.2)}
  .model-specs div:first-child{padding-left:12px}
  .model-controls{right:20px;bottom:22px}
  .scroll-hint{display:none}
  .section{padding:70px 20px}.section-head{display:block}.section-head h2{font-size:45px}.section-head p{margin-top:20px}
 /* CARRUSEL DE VEHÍCULOS EN MÓVIL */
.vehicle-grid{
  display:flex;
  gap:12px;

  overflow-x:auto;
  overflow-y:hidden;

  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;

  padding:0 0 15px;
}

/* Ocultar barra de desplazamiento */
.vehicle-grid::-webkit-scrollbar{
  display:none;
}

.vehicle-grid{
  scrollbar-width:none;
}


/* Cada vehículo */
.vehicle-card{
  flex:0 0 84%;
  min-width:84%;
  min-height:0;

  scroll-snap-align:start;
  scroll-snap-stop:always;
}


/* Imagen */
.vehicle-card img{
  height:240px;
  object-fit:cover;
}


/* Contenido un poco más compacto */
.vehicle-card-body{
  padding:18px;
}

.vehicle-card h3{
  font-size:23px;
}


/* Botón + */
.vehicle-card button{
  width:42px;
  height:42px;
  right:12px;
  bottom:12px;
}
  .experience{height:660px}.experience-copy{left:22px;right:22px}.experience-copy h2{font-size:48px}
  .support-grid{grid-template-columns:1fr}.support-grid article{border-right:0;border-bottom:1px solid var(--line)}
  #vehicleForm{grid-template-columns:1fr}#vehicleForm label.wide,#vehicleForm button{grid-column:auto}
  footer{align-items:flex-start;flex-direction:column}
  .wa-float span{display:none}
  .vehicle-modal{grid-template-columns:1fr;overflow:auto}.modal-image img{height:45vh}.modal-content{padding:45px 24px 70px}.modal-close{right:12px;top:12px}
}