/* ============================================================================
   ALEJANDRO PELAEZ — HOJA DE ESTILOS

   No necesitas tocar este archivo para cambiar contenido. Todo el contenido
   vive en  contenido.js

   Si algun dia quieres ajustar el aspecto general, empieza por el bloque
   "VARIABLES" de aqui abajo: son los tres colores y la escala de espacio de
   la que sale todo lo demas.

   REGLAS DE DISENO QUE ESTE ARCHIVO SOSTIENE — no las rompas al editar:
     · Tres valores de color en toda la interfaz: vacio, ambar, texto
     · Sin bordes, sin sombras, sin esquinas redondeadas, sin tarjetas
     · El espacio entre elementos es el gesto principal
     · Todo movimiento es lento y desacelera largo. Nunca rebota
   ============================================================================ */


/* ============================================================================
   VARIABLES
   ============================================================================ */

:root {

  /* --- Los tres unicos colores ------------------------------------------- */

  /* El vacio. Negro con un sesgo minimo de temperatura calida: no es gris
     neutro y no es negro puro. Las fotos emergen de el.                     */
  --vacio:  #0A0806;

  /* El texto. Blanco roto tirando a calido, nunca blanco puro.              */
  --texto:  #E9E2D8;

  /* La luz. Un punto de ambar. Se usa en gotas, nunca en superficies.       */
  --ambar:  #F2A24C;

  /* Densidades del texto, derivadas del mismo color. No son colores nuevos. */
  --texto-medio: rgba(233, 226, 216, 0.62);

  /* El escalon mas bajo que TODAVIA SE LEE. 5.10:1 contra el vacio, cumple
     WCAG AA para texto (4.5:1) y para controles (3:1). Estuvo en 0.34 y daba
     2.58:1: fallaba las dos, y se notaba en las flechas del lightbox. No lo
     bajes.                                                                  */
  --texto-tenue: rgba(233, 226, 216, 0.55);

  /* Solo para lo que no hace falta leer: la ruta impresa en los marcadores de
     foto pendiente, que es andamiaje y desaparece cuando llegue la foto.    */
  --texto-decorativo: rgba(233, 226, 216, 0.34);

  --texto-casi:  rgba(233, 226, 216, 0.13);

  /* Superficie de los marcadores de imagen pendiente. */
  --marcador-fondo: #13100C;


  /* --- Tipografia --------------------------------------------------------- */

  --fuente-titulo: "Instrument Serif", Georgia, "Times New Roman", serif;
  --fuente-texto:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, sans-serif;

  /* El piso es min(2.9rem, 14vw) y no 2.9rem a secas: con el texto del
     telefono agrandado, 2.9rem crecia sin techo y "Alejandro" no cabia en
     390px. A tamano normal da exactamente lo mismo que antes. */
  --t-hero:    clamp(min(2.9rem, 14vw), 9.5vw, 7.5rem);
  --t-seccion: clamp(2rem, 5vw, 3.6rem);
  --t-titulo:  clamp(1.55rem, 3.4vw, 2.5rem);
  --t-cuerpo:  clamp(1rem, 0.45vw + 0.88rem, 1.16rem);
  --t-micro:   0.72rem;


  /* --- Escala de espacio (una sola escala, todo sale de aqui) ------------- */

  --e-1: 0.5rem;
  --e-2: 0.875rem;
  --e-3: 1.5rem;
  --e-4: 2.5rem;
  --e-5: 4rem;
  --e-6: clamp(4.5rem, 9vw, 8rem);
  --e-7: clamp(7rem, 15vw, 14rem);
  --e-8: clamp(9rem, 20vw, 18rem);

  --margen-lateral: clamp(1.5rem, 5vw, 5.5rem);
  --ancho-maximo: 1560px;


  /* --- Movimiento: lento, continuo, desaceleracion larga ------------------ */

  --orbita: cubic-bezier(0.16, 1, 0.3, 1);
  --lento:  1.15s;
  --muy-lento: 1.8s;
}


/* ============================================================================
   BASE
   ============================================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--vacio);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: var(--t-cuerpo);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Mientras el sitio se dibuja, la pagina se queda en negro. Evita el parpadeo
   de contenido sin estilo al abrir el archivo directamente.                  */
body:not(.listo) main { opacity: 0; }
main { transition: opacity var(--muy-lento) var(--orbita); }

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

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.6s var(--orbita), opacity 0.6s var(--orbita);
}

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

h1, h2, h3, p, figure, ul { margin: 0; padding: 0; }
ul { list-style: none; }

::selection { background: var(--ambar); color: var(--vacio); }

:focus-visible {
  outline: 1px solid var(--ambar);
  outline-offset: 6px;
}


/* --- Utilidades ---------------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* "Saltar al contenido" es lo primero que enfoca Tab. Oculto y con foco no se
   veia: quien navega con teclado pulsaba Tab y no pasaba nada visible
   (WCAG 2.4.7). Solo aparece para quien lo necesita, y solo mientras tiene
   el foco. */
.enlace-salto:focus {
  position: fixed;
  top: var(--e-2);
  left: var(--margen-lateral);
  z-index: 60;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--e-2);
  background: var(--vacio);
  color: var(--ambar);
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Versalitas con aire: la distancia tambien se lee en el tipo. */
.micro {
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  font-weight: 500;
}


/* ============================================================================
   CAMPO DE ESTRELLAS
   Un canvas fijo detras de todo, a opacidad muy baja y con deriva casi
   imperceptible. No es decoracion: es profundidad. Si se nota, esta mal.
   ============================================================================ */

#estrellas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 3s linear;
}
#estrellas.encendido { opacity: 1; }

/* Todo el contenido va por encima del campo. */
.encabezado, main, .pie, .lightbox { position: relative; z-index: 1; }


/* ============================================================================
   ENCABEZADO Y NAVEGACION
   ============================================================================ */

.encabezado {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  padding-block: var(--e-3);
  /* Solo el fondo se anima.  padding  es propiedad de disposicion: animarla
     recalcula geometria en cada cuadro, y esto se dispara al scrollear, que
     es el peor momento. El encogimiento pasa de una y no se nota, porque el
     fondo sigue apareciendo en 1,15 s. */
  transition: background-color var(--lento) var(--orbita);
}

.encabezado--posado {
  background: color-mix(in srgb, var(--vacio) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-block: var(--e-2);
}

.encabezado__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
}

.encabezado__marca {
  /* 44px de area tactil, igual que la navegacion. */
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--texto);
  font-weight: 500;
  white-space: nowrap;
}

/* En la portada la marca del encabezado sobra: el nombre ya esta gigante. */
.encabezado__marca { opacity: 0; transition: opacity var(--lento) var(--orbita); }
.encabezado--posado .encabezado__marca,
.encabezado--interior .encabezado__marca { opacity: 1; }

.nav {
  display: flex;
  gap: clamp(var(--e-3), 3vw, var(--e-5));
  align-items: baseline;
}

.nav__enlace {
  /* El area tactil (44px, WCAG 2.5.8) la da este contenedor; el texto y el
     punto activo viven en .nav__enlace-texto, que sigue midiendo justo lo
     que el texto ocupa, como antes. Asi el area de toque crece sin mover ni
     agrandar nada visible. */
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-medio);
  font-weight: 500;
}

.nav__enlace:hover,
.nav__enlace:focus-visible { color: var(--texto); }

.nav__enlace-texto { position: relative; }

/* El marcador activo es un punto de luz. Nunca un subrayado, nunca un boton. */
.nav__enlace-texto::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.35em;
  width: 3px; height: 3px;
  margin-left: -1.5px;
  background: var(--ambar);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.9s var(--orbita), transform 0.9s var(--orbita);
}
.nav__enlace[aria-current="true"] .nav__enlace-texto::after { opacity: 1; transform: scale(1); }


/* --- Volver (paginas interiores) ----------------------------------------- */

.volver {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  gap: var(--e-2);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  font-weight: 500;
}
.volver:hover { color: var(--ambar); }
.volver::before { content: "—"; color: var(--ambar); }


/* ============================================================================
   HERO
   ============================================================================ */

/* El hero NO ocupa la pantalla completa a proposito. Deja asomar el borde
   superior de la rejilla de categorias: ese corte es lo que invita a bajar,
   sin necesidad de una flecha ni de un "ver mas". */
.hero {
  position: relative;
  min-height: 78svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-block-end: var(--e-5);
}

.hero__medio {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__medio img,
.hero__medio video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 2.4s var(--orbita), transform 6s var(--orbita);
}
.hero__medio img.cargada,
.hero__medio video.cargada { opacity: 1; transform: scale(1); }

/* La imagen no esta puesta sobre un fondo: se hunde en el. */
.hero__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top,
      var(--vacio) 0%,
      color-mix(in srgb, var(--vacio) 72%, transparent) 6%,
      color-mix(in srgb, var(--vacio) 34%, transparent) 22%,
      color-mix(in srgb, var(--vacio) 22%, transparent) 45%,
      color-mix(in srgb, var(--vacio) 16%, transparent) 68%,
      color-mix(in srgb, var(--vacio) 50%, transparent) 100%),
    radial-gradient(120% 90% at 50% 45%,
      transparent 40%,
      color-mix(in srgb, var(--vacio) 60%, transparent) 100%),
    /* Sombra local bajo el texto. Elipse estrecha anclada abajo a la izquierda:
       le da fondo al nombre y a la tagline sin oscurecer el centro derecha,
       que es donde esta la camara. */
    radial-gradient(58% 48% at 15% 86%,
      color-mix(in srgb, var(--vacio) 70%, transparent) 0%,
      transparent 72%);
}

.hero__texto {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero__nombre {
  font-family: var(--fuente-titulo);
  font-size: var(--t-hero);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.015em;
  margin-bottom: var(--e-3);
}

.hero__tagline {
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  color: var(--texto-medio);
  max-width: 30ch;
  line-height: 1.5;
}

.hero__ciudad {
  margin-top: var(--e-4);
}
.hero__ciudad::before {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  background: var(--ambar);
  vertical-align: 0.35em;
  margin-right: 0.9em;
}

/* EL HERO EN PANTALLA ANGOSTA
   VA DESPUES de las reglas de arriba a proposito: mismo selector, misma
   especificidad, gana el ultimo. Si este bloque se sube, la regla base lo
   pisa y estos ajustes dejan de existir en silencio. Ya paso una vez.

   El contenedor pasa a ser vertical y la foto es 3:2, asi que cover recorta
   por los lados. Tres ajustes encadenados:

   1. El encuadre se corre al 86% para que el camarografo entre completo.
   2. El texto sube: anclado abajo caia sobre la camara, y el tercio
      superior quedaba en negro sin usar.
   3. El tagline se angosta. Al correr la foto la cabeza se acerca a la
      columna del texto: medido, lo iluminado empieza en x 191, asi que la
      columna util es de 151px.                                            */
@media (max-width: 760px) {
  .hero__medio img,
  .hero__medio video { object-position: 86% center; }

  .hero {
    align-items: flex-start;
    padding-block: 5.9rem var(--e-5);
  }

  .hero__tagline { max-width: 9.4rem; }

  .hero__velo {
    background:
      linear-gradient(to bottom,
        color-mix(in srgb, var(--vacio) 74%, transparent) 0%,
        color-mix(in srgb, var(--vacio) 46%, transparent) 34%,
        color-mix(in srgb, var(--vacio) 18%, transparent) 62%,
        color-mix(in srgb, var(--vacio) 40%, transparent) 88%,
        var(--vacio) 100%),
      radial-gradient(82% 40% at 10% 22%,
        color-mix(in srgb, var(--vacio) 60%, transparent) 0%,
        transparent 76%);
  }
}



/* ============================================================================
   SECCIONES
   ============================================================================ */

.seccion {
  padding-block: var(--e-7);
  /* Respaldo para secciones sin rotulo, como la rejilla de Trabajo. */
  scroll-margin-top: 5.5rem;
}
.seccion--interior { padding-block: calc(var(--e-7) + var(--e-5)) var(--e-7); }

/* La rejilla arranca pegada al hero: es lo primero que tiene que registrar. */
.seccion--rejilla { padding-block: var(--e-5) var(--e-7); }

.seccion__rotulo {
  margin-bottom: var(--e-6);
  /* Al saltar a una seccion desde el menu, el navegador deja este espacio
     por encima del rotulo. Es la altura del encabezado ya encogido (lleva
     la clase --posado en cuanto hay scroll) mas aire. Se resuelve en el
     momento del salto, asi que no depende de cuando midamos.            */
  scroll-margin-top: 5.5rem;
}

.seccion__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--t-seccion);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-top: var(--e-2);
}


/* ============================================================================
   REJILLA DE CATEGORIAS (portada)

   Las cuatro disciplinas visibles a la vez, sin titulo de seccion. El sitio no
   dice "lo que hago": lo muestra. En celular y tablet van 2x2, para que las
   cuatro caben en una pantalla y quien llega desde Instagram entienda el
   perfil sin bajar. En escritorio van las cuatro en una sola fila: cuatro
   verticales en linea leen editorial y mantienen la portada compacta.

   La forma de la celda la decide el CSS, no contenido.js: 4:5 en todos los
   anchos. Todo el material de este portafolio es vertical, y un recorte
   horizontal lo mutila. Las portadas se exportan en 4:5 y se recortan solas.
   ============================================================================ */

.rejilla {
  display: grid;
  /* minmax(0, 1fr) y no 1fr: con 1fr un titulo largo con el texto agrandado
     empujaba la columna fuera de la pantalla. Aplica a todas las rejillas. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 3vw, 3rem);
}

/* Escritorio: las cuatro en una sola fila */
@media (min-width: 1024px) {
  .rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.rejilla__celda { display: block; }

/* La proporcion de la rejilla. El resto de proporciones del sitio las declara
   contenido.js y las aplica js/sitio.js: "4:5" vertical (la de este
   portafolio), "3:2" horizontal, "2:3" vertical, "1:1" cuadrada y "16:9"
   panoramica. */
.rejilla__medio {
  position: relative;
  overflow: hidden;
  background: var(--marcador-fondo);
  aspect-ratio: 4 / 5;
}

.rejilla__medio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.9);
  /* El tiempo del hover NO se escribe aqui: vive en  img.fundido , al final
     de este archivo. Ver la nota que hay alli. Si algun dia esta pieza
     necesita un tiempo propio, hay que subirle la especificidad:
     escribir  .galeria__pieza img.fundido  y no  .galeria__pieza img .   */
}

/* Capas del pase. Se apilan sobre la portada; la que entra se pone POR ENCIMA
   de la anterior en vez de reemplazarla, asi que en ningun momento se ven las
   dos a medias y no se asoma la portada por debajo.

   El selector lleva .rejilla__medio a proposito: sin el pierde especificidad
   contra  .rejilla__medio img  y la opacidad cambia de golpe, sin fundido.  */
.rejilla__medio .rejilla__capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1);
  opacity: 0;
  transition: opacity 0.7s var(--orbita), transform 2.6s var(--orbita);
  pointer-events: none;
}
.rejilla__medio .rejilla__capa.visible { opacity: 1; }

.rejilla__titulo {
  overflow-wrap: break-word;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.15rem, 2.1vw, 1.85rem);
  font-weight: 400;
  line-height: 1.15;
  margin-top: var(--e-2);
  transition: color 0.9s var(--orbita);
}

@media (hover: hover) {
  .rejilla__celda:hover .rejilla__medio img { filter: brightness(1); transform: scale(1.02); }
  .rejilla__celda:hover .rejilla__titulo { color: var(--ambar); }
}


/* ============================================================================
   PROYECTOS DESTACADOS (portada)
   ============================================================================ */

.proyectos {
  display: flex;
  flex-direction: column;
  gap: var(--e-7);
}

.proyecto-tarjeta { display: block; }

.proyecto-tarjeta__medio {
  position: relative;
  overflow: hidden;
  background: var(--marcador-fondo);
  max-height: 76vh;
}

.proyecto-tarjeta__medio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.88);
  /* El tiempo del hover NO se escribe aqui: vive en  img.fundido , al final
     de este archivo. Ver la nota que hay alli. Si algun dia esta pieza
     necesita un tiempo propio, hay que subirle la especificidad:
     escribir  .galeria__pieza img.fundido  y no  .galeria__pieza img .   */
}

.proyecto-tarjeta__info { margin-top: var(--e-3); }

.proyecto-tarjeta__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--t-titulo);
  font-weight: 400;
  line-height: 1.1;
  transition: color 0.9s var(--orbita);
}

.proyecto-tarjeta__meta {
  margin-top: var(--e-1);
  color: var(--texto-tenue);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.proyecto-tarjeta__meta span + span::before {
  content: "·";
  color: var(--ambar);
  margin-inline: 0.75em;
}

@media (hover: hover) {
  .proyecto-tarjeta:hover .proyecto-tarjeta__medio img { filter: brightness(1); transform: scale(1.02); }
  .proyecto-tarjeta:hover .proyecto-tarjeta__titulo { color: var(--ambar); }
}

/* Portada cuadrada o vertical: se muestra completa y contenida, con los datos
   al lado. Una portada 16:9 va a ancho completo; estas no, porque recortarlas
   para llenar el ancho las mutila. */
@media (min-width: 900px) {
  .proyecto-tarjeta--disco {
    display: grid;
    grid-template-columns: minmax(0, 27rem) minmax(0, auto);
    justify-content: start;
    align-items: center;
    gap: clamp(2.5rem, 4vw, 4.5rem);
  }
  .proyecto-tarjeta--disco .proyecto-tarjeta__medio { max-height: none; }
  .proyecto-tarjeta--disco .proyecto-tarjeta__info { margin-top: 0; }
}
.proyecto-tarjeta__roles {
  list-style: none;
  margin-top: var(--e-3);
  color: var(--texto-medio);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 2.1;
}

@media (min-width: 900px) {
  .proyectos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--e-6) clamp(3rem, 6vw, 7rem);
  }
  /* El primero ocupa el ancho completo: jerarquia por escala, no por adorno. */
  .proyectos > *:first-child { grid-column: 1 / -1; }
}


/* ============================================================================
   GALERIA
   ============================================================================ */

.galeria {
  display: grid;
  grid-template-columns: 1fr;
  /* start, no stretch. Con stretch la pieza toma la altura de la fila y eso
     pisa el aspect-ratio: una foto 4:5 al lado de una 2:3 se estiraba a 2:3 y
     object-fit: cover la recortaba en silencio, sin verse como error: se veia
     como una foto mal encuadrada. Hoy todas las galerias van a una sola
     proporcion y no cambia nada, pero si algun dia se mezclan de nuevo, con
     start manda la proporcion declarada en contenido.js. No devolver a stretch. */
  align-items: start;
  gap: var(--e-6);
}

@media (min-width: 760px) {
  .galeria {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(3rem, 6vw, 7rem) clamp(3rem, 6vw, 7rem);
  }
  /* Rejilla alineada: todas las piezas arrancan en la misma linea de cada fila. */
}

/* --- Galeria de tres columnas -----------------------------------------------
   Para categorias con muchas imagenes de sujeto cercano, como retrato: un
   rostro se lee bien en pequeno, un plano abierto no. Se activa poniendo
   columnas: 3  en la categoria, dentro de contenido.js                      */
@media (min-width: 1024px) {
  .galeria--tres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(3rem, 5vw, 5.5rem) clamp(2rem, 3vw, 3.5rem);
  }
  /* Una foto donde el entorno pesa tanto como la persona se gana dos columnas */
  .galeria--tres .galeria__pieza--ancho { grid-column: span 2; }
}

.galeria__pieza {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--marcador-fondo);
  cursor: zoom-in;
  display: block;
}

.galeria__pieza img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.92);
  /* El tiempo del hover NO se escribe aqui: vive en  img.fundido , al final
     de este archivo. Ver la nota que hay alli. Si algun dia esta pieza
     necesita un tiempo propio, hay que subirle la especificidad:
     escribir  .galeria__pieza img.fundido  y no  .galeria__pieza img .   */
}

/* Credito del artista. Por defecto visible: en pantallas tactiles no hay
   hover y el nombre tiene que leerse igual. En escritorio se esconde y
   aparece al pasar el cursor.                                             */
.galeria__credito {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3.2em 1em 1em;
  text-align: left;
  /* Mas grande que el resto de los micro-rotulos del sitio: este no es una
     etiqueta decorativa, es la credencial. Y con menos letterspacing, porque
     el tracking alto compensa tamanos chicos y a este ya no le hace falta.

     El credito mas largo ("Grupo Firme · Pascual Guerrero") mide casi lo
     mismo que la columna en celular. En vez de dejarlo al filo de un pixel,
     se permite que pase a dos lineas: balance reparte las dos parejas y
     line-height las mantiene juntas. Dos lineas se leen bien; una linea
     cortada a la mitad, no.                                               */
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  line-height: 1.45;
  text-wrap: balance;
  text-transform: uppercase;
  color: var(--texto);
  /* El 88% se diluia antes de llegar a la linea de arriba del texto.
     Medido sobre los 44 creditos a 390px: dos quedaban en 4,36:1 y 4,39:1
     sobre foto clara. El escalon del 70% a media altura sostiene el fondo
     donde esta el texto, sin oscurecer mas la foto por encima. */
  background: linear-gradient(to top,
    color-mix(in srgb, var(--vacio) 88%, transparent) 0%,
    color-mix(in srgb, var(--vacio) 70%, transparent) 50%,
    transparent 100%);
  pointer-events: none;
}

@media (hover: hover) {
  /* --crecer lo pone el JS en cada pieza, calculado desde su proporcion y el
     numero de columnas, para que todas las galerias recorran los mismos
     pixeles en los mismos 2.6 s. Ver  crecerAlPasar  en js/sitio.js. El 1.015
     de respaldo es el valor de la galeria de referencia (2 columnas, 4:5). */
  .galeria__pieza:hover img {
    filter: brightness(1.02);
    transform: scale(var(--crecer, 1.015));
  }

  .galeria__credito {
    opacity: 0;
    transform: translateY(0.4rem);
    transition: opacity 0.5s var(--orbita), transform 0.5s var(--orbita);
  }
  .galeria__pieza:hover .galeria__credito,
  .galeria__pieza:focus-visible .galeria__credito {
    opacity: 1;
    transform: none;
  }
}


/* ============================================================================
   VIDEO
   La miniatura carga sola. El reproductor se inserta solo al hacer click.
   ============================================================================ */

.videos {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--e-6);
  margin-bottom: var(--e-7);
}

@media (min-width: 760px) {
  .videos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(3rem, 6vw, 6rem);
  }
}

.video { display: block; }

.video__marco {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--marcador-fondo);
  cursor: pointer;
}

.video__marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.78);
  /* El tiempo del hover NO se escribe aqui: vive en  img.fundido , al final
     de este archivo. Ver la nota que hay alli. Si algun dia esta pieza
     necesita un tiempo propio, hay que subirle la especificidad:
     escribir  .galeria__pieza img.fundido  y no  .galeria__pieza img .   */
}

.video__marco iframe,
.video__marco video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* El disparador es un punto de luz, no un boton de reproductor. */
.video__disparador {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/* Cuadrado y sin halo: el mismo punto de luz del marcador de la navegacion
   y de los creditos, solo mas grande. El circulo con sombra era la unica
   excepcion del sitio a "sin sombras, sin esquinas redondeadas". */
.video__punto {
  width: 9px; height: 9px;
  background: var(--ambar);
  transition: transform 1.2s var(--orbita);
}

.video__titulo {
  margin-top: var(--e-3);
  font-size: 0.95rem;
  color: var(--texto-medio);
  transition: color 0.9s var(--orbita);
}

@media (hover: hover) {
  .video:hover .video__marco img { filter: brightness(0.95); transform: scale(1.015); }
  .video:hover .video__punto { transform: scale(1.35); }
  .video:hover .video__titulo { color: var(--texto); }
}


/* ============================================================================
   PAGINA DE PROYECTO
   ============================================================================ */

.proyecto__portada {
  width: 100%;
  overflow: hidden;
  background: var(--marcador-fondo);
  margin-bottom: var(--e-6);
  max-height: 78vh;
}
.proyecto__portada img { width: 100%; height: 100%; object-fit: cover; }

.proyecto__cabecera {
  display: grid;
  gap: var(--e-5);
  margin-bottom: var(--e-7);
}

@media (min-width: 900px) {
  .proyecto__cabecera {
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(4rem, 9vw, 10rem);
    align-items: start;
  }
}

.proyecto__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--t-seccion);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin-top: var(--e-2);
}

.proyecto__contexto {
  color: var(--texto-medio);
  max-width: 54ch;
}

/* Titulo de apartado dentro de un proyecto (Videos, Fotografia). Mas chico
   que el titulo del proyecto y mas grande que un micro-rotulo: su trabajo es
   dividir, no encabezar. La linea a la izquierda lo ancla al margen sin
   necesidad de una regla que cruce toda la pagina.                        */
.proyecto__apartado {
  margin-top: var(--e-7);
  margin-bottom: var(--e-4);
  font-family: var(--fuente-texto);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-medio);
  display: flex;
  align-items: center;
  gap: 1.1em;
}
.proyecto__apartado::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: var(--ambar);
  flex: none;
}

.proyecto__roles { margin-top: var(--e-4); }

.proyecto__roles li {
  font-size: 0.95rem;
  color: var(--texto-tenue);
  padding-block: 0.35em;
}
/* Un punto de luz por credito. Una estrella es un punto, no un grafico. */
.proyecto__roles li::before {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  background: var(--ambar);
  vertical-align: 0.32em;
  margin-right: 1em;
}


/* ============================================================================
   SOBRE MI
   ============================================================================ */

.sobre {
  display: grid;
  gap: var(--e-5);
  align-items: center;
}

@media (min-width: 900px) {
  .sobre {
    grid-template-columns: 0.85fr 1fr;
    gap: clamp(4rem, 9vw, 10rem);
  }
}

.sobre__foto {
  overflow: hidden;
  background: var(--marcador-fondo);
}
.sobre__foto img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.94);
}

.sobre__bio {
  font-size: clamp(1.08rem, 1.5vw, 1.35rem);
  line-height: 1.62;
  color: var(--texto-medio);
  max-width: 46ch;
}


/* ============================================================================
   CONTACTO Y PIE
   ============================================================================ */

.contacto__enlaces {
  display: flex;
  flex-direction: column;
  /* e-1 y no e-3: cada enlace ya suma ~15px de caja por el min-height de
     abajo, asi que la distancia visible entre lineas queda como estaba. */
  gap: var(--e-1);
  margin-top: var(--e-5);
}

.contacto__enlace {
  /* 44px de area tactil: es el ultimo paso antes de escribirle. */
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  line-height: 1.15;
  color: var(--texto-medio);
  width: fit-content;
}
.contacto__enlace:hover { color: var(--ambar); }

.contacto__nota {
  margin-top: var(--e-5);
  color: var(--texto-tenue);
  max-width: 40ch;
  font-size: 0.95rem;
}

.pie {
  padding-block: var(--e-5) var(--e-4);
}
.pie__fila {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
}


/* ============================================================================
   MARCADOR DE IMAGEN PENDIENTE
   Se muestra cuando el campo esta vacio o el archivo todavia no existe.
   Imprime encima la ruta exacta y la proporcion que necesita esa foto.
   ============================================================================ */

.marcador {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--e-2);
  padding: var(--e-3);
  text-align: center;
  background:
    radial-gradient(120% 100% at 50% 30%,
      color-mix(in srgb, var(--texto) 4%, transparent) 0%,
      transparent 70%),
    var(--marcador-fondo);
}

.marcador__ruta {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.62rem, 1.5vw, 0.78rem);
  letter-spacing: 0.04em;
  color: var(--texto-decorativo);
  word-break: break-all;
  max-width: 90%;
}

.marcador__proporcion {
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ambar);
  opacity: 0.75;
}


/* ============================================================================
   APARICION AL BAJAR
   Las imagenes aparecen con fundido desde el negro, jamas con un salto.
   ============================================================================ */

.aparece {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--muy-lento) var(--orbita),
              transform var(--muy-lento) var(--orbita);
  /* will-change se pone desde el JS (revisarPendientes, en js/sitio.js) justo
     antes de agregar .visible, y se quita cuando termina la transicion. Aqui
     en la regla base quedaba encendido para siempre despues de aparecer una
     sola vez: docenas de capas de composicion que nunca se liberan. */
}
.aparece.visible { opacity: 1; transform: none; }

/* Las fotos entran desde el negro, sin desplazarse. */
/* UN SOLO SITIO PARA EL TIEMPO DE LAS FOTOS.
   Esta clase la lleva toda foto creada por  crearMedio  (galeria, rejilla del
   home, tarjetas de proyecto y marcos de video). El hero y el lightbox no.

   ⚠️ Por que esta todo junto aca: antes esta regla decia solo
   transition: opacity, y como  transition  es una propiedad abreviada, eso
   BORRABA el filter y el transform que declaraban  .galeria__pieza img ,
   .rejilla__medio img ,  .proyecto-tarjeta__medio img  y  .video__marco img .
   Misma especificidad (0,1,1) y esta va despues, asi que ganaba.
   Resultado: el hover de todas las fotos del sitio saltaba de golpe, sin
   transicion. No se veia como un error; se veia como un sitio brusco.
   Al declarar las tres juntas, el hover vuelve a durar lo que decia el diseno.
   No volver a partir esta linea en varias reglas del mismo peso.            */
img.fundido {
  opacity: 0;
  transition: opacity 1.6s var(--orbita),
              filter 1.4s var(--orbita),
              transform 2.6s var(--orbita);
}
img.fundido.cargada { opacity: 1; }


/* ============================================================================
   LIGHTBOX
   ============================================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  /* Una sola fila, la escena. La barra y el pie salen del flujo y se
     superponen: todo el material es vertical 4:5, y el alto es lo mas valioso
     que hay. Apilados en filas propias se comian 178px.                     */
  grid-template-rows: 1fr;
  /* Sin backdrop-filter: detras de un fondo al 97% el desenfoque aportaba
     menos del 3% visible y costaba un filtro de pantalla completa en cada
     cuadro del fundido. */
  background: color-mix(in srgb, var(--vacio) 97%, transparent);
  opacity: 0;
  visibility: hidden;

  /* visibility NO se interpola: se conmuta con retardo.
       al ABRIR  -> retardo 0s, pasa a visible en el mismo cuadro
       al CERRAR -> retardo  --lento , espera a que termine el fundido

     Por que importa mas alla de lo visual: un elemento dentro de un subarbol
     con  visibility: hidden  NO puede recibir foco. Con  visibility --lento ,
     el navegador tardaba ~100 ms en conmutarla, y para entonces el  focus()
     del boton "Cerrar" ya habia corrido sin efecto: el foco se quedaba en
     <body> y el lector de pantalla no anunciaba el dialogo. Medido. */
  transition: opacity var(--lento) var(--orbita),
              visibility 0s linear var(--lento);

  /* Cerrado no recibe clicks. Hace falta aparte de  visibility  porque
     durante el fundido de salida el lightbox sigue siendo visible 1,15 s:
     sin esto, la escena vacia se queda encima y se traga los clicks sobre la
     galeria todo ese rato. Medido: la foto de abajo no respondia hasta los
     1200 ms despues de cerrar. */
  pointer-events: none;
}
.lightbox.abierto {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--lento) var(--orbita),
              visibility 0s linear 0s;
}

/* La barra y el pie flotan sobre la foto. El degradado los deja legibles sobre
   una foto clara sin oscurecer la imagen entera. El  pointer-events  deja
   pasar el click por la parte vacia: solo los botones lo reciben, asi que
   tocar al lado del contador sigue cerrando el lightbox.                    */
.lightbox__barra {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--e-3) var(--margen-lateral) var(--e-6);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--vacio) 82%, transparent) 0,
    color-mix(in srgb, var(--vacio) 80%, transparent) 4.5rem,
    transparent 100%);
  pointer-events: none;
}
.lightbox__barra > * { pointer-events: auto; }

/* Los tres controles usan --texto-medio, no --texto-tenue. Desde que la foto
   ocupa todo el alto, estos controles ya no estan sobre el fondo plano sino
   sobre la imagen, y --texto-tenue esta calibrado contra el vacio. Con 0.62
   el degradado puede ser mas suave (80% en vez de 87%) y aun asi pasan AA
   sobre foto blanca: 4.51:1. Sobre foto oscura dan 6.25:1.                 */
.lightbox__contador {
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  color: var(--texto-medio);
  font-variant-numeric: tabular-nums;
}
.lightbox__contador b { color: var(--ambar); font-weight: 500; }

.lightbox__cerrar {
  /* 44px de area tactil (WCAG 2.5.8): es el control con el que se sale de
     una pantalla completa, no puede fallar. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding-inline: var(--e-2);
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--texto-medio);
}
.lightbox__cerrar:hover { color: var(--ambar); }

/* Flex, no grid. Con  display: grid  sin  grid-template-rows  explicito la
   fila implicita se dimensiona por contenido, asi que el  max-height: 100%
   de la imagen resolvia contra una altura automatica: referencia circular que
   colapsa a  auto  y deja la foto desbordada (898px de mas en 1440x900).
   Con flex el porcentaje resuelve contra el alto definido del contenedor.  */
.lightbox__credito {
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-medio);
  margin-inline: auto;
  padding-inline: 1.5em;
}

.lightbox__escena {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--margen-lateral);
  min-height: 0;
  overflow: hidden;
  /* Deja el gesto horizontal (deslizar para cambiar de foto, en js/sitio.js)
     en manos del JS; el vertical lo resuelve el navegador. */
  touch-action: pan-y;
}

.lightbox__escena img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.85s var(--orbita);
}
.lightbox__escena img.cargada { opacity: 1; }

.lightbox__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-5);
  padding: var(--e-6) var(--margen-lateral) var(--e-4);
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--vacio) 82%, transparent) 0,
    color-mix(in srgb, var(--vacio) 80%, transparent) 6.5rem,
    transparent 100%);
  pointer-events: none;
}
.lightbox__pie > * { pointer-events: auto; }

.lightbox__flecha {
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--texto-medio);
  padding: var(--e-2) var(--e-2);
}
.lightbox__flecha:hover { color: var(--ambar); }
.lightbox__flecha[disabled] { opacity: 0.25; cursor: default; }

body.lightbox-abierto { overflow: hidden; }


/* ============================================================================
   RESPALDO SIN color-mix()
   Safari anterior a 16.2 no entiende color-mix() y descarta la declaracion
   entera: el lightbox quedaba transparente, el credito sin fondo y el velo
   del hero desaparecia debajo del nombre. Aqui, y SOLO aqui, el vacio se
   escribe a mano: 10, 8, 6 es --vacio. Si cambias --vacio, cambia estos
   numeros. Va antes del bloque CELULAR para que sus ajustes sigan ganando.
   ============================================================================ */

@supports not (color: color-mix(in srgb, red, blue)) {
  .lightbox { background: rgba(10, 8, 6, 0.97); }
  .encabezado--posado { background: rgba(10, 8, 6, 0.88); }
  .galeria__credito {
    background: linear-gradient(to top,
      rgba(10, 8, 6, 0.88) 0%, rgba(10, 8, 6, 0.7) 50%, rgba(10, 8, 6, 0) 100%);
  }
  .lightbox__barra {
    background: linear-gradient(to bottom,
      rgba(10, 8, 6, 0.82) 0, rgba(10, 8, 6, 0.8) 4.5rem, rgba(10, 8, 6, 0) 100%);
  }
  .lightbox__pie {
    background: linear-gradient(to top,
      rgba(10, 8, 6, 0.82) 0, rgba(10, 8, 6, 0.8) 6.5rem, rgba(10, 8, 6, 0) 100%);
  }
  .hero__velo {
    background:
      linear-gradient(to top, var(--vacio) 0%, rgba(10, 8, 6, 0.72) 6%,
        rgba(10, 8, 6, 0.34) 22%, rgba(10, 8, 6, 0.22) 45%,
        rgba(10, 8, 6, 0.16) 68%, rgba(10, 8, 6, 0.5) 100%),
      radial-gradient(58% 48% at 15% 86%, rgba(10, 8, 6, 0.7) 0%, rgba(10, 8, 6, 0) 72%);
  }
  @media (max-width: 760px) {
    .hero__velo {
      background:
        linear-gradient(to bottom, rgba(10, 8, 6, 0.74) 0%, rgba(10, 8, 6, 0.46) 34%,
          rgba(10, 8, 6, 0.18) 62%, rgba(10, 8, 6, 0.4) 88%, var(--vacio) 100%),
        radial-gradient(82% 40% at 10% 22%, rgba(10, 8, 6, 0.6) 0%, rgba(10, 8, 6, 0) 76%);
    }
  }
}


/* ============================================================================
   CELULAR
   La mayoria del trafico llega desde Instagram, en telefono. Esta parte no es
   un remiendo: es el caso principal.
   ============================================================================ */

@media (max-width: 620px) {

  /* En pantalla angosta la marca del encabezado sobra: el nombre ya esta
     grande en la portada y la navegacion necesita todo el ancho.           */
  .encabezado__marca { display: none; }

  .encabezado__fila { justify-content: flex-start; }

  .nav {
    width: 100%;
    justify-content: space-between;
    gap: var(--e-2);
    /* A tamano normal cabe en una linea hasta 320px (medido). Con el texto
       del telefono agrandado pasa a dos filas en vez de dejar "Sobre mi" y
       "Contacto" fuera de la pantalla, donde overflow-x los esconde. */
    flex-wrap: wrap;
    row-gap: 0;
  }

  .nav__enlace {
    font-size: 0.64rem;
    letter-spacing: 0.14em;
  }

  /* Un correo largo se parte en vez de desbordar la pantalla. */
  .contacto__enlace {
    overflow-wrap: anywhere;
    max-width: 100%;
  }

  /* En celular los controles vuelven a filas propias: superpuestos sobre una
     pantalla angosta estorban al tocar, y ahi la foto ya cabe entera.       */
  .lightbox { grid-template-rows: auto 1fr auto; }

  .lightbox__barra,
  .lightbox__pie {
    position: static;
    background: none;
    pointer-events: auto;
  }

  .lightbox__barra { padding: var(--e-3) var(--margen-lateral); }

  .lightbox__pie {
    gap: var(--e-3);
    padding: var(--e-3) var(--margen-lateral) var(--e-4);
  }

  /* Los marcadores de foto pendiente siguen siendo legibles en pantalla chica */
  .marcador { padding: var(--e-2); }
}

/* Telefonos muy angostos: la navegacion aprieta un poco mas y sigue en una linea */
@media (max-width: 380px) {
  .nav__enlace { font-size: 0.58rem; letter-spacing: 0.1em; }
  /* A 320px los cuatro enlaces y tres espacios de e-2 sumaban exactamente el
     ancho util (272px): medio pixel de redondeo los partia en dos filas. Con
     e-1 sobra aire, y como la fila es space-between se ve igual. */
  .nav { column-gap: var(--e-1); }
}


/* ============================================================================
   ACCESIBILIDAD: si el visitante pidio menos movimiento, se lo damos.
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Se acortan, no se anulan: el cambio de color al pasar por un enlace, la
     aparicion del credito sobre la foto y la apertura del lightbox siguen
     avisando que algo paso, solo que ya. Lo que SI se apaga del todo es lo
     que desplaza o escala a la vista: el zoom de las fotos al pasar el
     cursor, el deslizamiento del credito, el zoom de entrada del video del
     hero. Quien pidio menos movimiento pidio eso, no quedarse sin senales
     de estado. */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    transition-delay: 0ms !important;
  }

  .aparece { opacity: 1; }
  .aparece,
  img.fundido,
  .hero__medio img,
  .hero__medio video,
  .video__punto,
  .nav__enlace-texto::after,
  .galeria__credito {
    transform: none !important;
  }

  .galeria__pieza:nth-child(3n + 1) { margin-top: 0; }
}