/* ==========================================================================
   TAPER — Eugeni Sánchez · Filmmaker & editor
   Sistema "Celuloide y agua"
   Tres colores · una tipografía · una cursiva · cero sombras
   ========================================================================== */

:root{
  --film:      #0B0B0A;
  --film-2:    #101010;
  --void:      #000000;
  --celluloid: #ECE4B4;
  --dim:       #8C887A;
  --signal:    #FF2936;

  --rule:      rgba(236,228,180,.16);
  --rule-soft: rgba(236,228,180,.085);

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif:"Instrument Serif", "Didot", Georgia, serif;

  --pad:     clamp(20px, 4.6vw, 72px);
  --sec:     clamp(72px, 10vw, 132px);
  --breathe: clamp(120px, 17vw, 240px);
  --breathe-sm: clamp(44px, 6vw, 96px);   /* el hueco de «Sobre mí» */
  --measure: 62ch;
  --nav-h:   clamp(64px, 6vw, 84px);

  --expo:   cubic-bezier(.19, 1, .22, 1);
  --weight: cubic-bezier(.625, .05, 0, 1);

  /* curvas continuas, estilo Apple: cada tamaño lleva la suya para que la
     esquina se vea igual de suave en una miniatura y en una foto grande */
  --r-foto:    clamp(16px, 1.8vw, 26px);   /* el retrato */
  --r-tarjeta: clamp(15px, 1.6vw, 22px);   /* las reseñas */
  --r-ep:      clamp(12px, 1.3vw, 18px);   /* episodios y clips de rodaje */
  --r-mini:    clamp(10px, .95vw, 14px);   /* miniaturas del collage */
  --r-logo:    clamp(14px, 1.6vw, 20px);   /* logos de las escuelas */
}

/* Donde el navegador sepa dibujarla, la esquina es una curva continua —la de
   Apple— en lugar de un cuarto de círculo. Donde no, se ve redondeada normal. */
.qcard,
.mini__media, .mini__media::after,
.ep__media, .ep__media::after,
.about__portrait,
.school__logo,
.bts video{ corner-shape:squircle }

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
/* al tocar un enlace en el móvil, nada de recuadro azul */
a,button{ -webkit-tap-highlight-color:transparent }

body{
  margin:0;
  background:var(--film);
  color:var(--celluloid);
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  line-height:1.55;
  overflow-wrap:break-word;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,video,canvas{ display:block; max-width:100% }
h1,h2,h3,h4{ margin:0; font-weight:300; letter-spacing:-.025em; text-wrap:balance }
p{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
li{ list-style:none }
a{ color:inherit; text-decoration:none }
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--signal); outline-offset:4px }
::selection{ background:var(--signal); color:var(--film) }

.wrap{ width:100%; max-width:1440px; margin-inline:auto; padding-inline:var(--pad) }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--signal); color:var(--film); padding:12px 18px;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.skip:focus{ left:0 }

.eyebrow{
  display:block; font-size:11px; font-weight:500; line-height:1.4;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
}
.eyebrow.hot{ color:var(--signal) }
em.q{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.005em }

.linkline{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  padding-bottom:6px; border-bottom:1px solid var(--rule);
  transition:border-color .3s var(--weight);
}
.linkline::before{
  content:""; width:6px; height:6px; background:var(--signal);
  transform:scale(0); transition:transform .35s var(--expo);
}
.linkline::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--signal);
  transform:scaleX(0); transform-origin:left; transition:transform .55s var(--expo);
}
.linkline:focus-visible::after{ transform:scaleX(1) }

/* ==========================================================================
   NAVEGACIÓN
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:95; height:var(--nav-h);
  display:flex; align-items:center; gap:24px;
  padding-inline:var(--pad);
  background:transparent;
  transition:background .45s var(--weight), border-color .45s var(--weight), opacity .7s var(--weight);
  border-bottom:1px solid transparent;
}
/* el velo se derrama por debajo del nav: sin corte recto contra la imagen */
.nav::after{
  content:""; position:absolute; inset:0 0 auto 0; height:250%; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(11,11,10,.86) 0%, rgba(11,11,10,.62) 34%, rgba(11,11,10,.28) 64%, rgba(11,11,10,0) 100%);
  transition:opacity .45s var(--weight);
}
.nav.solid{ background:var(--film); border-bottom-color:var(--rule) }
.nav.solid::after{ opacity:0 }
.nav__mark{ margin-right:auto; display:flex; align-items:center; line-height:0;
  transform-origin:0 0; z-index:2 }
/* con el menú abierto la cabecera se queda desnuda: solo el logo y «Cerrar» */
body.menu-open .nav{ background:transparent; border-bottom-color:transparent }
body.menu-open .nav::after{ opacity:0 }
.nav__mark img{
  width:auto; height:clamp(38px, 4.2vw, 52px);
  transition:transform .5s var(--expo);
}

/* disparador del menú: tipografía pelada, sin borde ni fondo */
.menu-btn{
  appearance:none; background:none; border:0; padding:6px 0; margin:0; cursor:pointer;
  color:var(--celluloid); font-family:inherit;
  font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px; line-height:1;
  z-index:2;
}
.menu-btn__sign{
  display:inline-block; font-size:15px; font-weight:400; line-height:0; color:var(--signal);
  transition:transform .55s var(--expo);
}
.menu-btn__word{ position:relative; display:inline-block }
.menu-btn__txt{ display:inline-block }
.menu-btn[aria-expanded="true"] .menu-btn__sign{ transform:rotate(135deg) }

/* ==========================================================================
   MENÚ A PANTALLA COMPLETA
   Entradas escalonadas, separadores discontinuos a sangre y un trazo rojo
   que se dibuja alrededor de la palabra al pasar por encima.
   ========================================================================== */
.menu{
  position:fixed; inset:0; z-index:85;
  visibility:hidden; pointer-events:none;
}
.menu.open{ visibility:visible; pointer-events:auto }
.menu__sheet{
  position:absolute; inset:0; background:var(--film);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .74s var(--expo);
}
.menu.open .menu__sheet{ transform:scaleY(1) }
.menu.closing .menu__sheet{ transform-origin:top; transform:scaleY(0) }

.menu__inner{
  position:relative; height:100%;
  display:flex; flex-direction:column;
  justify-content:center;
  justify-content:safe center;
  padding-top:calc(var(--nav-h) + clamp(6px,1.2vw,18px));
  padding-bottom:clamp(14px,2.2vw,28px);
  overflow-y:auto; overscroll-behavior:contain;
}
.menu__list{ flex:0 0 auto; display:block; width:100% }

.menu__item{ border-top:1px dashed var(--rule) }
.menu__item:last-child{ border-bottom:1px dashed var(--rule) }

.menu__link{
  display:flex; align-items:flex-start; gap:.28em;
  padding-left:calc(var(--pad) + var(--x, 0%));
  padding-right:var(--pad);
  padding-block:clamp(2px,.5vw,7px);
  width:max-content; max-width:100%;
}
.menu__word{ position:relative; display:inline-block }
.menu__word .ln{ padding-bottom:.16em; margin-bottom:-.16em }
.menu__word .ln > span{
  /* nunca más alto de lo que permite la pantalla: las seis entradas y el pie
     tienen que caber siempre sin cortarse */
  font-size:min(clamp(30px,6.6vw,94px), 9vh); font-weight:200; line-height:1.02;
  letter-spacing:-.04em; display:block; white-space:nowrap;
}
/* el trazo: se dibuja de un tirón, como un lápiz rodeando la palabra */
.menu__scribble{
  position:absolute; left:-5%; top:-14%; width:110%; height:128%;
  overflow:visible; pointer-events:none;
}
.menu__scribble path{
  fill:none; stroke:var(--signal); stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;
  /* --L la calcula el JS con la longitud real del trazo */
  stroke-dasharray:var(--L, 800); stroke-dashoffset:var(--L, 800);
  transition:stroke-dashoffset .3s ease-out;   /* al salir se borra de golpe */
}
.menu__link:focus-visible .menu__scribble path,
.menu__link.drawing .menu__scribble path{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.05s cubic-bezier(.62,.02,.24,1);  /* al entrar se escribe */
}

.menu__list{ margin-top:auto }
.menu__foot{
  flex:0 0 auto; margin-top:auto; margin-bottom:auto;
  padding-top:clamp(14px,2.2vw,30px);
  padding-inline:var(--pad);
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:12px clamp(20px,4vw,52px);
}
.menu__mail{ font-size:clamp(13px,1.4vw,17px); font-weight:300; letter-spacing:-.01em }
.menu__ig{ font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--dim) }
.menu__hit{ position:relative; display:inline-block }
.menu__sign{
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); font-variant-numeric:tabular-nums;
}
/* el mismo lápiz, en pequeño, para el botón del menú y para el pie */
.menu__scribble--mini{ left:-14%; top:-95%; width:128%; height:290% }
.menu__scribble--sm{ left:-9%; top:-52%; width:118%; height:200% }
.menu-btn:focus-visible .menu__scribble path,
.menu__mail:focus-visible .menu__scribble path,
.menu__ig:focus-visible .menu__scribble path{
  stroke-dashoffset:0;
  transition:stroke-dashoffset .95s cubic-bezier(.62,.02,.24,1);
}

/* las palabras suben cuando la lámina ya ha terminado de subir */
.menu__item .ln > span,
.menu__foot > *{ transform:translateY(115%); transition:transform .85s var(--expo) }
.menu__foot > *{ transform:translateY(14px); opacity:0; transition:transform .7s var(--expo), opacity .7s var(--expo) }
.menu__item{ clip-path:inset(0 0 0 0) }
.menu.open .menu__item .ln > span{ transform:none }
.menu.open .menu__foot > *{ transform:none; opacity:1 }
.menu.open .menu__item:nth-child(1) .ln > span{ transition-delay:.30s }
.menu.open .menu__item:nth-child(2) .ln > span{ transition-delay:.37s }
.menu.open .menu__item:nth-child(3) .ln > span{ transition-delay:.44s }
.menu.open .menu__item:nth-child(4) .ln > span{ transition-delay:.51s }
.menu.open .menu__item:nth-child(5) .ln > span{ transition-delay:.58s }
.menu.open .menu__item:nth-child(6) .ln > span{ transition-delay:.65s }
.menu.open .menu__foot > *:nth-child(1){ transition-delay:.72s }
.menu.open .menu__foot > *:nth-child(2){ transition-delay:.76s }
.menu.open .menu__foot > *:nth-child(3){ transition-delay:.80s }
body.menu-open{
  position:fixed; left:0; right:0; width:100%; overflow:hidden;
  /* el «top» lo pone el JavaScript con la posición exacta en la que estabas */
}
body.menu-open .mq__track{ animation-play-state:paused }

@media (max-width:760px){
  .menu__item{ --x:0% !important }
  .menu__link{ padding-left:var(--pad) }
}
@media (max-width:560px){
  .menu__foot{ flex-direction:column; align-items:flex-start; gap:10px }
}
/* pantallas bajas: se aprieta un poco más el interlineado */
@media (max-height:720px){
  .menu__link{ padding-block:1px }
  .menu__foot{ padding-top:clamp(10px,1.4vw,18px) }
}
@media (max-height:660px){
  .menu__word .ln > span{ font-size:clamp(22px,3.4vw,42px) }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end;
  background:var(--void); overflow:hidden;
}
.hero__bg{ position:absolute; inset:0 }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:38% 38% }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(115% 80% at 96% 88%, rgba(11,11,10,.94) 0%, rgba(11,11,10,.62) 34%, rgba(11,11,10,0) 68%),
    radial-gradient(58% 46% at 100% 20%, rgba(11,11,10,.78) 0%, rgba(11,11,10,.34) 42%, rgba(11,11,10,0) 74%),
    linear-gradient(to top, rgba(11,11,10,.97) 0%, rgba(11,11,10,.60) 30%, rgba(11,11,10,.10) 64%, rgba(11,11,10,.45) 100%),
    linear-gradient(to left, rgba(11,11,10,.60) 0%, rgba(11,11,10,.14) 48%, rgba(11,11,10,0) 74%);
}
.hero .eyebrow{ color:rgba(236,228,180,.82) }
/* sobre el cielo el rojo no se lee: el acento pasa a ser un punto, no el texto */
.hero .eyebrow.hot{
  color:rgba(236,228,180,.92); display:inline-flex; align-items:center; gap:9px;
}
.hero .eyebrow.hot::before{
  content:""; width:7px; height:7px; background:var(--signal); flex:0 0 auto;
  animation:pulse 2.6s var(--weight) infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* la silueta queda a la izquierda: el texto se va a la derecha */
.hero__meta{ justify-content:flex-end }
.hero__title{ text-align:right }
.hero__lede{ margin-left:auto; text-align:right }
.hero__cta{ justify-content:flex-end }
.hero__cta .linkline{ flex-direction:row-reverse }
@media (max-width:720px){
  .hero__meta,.hero__cta{ justify-content:flex-start }
  .hero__title,.hero__lede{ text-align:left }
  .hero__lede{ margin-left:0 }
  .hero__cta .linkline{ flex-direction:row }
}
.hero__inner{ position:relative; z-index:3; width:100%; padding-block:clamp(44px,8vw,104px) }
.hero__meta{ display:flex; flex-wrap:wrap; gap:8px 28px; margin-bottom:clamp(24px,4vw,44px) }
.hero__title{
  font-size:clamp(56px,11.4vw,172px); font-weight:200; line-height:.94; letter-spacing:-.042em;
}
.hero__title span{ display:block }
.hero__lede{
  margin-top:clamp(24px,3.4vw,40px); max-width:48ch;
  font-size:clamp(16.5px,1.55vw,20px); line-height:1.5; color:var(--celluloid); opacity:.88;
}
.hero__lede b{ opacity:1; font-weight:500 }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px 26px; margin-top:clamp(26px,3.4vw,38px) }

/* rastro de imágenes al mover el ratón */
.trail{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden }
.trail__img{
  --s:clamp(96px,10.5vw,140px);        /* el mismo tamaño que los avatares del bucle */
  position:absolute; top:0; left:0;
  width:var(--s); height:var(--s);      /* fijamos las dos: si no, el atributo height del HTML lo deforma */
  object-fit:cover; opacity:0; will-change:transform,opacity; border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--rule);
}
@media (hover:none){ .trail{ display:none } }

/* ==========================================================================
   CIFRAS
   ========================================================================== */
.figures{ border-bottom:1px solid var(--rule) }
.figures__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule);
}
.figures__cell{ background:var(--film); padding:clamp(24px,3.4vw,40px) clamp(18px,2.4vw,30px) }
.figures__n{
  display:block; font-size:clamp(36px,5vw,64px); font-weight:300;
  line-height:1; letter-spacing:-.035em; font-variant-numeric:tabular-nums;
}
.figures__n .u{ font-size:.42em; letter-spacing:.02em; margin-left:.18em; color:var(--dim) }
.figures__cell p{ margin-top:14px; font-size:14px; line-height:1.45; color:var(--dim); max-width:34ch }

/* ==========================================================================
   SECCIONES
   ========================================================================== */
.section{ padding-block:var(--sec); border-bottom:1px solid var(--rule) }
.section--tight{ padding-bottom:clamp(48px,6vw,80px) }
.section--first{ padding-top:clamp(48px,6vw,84px) }
.section__head{ max-width:var(--measure) }
.section__head h2{
  margin-top:16px; font-size:clamp(32px,5.4vw,76px); font-weight:200; line-height:.97; letter-spacing:-.035em;
}
.section__head p{ margin-top:20px; color:var(--dim); font-size:16px; line-height:1.55 }

/* ==========================================================================
   MARQUESINAS
   ========================================================================== */
.mq{
  position:relative; overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.mq__track{ display:flex; width:max-content; will-change:transform; animation:mq-run linear infinite }
.mq--rtl .mq__track{ animation-direction:normal }
.mq--ltr .mq__track{ animation-direction:reverse }
/* La fila se para cuando la recorres con el teclado, pero NO al tocarla con el
   dedo o pincharla con el ratón: al hacerlo, el enlace se quedaba con el foco y
   esa fila se congelaba mientras las demás seguían. */
.mq:has(:focus-visible) .mq__track{ animation-play-state:paused }
@keyframes mq-run{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-50%,0,0) } }

/* — creadores — */
/* el avatar se levanta 6px al pasar el ratón: dejamos aire arriba para no recortarlo */
.mq--creators{ margin-top:clamp(28px,4.5vw,60px); padding-block:14px 4px }
.mq--creators .mq__track{ gap:clamp(28px,4vw,64px); padding-inline:clamp(14px,2vw,32px) }
.creator{ display:flex; flex-direction:column; align-items:center; text-align:center; flex:0 0 auto; width:clamp(120px,13vw,168px) }
.creator__pic{
  display:block; width:clamp(96px,10.5vw,140px); aspect-ratio:1; border-radius:50%;
  overflow:hidden; background:var(--film-2); position:relative;
  box-shadow:inset 0 0 0 1px var(--rule);
  transition:transform .55s var(--expo), box-shadow .4s var(--weight);
}
.creator__pic img{ width:100%; height:100%; object-fit:cover }

.avatar__mono{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:clamp(30px,3.6vw,46px); font-weight:300; letter-spacing:-.03em; color:var(--dim);
}
.creator__name{ margin-top:16px; font-size:clamp(14px,1.35vw,17px); font-weight:500; letter-spacing:-.01em; line-height:1.2 }
.creator__aud{ margin-top:5px; font-size:10.5px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--dim) }

/* — reseñas — */
.mq--quotes{ margin-top:clamp(48px,6.5vw,88px) }
.mq--quotes .mq__track{ gap:clamp(16px,2vw,26px); padding-inline:clamp(14px,2vw,32px); align-items:stretch }
.qcard{
  flex:0 0 auto; width:clamp(288px,32vw,430px); margin:0;
  border:1px solid var(--rule); padding:clamp(22px,2.4vw,32px);
  display:flex; flex-direction:column; justify-content:space-between; gap:22px;
  background:var(--film); transition:border-color .4s var(--weight);
  border-radius:var(--r-tarjeta);
}

.qcard blockquote{
  margin:0; font-family:var(--serif); font-style:italic;
  font-size:clamp(16px,1.55vw,20px); line-height:1.4; letter-spacing:-.008em;
}
.qcard figcaption{
  border-top:1px solid var(--rule-soft); padding-top:14px;
  display:flex; align-items:center; gap:13px;
}
.qcard__pic{
  width:42px; height:42px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  box-shadow:inset 0 0 0 1px var(--rule);
}
.qcard__id{ min-width:0 }
.qcard__who{ display:block; font-size:15px; font-weight:500; letter-spacing:-.005em }
.qcard__what{ display:block; margin-top:3px; font-size:10.5px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--dim) }

/* — collage de miniaturas — */
.collage{ margin-top:clamp(40px,5vw,64px); display:flex; flex-direction:column; gap:clamp(10px,1.2vw,18px) }
.mq--mini .mq__track{ gap:clamp(10px,1.2vw,18px) }
.mini{ flex:0 0 auto; width:clamp(168px,17vw,246px); display:block; position:relative }
.mini__media{
  display:block; position:relative; overflow:hidden; background:var(--void);
  aspect-ratio:16/9; border-radius:var(--r-mini);
}
.mini__media img,.mini__media canvas{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.mini__media canvas{ z-index:1 }
.mini__media::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:var(--r-mini);
  box-shadow:inset 0 0 0 1px var(--rule-soft);
  transition:box-shadow .4s var(--weight);
}

.mini__cap{
  padding-top:9px; font-size:11px; line-height:1.35; color:var(--dim); overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.mini__cap b{
  display:flex; align-items:baseline; gap:8px;
  color:var(--celluloid); font-weight:500; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:3px;
}
.mini__cap b i{ font-style:normal; color:var(--signal); font-size:9.5px; letter-spacing:.1em; flex:0 0 auto }

/* ==========================================================================
   BLOQUE SERIE
   ========================================================================== */
.feature{ position:relative; border-bottom:1px solid var(--rule); background:var(--void) }
.feature__media{ position:relative; height:clamp(440px,78vh,860px); height:clamp(440px,78svh,860px); overflow:hidden; background:var(--void) }
.feature__media video,.feature__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 38%;
  filter:saturate(.86) contrast(1.03);
}
.feature__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,.5) 100%);
}
.feature__inner{ position:absolute; inset:auto 0 0 0; z-index:2; padding-block:clamp(30px,5vw,64px) }
.feature__title{ font-size:clamp(40px,8.4vw,124px); font-weight:200; line-height:.86; letter-spacing:-.045em }
.feature__row{
  display:flex; justify-content:space-between; align-items:flex-end; gap:28px; flex-wrap:wrap;
  margin-top:clamp(20px,3vw,34px);
}
.feature__row p{ max-width:48ch; color:var(--celluloid); opacity:.86; font-size:16px; line-height:1.5 }

/* ==========================================================================
   SOBRE MÍ
   ========================================================================== */
.about{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:clamp(30px,5vw,84px); align-items:start }
@media (max-width:880px){ .about{ grid-template-columns:minmax(0,1fr) } }
.about__portrait{
  margin:0; position:relative; background:var(--void); aspect-ratio:3/4;
  overflow:hidden; border-radius:var(--r-foto);
}
.about__portrait img{ width:100%; height:100%; object-fit:cover }
.about__body h3{ font-size:clamp(24px,3.2vw,40px); line-height:1.05; margin-bottom:22px }
.about__body p{ max-width:var(--measure); color:var(--celluloid); opacity:.9; font-size:16.5px; line-height:1.6 }
.about__body p + p{ margin-top:16px }

.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(26px,3.4vw,36px) }
.tag{
  font-size:10.5px; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  padding:8px 13px; border:1px solid var(--rule); color:var(--dim);
}
.tag--hot{ border-color:var(--signal); color:var(--celluloid) }

.specs{ margin-top:clamp(30px,4vw,44px); border-top:1px solid var(--rule) }
.specs__row{
  display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:14px clamp(16px,3vw,34px);
  padding-block:16px; border-bottom:1px solid var(--rule-soft);
}
@media (max-width:560px){ .specs__row{ grid-template-columns:minmax(0,1fr); gap:6px } }
.specs__k{ font-size:10.5px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--dim); padding-top:3px }
.specs__v{ font-size:15.5px; line-height:1.5 }
.specs__v a{ position:relative; border-bottom:1px solid var(--rule) }
.specs__v a::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--signal);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--expo);
}
.specs__v a:focus-visible::after{ transform:scaleX(1) }

/* ==========================================================================
   FORMACIÓN
   ========================================================================== */
.school{ margin-top:clamp(34px,5vw,60px); border-top:1px solid var(--rule) }
.school__row{
  display:grid; grid-template-columns:minmax(0,92px) minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(16px,3vw,44px); padding-block:clamp(24px,3.2vw,38px);
  border-bottom:1px solid var(--rule-soft); align-items:center;
  transition:background .4s var(--weight);
}

.school__logo{
  display:grid; place-items:center; width:clamp(64px,7vw,88px); aspect-ratio:1;
  border:1px solid var(--rule); overflow:hidden; background:var(--film);
  border-radius:var(--r-logo);
}
.school__logo img{ width:100%; height:100%; object-fit:cover }
.school__name{ font-size:clamp(21px,2.9vw,34px); font-weight:300; line-height:1.05; letter-spacing:-.028em }
.school__txt{ color:var(--dim); font-size:15.5px; line-height:1.55 }
@media (max-width:760px){
  .school__row{ grid-template-columns:minmax(0,64px) minmax(0,1fr); row-gap:12px; align-items:start }
  .school__txt{ grid-column:2 }
}

/* ==========================================================================
   PÁGINA DE LA SERIE
   ========================================================================== */
.serie-hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; background:var(--void); overflow:hidden }
.serie-hero__bg{ position:absolute; inset:0 }
.serie-hero__bg video,.serie-hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:50% 38%;
  filter:saturate(.86) contrast(1.03);
}
.serie-hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(11,11,10,.95) 0%, rgba(11,11,10,.80) 22%, rgba(11,11,10,.42) 50%,
    rgba(11,11,10,.16) 74%, rgba(11,11,10,.55) 100%);
}
/* sobre imagen clara el rojo no se lee: el acento pasa a ser un punto */
.serie-hero .eyebrow.hot,
.feature .eyebrow.hot{
  color:rgba(236,228,180,.92); display:inline-flex; align-items:center; gap:9px;
}
.serie-hero .eyebrow.hot::before,
.feature .eyebrow.hot::before{
  content:""; width:7px; height:7px; background:var(--signal); flex:0 0 auto;
}
.serie-hero__inner{ position:relative; z-index:2; width:100%; padding-block:clamp(44px,7vw,96px) }
.serie-hero__title{ font-size:clamp(46px,10.4vw,158px); font-weight:200; line-height:.85; letter-spacing:-.045em }

/* los seis episodios: mismo tamaño y misma altura */
.eps{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.2vw,30px); margin-top:clamp(36px,5vw,60px);
}
@media (max-width:900px){ .eps{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:520px){ .eps{ grid-template-columns:minmax(0,1fr) } }
.ep{ display:block }
.ep__media{
  display:block; position:relative; overflow:hidden; background:var(--void);
  aspect-ratio:16/9; border-radius:var(--r-ep);
}
.ep__media img,.ep__media canvas{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.55) contrast(1.06) brightness(.94); transition:filter .6s var(--expo);
}
.ep__media canvas{ z-index:1 }
.ep:focus-visible .ep__media img,.ep:focus-visible .ep__media canvas{ filter:saturate(1) contrast(1) brightness(1) }
.ep__media::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:var(--r-ep);
  box-shadow:inset 0 0 0 1px var(--rule-soft); transition:box-shadow .4s var(--weight);
}

.ep__cap{ display:block; padding-top:13px; font-size:12px; color:var(--dim); line-height:1.4 }
.ep__cap b{
  display:block; color:var(--celluloid); font-weight:500; font-size:10.5px;
  letter-spacing:.15em; text-transform:uppercase; margin-bottom:4px;
}

/* vídeos de rodaje: mismo tamaño, misma altura, bordes redondeados */
.btsgrid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.2vw,30px); margin-top:clamp(36px,5vw,60px); align-items:start;
}
@media (max-width:820px){ .btsgrid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:520px){ .btsgrid{ grid-template-columns:minmax(0,1fr) } }
.bts{ margin:0 }
.bts video{
  width:100%; aspect-ratio:9/16; object-fit:cover; background:var(--void);
  border-radius:var(--r-ep); filter:saturate(.82) contrast(1.03);
}
.bts figcaption{
  margin-top:12px; font-size:10.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim);
}

.credits{ margin-top:clamp(34px,5vw,56px); border-top:1px solid var(--rule) }
.credits__row{
  display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:12px clamp(16px,3vw,40px); padding-block:18px; border-bottom:1px solid var(--rule-soft);
}
@media (max-width:560px){ .credits__row{ grid-template-columns:minmax(0,1fr); gap:5px } }
.credits__k{ font-size:10.5px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--dim); padding-top:3px }
.credits__v{ font-size:16px; line-height:1.5 }

/* ==========================================================================
   CONTACTO Y PIE
   ========================================================================== */
.contact{ padding-block:var(--breathe) }
.contact__mail{
  display:inline-block; font-size:clamp(26px,6.4vw,88px); font-weight:200; line-height:1;
  letter-spacing:-.045em; margin-top:clamp(22px,3vw,36px);
  border-bottom:1px solid var(--rule); padding-bottom:.1em;
  transition:border-color .4s var(--weight); overflow-wrap:anywhere;
}
.contact__mail{ position:relative }
.contact__mail::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--signal);
  transform:scaleX(0); transform-origin:left; transition:transform .7s var(--expo);
}
.contact__mail:focus-visible::after{ transform:scaleX(1) }
.contact__row{ display:flex; flex-wrap:wrap; gap:16px 34px; margin-top:clamp(30px,4vw,48px) }

.foot{ padding-block:clamp(40px,5vw,68px); border-top:1px solid var(--rule) }
.foot__grid{ display:flex; justify-content:space-between; gap:20px 40px; flex-wrap:wrap; align-items:baseline }
.foot small{ font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--dim) }


/* ==========================================================================
   ENTRADA: la web se monta sola al abrirla
   Los estados iniciales solo se aplican si hay JavaScript (.js), así que
   sin JS la página se ve entera desde el primer momento.
   ========================================================================== */
.ln{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em }
.ln > span{ display:block; will-change:transform }

.hero__bg img,
.serie-hero__bg video,
.serie-hero__bg img{ transition:transform 2.4s var(--expo) }
.nav__mark,
.menu-btn{ transition:opacity .8s var(--expo), transform .9s var(--expo) }
.hero__meta > *,
.hero__lede,
.hero__cta,
.serie-hero .eyebrow,
.serie-hero .feature__row{ transition:opacity .85s var(--expo), transform .95s var(--expo) }
.ln > span{ transition:transform 1.2s var(--expo) }

.js .hero__bg img,
.js .serie-hero__bg video,
.js .serie-hero__bg img{ transform:scale(1.075) }
.js .nav__mark,
.js .menu-btn{ opacity:0; transform:translateY(-8px) }
.js .nav::after{ opacity:0 }
.js .hero__meta > *,
.js .hero__lede,
.js .hero__cta,
.js .serie-hero .eyebrow,
.js .serie-hero .feature__row{ opacity:0; transform:translateY(16px) }
.js .ln > span{ transform:translateY(110%) }

.ready .hero__bg img,
.ready .serie-hero__bg video,
.ready .serie-hero__bg img{ transform:scale(1) }
.ready .nav__mark,
.ready .menu-btn{ opacity:1; transform:none }
.ready .nav::after{ opacity:1 }
.ready .hero__meta > *,
.ready .hero__lede,
.ready .hero__cta,
.ready .serie-hero .eyebrow,
.ready .serie-hero .feature__row{ opacity:1; transform:none }
.ready .ln > span{ transform:none }

/* el compás de la entrada */
/* el logo entra con su retardo, pero el viaje al centro del menú es inmediato */
.ready .nav__mark { transition:opacity .8s var(--expo) .14s, transform .82s var(--expo) }
.ready .menu-btn  { transition-delay:.20s }
.ready .nav::after { transition-delay:.10s }
.ready .hero__meta > *:nth-child(1){ transition-delay:.30s }
.ready .hero__meta > *:nth-child(2){ transition-delay:.36s }
.ready .hero__meta > *:nth-child(3){ transition-delay:.42s }
.ready .hero__title .ln:nth-child(1) > span{ transition-delay:.50s }
.ready .hero__title .ln:nth-child(2) > span{ transition-delay:.63s }
.ready .hero__lede{ transition-delay:.88s }
.ready .hero__cta { transition-delay:1.00s }
.ready .serie-hero .eyebrow{ transition-delay:.30s }
.ready .serie-hero__title .ln:nth-child(1) > span{ transition-delay:.44s }
.ready .serie-hero__title .ln:nth-child(2) > span{ transition-delay:.57s }
.ready .serie-hero .feature__row{ transition-delay:.82s }



/* ==========================================================================
   EFECTOS DE RATÓN
   Solo se aplican donde hay un ratón de verdad. En un móvil, el «hover» se
   queda pegado después de tocar —filas de miniaturas congeladas, bordes rojos
   que no se van— y encima obliga a tocar dos veces para abrir un enlace.
   ========================================================================== */
/* el mismo aviso, dicho como toca según se navegue con ratón o con el dedo */
.con-raton{ display:none }
.con-dedo{ display:inline }

@media (hover:hover) and (pointer:fine){
  .con-raton{ display:inline }
  .con-dedo{ display:none }
  .linkline:hover::after{ transform:scaleX(1) }
  .linkline:hover::before{ transform:scale(1) }
  .nav__mark:hover img{ transform:rotate(-3deg) scale(1.03) }
  .mq:hover .mq__track{ animation-play-state:paused }
  .creator:hover .creator__pic{ transform:translateY(-6px); box-shadow:inset 0 0 0 1px var(--signal) }
  .qcard:hover{ border-color:var(--signal) }
  .mini:hover .mini__media::after{ box-shadow:inset 0 0 0 1px var(--signal) }
  .specs__v a:hover::after{ transform:scaleX(1) }
  .school__row:hover{ background:var(--film-2) }
  .ep:hover .ep__media img,.ep:hover .ep__media canvas{ filter:saturate(1) contrast(1) brightness(1) }
  .ep:hover .ep__media::after{ box-shadow:inset 0 0 0 1px var(--signal) }
  .contact__mail:hover::after{ transform:scaleX(1) }
  .menu__link:hover .menu__scribble path,
  .menu-btn:hover .menu__scribble path,
  .menu__mail:hover .menu__scribble path,
  .menu__ig:hover .menu__scribble path{
    stroke-dashoffset:0;
    transition:stroke-dashoffset 1.05s cubic-bezier(.62,.02,.24,1);
  }
}

/* ==========================================================================
   REVELADO Y CORTINILLA
   ========================================================================== */
.rise{ opacity:0; transform:translate3d(0,26px,0); transition:opacity 1s var(--expo), transform 1.15s var(--expo) }
.rise.in{ opacity:1; transform:none }
.rise[data-d="1"]{ transition-delay:.08s }
.rise[data-d="2"]{ transition-delay:.16s }
.rise[data-d="3"]{ transition-delay:.24s }

.curtain{
  position:fixed; inset:0; z-index:200; background:var(--film);
  transform:scaleY(0); transform-origin:bottom; pointer-events:none;
}
.curtain.on{ transform:scaleY(1); transform-origin:bottom; transition:transform .62s var(--expo); pointer-events:auto }
.curtain.up{ transform:scaleY(0); transform-origin:top;    transition:transform .72s var(--expo) }

/* ==========================================================================
   REDUCIR MOVIMIENTO
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
  .rise{ opacity:1; transform:none }
  .js .hero__meta > *, .js .hero__lede, .js .hero__cta,
  .js .serie-hero .eyebrow, .js .serie-hero .feature__row,
  .js .menu-btn{ opacity:1 !important; transform:none !important }
  .js .nav__mark{ opacity:1 !important }
  /* el logo sí se coloca en el centro al abrir el menú, aunque sin recorrido */
  body:not(.menu-open) .nav__mark{ transform:none !important }
  .menu__item .ln > span, .menu__foot > *{ transform:none !important; opacity:1 !important }
  .menu__sheet{ transition:none }
  .menu__scribble path{ transition:none; stroke-dashoffset:1 }
  .menu__link:hover .menu__scribble path{ stroke-dashoffset:0 }
  .js .ln > span{ transform:none !important }
  .js .nav::after{ opacity:1 !important }
  .js .hero__bg img, .js .serie-hero__bg video, .js .serie-hero__bg img{ transform:none !important }
  .mq__track{ animation:none }
  .mq{ overflow-x:auto; -webkit-mask-image:none; mask-image:none }
  .trail{ display:none }
}

/* ==========================================================================
   IMPRESIÓN
   ========================================================================== */
@media print{
  .nav,.curtain,.trail{ display:none }
  body{ background:#fff; color:#000 }
  .mq{ overflow:visible }
  .mq__track{ animation:none; flex-wrap:wrap }
}