/* ==========================================================================
   «HUELLA DEL VEHÍCULO» — último bloque de las 8 fichas, antes del mapa del sitio (pedido del usuario, 2026-10-26)
   Diseño y funcionamiento de MINI México, medidos en analisis-rea/referencia-mx/huella/huella.md:
   antetítulo y título centrados; 4 tarjetas (ícono sobre círculo gris + caja gris con título, texto de 3 líneas
   y «MAYOR INFORMACIÓN ›»); fila con desplazamiento, flechas y barra de avance cuando no caben; capa lateral.
   Componente: app/componentes/huella.php · comportamiento: js/huella.js.
   Las tarjetas comparten la columna de la ficha (--ancho-ficha / --margen-lateral-ficha de ficha.css, CA-39):
   a partir de 1182 px de pantalla caben las 4 y se reparten el ancho; por debajo se desplazan.
   ========================================================================== */

.huella {
  --huella-espacio: 30px;      /* MX: relleno de la cabecera 30 / 40 / 50 px */
  --huella-tarjeta: 280px;     /* MX: 280 / 300 / 330 px */
  --huella-hueco: 10px;
  --huella-relleno: 15px;      /* MX: 15 / 20 / 30 px */
  --huella-linea: 1.5rem;      /* MINI Sans 18/24 px */
  padding: var(--huella-espacio) 0 clamp(48px, 6vw, 80px);
  background: var(--color-blanco); color: var(--color-negro);
}

/* ---------- Cabecera: antetítulo y título centrados (como MX y como «Uso creativo del espacio», CA-38) ---------- */
.huella__cabecera { width: var(--ancho-ficha); margin: 0 auto var(--huella-espacio); text-align: center; }
.huella__antetitulo {
  margin: 0 0 30px;
  font-family: var(--fuente-titulares); font-weight: var(--peso-bold);
  font-size: 1rem; line-height: 1; text-transform: uppercase;
}
.huella__titulo {
  margin: 0;
  font-size: 1.5rem; line-height: var(--lh-titular); text-transform: uppercase; text-align: center;
}
.huella__linea { display: block; text-wrap: balance; }   /* en móvil: «LA HUELLA DE LOS / VEHÍCULOS MINI.», como MX */

/* ---------- Fila de tarjetas ---------- */
.huella__lista {
  display: flex; gap: var(--huella-hueco);
  margin: 0; padding: 0 var(--margen-lateral-ficha); list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--margen-lateral-ficha);
  scrollbar-width: none;
}
.huella__lista::-webkit-scrollbar { display: none; }
/* position: relative: el texto .solo-lector del botón (absoluto) se ubica dentro de la tarjeta; si no, toma la página
   como referencia, escapa del recorte de la fila y crea desborde horizontal */
.huella__tarjeta { position: relative; flex: 1 0 var(--huella-tarjeta); display: flex; flex-direction: column; min-width: 0; scroll-snap-align: start; }
.huella__media { aspect-ratio: 3 / 2; background: var(--color-blanco); }
.huella__icono { width: 100%; height: 100%; object-fit: contain; }
.huella__contenido {
  flex: 1 1 auto; display: flex; flex-direction: column;
  padding: var(--huella-relleno); background: var(--gris-fondo);
}
.huella__subtitulo {
  margin: 0 0 15px;
  font-size: 1.25rem; line-height: var(--lh-titular); text-align: left;
}
.huella__texto { font-family: var(--fuente-ui); font-size: 1.125rem; line-height: var(--huella-linea); }
.huella__texto p { margin: 0 0 10px; }
.huella__texto p:last-child { margin-bottom: 0; }
/* CO₂: subíndice sin alterar la altura de línea */
.huella__texto sub, .huella-ventana__texto sub { font-size: .7em; line-height: 0; vertical-align: -.25em; }
/* Con JS (la ventana muestra el texto completo): 3 líneas, recortadas como en MX (sin puntos suspensivos) */
.huella--interactiva .huella__texto { max-height: calc(3 * var(--huella-linea)); max-height: 3lh; overflow: hidden; }

/* «MAYOR INFORMACIÓN ›»: línea de 24 px como en MX dentro de un área táctil de 44 px */
.huella__accion { margin-top: auto; padding-top: 10px; }
.huella__mas {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tactil-min); margin: -10px 0; padding: 0;
  background: none; border: 0; color: var(--color-negro);
  font-family: var(--fuente-ui); font-size: 1.125rem; line-height: var(--huella-linea);
  text-transform: uppercase; text-align: left;
  transition: color .2s ease-in-out;
}
/* MX pasa a #017EA4; sobre el gris de la tarjeta da 4,3:1, así que se usa el acento oscuro (6:1, AA) */
.huella__mas:hover { color: var(--color-acento-hover); }
.huella__chevron { width: 24px; height: 24px; }

/* ---------- Flechas y barra de avance (solo si la fila no cabe) ---------- */
.huella__controles {
  display: flex; align-items: center; justify-content: center; gap: 32px;
  width: var(--ancho-ficha); min-height: var(--tactil-min); margin: 16px auto 0;
}
.huella__barra { position: relative; flex: 0 1 60%; height: 4px; }
.huella__barra::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--gris-borde); }
.huella__indicador { position: absolute; top: 0; left: 0; width: min(100px, 40%); height: 4px; background: var(--color-acento); }
/* MX solo muestra las flechas desde 768 px; aquí también con ratón en ventanas angostas */
.huella__flecha {
  display: none; align-items: center; justify-content: center; flex: none;
  width: var(--tactil-min); height: var(--tactil-min); padding: 0;
  background: var(--color-negro); color: var(--color-blanco); border: 0; border-radius: 50%;
  transition: background-color .2s ease-in-out;
}
.huella__flecha:hover { background: var(--color-texto-suave); }
.huella__flecha[aria-disabled="true"] { background: var(--gris-medio); cursor: default; }
.huella__flecha:focus-visible, .huella-ventana__cerrar:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--color-blanco), 0 0 0 6px var(--color-acento), 0 0 0 8px var(--color-blanco);
}
@media (min-width: 768px), (hover: hover) and (pointer: fine) {
  .huella__flecha { display: inline-flex; }
}

/* ---------- Ventana lateral «MAYOR INFORMACIÓN» (capa lateral de MX: mitad derecha, pantalla completa en móvil) ---------- */
.huella-ventana {
  position: fixed; inset: 0 0 0 auto;
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: var(--gris-fondo); color: var(--color-negro);
  overflow-y: auto; overscroll-behavior: contain;
}
.huella-ventana::backdrop { background: color-mix(in srgb, var(--color-negro) 50%, transparent); }
.huella-ventana[open] { animation: huella-entrar .3s cubic-bezier(.4, 0, .2, 1); }
.huella-ventana[open]::backdrop { animation: huella-fundido .3s ease; }
@keyframes huella-entrar { from { transform: translateX(100%); } }
@keyframes huella-fundido { from { opacity: 0; } }
html:has(.huella-ventana[open]) { overflow: hidden; }

.huella-ventana__panel { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 100%; }
.huella-ventana__cerrar {
  position: sticky; top: 15px; z-index: 2; grid-area: 1 / 1; justify-self: end; align-self: start;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin: 15px 15px 0 0; padding: 0;
  background: color-mix(in srgb, var(--color-blanco) 60%, transparent); color: var(--color-negro);
  border: 0; border-radius: 50%;
}
.huella-ventana__media { grid-area: 1 / 1; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-blanco); }
.huella-ventana__media img { width: 100%; height: 100%; object-fit: cover; }
.huella-ventana__contenido { grid-area: 2 / 1; padding: 30px 30px 60px; }
.huella-ventana__titulo { margin: 0 0 15px; font-size: 1.25rem; line-height: var(--lh-titular); text-transform: uppercase; }
.huella-ventana__texto { max-width: max(80%, 260px); font-family: var(--fuente-ui); font-size: 1.125rem; line-height: var(--huella-linea); }
.huella-ventana__texto p { margin: 0 0 10px; }
.huella-ventana__texto p:last-child { margin-bottom: 0; }

/* ---------- Tableta (MX «wide») ---------- */
@media (min-width: 768px) {
  .huella { --huella-espacio: 40px; --huella-tarjeta: 300px; --huella-relleno: 20px; }
  .huella__titulo { font-size: 2rem; }
  .huella__subtitulo { font-size: 1.5rem; }
  .huella__texto p, .huella-ventana__texto p { margin-bottom: 15px; }
  .huella__accion { padding-top: 15px; }
  .huella__barra { flex-basis: 45%; }
  .huella-ventana { width: 50%; }
  .huella-ventana__cerrar { top: 20px; margin: 20px 20px 0 0; }
  .huella-ventana__contenido { padding: 40px 40px 80px; }
  .huella-ventana__titulo { margin-bottom: 20px; font-size: 1.5rem; }
}
@media (min-width: 1024px) {
  /* Base de 280 px: desde 1182 px de pantalla (columna ≥ 1150 px) caben las 4 tarjetas y se reparten la columna */
  .huella { --huella-tarjeta: 280px; }
  .huella__barra { flex-basis: 35%; }
}
/* ---------- Escritorio (MX «superwide») ---------- */
@media (min-width: 1280px) {
  .huella { --huella-espacio: 50px; --huella-relleno: 30px; }
  .huella__antetitulo { font-size: 1.25rem; }
  .huella__titulo { font-size: 3rem; }
  /* MX: 32 px en tarjetas de 330 px; en la columna de 1200 px (tarjetas de 292 px) 28 px mantiene los títulos de MX en una línea */
  .huella__subtitulo { font-size: 1.75rem; }
  .huella-ventana__cerrar { top: 30px; margin: 30px 30px 0 0; }
  .huella-ventana__contenido { padding: 50px 50px 100px; }
  .huella-ventana__titulo { margin-bottom: 30px; font-size: 2rem; }
  .huella-ventana__texto { max-width: 75%; }
}

/* ---------- Reducir movimiento: sin deslizar la ventana ni transiciones ---------- */
@media (prefers-reduced-motion: reduce) {
  .huella__mas, .huella__flecha { transition: none; }
  .huella-ventana[open], .huella-ventana[open]::backdrop { animation: none; }
}