:root{
  --naranja:#FF5A1F;
  --font:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --pad-x:36px;
  --pad-y:34px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-snap-type:y proximity;scroll-behavior:smooth;
  background:var(--naranja);overscroll-behavior-y:none;
}
body{
  font-family:var(--font);background:var(--naranja);color:#fff;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  overscroll-behavior-y:none;
}

/* ---------- escenario fijo ---------- */
.stage{
  position:fixed;top:0;left:0;right:0;
  height:100vh;height:100dvh;
  overflow:hidden;z-index:1;
}

/* ---------- reel de fondo ---------- */
/* sin z-index: así el video queda como backdrop del blend del logo */
.hero{position:absolute;inset:0;background:#000;transform:translateZ(0)}
.hero video{width:100%;height:100%;object-fit:cover;display:block}
/* negro semitransparente con trama de puntos sobre el reel */
.halftone{
  position:absolute;inset:0;pointer-events:none;
  background-color:rgba(0,0,0,.22);
  background-image:
    radial-gradient(circle at center, rgba(0,0,0,.62) 1.15px, transparent 1.35px),
    radial-gradient(circle at center, rgba(0,0,0,.62) 1.15px, transparent 1.35px);
  background-size:5px 5px, 5px 5px;
  background-position:0 0, 2.5px 2.5px;
}
.hero-grad{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.5) 0%,rgba(0,0,0,.16) 26%,transparent 46%);
}

/* ---------- cortina naranja ---------- */
.curtain{
  position:absolute;inset:0;background:var(--naranja);
  transform:translate3d(0,100%,0);will-change:transform;
  display:flex;align-items:center;
  padding-left:calc(clamp(36px,8vw,170px) + env(safe-area-inset-left));
  padding-right:calc(clamp(36px,8vw,170px) + env(safe-area-inset-right));
}
.curtain-row{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  gap:32px;
}
.info{
  color:#000;
  font-size:clamp(14px,1.15vw,18px);font-weight:600;line-height:1.35;
  letter-spacing:-.01em;text-align:center;
  opacity:0;transform:translateY(16px);
}
.info--links{display:flex;gap:clamp(28px,5vw,90px)}
.info a{color:inherit;text-decoration:none}
.info a:hover{text-decoration:underline}
.info a:focus-visible{outline:1px solid currentColor;outline-offset:4px}

/* ---------- logo ---------- */
/* Sin z-index a propósito: un z-index acá crearía un stacking context
   y aislaría el mix-blend-mode de la imagen. Queda por encima de la
   cortina igual, porque va después en el HTML. */
.logo-wrap{
  position:absolute;top:50%;left:50%;
  width:0;height:0;pointer-events:none;
}
.logo-wrap img{
  position:absolute;top:0;left:0;display:block;height:auto;
  transform:translate(-50%,-50%);
}
/* sobre el reel: solo la cara, blanca, sin blend */
.logo-cara{width:min(26vw,290px);max-height:62vh;max-height:62dvh}
/* sobre el naranja: el logo completo con el texto, en negro */
.logo-full{width:min(15vw,180px);max-height:46vh;max-height:46dvh;opacity:0}

/* ---------- controles del reel ---------- */
.reel-ctrl{
  position:absolute;z-index:6;
  left:calc(var(--pad-x) + env(safe-area-inset-left));
  bottom:calc(var(--pad-y) + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:18px;transition:opacity .3s ease;
}
.reel-ctrl button,.reel-ctrl a{
  background:none;border:none;cursor:pointer;padding:0;
  color:#fff;opacity:.7;transition:opacity .2s;display:flex;align-items:center;
}
.reel-ctrl button:hover,.reel-ctrl a:hover{opacity:1}
.reel-ctrl svg{width:17px;height:17px;fill:#fff;display:block}
.reel-ctrl .sep{width:1px;height:12px;background:rgba(255,255,255,.3)}
.reel-ctrl button:focus-visible,.reel-ctrl a:focus-visible{
  outline:1px solid currentColor;outline-offset:5px;opacity:1
}

/* ---------- hint de scroll ---------- */
.hint{
  position:absolute;z-index:6;
  right:calc(var(--pad-x) + env(safe-area-inset-right));
  bottom:calc(var(--pad-y) + env(safe-area-inset-bottom));
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;opacity:.7;transition:opacity .3s ease;
}
.hint span{display:inline-block;animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---------- espacio de scroll ---------- */
.scroll-space{position:relative;z-index:0}
.scroll-space section{height:100vh;height:100dvh;scroll-snap-align:start}

/* ---------- mobile ---------- */
@media (max-width:768px){
  :root{--pad-x:20px;--pad-y:22px}
  .logo-cara{width:52vw}
  .logo-full{width:42vw}
  .curtain{
    padding-left:calc(24px + env(safe-area-inset-left));
    padding-right:calc(24px + env(safe-area-inset-right));
  }
  .curtain-row{
    flex-direction:column;justify-content:flex-end;align-items:center;
    height:100%;padding-bottom:12vh;gap:22px;
  }
  .info{font-size:14px}
  .info--links{gap:26px}
  .hint{display:none}
}

/* ---------- celular acostado (poco alto): el texto se abre abajo ---------- */
@media (orientation:landscape) and (max-height:620px){
  :root{--pad-y:20px}

  .logo-wrap{top:42%}

  .curtain{
    align-items:flex-end;
    padding-left:calc(clamp(24px,5vw,64px) + env(safe-area-inset-left));
    padding-right:calc(clamp(24px,5vw,64px) + env(safe-area-inset-right));
  }
  .curtain-row{
    flex-direction:row;justify-content:space-between;align-items:flex-end;
    height:auto;gap:clamp(20px,6vw,72px);
    padding-bottom:calc(var(--pad-y) + env(safe-area-inset-bottom));
  }
  .info{font-size:13px;line-height:1.45}
  .info--left{text-align:left}
  .info--links{gap:clamp(18px,4vw,44px);text-align:right}
  .hint{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hint span{animation:none}
}