/*
 * trabajo.css — Template Trabajos-Individual de NOVE Producciones.
 * Depende de tokens.css. Tokens en px, 0 overrides globales. Artboard 1600pt, factor 0.9.
 *
 * Medidas trazables a despiece/trabajos-individual.json (contenido sigue _v2.pdf):
 *   Hero: img full-bleed 0–896; título *Mostaza x=240 y=502 (120pt rojo, abajo-izq ~56%);
 *         badge "VIDEO INSTITUCIONAL _" x=241 y=797; "Ver +" 24pt rojo.
 *   Descripción: tags x=238 y=1612 (Sora-Light 12 gris); metadata x=611 (~38%):
 *         labels DarkerGrotesque 24pt, Cliente value 36pt bold, Categoría 24pt bold,
 *         Descripción/Ubicación Sora-Light 14.
 *   Galería: 3 imgs x=613/917/1221 y=1507 w=282 h=194 (ratio 1.45).
 *   Otros: título x=301 y=1913 (36pt rojo); 3 cards (variante otros = grid).
 */


/* ================================================================
   2. HERO full-bleed — imagen oscura + título *Cliente abajo-izq
   ================================================================ */
.ti-hero {
  position: relative;
  width: 100%;
  min-height: 78vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Título a ~56% de la altura del hero (manifest: título y=502 / img h=899 = 55.8%),
     con margen amplio por debajo hasta el borde inferior. center+padding lo logra. */
  justify-content: center;
}

/* Variante sin imagen de detalle (works sin hero/galería): fondo plano oscuro. */
.ti-hero--plain {
  background: var(--color-black-soft);
  min-height: 56vh;
}

.ti-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ti-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Velo para legibilidad del título rojo sobre imagen. */
.ti-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0.10) 100%);
}

.ti-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  /* center + este padding deja el título arrancando ~56% y mucho aire debajo,
     como el diseño (título en la franja media-baja, no pegado al borde). */
  padding-top: 18vh;
}

.ti-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-hero-xl);   /* 120pt × 1.2208 ≈ 147px */
  font-weight: var(--fw-semibold);
  color: var(--color-red);
  line-height: var(--lh-hero);      /* 0.873 medido */
  letter-spacing: -0.01em;
}

.ti-hero__star { color: var(--color-red); }

/* Badge "Categoría _" debajo del título (manifest y=797, 12pt rojo, uppercase). */
.ti-hero__badge {
  font-family: var(--font-heading);
  font-size: var(--text-label-sm);  /* 12pt */
  font-weight: var(--fw-regular);
  color: var(--color-red);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 14px;
}

/* "Ver +" scroll-indicator (rojo, 24pt). Diseño: LEFT-aligned a la columna de
   contenido (manifest x=614 ≈ columna metadata), abajo del hero. NO centrado. */
.ti-hero__scroll {
  position: absolute;
  left: max(40px, calc((100% - var(--container-wide)) / 2 + 40px));
  bottom: 36px;
  z-index: 3;
  font-family: var(--font-heading);
  font-size: var(--text-label-lg);  /* 24pt × 0.9 ≈ 21px */
  font-weight: var(--fw-bold);
  color: var(--color-red);
  transition: opacity var(--transition-base);
}

.ti-hero__scroll:hover { opacity: 0.7; }


/* ================================================================
   3. DESCRIPCIÓN — 2 columnas (tags izq / metadata der ~38%)
   ================================================================ */
.ti-desc {
  background: var(--color-cream);
  padding-block: 90px;
}

.ti-desc__inner {
  display: grid;
  /* Col izq tags (x=238) + col der metadata (x=611 ≈ 38% del container útil). */
  grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1fr);
  gap: 60px;
}

/* Tags — Sora-Light 12, gris, una por línea. Anclados ABAJO de la columna izq
   (manifest: tags y=1611, en la franja baja de la sección, no arriba). */
.ti-desc__tags {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: end;
}

.ti-tag {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);   /* 12pt */
  font-weight: var(--fw-light);
  color: var(--color-grey);
  line-height: var(--lh-tags);      /* 1.75 medido */
}

/* Metadata — bloques label + value. */
.ti-desc__meta {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 720px;
}

.ti-meta__label {
  font-family: var(--font-heading);
  font-size: var(--text-label-lg);  /* 24pt × 1.2208 ≈ 29px */
  font-weight: var(--fw-regular);
  color: var(--color-black);
  margin-bottom: 6px;
}

.ti-meta__value {
  font-family: var(--font-heading);
  color: var(--color-black);
}

/* Cliente value: grande (36pt) Bold. */
.ti-meta__value--strong {
  font-size: var(--text-heading-md);  /* 36pt × 1.2208 ≈ 44px */
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

/* Categoría value: 24pt SemiBold (manifest: DarkerGrotesque-SemiBold 24, NO 36 bold). */
.ti-meta__value--semibold {
  font-size: var(--text-label-lg);    /* 24pt × 1.2208 ≈ 29px */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

/* Descripción / Ubicación: Sora-Light 14, NEGRO (#000 manifest), párrafo.
   Cada bloque \n es un <p> con separación (diseño _v2: 3 párrafos).
   Body Sora se mantiene aireado: LH 1.5 medido en el manifiesto. */
.ti-meta__value--body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);     /* 14pt → 16px legible */
  font-weight: var(--fw-light);
  color: var(--color-black);          /* manifest: #000000, no soft */
  line-height: var(--lh-body);        /* 1.5 medido */
}

.ti-meta__value--body + .ti-meta__value--body {
  margin-top: 14px;                   /* separación entre párrafos de la descripción */
}


/* ================================================================
   4. GALERÍA — carrusel horizontal con nav "← Scroll →"
   Spec (artboard 1600, content 1120pt = x240→1360):
     items x=613.3/917.3/1220.6  y=1507  w=282  h=193.7  ratio=1.456
     offset desde borde izq del content: 373.3pt = 33.33% del content
     cada item: 25.18% del content (282/1120)
     gap: ~1.96% del content (22/1120)
   El track es scroll horizontal (overflow-x:auto, scrollbar oculto).
   Nav "← Scroll →" debajo, mismo patrón visual que Home slider.

   RECORRIDO BORDE A BORDE (PLAN-2026-08-03-nove-correcciones-prod Paso 1,
   pedido cliente "que el álbum vaya de punta a punta" + spec de Yago): el
   track deja de estar clipeado por .ti-galeria__inner.container--wide (que
   limitaba el recorrido visible a los ~1280px del contenedor, cortando la
   foto contra ese borde antes de llegar al borde real de pantalla) y pasa a
   ocupar el viewport completo con el break-out clásico
   (width:100vw + margin-left:calc(50% - 50vw), válido porque .ti-galeria__inner
   está centrado sin offsets asimétricos). El primer item conserva su posición
   de reposo EXACTA vía un ITEM SPACER real (.ti-galeria__spacer, mismo patrón
   que .home-slider__spacer), NO padding-left: con scroll-snap-type:x mandatory
   activo, un padding no es un punto de snap válido y Chrome auto-corrige
   scrollLeft al cargar, saltando derecho al primer item y anulando el offset
   (bug real, detectado en QA de este mismo paso — confirmado con
   getComputedStyle antes de este fix). El spacer sí es snap-align:start, así
   que scrollLeft:0 ya es un punto de snap legítimo y no hay corrección.
   El ancho del spacer reproduce en px absolutos la misma fórmula que antes
   daba el margin-left:33.33% de un contenedor de máx. 1280px de contenido
   (ver --ti-content-w). Igual criterio para el ancho del item y el gap, que
   antes eran % DEL CONTENEDOR (ahora irrelevante como denominador) y pasan a
   ser % DE --ti-content-w, no del viewport, para que alto/ancho de item quede
   sin cambios @1920/@1440 (±2px, medido con getBoundingClientRect). Alto de
   item y gap: sin cambios en ningún breakpoint.
   ================================================================ */
.ti-galeria {
  background: var(--color-cream);
  padding-bottom: 60px;
  overflow: hidden;
}

.ti-galeria__inner {
  overflow: visible;
}

/* Ancho de "contenido" equivalente al que antes tenía el track dentro del
   container--wide (máx. 1280px = 1360 − 2×40 de padding, o el viewport menos
   ese mismo padding en pantallas angostas). Es el denominador de los % de
   item/gap/offset inicial, ahora que el track ya no vive dentro del
   container y no puede heredar ese ancho directamente. */
:root {
  --ti-content-w: calc(min(100vw, var(--container-wide)) - 2 * var(--container-padding));
}

/* Track horizontal full-bleed: ocupa el viewport completo (break-out del
   container--wide padre). El offset de arranque ya NO vive acá (ver
   .ti-galeria__spacer) — el padding-left quedó en 0 a propósito. */
.ti-galeria__track {
  display: flex;
  gap: calc(0.0196 * var(--ti-content-w));   /* era 1.96% del content */
  width: 100vw;
  margin-left: calc(50% - 50vw);             /* break-out a ancho completo del viewport */
  padding-right: var(--container-padding);
  overflow-x: auto;
  scrollbar-width: none;               /* Firefox */
  scroll-snap-type: x mandatory;
  padding-block: 4px;
}
.ti-galeria__track::-webkit-scrollbar { display: none; }

/* Spacer real (primer flex item, invisible/aria-hidden en el markup):
   reproduce el offset de arranque como snap-point legítimo. Fórmula
   equivalente a la vieja margin-left:33.33% sobre --ti-content-w, más el
   corrimiento por centrado del container en pantallas >1360px, MENOS un
   gap: el spacer es un flex item más, así que el `gap` del track ya pone
   espacio entre el spacer e item1 (cosa que el margin-left viejo no hacía,
   porque no era un item — no consumía gap). Sin este descuento, item1
   arranca un gap de más a la derecha de su posición de reposo original
   (detectado en QA de este mismo paso: +25px @1920, exactamente 0.0196 ×
   --ti-content-w, el valor del gap). */
.ti-galeria__spacer {
  flex: 0 0 calc(
    var(--container-padding)
    + 0.3333 * var(--ti-content-w)
    + max(0px, (100vw - var(--container-wide)) / 2)
    - 0.0196 * var(--ti-content-w)
  );
  scroll-snap-align: start;
  pointer-events: none;
}

.ti-galeria__track:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 4px;
}

.ti-galeria__item {
  position: relative;
  flex: 0 0 calc(0.2518 * var(--ti-content-w));  /* era 25.18% del content */
  aspect-ratio: 282 / 193.7;          /* ratio exacto del manifiesto (1.456) */
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-black-soft);
  scroll-snap-align: start;
}

.ti-galeria__img,
.ti-galeria__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fotos ampliables — cursor pointer (abre lightbox). Los videos no (tienen su
   propio play-circle/controles inline). */
.ti-galeria__img {
  cursor: pointer;
}

/* Video: fondo negro, objeto cover */
.ti-galeria__item--video .ti-galeria__video {
  object-fit: cover;
  background: #000;
}

/* Iframe de YouTube lite-embed (post-click): llena el mismo box sin bordes.
   La clase .ti-galeria__video ya le da width/height:100% + display:block
   (regla compartida arriba); acá solo se resetea el borde nativo del iframe. */
.ti-galeria__item--video iframe.ti-galeria__video {
  border: 0;
}

/* Play-circle overlay (centrado sobre el video, mismo SVG que servicios.php) */
.ti-galeria__play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity var(--transition-base);
}
.ti-galeria__play-btn:hover { opacity: 0.85; }
.ti-galeria__play-btn:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}
.ti-galeria__play-svg {
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}

/* Nav "← Scroll →" — idéntico al home-slider__nav */
.ti-galeria__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 24px;
  color: var(--color-red);
}

.ti-galeria__nav-label {
  font-family: var(--font-heading);
  font-size: var(--text-label-lg);
  font-weight: var(--fw-medium);
  color: var(--color-red);
  letter-spacing: 0.02em;
}

.ti-galeria__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);
}
.ti-galeria__arrow-svg {
  display: block;
  width: 64px;
  height: 16px;
}
.ti-galeria__arrow:hover { opacity: 0.6; }
.ti-galeria__arrow:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}


/* ================================================================
   4b. LIGHTBOX — overlay vanilla para fotos de la galería.
   Navegable (PLAN-2026-08-03-nove-correcciones-prod Paso 1, pedido cliente
   "no se puede scrollear desde el celular ni ir atrás/adelante con las
   flechas del teclado"): flechas ←→ visibles + contador "n/total", mismo
   patrón que .media-modal__nav de servicios.css (mismo lenguaje visual,
   misma estructura arrow/counter/arrow). max-height del <img> descuenta el
   alto reservado del nav (mismo fix que media-modal: si no, imagen+nav
   pueden superar el viewport y el nav queda fuera).
   ================================================================ */
.ti-lightbox {
  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;
}

.ti-lightbox[hidden] { display: none; }

.ti-lightbox__img {
  display: block;
  max-width: 90vw;
  max-height: calc(90vh - 88px);
  object-fit: contain;
  border-radius: 4px;
}

.ti-lightbox__close {
  position: absolute;
  top: 28px;
  right: 36px;
  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);
}
.ti-lightbox__close:hover { opacity: 0.7; }
.ti-lightbox__close:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

/* Nav "← n/total →" — mismo patrón visual que .media-modal__nav (servicios.css)
   y las mismas flechas line-art rojas que .ti-galeria__arrow. */
.ti-lightbox__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 24px;
}
.ti-lightbox__nav[hidden] { display: none; }

.ti-lightbox__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;
}

.ti-lightbox__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);
}
.ti-lightbox__arrow-svg { display: block; width: 64px; height: 16px; }
.ti-lightbox__arrow:hover { opacity: 0.6; }
.ti-lightbox__arrow:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

/* Scroll-lock del fondo mientras el lightbox está abierto (clase en <body>). */
body.ti-lightbox-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .ti-lightbox { padding: 20px; }
  .ti-lightbox__close { top: 16px; right: 20px; font-size: 32px; }
  .ti-lightbox__nav { gap: 16px; }
  .ti-lightbox__arrow-svg { width: 44px; height: 12px; }
}


/* ================================================================
   5. OTROS TRABAJOS — título + 3 work-cards (variante otros = grid)
   ================================================================ */
.ti-otros {
  background: var(--color-cream);
  padding-bottom: 120px;
}

.ti-otros__title {
  font-family: var(--font-heading);
  font-size: var(--text-heading-md);  /* 36pt × 1.2208 ≈ 44px */
  font-weight: var(--fw-bold);
  color: var(--color-red);
  line-height: var(--lh-heading);     /* 0.917 medido */
  margin-bottom: 44px;
}

/* Grid "Otros trabajos" — mismas columnas del diseño que el grid de Trabajos:
   img 293pt × 1.2208 ≈ 358px · gap 85pt × 1.2208 ≈ 104px (NO 1fr → mantiene la
   relación texto/imagen idéntica al .ai). */
.ti-otros__grid {
  display: grid;
  grid-template-columns: repeat(3, 358px);
  justify-content: space-between;
  column-gap: 104px;
  row-gap: 72px;
}

/* ---- Work card — variante OTROS (idéntica al grid: overlay centrado-vertical
   protruyendo a la izquierda + "+ Conocer más" debajo de la foto).
   Estructura (FIX 2026-06-16): __inner > __img-area > __img-wrap (clip) + __overlay
   El overlay va FUERA de __img-wrap pero DENTRO de __img-area (contexto de
   posicionamiento con las dimensiones exactas de la imagen). ---- */
.work-card--otros .work-card__inner {
  display: block;
  position: relative;
}

/* __img-area: dimensiones de la imagen, contexto de posicionamiento. Sin overflow:hidden. */
.work-card--otros .work-card__img-area {
  position: relative;
  width: 100%;
  aspect-ratio: 293 / 206;
}

/* __img-wrap: SÓLO clip (overflow:hidden + border-radius). */
.work-card--otros .work-card__img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
}

.work-card--otros .work-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  transition: transform var(--transition-slow);
}

.work-card--otros:hover .work-card__img { transform: scale(1.04); }

/* Overlay relativo a __img-area → top:50% = centro vertical de la imagen. */
.work-card--otros .work-card__overlay {
  position: absolute;
  top: 50%;
  left: -77px;                         /* offset MEDIDO: 63pt × 1.2208 ≈ 77px (21.5% de 358) */
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  max-width: calc(100% + 77px + 40px); /* anti-superposición con card vecina */
  white-space: normal;                  /* permite wrap de categorías largas */
  word-break: break-word;              /* previene overflow de palabras muy largas */
}

.work-card--otros .work-card__cliente {
  font-family: var(--font-heading);
  font-size: var(--text-heading-sm);   /* 34pt × 1.2208 ≈ 42px */
  font-weight: var(--fw-bold);
  color: var(--color-red);
  line-height: var(--lh-tight);
}

.work-card--otros .work-card__categoria { display: block; }

.work-card--otros .work-card__categoria-line {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-heading-sm);   /* 42px */
  font-weight: var(--fw-medium);
  color: var(--color-red);
  line-height: var(--lh-tight);
}

.work-card--otros .work-card__cta {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 33px;                    /* distancia uniforme img→link */
  font-family: var(--font-heading);
  font-size: var(--text-conocer);      /* 14pt × 1.2208 ≈ 17px */
  font-weight: var(--fw-semibold);
  color: var(--color-red);
}

.work-card--otros .work-card__cta::before {
  content: '+';
  font-weight: var(--fw-bold);
  font-size: 1.5em;                    /* "+" más grande que el texto */
  line-height: 0;
}

/* Solo el TEXTO subrayado (no el "+"). */
.work-card--otros .work-card__cta-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */
/* 1100–1440: columnas flexibles + saliente reducido (igual que trabajos.css). */
@media (max-width: 1440px) {
  .ti-otros__grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 72px;
  }
  .work-card--otros .work-card__overlay { left: -24px; max-width: calc(100% + 24px + 30px); }
}

@media (max-width: 1100px) {
  .ti-otros__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 48px;
  }

  /* Tablets: galería pierde el offset y los items se ven más grandes.
     margin-left NO se toca acá (sigue siendo el break-out fijo a 100vw, ver
     regla base) — lo que antes era "margin-left:0" ahora es reducir el
     spacer a solo el padding del container MENOS el gap de este breakpoint
     (mismo descuento que en la regla base, ver nota ahí: el spacer consume
     un gap que el margin-left viejo no consumía). El ancho del item pasa de
     42% del contenedor a 42% de --ti-content-w (mismo valor en px, pero el
     denominador ya no es el propio track). */
  .ti-galeria__spacer {
    flex-basis: calc(var(--container-padding) - 16px);
  }
  .ti-galeria__track {
    gap: 16px;
  }
  .ti-galeria__item {
    flex: 0 0 calc(0.42 * var(--ti-content-w));
  }
}

@media (max-width: 768px) {
  .ti-hero { min-height: 64vh; }
  .ti-hero__content { padding-bottom: 56px; }
  .ti-hero__title { font-size: 64px; }

  /* Descripción: apilar (tags arriba, metadata abajo) */
  .ti-desc { padding-block: 64px; }
  .ti-desc__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .ti-desc__tags { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }

  /* Galería mobile: items más anchos, scroll horizontal libre. El spacer se
     recalcula con el gap de 12px de este breakpoint (mismo criterio que
     @1100px — si no, hereda el descuento de 16px del gap anterior y queda
     4px corrido). */
  .ti-galeria__spacer {
    flex-basis: calc(var(--container-padding) - 12px);
  }
  .ti-galeria__track {
    gap: 12px;
  }
  .ti-galeria__item {
    flex: 0 0 calc(0.78 * var(--ti-content-w));
  }

  /* Otros: 1 columna. Overlay anclado DENTRO de la card (sin protruir, mobile). */
  .ti-otros { padding-bottom: 80px; }
  .ti-otros__grid { grid-template-columns: 1fr; row-gap: 48px; }
  .work-card--otros .work-card__overlay { left: 8px; transform: translateY(-50%); }
}

@media (max-width: 390px) {
  .ti-hero__title { font-size: 52px; }
  .ti-meta__value--strong { font-size: 26px; }
  .work-card--otros .work-card__cliente,
  .work-card--otros .work-card__categoria-line { font-size: 26px; }
  .work-card--otros .work-card__overlay { left: 6px; transform: translateY(-50%); }
  .ti-galeria__item { flex: 0 0 calc(0.88 * var(--ti-content-w)); }
}