/*
 * servicios.css — CSS específico de la página Servicios de NOVE Producciones.
 * Depende de tokens.css (cargado antes en head.php).
 * Artboard 1600pt. FACTOR ÚNICO 1.2208 (px = pt × 1.2208). Tokens en px, 0 overrides globales.
 *
 * Medidas trazables al manifiesto despiece/servicios.json:
 *   Hero: x=241 y=158–447, 82.7pt.
 *   Bg text: x=236 y=494/624/754, 165pt, #999494.
 *   Galería (re-escalada al factor único 2026-06-16): 8 fotos 311.5×219.6pt.
 *     Imagen = 311.5 × 1.2208 / 1360 ≈ 27.96% (% del container WIDE 1360, no del box padded).
 *     El grid hace margin-inline:-40px para anular el padding del container y que los %
 *     resuelvan contra 1360 (mapeo idéntico al resto del sitio). Offsets medidos:
 *     Lane A pos-1 (institucionales x=604.6) → (604.6−240)×1.2208/1360 = 32.73%
 *     Lane A pos-2 gap (a x=1040.7) = 11.19% · Lane B pos-1 (x=352.6) = 10.11% · gap = 11.12%
 *   Proceso: título x=242 y=1892; fases x=241/615/1005 y=2038.
 */


/* ================================================================
   HEADER: tope claro (crema) → logo + hamburger NEGROS, blancos al scrollear.
   Centralizado en includes/header.php vía $header_theme='light' (seteado en
   servicios.php). Antes vivía acá (filter + revert .scrolled); se removió al
   centralizar para que trabajos/news no repitan el bug del revert faltante.
   ================================================================ */


/* ================================================================
   1. HERO
   Fondo crema. "Lo hacemos todo." (rojo) + resto negro.
   ================================================================ */
.serv-hero {
  background: var(--color-cream);
  /* Compensa el header fijo (87px) + aire del diseño (título arranca y≈158). */
  padding-top: calc(var(--header-height) + 56px);
  padding-bottom: 36px;
}

.serv-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-hero);        /* 82.7pt × 1.2208 ≈ 101px */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-hero);        /* 0.873 medido */
  letter-spacing: -0.01em;
  max-width: var(--container-content);
}

.serv-hero__title .text-red { display: block; }
.serv-hero__rest {
  display: block;
  color: var(--color-black);
}


/* ================================================================
   2. GALERÍA DE SERVICIOS
   Grid escalonado + texto gigante de fondo (gris 165pt).
   ================================================================ */
.serv-galeria {
  background: var(--color-cream);
  padding-bottom: 90px;
  overflow: hidden;
}

.serv-galeria__inner {
  position: relative;
}

/* ---- Texto gigante de fondo (TEXTO real, no imagen) ----
   Gris muy clarito, detrás del grid. 165pt × 1.2208 ≈ 201px (token --text-service-text).
   Manifest: bgtext y=493.77 (section start), first image row y=641.85.
   top: 0 → aligns with gallery inner top; grid has padding-top:181px so images
   start below → bgtext starts above images (as in design).
   line-height: 0.789 → manifest line spacing (130pt) / font (165pt) = 0.789. */
.serv-galeria__bgtext {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.serv-galeria__bgtext-line {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-service-text);   /* 165pt × 1.2208 ≈ 201px */
  font-weight: var(--fw-medium);
  color: var(--color-grey);
  opacity: 0.32;                          /* "clarito" — bajo contraste como el diseño */
  line-height: var(--lh-watermark);       /* 0.789 medido (gap 130/165) */
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.serv-galeria__bgtext-line--indent {
  padding-left: 1.4em;
}

/* ---- Grid escalonado (FACTOR ÚNICO 1.2208) ----
   Re-escalado 2026-06-16: imagen y texto escalan con el MISMO factor que el resto
   del sitio. Antes la galería estaba en el sistema VIEJO 0.9 (img 20.62%, offsets
   ×0.9) mientras los labels usaban --text-display recalibrado a 65px → colisión.
   Mapeo (artboard 1600pt → container WIDE 1360px; content_left = 240pt):
     px_desde_borde = (x_pt − 240) × 1.2208 ;  % = px / 1360.
   Imagen: 311.5pt × 1.2208 = 380.3px → 380.3/1360 = 27.96% del container.
   El grid se ancla en el content-left del container WIDE y se extiende a la
   derecha hasta el borde de la foto más a la derecha (x=1352.2). Ese ancho real
   = (1352.2−240)×1.2208 ≈ 1358px = content-box(1280) + 78px → width:calc(100%+78px).
   Los 78px extra sangran sobre el padding derecho + ~38px más allá del container;
   .serv-galeria { overflow:hidden } los clipea (el diseño también bleed-ea a la der).
   Offsets (margin-left de cada foto, % del grid de 1358px; ml = (x_pt−240)×1.2208/1358):
     Imagen   = 311.5pt × 1.2208 / 1358 ≈ 28.0%
     Lane A pos-1 (institucionales x=604.6) = 32.78% · pos-2 gap (a x=1040.7) = 11.20%
     Lane B pos-1 (documentales  x=352.6) = 10.12% · pos-2 gap (a x=788.0)  = 11.14%
   Fila Lane A suma 100% (2 fotos lado a lado entran exactas); Lane B 77% (2 fotos).
   padding-top: 181px (imagen row-1 a y=641.9 vs bgtext top y=493.8 → 148.1pt×1.2208).
   margin-bottom: 45px (gap design row-to-row ≈ 74pt × 1.2208 / 2). */
.serv-galeria__grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 78px);   /* content-box 1280 + 78 = 1358px (ancho real del diseño) */
  padding-top: 181px;
}

.serv-item {
  position: relative;
  width: 28.0%;               /* 311.5pt × 1.2208 / 1358 */
  margin: 0;
  margin-bottom: 45px;
}

/* Posicionamiento por lane (fila) + pos (izq/der), via margin-left % exacto.
   Cada item rompe a nueva línea cuando corresponde gracias al margin-left que
   sumado al ancho fuerza el wrap (2 por fila). */

/* Lane A — filas impares: izq @32.78%, der gap @11.20% */
.serv-item--lane-a.serv-item--pos-1 { margin-left: 32.78%; }
.serv-item--lane-a.serv-item--pos-2 { margin-left: 11.20%; } /* gap entre img1-right e img2-left */

/* Lane B — filas pares: izq @10.12%, der gap @11.14% */
.serv-item--lane-b.serv-item--pos-1 { margin-left: 10.12%; }
.serv-item--lane-b.serv-item--pos-2 { margin-left: 11.14%; } /* gap entre img1-right e img2-left */

.serv-item__link {
  display: block;
  position: relative;
}

/* Label rojo solapado al borde superior-izquierdo de cada foto de galería.
   Diseño: label anclado al TOP de la foto, sobresaliendo a la izquierda.
   Offsets MEDIDOS en servicios.json (Δ label vs SU foto, × 1.2208):
     Δx promedio ≈ −113px sobre item de 380px ≈ −31% del item (rango −26.7%..−38.5%).
     Δy promedio ≈ +9px desde el top de la foto.
   Con la imagen re-escalada a 27.96% (380px) el gap entre cards es ~11.2% (≈150px):
   el label de la card derecha arranca DESPUÉS del borde derecho de la foto izquierda
   (clearance verificado ~32px por fila) → NINGÚN label invade la card vecina (pisa
   solo SU propia foto, como en el diseño). Antes la colisión venía de la imagen chica
   (20.62%=280px) con label gigante (65px): gap insuficiente.
   position:absolute referenciado a serv-item__link (ya es position:relative). */
.serv-item__label {
  position: absolute;
  top: 9px;                     /* Δy promedio ≈ +7pt × 1.2208 desde top foto */
  left: -31%;                   /* Δx promedio ≈ −113px / 380px item = −31% (medido) */
  z-index: 3;
  font-family: var(--font-heading);
  font-size: var(--text-display);     /* 53pt × 1.2208 ≈ 65px (factor único) */
  font-weight: var(--fw-bold);
  color: var(--color-red);
  line-height: 1;
  white-space: nowrap;
}

.serv-item__img-wrap {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1298 / 915;           /* ratio real 1.419 */
  overflow: hidden;
  border-radius: 10px;
}

.serv-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

/* Hover: zoom sutil (la foto es clickeable → "ver reel"). */
.serv-item__link:hover .serv-item__img {
  transform: scale(1.04);
}

/* Play-circle centrado (indicador de reel) */
.serv-item__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 56px;
  height: 56px;
  display: flex;
  transition: transform var(--transition-base);
}
.serv-item__play svg { width: 100%; height: 100%; display: block; }
.serv-item__link:hover .serv-item__play {
  transform: translate(-50%, -50%) scale(1.08);
}

/* Variante estática (tutoriales — sin trabajo asociado, sin contenido por
   ahora): mismo <div> que .serv-item__link pero sin affordance de click
   (sin play-circle en el markup, sin cursor pointer, sin hover-zoom). */
.serv-item__link--static {
  cursor: default;
}
.serv-item__link--static:hover .serv-item__img {
  transform: none;
}

/* "ver reel" (solo institucionales en el diseño) */
.serv-item__reel {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--text-body-sm);     /* 12pt */
  font-weight: var(--fw-regular);
  color: var(--color-red);
  margin-top: 10px;
  letter-spacing: 0.02em;
}

/* "+" rojo abajo-izquierda de cada foto */
.serv-item__plus {
  display: block;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: var(--fw-semibold);
  color: var(--color-red);
  line-height: 1;
  margin-top: 8px;
}


/* ================================================================
   3. PROCESO — 3 etapas
   Fondo claro. Título + 3 columnas (* + fase + subtítulo + divisor).
   ================================================================ */
.serv-proceso {
  background: var(--color-cream);
  padding-block: 20px 100px;
}

.serv-proceso__title {
  font-family: var(--font-heading);
  font-size: var(--text-heading-md);  /* 36pt × 0.9 */
  font-weight: var(--fw-bold);
  color: var(--color-black);
  line-height: 1.2;
  margin-bottom: 56px;
}

.serv-proceso__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  /* Achicado por la DERECHA al ancho real del diseño (tier CONTENT-MD): el grid
     arranca en el content-left del container WIDE (alineado con el footer) y la 3ra
     columna termina en x=1243.4pt del diseño (≈1155px), MÁS ANGOSTO que el footer.
     min() evita que en viewports angostos quede más chico que el espacio útil.
     margin-right:auto lo mantiene pegado a la izquierda (no se re-centra). */
  max-width: min(100%, var(--container-content-md));
  margin-right: auto;
}

.serv-etapa {
  display: flex;
  flex-direction: column;
  padding-bottom: 28px;
  /* FIX 3: divisor oscuro #221F1F (sampleo del render full-res — en preview reducido parece gris claro) */
  border-bottom: 1px solid #221F1F;
}

.serv-etapa__star {
  font-family: var(--font-heading);
  font-size: var(--text-hero);        /* asterisco grande (como en el crop) */
  font-weight: var(--fw-bold);
  color: var(--color-red);
  line-height: 0.7;
  margin-bottom: 18px;
}

.serv-etapa__fase {
  font-family: var(--font-heading);
  font-size: var(--text-display);     /* 53pt × 0.9 */
  font-weight: var(--fw-bold);
  color: var(--color-red);
  line-height: 1;
  margin-bottom: 24px;
}

.serv-etapa__sub {
  font-family: var(--font-heading);
  font-size: var(--text-label-lg);    /* 24pt × 0.9 ≈ 21 */
  font-weight: var(--fw-semibold);
  color: var(--color-black-soft);
  line-height: 1.2;
  max-width: 280px;
}


/* ================================================================
   4. MEDIA MODAL — modal in-page de la galería de Servicios (Paso 11).
   Mismo lenguaje visual que .ti-lightbox (trabajo.css): overlay negro .92,
   × arriba-derecha, misma escala/z-index. Slideshow agrega flechas ←→
   (estilo .ti-galeria__arrow) + contador "n / total". Poblado por
   assets/js/media-modal.js.
   ================================================================ */
.media-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  padding: 40px;
}

.media-modal[hidden] { display: none; }

.media-modal__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

/* Video nativo — controles del browser, tamaño acotado a 90vw/90vh. */
.media-modal__video {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
}

/* YouTube lite-embed — 16:9 fijo, acotado a 90vw/90vh (el que gane primero). */
.media-modal__iframe {
  display: block;
  border: 0;
  aspect-ratio: 16 / 9;
  width: min(90vw, calc(90vh * 16 / 9));
  height: min(90vh, calc(90vw * 9 / 16));
}

/* Slideshow — imagen contenida, mismo tratamiento que .ti-lightbox__img.
   max-height reserva el espacio real de .media-modal__nav (bug real detectado
   en QA: con 90vh directo, imagen + nav podían sumar más que el alto
   disponible y el contador/flechas quedaban fuera del viewport). 88px =
   altura del nav (~40px) + margin-top (24px) + margen de seguridad (24px);
   sobra en desktop, resultado: imagen levemente más chica pero el nav
   SIEMPRE visible, en cualquier alto de viewport razonable. */
.media-modal__img {
  display: block;
  max-width: 90vw;
  max-height: calc(90vh - 88px);
  object-fit: contain;
  border-radius: 4px;
}

.media-modal__close {
  position: absolute;
  top: 28px;
  right: 36px;
  z-index: 2;
  background: none;
  border: none;
  padding: 8px;
  color: var(--color-cream);
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--transition-base);
}
.media-modal__close:hover { opacity: 0.7; }
.media-modal__close:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

/* Nav slideshow "← n/total →" — mismo patrón visual que .ti-galeria__nav. */
.media-modal__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 24px;
}
.media-modal__nav[hidden] { display: none; }

.media-modal__counter {
  font-family: var(--font-heading);
  font-size: var(--text-label-lg);
  font-weight: var(--fw-medium);
  color: var(--color-cream);
  letter-spacing: 0.02em;
  min-width: 64px;
  text-align: center;
}

.media-modal__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-red);
  transition: opacity var(--transition-base);
}
.media-modal__arrow-svg { display: block; width: 64px; height: 16px; }
.media-modal__arrow:hover { opacity: 0.6; }
.media-modal__arrow:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

/* Scroll-lock del fondo mientras el modal está abierto. */
body.media-modal-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .media-modal { padding: 20px; }
  .media-modal__close { top: 16px; right: 20px; font-size: 32px; }
  .media-modal__nav { gap: 16px; }
  .media-modal__arrow-svg { width: 44px; height: 12px; }
}


/* ================================================================
   RESPONSIVE
   ================================================================ */

/* ---- 1440px ---- */
@media (max-width: 1440px) {
  .serv-hero__title { font-size: 66px; }
  .serv-galeria__bgtext-line { font-size: 120px; }
}

/* ---- 1366px ---- */
@media (max-width: 1366px) {
  .serv-hero__title { font-size: 60px; }
  .serv-galeria__bgtext-line { font-size: 108px; }
}

/* ---- Tablet 768px ----
   El grid escalonado se simplifica a 2 columnas regulares (el escalonado
   es de desktop; en tablet/mobile reflow limpio). El texto de fondo se
   reduce para no desbordar. */
@media (max-width: 768px) {

  .serv-hero {
    padding-top: calc(var(--header-height) + 32px);
  }
  .serv-hero__title { font-size: 40px; }

  /* Texto de fondo: más chico, no desborda */
  .serv-galeria__bgtext-line { font-size: 64px; }
  .serv-galeria__bgtext { top: 0; }

  /* Grid → 2 columnas regulares (sin escalonado) */
  .serv-galeria__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 24px;
    padding-top: 0;                       /* resetea el padding-top del grid desktop */
  }
  .serv-item,
  .serv-item--lane-a.serv-item--pos-1,
  .serv-item--lane-a.serv-item--pos-2,
  .serv-item--lane-b.serv-item--pos-1,
  .serv-item--lane-b.serv-item--pos-2 {
    width: auto;
    margin-left: 0;
    margin-bottom: 0;
  }
  /* Label: en mobile el offset negativo desktop desbordaría el viewport.
     Reducir a -12% (~left al borde izquierdo del item sin overflow). */
  .serv-item__label {
    font-size: 30px;
    left: -12%;
    top: 4px;
  }
  .serv-item__play { width: 46px; height: 46px; }

  /* Proceso → stack */
  .serv-proceso__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .serv-etapa__sub { max-width: 100%; }
}

/* ---- Mobile 390px ---- */
@media (max-width: 390px) {

  .serv-hero__title { font-size: 32px; }
  .serv-galeria__bgtext-line { font-size: 44px; }

  /* Grid → 1 columna */
  .serv-galeria__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .serv-item__label {
    font-size: 28px;
    left: -8%;
    top: 3px;
  }

  .serv-proceso__title { font-size: 28px; }
  .serv-etapa__fase { font-size: 40px; }
}