/* ═══════════════════════════════════════════════════════════════
   SERVICIOS — partials/servicios.php

   El titular «What We Make», su entrada a dos columnas y las cuatro
   fichas que se apilan al bajar.

   La banda de números y la de clientes que van debajo en /services NO
   están aquí: viven en css/cifras.css y css/clientes.css, porque sus
   partials sirven igual en otra página y esa página no tiene por qué
   cargar el CSS de unas fichas que no dibuja. Es la misma razón por la
   que trabajemos.css se separó de equipo.css.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* El color de reserva de una ficha cuyo servicio no tiene diapositiva
     en el hero. El partial escribe --sv-color en el style= de cada
     <li>; cuando no lo escribe, manda esta línea. */
  --sv-color: var(--acento);

  /* El blanco de la foto y de la caja de la flecha. Es la misma pareja
     gris+blanco de la FAQ, del formulario y de las tarjetas del equipo:
     superficie gris, y lo que va encima en blanco. */
  --sv-encima: #ffffff;

  /* ── Las dos medidas del apilado ─────────────────────────────────
     hueco   a cuánto del borde inferior del nav se queda la primera
     escalón cuánto más abajo se queda cada una respecto de la anterior.
             Es la franja de la ficha de abajo que sigue viéndose cuando
             la siguiente ya la ha tapado: con 0 se taparían del todo y
             el apilado no se vería; con mucho, la cuarta ficha empieza
             tan abajo que no cabe entera en pantalla. */
  --sv-hueco:   clamp(14px, 2.2vh, 30px);
  --sv-escalon: clamp(10px, 1.1vw, 18px);
}


/* ═══════════════════════════════════════════════════════════════
   1. La cabecera
   ═══════════════════════════════════════════════════════════════ */

.sv {
  background: var(--bg);
  padding: clamp(80px, 14vh, 170px) var(--hd-pad) clamp(40px, 7vh, 90px);
}

.sv-dentro {
  max-width: var(--ancho-max);
  margin: 0 auto;
}

.sv-titular {
  font-size: clamp(52px, 11vw, 168px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .92;
  color: var(--tinta-alta);
  margin-bottom: clamp(36px, 8vh, 110px);
}

/* La izquierda es una nota al margen y la derecha el texto que se lee.
   Del mismo tamaño competirían, y ganaría la izquierda solo por ir
   antes; por eso una va pequeña y en gris y la otra grande y en tinta.
   Mismas proporciones que la entrada de /the-team, a propósito: las dos
   páginas cuelgan de «Pages» y se visitan una detrás de otra. */
.sv-entrada {
  display: grid;
  grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
  gap: clamp(24px, 5vw, 90px);
  align-items: start;
  margin-bottom: clamp(48px, 9vh, 120px);
}

.sv-nota {
  max-width: 34ch;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.6;
  color: var(--muted);
}

.sv-texto {
  max-width: 64ch;
  font-size: clamp(17px, 1.75vw, 27px);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.42;
  color: var(--tinta-alta);
}


/* ═══════════════════════════════════════════════════════════════
   2. Las fichas, y cómo se apilan

   TODO EL EFECTO SON CUATRO LÍNEAS DE CSS y ninguna de JavaScript.

   Cada <li> es sticky y se queda pegado a --sv-hueco del nav, más un
   --sv-escalon por cada puesto que ocupa en la lista: la primera a 0
   escalones, la segunda a 1, la tercera a 2. Como la ficha de dentro
   tiene fondo opaco, la que sube tapa a la que ya está quieta y solo le
   deja ver la franja de esos escalones.

   El --i lo escribe el PHP en el style= de cada <li>, así que el número
   de fichas puede cambiar sin tocar esta hoja.

   LO QUE NO PUEDE HABER: ni overflow ni un transform en ningún ancestro
   de .sv-fila. Cualquiera de los dos convierte al ancestro en el marco
   de referencia del sticky y las fichas dejan de pegarse a la pantalla
   —se quedan quietas donde están y el apilado desaparece sin dar
   ningún error. Si algún día esto deja de funcionar, se busca eso.
   ═══════════════════════════════════════════════════════════════ */

.sv-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sv-fila {
  position: sticky;
  top: calc(var(--nav-alto) + var(--sv-hueco) + var(--i) * var(--sv-escalon));

  /* El aire entre fichas mientras todavía no se han apilado. Va como
     padding y no como margin porque un margin entre elementos sticky
     descuadra el punto en el que se pegan. */
  padding-bottom: clamp(16px, 2.4vh, 34px);
}

.sv-ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  gap: clamp(18px, 2.6vw, 48px);
  align-items: stretch;

  min-height: clamp(300px, 42vh, 440px);
  padding: clamp(18px, 2vw, 30px);
  border-radius: clamp(18px, 2vw, 32px);

  /* OPACO, y no es decoración: es lo que hace que una ficha tape a la
     de abajo. Con fondo transparente se leerían los dos textos
     superpuestos. */
  background: var(--gris);
}

.sv-cuerpo {
  display: flex;
  flex-direction: column;
  padding: clamp(6px, 1vw, 18px);
}

/* En cursiva y en el color del servicio, como el cargo de las tarjetas
   de /the-team. La referencia traía una caligrafía rosa; el porqué de
   no traerla está en el partial. */
.sv-lema {
  font-size: clamp(13px, 1.15vw, 17px);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--sv-color);
}

.sv-nombre {
  margin-top: clamp(6px, .8vh, 12px);
  font-size: clamp(26px, 3.4vw, 46px);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--tinta-alta);
}

/* El número y su regla, empujados al fondo del hueco que queda entre el
   nombre y el párrafo. El margin-top:auto es lo que abre ese hueco: sin
   él las cuatro cosas quedarían apelotonadas arriba y la ficha, medio
   vacía por abajo. */
.sv-marca {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 22px);
  margin-top: auto;
  padding-top: clamp(20px, 4vh, 56px);
}

.sv-num {
  flex: 0 0 auto;
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 700;
  letter-spacing: -.03em;
  /* Muy apagado a propósito: ordena la serie, no compite con el nombre
     que tiene justo encima. */
  color: var(--dim);
}

.sv-regla {
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}

.sv-gancho {
  max-width: 56ch;
  margin-top: clamp(14px, 2vh, 22px);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.65;
  color: var(--tinta);
}

/* El enlace a la tarjeta de /pricing. Discreto: la ficha ya se lee
   entera sin pulsarlo, y quien quiera saber lo que entra lo busca. */
.sv-mas {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: clamp(14px, 2vh, 22px);
  font-size: clamp(11px, .92vw, 13px);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-alta);
  text-decoration: none;
  transition: color .25s ease;
}
.sv-mas:hover { color: var(--sv-color); }

.sv-flecha {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.sv-mas:hover .sv-flecha { transform: translateX(4px); }


/* ── La foto ───────────────────────────────────────────────────── */
.sv-foto {
  position: relative;
  overflow: hidden;
  border-radius: clamp(14px, 1.5vw, 24px);
  /* Blanco debajo: mientras la imagen baja, el hueco se ve como parte
     de la ficha y no como un agujero. */
  background: var(--sv-encima);
}

/* display: contents — el <picture> desaparece del diseño y el <img>
   pasa a ser hijo directo de su contenedor, que es lo que las reglas de
   abajo dan por hecho. Es la convención de este sitio; la estableció
   .pf-obra picture en css/portfolio.css. Aquí había tres líneas
   —display:block, width y height— haciendo lo mismo peor. */
.sv-foto picture { display: contents; }

.sv-foto img {
  display: block;
  width: 100%;
  height: 100%;
}

.sv-foto img {
  /* cover y no contain: la foto tiene que llenar su marco. Con contain,
     una imagen más ancha que el hueco deja dos franjas blancas y la
     ficha se ve descuadrada. */
  object-fit: cover;
  object-position: center;
}

/* ── El vídeo, encima de la foto ────────────────────────────────
   Cada ficha lleva el clip de su vertical, el mismo del hero de la
   portada. Lo monta y lo arranca js/servicios.js cuando la ficha entra
   en pantalla; aquí solo se coloca.

   ARRANCA TRANSPARENTE y se enciende al empezar a pintar fotogramas.
   Entre que un <video> arranca y que tiene algo que enseñar hay un
   instante en el que es un rectángulo NEGRO; sin este fundido, cada
   ficha daría un parpadeo oscuro al llegar. Debajo está el poster, que
   es lo que se ve mientras tanto — y lo único que se ve si no hay
   JavaScript, si el ancho no llega o si se pidió menos movimiento. */
.sv-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
  z-index: 1;
}
.sv-video.esta-jugando { opacity: 1; }

/* El tinte del servicio sobre la foto, muy leve. Es lo que hace que las
   cuatro fotos —que vienen de sitios distintos— se lean como una serie
   sin tener que retocarlas una por una.

   z-index: 2 para que quede por encima del vídeo. Sin él el tinte se
   pintaría debajo —el vídeo tiene z-index 1— y en cuanto arrancara el
   clip la ficha perdería su color, que es justo lo que las hace verse
   como una serie. */
.sv-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--sv-color);
  opacity: .12;
  mix-blend-mode: multiply;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════
   Tamaños
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Las dos columnas de la entrada se apilan: la nota queda encima del
     texto que presenta, que es el orden en que se leen. */
  .sv-entrada { grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 3vh, 28px); }
  .sv-nota    { max-width: 52ch; }

  /* La foto pasa ARRIBA del texto y a lo ancho. A este ancho, en
     columna, se quedaba en una tira de menos de 200px en la que no se
     distinguía qué había dentro. */
  .sv-ficha {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .sv-foto  { order: -1; aspect-ratio: 16 / 9; }
  .sv-cuerpo { padding: clamp(4px, 2vw, 14px); }

  /* Y el hueco que abría el margin-top:auto ya no hace falta: en
     columna la ficha la marca el alto de su contenido. */
  .sv-marca { padding-top: clamp(16px, 3vh, 30px); }
}

@media (max-width: 760px) {
  /* SE ACABA EL APILADO. Con cuatro fichas pegándose una encima de otra
     en una pantalla de móvil, la cuarta empieza tan abajo que no cabe
     entera y hay que hacer scroll dentro de algo que ya está quieto.
     En vertical se leen mucho mejor una detrás de otra. */
  .sv-fila { position: static; padding-bottom: clamp(12px, 2vh, 20px); }
}

@media (prefers-reduced-motion: reduce) {
  .sv-flecha, .sv-mas { transition: none; }
  .sv-mas:hover .sv-flecha { transform: none; }

  /* Quien pidió menos movimiento tampoco quiere fichas deslizándose
     unas sobre otras al bajar. */
  .sv-fila { position: static; }
}