/*
 * 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.
   ================================================================ */
.ti-galeria {
  background: var(--color-cream);
  padding-bottom: 60px;
  overflow: hidden;
}

.ti-galeria__inner {
  overflow: visible;
}

/* Track horizontal: arranca en el 33.33% del contenedor (alineado con metadata) */
.ti-galeria__track {
  display: flex;
  gap: 1.96%;                          /* 22/1120 del content */
  margin-left: 33.33%;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;               /* Firefox */
  scroll-snap-type: x mandatory;
  padding-block: 4px;
}
.ti-galeria__track::-webkit-scrollbar { display: none; }

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

.ti-galeria__item {
  position: relative;
  flex: 0 0 25.18%;                    /* ancho fijo: 282/1120 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
   ================================================================ */
.ti-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  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: 90vh;
  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;
}

/* 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; }
}


/* ================================================================
   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 */
  .ti-galeria__track {
    margin-left: 0;
    gap: 16px;
  }
  .ti-galeria__item {
    flex: 0 0 42%;
  }
}

@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 */
  .ti-galeria__track {
    margin-left: 0;
    gap: 12px;
  }
  .ti-galeria__item {
    flex: 0 0 78%;
  }

  /* 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 88%; }
}