@charset "UTF-8";
/* ==========================================================================
   beniautospremium.es · hoja de estilo del portal público
   Concepto: sala de exposición de noche. El coche iluminado, todo lo demás en
   penumbra y callado. Oscuro cálido y mineral, con latón; nada de neón ni
   cristal esmerilado. El rojo es el del logotipo del grupo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Tipografías servidas en local
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-600-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/plexmono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/plexmono-400-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/plexmono-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/plexmono-500-latin-ext.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2 · Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color */
  --negro:         #000000;   /* cabecera y pie: el negro del logotipo */
  --negro-suave:   #0A0B0C;
  --grafito:       #14161A;   /* fondo general */
  --grafito-alto:  #1D2026;   /* tarjetas y bloques elevados, por valor */
  --grafito-borde: #262A31;
  --hueso:         #EDE9E3;   /* texto principal */
  --gris-humo:     #8B9096;   /* texto secundario y metadatos */
  --gris-tenue:    #5C6167;

  --laton:         #B4884A;   /* acento premium: precio y subrayados */
  --laton-claro:   #D7AC6E;
  --laton-tenue:   rgba(180, 136, 74, 0.16);

  --rojo:          #CE0613;   /* rojo del logotipo: acción principal */
  --rojo-vivo:     #ED1B24;
  --rojo-claro:    #FF5A5A;   /* rojo legible sobre fondo oscuro */
  --rojo-tenue:    rgba(206, 6, 19, 0.14);

  --whatsapp:       #25D366;   /* verde corporativo de WhatsApp */
  --whatsapp-vivo:  #1EBE57;

  /* Tipografía */
  --fuente-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fuente-texto:   'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fuente-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Medidas */
  --ancho:        1280px;
  --ancho-texto:  68ch;
  --aire:         clamp(1rem, 4vw, 2rem);
  --seccion:      clamp(3.5rem, 9vw, 7rem);
  --radio:        3px;
  --cabecera-alto: 100px;

  --transicion: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   3 · Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cabecera-alto) + 1rem);
}

body {
  margin: 0;
  background: var(--grafito);
  color: var(--hueso);
  font-family: var(--fuente-texto);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.es-bloqueado { overflow: hidden; }

img,
picture,
video,
svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--fuente-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.025em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.9rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 2vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration-color: rgba(180, 136, 74, 0.55);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color var(--transicion), text-decoration-color var(--transicion);
}
a:hover { color: var(--laton-claro); text-decoration-color: var(--laton); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: 0.35em; }

hr {
  border: 0;
  border-top: 1px solid var(--grafito-borde);
  margin: var(--aire) 0;
}

strong, b { font-weight: 600; }

::selection { background: var(--laton); color: var(--negro); }

:focus-visible {
  outline: 2px solid var(--laton-claro);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Salto al contenido */
.salto-contenido {
  position: absolute;
  left: 0.5rem;
  top: -100px;
  z-index: 200;
  background: var(--laton);
  color: var(--negro);
  padding: 0.6rem 1rem;
  font-weight: 600;
  transition: top var(--transicion);
}
.salto-contenido:focus { top: 0.5rem; color: var(--negro); }

/* --------------------------------------------------------------------------
   4 · Utilidades
   -------------------------------------------------------------------------- */
.contenedor {
  width: min(100% - 2 * var(--aire), var(--ancho));
  margin-inline: auto;
}
.contenedor--estrecho { width: min(100% - 2 * var(--aire), 780px); }

.seccion { padding-block: var(--seccion); }
.seccion--fina { padding-block: clamp(2rem, 5vw, 3.5rem); }

.oculto-visual {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mono {
  font-family: var(--fuente-mono);
  font-size: 0.82em;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.epigrafe {
  font-family: var(--fuente-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris-humo);
  margin: 0 0 1rem;
  display: block;
}

.ref {
  font-family: var(--fuente-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--gris-humo);
}

.texto-secundario { color: var(--gris-humo); }
.texto-medida { max-width: var(--ancho-texto); }
.centrado { text-align: center; margin-inline: auto; }

/* --------------------------------------------------------------------------
   5 · Botones
   -------------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radio);
  background: var(--rojo);
  color: #fff;
  font-family: var(--fuente-texto);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion), transform var(--transicion);
}
.boton:hover { background: var(--rojo-vivo); color: #fff; transform: translateY(-1px); }
.boton:active { transform: none; }

.boton--fantasma {
  background: transparent;
  border-color: var(--grafito-borde);
  color: var(--hueso);
}
.boton--fantasma:hover {
  background: transparent;
  border-color: var(--laton);
  color: var(--laton-claro);
}

.boton--whatsapp {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: #05301A;
}
.boton--whatsapp:hover {
  background: var(--whatsapp-vivo);
  border-color: var(--whatsapp-vivo);
  color: #05301A;
}
.boton--whatsapp svg { width: 1.25em; height: 1.25em; }

.boton--laton { background: var(--laton); border-color: var(--laton); color: var(--negro); }
.boton--laton:hover { background: var(--laton-claro); border-color: var(--laton-claro); color: var(--negro); }

/* Botón secundario, pero relleno. El fantasma sobre una tarjeta oscura no se
   leía como botón: parecía un texto con un recuadro. */
.boton--acero {
  background: var(--grafito-borde);
  border-color: var(--gris-tenue);
  color: var(--hueso);
}
.boton--acero:hover {
  background: var(--gris-tenue);
  border-color: var(--gris-humo);
  color: #fff;
}

.boton--bloque { width: 100%; }
.boton--pequeno { padding: 0.55rem 1rem; font-size: 0.85rem; }

.boton[disabled],
.boton[aria-disabled='true'] { opacity: 0.5; pointer-events: none; }

.boton svg { width: 1.05em; height: 1.05em; flex: none; fill: currentColor; }

.enlace-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--whatsapp);
  text-decoration-color: rgba(37, 211, 102, 0.5);
}
.enlace-whatsapp:hover { color: var(--whatsapp-vivo); text-decoration-color: var(--whatsapp-vivo); }
.enlace-whatsapp svg { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--laton-claro);
  border-bottom: 1px solid var(--laton-tenue);
  padding-bottom: 0.2rem;
}
.enlace-flecha:hover { border-bottom-color: var(--laton); }
.enlace-flecha::after { content: '→'; transition: transform var(--transicion); }
.enlace-flecha:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   6 · Cabecera
   -------------------------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--negro);
  border-bottom: 1px solid #1A1A1C;
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  height: var(--cabecera-alto);
}

.cabecera__logo {
  display: flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}
.cabecera__logo img {
  height: 64px;
  width: auto;
}
@media (max-width: 900px) {
  .cabecera__logo img { height: 54px; }
}
@media (max-width: 480px) {
  .cabecera__logo img { height: 44px; }
}

.nav-principal { margin-left: auto; }
.nav-principal ul {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-principal li { margin: 0; }
.nav-principal a {
  display: block;
  padding: 0.4rem 0;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--hueso);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav-principal a:hover { color: var(--laton-claro); }
.nav-principal a.es-activo {
  color: #fff;
  border-bottom-color: var(--rojo);
}
.nav-contador {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 0.4rem;
  padding: 0 0.3rem;
  background: var(--rojo);
  border-radius: 20px;
  font-family: var(--fuente-mono);
  font-size: 0.64rem;
  font-style: normal;
  color: #fff;
  vertical-align: middle;
}
.nav-contador[hidden] { display: none; }

.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
}

.idiomas {
  display: flex;
  gap: 0.15rem;
  font-family: var(--fuente-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.idiomas a {
  padding: 0.3rem 0.45rem;
  color: var(--gris-humo);
  text-decoration: none;
  border-radius: 2px;
}
.idiomas a:hover { color: var(--hueso); }
.idiomas a[aria-current='true'] { color: var(--negro); background: var(--hueso); }

.cabecera__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--fuente-mono);
  font-size: 0.82rem;
  color: var(--hueso);
  text-decoration: none;
  white-space: nowrap;
}
.cabecera__tel:hover { color: var(--laton-claro); }
.cabecera__tel svg { width: 0.95em; height: 0.95em; fill: var(--rojo-claro); }

.boton-menu {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid #24262A;
  border-radius: var(--radio);
  color: var(--hueso);
  cursor: pointer;
}
.boton-menu span {
  display: block;
  width: 20px; height: 1.5px;
  margin: 4px auto;
  background: currentColor;
  transition: transform var(--transicion), opacity var(--transicion);
}
.boton-menu[aria-expanded='true'] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.boton-menu[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.boton-menu[aria-expanded='true'] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .boton-menu { display: block; margin-left: auto; }
  .cabecera__tel span { display: none; }

  .nav-principal {
    position: fixed;
    inset: var(--cabecera-alto) 0 auto 0;
    margin: 0;
    background: var(--negro);
    border-bottom: 1px solid #1A1A1C;
    max-height: calc(100dvh - var(--cabecera-alto));
    overflow-y: auto;
    display: none;
  }
  .nav-principal.es-abierto { display: block; }
  .nav-principal ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--aire) 1.5rem;
  }
  .nav-principal a {
    padding: 0.95rem 0;
    font-size: 1.05rem;
    border-bottom: 1px solid #151517;
  }
  .nav-principal a.es-activo { border-bottom-color: var(--rojo); }
}

/* --------------------------------------------------------------------------
   7 · Portada · hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(480px, 78vh, 780px);
  display: flex;
  align-items: flex-end;
  background: var(--negro);
  overflow: hidden;
}
.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: aparecer 900ms ease forwards;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Oscurece lo justo para que el texto se lea sin tapar el coche */
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.42) 34%, rgba(0, 0, 0, 0) 62%),
    linear-gradient(to right, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 58%);
  pointer-events: none;
}
.hero__contenido {
  position: relative;
  z-index: 2;
  width: min(100% - 2 * var(--aire), var(--ancho));
  margin-inline: auto;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  /* La foto de debajo puede tener zonas claras: la sombra asegura la lectura */
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}
.hero__marca {
  font-family: var(--fuente-mono);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--laton-claro);
  margin-bottom: 0.9rem;
}
.hero h1 {
  max-width: 15ch;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.2rem);
  margin-bottom: 1.6rem;
}

/* El bloque del coche: marca, modelo, precio y cuatro datos, todo en mono */
.hero__coche {
  border-left: 2px solid var(--rojo);
  padding-left: clamp(0.9rem, 2vw, 1.4rem);
  margin-bottom: 0.4rem;
}
.hero__coche-nombre {
  font-family: var(--fuente-mono);
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #C5CACF;
  margin-bottom: 0.55rem;
}
.hero__coche-nombre strong { color: var(--hueso); font-weight: 500; }
.hero__coche-nombre span {
  display: block;
  margin-top: 0.2rem;
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 0.8rem;
}
.hero__version {
  color: var(--gris-humo);
  font-size: 1.05rem;
  max-width: 44ch;
  margin-bottom: 1.4rem;
}
.hero__precio {
  font-family: var(--fuente-display);
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 600;
  color: var(--laton);
  line-height: 1;
  margin-bottom: 0.9rem;
}

/* Declaración editorial: un párrafo que hace de titular */
.declaracion {
  max-width: 24ch;
  font-size: clamp(1.7rem, 1.2rem + 2.4vw, 3rem);
  margin-bottom: 1.2rem;
}
.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.6rem;
}

/* Cuatro datos en mono abajo a la izquierda */
.datos-rapidos {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.2rem, 3vw, 2.6rem);
  font-family: var(--fuente-mono);
  font-size: 0.8rem;
  color: var(--hueso);
  list-style: none;
  margin: 0;
  padding: 0;
}
.datos-rapidos li {
  margin: 0;
  padding: 0.35rem 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.datos-rapidos span {
  color: var(--gris-humo);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

/* Portada sin stock */
.hero--vacio {
  min-height: 60vh;
  align-items: center;
  background:
    radial-gradient(120% 80% at 20% 0%, #1C1F25 0%, var(--negro) 70%);
}

/* --------------------------------------------------------------------------
   8 · Encabezado de página interior
   -------------------------------------------------------------------------- */
.cabecera-pagina {
  background: var(--negro-suave);
  border-bottom: 1px solid var(--grafito-borde);
  padding-block: clamp(2.2rem, 6vw, 4rem);
}
.cabecera-pagina h1 { margin-bottom: 0.4rem; }
.cabecera-pagina p { color: var(--gris-humo); max-width: var(--ancho-texto); margin: 0; }

.migas {
  font-family: var(--fuente-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--gris-tenue);
  margin-bottom: 0.9rem;
}
.migas ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.migas li { margin: 0; }
.migas li + li::before { content: '/ '; color: var(--gris-tenue); }
.migas a { color: var(--gris-humo); text-decoration: none; }
.migas a:hover { color: var(--laton-claro); }

/* --------------------------------------------------------------------------
   9 · Tarjeta de vehículo y rejilla
   -------------------------------------------------------------------------- */
.rejilla-coches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
@media (min-width: 1100px) {
  .rejilla-coches { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .rejilla-coches { grid-template-columns: 1fr; }
}

.coche {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--grafito-alto);
  border: 1px solid transparent;
  border-radius: var(--radio);
  overflow: hidden;
  transition: border-color var(--transicion), transform var(--transicion);
}
.coche:hover { border-color: var(--grafito-borde); transform: translateY(-2px); }
.coche:focus-within { border-color: var(--laton); }

.coche__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #101216;
  overflow: hidden;
}
.coche__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 400ms ease;
}
.coche:hover .coche__foto img { transform: scale(1.03); }

/* El vendido se anuncia con el sello rojo, no apagando la foto: el coche se
   sigue viendo entero. Solo se le baja el color, que ya lo distingue. */
.coche--vendido .coche__foto img { filter: grayscale(0.5); }

/* Fundido de las fotos en diferido. Va por clase y no en línea desde el guion:
   un `style="opacity:1"` gana a cualquier regla de la hoja y apagaba en
   silencio el tratamiento de las tarjetas que le tocara cargar en diferido. */
img.difiere { opacity: 0; transition: opacity 420ms ease; }
img.difiere--cargada { opacity: 1; }

.coche__sinfoto {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--gris-tenue);
  font-family: var(--fuente-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: repeating-linear-gradient(135deg, #121419 0 12px, #16181D 12px 24px);
}

.coche__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.1rem 1.2rem 1.3rem;
}

/* Marca, modelo y versión en un solo titular, igual que en la ficha. Dos líneas
   como mucho: la rejilla tiene que seguir cuadrando con títulos de largos muy
   distintos, de «BMW M4 CSL» a «Land Rover Range Rover Sport SV Carbon Edition». */
.coche__titulo {
  font-family: var(--fuente-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.9rem;
  min-height: calc(2 * 1.25em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.coche__titulo a { text-decoration: none; }
.coche__titulo a::after { content: ''; position: absolute; inset: 0; }

.coche__precio {
  font-family: var(--fuente-display);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--laton);
  line-height: 1;
  margin-bottom: 0.9rem;
}
.coche__precio small {
  display: block;
  font-family: var(--fuente-mono);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--gris-humo);
  margin-top: 0.35rem;
  letter-spacing: 0.04em;
}

.coche__datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem 1rem;
  margin: auto 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--grafito-borde);
  list-style: none;
  font-family: var(--fuente-mono);
  font-size: 0.78rem;
  color: var(--hueso);
}
.coche__datos li { margin: 0; display: flex; align-items: baseline; gap: 0.4rem; }
.coche__datos svg { width: 0.85em; height: 0.85em; fill: var(--gris-tenue); flex: none; }

.coche__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.9rem;
  position: relative;
  z-index: 2;
}

/* Etiquetas de estado sobre la foto */
.etiquetas {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.etiqueta {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  font-family: var(--fuente-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
  background: rgba(10, 11, 12, 0.85);
  color: var(--hueso);
  border: 1px solid var(--grafito-borde);
}
.etiqueta--reservado { background: var(--negro); color: var(--laton-claro); border-color: var(--laton); }
.etiqueta--vendido { background: var(--rojo); color: #fff; border-color: var(--rojo); }

.coche__contador {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  padding: 0.25rem 0.5rem;
  background: rgba(10, 11, 12, 0.8);
  border-radius: 2px;
  font-family: var(--fuente-mono);
  font-size: 0.68rem;
  color: var(--hueso);
}

/* Botón de comparar dentro de la tarjeta */
.comparar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  background: transparent;
  border: 1px solid var(--grafito-borde);
  border-radius: var(--radio);
  color: var(--gris-humo);
  font-family: var(--fuente-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transicion), border-color var(--transicion);
}
.comparar-toggle:hover { color: var(--hueso); border-color: var(--gris-tenue); }
.comparar-toggle[aria-pressed='true'] {
  color: var(--laton-claro);
  border-color: var(--laton);
  background: var(--laton-tenue);
}
.comparar-toggle svg { width: 0.9em; height: 0.9em; fill: currentColor; }

/* En la ficha el comparador no es la pastilla de la tarjeta, es un botón más de
   la columna de acciones: recupera el cuerpo y el relleno de botón, y al estar
   activo se pone en latón para que se vea de un vistazo que el coche ya está
   en el comparador. */
.boton.comparar-toggle {
  padding: 0.85rem 1.6rem;
  background: var(--grafito-borde);
  border-color: var(--gris-tenue);
  color: var(--hueso);
  font-family: var(--fuente-texto);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}
.boton.comparar-toggle:hover {
  background: var(--gris-tenue);
  border-color: var(--gris-humo);
  color: #fff;
}
.boton.comparar-toggle[aria-pressed='true'],
.boton.comparar-toggle[aria-pressed='true']:hover {
  background: var(--laton);
  border-color: var(--laton);
  color: var(--negro);
}
.boton.comparar-toggle svg { width: 1.05em; height: 1.05em; }

/* --------------------------------------------------------------------------
   10 · Listado: barra de herramientas y filtros
   -------------------------------------------------------------------------- */
.listado {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
@media (max-width: 960px) {
  .listado { grid-template-columns: 1fr; }
}

.barra-listado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--grafito-borde);
}
.barra-listado__total {
  font-family: var(--fuente-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--hueso);
}

.filtros {
  position: sticky;
  top: calc(var(--cabecera-alto) + 1rem);
  background: var(--grafito-alto);
  border-radius: var(--radio);
  padding: 1.3rem;
}
.filtros h2 {
  font-family: var(--fuente-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris-humo);
  margin: 0 0 1.1rem;
}
/* Los grupos de filtros son <fieldset>: hay que quitarles el marco del navegador */
.filtro {
  border: 0;
  margin: 0 0 1.15rem;
  padding: 0;
  min-width: 0;
}
.filtro:last-of-type { margin-bottom: 1.5rem; }
.filtro > legend,
.filtro > label:first-child {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--hueso);
  margin-bottom: 0.45rem;
  padding: 0;
}
.filtro fieldset { border: 0; margin: 0; padding: 0; }
.filtro__pareja { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

.filtro__lista {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 190px;
  overflow-y: auto;
  padding-right: 0.3rem;
  scrollbar-width: thin;
  scrollbar-color: var(--grafito-borde) transparent;
}

.filtros__pie { display: flex; flex-direction: column; gap: 0.6rem; }

/* Filtros en móvil: panel deslizante */
.filtros-abrir { display: none; }
@media (max-width: 960px) {
  .filtros-abrir {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .filtros {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 150;
    width: min(90vw, 380px);
    border-radius: 0;
    padding: 1.3rem var(--aire) 0;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transicion);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6);
  }
  .filtros.es-abierto { transform: none; }
  .filtros__cerrar {
    position: absolute;
    top: 0.9rem; right: var(--aire);
    width: 40px; height: 40px;
    background: transparent;
    border: 1px solid var(--grafito-borde);
    border-radius: var(--radio);
    color: var(--hueso);
    font-size: 1.2rem;
    cursor: pointer;
  }
  /* Barra de acción pegada al fondo del panel deslizante. Sin márgenes
     negativos: desplazarían la posición pegajosa hacia arriba. */
  .filtros__pie {
    position: sticky;
    bottom: 0;
    margin-inline: calc(var(--aire) * -1);
    margin-top: 1rem;
    padding: 1rem var(--aire) calc(1rem + env(safe-area-inset-bottom));
    background: var(--grafito-alto);
    border-top: 1px solid var(--grafito-borde);
  }
  .velo {
    position: fixed;
    inset: 0;
    z-index: 140;
    background: rgba(0, 0, 0, 0.65);
    border: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transicion), visibility var(--transicion);
  }
  .velo.es-visible { opacity: 1; visibility: visible; }
}
@media (min-width: 961px) {
  .filtros__cerrar, .velo { display: none; }
}

/* --------------------------------------------------------------------------
   11 · Formularios
   -------------------------------------------------------------------------- */
label { display: block; }

.campo { margin-bottom: 1.05rem; }
.campo > label,
.campo__etiqueta {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 0.4rem;
  color: var(--hueso);
}
.campo__opcional { color: var(--gris-tenue); font-weight: 400; }

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='search'],
input[type='password'],
input[type='date'],
input[type='url'],
select,
textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: #101217;
  border: 1px solid var(--grafito-borde);
  border-radius: var(--radio);
  color: var(--hueso);
  font-family: var(--fuente-texto);
  font-size: 0.95rem;
  line-height: 1.4;
  transition: border-color var(--transicion), background var(--transicion);
  appearance: none;
}
input::placeholder,
textarea::placeholder { color: var(--gris-tenue); }

input:hover,
select:hover,
textarea:hover { border-color: #333840; }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--laton);
  background: #0C0E12;
  box-shadow: 0 0 0 3px var(--laton-tenue);
}

textarea { min-height: 130px; resize: vertical; }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238B9096' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 11px;
  padding-right: 2.2rem;
}
select option { background: #101217; color: var(--hueso); }

input[type='number'] { font-family: var(--fuente-mono); }

/* Casillas y radios */
.casilla {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.5;
  cursor: pointer;
  color: var(--hueso);
}
.casilla input[type='checkbox'],
.casilla input[type='radio'] {
  flex: none;
  width: 17px; height: 17px;
  margin: 0.18rem 0 0;
  accent-color: var(--rojo);
  cursor: pointer;
}
.casilla--filtro { font-family: var(--fuente-mono); font-size: 0.8rem; color: var(--gris-humo); }
.casilla--filtro:hover { color: var(--hueso); }
.casilla--filtro input:checked + span { color: var(--laton-claro); }

.campo--error input,
.campo--error select,
.campo--error textarea { border-color: var(--rojo-claro); }

.error-campo {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--rojo-claro);
}

.honeypot {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  pointer-events: none;
}

.formulario { background: var(--grafito-alto); border-radius: var(--radio); padding: clamp(1.3rem, 3vw, 2rem); }
.formulario h2 { margin-bottom: 0.35rem; }
.formulario__intro { color: var(--gris-humo); font-size: 0.92rem; margin-bottom: 1.4rem; }
.formulario__pie { margin-top: 1.2rem; }
.formulario__legal { font-size: 0.78rem; color: var(--gris-tenue); margin-top: 0.9rem; line-height: 1.5; }
.formulario__legal a { color: var(--gris-humo); }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .dos-columnas { grid-template-columns: 1fr; } }

/* Avisos */
.aviso {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radio);
  border-left: 3px solid var(--laton);
  background: var(--grafito-alto);
  font-size: 0.9rem;
  margin-bottom: 1.2rem;
}
.aviso--error { border-left-color: var(--rojo-claro); }
.aviso--ok { border-left-color: #4C9A6A; }
.aviso p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   12 · Ficha de vehículo
   -------------------------------------------------------------------------- */
.ficha__galeria { background: var(--negro); }

.galeria {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}
/* 4:3 es la proporción real de las fotos del cliente, la misma que la tira de
   miniaturas. Y `contain`, no `cover`: la foto se ve entera aunque venga con
   otra proporción; lo que sobra queda en negro, que es el fondo de la sección. */
.galeria__principal {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 80vh;
  /* Cuando manda el alto, se estrecha la caja en vez de dejar franjas negras
     a los lados: así el contador se apoya en la foto y no en el vacío. */
  max-width: calc(80vh * 4 / 3);
  margin-inline: auto;
  background: #0B0C0E;
  overflow: hidden;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: zoom-in;
}
.galeria__principal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* A la izquierda: la marca de agua vive en la esquina de abajo a la derecha */
.galeria__contador {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: 0.35rem 0.6rem;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 2px;
  font-family: var(--fuente-mono);
  font-size: 0.75rem;
  color: var(--hueso);
  pointer-events: none;
}
.galeria__tira {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--grafito-borde) transparent;
  scroll-snap-type: x proximity;
}
.galeria__tira button {
  position: relative;
  flex: none;
  width: 108px;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 2px;
  background: #0B0C0E;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  scroll-snap-align: start;
  transition: opacity var(--transicion), border-color var(--transicion);
}
.galeria__tira button:hover { opacity: 0.85; }
.galeria__tira button[aria-current='true'] { opacity: 1; border-color: var(--laton); }
.galeria__tira img { width: 100%; height: 100%; object-fit: cover; }

/* Vídeo de la ficha, debajo de la descripción. La caja reserva el 16/9 desde
   el primer pintado, así que al cargar el reproductor nada se mueve de sitio. */
.video {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 900px;
  margin-top: 1.4rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--negro-suave);
  border-radius: var(--radio);
}
.video iframe { width: 100%; height: 100%; border: 0; }
.video .externo { max-width: none; background: none; border: 0; }

/* Visor a pantalla completa */
.visor {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  background: #000;
}
.visor.es-abierto { display: grid; grid-template-rows: auto 1fr auto; }
.visor__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem var(--aire);
  color: var(--hueso);
  font-family: var(--fuente-mono);
  font-size: 0.8rem;
}
.visor__escena {
  position: relative;
  overflow: hidden;
  min-height: 0;
}
/* Posición absoluta para que el alto sea definido y max-height:100% funcione */
.visor__lienzo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(3.5rem, 8vw, 6rem);
}
.visor__lienzo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform var(--transicion);
  cursor: zoom-in;
}
.visor__lienzo img.es-ampliada { transform: scale(2); cursor: zoom-out; }
.visor__lienzo iframe { width: min(100%, 1280px); aspect-ratio: 16 / 9; border: 0; }
/* El z-index no es decorativo: el lienzo va después en el documento y, al estar
   posicionado con `inset: 0`, se pintaba encima de las flechas y se comía todos
   los clics. Las flechas se veían perfectas y no hacían nada. */
.visor__nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  background: rgba(20, 22, 26, 0.75);
  border: 1px solid var(--grafito-borde);
  border-radius: 50%;
  color: var(--hueso);
  font-size: 1.3rem;
  cursor: pointer;
  transition: background var(--transicion);
}
.visor__nav:hover { background: var(--grafito-alto); }
.visor__nav--anterior { left: clamp(0.4rem, 2vw, 1.5rem); }
.visor__nav--siguiente { right: clamp(0.4rem, 2vw, 1.5rem); }
.visor__cerrar {
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--grafito-borde);
  border-radius: var(--radio);
  color: var(--hueso);
  font-size: 1.2rem;
  cursor: pointer;
}
.visor__tira {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.7rem var(--aire);
  scrollbar-width: thin;
}
.visor__tira button {
  position: relative;
  flex: none;
  width: 76px;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid transparent;
  background: #0B0C0E;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.5;
}
.visor__tira button[aria-current='true'] { opacity: 1; border-color: var(--laton); }
.visor__tira img { width: 100%; height: 100%; object-fit: cover; }

/* Cuerpo de la ficha */
.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 366px;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 1000px) {
  .ficha { grid-template-columns: 1fr; }
}
/* En contacto el formulario se estrecha, pero **sin centrar el par**: centrarlo
   dejaba huecos muertos a los lados y el bloque no cuadraba con el título ni con
   las migas de arriba. Lo que se hace es ensanchar la columna de datos: el
   formulario se estrecha lo mismo, la fila sigue ocupando el ancho entero y el
   correo deja de partirse en dos líneas. */
@media (min-width: 1001px) {
  .ficha--contacto { grid-template-columns: minmax(0, 1fr) 440px; }
}

.ficha__cabecera { margin-bottom: 2rem; }
/* Marca, modelo y versión van en un solo h1 y en una sola línea —«Lamborghini
   Huracán Spyder LP 610-4»—, así que el titular pide menos cuerpo que el resto:
   con el tamaño general no cabía ni el más corto. En móvil parte, claro. */
.ficha__cabecera h1 {
  font-size: clamp(1.4rem, 0.9rem + 1.6vw, 2rem);
  margin-bottom: 1rem;
  text-wrap: balance;
}

.ficha__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--fuente-mono);
  font-size: 0.75rem;
  color: var(--gris-humo);
}

/* Ficha técnica: rejilla monoespaciada como la etiqueta de un taller */
.tabla-tecnica {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0;
  border-top: 1px solid var(--grafito-borde);
  font-family: var(--fuente-mono);
}
.tabla-tecnica div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.72rem 0.2rem;
  border-bottom: 1px solid var(--grafito-borde);
  font-size: 0.82rem;
}
.tabla-tecnica dt {
  color: var(--gris-humo);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 0;
}
.tabla-tecnica dd {
  margin: 0;
  color: var(--hueso);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
@media (min-width: 640px) {
  .tabla-tecnica { column-gap: clamp(1.5rem, 4vw, 3rem); }
}

/* Columna lateral de acciones */
.panel-lateral {
  position: sticky;
  top: calc(var(--cabecera-alto) + 1rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tarjeta-precio {
  background: var(--grafito-alto);
  border-radius: var(--radio);
  padding: 1.4rem;
}
.tarjeta-precio__precio {
  font-family: var(--fuente-display);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 600;
  color: var(--laton);
  line-height: 1;
}
.tarjeta-precio__financiado {
  font-family: var(--fuente-mono);
  font-size: 0.78rem;
  color: var(--gris-humo);
  margin-top: 0.55rem;
}
.tarjeta-precio__iva {
  display: inline-block;
  margin-top: 0.7rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--grafito-borde);
  border-radius: 2px;
  font-family: var(--fuente-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-humo);
}
.acciones {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.2rem;
}
.acciones__par { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

/* Barra fija de acciones en móvil */
.barra-movil {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 120;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem var(--aire) calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.94);
  border-top: 1px solid #1A1A1C;
}
.barra-movil__precio {
  font-family: var(--fuente-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--laton);
  line-height: 1.1;
  flex: none;
}
.barra-movil__precio small {
  display: block;
  font-family: var(--fuente-mono);
  font-size: 0.62rem;
  color: var(--gris-humo);
  font-weight: 400;
}
.barra-movil .boton {
  flex: 1;
  padding-inline: 0.7rem;
  font-size: 0.85rem;
  line-height: 1.15;
}
.barra-movil__icono {
  flex: none;
  width: 46px;
  padding: 0.85rem 0;
}
@media (max-width: 1000px) {
  .barra-movil { display: flex; }
  body.tiene-barra-movil { padding-bottom: 96px; }
  .panel-lateral { position: static; }
}

/* Aviso de vendido / reservado */
.sello {
  padding: 1.1rem 1.3rem;
  border-radius: var(--radio);
  border: 1px solid var(--rojo);
  background: var(--rojo-tenue);
  font-size: 0.92rem;
}
.sello--reservado { border-color: var(--laton); background: var(--laton-tenue); }
.sello strong {
  display: block;
  font-family: var(--fuente-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rojo-claro);
  margin-bottom: 0.4rem;
}
.sello--reservado strong { color: var(--laton-claro); }

/* --------------------------------------------------------------------------
   13 · Simulador de cuota
   -------------------------------------------------------------------------- */
.simulador {
  background: var(--grafito-alto);
  border-radius: var(--radio);
  padding: clamp(1.2rem, 3vw, 1.8rem);
}
.simulador h2,
.simulador h3 {
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
}
.simulador__texto { font-size: 0.88rem; color: var(--gris-humo); margin-bottom: 1.3rem; }
.simulador__campos { display: grid; gap: 0.9rem; }
.simulador__resultado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--grafito-borde);
}
.simulador__cuota {
  font-family: var(--fuente-display);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 2.8rem);
  font-weight: 600;
  color: var(--laton);
  line-height: 1;
}
.simulador__cuota span {
  font-family: var(--fuente-mono);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--gris-humo);
  margin-left: 0.4rem;
}
.simulador__desglose {
  font-family: var(--fuente-mono);
  font-size: 0.75rem;
  color: var(--gris-humo);
  text-align: right;
  line-height: 1.7;
}
.simulador__aviso {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--grafito-borde);
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--gris-tenue);
}
.simulador input[type='range'] {
  width: 100%;
  height: 3px;
  padding: 0;
  background: var(--grafito-borde);
  border: 0;
  border-radius: 3px;
  accent-color: var(--laton);
}
.simulador__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--fuente-mono);
  font-size: 0.78rem;
  margin-bottom: 0.3rem;
}
.simulador__fila span { color: var(--gris-humo); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; }
.simulador__fila output { color: var(--hueso); font-variant-numeric: tabular-nums; }
/* El TIN es un dato cerrado, no un control: se separa del resto con una
   línea y se alinea con las cifras de las que forma parte. */
.simulador__fila--fija {
  margin: 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--grafito-borde);
}
.simulador__fila--fija strong {
  color: var(--laton);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   14 · Comparador
   -------------------------------------------------------------------------- */
.comparador-envoltorio {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--grafito-borde) transparent;
}
.tabla-comparador {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-family: var(--fuente-mono);
  font-size: 0.82rem;
}
.tabla-comparador th,
.tabla-comparador td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--grafito-borde);
  text-align: left;
  vertical-align: top;
}
.tabla-comparador thead th {
  border-bottom: 1px solid var(--grafito-borde);
  vertical-align: bottom;
  background: var(--grafito);
}
.tabla-comparador tbody th {
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-humo);
  white-space: nowrap;
  position: sticky;
  left: 0;
  background: var(--grafito);
  z-index: 2;
  min-width: 148px;
}
.tabla-comparador td { color: var(--hueso); font-variant-numeric: tabular-nums; }
.tabla-comparador tr.es-diferente td { color: var(--laton-claro); }
.tabla-comparador tr:hover td { background: rgba(29, 32, 38, 0.5); }

.comparador-coche { min-width: 220px; }
.comparador-coche img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: 0.7rem;
}
.comparador-coche__titulo {
  font-family: var(--fuente-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 0.2rem;
}
.comparador-coche__titulo a { text-decoration: none; }
.comparador-coche__precio {
  font-family: var(--fuente-display);
  font-size: 1.25rem;
  color: var(--laton);
  margin-bottom: 0.5rem;
}
.comparador-hueco {
  display: grid;
  place-items: center;
  min-height: 240px;
  min-width: 220px;
  border: 1px dashed var(--grafito-borde);
  border-radius: var(--radio);
  color: var(--gris-tenue);
  text-decoration: none;
  font-size: 0.8rem;
  text-align: center;
  padding: 1rem;
}
.comparador-hueco:hover { border-color: var(--laton); color: var(--laton-claro); }

/* --------------------------------------------------------------------------
   15 · Bloques de contenido
   -------------------------------------------------------------------------- */
.cabecera-seccion {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.cabecera-seccion p { color: var(--gris-humo); max-width: 56ch; margin: 0; }
.cabecera-seccion h2 { margin-bottom: 0.3rem; }

.rejilla-razones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.2rem, 3vw, 2.5rem);
}
.razon { border-top: 1px solid var(--grafito-borde); padding-top: 1.2rem; }
.razon__numero {
  font-family: var(--fuente-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--laton);
  margin-bottom: 0.7rem;
}
.razon h3 { font-size: 1.12rem; margin-bottom: 0.45rem; }
.razon p { font-size: 0.92rem; color: var(--gris-humo); margin: 0; }

.bloque-grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--negro-suave);
  border-left: 3px solid var(--rojo);
  border-radius: var(--radio);
}
.bloque-grupo h2 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.bloque-grupo p { color: var(--gris-humo); max-width: 60ch; margin: 0; font-size: 0.94rem; }

.contenido-legal { max-width: var(--ancho-texto); }
.contenido-legal h2 { font-size: 1.4rem; margin-top: 2.2rem; }
.contenido-legal h3 { font-size: 1.1rem; margin-top: 1.6rem; }
.contenido-legal p, .contenido-legal li { color: #C9C6C1; font-size: 0.95rem; }

/* Foto de la exposición en "quiénes somos": ocupa el ancho de la columna de
   texto y se recorta en apaisado para no empujar el panel lateral. */
.foto-quienes { margin: 2.2rem 0 0; }
.foto-quienes img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio);
}

/* "Cómo trabajamos" en la portada: foto vertical de la exposición a la
   izquierda y el texto a la derecha, alineado arriba. En móvil se apilan,
   la foto encima. */
.razones-cabecera {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.razones-cabecera__foto { margin: 0; }
.razones-cabecera p + p { margin-top: 1rem; }
.razones-cabecera__foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radio);
}
@media (max-width: 759px) {
  .razones-cabecera__foto { max-width: 340px; }
}
@media (min-width: 760px) {
  .razones-cabecera { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .razones-cabecera__foto { max-width: 400px; }
}

.datos-contacto { list-style: none; padding: 0; margin: 0; }
.datos-contacto li {
  display: flex;
  gap: 0.9rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--grafito-borde);
  margin: 0;
}
/* Todo el bloque en Poppins. La etiqueta se queda pequeña y en versalitas para
   que siga leyéndose como etiqueta, pero ya no cambia de tipografía. */
.datos-contacto dt,
.datos-contacto__etiqueta {
  flex: none;
  width: 92px;
  font-family: var(--fuente-texto);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-humo);
  padding-top: 0.2rem;
}
/* El dato en sí: un teléfono, un correo, una dirección o un horario se leen
   mejor en la tipografía del texto que en monoespaciada. */
.datos-contacto li > a,
.datos-contacto li > span:not(.datos-contacto__etiqueta) {
  font-family: var(--fuente-texto);
  font-size: clamp(0.8rem, 0.97rem + 0.15vw, 1.0625rem);
  letter-spacing: normal;
  /* El `li` es flex y un hijo flex no baja de su contenido por defecto: sin
     esto, un correo largo se salía de la tarjeta en vez de partirse. */
  min-width: 0;
  overflow-wrap: anywhere;
}
/* En el móvil no hay sitio para dos columnas: los 92 px de la etiqueta dejaban
   el dato en un canal estrecho donde una dirección caía en cuatro líneas. Se
   apila —concepto arriba, valor debajo— y el dato recupera el ancho entero. */
@media (max-width: 620px) {
  .datos-contacto li { display: block; }
  .datos-contacto dt,
  .datos-contacto__etiqueta {
    display: block;
    width: auto;
    padding-top: 0;
    margin-bottom: 0.25rem;
  }
  /* El valor no necesita `display: block`: con la etiqueta en bloque ya cae en
     su propia línea, y así el enlace de WhatsApp conserva su `inline-flex` y no
     se le descoloca el icono. */
}

.estado-vacio {
  text-align: center;
  padding: clamp(2.5rem, 8vw, 5rem) 1rem;
  border: 1px dashed var(--grafito-borde);
  border-radius: var(--radio);
}
.estado-vacio h2 { font-size: 1.4rem; }
.estado-vacio p { color: var(--gris-humo); max-width: 46ch; margin-inline: auto; }

/* Paginación */
.paginacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.paginacion a,
.paginacion span {
  min-width: 42px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--grafito-borde);
  border-radius: var(--radio);
  font-family: var(--fuente-mono);
  font-size: 0.82rem;
  text-align: center;
  text-decoration: none;
  color: var(--gris-humo);
}
.paginacion a:hover { border-color: var(--laton); color: var(--laton-claro); }
.paginacion [aria-current='page'] {
  background: var(--hueso);
  border-color: var(--hueso);
  color: var(--negro);
}
.paginacion .es-hueco { border-color: transparent; }

/* --------------------------------------------------------------------------
   16 · Pie
   -------------------------------------------------------------------------- */
.pie {
  background: var(--negro);
  border-top: 1px solid #1A1A1C;
  padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  margin-top: var(--seccion);
}
.pie__rejilla {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
/* En el móvil las cuatro columnas no caben: la primera pide 240 px de mínimo y
   las demás 150, y la rejilla no encoge por debajo de eso, así que la última
   columna —la de contacto— se salía de la pantalla y el correo salía cortado.
   Una columna y a correr. */
@media (max-width: 620px) {
  .pie__rejilla { grid-template-columns: 1fr; }
}
.pie__logo img { height: 72px; width: auto; margin-bottom: 1.1rem; }
.pie__reclamo { color: var(--gris-humo); font-size: 0.88rem; max-width: 38ch; }
.pie h2 {
  font-family: var(--fuente-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris-tenue);
  margin-bottom: 1rem;
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 0.55rem; }
.pie a { font-size: 0.9rem; color: var(--gris-humo); text-decoration: none; }
.pie a:hover { color: var(--laton-claro); }
.pie__contacto { font-family: var(--fuente-mono); font-size: 0.82rem; color: var(--gris-humo); line-height: 1.9; overflow-wrap: anywhere; }
.pie__contacto a { font-family: var(--fuente-mono); font-size: 0.82rem; }

.pie__cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.4rem;
  border-top: 1px solid #1A1A1C;
  font-size: 0.78rem;
  color: var(--gris-tenue);
}
.pie__cierre a { font-size: 0.78rem; }

.redes { display: flex; gap: 0.6rem; }
.redes a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid #1F2024;
  border-radius: var(--radio);
  color: var(--gris-humo);
}
.redes a:hover { border-color: var(--rojo); color: var(--hueso); }
.redes svg { width: 17px; height: 17px; fill: currentColor; }

/* --------------------------------------------------------------------------
   17 · Preferencias del usuario
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__foto { opacity: 1; animation: none; }
  .coche:hover .coche__foto img { transform: none; }
}

@media print {
  .cabecera, .pie, .barra-movil, .acciones, .filtros, .visor { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; }
}