/* ==========================================================================
   Dos Monos Productions — Prototipo
   Sistema visual: negro cinematográfico + acento óxido único.
   Sin bordes redondeados decorativos, sin sombras suaves, sin gradientes.
   ========================================================================== */

:root{
  /* Modo noche (por defecto): negro cinematográfico + acento óxido. */
  --bg: #0a0a09;
  --bg-raised: #131311;
  --fg: #f3efe6;
  --muted: #948e80;
  --line: #2b2a26;
  /* Acento de marca: el mismo coral del "MONOS" del logo (assets/logo.png), sacado por
     muestreo de píxel directo del archivo (#d74e38) — antes era un naranja/óxido distinto
     (#d95a1f) que nunca llegó a coincidir con el logo. */
  --accent: #d74e38;
  --accent-dim: #7c2d20;
  --topbar-bg: rgba(10,10,9,0.86);
  /* Texto que va SIEMPRE sobre una superficie naranja (botón activo, insignia de categoría).
     Fijo a propósito, no cambia entre temas: el naranja de marca no cambia, así que el color
     que contrasta con él tampoco debería cambiar. Usar var(--bg) aquí era el bug — en modo día
     var(--bg) se vuelve casi blanco y el texto quedaba lavado sobre el naranja. */
  --ink-on-accent: #171410;
  /* Icono/texto de controles que flotan SIEMPRE sobre una foto o vídeo (botón de play de la
     ficha, contador...). Fijo a propósito, igual que --ink-on-accent: el contenido debajo es
     una fotografía, no el fondo de la página, así que no debe invertirse con el tema. */
  --ink-on-media: #f3efe6;

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Work Sans', sans-serif;

  --container: 1240px;
  --edge: clamp(20px, 5vw, 64px);

  /* ---- Motion: dos curvas, tres duraciones. Una sola vez, se usan en todo el sitio para que
     el movimiento se sienta de una sola pieza en vez de una colección de efectos sueltos. ---- */
  --ease: cubic-bezier(.16,1,.3,1);      /* deceleración marcada, para revelados y elementos grandes */
  --ease-soft: cubic-bezier(.4,0,.2,1);  /* estándar, para hovers y respuestas rápidas */
  --dur-1: 150ms;  /* microinteracción: pulsar, marcar activo */
  --dur-2: 350ms;  /* hover con desplazamiento/profundidad */
  --dur-3: 700ms;  /* entradas: hero, revelado al hacer scroll, modal */

  color-scheme: dark;
}

/* Cross-fade nativo entre index.html y proyecto.html (Chromium moderno; en el resto de
   navegadores la navegación simplemente ocurre como siempre, sin efecto — no rompe nada). */
@view-transition{ navigation: auto; }
::view-transition-old(root), ::view-transition-new(root){
  animation-duration: var(--dur-3);
  animation-timing-function: var(--ease);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur-2) var(--ease-soft), color var(--dur-2) var(--ease-soft);
}

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

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

/* textura de grano sutil, refuerza el carácter "película", no decorativo gratuito */
.grain{
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Topbar ---------- */
.topbar{
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px var(--edge);
  background: var(--topbar-bg);
  backdrop-filter: blur(6px);
  transition: background-color var(--dur-2) var(--ease-soft);
  border-bottom: 1px solid var(--line);
}
.topbar__logo img{ height: 76px; width: auto; display: block; transition: opacity var(--dur-1) var(--ease-soft); }
.topbar__logo:hover img{ opacity: 0.82; }

.topbar__nav{ display: flex; gap: 36px; }
.topbar__nav a{
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg); position: relative; padding-bottom: 4px;
}
.topbar__nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: var(--accent); transition: right var(--dur-2) var(--ease);
}
.topbar__nav a:hover::after{ right: 0; }

.topbar__actions{ display: flex; align-items: center; gap: 14px; }

.topbar__burger{
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 32px; height: 32px; background: none; border: none; cursor: pointer;
}
.topbar__burger span{
  height: 2px; background: var(--fg); width: 100%;
  transition: transform var(--dur-2) var(--ease-soft), opacity var(--dur-1) var(--ease-soft);
}
/* La hamburguesa se convierte en una X cuando el menú está abierto — confirma el estado
   con el mismo trazo, sin añadir un icono nuevo. */
.topbar__burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.topbar__burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.topbar__burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Antes usaba display:none/flex (corte seco). Ahora se despliega con un deslizado suave;
   el truco de "visibility con retraso" es el mismo que ya usa .modal para poder animar algo
   que en su estado cerrado no debe ser interactuable ni alcanzable con Tab. */
.mobilenav{
  display: flex; flex-direction: column;
  position: sticky; top: 101px; z-index: 99;
  background: var(--bg-raised); border-bottom: 1px solid var(--line);
  overflow: hidden;
  max-height: 0; opacity: 0; visibility: hidden;
  transition: max-height var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease-soft),
              visibility 0s linear var(--dur-3);
}
.mobilenav a{
  padding: 16px var(--edge); border-top: 1px solid var(--line);
  font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em;
  transition: color var(--dur-1) var(--ease-soft), padding-left var(--dur-2) var(--ease-soft);
}
.mobilenav a:hover, .mobilenav a:focus-visible{ color: var(--accent); padding-left: calc(var(--edge) + 8px); }
.mobilenav.is-open{
  max-height: 320px; opacity: 1; visibility: visible;
  transition: max-height var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease-soft),
              visibility 0s linear 0s;
}

/* ---------- Hero ---------- */
.hero{
  min-height: 92vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--edge);
  position: relative;
}
.hero__eyebrow{
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 18px;
}
.hero__title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(52px, 11vw, 148px);
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 0.01em;
}
.hero__title--accent{ color: var(--accent); }
.hero__scroll{
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 56px; width: fit-content;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
}
.hero__scroll-line{
  width: 40px; height: 1px; background: var(--fg);
  transition: width var(--dur-2) var(--ease-soft), background var(--dur-2) var(--ease-soft);
}
.hero__scroll:hover .hero__scroll-line{ width: 64px; background: var(--accent); }

/* Entrada de la portada: se dispara al cargar, no al hacer scroll (está siempre visible
   desde el primer fotograma). Un único gesto — aparecer flotando hacia arriba — repetido con
   retraso creciente en cada línea, en vez de cuatro efectos distintos. */
@keyframes fade-up-in{
  from{ opacity: 0; transform: translateY(26px); }
  to{ opacity: 1; transform: translateY(0); }
}
.hero__eyebrow, .hero__title, .hero__scroll{
  animation: fade-up-in var(--dur-3) var(--ease) both;
}
.hero__eyebrow{ animation-delay: 0.05s; }
.hero__title{ animation-delay: 0.16s; }
.hero__scroll{ animation-delay: 0.38s; }

/* ---------- Section title (shared) ---------- */
.section-title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 56px);
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}
.section-title--light{ color: var(--bg); }

/* ---------- Work ---------- */
.work{ padding: 120px var(--edge) 40px; max-width: var(--container); margin: 0 auto; }
.work__header{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 28px; margin-bottom: 48px;
}
.work__filters{ display: flex; gap: 8px; flex-wrap: wrap; }
.filter{
  background: none; border: 1px solid var(--line); color: var(--muted);
  font-family: var(--font-body); font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 9px 18px; cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-soft), color var(--dur-2) var(--ease-soft),
              background var(--dur-2) var(--ease-soft), transform var(--dur-1) var(--ease-soft);
}
.filter:hover{ color: var(--fg); border-color: var(--fg); }
.filter:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.filter:active{ transform: scale(0.96); }
.filter.is-active{ background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); }

/* Columnas fijas por rango de ancho en vez de auto-fill: con un número de proyectos que no
   siempre es múltiplo exacto de las columnas, auto-fill dejaba huecos grises grandes e
   impredecibles en la última fila según el ancho de ventana. Con un número de columnas fijo
   por breakpoint y fondo transparente (el "grout" lo da el borde de cada tarjeta, no el fondo
   del grid) el hueco sobrante, si lo hay, es invisible contra el fondo de la página. */
.grid{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2px;
}
@media (min-width: 480px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px){
  .grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px){
  .grid{ grid-template-columns: repeat(4, 1fr); }
}

.card{
  position: relative;
  aspect-ratio: 3 / 4;
  background-color: var(--bg-raised);
  outline: 1px solid var(--line);
  outline-offset: -1px;
  cursor: pointer;
  overflow: hidden;
  border: none;
  padding: 0;
  text-align: left;
  font-family: inherit;
  color: inherit;
  display: block;
  width: 100%;
  transition: opacity var(--dur-2) var(--ease-soft), transform var(--dur-2) var(--ease-soft);
}
/* Capa de imagen separada del botón: permite un zoom sutil en hover sin mover ni deformar
   el marco de la tarjeta (el borde/outline se queda quieto, solo "respira" la foto). */
.card__image{
  position: absolute; inset: 0; z-index: 0;
  background-color: var(--bg-raised);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: transform 900ms var(--ease);
}
.card:hover .card__image, .card:focus-visible .card__image{ transform: scale(1.055); }
.card::before{
  content:'';
  position:absolute; inset:0;
  background: rgba(10,10,9,0.35);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-soft);
  z-index: 1;
}
.card:hover::before, .card:focus-visible::before{ opacity: 1; }
.card::after{
  content:'▶';
  position:absolute; top: 20px; right: 20px;
  width: 36px; height: 36px;
  border: 1px solid rgba(243,239,230,0.5);
  display: flex; align-items:center; justify-content:center;
  font-size: 11px; color: var(--fg);
  opacity: 0; transform: translateY(-6px);
  transition: opacity var(--dur-2) var(--ease-soft), transform var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease-soft);
  z-index: 2;
}
.card:hover::after, .card:focus-visible::after{
  opacity: 1; transform: translateY(0); border-color: var(--accent); color: var(--accent);
}
.card:hover, .card:focus-visible{ outline: none; }
.card:focus-visible{ box-shadow: inset 0 0 0 2px var(--accent); }
.card:active{ transform: scale(0.985); }

/* Transición de filtrado: en vez de que la tarjeta desaparezca de golpe (display:none),
   se encoge y se desvanece; script.js espera a que termine para sacarla del layout con el
   atributo `hidden` nativo (por eso hace falta declararlo aquí — el CSS de por sí ya vuelve a
   pintar `.card` como bloque, que ganaría por cascada a la hoja de estilos del navegador). */
/* Especificidad reforzada (.grid .card.is-hidden, no solo .card.is-hidden) a propósito:
   esta regla comparte la propiedad `opacity` con `.reveal.is-visible` (revelado al hacer
   scroll) sobre la misma tarjeta. Con la misma especificidad, el orden de aparición en la
   hoja de estilos decide, y eso es fragil — si algún día se reordena el CSS, el filtrado
   podría dejar de poder ocultar una tarjeta ya revelada. Con un ancestro extra en el
   selector esta regla gana siempre, sin depender del orden. */
.grid .card.is-hidden{ opacity: 0; transform: scale(0.94); pointer-events: none; }
.card[hidden]{ display: none; }

/* La propia imagen ya lleva título y cliente "quemados" (son las portadas reales
   de Instagram) — no se duplica ese texto en HTML, solo se añade la categoría,
   que es información nueva que la imagen no da. */
.card__info{
  position: absolute; left: 16px; top: 16px; right: 16px; z-index: 2;
}
.card__cat{
  display: inline-block;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-on-accent); background: var(--accent);
  padding: 5px 10px;
  margin: 0;
}
.card__title, .card__client{
  /* Se mantienen en el DOM por accesibilidad (lectores de pantalla) pero
     ocultos visualmente: la imagen ya comunica esta información. */
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.card.is-hidden{ display: none; }

/* Proyectos "Próximamente" (`pending:true`): de cara al público, sin foto, sin cliente,
   sin icono de play ni overlay de hover — solo fondo negro, título en naranja y un aviso
   "Próximamente" en blanco debajo. El resto de la ficha (fotos, sinopsis, créditos) existe en
   `data.js` pero no se expone en esta vista; solo se revela cuando el proyecto se publica
   (se quita `pending:true`). No son tarjetas interactivas: no abren modal ni ficha. */
.card.is-pending{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px; padding: 24px;
  background: var(--bg); cursor: default;
}
.card.is-pending::before, .card.is-pending::after{ content: none; }
.card.is-pending .card__info{ position: static; }
.card.is-pending .card__title{
  position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(20px, 3vw, 28px); color: var(--accent);
}
.card.is-pending .card__soon{
  margin: 0; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg);
}
/* Bug real (mismo patrón que ya apareció con `.project__gallery` y `.modal__link`): esta regla
   comparte especificidad (0,2,0) con `.card[hidden]{display:none}`, declarada más arriba en el
   archivo — sin este selector más específico, `.card.is-pending` gana por orden de aparición y
   una tarjeta pendiente filtrada fuera (con el atributo `hidden` puesto) se queda con
   `display:flex`, invisible por `opacity:0` pero ocupando su celda en la rejilla: al filtrar por
   una categoría sin proyectos "Próximamente" quedaban huecos vacíos en el grid en vez de
   recolocarse el resto de tarjetas. */
.card.is-pending[hidden]{ display: none; }

.grid--empty{ display: none; }
.empty-state{
  display: none;
  padding: 80px 0; text-align: center; color: var(--muted);
  font-size: 15px;
}
.empty-state.is-visible{ display: block; }

/* ---------- Studio ---------- */
.studio{ background: var(--fg); color: var(--bg); padding: 120px var(--edge); }
.studio__inner{ max-width: var(--container); margin: 0 auto; }
.studio__eyebrow{
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin: 28px 0 0;
}
.studio__lead{
  max-width: 62ch; font-size: clamp(18px, 2.4vw, 24px);
  margin: 16px 0 72px; color: var(--bg); opacity: 0.86;
}
.studio__grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
  border-top: 1px solid color-mix(in srgb, var(--bg) 15%, transparent); padding-top: 40px;
}
.studio__num{
  display:block; font-family: var(--font-display); font-size: 14px;
  color: var(--accent); margin-bottom: 14px; letter-spacing: 0.08em;
}
.studio__block h3{
  font-family: var(--font-display); font-weight: 400; font-size: 20px;
  text-transform: uppercase; margin: 0 0 10px; color: var(--bg);
}
.studio__block p{ margin: 0; color: var(--bg); opacity: 0.78; font-size: 15px; }

/* ---------- Contact ---------- */
.contact{
  padding: 140px var(--edge) 120px; text-align: center;
}
.contact__email{
  display: inline-block; margin: 32px 0 24px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 5vw, 44px); text-transform: lowercase;
  border-bottom: 2px solid var(--line); padding-bottom: 8px;
  transition: border-color var(--dur-2) var(--ease-soft), color var(--dur-2) var(--ease-soft),
              transform var(--dur-2) var(--ease);
}
.contact__email:hover{ border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.contact__social a{
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  transition: color var(--dur-1) var(--ease-soft);
}
.contact__social a:hover{ color: var(--fg); }

/* ---------- Footer ---------- */
.footer{
  display: flex; align-items: center; gap: 16px;
  padding: 28px var(--edge); border-top: 1px solid var(--line);
  color: var(--muted); font-size: 12.5px;
}
.footer__logo{ height: 22px; opacity: 0.6; }

/* ---------- Modal ---------- */
.modal{
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  visibility: hidden; opacity: 0;
  transition: opacity var(--dur-2) var(--ease-soft), visibility 0s linear var(--dur-2);
}
.modal.is-open{
  visibility: visible; opacity: 1;
  transition: opacity var(--dur-2) var(--ease-soft), visibility 0s linear 0s;
}
.modal__backdrop{
  position: absolute; inset: 0; background: rgba(6,6,5,0.9);
}
.modal__panel{
  position: relative; z-index: 1;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  max-width: 860px; width: 100%; max-height: 88vh;
  overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr;
  transform: translateY(28px) scale(0.98);
  transition: transform var(--dur-3) var(--ease);
}
.modal.is-open .modal__panel{ transform: translateY(0) scale(1); }
.modal__media{
  position: relative;
  background-color: var(--bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 480px;
}
.modal__media video, .modal__media iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
  border: 0;
}
.modal__play{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border: 1px solid rgba(243,239,230,0.65);
  background: rgba(10,10,9,0.45);
  color: var(--ink-on-media);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-soft), color var(--dur-2) var(--ease-soft),
              transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease-soft);
}
.modal__play:hover, .modal__play:focus-visible{
  border-color: var(--accent); color: var(--accent);
  transform: translate(-50%, -50%) scale(1.1);
}
.modal__play:active{ transform: translate(-50%, -50%) scale(0.96); }
.modal__play[hidden]{ display: none; }
.modal__body{ padding: 40px; }
.modal__category{
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 10px;
}
.modal__title{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 4vw, 36px); text-transform: uppercase;
  margin: 0 0 8px; line-height: 1;
}
.modal__client{ color: var(--muted); font-size: 14px; margin: 0 0 24px; }
.modal__synopsis{ font-size: 15px; line-height: 1.7; margin: 0 0 28px; color: var(--fg); opacity: 0.85; }
.modal__credits{
  margin: 0 0 28px; padding: 16px 0 0; border-top: 1px solid var(--line);
}
.modal__credits[hidden]{ display: none; }
.modal__credits-group + .modal__credits-group{ margin-top: 18px; }
.modal__credits-label{
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 8px;
}
.modal__credits ul{ list-style: none; margin: 0; padding: 0; }
.modal__credits li{ font-size: 13px; line-height: 1.9; color: var(--muted); }
.modal__links{ display: flex; flex-wrap: wrap; gap: 20px; }
.modal__link{
  display: inline-block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid var(--accent); color: var(--accent); padding-bottom: 3px;
  transition: border-color var(--dur-2) var(--ease-soft), color var(--dur-2) var(--ease-soft),
              transform var(--dur-2) var(--ease-soft);
}
.modal__link:hover{ transform: translateY(-1px); }
.modal__link--primary{
  border-bottom-color: var(--fg); color: var(--fg);
}
.modal__link--primary:hover{ border-bottom-color: var(--accent); color: var(--accent); }
.modal__link[hidden]{ display: none; }
.modal__close{
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 36px; height: 36px;
  background: color-mix(in srgb, var(--bg-raised) 80%, transparent);
  border: 1px solid var(--line); color: var(--fg);
  cursor: pointer; font-size: 14px;
  transition: border-color var(--dur-2) var(--ease-soft), color var(--dur-2) var(--ease-soft),
              transform var(--dur-1) var(--ease-soft), rotate var(--dur-2) var(--ease);
}
.modal__close:hover{ border-color: var(--accent); color: var(--accent); rotate: 90deg; }
.modal__close:active{ transform: scale(0.9); }

/* ---------- Página de proyecto ---------- */
.project{
  max-width: var(--container); margin: 0 auto;
  padding: 48px var(--edge) 0;
}
.project__crumb{ margin-bottom: 32px; }
.project__crumb a{
  display: inline-block;
  font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  transition: color var(--dur-2) var(--ease-soft), transform var(--dur-2) var(--ease);
}
.project__crumb a:hover{ color: var(--accent); transform: translateX(-4px); }

.project__hero{ margin-bottom: 32px; }
.project__category{
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 10px;
  animation: fade-up-in var(--dur-3) var(--ease) both; animation-delay: 0.05s;
}
.project__title{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(36px, 7vw, 84px); text-transform: uppercase;
  line-height: 0.96; margin: 0 0 12px;
  animation: fade-up-in var(--dur-3) var(--ease) both; animation-delay: 0.14s;
}
.project__client{
  font-size: 15px; color: var(--muted); margin: 0;
  animation: fade-up-in var(--dur-3) var(--ease) both; animation-delay: 0.26s;
}

.project__media{
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--bg-raised);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  outline: 1px solid var(--line); outline-offset: -1px;
  animation: fade-up-in var(--dur-3) var(--ease) both; animation-delay: 0.38s;
}
.project__media video, .project__media iframe{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #000; border: 0;
}

.project__body{
  max-width: 68ch; margin: 0 auto; padding: 56px 0 96px;
}
.project__section{ margin-bottom: 48px; }
.project__section-title{
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; text-transform: uppercase; letter-spacing: 0.02em;
  margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.project__synopsis{ font-size: 16px; line-height: 1.75; color: var(--fg); margin: 0; }
.project__credits .modal__credits-group{ margin-bottom: 18px; }
.project__credits ul{ list-style: none; margin: 0; padding: 0; }
.project__credits li{ font-size: 13.5px; line-height: 1.9; color: var(--muted); }

.project__behind-intro{ font-size: 14.5px; color: var(--muted); margin: 0 0 24px; max-width: 52ch; }
.project__gallery{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
}
.project__gallery[hidden]{ display: none; }
.project__gallery-item{
  position: relative;
  aspect-ratio: 4 / 5; background-color: var(--bg-raised);
  outline: 1px solid var(--line); outline-offset: -1px;
  overflow: hidden;
}
.project__gallery-item__img{
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: transform 900ms var(--ease);
}
.project__gallery-item:hover .project__gallery-item__img{ transform: scale(1.06); }
.project__gallery-empty{
  font-size: 14px; font-style: italic; color: var(--muted);
  padding: 32px; text-align: center; border: 1px dashed var(--line);
}

.project__not-found{ padding: 40px 0 120px; }
.project__not-found h1{
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: 32px; margin: 0 0 12px;
}
.project__not-found p{ color: var(--muted); }

.project__pending{
  padding: 80px 0 160px; text-align: center;
}
.project__pending-title{
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(36px, 7vw, 72px); color: var(--accent); margin: 0 0 16px;
}
.project__pending-soon{
  margin: 0; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg);
}

.project__next{
  border-top: 1px solid var(--line); text-align: center;
  padding: 48px var(--edge) 96px;
}
.project__next-label{
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 12px;
}
.project__next-link{
  display: inline-flex; align-items: baseline; gap: 16px;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(28px, 6vw, 56px);
  transition: color var(--dur-2) var(--ease-soft);
}
.project__next-link:hover{ color: var(--accent); }
.project__next-link::after{
  content: '→';
  display: inline-block;
  font-family: var(--font-body); font-size: 0.55em;
  transition: transform var(--dur-2) var(--ease);
}
.project__next-link:hover::after{ transform: translateX(12px); }

@media (max-width: 640px){
  .project__gallery{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Reveal on scroll ---------- */
/* --reveal-i (puesta por JS, índice del elemento dentro de su propio grupo: la rejilla de
   proyectos, los tres bloques de Estudio...) escalona la entrada en cascada en vez de que
   todo aparezca a la vez — la razón por la que no se siente "repetitivo": cada grupo tiene
   su propio ritmo, no un único retraso global. */
.reveal{
  opacity: 0; transform: translateY(22px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .topbar__nav{ display: none; }
  .topbar__burger{ display: flex; }
  .studio__grid{ grid-template-columns: 1fr; gap: 36px; }
  .modal__panel{ grid-template-columns: 1fr; }
  .modal__media{ min-height: 60vh; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
  ::view-transition-old(root), ::view-transition-new(root){ animation: none !important; }
}