/* ============================================================
   JESSICA VILLAMIL — Cinematógrafa
   Sistema visual. La paleta se extrajo de sus propios fotogramas
   (MÁCULA / VAINILLA): ocres de tierra 20–30°, azules crepusculares
   desaturados, negro cálido. Ninguna decisión es decorativa.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Superficies — negro cálido, no negro puro. Medido en sus stills. */
  --ink:        #100E0C;
  --ink-2:      #161311;
  --ink-3:      #1E1A17;
  --hairline:   rgba(232,226,218,.14);
  --hairline-2: rgba(232,226,218,.07);

  /* Tinta */
  --bone:       #E8E2DA;
  --bone-2:     #A9A197;
  --bone-3:     #6E665E;

  /* Acento: ocre de duna a contraluz (MÁCULA) */
  --ochre:      #C08A52;
  --dusk:       #4A5568;

  /* Tipografía */
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --sans:  "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Escala fluida */
  --t-hero:  clamp(3.2rem, 12vw, 11.5rem);
  --t-xxl:   clamp(2.4rem, 7.5vw, 6.5rem);
  --t-xl:    clamp(1.9rem, 4.4vw, 3.6rem);
  --t-lg:    clamp(1.35rem, 2.2vw, 1.85rem);
  --t-md:    clamp(1.02rem, 1.15vw, 1.14rem);
  --t-sm:    .875rem;
  --t-xs:    .75rem;
  --t-xxs:   .6875rem;

  /* Ritmo */
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --sec: clamp(5rem, 13vh, 11rem);
  --max: 1680px;
  --measure: 62ch;

  /* Movimiento — tiempos de disolvencia, no de interfaz */
  --dissolve: 900ms;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  font-size:var(--t-md);
  font-weight:340;
  line-height:1.62;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video,iframe,svg{display:block;max-width:100%}
img{height:auto;border:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--ochre);color:var(--ink)}

/* ---------- 3. UTILIDADES BASE ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:1120px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{
  position:fixed;top:.5rem;left:.5rem;z-index:1000;
  padding:.7rem 1.1rem;background:var(--bone);color:var(--ink);
  font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  transform:translateY(-160%);transition:transform .25s var(--ease);
}
.skip:focus{transform:translateY(0)}

/* Etiqueta técnica: el lenguaje del reporte de cámara */
.slug{
  font-size:var(--t-xxs);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--bone-3);
  font-variant-numeric:tabular-nums;
}
.slug--ochre{color:var(--ochre)}
.slug--bone{color:var(--bone-2)}

.rule{height:1px;background:var(--hairline-2);border:0;margin:0}

/* Premio destacado: un galardón de fotografía a su nombre es la credencial
   más fuerte del portafolio. Se marca, no se entierra en la lista. */
.premio{
  display:inline-flex;align-items:center;gap:.45em;
  font-size:var(--t-xxs);letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--ochre);
  padding:.3em .7em;
  border:1px solid rgba(192,138,82,.42);
  border-radius:1px;
  white-space:nowrap;
}
.premio::before{content:"★";font-size:.9em;line-height:1}
.premio--s{font-size:.625rem;padding:.22em .55em;letter-spacing:.12em}

/* Postnominal AMC — Asociación Mexicana de Cinematógrafos.
   Se compone en la sans, en versalitas con tracking, alineado a la altura de
   mayúsculas: se lee como credencial junto al nombre, no como decoración. */
.amc{
  font-family:var(--sans);font-style:normal;font-weight:500;
  font-size:.155em;letter-spacing:.22em;
  vertical-align:2.1em;margin-left:.42em;
  color:var(--ochre);
}
.amc--m{font-size:.32em;vertical-align:.55em;margin-left:.45em}
.amc--s{font-size:.58em;letter-spacing:.16em;vertical-align:.18em;margin-left:.3em;color:var(--ochre)}

/* Foco visible y coherente en todo el sitio */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:1px solid var(--ochre);
  outline-offset:4px;
  border-radius:1px;
}

/* Grano de película — una sola capa, fija, casi imperceptible */
.grain{
  position:fixed;inset:-50%;z-index:900;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change:transform;
  animation:grain 1.1s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-2%,1%)}
  50%{transform:translate(1%,-2%)} 75%{transform:translate(-1%,-1%)}
  100%{transform:translate(0,0)}
}

/* ---------- 4. APERTURA (fundido de entrada, como un fundido desde negro) ---------- */
.gate{
  position:fixed;inset:0;z-index:950;background:var(--ink);
  display:grid;place-items:center;
  transition:opacity 1.1s var(--ease);
}
.gate__mark{
  font-family:var(--serif);font-size:var(--t-lg);letter-spacing:.06em;
  color:var(--bone-3);
  opacity:0;animation:gateIn 1.6s var(--ease) forwards;
}
@keyframes gateIn{0%{opacity:0}40%{opacity:1}100%{opacity:.45}}
html.ready .gate{opacity:0;pointer-events:none}

/* ---------- 5. NAVEGACIÓN ---------- */
/* NO PONER `transform` NI `backdrop-filter` EN .nav.
   Ambas convierten al elemento en bloque contenedor de sus descendientes
   `position:fixed`. El panel del menú móvil es un hijo fijo a pantalla completa
   (inset:0); con transform o backdrop-filter en la barra, ese inset:0 pasa a
   referirse a la barra (~80 px de alto) en vez de a la ventana: el fondo deja de
   cubrir la página y los enlaces se desbordan sobre el contenido.
   Por eso la ocultación al hacer scroll se anima con `top`, y el vidrio
   esmerilado vive en ::after, que sí puede llevar backdrop-filter sin afectar al
   posicionamiento de sus hermanos. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:800;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--gut);
  padding:clamp(1rem,2.2vh,1.5rem) var(--gut);
  border-bottom:1px solid transparent;
  transition:top .55s var(--ease), border-color .5s var(--ease);
}
.nav::before,
.nav::after{content:"";position:absolute;left:0;right:0;pointer-events:none;transition:opacity .5s var(--ease)}
/* Degradado de legibilidad sobre imagen a sangre */
.nav::before{
  top:0;bottom:-70%;z-index:-2;
  background:linear-gradient(to bottom,rgba(16,14,12,.82) 0%,rgba(16,14,12,.45) 45%,rgba(16,14,12,0) 100%);
}
/* Vidrio esmerilado de la barra, sólo tras hacer scroll */
.nav::after{
  top:0;bottom:0;z-index:-1;opacity:0;
  background:rgba(16,14,12,.94);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
}
.nav.is-stuck::after{opacity:1}
.nav.is-stuck::before{opacity:0}
.nav.is-stuck{border-bottom-color:var(--hairline-2)}
.nav.is-hidden{top:-8rem}
/* Con el menú abierto no hay barra: el panel es la superficie. */
.nav[data-open="true"]::after,
.nav[data-open="true"]::before{opacity:0}
.nav[data-open="true"]{border-bottom-color:transparent}

.nav__id{display:flex;flex-direction:column;line-height:1.05}
.nav__name{
  font-family:var(--serif);font-size:clamp(1.05rem,1.5vw,1.3rem);
  letter-spacing:.015em;
}
.nav__role{font-size:var(--t-xxs);letter-spacing:.2em;text-transform:uppercase;color:rgba(232,226,218,.6);margin-top:.3rem}
/* En la portada el nombre ya está a tamaño de cartel: no lo repetimos en la nav
   hasta que el usuario se desplaza. */
.nav--ghost .nav__id{transition:opacity .55s var(--ease)}
.nav--ghost:not(.is-stuck) .nav__id{opacity:0;pointer-events:none}
.nav--ghost:not(.is-stuck) .nav__id:focus-visible{opacity:1}
@media (max-width:820px){ .nav--ghost:not(.is-stuck) .nav__id{opacity:1;pointer-events:auto} }

.nav__menu{display:flex;align-items:center;gap:clamp(1.2rem,2.6vw,2.6rem)}
.nav__link{
  position:relative;
  font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;font-weight:450;
  color:var(--bone-2);
  padding:.35rem 0;
  transition:color .35s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav__link:hover,.nav__link:focus-visible{color:var(--bone)}
.nav__link:hover::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:var(--bone)}
.nav__link[aria-current="page"]::after{transform:scaleX(1);background:var(--ochre)}

.nav__toggle{
  display:none;width:44px;height:44px;margin-right:-8px;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.nav__toggle span{display:block;width:22px;height:1px;background:var(--bone);transition:transform .4s var(--ease),opacity .3s}
.nav[data-open="true"] .nav__toggle span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav[data-open="true"] .nav__toggle span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

@media (max-width:820px){
  .nav__toggle{display:flex}
  /* En móvil la barra NO se auto-oculta. Si se esconde al bajar, el botón del
     menú queda fuera de la pantalla y hay que volver a subir para alcanzarlo:
     el único acceso a la navegación deja de estar disponible. En escritorio sí
     se oculta, porque allí los enlaces están siempre a la vista al subir. */
  .nav.is-hidden{top:0}
  /* Panel a pantalla completa. z-index positivo: no depende del apilado de la
     barra. El nombre y el botón se elevan por encima para seguir visibles. */
  .nav__menu{
    position:fixed;inset:0;z-index:1;
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:.35rem;
    padding:0 var(--gut);
    background:var(--ink);
    overscroll-behavior:contain;
    opacity:0;visibility:hidden;
    transition:opacity .5s var(--ease),visibility .5s;
  }
  .nav[data-open="true"]{background:transparent}
  .nav[data-open="true"] .nav__menu{opacity:1;visibility:visible}
  .nav__id,
  .nav__toggle{position:relative;z-index:2}
  .nav__link{
    font-family:var(--serif);font-size:clamp(2rem,9vw,3rem);
    letter-spacing:.01em;text-transform:none;color:var(--bone);
    padding:.28em 0;
    opacity:0;transform:translateY(14px);
  }
  .nav[data-open="true"] .nav__link{
    opacity:1;transform:none;
    transition:opacity .6s var(--ease) calc(.08s * var(--i,0)), transform .6s var(--ease) calc(.08s * var(--i,0));
  }
  .nav__link::after{display:none}
  .nav__link[aria-current="page"]{color:var(--ochre)}
  .nav__menu .nav__social{
    margin-top:2.5rem;display:flex;gap:1.6rem;
    font-family:var(--sans);font-size:var(--t-xs);letter-spacing:.18em;
    text-transform:uppercase;color:var(--bone-3);
  }
}
@media (min-width:821px){ .nav__menu .nav__social{display:none} }

/* ---------- 6. HERO ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--ink)}
.hero__frames{position:absolute;inset:0}
.hero__frame{
  position:absolute;inset:0;opacity:0;
  transition:opacity var(--dissolve) linear;
}
.hero__frame.is-on{opacity:1}
.hero__frame img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.045);
  transition:transform 9s linear;
}
.hero__frame.is-on img{transform:scale(1)}
/* Vignette + rampa inferior: la imagen respira, el texto se lee.
   Va sobre .hero__frames (no sobre .hero) para que en móvil cubra sólo el
   fotograma y no el bloque tipográfico. */
.hero__frames::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(16,14,12,.5) 100%),
    linear-gradient(to top, var(--ink) 0%, rgba(16,14,12,.82) 12%, rgba(16,14,12,.3) 42%, rgba(16,14,12,.14) 62%, rgba(16,14,12,.55) 100%);
}
.hero__inner{
  position:relative;z-index:2;height:100%;
  display:grid;align-content:end;
  padding:0 var(--gut) clamp(2rem,6vh,4.5rem);
  max-width:var(--max);margin-inline:auto;
}
.hero__name{
  font-family:var(--serif);font-weight:400;
  font-size:var(--t-hero);line-height:.86;letter-spacing:-.018em;
  text-wrap:balance;
}
.hero__name span{display:block}
.hero__name em{font-style:italic}
.hero__meta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.6rem;
  margin-top:clamp(1rem,2.4vh,1.8rem);
  padding-top:clamp(.9rem,2vh,1.4rem);
  border-top:1px solid var(--hairline);
}
.hero__role{font-size:var(--t-sm);letter-spacing:.2em;text-transform:uppercase;color:var(--bone)}
.hero__place{font-size:var(--t-xxs);letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3)}

/* Pie de fotograma: la web nombra su propia imagen. */
.hero__caption{
  position:absolute;right:var(--gut);bottom:clamp(2rem,6vh,4.5rem);z-index:2;
  text-align:right;max-width:min(42vw,340px);
}
.hero__caption b{display:block;font-weight:inherit;color:var(--bone-2);letter-spacing:.2em}
.hero__caption em{font-style:normal;color:var(--bone-3)}
@media (max-width:700px){
  .hero__caption{position:static;text-align:left;max-width:none;margin-top:1.4rem}
  .hero__name{font-size:clamp(3rem,15vw,5rem)}
}
/* PANTALLA VERTICAL (móvil y tablet en retrato) — decisión de dirección de arte:
   un fotograma 16:9 no se recorta a vertical. La imagen conserva su encuadre
   arriba y la tipografía ocupa el negro inferior, como en un cartel de cine.
   El disparador es la proporción de la pantalla, no el ancho. */
@media (orientation:portrait){
  .hero{height:auto;min-height:96svh;display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr)}
  .hero__frames{position:relative;inset:auto;width:100%;min-width:0;aspect-ratio:16/9;margin-top:5.4rem}
  .hero__inner{align-content:center;padding-top:2rem;min-width:0;max-width:none;margin-inline:0}
  .hero__caption{position:static;text-align:left;max-width:none;margin-top:1.4rem}
}
.hero__cue{
  position:absolute;left:50%;bottom:1.1rem;z-index:2;transform:translateX(-50%);
  display:grid;justify-items:center;gap:.5rem;
}
.hero__cue i{display:block;width:1px;height:34px;background:linear-gradient(var(--bone-3),transparent);animation:cue 2.6s var(--ease-io) infinite}
@keyframes cue{0%,100%{transform:scaleY(.3);opacity:.3}50%{transform:scaleY(1);opacity:1}}
@media (max-width:700px),(orientation:portrait){.hero__cue{display:none}}

/* ---------- 7. SECCIONES ---------- */
.sec{padding-block:var(--sec)}
.sec--tight{padding-block:clamp(3rem,8vh,6rem)}
.sec__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding-bottom:1.1rem;margin-bottom:clamp(2rem,5vh,3.5rem);
  border-bottom:1px solid var(--hairline-2);
}
.sec__title{font-size:var(--t-xs);letter-spacing:.24em;text-transform:uppercase;color:var(--bone-2);font-weight:500}
.sec__more{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3);transition:color .35s var(--ease)}
.sec__more:hover{color:var(--ochre)}
.sec__more span{display:inline-block;transition:transform .4s var(--ease)}
.sec__more:hover span{transform:translateX(5px)}

/* Statement editorial */
.state{max-width:24ch;}
.state__q{
  font-family:var(--serif);font-size:var(--t-xxl);line-height:1.02;letter-spacing:-.012em;
  text-wrap:balance;
}
.state__q em{font-style:italic;color:var(--ochre)}
.state__body{max-width:var(--measure);color:var(--bone-2);margin-top:clamp(1.6rem,4vh,2.6rem)}
.state__grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem)}
@media (min-width:900px){
  .state__grid{grid-template-columns:1.05fr .95fr;align-items:start}
  .state{max-width:none}
}

/* ---------- 8. ÍNDICE DE OBRA (lista editorial con previsualización) ---------- */
.index{position:relative}
.index__list{border-top:1px solid var(--hairline-2)}
.index__item{border-bottom:1px solid var(--hairline-2)}
.index__link{
  display:grid;align-items:baseline;gap:.35rem 1.5rem;
  grid-template-columns:1fr auto;
  padding:clamp(1.1rem,2.6vh,1.75rem) 0;
  transition:color .4s var(--ease), padding-left .5s var(--ease);
}
.index__num{
  grid-row:1/3;grid-column:1;
  display:none;
}
.index__title{
  grid-column:1;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.55rem,4.4vw,3.1rem);line-height:1.02;letter-spacing:-.012em;
  color:var(--bone);
  transition:color .4s var(--ease), opacity .4s var(--ease);
}
.index__title i{font-style:italic;color:var(--bone-3);font-size:.42em;letter-spacing:.02em;vertical-align:.35em;margin-left:.7em;white-space:nowrap}
/* En móvil el título internacional se omite: está en la página del proyecto. */
@media (max-width:759px){ .index__title i{display:none} }
.index__meta{
  grid-column:1;
  display:flex;flex-wrap:wrap;gap:.2rem .9rem;
  margin-top:.35rem;
}
.index__dir{font-size:var(--t-xs);letter-spacing:.06em;color:var(--bone-2)}
.index__tag{font-size:var(--t-xxs);letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3)}
.index__year{
  grid-column:2;grid-row:1;
  font-size:var(--t-xs);letter-spacing:.12em;color:var(--bone-3);
  font-variant-numeric:tabular-nums;
}
@media (min-width:900px){
  .index__link{grid-template-columns:4.5rem 1fr auto;gap:0 2rem}
  .index__num{display:block;grid-column:1;grid-row:1;font-size:var(--t-xxs);letter-spacing:.14em;color:var(--bone-3);font-variant-numeric:tabular-nums;padding-top:.9em}
  .index__title{grid-column:2}
  .index__meta{grid-column:2}
  .index__year{grid-column:3;padding-top:.9em}
  /* atenuar el resto al pasar el cursor: el foco es cinematográfico */
  .index__list:hover .index__title{opacity:.32}
  .index__link:hover .index__title{opacity:1}
  .index__link:hover{padding-left:1.1rem}
}
/* Previsualización que sigue al cursor.
   La proporción se toma de la imagen real: un cartel se ve completo, como
   cartel, no recortado a un rectángulo panorámico. */
.index__peek{
  position:fixed;top:0;left:0;z-index:700;pointer-events:none;
  width:clamp(230px,23vw,380px);aspect-ratio:var(--pr,16/10);
  opacity:0;
  /* El seguimiento del cursor lo escribe JS en --px/--py; el centrado vive aquí.
     No hay transición en transform: el arrastre ya lo suaviza el lerp del rAF. */
  transform:translate3d(var(--px,50vw),var(--py,50vh),0) translate(-50%,-50%);
  transition:opacity .4s var(--ease);
  overflow:hidden;background:var(--ink-2);
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}
/* Carteles (vertical): se dimensionan por altura para que quepan enteros
   en pantalla y se lea el arte. */
.index__peek[data-orient="portrait"]{
  width:auto;height:min(62vh,560px);
  box-shadow:0 24px 80px rgba(0,0,0,.72);
}
.index__peek.is-on{opacity:1}
.index__peek img{width:100%;height:100%;object-fit:contain}
@media (hover:none),(max-width:899px){.index__peek{display:none}}

/* ---------- 9. TARJETAS DE PROYECTO (grid editorial asimétrico) ---------- */
.works{display:grid;gap:clamp(2.5rem,6vw,5rem) clamp(1.5rem,3vw,3rem);grid-template-columns:1fr}
@media (min-width:760px){ .works{grid-template-columns:repeat(12,1fr)} }
.work{position:relative;grid-column:1/-1}
@media (min-width:760px){
  .work--wide{grid-column:1/-1}
  .work--l{grid-column:1/8}
  .work--r{grid-column:8/-1;align-self:end}
  .work--half{grid-column:span 6}
  .work--offset{margin-top:clamp(2rem,8vw,7rem)}
}
.work__media{
  position:relative;overflow:hidden;background:var(--ink-2);
  aspect-ratio:16/9;
}
.work__media--poster{aspect-ratio:2/3}
/* Ficha tipográfica para proyectos sin cartel: compuesta, no un hueco. */
.card{
  aspect-ratio:4/5;
  display:grid;align-content:center;justify-items:start;gap:.5rem;
  padding:clamp(1.5rem,4vw,2.4rem);
  background:
    linear-gradient(180deg,rgba(192,138,82,.05),transparent 45%),
    var(--ink-2);
  border:1px solid var(--hairline-2);
  transition:border-color .5s var(--ease),background .5s var(--ease);
}
.work:hover .card{border-color:rgba(192,138,82,.4)}
.card__rule{width:100%;height:1px;background:var(--hairline-2)}
.card__t{
  font-family:var(--serif);font-size:clamp(1.6rem,3.2vw,2.4rem);
  line-height:1.05;letter-spacing:-.012em;color:var(--bone);
  margin-block:.5rem;
}
.card__i{font-family:var(--serif);font-style:italic;color:var(--bone-3);font-size:1.05rem;margin-top:-.3rem}
.card__dir{font-size:var(--t-sm);color:var(--bone-2);margin-top:.5rem}
.card__y{margin-top:.15rem}
/* Los carteles conservan su proporción original: son obra gráfica, no thumbnails. */
.work__media--art{aspect-ratio:auto}
.work__media--art img{height:auto}
.work__media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.001);
  transition:transform 1.4s var(--ease), filter 1s var(--ease);
}
.work:hover .work__media img{transform:scale(1.045)}
.work__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(16,14,12,.55),transparent 55%);
  opacity:0;transition:opacity .7s var(--ease);
}
.work:hover .work__media::after{opacity:1}
.work__body{padding-top:1.05rem;display:grid;gap:.3rem}
.work__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.04;letter-spacing:-.01em;
}
.work__line{display:flex;flex-wrap:wrap;gap:.2rem .8rem;align-items:baseline}
.work__dir{font-size:var(--t-sm);color:var(--bone-2)}
/* Los fotogramas se muestran en su proporción original (16:9). Recortar el
   encuadre de una directora de fotografía sería traicionar el trabajo. */
.work--wide .work__media{aspect-ratio:16/9}

/* ---------- 10. REEL / VIDEO (fachada: cero JS de terceros hasta el clic) ---------- */
.player{position:relative;background:var(--ink-2);overflow:hidden;aspect-ratio:16/9}
.player img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease),opacity .6s var(--ease)}
.player__btn{
  position:absolute;inset:0;display:grid;place-items:center;gap:0;
  width:100%;height:100%;
}
.player__btn::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(16,14,12,.6),rgba(16,14,12,.05) 60%);
  transition:background .6s var(--ease);
}
.player:hover img{transform:scale(1.03)}
.player__ring{
  position:relative;display:grid;place-items:center;
  width:clamp(64px,7vw,92px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(232,226,218,.55);
  background:rgba(16,14,12,.18);
  backdrop-filter:blur(2px);
  transition:border-color .5s var(--ease),background .5s var(--ease),transform .6s var(--ease);
}
.player:hover .player__ring{border-color:var(--bone);background:rgba(16,14,12,.32);transform:scale(1.06)}
.player__ring svg{width:.9rem;margin-left:.15rem;fill:var(--bone)}
.player__label{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 1rem;
  padding:clamp(1rem,2.6vw,1.8rem);
  text-align:left;
}
.player__t{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.9rem);letter-spacing:.01em}
.player.is-live img,.player.is-live .player__btn{display:none}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- 10b. ÍNDICE DE ENLACES A VIMEO ---------- */
.vlink__list{border-top:1px solid var(--hairline-2)}
.vlink__item{border-bottom:1px solid var(--hairline-2)}
.vlink{
  display:grid;align-items:baseline;
  grid-template-columns:auto 1fr auto;
  gap:.15rem .9rem;
  padding:1rem 0;
  transition:padding-left .5s var(--ease);
}
.vlink__play{
  grid-row:1/3;grid-column:1;align-self:center;
  display:grid;place-items:center;
  width:34px;aspect-ratio:1;border-radius:50%;
  border:1px solid var(--hairline);
  transition:border-color .4s var(--ease),background .4s var(--ease),transform .5s var(--ease);
}
.vlink__play svg{width:.42rem;margin-left:.08rem;fill:var(--bone-2);transition:fill .4s var(--ease)}
.vlink:hover .vlink__play{border-color:var(--ochre);background:rgba(192,138,82,.12);transform:scale(1.08)}
.vlink:hover .vlink__play svg{fill:var(--ochre)}
.vlink__t{
  grid-column:2;
  font-family:var(--serif);font-size:clamp(1.2rem,2.1vw,1.7rem);line-height:1.1;
  transition:color .4s var(--ease);
}
.vlink:hover .vlink__t{color:var(--ochre)}
.vlink__m{grid-column:2;grid-row:2}
.vlink__go{grid-column:3;grid-row:1;color:var(--bone-3);transition:color .4s var(--ease)}
.vlink:hover .vlink__go{color:var(--bone-2)}
@media (min-width:640px){ .vlink:hover{padding-left:.9rem} }
@media (max-width:520px){
  .vlink{grid-template-columns:auto 1fr}
  .vlink__go{grid-column:2;grid-row:3;margin-top:.25rem}
}

/* ---------- 11. PÁGINA DE PROYECTO ---------- */
.ph{position:relative;min-height:min(86svh,860px);display:grid;align-items:end;overflow:hidden}
.ph__bg{position:absolute;inset:0}
.ph__bg img{width:100%;height:100%;object-fit:cover}
.ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--ink) 0%,rgba(16,14,12,.86) 13%,rgba(16,14,12,.3) 46%,rgba(16,14,12,.5) 100%);
}
.ph__inner{position:relative;z-index:2;width:100%;max-width:var(--max);margin-inline:auto;padding:0 var(--gut) clamp(2.4rem,6vh,4rem)}
.ph--flat{min-height:0;padding-top:calc(clamp(1rem,2.2vh,1.5rem) + clamp(6rem,14vh,9rem))}
.ph--flat .ph__inner{padding-bottom:0}
.ph--flat + .sec{padding-top:clamp(2.5rem,7vh,4.5rem)}
.ph--flat::after{display:none}
@media (orientation:portrait){
  /* Mismo criterio que en la portada: el fotograma no se recorta a vertical. */
  .ph:not(.ph--flat){min-height:0;display:block}
  .ph:not(.ph--flat) .ph__bg{position:relative;inset:auto;aspect-ratio:16/9;margin-top:5.4rem}
  .ph:not(.ph--flat)::after{display:none}
  .ph:not(.ph--flat) .ph__bg::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to top,var(--ink) 0%,rgba(16,14,12,.45) 34%,transparent 68%);
  }
  .ph:not(.ph--flat) .ph__inner{padding-top:1.6rem}
}
.ph__over{font-size:var(--t-xxs);letter-spacing:.24em;text-transform:uppercase;color:var(--ochre);margin-bottom:1rem}
.ph__title{
  font-family:var(--serif);font-weight:400;
  font-size:var(--t-xxl);line-height:.94;letter-spacing:-.016em;text-wrap:balance;
}
.ph__int{font-family:var(--serif);font-style:italic;font-size:var(--t-lg);color:var(--bone-3);margin-top:.5rem}
.ph__line{
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;
  margin-top:clamp(1.1rem,3vh,1.8rem);padding-top:1.1rem;
  border-top:1px solid var(--hairline);
}

/* Bloque de créditos — notación de claqueta */
.credits{display:grid;gap:0;border-top:1px solid var(--hairline-2)}
.credits__row{
  display:grid;grid-template-columns:1fr;gap:.15rem;
  padding:.95rem 0;border-bottom:1px solid var(--hairline-2);
}
@media (min-width:640px){
  .credits__row{grid-template-columns:minmax(9rem,15rem) 1fr;gap:1.5rem;align-items:baseline}
}
.credits__k{font-size:var(--t-xxs);letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3);padding-top:.15em}
.credits__v{color:var(--bone);font-size:var(--t-md)}
.credits__v a{border-bottom:1px solid var(--hairline);transition:border-color .3s,color .3s}
.credits__v a:hover{color:var(--ochre);border-color:var(--ochre)}

.proj__grid{display:grid;gap:clamp(2.5rem,6vw,5rem);grid-template-columns:1fr}
@media (min-width:960px){ .proj__grid{grid-template-columns:1fr 1fr;align-items:start} }
.proj__log{font-size:var(--t-lg);line-height:1.45;max-width:46ch;color:var(--bone);font-weight:320}
.proj__poster{max-width:340px}
.proj__poster img{width:100%}
.proj__poster figcaption{margin-top:.7rem}
@media (min-width:960px){
  .proj__poster{margin-left:auto;position:sticky;top:calc(clamp(1rem,2.2vh,1.5rem) + 5.5rem)}
}

/* Galería de fotogramas — ritmo de montaje, no cuadrícula uniforme */
.frames{display:grid;gap:clamp(.5rem,1.4vw,1.1rem);grid-template-columns:repeat(6,1fr)}
.frames figure{grid-column:span 6;margin:0;position:relative;overflow:hidden;background:var(--ink-2)}
@media (min-width:760px){
  .frames figure{grid-column:span 3}
  .frames figure.f--full{grid-column:span 6}
  .frames figure.f--two{grid-column:span 2}
  .frames figure.f--four{grid-column:span 4}
}
.frames img{width:100%;cursor:zoom-in;transition:transform 1.5s var(--ease),opacity .8s var(--ease)}
.frames figure:hover img{transform:scale(1.028)}

/* Festivales */
.fest{columns:1;column-gap:clamp(2rem,4vw,3.5rem);max-width:none}
@media (min-width:700px){.fest{columns:2}}
@media (min-width:1200px){.fest{columns:3}}
.fest li{
  break-inside:avoid;padding:.6rem 0;border-bottom:1px solid var(--hairline-2);
  font-size:var(--t-sm);color:var(--bone-2);
}
.fest li b{font-weight:500;color:var(--ochre)}

/* Navegación siguiente proyecto */
.nextp{position:relative;display:grid;overflow:hidden;background:var(--ink-2);min-height:clamp(240px,38vh,420px)}
.nextp .ld{opacity:.42;transition:opacity 1s var(--ease),transform 1.6s var(--ease)}
.nextp:hover .ld{opacity:.66;transform:scale(1.035)}
.nextp__in{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.7rem;text-align:center;padding:var(--gut)}
.nextp--text{border-top:1px solid var(--hairline-2);border-bottom:1px solid var(--hairline-2);background:transparent}
.nextp__thumb{max-width:110px;margin-inline:auto;opacity:.85}
.nextp__t{font-family:var(--serif);font-size:var(--t-xl);line-height:1.02}

/* ---------- 11b. DIARIO ---------- */
/* Índice de entradas */
.post__list{border-top:1px solid var(--hairline-2)}
.post__item{border-bottom:1px solid var(--hairline-2)}
.post__link{
  display:grid;gap:clamp(1rem,2.5vw,2.2rem);
  grid-template-columns:1fr;
  padding:clamp(1.6rem,3.5vh,2.6rem) 0;
  transition:padding-left .5s var(--ease);
}
@media (min-width:760px){
  .post__link{grid-template-columns:minmax(0,34%) 1fr;align-items:start}
  /* Sin foto de portada el texto ocupa el ancho completo, en vez de quedarse
     encogido en la columna de la imagen que no existe. */
  .post__link--texto{grid-template-columns:1fr}
  .post__link--texto .post__body{max-width:70ch}
  .post__link:hover{padding-left:1rem}
}
/* Página de artículo: contenedor más estrecho para que el titular y el texto
   compartan eje y la mancha no quede perdida en 1680 px. */
.art .ph__inner,
.art .wrap{max-width:1120px}
/* ...salvo la galería de fotos: la medida corta es para el texto, no para la
   obra de una fotógrafa. */
.art .wrap--ancho{max-width:var(--max)}
.post__thumb{display:block;overflow:hidden;background:var(--ink-2)}
.post__thumb img{transition:transform 1.4s var(--ease)}
.post__link:hover .post__thumb img{transform:scale(1.05)}
.post__body{display:grid;gap:.5rem;align-content:start}
.post__t{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.06;letter-spacing:-.012em;
  color:var(--bone);transition:color .4s var(--ease);
}
.post__link:hover .post__t{color:var(--ochre)}
.post__r{color:var(--bone-2);max-width:56ch}
.post__leer{margin-top:.4rem}
.post__leer span{display:inline-block;transition:transform .4s var(--ease)}
.post__link:hover .post__leer span{transform:translateX(5px)}
.post__vacio{color:var(--bone-3);font-family:var(--serif);font-size:var(--t-lg)}

/* Artículo */
.post__hero{width:100%;overflow:hidden;aspect-ratio:21/9;position:relative;background:var(--ink-2)}
@media (max-width:700px){ .post__hero{aspect-ratio:16/9} }
.post__title{max-width:22ch}

/* Columna de lectura: medida corta, interlínea alta, tinta ligeramente
   rebajada. Leer en pantalla oscura cansa si el blanco es puro. */
.post{
  max-width:68ch;
  font-size:clamp(1.06rem,1.25vw,1.19rem);
  line-height:1.78;
  color:#D8D2C9;
}
.post > * + *{margin-top:1.3em}
.post h2,.post h3,.post h4{
  font-family:var(--serif);font-weight:400;color:var(--bone);
  line-height:1.14;letter-spacing:-.01em;
  margin-top:2.2em;margin-bottom:-.5em;
}
.post h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.post h3{font-size:clamp(1.35rem,2.2vw,1.7rem)}
.post h4{font-size:1.2rem}
.post strong{color:var(--bone);font-weight:500}
.post em{font-style:italic}
.post a{color:var(--bone);border-bottom:1px solid var(--hairline);transition:color .3s,border-color .3s}
.post a:hover{color:var(--ochre);border-color:var(--ochre)}
.post ul,.post ol{padding-left:1.15em}
.post ul li{list-style:none;position:relative}
.post ul li::before{content:"—";position:absolute;left:-1.15em;color:var(--bone-3)}
.post ol{list-style:decimal;color:var(--bone-3)}
.post ol li{padding-left:.2em}
.post ol li::marker{font-variant-numeric:tabular-nums;font-size:.85em}
.post li + li{margin-top:.45em}
.post blockquote{
  margin-block:2em;padding-left:clamp(1rem,3vw,1.8rem);
  border-left:1px solid var(--ochre);
  font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.75rem);
  line-height:1.28;color:var(--bone);
}
.post blockquote p + p{margin-top:.5em}
.post hr{border:0;height:1px;background:var(--hairline-2);margin-block:2.5em}
.post code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--ink-3);padding:.15em .4em;border-radius:2px;color:var(--bone-2);
}
.post pre{background:var(--ink-2);padding:1.2rem;overflow-x:auto;border:1px solid var(--hairline-2)}
.post pre code{background:none;padding:0}
/* Las imágenes salen de la medida de lectura: son el material de una DF. */
.post__fig{margin-block:2.4em}
@media (min-width:900px){
  .post__fig{width:min(96vw,1100px);margin-left:calc(50% - min(48vw,550px))}
}
.post__fig figcaption{margin-top:.7rem}

/* ---------- 12. SOBRE ---------- */
.about__lead{
  font-family:var(--serif);font-size:var(--t-xl);line-height:1.12;letter-spacing:-.01em;
  max-width:34ch;text-wrap:balance;
}
.about__cols{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr}
@media (min-width:900px){.about__cols{grid-template-columns:.85fr 1fr;align-items:start}}
/* Retrato editorial: proporción original, sin recortar. */
.about__portrait{margin:0;max-width:520px}
.about__portrait img{width:100%}
.about__portrait figcaption{margin-top:.8rem}
.about__p{color:var(--bone-2);max-width:var(--measure)}
.about__p+.about__p{margin-top:1.1em}
.dl{display:grid;gap:0;border-top:1px solid var(--hairline-2)}
.dl>div{display:grid;gap:.2rem;padding:.9rem 0;border-bottom:1px solid var(--hairline-2)}
@media (min-width:640px){.dl>div{grid-template-columns:minmax(8rem,12rem) 1fr;gap:1.5rem;align-items:baseline}}

/* ---------- 13. CONTACTO ---------- */
.cta{
  display:inline-flex;align-items:center;gap:1rem;
  font-family:var(--serif);font-size:var(--t-xl);line-height:1;
  padding-bottom:.18em;border-bottom:1px solid var(--hairline);
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.cta:hover{color:var(--ochre);border-color:var(--ochre)}
.cta svg{width:.55em;fill:none;stroke:currentColor;stroke-width:1.2;transition:transform .5s var(--ease)}
.cta:hover svg{transform:translate(.25em,-.25em)}
.contact__grid{display:grid;gap:clamp(2.5rem,6vw,5rem);grid-template-columns:1fr}
@media (min-width:900px){.contact__grid{grid-template-columns:1.1fr .9fr}}

/* ---------- 14. PIE ---------- */
.foot{padding-block:clamp(3rem,8vh,6rem) 2rem;border-top:1px solid var(--hairline-2)}
.foot__top{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;align-items:end}
@media (min-width:800px){.foot__top{grid-template-columns:1.4fr 1fr 1fr}}
.foot__name{font-family:var(--serif);font-size:var(--t-xl);line-height:1;letter-spacing:-.01em}
.foot__list{display:grid;gap:.55rem}
.foot__list a{font-size:var(--t-sm);color:var(--bone-2);transition:color .3s}
.foot__list a:hover{color:var(--ochre)}
.foot__bot{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.5rem;
  margin-top:clamp(2.5rem,6vh,4rem);padding-top:1.2rem;border-top:1px solid var(--hairline-2);
}

/* ---------- 15. LIGHTBOX ---------- */
.lb{
  position:fixed;inset:0;z-index:950;display:grid;place-items:center;
  background:#0A0908;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
  padding:clamp(1rem,5vh,3.5rem) clamp(1rem,4vw,4rem);
}
.lb[data-open="true"]{opacity:1;visibility:visible}
.lb__img{max-width:100%;max-height:100%;object-fit:contain;transform:scale(.97);transition:transform .6s var(--ease)}
.lb[data-open="true"] .lb__img{transform:none}
.lb__bar{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(1rem,3vw,1.6rem);
}
.lb__x{position:absolute;top:0;right:0;width:64px;height:64px;display:grid;place-items:center}
.lb__x svg{width:16px;stroke:var(--bone);stroke-width:1.2}
.lb__nav{display:flex;gap:.25rem}
.lb__nav button{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--hairline);transition:border-color .3s,background .3s}
.lb__nav button:hover{border-color:var(--bone-2);background:rgba(232,226,218,.06)}
.lb__nav svg{width:14px;stroke:var(--bone);stroke-width:1.3;fill:none}

/* ---------- 16. REVELADO AL SCROLL ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}

/* Carga progresiva de imágenes: del LQIP al fotograma */
.ld{background-size:cover;background-position:center}
.ld img{opacity:0;transition:opacity .85s var(--ease)}
.ld img.is-loaded{opacity:1}
/* Variante que llena su contenedor: la caja manda, no la proporción del archivo.
   Se usa sólo donde el recuadro ya define el encuadre (hero, cabeceras, reproductor). */
.ld picture{display:block;height:100%}

/* ---------- PROTECCIÓN DE LAS IMÁGENES ----------
   Honestidad por delante: en la web NO existe forma de impedir la descarga.
   Cualquiera puede hacer una captura de pantalla o abrir el inspector. Lo que
   sí se puede es cerrar las puertas fáciles, que son por las que entra el 99 %:
     · -webkit-touch-callout — quita el menú de «Guardar imagen» al dejar el
       dedo pulsado en móvil, que es la vía más común con diferencia;
     · user-drag / user-select — impiden arrastrar la foto al escritorio;
     · el bloqueo del clic derecho vive en main.js.
   La protección real es no servir nunca un archivo de calidad de impresión. */
.ld img, .frames img, .lb__img, .post__fig img, .proj__poster img{
  -webkit-touch-callout:none;
  -webkit-user-drag:none;
  -khtml-user-drag:none;
  -moz-user-drag:none;
  user-drag:none;
  -webkit-user-select:none;
  user-select:none;
  pointer-events:auto;   /* se mantiene: el visor necesita el clic */
}
.ld--fill{position:absolute;inset:0;width:100%;height:100%}
.ld--fill img{width:100%;height:100%;object-fit:cover}

/* ---------- 17. CURSOR (retícula de encuadre, solo puntero fino) ---------- */
@media (hover:hover) and (pointer:fine){
  .cur{
    position:fixed;top:0;left:0;z-index:990;pointer-events:none;
    width:46px;height:46px;margin:-23px 0 0 -23px;
    opacity:0;transform:scale(.5);
    transition:opacity .3s var(--ease),transform .4s var(--ease);
  }
  .cur.is-on{opacity:1;transform:scale(1)}
  .cur i{position:absolute;background:var(--bone)}
  .cur i:nth-child(1){top:0;left:0;width:10px;height:1px}
  .cur i:nth-child(2){top:0;left:0;width:1px;height:10px}
  .cur i:nth-child(3){top:0;right:0;width:10px;height:1px}
  .cur i:nth-child(4){top:0;right:0;width:1px;height:10px}
  .cur i:nth-child(5){bottom:0;left:0;width:10px;height:1px}
  .cur i:nth-child(6){bottom:0;left:0;width:1px;height:10px}
  .cur i:nth-child(7){bottom:0;right:0;width:10px;height:1px}
  .cur i:nth-child(8){bottom:0;right:0;width:1px;height:10px}
}
@media not all and (pointer:fine){.cur{display:none}}

/* ---------- 18. MOVIMIENTO REDUCIDO ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .grain{display:none}
  .rv{opacity:1;transform:none}
  .hero__frame img{transform:none}
  .cur{display:none}
  .ld img{opacity:1}
}

/* ---------- 19. IMPRESIÓN ---------- */
@media print{
  .nav,.grain,.gate,.cur,.hero__cue,.lb{display:none !important}
  body{background:#fff;color:#111}
  .ph::after,.hero::after{display:none}
  a{text-decoration:underline}
}