/* ═══════════════════════════════════════════════════════════════════════
   S4X4 – SOLUCIONES 4X4
   Stylesheet principal · Kit de Marca completo
   ───────────────────────────────────────────────────────────────────────
   FUENTES (mapeo del kit de marca):
     HORIZON    → Bebas Neue      (display / H1 / H2)
     MONUMENTO  → Barlow          (subtítulos / tarjetas)
     MONTASER   → Montserrat      (cuerpo de texto / párrafos)
     Mono       → JetBrains Mono  (códigos / etiquetas técnicas)
   ═══════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────
   0 · CUSTOM FONTS  (@font-face para fuentes propietarias opcionales)
   Si tenés los archivos .woff2 de HORIZON, MONTASER y MONUMENTO,
   descomentá y ajustá las rutas. Mientras tanto usamos los proxies de
   Google Fonts declarados en los :root variables.
   ─────────────────────────────────────────────────────────────────────── */

/*
@font-face {
  font-family: 'Horizon';
  src: url('assets/fonts/Horizon.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Monumento';
  src: url('assets/fonts/Monumento-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montaser';
  src: url('assets/fonts/Montaser-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
*/


/* ───────────────────────────────────────────────────────────────────────
   1 · VARIABLES DE MARCA (Design Tokens)
   ─────────────────────────────────────────────────────────────────────── */
:root {

  /* ── Paleta principal ───────────────────────────────────── */
  --c-black:       #000000;   /* Fondo dominante              */
  --c-white:       #FFFFFF;   /* Textos principales / logos   */
  --c-red:         #E11E26;   /* Acento S4X4 (uso quirúrgico) */
  --c-red-dark:    #B0151B;   /* Hover del rojo               */
  --c-red-glow:    rgba(225, 30, 38, 0.18);

  /* ── Escala de grises (sobre negro) ────────────────────── */
  --c-surface-1:   #0A0A0A;   /* Secciones alternas           */
  --c-surface-2:   #111111;   /* Tarjetas / hover             */
  --c-surface-3:   #1A1A1A;   /* Bordes ligeros               */
  --c-line:        rgba(255, 255, 255, 0.07);
  --c-line-strong: rgba(255, 255, 255, 0.14);
  --c-text-muted:  #888888;
  --c-text-dim:    #555555;
  --c-text-body:   #CCCCCC;

  /* ── Tipografía – Kit de Marca ──────────────────────────── */
  /* Si cargás las fuentes propietarias, cambiá solo el primer valor */
  --f-display:  'Bebas Neue',    'Arial Narrow', Arial, sans-serif;  /* HORIZON    */
  --f-sub:      'Barlow',        'Helvetica Neue', Arial, sans-serif; /* MONUMENTO  */
  --f-body:     'Montserrat',    'Helvetica Neue', Arial, sans-serif; /* MONTASER   */
  --f-mono:     'JetBrains Mono','Share Tech Mono','Courier New', monospace;

  /* ── Escala tipográfica (clamp = fluid type) ────────────── */
  --fs-hero:    clamp(3.2rem,  9vw,  7.5rem);
  --fs-h2:      clamp(2.2rem,  5vw,  4.2rem);
  --fs-h3:      clamp(1.3rem,  2.5vw, 2rem);
  --fs-lead:    clamp(0.95rem, 1.5vw, 1.1rem);
  --fs-body:    clamp(0.875rem,1.2vw, 1rem);
  --fs-small:   clamp(0.78rem, 1vw,  0.875rem);
  --fs-mono:    clamp(0.68rem, 0.9vw, 0.78rem);
  --fs-badge:   0.62rem;

  /* ── Espaciado ──────────────────────────────────────────── */
  --sp-xs:  0.5rem;
  --sp-sm:  1rem;
  --sp-md:  2rem;
  --sp-lg:  4rem;
  --sp-xl:  6rem;
  --sp-2xl: 9rem;

  /* ── Layout ─────────────────────────────────────────────── */
  --max-w:      1300px;
  --pad-inline: clamp(1.25rem, 5vw, 3.5rem);
  --radius:     2px;

  /* ── Animación ──────────────────────────────────────────── */
  --ease:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur:   200ms;
  --dur-slow: 400ms;

  /* ── Navbar ─────────────────────────────────────────────── */
  --navbar-h: 68px;
}


/* ───────────────────────────────────────────────────────────────────────
   2 · RESET & BASE
   ─────────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
}

body {
  background-color: var(--c-black);
  color: var(--c-white);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100dvh;
}

/* Skip to content – accesibilidad */
.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--sp-sm);
  background: var(--c-red);
  color: var(--c-white);
  padding: 0.5em 1em;
  font-family: var(--f-mono);
  font-size: var(--fs-badge);
  letter-spacing: 0.1em;
  z-index: 9999;
  text-transform: uppercase;
}
.skip-link:focus { inset-block-start: var(--sp-sm); }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

ul, ol { list-style: none; }
img, video, svg { display: block; max-width: 100%; }
svg { fill: currentColor; flex-shrink: 0; }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
address { font-style: normal; }
strong { font-weight: 600; color: var(--c-white); }

/* Focus visible global */
:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
  border-radius: var(--radius);
}


/* ───────────────────────────────────────────────────────────────────────
   3 · UTILIDADES
   ─────────────────────────────────────────────────────────────────────── */

/* Contenedor centrado */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

/* Texto cuerpo */
.body-text {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  color: var(--c-text-body);
  line-height: 1.75;
}

/* Texto monospace (detalles técnicos, códigos, etiquetas) */
.mono-text {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Colores de utilidad */
.text-red   { color: var(--c-red); }
.text-muted { color: var(--c-text-muted); }
.text-white { color: var(--c-white); }

/* Punto de estado animado */
.badge-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  min-width: 6px;
  background: var(--c-red);
  border-radius: 50%;
  animation: dot-pulse 2.8s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

/* Línea separadora decorativa */
.rule {
  border: none;
  border-top: 1px solid var(--c-line);
  margin-block: var(--sp-lg);
}


/* ───────────────────────────────────────────────────────────────────────
   4 · SISTEMA DE BOTONES
   ─────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.85em 1.9em;
  border-radius: var(--radius);
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--dur) var(--ease),
    color            var(--dur) var(--ease),
    border-color     var(--dur) var(--ease),
    transform        var(--dur) var(--ease),
    box-shadow       var(--dur) var(--ease);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0px);  }

/* Primario: blanco sólido */
.btn--primary {
  background: var(--c-white);
  color:       var(--c-black);
  border:      1px solid var(--c-white);
}
.btn--primary:hover {
  background: #e8e8e8;
  border-color: #e8e8e8;
  box-shadow: 0 6px 24px rgba(255,255,255,0.12);
}

/* Rojo sólido (CTA crítico B2B) */
.btn--red {
  background:   var(--c-red);
  color:        var(--c-white);
  border:       1px solid var(--c-red);
}
.btn--red:hover {
  background:   var(--c-red-dark);
  border-color: var(--c-red-dark);
  box-shadow:   0 6px 24px rgba(225,30,38,0.35);
}

/* Borde rojo (navbar CTA) */
.btn--outline-red {
  background:  transparent;
  color:       var(--c-white);
  border:      1px solid var(--c-red);
}
.btn--outline-red:hover {
  background: var(--c-red);
  color:      var(--c-white);
}

/* Borde blanco (tarjetas oscuras) */
.btn--outline-white {
  background:  transparent;
  color:       var(--c-white);
  border:      1px solid rgba(255,255,255,0.22);
}
.btn--outline-white:hover {
  border-color: rgba(255,255,255,0.6);
  background:   rgba(255,255,255,0.05);
}

/* Ghost (secundario neutro) */
.btn--ghost {
  background:  transparent;
  color:       var(--c-text-body);
  border:      1px solid var(--c-line-strong);
}
.btn--ghost:hover {
  color:        var(--c-white);
  border-color: rgba(255,255,255,0.4);
}

/* Ícono dentro de botón */
.btn svg,
.btn .icon-wa {
  width:     18px;
  height:    18px;
  flex-shrink: 0;
  fill:      currentColor;
  transition: transform var(--dur) var(--ease);
}
.btn:hover svg,
.btn:hover .icon-wa { transform: scale(1.1); }


/* ───────────────────────────────────────────────────────────────────────
   5 · CABECERA DE SECCIÓN REUTILIZABLE
   ─────────────────────────────────────────────────────────────────────── */
.section-header {
  text-align: center;
  margin-bottom: var(--sp-lg);
}

.section-eyebrow {
  display: inline-block;
  color:          var(--c-red);
  font-family:    var(--f-mono);
  font-size:      var(--fs-badge);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom:  var(--sp-xs);
}

.section-title {
  font-family:    var(--f-display);   /* HORIZON */
  font-size:      var(--fs-h2);
  line-height:    1.03;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          var(--c-white);
  margin-bottom:  var(--sp-sm);
}

.section-desc {
  font-family: var(--f-body);         /* MONTASER */
  font-size:   var(--fs-body);
  color:       var(--c-text-body);
  max-width:   640px;
  margin-inline: auto;
  line-height: 1.75;
}


/* ───────────────────────────────────────────────────────────────────────
   6 · HEADER & NAVBAR
   ─────────────────────────────────────────────────────────────────────── */
.site-header {
  position:   fixed;
  top:        0;
  left:       0;
  right:      0;
  z-index:    1000;
  height:     var(--navbar-h);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter:         blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid var(--c-line);
  transition:
    background var(--dur-slow) var(--ease),
    border-color var(--dur-slow) var(--ease);
}

.site-header--scrolled {
  background:   rgba(0, 0, 0, 0.96);
  border-color: var(--c-line-strong);
}

/* ── Navbar inner ─── */
.navbar {
  display:         flex;
  align-items:     center;
  gap:             var(--sp-md);
  height:          100%;
  max-width:       var(--max-w);
  margin-inline:   auto;
  padding-inline:  var(--pad-inline);
}

/* ── Logo ─── */
.navbar__logo {
  display:    flex;
  align-items: center;
  flex-shrink: 0;
}

.navbar__logo-img {
  height:    44px;
  width:     auto;
  display:   block;
  object-fit: contain;
}

.footer__logo-img {
  height:    40px;
  width:     auto;
  display:   block;
  object-fit: contain;
}

.logo-mark {
  font-family:    var(--f-display);   /* HORIZON */
  font-size:      1.9rem;
  letter-spacing: 0.06em;
  color:          var(--c-white);
  line-height:    1;
}

.logo-accent { color: var(--c-red); }

.logo-sub {
  font-family:    var(--f-mono);
  font-size:      0.5rem;
  letter-spacing: 0.3em;
  color:          var(--c-text-dim);
  text-transform: uppercase;
  line-height:    1;
}

/* ── Links de navegación ─── */
.navbar__menu {
  display:     flex;
  align-items: center;
  gap:         clamp(1rem, 3vw, 2.5rem);
  margin-inline: auto;   /* centrado entre logo y CTA */
}

.navbar__link {
  font-family:    var(--f-mono);
  font-size:      0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--c-text-body);
  padding-block:  0.3em;
  position:       relative;
}

/* Underline animado en rojo */
.navbar__link::after {
  content:          '';
  position:         absolute;
  bottom:           -2px;
  left:             0;
  width:            0;
  height:           1.5px;
  background:       var(--c-red);
  transition:       width var(--dur) var(--ease);
}
.navbar__link:hover          { color: var(--c-white); }
.navbar__link:hover::after   { width: 100%; }

/* ── CTA WhatsApp ─── */
.navbar__cta {
  flex-shrink:  0;
  font-size:    0.65rem;
  padding:      0.7em 1.3em;
  /* El icono se maneja dentro de .btn svg – ver regla global */
}

/* ── Botón hamburguesa (mobile) ─── */
.navbar__toggle {
  display:        none;           /* oculto en desktop */
  flex-direction: column;
  justify-content: center;
  align-items:    center;
  gap:            5px;
  width:          40px;
  height:         40px;
  padding:        6px;
  margin-inline-start: auto;
  flex-shrink:    0;
  border:         1px solid var(--c-line);
  border-radius:  var(--radius);
  transition:     border-color var(--dur) var(--ease);
}
.navbar__toggle:hover { border-color: var(--c-line-strong); }

.navbar__toggle span {
  display:          block;
  width:            20px;
  height:           1.5px;
  background:       var(--c-white);
  border-radius:    1px;
  transform-origin: center;
  transition:
    transform var(--dur) var(--ease),
    opacity   var(--dur) var(--ease),
    width     var(--dur) var(--ease);
}

/* Estado abierto */
.navbar__toggle--open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.navbar__toggle--open span:nth-child(2) { opacity: 0; width: 0; }
.navbar__toggle--open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* ───────────────────────────────────────────────────────────────────────
   7 · HERO – SECCIÓN PRINCIPAL
   ─────────────────────────────────────────────────────────────────────── */
.hero {
  position:    relative;
  min-height:  100dvh;
  display:     flex;
  align-items: center;
  overflow:    hidden;
  padding-block-start: var(--navbar-h);
}

/* ── Fondo ─── */
.hero__bg {
  position: absolute;
  inset:    0;
  z-index:  0;
}

#hero-video-bg {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    0;
}

.hero__bg-placeholder {
  width:  100%;
  height: 100%;
  background-color: var(--c-surface-1);
  /* Patrón de cuadrícula de ingeniería */
  background-image:
    linear-gradient(rgba(225, 30, 38, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(225, 30, 38, 0.035) 1px, transparent 1px),
    /* Halo de luz rojizo lateral */
    radial-gradient(ellipse 75% 55% at 72% 48%, rgba(225, 30, 38, 0.09) 0%, transparent 65%);
  background-size: 64px 64px, 64px 64px, 100% 100%;
}

/* Sobreposición de oscurecimiento */
.hero__overlay {
  position: absolute;
  inset:    0;
  z-index:  1;
  background: linear-gradient(
    105deg,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.60) 50%,
    rgba(0,0,0,0.50) 100%
  );
}

/* ── Contenido ─── */
.hero__content {
  position:     relative;
  z-index:      2;
  padding-block: var(--sp-xl) var(--sp-lg);
  max-width:    860px;
}

.hero__badge {
  display:     inline-flex;
  align-items: center;
  gap:         0.6rem;
  color:       var(--c-text-muted);
  font-family: var(--f-mono);
  font-size:   var(--fs-badge);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--sp-md);
}

/* ── Título principal (HORIZON) ─── */
.hero__title {
  font-family:    var(--f-display);   /* HORIZON */
  font-size:      var(--fs-hero);
  line-height:    0.97;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color:          var(--c-white);
  margin-bottom:  var(--sp-md);
}

/* ── Bajada (MONTASER) ─── */
.hero__sub {
  font-family: var(--f-body);         /* MONTASER */
  font-size:   var(--fs-lead);
  color:       rgba(255,255,255,0.82);
  max-width:   580px;
  line-height: 1.7;
  margin-bottom: var(--sp-lg);
}

/* ── Acciones ─── */
.hero__actions {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--sp-sm);
  margin-bottom: var(--sp-xl);
}

/* ── Animación fade-in + slide-up para specs ─── */
@keyframes specFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Specs técnicas en monospace ─── */
.hero__specs {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         var(--sp-md);
  padding:     1.25rem 1.5rem;
  border:      1px solid var(--c-line);
  background:  rgba(255,255,255,0.02);
  max-width:   max-content;
}

.spec-item {
  display:        flex;
  flex-direction: column;
  gap:            3px;
  opacity:        0;
  animation:      specFadeUp 0.55s var(--ease) forwards;
}
.spec-item:nth-child(1) { animation-delay: 0.3s;  }
.spec-item:nth-child(2) { animation-delay: 0.5s;  }
.spec-item:nth-child(3) { animation-delay: 0.7s;  }
.spec-item:nth-child(4) { animation-delay: 0.9s;  }

.spec-divider {
  animation:      specFadeUp 0.4s var(--ease) 0.4s forwards;
  opacity:        0;
}

.spec-value {
  font-family:    var(--f-mono);
  font-size:      0.95rem;
  color:          var(--c-white);
  letter-spacing: 0.06em;
  line-height:    1;
}

.spec-label {
  font-family:    var(--f-mono);
  font-size:      0.55rem;
  color:          var(--c-text-dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.spec-divider {
  width:      1px;
  height:     36px;
  background: var(--c-line-strong);
  flex-shrink: 0;
}

/* ── Scroll hint ─── */
.hero__scroll-hint {
  position:   absolute;
  bottom:     var(--sp-lg);
  left:       var(--pad-inline);
  display:    flex;
  align-items: center;
  gap:        var(--sp-sm);
  color:      var(--c-text-dim);
  z-index:    1;
  user-select: none;
}

.hero__scroll-hint .mono-text {
  font-size:    0.55rem;
  letter-spacing: 0.22em;
  writing-mode: vertical-rl;
}

.scroll-line {
  width:  1px;
  height: 56px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.25), transparent);
  animation: scroll-anim 2.2s ease-in-out infinite;
  transform-origin: top;
}

@keyframes scroll-anim {
  0%       { transform: scaleY(0); transform-origin: top; opacity: 0; }
  30%      { transform: scaleY(1); transform-origin: top; opacity: 1; }
  70%      { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100%     { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}


/* ───────────────────────────────────────────────────────────────────────
   8 · VEHÍCULOS COMPATIBLES
   ─────────────────────────────────────────────────────────────────────── */
.vehicles {
  padding-block:  var(--sp-xl);
  background:     var(--c-surface-1);
  border-block:   1px solid var(--c-line);
}

/* Grid: 3 columnas en desktop, colapsa */
.vehicles__grid {
  display:     grid;
  grid-template-columns: repeat(3, 1fr);
  gap:         1px;
  background:  var(--c-line);
  border:      1px solid var(--c-line);
  margin-block: 0;
}

/* ── Tarjeta vehículo ─── */
.vehicle-card {
  display:        flex;
  flex-direction: column;
  background:     var(--c-black);
  transition:     background var(--dur) var(--ease);
}
.vehicle-card:hover { background: var(--c-surface-2); }

.vehicle-card__image-wrap {
  position:      relative;
  aspect-ratio:  16 / 9;
  overflow:      hidden;
  background:    var(--c-surface-2);
  flex-shrink:   0;
}

/* Placeholder (reemplazar con <img>) */
.vehicle-card__img-placeholder {
  width:  100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(225,30,38,0.09) 0%, transparent 60%),
    var(--c-surface-3);
  transition: transform var(--dur-slow) var(--ease);
}
.vehicle-card:hover .vehicle-card__img-placeholder {
  transform: scale(1.03);
}

/* Badge "DISEÑO 3D COMPATIBLE" */
.vehicle-card__badge {
  position:       absolute;
  top:            var(--sp-sm);
  left:           var(--sp-sm);
  display:        inline-flex;
  align-items:    center;
  background:     rgba(0,0,0,0.85);
  color:          var(--c-red);
  border:         1px solid var(--c-red);
  padding:        0.28em 0.65em;
  font-family:    var(--f-mono);
  font-size:      0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.vehicle-card__body {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
  padding:        var(--sp-md);
  flex:           1;
}

.vehicle-card__brand {
  font-family:    var(--f-mono);
  font-size:      0.62rem;
  letter-spacing: 0.22em;
  color:          var(--c-red);
  text-transform: uppercase;
}

/* Nombre del modelo: MONUMENTO */
.vehicle-card__model {
  font-family:    var(--f-sub);       /* MONUMENTO */
  font-size:      clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight:    700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height:    1.1;
  color:          var(--c-white);
}

.vehicle-card__features {
  font-family:    var(--f-mono);
  font-size:      0.64rem;
  color:          var(--c-text-dim);
  display:        flex;
  flex-direction: column;
  gap:            4px;
  flex:           1;
  letter-spacing: 0.06em;
}

.vehicle-card__cta {
  align-self:   flex-start;
  margin-top:   auto;
  padding:      0.7em 1.4em;
}

/* Footer de la sección */
.vehicles__footer {
  text-align:  center;
  margin-top:  var(--sp-lg);
  font-family: var(--f-body);
  font-size:   var(--fs-small);
  color:       var(--c-text-dim);
}

.link-red {
  color:         var(--c-red);
  border-bottom: 1px solid rgba(225,30,38,0.28);
  transition:    border-color var(--dur) var(--ease),
                 color var(--dur) var(--ease);
}
.link-red:hover { border-color: var(--c-red); color: #ff3a42; }


/* ───────────────────────────────────────────────────────────────────────
   9 · HISTORIA & INGENIERÍA
   ─────────────────────────────────────────────────────────────────────── */
.about {
  padding-block: var(--sp-xl);
  background:    var(--c-black);
}

.about__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--sp-xl);
  align-items:           start;
}

/* ── Columna media ─── */
.about__media {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-sm);
}

.about__media-main {
  position:      relative;
  background:    var(--c-surface-2);
  border:        1px solid var(--c-line);
}

.about__media-placeholder {
  width:  100%;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(225,30,38,0.07) 0%, transparent 55%),
    var(--c-surface-2);
}

/* Icono "play" sobre placeholder */
.about__media-placeholder::after {
  content:   '▶';
  position:  absolute;
  top:       50%;
  left:      50%;
  transform: translate(-50%,-50%);
  font-size: 2.8rem;
  color:     rgba(255,255,255,0.15);
  pointer-events: none;
}

/* Foto real principal */
.about__media-img {
  width:   100%;
  height:  auto;
  display: block;
}

.about__media-label {
  display:        inline-flex;
  align-items:    center;
  gap:            0.5rem;
  font-family:    var(--f-mono);
  font-size:      0.58rem;
  letter-spacing: 0.18em;
  color:          var(--c-text-dim);
  border:         1px solid var(--c-line);
  padding:        0.5rem 0.8rem;
  align-self:     flex-start;
  text-transform: uppercase;
}

.about__media-row {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--sp-xs);
}

.about__media-thumb {
  width:      100%;
  height:     auto;
  display:    block;
  background: var(--c-surface-3);
  border:     1px solid var(--c-line);
  cursor:        pointer;
  object-fit:    cover;
  width:         100%;
  display:       block;
  transition:    border-color var(--dur) var(--ease),
                 opacity var(--dur) var(--ease);
}
.about__media-thumb:hover {
  border-color: rgba(255,255,255,0.28);
  opacity:      0.85;
}

/* ── Columna texto (HORIZON + MONTASER) ─── */
.about__content {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-md);
}

.about__content .section-title { text-align: left; margin-bottom: 0; }

/* H1 + H2 marca — "S4X4 ES · SOLUCIONES 4X4" en la misma línea */
.about__brand-title {
  display:       flex;
  align-items:   baseline;
  flex-wrap:     wrap;
  gap:           0.35em;
  margin-bottom: var(--sp-md);
}
.about__brand-h1,
.about__brand-h2 {
  font-family:    var(--f-display);
  font-size:      var(--fs-h2);
  line-height:    1.25;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom:  0;
}
.about__brand-h1 { color: var(--c-white); }
.about__brand-h2 { color: var(--c-red); }

/* Doble H2 al mismo tamaño tipográfico — sin separación entre líneas */
.about__title-line {
  line-height:   1.0;
  margin-bottom: 0 !important;
}
.about__title-line + .about__title-line {
  margin-bottom: var(--sp-md) !important;
}
.about__title-line--red { color: var(--c-red); }

/* Pilares tecnológicos */
.about__pillars {
  display:        flex;
  flex-direction: column;
  gap:            0;
  border-top:     1px solid var(--c-line);
  margin-top:     var(--sp-xs);
}

.about__pillar {
  display:     flex;
  gap:         var(--sp-sm);
  align-items: flex-start;
  padding-block: var(--sp-md);
  border-bottom: 1px solid var(--c-line);
  transition:   background var(--dur) var(--ease);
}
.about__pillar:hover { background: rgba(255,255,255,0.015); }

.pillar-icon {
  font-family:    var(--f-mono);
  font-size:      1.1rem;
  color:          var(--c-red);
  letter-spacing: 0;
  line-height:    1.3;
  flex-shrink:    0;
  min-width:      2rem;
}

.pillar-title {
  font-family:    var(--f-sub);       /* MONUMENTO */
  font-size:      0.85rem;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--c-white);
  display:        block;
  margin-bottom:  0.25rem;
}

.pillar-desc {
  font-family: var(--f-body);         /* MONTASER */
  font-size:   var(--fs-small);
  color:       var(--c-text-muted);
  margin:      0;
  line-height: 1.6;
}

/* Sello "Hecho en Paraguay" */
.about__stamp {
  display:     inline-flex;
  align-items: center;
  gap:         var(--sp-sm);
  font-family: var(--f-mono);
  font-size:   0.6rem;
  letter-spacing: 0.22em;
  color:       var(--c-text-dim);
  border:      1px solid var(--c-line);
  padding:     0.8rem 1.1rem;
  align-self:  flex-start;
  text-transform: uppercase;
}

.stamp-flag    { font-size: 1.1rem; flex-shrink: 0; }
.stamp-divider { color: var(--c-surface-3); }


/* ───────────────────────────────────────────────────────────────────────
   10 · CANALES B2C & B2B
   ─────────────────────────────────────────────────────────────────────── */
.channels {
  padding-block: var(--sp-xl);
  background:    var(--c-surface-1);
  border-block:  1px solid var(--c-line);
}

.channels__split {
  display:               grid;
  grid-template-columns: 1fr 40px 1fr 40px 1fr;
  align-items:           stretch;
  border:                1px solid var(--c-line);
}

/* ── Bloques individuales ─── */
.channel-block {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-md);
  padding:        clamp(2rem, 5vw, 3.5rem);
}

.channel-block--b2c {
  border-right: 1px solid var(--c-line);
}

/* Tag de canal */
.channel-block__tag {
  display:        inline-flex;
  align-self:     flex-start;
  font-family:    var(--f-mono);
  font-size:      var(--fs-badge);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--c-text-dim);
  border:         1px solid var(--c-line);
  padding:        0.28em 0.7em;
}

.channel-block__tag--red {
  color:       var(--c-red);
  border-color: var(--c-red);
  background:  rgba(225,30,38,0.06);
}

/* Título del canal (HORIZON) */
.channel-block__title {
  font-family:    var(--f-display);   /* HORIZON */
  font-size:      clamp(1.6rem, 3.2vw, 2.6rem);
  line-height:    1.03;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color:          var(--c-white);
}

.channel-block__list {
  display:        flex;
  flex-direction: column;
  gap:            0;
  flex:           1;
}

.channel-block__list li {
  font-family:  var(--f-body);        /* MONTASER */
  font-size:    var(--fs-small);
  color:        var(--c-text-body);
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--c-line);
}
.channel-block__list li:first-child { border-top: 1px solid var(--c-line); }

/* Divisor central */
.channels__divider {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-sm);
  padding-block:   var(--sp-lg);
  border-inline:   1px solid var(--c-line);
  background:      rgba(255,255,255,0.01);
}

.divider-line {
  flex:       1;
  width:      1px;
  background: var(--c-line);
}

.divider-label {
  font-family:    var(--f-mono);
  font-size:      0.65rem;
  color:          var(--c-text-dim);
  letter-spacing: 0.12em;
}


/* ───────────────────────────────────────────────────────────────────────
   11 · CATÁLOGO DE PRODUCTOS
   ─────────────────────────────────────────────────────────────────────── */
.catalog {
  padding-block: var(--sp-xl);
  background:    var(--c-black);
}

/* ── Filtros ─── */
.catalog__filters {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             var(--sp-xs);
  margin-bottom:   var(--sp-lg);
}

.filter-btn {
  font-family:    var(--f-mono);
  font-size:      var(--fs-badge);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--c-text-muted);
  padding:        0.6em 1.3em;
  border:         1px solid var(--c-line);
  border-radius:  var(--radius);
  background:     transparent;
  cursor:         pointer;
  transition:
    color        var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    background   var(--dur) var(--ease);
}
.filter-btn:hover {
  color:        var(--c-white);
  border-color: var(--c-line-strong);
}
.filter-btn--active,
.filter-btn[aria-pressed="true"] {
  color:        var(--c-white);
  border-color: var(--c-red);
  background:   rgba(225,30,38,0.08);
}

/* ── Grid de productos ─── */
.catalog__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1px;
  background:            var(--c-line);
  border:                1px solid var(--c-line);
}

/* Tarjeta de producto */
.product-card {
  display:        flex;
  flex-direction: column;
  background:     var(--c-black);
  transition:     background var(--dur) var(--ease);
}
.product-card:hover { background: var(--c-surface-2); }

/* Imagen */
.product-card__image-wrap {
  position:     relative;
  aspect-ratio: 4 / 3;
  overflow:     hidden;
  background:   var(--c-surface-2);
  flex-shrink:  0;
}

.product-card__img {
  width:               100%;
  height:              100%;
  background-size:     cover;
  background-position: center;
  background-color:    var(--c-surface-2);
  background-image:    radial-gradient(ellipse at 50% 55%, rgba(225,30,38,0.06) 0%, transparent 65%);
  transition:          transform var(--dur-slow) var(--ease);
}
.product-card:hover .product-card__img { transform: scale(1.04); }

/* Código de producto en monospace */
.product-card__code {
  position:       absolute;
  bottom:         var(--sp-xs);
  right:          var(--sp-xs);
  background:     rgba(0,0,0,0.82);
  color:          var(--c-text-dim);
  font-family:    var(--f-mono);
  font-size:      0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:        0.22em 0.55em;
  border:         1px solid var(--c-line);
  backdrop-filter: blur(4px);
}

/* Cuerpo */
.product-card__body {
  display:        flex;
  flex-direction: column;
  gap:            0.65rem;
  padding:        var(--sp-md);
  flex:           1;
}

.product-card__cat {
  font-family:    var(--f-mono);
  font-size:      0.58rem;
  letter-spacing: 0.2em;
  color:          var(--c-red);
  text-transform: uppercase;
}

/* Nombre (MONUMENTO) */
.product-card__name {
  font-family:    var(--f-sub);       /* MONUMENTO */
  font-size:      clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight:    700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height:    1.2;
  color:          var(--c-white);
}

.product-card__vehicle {
  display:      block;
  font-weight:  500;
  font-size:    0.8em;
  color:        var(--c-text-muted);
  text-transform: none;
  letter-spacing: 0.02em;
  margin-top:   0.2rem;
}

.product-card__price {
  font-family:    var(--f-display);
  font-size:      clamp(1.3rem, 2.5vw, 1.7rem);
  color:          var(--c-white);
  letter-spacing: 0.03em;
  line-height:    1;
  margin-block:   0.4rem 0;
}
.product-card__price-unit {
  font-family: var(--f-sub);
  font-size:   0.55em;
  color:       var(--c-text-muted);
  margin-left: 0.15em;
}

/* Specs técnicas (monospace) */
.product-card__specs {
  font-family:    var(--f-mono);
  font-size:      0.6rem;
  letter-spacing: 0.07em;
  color:          var(--c-text-dim);
  display:        flex;
  flex-direction: column;
  gap:            5px;
  padding-block-start: 0.6rem;
  border-top:     1px solid var(--c-line);
  flex:           1;
}

.product-card__cta {
  align-self:  flex-start;
  margin-top:  auto;
  padding:     0.7em 1.4em;
}

/* Footer del catálogo */
.catalog__footer {
  text-align: center;
  margin-top: var(--sp-lg);
}


/* ───────────────────────────────────────────────────────────────────────
   12 · BLOG / SEO
   ─────────────────────────────────────────────────────────────────────── */
.blog {
  padding-block: var(--sp-xl);
  background:    var(--c-surface-1);
  border-block:  1px solid var(--c-line);
}

.blog__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1px;
  background:            var(--c-line);
  border:                1px solid var(--c-line);
}

/* Tarjeta de blog */
.blog-card {
  display:        flex;
  flex-direction: column;
  background:     var(--c-black);
  transition:     background var(--dur) var(--ease);
}
.blog-card:hover { background: var(--c-surface-2); }

/* Imagen */
.blog-card__image-wrap {
  position:     relative;
  aspect-ratio: 16 / 9;
  overflow:     hidden;
  background:   var(--c-surface-2);
  flex-shrink:  0;
}

.blog-card__img {
  width:  100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 35% 50%, rgba(225,30,38,0.07) 0%, transparent 60%),
    var(--c-surface-2);
  transition: transform var(--dur-slow) var(--ease);
}
.blog-card:hover .blog-card__img { transform: scale(1.04); }

/* Categoría badge */
.blog-card__cat {
  position:       absolute;
  bottom:         var(--sp-xs);
  left:           var(--sp-xs);
  background:     rgba(0,0,0,0.85);
  color:          var(--c-red);
  font-family:    var(--f-mono);
  font-size:      0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding:        0.28em 0.65em;
  border:         1px solid var(--c-red);
  backdrop-filter: blur(4px);
}

/* Cuerpo */
.blog-card__body {
  display:        flex;
  flex-direction: column;
  gap:            0.65rem;
  padding:        var(--sp-md);
  flex:           1;
}

.blog-card__date {
  font-family:    var(--f-mono);
  font-size:      0.58rem;
  letter-spacing: 0.14em;
  color:          var(--c-text-dim);
  text-transform: uppercase;
}

/* Título del post (MONUMENTO) */
.blog-card__title {
  font-family:  var(--f-sub);         /* MONUMENTO */
  font-size:    clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight:  700;
  line-height:  1.38;
  letter-spacing: 0.02em;
  color:        var(--c-white);
}

.blog-card__link {
  color:      var(--c-white);
  transition: color var(--dur) var(--ease);
}
.blog-card__link:hover { color: var(--c-red); }

/* Excerpt (MONTASER) */
.blog-card__excerpt {
  font-family: var(--f-body);         /* MONTASER */
  font-size:   var(--fs-small);
  color:       var(--c-text-dim);
  line-height: 1.65;
  flex:        1;
  margin:      0;
}

/* "LEER ARTÍCULO →" */
.blog-card__read-more {
  display:        inline-flex;
  align-items:    center;
  gap:            0.4rem;
  font-family:    var(--f-mono);
  font-size:      0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--c-red);
  margin-top:     auto;
  align-self:     flex-start;
  transition:     gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.blog-card__read-more:hover { gap: 0.75rem; color: var(--c-white); }


/* ───────────────────────────────────────────────────────────────────────
   13 · FOOTER
   ─────────────────────────────────────────────────────────────────────── */
.site-footer {
  background:  var(--c-black);
  border-top:  1px solid var(--c-line-strong);
}

.footer__grid {
  display:               grid;
  grid-template-columns: 2fr 1fr 1.6fr;
  gap:                   var(--sp-xl);
  padding-block:         var(--sp-xl);
}

/* ── Logo footer ─── */
.footer__logo {
  display:       inline-block;
  margin-bottom: var(--sp-md);
  line-height:   1;
}
.footer__logo .logo-mark { font-size: 2.4rem; }

/* Descripción (MONTASER) */
.footer__desc {
  font-family: var(--f-body);         /* MONTASER */
  font-size:   var(--fs-small);
  color:       var(--c-text-dim);
  line-height: 1.7;
  margin-bottom: var(--sp-md);
}

/* Sello */
.footer__stamp {
  display:        inline-flex;
  align-items:    center;
  gap:            0.5rem;
  font-family:    var(--f-mono);
  font-size:      0.58rem;
  letter-spacing: 0.22em;
  color:          var(--c-text-dim);
  border:         1px solid var(--c-line);
  padding:        0.55rem 0.85rem;
  text-transform: uppercase;
}

/* ── Columna navegación ─── */
.footer__col-title {
  font-family:    var(--f-mono);
  font-size:      0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--c-text-dim);
  font-weight:    400;
  margin-bottom:  var(--sp-md);
  padding-bottom: var(--sp-sm);
  border-bottom:  1px solid var(--c-line);
}

.footer__nav-list {
  display:        flex;
  flex-direction: column;
  gap:            0.35rem;
}

.footer__nav-link {
  font-family: var(--f-body);         /* MONTASER */
  font-size:   var(--fs-small);
  color:       var(--c-text-muted);
  padding-block: 0.2rem;
  display:     inline-block;
  transition:  color var(--dur) var(--ease),
               padding-left var(--dur) var(--ease);
}
.footer__nav-link:hover {
  color:        var(--c-white);
  padding-left: 0.45rem;
}

/* ── Columna contacto ─── */
.footer__address {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-md);
}

.footer__address p {
  font-family: var(--f-body);         /* MONTASER */
  font-size:   var(--fs-small);
  color:       var(--c-text-muted);
  line-height: 1.7;
}

.footer__contact-label {
  display:        block;
  font-family:    var(--f-mono);
  font-size:      0.55rem;
  letter-spacing: 0.2em;
  color:          var(--c-text-dim);
  margin-bottom:  0.2rem;
  text-transform: uppercase;
}

.footer__contact-link {
  color:      var(--c-text-body);
  transition: color var(--dur) var(--ease);
}
.footer__contact-link:hover { color: var(--c-red); }

/* Redes sociales */
.footer__social {
  display:    flex;
  gap:        0.6rem;
  margin-top: var(--sp-md);
  flex-wrap:  wrap;
}

.footer__social-link {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  flex-shrink:     0;
  border:          1px solid var(--c-line);
  border-radius:   var(--radius);
  color:           var(--c-text-dim);
  transition:
    color        var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    background   var(--dur) var(--ease);
}
.footer__social-link svg {
  width:  16px;
  height: 16px;
}
.footer__social-link:hover {
  color:        var(--c-white);
  border-color: rgba(255,255,255,0.35);
  background:   rgba(255,255,255,0.04);
}

/* ── Footer bottom ─── */
.footer__bottom {
  border-top:   1px solid var(--c-line);
  padding-block: var(--sp-md);
}

.footer__bottom-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--sp-sm);
}

.footer__legal {
  font-family:    var(--f-mono);
  font-size:      0.58rem;
  letter-spacing: 0.08em;
  color:          var(--c-text-dim);
  text-transform: uppercase;
}

.footer__bottom-links {
  display:        flex;
  align-items:    center;
  gap:            var(--sp-sm);
  font-family:    var(--f-mono);
  font-size:      0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer__bottom-links a {
  color:      var(--c-text-dim);
  transition: color var(--dur) var(--ease);
}
.footer__bottom-links a:hover { color: var(--c-text-body); }
.footer__bottom-links span    { color: var(--c-text-dim); }


/* ───────────────────────────────────────────────────────────────────────
   14 · RESPONSIVE – TABLET (≤ 1024 px)
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Vehicles: 1 columna por fila */
  .vehicles__grid {
    grid-template-columns: 1fr;
  }

  /* About: stack vertical */
  .about__grid {
    grid-template-columns: 1fr;
  }

  /* Channels: 1 columna */
  .channels__split {
    grid-template-columns: 1fr;
  }

  .channels__divider {
    flex-direction:  row;
    padding-block:   0;
    padding-inline:  var(--sp-lg);
    min-height:      40px;
  }
  .divider-line {
    flex:       1;
    width:      auto;
    height:     1px;
  }
  .channel-block--b2c { border-right: none; border-bottom: 1px solid var(--c-line); }

  /* Catalog & Blog: 2 columnas */
  .catalog__grid,
  .blog__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer: 2 columnas */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-lg);
  }
  .footer__col--brand {
    grid-column: 1 / -1;
  }
}


/* ───────────────────────────────────────────────────────────────────────
   15 · RESPONSIVE – MOBILE (≤ 768 px)
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Navbar mobile ─── */
  .navbar__toggle { display: flex; }

  /* Ocultar CTA en mobile para simplificar barra */
  .navbar__cta { display: none; }

  .navbar__menu {
    /* Panel deslizante desde arriba */
    display:         flex;
    position:        fixed;
    top:             var(--navbar-h);
    left:            0;
    right:           0;
    flex-direction:  column;
    align-items:     flex-start;
    gap:             0;
    background:      rgba(0,0,0,0.97);
    backdrop-filter: blur(24px);
    border-top:      1px solid var(--c-line-strong);
    padding-block:   var(--sp-sm);
    z-index:         999;
    /* Estado inicial: invisible y fuera */
    transform:       translateY(-8px);
    opacity:         0;
    pointer-events:  none;
    visibility:      hidden;
    transition:
      transform  var(--dur) var(--ease),
      opacity    var(--dur) var(--ease),
      visibility var(--dur);
  }

  .navbar__menu--open {
    transform:      translateY(0);
    opacity:        1;
    pointer-events: auto;
    visibility:     visible;
  }

  .navbar__link {
    width:         100%;
    padding:       0.9rem var(--pad-inline);
    font-size:     0.78rem;
    letter-spacing: 0.14em;
    border-bottom: 1px solid var(--c-line);
  }
  .navbar__link::after { display: none; }

  /* ── Hero mobile ─── */
  .hero__scroll-hint { display: none; }

  .hero__actions {
    flex-direction: column;
    align-items:    flex-start;
  }
  .hero__actions .btn { width: 100%; justify-content: center; }

  .hero__specs {
    flex-wrap:  wrap;
    gap:        var(--sp-sm);
    max-width:  100%;
  }
  .spec-divider { display: none; }

  /* ── Catalog & Blog: 1 columna ─── */
  .catalog__grid,
  .blog__grid {
    grid-template-columns: 1fr;
  }

  /* Filtros wrap */
  .catalog__filters {
    justify-content: flex-start;
    overflow-x:      auto;
    flex-wrap:       nowrap;
    padding-bottom:  var(--sp-xs);
    /* Scroll horizontal sin scrollbar visible */
    scrollbar-width: none;
  }
  .catalog__filters::-webkit-scrollbar { display: none; }
  .filter-btn { flex-shrink: 0; }

  /* ── Footer: 1 columna ─── */
  .footer__grid {
    grid-template-columns: 1fr;
    gap:                   var(--sp-lg);
  }
  .footer__col--brand { grid-column: auto; }

  .footer__bottom-inner {
    flex-direction: column;
    align-items:    flex-start;
  }

  /* Channel blocks */
  .channel-block { padding: var(--sp-md); }
}


/* ───────────────────────────────────────────────────────────────────────
   16 · RESPONSIVE – SMALL MOBILE (≤ 480 px)
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  .hero__title {
    font-size: clamp(2.6rem, 13vw, 3.8rem);
  }

  .section-title {
    font-size: clamp(1.9rem, 10vw, 3rem);
  }

  .hero__specs {
    padding: 1rem;
  }

  .about__media-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .filter-btn {
    padding: 0.55em 0.9em;
  }
}


/* ───────────────────────────────────────────────────────────────────────
   17 · MOTION REDUCIDO (accesibilidad)
   ─────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior:      auto !important;
  }
}


/* ───────────────────────────────────────────────────────────────────────
   18 · PRINT
   ─────────────────────────────────────────────────────────────────────── */
@media print {
  .site-header,
  .hero__scroll-hint,
  .navbar__cta,
  .catalog__filters,
  .footer__social,
  .btn { display: none !important; }

  body { background: #fff; color: #000; }
  .section-title,
  .hero__title,
  .channel-block__title,
  .vehicle-card__model,
  .product-card__name,
  .blog-card__title { color: #000; }

  .body-text,
  .section-desc,
  .hero__sub { color: #333; }
}

/* -- Badge "Lo nuevo" (compartido entre pages) */
.badge-new {
  display:        inline-block;
  font-family:    var(--f-mono);
  font-size:      0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--c-white);
  background:     var(--c-red);
  padding:        0.25em 0.6em;
  border-radius:  2px;
  margin-bottom:  0.3rem;
}

/* ── Lightbox S4X4 (compartido: productos.html e index.html) ── */
.lightbox {
  position:        fixed;
  inset:           0;
  z-index:         9000;
  background:      rgba(0,0,0,0.92);
  display:         flex;
  align-items:     center;
  justify-content: center;
  backdrop-filter: blur(8px);
}
.lightbox[hidden] { display: none; }

.lightbox__img-wrap {
  max-width:  90vw;
  max-height: 85vh;
  display:    flex;
  align-items: center;
  justify-content: center;
}
.lightbox__img {
  max-width:   90vw;
  max-height:  85vh;
  object-fit:  contain;
  border:      1px solid rgba(255,255,255,0.12);
  user-select: none;
}
.lightbox__close {
  position:   absolute;
  top:        1.25rem;
  right:      1.25rem;
  background: rgba(0,0,0,0.6);
  border:     1px solid rgba(255,255,255,0.18);
  color:      #fff;
  font-size:  1.2rem;
  line-height: 1;
  padding:    0.3em 0.6em;
  cursor:     pointer;
  z-index:    10;
  transition: background 0.2s ease;
}
.lightbox__close:hover { background: rgba(225,30,38,0.7); }

.lightbox__nav {
  position:   absolute;
  top:        50%;
  transform:  translateY(-50%);
  background: rgba(0,0,0,0.55);
  border:     1px solid rgba(255,255,255,0.18);
  color:      #fff;
  font-size:  2.5rem;
  line-height: 1;
  padding:    0.1em 0.4em 0.15em;
  cursor:     pointer;
  z-index:    10;
  transition: background 0.2s ease;
}
.lightbox__nav:hover { background: rgba(225,30,38,0.7); }
.lightbox__nav--prev { left:  1rem; }
.lightbox__nav--next { right: 1rem; }

.lightbox__dots {
  position:  absolute;
  bottom:    1.25rem;
  left:      50%;
  transform: translateX(-50%);
  display:   flex;
  gap:       8px;
  z-index:   10;
}
.lightbox__dot {
  width:         9px;
  height:        9px;
  border-radius: 50%;
  background:    rgba(255,255,255,0.3);
  border:        none;
  cursor:        pointer;
  padding:       0;
  transition:    background 0.2s ease;
}
.lightbox__dot--active { background: #E11E26; }

.lightbox__counter {
  position:    absolute;
  top:         1.25rem;
  left:        50%;
  transform:   translateX(-50%);
  background:  rgba(0,0,0,0.55);
  border:      1px solid rgba(255,255,255,0.18);
  color:       #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size:   0.8rem;
  letter-spacing: 0.08em;
  padding:     0.25em 0.75em;
  z-index:     10;
  pointer-events: none;
  white-space: nowrap;
}