/* =====================================================================
   BASE  ·  cosas comunes a todas las páginas
   (menú, cortina de transición, rejilla formato cine, botón auto-scroll,
   visor de fotos). Los tamaños se cambian en ajustes.css.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--color-fondo);
  color: var(--color-tinta);
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--color-tinta); color: var(--color-fondo); }

/* Texto contrastado sobre la imagen. El lienzo lo pinta blanco o negro. */
.mezcla {
  color: var(--texto-color);
  mix-blend-mode: var(--texto-mezcla);
}

/* ---------- CONTRASTE MONOCROMO (assets/js/diferencia.js) ------------
   Las letras se dibujan en esta capa en blanco o negro según la foto.
   El texto real conserva los enlaces y la accesibilidad.             */
.dif-capa {
  position: fixed; left: 0; top: 0;   /* el tamaño lo pone diferencia.js (= pantalla visible) */
  z-index: 80; pointer-events: none;
}
.dif-activo :is(.menu a, .menu button, .menu__labor, .pase__titulo, .pase__datos, .etiqueta-cursor, .celda-proyecto__txt, [data-dif]):not([data-dif-no], [data-dif-no] *),
.dif-activo :is(.menu a, .menu button, .menu__labor, .pase__titulo, .pase__datos, .etiqueta-cursor, .celda-proyecto__txt, [data-dif]):not([data-dif-no], [data-dif-no] *) * {
  color: transparent !important;
  -webkit-text-stroke-color: transparent !important;
  text-decoration-color: transparent !important;
}

/* ---------- CORTINA: fundido al entrar y salir de cada página ------- */
.cortina {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--color-fondo);
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--t-cortina) var(--curva);
}
.cortina.abierta { opacity: 0; }

/* ---------- MENÚ ---------------------------------------------------
   INICIO:     arriba en el centro NOMBRE · production designer · work
               abajo en el centro  contact
   SECCIONES:  arriba en el centro NOMBRE y debajo dónde estás
               (Work / Films / Series / Commercials / Videoclips / Contact)
   PROYECTO:   arriba en el centro solo el NOMBRE
   Cada enlace lleva alrededor un rectángulo transparente (no se ve) para
   que sea fácil pinchar sin acertar justo en las letras: --menu-zona-alto
   y --menu-zona-ancho en ajustes.css (sección 3).
   Tamaños: ajustes.css secciones 0 y 3                                 */
.menu {
  position: fixed; inset: 0; z-index: 50;
  pointer-events: none;
  color: var(--menu-color);
  mix-blend-mode: var(--menu-mezcla);
  font-family: var(--fuente-menu);
  font-weight: var(--menu-peso, 400);
  font-style: var(--menu-estilo, normal);
  text-transform: var(--menu-transform, uppercase);
  line-height: 1;
}
.menu a, .menu button, .menu span { -webkit-text-stroke: 0; }
/* zona de clic: rectángulo invisible alrededor de cada enlace.
   El margen negativo es el mismo que el relleno, así nada se mueve. */
.menu a, .menu button {
  pointer-events: auto; transition: opacity .3s;
  display: inline-block;
  padding: var(--menu-zona-alto) var(--menu-zona-ancho);
  margin: calc(var(--menu-zona-alto) * -1) calc(var(--menu-zona-ancho) * -1);
}
.menu span { pointer-events: none; }
.menu a:hover, .menu button:hover { opacity: .6; }
.pagina-inicio .menu a, .pagina-inicio .menu button, .pagina-inicio .menu span { -webkit-text-stroke-width: 0; }
.menu a.activo { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
[hidden] { display: none !important; }

.menu__centro {
  position: absolute; left: 50%; top: calc(var(--margen) * .7);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--inicio-separacion-lineas);
  text-align: center;
}
/* El botón Work revela solo la columna central del inicio. */
.menu__opciones {
  position: absolute; left: 50%; top: 37%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(24px, 5.5vh, 58px);
  text-align: center;
}
.menu__opciones .menu__archivo { margin-top: clamp(38px, 7vh, 78px); }
.menu__pie {
  position: absolute; left: 50%; bottom: calc(var(--margen) * .9 + env(safe-area-inset-bottom));
  transform: translateX(-50%);
}

/* Opciones de WORK (inicio): ocultas hasta pulsar WORK. La animación
   (máscara de arriba abajo al abrir, fundido al cerrar) la hace GSAP en
   comun.js; tiempos en ajustes.js → animaciones.menu.                 */
.menu .menu__plegable > * { opacity: 0; visibility: hidden; pointer-events: none; }
.menu.menu--abierto .menu__plegable > * { opacity: 1; visibility: visible; pointer-events: auto; }
.menu.menu--animando .menu__plegable > * { transition: none !important; }

/* MASK REVEAL del nombre: .title-mask (overflow: hidden) es la máscara y
   .title sube por dentro (GSAP, yPercent). El relleno deja sitio a los
   acentos y a la cursiva; el margen negativo lo compensa, así el
   encabezado no cambia ni de tamaño ni de sitio. */
.title-mask {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: .3em .4em .1em; margin: -.3em -.4em -.1em;
}
.title { display: inline-block; white-space: nowrap; }

/* Opciones de WORK: cada texto tiene su propia máscara (mask reveal). */
.opcion-mascara {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: .25em .3em .15em; margin: -.25em -.3em -.15em;
}
.opcion-texto { display: inline-block; }
.menu.menu--abierto .menu__plegable > a:hover { opacity: .6; }

.menu__nombre {
  font-family: var(--nombre-fuente);
  font-weight: var(--nombre-negrita);
  font-style: var(--nombre-cursiva);
  font-synthesis: weight style;
  text-transform: var(--nombre-transform);
  font-size: var(--nombre-tam);
  letter-spacing: var(--nombre-espaciado);
  white-space: nowrap;
}
.menu__labor, .menu__work, .menu__donde, .menu__contacto, .menu__seccion, .menu__archivo {
  font-size: var(--menu-tam);
  letter-spacing: var(--inicio-espaciado-menu);
  white-space: nowrap;
}
.menu__work { text-transform: var(--menu-transform, uppercase); }
/* Logo fijo en las parrillas y fichas. El recorte elimina únicamente la
   franja transparente inferior del SVG, manteniendo su proporción. */
.menu__nombre.menu__nombre--logo { font-size: 30px; }
.menu__logo { display: block; width: var(--logo-ancho); max-width: none; height: var(--logo-alto); object-fit: cover; object-position: left top; }
svg.menu__logo { overflow: visible; }
.menu__logo-fondo {
  stroke: #000;
  stroke-width: var(--logo-fondo-trazo);
  stroke-linejoin: round;
  paint-order: stroke fill;
}
/* La sección activa queda bajo el centro del logo; los centros de las otras
   dos palabras coinciden con el principio y el final del nombre. */
.menu__categorias {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--logo-ancho);
}
.menu__categorias > :first-child,
.menu__categorias > :last-child {
  position: absolute;
  top: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}
.menu__categorias > :first-child { left: 0; }
.menu__categorias > :last-child { left: 100%; }
.menu__categoria-lateral {
  font-size: max(10px, calc(var(--menu-tam) - 2px));
  letter-spacing: var(--inicio-espaciado-menu);
  white-space: nowrap;
}

/* ---------- DELFINES (assets/js/delfines.js) ------------------------
   En el inicio van por ENCIMA de todo (menos la cortina); en Contact,
   DEBAJO del texto. No bloquean ningún clic.                          */
.delfines { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 85; }
.delfines--debajo { z-index: 0; }
body[data-pagina="contact"] .contacto { position: relative; z-index: 1; }

@media (max-width: 700px) {
  .menu__nombre { font-size: var(--nombre-tam-movil); }
  .menu__nombre.menu__nombre--logo { font-size: 17px; }
  .menu__logo { width: var(--logo-ancho-movil); height: var(--logo-alto-movil); }
  .menu__categorias { width: var(--logo-ancho-movil); }
  .menu__opciones { top: 34%; gap: clamp(16px, 4.5vh, 38px); }
  .menu__opciones .menu__archivo { margin-top: clamp(20px, 6vh, 48px); }
  .menu__pie { bottom: calc(var(--margen) + env(safe-area-inset-bottom)); }
}

/* ---------- REJILLA FORMATO CINE (films, comercials y proyecto) ------
   Columnas y formato: ajustes.css sección 4                           */
.rejilla-cine {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: var(--hilo, 0px);
}
/* Línea entre fotos: el hueco (gap) deja ver el color de fondo de la
   rejilla, que es el color de la línea. Grosor y color: --hilo y
   --hilo-color (ajustes.css sección 4, o el gestor → pestaña Parrillas).
   Con grosor 0, cada foto pisa 1 px a la de al lado y a la de abajo: como
   las celdas miden medios píxeles (p. ej. 210,8), así nunca asoma una
   línea del fondo entre ellas (sobre todo en el móvil). */
.rejilla-cine {
  overflow: hidden;                    /* (overflow-x: clip no existe en Safari antiguo) */
  overflow-x: clip; overflow-y: visible;
  background: var(--hilo-color, #000);
}
.rejilla-cine > * {
  /* con línea: 0 · sin línea: -1px (para que no asome nada) */
  margin: 0 calc(min(var(--hilo, 0px), 1px) - 1px) calc(min(var(--hilo, 0px), 1px) - 1px) 0;
  position: relative; display: block; overflow: hidden;
  aspect-ratio: var(--formato, 1.85 / 1);
  background: var(--color-fondo);
}
.rejilla-cine img, .rejilla-cine video, .rejilla-cine iframe {
  width: 100%; height: 100%; object-fit: cover; border: 0;
}
.rejilla-cine img, .rejilla-cine video {
  opacity: 0; transform: scale(1.04);
  transition: opacity 1.2s var(--curva), transform var(--t-hover) var(--curva), filter var(--t-hover) var(--curva);
}
.rejilla-cine .visible img, .rejilla-cine .visible video { opacity: 1; transform: scale(1); }

/* ---------- FRANJA FIJA DE ENLACES ------------------------------------
   Centrada, con aire a los lados y cuatro veces la altura anterior.     */
.franja {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; column-gap: clamp(40px, 8vw, 160px);
  width: 100%; min-height: calc(var(--franja-tam) * 6.4);
  background: var(--franja-fondo); color: var(--franja-color);
  font-family: var(--franja-fuente); font-size: var(--franja-tam);
  line-height: 1.25; text-transform: uppercase; letter-spacing: .14em;
  padding: 1.4em clamp(24px, 5vw, 96px);
  text-align: center;
}
.franja a { white-space: nowrap; }
.franja a { transition: opacity .3s; }
.franja a:hover { opacity: .55; }
.franja__lado { display: flex; flex-wrap: wrap; align-items: center; gap: .8em 1.5em; min-width: 0; }
.franja__lado--izquierdo { justify-content: flex-end; }
.franja__lado--derecho { justify-content: flex-start; }
.franja__contacto { justify-self: center; }
@media (max-width: 700px) {
  /* Tres columnas iguales: Contact queda en el centro real de la pantalla. */
  .franja {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 0;
    padding-inline: clamp(20px, 6vw, 34px);
    font-size: min(var(--franja-tam), clamp(10px, 3vw, 13px));
    letter-spacing: .08em;
  }
  .franja__lado { justify-content: center; flex-wrap: nowrap; gap: 0; }
}

/* ---------- BOTÓN AUTO-SCROLL -------------------------------------- */
.boton-auto {
  position: fixed; z-index: 60;
  right: var(--margen); bottom: var(--margen);
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--menu-color); mix-blend-mode: var(--menu-mezcla);
  display: flex; align-items: center; gap: .6em;
}
.boton-auto::before {
  content: ""; width: .55em; height: .55em; border-radius: 50%;
  border: 1px solid currentColor; transition: background .3s;
}
.boton-auto.encendido::before { background: currentColor; animation: latido 1.6s infinite; }
@keyframes latido { 50% { opacity: .25; } }
@media (max-width: 700px) { .boton-auto { bottom: calc(var(--margen) + 2.2rem); } }

/* ---------- VISOR DE FOTOS (al pinchar una imagen) ------------------ */
.visor {
  position: fixed; inset: 0; z-index: 900;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--curva);
}
.visor.abierto { opacity: 1; pointer-events: auto; }
.visor img {
  max-width: calc(100vw - 2 * var(--margen));
  max-height: calc(100vh - 6rem);
  object-fit: contain; transition: opacity .35s;
}
.visor__cerrar, .visor__ant, .visor__sig {
  position: absolute; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  padding: 1rem; color: var(--color-tinta);
}
.visor__cerrar { top: var(--margen); right: var(--margen); }
.visor__ant { left: var(--margen); top: 50%; transform: translateY(-50%); }
.visor__sig { right: var(--margen); top: 50%; transform: translateY(-50%); }
.visor__cuenta {
  position: absolute; bottom: var(--margen); left: 50%; transform: translateX(-50%);
  font-size: .7rem; letter-spacing: .2em; color: var(--color-suave);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}