/* ============================================================================
   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;
  --paper:       #F5F3EF;
  --signal:      #1F3AD6;
  --signal-lite: #6E82F0;   /* Señal legible sobre Carbón */

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

  /* 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;
  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); }

.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 {
    grid-template-columns: 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);
}
@keyframes fadeIn { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gallery__main img { animation: none; } }

.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; }

.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); }

/* ── Lightbox ───────────────────────────────────────────────────────── */

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--sp-3); padding: var(--sp-4);
  background: rgba(10, 9, 7, .94);
  opacity: 0;
  transition: opacity var(--d-std) var(--e-std);
}
.lightbox.is-open { opacity: 1; }
.lightbox img {
  max-width: 100%; max-height: 90vh;
  margin-inline: auto;
  object-fit: contain;
  border-radius: var(--r-def);
}
.lightbox__close {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  background: rgba(245,243,239,.10); color: var(--paper);
}
.lightbox__nav {
  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);
}
.lightbox__nav:hover { background: rgba(245,243,239,.20); }
.lightbox__close svg, .lightbox__nav svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5;
}

/* ── 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); }
}