/* ═══════════════════════════════════════════════════════════════
   GRAFIA Studio — CAPA DE SISTEMA
   Lo que MANUAL-VISUAL-GRAFIA.md define y el sitio no tenía escrito en
   ninguna parte: la escala tipográfica, los 4 niveles de texto, el ritmo
   de 8 px y —lo más importante— cómo se muestra el trabajo de un cliente
   sin que la página se tiña de su estilo (manual §5).

   Se carga después de styles.css (que trae :root y el reset) y antes de
   catalogo.css / inicio.css, que pueden especializar.

   Nada aquí pinta superficies de color: la luz es fuente, no relleno.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ---------- Escala tipográfica: modular 1.25 sobre base 16 ----------
     Manual §2. No se usan tamaños fuera de ella. Ratio mínimo 4:1 entre
     display y cuerpo de la misma pieza. */
  --e-12: 0.75rem;   --e-14: 0.875rem; --e-16: 1rem;     --e-20: 1.25rem;
  --e-25: 1.5625rem; --e-31: 1.9375rem; --e-39: 2.4375rem; --e-49: 3.0625rem;
  --e-61: 3.8125rem; --e-76: 4.75rem;  --e-96: 6rem;

  /* ---------- Ritmo: múltiplos de 8 ---------- */
  --r-1: 8px;  --r-2: 16px; --r-3: 24px; --r-4: 32px;  --r-5: 40px;
  --r-6: 48px; --r-8: 64px; --r-10: 80px; --r-12: 96px; --r-16: 128px;

  /* ---------- Los 4 niveles de texto ----------
     La jerarquía se construye con tamaño + peso + color, nunca solo con
     tamaño. Los colores reusan los tokens que ya existen para no abrir
     una segunda paleta. */
  --t-l1: var(--ink);       /* titulares y el único dato que manda */
  --t-l2: var(--ink-dim);   /* cuerpo y bajadas */
  --t-l3: var(--ink-faint); /* información secundaria */
  --t-l4: #7C8082;          /* etiquetas, metadatos, pies */

  --tr-display: -0.025em;   /* a tamaño grande Montserrat se cierra */
  --tr-label: 0.26em;       /* cuanto más pequeño, más abierto */
}

/* Los cuatro niveles como clases, para no volver a inventarlos en cada hoja. */
.l1 { color: var(--t-l1); font-weight: 700; letter-spacing: var(--tr-display); }
.l2 { color: var(--t-l2); font-weight: 400; }
.l3 { color: var(--t-l3); font-weight: 400; font-size: var(--e-14); }
.l4 {
  color: var(--t-l4); font-weight: 700; font-size: var(--e-12);
  text-transform: uppercase; letter-spacing: var(--tr-label); line-height: 1.4;
}
/* El eyebrow va en naranja, no en gris: es lo que ancla el bloque de titular.
   En L4 gris se hunde y el titular queda flotando (manual §2). */
.l4--luz { color: var(--luz); }

/* Cifras tabulares donde hay datos: teléfonos, precios, numeración. */
.num { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════
   LA VENTANA — cómo se muestra el trabajo de un cliente
   ═══════════════════════════════════════════════════════════════
   Manual §5, regla 1: «El marco es GRAFIA, el contenido es del cliente.
   Nunca en la misma superficie.»

   El problema real: GRAFIA ha hecho desde piezas infantiles hasta marcas
   oscuras. Una rejilla de fotos a sangre y a plena saturación convierte la
   página en un collage del estilo de cada cliente, y GRAFIA desaparece.

   La ventana resuelve eso sin censurar el trabajo:
   · en reposo, el contenido entra en la temperatura de GRAFIA (base fría,
     luz diagonal encima) — se lee la composición, no el estilo;
   · al enfocarlo, la pieza recupera su color completo. El cliente se ve
     como el cliente necesita, cuando el visitante lo pide.

   Se aplica con la clase .ventana sobre el contenedor de la imagen.
   ═══════════════════════════════════════════════════════════════ */
.ventana {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  isolation: isolate;
}
.ventana > img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: filter 0.55s var(--ease-out), transform 0.7s var(--ease-out);
}
/* El reposo contenido solo donde hay puntero. En un celular no existe el «pasar
   por encima»: dejarlo apagado para siempre sería esconder el trabajo. */
@media (hover: hover) {
  .ventana > img { filter: saturate(0.64) contrast(1.05) brightness(0.82); }
}

/* La luz entra en diagonal (manual §10): no es un velo plano encima de la
   foto, es un haz que cruza la ventana y la ata al fondo de la página. */
.ventana::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(118deg,
    rgba(0, 10, 15, 0.52) 0%,
    rgba(0, 10, 15, 0.00) 44%,
    rgba(0, 10, 15, 0.30) 72%,
    rgba(0, 10, 15, 0.78) 100%);
  transition: opacity 0.55s var(--ease-out);
}

/* El triángulo de la esquina: la firma de GRAFIA sobre la ventana, en luz,
   del tamaño de una marca de recorte. Nunca tapa el centro de la pieza. */
.ventana::before {
  content: "";
  position: absolute; z-index: 2;
  right: 10px; top: 10px; width: 13px; height: 11px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: var(--luz);
  opacity: 0.85;
  transition: opacity 0.4s var(--ease-out);
}

/* Al enfocar: la pieza del cliente recupera su color y la luz se retira. */
.ventana:hover > img,
a:hover .ventana > img, a:focus-visible .ventana > img,
.ventana:focus-within > img {
  filter: none;
  transform: scale(1.035);
}
.ventana:hover::after,
a:hover .ventana::after, a:focus-visible .ventana::after,
.ventana:focus-within::after { opacity: 0.35; }
a:hover .ventana::before, a:focus-visible .ventana::before { opacity: 1; }

/* Logos y piezas sobre su propio color de fondo ya vienen contenidos por su
   caja: ahí la ventana solo aporta el marco, no el tratamiento de luz. */
.ventana--limpia > img { filter: none; }
.ventana--limpia::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ventana > img { transition: filter 0.2s linear; }
  .ventana:hover > img, a:hover .ventana > img { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MATERIA: la retícula de fondo
   ═══════════════════════════════════════════════════════════════
   «La materia se ve. Nada de planos vacíos y perfectos» (manual, regla 4).
   Una trama fina, al borde de lo perceptible, que da textura al Cool Black
   sin pesar un solo kilobyte de imagen. */
.materia { position: relative; }
.materia::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 70% at 50% 40%, #000 20%, transparent 100%);
}
.materia > * { position: relative; z-index: 1; }

/* El haz diagonal: luz que cruza una sección, nunca paralela al borde. */
.haz { position: relative; overflow: hidden; }
.haz::after {
  content: "";
  position: absolute; z-index: 0; pointer-events: none;
  top: -40%; bottom: -40%; left: 8%; width: 42%;
  transform: rotate(14deg);
  background: linear-gradient(90deg, transparent, rgba(251, 186, 0, 0.055), transparent);
  filter: blur(26px);
}
.haz > * { position: relative; z-index: 1; }