/* ============================================================================
   ICIMOTORS 2.0 · Home
   Concepto C — Premium Automotive Experience.

   Todos los valores salen del Brandbook aprobado (Fase 02). Nada inventado:
   Carbón #14130F, Papel #F5F3EF, Señal #1F3AD6 usado en menos del 10% de la
   superficie; Archivo / Newsreader / JetBrains Mono; radios 0/4/10/pill;
   sombras de 3 niveles; motion 150–320ms.
   ============================================================================ */

/* ── 1 · TOKENS ─────────────────────────────────────────────────────────── */

:root {
  /* Paleta principal */
  --carbon:      #14130F;
  --carbon-deep: #0A0907;   /* un paso más oscuro: fondo del visor de fotos */
  --paper:       #F5F3EF;
  --signal:      #1F3AD6;
  --signal-lite: #6E82F0;   /* Señal legible sobre Carbón */

  /* Neutros cálidos */
  --grafito: #2B2925;
  --piedra:  #6F6A60;
  --ceniza:  #A8A298;
  --bruma:   #E3DED4;

  /* ── Roles del acento ────────────────────────────────────────────────
     Los componentes piden --accent, no --signal: así una sección sobre
     Papel puede resolver el mismo rol con otro valor sin tocar el
     componente.

     Sobre Carbón se usa la variante clara, que es la que alcanza contraste
     AA; el azul pleno queda para superficies de acento (botones, badges),
     donde el texto va en blanco. */
  --accent:       var(--signal-lite);
  --accent-solid: var(--signal);
  --accent-weak:  rgba(31, 58, 214, .14);

  /* Estados de sistema. Solo funcionales, nunca decorativos. */
  --state-success: #1F7A4D;
  --state-warning: #B06A1A;
  --state-error:   #A12B2B;

  /* Superficies */
  --bg:        var(--carbon);
  --surface:   #1B1A15;
  --surface-2: #232219;

  /* Vidrio */
  --glass:       rgba(20, 19, 15, 0.62);
  --glass-solid: rgba(20, 19, 15, 0.92);

  /* Bordes */
  --hair:   rgba(227, 222, 212, 0.13);
  --strong: rgba(227, 222, 212, 0.28);

  /* Texto */
  --text:      var(--paper);
  --text-2:    #C5C0B6;
  --text-3:    var(--ceniza);
  --text-muted:#7E7A70;

  /* Tipografía */
  --font-ui:   'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:'Newsreader', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Espaciado base 8 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 16px; --sp-4: 24px;
  --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px;

  /* Sombras */
  --shadow-1: 0 1px 3px rgba(0,0,0,.30);
  --shadow-2: 0 4px 10px rgba(0,0,0,.38);
  --shadow-3: 0 12px 28px rgba(0,0,0,.48);

  /* Radios */
  --r-tech: 0px;
  --r-def:  4px;
  --r-card: 10px;
  --r-pill: 9999px;

  /* Motion */
  --d-micro: 150ms;
  --d-std:   240ms;
  --d-enter: 320ms;
  --e-std:   cubic-bezier(.4, 0, .2, 1);
  --e-enter: cubic-bezier(.16, 1, .3, 1);

  /* Layout */
  --container: 1200px;
  --margin:    80px;
  --gutter:    24px;
}

@media (max-width: 1024px) { :root { --margin: 48px; --gutter: 20px; } }
@media (max-width: 640px)  { :root { --margin: 20px; --gutter: 16px; } }

@media (prefers-reduced-motion: reduce) {
  :root { --d-micro: 0ms; --d-std: 0ms; --d-enter: 0ms; }
}

/* Secciones sobre Papel — uno de los tres fondos permitidos (Brandbook §10) */
[data-surface='paper'] {
  --bg:        var(--paper);
  --surface:   #FFFFFF;
  --surface-2: #EFEDE7;
  --text:      var(--carbon);
  --text-2:    var(--grafito);
  --text-3:    var(--piedra);
  --text-muted:var(--piedra);
  --hair:      rgba(20,19,15,.10);
  --strong:    rgba(20,19,15,.24);
  --signal-lite: var(--signal);
  --shadow-1: 0 1px 3px rgba(0,0,0,.04);
  --shadow-2: 0 4px 10px rgba(0,0,0,.08);
  --shadow-3: 0 12px 28px rgba(0,0,0,.12);
}


/* ── 2 · BASE ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

/* El atributo hidden tiene que ganarle a cualquier display del componente.
   Sin esto, un `display:flex` o `display:grid` lo anula: los bloques marcados
   como ocultos se siguen viendo y, peor, el drawer cerrado queda alcanzable
   por teclado aunque esté fuera de pantalla. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--carbon);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--signal); color: #fff; }

:where(a, button, input):focus-visible {
  outline: 2px solid var(--signal-lite);
  outline-offset: 3px;
  border-radius: var(--r-def);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: 0; left: 0; z-index: 200;
  padding: var(--sp-2) var(--sp-3);
  background: var(--signal); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  transform: translateY(-120%);
  transition: transform var(--d-micro) var(--e-std);
}
.skip-link:focus { transform: translateY(0); }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--margin) * 2);
  margin-inline: auto;
  padding-inline: var(--margin);
}
.container--narrow { max-width: calc(820px + var(--margin) * 2); }


/* ── 3 · TIPOGRAFÍA ─────────────────────────────────────────────────────── */
/* Regla de oro: nunca más de tres tamaños por pantalla. La jerarquía se logra
   con peso y espacio antes que con tamaño. */

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-3);
}
.eyebrow__dot {
  width: 6px; height: 6px; border-radius: var(--r-pill);
  background: var(--signal-lite);
}

.section-head {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-6);
  align-items: end;
  margin-bottom: var(--sp-7);
}
.section-head__title {
  margin-top: var(--sp-3);
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -.025em;
}
.section-head__aside {
  max-width: 34ch;
  font-family: var(--font-serif);
  font-size: 1rem; line-height: 1.7; color: var(--text-2);
}
.section-head--center { grid-template-columns: 1fr; justify-items: center; text-align: center; }

@media (max-width: 860px) {
  .section-head { grid-template-columns: 1fr; align-items: start; gap: var(--sp-4); }
}


/* ── 4 · BOTONES ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap;
  /* `nowrap` es lo correcto casi siempre: un botón partido se lee mal. Pero en
     pantallas muy angostas un botón que no se parte tampoco se achica, y
     termina empujando la página entera. Ver la excepción más abajo. */
  transition:
    background-color var(--d-micro) var(--e-std),
    color            var(--d-micro) var(--e-std),
    border-color     var(--d-micro) var(--e-std),
    transform        var(--d-micro) var(--e-std);
}
.btn:active { transform: scale(.98); }

/* Señal aparece acá: es la acción confirmada. */
.btn--accent { background: var(--signal); color: #fff; }
.btn--accent:hover { background: #2A47E8; }

.btn--ghost {
  border: 1px solid var(--strong);
  color: var(--text);
  background: transparent;
}
.btn--ghost:hover { background: rgba(245,243,239,.07); border-color: var(--text-3); }

.btn--sm { min-height: 40px; padding: 0 var(--sp-4); font-size: 11px; }
.btn--lg { min-height: 56px; padding: 0 var(--sp-6); }

/* La excepción al `nowrap`: en pantallas muy angostas los botones grandes
   pueden ocupar dos renglones. Es preferible eso a que empujen el ancho de la
   página y la dejen corrible de costado, que además se come los gestos
   horizontales sobre las galerías. */
@media (max-width: 400px) {
  .btn--lg {
    white-space: normal;
    padding-inline: var(--sp-4);
    padding-block: var(--sp-2);
    text-align: center;
    line-height: 1.35;
  }
}

.icon-btn {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--r-pill);
  color: var(--text-2);
  transition: background-color var(--d-micro) var(--e-std), color var(--d-micro) var(--e-std);
}
.icon-btn:hover { background: rgba(245,243,239,.08); color: var(--text); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--strong);
  padding-bottom: var(--sp-1);
  transition: color var(--d-micro) var(--e-std), border-color var(--d-micro) var(--e-std);
}
.link-arrow svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5;
  transition: transform var(--d-micro) var(--e-std);
}
.link-arrow:hover { color: var(--signal-lite); border-color: var(--signal-lite); }
.link-arrow:hover svg { transform: translateX(4px); }


/* ── 5 · NAVBAR ─────────────────────────────────────────────────────────── */

.navbar {
  position: fixed; inset: 0 0 auto; z-index: 100;
  transition: background-color var(--d-std) var(--e-std), border-color var(--d-std) var(--e-std);
  border-bottom: 1px solid transparent;
}
/* El navbar es siempre Carbón, también cuando flota sobre una sección Papel:
   con el vidrio al 62% la sección clara se filtraba y el bar quedaba gris
   turbio, con el logo ilegible. La opacidad alta mantiene la pieza estable a
   lo largo de todo el scroll. */
.navbar--scrolled {
  background: rgba(20, 19, 15, .94);
  border-bottom-color: rgba(227, 222, 212, .13);
}
@supports (backdrop-filter: blur(12px)) {
  .navbar--scrolled {
    background: rgba(20, 19, 15, .86);
    backdrop-filter: blur(16px) saturate(1.4);
  }
}

/* El navbar nunca hereda los tokens de la sección que tiene debajo. */
.navbar, .navbar--scrolled {
  --text:   #F5F3EF;
  --text-2: #C5C0B6;
  --text-3: #A8A298;
  --strong: rgba(227, 222, 212, .28);
  color: var(--text);
}

.navbar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  width: 100%; max-width: calc(var(--container) + var(--margin) * 2);
  margin-inline: auto; padding: var(--sp-3) var(--margin);
}

.logo { display: inline-flex; align-items: baseline; gap: 2px; }
.logo__mark {
  font-weight: 900; font-size: 20px; letter-spacing: -.04em; font-style: italic;
}
.logo__word {
  font-weight: 400; font-size: 20px; letter-spacing: .02em; font-style: italic;
  color: var(--text-2);
}

.nav { display: flex; gap: var(--sp-5); }
.nav a {
  position: relative;
  font-size: 13px; font-weight: 500; color: var(--text-2);
  transition: color var(--d-micro) var(--e-std);
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--signal-lite);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-micro) var(--e-std);
}
.nav a:hover { color: var(--text); }
.nav a:hover::after { transform: scaleX(1); }

.navbar__actions { display: flex; align-items: center; gap: var(--sp-2); }

@media (max-width: 900px) {
  .nav { display: none; }
}
@media (max-width: 520px) {
  .navbar__actions .btn { display: none; }
}


/* ── 6 · HERO ───────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: min(94vh, 900px);
  display: grid; align-items: end;
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* Encuadre calibrado sobre esta foto: entra el auto completo de frente, el
     caballo arriba a la izquierda y el 14450 del showroom en el borde. Bajar
     más recorta las ruedas; subir más decapita el caballo. */
  object-position: 50% 58%;
  /* Grading suave. Esta foto ya viene bien expuesta, así que sólo se baja un
     punto la saturación y se apoya el contraste; el oscurecido lo hace el
     scrim, no un brightness global que apagaría el auto. */
  filter: saturate(.88) contrast(1.05);
  /* Sobre-escala mínima: sólo la holgura que necesita el parallax. Más zoom
     recortaba la composición sin aportar nada. */
  transform: scale(1.03);
  will-change: transform;
}

/* Capa oscura que garantiza contraste AA del texto sobre la foto.
   Es funcional, no decorativa: el Brandbook prohíbe los degradados de adorno,
   no los scrims de legibilidad.

   Tres capas: caída vertical para el navbar y el pie, densidad del lado del
   panel, y una viñeta suave del lado opuesto que apaga la cartelería del local
   sin apagar el auto. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(20,19,15,.70) 0%, rgba(20,19,15,.16) 32%, rgba(20,19,15,.88) 100%),
    linear-gradient(90deg, rgba(20,19,15,.80) 0%, rgba(20,19,15,.10) 62%);
}

/* ── Variante: panel a la derecha ──────────────────────────────────────────
   La foto manda. Con un ¾ cuyo frente cae a la izquierda —grille, estrella y
   chapa ICI—, el panel a la izquierda tapaba justo lo que vende. Cambiar de
   lado es agregar o sacar esta clase en el <section class="hero">. */
.hero--panel-right .hero__panel { margin-left: auto; }

.hero--panel-right .hero__scrim {
  background:
    linear-gradient(180deg, rgba(20,19,15,.66) 0%, rgba(20,19,15,.14) 30%, rgba(20,19,15,.30) 72%, rgba(20,19,15,.88) 100%),
    linear-gradient(270deg, rgba(20,19,15,.82) 0%, rgba(20,19,15,.06) 58%),
    linear-gradient(90deg, rgba(20,19,15,.52) 0%, rgba(20,19,15,.12) 12%, rgba(20,19,15,0) 22%);
}

.hero--panel-right .hero__scroll { right: auto; left: var(--margin); }

.hero__content {
  width: 100%; max-width: calc(var(--container) + var(--margin) * 2);
  margin-inline: auto; padding: var(--sp-8) var(--margin);
}

/* Panel de vidrio: resuelve texto legible sobre foto compleja sin cortar la
   imagen. Tiene una razón, no está de moda. */
.hero__panel {
  max-width: 620px;
  padding: var(--sp-6);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  background: var(--glass-solid);
  box-shadow: var(--shadow-3);
}
@supports (backdrop-filter: blur(12px)) {
  .hero__panel { background: var(--glass); backdrop-filter: blur(16px) saturate(1.3); }
}

.hero__title {
  margin: var(--sp-4) 0 var(--sp-4);
  font-size: clamp(2.6rem, 6.4vw, 4.25rem);
  font-weight: 900; line-height: 1.02; letter-spacing: -.035em;
}
.hero__title em {
  font-family: var(--font-serif);
  font-style: italic; font-weight: 300;
  letter-spacing: -.02em;
  color: var(--text-2);
}

.hero__lede {
  max-width: 46ch;
  font-family: var(--font-serif);
  font-size: 1.0625rem; line-height: 1.7; color: var(--text-2);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

.hero__scroll {
  position: absolute; right: var(--margin); bottom: var(--sp-6);
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-3);
}
.hero__scroll svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5;
  animation: nudge 2.4s var(--e-std) infinite;
}
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .hero__scroll svg { animation: none; } }

/* En mobile el hero se apila: la foto ocupa el ancho completo arriba y el panel
   de datos baja debajo, sobre Carbón sólido.
   Superponer texto y foto en 390px obligaba a un scrim tan denso que el auto
   —el héroe de la composición— dejaba de verse. Es la adaptación que ya define
   Fase 04 para esta pantalla. */
@media (max-width: 640px) {
  .hero {
    --media-h: 62vh;
    display: block;
    min-height: auto;
  }

  .hero__media {
    position: relative;
    height: var(--media-h);
    min-height: 300px;
  }
  .hero__media img { object-position: center 50%; filter: saturate(.9) contrast(1.04) brightness(.94); }

  /* El scrim cubre solo la foto y se vuelve vertical: garantiza contraste del
     navbar arriba y funde la imagen con el panel abajo.

     Se listan los dos selectores para empatar la especificidad de
     `.hero--panel-right .hero__scrim` (0,2,0). Con `.hero__scrim` solo (0,1,0)
     ganaba la regla de desktop y en teléfono quedaba el degradado lateral, que
     acá no tiene sentido porque el panel ya no está al costado. */
  .hero__scrim,
  .hero--panel-right .hero__scrim {
    height: var(--media-h);
    min-height: 300px;
    bottom: auto;
    background: linear-gradient(180deg,
      rgba(20,19,15,.78) 0%,
      rgba(20,19,15,.10) 34%,
      rgba(20,19,15,.55) 82%,
      var(--carbon) 100%);
  }

  .hero__content { padding: var(--sp-5) var(--margin) var(--sp-7); }

  /* Sin vidrio: acá el panel ya está sobre Carbón, el blur no aporta nada y
     cuesta scroll en gama baja. */
  .hero__panel {
    max-width: none;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  .hero__scroll { display: none; }
  .hero__actions .btn { flex: 1 1 100%; }
}

/* Entrada del panel: blur-in, 320ms. */
[data-reveal='blur'] {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(16px);
}
[data-reveal='blur'].is-in {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition:
    opacity   var(--d-enter) var(--e-enter),
    filter    var(--d-enter) var(--e-enter),
    transform var(--d-enter) var(--e-enter);
}


/* ── 7 · SELLOS DE CERTEZA ──────────────────────────────────────────────── */

.certainty { padding: var(--sp-8) 0; border-bottom: 1px solid var(--hair); }

.certainty__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  overflow: hidden;
}

.proof { padding: var(--sp-6) var(--sp-5); background: var(--carbon); }

/* Sin cifras: las que había —240 puntos y el plazo de garantía— no estaban
   confirmadas. El peso visual lo lleva ahora el mensaje, y Señal queda
   reducida al check: aparece sólo para confirmar, que es su única función
   según el Brandbook. */
.proof__icon {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: rgba(31, 58, 214, .16);
  color: var(--signal-lite);
}
/* Trazo 1.5px, grid 24, geométricos: cada ícono comunica su función en vez de
   repetir tres veces el mismo check (Brandbook §07). */
.proof__icon svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

.proof__title {
  margin-top: var(--sp-4);
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em;
}
.proof__text {
  margin-top: var(--sp-2);
  font-family: var(--font-serif);
  font-size: .9375rem; line-height: 1.65; color: var(--text-2);
}

@media (max-width: 860px) { .certainty__grid { grid-template-columns: 1fr; } }


/* ── 8 · CARDS DE VEHÍCULO ──────────────────────────────────────────────── */

.featured { padding: var(--sp-8) 0; }

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}
@media (max-width: 1024px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .cards { grid-template-columns: 1fr; } }

.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  overflow: hidden;
  transition:
    transform    var(--d-std) var(--e-std),
    box-shadow   var(--d-std) var(--e-std),
    border-color var(--d-std) var(--e-std);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--strong);
}

.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.86) contrast(1.04);
  transition: transform var(--d-std) var(--e-std);
}
.card:hover .card__media img { transform: scale(1.03); }

/* Badge Certificado — la confianza viaja con cada resultado. */
.badge {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px var(--sp-2) 5px 6px;
  border-radius: var(--r-pill);
  background: var(--signal); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.badge svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.5; }

.card__photos {
  position: absolute; right: var(--sp-3); bottom: var(--sp-3);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--glass-solid);
  font-family: var(--font-mono); font-size: 11px; color: var(--text-2);
}
@supports (backdrop-filter: blur(8px)) {
  .card__photos { background: var(--glass); backdrop-filter: blur(8px); }
}
.card__photos svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.fav {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--r-pill);
  background: var(--glass-solid); color: var(--text-2);
  transition: color var(--d-micro) var(--e-std), transform var(--d-micro) var(--e-std);
}
@supports (backdrop-filter: blur(8px)) {
  .fav { background: var(--glass); backdrop-filter: blur(8px); }
}
.fav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.fav:hover { color: var(--text); }
.fav[aria-pressed='true'] { color: var(--signal-lite); }
.fav[aria-pressed='true'] svg { fill: currentColor; }
.fav.is-pop { animation: pop var(--d-std) var(--e-enter); }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }

.card__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-4); }

.card__title {
  font-size: 1rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
  /* Máximo dos líneas: mantiene la grilla pareja sin cortar marcas largas. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__specs {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-family: var(--font-mono); font-size: 12px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.card__specs li { display: inline-flex; align-items: center; }
.card__specs li + li::before {
  content: '·'; margin-right: var(--sp-2); color: var(--text-muted);
}

.card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-top: auto; padding-top: var(--sp-4);
  border-top: 1px solid var(--hair);
}

/* Precio único, dicho una sola vez, en mono.
   word-spacing negativo porque el espacio de la mono es de ancho fijo y dejaba
   "USD    71.000" con un hueco desproporcionado. */
.card__price {
  font-family: var(--font-mono);
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  word-spacing: -.32em;
}

.card__cta {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
  transition: color var(--d-micro) var(--e-std);
}
.card:hover .card__cta { color: var(--signal-lite); }

/* Toda la card es clickeable, pero el favorito queda por encima. */
.card__link { position: absolute; inset: 0; z-index: 1; }
.fav, .card__photos { z-index: 2; }

.featured__foot { margin-top: var(--sp-7); text-align: center; }

/* Entrada escalonada de las cards. */
.card {
  opacity: 0;
  transform: translateY(18px);
}
.card.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity   var(--d-std) var(--e-enter) var(--delay, 0ms),
    transform var(--d-std) var(--e-enter) var(--delay, 0ms);
}
.card.is-in:hover { transition: transform var(--d-std) var(--e-std), box-shadow var(--d-std) var(--e-std), border-color var(--d-std) var(--e-std); }


/* ── 9 · CÓMO FUNCIONA ──────────────────────────────────────────────────── */

/* Banda sobre Carbón elevado, no sobre Papel: el corte a blanco rompía la
   continuidad cinematográfica de la página. La separación ahora la dan la
   elevación de un paso y los hairlines, no un cambio de base. */
.how {
  padding: var(--sp-8) 0;
  background: var(--surface);
  border-block: 1px solid var(--hair);
}

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

.step { padding-top: var(--sp-4); border-top: 1px solid var(--strong); }
.step__num {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; color: var(--signal-lite);
}
.step__title {
  margin-top: var(--sp-4);
  font-size: 1.25rem; font-weight: 700; line-height: 1.25; letter-spacing: -.02em;
}
.step__text {
  margin-top: var(--sp-3);
  font-family: var(--font-serif);
  font-size: 1rem; line-height: 1.7; color: var(--text-2);
}


/* ── 10 · CTA VENDER ────────────────────────────────────────────────────── */

.sell { padding: var(--sp-8) 0; }

.sell__panel {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-7);
  align-items: center;
  padding: var(--sp-7) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
}
@media (max-width: 860px) {
  .sell__panel { grid-template-columns: 1fr; gap: var(--sp-5); padding: var(--sp-6) var(--sp-4); }
}

.sell__title {
  margin: var(--sp-3) 0 var(--sp-3);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
}
.sell__text {
  max-width: 52ch;
  font-family: var(--font-serif); font-size: 1rem; line-height: 1.7; color: var(--text-2);
}
.sell__action { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.sell__note { font-size: 12px; color: var(--text-muted); }


/* ── 11 · MANIFIESTO ────────────────────────────────────────────────────── */

.manifesto {
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--hair);
  text-align: center;
}
.manifesto__quote {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  font-weight: 300; font-style: italic; line-height: 1.35; letter-spacing: -.02em;
  color: var(--text);
}
.manifesto__by {
  margin-top: var(--sp-5);
  font-size: 11px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: var(--text-muted);
}


/* ── 12 · FOOTER ────────────────────────────────────────────────────────── */

.footer { padding: var(--sp-8) 0 var(--sp-5); border-top: 1px solid var(--hair); }

.footer__top {
  display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-7);
  padding-bottom: var(--sp-7);
}
@media (max-width: 860px) { .footer__top { grid-template-columns: 1fr; gap: var(--sp-6); } }

.footer__tagline {
  margin-top: var(--sp-3); max-width: 26ch;
  font-family: var(--font-serif); font-style: italic;
  font-size: 1rem; color: var(--text-2);
}

.footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 560px) { .footer__nav { grid-template-columns: 1fr; } }

.footer__heading {
  margin-bottom: var(--sp-3);
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted);
}
.footer__nav li + li { margin-top: var(--sp-2); }
.footer__nav a {
  font-size: .9375rem; color: var(--text-2);
  transition: color var(--d-micro) var(--e-std);
}
.footer__nav a:hover { color: var(--text); }

.footer__address {
  font-style: normal; font-size: .9375rem; line-height: 1.7; color: var(--text-2);
}

.footer__bottom {
  display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hair);
  font-size: 12px; color: var(--text-muted);
}


/* ── 13 · CATÁLOGO ──────────────────────────────────────────────────────── */

.catalog { padding: calc(var(--sp-8) + 40px) 0 var(--sp-8); }

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.breadcrumb li + li::before {
  content: '›'; margin-right: var(--sp-2); color: var(--text-muted);
}
.breadcrumb { font-size: 12px; color: var(--text-muted); }
.breadcrumb a { color: var(--text-3); }
.breadcrumb a:hover { color: var(--text); }

.catalog__head { margin-bottom: var(--sp-6); }
.catalog__title {
  margin-top: var(--sp-3);
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.03em;
}
.catalog__lede {
  max-width: 54ch; margin-top: var(--sp-3);
  font-family: var(--font-serif); font-size: 1rem; line-height: 1.7; color: var(--text-2);
}

/* ── Barra de control ───────────────────────────────────────────────── */

.toolbar {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: space-between;
  padding-bottom: var(--sp-4);
}

.toolbar__search {
  position: relative; flex: 1 1 320px; min-width: 0;
}
.toolbar__search svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  fill: none; stroke: var(--text-muted); stroke-width: 1.5;
  pointer-events: none;
}
.toolbar__search input {
  width: 100%; min-height: 48px;
  padding: 0 var(--sp-4) 0 44px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-def);
  color: var(--text);
  transition: border-color var(--d-micro) var(--e-std);
}
.toolbar__search input::placeholder { color: var(--text-muted); }
.toolbar__search input:focus { border-color: var(--accent); outline-offset: 1px; }
.toolbar__search input::-webkit-search-cancel-button { filter: invert(.6); }

.toolbar__right { display: flex; gap: var(--sp-2); align-items: center; }

.toolbar__filters svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5;
}
.toolbar__count {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--accent-solid); color: #fff;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
}

.select { position: relative; }
.select select {
  appearance: none;
  min-height: 48px; padding: 0 40px 0 var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-def);
  color: var(--text); font-size: 13px;
  cursor: pointer;
}
.select svg {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  fill: none; stroke: var(--text-3); stroke-width: 1.5;
  pointer-events: none;
}

/* ── Chips ──────────────────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-bottom: var(--sp-4); }

.chip {
  min-height: 38px; padding: 0 var(--sp-4);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  background: transparent; color: var(--text-2);
  font-size: 13px; font-weight: 500;
  transition:
    background-color var(--d-micro) var(--e-std),
    border-color     var(--d-micro) var(--e-std),
    color            var(--d-micro) var(--e-std);
}
.chip:hover { border-color: var(--strong); color: var(--text); }

/* Chip activo en Señal: es un estado confirmado, no decoración. */
.chip[aria-pressed='true'] {
  background: var(--accent-weak);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Filtros aplicados ──────────────────────────────────────────────── */

.applied {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center;
  padding: var(--sp-3) 0 var(--sp-4);
  border-top: 1px solid var(--hair);
}
.applied__label {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted);
}
.applied__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.tagx {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 0 var(--sp-2) 0 var(--sp-3);
  border: 1px solid var(--strong);
  border-radius: var(--r-pill);
  font-size: 12px; color: var(--text-2);
  transition: border-color var(--d-micro) var(--e-std), color var(--d-micro) var(--e-std);
}
.tagx svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tagx:hover { border-color: var(--state-error); color: var(--state-error); }

.applied__clear {
  font-size: 12px; color: var(--text-3);
  border-bottom: 1px solid var(--hair);
  transition: color var(--d-micro) var(--e-std);
}
.applied__clear:hover { color: var(--text); }

/* ── Resultados ─────────────────────────────────────────────────────── */

.results {
  padding: var(--sp-3) 0 var(--sp-4);
  font-family: var(--font-mono); font-size: 13px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* Cross-fade al aplicar un filtro: nunca un salto brusco. */
.cards.is-swapping { opacity: 0; transition: opacity var(--d-micro) var(--e-std); }
.cards { transition: opacity var(--d-std) var(--e-std); }

/* ── Estado vacío ───────────────────────────────────────────────────── */

.empty {
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  background: var(--surface);
}
.empty__title { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.empty__text {
  max-width: 44ch; margin: var(--sp-3) auto var(--sp-5);
  font-family: var(--font-serif); color: var(--text-2);
}

/* ── Drawer de filtros ──────────────────────────────────────────────── */

.drawer-backdrop {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(10, 9, 7, .62);
  opacity: 0;
  transition: opacity var(--d-enter) var(--e-std);
}
.drawer-backdrop.is-open { opacity: 1; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 160;
  display: flex; flex-direction: column;
  width: min(420px, 100vw);
  background: var(--surface);
  border-left: 1px solid var(--hair);
  box-shadow: var(--shadow-3);
  transform: translateX(100%);
  transition: transform var(--d-enter) var(--e-enter);
}
.drawer.is-open { transform: none; }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--hair);
}
.drawer__title { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; }

.drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-4); }

.fgroup { border: 0; padding: 0; margin: 0 0 var(--sp-5); }
.fgroup__title {
  padding: 0 0 var(--sp-3);
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted);
}
.fgroup__opts { display: flex; flex-direction: column; gap: 2px; }

.opt {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 44px; padding: 0 var(--sp-2);
  border-radius: var(--r-def);
  cursor: pointer;
  transition: background-color var(--d-micro) var(--e-std);
}
.opt:hover { background: rgba(245,243,239,.05); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }

.opt__box {
  display: grid; place-items: center;
  width: 20px; height: 20px; flex: 0 0 20px;
  border: 1px solid var(--strong);
  border-radius: var(--r-def);
  color: transparent;
  transition:
    background-color var(--d-micro) var(--e-std),
    border-color     var(--d-micro) var(--e-std),
    color            var(--d-micro) var(--e-std);
}
.opt__box svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.opt input:checked + .opt__box {
  background: var(--accent-solid); border-color: var(--accent-solid); color: #fff;
}
.opt input:focus-visible + .opt__box {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.opt__label { flex: 1; font-size: .9375rem; color: var(--text-2); }
.opt input:checked ~ .opt__label { color: var(--text); }
.opt__count {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.drawer__foot {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-2);
  padding: var(--sp-4);
  border-top: 1px solid var(--hair);
}

/* Navbar sólido para páginas internas: no hay foto debajo. */
.navbar--solid {
  position: sticky;
  background: var(--carbon);
  border-bottom-color: var(--hair);
}

@media (max-width: 640px) {
  .catalog { padding-top: var(--sp-6); }
  .toolbar__right { width: 100%; }
  .toolbar__right .select { flex: 1; }
  .toolbar__right .select select { width: 100%; }
  .drawer__foot { grid-template-columns: 1fr; }
}


/* ── 14 · FICHA DEL VEHÍCULO ────────────────────────────────────────────── */

#ficha { padding: var(--sp-6) 0 var(--sp-8); }
.ficha__crumb { margin-bottom: var(--sp-5); }

/* Galería a la izquierda, panel de compra sticky a la derecha.
   El grid contiene SOLO el producto. Los similares quedan fuera: el bloque
   contenedor de un `position: sticky` es el contenedor grid entero —no su
   área—, así que cualquier fila extra acá dentro sería territorio por el que
   el panel podría viajar y taparla. */
.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
  grid-template-areas: 'gallery buy' 'detail buy';
  gap: var(--sp-6) var(--sp-6);
  align-items: start;
}
.gallery { grid-area: gallery; }
.buy     { grid-area: buy; }
.detail  { grid-area: detail; }

.similar { margin-top: var(--sp-8); }

@media (max-width: 960px) {
  .ficha {
    /* minmax(0, 1fr) y no `1fr` a secas: un `fr` tiene mínimo automático
       `auto`, así que si algún contenido no se deja achicar —acá era el botón
       "Consultar por WhatsApp"— la columna crece más que el contenedor y
       arrastra toda la página. En el teléfono eso deja el sitio corrible de
       costado y se come los gestos horizontales sobre la galería. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'gallery' 'buy' 'detail';
  }
}

/* ── Galería ────────────────────────────────────────────────────────── */

.gallery__main {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  background: var(--surface);
}
.gallery__main img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) contrast(1.03);
  /* Cross-fade al cambiar de foto, nunca un salto. */
  animation: fadeIn var(--d-std) var(--e-std);
  /* Clic o doble clic sobre la foto la amplía: el cursor lo anticipa. */
  cursor: zoom-in;
}
@keyframes fadeIn { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gallery__main img { animation: none; } }

/* Superficie de gesto: el navegador conserva el scroll vertical y el
   desplazamiento lateral queda para pasar de foto. */
.swipeable { touch-action: pan-y; }

.gallery__badge { top: var(--sp-4); left: var(--sp-4); }

.gallery__zoom {
  position: absolute; right: var(--sp-4); bottom: var(--sp-4);
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--r-pill);
  background: var(--glass-solid); color: var(--text);
  transition: transform var(--d-micro) var(--e-std);
}
@supports (backdrop-filter: blur(8px)) {
  .gallery__zoom { background: var(--glass); backdrop-filter: blur(8px); }
}
.gallery__zoom:hover { transform: scale(1.06); }
.gallery__zoom svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ── Flechas sobre la foto ────────────────────────────────────────────
     Para pasar de foto sin bajar a las miniaturas. En pantalla táctil se
     ocultan: ahí manda el gesto y las flechas solo tapan la foto. */

.gallery__arrow {
  position: absolute; top: 50%; translate: 0 -50%;
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--r-pill);
  background: var(--glass-solid); color: var(--text);
  opacity: 0;
  transition: opacity var(--d-micro) var(--e-std),
              transform var(--d-micro) var(--e-std);
}
@supports (backdrop-filter: blur(8px)) {
  .gallery__arrow { background: var(--glass); backdrop-filter: blur(8px); }
}
.gallery__arrow--prev { left: var(--sp-3); }
.gallery__arrow--next { right: var(--sp-3); }
.gallery__arrow svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* Aparecen al acercarse a la foto, y siempre que tengan el foco del teclado:
   una flecha invisible pero enfocable es una trampa. */
.gallery__main:hover .gallery__arrow,
.gallery__arrow:focus-visible { opacity: 1; }
.gallery__arrow:hover { transform: scale(1.06); }

@media (hover: none) {
  .gallery__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery__arrow { transition: none; }
}

.gallery__counter {
  position: absolute; left: var(--sp-4); bottom: var(--sp-4);
  padding: 4px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--glass-solid);
  font-family: var(--font-mono); font-size: 11px; color: var(--text-2);
}
@supports (backdrop-filter: blur(8px)) {
  .gallery__counter { background: var(--glass); backdrop-filter: blur(8px); }
}

.gallery__thumbs {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.thumb {
  aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--hair); border-radius: var(--r-def);
  opacity: .55;
  transition: opacity var(--d-micro) var(--e-std), border-color var(--d-micro) var(--e-std);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { opacity: .85; }

/* La miniatura activa se marca en Señal: es el estado confirmado. */
.thumb[aria-current='true'] { opacity: 1; border-color: var(--accent); }

/* ── Panel de compra ────────────────────────────────────────────────── */

.buy {
  position: sticky; top: 88px;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
}
@media (max-width: 960px) { .buy { position: static; } }

.buy__title {
  margin: var(--sp-3) 0 var(--sp-4);
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  font-weight: 800; line-height: 1.15; letter-spacing: -.025em;
}

/* Precio único, en mono, dicho una sola vez. */
.buy__price {
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 3.4vw, 2.25rem); font-weight: 600;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  word-spacing: -.3em;
}
.buy__pricenote {
  margin-top: var(--sp-1);
  font-size: 12px; color: var(--text-muted);
}

.buy__specs {
  margin: var(--sp-5) 0;
  border-top: 1px solid var(--hair);
}
.buy__specs li {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--hair);
  transition: background-color var(--d-micro) var(--e-std);
}
.buy__specs li:hover { background: rgba(245,243,239,.03); }
.buy__k { font-size: 13px; color: var(--text-muted); }
.buy__v {
  font-family: var(--font-mono); font-size: 13px; color: var(--text);
  font-variant-numeric: tabular-nums;
}

.buy__actions { display: grid; gap: var(--sp-2); }

/* Los dos canales directos comparten el tratamiento de ícono. Un SVG sin
   width/height explícito se expande al espacio disponible, así que la regla
   tiene que cubrir a los dos botones, no solo al de WhatsApp. */
.buy__wsp svg,
.buy__tel svg {
  width: 18px; height: 18px; flex: 0 0 18px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
}
.buy__note {
  margin-top: var(--sp-3);
  font-size: 12px; color: var(--text-muted); text-align: center;
}

/* ── Tabs ───────────────────────────────────────────────────────────── */

.detail { margin-top: var(--sp-6); }

.tabs {
  display: flex; gap: var(--sp-4);
  border-bottom: 1px solid var(--hair);
}
.tab {
  position: relative;
  padding: 0 0 var(--sp-3);
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  transition: color var(--d-micro) var(--e-std);
}
.tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-micro) var(--e-std);
}
.tab:hover { color: var(--text-2); }
.tab[aria-selected='true'] { color: var(--text); }
.tab[aria-selected='true']::after { transform: scaleX(1); }

.panel {
  padding-top: var(--sp-5);
  animation: panelIn var(--d-std) var(--e-enter);
}
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .panel { animation: none; } }

.prose {
  max-width: 66ch;
  font-family: var(--font-serif); font-size: 1rem; line-height: 1.75; color: var(--text-2);
}
.prose + .prose { margin-top: var(--sp-3); }

.specs { max-width: 640px; }
.specs__row {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--hair);
}
.specs__row dt { font-size: 13px; color: var(--text-muted); }
.specs__row dd {
  margin: 0;
  font-family: var(--font-mono); font-size: 13px; color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ── Barra fija de acción · mobile ──────────────────────────────────── */

.floatcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: none;
  align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--margin);
  background: var(--glass-solid);
  border-top: 1px solid var(--hair);
}
@supports (backdrop-filter: blur(12px)) {
  .floatcta { background: var(--glass); backdrop-filter: blur(14px); }
}
@media (max-width: 960px) { .floatcta:not([hidden]) { display: flex; } }

.floatcta__price {
  font-family: var(--font-mono); font-size: 1.0625rem; font-weight: 600;
  word-spacing: -.3em;
}
.floatcta__label { font-size: 11px; color: var(--text-muted); }

/* ── Visor de fotos ampliadas ─────────────────────────────────────────
     Uno solo para venta y alquiler. El markup lo crea lightbox.js. */

.lb {
  position: fixed; inset: 0; z-index: 200;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3); padding: var(--sp-4);
  /* Opaco a propósito: es un visor, no un velo. Con fondo traslúcido la
     página se colaba justo detrás de la foto y del pie. Al ser opaco
     también tapa el WhatsApp flotante y la barra de precio, sin reglas
     extra: los dos quedan por debajo en el orden de apilamiento. */
  background: var(--carbon-deep);
  opacity: 0;
  transition: opacity var(--d-std) var(--e-std);
}
.lb.is-open { opacity: 1; }

.lb__stage {
  position: relative;        /* caja de referencia de la foto */
  grid-column: 2; grid-row: 1;
  width: 100%; height: 100%;
  min-height: 0;             /* sin esto la fila del grid crece con la imagen */
  /* El navegador se queda con el scroll vertical y nos deja el gesto
     horizontal para pasar de foto. */
  touch-action: pan-y;
}
/* Absoluta y al 100%: la foto ocupa todo el espacio disponible sin deformarse.
   Con `max-width` sola, una foto de origen chico quedaba diminuta en medio de
   una pantalla negra. */
.lb__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: var(--r-def);
}

/* La foto entra desde el lado del que se viene: el gesto se siente físico. */
.lb__img.is-from-right { animation: lbFromRight var(--d-std) var(--e-std); }
.lb__img.is-from-left  { animation: lbFromLeft  var(--d-std) var(--e-std); }
@keyframes lbFromRight { from { opacity: 0; transform: translateX(24px); } }
@keyframes lbFromLeft  { from { opacity: 0; transform: translateX(-24px); } }

.lb__close {
  position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 1;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  background: rgba(245,243,239,.10); color: var(--paper);
}
.lb__nav {
  grid-row: 1;
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: var(--r-pill);
  background: rgba(245,243,239,.10); color: var(--paper);
  transition: background-color var(--d-micro) var(--e-std);
}
.lb__nav--prev { grid-column: 1; }
.lb__nav--next { grid-column: 3; }
.lb__close:hover, .lb__nav:hover { background: rgba(245,243,239,.20); }
.lb__close svg, .lb__nav svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

.lb__caption {
  grid-column: 1 / -1; grid-row: 2;
  display: flex; justify-content: center; align-items: baseline; gap: var(--sp-3);
  padding-top: var(--sp-3);
  color: var(--paper); font-size: 13px;
}
.lb__count { font-family: var(--font-mono); font-size: 11px; opacity: .6; }

/* En el teléfono el pulgar no llega a las flechas laterales: el gesto es la
   forma natural de pasar, y las flechas bajan junto al pie. */
@media (max-width: 640px) {
  .lb { grid-template-columns: 1fr; padding: var(--sp-3); }
  .lb__stage { grid-column: 1; }
  .lb__nav {
    grid-row: 2; width: 44px; height: 44px;
    justify-self: center; align-self: center;
  }
  .lb__nav--prev, .lb__nav--next { grid-column: 1; }
  .lb__caption {
    grid-column: 1; grid-row: 2;
    justify-content: center; flex-direction: column; align-items: center; gap: 2px;
  }
  .lb__nav--prev { justify-self: start; }
  .lb__nav--next { justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  .lb, .lb__img { transition: none; animation: none; }
}

/* ── Modal ──────────────────────────────────────────────────────────── */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 170;
  background: rgba(10, 9, 7, .66);
  opacity: 0;
  transition: opacity var(--d-enter) var(--e-std);
}
.modal-backdrop.is-open { opacity: 1; }

.modal {
  position: fixed; z-index: 180;
  top: 50%; left: 50%;
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-3);
  opacity: 0;
  transform: translate(-50%, -46%) scale(.98);
  transition:
    opacity   var(--d-enter) var(--e-enter),
    transform var(--d-enter) var(--e-enter);
}
.modal.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--hair);
}
.modal__title { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; }
.modal__body { padding: var(--sp-4); }
.modal__lede {
  padding-bottom: var(--sp-4);
  font-family: var(--font-mono); font-size: 13px; color: var(--text-2);
}
.modal__fine {
  margin: var(--sp-3) 0 var(--sp-4);
  font-size: 12px; line-height: 1.6; color: var(--text-muted);
}
.modal__body .btn { width: 100%; }

.field { margin-bottom: var(--sp-4); }
.field label {
  display: block; margin-bottom: var(--sp-2);
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3);
}
.field input {
  width: 100%; min-height: 48px; padding: 0 var(--sp-3);
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: var(--r-def);
  color: var(--text);
  transition: border-color var(--d-micro) var(--e-std);
}
.field input:focus { border-color: var(--accent); }
.field input[aria-invalid='true'] { border-color: var(--state-error); }
.field__error {
  margin-top: var(--sp-2);
  font-size: 12px; color: var(--state-error);
}

/* ── Toast ──────────────────────────────────────────────────────────── */

.toast {
  position: fixed; z-index: 210;
  left: 50%; bottom: var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--strong);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-3);
  font-size: 13px;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition:
    opacity   var(--d-std) var(--e-enter),
    transform var(--d-std) var(--e-enter);
}
.toast.is-in { opacity: 1; transform: translate(-50%, 0); }

/* El check de confirmación es el único momento en que el acento se mueve. */
.toast__icon {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: var(--r-pill);
  background: var(--accent-solid); color: #fff;
}
.toast__icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.5; }

@media (max-width: 640px) {
  .gallery__thumbs { grid-template-columns: repeat(4, 1fr); }
  .tabs { gap: var(--sp-3); overflow-x: auto; }
  #ficha { padding-bottom: calc(var(--sp-8) + 72px); }
}


/* ── 15 · VENDÉ TU AUTO ─────────────────────────────────────────────────── */

.sell-page { padding: var(--sp-6) 0 var(--sp-8); }

.sell-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 520px);
  gap: var(--sp-7);
  align-items: start;
}
@media (max-width: 960px) { .sell-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* ── Promesa ────────────────────────────────────────────────────────── */

.sell-intro { position: sticky; top: 104px; }
@media (max-width: 960px) { .sell-intro { position: static; } }

.sell-intro__title {
  margin: var(--sp-3) 0 var(--sp-4);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 900; line-height: 1.03; letter-spacing: -.035em;
}
.sell-intro__lede {
  max-width: 46ch;
  font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.7;
  color: var(--text-2);
}

.sell-intro__points { margin-top: var(--sp-6); display: grid; gap: var(--sp-4); }
.sell-intro__points li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.sell-intro__points h2 { font-size: .9375rem; font-weight: 700; letter-spacing: -.01em; }
.sell-intro__points p {
  margin-top: 2px;
  font-family: var(--font-serif); font-size: .9375rem; line-height: 1.6;
  color: var(--text-2);
}
.sell-intro__ico {
  display: grid; place-items: center; flex: 0 0 26px;
  width: 26px; height: 26px; border-radius: var(--r-pill);
  background: rgba(31, 58, 214, .16); color: var(--accent);
}
.sell-intro__ico svg {
  width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Stepper ────────────────────────────────────────────────────────── */

.stepper {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
}

.stepper__head { margin-bottom: var(--sp-5); }

.stepper__dots { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.dot {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
}
.dot span, .dot svg {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: var(--r-pill);
  border: 1px solid var(--strong);
  font-family: var(--font-mono); font-size: 11px;
}
.dot svg { fill: none; stroke: currentColor; stroke-width: 2.5; padding: 4px; }
.dot em { font-style: normal; }

.dot--now { color: var(--text); }
.dot--now span { border-color: var(--accent); color: var(--accent); }

/* Paso completado: check en Señal — el acento marca lo confirmado. */
.dot--done { color: var(--text-3); }
.dot--done svg { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; }

.stepper__bar {
  height: 3px; border-radius: var(--r-pill);
  background: rgba(227, 222, 212, .10);
  overflow: hidden;
}
.stepper__bar span {
  display: block; height: 100%; width: 33%;
  background: var(--accent);
  transition: width var(--d-std) var(--e-enter);
}

/* ── Campos ─────────────────────────────────────────────────────────── */

.step-panel { border: 0; padding: 0; margin: 0; }
.step-panel__title {
  margin-bottom: var(--sp-5);
  font-size: 1.375rem; font-weight: 800; letter-spacing: -.025em;
  outline: none;
}

.field__hint {
  margin-top: var(--sp-2);
  font-size: 12px; color: var(--text-muted);
}

.select--block { display: block; }
.select--block select { width: 100%; }

.radios { border: 0; padding: 0; margin: 0 0 var(--sp-4); }
.radios legend {
  padding: 0 0 var(--sp-2);
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3);
}
.radio {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 44px; padding: 0 var(--sp-2);
  border-radius: var(--r-def);
  font-size: .9375rem; color: var(--text-2);
  cursor: pointer;
  transition: background-color var(--d-micro) var(--e-std), color var(--d-micro) var(--e-std);
}
.radio:hover { background: rgba(245,243,239,.05); }
.radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio__box {
  display: grid; place-items: center; flex: 0 0 18px;
  width: 18px; height: 18px; border-radius: var(--r-pill);
  border: 1px solid var(--strong);
  transition: border-color var(--d-micro) var(--e-std);
}
.radio__box::after {
  content: ''; width: 8px; height: 8px; border-radius: var(--r-pill);
  background: var(--accent);
  transform: scale(0);
  transition: transform var(--d-micro) var(--e-enter);
}
.radio input:checked + .radio__box { border-color: var(--accent); }
.radio input:checked + .radio__box::after { transform: scale(1); }
.radio input:checked ~ span { color: var(--text); }
.radio input:focus-visible + .radio__box { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Acciones ───────────────────────────────────────────────────────── */

.stepper__actions { display: flex; gap: var(--sp-2); }
.stepper__actions .btn { flex: 1; }
.stepper__actions .btn--ghost { flex: 0 0 auto; }

.stepper__save {
  margin-top: var(--sp-3);
  font-size: 11px; color: var(--text-muted); text-align: center;
}

/* ── Cierre ─────────────────────────────────────────────────────────── */

.sell-done { text-align: center; padding: var(--sp-4) 0; }
.sell-done__ico {
  display: grid; place-items: center; margin: 0 auto var(--sp-4);
  width: 48px; height: 48px; border-radius: var(--r-pill);
  background: var(--accent-solid); color: #fff;
}
.sell-done__ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.sell-done__title {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.025em;
  outline: none;
}
.sell-done__text {
  max-width: 42ch; margin: var(--sp-3) auto var(--sp-5);
  font-family: var(--font-serif); color: var(--text-2);
}
.sell-done .btn { width: 100%; }
.sell-done__again {
  margin-top: var(--sp-4);
  font-size: 12px; color: var(--text-3);
  border-bottom: 1px solid var(--hair);
}
.sell-done__again:hover { color: var(--text); }

@media (max-width: 640px) {
  .stepper { padding: var(--sp-4) var(--sp-3); }
  .dot em { display: none; }
  .stepper__actions { flex-direction: column-reverse; }
  .stepper__actions .btn { width: 100%; }
}


/* ── 16 · CONTACTO ──────────────────────────────────────────────────────── */

.contact-page { padding: var(--sp-6) 0 var(--sp-8); }

.contact-head { max-width: 56ch; margin-bottom: var(--sp-7); }
.contact-head__title {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 900; line-height: 1.03; letter-spacing: -.035em;
}
.contact-head__lede {
  margin-top: var(--sp-4);
  font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.7;
  color: var(--text-2);
}

/* ── Canales ────────────────────────────────────────────────────────── */

.channels { margin-bottom: var(--sp-8); }
.channels__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
@media (max-width: 860px) { .channels__grid { grid-template-columns: 1fr; } }

.channel {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 88px; padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  transition:
    transform    var(--d-micro) var(--e-std),
    border-color var(--d-micro) var(--e-std),
    box-shadow   var(--d-micro) var(--e-std);
}
.channel:hover {
  transform: translateY(-2px);
  border-color: var(--strong);
  box-shadow: var(--shadow-2);
}

.channel__ico {
  display: grid; place-items: center; flex: 0 0 40px;
  width: 40px; height: 40px; border-radius: var(--r-pill);
  background: rgba(31, 58, 214, .16); color: var(--accent);
}
.channel__ico svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

.channel__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.channel__title { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.channel__meta {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
}

.channel__go { color: var(--text-muted); transition: color var(--d-micro) var(--e-std), transform var(--d-micro) var(--e-std); }
.channel__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.channel:hover .channel__go { color: var(--accent); transform: translateX(3px); }

/* ── Formulario + showroom ──────────────────────────────────────────── */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 480px);
  gap: var(--sp-7);
  align-items: start;
}
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

.contact-form {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
}
.contact-form__title { font-size: 1.375rem; font-weight: 800; letter-spacing: -.025em; }
.contact-form__lede {
  margin: var(--sp-2) 0 var(--sp-5);
  font-size: .9375rem; color: var(--text-muted);
}
.contact-form .btn { width: 100%; }
.contact-form__fine {
  margin-top: var(--sp-3);
  font-size: 12px; color: var(--text-muted); text-align: center;
}

/* Vehículo de origen, cuando se llega desde una ficha. */
.contact-form__ctx {
  margin-bottom: var(--sp-4); padding: var(--sp-3);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-def);
  background: var(--bg);
  font-family: var(--font-mono); font-size: 12px; color: var(--text-2);
}

.field textarea {
  width: 100%; min-height: 120px; padding: var(--sp-3);
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: var(--r-def);
  color: var(--text);
  resize: vertical;
  font-family: inherit; font-size: 1rem; line-height: 1.6;
  transition: border-color var(--d-micro) var(--e-std);
}
.field textarea:focus { border-color: var(--accent); }
.field textarea[aria-invalid='true'] { border-color: var(--state-error); }

.contact-done { text-align: center; padding: var(--sp-4) 0; }
.contact-done .btn { width: 100%; }

/* ── Showroom ───────────────────────────────────────────────────────── */

.showroom {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
}
.showroom__title {
  margin-bottom: var(--sp-4);
  font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em;
}

.showroom__map {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: var(--r-def);
  background: var(--surface-2);
}
.showroom__map iframe {
  width: 100%; height: 100%; border: 0;
  /* El mapa de Google llega en tonos claros y rompe la base Carbón. Se lo
     baja de brillo y saturación para que entre en la temperatura de la
     página sin dejar de ser legible. */
  filter: grayscale(.5) invert(.92) hue-rotate(180deg) brightness(.92) contrast(.92);
}

.showroom__data {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-4) 0;
  font-style: normal;
}
.showroom__k {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); padding-top: 3px;
}
.showroom__v { font-size: .9375rem; line-height: 1.5; color: var(--text-2); }
.showroom__v a { border-bottom: 1px solid var(--hair); }
.showroom__v a:hover { color: var(--text); border-color: var(--accent); }

.showroom .btn { width: 100%; }

@media (max-width: 640px) {
  .contact-form, .showroom { padding: var(--sp-4) var(--sp-3); }
}


/* ── 17 · CANALES POR DISPOSITIVO ───────────────────────────────────────
   Google Maps en escritorio, Waze en el teléfono.

   El criterio es pointer:coarse y no un ancho de pantalla: lo que define
   cuál corresponde no es el tamaño de la ventana sino si el dispositivo se
   lleva en la mano. Una notebook con la ventana angosta no es alguien
   manejando hacia el showroom. */

.only-coarse { display: none; }

@media (pointer: coarse) {
  .only-fine   { display: none; }
  .only-coarse { display: inline-flex; }
}

/* Sin soporte para pointer (navegadores viejos): se muestra Google Maps,
   que funciona en cualquier lado. */

.showroom__go { display: grid; gap: var(--sp-2); }
.showroom__go .btn { width: 100%; }
.showroom__go svg {
  width: 18px; height: 18px; flex: 0 0 18px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}


/* ── 18 · NOSOTROS ──────────────────────────────────────────────────────── */

.about-hero { padding: var(--sp-6) 0 var(--sp-8); }
.about-hero__title {
  margin: var(--sp-4) 0 var(--sp-5);
  font-size: clamp(2.25rem, 5.4vw, 3.5rem);
  font-weight: 900; line-height: 1.04; letter-spacing: -.035em;
}
.about-hero__lede {
  font-family: var(--font-serif);
  font-size: 1.125rem; line-height: 1.75; color: var(--text-2);
}
.about-hero__lede + .about-hero__lede { margin-top: var(--sp-4); }
.about-hero__lede strong { color: var(--text); font-weight: 400; }

/* ── Pilares ────────────────────────────────────────────────────────── */

.about-how { padding: var(--sp-8) 0; background: var(--surface); border-block: 1px solid var(--hair); }

.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
@media (max-width: 1024px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .pillars { grid-template-columns: 1fr; } }

.pillar { padding-top: var(--sp-4); border-top: 1px solid var(--strong); }
.pillar__ico {
  display: grid; place-items: center;
  width: 32px; height: 32px; margin-bottom: var(--sp-4);
  border-radius: var(--r-pill);
  background: rgba(31, 58, 214, .16); color: var(--accent);
}
.pillar__ico svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.pillar h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; }
.pillar p {
  margin-top: var(--sp-2);
  font-family: var(--font-serif); font-size: .9375rem; line-height: 1.65;
  color: var(--text-2);
}

/* ── Servicios ──────────────────────────────────────────────────────── */

.about-services { padding: var(--sp-8) 0; }

.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
@media (max-width: 860px) { .services { grid-template-columns: 1fr; } }

.services li {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  transition: border-color var(--d-micro) var(--e-std);
}
.services li:hover { border-color: var(--strong); }
.services h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; }
.services p {
  flex: 1;
  font-family: var(--font-serif); font-size: .9375rem; line-height: 1.65;
  color: var(--text-2);
}
.services .link-arrow { align-self: flex-start; }

/* ── Showroom ───────────────────────────────────────────────────────── */

.about-where { padding: var(--sp-8) 0; border-top: 1px solid var(--hair); }
.about-where__title {
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  font-weight: 800; line-height: 1.15; letter-spacing: -.03em;
}
.about-where__text {
  margin-top: var(--sp-4);
  font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.75;
  color: var(--text-2);
}
.about-where__text strong { color: var(--text); font-weight: 400; }
.about-where__cta { margin-top: var(--sp-5); }

/* ── FAQ ────────────────────────────────────────────────────────────────
   <details> nativo: accesible y operable por teclado sin JavaScript. */

.faq { padding: var(--sp-8) 0; background: var(--surface); border-block: 1px solid var(--hair); }

.faq__list { border-top: 1px solid var(--hair); }

.faq__item { border-bottom: 1px solid var(--hair); }

.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) 0;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em;
  cursor: pointer;
  list-style: none;
  transition: color var(--d-micro) var(--e-std);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent); }
.faq__item summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-def);
}

/* Chevron propio: rota al abrir. */
.faq__item summary::after {
  content: ''; flex: 0 0 12px;
  width: 12px; height: 12px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--d-micro) var(--e-std), border-color var(--d-micro) var(--e-std);
}
.faq__item[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
  border-color: var(--accent);
}
.faq__item[open] summary { color: var(--text); }

.faq__answer { padding: 0 0 var(--sp-4); max-width: 66ch; }
.faq__answer p {
  font-family: var(--font-serif); font-size: 1rem; line-height: 1.7;
  color: var(--text-2);
}
.faq__item[open] .faq__answer { animation: panelIn var(--d-std) var(--e-enter); }
@media (prefers-reduced-motion: reduce) { .faq__item[open] .faq__answer { animation: none; } }


/* ── 19 · ESTADO DEL SHOWROOM ───────────────────────────────────────────
   El punto verde/gris no es el único portador del estado: el texto dice
   "Abierto" o "Cerrado". No se puede depender del color. */

.showroom__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.showroom__head .showroom__title { margin-bottom: 0; }

.openstate {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-muted);
}
.openstate::before {
  content: ''; width: 6px; height: 6px; border-radius: var(--r-pill);
  background: var(--text-muted);
}
.openstate--open { color: var(--state-success); }
.openstate--open::before { background: var(--state-success); }

.about-where__hours {
  margin-top: var(--sp-3);
  font-family: var(--font-mono); font-size: 13px; color: var(--text-2);
}
.about-where__hours strong { color: var(--text); font-weight: 500; }


/* ── 20 · WHATSAPP FLOTANTE ─────────────────────────────────────────────
   Acceso directo al canal por el que realmente se cierra en este mercado.
   Es un <a> con href real: funciona aunque el JavaScript falle. */

.fab {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 130;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 56px; padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--strong);
  box-shadow: var(--shadow-3);
  color: var(--text);
  transition:
    transform  var(--d-micro) var(--e-std),
    background-color var(--d-micro) var(--e-std),
    border-color var(--d-micro) var(--e-std);
}
.fab:hover {
  transform: translateY(-2px);
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: #fff;
}
.fab:active { transform: scale(.97); }

.fab svg {
  width: 24px; height: 24px; flex: 0 0 24px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.fab__label {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

/* En pantallas chicas queda solo el ícono: la etiqueta come ancho útil. */
@media (max-width: 640px) {
  .fab { width: 56px; padding: 0; justify-content: center; }
  .fab__label { display: none; }
}

/* En la ficha, la barra fija de precio ocupa el borde inferior en mobile:
   el botón sube para no taparla. */
@media (max-width: 960px) {
  .fab--raised { bottom: calc(var(--sp-4) + 88px); }
}


/* ── 21 · ICIMOTORS RENT ────────────────────────────────────────────────
   Mismo sistema de diseño: los mismos tokens, la misma card, el mismo
   navbar. El alquiler tiene que sentirse parte de la misma empresa, no una
   web aparte. */

.rent { padding: var(--sp-6) 0 var(--sp-8); }

.rent-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.rent-head__title {
  margin: var(--sp-3) 0 var(--sp-4);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 900; line-height: 1.03; letter-spacing: -.035em;
}
.rent-head__lede {
  max-width: 48ch;
  font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.7;
  color: var(--text-2);
}

/* ── Moneda ─────────────────────────────────────────────────────────── */

.currency {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--hair); border-radius: var(--r-pill);
  background: var(--surface);
}
.currency__btn {
  min-height: 34px; padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  transition: background-color var(--d-micro) var(--e-std), color var(--d-micro) var(--e-std);
}
.currency__btn[aria-pressed='true'] { background: var(--accent-solid); color: #fff; }
.currency__btn:not([aria-pressed='true']):hover { color: var(--text); }

/* ── Buscador ───────────────────────────────────────────────────────── */

.search-bar {
  padding: var(--sp-5);
  margin-bottom: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
}
.search-bar__grid {
  display: grid; grid-template-columns: 1.4fr 1fr .7fr 1.4fr 1fr .7fr;
  gap: var(--sp-3);
}
@media (max-width: 1100px) { .search-bar__grid { grid-template-columns: 1.4fr 1fr .8fr; } }
@media (max-width: 640px)  { .search-bar__grid { grid-template-columns: 1fr; } }

.search-bar .field { margin-bottom: 0; }
.search-bar input[type='date'] {
  width: 100%; min-height: 48px; padding: 0 var(--sp-3);
  background: var(--bg); border: 1px solid var(--hair);
  border-radius: var(--r-def); color: var(--text);
  font-family: var(--font-mono); font-size: 13px;
}
.search-bar input[type='date']:focus { border-color: var(--accent); }
/* El ícono nativo del datepicker viene oscuro y se pierde sobre Carbón. */
.search-bar input[type='date']::-webkit-calendar-picker-indicator { filter: invert(.7); cursor: pointer; }

.search-bar__foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--hair);
}
.search-bar__days {
  font-family: var(--font-mono); font-size: 13px; color: var(--accent);
}
.search-bar__note { font-size: 12px; color: var(--text-muted); }
.search-bar__error {
  margin-top: var(--sp-3);
  font-size: 13px; color: var(--state-error);
}

/* ── Cards de la flota ──────────────────────────────────────────────── */

.fleet { margin-bottom: var(--sp-8); }

.fleet__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
@media (max-width: 1024px) { .fleet__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .fleet__grid { grid-template-columns: 1fr; } }

.rentcard {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  overflow: hidden;
  opacity: 0; transform: translateY(16px);
  transition: border-color var(--d-std) var(--e-std), box-shadow var(--d-std) var(--e-std);
}
.rentcard.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--d-std) var(--e-enter), transform var(--d-std) var(--e-enter);
}
.rentcard:hover { border-color: var(--strong); box-shadow: var(--shadow-2); }

.rentcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.rentcard__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.88) contrast(1.04);
  transition: transform var(--d-std) var(--e-std);
}
.rentcard:hover .rentcard__media img { transform: scale(1.03); }

.rentcard__cat {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  padding: 5px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--glass-solid);
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text);
}
@supports (backdrop-filter: blur(8px)) {
  .rentcard__cat { background: var(--glass); backdrop-filter: blur(8px); }
}

.rentcard__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-4); }
.rentcard__title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; }

.rentcard__specs {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-family: var(--font-mono); font-size: 12px; color: var(--text-3);
}
.rentcard__specs li + li::before { content: '·'; margin-right: var(--sp-2); color: var(--text-muted); }

.rentcard__feats { margin-top: var(--sp-3); display: grid; gap: 6px; }
.rentcard__feats li {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 13px; color: var(--text-2);
}
.rentcard__feats svg {
  width: 13px; height: 13px; flex: 0 0 13px;
  fill: none; stroke: var(--accent); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}

.rentcard__price {
  margin-top: auto; padding-top: var(--sp-4);
  border-top: 1px solid var(--hair);
}
.rentcard__day { font-size: 13px; color: var(--text-2); }
.rentcard__day strong {
  font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600;
  color: var(--text); letter-spacing: -.02em;
}
.rentcard__total {
  margin-top: 2px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-3);
}
.rentcard__total strong { color: var(--accent); }

.rentcard__foot {
  display: flex; justify-content: space-between; gap: var(--sp-2);
  margin: var(--sp-3) 0;
  font-size: 11px; color: var(--text-muted);
}
.rentcard__senia { color: var(--text-3); }

.rentcard__cta { width: 100%; }

/* ── Condiciones ────────────────────────────────────────────────────── */

.terms {
  padding: var(--sp-6) 0 0;
  border-top: 1px solid var(--hair);
}
.terms__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
@media (max-width: 960px) { .terms__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .terms__grid { grid-template-columns: 1fr; } }

.terms__block h3 {
  margin-bottom: var(--sp-3);
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted);
}
.terms__block ul { display: grid; gap: 8px; }
.terms__block li {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: 13px; line-height: 1.5; color: var(--text-2);
}
.terms__block svg {
  width: 13px; height: 13px; flex: 0 0 13px; margin-top: 4px;
  fill: none; stroke: var(--accent); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.terms__text {
  font-family: var(--font-serif); font-size: 13px; line-height: 1.6;
  color: var(--text-2);
}


/* ── 22 · CALENDARIO DE DISPONIBILIDAD ──────────────────────────────────
   Dos meses a la vista. Los días ocupados se tachan; el rango elegido se
   marca en Señal, que es el color de lo confirmado. */

.cal { position: relative; }

.cal__nav {
  position: absolute; top: 0; right: 0;
  display: flex; gap: var(--sp-2);
}
.cal__arrow {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--r-pill);
  border: 1px solid var(--hair); color: var(--text-2);
  transition: border-color var(--d-micro) var(--e-std), color var(--d-micro) var(--e-std);
}
.cal__arrow:hover:not(:disabled) { border-color: var(--strong); color: var(--text); }
.cal__arrow:disabled { opacity: .3; cursor: not-allowed; }
.cal__arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.cal__months { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
@media (max-width: 720px) {
  /* En el teléfono un solo mes: dos entran ilegibles. */
  .cal__months { grid-template-columns: 1fr; }
  .cal__month:last-child { display: none; }
}

.cal__title {
  margin-bottom: var(--sp-3);
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  text-transform: capitalize;
}

.cal__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal__grid th {
  padding-bottom: var(--sp-2);
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  color: var(--text-muted);
}
.cal__grid td { padding: 1px; text-align: center; }

.cal__day {
  width: 100%; aspect-ratio: 1; max-height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-def);
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-2);
  transition: background-color var(--d-micro) var(--e-std), color var(--d-micro) var(--e-std);
}
.cal__day:hover:not(:disabled) { background: rgba(245,243,239,.08); color: var(--text); }
.cal__day:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Días que ya pasaron: presentes pero apagados, para no romper la grilla. */
.cal__day--past { color: var(--text-muted); opacity: .35; cursor: not-allowed; }

/* Ocupado. La tachadura comunica sin depender del color. */
.cal__day--busy {
  color: var(--text-muted);
  text-decoration: line-through;
  cursor: not-allowed;
  opacity: .5;
}

/* Fuera de alcance con el inicio ya elegido: por mínimo, máximo, o porque
   hay un día ocupado en el medio. */
.cal__day--unreachable { opacity: .3; cursor: not-allowed; }

.cal__day--in { background: var(--accent-weak); color: var(--text); border-radius: 0; }

.cal__day--start,
.cal__day--end {
  background: var(--accent-solid); color: #fff; font-weight: 600;
}
.cal__day--start { border-radius: var(--r-def) 0 0 var(--r-def); }
.cal__day--end   { border-radius: 0 var(--r-def) var(--r-def) 0; }
.cal__day--start.cal__day--end { border-radius: var(--r-def); }

.cal__legend {
  display: flex; gap: var(--sp-4);
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--hair);
  font-size: 11px; color: var(--text-muted);
}
.cal__legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal__dot { width: 8px; height: 8px; border-radius: 2px; }
.cal__dot--free { background: var(--accent); }
.cal__dot--busy { background: var(--text-muted); opacity: .5; }


/* ── 23 · FICHA DEL VEHÍCULO DE ALQUILER ────────────────────────────── */

.rentauto {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  gap: var(--sp-6);
  align-items: start;
  padding-bottom: var(--sp-8);
}
@media (max-width: 960px) { .rentauto { grid-template-columns: 1fr; } }

.rentauto__media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border: 1px solid var(--hair); border-radius: var(--r-card);
  background: var(--surface);
}
.rentauto__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) contrast(1.03);
}

.rentauto__head { margin-top: var(--sp-5); }
.rentauto__title {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
}
.rentauto__head .rentcard__specs { margin-top: var(--sp-3); }

.rentauto__feats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-5) 0;
  padding: var(--sp-4) 0;
  border-block: 1px solid var(--hair);
}
@media (max-width: 560px) { .rentauto__feats { grid-template-columns: 1fr; } }
.rentauto__feats li {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 13px; color: var(--text-2);
}
.rentauto__feats svg {
  width: 13px; height: 13px; flex: 0 0 13px;
  fill: none; stroke: var(--accent); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}

.rentauto__cal { margin-top: var(--sp-6); }
.rentauto__cal .section-head { margin-bottom: var(--sp-5); }

/* ── Panel de reserva ───────────────────────────────────────────────── */

.booking {
  position: sticky; top: 88px;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
}
@media (max-width: 960px) { .booking { position: static; } }

.booking__title {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted);
}
.booking__rate { margin-top: var(--sp-3); font-size: 13px; color: var(--text-2); }
.booking__rate strong {
  font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600;
  color: var(--text); letter-spacing: -.02em;
}

.booking__rows { margin: var(--sp-4) 0 0; }
.booking__rows > div {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--hair);
}
.booking__rows dt { font-size: 13px; color: var(--text-muted); }
.booking__rows dd {
  margin: 0;
  font-family: var(--font-mono); font-size: 13px; color: var(--text);
}

.booking__empty {
  margin: var(--sp-4) 0;
  font-size: 13px; line-height: 1.5; color: var(--text-muted);
}

.booking__total { margin: var(--sp-4) 0; }
.booking__total > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3);
}
.booking__k {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted);
}
.booking__total-v {
  font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600;
  letter-spacing: -.02em;
}
.booking__senia {
  margin-top: var(--sp-2);
  font-size: 12px; line-height: 1.5; color: var(--accent);
}

.booking__cta { width: 100%; margin-top: var(--sp-2); }
.booking__cta:disabled { opacity: .4; cursor: not-allowed; }

.booking__note {
  margin-top: var(--sp-3);
  font-size: 11px; color: var(--text-muted); text-align: center;
}

.booking__terms {
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--hair);
  display: grid; gap: var(--sp-2);
  font-size: 12px; line-height: 1.5; color: var(--text-muted);
}
.booking__terms strong { color: var(--text-2); font-weight: 500; }


/* ── 24 · CHECKOUT DE ALQUILER ──────────────────────────────────────────── */

.checkout { padding: var(--sp-6) 0 var(--sp-8); }

.checkout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 420px);
  gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 960px) {
  /* minmax(0, …) por lo mismo que en la ficha: un `fr` pelado se estira hasta
     el contenido que no se deja achicar y corre la página de costado. */
  .checkout__grid { grid-template-columns: minmax(0, 1fr); }
  /* En mobile el resumen va primero: sirve para confirmar qué se está
     reservando antes de ponerse a completar campos. */
  .summary { order: -1; }
}

.checkout__head { margin-bottom: var(--sp-6); }
.checkout__title {
  margin: var(--sp-3) 0 var(--sp-3);
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -.03em;
}
.checkout__lede {
  font-family: var(--font-serif); font-size: 1rem; line-height: 1.7;
  color: var(--text-2);
}

.cofield {
  border: 0; padding: 0;
  margin: 0 0 var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hair);
}
.cofield legend {
  padding: 0 0 var(--sp-4);
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted);
}
.cofield__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 560px) { .cofield__row { grid-template-columns: 1fr; } }

.field__opt { color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

.checkout__reqs { display: grid; gap: 8px; margin-bottom: var(--sp-4); }
.checkout__reqs li {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 13px; color: var(--text-2);
}
.checkout__reqs svg {
  width: 13px; height: 13px; flex: 0 0 13px;
  fill: none; stroke: var(--accent); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Aceptación de condiciones. El texto es parte del control: se toca todo. */
.checkbox {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--hair); border-radius: var(--r-def);
  font-size: 13px; line-height: 1.55; color: var(--text-2);
  cursor: pointer;
  transition: border-color var(--d-micro) var(--e-std);
}
.checkbox:hover { border-color: var(--strong); }
.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox .opt__box { margin-top: 1px; }
.checkbox input:checked + .opt__box {
  background: var(--accent-solid); border-color: var(--accent-solid); color: #fff;
}
.checkbox input:focus-visible + .opt__box { outline: 2px solid var(--accent); outline-offset: 2px; }

.checkout__cta { width: 100%; }
.checkout__cta:disabled { opacity: .5; cursor: wait; }

.checkout__safe {
  margin-top: var(--sp-3);
  font-size: 12px; line-height: 1.5; color: var(--text-muted); text-align: center;
}

.checkout__fail {
  margin-bottom: var(--sp-4); padding: var(--sp-3);
  border-left: 2px solid var(--state-error);
  border-radius: var(--r-def);
  background: rgba(161, 43, 43, .10);
  font-size: 13px; line-height: 1.5; color: var(--text-2);
}
.checkout__fail a { color: var(--accent); border-bottom: 1px solid currentColor; }

/* ── Resumen ────────────────────────────────────────────────────────── */

.summary {
  position: sticky; top: 88px;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
}
@media (max-width: 960px) { .summary { position: static; } }

.summary__title {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted);
}

.summary__car {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-4) 0;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--hair);
}
.summary__car img {
  width: 88px; height: 66px; flex: 0 0 88px;
  object-fit: cover; border-radius: var(--r-def);
  filter: saturate(.88) contrast(1.04);
}
.summary__name { font-size: .9375rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.summary__cat {
  margin-top: 2px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}