:root{
  --negro:#08080B;
  --blanco:#EFEDE8;
  --gris:#7B7A80;
  --linea:#1F1F24;
  --tally:#FF2D20;
  --sol:#FFB03A;      /* mundo cine: tungsteno */
  --plasma:#6D5BFF;   /* mundo IA: señal */
  --mono:'IBM Plex Mono', monospace;
  --sans:'Archivo', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--negro); color:var(--blanco);
  font-family:var(--sans); font-weight:300;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
::selection{background:var(--tally);color:var(--blanco);}
img{display:block;max-width:100%;}

/* ============ HUD ============ */
.hud{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 28px; mix-blend-mode:difference; pointer-events:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
}
.hud a{pointer-events:auto;color:var(--blanco);text-decoration:none;}
.hud-logo{font-family:var(--sans);font-weight:900;font-stretch:118%;font-size:15px;letter-spacing:.18em;}
.hud-right{display:flex;align-items:center;gap:14px;}
.rec{width:9px;height:9px;border-radius:50%;background:var(--tally);animation:blink 1.4s steps(1) infinite;}
@keyframes blink{50%{opacity:.15;}}
#tc{font-variant-numeric:tabular-nums;}
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--tally);z-index:101;}

/* ============ ESCENA 1: HERO (pinned, scrubbed) ============ */
.hero{height:100svh;position:relative;overflow:hidden;}
.hero-orb{
  position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform;
}
.orb-a{width:56vw;height:56vw;background:radial-gradient(circle,var(--sol),transparent 65%);top:-16vw;left:-14vw;}
.orb-b{width:50vw;height:50vw;background:radial-gradient(circle,var(--plasma),transparent 65%);bottom:-14vw;right:-10vw;}
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:90;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation:grain .6s steps(4) infinite;}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-2%,3%)}50%{transform:translate(3%,-2%)}75%{transform:translate(-3%,-3%)}100%{transform:translate(2%,2%)}}

.hero-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;}
.hero-title{
  font-weight:900;font-stretch:122%;text-transform:uppercase;line-height:.86;
  font-size:clamp(3.6rem,13vw,12.5rem);letter-spacing:-.015em;text-align:center;
  will-change:transform;
}
.hero-title .l{display:block;will-change:transform,opacity;}
.hero-sub{
  margin-top:5vh;font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--gris);
  text-transform:uppercase;will-change:transform,opacity;
}
.hero-video-ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:-1;
}
.hero-video-ph span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:#333;border:1px dashed #222;padding:12px 22px;}

/* ============ ESCENA 2: DOS MUNDOS (pinned merge) ============ */
.mundos{height:100svh;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.mundo{
  position:absolute;font-weight:900;font-stretch:122%;text-transform:uppercase;
  font-size:clamp(3rem,11vw,10.5rem);letter-spacing:-.015em;line-height:1;
  will-change:transform,opacity;white-space:nowrap;
}
.mundo-cine{color:var(--sol);}
.mundo-ia{color:var(--plasma);}
.mundo-union{
  position:absolute;text-align:center;opacity:0;will-change:transform,opacity;
}
.mundo-union .big{
  font-weight:900;font-stretch:122%;text-transform:uppercase;
  font-size:clamp(3rem,11vw,10.5rem);letter-spacing:-.015em;line-height:1;
}
.mundo-union .tag{
  margin-top:22px;font-family:var(--mono);font-size:12.5px;letter-spacing:.18em;color:var(--gris);text-transform:uppercase;
}
.mundo-union .tag em{font-style:normal;color:var(--tally);}

/* ============ ESCENA 3: MANIFIESTO (texto scrubbed) ============ */
.manifiesto{min-height:85svh;display:flex;align-items:center;padding:0 6vw;}
.manifiesto p{
  max-width:1050px;margin:0 auto;
  font-size:clamp(1.7rem,4.4vw,3.6rem);line-height:1.3;letter-spacing:-.01em;font-weight:300;
}
.manifiesto .w{opacity:.12;}
.manifiesto .rojo{color:var(--tally);font-weight:500;}
.manifiesto .bold{font-weight:700;font-stretch:112%;}

/* ============ ESCENA 4: CASOS (parallax profundo) ============ */
.casos{padding:14vh 6vw;}
.escena-lbl{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--gris);text-transform:uppercase;
  display:flex;align-items:center;gap:12px;margin-bottom:8vh;max-width:1300px;margin-left:auto;margin-right:auto;
}
.escena-lbl::before{content:'';width:34px;height:1px;background:var(--tally);}
.caso{
  max-width:1300px;margin:0 auto 16vh;display:grid;grid-template-columns:1fr;gap:28px;
}
.caso-frame{
  position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:#101014;
}
.caso-layer{position:absolute;inset:-14% 0;will-change:transform;background:var(--g);}
.caso-float{
  position:absolute;will-change:transform;border-radius:6px;
  background:rgba(239,237,232,.06);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(239,237,232,.12);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:rgba(239,237,232,.7);
  padding:10px 16px;text-transform:uppercase;
}
.caso-frame .ph-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:rgba(239,237,232,.4);
}
.caso-frame .ph-label i{font-style:normal;border:1px dashed rgba(239,237,232,.18);padding:10px 20px;background:rgba(8,8,11,.35);}
.caso-info{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:start;}
.caso h3{
  font-weight:800;font-stretch:116%;text-transform:uppercase;
  font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.02;will-change:transform,opacity;
}
.caso h3 span{display:block;font-weight:300;font-stretch:100%;text-transform:none;font-size:.55em;color:#B5B4B0;margin-top:10px;line-height:1.45;}
.caso-meta{
  font-family:var(--mono);font-size:11.5px;line-height:2.1;letter-spacing:.05em;color:var(--gris);
  border-top:1px solid var(--linea);padding-top:14px;will-change:transform,opacity;
}
.caso-meta div{border-bottom:1px solid var(--linea);padding:2px 0;}
.caso-meta b{color:var(--blanco);font-weight:500;float:right;}

/* ============ ESCENA 5: PROCESO (horizontal pinneado) ============ */
.proceso{position:relative;overflow:hidden;}
.proceso-track{display:flex;height:100svh;align-items:center;will-change:transform;width:max-content;}
.panel{
  width:72vw;max-width:820px;flex-shrink:0;padding:0 6vw;
}
.panel .tc-lbl{font-family:var(--mono);font-size:11px;color:var(--tally);letter-spacing:.12em;}
.panel h4{font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:clamp(2rem,5vw,4rem);margin:20px 0 22px;line-height:.95;}
.panel p{font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.65;color:#ABAAA6;max-width:520px;}

/* ============ ESCENA 6: CONTACTO ============ */
.contacto{min-height:92svh;display:flex;flex-direction:column;justify-content:center;padding:0 6vw;}
.contacto-inner{max-width:1300px;margin:0 auto;width:100%;}
.contacto h2{
  font-weight:900;font-stretch:120%;text-transform:uppercase;
  font-size:clamp(2.6rem,8.5vw,7.5rem);line-height:.92;letter-spacing:-.015em;will-change:transform,opacity;
}
.contacto h2 .outline{color:transparent;-webkit-text-stroke:1.5px var(--blanco);}
.contacto a{
  display:inline-block;margin-top:46px;font-family:var(--mono);
  font-size:clamp(1rem,2.4vw,1.5rem);letter-spacing:.04em;color:var(--blanco);text-decoration:none;
  border-bottom:1px solid var(--tally);padding-bottom:8px;transition:color .3s;
}
.contacto a:hover{color:var(--tally);}
footer{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  max-width:1300px;margin:0 auto;padding:0 6vw 40px;width:100%;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--gris);
}

@media(max-width:820px){
  .hud{padding:16px 18px;}
  .caso-info{grid-template-columns:1fr;gap:20px;}
  .casos{padding:10vh 6vw;}
  .caso{margin-bottom:12vh;}
  .mundo-union .tag{font-size:10.5px;letter-spacing:.14em;padding:0 7vw;}
  /* Proceso en táctil: sin pin horizontal — paneles apilados en vertical,
     cada uno con reveal simple (ver main.js, rama mobile) */
  .proceso-track{flex-direction:column;height:auto;width:auto;align-items:stretch;padding:14vh 0;gap:12vh;}
  .panel{width:100%;max-width:none;}
}
@media(prefers-reduced-motion:reduce){
  .grain,.rec{animation:none!important;}
}