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

/* FILTRO POR ETIQUETAS — botones que el visitante pulsa (OR). Las etiquetas
   las crea y asigna el admin desde el panel; aquí solo aparecen las que están
   en uso. Sustituyen al antiguo buscador + selects de marca/año. */
.py-tags {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
  flex: 1 1 auto;
}
.py-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-muted);
  cursor: pointer;
  transition: border-color 150ms, color 150ms, background 150ms;
}
.py-tag:hover { border-color: var(--border-strong); color: var(--fg-primary); }
.py-tag.is-on {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #FFFFFF;
}
.py-tag-n {
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--fg-subtle);
}
.py-tag.is-on .py-tag-n { background: rgba(255, 255, 255, 0.22); color: #FFFFFF; }
/* Zona táctil de 44px en móvil (WCAG 2.5.8) sin engordar el chip en escritorio. */
@media (hover: none) { .py-tag { min-height: 44px; } }

/* 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);
}
/* Etiquetas del proyecto sobre la tarjeta. Son informativas: el filtro se
   maneja con la barra de arriba, así que estos chips no son botones. */
.py-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-2);
}
.py-card-tag {
  padding: 3px 9px;
  border: 1px solid var(--border-subtle, #E5E8EC);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--bg-soft, #F5F6F8);
}
.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);
}

/* Etiquetas del proyecto bajo el titular de la ficha. */
.pd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-4);
}
.pd-tag {
  padding: 4px 11px;
  border: 1px solid var(--border-subtle, #E5E8EC);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--bg-soft, #F5F6F8);
}

.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),
.pd-articulo:has(p),
.pd-articulo:has(h2),
.pd-articulo:has(ul),
.pd-articulo:has(ol),
.pd-articulo:has(blockquote) {
  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);
}

/* ---- Cuerpo escrito con el editor del panel (HTML del RTE) --------------
   Las fichas nuevas guardan la descripción como HTML (<p>, <h2>, <ul>,
   <blockquote>, enlaces y vídeos de YouTube). Se les da el mismo registro
   editorial que a las importadas. */
.pd-articulo > p {
  margin: 0 0 var(--space-5);
  font-size: 17px;
  line-height: 1.75;
  color: var(--fg-primary);
}
.pd-articulo > p:first-child {
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.6;
}
.pd-articulo > p:last-child { margin-bottom: 0; }
.pd-articulo h2,
.pd-articulo .inline-title {
  font-family: var(--font-display, inherit);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--fg-primary);
  margin: var(--space-7) 0 var(--space-3);
}
.pd-articulo h3,
.pd-articulo .inline-subtitle {
  font-family: var(--font-display, inherit);
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg-primary);
  margin: var(--space-6) 0 var(--space-2);
}
.pd-articulo .inline-title,
.pd-articulo .inline-subtitle { display: inline; margin: 0; }
.pd-articulo ul,
.pd-articulo ol {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-6);
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-muted);
}
.pd-articulo li { margin-bottom: var(--space-2); }
.pd-articulo blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-left: 3px solid var(--brand-blue);
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-muted);
}
.pd-articulo a { color: var(--brand-blue); text-decoration: underline; }
.pd-articulo strong { font-weight: 600; }
/* Vídeo de YouTube insertado desde el editor: ya trae el 16:9 en línea,
   aquí solo se limita el ancho para que no rebase la columna de texto. */
.pd-video { max-width: 100%; }