/*
 * trabajos.css — Página Trabajos (listado) de NOVE Producciones.
 * Depende de tokens.css (cargado antes en head.php). Tokens en px, 0 overrides globales.
 * Artboard 1600pt. Factor orientativo 0.9.
 *
 * Medidas trazables al manifiesto despiece/trabajos.json:
 *   Hero: título x=238 y=159–447 (82.7pt, rojo+negro); sub-label x=240 y=539 (24pt).
 *   Grid: imgs w=293 h=206 (ratio 1.42), cols x=302/680/1057, gaps≈85pt,
 *         filas y=667/943/1229 (gap fila≈70-80pt).
 *   Card title (cliente+categoría) SOLAPADO sobre top-izq de la foto,
 *         sobresale a la izq: dx = título x239 − img x302 = −63pt (×0.9 ≈ −57px).
 *         título y=720 vs img top 667 → ~53pt down.
 *   "+ Conocer más" DEBAJO de la foto (y=875 vs img y1=873), 14pt rojo.
 *   Más trabajos: título x=302 y=1561 (36pt); filas: cliente x306 / cat x677 / cm x1155.
 */


/* La página Trabajos NO tiene hero oscuro (fondo crema). El recoloreo del logo +
   hamburger a NEGRO lo maneja el header centralizado vía $header_theme='light'
   (seteado en trabajos.php ANTES del require de header.php). NO duplicar el filter
   acá: hacerlo sin el revert .scrolled fue el bug "logo negro sobre header oscuro
   al scrollear" (header.php centraliza ambos estados). */
body { background-color: var(--color-cream); }


/* ================================================================
   1. HERO — fondo crema, título rojo+negro + sub-label
   ================================================================ */
.trab-hero {
  position: relative;                    /* ancla el watermark */
  background: var(--color-cream);
  padding-top: calc(var(--header-height) + 70px);
  padding-bottom: 56px;
  overflow: hidden;                      /* el watermark no genera scroll horizontal */
}

/* Watermark "trabajos / realizados" — DarkerGrotesque-Medium 165pt × 1.2208 ≈ 201px,
   gris claro sobre crema (span fill #948F8F renderizado al ~16% → aparenta #DDDAD5
   en el _v2, medido). LH 0.789 (medido: gap 130pt / 165pt). Anclado DEBAJO del título
   del hero, solapando su base (manifest _v2: "trabajos" y=398, título última línea
   "de manera auténtica" y=376+112≈488 → solape y=398..488). "realizados" sangrada
   195.6pt = 1.19em (medido: primer glifo x=430 vs "trabajos" x=234.6). El sub-label
   "videos_" va por encima, entre las dos palabras. Decorativo, no interfiere clicks. */
.trab-hero__watermark {
  position: absolute;
  left: max(40px, calc((100% - var(--container-wide)) / 2 + 40px));
  /* "trabajos" arranca y=398 (manifest _v2) ≈ 238pt bajo el top del título (y=159.6).
     238pt × 1.2208 ≈ 291px bajo el inicio del título; el título arranca a
     header + 70px → watermark top = header + 70 + 291 ≈ header + 360px. */
  top: calc(var(--header-height) + 360px);
  z-index: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-heading);
  font-size: var(--text-service-text);   /* 165pt × 1.2208 ≈ 201px */
  font-weight: var(--fw-medium);
  line-height: var(--lh-watermark);       /* 0.789 medido (gap 130/165) */
  color: var(--color-grey-dark);
  opacity: 0.16;
  pointer-events: none;
  white-space: nowrap;
}

.trab-hero__watermark-line { display: block; }
.trab-hero__watermark-line--2 { margin-left: 1.19em; }  /* "realizados" sangrado 195.6pt */

/* El contenido del hero va por encima del watermark. */
.trab-hero__inner { position: relative; z-index: 1; }

.trab-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 (era 1.04) */
  letter-spacing: -0.01em;
  color: var(--color-black);
  /* Re-tier 2026-06-16: el bloque del título es TIER HERO-TRB (915pt → 1117px),
     no WIDE. La sección sigue en container--wide (anclada al content-left para
     alinear con el grid/footer); el título angosto se limita con su propio
     max-width (protocolo "el container va por el bloque ancho; lo angosto se
     limita con su max-width"). Manifest: línea más ancha "experimentar y
     comunicar" x=238→1014pt (≈947px); el cap 1117px deja el wrap de 4 líneas
     del diseño sin estirarse a 1360. */
  max-width: var(--container-herotrb);  /* TIER HERO-TRB (1117px) */
  margin-bottom: 56px;                  /* +espacio: el watermark vive entre título y sub-label */
}

.trab-hero__line { display: block; }

/* Sub-label "videos_ *institucionales ..." — "videos_" bold, lista medium.
   Manifest: DarkerGrotesque 24pt × 0.9 ≈ 21px, negro. */
.trab-hero__sublabel {
  font-family: var(--font-heading);
  font-size: var(--text-label-lg);      /* 24pt × 0.9 ≈ 21px */
  color: var(--color-black);
  line-height: 1.3;
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  align-items: baseline;
}

.trab-hero__sublabel-key  { font-weight: var(--fw-bold); }
.trab-hero__sublabel-list { font-weight: var(--fw-medium); }


/* ================================================================
   2. GRID 3×3 — 9 work-cards (variante grid)
   ================================================================ */
.trab-grid-sec {
  background: var(--color-cream);
  padding-bottom: 120px;
}

/* Grid 3 cols con anchos del DISEÑO escalados por el factor único (NO 1fr).
   img 293pt × 1.2208 ≈ 358px · gap 85pt × 1.2208 ≈ 104px (medido manifest).
   3×358 + 2×104 = 1282px dentro del container content (1360px) → centrado.
   Esto mantiene la relación texto/imagen idéntica al .ai: card title 34pt→42px
   sobre img 358px = ratio 0.116 (igual al diseño). Antes: 1fr daba columnas de
   403px (img a factor 1.37) con texto a 30px → "la letra se veía más chica". */
.trab-grid {
  display: grid;
  grid-template-columns: repeat(3, 358px);
  justify-content: space-between;
  column-gap: 104px;
  row-gap: 72px;
}

/* ---- Work card — variante GRID ----
   Estructura (FIX 2026-06-16): __inner > __img-area > __img-wrap (clip) + __overlay
   El overlay va FUERA de __img-wrap (no clipeado) pero DENTRO de __img-area
   (contexto de posicionamiento con las dimensiones exactas de la imagen).
   "Conocer más" va DEBAJO de __img-area (manifest y=875 > img-bottom 873). */
.work-card--grid .work-card__inner {
  display: block;
  position: relative;
}

/* __img-area: tiene las dimensiones de la imagen y es el contexto de
   posicionamiento del overlay. Sin overflow:hidden → overlay libre. */
.work-card--grid .work-card__img-area {
  position: relative;
  width: 100%;
  aspect-ratio: 293 / 206;             /* ratio exacto del manifiesto (1.42) */
}

/* __img-wrap: SÓLO clip (overflow:hidden + border-radius).
   La imagen necesita border-radius propio ya que el wrap tiene overflow:visible. */
.work-card--grid .work-card__img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
}

.work-card--grid .work-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;                  /* redundante pero seguro si el wrap cambia */
  transition: transform var(--transition-slow);
}

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

/* Overlay (cliente + categoría) CENTRADO-VERTICAL sobre el borde IZQUIERDO,
   sobresaliendo a la IZQUIERDA un offset MEDIDO. PROHIBIDO "donde es lógico".
   Manifest: texto x=239 vs img x=302 → el borde izq del texto está 63pt a la
   IZQUIERDA del borde izq de la img = 21.5% del ancho de la img (293pt).
   Relativo a __img-area (mismo tamaño que la imagen) → top:50% = centro vertical.
   El gap entre cards es 104px; el texto sobresale 77px → cap max-width.
   white-space:normal + word-break permiten que categorías largas (1 término WP)
   wrapeen a 2 líneas en lugar de extenderse más a la izquierda. */
.work-card--grid .work-card__overlay {
  position: absolute;
  top: 50%;
  left: -77px;                          /* offset MEDIDO: 63pt × 1.2208 ≈ 77px a la
                                           izq del borde de la img (21.5% de 358px).
                                           Offset fijo en px (no % del texto) para que
                                           el saliente sea constante en todas las cards. */
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  pointer-events: none;                 /* el click lo recibe el <a> */
  /* Anti-superposición: el título no invade el gap completo hacia la card vecina.
     max-width: la protrusión es siempre 77px (left fijo); el overlay puede crecer
     a la derecha hasta calc(100% + 40px) como máximo. */
  max-width: calc(100% + 77px + 40px);
  white-space: normal;                  /* permite wrap de categorías largas */
  word-break: break-word;              /* previene overflow de palabras muy largas */
}

.work-card--grid .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);         /* 1.0 — título de pocas líneas */
}

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

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

/* "+ Conocer más" DEBAJO de la foto (manifest: link y=875 bajo img-bottom y=873,
   14pt rojo). Distancia img→link UNIFORME en todas las cards (manifest ~27pt ×
   1.2208 ≈ 33px). Texto SUBRAYADO; el "+" MÁS GRANDE que el texto (punto Yago). */
.work-card--grid .work-card__cta {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 33px;                     /* distancia uniforme img→link (27pt medido) */
  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--grid .work-card__cta::before {
  content: '+';
  font-weight: var(--fw-bold);
  font-size: 1.5em;                     /* "+" MÁS GRANDE que el texto (punto Yago) */
  line-height: 0;
}

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


/* ================================================================
   3. MÁS TRABAJOS — lista (3 filas)
   ================================================================ */
.trab-mas {
  background: var(--color-cream);
  padding-bottom: 120px;
}

/* Título "Más trabajos" 36pt → 44px. Manifest: x=302 (62pt a la derecha del
   borde del container wide x=240) → la lista vive en el tier maslist con un
   pequeño offset izq. */
.trab-mas__title {
  font-family: var(--font-heading);
  font-size: var(--text-heading-md);    /* 36pt × 1.2208 ≈ 44px */
  font-weight: var(--fw-bold);
  color: var(--color-black);
  line-height: var(--lh-heading);       /* 0.917 medido */
  margin-bottom: 32px;
}

.trab-mas__list {
  display: flex;
  flex-direction: column;
}

/* Fila: cliente (x306) | categoría (x677≈37%) | Conocer más (x1155≈82%).
   Posiciones medidas del manifiesto (content lista x=302..1274 = 972pt). */
.trab-mas__row {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(300px, 1.2fr) auto;
  align-items: baseline;
  gap: 32px;
  padding-block: 20px;
  border-top: 1px solid rgba(0,0,0,0.14);
}

.trab-mas__row:last-child {
  border-bottom: 1px solid rgba(0,0,0,0.14);
}

.trab-mas__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);
}

.trab-mas__cat {
  font-family: var(--font-heading);
  font-size: var(--text-label-lg);      /* 24pt × 1.2208 ≈ 29px */
  font-weight: var(--fw-medium);        /* manifest: DarkerGrotesque-Medium */
  color: var(--color-black);
  line-height: var(--lh-tight);
}

.trab-mas__cta {
  font-family: var(--font-heading);
  font-size: var(--text-label-lg);      /* 24pt × 1.2208 ≈ 29px */
  font-weight: var(--fw-semibold);
  color: var(--color-red);
  justify-self: end;
  text-decoration: none;                /* el <a> no hereda el subrayado nativo del UA;
                                            .trab-mas__cta-text pone su propio underline */
  /* aria-disabled / sin link (<span>): cursor neutro para señalar que no es clickeable. */
  cursor: default;
}

/* Con página individual (<a>): cursor pointer, mismo look. */
a.trab-mas__cta {
  cursor: pointer;
}

/* "Conocer más" de la lista SUBRAYADO (barrido de subrayados, punto Yago 7). */
.trab-mas__cta-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ================================================================
   RESPONSIVE — grid 3→2→1, sin overflow.
   ================================================================ */
/* 1100–1440: el container se aprieta; las columnas fijas 358px + el saliente del
   overlay (−77px) se cortarían a la izquierda. Pasar a columnas flexibles que
   reserven margen para el saliente. */
@media (max-width: 1440px) {
  .trab-grid {
    grid-template-columns: repeat(3, 1fr);
    justify-content: stretch;
    column-gap: 72px;
  }
  /* Reducir el saliente: a estos anchos la 1ª columna arranca cerca del borde,
     un saliente grande cruzaría el viewport. −24px mantiene el solape sin clip. */
  .work-card--grid .work-card__overlay { left: -24px; max-width: calc(100% + 24px + 30px); }
}

@media (max-width: 1100px) {
  /* 3 → 2 columnas */
  .trab-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 48px;
    row-gap: 56px;
  }
}

@media (max-width: 768px) {
  .trab-hero {
    padding-top: calc(var(--header-height) + 40px);
    padding-bottom: 40px;
  }
  .trab-hero__title { font-size: 48px; }
  .trab-hero__sublabel { font-size: 16px; }

  /* 2 → 1 columna */
  .trab-grid {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
  /* Mobile: overlay centrado-vert pero anclado DENTRO de la card (sin protruir
     a la izquierda, que se saldría de pantalla en 1 columna). */
  .work-card--grid .work-card__overlay { left: 8px; transform: translateY(-50%); }
  /* Watermark más chico en mobile (no debe generar overflow). */
  .trab-hero__watermark { font-size: 84px; line-height: 0.86; }

  .trab-grid-sec { padding-bottom: 80px; }

  /* Más trabajos: apilar columnas */
  .trab-mas { padding-bottom: 80px; }
  .trab-mas__row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-block: 16px;
  }
  .trab-mas__cliente { font-size: 26px; }
  .trab-mas__cat,
  .trab-mas__cta { font-size: 18px; justify-self: start; }
}

@media (max-width: 390px) {
  .trab-hero__title { font-size: 38px; }
  .work-card--grid .work-card__cliente,
  .work-card--grid .work-card__categoria-line { font-size: 26px; }
  .work-card--grid .work-card__overlay { left: 6px; transform: translateY(-50%); }
  .trab-hero__watermark { font-size: 64px; }
}