/* ═══════════════════════════════════════════════════
   MIXAMATOSIS — TULPA Arte Estudio, 2026
   Negro absoluto · rosa del logotipo · haz de luz
   ═══════════════════════════════════════════════════ */

:root{
  --void:      #000000;
  --rosa:      #ff76ae;   /* muestreado del logotipo */
  --rosa-nave: #ff649c;   /* muestreado de la nave */
  --hueso:     #f4f2f5;
  --humo:      rgba(244,242,245,.46);
  --humo-2:    rgba(244,242,245,.14);
  --linea:     rgba(255,118,174,.22);

  --display: "Archivo Black", "Arial Black", Impact, sans-serif;
  --body:    "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gut:   clamp(1.25rem, 5vw, 5.5rem);
  --spine: clamp(1.25rem, 5vw, 5.5rem);      /* x del haz */
  --sangria: clamp(1.1rem, 3vw, 3.5rem);     /* separación texto ↔ haz */
  --sec-y: clamp(5rem, 12vh, 9rem);
  --max: 1360px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  background:var(--void);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}

body{
  margin:0;
  background:var(--void);
  color:var(--hueso);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(1.04rem,.99rem + .26vw,1.16rem);
  line-height:1.74;
  letter-spacing:.004em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,video{ display:block; max-width:100%; }
::selection{ background:var(--rosa); color:var(--void); }
:focus-visible{ outline:2px solid var(--rosa); outline-offset:3px; }

.skip{
  position:fixed; top:.5rem; left:.5rem; z-index:200;
  padding:.6rem 1rem; background:var(--rosa); color:#000;
  font:700 .75rem/1 var(--mono); text-transform:uppercase; letter-spacing:.08em;
  text-decoration:none; transform:translateY(-160%);
}
.skip:focus{ transform:none; }

/* ─── estrellas ───────────────────────────────────── */
#stars{
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%;
  pointer-events:none; opacity:.55;
}

/* ─── haz vertical: espina + progreso ─────────────── */
.beam{
  position:fixed; top:0; left:var(--spine); z-index:3;
  width:1px; height:100vh;
  background:var(--humo-2);
  pointer-events:none;
}
.beam__fill{
  position:absolute; inset:0 0 auto 0;
  display:block; height:var(--progress,0%);
  background:linear-gradient(180deg, rgba(255,118,174,0) 0%, var(--rosa) 22%, var(--rosa) 100%);
  box-shadow:0 0 12px 1px rgba(255,118,174,.5);
}

/* ─── barra superior ──────────────────────────────── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:.95rem var(--gut);
  background:rgba(0,0,0,.86);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  opacity:0; transform:translateY(-100%);
  transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;
}
.topbar.is-on{
  opacity:1; transform:none; pointer-events:auto;
  border-bottom-color:var(--humo-2);
}
.topbar__mark{ width:clamp(48px,5.5vw,75px); height:auto; flex:none; }
.topbar__nav{
  display:flex; flex-wrap:wrap; gap:clamp(.9rem,2vw,1.9rem);
  margin:0; padding:0; list-style:none;
}
.topbar__nav a{
  color:var(--humo);
  font:400 .68rem/1 var(--mono);
  letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none;
  transition:color .25s ease;
}
.topbar__nav a:hover{ color:var(--rosa); }

/* ─── tipografía de servicio ──────────────────────── */
.tc{
  font:400 .68rem/1.5 var(--mono);
  letter-spacing:.14em; text-transform:uppercase;
}

.rotulo{
  display:flex; align-items:center; gap:1rem;
  margin:0 0 clamp(1.6rem,3.2vw,2.4rem);
  font:400 .7rem/1 var(--mono);
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--rosa);
}
.rotulo::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--linea), rgba(255,118,174,0));
}

/* la sangría vive en el contenedor: los hijos no la heredan
   ni la pierden por orden de cascada */
.wrap{
  position:relative; z-index:2;
  max-width:calc(var(--max) + var(--sangria));
  margin-inline:auto;
  padding-left:calc(var(--gut) + var(--sangria));
  padding-right:var(--gut);
}

/* ═══════════ PORTADA ════════════════════════════ */
.portada{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:8rem var(--gut) 5rem;
  overflow:hidden;
  isolation:isolate;
}
/* resplandor del suelo bajo el nombre */
.portada::after{
  content:""; position:absolute; z-index:-1;
  left:50%; top:50%;
  width:min(120vw,1400px); height:min(70vh,620px);
  transform:translate(-50%,-42%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,118,174,.11), rgba(255,118,174,0) 68%);
  pointer-events:none;
}

.portada__centro{ position:relative; width:100%; max-width:1000px; text-align:center; }

/* ── la marca y la nave que la ilumina ── */
.marca{ position:relative; }

.marca__titulo{
  position:relative;
  margin:0;
  display:block;
}
.marca__base,
.marca__luz{ width:100%; height:auto; }

/* letras apagadas */
.marca__base{
  filter:brightness(.46) saturate(.92);
  animation:aparece 1.4s ease .2s both;
}
/* capa encendida, revelada por un barrido */
.marca__luz{
  position:absolute; inset:0;
  filter:brightness(1.28) saturate(1.05)
         drop-shadow(0 0 12px rgba(255,118,174,.95))
         drop-shadow(0 0 40px rgba(255,118,174,.55));
  -webkit-mask-image:radial-gradient(ellipse 50% 150% at 50% 50%, #000 0%, rgba(0,0,0,.62) 38%, transparent 74%);
          mask-image:radial-gradient(ellipse 50% 150% at 50% 50%, #000 0%, rgba(0,0,0,.62) 38%, transparent 74%);
  -webkit-mask-size:44% 100%;  mask-size:44% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:-50% 50%; mask-position:-50% 50%;
  animation:barrido 11s cubic-bezier(.42,0,.58,1) 1s infinite;
}
/* -50% → 150% deja el centro de la luz justo bajo la nave */
@keyframes barrido{
  0%      { -webkit-mask-position:-50% 50%; mask-position:-50% 50%; }
  46%,100%{ -webkit-mask-position:150% 50%; mask-position:150% 50%; }
}
@keyframes aparece{ from{opacity:0} to{opacity:1} }

/* nave que hace el barrido */
.nave-h{
  position:absolute; z-index:3;
  bottom:calc(100% + clamp(12px,3vw,38px));
  left:-6%;
  width:clamp(58px,7vw,96px);
  margin-left:calc(clamp(58px,7vw,96px) / -2);
  animation:cruza 11s cubic-bezier(.42,0,.58,1) 1s infinite;
}
@keyframes cruza{
  0%   { left:-6%;  opacity:0; }
  7%   { opacity:1; }
  40%  { opacity:1; }
  46%  { left:106%; opacity:0; }
  100% { left:106%; opacity:0; }
}
.nave-h__img{
  width:100%; height:auto;
  filter:drop-shadow(0 0 16px rgba(255,100,156,.8));
  animation:flota 3.4s ease-in-out infinite;
}
.nave-h__haz{
  position:absolute; left:50%; top:62%;
  width:210%; height:clamp(58px,9vw,130px);
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(255,100,156,.42), rgba(255,100,156,0) 82%);
  clip-path:polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  filter:blur(3px);
  pointer-events:none;
}
@keyframes flota{ 0%,100%{ transform:translateY(0) rotate(-2deg) } 50%{ transform:translateY(-6px) rotate(2deg) } }

.portada__tag{
  margin:clamp(1.6rem,3.4vw,2.4rem) 0 0;
  font:400 clamp(.68rem,.63rem + .28vw,.84rem)/1.9 var(--mono);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--humo);
  animation:sube 1s ease 1.5s both;
}
.portada__tag i{ font-style:normal; color:var(--rosa); padding:0 .3em; }
@keyframes sube{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }

/* centrado con margin, no con transform: la animación de entrada
   usa transform y lo sobrescribiría */
.portada__baja{
  position:absolute; left:0; right:0; bottom:clamp(1.6rem,4vh,3rem);
  width:max-content; margin-inline:auto;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  color:var(--humo);
  font:400 .66rem/1 var(--mono);
  letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none;
  animation:sube 1s ease 1.9s both;
  transition:color .3s ease;
}
.portada__baja:hover{ color:var(--rosa); }
.portada__flecha{
  width:1px; height:34px;
  background:linear-gradient(180deg, var(--rosa), rgba(255,118,174,0));
  animation:baja 2.4s ease-in-out infinite;
}
@keyframes baja{ 0%,100%{ transform:scaleY(.45); opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }

/* ═══════════ SECCIONES ══════════════════════════ */
.seccion{
  position:relative;
  padding-block:var(--sec-y);
  isolation:isolate;
}
.seccion__fondo{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.34;
  filter:grayscale(.25) contrast(1.04);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
}
.seccion__fondo--tenue{ opacity:.17; filter:grayscale(.5) contrast(1.08); }

/* ─── placas: los stills a sangre, separados del texto ──── */
.placa{
  position:relative;
  margin:clamp(3rem,7vh,5.5rem) 0 0;
  overflow:hidden;
}
.placa img{
  width:100%;
  height:clamp(260px,54vh,660px);
  object-fit:cover;
  filter:contrast(1.05) saturate(.96);
}
/* viñeta mínima para que el negro de la página no corte de golpe */
.placa::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.55));
  pointer-events:none;
}

/* ═══════════ TRÁILER ════════════════════════════ */
.seccion--trailer{
  padding-block:clamp(3.5rem,8vh,6rem) clamp(5rem,12vh,9rem);
}
.reproductor{
  position:relative;
  max-width:1080px;
  background:#000;
  border:1px solid var(--humo-2);
  box-shadow:0 0 0 1px rgba(0,0,0,1), 0 30px 80px -30px rgba(255,118,174,.35);
}
.reproductor video{
  width:100%; height:auto;
  display:block;
  background:#000;
}
.reproductor__play{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem;
  background:rgba(0,0,0,.42);
  border:0; cursor:pointer;
  color:var(--hueso);
  font:400 .72rem/1 var(--mono);
  letter-spacing:.2em; text-transform:uppercase;
  transition:background .35s ease, opacity .35s ease;
}
.reproductor__play:hover{ background:rgba(0,0,0,.2); }
.reproductor__play[hidden]{ display:none; }
.reproductor__icono{
  width:clamp(54px,7vw,76px); height:clamp(54px,7vw,76px);
  border:1px solid var(--rosa);
  border-radius:50%;
  position:relative;
  box-shadow:0 0 30px rgba(255,118,174,.35);
  transition:background .35s ease, box-shadow .35s ease;
}
.reproductor__icono::after{
  content:""; position:absolute; top:50%; left:54%;
  transform:translate(-50%,-50%);
  width:0; height:0;
  border-left:15px solid var(--rosa);
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  transition:border-left-color .35s ease;
}
.reproductor__play:hover .reproductor__icono{
  background:var(--rosa);
  box-shadow:0 0 46px rgba(255,118,174,.6);
}
.reproductor__play:hover .reproductor__icono::after{ border-left-color:#000; }

.pie-video{
  margin:1rem 0 0;
  color:var(--humo);
}

/* ═══════════ LOGLINE ════════════════════════════ */
.logline{
  margin:0;
  max-width:44ch;
  font-size:clamp(1.14rem,1rem + .66vw,1.55rem);
  line-height:1.56;
  font-weight:400;
  text-wrap:pretty;
}
.logline em{ font-style:normal; color:var(--rosa); }

/* ═══════════ SINOPSIS ═══════════════════════════ */
.prosa{ max-width:62ch; }
.prosa p{ margin:0 0 1.3em; color:rgba(244,242,245,.88); }
.prosa p:last-child{ margin-bottom:0; }
.prosa .entrada{
  font-size:clamp(1.14rem,1.02rem + .55vw,1.42rem);
  line-height:1.52;
  color:var(--hueso);
  font-weight:400;
}
.cierre-sinopsis{
  margin-top:2.2em !important;
  padding-top:1.6rem;
  border-top:1px solid var(--linea);
  color:var(--hueso) !important;
}
.cierre-sinopsis em{ font-style:normal; color:var(--rosa); }

/* cono + nave que desciende al scrollear */
.cono{
  position:absolute; z-index:-1;
  left:var(--spine); top:0; bottom:0;
  width:min(60vw,560px);
  transform:translateX(-42%);
  background:conic-gradient(from 172deg at 50% -6%,
      rgba(255,118,174,0) 0deg,
      rgba(255,118,174,.14) 12deg,
      rgba(255,118,174,.02) 22deg,
      rgba(255,118,174,0) 30deg);
  opacity:calc(var(--descenso,0) * .9);
  filter:blur(6px);
  pointer-events:none;
}
.nave-s{
  position:absolute; z-index:1;
  left:var(--spine); top:0;
  width:clamp(56px,6vw,88px);
  transform:translate3d(calc(-50% + var(--nave-x,0px)), var(--nave-y,0px), 0);
  opacity:var(--nave-o,0);
  will-change:transform;
  pointer-events:none;
}
.nave-s img{
  width:100%; height:auto;
  filter:drop-shadow(0 0 16px rgba(255,100,156,.75));
  animation:flota 3.8s ease-in-out infinite;
}
.nave-s__haz{
  position:absolute; left:50%; top:74%;
  width:230%; height:250px;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(255,100,156,.3), rgba(255,100,156,0) 78%);
  clip-path:polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  filter:blur(3px);
}

/* ═══════════ PERSONAJES ═════════════════════════ */
.ficha{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.4rem);
  align-items:center;
  margin-bottom:clamp(3rem,7vw,5.5rem);
}
.ficha--alt .ficha__img{ order:2; }
.ficha--alt .ficha__txt{ order:1; }

.ficha__img{ position:relative; overflow:hidden; }
.ficha__img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(255,118,174,.13), rgba(0,0,0,0) 58%);
  pointer-events:none;
}
.ficha__img img{
  width:100%; height:100%; object-fit:cover;
  aspect-ratio:16/10;
  filter:contrast(1.04) saturate(.94);
}

.ficha__nombre{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.7rem,1.15rem + 2.1vw,2.9rem);
  line-height:.96;
  letter-spacing:-.018em;
  text-transform:uppercase;
  color:var(--rosa);
}
.ficha__edad{ margin:.7rem 0 1.3rem; color:var(--humo); }
.ficha__rasgos{
  margin:0 0 1.4rem;
  padding-bottom:1.3rem;
  border-bottom:1px solid var(--linea);
  font:400 .8rem/1.8 var(--mono);
  letter-spacing:.02em;
  color:var(--hueso);
}
.ficha__rasgos i{ font-style:normal; color:var(--rosa); }
.ficha__txt p:not(.ficha__edad):not(.ficha__rasgos){
  margin:0 0 1.05em;
  color:rgba(244,242,245,.86);
  max-width:48ch;
}
.ficha__txt p:last-child{ margin-bottom:0; }

/* la última ficha ya no lleva separación: después viene una placa */
.ficha:last-of-type{ margin-bottom:0; }

.hojas{
  display:grid;
  gap:clamp(1rem,2.4vw,1.8rem);
  margin-top:clamp(3rem,7vh,5rem);
}
.hoja{ margin:0; }
.hoja img{
  width:100%; height:auto;
  border:1px solid var(--linea);
  filter:grayscale(1) contrast(1.12) brightness(.66) sepia(1) hue-rotate(276deg) saturate(2.4);
  opacity:.78;
  transition:filter .5s ease, opacity .5s ease;
}
.hoja:hover img{ filter:none; opacity:1; }
.hoja figcaption{ padding-top:.7rem; color:var(--humo); }

/* ═══════════ FICHA TÉCNICA ══════════════════════ */
.datos{ margin:0; max-width:800px; }
.datos__fila{
  display:grid;
  grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:1rem;
  padding:.9rem 0;
  border-top:1px solid var(--humo-2);
}
.datos__fila:last-child{ border-bottom:1px solid var(--humo-2); }
.datos dt{
  font:400 .7rem/1.7 var(--mono);
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--humo);
}
.datos dd{ margin:0; font-size:1rem; color:var(--hueso); }

.hoja-contacto{
  margin:clamp(3rem,7vw,5rem) 0 0;
  border:1px solid var(--linea);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.hoja-contacto img{ width:100%; min-width:680px; height:auto; }
.hoja-contacto figcaption{
  position:sticky; left:0;
  padding:.85rem 1rem;
  border-top:1px solid var(--linea);
  color:var(--humo);
}

/* ═══════════ CONTACTO ═══════════════════════════ */
.seccion--contacto{
  padding-block:clamp(5rem,12vh,8rem) 0;
  border-top:1px solid var(--linea);
}
.contacto{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(1.8rem,5vw,4.5rem);
}
.contacto__tulpa{ width:clamp(88px,11vw,140px); height:auto; opacity:.92; }
.contacto__datos p{ margin:0 0 .35rem; }
.contacto__estudio{
  font-family:var(--display);
  font-size:clamp(1.15rem,1rem + .8vw,1.6rem);
  text-transform:uppercase; letter-spacing:-.01em;
}
.contacto__dir{ color:var(--humo); }
.link{
  color:var(--rosa); text-decoration:none;
  border-bottom:1px solid var(--linea);
  padding-bottom:2px;
  transition:border-color .3s ease;
}
.link:hover{ border-bottom-color:var(--rosa); }

.pie{
  margin:clamp(4rem,9vh,6rem) 0 0;
  padding:1.4rem var(--gut);
  border-top:1px solid var(--humo-2);
  color:rgba(244,242,245,.3);
  text-align:center;
}

/* ═══════════ REVELADO ═══════════════════════════ */
.r{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0ms);
}
.r.is-in{ opacity:1; transform:none; }

/* ═══════════ RESPONSIVE ═════════════════════════ */
@media (min-width:820px){
  .hojas{ grid-template-columns:1fr 1fr; }
}

@media (max-width:880px){
  .ficha{ grid-template-columns:1fr; gap:1.4rem; }
  .ficha--alt .ficha__img{ order:0; }
  .ficha--alt .ficha__txt{ order:0; }
  .ficha__img img{ aspect-ratio:16/11; }
}

@media (max-width:760px){
  :root{ --spine:1rem; --sangria:1.1rem; --sec-y:clamp(3.5rem,9vh,5.5rem); }

  .topbar{ padding:.7rem 1rem; gap:.8rem; }
  .topbar__mark{ width:44px; }
  .topbar__nav{ gap:.75rem; }
  .topbar__nav a{ font-size:.58rem; letter-spacing:.1em; }
  .topbar__nav li:nth-child(n+5){ display:none; }

  .portada{ padding:6rem 1.5rem 5.5rem; }
  .datos__fila{ grid-template-columns:1fr; gap:.25rem; }
  .cono{ width:88vw; }
  .nave-s{ width:52px; }
  .reproductor{ max-width:520px; margin-inline:auto; }
}

/* ═══════════ MOVIMIENTO REDUCIDO ════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .r{ opacity:1; transform:none; }
  #stars{ display:none; }
  .nave-h{ display:none; }
  .marca__base{ filter:none; }
  .marca__luz{ display:none; }
}