/* ============================================================================
   GEO — /servicios/   (page-servicios.php)

   Reconstruida desde los 3 grupos NUEVOS de Figma (canal scrksdyf):
     · seccion-ajustada-servicios               712:2   1733 × 1019
     · seccion-ajustada-servicios_scroll-lateral 712:5  8633 × 1053
     · seccion-ajustada-servicios-cierre        712:6   1765 × 1010

   SISTEMA DE MEDIDAS — nada de ojímetro:
     · Posiciones y tamaños de caja  → % del lienzo de diseño de su sección.
       Al ser porcentajes, escalan con el ancho real sin descuadrarse.
     · Tipografía → var(--u) = 1 px de diseño = calc(100vw / <ancho del lienzo>).
       font-size: clamp(<piso móvil>, calc(N * var(--u)), Npx)
       ⇒ a 1726/1733/1765 px de ancho el texto mide EXACTAMENTE los N px del nodo;
         por debajo escala fluido; por encima se topa en el valor de diseño
         (misma convención que el resto del tema).
     · line-height va como ratio (lhFigma / fsFigma) y letter-spacing en px del nodo.

   Los valores concretos de cada nodo están anotados en page-servicios.php.
   ============================================================================ */


/* ══════════════════════════════════════════════════════════════════════════
   1. APERTURA — 712:2
   ══════════════════════════════════════════════════════════════════════════ */
.serv-open {
  position: relative;
  background: #000000;            /* 472:3 Rectangle 527 */
  overflow: hidden;
}
.serv-open__canvas {
  --u: calc(100vw / 1733);        /* 1 px de diseño */
  position: relative;
  width: 100%;
  aspect-ratio: 1733 / 1019;      /* lienzo exacto del frame */
  min-height: 520px;
  color: #ffffff;
}

/* Fotos: 472:5 (izq) y 472:4 (der) · x 97 / 963 · y 177 · 644×755 */
.serv-open__photo {
  position: absolute;
  top: 17.3699%;                  /* 177 / 1019 */
  width: 37.1610%;                /* 644 / 1733 */
  height: 74.0922%;               /* 755 / 1019 */
  object-fit: cover;              /* contenedor de ratio fijo (CLAUDE.md §4) */
  object-position: center center;
  display: block;
}
.serv-open__photo--left  { left: 5.5972%; }   /*  97 / 1733 */
.serv-open__photo--right { left: 55.5684%; }  /* 963 / 1733 */

/* 472:6 Rectangle 528 — scrim POR ENCIMA de las fotos (orden de capas Figma) */
.serv-open__scrim {
  position: absolute;
  inset: 0;
  background: rgba(62, 62, 62, 0.50);   /* #3e3e3e @ 50% */
  pointer-events: none;                 /* no bloquea la selección del texto */
}

/* 472:8 — x 561 y 536 · 612 ancho · Montserrat 20 / lh 24.38 / ls -0.2 / CENTER */
.serv-open__lead {
  position: absolute;
  left: 32.3716%;                 /* 561 / 1733 */
  top: 52.6006%;                  /* 536 / 1019 · y medido desde el borde del frame */
  width: 35.3145%;                /* 612 / 1733 */
  margin: 0;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;                                   /* Regular */
  font-size: clamp(15px, calc(20 * var(--u)), 20px);  /* nodo: 20 */
  line-height: 1.219;                                 /* 24.38 / 20 */
  letter-spacing: -0.2px;
  color: #ffffff;
}
/* segmento "El Grupo es la respuesta." → Montserrat SemiBold Italic */
.serv-open__em {
  font-style: italic;
  font-weight: 600;
}
/* la línea en blanco del nodo ("\n\n") entre los dos bloques del lead */
.serv-open__gap { display: block; height: 1.219em; }

/* 472:9 — x 261 y 727 · 1181 ancho · 36 / lh 43.884 / ls -0.36 / CENTER */
.serv-open__welcome {
  position: absolute;
  left: 15.0606%;                 /* 261 / 1733 */
  top: 71.3444%;                  /* 727 / 1019 */
  width: 68.1477%;                /* 1181 / 1733 */
  margin: 0;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: clamp(20px, calc(36 * var(--u)), 36px);  /* nodo: 36 */
  line-height: 1.219;                                 /* 43.884 / 36 */
  letter-spacing: -0.36px;
  color: #ffffff;
}
.serv-open__script { font-family: 'Ballet', cursive; font-weight: 400; }
.serv-open__xbold  { font-weight: 800; }               /* Montserrat ExtraBold */


/* ══════════════════════════════════════════════════════════════════════════
   2. SCROLL LATERAL — 712:5
   Mecánica alineada con la referencia del cliente (gucci.com short-film).

   · TIRA CONTINUA: las fotos van PEGADAS. El paso (--step) ES el ancho de la
     foto, así que gap = 0 y se lee como una tira de película, no como piezas
     sueltas. El tamaño de caja sigue siendo el de Figma (520×558 → 30.1vw ×
     55.25%); lo único que cambió es la separación.
   · UN SOLO EFECTO DE FOCO: opacidad. Sin grayscale y sin cambio de tamaño
     (antes competían tres efectos a la vez). La curva la aplica servicios.js.
   · FILA DE ETIQUETAS permanente bajo la tira, viajando con ella: siempre hay
     un texto legible, y el cambio se lee como que la luz pasa de un nombre al
     siguiente.

   Lo que hay aquí es el estado NEUTRO: si el JS no corre se ven las 5 fotos a
   color y las 5 etiquetas legibles.
   ══════════════════════════════════════════════════════════════════════════ */
.serv-track {
  position: relative;
  overflow: hidden;               /* clipea la tira */
  height: 100vh;                  /* fallback sin svh */
  height: 100svh;
  min-height: 560px;
  background: #1f1f1f;            /* #000 + scrim #3e3e3e @50% (478:222) */
}
.serv-track__stage {
  --u: calc(100vw / 1726.6);      /* 1 px de diseño (8633 / 5) */
  --step: 30.1vw;                 /* = ANCHO de foto (Figma 520 / 1726.6) → gap 0 */
  position: relative;
  width: 100%;
  height: 100%;
  color: #ffffff;
}

/* ── La pieza que se mueve: fotos + etiquetas, un solo transform ───────────
   `left: 50%` + `margin-left: -step/2` deja la PRIMERA foto centrada en el
   arranque; al desplazarse -(n−1)·step, la ÚLTIMA queda centrada al final.  */
.serv-strip {
  position: absolute;
  left: 50%;
  margin-left: calc(var(--step) / -2);
  top: 24.4%;                     /* Figma: fotos a y ≈ 246 / 1010 */
  height: 55.25%;                 /* Figma: 558 / 1010 */
  width: max-content;
  will-change: transform;
}
.serv-rail {
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
}
.serv-photo {
  flex: 0 0 var(--step);          /* gap 0: el paso es el ancho de la foto */
  height: 100%;
  margin: 0;
  overflow: hidden;
  will-change: opacity;
}
.serv-photo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;              /* ratio fijo — la imagen puede cambiar */
  object-position: center center;
  display: block;
}

/* ── Etiquetas: una por foto, centrada bajo ella, nunca se ocultan ─────────
   Elemento NUEVO (no existe en el Figma): viene de la referencia del cliente.
   Tipografía elegida on-brand — Montserrat SemiBold, escala del propio lienzo. */
.serv-labels {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  margin-top: clamp(14px, calc(24 * var(--u)), 24px);
}
.serv-label {
  flex: 0 0 var(--step);
  padding: 0 clamp(8px, calc(16 * var(--u)), 16px);
  box-sizing: border-box;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(11px, calc(16 * var(--u)), 16px);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: #ffffff;
  opacity: 0.35;                  /* gris tenue; el JS sube la activa a 1 */
  will-change: opacity;
}
/* Sin JS, la primera queda en blanco — coherente con .serv-copy__block[data-lab="1"] */
.serv-label:first-child { opacity: 1; }

/* ── Los textos ───────────────────────────────────────────────────────────
   Los 5 bloques están superpuestos y hacen crossfade. Sin JS se muestra sólo
   el del lab 01, preferible a los 5 encimados.                              */
.serv-copy { position: absolute; inset: 0; }
.serv-copy__block {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;           /* el JS lo activa en el bloque visible */
  will-change: transform, opacity;
}
.serv-copy__block[data-lab="1"] { opacity: 1; }

/* Número — MonteCarlo 256 / lh 435.2 / ls -2.56 / #fff @40% · x 14.25% y 9.41%
   (478:219 · 482:17 · 483:43 · 484:67 · 485:95)                             */
.serv-copy__num {
  position: absolute;
  left: 14.25%;
  top: 9.41%;
  display: block;
  font-family: 'MonteCarlo', cursive;
  font-weight: 400;
  font-size: clamp(72px, calc(256 * var(--u)), 256px);
  line-height: 1.7;               /* 435.2 / 256 */
  letter-spacing: -2.56px;
  color: #ffffff;
  opacity: 0.4;                   /* fill del nodo (se compone con la del bloque) */
  white-space: nowrap;
  pointer-events: none;
}

/* Título — Montserrat ExtraBold · y 30.30% */
.serv-copy__title {
  position: absolute;
  left: var(--title-x);
  top: 30.297%;                   /* 306 / 1010 */
  width: var(--title-w);
  margin: 0;
  text-align: var(--title-align);
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, calc(var(--title-fs) * var(--u)), calc(var(--title-fs) * 1px));
  line-height: var(--title-lh);
  letter-spacing: var(--title-ls);
  color: #ffffff;
}

/* ZONA FIJA de texto — la MISMA para los 5 labs (antes el cuerpo saltaba entre
   tres posiciones distintas). Conserva la x y el ancho dominantes del Figma
   (x 1173 · w 488 de 1726.6) y se centra en vertical, así cabe siempre entre
   la tira y la fila de etiquetas sea cual sea el largo del texto. */
.serv-copy__text {
  position: absolute;
  left: 67.937%;                  /* 1173 / 1726.6 */
  top: 50%;
  transform: translateY(-50%);
  width: 28.2636%;                /* 488 / 1726.6 */
}
.serv-copy__body {
  text-align: var(--body-align);
  font-family: 'Montserrat', sans-serif;
  font-weight: var(--body-weight);
  font-size: clamp(15px, calc(var(--body-fs) * var(--u)), calc(var(--body-fs) * 1px));
  line-height: var(--body-lh);
  letter-spacing: var(--body-ls);
  color: #ffffff;
}
/* segmento "CONOCE MÁS AQUÍ" del lab 02 (482:15) → Montserrat Bold */
.serv-copy__cta { font-weight: 700; }

/* Texto de apoyo (labs 02, 03 y 04) — conserva su tipografía de Figma; sólo
   cambia de sitio, porque su banda inferior original chocaba con las etiquetas. */
.serv-copy__aside {
  margin: clamp(16px, calc(28 * var(--u)), 28px) 0 0;
  text-align: var(--aside-align);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;               /* Bold en los 3 nodos */
  font-size: clamp(15px, calc(var(--aside-fs) * var(--u)), calc(var(--aside-fs) * 1px));
  line-height: var(--aside-lh);
  letter-spacing: var(--aside-ls);
  color: #ffffff;
}
/* INTERRUPTOR APAGADO — no lo emite ningún lab hoy ('aside_scrim' => false).
   Dos capas de texto del Figma (apoyo del lab 02, 483:47, y cuerpo del lab 03,
   484:71) quedaron DEBAJO del scrim 478:222 y ahí se ven grises. Es orden de
   capas ACCIDENTAL — en el mismo grupo los textos del mismo rol cambian de lado
   según el slide — así que los diez van en BLANCO. El fantasma de las FOTOS que
   atenúa la sección vecina sí es intencional, y lo aplica servicios.js.
   Se conserva la regla por si se quisiera el gris: compuesto #fff al 50% sobre
   #3e3e3e = #9f9f9f. Medido sobre el fantasma (foto al 20% sobre #1f1f1f) daba
   5.10:1 mediana / 3.26:1 en la zona clara — sirve para Bold 20px (AA 3:1), pero
   NO para Regular 20px (AA 4.5:1), que se quedaba en 3.25–4.24:1. */
.serv-copy__aside--scrim { color: #9f9f9f; }



/* ══════════════════════════════════════════════════════════════════════════
   3. CIERRE — 712:6
   ══════════════════════════════════════════════════════════════════════════ */
.serv-close {
  position: relative;
  background: #1f1f1f;            /* #000 (196:141) + scrim #3e3e3e @50% (487:166) */
  overflow: hidden;
}
.serv-close__canvas {
  --u: calc(100vw / 1765);
  position: relative;
  width: 100%;
  aspect-ratio: 1765 / 1010;
  min-height: 520px;
  color: #ffffff;
}
/* Las 4 capas se superponen; sin esto, la última taparía los eventos de puntero
   (selección de texto) de las tres anteriores. */
.serv-close__col     { position: absolute; inset: 0; pointer-events: none; }
.serv-close__col > * { pointer-events: auto; }

.serv-close__icon {
  position: absolute;
  left: var(--cx);
  top: var(--icon-y);
  width: var(--icon-w);
  height: var(--icon-h);
  transform: translateX(-50%);
  object-fit: contain;
  display: block;
}
.serv-close__title {
  position: absolute;
  left: var(--cx);
  top: var(--title-y);
  width: var(--title-w);
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(16px, calc(22 * var(--u)), 22px);  /* nodo: 22 */
  line-height: 1.219;                                 /* 26.818 / 22 */
  letter-spacing: -0.44px;
  color: #ffffff;
}
.serv-close__body {
  position: absolute;
  left: var(--cx);
  top: var(--body-y);
  width: var(--body-w);
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;                                   /* Medium */
  font-size: clamp(13px, calc(16 * var(--u)), 16px);  /* nodo: 16 */
  line-height: 1.5625;                                /* 25 / 16 */
  letter-spacing: -0.32px;
  color: #ffffff;
}


/* ══════════════════════════════════════════════════════════════════════════
   APILADO DEL SCROLL LATERAL — móvil, táctil (incl. iPad) y reduced-motion.

   ⚠️ La lista de condiciones de aquí abajo es LITERALMENTE la misma cadena que
      la constante STACK_MQ de servicios.js. Si se toca una, hay que tocar la
      otra o la sección se rompe (CSS horizontal + JS sin pin, o al revés).

   Sin pin ni animación: las 5 fotos apiladas en vertical, a color y visibles,
   intercaladas con su texto. El intercalado se consigue con `display: contents`
   sobre el strip, el riel y el contenedor de textos (sus hijos pasan a ser hijos
   directos del stage) más `order: var(--ord)`, que el PHP imprime en cada uno.

   La fila de etiquetas se oculta: en vertical duplicaría el <h2> que ya lleva
   cada bloque de texto justo encima de su foto.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px), (hover: none) and (pointer: coarse), (prefers-reduced-motion: reduce) {
  .serv-track {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .serv-track__stage {
    display: flex;
    flex-direction: column;
    height: auto;
    padding-bottom: 32px;
  }
  .serv-strip, .serv-rail, .serv-copy { display: contents; }
  .serv-labels { display: none; }
  .serv-photo, .serv-copy__block { order: var(--ord); }

  .serv-photo {
    position: static;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    margin: 0 0 8px;
    overflow: visible;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    will-change: auto;
  }
  .serv-photo__img {
    width: 100%;
    height: auto;
    aspect-ratio: 520 / 558;      /* caja de ratio fijo (Figma) */
  }

  .serv-copy__block {
    position: static;
    inset: auto;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
    padding: 56px 24px 24px;
    box-sizing: border-box;
    will-change: auto;
  }
  .serv-copy__text {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    transform: none;
  }
  .serv-copy__num,
  .serv-copy__title,
  .serv-copy__body,
  .serv-copy__aside {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    text-align: left;
  }
  .serv-copy__num {
    font-size: clamp(56px, 18vw, 96px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
  }
  .serv-copy__title {
    font-size: clamp(24px, 6.4vw, 32px);
    margin: 0 0 20px;
  }
  .serv-copy__body,
  .serv-copy__aside {
    font-size: clamp(15px, 4.2vw, 18px);
    line-height: 1.6;
    letter-spacing: 0;
  }
  .serv-copy__aside { margin-top: 20px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   APERTURA Y CIERRE en móvil / táctil.
   Estas dos secciones NO animan, así que reduced-motion no las toca.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .serv-open__canvas {
    aspect-ratio: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 0 48px;
  }
  .serv-open__photo {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 644 / 755;
  }
  .serv-open__photo--right { display: none; }   /* una sola foto en móvil */
  .serv-open__lead,
  .serv-open__welcome {
    position: static;
    width: auto;
    margin: 0 auto;
    padding: 32px 24px 0;
    max-width: 640px;
  }
  .serv-open__welcome { padding-top: 20px; }

  .serv-close__canvas {
    aspect-ratio: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 64px 24px;
    box-sizing: border-box;
  }
  .serv-close__col {
    position: static;
    inset: auto;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
  .serv-close__icon,
  .serv-close__title,
  .serv-close__body {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    max-width: 340px;
  }
  .serv-close__icon  { width: 72px; height: auto; }
  .serv-close__title { font-size: 18px; }
  .serv-close__body  { font-size: 15px; }
}

/* Tablet horizontal / pantallas táctiles anchas: 2 columnas en el cierre */
@media (min-width: 700px) and (hover: none) and (pointer: coarse) {
  .serv-close__canvas { grid-template-columns: repeat(2, 1fr); gap: 56px 40px; }
}