/* Veloce Automotive · cinematográfico: negro, grafito y rojo */
@font-face { font-family: "Michroma"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/michroma.woff2) format("woff2") }
.va {
  --bk: #070708; --g1: #101012; --g2: #17171a; --g3: #222226; --red: #e5392f; --red-b: #d4312a; --w: #f2f2f0; --mut: #a2a2a8; --line: rgba(255, 255, 255, .1);
  --wide: "Michroma", "Eurostile", "Arial Black", sans-serif; --sans: "Inter Tight", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
  margin: 0; background: var(--bk); color: var(--w); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased
}
.va *, .va *::before, .va *::after { box-sizing: border-box }
.va img { display: block; max-width: 100%; height: auto }
.va a { color: inherit; text-decoration: none }
.va h1, .va h2, .va h3, .va p, .va ul, .va figure, .va dl, .va dd { margin: 0 }
.va button, .va input, .va select, .va textarea { font: inherit; color: inherit }
.va :focus-visible { outline: 2px solid var(--red); outline-offset: 3px }
.va .va-w { width: min(1360px, 100% - clamp(32px, 6vw, 96px)); margin-inline: auto }
.va h2 { font-family: var(--wide); font-weight: 400; text-transform: uppercase; font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1.05; letter-spacing: .02em }

.va-hd { position: sticky; top: 0; z-index: 40; background: rgba(7, 7, 8, .75); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line) }
.va-hd-in { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px }
.va-logo { font-family: var(--wide); letter-spacing: .32em; font-size: 1.15rem }
.va-nav { display: flex; align-items: center; gap: 28px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase }
.va-nav a:not(.va-btn):hover { color: var(--red) }
.va .va-menu { display: none; background: none; border: 1px solid var(--line); padding: 8px 14px; cursor: pointer; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase }
@media (max-width: 760px) {
  .va .va-menu { display: block }
  .va-nav { position: absolute; left: 0; right: 0; top: 68px; flex-direction: column; align-items: stretch; gap: 0; background: var(--g1); padding: 8px 24px 22px; border-bottom: 1px solid var(--line) }
  .va-nav a:not(.va-btn) { padding: 14px 0; border-bottom: 1px solid var(--line) }
  .va-nav .va-btn { margin-top: 16px }
  .js .va-nav:not(.open) { display: none }
}
.va .va-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; background: var(--red-b); color: #fff; border: 1px solid var(--red-b); text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; font-weight: 600; cursor: pointer; transition: background .3s, color .3s, border-color .3s }
.va .va-btn:hover { background: var(--w); color: var(--bk); border-color: var(--w) }
.va .va-btn.sm { min-height: 40px; padding: 0 16px }
.va .va-btn.ghost { background: transparent; border-color: rgba(255, 255, 255, .35) }
.va .va-btn.ghost:hover { background: var(--w); color: var(--bk) }

/* Hero */
.va-hero { position: relative; min-height: calc(100vh - 106px); min-height: calc(100svh - 106px); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden }
.va-hero-img { position: absolute; inset: -6% 0 0; will-change: transform }
.va-hero-img img { width: 100%; height: 100%; object-fit: cover }
.va-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 7, 8, .3), rgba(7, 7, 8, .15) 40%, rgba(7, 7, 8, .92)), linear-gradient(90deg, rgba(7, 7, 8, .7), transparent 60%) }
.va-lines { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden }
.va-lines i { position: absolute; left: -30%; height: 1px; width: 30%; background: linear-gradient(90deg, transparent, rgba(229, 57, 47, .9), transparent); animation: streak 4.5s cubic-bezier(.5, 0, .2, 1) infinite }
.va-lines i:nth-child(1) { top: 62% } .va-lines i:nth-child(2) { top: 70%; animation-delay: 1.6s } .va-lines i:nth-child(3) { top: 78%; animation-delay: 3s }
@keyframes streak { to { left: 130% } }
.va-hero-in { position: relative; z-index: 2; padding: 100px 0 30px }
.va-kick { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mut) }
.va-hero h1 { font-family: var(--wide); font-weight: 400; text-transform: uppercase; font-size: clamp(2.2rem, 6.4vw, 6rem); line-height: 1.02; margin: 20px 0 32px; letter-spacing: .01em }
.va-hero h1 span { color: var(--red) }
.js .va-hero h1, .js .va-kick, .js .va-hero-ft { animation: in 1.4s cubic-bezier(.16, 1, .3, 1) both }
.js .va-hero h1 { animation-delay: .1s } .js .va-hero-ft { animation-delay: .3s }
@keyframes in { from { opacity: 0; transform: translateX(-30px); filter: blur(6px) } }
.va-hero-ft { display: flex; justify-content: space-between; align-items: end; gap: 20px 40px; flex-wrap: wrap }
.va-hero-ft p { color: #d4d4d8; max-width: 40ch }
.va-ctas { display: flex; flex-wrap: wrap; gap: 10px }
.va-stats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-bottom: 0 }
.va-stats div { padding: 18px 0; display: grid; gap: 2px }
.va-stats dt { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mut) }
.va-stats dd { font-family: var(--wide); font-size: 1.3rem }

/* Stock */
.va-stock, .va-expo, .va-svc, .va-ct { padding: clamp(70px, 10vw, 130px) 0 }
.va-sh { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 26px }
.va-count { font-family: var(--mono); font-size: .8rem; color: var(--mut) }
.va-filters { display: grid; grid-template-columns: 1fr 1fr 1.5fr 1fr 1.2fr auto; border: 1px solid var(--line); background: var(--g1); margin-bottom: 30px }
.va-filters label { display: grid; gap: 4px; padding: 12px 16px; border-right: 1px solid var(--line) }
.va-filters label > span { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mut) }
.va-filters output { color: var(--w) }
.va-filters select { background: transparent; border: 0; padding: 2px 0; cursor: pointer; min-width: 0 }
.va-filters select option { background: var(--g1) }
.va-range input { width: 100%; accent-color: var(--red) }
.va .va-reset { background: none; border: 0; padding: 0 18px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-size: .85rem }
@media (max-width: 1100px) { .va-filters { grid-template-columns: repeat(3, 1fr) } .va-filters label { border-bottom: 1px solid var(--line) } .va-reset { padding: 14px } }
@media (max-width: 600px) { .va-filters { grid-template-columns: 1fr 1fr } .va-range { grid-column: span 2 } }
.va-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
@media (max-width: 1100px) { .va-grid { grid-template-columns: 1fr 1fr } }
@media (max-width: 700px) { .va-grid { grid-template-columns: 1fr } }
.vc[hidden] { display: none }
.vc-a { display: block; background: var(--g1); border: 1px solid var(--line); transition: border-color .3s, transform .4s cubic-bezier(.16, 1, .3, 1) }
.vc-a:hover { border-color: var(--red); transform: translateY(-3px) }
.vc-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--g2) }
.vc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1) }
.vc-a:hover .vc-img img { transform: scale(1.05) }
.vc-body { display: grid; gap: 4px; padding: 18px 20px 20px }
.vc-make { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mut) }
.vc-model { font-family: var(--wide); font-size: 1.15rem; text-transform: uppercase; letter-spacing: .03em }
.vc-specs { display: flex; gap: 14px; font-family: var(--mono); font-size: .76rem; color: var(--mut); margin-top: 4px }
.vc-price { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 1.3rem; font-weight: 600 }
.va-empty { text-align: center; padding: 60px 20px; border: 1px dashed var(--line); display: grid; gap: 16px; justify-items: center }
.va-note { color: var(--mut); font-size: .84rem; margin-top: 26px; max-width: 80ch }

/* Exposición */
.va-expo { background: var(--g1) }
.va-expo-in { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: center }
.va-e-txt { display: grid; gap: 20px }
.va-e-txt > p { color: var(--mut) }
.va-expo figure { overflow: hidden }
.va-e1 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover }
.va-e2 img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: grayscale(.4) }
@media (max-width: 900px) { .va-expo-in { grid-template-columns: 1fr } }

/* Servicios */
.va-svl { list-style: none; padding: 0; margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line) }
.va-svl li { padding: 28px 24px 30px 0; border-right: 1px solid var(--line); display: grid; gap: 10px; align-content: start }
.va-svl li:last-child { border-right: 0 }
.va-svl li + li { padding-left: 24px }
.va-svl span { font-family: var(--mono); color: var(--red); font-size: .8rem }
.va-svl h3 { font-family: var(--wide); font-weight: 400; text-transform: uppercase; font-size: .95rem; letter-spacing: .04em }
.va-svl p { color: var(--mut); font-size: .95rem }
@media (max-width: 900px) { .va-svl { grid-template-columns: 1fr 1fr } .va-svl li { border-bottom: 1px solid var(--line) } .va-svl li:nth-child(odd) { padding-left: 0 } .va-svl li:nth-child(2n) { border-right: 0 } }
@media (max-width: 560px) { .va-svl { grid-template-columns: 1fr } .va-svl li { border-right: 0; padding-left: 0 !important } }

/* Contacto */
.va-ct-in { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 5vw, 80px) }
.va-ct-in > div p { color: var(--mut); margin-top: 16px; max-width: 34ch }
@media (max-width: 860px) { .va-ct-in { grid-template-columns: 1fr } }
.va-form { display: grid; gap: 16px }
.va-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
@media (max-width: 560px) { .va-row { grid-template-columns: 1fr } }
.va-f { display: grid; gap: 6px }
.va-f label { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mut) }
.va-f input, .va-f select, .va-f textarea { width: 100%; min-height: 50px; background: var(--g1); border: 1px solid var(--line); padding: 11px 14px; border-radius: 0 }
.va-f select option { background: var(--g1) }
.va-f input:focus, .va-f select:focus, .va-f textarea:focus { outline: none; border-color: var(--red) }
.va [aria-invalid="true"] { border-color: #ff7a6e !important }
.va-err { color: #ff8f84; font-size: .87rem }
.va-err::before { content: "⚠ " }
.va-chk { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: #d4d4d8 }
.va-chk input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--red) }
.va-form .va-btn { justify-self: start }
.va-done { border-left: 3px solid var(--red); padding: 12px 16px; background: var(--g1) }
.va-ft { border-top: 1px solid var(--line); padding: 34px 0; color: var(--mut); font-size: .85rem }
.va-ft .va-w { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; align-items: center }

/* Ficha */
.va-dlg { background: var(--g1); color: var(--w) }
.va-dlg .dk-close { background: var(--w); color: var(--bk) }
.v-wrap { display: grid; grid-template-columns: 1.3fr 1fr }
@media (max-width: 900px) { .v-wrap { grid-template-columns: 1fr } }
.v-gal { background: var(--bk); position: relative }
.v-main { aspect-ratio: 16 / 10; overflow: hidden }
.v-main img { width: 100%; height: 100%; object-fit: cover; animation: vfade .5s ease both }
@keyframes vfade { from { opacity: .3; transform: scale(1.02) } }
.v-thumbs { display: flex; gap: 8px; padding: 10px; overflow-x: auto }
.va .v-thumbs button { flex: 0 0 auto; width: 96px; aspect-ratio: 16 / 10; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; opacity: .65 }
.va .v-thumbs button[aria-current="true"] { border-color: var(--red); opacity: 1 }
.v-thumbs img { width: 100%; height: 100%; object-fit: cover }
.v-info { padding: clamp(24px, 3vw, 40px); display: grid; gap: 16px; align-content: start }
.v-make { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mut) }
.v-info h2 { font-size: clamp(1.6rem, 3vw, 2.4rem) }
.v-price { font-size: 1.8rem; font-weight: 600 }
.v-specs { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line) }
.v-specs div { padding: 10px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px }
.v-specs div:nth-child(odd) { padding-right: 12px }
.v-specs dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mut) }
.v-specs dd { font-size: .95rem }
.v-eq { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px }
.v-eq li { font-size: .82rem; padding: 6px 10px; border: 1px solid var(--line) }
.v-fin { background: var(--g2); padding: 18px; display: grid; gap: 12px }
.v-fin h3, .v-req h3 { font-family: var(--wide); font-weight: 400; text-transform: uppercase; font-size: .9rem; letter-spacing: .06em }
.v-fin label { display: grid; gap: 4px; font-size: .85rem; color: var(--mut) }
.v-fin input[type="range"] { accent-color: var(--red) }
.v-fin select { background: var(--g1); border: 1px solid var(--line); padding: 10px }
.v-quota { font-size: 1.6rem; font-weight: 600 }
.v-quota small { font-size: .85rem; color: var(--mut); font-weight: 400 }
.v-fine { font-size: .78rem; color: var(--mut) }
.v-req { display: grid; gap: 14px; border-top: 1px solid var(--line); padding-top: 18px }
@media (prefers-reduced-motion: reduce) { .va-lines { display: none } }