/*
 * tokens.css — NOVE Producciones
 * Variables de diseño: paleta, tipografía, escala, container, tiers, line-heights.
 * Artboard original: 1600pt.
 *
 * SISTEMA DE FACTOR ÚNICO + TIERS (calibración 2026-06-12, feedback Yago):
 *   Ancla: el container WIDE (footer/redes "Desde Buenos Aires…") mide 1114pt de
 *   ancho de contenido en TODOS los manifiestos → mapea al container aprobado por
 *   Yago de ~1360px. De ahí sale el FACTOR ÚNICO = 1360 / 1114 = 1.2208.
 *
 *   REGLA CLAVE: texto E imágenes de una sección escalan con el MISMO factor.
 *   Antes la escala tipográfica usaba 0.9 mientras las imágenes se dimensionaban
 *   en % de un container más ancho (factor efectivo ~1.37 en el grid) → la letra
 *   se veía más chica que en el diseño. Con el factor único la relación
 *   texto/imagen es idéntica al .ai en cada tier.
 *
 *   px = pt_del_diseño × 1.2208   (display). Body Sora se mantiene más aireado
 *   donde el manifiesto lo muestra (LH 1.5–1.79).
 *
 * LINE-HEIGHTS: medidos del manifiesto (gap-y entre líneas ÷ font-size), NO default.
 *   DarkerGrotesque display usa LH apretado (0.79–0.93). Ver tokens --lh-*.
 *
 * Tokens en px (NUNCA rem). Validar escala en browser real @1920 100% zoom.
 * INSTRUCCIÓN: no sobreescribir estos tokens en CSS local de página.
 * Si una página necesita un token distinto → abrir discusión en DECISIONS.md.
 */

:root {
  /* ----------------------------------------------------------------
   * PALETA
   * Fuente: manifiestos PyMuPDF + inventario.md §2.
   * ---------------------------------------------------------------- */

  /* Negro */
  --color-black:       #000000;
  --color-black-soft:  #231F20;

  /* Rojo NOVE (color de marca) */
  --color-red:         #EB1C24;
  --color-red-alt:     #E61C24;

  /* Crema (fondo secciones claras) */
  --color-cream:       #EFECE8;
  --color-cream-alt:   #EAE7E3;

  /* Gris (texto secundario) */
  --color-grey:        #999494;
  --color-grey-dark:   #8C8787;

  /* Alias funcionales */
  --bg-dark:           var(--color-black);
  --bg-light:          var(--color-cream);
  --accent:            var(--color-red);
  --text-primary:      var(--color-black-soft);
  --text-secondary:    var(--color-grey);
  --text-on-dark:      var(--color-cream);


  /* ----------------------------------------------------------------
   * TIPOGRAFÍA — Familias
   * DarkerGrotesque + Sora (ambas Google Fonts, cargadas en head.php)
   * ---------------------------------------------------------------- */
  --font-heading: 'Darker Grotesque', sans-serif;
  --font-body:    'Sora', sans-serif;


  /* ----------------------------------------------------------------
   * ESCALA TIPOGRÁFICA (en px) — FACTOR ÚNICO 1.2208
   * px = pt_del_diseño × 1.2208 (display DarkerGrotesque).
   * Origen pt medido en los 8 manifiestos despiece/*.json.
   * Body Sora se mantiene a su tamaño legible (no escala con el factor full —
   * el manifiesto lo muestra más aireado; ver --text-body-md/-body).
   * ---------------------------------------------------------------- */

  /* DarkerGrotesque — headings (×1.2208) */
  --text-hero:       101px;   /* 82.67pt × 1.2208 ≈ 100.9 — hero title principal */
  --text-hero-xl:    147px;   /* 120pt × 1.2208 — CTA "Contanos tu idea" */
  --text-hero-xxl:   155px;   /* 126.55pt × 1.2208 — "+ mucho más que videos" */
  --text-display:     65px;   /* 53pt × 1.2208 ≈ 64.7 — taglines grandes */
  --text-heading-lg:  59px;   /* 48pt × 1.2208 ≈ 58.6 — "Contanos tu idea." / "Hablemos." */
  --text-heading-md:  44px;   /* 36pt × 1.2208 ≈ 43.9 — headings de sección / footer-frase */
  --text-heading-sm:  42px;   /* 34pt × 1.2208 ≈ 41.5 — work card title (cliente+categoría) */
  --text-label-xl:    73px;   /* 60pt × 1.2208 ≈ 73.2 — label "*" grande */
  --text-label-lg:    29px;   /* 24pt × 1.2208 ≈ 29.3 — eyebrow / categoría / Conocer-más lista */
  --text-label-sm:    15px;   /* 12pt × 1.2208 ≈ 14.6 — micro labels */
  --text-service-text: 201px; /* 165pt × 1.2208 ≈ 201.4 — texto fondo / watermark */
  --text-conocer:     17px;   /* 14pt × 1.2208 ≈ 17.1 — "Conocer más" grid (DarkerGrotesque) */

  /* Sora — body / UI (más aireado; NO se multiplica por el factor full) */
  --text-body-xl:  24px;   /* 24pt — subtítulos, WhatsApp */
  --text-body-lg:  18px;   /* 18pt — nav, email, footer links */
  --text-body-md:  16px;   /* 14-16pt real — body principal */
  --text-body:     14px;   /* 14pt — body estándar */
  --text-body-sm:  12px;   /* 12pt — micro texto / tags */
  --text-caption:  10px;   /* 10pt — copyright */
  --text-meta:     15px;   /* 15pt — tagline footer (Sora-Medium) */


  /* ----------------------------------------------------------------
   * LINE-HEIGHTS — medidos del manifiesto (gap-y entre líneas ÷ size)
   * DarkerGrotesque display = apretado. NO usar 1.04+ "porque se lee mejor".
   * ---------------------------------------------------------------- */
  --lh-hero:        0.873;  /* hero 82.7pt SemiBold (home/nosotros/servicios/trabajos) */
  --lh-hero-bold:   0.81;   /* hero 82.7pt Bold (news-individual, contacto) */
  --lh-watermark:   0.789;  /* watermark/bgtext 165pt & "+ mucho más que videos" 126.5pt */
  --lh-display:     0.811;  /* display 53pt Bold (trabajos/servicios/contacto) */
  --lh-display-sb:  0.925;  /* display 53pt SemiBold (intro home/nosotros) */
  --lh-heading-lg:  0.896;  /* "Contanos tu idea." 48pt */
  --lh-heading:     0.917;  /* footer-frase / "Más trabajos" 36pt */
  --lh-heading-airy: 1.167; /* news intro 36pt Regular (aireado) */
  --lh-tight:       1.0;    /* títulos de 1 línea (card cliente/categoría) */
  --lh-body:        1.5;    /* body Sora 14pt + nav/labels 18pt */
  --lh-body-airy:   1.786;  /* bio Sora 14pt (nosotros) — más aireado */
  --lh-tags:        1.75;   /* tags Sora 12pt (trabajos-individual) */


  /* ----------------------------------------------------------------
   * PESOS
   * ---------------------------------------------------------------- */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;


  /* ----------------------------------------------------------------
   * ESPACIADO Y LAYOUT — TIERS DE CONTAINER (factor único 1.2208)
   * ancho_px = ancho_pt_del_diseño × 1.2208. Medidos en los 8 manifiestos.
   * El footer/redes/CTA-frase es el tier MÁS ANCHO (ancla aprobada por Yago).
   * Las secciones de CONTENIDO quedan más flacas que él (igual que el diseño).
   *
   *   WIDE     1114pt → 1360px  (footer "Desde Buenos Aires", redes, CTA-band frase)
   *   CONTENT  1114pt → 1360px  (grid trabajos 1111, intro servicios 1116, desc ti 1112,
   *                              news body 1115 — todos ~1114pt → mismo tier que wide)
   *   HERO-TRB  915pt → 1117px  (título hero de trabajos, 4 líneas)
   *   MASLIST   972pt → 1187px  (lista "Más trabajos")
   *   NARROW    620pt →  757px  (col "Más/Otros trabajos", redes 2-col, news-hero)
   * ---------------------------------------------------------------- */
  --container-wide:    1360px;  /* TIER WIDE / CONTENT — ancla aprobada por Yago */
  --container-max:     1360px;  /* alias: columna de contenido = mismo tier wide */
  --container-content: 1360px;  /* secciones de contenido principal */
  /* TIER CONTENT-MD — ancho real del bloque "Proceso" de Servicios (3 columnas).
     Diseño: el grid arranca en content-left (x=240pt) y la 3ra columna TERMINA en
     x=1243.4pt → 1003.4pt de contenido. Mapeado al content-box renderizado del
     container WIDE (1112pt diseño → 1280px web, factor content-box 1.1511 px/pt):
     1003.4pt × 1.1511 ≈ 1155px. Se aplica como max-width del grid anclado al
     content-left (margin-right:auto), NO como container centrado: termina ANTES
     que el footer por la derecha y mantiene el borde izquierdo alineado con él
     (fix anchos de contenido 2026-06-16). El footer (WIDE 1360) sigue siendo el
     bloque más ancho. */
  --container-content-md: 1155px;
  --container-herotrb: 1117px;  /* TIER HERO-TRB — cap del título hero de Trabajos (915pt → 1117px).
                                   Se usa como max-width del bloque angosto (título), NO como
                                   container centrado: la sección sigue anclada al content-left
                                   WIDE para alinear con grid/footer (re-tier 2026-06-16). */
  --container-maslist: 1187px;  /* lista "Más trabajos" (972pt) */
  --container-narrow:   757px;  /* columnas estrechas (620pt) */
  --container-padding: 40px;    /* padding lateral mínimo en desktop */

  /* Header */
  --header-height: 87px;        /* barra Logo+Menu — dato extraído de crops */

  /* Espacios de sección */
  --section-gap-xl:  120px;
  --section-gap-lg:   80px;
  --section-gap-md:   60px;
  --section-gap-sm:   40px;


  /* ----------------------------------------------------------------
   * Z-INDEX
   * ---------------------------------------------------------------- */
  --z-header:   100;
  --z-whatsapp: 150;   /* botón flotante WhatsApp — sobre contenido, bajo el nav drawer */
  --z-nav-overlay: 200;


  /* ----------------------------------------------------------------
   * TRANSICIONES
   * ---------------------------------------------------------------- */
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;
}


/* ----------------------------------------------------------------
 * RESET MÍNIMO
 * ---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;  /* base para medidas px absolutas */
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  color: var(--text-primary);
  background-color: var(--color-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}


/* ----------------------------------------------------------------
 * CONTAINER — helper de layout
 * ---------------------------------------------------------------- */
.container {
  max-width: var(--container-content);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  width: 100%;
}

.container--wide {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  width: 100%;
}

/* Tier HERO-TRB — cap del título hero de Trabajos (1117px). Helper de consistencia;
   en la práctica se aplica como max-width del título (.trab-hero__title), no como
   container centrado, para no descentrar la sección respecto del content-left WIDE. */
.container--herotrb {
  max-width: var(--container-herotrb);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  width: 100%;
}

/* Tier MASLIST — lista "Más trabajos" (ancho intermedio 1187px). */
.container--maslist {
  max-width: var(--container-maslist);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  width: 100%;
}

/* Tier NARROW — columnas estrechas (757px). */
.container--narrow {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  width: 100%;
}

.container--full {
  width: 100%;
  padding-inline: 0;
}


/* ----------------------------------------------------------------
 * UTILIDADES BÁSICAS
 * ---------------------------------------------------------------- */
.text-red    { color: var(--color-red); }
.text-cream  { color: var(--color-cream); }
.text-grey   { color: var(--color-grey); }
.text-black  { color: var(--color-black); }

.bg-dark     { background-color: var(--color-black); }
.bg-light    { background-color: var(--color-cream); }
.bg-red      { background-color: var(--color-red); }

.uppercase   { text-transform: uppercase; }

.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }

/* Ocultar visualmente (accesible) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* Padding compensador del header fijo */
.has-fixed-header {
  padding-top: var(--header-height);
}


/* ----------------------------------------------------------------
 * WHATSAPP FLOTANTE — global, inyectado por includes/footer.php
 * en las 8 páginas. Pedido cliente (feedback jul-2026): extremo
 * IZQUIERDO. Número: single source of truth en lib/site.php
 * ($site['whatsapp']), mismo patrón que contacto.php.
 * z-index entre --z-header y --z-nav-overlay: el drawer/backdrop
 * de nav-fullscreen.php lo tapa al abrirse.
 * ---------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: var(--z-whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform var(--transition-base);
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  transform: scale(1.08);
}

.whatsapp-float__icon {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .whatsapp-float {
    left: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
  }
}