/* ===========================================================================
 * public/css/estilos.css
 * ---------------------------------------------------------------------------
 * EL DISEÑO DE LA WEB PÚBLICA.
 *
 * ⭐ ESTA HOJA ES SOLO DE LA WEB PÚBLICA.
 *   Lo compartido con el panel (variables, reset, tipografía, historial de
 *   cambios, avisos) está en `base.css`. Así una regla de aquí nunca se
 *   cuela en el panel (ya pasó: ver el AGENTS.md).
 *
 *   · index.html → base.css + estilos.css
 *   · admin.html → base.css + admin.css
 *
 * LA IDEA
 *   "Editorial nocturno": negro, mucho aire, un serif de alto contraste para
 *   el nombre y las fotos como protagonistas. La interfaz desaparece: solo
 *   están el menú (arriba, en el centro, fijo) y los pies de foto.
 *
 * LAS REGLAS DEL DISEÑO
 *   · El contenido manda: la tipografía y el color son DISCRETOS.
 *   · Nada de sombras, ni bordes redondeados llamativos, ni degradados de
 *     color: solo transiciones suaves y velos oscuros sobre las fotos.
 *   · El movimiento es contenido, no decoración: cada elemento aparece
 *     cuando llega a su sitio (y se para si el visitante lo ha pedido).
 *
 * ⭐ EL MENÚ FIJO
 *   Arriba, CENTRADO y siempre visible: es lo que pidió la fotógrafa ("un
 *   menú fijo central en la parte superior donde poder moverse por la web").
 *   Es una píldora con desenfoque de fondo: se lee sobre cualquier foto.
 * =========================================================================== */

/* ---------------------------------------------------------------------------
 * 0. ⭐ EN LA WEB PÚBLICA NO SE PUEDE SELECCIONAR NI ARRASTRAR TEXTO
 * ---------------------------------------------------------------------------
 * Solo en la web pública: el panel de administración SÍ lo permite (allí hay
 * campos de texto que hay que poder editar y copiar).
 */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Los datos que sí tienen sentido copiar (el email, por ejemplo). */
a[href^='mailto:'],
a[href^='tel:'] {
  -webkit-user-select: text;
  user-select: text;
}

/* ---------------------------------------------------------------------------
 * 1. CABECERA: EL MENÚ FIJO CENTRAL
 * ------------------------------------------------------------------------- */
.cabecera {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: max-content;
  max-width: calc(100vw - 2rem);
}

.menu {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.2vw, 2rem);
  padding: 0.7rem clamp(1rem, 2.4vw, 1.9rem);
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: rgba(10, 10, 11, 0.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  transition:
    background var(--medio),
    border-color var(--medio),
    padding var(--medio);
}

/* Al bajar, la píldora se vuelve más opaca: se lee mejor sobre las fotos. */
.cabecera.scroll .menu {
  background: rgba(10, 10, 11, 0.86);
  border-color: var(--linea-fuerte);
}

.menu a {
  position: relative;
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris-claro);
  white-space: nowrap;
  transition: color var(--rapido);
}

.menu a:hover,
.menu a.activo {
  color: var(--hueso);
}

/* El indicador de la sección en la que estás. */
.menu a.activo::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -0.55rem;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--oro);
  transform: translateX(-50%);
}

/* El enlace al panel, separado por una línea. */
.menu .separador {
  width: 1px;
  height: 14px;
  background: var(--linea);
}

.menu .entrar {
  color: var(--gris);
  font-size: 0.68rem;
}

.menu .entrar:hover {
  color: var(--oro);
}

/* ---------------------------------------------------------------------------
 * 6. PORTADA
 * ------------------------------------------------------------------------- */
.portada {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.portada-fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* ⭐ LAS CAPAS DEL CARRUSEL: si hay varias fotos de portada, se apilan y
   van cambiando solas con un fundido. */
.portada-capa {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1800ms ease;
}

.portada-capa.visible {
  opacity: 1;
}

.portada-capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  /* ⭐ La foto entra haciendo un zoom lentísimo: da vida sin distraer. */
  animation: portada-zoom 18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes portada-zoom {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}

/* El velo: oscurece la foto para que el texto se lea. */
.portada-velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgba(10, 10, 11, 0.62) 0%,
      rgba(10, 10, 11, 0.2) 38%,
      rgba(10, 10, 11, 0.82) 100%
    ),
    radial-gradient(ellipse at center, rgba(10, 10, 11, 0.1) 0%, rgba(10, 10, 11, 0.55) 100%);
}

.portada-contenido {
  text-align: center;
  padding: 0 var(--margen);
  max-width: 60rem;
  /* ⭐ Si el nombre se saliera (no debería), que no ensanche la página: si
     el contenido es más ancho que la pantalla, el indicador de "Ver el
     trabajo" (posicionado al 50%) se descuadra. */
  overflow: hidden;
}

/* --- La entrada del nombre: desvanecimiento + espaciado de letras ------ */
.portada-lema {
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gris-claro);
  margin-bottom: clamp(1.2rem, 2.6vw, 2.2rem);
  opacity: 0;
  animation: entrada-arriba 1000ms 200ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.portada-nombre {
  /* ⭐ `clamp(...vw...)` + `nowrap`: el nombre NUNCA se parte en dos líneas.
     Antes el tamaño crecía con la pantalla y, al empezar la animación (que
     abre el espaciado de las letras), "PAINLOP" se partía en "PAIN / LOP"
     y al terminar volvía a unirse: se veía un salto de línea a mitad del
     desvanecimiento. Con `nowrap` el texto se mantiene siempre en una línea
     y el `vw` lo hace caber en cualquier pantalla.
     El 6,5vw es lo que garantiza que "ANTÍA PAINLOP" (13 caracteres en
     mayúsculas) quepa en un móvil de 320 px SIN salirse por la derecha. */
  font-size: clamp(1.4rem, 6.5vw, 6rem);
  white-space: nowrap;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 0.95;
  text-transform: uppercase;
  opacity: 0;
  animation: entrada-nombre 1500ms 450ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes entrada-nombre {
  from {
    opacity: 0;
    /* ⭐ 0.13em (no 0.28em): con tanto espaciado el texto no cabía en
       pantallas medianas y se partía en dos líneas. */
    letter-spacing: 0.13em;
    filter: blur(8px);
  }
  to {
    opacity: 1;
    letter-spacing: 0.03em;
    filter: blur(0);
  }
}

@keyframes entrada-arriba {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.portada-titulo {
  margin-top: clamp(1rem, 2.2vw, 1.8rem);
  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris);
  opacity: 0;
  animation: entrada-arriba 1000ms 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.portada-linea {
  width: 1px;
  height: clamp(3rem, 7vw, 5.5rem);
  margin: clamp(1.8rem, 3.5vw, 3rem) auto 0;
  background: linear-gradient(180deg, var(--linea-fuerte), transparent);
  opacity: 0;
  animation: entrada-arriba 1000ms 1200ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* El indicador de "baja para ver más". */
.portada-scroll {
  position: absolute;
  bottom: 2.2rem;
  /* ⭐ Centrado SIN depender del `left: 50% + translateX(-50%)`: si el
     contenido de la portada fuera más ancho que la pantalla, el 50% se
     calculaba sobre una caja demasiado ancha y el botón se salía de
     centro. Con `left: 0; right: 0; margin: auto` siempre queda centrado. */
  left: 0;
  right: 0;
  width: max-content;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gris);
  opacity: 0;
  animation: entrada-arriba 1000ms 1500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transition: color var(--rapido);
}

.portada-scroll:hover {
  color: var(--hueso);
}

.portada-scroll svg {
  animation: flotar 2.6s ease-in-out infinite;
}

@keyframes flotar {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(7px);
    opacity: 1;
  }
}

/* ---------------------------------------------------------------------------
 * 7. PRESENTACIÓN (la imagen y el texto que entran por los lados)
 * ------------------------------------------------------------------------- */
.presentacion {
  padding: var(--separacion) 0;
}

.presentacion-cabecera {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.presentacion-cabecera h2 {
  font-size: clamp(1.9rem, 4.4vw, 3.6rem);
  margin-top: 1rem;
}

.presentacion-cuerpo {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
}

/* La foto entra desde la IZQUIERDA. */
.presentacion-foto {
  opacity: 0;
  transform: translateX(-60px);
  transition:
    opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.presentacion-foto.visible {
  opacity: 1;
  transform: none;
}

.presentacion-foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(12%) contrast(1.04);
}

/* El texto entra desde la DERECHA. */
.presentacion-texto {
  opacity: 0;
  transform: translateX(60px);
  transition:
    opacity 1200ms 180ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1200ms 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.presentacion-texto.visible {
  opacity: 1;
  transform: none;
}

.presentacion-texto p {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--gris-claro);
  max-width: 36rem;
}

.presentacion-texto p + p {
  margin-top: 1.4rem;
}

.presentacion-datos {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.2rem);
  border-top: 1px solid var(--linea);
}

.presentacion-datos div {
  min-width: 7rem;
}

.presentacion-datos dt {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 0.4rem;
}

.presentacion-datos dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.35rem;
  /* ⭐ Un email largo ("hola@antiapainlop.com") se salía de la pantalla en
     el móvil y ensanchaba la página entera. */
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
 * 8. REDES SOCIALES
 * ------------------------------------------------------------------------- */
.redes {
  padding: 0 0 var(--separacion);
}

.redes-linea {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3.5vw, 3rem);
  flex-wrap: wrap;
  justify-content: center;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--linea);
}

.red {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
  transition: color var(--rapido);
}

.red svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.3;
  transition: transform var(--medio);
}

.red:hover {
  color: var(--hueso);
}

.red:hover svg {
  transform: translateY(-3px);
}

/* ---------------------------------------------------------------------------
 * 9. SECCIONES Y MURO DE FOTOS
 * ------------------------------------------------------------------------- */
.seccion {
  padding-bottom: var(--separacion);
  scroll-margin-top: 7rem;
}

.seccion-cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: clamp(1.8rem, 4vw, 3rem);
  margin-bottom: clamp(1.8rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--linea);
  flex-wrap: wrap;
}

.seccion-titulo {
  display: flex;
  align-items: baseline;
  gap: clamp(0.9rem, 2.5vw, 2rem);
}

.seccion-numero {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  color: var(--oro);
}

.seccion-cabecera h2 {
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  letter-spacing: 0.01em;
}

.seccion-subtitulo {
  max-width: 30rem;
  font-size: 0.95rem;
  color: var(--gris);
  text-align: right;
}

.seccion-cabecera .contar {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--gris);
}

/* ⭐ EL MURO: columnas CSS (masonry). Las fotos NUNCA se recortan: se
   enseñan enteras, con su proporción real. */
.rejilla {
  columns: 3;
  column-gap: clamp(0.6rem, 1.4vw, 1.1rem);
}

.foto {
  position: relative;
  break-inside: avoid;
  margin: 0 0 clamp(0.6rem, 1.4vw, 1.1rem);
  overflow: hidden;
  background: var(--carbon);
  cursor: zoom-in;
  opacity: 0;
  transform: translateY(36px) scale(0.985);
  transition:
    opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}

.foto.visible {
  opacity: 1;
  transform: none;
}

.foto img {
  width: 100%;
  /* ⭐ La altura la marca el atributo "height" del <img> (con la proporción
     real): así el hueco se reserva ANTES de cargar la foto y la página no
     salta al.Scroll del menú acababa en el sitio equivocado). */
  height: auto;
  /* ⭐ No se pueden arrastrar ni descargar con el ratón. */
  -webkit-user-drag: none;
  user-select: none;
  transition:
    transform 1400ms cubic-bezier(0.16, 1, 0.3, 1),
    filter var(--medio);
  filter: saturate(0.94);
}

.foto:hover img {
  transform: scale(1.045);
  filter: saturate(1.05);
}

/* El pie de foto aparece al pasar el ratón. */
.foto-pie {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 2.5rem 1.1rem 1rem;
  background: linear-gradient(180deg, transparent, rgba(10, 10, 11, 0.85));
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--medio),
    transform var(--medio);
}

.foto:hover .foto-pie,
.foto:focus-visible .foto-pie {
  opacity: 1;
  transform: none;
}

.foto-pie span {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--hueso);
}

.foto-pie small {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris);
}

/* Una foto sin pie de foto (sin título) no necesita el degradado. */
.foto.sin-pie .foto-pie {
  display: none;
}

/* ---------------------------------------------------------------------------
 * 9 bis. LA FOTO FRONTAL DE LA SECCIÓN
 * ------------------------------------------------------------------------- */
.seccion-portada {
  position: relative;
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
  overflow: hidden;
  cursor: zoom-in;
}

.seccion-portada img {
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: cover;
}

.seccion-portada figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 2rem 1.2rem 1rem;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-claro);
  background: linear-gradient(180deg, transparent, rgba(10, 10, 11, 0.7));
  width: 100%;
}

/* ---------------------------------------------------------------------------
 * 9 ter. LOS GRUPOS (las "subcarpetas" de cada sección)
 * ------------------------------------------------------------------------- */
.grupo {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.grupo-cabecera {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding-bottom: 0.9rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--linea);
}

/* El título de un proyecto: se pincha para verlo a pantalla completa. */
.grupo-proyecto .grupo-cabecera {
  cursor: pointer;
  transition: border-color var(--medio);
}

.grupo-proyecto .grupo-cabecera:hover {
  border-bottom-color: var(--oro);
}

.grupo-proyecto .grupo-cabecera:hover h3 {
  color: var(--oro);
}

.grupo-cabecera h3 {
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  letter-spacing: 0.02em;
}

.grupo-cabecera p {
  flex: 1;
  min-width: 12rem;
  font-size: 0.86rem;
}

/* ---------------------------------------------------------------------------
 * 13 bis. EL BOTÓN DE VOLVER ARRIBA
 * ------------------------------------------------------------------------- */
.boton-arriba {
  position: fixed;
  right: clamp(1rem, 3vw, 2.4rem);
  bottom: clamp(1rem, 3vw, 2.4rem);
  z-index: 150;
  width: 2.8rem;
  height: 2.8rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--linea-fuerte);
  border-radius: 50%;
  background: rgba(10, 10, 11, 0.75);
  backdrop-filter: blur(10px);
  color: var(--gris-claro);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity var(--medio),
    transform var(--medio),
    visibility var(--medio),
    color var(--rapido),
    border-color var(--rapido);
}

.boton-arriba.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.boton-arriba:hover {
  color: var(--hueso);
  border-color: var(--hueso);
}

/* ---------------------------------------------------------------------------
 * 9 bis. ⭐ LA MARCA DE AGUA
 * ---------------------------------------------------------------------------
 * ⭐ La marca va HORNEADA en el fichero (no es un overlay del CSS): así, si
 *   alguien se descarga la foto o la abre en otra pestaña, la marca va con
 *   la foto. Aquí no hay nada que pintar.
 *
 *   La portada usa la versión "limpio.webp" (sin marca).
 * ------------------------------------------------------------------------- */

/* ⭐ PROTECCIÓN DE CAPTURA (como los bancos).
   Cuando la ventana pierde el foco (cambio de aplicación, captura de
   pantalla...), las fotos se ocultan. */
body.capturando .foto img,
body.capturando .seccion-portada img,
body.capturando .portada-capa img,
body.capturando .lupa-escenario img {
  visibility: hidden;
}

body.capturando::after {
  content: 'Contenido protegido';
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: #080809;
  color: var(--gris);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * 10. PROYECTOS
 * ------------------------------------------------------------------------- */
.proyectos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.proyecto {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--carbon);
  cursor: pointer;
}

.proyecto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.92);
  transition:
    transform 1400ms cubic-bezier(0.16, 1, 0.3, 1),
    filter var(--medio);
}

.proyecto:hover img {
  transform: scale(1.06);
  filter: saturate(1.05) brightness(1);
}

.proyecto-pie {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3rem 1.4rem 1.4rem;
  background: linear-gradient(180deg, transparent, rgba(10, 10, 11, 0.9));
}

.proyecto-pie h3 {
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  margin-bottom: 0.3rem;
}

.proyecto-pie span {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris);
}

/* ---------------------------------------------------------------------------
 * 11. CIERRE / CONTACTO
 * ------------------------------------------------------------------------- */
.cierre {
  padding: var(--separacion) 0;
  border-top: 1px solid var(--linea);
  text-align: center;
}

.cierre h2 {
  font-size: clamp(2rem, 6vw, 4.5rem);
  margin: 1.2rem 0;
}

.cierre p {
  max-width: 38rem;
  margin: 0 auto;
  color: var(--gris);
}

.cierre a {
  color: var(--hueso);
}

/* ---------------------------------------------------------------------------
 * 12. PIE DE PÁGINA
 * ------------------------------------------------------------------------- */
.pie {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--linea);
}

.pie-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.pie-copy {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--gris);
}

.pie-version {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--gris);
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  transition:
    color var(--rapido),
    border-color var(--rapido);
}

.pie-version:hover {
  color: var(--hueso);
  border-color: var(--linea-fuerte);
}

.pie-version .punto {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--oro);
}

/* La línea de créditos (diseño y desarrollo), debajo del copyright. */
.pie-creditos-fila {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(242, 240, 236, 0.06);
}

.pie-creditos-fila .pie-copy {
  font-size: 0.72rem;
  color: #6f6d68;
}

/* ---------------------------------------------------------------------------
 * 13. LUPA (visor de fotos)
 * ------------------------------------------------------------------------- */
/* ⭐ Los PUNTITOS del carrusel (uno por foto de portada). */
.portada-puntos {
  position: absolute;
  bottom: 5.6rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 3;
}

.portada-punto {
  width: 6px;
  height: 6px;
  padding: 0;
  border-radius: 50%;
  background: rgba(242, 240, 236, 0.35);
  transition:
    background var(--medio),
    transform var(--medio);
}

.portada-punto:hover {
  background: rgba(242, 240, 236, 0.7);
}

.portada-punto.activo {
  background: var(--oro);
  transform: scale(1.35);
}

.lupa {
  position: fixed;
  inset: 0;
  /* ⭐ 300: por encima de la vista de proyecto (250). Con 200, al ampliar
     una foto de un proyecto, el visor salía DETRÁS de la vista. */
  z-index: 300;
  display: flex;
  flex-direction: column;
  background: rgba(8, 8, 9, 0.97);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--medio),
    visibility var(--medio);
}

.lupa.abierta {
  opacity: 1;
  visibility: visible;
}

/* ⭐ Con el visor abierto, el menú se esconde: en el móvil se solapaba con
   el contador ("01 / 16") y quedaba el texto del menú detrás de la foto. */
body.lupa-abierta .cabecera {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--rapido);
}

.lupa-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem var(--margen);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris);
}

.lupa-cerrar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: color var(--rapido);
}

.lupa-cerrar:hover {
  color: var(--hueso);
}

.lupa-escenario {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--margen);
  min-height: 0;
}

.lupa-escenario img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.97);
  transition:
    opacity var(--medio),
    transform var(--medio);
}

.lupa.abierta .lupa-escenario img {
  opacity: 1;
  transform: none;
}

.lupa-flechas {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3.2rem;
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linea);
  border-radius: 50%;
  color: var(--gris-claro);
  transition:
    color var(--rapido),
    border-color var(--rapido),
    background var(--rapido);
}

.lupa-flechas:hover {
  color: var(--hueso);
  border-color: var(--linea-fuerte);
  background: rgba(255, 255, 255, 0.04);
}

.lupa-flechas.anterior {
  left: clamp(0.5rem, 2vw, 1.6rem);
}

.lupa-flechas.siguiente {
  right: clamp(0.5rem, 2vw, 1.6rem);
}

.lupa-pie {
  padding: 1.2rem var(--margen) 2rem;
  text-align: center;
}

.lupa-titulo {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.4vw, 1.8rem);
  margin-bottom: 0.3rem;
}

.lupa-descripcion {
  color: var(--gris);
  font-size: 0.9rem;
  max-width: 44rem;
  margin: 0 auto;
}

.lupa-exif {
  margin-top: 0.8rem;
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6f6d68;
}

/* ---------------------------------------------------------------------------
 * 14. LA VISTA DE PROYECTO (las fotos de un proyecto)
 * ------------------------------------------------------------------------- */
.vista-proyecto {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  flex-direction: column;
  background: #080809;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--medio),
    visibility var(--medio);
}

.vista-proyecto.abierta {
  opacity: 1;
  visibility: visible;
}

.vista-proyecto-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.2rem, 3vw, 2.4rem) var(--margen) 1.2rem;
  border-bottom: 1px solid var(--linea);
}

.vista-proyecto-cabecera h2 {
  font-size: clamp(1.8rem, 5vw, 3.4rem);
  margin: 0.3rem 0 0.5rem;
}

.vista-proyecto-cabecera p.tenue {
  max-width: 40rem;
  font-size: 0.92rem;
}

.vista-proyecto-fotos {
  flex: 1;
  overflow-y: auto;
  padding: clamp(1rem, 3vw, 2rem) var(--margen) clamp(2rem, 5vw, 4rem);
  columns: 3;
  column-gap: clamp(0.6rem, 1.4vw, 1.1rem);
}

/* Las fotos del proyecto ya están visibles (no dependen del scroll). */
.vista-proyecto-fotos .foto {
  opacity: 1;
  transform: none;
}

@media (max-width: 1100px) {
  .vista-proyecto-fotos {
    columns: 2;
  }
}

@media (max-width: 680px) {
  .vista-proyecto-fotos {
    columns: 1;
  }
}

/* ---------------------------------------------------------------------------
 * 15. RESPONSIVE
 * ------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .rejilla {
    columns: 2;
  }
}

@media (max-width: 900px) {
  .presentacion-cuerpo {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 7vw, 3.5rem);
  }

  /* En el móvil la foto sigue entrando por el lado: el efecto se mantiene. */
  .presentacion-foto {
    transform: translateX(-40px);
  }

  .presentacion-texto {
    transform: translateX(40px);
  }

  .seccion-subtitulo {
    text-align: left;
  }
}

@media (max-width: 680px) {
  .cabecera {
    top: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    transform: none;
    width: auto;
    max-width: none;
  }

  .menu {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.6rem 1rem;
    gap: 1.1rem;
  }

  .menu::-webkit-scrollbar {
    display: none;
  }

  .rejilla {
    columns: 1;
  }

  .lupa-flechas {
    width: 2.6rem;
    height: 2.6rem;
  }

  .pie-fila {
    justify-content: center;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------------
 * 17. ⭐ QUIEREN QUE NO HAYA MOVIMIENTO
 * ---------------------------------------------------------------------------
 * No es un adorno: hay gente a quien el movimiento marea. Con esta preferencia
 * activada, TODO se ve ya en su sitio, sin transiciones.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .revelar,
  .presentacion-foto,
  .presentacion-texto,
  .foto {
    opacity: 1 !important;
    transform: none !important;
  }
}