/* ==========================================================================
   Costagest Sur: hoja de estilos de la web pública

   Diseño "Burdeos y latón": cabecera y pie en granate muy oscuro, detalles en
   latón dorado, fondo gris cálido muy claro. La portada lleva un coche
   destacado a todo ancho y cada coche del listado es una foto grande con el
   nombre encima y el precio en una píldora blanca.
   Tipografía: Jost.

   Para cambiar los colores, edita las variables de arriba del todo (:root).
   ========================================================================== */

@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-wght-normal.928f4210aa48.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Tipografía */
  --fuente: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-titulos: var(--fuente);
  --peso-titulo: 500;
  --peso-cifras: 500;
  --espaciado-titulo: -0.005em;

  /* Colores de la página */
  --fondo: #F3F0EE;
  --superficie: #FFFFFF;
  --texto: #2A1A1F;
  --tenue: #6B5A5F;
  --acento: #7F2440;
  --acento-oscuro: #5E182F;
  --sobre-acento: #FFFFFF;
  --linea: #E0D8D6;
  --linea-fuerte: #B5A6A8;
  --rojo: #B3321F;
  --aviso-fondo: #F7EBE8;
  --foto-vacia: #E4DCDA;
  --galeria-fondo: #3A1220;

  /* Cabecera, franja y pie */
  --cabecera-fondo: #3A1220;
  --franja-fondo: #C9A15B;
  --franja-texto: #2A1A1F;
  --franja-enlace: #2A1A1F;
  --pie-fondo: #2B0D18;
  --pie-texto: #CDBCC1;
  --pie-enlace: #FFFFFF;
  --pie-linea: #4B2231;
  --pie-apagado: #A38E95;
  --marca-2: #D9B877;
  --marca-2-pie: #D9B877;

  /* Etiqueta de precio */
  --etiqueta-fondo: #FFFFFF;
  --etiqueta-texto: #2A1A1F;

  /* Colores sobre fondos oscuros (cabecera, portada, fotos) */
  --sobre-oscuro: #F0E6E8;
  --sobre-oscuro-tenue: #CDB9BF;
  --version-foto: #E4D6DA;
  --acento-claro: #D9B877;
  --boton-hero: #D9B877;
  --texto-boton-hero: #2A1A1F;
  --etiqueta-hero: #E9D3A5;
  --hero-foto-fondo: #2B0D18;
  --velo: 34, 10, 18;
  --sombra: 58, 18, 32;

  /* Formas */
  --ancho-max: 1280px;
  --radio-superficie: 16px;
  --radio-control: 10px;
  --radio-foto: 0;
}

/* ---------- Estructura común ---------- */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fondo);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; padding-bottom: 3rem; }

img { max-width: 100%; display: block; }

a { color: var(--acento); text-underline-offset: 0.18em; }
a:hover { color: var(--acento-oscuro); }

h1, h2, h3 { margin: 0; line-height: 1.12; font-family: var(--fuente-titulos); }

:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.salto {
  position: absolute;
  left: 1rem; top: -4rem;
  background: var(--superficie);
  color: var(--texto);
  padding: 0.6rem 1rem;
  z-index: 100;
}
.salto:focus { top: 1rem; }

.envoltorio {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ---------- Cabecera ---------- */

.franja { background: var(--franja-fondo); color: var(--franja-texto); font-size: 0.8125rem; }
.franja-interior {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 0.5rem;
}
.franja p { margin: 0; }
.franja-contacto { display: flex; gap: 1.5rem; margin-left: auto; }
.franja a { color: var(--franja-enlace); text-decoration: none; font-weight: 600; }
.franja a:hover { text-decoration: underline; color: var(--franja-enlace); }
.franja a:focus-visible, .pie a:focus-visible { outline-color: var(--etiqueta-fondo); }

.cabecera { background: var(--cabecera-fondo); border-bottom: 1px solid var(--linea); }
.cabecera-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1rem;
}

.marca {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28em;
  font-family: var(--fuente-titulos);
  font-size: 1.4rem;
  font-weight: 800;

  letter-spacing: -0.015em;
  text-decoration: none;
  color: var(--texto);
  line-height: 1;
}
.marca:hover { color: var(--texto); }
.marca-1 { color: inherit; }
.marca-2 { color: var(--marca-2); }
.marca-grande { font-size: 1.75rem; margin: 0 0 1.5rem; }

.menu { display: flex; gap: 1.75rem; }
.menu a {
  color: var(--texto);
  text-decoration: none;
  font-weight: 600;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
}
.menu a:hover { border-bottom-color: var(--acento); color: var(--texto); }

/* ---------- Botones y campos ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 1.25rem;
  border: 1.5px solid var(--texto);
  border-radius: var(--radio-control);
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.boton:hover { background: var(--texto); color: var(--superficie); }
.boton-principal { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.boton-principal:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); color: var(--sobre-acento); }
.boton-secundario { border-color: var(--acento); color: var(--acento); }
.boton-secundario:hover { background: var(--acento); color: var(--sobre-acento); }
.boton-ancho { width: 100%; }

.campo { margin: 0 0 1.1rem; padding: 0; border: 0; min-width: 0; }
.campo label, .campo legend {
  display: block;
  padding: 0;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  font-weight: 650;
}
input[type="search"], input[type="number"], input[type="password"], input[type="text"],
input[type="email"], input[type="tel"], textarea, select {
  width: 100%;
  min-height: 44px;
  padding: 0 0.75rem;
  font: inherit;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-control);
}
textarea { padding: 0.65rem 0.75rem; resize: vertical; line-height: 1.5; }
select { padding-right: 0.5rem; }
input::placeholder, textarea::placeholder { color: var(--tenue); opacity: 0.8; }

.campo-grupo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem 0.75rem; }
.campo-grupo legend { grid-column: 1 / -1; float: left; width: 100%; }
.campo .opcion {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.9375rem; font-weight: 400;
  padding: 0.3rem 0; margin: 0; cursor: pointer;
}
.opcion input { accent-color: var(--acento); width: 1.05rem; height: 1.05rem; margin: 0; flex: none; }

/* ---------- Cabecera de página y catálogo ---------- */

.cab-pagina { padding: 2.25rem 0 1.5rem; }
.cab-pagina h1 {
  font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.65rem);
  font-weight: var(--peso-titulo);

  letter-spacing: var(--espaciado-titulo);
  max-width: 40ch;
}
.cab-pagina-apoyo { margin: 0.75rem 0 0; color: var(--tenue); max-width: 58ch; }

.catalogo { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }

.filtros-boton {
  width: 100%;
  min-height: 46px;
  font: inherit;
  font-weight: 650;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-control);
  cursor: pointer;
  text-align: left;
  padding: 0 1rem;
}
.filtros-form {
  display: none;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-superficie);
  padding: 1.25rem;
  margin-top: 0.5rem;
}
.filtros-form.abierto { display: block; }
.filtros-acciones { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.enlace-suave { color: var(--tenue); font-size: 0.9375rem; }

.barra-resultados {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.cuenta { margin: 0; font-size: 1.15rem; font-weight: 700; }
.orden-form { display: flex; align-items: center; gap: 0.6rem; }
.orden-form label { font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.orden-form select { width: auto; min-width: 12rem; }

/* ---------- Fila de coche ---------- */

.fila {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "foto" "cabecera" "datos" "precio";
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-superficie);
  overflow: hidden;
  margin-bottom: 1rem;
}
.fila:hover { border-color: var(--texto); }
.fila:focus-within { outline: 3px solid var(--acento); outline-offset: 2px; }

.fila-foto { grid-area: foto; position: relative; aspect-ratio: 4 / 3; background: var(--foto-vacia); }
.fila-foto img { width: 100%; height: 100%; object-fit: cover; }
.sin-foto {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--tenue); font-size: 0.9375rem;
}

.fila-cabecera { grid-area: cabecera; padding: 1.1rem 1.25rem 0; min-width: 0; }
.fila-titulo {
  font-size: 1.5rem;
  font-weight: 700;

  letter-spacing: -0.015em;
}
.enlace-fila { color: var(--texto); text-decoration: none; }
.enlace-fila::after { content: ""; position: absolute; inset: 0; }
.enlace-fila:focus-visible { outline: none; }
.fila:hover .enlace-fila { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.fila-version { margin: 0.3rem 0 0; color: var(--tenue); }

.datos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: 600;
}
.fila-datos { grid-area: datos; padding: 0.9rem 1.25rem 0; align-self: end; }

.fila-precio { grid-area: precio; padding: 1rem 1.25rem 1.25rem; }

/* Etiqueta de precio */
.etiqueta-precio {
  --punta: 0.9rem;
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0.55rem 1rem 0.55rem calc(var(--punta) + 1.1rem);
  background: var(--etiqueta-fondo);
  color: var(--etiqueta-texto);
  font-family: var(--fuente-titulos);
  font-size: 1.9rem;
  font-weight: var(--peso-cifras);

  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  clip-path: polygon(var(--punta) 0, 100% 0, 100% 100%, var(--punta) 100%, 0 50%);
}
.etiqueta-precio::before {
  content: "";
  position: absolute;
  left: calc(var(--punta) * 0.85);
  top: 50%;
  width: 0.5rem; height: 0.5rem;
  margin-top: -0.25rem;
  border-radius: 50%;
  background: var(--superficie);
}
.etiqueta-grande { --punta: 1.2rem; font-size: 2.75rem; padding-block: 0.7rem; }
.etiqueta-grande::before { width: 0.65rem; height: 0.65rem; margin-top: -0.325rem; }

.precio-antes { margin: 0 0 0.4rem; color: var(--tenue); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.precio-antes s { text-decoration-thickness: 1.5px; }

/* Sellos de estado */
.sello {
  position: absolute;
  left: 0; top: 0.9rem;
  padding: 0.3rem 0.8rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  background: var(--rojo);
  z-index: 2;
}
.sello-vendido { background: #1D2733; }
.sello-grande { top: 1.1rem; font-size: 0.9375rem; padding: 0.4rem 1rem; }

/* Etiqueta ambiental de la DGT */
.dgt {
  display: inline-grid;
  place-items: center;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  vertical-align: middle;
}
.dgt-0 { background: #0B6FB6; }
.dgt-eco { background: linear-gradient(135deg, #0B6FB6 50%, #1E873A 50%); font-size: 0.5rem; letter-spacing: -0.02em; }
.dgt-c { background: #1E873A; }
.dgt-b { background: #F2C200; color: #1D2733; }
.dgt-nombre { margin-left: 0.35rem; }

.vacio {
  background: var(--superficie);
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio-superficie);
  padding: 2.5rem 1.5rem;
}
.vacio h2 { font-size: 1.35rem;margin-bottom: 0.5rem; }
.vacio p { margin: 0 0 1rem; color: var(--tenue); max-width: 52ch; }
.vacio p:last-child { margin-bottom: 0; }

.paginacion { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1.5rem; }

/* ---------- Ficha del coche ---------- */

.migas { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; padding: 1.25rem 0 1rem; font-size: 0.9375rem; color: var(--tenue); }
.migas a { color: var(--tenue); }
.migas a:hover { color: var(--texto); }
.migas a::after { content: "/"; margin-left: 0.5rem; color: var(--linea-fuerte); text-decoration: none; display: inline-block; }
.migas span { color: var(--texto); font-weight: 600; }

.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "galeria" "panel" "detalle";
  gap: 1.25rem;
}
.ficha-galeria { grid-area: galeria; min-width: 0; }
.ficha-panel { grid-area: panel; min-width: 0; }
.ficha-detalle { grid-area: detalle; min-width: 0; }

.galeria {
  position: relative;
  background: var(--galeria-fondo);
  border-radius: var(--radio-superficie);
  overflow: hidden;
}
.galeria-pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  aspect-ratio: 4 / 3;
  overscroll-behavior-x: contain;
}
.galeria-pista::-webkit-scrollbar { display: none; }
.galeria-pista:focus-visible { outline-offset: -3px; outline-color: var(--etiqueta-fondo); }
.diapo { flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: center; }
.diapo-ampliar {
  display: block;
  width: 100%; height: 100%;
  padding: 0; border: 0;
  background: none;
  cursor: zoom-in;
}
.diapo-ampliar img { width: 100%; height: 100%; object-fit: contain; }
.diapo-ampliar:focus-visible { outline-color: var(--etiqueta-fondo); outline-offset: -3px; }

.galeria-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #1D2733;
  cursor: pointer;
  z-index: 3;
}
.galeria-flecha:hover { background: #fff; color: var(--acento); }
.galeria-flecha:focus-visible { outline-color: var(--etiqueta-fondo); }
.galeria-ant { left: 0.75rem; }
.galeria-sig { right: 0.75rem; }
.galeria-contador {
  position: absolute;
  right: 0.75rem; bottom: 0.75rem;
  margin: 0;
  padding: 0.2rem 0.65rem;
  border-radius: 99px;
  background: rgba(18, 25, 32, 0.78);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.galeria-vacia {
  display: grid; place-items: center;
  aspect-ratio: 4 / 3;
  color: #B7C0C8;
}

.miniaturas {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.miniatura {
  flex: 0 0 88px;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  border-radius: var(--radio-control);
  overflow: hidden;
  background: var(--foto-vacia);
  opacity: 0.7;
  cursor: pointer;
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura:hover { opacity: 1; }
.miniatura.activa { opacity: 1; outline: 2px solid var(--acento); outline-offset: 2px; }

.panel {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-superficie);
  padding: 1.5rem;
}
.panel-titulo {
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2rem);
  font-weight: var(--peso-titulo);

  letter-spacing: var(--espaciado-titulo);
}
.panel-version { margin: 0.4rem 0 0; color: var(--tenue); }
.panel-precio { margin: 1.4rem 0; }
.panel-acciones { display: grid; gap: 0.6rem; margin-bottom: 1.25rem; }
.aviso {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  background: var(--aviso-fondo);
  color: var(--texto);
  border-left: 4px solid var(--rojo);
  font-size: 0.9375rem;
}
.datos-panel { margin: 0 0 1.25rem; padding: 0 0 1.1rem; border-bottom: 1px solid var(--linea); }

/* Formulario de contacto */
.contactar { margin: 0; }
.contactar-titulo { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.9rem; }
.campo-doble { display: grid; grid-template-columns: 1fr; gap: 0 0.75rem; }
.ayuda-campo { margin: -0.4rem 0 1rem; font-size: 0.8125rem; color: var(--tenue); }
.campo-acepto { margin-bottom: 1rem; }
.campo-acepto .opcion { align-items: flex-start; font-size: 0.875rem; line-height: 1.4; }
.campo-acepto .opcion input { margin-top: 0.15rem; }
.error { margin: 0 0 1rem; padding: 0.7rem 0.9rem; background: var(--aviso-fondo); color: var(--texto); border-left: 4px solid var(--rojo); font-size: 0.9375rem; }
.error-campo { margin: 0.3rem 0 0; font-size: 0.8125rem; font-weight: 600; color: var(--rojo); }
.con-error input:not([type="checkbox"]), .con-error textarea { border-color: var(--rojo); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enviado { padding: 0.25rem 0; }
.enviado p { margin: 0; color: var(--tenue); }

.pagina-contacto { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
.contacto-datos h2 { font-size: 1.05rem; margin: 0 0 0.35rem; }
.contacto-datos p { margin: 0 0 1.25rem; color: var(--tenue); }

.bloque { margin-top: 1.75rem; }
.bloque h2, .relacionados h2 {
  font-size: 1.4rem;
  font-weight: 700;

  letter-spacing: -0.015em;
  margin-bottom: 0.9rem;
}
.ficha-detalle .bloque:first-child { margin-top: 0.5rem; }

.tecnica { margin: 0; display: grid; grid-template-columns: 1fr; column-gap: 3rem; }
.tecnica > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linea);
}
.tecnica dt { color: var(--tenue); }
.tecnica dd { margin: 0; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }

.texto { max-width: 68ch; line-height: 1.7; }
.texto p { margin: 0 0 1em; }
.texto-legal h2 { font-size: 1.15rem; margin: 1.5rem 0 0.4rem; }
.texto-legal p { color: var(--texto); }

.videos { display: grid; gap: 1rem; }
.videos video { width: 100%; max-height: 560px; background: #000; border-radius: var(--radio-superficie); }

.relacionados { margin-top: 3rem; }

/* Barra de contacto fija en el móvil */
.barra-movil {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--superficie);
  border-top: 1px solid var(--linea-fuerte);
}
.barra-precio {
  margin: 0 auto 0 0;
  font-family: var(--fuente-titulos);
  font-size: 1.6rem;
  font-weight: var(--peso-cifras);

  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.barra-movil .boton { min-height: 44px; padding: 0 1rem; }
body:has(.barra-movil) .pie { padding-bottom: 5.5rem; }

/* Visor de foto a pantalla completa */
.visor {
  width: 100vw; height: 100vh;
  max-width: none; max-height: none;
  margin: 0; padding: 0;
  border: 0;
  background: #0B1015;
  color: #fff;
}
.visor[open] { display: grid; place-items: center; }
.visor::backdrop { background: rgba(8, 12, 16, 0.92); }
.visor img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; }
.visor-cerrar {
  position: absolute; top: 0.75rem; right: 0.75rem;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #1D2733;
  cursor: pointer;
  z-index: 3;
}
.visor-cerrar:focus-visible { outline-color: var(--etiqueta-fondo); }

/* ---------- Pie ---------- */

.pie { background: var(--pie-fondo); color: var(--pie-texto); padding: 2.5rem 0 1.25rem; font-size: 0.9375rem; }
.pie a { color: var(--pie-enlace); }
.pie p { margin: 0 0 0.35rem; }
.pie-interior { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
.pie-marca {
  font-family: var(--fuente-titulos);
  font-size: 1.4rem; font-weight: 800;letter-spacing: -0.015em;
  color: var(--pie-enlace); margin-bottom: 0.6rem !important; line-height: 1;
}
.pie-marca .marca-2 { color: var(--marca-2-pie); margin-left: 0.28em; }
.pie-titulo { font-size: 1rem; font-weight: 700; color: var(--pie-enlace); margin: 0 0 0.6rem; }
.pie-legal { margin-top: 2rem; font-size: 0.8125rem; color: var(--pie-apagado); }
.pie-legal p { margin: 0; padding-top: 1rem; border-top: 1px solid var(--pie-linea); }
.pie-legal a { color: var(--pie-apagado); }

/* ---------- Pantalla de acceso privado ---------- */

.pagina-acceso { display: grid; place-items: center; padding: 1.25rem; }
.acceso {
  width: min(420px, 100%);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-superficie);
  padding: 2rem;
}
.acceso-titulo { font-size: 1.5rem;font-weight: var(--peso-titulo); letter-spacing: -0.015em; }
.acceso-texto { color: var(--tenue); margin: 0.5rem 0 1.5rem; }

/* ==========================================================================
   Pantallas medianas y grandes
   ========================================================================== */

@media (min-width: 600px) {
  .fila {
    grid-template-columns: 38% minmax(0, 1fr);
    grid-template-areas: "foto cabecera" "foto datos" "foto precio";
    grid-template-rows: auto 1fr auto;
  }
  .fila-foto { aspect-ratio: auto; min-height: 190px; }
  .tecnica { grid-template-columns: 1fr 1fr; }
  .campo-doble { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .catalogo { grid-template-columns: 270px minmax(0, 1fr); gap: 2.5rem; }
  .filtros { position: sticky; top: 1rem; }
  .filtros-boton { display: none; }
  .filtros-form { display: block; margin-top: 0; }

  .fila {
    grid-template-columns: 300px minmax(0, 1fr) auto;
    grid-template-areas: "foto cabecera precio" "foto datos datos";
    grid-template-rows: auto 1fr;
  }
  .fila-foto { min-height: 0; aspect-ratio: 4 / 3; }
  .fila-cabecera { padding: 1.25rem 1rem 0 1.5rem; }
  .fila-datos { padding: 1rem 1.5rem 1.25rem; }
  .fila-precio {
    padding: 1.25rem 1.5rem 0 0;
    display: flex; flex-direction: column; align-items: flex-end;
  }
  .fila-titulo { font-size: 1.65rem; }

  .pie-interior { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; }
  .pagina-contacto { grid-template-columns: minmax(0, 520px) 1fr; gap: 3rem; }
}

@media (min-width: 1000px) {
  .ficha {
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas: "galeria panel" "detalle panel";
    column-gap: 2.5rem;
    align-items: start;
  }
  .ficha-panel { align-self: start; }
  .galeria-pista, .galeria-vacia { aspect-ratio: 16 / 10; }
  .miniatura { flex-basis: 104px; }
  .barra-movil { display: none; }
  body:has(.barra-movil) .pie { padding-bottom: 1.25rem; }
}

/* El panel se queda fijo al bajar solo si cabe entero en la pantalla */
@media (min-width: 1000px) and (min-height: 880px) {
  .ficha-panel { position: sticky; top: 1rem; }
}

@media (max-width: 599px) {
  .franja-texto { display: none; }
  .franja-contacto { margin-left: 0; width: 100%; justify-content: space-between; }
  .menu { gap: 1.25rem; }
  .marca { font-size: 1.2rem; }
  .orden-form { width: 100%; }
  .orden-form select { flex: 1; min-width: 0; }
  .etiqueta-grande { font-size: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Disposición: coche destacado, fotos con nombre encima ---------- */

body { font-size: 0.96875rem; }
.cab-pagina h1, .panel-titulo { font-weight: 700; }

/* ---------- Cabecera en verde petróleo ---------- */

.franja { font-size: 0.8125rem; }
.franja a { font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.franja a:focus-visible { outline-color: #fff; }

.cabecera { border-bottom: 0; }
.cabecera-interior { padding-block: 1.1rem; }
.marca { color: #fff; font-size: 1.4rem; font-weight: 700;letter-spacing: -0.035em; }
.marca:hover { color: #fff; }
.menu a { color: var(--sobre-oscuro); font-weight: 600; font-size: 0.9375rem; border-bottom-width: 2px; }
.menu a:hover { color: #fff; border-bottom-color: var(--acento-claro); }
.cabecera :focus-visible { outline-color: var(--acento-claro); }

/* ---------- Botones y campos ---------- */

.boton { border-radius: var(--radio-control); border-width: 1.5px; font-weight: 600; min-height: 48px; }
.boton:hover { background: var(--texto); color: #fff; border-color: var(--texto); }
.boton-principal { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton-principal:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }
.boton-secundario { border-color: var(--texto); color: var(--texto); }
.boton-secundario:hover { background: var(--texto); color: #fff; }

input[type="search"], input[type="number"], input[type="password"], input[type="text"],
input[type="email"], input[type="tel"], textarea, select {
  border-radius: var(--radio-control);
  border-color: var(--linea-fuerte);
  min-height: 46px;
}
input:focus, textarea:focus, select:focus { border-color: var(--acento); }
.campo label, .campo legend { font-weight: 600; }

/* ---------- Coche destacado de la portada ---------- */

.destacado-hero {
  display: block;
  background: var(--cabecera-fondo);
  color: #fff;
  overflow: hidden;
}
.destacado-interior { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: 0; }
.destacado-texto { padding-block: 2.25rem 2.5rem; position: relative; z-index: 1; }
.destacado-etiqueta {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.3rem 0.85rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--etiqueta-hero);
  font-size: 0.8125rem;
  font-weight: 600;
}
.destacado-titulo {
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.destacado-version { margin: 0.6rem 0 0; color: var(--sobre-oscuro-tenue); font-size: 1.0625rem; }
.destacado-datos { margin: 1.25rem 0 0; gap: 0.3rem 1.5rem; color: var(--sobre-oscuro); font-weight: 500; }
.destacado-precio {
  margin: 1.5rem 0 1.5rem;
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.destacado-foto { margin: 0 -20px; aspect-ratio: 16 / 10; background: var(--hero-foto-fondo); }
.destacado-foto img { width: 100%; height: 100%; object-fit: cover; }
.destacado-hero .boton-principal { background: var(--boton-hero); border-color: var(--boton-hero); color: var(--texto-boton-hero); }
.destacado-hero .boton-principal:hover { background: #fff; border-color: #fff; color: var(--texto-boton-hero); }
.destacado-hero :focus-visible { outline-color: var(--acento-claro); }

/* ---------- Catálogo ---------- */

.cab-pagina { padding: 2.25rem 0 1.5rem; }
.cab-pagina h1 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); letter-spacing: -0.035em; max-width: 24ch; }

.filtros-boton { border-radius: var(--radio-control); font-weight: 600; }
.filtros-form { border-radius: var(--radio-superficie); border: 0; padding: 1.5rem; }
.cuenta { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }

/* Cada coche es una foto grande con el nombre encima */
.listado { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.listado .vacio { grid-column: 1 / -1; }

.fila {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
  grid-template-rows: auto auto;
  margin: 0;
  border: 0;
  border-radius: var(--radio-superficie);
  background: var(--superficie);
  box-shadow: 0 1px 0 var(--linea);
}
.fila:hover { border-color: transparent; box-shadow: 0 10px 26px rgba(var(--sombra), 0.16); }
.fila-foto { grid-area: 1 / 1; aspect-ratio: 4 / 3; min-height: 0; }
.fila-foto img { transition: transform 0.5s ease; }
.fila:hover .fila-foto img { transform: scale(1.04); }
.fila-foto::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(to top, rgba(var(--velo), 0.9), rgba(var(--velo), 0));
  pointer-events: none;
}
.fila-cabecera {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  z-index: 1;
  padding: 0 1.25rem 1.1rem;
  color: #fff;
}
.fila-titulo { font-size: 1.35rem; font-weight: 700;letter-spacing: -0.03em; }
.enlace-fila { color: #fff; }
.enlace-fila::after { z-index: 3; }
.fila:hover .enlace-fila { text-decoration: none; }
.fila-version { color: var(--version-foto); font-size: 0.875rem; margin-top: 0.2rem; }

.fila-precio {
  grid-area: 1 / 1;
  justify-self: end;
  align-self: start;
  position: relative;
  z-index: 1;
  padding: 0.9rem 0.9rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.etiqueta-precio {
  --punta: 0;
  clip-path: none;
  padding: 0.4rem 0.95rem;
  border-radius: 99px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  box-shadow: 0 2px 8px rgba(var(--velo), 0.25);
}
.etiqueta-precio::before { display: none; }
.fila-precio .precio-antes {
  order: 2;
  margin: 0.35rem 0 0;
  padding: 0.1rem 0.6rem;
  border-radius: 99px;
  background: rgba(var(--velo), 0.72);
  color: #fff;
  font-size: 0.78rem;
}
.panel-precio .precio-antes { margin: 0 0 0.5rem; font-size: 0.9375rem; }
.fila-datos {
  grid-area: 2 / 1;
  padding: 0.95rem 1.25rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tenue);
  gap: 0.2rem 1.1rem;
  align-self: stretch;
}
.fila-datos .dgt { width: 1.45rem; height: 1.45rem; font-size: 0.7rem; }
.fila-datos .dgt-eco { font-size: 0.45rem; }

.sello { top: 0.9rem; left: 0.9rem; border-radius: 99px; padding: 0.3rem 0.85rem; z-index: 4; }
.sello-grande { top: 1rem; left: 1rem; }

.vacio { border-radius: var(--radio-superficie); border-style: solid; border-color: var(--linea); }
.vacio h2 {letter-spacing: -0.03em; }
.paginacion { margin-top: 2rem; }

/* ---------- Ficha ---------- */

.galeria { border-radius: var(--radio-superficie); }
.galeria-flecha { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.miniatura { border-radius: 8px; }
.panel { border: 0; border-radius: var(--radio-superficie); padding: 1.75rem; box-shadow: 0 1px 0 var(--linea); }
.panel-titulo { letter-spacing: -0.04em; }
.panel-precio { margin: 1.3rem 0; }
.etiqueta-grande {
  font-size: 2.1rem;
  padding: 0.55rem 1.35rem;
  background: var(--texto);
  color: #fff;
  box-shadow: none;
}
.aviso { border-radius: 0 var(--radio-control) var(--radio-control) 0; }
.bloque h2, .relacionados h2 {font-weight: 700; letter-spacing: -0.035em; font-size: 1.35rem; }
.tecnica { background: var(--superficie); border-radius: var(--radio-superficie); padding: 0.4rem 1.5rem; }
.tecnica > div:last-child, .tecnica > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }

.contactar-titulo { font-size: 1.1rem; letter-spacing: -0.02em; }

.relacionados .fila-datos { padding-bottom: 1rem; }

.barra-movil { box-shadow: 0 -8px 24px rgba(var(--sombra), 0.14); border-top: 0; }
.barra-precio { letter-spacing: -0.03em; }

/* ---------- Pie ---------- */

.pie { padding-top: 3rem; }
.pie-marca { font-weight: 700;letter-spacing: -0.035em; }
.pie-titulo { font-weight: 600; }
.pie :focus-visible { outline-color: var(--acento-claro); }

.acceso { border-radius: var(--radio-superficie); border: 0; box-shadow: 0 1px 0 var(--linea); }
.acceso-titulo {letter-spacing: -0.035em; }

/* ==========================================================================
   Pantallas medianas y grandes
   ========================================================================== */

@media (min-width: 600px) {
  .listado { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .fila {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    grid-template-rows: auto auto;
  }
  .fila-foto { grid-area: 1 / 1; min-height: 0; aspect-ratio: 4 / 3; }
  .fila-cabecera { grid-area: 1 / 1; }
  .fila-precio { grid-area: 1 / 1; }
  .fila-datos { grid-area: 2 / 1; }
  .destacado-foto { margin-inline: 0; }
}

@media (min-width: 900px) {
  .fila {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    grid-template-rows: auto auto;
  }
  .fila-foto { grid-area: 1 / 1; aspect-ratio: 4 / 3; }
  .fila-cabecera { grid-area: 1 / 1; padding: 0 1.25rem 1.1rem; }
  .fila-precio { grid-area: 1 / 1; padding: 0.9rem 0.9rem 0 0; display: flex; }
  .fila-datos { grid-area: 2 / 1; padding: 0.95rem 1.25rem 1.1rem; }
  .fila-titulo { font-size: 1.35rem; }

  .catalogo { gap: 2rem; grid-template-columns: 280px minmax(0, 1fr); }
  .filtros-form { box-shadow: 0 1px 0 var(--linea); }

  .destacado-interior { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: stretch; }
  .destacado-texto { padding-block: 3.5rem; align-self: center; padding-right: 2rem; }
  .destacado-foto {
    aspect-ratio: auto;
    min-height: 420px;
    margin-right: calc((100vw - min(100vw, var(--ancho-max))) / -2 - 20px);
    clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  }
  .pagina-contacto { grid-template-columns: minmax(0, 520px) 1fr; }
}

@media (min-width: 1000px) {
  .ficha { grid-template-columns: minmax(0, 1fr) 400px; }
}

@media (max-width: 599px) {
  .etiqueta-grande { font-size: 1.9rem; }
  .menu a { font-size: 0.875rem; }
}

/* ---------- Ajustes de tipografía y logo ---------- */

body { font-size: 1.0625rem; }
.franja a:focus-visible { outline-color: #2A1A1F; }

/* Títulos: peso medio y sin apretar las letras */
.fila-titulo, .destacado-titulo, .panel-titulo, .cab-pagina h1, .bloque h2, .relacionados h2,
.contactar-titulo, .acceso-titulo, .vacio h2, .pie-titulo, .cuenta {
  font-weight: 500;
  letter-spacing: -0.005em;
}
.destacado-titulo { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.2rem); letter-spacing: -0.015em; line-height: 1; }
.fila-titulo { font-size: 1.5rem; }
.etiqueta-precio, .destacado-precio, .barra-precio { font-weight: 500; letter-spacing: 0; }
.etiqueta-precio { font-size: 1.2rem; }
.etiqueta-grande { font-size: 2.3rem; }
.boton { font-weight: 500; letter-spacing: 0.04em; }
.boton-principal:hover { background: var(--acento-oscuro); }

/* Menú en mayúsculas pequeñas y espaciadas */
.menu a { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8125rem; font-weight: 500; }

/* Logo */
.marca, .pie-marca { letter-spacing: normal; }
.logo { display: inline-flex; align-items: center; gap: 0.85rem; line-height: 1; }
.logo-simbolo { flex: none; }
.logo-nombre {
  display: block;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.27em;
  text-transform: uppercase;
}
.logo-sur {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.45rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.7em;
  text-transform: uppercase;
  color: var(--marca-2);
}
.logo-sur::after { content: ""; flex: 1; height: 1px; background: var(--marca-2); opacity: 0.55; }
.pie-marca .logo { margin-bottom: 0.4rem; }

@media (max-width: 599px) {
  .logo-nombre { font-size: 0.95rem; letter-spacing: 0.2em; }
  .logo-simbolo { width: 36px; height: 36px; }
  .menu a { letter-spacing: 0.1em; font-size: 0.75rem; }
}

/* En la pantalla de acceso el logo va sobre fondo claro */
.acceso { --marca-2: #8A6428; }
.acceso .marca, .acceso .marca:hover { color: var(--texto); }