/* ----------------------------------------------------
   MAFHESA — Estilos de páginas interiores
   Hereda el sistema de diseño de index.html (latón/oro viejo,
   Cormorant Garamond + Outfit). Usado por:
     - reparacion-de-relojes-madrid.html
     - fornitura-relojeria.html
   ---------------------------------------------------- */

:root {
  --color-cream: #faf7f2;
  --color-black: #121212;
  --color-copper: #c5a059;
  --color-copper-light: #e5c384;
  --color-copper-dark: #98783b;
  --color-charcoal: #252322;
  --color-charcoal-light: #3d3a39;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Outfit", Helvetica, Arial, sans-serif;
  --transition-smooth: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  /* Escala de espaciado. Aquí no hay "espaciado global" como en WordPress,
     así que estas 4 variables hacen ese papel: los huecos entre elementos
     salen SIEMPRE de una de ellas, y tocando esto se mueve toda la web.
     Antes cada rejilla llevaba su número a ojo (1,5 / 2 / 2,5 / 3,2 / 4rem)
     y unas secciones se veían apretadas al lado de otras. */
  --hueco-s: 1.5rem; /* dentro de un bloque */
  --hueco-m: 2.5rem; /* entre tarjetas de una misma rejilla */
  --hueco-l: 3.5rem; /* entre columnas separadas */
  --hueco-xl: 4rem; /* entre las 2 mitades de un bloque partido */
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background-color: var(--color-black);
  color: var(--color-cream);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Barra de scroll en latón (Firefox) */
  scrollbar-color: var(--color-copper) var(--color-black);
  scrollbar-width: thin;
}

body {
  background-color: var(--color-cream);
  overflow-x: hidden;
  line-height: 1.6;
}

/* Barra de scroll en latón siempre, no solo al pasar el ratón: sobre el
   fondo oscuro el gris apenas se distinguía. */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-black);
}
::-webkit-scrollbar-thumb {
  background: var(--color-copper);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-copper-light);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
}

p {
  font-size: 1.05rem;
  font-weight: 300;
}

.label {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-copper);
  font-weight: 600;
  display: inline-block;
  margin-bottom: 1rem;
}

a {
  color: inherit;
}

/* Accesibilidad: foco visible y respeto a reduced-motion */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-copper);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------
   CABECERA (idéntica a la home)
   ---------------------------------------------------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0.8rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  transition: var(--transition-smooth);
  background: rgba(250, 247, 242, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(197, 160, 89, 0.18);
}

.header-container {
  width: 100%;
  max-width: 1600px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8%;
}

header.scrolled {
  padding: 0.4rem 0;
  background: rgba(250, 247, 242, 0.98);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(197, 160, 89, 0.25);
}

/* Logo: mismos valores que la home (márgenes negativos para que el
   logotipo se vea grande sin engordar la barra) */
.brand-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 12px;
  height: 54px;
  transition: var(--transition-smooth);
  margin-left: -8px;
  overflow: visible;
}

.logo-img {
  height: 110px;
  max-height: none;
  width: auto;
  object-fit: contain;
  display: block;
  margin-top: -28px;
  margin-bottom: -28px;
  transition: var(--transition-smooth);
}

header.scrolled .brand-logo {
  height: 44px;
}

header.scrolled .logo-img {
  height: 90px;
  margin-top: -23px;
  margin-bottom: -23px;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2.5rem;
  align-items: center;
}

.nav-links a {
  color: var(--color-charcoal);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  position: relative;
  padding: 0.5rem 0;
  transition: var(--transition-fast);
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-copper);
  transition: var(--transition-fast);
}

.nav-links a:hover {
  color: var(--color-copper);
}

.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  width: 100%;
}

.nav-links a[aria-current="page"] {
  color: var(--color-copper-dark);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  z-index: 1001;
}

.menu-toggle span {
  display: block;
  width: 25px;
  height: 2px;
  background-color: var(--color-charcoal);
  transition: var(--transition-fast);
}

.menu-toggle.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.menu-toggle.open span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ----------------------------------------------------
   HERO DE PÁGINA INTERIOR
   Más contenido y menos espectáculo que el de la home:
   estas páginas responden a una búsqueda concreta.
   ---------------------------------------------------- */
.page-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  padding: 0 0 5rem;
  background: var(--color-black);
  overflow: hidden;
}

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

.page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  filter: grayscale(15%);
}

/* Velo suave: solo el necesario para que el texto se lea, sin apagar
   la foto. El degradado carga más abajo, que es donde va el texto. */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(18, 18, 18, 0.88) 0%,
    rgba(18, 18, 18, 0.5) 45%,
    rgba(18, 18, 18, 0.2) 100%
  );
  z-index: 1;
}

.page-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: 0 8%;
}

.page-hero h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.04;
  color: var(--color-cream);
  /* 16ch partía "Fornitura y repuestos de relojería" en 3 líneas cortas.
     Con 20ch entra en 2 y el bloque queda equilibrado. */
  max-width: 20ch;
  margin-bottom: 1.4rem;
  text-wrap: balance;
}

/* Segunda línea en cursiva dorada, igual que la home. Ojo: en una serif
   la itálica no es la redonda inclinada, es otro dibujo de letra (la "j"
   y la "a" cambian de forma), y eso es justo lo que da el contraste. */
.page-hero h1 span {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--color-copper);
}

/* La pregunta que engancha va en serif y más grande que el texto de apoyo:
   es lo segundo que se lee después del H1, no un párrafo más. */
.page-hero .hero-gancho {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.25;
  color: var(--color-copper-light);
  max-width: 24ch;
  margin-bottom: 1.1rem;
  font-weight: 300;
}

.page-hero .hero-intro {
  color: rgba(250, 247, 242, 0.78);
  max-width: 56ch;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
}

/* ----------------------------------------------------
   SECCIONES BASE
   ---------------------------------------------------- */
/* El ancho útil se calcula igual que en la home: la caja llega a
   1600px y el 8% lateral vive dentro, no fuera. Así el contenido de
   las páginas interiores cae en la misma vertical que el de la home. */
.section {
  padding: 7rem 0;
}

.section-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 8%;
}

/* Secciones que continúan la anterior sobre el mismo fondo: no repiten los
   7rem de arriba (quedaría un vacío enorme) pero tampoco van a cero, que
   las dejaba pegadas al bloque de encima. */
.section-sin-tope {
  padding-top: 3.5rem;
}

.section-light {
  background: var(--color-cream);
  color: var(--color-charcoal);
}

.section-light p {
  color: rgba(37, 35, 34, 0.78);
}

.section-dark {
  background: var(--color-black);
  color: var(--color-cream);
}

.section-dark p {
  color: rgba(250, 247, 242, 0.78);
}

.section-head {
  max-width: 62ch;
  margin-bottom: 3.6rem;
}

.section-head h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
  margin-bottom: 1.1rem;
}

/* ----------------------------------------------------
   FICHA DE SERVICIO
   Cada servicio con su nombre técnico real. La regla del
   oficio (lo que distingue al profesional) va destacada:
   es la información que el cliente no encuentra en un bazar.
   ---------------------------------------------------- */
.servicio-list {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(37, 35, 34, 0.14);
}

.servicio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: var(--hueco-m);
  padding: 2.8rem 0;
  border-bottom: 1px solid rgba(37, 35, 34, 0.14);
  align-items: start;
}

.servicio h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
}

.servicio-body p + p {
  margin-top: 0.9rem;
}

.servicio-nota {
  margin-top: 1.2rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--color-copper);
  font-size: 0.98rem;
  color: rgba(37, 35, 34, 0.72);
}

.servicio-nota strong {
  color: var(--color-copper-dark);
  font-weight: 600;
}

/* ----------------------------------------------------
   LISTA DE PIEZAS (fornitura)
   Sin fotos: en B2B convence el dato concreto, no una imagen
   genérica de stock. Se lee como un índice técnico.
   ---------------------------------------------------- */
/* 2 columnas fijas: con 3 y un hueco de 3.5rem el texto se comprimía y
   la última se salía por la derecha. min-width:0 evita que el contenido
   largo estire la columna más allá de su parte. */
.piezas-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--hueco-xl);
  border-top: 1px solid rgba(250, 247, 242, 0.16);
}

/* La línea de arriba en latón tenue marca cada bloque sin recargar:
   con solo el borde inferior gris las filas se fundían entre sí. */
.pieza-fila {
  padding: 2.2rem 0;
  border-bottom: 1px solid rgba(250, 247, 242, 0.16);
  min-width: 0;
  position: relative;
}

.pieza-fila::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 34px;
  height: 1px;
  background: var(--color-copper);
}

/* La función de la pieza, en latón y mayúsculas. Antes no tenía estilo
   propio y salía en el mismo blanco que el título, así que la sección
   entera se leía plana. */
.pieza-term {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-copper);
  margin-bottom: 0.5rem;
}

.pieza-fila h3 {
  font-size: 1.45rem;
  margin-bottom: 0.5rem;
  color: var(--color-cream);
}

.pieza-fila p {
  font-size: 0.98rem;
  max-width: 46ch;
}

/* ----------------------------------------------------
   PASOS SIMPLES (cómo se pide una pieza)
   ---------------------------------------------------- */
/* Columnas más anchas (280px) y hueco mayor: con 240px cada paso partía
   su texto en 2 líneas cortas y la sección se veía rayada. */
.recorrido-simple {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--hueco-l);
  counter-reset: simple;
}

.paso-simple {
  counter-increment: simple;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(197, 160, 89, 0.45);
}

.paso-simple h3 {
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}

.paso-simple h3::before {
  content: counter(simple, decimal-leading-zero);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--color-copper);
  font-weight: 600;
}

.paso-simple p {
  font-size: 0.98rem;
}

/* CTA dentro del hero */
/* ----------------------------------------------------
   BLOQUE DESTACADO CON IMAGEN
   ---------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hueco-xl);
  align-items: center;
}

/* Proporción fija en vez de height:100%: el contenedor no tiene altura
   propia, así que la imagen mandaba y dejaba el texto descolgado arriba. */
.split-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 560px;
  object-fit: cover;
  display: block;
}

.split-body h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  margin-bottom: 1.2rem;
}

/* ----------------------------------------------------
   APARICIÓN AL HACER SCROLL (mismo efecto que la home)
   ---------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.15s;
}
.reveal-delay-2 {
  transition-delay: 0.3s;
}
.reveal-delay-3 {
  transition-delay: 0.45s;
}

/* ----------------------------------------------------
   BANNER A SANGRE ENTRE SECCIONES
   Corta el ritmo de lectura y deja respirar la página.
   ---------------------------------------------------- */
.banner {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-black);
}

/* Banner grande, a pantalla casi completa */
.banner-xl {
  min-height: 72vh;
}

.banner-xl .banner-inner p {
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  text-wrap: balance;
}

/* Velo más suave: solo el necesario para que la cita se lea. El centro
   queda casi limpio para que se vea el relojero trabajando. */
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(18, 18, 18, 0.2) 0%,
    rgba(18, 18, 18, 0.72) 100%
  );
  z-index: 1;
}

/* ----------------------------------------------------
   PRUEBA SOCIAL
   ---------------------------------------------------- */
.prueba {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hueco-l);
  flex-wrap: wrap;
  text-align: center;
}

/* Las cifras van en la sans: Cormorant tiene números de estilo antiguo
   (unos suben y otros bajan de la línea) y en datos se lee mal. El serif
   se reserva para títulos y texto citado, como hace la home. */
.prueba-dato .cifra {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(2.2rem, 4.2vw, 3.2rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--color-copper-dark);
}

.prueba-dato .pie {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(37, 35, 34, 0.6);
}

.prueba-sep {
  width: 1px;
  height: 62px;
  background: rgba(37, 35, 34, 0.18);
}

/* ----------------------------------------------------
   OPINIONES DE CLIENTES
   El texto va en serif (es voz humana, no dato) y sin comillas
   dibujadas ni estrellas: la credibilidad la da el nombre y el
   enlace a la ficha, no un adorno.
   ---------------------------------------------------- */
.opiniones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--hueco-l);
  margin-top: 4.5rem;
}

.opinion {
  padding-top: 1.6rem;
  border-top: 1px solid rgba(197, 160, 89, 0.45);
}

.opinion p {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--color-charcoal);
  margin-bottom: 0.9rem;
}

.opinion cite {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(37, 35, 34, 0.55);
}

/* Mismo dorado y tamaño que las estrellas de la home */
.review-stars {
  color: #d4af37;
  font-size: 0.9rem;
  letter-spacing: 0;
}

.opiniones-pie {
  margin-top: 2.6rem;
  text-align: center;
}

.opiniones-pie a {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-copper-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(197, 160, 89, 0.5);
  padding-bottom: 3px;
  transition: var(--transition-fast);
}

.opiniones-pie a:hover {
  color: var(--color-copper);
  border-bottom-color: var(--color-copper);
}

@media (max-width: 700px) {
  .prueba-sep {
    display: none;
  }
}

/* La foto se veía muy apagada: al 38% y con el velo encima, el relojero
   apenas se distinguía. Subida al 62% y sin desaturar tanto. */
.banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.62;
  filter: grayscale(15%);
  transform: scale(1.04);
  transition: transform 8s cubic-bezier(0.16, 1, 0.3, 1);
}

.banner:hover img {
  transform: scale(1.12);
}

.banner-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 3rem 8%;
  max-width: 1100px;
  width: 100%;
}

/* Texto más contenido: a 2,6rem la cita ocupaba 3 líneas y pesaba más
   que la propia foto. Con 2rem entra en 2 y respira. */
.banner-inner p {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1.3;
  color: var(--color-cream);
  font-weight: 300;
  text-wrap: balance;
}

/* Nota: aquí había un filete de latón sobre la cita. Se quitó al poner el
   triángulo: dos adornos dorados seguidos sobraban, y el triángulo además
   significa algo (que la página sigue), mientras el filete solo decoraba. */

/* Triángulo de "sigue bajando", igual que en la home. Va SOLO donde la
   página corta con una imagen a sangre o cambia de fondo, que es donde
   el visitante podría pensar que se ha acabado. En secciones normales no
   se pone: repetido en todas dejaría de significar nada. */
.banner-triangle {
  display: block;
  font-size: 0.95rem;
  color: var(--color-copper-light);
  margin-bottom: 1rem;
  /* Sombra porque aquí va sobre foto: en la home el fondo es más oscuro
     y no le hacía falta, pero sobre el cajón claro se perdía. */
  text-shadow: 0 1px 6px rgba(18, 18, 18, 0.9);
  animation: pulseTriangle 3s infinite ease-in-out;
}

@keyframes pulseTriangle {
  0%,
  100% {
    opacity: 0.6;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(3px);
  }
}

.banner-inner cite {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-copper);
}

/* ----------------------------------------------------
   EL RECORRIDO DEL RELOJ EN EL TALLER
   Carrusel horizontal: se arrastra hacia la derecha para
   ver el proceso completo. La numeración SÍ significa algo
   aquí (es el orden real por el que pasa la pieza).
   ---------------------------------------------------- */
/* La sección se queda fija mientras la fila avanza hacia la derecha.
   La altura de este contenedor es la "pista" de scroll disponible.
   Todo el contenido vive dentro de .section-inner, el MISMO contenedor
   que usan las demás secciones, para que el ancho sea idéntico. */
.recorrido-sticky {
  position: relative;
}

.recorrido-viewport {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* La ventana que recorta la fila arranca en el mismo sitio que el
   texto (por eso vive dentro de .section-inner) y se extiende hacia
   la derecha hasta el borde de la pantalla. */
.recorrido-pista {
  overflow: hidden;
  margin-right: calc(-50vw + 50%);
}

/* La fila no lleva margen propio: hereda el de .section-inner. */
.recorrido {
  display: flex;
  gap: var(--hueco-m);
  counter-reset: paso;
  will-change: transform;
  transition: transform 0.12s linear;
}

.paso {
  position: relative;
  counter-increment: paso;
  flex: 0 0 clamp(320px, 38vw, 620px);
}

/* Aire tras la última tarjeta para que no acabe pegada al borde */
.recorrido::after {
  content: "";
  flex: 0 0 2rem;
}

/* Flechas de navegación (solo en móvil, donde se desliza a mano) */
.recorrido-flechas {
  display: none;
  gap: 0.8rem;
  margin-top: 1.6rem;
  align-items: center;
}

.recorrido-flechas button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(197, 160, 89, 0.5);
  background: transparent;
  color: var(--color-copper-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.recorrido-flechas button:hover:not(:disabled),
.recorrido-flechas button:active:not(:disabled) {
  background: var(--color-copper);
  border-color: var(--color-copper);
  color: var(--color-black);
}

.recorrido-flechas button:disabled {
  opacity: 0.3;
  cursor: default;
}

.recorrido-flechas svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.recorrido-cuenta {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: rgba(37, 35, 34, 0.55);
  margin-left: 0.4rem;
}

.paso-media {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.4rem;
  aspect-ratio: 3 / 2;
  background: rgba(37, 35, 34, 0.06);
}

.paso-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.paso:hover .paso-media img {
  transform: scale(1.05);
}

.paso h3 {
  font-size: 1.32rem;
  line-height: 1.2;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}

.paso h3::before {
  content: counter(paso, decimal-leading-zero);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--color-copper);
  font-weight: 600;
}

.paso p {
  font-size: 0.98rem;
}

/* Cabecera del recorrido: mismo ancho útil que el resto de secciones
   (caja de 1600px con el 8% dentro), no un ancho propio. */
.recorrido-head {
  margin-bottom: 2.6rem;
}

.recorrido-head p {
  max-width: 62ch;
}

/* Barra de avance del proceso */
.recorrido-progreso {
  margin-top: 2.4rem;
  height: 1px;
  background: rgba(37, 35, 34, 0.16);
  position: relative;
}

.section-dark .recorrido-progreso::before {
  background: rgba(250, 247, 242, 0.18);
}

.recorrido-progreso span {
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  width: 0;
  background: var(--color-copper);
  transition: width 0.12s linear;
}

/* Pista de que se puede arrastrar */
.recorrido-hint {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-copper);
}

.recorrido-hint::after {
  content: "";
  width: 42px;
  height: 1px;
  background: var(--color-copper);
  animation: deslizar 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: left center;
}

@keyframes deslizar {
  0%,
  100% {
    transform: scaleX(0.4);
    opacity: 0.5;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* ----------------------------------------------------
   TIPOS DE RELOJ QUE ENTRAN AL TALLER
   Rejilla visual: cada familia con su imagen.
   ---------------------------------------------------- */
.tipos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--hueco-m);
}

.tipo {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  background: var(--color-black);
}

.tipo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.62;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.6s ease;
}

/* Corrige el fondo verdoso de la foto de cuerda manual: baja algo de
   saturación (se lleva el verde) y la calienta con un sepia leve para
   que entone con las otras tres, que son marrón/ámbar. */
.tipo-frio img {
  filter: saturate(0.75) sepia(0.22) hue-rotate(-8deg);
}

.tipo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(18, 18, 18, 0.92) 5%,
    rgba(18, 18, 18, 0.25) 70%
  );
  z-index: 1;
}

.tipo:hover img {
  transform: scale(1.07);
  opacity: 0.75;
}

.tipo-body {
  position: relative;
  z-index: 2;
  padding: 1.8rem 1.6rem;
}

.tipo-body h3 {
  font-size: 1.4rem;
  color: var(--color-cream);
  margin-bottom: 0.4rem;
}

.tipo-body p {
  font-size: 0.98rem;
  color: rgba(250, 247, 242, 0.78);
}

/* Imágenes con zoom lento al pasar el ratón */
.split-media,
.servicio-media {
  overflow: hidden;
}

.split-media img {
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.split-media:hover img {
  transform: scale(1.05);
}

/* ----------------------------------------------------
   CTA
   ---------------------------------------------------- */
.cta-band {
  background: var(--color-charcoal);
  padding: 7.5rem 8%;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-band h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--color-cream);
  margin-bottom: 1rem;
}

.cta-band p {
  color: rgba(250, 247, 242, 0.75);
  max-width: 52ch;
  margin: 0 auto 2.4rem;
}

.cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* La variante del hero va DESPUÉS de .cta-actions a propósito: con la
   misma especificidad gana la última, y antes quedaba centrada. */
.cta-actions-hero {
  justify-content: flex-start;
  margin-top: 2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2.2rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--color-copper);
  transition: var(--transition-fast);
}

.btn-primary {
  background: var(--color-copper);
  color: var(--color-black);
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--color-copper-light);
  border-color: var(--color-copper-light);
}

.btn-ghost {
  color: var(--color-copper);
}

.btn-ghost:hover {
  background: rgba(197, 160, 89, 0.12);
}

/* ----------------------------------------------------
   FAQ (mismo diseño que la de la home)
   Tarjetas blancas con borde de latón y un "+" que gira al
   abrirse. Se usa <details>/<summary>: es nativo, funciona sin
   JavaScript y el texto está en el HTML para que Google lo indexe.
   ---------------------------------------------------- */
.faq {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  border: 1px solid var(--color-copper-light);
  border-radius: 4px;
  padding: 1.2rem 1.6rem;
  background-color: #fff;
}

.faq-item summary {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-charcoal);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::marker {
  content: "";
}

.faq-item summary::after {
  content: "+";
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--color-copper);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-charcoal-light);
  margin-top: 1rem;
  margin-bottom: 0;
}

/* ----------------------------------------------------
   ENLACE CRUZADO ENTRE LAS DOS PÁGINAS
   Un particular que aterriza en Fornitura buscando arreglar
   SU reloj tiene que encontrar la salida hacia Reparación.
   ---------------------------------------------------- */
.crosslink {
  border: 1px solid rgba(197, 160, 89, 0.35);
  padding: 2.4rem 2.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--hueco-m);
  flex-wrap: wrap;
}

.crosslink h3 {
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
}

.crosslink p {
  font-size: 0.98rem;
  max-width: 52ch;
}

/* ----------------------------------------------------
   PIE (idéntico a la home)
   ---------------------------------------------------- */
footer {
  background-color: var(--color-cream);
  color: var(--color-black);
  padding: 4.5rem 0 1.5rem;
  border-top: 1px solid rgba(197, 160, 89, 0.18);
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr 1fr 0.7fr;
  gap: var(--hueco-xl);
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
  padding: 0 8%;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* Logo del footer: mismo truco que la cabecera (100px con márgenes
   negativos) para que se vea grande sin descuadrar la columna. */
.footer-logo-container {
  display: block;
  height: 52px;
  overflow: visible;
  margin-left: -8px;
  margin-bottom: 0.5rem;
}

.footer-logo-img {
  height: 100px;
  width: auto;
  object-fit: contain;
  margin-top: -24px;
  margin-bottom: -24px;
}

.footer-desc {
  max-width: 280px;
}

.footer-col h3 {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-copper-dark);
  font-weight: 600;
}

.footer-col p {
  font-size: 0.95rem;
  color: var(--color-charcoal);
  line-height: 1.6;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.footer-col ul a {
  font-size: 0.92rem;
  color: var(--color-charcoal);
  text-decoration: none;
  transition: var(--transition-fast);
}

.footer-col ul a:hover {
  color: var(--color-copper-dark);
  padding-left: 4px;
}

.footer-hours {
  margin-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* La home usa space-between y luego lo corrige con un style en línea para
   centrarlo, porque ahí abajo solo va el copyright. Aquí se centra
   directamente: mismo resultado visual, sin el parche. */
.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(197, 160, 89, 0.15);
  padding: 2rem 8% 0;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

.footer-bottom p {
  color: rgba(18, 18, 18, 0.55);
  font-size: 0.8rem;
  margin: 0;
}

/* ----------------------------------------------------
   WIDGET DE WHATSAPP (copiado tal cual de la home)
   Verde oscuro con borde de latón, no el verde corporativo
   de WhatsApp: en la home ya se resolvió así para que el
   botón no rompa la paleta.
   ---------------------------------------------------- */
.whatsapp-widget-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--font-sans);
  pointer-events: none;
}

.whatsapp-btn {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #0d301b 0%, #061f10 100%);
  border: 1.5px solid var(--color-copper);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-copper);
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: auto;
  position: relative;
}

.whatsapp-btn::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--color-copper);
  opacity: 0.6;
  animation: whatsappPulse 2s infinite;
}

.whatsapp-btn:hover {
  transform: scale(1.1) rotate(5deg);
  background: linear-gradient(135deg, #0f3d24 0%, #0d301b 100%);
  color: var(--color-copper-light);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  border-color: var(--color-copper-light);
}

.whatsapp-btn svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.whatsapp-tooltip {
  background-color: var(--color-cream);
  border: 1px solid rgba(197, 160, 89, 0.25);
  border-radius: 6px;
  padding: 0.9rem 1.2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  margin-bottom: 15px;
  width: 250px;
  position: relative;
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  transition: all 0.4s ease;
  pointer-events: auto;
}

.whatsapp-tooltip.show {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.whatsapp-tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}

.whatsapp-tooltip-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-copper-dark);
  margin: 0;
}

.whatsapp-tooltip-close {
  background: none;
  border: none;
  color: rgba(18, 18, 18, 0.4);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.2s;
}

.whatsapp-tooltip-close:hover {
  color: var(--color-black);
}

.whatsapp-tooltip-text {
  font-size: 0.85rem;
  color: rgba(18, 18, 18, 0.75);
  margin: 0;
  font-weight: 300;
}

@keyframes whatsappPulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .whatsapp-widget-container {
    bottom: 20px;
    right: 20px;
  }
  .whatsapp-btn {
    width: 54px;
    height: 54px;
  }
  .whatsapp-btn svg {
    width: 24px;
    height: 24px;
  }
}

/* ----------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------- */
@media (max-width: 900px) {
  .split,
  .servicio {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem;
  }

  /* El margen lateral lo pone .section-inner, no la sección: si se
     pusiera en las dos, se sumarían y el contenido quedaría estrecho. */
  .section {
    padding: 4.5rem 0;
  }

  .section-inner {
    padding: 0 6vw;
  }

  .cta-band {
    padding: 4.5rem 6vw;
  }

  .footer-grid,
  .footer-bottom {
    padding-left: 6vw;
    padding-right: 6vw;
  }

  /* Footer centrado en móvil, igual que la home: apilado y alineado a la
     izquierda las columnas quedaban descolgadas contra el margen. */
  footer {
    text-align: center;
  }

  .footer-col {
    align-items: center;
  }

  .footer-logo-container {
    margin-left: 0;
    align-self: center;
  }

  .footer-desc {
    max-width: 100%;
  }

  /* El hero mantiene presencia en móvil (no se confunde con una sección
     normal) pero deja hueco arriba para la cabecera fija, para que el
     título no quede por detrás de la barra. */
  /* En móvil el hero no necesita ser tan alto: la foto ya se entiende y
     lo que importa (título + botones) tiene que verse sin scrollear
     media pantalla. Antes ocupaba 82svh y el H1 caía muy abajo. */
  .page-hero {
    min-height: 62vh;
    /* svh evita el salto por la barra del navegador móvil */
    min-height: 62svh;
    padding: 6.5rem 0 3rem;
    align-items: flex-end;
  }

  .page-hero h1 {
    font-size: clamp(2.1rem, 9vw, 3rem);
    max-width: 100%;
  }

  .page-hero .hero-intro {
    font-size: 1rem;
    max-width: 100%;
  }

  .page-hero-content {
    padding: 0 6vw;
  }

  .menu-toggle {
    display: flex;
  }

  /* Cabecera compacta, mismos valores que la home */
  header {
    padding: 0.6rem 0;
  }

  .header-container {
    padding: 0 6vw;
  }

  .brand-logo {
    height: 48px;
  }

  .logo-img {
    height: 90px;
    max-height: none;
    margin-top: -21px;
    margin-bottom: -21px;
  }

  header.scrolled .brand-logo {
    height: 48px;
  }

  header.scrolled .logo-img {
    height: 90px;
    margin-top: -21px;
    margin-bottom: -21px;
  }

  /* Menú desplegable idéntico al de la home: cae por debajo de la
     cabecera con fondo oscuro, no ocupa la pantalla entera. */
  nav {
    display: contents;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 0;
    overflow: hidden;
    background-color: rgba(18, 18, 18, 0.98);
    backdrop-filter: blur(16px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;
    padding: 0;
    transition:
      max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      padding 0.4s ease;
    z-index: 1000;
    border-bottom: 1px solid rgba(197, 160, 89, 0.2);
    border-left: none;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  }

  /* Mismo valor holgado que la home: 6 enlaces caben de sobra. */
  .nav-links.open {
    max-height: 640px;
    padding: 2.5rem 0;
  }

  .nav-links a {
    color: var(--color-cream) !important;
    font-size: 1.1rem;
    letter-spacing: 0.25em;
  }

  .nav-links a:hover {
    color: var(--color-copper-light) !important;
  }

  .nav-links a[aria-current="page"] {
    color: var(--color-copper) !important;
  }

  .menu-toggle.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .menu-toggle.open span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .crosslink {
    flex-direction: column;
    align-items: flex-start;
  }

  .piezas-lista {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* En móvil el recorrido no se engancha al scroll: es un carrusel que
     se desliza con el dedo o con las flechas.

     TODO va en vw (ancho de pantalla). Antes el margen negativo iba en %
     (calculado sobre el contenedor) y el padding en vw: dos unidades
     distintas que no coincidían y cortaban la primera tarjeta. */
  .recorrido-sticky {
    height: auto !important;
    padding: 4.5rem 0;
  }

  .recorrido-viewport {
    position: static;
    min-height: 0;
    overflow: visible;
  }

  /* La pista ocupa el ancho completo de la pantalla, saliéndose del
     contenedor con un desplazamiento exacto a su borde izquierdo. */
  .recorrido-pista {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    scroll-snap-type: x mandatory;
    scroll-padding-left: 6vw;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .recorrido-pista::-webkit-scrollbar {
    display: none;
  }

  .recorrido {
    gap: 1rem;
    transform: none !important;
    padding: 0 6vw;
  }

  .paso {
    /* 100vw menos el margen lateral (6% a cada lado) = la tarjeta ocupa
       justo el ancho visible sin desbordarse. Todo en vw para que no
       dependa del contenedor. */
    flex: 0 0 88vw;
    max-width: 420px;
    /* Alineación por el inicio: con "center" la primera y la última
       tarjeta no alcanzan los extremos y las flechas se bloquean antes
       de tiempo. */
    scroll-snap-align: start;
  }

  .recorrido::after {
    flex-basis: 1px;
  }

  .recorrido-hint {
    display: none;
  }

  .recorrido-flechas {
    display: flex;
  }

  .banner {
    min-height: 38vh;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .cta-actions {
    flex-direction: column;
  }

  .btn {
    justify-content: center;
    /* Altura mínima cómoda para el dedo */
    min-height: 48px;
  }

  .servicio h3 {
    font-size: 1.35rem;
  }

  .tipo {
    min-height: 240px;
  }

  /* El botón de WhatsApp no debe tapar el final del contenido */
  .cta-band {
    padding-bottom: 6.5rem;
  }
}