/*
 * TOKENS — Creativity Media
 * ===========================================================================
 *
 * Un solo lugar para toda la identidad: se cambia una línea y cambia el sitio.
 * Los colores se nombran POR ROL, no por tono — «--acento» sobrevive a que el
 * ámbar se vuelva verde algún día; «--amarillo» no.
 *
 * ---------------------------------------------------------------------------
 * DIRECCIÓN DE ARTE — «EL CARTEL»
 * ---------------------------------------------------------------------------
 * Creativity Media es una AGENCIA CREATIVA, no un directorio. Su sitio anterior
 * estaba clonado del de Latinos en Texas —misma maqueta, mismos colores, el
 * mismo pie de página— y eso hacía que las dos marcas del mismo dueño se
 * canibalizaran: quien buscaba quien le grabe un vídeo aterrizaba en algo que
 * parecía un listado comunitario.
 *
 * Aquí todo está decidido en contra de ese parecido:
 *   · NEGRO dominante. En un portafolio la fotografía es el producto, y el
 *     negro es el único fondo que no compite con ella. El azul noche del otro
 *     sitio tiñe la foto; este negro la deja sola.
 *   · TIPOGRAFÍA DE CARTEL. Anton en mayúsculas, enorme, apretada. No es una
 *     serif editorial de revista: es el rótulo de un póster de cine.
 *   · ESQUINAS RECTAS. 2 px, no 28. Un trabajo del portafolio es un cartel
 *     pegado a la pared, no una tarjeta flotando sobre papel.
 *   · ÁMBAR como color de acción y TERRACOTA como apoyo. Ni rastro del azul.
 *
 * ---------------------------------------------------------------------------
 * REGLA DE CONTRASTE (WCAG AA, 4.5:1). Comprobada par a par, no supuesta.
 *   · --hueso  sobre --negro ........ 17.2:1
 *   · --ambar  sobre --negro ........ 10.3:1   (sobre claro da 1.9:1 — PROHIBIDO)
 *   · --brasa  sobre --negro .........  5.1:1   (sobre --hueso da 3.4:1 — NO)
 *   · --humo   sobre --negro .........  8.0:1   (texto secundario en oscuro)
 *   · --negro  sobre --ambar ........ 10.3:1   (la tinta que va ENCIMA del ámbar)
 *   · --tinta  sobre --hueso ........ 16.4:1
 *   · --apagado sobre --hueso ........  6.4:1   (texto secundario en claro)
 *   · --brasa-texto sobre --hueso ....  5.0:1   (terracota oscurecida para claro)
 * No es burocracia: media clientela mira esto en un teléfono, al sol, con el
 * brillo al mínimo para que le dure la batería.
 * ---------------------------------------------------------------------------
 */

:root {

  /* -----------------------------------------------------------------
   * COLOR
   * --------------------------------------------------------------- */

  /* El fondo dominante. Negro casi puro, no #000: un negro absoluto sobre
     pantalla OLED crea un borde duro donde acaba la fotografía, y la foto
     parece recortada con tijera. Este deja un milímetro de aire. */
  --negro:         #0A0A0A;
  /* Un escalón por encima, para paneles y bandas que deben distinguirse del
     fondo sin dejar de ser negro. Sin él, una caja sobre --negro solo existe
     por su borde. */
  --negro-suave:   #141414;
  --negro-hondo:   #050505;  /* el pie: cierra el sitio más oscuro que el resto */
  /* Borde visible sobre negro. Un rgba(255,255,255,.08) desaparece en cuanto la
     pieza se apoya sobre una fotografía clara; un color sólido no. */
  --negro-borde:   #2A2A2A;

  --hueso:         #F2EFE9;  /* superficie clara CÁLIDA. El blanco puro es
                                exactamente lo que hace que un sitio se vea
                                «a plantilla»: aquí el papel tiene temperatura. */
  --hueso-honda:   #E4DFD5;  /* segundo escalón del papel: bordes y rellenos */

  --ambar:         #F7AD06;  /* color actual de la marca: se conserva. Es el
                                color de la ACCIÓN — botones, enlaces sobre
                                negro, la cifra que importa. */
  --ambar-oscuro:  #C98A00;  /* hover: se OSCURECE el mismo ámbar, nunca se
                                salta a otro tono. */
  --ambar-tinta:   var(--negro);  /* lo que va ENCIMA del ámbar (10.3:1) */

  --brasa:         #E0521F;  /* terracota de apoyo: numeración, detalles,
                                subrayados. Nunca es la acción — ese sitio es
                                del ámbar, y dos colores de acción no son
                                jerarquía, son ruido. */
  --brasa-texto:   #B33F13;  /* terracota OSCURECIDA para texto sobre claro */

  --tinta:         #121110;  /* texto principal sobre claro */
  --apagado:       #5A554E;  /* ÚNICO gris de texto sobre claro */
  --humo:          #A9A29A;  /* ÚNICO gris de texto sobre oscuro */
  --blanco:        #FFFFFF;

  /* Alias de rol: las hojas piden el ROL y no el color, para que un cambio de
     paleta no obligue a repasar cada archivo. */
  --superficie:        var(--negro);
  --superficie-clara:  var(--hueso);
  --linea:             var(--negro-borde);
  --linea-clara:       #D8D2C6;

  /*
   * LA FUENTE DE LOS TITULARES DE MÓDULO. NO EXISTÍA.
   *
   * Nueve declaraciones de seis hojas —reels, galeria, servicios (x3),
   * nosotros (x3) y contacto— pedían `var(--fuente-titulo)` y el token no
   * estaba definido en ninguna parte: todas caían al respaldo y se pintaban en
   * ARCHIVO. Medido con getComputedStyle, no supuesto.
   *
   * El resultado era el peor posible: los dos titulares que PRESENTAN EL
   * TRABAJO —«EL TRABAJO, SIN FILTROS» y «LO QUE GRABAMOS»— eran los únicos de
   * la portada que no iban en la condensada de cartel, mientras los de
   * servicios y proceso sí. Justo donde la identidad tenía que pegar más
   * fuerte, se caía.
   */
  --fuente-titulo:     var(--fuente-display);

  /* -----------------------------------------------------------------
   * DEGRADADOS
   * Se declaran una vez porque son identidad, no decoración suelta.
   * --------------------------------------------------------------- */

  /* El relleno de las piezas SIN fotografía. No es un hueco gris de error: es
     una pieza diseñada, con la inicial gigante y el servicio, que ocupa su
     sitio con intención. Ninguna tarjeta de este sitio puede quedar vacía. */
  --degradado-pieza: linear-gradient(140deg, #1F1B16 0%, var(--negro) 62%);
  --degradado-calor: linear-gradient(140deg, var(--brasa) 0%, #6E230A 100%);

  /* El velo que va bajo el texto apoyado SOBRE una fotografía. Sin él, un
     titular claro sobre un cielo blanco desaparece. Es la diferencia entre
     «se lee siempre» y «se lee si hay suerte». */
  --velo-foto: linear-gradient(
    to top,
    rgba(10, 10, 10, .94) 0%,
    rgba(10, 10, 10, .74) 30%,
    rgba(10, 10, 10, .16) 66%,
    rgba(10, 10, 10, 0) 100%
  );
  --velo-corto: linear-gradient(
    to top,
    rgba(10, 10, 10, .82) 0%,
    rgba(10, 10, 10, .28) 48%,
    rgba(10, 10, 10, 0) 100%
  );
  /* Velo del hero: cubre entero porque encima va el nombre a tamaño de cartel
     y no puede depender de cómo sea el fotograma del vídeo. */
  --velo-hero: linear-gradient(
    to bottom,
    rgba(10, 10, 10, .70) 0%,
    rgba(10, 10, 10, .34) 38%,
    rgba(10, 10, 10, .82) 100%
  );

  /* ESCALA DE OPACIDADES DE CAPA. La fotografía que suba el dueño puede ser un
     fondo blanco de estudio o una escena nocturna: no hay un valor de velo que
     sirva para todas. En vez de que cada hoja invente su rgba(), aquí están los
     cuatro pasos permitidos y cada pieza elige el suyo POR NOMBRE. El nombre
     dice cuánto texto aguanta encima, que es la decisión real que se toma. */
  --capa-tenue:  .24;  /* manda la foto; encima solo va un sello */
  --capa-media:  .48;  /* una etiqueta o una línea corta */
  --capa-densa:  .70;  /* titular + entradilla: mínimo que garantiza AA */
  --capa-solida: .88;  /* la foto pasa a ser textura; el texto es el asunto */

  /* -----------------------------------------------------------------
   * TIPOGRAFÍA
   * Dos familias y ninguna más.
   *
   * ANTON para titulares: una sola grosura, condensada, pensada para
   * ocupar. A tamaño de cartel no hay nada que decidir —no tiene pesos
   * entre los que dudar— y eso es justamente lo que la hace coherente
   * pantalla tras pantalla.
   * ARCHIVO para texto: grotesca de altísima legibilidad a 15-17 px en
   * un teléfono barato, que es donde se lee esto. Se pide con el eje de
   * ANCHURA (wdth) además del de grosura: el mismo archivo da la
   * versión expandida de las etiquetas sin descargar otra fuente.
   *
   * PROHIBIDAS por dirección de arte: Inter, Roboto, Poppins,
   * Montserrat y las fuentes del sistema.
   * --------------------------------------------------------------- */
  --fuente-display: 'Anton', 'Archivo', 'Arial Narrow', Impact, sans-serif;
  --fuente-texto:   'Archivo', Helvetica, Arial, sans-serif;

  /* Escala fluida. Un solo sistema para todo el sitio: los titulares de sección
     no pueden ser de seis tamaños distintos según la sección, que es lo que
     hace que un sitio parezca seis sitios. */
  --fs-cartel:  clamp(3.4rem, 14vw, 11rem);      /* el nombre en el hero, y solo él */
  --fs-display: clamp(2.6rem, 7.5vw, 6rem);      /* titulares de sección */
  --fs-h2:      clamp(2rem, 4.6vw, 3.4rem);
  --fs-h3:      clamp(1.35rem, 2.6vw, 2rem);
  --fs-h4:      1.15rem;
  --fs-texto:   1.0625rem;
  --fs-chico:   0.9375rem;
  --fs-etiqueta: 0.75rem;

  --peso-texto:  400;
  --peso-medio:  500;
  --peso-fuerte: 700;

  --interlineado:        1.6;
  /* Anton en mayúsculas no tiene descendentes que separar: a 1.1 los renglones
     de un titular de tres líneas flotan sueltos y dejan de leerse como un
     bloque. 0.88 los cose. */
  --interlineado-cartel: 0.88;
  --interlineado-titulo: 0.98;

  /* Anton ya viene condensada; el tracking negativo es mínimo y solo compensa
     la separación óptica que aparece a tamaños muy grandes. */
  --tracking-cartel:   -0.015em;
  --tracking-titulo:   -0.005em;
  --tracking-etiqueta:  0.22em;   /* las etiquetas van al revés: abiertas */

  /* -----------------------------------------------------------------
   * RITMO Y MAQUETA
   * --------------------------------------------------------------- */
  --contenedor:       1440px;   /* una agencia respira más ancho que un directorio */
  --contenedor-medio: 1120px;
  --contenedor-texto: 66ch;     /* medida de lectura para prosa larga */
  --canal:            24px;     /* padding lateral */
  --seccion-y:        clamp(72px, 9vw, 148px);   /* ÚNICO padding vertical de sección */

  --e-1: 8px;   --e-2: 16px;  --e-3: 24px;
  --e-4: 32px;  --e-5: 48px;  --e-6: 64px;  --e-7: 96px;

  /* -----------------------------------------------------------------
   * FORMAS
   * Rectas. Es la decisión que más separa este tema del otro sitio del
   * dueño (que usa 28 px) y la que hace que las piezas se lean como
   * carteles y no como tarjetas de una aplicación.
   * --------------------------------------------------------------- */
  --radio-pieza:   2px;
  --radio-chico:   2px;
  --radio-pildora: 999px;   /* SOLO para los sellos de servicio, que son etiquetas
                               cosidas a la pieza, no piezas en sí */

  /* Sombras bajas y muy abiertas. Sobre negro una sombra apenas se ve, así que
     no se usan para elevar: se usan para separar una pieza clara del fondo
     cuando la sección es de papel. Nunca sombras duras. */
  --sombra-1: 0 2px 10px rgba(0, 0, 0, .25);
  --sombra-2: 0 18px 48px rgba(0, 0, 0, .38);

  /* -----------------------------------------------------------------
   * MOVIMIENTO
   * --------------------------------------------------------------- */
  --transicion:       220ms cubic-bezier(.22, .61, .36, 1);
  --transicion-lenta: 900ms cubic-bezier(.22, .61, .36, 1);
  --aparicion:        700ms cubic-bezier(.22, .61, .36, 1);

  /* Las magnitudes del movimiento van como token porque son la diferencia entre
     «el sitio tiene vida» y «el sitio se mueve solo»: si cada hoja elige su
     desplazamiento y su zoom, la página entera late a destiempo. */
  --aparece-desplazamiento: 16px;
  --aparece-escalon:        70ms;   /* por debajo de 60 ms la cascada no se
                                       percibe; por encima de 120 ms el visitante
                                       cree que la página va lenta y se va */
  --eleva-hover: -6px;
  --zoom-hover:  1.06;              /* por encima de 1.08 se ve el desenfoque del
                                       reescalado y parece una foto mala */

  --alto-cabecera: 76px;   /* real, medido: lo usa scroll-padding-top para que
                              los anclajes no queden debajo del menú fijo */
}

@media (max-width: 900px) {
  :root {
    --canal: 18px;
    --alto-cabecera: 62px;
    /* En una pantalla corta entran pocos elementos por pantallazo, y un escalón
       largo deja de ser un ritmo para convertirse en una espera. */
    --aparece-escalon: 45ms;
  }
}

/*
 * EL CARTEL, A TAMAÑO DE CARTEL TAMBIÉN EN EL TELÉFONO.
 *
 * Con 14vw el nombre medía 54,6 px a 390 y el bloque entero 48 px: el 5,7 % de
 * la primera pantalla, cuando en 1440 mide 176 px y ocupa el 34,4 %. Seis veces
 * menos presencia para el elemento que ES la marca. Y encima cabía en UNA línea
 * a 390 y en DOS a 360, así que el mismo hero se veía distinto según el
 * teléfono.
 *
 * 22vw es el techo: medido con la métrica real de Anton, «CREATIVITY» ocupa
 * 3,995 px de ancho por cada píxel de cuerpo, así que en 320 px de pantalla el
 * cuerpo máximo que cabe son 71 px = 22,2vw. Por eso el techo se queda en 22 y
 * quien manda de verdad es el `min()` de portada.css, que mide el nombre REAL
 * del sitio: si el dueño lo renombra con una palabra más larga, el cuerpo baja
 * solo en vez de desbordar.
 */
@media (max-width: 900px) {
  :root { --fs-cartel: clamp(3.4rem, 22vw, 8rem); }
}

/*
 * LA ESCALA DEJA DE ESCALAR JUSTO DONDE MÁS FALTA HACE.
 *
 * Los clamp() de arriba tienen mínimos pensados para que nada desborde, y el
 * resultado medido es que en el teléfono SIEMPRE gana el mínimo: --fs-h2 se
 * queda clavado en 2rem desde los 435 px hacia abajo, --fs-display en 2,6rem.
 * Por eso el sitio se ve plano en el móvil y no en el escritorio: no es que la
 * tipografía encoja con la pantalla, es que a partir de cierto ancho DEJA DE
 * MOVERSE mientras la pantalla sigue estrechándose.
 *
 * Medido a 390 antes de esto: titular de sección 32 px contra 57,6 en 1440.
 * La agencia es un estudio de cartelería y fotografía; el cartel es el
 * argumento. Aquí la escala vuelve a depender del ancho, con el mismo tope de
 * escritorio para que en tabletas no se dispare.
 *
 * Se pone a 700 y no a 900 a propósito: entre 700 y 900 px la maqueta ya está
 * en una columna pero sobra ancho, y los mínimos de arriba se comportan bien.
 * ---------------------------------------------------------------------- */
@media (max-width: 700px) {
  :root {
    --fs-display: clamp(2.6rem, 13vw, 6rem);      /* 50,7 px a 390, era 41,6 */
    --fs-h2:      clamp(2.4rem, 11.5vw, 3.4rem);  /* 44,9 px a 390, era 32   */
    --fs-h3:      clamp(1.5rem, 6.4vw, 2rem);     /* 25   px a 390, era 21,6 */
  }
}

/*
 * Quien pida menos movimiento, recibe menos movimiento.
 *
 * Se anulan también las MAGNITUDES, no solo las duraciones. Dejar las duraciones
 * en 1 ms mantiene el movimiento igual de brusco, solo que instantáneo: el
 * bloque sigue saltando 16 px y la foto sigue dando un tirón de escala. Con el
 * desplazamiento y el zoom a cero, ninguna regla que los use necesita saber que
 * esta consulta existe — el token ya llega neutralizado.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transicion:       1ms;
    --transicion-lenta: 1ms;
    --aparicion:        1ms;

    --aparece-desplazamiento: 0px;
    --aparece-escalon:        0ms;
    --eleva-hover:            0px;
    --zoom-hover:             1;
  }
}