/* ============================================================
 *  ESTILOS DEL SITIO — TEMA "PAPEL, TINTA NEGRA Y COBRE"
 *  ────────────
 *  Papel cálido, negro mate para los bloques oscuros, acento
 *  cobre y títulos serif de aire editorial. Los colores y demás
 *  valores se manejan con las "variables": si querés cambiar
 *  la paleta, tocá solo ese bloque.
 * ============================================================ */

/* Tipografía numérica: Inter (licencia libre OFL, archivo en /fonts).
 * Cifras tabulares y firmes — pesos, años, kilómetros, logo y títulos.
 * Es un archivo VARIABLE: cubre todos los pesos con una sola descarga. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;   /* variable: de flaca a negra */
  font-display: swap;
}

:root {
  /* ============================================================
   *  PALETA — TEMA "PAPEL, NEGRO MATE Y COBRE"
   *  ────────────
   *  Un papel cálido de fondo, negro mate para los bloques
   *  oscuros y un cobre quemado como único acento de
   *  marca. El verde queda solo en el botón de WhatsApp.
   *  Cambiar el tema es tocar solo este bloque.
   * ============================================================ */

  /* ---------- Tinta sobre fondos claros ---------- */
  --color-tinta: #212429;        /* texto principal (títulos, precios) */
  --color-tinta-media: #4a4f57;  /* texto de lectura: cuerpos y párrafos */
  --color-tinta-suave: #7a7f86;  /* texto secundario (avisos, apuntes) */

  /* ---------- Fondos claros (papel) ---------- */
  --color-carta: rgba(255, 253, 248, 0.94);  /* tarjetas: vidrio casi papel */
  --color-linea: #dcd3c1;        /* bordes finos, como renglones */

  /* ---------- Negro mate (pasos, pie, visor) ---------- */
  --color-oscuro: #141518;        /* negro mate, sin tinte */
  --color-oscuro-claro: #1e2126;

  /*   Textos sobre negro mate, en tres intensidades parejas */
  --claro: #f3f1ec;
  --claro-medio: #cbcdd1;
  --claro-suave: #a4a7ad;

  /*   Vidrio gris: para la pastilla "Negociable" (suena a 'sin apuro') */
  --vidrio-gris: rgba(160, 165, 172, 0.16);
  --vidrio-gris-borde: rgba(160, 165, 172, 0.34);

  /* ---------- La familia cobre: el único acento de la marca ---------- */
  /*   Base de COBRE VIVO para las capas translúcidas:
          rgba(var(--color-acento-vivo-rgb), 0.3) */
  --color-acento-vivo-rgb: 192, 122, 69;

  --color-acento: #97451f;           /* quemado: acento sobre papel
                                        (kicker, hovers, botón de borde) */
  --color-acento-vivo: #c07a45;      /* vivo: focos, sellos, botón del catálogo */
  --color-ambar-hover: #d18d59;      /* cuando el botón cobre se prende */
  --color-ambar-claro: #e5b189;      /* cobre iluminado sobre negro mate */
  --color-ambar-pill: rgba(226, 173, 124, 0.92);  /* pastillas: pin y "oferta" */
  --color-ambar-pill-texto: #3d1d08;              /* tinta de esas pastillas */

  /* ---------- Verde de la oficina (WhatsApp) ---------- */
  --color-whatsapp: #1a6b4a;
  --color-whatsapp-oscuro: #12503a;
  --color-whatsapp-brillo: rgba(26, 107, 74, 0.26);   /* sombra del botón */

  /* ---------- Aviso de demostración (deriva cobre-papel) ---------- */
  --aviso-ambar-fondo: #fbf3e8;
  --aviso-ambar-borde: #e8d7c0;
  --aviso-ambar-tinta: #6f451c;

  --radio: 7px;
  --sombra: 0 1px 2px rgba(33, 36, 42, 0.05), 0 14px 30px -22px rgba(33, 36, 42, 0.4);
  --sombra-hover: 0 2px 4px rgba(33, 36, 42, 0.06), 0 26px 44px -26px rgba(33, 36, 42, 0.5);

  --ancho-contenedor: 1250px;   /* proporciones del diseño: contenido ancho, cartel pegado a la izquierda */
  --fuente: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-numeros: "Inter", var(--fuente);   /* cifras y marcas */
  /* Títulos de aire editorial: serif clásica del sistema */
  --fuente-titulos: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

/* ---------- Reseteo básico ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: #0e1013;  /* respaldo por si la foto no carga */
}

body {
  font-family: var(--fuente);
  color: var(--color-tinta);
  background: transparent;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Fondo fotográfico fijo ----------
   La escena del atardecer queda clavada detrás de TODA la página:
   al desplazarse, el contenido corre y la foto se queda quieta
   (paralaje suave). El velo oscuro la apaga justo para que cada
   sección, pintada como un vidrio translúcido, se lea sin esfuerzo.
   Si la foto no está, el último degradado pisa sin romper. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(14, 16, 19, 0.86) 0%,
      rgba(14, 16, 19, 0.6) 32%,
      rgba(10, 11, 13, 0.64) 100%),
    url("../img/hero-fondo.jpg") center 40% / cover no-repeat,
    linear-gradient(160deg, #191b1e 0%, #0e1013 100%);
  pointer-events: none;
}

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

.contenedor {
  max-width: var(--ancho-contenedor);
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================================
 *  Encabezado
 * ============================================================ */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(13, 15, 17, 0.78);          /* vidrio negro mate */
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid rgba(246, 241, 230, 0.08);
}

.barra-cabecera {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 76px;
}

.logo {
  font-family: var(--fuente-titulos);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--claro);
  text-decoration: none;
  margin-right: auto;
}

.logo span { color: var(--color-ambar-claro); }  /* punto de marca: cobre claro */

.navegacion {
  display: flex;
  gap: 44px;
}

.navegacion a {
  color: var(--claro-medio);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.015em;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.navegacion a:hover {
  color: var(--color-ambar-claro);
  border-bottom-color: var(--color-ambar-claro);
}

/* Pastilla de la cabecera: ámbar cálido más claro que el resto (diseño) */
.cabecera .boton-ambar {
  background: #eabd7f;
  color: #2a1a05;
}

.cabecera .boton-ambar:hover {
  background: #f0c88f;
  box-shadow: 0 8px 20px rgba(192, 122, 69, 0.35);
}

/* ============================================================
 *  Botones
 * ============================================================ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 0;
  font: inherit;
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.22s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0) scale(0.97); }   /* "hundidito" al tocar */

.boton-whatsapp {
  background: var(--color-whatsapp);
  color: #fff;
  box-shadow: 0 8px 20px -12px var(--color-whatsapp-brillo);
}

.boton-whatsapp:hover {
  background: var(--color-whatsapp-oscuro);
  box-shadow: 0 12px 26px -12px var(--color-whatsapp-brillo);
}

/* Botón secundario sobre papel: invita sin competir con el verde */
.boton-fantasma {
  background: transparent;
  color: var(--color-oscuro);
  border: 1px solid rgba(18, 20, 23, 0.42);
}

.boton-fantasma:hover {
  border-color: rgba(18, 20, 23, 0.8);
  background: rgba(18, 20, 23, 0.05);
}

/* Variante cobre: para el segundo servicio, sobre fondo oscuro */
.boton-fantasma-ambar {
  border-color: rgba(var(--color-acento-vivo-rgb), 0.85);
  color: var(--color-ambar-claro);
}

.boton-fantasma-ambar:hover {
  border-color: rgba(var(--color-acento-vivo-rgb), 1);
  background: rgba(var(--color-acento-vivo-rgb), 0.14);
  color: var(--color-ambar-claro);
}

/* Botón de catálogo: cobre macizo — el corazón de la página */
.boton-ambar {
  background: var(--color-acento-vivo);
  color: #2a1408;
  box-shadow: 0 8px 20px -12px rgba(var(--color-acento-vivo-rgb), 0.85);
}

.boton-ambar:hover {
  background: var(--color-ambar-hover);
  box-shadow: 0 12px 26px -12px rgba(var(--color-acento-vivo-rgb), 0.9);
}

.boton-chico { padding: 9px 19px; font-size: 0.88rem; }
.boton-grande { padding: 16px 34px; font-size: 1.02rem; }
.boton-tarjeta { width: 100%; }

/* Botón apagado para autos vendidos ("Consultar por similares"): gris sobrio */
.boton-gris {
  background: var(--vidrio-gris);
  color: var(--color-tinta-media);
  border: 1px solid var(--vidrio-gris-borde);
}

.boton-gris:hover { background: var(--vidrio-gris-borde); }

/* ============================================================
 *  Presentación (hero)
 * ============================================================ */
/* ---------- Hero fotográfico ----------
   Escena del atardecer (img/hero-fondo.svg) cubierta por un
   velo negro mate degradado de izquierda a derecha: la lectura
   queda firme a la izquierda y el paisaje respira a la derecha.
   Si la escena no está, el degradado de abajo la reemplaza sin romper. */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(92vh, 940px);
  background:
    linear-gradient(180deg, rgba(8, 10, 11, 0) 74%, rgba(8, 10, 11, 0.52) 100%),
    linear-gradient(97deg,
      rgba(12, 13, 15, 0.78) 0%,
      rgba(12, 13, 15, 0.6) 40%,
      rgba(12, 13, 15, 0.14) 70%,
      rgba(12, 13, 15, 0.16) 100%),
    radial-gradient(900px 520px at 78% 30%, rgba(192, 122, 69, 0.3), transparent 70%);
  color: var(--claro);
  padding: 110px 0 96px;
  border-bottom: 1px solid rgba(246, 241, 230, 0.06);
}

/* Filete diagonal al pie del hero: el trazo sutil del diseño */
.hero::after {
  content: "";
  position: absolute;
  left: -6%;
  bottom: 4%;
  width: 115%;
  height: 1px;
  background: rgba(246, 241, 230, 0.13);
  transform: rotate(-3.4deg);
  transform-origin: left bottom;
  pointer-events: none;
}

/* El hero es un flex-box para centrar verticalmente su contenido;
   el contenedor interno va a lo ancho completo para que el cartel
   quede pegado a la izquierda como en el diseño, no flotando al centro. */
.hero .contenedor { position: relative; z-index: 1; width: 100%; max-width: var(--ancho-contenedor); }

/* ---------- Marco del lema ----------
   Panel de vidrio negro mate flotando sobre la escena, filete fino
   claro y dos esquinas de cobre. Sobre: simple. Elegante: respiración. */
.hero-marco {
  position: relative;
  max-width: 920px;
  padding: 40px 44px 38px;
  border: 1px solid rgba(246, 241, 230, 0.16);
  background: rgba(12, 13, 15, 0.55);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-radius: 14px;
  box-shadow: 0 30px 70px -30px rgba(5, 16, 13, 0.65);
  margin-bottom: 34px;
}

.hero-marco::before,
.hero-marco::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  pointer-events: none;
}

.hero-marco::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--color-acento-vivo);
  border-left: 2px solid var(--color-acento-vivo);
  border-top-left-radius: 14px;
}

.hero-marco::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid var(--color-acento-vivo);
  border-right: 2px solid var(--color-acento-vivo);
  border-bottom-right-radius: 14px;
}

/* ---------- Entrada del marco al cargar ----------
   Secuencia en tres tiempos: el panel se asienta, las esquinas
   afirman, y la regla de cobre se rúbrica. Todo cuarzo, sin saltos. */
.hero-marco {
  animation: marco-asienta 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) 0.15s both;
}

@keyframes marco-asienta {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

.hero-marco::before {
  transform-origin: top left;
  animation: esquina-prende 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) 0.75s both;
}

.hero-marco::after {
  transform-origin: bottom right;
  animation: esquina-prende 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) 0.9s both;
}

@keyframes esquina-prende {
  from {
    opacity: 0;
    transform: scale(0.35);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* La firma: la regla de cobre se dibuja de izquierda a derecha */
.hero h1::after {
  transform-origin: left;
  animation: regla-se-dibuja 0.65s cubic-bezier(0.3, 0.6, 0.4, 1) 1.05s both;
}

@keyframes regla-se-dibuja {
  from { width: 0; }
  to { width: 72px; }
}

.hero-etiqueta {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-oscuro);
  border: 1px solid rgba(var(--color-acento-vivo-rgb), 0.55);
  background: rgba(246, 241, 230, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 10px 20px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.hero h1 {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(2.3rem, 5vw, 4.2rem);
  line-height: 1.07;
  letter-spacing: -0.02em;
  max-width: 760px;
  color: var(--claro);
}

/* Regla de cobre bajo el titular: firma editorial de la portada */
.hero h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 26px;
  background: var(--color-acento-vivo);
}

.hero-texto {
  margin: 20px 0 0;
  max-width: 740px;
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--claro-medio);
}

.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  margin-top: 28px;
  margin-bottom: 34px;
}

/* Botones del hero a la escala del diseño */
.hero-acciones .boton {
  padding: 17px 32px;
  font-size: 1.08rem;
}

/* Botón "Ver los autos disponibles": ámbar dorado macizo, como la
   imagen de referencia — el atajo directo hacia el catálogo */
.hero-acciones .boton-ambar {
  background: #df9d52;
  color: #241402;
}

.hero-acciones .boton-ambar:hover {
  background: #e9ab63;
}

/* En pantallas anchas el contenido del hero se pega hacia la izquierda
   (como en el diseño): en monitores grandes el contenedor centrado
   dejaba una orilla vacía muy grande a la izquierda. */
.hero .contenedor > .hero-etiqueta,
.hero .contenedor > .hero-marco,
.hero .contenedor > .hero-acciones,
.hero .contenedor > .hero-detalles {
  margin-left: min(0px, calc((1250px - 100vw) / 2 + 90px));
}

.hero-detalles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  list-style: none;
  font-size: 1rem;
  color: var(--claro-medio);
}

/* Separadores finos entre las tres promesas (como en el boceto) */
.hero-detalles li + li {
  border-left: 1px solid rgba(246, 241, 230, 0.16);
  padding-left: 26px;
}

.hero-detalles li::before { content: "✓  "; color: var(--color-ambar-claro); font-weight: 700; }

/* ============================================================
 *  Secciones
 * ============================================================ */
.seccion { padding: 84px 0; }
.seccion-alt {
  /* Vidrio papel esmerilado: la foto respira por detrás pero el
     texto oscuro sigue leyéndose como en un catálogo impreso */
  background: rgba(243, 241, 236, 0.8);
  border-top: 1px solid rgba(246, 241, 230, 0.14);
  border-bottom: 1px solid rgba(246, 241, 230, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.titulo-seccion {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-align: center;
  color: var(--color-oscuro);
}

.intro-seccion {
  text-align: center;
  color: var(--color-tinta-media);
  font-size: 1.02rem;
  max-width: 620px;
  margin: 12px auto 40px;
}

/* ---------- Cómo funciona ---------- */
/* Banda de negro mate: rompe el papel y le da peso a la sección */
#como-funciona {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(700px 360px at 82% 0%, rgba(var(--color-acento-vivo-rgb), 0.14), transparent 70%),
    rgba(20, 21, 24, 0.82);
  color: var(--claro);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#como-funciona .titulo-seccion { color: var(--claro); }
#como-funciona .intro-seccion { color: var(--claro-medio); }

.grilla-pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}

.paso {
  background: rgba(246, 241, 230, 0.035);   /* papel apenas insinuado sobre la tinta */
  border: 1px solid rgba(246, 241, 230, 0.14);
  border-radius: var(--radio);
  padding: 30px 26px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.paso:hover {
  border-color: rgba(var(--color-acento-vivo-rgb), 0.55);
  background: rgba(246, 241, 230, 0.055);
}

/* ---------- Aparición al hacer scroll (la arma js/aplicacion.js) ---------- */
/* La clase "animar-pasos" la pone el JS al arrancar: así, si el navegador
   no corre JS, las fichas se ven de siempre y NO quedan invisibles. */
body.animar-pasos .paso {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
  transition-delay: var(--demora, 0s);   /* entrada en escalera: 1, 2, 3 */
}

body.animar-pasos .paso.aparece {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  body.animar-pasos .paso {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.paso-numero {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-acento-vivo);
  color: #2a1408;
  font-family: var(--fuente-numeros);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.paso h3 {
  margin-bottom: 8px;
  font-family: var(--fuente-titulos);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--claro);
}

/* Cuerpo de lectura: tono medio y peso normal (editorial, sin gritar) */
.paso p {
  color: var(--claro-medio);
  font-weight: 400;
  font-size: 0.97rem;
  line-height: 1.7;
}

/* ============================================================
 *  Publicaciones
 * ============================================================ */

/* ---------- Catálogo vacío (recién publicado) ----------
   Mientras no haya ningún auto cargado, la sección entera se retira:
   filtros, headline y enlaces que apuntan acá no deben ensuciarse.
   La clase "catalogo-vacio" la pone js/aplicacion.js y vuelve sola. */
.catalogo-vacio #catalogo { display: none; }

.catalogo-vacio .navegacion a[href="#catalogo"] { display: none; }

/* El botón cobre del hero que baja al catálogo */
.catalogo-vacio .hero-acciones .boton-ambar { display: none; }

/* ---------- Cabecera del catálogo (compacta) ----------
   Con pocas publicaciones alcanza con titular + una frase:
   la cantidad va integrada en el texto, sin contador aparte. */
.catalogo-cabecera {
  margin-bottom: 28px;
}

.catalogo-kicker {
  font-family: var(--fuente-numeros);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-acento);
  margin-bottom: 8px;
}

.catalogo-titulo {
  font-family: var(--fuente-titulos);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-oscuro);
}

.catalogo-intro {
  color: var(--color-tinta-media);
  max-width: 560px;
  margin-top: 12px;
}

/* La cantidad metida en la frase ("Hay 1 auto disponible hoy"):
   el número brilla en tinta, como anotación al margen */
.catalogo-intro b {
  font-family: var(--fuente-numeros);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--color-tinta);
}

/* ============================================================
 *  Tarjetas de vehículos
 * ============================================================ */
/* Grilla grande de exhibición: con pocos autos (máx ~5), cada
   tarjeta respire — y una sola ocupa todo el ancho con protagonismo */
.grilla-vehiculos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
  gap: 28px;
}

.tarjeta-vehiculo {
  background: var(--color-carta);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.tarjeta-vehiculo:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
  border-color: rgba(var(--color-acento-vivo-rgb), 0.7);   /* acento cobre al posar el cursor */
}

.tarjeta-foto {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-oscuro);
}

/* Velo inferior: da profundidad y hace legibles las fichas sobre la foto */
.tarjeta-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 20, 23, 0) 52%, rgba(18, 20, 23, 0.42));
  pointer-events: none;
}

/* Todas las fotos se muestran en el mismo formato: se recortan al centro */
.tarjeta-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;   /* indica que al hacer clic se amplía */
  transition: transform 0.4s ease;
}

/* La foto "se abre" al pasar el cursor: da vida al catálogo */
.tarjeta-vehiculo:hover .tarjeta-foto img { transform: scale(1.06); }

/* Contador de fotos (ej: "2 fotos"), cuando el auto tiene galería */
.badge-fotos {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 2;
  background: rgba(18, 20, 23, 0.78);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 4px;
  letter-spacing: 0.03em;
}

/* Pin del dueño: texto libre, etiqueta cobre sobre la foto */
.pin-vehiculo {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: var(--color-ambar-pill);
  color: var(--color-ambar-pill-texto);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}

.tarjeta-cuerpo {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* Título de la tarjeta: marca y modelo juntos, en serif */
.tarjeta-cuerpo h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--color-oscuro);
}

.tarjeta-nota {
  color: var(--color-tinta-suave);
  font-size: 0.92rem;
  /* Descripciones largas: máximo 3 líneas con puntos suspensivos,
     para que las tarjetas queden parejas entre sí. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Fichas de año/kilometraje: vidrio sobre la foto, abajo a la izquierda */
.tarjeta-datos-foto {
  position: absolute;
  left: 12px;
  bottom: 12px;
  right: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  z-index: 2;
}

.mini-chip {
  font-family: var(--fuente-numeros);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  font-weight: 500;
  color: #fff;
  background: rgba(18, 20, 23, 0.68);
  border: 1px solid rgba(246, 241, 230, 0.26);
  border-radius: 4px;
  padding: 4px 10px;
  letter-spacing: 0.02em;
}

.tarjeta-precio-bloque {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(33, 36, 42, 0.1);  /* respiración antes del precio */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;   /* apilado apretado: etiqueta, precio, tachado */
}

.tarjeta-etiqueta-precio {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-tinta-suave);
}

/* Precio: tinta a cuerpo con los títulos (el cobre queda en
   las pastillas y los botones; el número grande queda sin estridencia.
   En el catálogo oscuro la variable local lo vuelve crema sola) */
.tarjeta-precio {
  margin: 0;
  font-family: var(--fuente-numeros);
  font-variant-numeric: tabular-nums;
  font-size: 1.62rem;
  font-weight: 700;
  color: var(--color-tinta);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

/* Etiqueta de situación del precio ("Se escucha oferta" / "Negociable").
   Los autos de precio fijo no muestran nada. */
.tarjeta-estado {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 4px 10px;
}

.tarjeta-estado--oferta {
  background: var(--color-ambar-pill);   /* etiqueta cobre */
  color: var(--color-ambar-pill-texto);
}

.tarjeta-estado--negociable {
  background: var(--vidrio-gris);
  color: var(--color-tinta-media);
  border: 1px solid var(--vidrio-gris-borde);
}

/* Precio de una rebaja: pegado al precio nuevo, tachado */
.tarjeta-precio-anterior {
  margin: 0;
  font-family: var(--fuente-numeros);
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-tinta-suave);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  line-height: 1.3;
}

/* Precio en dólares (opcional): chiquito debajo del precio en pesos */
.tarjeta-precio-usd {
  margin: 0;
  font-family: var(--fuente-numeros);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-tinta-suave);
  line-height: 1.3;
}

/* ---------- Estados de la publicación (desde el panel) ---------- */

/* Mini-chip extra cuando la operación no es venta pura ("Permuta") */
.mini-chip--operacion {
  background: rgba(18, 20, 23, 0.85);
  border-color: rgba(246, 241, 230, 0.36);
}

/* Sello grande al centro de la foto, para reservado y vendido */
.sello-estado {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-3deg);
  z-index: 3;
  font-family: var(--fuente-numeros);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 20px 10px 24px;   /* compensa el espaciado de la última letra */
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(18, 20, 23, 0.35);
}

.sello--vendido {
  background: var(--color-oscuro);
  color: #fff;
  border: 1px solid rgba(246, 241, 230, 0.55);
}

.sello--reservado {
  background: var(--color-ambar-pill);
  color: var(--color-ambar-pill-texto);
}

/* Vendido: la foto se apaga en gris y el velo bajo la foto se hace más marcado */
.tarjeta--vendido .tarjeta-foto img {
  filter: grayscale(0.85);
}

.tarjeta--vendido .tarjeta-foto::after {
  background: linear-gradient(180deg, rgba(18, 20, 23, 0.25) 30%, rgba(18, 20, 23, 0.62));
}

.tarjeta--reservado .tarjeta-foto::after {
  background: linear-gradient(180deg, rgba(18, 20, 23, 0.1) 45%, rgba(18, 20, 23, 0.52));
}

/* El auto vendido ya no "se abre" al pasar el cursor: está apagado a propósito */
.tarjeta--vendido:hover .tarjeta-foto img { transform: none; }
.tarjeta--vendido .tarjeta-foto img { cursor: default; }

.sin-resultados {
  background: var(--color-carta);
  border: 1px dashed var(--color-linea);
  border-radius: var(--radio);
  text-align: center;
  padding: 54px 20px;
  color: var(--color-tinta-suave);
  font-size: 1.02rem;
}

.sin-resultados p { margin: 0; }

/* ============================================================
 *  Catálogo: negro mate esmerilado
 *  ============================================================ */
/* La banda del catálogo entra al juego del resto: vidrio oscuro
   sobre la foto fija. Se invierte la paleta LOCAL de la sección:
   el "papel" pasa a ser vidrio oscuro, la "tinta" pasa a crema
   y así las fichas, precios y textos heredan el giro sin retocs. */
#catalogo {
  background: rgba(20, 21, 24, 0.8);
  border-top: 1px solid rgba(246, 241, 230, 0.08);
  border-bottom: 1px solid rgba(246, 241, 230, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--claro);
  --color-tinta: var(--claro);
  --color-tinta-media: var(--claro-medio);
  --color-tinta-suave: var(--claro-suave);
  --color-carta: rgba(23, 25, 29, 0.68);
  --color-linea: rgba(246, 241, 230, 0.12);
  --sombra: 0 1px 2px rgba(8, 9, 11, 0.2), 0 18px 46px -26px rgba(8, 9, 11, 0.55);
  --sombra-hover: 0 2px 4px rgba(8, 9, 11, 0.25), 0 30px 52px -28px rgba(8, 9, 11, 0.62);
}

/* Detalles que no fluyen por variables: se ajustan a mano */
#catalogo .catalogo-titulo { color: var(--claro); }             /* venía con --color-oscuro */
#catalogo .catalogo-kicker { color: var(--color-ambar-claro); } /* cobre iluminado sobre oscuro */
#catalogo .tarjeta-precio-bloque {
  border-top: 1px solid rgba(246, 241, 230, 0.1);
}

/* ============================================================
 *  Contacto y pie
 * ============================================================ */
#contacto {
  background:
    radial-gradient(700px 320px at 50% 118%, rgba(var(--color-acento-vivo-rgb), 0.13), transparent 72%),
    linear-gradient(180deg, rgba(26, 28, 32, 0.72) 0%, rgba(13, 15, 18, 0.82) 100%);
  color: var(--claro);
  border-top: 1px solid rgba(246, 241, 230, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.contacto-centro { text-align: center; }

.contacto-centro .titulo-seccion { color: var(--claro); }

.contacto-centro .intro-seccion {
  color: var(--claro-medio);
  margin-bottom: 30px;
}

/* Regla corta sobre el titular: cierre editorial de la página */
.contacto-centro .titulo-seccion::before {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin: 0 auto 22px;
  background: var(--color-acento-vivo);
}

.pie {
  background: rgba(14, 16, 19, 0.88);  /* vidrio negro mate sobre la foto fija */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--claro-medio);
  text-align: center;
  padding: 48px 0 36px;
  font-size: 0.9rem;
  border-top: 3px solid var(--color-acento-vivo);
}

.logo-pie {
  color: var(--claro);
  font-size: 1.45rem;
  display: inline-block;
  margin-bottom: 10px;
}

.pie-nota {
  margin-top: 16px;
  font-size: 0.78rem;
  color: var(--claro-suave);
}

/* ============================================================
 *  Visor de fotos (lightbox)
 * ============================================================ */
.visor {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(18, 20, 23, 0.96);
  z-index: 40;
}

.visor.abierto { display: flex; }

.visor img {
  max-width: min(1000px, 94vw);
  max-height: 92vh;
  object-fit: contain;    /* se ve la foto COMPLETA, sin recorte */
  border-radius: var(--radio);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.visor-boton {
  position: absolute;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.visor-boton:hover { background: rgba(255, 255, 255, 0.28); }

.visor-cerrar { top: 16px; right: 18px; }

.visor-flecha { top: 50%; transform: translateY(-50%); font-size: 2rem; padding-bottom: 6px; }
.visor-atras { left: 20px; }
.visor-adelante { right: 20px; }

.visor-contador {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--claro-medio);
  font-family: var(--fuente-numeros);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  font-weight: 600;
}

/* Tira de miniaturas para galerías de varias fotos */
.visor-miniaturas {
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  max-width: 92vw;
  overflow-x: auto;
  padding: 6px 2px;
}

.visor-mini {
  flex: 0 0 auto;
  width: 72px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: none;
  cursor: pointer;
  opacity: 0.65;
  overflow: hidden;
}

.visor-mini img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.visor-mini:hover { opacity: 0.9; }

.visor-mini.activa {
  border-color: var(--color-acento-vivo);
  opacity: 1;
}

/* ============================================================
 *  Detalles finales
 * ============================================================ */

/* Botón flotante de WhatsApp: acompaña toda la visita */
.boton-flotante-wa {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--color-whatsapp);
  color: #fff;
  font-weight: 600;
  font-size: 0.98rem;
  padding: 13px 20px;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), background 0.18s ease;
  /* Latido discreto cada tanto: dibuja la atención sin marear */
  animation: latido-wa 2.8s ease-out infinite;
  animation-delay: 1.4s;
}

@keyframes latido-wa {
  0% {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24), 0 0 0 0 rgba(26, 107, 74, 0.4);
  }
  70%,
  100% {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24), 0 0 0 15px rgba(26, 107, 74, 0);
  }
}

.boton-flotante-wa svg {
  width: 20px;
  height: 20px;
}

.boton-flotante-wa:hover,
.boton-flotante-wa:focus {
  background: var(--color-whatsapp-oscuro);
  transform: translateY(-2px);
}

.boton-flotante-wa:active { transform: translateY(0) scale(0.97); }

/* Respeto por quien pide menos movimiento en el sistema */
@media (prefers-reduced-motion: reduce) {
  .boton-flotante-wa { animation: none; }

  /* La entrada del marco y sus esquinas también se pausan */
  .hero-marco,
  .hero-marco::before,
  .hero-marco::after,
  .hero h1::after {
    animation: none;
  }
}

/* Atajo de teclado: llega directo al contenido */
.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 200;
  background: var(--color-carta);
  color: var(--color-tinta);
  padding: 10px 18px;
  border-radius: 10px;
  box-shadow: var(--sombra);
}

.salto-contenido:focus,
.salto-contenido:focus-visible {
  left: 12px;
}

/* Navegando con teclado: se ve claramente qué tiene el foco */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-acento-vivo);
  outline-offset: 2px;
}

/* Texto seleccionado: cobre de la marca sobre tinta */
::selection {
  background: var(--color-acento-vivo);
  color: #2a1408;
}

/* ============================================================
 *  Celulares
 * ============================================================ */
@media (max-width: 720px) {
  .hero {
    padding: 64px 0 56px;
    min-height: 0;                 /* en celu no tapa media pantalla */
    align-items: flex-start;
  }

  .hero h1 { font-size: clamp(2rem, 9vw, 2.75rem); }
  .hero h1::after { margin-top: 20px; }

  /* En celu las promesas van una por línea, sin separadores verticales */
  .hero-detalles { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero-detalles li + li { border-left: 0; padding-left: 0; }

  /* El marco del lema respira menos pero igual se respeta entero */
  .hero-marco { padding: 26px 22px 24px; margin-bottom: 28px; border-radius: 10px; }

  .hero-marco::before,
  .hero-marco::after { width: 24px; height: 24px; }

  .hero-marco::before { border-top-left-radius: 10px; }
  .hero-marco::after { border-bottom-right-radius: 10px; }

  .barra-cabecera { gap: 14px; }

  /* En pantallas chicas nos quedamos con lo esencial */
  .navegacion { display: none; }

  .seccion { padding: 56px 0; }

  /* Los dos servicios del hero se apilan y usan todo el ancho */
  .hero-acciones {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-acciones .boton { width: 100%; }

  /* Minimal: tarjeta a ancho completo en celu */
  .grilla-vehiculos { gap: 20px; }

  /* Miniaturas del visor más chicas para no comerse la foto */
  .visor-mini { width: 54px; }

  /* Sello de estado: chico para caber en la foto de un celu */
  .sello-estado { font-size: 0.78rem; padding: 8px 16px 8px 20px; }

  /* El botón flotante respeta el borde inferior del sistema */
  .boton-flotante-wa {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
}