/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 243, 238, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: var(--border-w) solid var(--color-border);
}
.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.logo {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
}
.logo .logo-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: var(--tracking-wider);
  color: var(--color-muted);
  margin-top: 2px;
}

.nav-primary { display: none; }
.nav-primary ul { display: flex; gap: 2px; }
.nav-primary a {
  display: block;
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: var(--step-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-dim);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav-primary a:hover,
.nav-primary a[aria-current="page"] { color: var(--color-text); border-color: var(--color-accent); }

.header-actions { display: flex; align-items: center; gap: 8px; }
.header-actions .btn { padding: 10px 16px; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: var(--border-w) solid var(--color-border-strong);
  transition: border-color var(--dur-fast) var(--ease);
}
.icon-btn:hover { border-color: var(--color-text); }
.icon-btn svg { width: 17px; height: 17px; }

.menu-toggle { display: inline-flex; }
@media (min-width: 960px) {
  .nav-primary { display: block; }
  .menu-toggle { display: none; }
}

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  inset: 72px 0 0 0;
  background: var(--color-bg);
  z-index: 99;
  padding: 28px var(--gutter) 40px;
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.mobile-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-nav ul { display: flex; flex-direction: column; }
.mobile-nav a {
  display: block;
  padding: 18px 0;
  border-bottom: var(--border-w) solid var(--color-border);
  font-family: var(--font-display);
  font-size: var(--step-lg);
  text-transform: uppercase;
}
.mobile-nav .mobile-nav__footer {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media (min-width: 960px) { .mobile-nav { display: none; } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  border-bottom: var(--border-w) solid var(--color-border);
  padding-top: clamp(48px, 8vw, 88px);
  padding-bottom: 0;
  overflow: hidden;
}
.hero__eyebrow { margin-bottom: 18px; }
.hero__title {
  font-size: var(--step-3xl);
  max-width: 16ch;
}
.hero__row {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 40px;
}
.hero__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 24px;
}
.hero__lede { max-width: 40ch; color: var(--color-text-dim); }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__frame {
  position: relative;
  border-top: var(--border-w) solid var(--color-border);
  aspect-ratio: 16/8.5;
  background: var(--color-surface);
  overflow: hidden;
}
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.hero__frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11,12,14,0.5) 100%);
  pointer-events: none;
}
@media (min-width: 700px) {
  .hero__frame { aspect-ratio: 16/6.2; }
}

/* ==========================================================================
   Feature strip ("New in the Garage")
   ========================================================================== */
.feature {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
.feature__media {
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  aspect-ratio: 4/3;
  overflow: hidden;
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-med) var(--ease); }
.feature__media:hover img { transform: scale(1.03); }
.feature__body { display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.feature__title { font-size: var(--step-2xl); }
.feature__price { font-family: var(--font-mono); font-size: var(--step-lg); }
.feature__price .was { color: var(--color-muted-2); text-decoration: line-through; font-size: var(--step-sm); margin-right: 10px; }
@media (min-width: 860px) {
  .feature { grid-template-columns: 1.1fr 0.9fr; align-items: stretch; }
}

/* ==========================================================================
   Garage grid / cards
   ========================================================================== */
.brand-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.brand-filter button {
  font-family: var(--font-mono);
  font-size: var(--step-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 10px 16px;
  border: var(--border-w) solid var(--color-border-strong);
  color: var(--color-muted);
  transition: all var(--dur-fast) var(--ease);
}
.brand-filter button:hover { color: var(--color-text); border-color: var(--color-text); }
.brand-filter button[aria-pressed="true"] {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

.garage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--border-w);
  background: var(--color-border);
  border: var(--border-w) solid var(--color-border);
}
@media (min-width: 620px) { .garage-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .garage-grid { grid-template-columns: repeat(3, 1fr); } }

.v-card {
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  transition: background var(--dur-fast) var(--ease);
}
.v-card:hover { background: var(--color-surface); }
.v-card__media {
  aspect-ratio: 4/3;
  background: var(--color-surface);
  overflow: hidden;
  position: relative;
}
.v-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-med) var(--ease); }
.v-card:hover .v-card__media img { transform: scale(1.045); }
.v-card__tag { position: absolute; top: 12px; left: 12px; }
.v-card__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.v-card__brand { font-family: var(--font-mono); font-size: var(--step-2xs); letter-spacing: var(--tracking-wide); color: var(--color-muted); text-transform: uppercase; }
.v-card__model { font-family: var(--font-display); font-size: var(--step-lg); text-transform: uppercase; }
.v-card__specs { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--step-2xs); color: var(--color-muted); }
.v-card__specs b { color: var(--color-text-dim); font-weight: 500; }
.v-card__footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; }
.v-card__price { font-family: var(--font-mono); font-size: var(--step-md); }
.v-card__price .was { color: var(--color-muted-2); text-decoration: line-through; font-size: var(--step-2xs); display: block; }
.v-card__cta { font-family: var(--font-mono); font-size: var(--step-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text); border-bottom: var(--border-w) solid var(--color-border-strong); padding-bottom: 2px; }
.v-card:hover .v-card__cta { border-color: var(--color-accent); color: var(--color-accent); }

.section-cta { text-align: center; margin-top: 40px; }

/* ==========================================================================
   Builds
   ========================================================================== */
.builds-band { background: var(--color-surface); border-top: var(--border-w) solid var(--color-border); border-bottom: var(--border-w) solid var(--color-border); }
.builds-grid { display: grid; grid-template-columns: 1fr; gap: var(--border-w); background: var(--color-border); border: var(--border-w) solid var(--color-border); margin-top: 40px; }
@media (min-width: 760px) { .builds-grid { grid-template-columns: repeat(3, 1fr); } }
.build-card { background: var(--color-surface); padding: 28px; display: flex; flex-direction: column; gap: 14px; min-height: 260px; }
.build-card__id { font-family: var(--font-mono); font-size: var(--step-2xs); color: var(--color-accent); letter-spacing: var(--tracking-wide); }
.build-card__title { font-family: var(--font-display); font-size: var(--step-lg); text-transform: uppercase; }
.build-card__desc { color: var(--color-muted); font-size: var(--step-xs); }
.build-card__status { margin-top: auto; }

/* ==========================================================================
   Lab
   ========================================================================== */
.lab-block { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.lab-block__media { aspect-ratio: 16/11; background: var(--color-surface-2); border: var(--border-w) solid var(--color-border-strong); position: relative; overflow: hidden; }
.lab-block__media img { width: 100%; height: 100%; object-fit: cover; }
.lab-block__title { font-size: var(--step-2xl); margin-block: 18px; }
@media (min-width: 900px) { .lab-block { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Culture
   ========================================================================== */
.culture-grid { display: grid; grid-template-columns: 1fr; gap: var(--border-w); background: var(--color-border); border: var(--border-w) solid var(--color-border); }
@media (min-width: 640px) { .culture-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .culture-grid { grid-template-columns: repeat(4, 1fr); } }
.culture-card { background: var(--color-bg); padding: 22px; min-height: 210px; display: flex; flex-direction: column; justify-content: space-between; transition: background var(--dur-fast) var(--ease); }
.culture-card:hover { background: var(--color-surface); }
.culture-card__cat { font-family: var(--font-mono); font-size: var(--step-2xs); color: var(--color-accent); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.culture-card__title { font-family: var(--font-display); font-size: var(--step-md); text-transform: uppercase; margin-top: 14px; }

/* ==========================================================================
   About / philosophy
   ========================================================================== */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.about-grid__statement { font-size: var(--step-2xl); max-width: 18ch; }
.about-steps { display: flex; flex-direction: column; gap: 0; }
.about-steps li { display: flex; gap: 18px; padding: 16px 0; border-top: var(--border-w) solid var(--color-border); font-size: var(--step-md); }
.about-steps li:last-child { border-bottom: var(--border-w) solid var(--color-border); }
.about-steps b { font-family: var(--font-mono); color: var(--color-accent); font-weight: 500; flex: none; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Final CTA
   ========================================================================== */
.final-cta { background: var(--color-bg-inverse); color: var(--color-text-inverse); border-top: var(--border-w) solid var(--color-border); }
.final-cta .eyebrow { color: #6b6b66; }
.final-cta h2 { font-size: var(--step-3xl); max-width: 18ch; }
.final-cta .brand-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0; }
.final-cta .brand-pills span {
  font-family: var(--font-mono); font-size: var(--step-xs); letter-spacing: var(--tracking-wide);
  padding: 10px 16px; border: var(--border-w) solid var(--color-border-inverse); text-transform: uppercase;
}
.final-cta .final-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.final-cta .btn-primary { background: var(--color-text-inverse); color: var(--color-bg-inverse); border-color: var(--color-text-inverse); }
.final-cta .btn-ghost { border-color: var(--color-border-inverse); }
.final-cta .btn-ghost:hover { border-color: var(--color-text-inverse); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { border-top: var(--border-w) solid var(--color-border); padding-block: 56px 32px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; }
.footer-col h3 { font-family: var(--font-mono); font-size: var(--step-2xs); letter-spacing: var(--tracking-wide); color: var(--color-muted); text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: var(--step-sm); color: var(--color-text-dim); }
.footer-col a:hover { color: var(--color-text); }
.footer-brand .logo { font-size: 1.7rem; }
.footer-brand p { margin-top: 14px; color: var(--color-muted); max-width: 32ch; font-size: var(--step-xs); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 28px; border-top: var(--border-w) solid var(--color-border); font-family: var(--font-mono); font-size: var(--step-2xs); color: var(--color-muted-2); letter-spacing: 0.04em; }
.footer-bottom a { color: var(--color-muted); }
.footer-bottom a:hover { color: var(--color-text); }
.footer-social { display: flex; gap: 14px; }

@media (min-width: 620px) { .footer-grid { grid-template-columns: 1.3fr repeat(3, 1fr); } }

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--font-mono); font-size: var(--step-2xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-muted); padding-block: 20px; }
.breadcrumb a:hover { color: var(--color-text); }
.breadcrumb span[aria-current] { color: var(--color-text); }

/* ==========================================================================
   Product page
   ========================================================================== */
.product-hero { display: grid; grid-template-columns: 1fr; gap: 40px; padding-block: 8px 48px; }
.product-gallery__main { aspect-ratio: 4/3; background: var(--color-surface); border: var(--border-w) solid var(--color-border); overflow: hidden; margin-bottom: 10px; }
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumbs { display: flex; gap: 10px; }
.product-gallery__thumbs button { width: 76px; aspect-ratio: 4/3; border: var(--border-w) solid var(--color-border-strong); overflow: hidden; padding: 0; }
.product-gallery__thumbs button.is-active { border-color: var(--color-accent); }
.product-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.product-info__brand { font-family: var(--font-mono); font-size: var(--step-xs); letter-spacing: var(--tracking-wide); color: var(--color-muted); text-transform: uppercase; margin-bottom: 8px; }
.product-info__title { font-size: var(--step-2xl); }
.product-info__price { font-family: var(--font-mono); font-size: var(--step-xl); margin-top: 18px; }
.product-info__price .was { display: block; color: var(--color-muted-2); text-decoration: line-through; font-size: var(--step-sm); margin-bottom: 4px; }
.product-info__desc { margin-top: 18px; color: var(--color-text-dim); max-width: 52ch; }
.product-info__colors { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.product-info__colors span { font-family: var(--font-mono); font-size: var(--step-2xs); border: var(--border-w) solid var(--color-border-strong); padding: 8px 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.product-info__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.product-info__meta { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.product-info__block { margin-top: 22px; }
.product-info__block h3 { font-family: var(--font-mono); font-size: var(--step-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-muted); margin-bottom: 8px; }

@media (min-width: 900px) { .product-hero { grid-template-columns: 1.1fr 0.9fr; } }

.specs-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.specs-table tr { border-top: var(--border-w) solid var(--color-border); }
.specs-table tr:last-child { border-bottom: var(--border-w) solid var(--color-border); }
.specs-table th, .specs-table td { text-align: left; padding: 14px 8px; font-size: var(--step-sm); }
.specs-table th { font-family: var(--font-mono); font-weight: 500; color: var(--color-muted); width: 42%; text-transform: uppercase; font-size: var(--step-2xs); letter-spacing: 0.05em; }

.related-grid { display: grid; grid-template-columns: 1fr; gap: var(--border-w); background: var(--color-border); border: var(--border-w) solid var(--color-border); }
@media (min-width: 620px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   Sticky mobile buy bar (product page)
   ========================================================================== */
.buy-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(245,243,238,0.96);
  backdrop-filter: blur(10px);
  border-top: var(--border-w) solid var(--color-border);
  padding: 12px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.buy-bar__price { font-family: var(--font-mono); font-size: var(--step-md); }
.buy-bar .btn { padding: 12px 18px; }
@media (min-width: 900px) { .buy-bar { display: none; } }

/* ==========================================================================
   Generic empty/placeholder page (Builds, Lab, Culture in V1)
   ========================================================================== */
.stub-hero { padding-block: 64px 40px; border-bottom: var(--border-w) solid var(--color-border); }
.stub-hero h1 { font-size: var(--step-3xl); max-width: 18ch; }
.stub-note { color: var(--color-muted); max-width: 50ch; margin-top: 18px; }

\n\n/* ==========================================================================\n   NLM — identidad, escala de imágenes y paleta clara\n   ========================================================================== */\n.logo--image { display:flex; align-items:center; gap:10px; min-width:0; }\n.logo--image > img { width:36px; height:25px; object-fit:contain; object-position:center; flex:0 0 auto; }\n.logo--image > span { display:flex; flex-direction:column; }\n@media (max-width:460px){ .logo--image > img{width:31px;height:22px}.logo--image{font-size:1.15rem}.logo .logo-sub{font-size:.48rem} }\n\n.footer-lockup { display:block; width:min(100%,270px); }\n.footer-lockup img { width:100%; height:auto; display:block; object-fit:contain; }\n\n.brand-wall { padding:24px 0; background:var(--color-bg-raised); }\n.brand-wall__row { display:grid; grid-template-columns:1fr; align-items:center; gap:0; }\n.brand-wall__logo,.brand-wall__wordmark { min-height:74px; display:flex; align-items:center; justify-content:center; border-top:1px solid var(--color-border); padding:14px 26px; }\n.brand-wall__logo img { width:auto; height:auto; max-width:132px; max-height:42px; object-fit:contain; filter:grayscale(1) contrast(1.2); }\n.brand-wall__wordmark { font-family:var(--font-display); font-size:var(--step-lg); letter-spacing:.08em; color:var(--color-text); }\n@media(min-width:760px){\n  .brand-wall__row{grid-template-columns:1.25fr repeat(3,1fr)}\n  .brand-wall__logo,.brand-wall__wordmark{border-top:0;border-left:1px solid var(--color-border)}\n}\n\n/* Las fotos de producto nunca se recortan: se presentan como objeto automotriz. */\n.v-card__media, .feature__media, .product-gallery__main { background:#efede7; }\n.v-card__media img, .feature__media img, .product-gallery__main img { object-fit:contain; object-position:center; padding:clamp(10px,2vw,24px); background:#efede7; }\n.hero__frame { background:#efede7; max-height:560px; }\n.hero__frame img { object-fit:contain; object-position:center; padding:clamp(10px,2vw,28px); background:#efede7; }\n.hero__frame::after { background:linear-gradient(180deg,transparent 70%,rgba(23,25,27,.08) 100%); }\n.product-gallery__thumbs img { object-fit:contain; background:#efede7; }\n\n.lab-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; background:#222528; }\n.lab-placeholder img { width:min(42%,260px); max-height:150px; object-fit:contain; }\n.lab-placeholder span { font-family:var(--font-mono); font-size:var(--step-2xs); letter-spacing:.18em; color:#bbbdbd; }\n\n/* Contraste editorial: contenido claro, cierre oscuro. */\n.site-footer { background:var(--color-bg-inverse); color:var(--color-text-inverse); border-top:0; }\n.site-footer .footer-col h3,.site-footer .footer-brand p,.site-footer .footer-bottom{color:#aeb0b0}.site-footer .footer-col a{color:#d7d5cf}.site-footer .footer-col a:hover{color:#fff}.site-footer .footer-bottom{border-color:#3c3f42}.site-footer .footer-lockup img{filter:none}\n.final-cta { background:var(--color-bg-inverse); color:var(--color-text-inverse); }\n\n.coverage-note { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:18px; font-family:var(--font-mono); font-size:var(--step-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--color-muted); }\n.coverage-note span::before{content:"•";color:var(--color-accent);margin-right:8px}\n