/* css/home.css — Portada.
   ------------------------------------------------------------------
   Escrita desde cero. No hereda nada del diseño del que partió el
   proyecto: las reglas de .hero, .sectores, .servicio-card,
   .modelo-card, .preparaciones-preview y las cuñas se eliminaron de
   sections.css (92 reglas, ~700 líneas), no se taparon con overrides.
   Prefijo `hm-` para que no haya forma de colisionar con lo viejo.

   Tres decisiones que conviene entender antes de tocar esto:

   1. EL HERO ES UNA FOTOGRAFÍA, NO UN BLOQUE DE TEXTO. Es la única
      excepción a "el oscuro solo en el pie y el cierre": no es una
      sección oscura, es una foto con un velo para que el titular se
      lea. Un taller se vende enseñando coches, no describiéndolos.

   2. LOS NIVELES SON UNA LISTA, NO CUATRO TARJETAS IGUALES. Cuatro
      tarjetas del mismo tamaño dicen "cuatro cosas distintas"; la
      escala 01→04 dice "lo mismo, cada vez más". El número crece y se
      oscurece con el nivel. Es la información que hay que transmitir.

   3. LOS SERVICIOS NO LLEVAN ICONO. Los llevaban, y eran genéricos
      —un muelle, un avión de papel, un edificio— que no significaban
      nada. La foto identifica mejor que cualquier pictograma.
   ------------------------------------------------------------------ */

/* ==================================================================
   1. HERO
   ================================================================== */
/* PANTALLA COMPLETA. `100svh` y no `100vh`: en el móvil, `vh` mide la
   ventana SIN la barra de direcciones, así que el hero queda más alto que
   lo que se ve y el navegador da un salto al ocultarse la barra al hacer
   scroll. `svh` mide la ventana pequeña —la que hay con la barra puesta—
   y no salta. El `100vh` de antes queda de reserva para navegadores que
   no conozcan la unidad. */
/* La barra superior es blanca y OPACA, y está fija. Si el hero empezara
   en 0, sus primeros 80px quedarían tapados: se perdería esa franja de
   foto y encima el hero acabaría 80px por debajo del pliegue, obligando
   a hacer scroll para ver el borde inferior de algo que quiere llenar la
   pantalla.
   Por eso se aparta la altura de la barra y se descuenta del alto: la
   suma vuelve a ser exactamente una pantalla. */
.hm-hero {
  position: relative;
  margin-top: var(--topbar-height);
  min-height: calc(100vh - var(--topbar-height));
  min-height: calc(100svh - var(--topbar-height));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--bg-dark);
}

/* En apaisado un móvil tiene ~380px de alto: a pantalla completa el
   titular no cabe con las llamadas. Ahí manda el contenido. */
@media (orientation: landscape) and (max-height: 560px) {
  .hm-hero { min-height: 560px; }
}

.hm-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* CARRUSEL. Fundido cruzado, no desplazamiento lateral: el titular se
   queda quieto encima y un travelling por debajo lo haría ilegible.
   Las slides se apilan; solo cambia la opacidad. */
.hm-hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hm-hero-slide.is-activa { opacity: 1; }

.hm-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  display: block;
}

/* MOVIMIENTO DE LA FOTO (Ken Burns).
   Una foto completamente quieta durante seis segundos parece una imagen
   de fondo; con un acercamiento lento parece metraje. El recorrido es de
   un 6%: lo justo para que se note que respira sin que se vea el
   desplazamiento, y sin perder definición en una imagen de 1800px.

   Solo se anima la diapositiva visible. Animar las cuatro obligaría al
   navegador a mantener cuatro capas compuestas de pantalla completa.
   `transform` se compone en la GPU, así que no repinta ni reordena. */
@keyframes hm-respira {
  from { transform: scale(1);    }
  to   { transform: scale(1.06); }
}
.hm-hero-slide.is-activa img {
  animation: hm-respira 8s ease-out forwards;
  will-change: transform;
}

/* VELO (overlay). Es funcional, no decorativo: sin él, el titular blanco
   cae por debajo de contraste AA en cuanto una de las cuatro fotos tiene
   cielo claro detrás.

   El velo es LATERAL, no solo inferior, y esa es la corrección importante.
   Antes solo bajaba de abajo arriba, y funcionaba mientras el bloque de
   texto vivía pegado al pie del hero. Al subir el texto —a petición del
   cliente— el titular se salió de su propio velo: medido sobre las cuatro
   fotos, el peor punto detrás del titular daba 1,41:1 con texto blanco,
   cuando AA pide 4,5:1. Un texto alineado a la izquierda necesita el velo
   a la izquierda; si no, cualquier foto de día lo borra.

   Se calibró contra las cuatro fotos reales, no a ojo: la comprobación es
   muestrear el peor píxel del rectángulo que ocupa cada línea de texto.
   Si algún día se cambian las fotos del carrusel, hay que volver a medir
   — una foto más clara que estas se vuelve a comer el titular.

   Tres capas, cada una con su motivo:
     · la lateral, que es la que sostiene el texto;
     · la inferior, que asienta el bloque y separa del borde;
     · la superior, breve, para que los puntos y el rótulo "desliza" no
       floten sobre un cielo blanco.
   Va sobre las diapositivas, así que necesita z-index propio. */
.hm-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* Base uniforme. Hace falta porque en móvil el texto ocupa todo el
       ancho y un velo lateral no llega al final de la línea. Es la capa
       que garantiza el mínimo contra la foto más clara de las cuatro.

       0,46 y no 0,38: al mejorar las fotos del carrusel con IA, la primera
       —el FJ junto al mar, cielo y arena claros— subió de brillo y dejó el
       eyebrow en 3,85:1 y el subtítulo en 4,29:1 a 320/390px, contra los
       4,5 que pide AA. Las otras tres diapositivas pasaban de sobra; el velo
       es uniforme a propósito (el texto es el mismo en las cuatro), así que
       se calibra contra la más clara. Lo cazó la auditoría de navegador. */
    linear-gradient(rgba(10, 12, 14, 0.46), rgba(10, 12, 14, 0.46)),
    /* Lateral: sostiene el titular en escritorio, donde el texto vive en
       la mitad izquierda y la foto tiene que respirar en la derecha. */
    linear-gradient(
      to right,
      rgba(10, 12, 14, 0.62)  0%,
      rgba(10, 12, 14, 0.52) 28%,
      rgba(10, 12, 14, 0.30) 52%,
      rgba(10, 12, 14, 0.08) 76%,
      rgba(10, 12, 14, 0.00) 92%),
    /* Inferior: asienta el bloque y cubre la parte baja, que es donde cae
       el texto en cuanto la pantalla se estrecha. */
    linear-gradient(
      to top,
      rgba(10, 12, 14, 0.66)  0%,
      rgba(10, 12, 14, 0.52) 26%,
      rgba(10, 12, 14, 0.30) 54%,
      rgba(10, 12, 14, 0.06) 82%,
      rgba(10, 12, 14, 0.00) 100%),
    /* Superior, breve: los puntos y el rótulo "desliza" tampoco pueden
       quedarse flotando sobre un cielo blanco. */
    linear-gradient(
      to bottom,
      rgba(10, 12, 14, 0.28)  0%,
      rgba(10, 12, 14, 0.08) 16%,
      rgba(10, 12, 14, 0.00) 30%);
}

/* PIE DEL HERO — rótulo de la foto encima de los puntos.
   La caja absoluta la lleva ahora este contenedor y no los puntos: los dos
   van juntos abajo a la izquierda, alineados al margen como todo lo demás,
   no centrados. */
.hm-hero-pie {
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(16px, 2.4vw, 26px);
  width: 100%;
  max-width: var(--container-max);
  padding: 0 var(--space-5);
}

/* Los cuatro rótulos se apilan en la MISMA celda de rejilla, no con
   posición absoluta y una altura fija: así la caja mide lo que mida el
   más alto y nadie tiene que mantener un número mágico cuando cambie un
   texto o se estreche la pantalla. */
.hm-hero-rotulos {
  display: grid;
  margin-bottom: 14px;
}
.hm-hero-rotulo {
  grid-area: 1 / 1;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  opacity: 0;
  /* El fundido dura menos que el de la foto (600 contra 900): si el rótulo
     tarda lo mismo, se lee el texto de la foto anterior sobre la nueva. */
  transition: opacity 600ms var(--ease);
  pointer-events: none;
}
.hm-hero-rotulo.is-activa { opacity: 1; }

.hm-hero-rotulo-tag,
.hm-hero-rotulo-det {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}
/* El tag lleva el azul de marca y el detalle va en blanco velado: es la
   misma jerarquía que el resto de rótulos de la web, no un color nuevo. */
.hm-hero-rotulo-tag { color: #8FBCEA; }
.hm-hero-rotulo-det { color: rgba(255, 255, 255, 0.78); }

/* A 320-380px los dos trozos no caben en una línea y el detalle se parte
   en tres. Ahí se queda solo el tag, que es el que dice de qué va la
   foto; el detalle es el nombre del coche, y ese ya está en el `alt`. */
@media (max-width: 480px) {
  .hm-hero-rotulo-det { display: none; }
}

/* BARRA DE PROGRESO del carrusel. Enseña cuánto queda para el cambio de
   foto: es «movimiento que revela algo» —el ritmo del carrusel—, no adorno.
   Se rellena en los 6 s del intervalo y se reinicia en cada foto; el JS la
   pausa a la vez que el carrusel (ratón, foco de teclado, pestaña oculta).
   La duración de la animación (6s) tiene que coincidir con INTERVALO en
   js/hero-carrusel.js: si cambia uno, cambia el otro. */
.hm-hero-progreso {
  width: 100%;
  max-width: 200px;
  height: 2px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.24);
  border-radius: 2px;
  overflow: hidden;
}
/* Se anima `transform: scaleX`, NO `width`. Animar el ancho recalcula
   la caja en cada fotograma en el hilo principal, y justo al cambiar de
   foto —que es una imagen a pantalla completa decodificándose— ese hilo
   está ocupado: la barra se atascaba o parecía no avanzar, y el efecto
   variaba según lo que pesara cada foto. `scaleX` va por el compositor
   (GPU) y es inmune a ese trabajo. */
.hm-hero-progreso i {
  display: block;
  height: 100%;
  width: 100%;
  background: #FFFFFF;
  transform: scaleX(0);
  transform-origin: left center;
}
.hm-hero-progreso.corre i {
  animation: hm-progreso 6s linear forwards;
}
@keyframes hm-progreso {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.hm-hero-puntos {
  display: flex;
  gap: 8px;
}
/* El filete visible mide 3px de alto, pero el botón NO puede medir eso:
   con el dedo es imposible acertar. El botón ocupa 34x24 transparente y
   solo se pinta la barra, centrada, con un pseudoelemento. */
.hm-hero-punto {
  width: 34px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.hm-hero-punto::after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.34);
  transition: background var(--transition-fast);
}
.hm-hero-punto:hover::after { background: rgba(255, 255, 255, 0.6); }
.hm-hero-punto.is-activa::after { background: #FFFFFF; }
.hm-hero-punto:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}
/* Con el dedo, 24px es el mínimo de la norma; 44 es lo cómodo. */
@media (hover: none) {
  .hm-hero-punto { width: 44px; height: 44px; }
  .hm-hero-puntos { gap: 2px; }
  /* El `bottom` es del contenedor desde que el rótulo vive aquí. Dejarlo en
     `.hm-hero-puntos`, que ya no está posicionado, no daba error: no hacía
     nada, y el pie se quedaba 12px más abajo de la cuenta en táctil. */
  .hm-hero-pie { bottom: 4px; }
}

/* INDICADOR DE SCROLL.
   A pantalla completa hace falta: el hero llena el monitor entero y, sin
   una pista, no hay ningún borde cortado que delate que la página sigue.
   Va a la derecha para no pelearse con los puntos del carrusel, que
   están abajo a la izquierda con el resto del contenido. */
.hm-hero-scroll {
  position: absolute;
  z-index: 2;
  right: max(var(--space-5), calc(50vw - var(--container-max) / 2 + var(--space-5)));
  bottom: clamp(20px, 3vw, 34px);
  display: none;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color var(--transition-fast);
}
/* Solo donde el hero llena de verdad la pantalla. En un móvil el pulgar
   ya sabe que se desliza, y ahí el hueco lo necesitan los puntos. */
@media (min-width: 880px) {
  .hm-hero-scroll { display: inline-flex; }
}
.hm-hero-scroll:hover { color: #FFFFFF; }
.hm-hero-scroll:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; }
.hm-hero-scroll-linea {
  display: block;
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.75));
  transform-origin: top;
  animation: hm-cae 2.4s var(--ease) infinite;
}
@keyframes hm-cae {
  0%        { transform: scaleY(0.25); opacity: 0.2; }
  45%, 60%  { transform: scaleY(1);    opacity: 1;   }
  100%      { transform: scaleY(0.25); opacity: 0.2; }
}

/* Con "reducir movimiento" nada se mueve solo: el carrusel se queda en la
   primera foto y los puntos siguen funcionando a mano, la foto no se
   acerca y el indicador de scroll deja de latir pero sigue ahí. */
@media (prefers-reduced-motion: reduce) {
  .hm-hero-slide { transition: none; }
  .hm-hero-slide.is-activa img { animation: none; }
  /* Sin avance automático, una barra que corre hacia un cambio que no va a
     pasar engaña: se retira. Los puntos siguen pasando las fotos a mano. */
  .hm-hero-progreso { display: none; }
  .hm-hero-scroll-linea { animation: none; transform: scaleY(1); opacity: 0.75; }
  /* Sin fundido, pero el rótulo SIGUE cambiando: quien pase las fotos a
     mano con los puntos tiene que ver de qué es cada una. Lo que se quita
     es la transición, no el contenido. */
  .hm-hero-rotulo { transition: none; }
}

/* El bloque de texto sube. Pegado abajo, el titular quedaba tapado por
   el capó del coche de la foto y el subtítulo caía sobre la parte más
   revuelta de la imagen. Con el hero a pantalla completa hay sitio de
   sobra: se sube a poco más de un tercio desde abajo, que además deja la
   mitad superior de la fotografía despejada. Los puntos y el indicador
   de scroll se quedan abajo, donde no estorban. */
.hm-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5) clamp(120px, 20vh, 210px);
}
@media (max-width: 768px) {
  .hm-hero-inner { padding-bottom: clamp(96px, 16vh, 150px); }
}

.hm-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 var(--space-4);
}

.hm-hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 6.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  max-width: 17ch;
  margin: 0;
  text-wrap: balance;
}

.hm-hero-subtitle {
  margin: var(--space-5) 0 0;
  max-width: 52ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.84);
}

.hm-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

/* El botón principal es AZUL, el mismo de la barra. Fue blanco, con el
   argumento de que el azul no contrasta contra una foto que no
   controlamos; el argumento no se sostenía aquí, porque los botones no
   caen sobre la foto desnuda sino sobre la parte baja del velo, que está
   al 0,88 de negro. Medido ahí: blanco sobre el azul da 5,9:1, por encima
   del 4,5 que pide AA.

   Lo que sí fallaba era la jerarquía: dos botones del mismo tamaño y peso,
   uno blanco y otro con borde, se leen como dos opciones equivalentes.
   Pedir presupuesto es la acción de la página; ver los niveles es la
   alternativa. Ahora se distinguen por color, no solo por relleno, y el
   principal es el mismo azul que el de la barra — una web con dos botones
   principales de dos colores distintos parece de dos sitios. */
.hm-hero-actions .hm-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 15px 28px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast);
}
.hm-btn-solid {
  background: var(--brand-blue);
  color: #FFFFFF;
  border: 1px solid var(--brand-blue);
}
.hm-btn-solid:hover {
  background: var(--brand-blue-hover);
  border-color: var(--brand-blue-hover);
}

.hm-btn-ghost {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.hm-btn-ghost:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.1); }

/* --- Franja de datos, ya sobre blanco --------------------------- */
.hm-datos {
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
}
.hm-datos-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .hm-datos-grid { grid-template-columns: repeat(3, 1fr); }
}

.hm-dato {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.hm-dato:last-child { border-bottom: 0; }
@media (min-width: 700px) {
  .hm-dato {
    padding: var(--space-6) var(--space-6) var(--space-6) 0;
    border-bottom: 0;
    border-right: 1px solid var(--border-subtle);
  }
  .hm-dato + .hm-dato { padding-left: var(--space-6); }
  .hm-dato:last-child { border-right: 0; }
}

.hm-dato-cifra {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
  line-height: 1.1;
}
.hm-dato-texto {
  display: block;
  margin-top: var(--space-2);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 34ch;
}

/* ==================================================================
   2. NIVELES DE PREPARACIÓN — lista con escala 01 → 04
   ================================================================== */
.hm-niveles {
  padding: clamp(64px, 9vw, 120px) 0;
  background: var(--bg-primary);
}

.hm-cabecera {
  max-width: var(--container-max);
  margin: 0 auto clamp(40px, 5vw, 64px);
  padding: 0 var(--space-5);
}
.hm-cabecera-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);
}
.hm-cabecera-titulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
  margin: 0;
  max-width: 22ch;
}
.hm-cabecera-texto {
  margin: var(--space-5) 0 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg-muted);
}

.hm-nivel-lista {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
  border-top: 1px solid var(--border);
}

.hm-nivel {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'num  nombre'
    'foto foto'
    'desc desc';
  gap: var(--space-3) var(--space-5);
  align-items: center;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background var(--transition-fast);
}
@media (min-width: 880px) {
  .hm-nivel {
    grid-template-columns: 72px minmax(0, 240px) minmax(0, 1fr) 200px auto;
    grid-template-areas: 'num nombre desc foto flecha';
    gap: var(--space-6);
    padding: var(--space-5) var(--space-4);
    margin: 0 calc(var(--space-4) * -1);
  }
  .hm-nivel:hover { background: var(--bg-soft); }
}

/* Solo la cifra, nunca "NIVEL 01": a este cuerpo, el rótulo entero se
   parte en dos líneas y se come la columna del nombre. La cifra se
   oscurece con el nivel — ahí está la escala. */
.hm-nivel-num {
  grid-area: num;
  font-family: var(--font-mono);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Las cuatro cifras van del mismo color. Estuvieron escalando del azul
   claro al negro para sugerir intensidad creciente, pero leído en fila
   parecía que unos niveles pesaban más que otros. El orden ya lo dice
   la numeración. */
.hm-nivel .hm-nivel-num { color: var(--brand-blue); }

.hm-nivel-nombre {
  grid-area: nombre;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg-primary);
  margin: 0;
}
.hm-nivel-desc {
  grid-area: desc;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-muted);
}
.hm-nivel-foto {
  grid-area: foto;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 16 / 9;
}
@media (min-width: 880px) {
  .hm-nivel-foto { aspect-ratio: 3 / 2; }
}
.hm-nivel-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hm-nivel-flecha {
  grid-area: flecha;
  display: none;
  color: var(--fg-subtle);
  transition: transform var(--transition-fast), color var(--transition-fast);
}
@media (min-width: 880px) {
  .hm-nivel-flecha { display: block; }
  .hm-nivel:hover .hm-nivel-flecha { color: var(--brand-blue); transform: translateX(4px); }
}

.hm-niveles-pie {
  max-width: var(--container-max);
  margin: var(--space-7) auto 0;
  padding: 0 var(--space-5);
}

/* ==================================================================
   3. SERVICIOS — cuatro, sin iconos, la foto manda
   ================================================================== */
/* Los cuatro servicios son LA sección de la portada: es lo que la gente
   busca y lo que el taller vende. Por eso van los primeros después de la
   franja de datos, y por eso las tarjetas son grandes — a 340px de alto
   parecían un listado secundario. */
.hm-servicios {
  padding: clamp(64px, 9vw, 120px) 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
}

.hm-serv-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .hm-serv-grid { grid-template-columns: repeat(2, 1fr); }
}

.hm-serv {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  min-height: clamp(300px, 38vw, 460px);
  text-decoration: none;
  background: var(--bg-dark);
}
.hm-serv img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease-out);
}
.hm-serv:hover img,
.hm-serv:focus-visible img { transform: scale(1.05); }

/* Toda la tarjeta es el enlace —ya lo era, es un <a>—, así que el foco
   se marca en la tarjeta entera y no en un trocito. */
.hm-serv:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 3px;
}

.hm-serv::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 12, 14, 0.90) 0%,
    rgba(10, 12, 14, 0.55) 42%,
    rgba(10, 12, 14, 0.12) 100%);
  transition: background var(--transition-base);
}
.hm-serv:hover::after,
.hm-serv:focus-visible::after {
  background: linear-gradient(
    to top,
    rgba(10, 12, 14, 0.93) 0%,
    rgba(10, 12, 14, 0.66) 46%,
    rgba(10, 12, 14, 0.22) 100%);
}

.hm-serv-texto {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
}
.hm-serv-nombre {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #FFFFFF;
  margin: 0;
}
.hm-serv-desc {
  margin: var(--space-3) 0 0;
  max-width: 42ch;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
}

/* "Ver servicio". Aparece al señalar la tarjeta.
   Es un <span>, no un <a>: dentro de un enlace no puede ir otro elemento
   interactivo, y la tarjeta entera ya lleva al servicio. Va con
   aria-hidden porque para un lector de pantalla sería un segundo rótulo
   del mismo destino, justo detrás del nombre del servicio.

   El hueco se reserva SIEMPRE (margin-top fijo y altura propia): si
   apareciera de la nada, el texto de encima daría un salto al pasar el
   ratón. Lo que cambia es la opacidad y 8px de desplazamiento. */
.hm-serv-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  margin-top: var(--space-5);
  padding: 11px 20px;
  border-radius: var(--radius-md);
  background: #FFFFFF;
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.hm-serv-btn svg { width: 15px; height: 15px; }
.hm-serv:hover .hm-serv-btn,
.hm-serv:focus-visible .hm-serv-btn { opacity: 1; transform: translateY(0); }

/* Con el dedo no hay "pasar por encima": el botón se queda puesto. */
@media (hover: none) {
  .hm-serv-btn { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-serv-btn { transition: none; transform: none; }
}

.hm-servicios-pie {
  max-width: var(--container-max);
  margin: var(--space-7) auto 0;
  padding: 0 var(--space-5);
}

/* Enlace de texto con filete, el mismo en las dos secciones. */
.hm-enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-blue);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  transition: color var(--transition-fast);
}
.hm-enlace:hover { color: var(--brand-blue-hover); }
.hm-enlace svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .hm-serv img { transition: none; }
  .hm-serv:hover img { transform: none; }
}

/* ==================================================================
   4. FRANJA DE PROYECTOS REALES
   ------------------------------------------------------------------
   Es la única sección de la portada con fotografía DEL TALLER. Las
   demás imágenes de la web siguen siendo de banco y llevan su
   `data-provisional-photo`; estas 882 son suyas, importadas de la web
   antigua, y por eso esta franja se puede publicar tal cual.

   Son fotos de móvil, documentales y con el logo quemado en una
   esquina: a tamaño de tarjeta funcionan, a pantalla completa no. Una
   tira de miniaturas es exactamente el tamaño al que se defienden.

   El movimiento es distinto según el dispositivo, a propósito:
     · con ratón, la tira se desliza sola y se para al pasar por encima
       —no hay forma de arrastrarla con un ratón sin inventar un
       comportamiento que nadie espera—;
     · con el dedo, no se mueve sola y se arrastra, que es el gesto
       natural. Una tira que huye mientras intentas tocarla es el error
       que ya se cometió con el marquee de servicios.
   ================================================================== */
.hm-proyectos {
  padding: clamp(64px, 9vw, 120px) 0 clamp(48px, 7vw, 88px);
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
  overflow: hidden;
}

.hm-tira {
  position: relative;
  margin-top: clamp(32px, 4vw, 48px);
}

/* Velos laterales: la tira sangra por los dos bordes y sin ellos las
   miniaturas aparecen y desaparecen cortadas en seco. */
.hm-tira::before,
.hm-tira::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(32px, 7vw, 120px);
  z-index: 2;
  pointer-events: none;
}
.hm-tira::before { left: 0;  background: linear-gradient(to right, var(--bg-primary), transparent); }
.hm-tira::after  { right: 0; background: linear-gradient(to left,  var(--bg-primary), transparent); }

.hm-tira-pista {
  display: flex;
  gap: var(--space-4);
  width: max-content;
  animation: hm-desfile 90s linear infinite;
}
/* La pista lleva la lista DOS veces. El desplazamiento es del 50% justo
   —la mitad exacta del contenido—, que es lo que hace que el salto al
   reiniciar caiga sobre una copia idéntica y no se vea. Si se cambia el
   número de copias hay que cambiar este porcentaje. */
@keyframes hm-desfile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* SEGUNDA FILA, EN SENTIDO CONTRARIO.
   Se consigue con `animation-direction: reverse` en vez de con un
   segundo @keyframes: es la misma animación leída al revés, así que las
   dos filas van exactamente a la misma velocidad. Con dos juegos de
   fotogramas distintos es facilísimo que una acabe más rápida que otra y
   el cruce quede raro.
   La segunda va un poco más despacio a propósito —96s frente a 90— para
   que el conjunto no se lea como un mecanismo de dos engranajes. */
.hm-tira-pista + .hm-tira-pista { margin-top: var(--space-4); }
.hm-tira-pista-inversa {
  animation-direction: reverse;
  animation-duration: 96s;
}

/* El freno es del CONTENEDOR, no de cada fila: con el ratón sobre una,
   se paran las dos. Parando solo una, la de al lado sigue moviéndose
   justo cuando intentas leer un nombre, que es peor que no parar nada.
   El JS pone además `animationPlayState` para poder frenar por foco de
   teclado y por pestaña oculta; esta regla es la que actúa con el ratón
   aunque el JS no llegue a ejecutarse. */
.hm-tira:hover .hm-tira-pista,
.hm-tira:focus-within .hm-tira-pista { animation-play-state: paused; }

.hm-tira-item {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: clamp(200px, 24vw, 300px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  text-decoration: none;
}
.hm-tira-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 480ms var(--ease-out);
}
.hm-tira-item:hover img { transform: scale(1.04); }
.hm-tira-item:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; }

/* El nombre del vehículo solo aparece al señalar: en reposo la tira es
   una sucesión de coches, y veinte rótulos a la vez la convertirían en
   una lista. */
.hm-tira-nombre {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-5) var(--space-4) var(--space-3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  background: linear-gradient(to top, rgba(10,12,14,0.88), rgba(10,12,14,0));
  opacity: 0;
  transition: opacity var(--transition-base);
}
.hm-tira-item:hover .hm-tira-nombre,
.hm-tira-item:focus-visible .hm-tira-nombre { opacity: 1; }

/* CON EL DEDO: se arrastra, no desfila.
   Las dos filas se arrastran juntas porque el que desplaza es el
   contenedor. Arrastrarlas por separado obligaría a dos gestos para ver
   lo mismo, y con dos filas cruzadas nadie espera eso. */
@media (hover: none) {
  .hm-tira {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hm-tira::-webkit-scrollbar { display: none; }
  .hm-tira-pista { animation: none; padding: 0 var(--space-5); gap: var(--space-3); }
  .hm-tira-pista + .hm-tira-pista { margin-top: var(--space-3); }
  /* Miniaturas más pequeñas en táctil: a 200px solo entraba foto y media por
     fila y la tira se leía como una rejilla cortada en seco. Reducidas, caben
     dos y un asomo de la tercera, que es la señal de "hay más, arrástrame". */
  .hm-tira-item { width: clamp(150px, 46vw, 200px); scroll-snap-align: start; }
  /* Sin :hover no hay forma de destapar el rótulo, así que se deja fijo, en
     una sola línea con puntos suspensivos: un nombre largo se partía en tres
     renglones pisando el coche. El año no se pierde —está en la ficha—; aquí
     la tira es un escaparate, no una lista. */
  .hm-tira-nombre {
    opacity: 1;
    padding: var(--space-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hm-tira-pista { animation: none; }
  .hm-tira { overflow-x: auto; }
  .hm-tira-item img { transition: none; }
  .hm-tira-item:hover img { transform: none; }
}

.hm-proyectos-pie {
  max-width: var(--container-max);
  margin: clamp(28px, 4vw, 44px) auto 0;
  padding: 0 var(--space-5);
}

/* ==================================================================
   5. CIERRE
   ------------------------------------------------------------------
   El único bloque oscuro de la portada junto al pie. Era un titular,
   una línea y un botón centrados: correcto y sin ninguna fuerza para
   ser lo último que se lee antes del pie.

   Dos decisiones:

   1. DOS COLUMNAS, NO UNA CENTRADA. A la izquierda lo que se pide; a
      la derecha los datos con los que se decide (dónde estamos, a
      quién se escribe, qué hay). Centrado, el botón quedaba flotando
      en medio de mucho negro.
   2. DOS CAMINOS. A un taller se le escribe, pero sobre todo se le
      llama, y en un móvil el teléfono es un enlace que marca solo.
      Tener únicamente "pedir presupuesto" dejaba fuera a quien quiere
      preguntar algo en treinta segundos.
   ================================================================== */
.hm-cierre {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
  padding: clamp(64px, 9vw, 120px) 0;
}

.hm-cierre-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
}
@media (min-width: 900px) {
  .hm-cierre-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
    align-items: start;
  }
}

.hm-cierre-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);
}
.hm-cierre-titulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}
.hm-cierre-texto {
  margin: var(--space-5) 0 0;
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg-on-dark-muted);
}

.hm-cierre-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}
.hm-cierre-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 16px 30px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast);
}
.hm-cierre-btn svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Sobre el fondo oscuro el principal va en blanco: el azul de marca
   sobre #14171A da 4,0:1, por debajo del 4,5 que pide AA. En el hero
   sí puede ir azul porque allí el botón cae sobre el velo, no sobre
   este negro. */
.hm-cierre-btn-principal {
  background: #FFFFFF;
  color: var(--fg-primary);
  border: 1px solid #FFFFFF;
}
.hm-cierre-btn-principal:hover { background: #E4E8EC; border-color: #E4E8EC; }

.hm-cierre-btn-tel {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.34);
  font-variant-numeric: tabular-nums;
}
.hm-cierre-btn-tel:hover {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
}
.hm-cierre-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

.hm-cierre-nota {
  margin: var(--space-4) 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-on-dark-muted);
}

/* Columna de datos: filete arriba de cada uno, sin caja ni fondo. */
.hm-cierre-datos {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hm-cierre-datos li {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-dark);
}
.hm-cierre-datos li:last-child { border-bottom: 1px solid var(--border-dark); }
.hm-cierre-dato-t {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-on-dark-muted);
  margin-bottom: var(--space-2);
}
.hm-cierre-dato-v {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: #FFFFFF;
  text-decoration: none;
}
a.hm-cierre-dato-v { border-bottom: 1px solid rgba(255, 255, 255, 0.3); width: fit-content; }
a.hm-cierre-dato-v:hover { border-bottom-color: #FFFFFF; }

/* Con el dedo, el teléfono y el email son los dos enlaces que más se
   pulsan de la página. */
@media (hover: none) {
  a.hm-cierre-dato-v { min-height: 44px; display: flex; align-items: center; }
}