/* css/proyectos.css — Página de proyectos.
   ------------------------------------------------------------------
   Escrita desde cero, prefijo `py-`. Sustituye a la galería, que se
   eliminó.

   El problema que resuelve es de escala: la web antigua enseña unos
   noventa vehículos en una rejilla apretada donde cada uno lleva foto
   pequeña, título y un botón rojo de "Leer más". A ese tamaño no se
   distingue un Defender de un Hilux, y el botón repetido noventa veces
   pesa más que las fotos. Aquí:

   - La foto manda y es grande. Es lo que hace falta ver.
   - No hay botón por tarjeta: la tarjeta entera es el enlace. Noventa
     botones rojos son ruido, no noventa llamadas a la acción.
   - Se pinta por tandas. Con "una barbaridad" de proyectos, volcar
     todas las imágenes de golpe hace la página inusable en móvil.
   ------------------------------------------------------------------ */

/* ==================================================================
   CABECERA
   ================================================================== */
.py-hero {
  padding: calc(var(--topbar-height) + clamp(48px, 7vw, 88px)) 0 clamp(32px, 4vw, 48px);
  background: var(--bg-primary);
}
.py-hero-inner,
.py-barra-inner,
.py-grid-wrap,
.py-cta-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.py-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin: 0 0 var(--space-4);
}
.py-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--fg-primary);
  margin: 0;
  max-width: 20ch;
}
.py-subtitle {
  margin: var(--space-5) 0 0;
  max-width: 60ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg-muted);
}

/* ==================================================================
   BARRA DE FILTROS — pegajosa bajo el topbar
   ================================================================== */
.py-barra {
  position: sticky;
  top: var(--topbar-height);
  z-index: var(--z-sticky);
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.py-barra-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

/* En móvil los filtros se deslizan en horizontal antes que apilarse:
   una barra de cinco chips en tres líneas empuja la rejilla fuera de
   la pantalla. */
.py-filtros {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.py-filtros::-webkit-scrollbar { display: none; }

.py-filtro {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast),
              background var(--transition-fast);
}
.py-filtro:hover { border-color: var(--border-strong); color: var(--fg-primary); }
.py-filtro[aria-pressed='true'] {
  background: var(--fg-primary);
  border-color: var(--fg-primary);
  color: #FFFFFF;
}

.py-contador {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .py-contador { display: none; }
}

/* CONTROLES DE FILTRO — buscador + selects de marca y año. Sustituyen a los
   antiguos chips de servicio (ese dato venía vacío en lo importado). */
.py-controles {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
  flex: 1 1 auto;
}
.py-buscar-caja {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 220px;
  min-width: 170px;
}
.py-buscar-lupa {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 16px;
  color: var(--fg-subtle);
  pointer-events: none;
}
.py-buscar {
  width: 100%;
  padding: 9px 12px 9px 35px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg-primary);
  -webkit-appearance: none;
  appearance: none;
}
.py-buscar::placeholder { color: var(--fg-subtle); }
.py-select {
  flex: 0 0 auto;
  padding: 9px 34px 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--bg-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg-primary);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* Flecha propia para no depender del render nativo del select. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A626C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
.py-select:hover { border-color: var(--border-strong); }
.py-buscar:focus-visible,
.py-select:focus-visible {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 18%, transparent);
}

/* Centinela del scroll infinito: sin peso visual, solo un punto que el
   IntersectionObserver vigila al final de la rejilla. */
.py-sentinela { width: 100%; height: 1px; }

/* Filtro sin coincidencias (distinto del vacío por falta de datos). */
.py-sin {
  padding: var(--space-8) 0;
  color: var(--fg-muted);
  font-size: 15px;
  max-width: var(--container-text);
}

@media (max-width: 720px) {
  .py-barra-inner { flex-wrap: wrap; row-gap: var(--space-2); }
  .py-controles { width: 100%; }
  .py-buscar-caja { flex: 1 1 100%; }
  .py-select { flex: 1 1 calc(50% - var(--space-2) / 2); }
}

/* En táctil, el buscador y los selects deben cubrir la zona de 44px
   (WCAG 2.5.8). Con padding 9px + 14px de texto se quedaban en 41px. */
@media (hover: none) {
  .py-buscar,
  .py-select { min-height: 44px; }
}

/* ==================================================================
   REJILLA
   ================================================================== */
.py-grid-seccion {
  padding: clamp(32px, 5vw, 56px) 0 clamp(64px, 9vw, 112px);
  background: var(--bg-primary);
}

.py-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .py-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .py-grid { grid-template-columns: repeat(3, 1fr); } }

.py-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
/* display:block es obligatorio: el contenedor es un <span> (va dentro de
   un <a>, y ahí un <div> ensucia el marcado) y en línea no reserva la
   altura del aspect-ratio, con lo que el texto de cada tarjeta se monta
   sobre la foto de la fila siguiente. */
.py-card-foto {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  aspect-ratio: 4 / 3;
}
.py-card-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 480ms var(--ease-out);
}
.py-card:hover .py-card-foto img { transform: scale(1.04); }

/* Contador de fotos: solo aparece si el proyecto tiene más de una. */
.py-card-fotos-n {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: rgba(10, 12, 14, 0.72);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.py-card-nombre {
  margin: var(--space-4) 0 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--fg-primary);
}
.py-card:hover .py-card-nombre { color: var(--brand-blue); }

.py-card-meta {
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.py-card-desc {
  margin: var(--space-2) 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Esqueleto de carga ----------------------------------------- */
.py-skeleton .py-card-foto { background: var(--bg-muted); }
.py-skeleton .py-card-nombre,
.py-skeleton .py-card-meta {
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
  color: transparent;
}

/* --- Pie de la rejilla ------------------------------------------ */
.py-mas {
  margin-top: clamp(40px, 5vw, 64px);
  display: flex;
  justify-content: center;
}
.py-mas button {
  padding: 13px 28px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-primary);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.py-mas button:hover { background: var(--bg-soft); border-color: var(--fg-subtle); }

/* --- Estados ----------------------------------------------------- */
.py-aviso {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-blue);
  border-radius: var(--radius-md);
  background: var(--brand-blue-tint);
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-muted);
}
.py-vacio {
  padding: clamp(48px, 8vw, 96px) 0;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  text-align: left;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}
.py-vacio-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--fg-primary);
  margin: 0;
}
.py-vacio-body {
  margin: var(--space-3) 0 0;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-muted);
}

/* ==================================================================
   CIERRE — el único bloque oscuro de la página
   ================================================================== */
.py-cta {
  background: var(--bg-dark);
  padding: clamp(56px, 8vw, 96px) 0;
}
.py-cta-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-on-dark-muted);
  margin: 0 0 var(--space-4);
}
.py-cta-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--fg-on-dark);
  margin: 0;
  max-width: 20ch;
}
.py-cta-body {
  margin: var(--space-5) 0 var(--space-7);
  max-width: 54ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg-on-dark-muted);
}
.py-cta-btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 26px;
  border-radius: var(--radius-md);
  background: #FFFFFF;
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.py-cta-btn:hover { background: #E8EBEE; }

@media (prefers-reduced-motion: reduce) {
  .py-card-foto img,
  .py-card:hover .py-card-foto img { transition: none; transform: none; }
}

/* ==================================================================
   FICHA DE PROYECTO — /proyectos/proyecto.html?p=<slug>
   ================================================================== */
.pd-hero {
  padding: calc(var(--topbar-height) + clamp(40px, 6vw, 72px)) 0 clamp(24px, 3vw, 36px);
  background: var(--bg-primary);
}
.pd-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.pd-volver {
  display: inline-block;
  margin-bottom: var(--space-5);
  font-size: 14px;
  color: var(--fg-muted);
  text-decoration: none;
}
.pd-volver:hover { color: var(--fg-primary); }

.pd-nombre {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--fg-primary);
  margin: 0;
  max-width: 20ch;
}
.pd-meta {
  margin: var(--space-4) 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.pd-cuerpo { padding: 0 0 clamp(56px, 8vw, 96px); background: var(--bg-primary); }

.pd-desc {
  margin: var(--space-6) 0 0;
  max-width: var(--container-text);
  font-size: 17px;
  line-height: 1.75;
  color: var(--fg-muted);
}

.pd-servicio {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-size: 15px;
  color: var(--fg-muted);
}
.pd-servicio a { color: var(--brand-blue); text-decoration: none; border-bottom: 1px solid currentColor; }

/* La portada ocupa el ancho completo y el resto va de dos en dos: en una
   ficha de vehículo la primera foto es la que vende. */
.pd-fotos {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  /* Sin esto la celda se estira a la altura de la fila y asoma el fondo
     por debajo de la foto más baja. Las fotos del cliente no van a venir
     todas con la misma proporción. */
  align-items: start;
}
@media (min-width: 760px) {
  .pd-fotos { grid-template-columns: repeat(2, 1fr); }
  .pd-foto.is-portada { grid-column: 1 / -1; }
}
.pd-foto { margin: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-muted); }
.pd-foto img { width: 100%; height: auto; display: block; }

.pd-estado {
  padding: clamp(48px, 8vw, 96px) var(--space-5);
  max-width: var(--container-max);
  margin: 0 auto;
  color: var(--fg-muted);
  font-size: 16px;
}

/* --- Ficha: cabecera, carrusel y columna de lectura --------------
   La ficha abría con una foto del coche a sangre haciendo de hero. Se
   quitó por tres razones concretas:

     · son fotos de móvil, documentales y con el logo "AUTOMOTOR
       4x4.com" quemado en una esquina — aguantan a tamaño de tarjeta,
       no a 620px de alto;
     · la primera foto no es siempre la mejor, y hasta ahora no había
       forma de elegir cuál salía;
     · el nombre del vehículo, que es lo que has venido a leer, quedaba
       empujado por debajo del pliegue.

   Ahora: cabecera de texto → carrusel con TODAS las fotos → texto. Y no
   hay galería aparte repitiendo las mismas imágenes más abajo.
   ------------------------------------------------------------------ */

.pd-hero {
  padding: calc(var(--topbar-height) + clamp(36px, 5vw, 64px)) 0 clamp(28px, 3.5vw, 44px);
  background: var(--bg-primary);
}
.pd-volver {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: 14px;
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.pd-volver svg { width: 16px; height: 16px; }
.pd-volver:hover { color: var(--fg-primary); }
@media (hover: none) { .pd-volver { min-height: 44px; } }

/* --- Carrusel ---------------------------------------------------- */
.pd-carrusel-seccion {
  padding: 0 0 clamp(40px, 6vw, 72px);
  background: var(--bg-primary);
}
.pd-carrusel {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* SIN JS: una fila desplazable. Es el estado por defecto a propósito —
   las fotos están todas en el HTML y tienen que poder verse aunque el
   script no llegue. El JS añade '.is-js' y a partir de ahí se apilan. */
.pd-diapos {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius-md);
}
.pd-diapos::-webkit-scrollbar { display: none; }
.pd-diapo {
  margin: 0;
  flex: 0 0 100%;
  scroll-snap-align: center;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-muted);
}
.pd-diapo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* CON JS: las diapositivas se apilan y solo se ve la activa. */
.pd-carrusel.is-js .pd-diapos {
  display: block;
  position: relative;
  overflow: hidden;
  /* Proporción fija: las fotos vienen del móvil del taller, unas en
     vertical y otras en horizontal. Sin caja fija, el carrusel cambia de
     alto en cada foto y el texto de debajo da saltos. */
  aspect-ratio: 3 / 2;
  background: var(--bg-dark);
}
.pd-carrusel.is-js .pd-diapo {
  position: absolute;
  inset: 0;
  flex: none;
  opacity: 0;
  /* Sin fundido: el cambio de foto es instantáneo. El cliente veía el
     cruce de opacidades (la vieja saliendo mientras entra la nueva) como
     una «reversa» rara. Corte limpio, que en una galería de fotos es lo
     esperable. */
  transition: none;
  pointer-events: none;
  /* Transparente, no gris: la diapositiva se apila ENCIMA del contenedor
     y su fondo claro tapaba el oscuro, así que las bandas del `contain`
     salían gris claro en vez de disimuladas. */
  background: transparent;
}
.pd-carrusel.is-js .pd-diapo.is-activa { opacity: 1; pointer-events: auto; }
/* 'contain' y no 'cover': en una ficha de vehículo recortar el coche es
   peor que dejar dos bandas. El fondo oscuro las disimula. */
.pd-carrusel.is-js .pd-diapo img { object-fit: contain; }
.pd-carrusel.is-js:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 4px; }

.pd-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--fg-primary);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background var(--transition-fast);
}
.pd-carrusel.is-js .pd-flecha { display: inline-flex; }
.pd-flecha:hover { background: #FFFFFF; }
.pd-flecha:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 2px; }
.pd-flecha svg { width: 22px; height: 22px; }
.pd-flecha-prev { left: calc(var(--space-5) + 12px); }
.pd-flecha-next { right: calc(var(--space-5) + 12px); }

.pd-contador {
  position: absolute;
  right: calc(var(--space-5) + 12px);
  bottom: 12px;
  z-index: 2;
  display: none;
  margin: 0;
  padding: 5px 12px;
  border-radius: 2px;
  background: rgba(10, 12, 14, 0.7);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.pd-carrusel.is-js .pd-contador { display: block; }

.pd-puntos {
  max-width: var(--container-max);
  margin: var(--space-4) auto 0;
  padding: 0 var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pd-punto {
  width: 34px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.pd-punto::after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--border-strong);
  transition: background var(--transition-fast);
}
.pd-punto:hover::after { background: var(--fg-subtle); }
.pd-punto.is-activa::after { background: var(--brand-blue); }
.pd-punto:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
@media (hover: none) {
  .pd-punto { width: 44px; height: 44px; }
  .pd-puntos { gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-carrusel.is-js .pd-diapo { transition: none; }
}

/* --- Texto -------------------------------------------------------- */
.pd-cuerpo {
  padding: clamp(8px, 2vw, 20px) 0 clamp(56px, 8vw, 96px);
  background: var(--bg-primary);
}

/* El cuerpo va a medida de lectura. Un texto de 900 caracteres a todo el
   ancho del contenedor no se lee.

   La descripción suele ser prosa corta (un párrafo), y a secas quedaba como
   una columna estrecha y huérfana bajo una galería a todo ancho. NO se le
   inventa una ficha técnica para rellenar el hueco: los datos estructurados
   no existen (servicio vacío, sin nivel, `ano` = año de publicación). En su
   lugar se trata como un bloque editorial —filete de anclaje a la izquierda y
   primer párrafo a modo de entradilla— para que se lea como algo intencionado
   y no como una columna abandonada. Solo CSS, mismo contenido real. */
.pd-articulo { max-width: var(--container-text); }
/* El filete y la sangría solo cuando hay párrafo. Hay fichas sin descripción
   (p. ej. audi-a3-1-8t) con el `.pd-articulo` vacío; sin este guardia se les
   pintaría un filete azul suelto sin texto al lado. */
.pd-articulo:has(.pd-parrafo) {
  padding-left: clamp(16px, 2.2vw, 28px);
  border-left: 2px solid var(--brand-blue);
}

.pd-parrafo {
  margin: 0 0 var(--space-5);
  font-size: 17px;
  line-height: 1.75;
  color: var(--fg-primary);
}
/* Entradilla: el primer párrafo entra más grande. Da presencia al bloque y
   jerarquía a la lectura sin depender de datos que no tenemos. */
.pd-articulo .pd-parrafo:first-child {
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.6;
  color: var(--fg-primary);
}
.pd-parrafo:last-child { margin-bottom: 0; }

/* Las listas son enumeraciones de intervenciones: guion fino, sin
   viñeta redonda, y con aire entre líneas porque muchas son largas. */
.pd-lista {
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}
.pd-lista li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-muted);
}
.pd-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 1px;
  background: var(--border-strong);
}