/* Selectum · navegación y scroll por secciones (capa sobre site.css)
   - Menú: barra con MENÚ a la izquierda, logo al centro y teléfono a la derecha; el menú abre a pantalla completa.
   - Scroll: en pantallas grandes cada gesto avanza una sección completa (scroll-snap).
   - Única intervención sobre el contenido: tarjetas más pequeñas en Inventario y Hasta $60M para que quepan en una pantalla.
   Todo lo que se oculta para animar cuelga de html.sx (lo pone secciones.js): sin JS la página se ve completa. */

/* ---------- navegación ---------- */
.nav-in{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; }
.nav-links{ display:none !important; }
.nav-burger{
  display:inline-flex !important; align-items:center; gap:14px; justify-self:start; order:-1;
  width:auto; height:44px; margin:0 0 0 -4px; padding:0 6px;
}
.nav-burger span{ flex:none; }
.nav-burger::after{
  content:'Menú'; font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--text);
}
.nav-burger[aria-expanded="true"]::after{ content:'Cerrar'; }
.brand{ justify-self:center; }
.brand img{ height:34px; }
.nav-phone{ justify-self:end; display:inline-flex !important; }
.nav.is-menu-open{ background:var(--bg); border-bottom-color:var(--line); }

.mobile-menu{
  inset:0 !important; z-index:59; padding:calc(var(--nav-h) + clamp(24px,6vh,64px)) var(--gutter) clamp(24px,5vh,48px);
  display:flex; flex-direction:column; justify-content:center; gap:0;
  background:var(--bg); border:0; transform:none; counter-reset:menu;
  clip-path:inset(0 0 100% 0); opacity:1; visibility:hidden;
  transition:clip-path .6s cubic-bezier(.77,0,.175,1), visibility 0s linear .6s;
}
.mobile-menu.is-open{ clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .6s cubic-bezier(.77,0,.175,1), visibility 0s; }
.mobile-menu > a:not(.btn){
  counter-increment:menu; display:flex; align-items:baseline; gap:clamp(14px,2vw,28px);
  padding:clamp(6px,1.4vh,14px) 0; border:0;
  font-family:var(--f-display); font-weight:400; text-transform:uppercase; letter-spacing:.012em; line-height:1;
  font-size:clamp(34px,7.4vh,84px);
  opacity:0; transform:translateY(24px);
  transition:opacity .45s var(--ease), transform .55s var(--ease), color .2s;
}
.mobile-menu > a:not(.btn)::before{
  content:counter(menu,decimal-leading-zero); font-family:var(--f-body); font-size:12px; letter-spacing:.14em; color:var(--faint); transform:translateY(-.9em);
}
.mobile-menu.is-open > a:not(.btn){ opacity:1; transform:none; transition-delay:calc(.12s + var(--k,0) * 55ms); }
.mobile-menu > a:nth-child(1){ --k:0 } .mobile-menu > a:nth-child(2){ --k:1 } .mobile-menu > a:nth-child(3){ --k:2 }
.mobile-menu > a:nth-child(4){ --k:3 } .mobile-menu > a:nth-child(5){ --k:4 }
@media (hover:hover) and (pointer:fine){ .mobile-menu > a:not(.btn):hover{ color:var(--gold); } }
.mobile-menu .btn{ align-self:flex-start; margin-top:clamp(20px,4vh,40px); opacity:0; transition:opacity .45s var(--ease) .5s; }
.mobile-menu.is-open .btn{ opacity:1; }
html.menu-open{ overflow:hidden; }

/* indicador lateral de secciones */
.rail{
  position:fixed; right:clamp(14px,1.8vw,28px); top:50%; z-index:50; transform:translateY(-50%);
  display:none; flex-direction:column; gap:6px;
}
.rail a{ position:relative; display:block; width:28px; height:22px; }
.rail a::before{
  content:''; position:absolute; right:0; top:50%; width:10px; height:2px; margin-top:-1px; background:var(--text); opacity:.4;
  transition:width .35s var(--ease), opacity .25s, background-color .25s;
}
.rail a.is-active::before{ width:26px; opacity:1; background:var(--gold); }
.rail a span{
  position:absolute; right:38px; top:50%; transform:translate(6px,-50%); opacity:0; white-space:nowrap; pointer-events:none;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text);
  transition:opacity .2s, transform .3s var(--ease);
}
@media (hover:hover) and (pointer:fine){ .rail a:hover::before{ opacity:1; width:20px; } .rail a:hover span{ opacity:1; transform:translate(0,-50%); } }
.rail a:focus-visible span{ opacity:1; transform:translate(0,-50%); }
@media (min-width:1024px){ html.sx .rail{ display:flex; } html.menu-open .rail, html.intro-on .rail{ display:none; } }

/* ---------- scroll por secciones ---------- */
html.sx{ scroll-padding-top:0; }
html.sx main > section{ min-height:100svh; }
html.sx main > section:not(.hero){ padding-top:calc(var(--nav-h) + clamp(12px,3vh,40px)); display:flex; flex-direction:column; justify-content:center; }
html.sx main > section:not(.hero) > .wrap{ width:100%; }
@media (min-width:1024px) and (min-height:600px){
  html.sx{ scroll-snap-type:y mandatory; }
  html.sx main > section, html.sx footer{ scroll-snap-align:start; scroll-snap-stop:always; }
}
@media (max-width:1023px){ html.sx{ scroll-snap-type:y proximity; } html.sx main > section, html.sx footer{ scroll-snap-align:start; } }
@media (max-width:719px){
  html.sx main > section.stock, html.sx main > section.deals{ min-height:0; }
  html.sx main > section.hero{ min-height:0; }
}

/* ---------- tarjetas más pequeñas: Inventario y Hasta $60M caben en una pantalla ---------- */
.stock, .deals{ padding-bottom:clamp(14px,3vh,36px); }
.stock .grid, .deals .grid{ margin-top:clamp(12px,2vh,22px); gap:clamp(14px,2vh,22px) 14px; }
@media (min-width:1100px){
  .stock .grid, .deals .grid{ grid-template-columns:repeat(6,minmax(0,1fr)); }
}
@media (min-width:720px) and (max-width:1099px){
  .stock .grid, .deals .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:719px){
  .stock .grid, .deals .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 12px; }
}
.stock .card-body, .deals .card-body{ padding:10px 0 0; }
.stock .card-meta, .deals .card-meta{ font-size:10px; letter-spacing:.08em; }
.stock .card h3, .deals .card h3{ margin-top:4px; font-size:clamp(15px,1.25vw,19px); line-height:1.15; }
.stock .card-spec, .deals .card-spec{ margin-top:4px; font-size:11px; min-height:0; }
.stock .card-foot, .deals .card-foot{ padding-top:10px; }
.stock .card-foot-in, .deals .card-foot-in{ padding-top:8px; }
.stock .card-price, .deals .card-price{ font-size:clamp(14px,1.1vw,17px); }
.stock .card-link, .deals .card-link{ font-size:10px; letter-spacing:.06em; }
.stock .drop-plate, .deals .drop-plate{ top:8px; font-size:9px; padding:5px 8px 4px 10px; }
.stock .card .plate--sold, .deals .card .plate--sold{ top:8px; font-size:9px; padding:5px 7px 4px; }
.stock-more{ margin-top:clamp(14px,2.4vh,28px); }
.stock-more .btn{ min-height:44px; }

/* el título y las herramientas del inventario ocupan menos alto */
.stock-top{ gap:12px 32px; }
.stock-top h2.display{ font-size:clamp(28px,3.4vw,52px); }
.deals-head h2.display{ font-size:clamp(28px,3.4vw,52px); }
.brandrow{ margin-top:clamp(10px,2vh,22px); }
.filters{ margin-top:clamp(10px,1.6vh,16px); padding-block:6px; }
.results{ margin-top:10px; }
.deals-head p{ font-size:14px; }

/* ---------- animaciones por sección (solo con JS y sin "reducir movimiento") ---------- */
@media (prefers-reduced-motion:no-preference){
  html.sx :is(.stock,.finance,.deals,.contact) > .wrap{
    transition:opacity .7s var(--ease), transform .9s var(--ease);
  }
  html.sx :is(.stock,.finance,.deals,.contact):not(.is-inview) > .wrap{ opacity:0; transform:translateY(36px); }

  /* tarjetas: entran en cascada cada vez que llegas a la sección */
  html.sx :is(.stock,.deals) .card{
    transition:opacity .55s var(--ease), transform .7s var(--ease);
    transition-delay:calc(var(--i,0) * 55ms + .12s);
  }
  html.sx :is(.stock,.deals):not(.is-inview) .card{ opacity:0; transform:translateY(26px) scale(.97); transition-delay:0s; transition-duration:.25s; }

  /* financiación y contacto: bloques que entran uno tras otro */
  html.sx .finance-copy > *, html.sx .contact-in > div > *, html.sx .form-card .field, html.sx .finance-logo{
    transition:opacity .6s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--k,0) * 80ms + .15s);
  }
  html.sx .finance:not(.is-inview) .finance-copy > *, html.sx .contact:not(.is-inview) .contact-in > div > *,
  html.sx .contact:not(.is-inview) .form-card .field{ opacity:0; transform:translateY(22px); transition-delay:0s; }
  html.sx .finance:not(.is-inview) .finance-logo{ opacity:0; transform:scale(.94); transition-delay:0s; }
  .finance-copy > *:nth-child(1), .contact-in > div > *:nth-child(1){ --k:0 } .finance-copy > *:nth-child(2), .contact-in > div > *:nth-child(2){ --k:1 }
  .finance-copy > *:nth-child(3), .contact-in > div > *:nth-child(3){ --k:2 } .finance-copy > *:nth-child(4), .contact-in > div > *:nth-child(4){ --k:3 }
  .finance-copy > *:nth-child(5), .contact-in > div > *:nth-child(5){ --k:4 } .contact-in > div > *:nth-child(6){ --k:5 }
  .finance-logo{ --k:2; }

  /* el hero se desvanece y sube al irse (lo mueve secciones.js) */
  html.sx .hero-media{ will-change:transform; }
}

/* pantallas bajas (laptops de 768 px o menos): se compacta el espaciado para que siga cabiendo en una pantalla */
@media (min-width:1100px) and (max-height:820px){
  html.sx main > section:not(.hero){ padding-top:calc(var(--nav-h) + 6px); }
  .stock, .deals{ padding-bottom:10px; }
  .stock-top h2.display, .deals-head h2.display{ font-size:clamp(26px,2.8vw,40px); }
  .field-box input[type=search], .sel{ height:38px; }
  .brandrow{ gap:0 22px; margin-top:8px; }
  .brandrow button{ padding:3px 0; }
  .chips button{ padding:6px 0; }
  .filters{ margin-top:8px; padding-block:2px; }
  .results{ margin-top:6px; }
  .stock .grid, .deals .grid{ margin-top:8px; }
  .stock-more{ margin-top:10px; }
  .stock-more .btn{ min-height:38px; }
}

/* el hero cabe exacto en una pantalla (el titular y los espacios se ajustan al alto) */
@media (min-width:720px){
  html.sx .hero{ min-height:100svh; max-height:none; }
  html.sx .hero h1.display{ font-size:clamp(38px,min(6vw,9.2vh),96px); }
  html.sx .hero-body{ padding-top:calc(var(--nav-h) + 8px); padding-bottom:clamp(16px,2.4vh,36px); }
  html.sx .hero-kicker{ margin-bottom:clamp(8px,1.4vh,18px); }
  html.sx .hero-sub{ margin-top:clamp(10px,1.8vh,22px); }
  html.sx .hero-actions{ margin-top:clamp(12px,2.2vh,26px); }
  html.sx .hero-fin{ margin-top:clamp(12px,2vh,22px); }
  html.sx .hero-stats{ margin-top:clamp(12px,2.6vh,32px); padding-top:clamp(10px,1.8vh,20px); }
}
.nav-in{ position:relative; z-index:61; }   /* la barra queda por encima del menú abierto: se puede cerrar desde el mismo botón */
@media (max-width:719px){ .mobile-menu > a:not(.btn){ font-size:min(clamp(30px,6.4vh,84px),8vw); } }

/* el botón de WhatsApp queda visible incluso durante la entrada del logo */
.intro-on .wa-float{ z-index:210; }