/* ============================================================================
   STYLES.CSS
   ============================================================================
   Hoja de estilos única para todo el sitio BOYO. Sin frameworks (nada de
   Tailwind ni Bootstrap), CSS puro con variables (custom properties).

   ---------------------------------------------------------------------------
   ÍNDICE (buscá el título en mayúsculas para saltar a esa sección)
   ---------------------------------------------------------------------------
     1. TOKENS DE DISEÑO (colores, tipografía, espaciado)
     2. RESET / BASE
     3. TIPOGRAFÍA
     4. CURSOR PERSONALIZADO
     5. OVERLAY / NAVEGACIÓN
     6. HERO (HOME)
     7. SECCIÓN DE TRABAJO ("LA PARED")
     8. CONTACTO
     9. MODAL DE VIDEO
    10. PÁGINA DE PROYECTO INDIVIDUAL
    11. UTILIDADES / ANIMACIONES
    12. PRELOADER
    13. RESPONSIVE (mobile)

   ---------------------------------------------------------------------------
   CÓMO CAMBIAR LOS COLORES
   ---------------------------------------------------------------------------
   Todos los colores están definidos como variables en ":root" (sección 1).
   Cambiá los valores ahí y se actualiza todo el sitio.
============================================================================ */


/* ============================================================================
   1. TOKENS DE DISEÑO
   ============================================================================
   Paleta: fondo casi negro, texto hueso, un único acento — el verde-lima
   de "flash" de leader de película (el cuadro blanco/verde que aparece en
   los countdowns de cine de 35mm). Se usa muy poco: solo en el cursor,
   algún hover y el contador de la esquina. El resto del sitio es
   deliberadamente monocromático para que el trabajo (los videos) sea
   siempre lo más brillante en pantalla.
============================================================================ */

:root {
  /* --- Color --- */
  --color-bg:          #0a0a0a;   /* negro cálido, fondo principal */
  --color-bg-elevated: #111111;   /* paneles/overlay sobre el fondo */
  --color-text:        #f2f1ec;   /* hueso, texto principal */
  --color-text-dim:    #8a8a86;   /* gris cálido, texto secundario */
  --color-line:        #262624;   /* líneas divisorias sutiles */
--color-accent:      #ffd800;   /* verde-lima "flash de leader", único acento */
  --color-accent-dim:  #ffb300;


  /* --- Tipografía ---
     Display: Rubik Mono One (bloque, geométrica, solo viene en un peso
     — por eso no tiene sentido pedirle distintos "wght" en Google
     Fonts). Body/UI: Inter. Para auto-hospedarlas, descargá las
     fuentes .woff2 y reemplazá el <link> de Google Fonts por un
     @font-face acá mismo. */
  --font-display: "Rubik Mono One", "Inter", -apple-system, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* --fs-hero: se usa en el título de Contacto y el título de la página
     de un proyecto. --fs-home-headline: el título grande de LA PORTADA
     (home) — está separado a propósito para que puedas cambiar el
     tamaño del título de la home sin afectar a los otros dos. */
  --fs-hero:           clamp(1.5rem, 1.5vw, 1.5rem);
  --fs-home-headline:  clamp(1.5rem, 1.5vw, 1.5rem);
  --fs-about-heading:  clamp(1.5rem, 1.5vw, 1.5rem);
  --fs-h1:     clamp(2rem, 4.5vw, 3.4rem);
  --fs-h2:     clamp(1.4rem, 2.6vw, 2rem);
  --fs-body:   1rem;
  --fs-small:  0.8125rem;
  --fs-micro:  0.6875rem;

  /* --- Espaciado --- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  --overlay-height: 84px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* --- Radios ---
     Escala de bordes redondeados usada en todo el sitio (overlay, tiles,
     botones, modal, chips de contacto). Subir estos valores redondea todo
     el sitio de una, sin tener que tocar cada componente por separado. */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* --- Movimiento --- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;
}

/* Variante clara opcional para secciones/pantallas específicas (no se usa
   por defecto, queda lista por si quieren invertir alguna sección). */
.theme-light {
  --color-bg: #f2f1ec;
  --color-bg-elevated: #ffffff;
  --color-text: #0a0a0a;
  --color-text-dim: #6b6b66;
  --color-line: #ddddd6;
}


/* ============================================================================
   2. RESET / BASE
============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--color-bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }

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

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

ul { list-style: none; margin: 0; padding: 0; }

/* Estado de carga: oculta contenido hasta que main.js confirma que está listo,
   evita el "flash" de textos sin traducir. */
body:not(.js-ready) [data-i18n] { opacity: 0; }
[data-i18n] { transition: opacity var(--dur-fast) ease; }

/* Foco visible por teclado (accesibilidad) */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Respeta "reducir movimiento" del sistema operativo */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body.modal-open, body.menu-open { overflow: hidden; }


/* ============================================================================
   3. TIPOGRAFÍA
============================================================================ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400; /* Rubik Mono One solo tiene este peso */
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}


/* ============================================================================
   4. CURSOR PERSONALIZADO
============================================================================ */

/* Oculta el cursor nativo solo cuando el personalizado está listo, así en
   mobile (donde initCursor() no corre) se sigue viendo el cursor normal.
   La clase .has-custom-cursor la agrega main.js por JS (más confiable que
   depender del selector :has() en todos los navegadores). */
body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button {
  cursor: none;
}

.boyo-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity var(--dur-fast) ease, width var(--dur-fast) var(--ease), height var(--dur-fast) var(--ease), margin var(--dur-fast) var(--ease);
  will-change: transform;
  mix-blend-mode: difference;
}

.boyo-cursor.is-visible { opacity: 1; }

.boyo-cursor img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--dur-fast) var(--ease);
}

/* Crece ~15% sobre elementos interactivos */
.boyo-cursor.is-hover {
  width: 23px;
  height: 23px;
  margin: -11.5px 0 0 -11.5px;
}

/* Animación chica al hacer click */
.boyo-cursor.is-click img {
  transform: scale(0.75);
}


/* ============================================================================
   5. OVERLAY / NAVEGACIÓN
   ============================================================================
   Barra flotante, redondeada, siempre visible, en las tres zonas pedidas:
   izquierda = logo · centro = WORK / CONTACT · derecha = EN | ES

   Nota sobre el HTML: el botón de menú mobile (.menu-toggle) vive DENTRO
   de .overlay__right, junto al selector de idioma. Esto es a propósito:
   la grilla del overlay tiene 3 columnas (logo / nav / right), así que
   cualquier elemento que necesite estar "a la derecha" tiene que estar
   adentro de esa tercera columna, si no la grilla lo manda a otro lado.
============================================================================ */

.overlay {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - (var(--container-pad) * 2));
  max-width: 1400px;
  z-index: 500;
  height: var(--overlay-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(1rem, 2.5vw, 1.75rem);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: transparent;
  transition: background var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}

.overlay.is-scrolled {
  background: rgba(17, 17, 17, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(242, 241, 236, 0.08);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.overlay__logo {
  display: inline-flex;
  align-items: center;
  justify-self: start;
}

/* El logo ahora es una única imagen (el lockup "BOYO" con el perrito
   integrado). Se controla el tamaño por el alto; el ancho se ajusta solo
   según la proporción real del archivo.
   PARA CAMBIAR EL LOGO: reemplazá /assets/logo/boyo-wordmark-white.png. */
.overlay__logo img {
  height: 22px;
  width: auto;
}

.overlay__nav {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  justify-self: center;
}

.overlay__nav a {
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  padding: 0.35rem 0;
}

.overlay__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--color-accent);
  transition: right var(--dur-med) var(--ease);
}

.overlay__nav a:hover::after { right: 0; }

.overlay__right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Selector de idioma: dos botones (EN / ES) dentro de una píldora. El
   activo se marca con .is-active (main.js la agrega/saca automáticamente
   cuando cambia el idioma). */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-pill);
  background: rgba(242, 241, 236, 0.06);
}

.lang-switch__option {
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  color: var(--color-text-dim);
  padding: 0.15rem 0.3rem;
  border-radius: var(--radius-pill);
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
}

.lang-switch__option:hover { color: var(--color-text); }

.lang-switch__option.is-active {
  color: var(--color-bg);
  background: var(--color-accent);
  font-weight: 600;
}

.lang-switch__sep {
  color: var(--color-text-dim);
  opacity: 0.4;
  font-size: var(--fs-small);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}
.menu-toggle span {
  height: 1px;
  background: var(--color-text);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}


/* ============================================================================
   6. HERO (HOME)
============================================================================ */

.hero {
  position: relative;
  min-height: 480px; /* respaldo para navegadores sin soporte de "svh" */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Fondo de respaldo: se ve siempre, incluso antes de que cargue el
     poster o el video (o si todavía no subiste ninguno de los dos). Así
     el hero nunca se ve como un rectángulo negro plano y sin gracia. */
  background: radial-gradient(120% 100% at 50% 0%, #1c1c19 0%, #0a0a0a 65%);
}

.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.25) 0%, rgba(10,10,10,0.05) 40%, rgba(10,10,10,0.8) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  /* padding-top reserva SIEMPRE el alto del overlay + aire, así el
     título nunca se superpone con el menú, sin importar cuántas líneas
     ocupe el texto en pantallas más bajas o con traducciones más largas. */
  padding: calc(var(--overlay-height) + 40px) var(--container-pad) var(--space-xl);
  max-width: 62rem;
}

.hero__headline {
  /* Para cambiar el tamaño del título de la portada, editá
     --fs-home-headline arriba de todo en este archivo (sección 1,
     TOKENS DE DISEÑO). No afecta a ningún otro texto del sitio. */
  font-size: var(--fs-home-headline);
  color: var(--color-text);
  margin-bottom: var(--space-md);
  opacity: 0;
  transform: translateY(16px);
  animation: rise var(--dur-slow) var(--ease) 0.15s forwards;
}

.hero__description {
  font-size: 1.05rem;
  color: var(--color-text-dim);
  max-width: 30rem;
  margin-bottom: var(--space-md);
  opacity: 0;
  transform: translateY(16px);
  animation: rise var(--dur-slow) var(--ease) 0.3s forwards;
}

.hero__actions {
  opacity: 0;
  transform: translateY(16px);
  animation: rise var(--dur-slow) var(--ease) 0.45s forwards;
}

.btn-reel {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid rgba(242, 241, 236, 0.35);
  border-radius: 999px;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}

.btn-reel:hover {
  border-color: var(--color-accent);
  background: rgba(214, 255, 74, 0.08);
}

.btn-reel .btn-reel__icon {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent);
}

.hero__scroll-hint {
  position: absolute;
  right: var(--container-pad);
  bottom: var(--space-md);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-text-dim);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.hero__scroll-hint::after {
  content: "";
  width: 1px;
  height: 40px;
  background: linear-gradient(var(--color-text-dim), transparent);
}

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}


/* ============================================================================
   SECCIÓN ABOUT (QUIÉNES SOMOS)
   ============================================================================
   Manifiesto cortito y con onda + una tira de stats grandes + una cinta
   de herramientas/software que se desliza sola en loop (marquee).

   PARA CAMBIAR EL TAMAÑO DEL TÍTULO: editá --fs-about-heading arriba de
   todo en este archivo (sección 1, TOKENS DE DISEÑO). Es independiente
   del título de la home y del de contacto/proyecto.
============================================================================ */

.about {
  padding: var(--space-xl) var(--container-pad);
  border-top: 1px solid var(--color-line);
}

.about__intro {
  max-width: 46rem;
  margin-bottom: var(--space-lg);
}

.about__heading {
  color: #ffd800;
  font-family: var(--font-display);
  font-weight: 400; /* Rubik Mono One solo tiene este peso */
  font-size: var(--fs-about-heading);
  line-height: 1.08;
  margin: 0.6rem 0 0;
  
}


/* La frase entre paréntesis va chica, gris y en la tipografía de texto
   normal — el remate cómico dicho como "al pasar", no a los gritos. */
.about__heading-accent {
  display: inline-block;
  margin-top: 0.4rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.36em;
  color: var(--color-text-dim);
  letter-spacing: 0;
}

.about__description {
  color: var(--color-text-dim);
  max-width: 36rem;
  margin-top: var(--space-md);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* Cinta de herramientas: se desliza sola en loop infinito. El contenido
   está duplicado dos veces en el HTML (ver index.html) para que el loop
   no se note el corte. */
.about__marquee {
  overflow: hidden;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: var(--space-sm) 0;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

.about__marquee-track {
  display: flex;
  width: max-content;
  gap: clamp(2rem, 5vw, 4rem);
  animation: about-marquee 24s linear infinite;
}

.about__marquee-track span {
  font-family: "Doto", var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: var(--color-text-dim);
  white-space: nowrap;
}

@keyframes about-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .about__marquee-track { animation-play-state: paused; }
}


/* ============================================================================
   7. SECCIÓN DE TRABAJO ("LA PARED" / MOSAICO)
   ============================================================================
   Grilla tipo mosaico inspirada en /the-wall de Oruga: tiles de video
   pegados unos a otros (gap mínimo), casi sin espacio en blanco, con
   tamaños variados (normal / wide / tall / big) para que la pared se
   sienta dinámica. El texto de cada proyecto (cliente, título, categoría,
   año) vive como overlay sobre el propio video, no debajo.

   El tamaño de cada tile se define por proyecto en projects.js (campo
   "tileSize"). Los valores posibles están documentados ahí mismo.
============================================================================ */

.work {
  padding: var(--space-lg) 0 var(--space-xl);
}

.work__header {
  color: #ffd800;
  padding: 0 var(--container-pad);
  margin-bottom: var(--space-md);
}

.work__header h2 {
  font-size: var(--fs-h1);
  margin-top: 0.5rem;
}

.project-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 3px;
  padding: 0 3px;
}

.tile {
  position: relative;
  display: block;
  grid-column: span 1;
  grid-row: span 1;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-md);
}

.tile--wide { grid-column: span 2; aspect-ratio: auto; }
.tile--tall { grid-row: span 2; aspect-ratio: auto; }
.tile--big  { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

.tile__media {
  position: relative;
  width: 100%;
  height: 100%;
}

.tile__cover,
.tile__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--dur-med) ease, transform 0.7s var(--ease);
}

.tile__video { opacity: 0; }
.tile__video[src] { opacity: 1; }

.tile:hover .tile__cover,
.tile:hover .tile__video {
  transform: scale(1.035);
}

/* Scrim: degradé sutil siempre presente en la base para que el texto sea
   legible incluso en tiles sin hover (accesibilidad / mobile, donde no
   hay estado hover). Se intensifica al pasar el mouse. */
.tile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(6,6,6,0.75) 100%);
  opacity: 0.55;
  transition: opacity var(--dur-med) ease;
  pointer-events: none;
}

.tile:hover .tile__scrim { opacity: 0.9; }

.tile__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-sm);
  transform: translateY(6px);
  opacity: 0.85;
  transition: transform var(--dur-med) var(--ease), opacity var(--dur-med) ease;
}

.tile:hover .tile__caption {
  transform: translateY(0);
  opacity: 1;
}

.tile__client {
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.2rem;
}

.tile__title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 400; /* Rubik Mono One solo tiene este peso */
  color: var(--color-text);
  line-height: 1.1;
}

.tile__meta {
  font-size: var(--fs-small);
  color: var(--color-text-dim);
  margin-top: 0.25rem;
}


/* ============================================================================
   8. CONTACTO
============================================================================ */

.contact {
  padding: var(--space-xl) var(--container-pad) var(--space-lg);
  border-top: 1px solid var(--color-line);
}

.contact__heading {
  color: #ffd800;
  font-size: var(--fs-hero);
  max-width: 20ch;
  margin: 0.75rem 0 var(--space-md);
}

.contact__description {
  color: var(--color-text-dim);
  max-width: 34rem;
  margin-bottom: var(--space-lg);
}

.contact__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.contact__links a {
  font-size: 0.95rem;
  font-family: var(--font-display);
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line);
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, transform var(--dur-fast) var(--ease);
}

.contact__links a:hover {
  border-color: var(--color-accent);
  background: rgba(214, 255, 74, 0.08);
  transform: translateY(-2px);
}

.footer {
  padding: var(--space-md) var(--container-pad) var(--space-md);
  display: flex;
  justify-content: space-between;
  color: var(--color-text-dim);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  border-top: 1px solid var(--color-line);
}


/* ============================================================================
   9. MODAL DE VIDEO
============================================================================ */

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(6, 6, 6, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease);
}

.video-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.video-modal__video {
  width: min(92vw, 1400px);
  max-height: 86vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.video-modal__close {
  position: absolute;
  top: var(--space-md);
  right: var(--container-pad);
  color: var(--color-text);
  opacity: 0.8;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: rgba(242, 241, 236, 0.08);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease, background var(--dur-fast) ease;
}

.video-modal__close:hover {
  opacity: 1;
  transform: rotate(90deg);
  background: rgba(242, 241, 236, 0.15);
}


/* ============================================================================
   10. PÁGINA DE PROYECTO INDIVIDUAL
   ============================================================================
   A propósito, este hero NO repite el patrón de la home (texto grande
   flotando encima de un video fullbleed). Acá la imagen de portada es una
   card redondeada, inset del borde de la pantalla, y el título va debajo,
   no encima. Así las dos páginas se sienten distintas entre sí en vez de
   ser el mismo bloque reciclado con otro fondo.
============================================================================ */

.project-hero {
  padding: calc(var(--overlay-height) + 34px) var(--container-pad) 0;
}

.project-hero__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8.5;
  max-height: 66svh;
  min-height: 280px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
}

.project-hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-hero__title {
  font-size: var(--fs-hero);
  max-width: 42rem;
  margin-top: var(--space-md);
}

.project-info {
  padding: var(--space-lg) var(--container-pad);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  border-bottom: 1px solid var(--color-line);
}

.project-info__field .eyebrow { margin-bottom: 0.4rem;color: #ffd800; }

.project-info__field p { font-size: 1rem; }

.project-description {
  padding: var(--space-lg) var(--container-pad);
  max-width: 46rem;
  font-size: 1.15rem;
  color: var(--color-text-dim);
  line-height: 1.6;
}

.project-section {
  padding: var(--space-md) var(--container-pad) var(--space-lg);
}

.project-section video {
  width: 100%;
  border-radius: var(--radius-md);
  background: #000;
}
[data-section-final] .eyebrow,
[data-section-breakdown] .eyebrow,
[data-section-gallery] .eyebrow {
  color: #ffd800;
}

.project-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-sm);
}

.project-gallery-grid img {
  width: 100%;
  border-radius: var(--radius-md);
}

.project-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--color-line);
}

.project-nav a {
  padding: var(--space-lg) var(--container-pad);
  display: block;
  transition: background var(--dur-fast) ease;
}

.project-nav a:hover { background: var(--color-bg-elevated); }

.project-nav__prev { text-align: left; border-right: 1px solid var(--color-line); }
.project-nav__next { text-align: right; }

.project-nav .eyebrow { margin-bottom: 0.5rem; }
.project-nav strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400; /* Rubik Mono One solo tiene este peso */
}

.project-notfound {
  padding: var(--space-xl) var(--container-pad);
  text-align: center;
}


/* ============================================================================
   11. UTILIDADES / ANIMACIONES
============================================================================ */

.container { padding: 0 var(--container-pad); }

[hidden] { display: none !important; }

.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.fade-in-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================================
   12. PRELOADER
   ============================================================================
   Pantalla de carga con el logo de BOYO, generada por JS (ver main.js,
   módulo "PRELOADER"). Animación simple: el logo pulsa suave en loop
   mientras carga la página, y todo el bloque se desvanece cuando termina.
============================================================================ */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  opacity: 1;
  transition: opacity 0.5s var(--ease);
}

.preloader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.preloader__logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  animation: preloader-pulse 1.1s ease-in-out infinite;
}

@keyframes preloader-pulse {
  0%, 100% { transform: scale(0.9); opacity: 0.55; }
  50% { transform: scale(1); opacity: 1; }
}

/* Mientras el preloader está activo, se bloquea el scroll para que no se
   vea el contenido "saltar" antes de tiempo. */
body.preloading { overflow: hidden; }


/* ============================================================================
   13. RESPONSIVE
============================================================================ */

@media (max-width: 860px) {
  .overlay__nav {
    position: fixed;
    top: calc(var(--overlay-height) + 28px);
    left: 50%;
    width: calc(100% - (var(--container-pad) * 2));
    max-width: 420px;
    z-index: 400;
    background: rgba(17, 17, 17, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(242, 241, 236, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-md);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(-10px) scale(0.98);
    transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease), visibility var(--dur-med);
  }

  body.menu-open .overlay__nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
  }

  .overlay__nav a { font-size: 1.05rem; }

  .menu-toggle { display: flex; }
  .overlay__right .lang-switch { position: relative; z-index: 401; }

  body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
  body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .project-info { grid-template-columns: repeat(2, 1fr); }

  .project-wall { grid-template-columns: repeat(2, 1fr); }
  .tile--wide, .tile--big { grid-column: span 2; }
  .tile--big { grid-row: span 2; }
}

@media (max-width: 600px) {
  .project-nav { grid-template-columns: 1fr; }
  .project-nav__prev { border-right: none; border-bottom: 1px solid var(--color-line); }
  .hero__scroll-hint { display: none; }

  .project-wall { grid-template-columns: 1fr; gap: 2px; padding: 0 2px; }
  .tile, .tile--wide, .tile--tall, .tile--big {
    grid-column: span 1;
    grid-row: span 1;
    aspect-ratio: 4 / 3;
  }
}