/* =====================================================================
   ETALONAJE DE LA WEB
   Paleta: noche, bosque, musgo, salvia, oro y hueso.
   Estructura inspirada en una galería editorial: serif para los títulos,
   sans para todo lo funcional, líneas finas en lugar de sombras.
   Para cambiar el "look", toca solo estas variables.
   ===================================================================== */
:root {
  --noche:   #0c1d26;   /* fondo de la página */
  --noche-2: #10252f;   /* fondo de marcos vacíos */
  --bosque:  #16302a;   /* superficies: tarjetas, campos */
  --bosque-2:#1f3d33;   /* superficie al pasar el ratón */
  --musgo:   #566848;   /* bordes activos */
  --linea:   #26413a;   /* líneas finas */
  --salvia:  #a39b6e;   /* texto secundario */
  --oro:     #d8b263;   /* único acento */
  --hueso:   #ede7d7;   /* texto principal */

  /* alias que usa el resto del código */
  --fondo: var(--noche);
  --fondo-2: var(--noche-2);
  --texto: var(--hueso);
  --suave: var(--salvia);
  --acento: var(--oro);

  --serif: "Instrument Serif", "Playfair Display", Georgia, serif;
  --sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: var(--sans);

  --r-tarjeta: 24px;
  --r-boton: 10px;
  --r-foto: 10px;
  --margen: clamp(16px, 5vw, 64px);
  --ancho: 1280px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--noche);
  color: var(--hueso);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
button { font: inherit; }
::selection { background: var(--oro); color: var(--noche); }
:focus-visible { outline: 1px solid var(--oro); outline-offset: 4px; }

.mono { font-family: var(--sans); font-variant-numeric: tabular-nums; }
.pequeno { font-size: 13px; color: var(--salvia); letter-spacing: 0; }

/* Grano de película, muy sutil */
.grano {
  position: fixed; inset: -50%; z-index: 50; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grano 1s steps(4) infinite;
}
@keyframes grano {
  0% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); }
  50% { transform: translate(2%,-3%); } 75% { transform: translate(-2%,-1%); }
}

/* ===== Botones ===== */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
  color: var(--hueso); background: transparent;
  border: 1px solid var(--linea); border-radius: var(--r-boton);
  padding: 11px 18px; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.boton:hover { background: var(--bosque); border-color: var(--musgo); }
.boton-claro { background: var(--hueso); color: var(--noche); border-color: var(--hueso); border-radius: 9999px; }
.boton-claro:hover { background: var(--oro); border-color: var(--oro); color: var(--noche); }
.boton[hidden] { display: none; }

/* ===== Barra superior ===== */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px var(--margen);
  font-size: 14px;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s;
}
.barra.solida {
  background: rgba(12,29,38,.82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: rgba(38,65,58,.6);
}
.barra:not(.solida) nav a:not(.nav-pill) { color: var(--hueso); }
.firma { font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; white-space: nowrap; }
.barra nav { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 30px); }
.barra nav a { color: var(--salvia); transition: color .2s; white-space: nowrap; }
.barra nav a:hover { color: var(--hueso); }
.barra nav .nav-pill {
  color: var(--noche); background: var(--hueso); border-radius: 9999px; padding: 7px 14px; font-weight: 500;
}
.barra nav .nav-pill:hover { color: var(--noche); background: var(--oro); }

/* ===== Portada: vídeo a pantalla completa ===== */
.portada {
  position: relative; min-height: 100svh; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end;
  padding: 120px var(--margen) clamp(48px, 9vh, 96px);
}
.portada-fondo { position: absolute; inset: 0; z-index: -2; background: var(--noche-2); }
.portada-fondo video, .portada-fondo img { width: 100%; height: 100%; object-fit: cover; }
.portada-fondo iframe {
  position: absolute; top: 50%; left: 50%; width: 177.78vh; height: 56.25vw;
  min-width: 100%; min-height: 100%; transform: translate(-50%,-50%);
  pointer-events: none; border: 0;
}
/* Foto de portada mientras no haya vídeo: un zoom lentísimo, casi imperceptible */
@media (prefers-reduced-motion: no-preference) {
  .portada-fondo.es-foto img { animation: respira 24s ease-in-out infinite alternate; }
}
@keyframes respira { to { transform: scale(1.06); } }
/* Velo para que el texto se lea sobre cualquier imagen */
.portada-velo {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(12,29,38,.92) 0%, rgba(12,29,38,.45) 38%, rgba(12,29,38,0) 65%),
    linear-gradient(to right, rgba(12,29,38,.55) 0%, rgba(12,29,38,0) 55%),
    linear-gradient(to bottom, rgba(12,29,38,.55) 0%, rgba(12,29,38,0) 18%);
}
.portada-texto { max-width: 760px; }
.portada h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(64px, 11vw, 176px); line-height: .86; letter-spacing: -0.035em;
  margin: 14px 0 22px; text-wrap: balance;
}
.portada .pequeno { color: var(--hueso); opacity: .8; }
.lema {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(22px, 2.3vw, 30px); line-height: 1.25; letter-spacing: -0.01em;
  color: var(--hueso); opacity: .85; max-width: 30ch; margin-bottom: 32px;
}
.acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.boton-cristal {
  background: rgba(237,231,215,.08); border-color: rgba(237,231,215,.28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.boton-cristal:hover { background: rgba(237,231,215,.16); border-color: rgba(237,231,215,.5); }
.pausa {
  position: absolute; right: var(--margen); bottom: clamp(48px, 9vh, 96px);
  font-size: 13px; color: var(--hueso); background: rgba(12,29,38,.4);
  border: 1px solid rgba(237,231,215,.28); border-radius: 9999px; padding: 6px 12px; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pausa[hidden] { display: none; }

/* ===== Secciones ===== */
.seccion, .fotografia {
  max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto;
  padding: clamp(80px, 11vw, 150px) var(--margen) 0;
}
.cabecera { display: flex; align-items: baseline; gap: 18px; margin-bottom: 36px; }
.cabecera h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, 6vw, 84px); line-height: 1; letter-spacing: -0.035em;
}

/* ===== Filmografía: tarjetas ===== */
.rejilla-proyectos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 20px; }
.proyecto {
  cursor: pointer; background: var(--bosque); border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta); padding: 14px 14px 24px;
  transition: background .25s, border-color .25s;
}
.proyecto:hover { background: var(--bosque-2); border-color: var(--musgo); }
.proyecto .marco {
  position: relative; aspect-ratio: 2.39 / 1; overflow: hidden;
  border-radius: 14px; background: var(--noche-2);
}
.proyecto .marco img { object-position: var(--encuadre, 50% 50%); }
.proyecto .marco img, .proyecto .marco .relleno { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.proyecto:hover .marco img { transform: scale(1.03); }
.proyecto .play {
  position: absolute; left: 14px; bottom: 14px;
  font-size: 13px; font-weight: 500; color: var(--noche);
  background: var(--hueso); border-radius: 9999px; padding: 6px 12px;
  opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s;
}
.proyecto:hover .play, .proyecto:focus-visible .play { opacity: 1; transform: none; }
.proyecto h3 {
  font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.05;
  letter-spacing: -0.02em; margin: 20px 10px 6px;
}
.proyecto .ficha { margin: 0 10px; }
.proyecto .ficha-puesto { display: block; color: var(--oro); margin-bottom: 2px; }
.proyecto p:not(.ficha) { color: var(--hueso); opacity: .8; margin: 12px 10px 0; max-width: 54ch; font-size: 15px; }

.relleno { width: 100%; height: 100%; }

/* ===== Filtros (píldoras) ===== */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros[hidden] { display: none; }
.filtros button {
  font-size: 14px; color: var(--hueso); background: transparent;
  border: 1px solid var(--linea); border-radius: 9999px; padding: 6px 14px; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.filtros button:hover { border-color: var(--musgo); }
.filtros button.activo { background: var(--hueso); border-color: var(--hueso); color: var(--noche); }

/* ===== Fotografía: tira de película =====
   Por defecto (móvil): carrusel horizontal con el dedo.
   .modo-cine (ordenador): la tira se queda fija y avanza al hacer scroll. */
.fotografia { max-width: none; padding-left: 0; padding-right: 0; }
.tira { position: relative; }
.tira-fija { display: flex; flex-direction: column; gap: 16px; }
.tira-cab { padding: 0 var(--margen); }
.tira-cab .cabecera { margin-bottom: 8px; }

.galeria-ventana { overflow: hidden; }
.galeria {
  --alto: min(62svh, 520px);
  position: relative; display: flex; align-items: flex-start; gap: 16px;
  width: max-content; padding: 30px var(--margen);
}
/* Perforaciones de película */
.galeria::before, .galeria::after {
  content: ""; position: absolute; left: 0; right: 0; height: 10px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='10'%3E%3Crect x='7' width='14' height='10' rx='3' fill='%23ede7d7' fill-opacity='.09'/%3E%3C/svg%3E") repeat-x;
}
.galeria::before { top: 8px; }
.galeria::after { bottom: 8px; }

.foto { flex: none; margin: 0; cursor: zoom-in; outline: none; }
.foto[hidden] { display: none; }
.foto .marco {
  height: var(--alto); aspect-ratio: var(--ar, 2/3);
  overflow: hidden; background: var(--noche-2); position: relative; border-radius: var(--r-foto);
}
.foto .marco img, .foto .marco .relleno {
  width: 100%; height: 100%; object-fit: cover;
  transform: translate3d(var(--px, 0%), 0, 0) scale(1.13);
  filter: saturate(var(--sat, 1)) brightness(var(--luz, 1));
  transition: filter .35s linear;
}
.foto:hover .marco img, .foto:focus-visible .marco img { --luz: 1.08; }
.foto:focus-visible .marco { outline: 1px solid var(--oro); outline-offset: 4px; }
.foto figcaption { display: flex; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--salvia); }
.foto figcaption .num { color: var(--oro); font-variant-numeric: tabular-nums; }

.tira-pie { display: flex; align-items: center; gap: 18px; padding: 0 var(--margen); }
.contador { white-space: nowrap; min-width: 7ch; color: var(--hueso); font-variant-numeric: tabular-nums; }
.progreso { position: relative; flex: 1; max-width: 360px; height: 1px; background: var(--linea); }
.progreso span {
  position: absolute; inset: 0; background: var(--oro);
  transform-origin: left; transform: scaleX(var(--p, 0));
}
.pista { margin-left: auto; white-space: nowrap; }

/* Móvil: carrusel con imán */
.modo-movil .galeria-ventana {
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.modo-movil .galeria-ventana::-webkit-scrollbar { display: none; }
.modo-movil .foto { scroll-snap-align: center; }

/* Ordenador: tira fija mientras se recorre */
.modo-cine .tira-fija {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  padding-top: 72px; padding-bottom: 28px; justify-content: center; overflow: hidden; gap: 12px;
}
.modo-cine .galeria { --alto: clamp(220px, calc(100svh - 360px), 760px); will-change: transform; padding-top: 26px; padding-bottom: 24px; }
.modo-cine .tira-cab .cabecera h2 { font-size: clamp(40px, 4.8vw, 72px); }

/* ===== "Ver más": archivo ===== */
.archivo-wrap { max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; padding: 32px var(--margen) 0; }
.archivo-wrap[hidden] { display: none; }
.archivo { padding-top: 40px; scroll-margin-top: 72px; }
.archivo .filtros { margin: 0 0 24px; }
.archivo-rejilla { columns: 3 260px; column-gap: 16px; }
.foto-archivo { break-inside: avoid; margin-bottom: 22px; }
.foto-archivo .marco { height: auto; width: 100%; aspect-ratio: auto; }
.foto-archivo .marco img { height: auto; }
.foto-archivo .marco .relleno { aspect-ratio: 4/5; }
.foto-archivo .marco img, .foto-archivo .marco .relleno { transform: none; filter: none; transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .3s; }
.foto-archivo:hover .marco img { transform: scale(1.03); filter: brightness(1.08); }
.foto-archivo figcaption .num { display: none; }

/* ===== Visor ===== */
.visor {
  position: fixed; inset: 0; z-index: 100; background: rgba(8,20,26,.96);
  display: grid; place-items: center; padding: 56px var(--margen);
}
.visor[hidden] { display: none; }
.visor-contenido { width: min(1400px, 100%); }
.visor-contenido .video { position: relative; aspect-ratio: 16/9; border-radius: var(--r-foto); overflow: hidden; }
.visor-contenido iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.visor-contenido img { max-height: 85vh; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; border-radius: 4px; }
.visor-contenido .aviso { text-align: center; }
.visor-foto { margin: 0; text-align: center; }
.visor-foto img { max-height: 80vh; }
.visor-foto figcaption { margin-top: 14px; font-size: 13px; color: var(--salvia); }
.cerrar, .visor-nav {
  background: transparent; color: var(--hueso); border: 1px solid var(--linea);
  border-radius: 9999px; width: 44px; height: 44px; display: grid; place-items: center;
  font-size: 18px; cursor: pointer; transition: background .2s, border-color .2s;
}
.cerrar:hover, .visor-nav:hover { background: var(--bosque); border-color: var(--musgo); }
.cerrar { position: absolute; top: 16px; right: var(--margen); }
.visor-nav { position: fixed; top: 50%; transform: translateY(-50%); }
.visor-nav.prev { left: 12px; }
.visor-nav.next { right: 12px; }

/* ===== Sobre mí ===== */
.sobre-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.retrato { aspect-ratio: 4/5; overflow: hidden; background: var(--noche-2); border-radius: var(--r-tarjeta); }
.texto-largo p {
  font-family: var(--serif); font-size: clamp(23px, 2.3vw, 31px); line-height: 1.3;
  letter-spacing: -0.012em; margin-bottom: .9em; max-width: 34ch;
}
.texto-largo p:first-child { color: var(--hueso); }
.texto-largo p + p { color: var(--salvia); }
.experiencia { list-style: none; margin-top: 36px; font-size: 14px; max-width: 620px; }
.experiencia li {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--linea);
}
.experiencia li:last-child { border-bottom: 1px solid var(--linea); }
.experiencia li span:nth-child(2) { color: var(--salvia); }
.experiencia li span:last-child { color: var(--oro); font-variant-numeric: tabular-nums; }

/* ===== Contacto ===== */
.contacto { padding-bottom: clamp(80px, 11vw, 150px); }
.intro-contacto {
  font-family: var(--serif); font-style: italic; color: var(--salvia);
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.25; margin-bottom: 28px; max-width: 30ch;
}
.formulario {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 880px; margin-bottom: 56px;
  background: var(--bosque); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); padding: 24px;
}
.formulario label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.formulario label > span { color: var(--salvia); }
.formulario .ancho { grid-column: 1 / -1; }
.formulario input, .formulario textarea {
  font: inherit; font-size: 16px; color: var(--hueso);
  background: var(--noche); border: 1px solid var(--linea); border-radius: 12px;
  padding: 12px 14px; outline: none; resize: vertical; transition: border-color .2s;
}
.formulario input:focus, .formulario textarea:focus { border-color: var(--oro); }
.formulario .boton { justify-self: start; }
.correo {
  display: inline-block; font-family: var(--serif);
  font-size: clamp(30px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.02em;
  border-bottom: 1px solid var(--linea); transition: color .2s, border-color .2s; word-break: break-all;
}
.correo:hover { color: var(--oro); border-color: var(--oro); }
.redes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.redes a {
  font-size: 14px; color: var(--hueso); border: 1px solid var(--linea); border-radius: 9999px; padding: 6px 14px;
  transition: background .2s, border-color .2s;
}
.redes a:hover { background: var(--bosque); border-color: var(--musgo); }

.pie {
  display: flex; justify-content: space-between;
  max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto;
  padding: 24px var(--margen) 32px; border-top: 1px solid var(--linea);
}

/* Aparición suave (solo se usa donde app.js la pide) */
.aparece { opacity: 0; transform: translateY(16px); transition: opacity .8s, transform .8s cubic-bezier(.2,.7,.2,1); }
.aparece.visible { opacity: 1; transform: none; }

/* Entrada de la portada: el único momento coreografiado */
@media (prefers-reduced-motion: no-preference) {
  .portada-texto > * { animation: entra .9s cubic-bezier(.2,.7,.2,1) both; }
  .portada-texto > :nth-child(2) { animation-delay: .08s; }
  .portada-texto > :nth-child(3) { animation-delay: .16s; }
  .portada-texto > :nth-child(4) { animation-delay: .24s; }
}
@keyframes entra { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .grano { animation: none; } html { scroll-behavior: auto; } }

/* ===== Móvil ===== */
@media (max-width: 720px) {
  .pausa { top: 76px; bottom: auto; }
}
@media (max-width: 720px) {
  body { font-size: 15px; }
  .barra nav a:not(.nav-pill):nth-child(2) { display: none; }
  .barra { font-size: 13px; }
  .firma { font-size: 20px; }
  .sobre-cuerpo { grid-template-columns: 1fr; }
  .retrato { max-width: 320px; }
  .experiencia li { grid-template-columns: 1fr auto; }
  .experiencia li span:nth-child(2) { grid-column: 1; grid-row: 2; }
  .formulario { grid-template-columns: 1fr; padding: 16px; }
  .proyecto h3 { font-size: 30px; }
}
@media (max-width: 420px) {
  .barra nav a:not(.nav-pill) { display: none; }
}