/* La sala: el portafolio proyectado. Maqueta de origen: mockups/sala/index.html. Base visual: 601 Inc. */
/* ═══════════════════════════════════════════════════════════
   LA SALA · base 601 Inc.: una pantalla en una habitación oscura,
   un contador gigante, una línea de texto, y vacío.
   Los rollos se generan desde la lista ROLLOS del guion de abajo.
   ═══════════════════════════════════════════════════════════ */
html,body,#contenido{height:100%}
#contenido{display:block}
body{overflow:hidden;background:#070605}
.grain{opacity:.07}

/* ── La habitación ───────────────────────────────────────── */
.sala{position:relative;height:100%;isolation:isolate;overflow:hidden}
.suelo{
  position:absolute;left:-10%;right:-10%;bottom:-8%;height:46%;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 90% at 58% 0%, rgba(240,180,41,.13), transparent 70%),
    linear-gradient(180deg, transparent, rgba(242,234,220,.025) 40%, transparent);
}
.haz{
  position:absolute;left:-20%;top:-40%;width:120%;height:140%;z-index:0;pointer-events:none;
  background:conic-gradient(from 118deg at 0% 0%, transparent 0deg, rgba(240,180,41,.07) 10deg, rgba(242,234,220,.03) 18deg, transparent 30deg);
  filter:blur(22px);transform-origin:0 0;
}
@keyframes haz{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)}}
.polvo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.polvo i{position:absolute;width:2px;height:2px;border-radius:50%;background:rgba(242,234,220,.55);opacity:0;animation:polvo 9s linear infinite}
@keyframes polvo{0%{opacity:0;transform:translate(0,0)}15%{opacity:.6}85%{opacity:.3}100%{opacity:0;transform:translate(40px,120px)}}

/* ── Contador y línea ────────────────────────────────────── */
.contador{
  position:absolute;left:var(--gutter);top:clamp(22px,4vh,40px);z-index:3;max-width:28vw;
  font-family:var(--struct);font-variation-settings:'wdth' 118,'wght' 800;text-transform:uppercase;
  color:var(--cream);line-height:.82;letter-spacing:-.03em;
}
.contador .lockup{display:block;font-size:.95rem;margin-bottom:clamp(18px,3vh,30px);font-variation-settings:'wdth' 118,'wght' 800}
.contador .n{display:block;font-size:clamp(96px,15vw,196px)}
.contador .de{display:block;font-size:clamp(96px,15vw,196px);font-variation-settings:'wdth' 118,'wght' 300;color:var(--cream-dim)}
.contador .de b{font-weight:inherit;color:var(--cream)}
.linea{
  margin-top:clamp(18px,3vh,30px);font-family:var(--tech);font-size:.72rem;text-transform:none;
  font-variation-settings:normal;line-height:1.8;color:var(--cream-dim);letter-spacing:.16em;max-width:30ch;
}
.linea b{font-weight:500;color:var(--cream)}
.medida{margin-top:clamp(14px,2.4vh,24px);font-family:var(--struct);font-variation-settings:'wdth' 100,'wght' 200;font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.03em;line-height:1;color:var(--cream);text-transform:none;opacity:0;transition:opacity var(--t-reveal) var(--ease-out)}
.medida.en{opacity:1}
.medida small{display:block;font-family:var(--tech);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-dim);margin-top:8px}
.medida em{font-style:normal;color:var(--gold)}
.abrir{display:none;margin-top:clamp(14px,2.4vh,22px);font-family:var(--tech);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);border-bottom:1px solid var(--gold);padding-bottom:4px;font-variation-settings:normal}
.abrir.en{display:inline-block}

/* bloque contextual (el bot) */
.ctx{margin-top:clamp(18px,3vh,30px);text-transform:none;font-variation-settings:normal;letter-spacing:0;line-height:1.5;display:none}
.ctx.en{display:block}
.ctx .sugs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;max-width:320px}
.ctx .sugs button{border:1px solid var(--line-hard);background:transparent;color:var(--cream);border-radius:999px;padding:7px 12px;font:500 .76rem var(--struct);cursor:pointer;transition:border-color 160ms ease, transform 160ms var(--ease-out)}
.ctx .sugs button:hover{border-color:var(--gold)}
.ctx .sugs button:active{transform:scale(.96)}
.ctx p{font-family:var(--struct);font-size:.78rem;color:var(--cream-dim);max-width:30ch;margin-top:12px}

/* ── La pantalla en perspectiva ──────────────────────────── */
.escena{position:absolute;z-index:2;left:34%;top:11%;width:60%;perspective:1700px;perspective-origin:30% 35%}
.pantalla{
  position:relative;width:100%;aspect-ratio:16/9;
  transform:rotateY(-9deg) rotateX(1.5deg);transform-style:preserve-3d;transform-origin:50% 50%;
  background:#000;
  box-shadow:0 0 0 1px rgba(242,234,220,.09), 0 40px 90px -20px rgba(0,0,0,.9), 0 0 140px -30px rgba(240,180,41,.22);
}
.reflejo{
  position:absolute;left:0;right:0;top:100%;height:70%;pointer-events:none;
  transform:scaleY(-1);transform-origin:50% 0;opacity:.42;
  background:#000 center top / cover no-repeat;filter:blur(7px) saturate(.8);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.75), transparent 85%);mask-image:linear-gradient(180deg, rgba(0,0,0,.75), transparent 85%);
}
.reflejo::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg, transparent 0 3px, rgba(0,0,0,.25) 3px 4px)}

.rollo{position:absolute;inset:0;padding:0;margin:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 500ms var(--ease-out), visibility 0s 500ms}
.rollo.en{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
/* un rollo apagado no existe para el ratón, aunque la hoja del teléfono fuerce pointer-events en su pantalla */
.rollo:not(.en) *{pointer-events:none !important}
.rollo iframe{width:100%;height:100%;border:0;display:block;background:#000}
.rollo.web iframe{background:#fff}
/* grabación: la web no se deja embeber, se enseña entera y se desplaza */
.rollo.grab{overflow-y:auto;overflow-x:hidden;scrollbar-width:none;background:#fff}
.rollo.grab::-webkit-scrollbar{display:none}
.rollo.grab img{width:100%;display:block}

/* Cartel de entrada */
.cartel{position:absolute;inset:0;z-index:6;display:grid;place-items:center;text-align:center;overflow:hidden;opacity:0;pointer-events:none;transition:opacity 480ms var(--ease-out)}
.cartel.en{opacity:1}
.cartel .fondo{position:absolute;inset:-6%;background:#0A0907 center / cover no-repeat;filter:blur(18px) brightness(.45) saturate(.7);transform:scale(1.06)}
.cartel .fondo::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 50%, transparent, rgba(10,9,7,.7))}
.cartel .texto{position:relative;padding:20px;transform:translateY(10px);transition:transform 600ms var(--ease-out)}
.cartel.en .texto{transform:none}
.cartel h2{font-family:var(--say);font-variation-settings:'opsz' 144,'wght' 600,'SOFT' 80,'WONK' 1;font-style:italic;font-size:clamp(2.6rem,7.2vw,6.4rem);letter-spacing:-.03em;line-height:.95;color:var(--cream);text-wrap:balance}
.cartel p{margin-top:16px;font-family:var(--tech);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-dim)}
.cartel p b{font-weight:500;color:var(--gold)}
.rollo.enfocando .tlf,.rollo.enfocando .tuyo-in{filter:blur(14px);transform:scale(1.03)}
.rollo .tlf,.rollo .tuyo-in{transition:filter 900ms var(--ease-out), transform 900ms var(--ease-out)}
/* el iframe nunca lleva filtro ni transformación: con ellos Chrome se pega al hacer scroll */
.rollo iframe{transform:none;filter:none;transition:none}

/* Corte entre rollos */
.corte{position:absolute;inset:0;z-index:7;background:#000;opacity:0;pointer-events:none}
.corte.va{animation:corte 420ms steps(1) forwards}
@keyframes corte{0%{opacity:1}35%{opacity:.6}50%{opacity:1}70%{opacity:.85}100%{opacity:0}}

/* Señal vieja */
.antes{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;transition:opacity 200ms var(--ease-out)}
.antes.en{opacity:1}
.antes::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;background:repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 2px, transparent 2px 5px);animation:barrido 900ms linear infinite}
@keyframes barrido{from{background-position:0 0}to{background-position:0 48px}}
.antes iframe{background:#0A0907}
.etiqueta{
  position:absolute;left:12px;bottom:12px;z-index:5;display:flex;align-items:center;gap:9px;
  font-family:var(--tech);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);
  background:rgba(7,6,5,.8);border:1px solid var(--line);padding:6px 11px 6px 9px;
  opacity:0;transform:translateY(6px);transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out);pointer-events:none;
}
.etiqueta.en{opacity:1;transform:none}
.etiqueta i{width:6px;height:6px;border-radius:50%;background:var(--no);animation:pulso 1s steps(2) infinite}
.etiqueta.vivo i{background:var(--ok);animation:none}
@keyframes pulso{50%{opacity:.25}}
.replay{position:absolute;right:12px;bottom:12px;z-index:5;font-family:var(--tech);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim);background:rgba(7,6,5,.8);border:1px solid var(--line);padding:7px 11px;cursor:pointer;transition:opacity 200ms ease, color var(--t-ui) ease}
.replay:hover{color:var(--cream)}
.antes.en ~ .replay{opacity:0;pointer-events:none}

/* ── El teléfono proyectado ──────────────────────────────── */
.rollo.rtel{display:grid;place-items:center;background:radial-gradient(55% 80% at 50% 110%, rgba(240,180,41,.14), transparent 70%), #050403;overflow:hidden}
.rollo.rtel .tlf{aspect-ratio:auto;max-width:none}
.msg.el.escribiendo{display:flex;gap:4px;align-items:center;padding:12px 14px}
.msg.el.escribiendo i{width:6px;height:6px;border-radius:50%;background:var(--cream-dim);animation:punto 900ms ease-in-out infinite}
.msg.el.escribiendo i:nth-child(2){animation-delay:150ms}.msg.el.escribiendo i:nth-child(3){animation-delay:300ms}
@keyframes punto{50%{opacity:.25;transform:translateY(-2px)}}
.tlf .pant.en{position:absolute}

/* ── El tuyo ─────────────────────────────────────────────── */
.rollo.tuyo{display:grid;place-items:center;text-align:center;background:#000}
.tuyo-in{padding:20px}
.tuyo-in .slate{display:block;margin-bottom:16px}
.tuyo-in h2{font-size:clamp(2rem,4.6vw,4rem);margin-bottom:22px}
.tuyo-in .acciones{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* ── Pista y tira (Freshman) ─────────────────────────────── */
.pista{position:absolute;right:var(--gutter);top:clamp(24px,4vh,42px);z-index:3;font-family:var(--tech);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-dim)}
.pista kbd{font:inherit;color:var(--cream);margin:0 1px}
.tira{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:0 var(--gutter) clamp(14px,2.6vh,24px)}
.progreso{height:1px;background:rgba(242,234,220,.12);position:relative;margin-bottom:14px}
.progreso i{position:absolute;left:0;top:-1px;height:3px;background:var(--gold);transition:left 500ms var(--ease-out), width 500ms var(--ease-out)}
.tira-in{display:flex;align-items:center;gap:clamp(18px,3vw,40px);overflow-x:auto;scrollbar-width:none;padding-right:60px;
  -webkit-mask-image:linear-gradient(90deg, #000 92%, transparent);mask-image:linear-gradient(90deg, #000 92%, transparent)}
.tira-in::-webkit-scrollbar{display:none}
.tira .cab{font-family:var(--tech);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-dim);white-space:nowrap}
.foto{flex:none;display:flex;align-items:center;gap:12px;padding:0;background:none;border:0;cursor:pointer;color:var(--cream-dim);transition:color var(--t-ui) ease, transform var(--t-press) var(--ease-out)}
.foto:active{transform:scale(.97)}
.foto .mini{width:72px;aspect-ratio:16/10;overflow:hidden;background:#15120E;position:relative;flex:none;box-shadow:0 0 0 1px rgba(242,234,220,.08)}
.foto .mini img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;opacity:.5;filter:saturate(.7);transition:opacity var(--t-ui) ease, filter var(--t-ui) ease}
.foto .mini .wa{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(60% 60% at 50% 100%, rgba(240,180,41,.18), transparent 70%), #0B0A08}
.foto .mini .wa b{width:22px;height:22px;border-radius:6px;background:linear-gradient(160deg,#5BE07A,#25D366 55%,#1DB954);display:grid;place-items:center;color:#fff}
.foto .mini .wa svg{width:14px;height:14px}
.foto .mini .vacia{position:absolute;inset:0;display:grid;place-items:center;border:1px dashed rgba(242,234,220,.25);font-family:var(--say);font-style:italic;color:var(--cream-dim);font-size:.9rem}
.foto .txt{text-align:left;font-family:var(--tech);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;line-height:1.7;white-space:nowrap}
.foto .txt b{display:block;font-weight:500;color:inherit}
.foto .txt b::before{content:attr(data-n) "  ";color:var(--cream-dim)}
.foto.en{color:var(--cream)}
.foto.en .mini{box-shadow:0 0 0 1px var(--gold), 0 0 24px rgba(240,180,41,.3)}
.foto.en .mini img{opacity:1;filter:none}
.foto.en .txt b::before{color:var(--gold)}
@media (hover:hover){.foto:hover{color:var(--cream)}.foto:hover .mini img{opacity:.85}}

/* ── Móvil ───────────────────────────────────────────────── */
@media (max-width:900px){
  .contador{left:16px;top:16px;max-width:none;right:16px;display:flex;align-items:flex-end;gap:14px;line-height:.8}
  .contador .lockup{display:none}
  .contador .n{font-size:64px}
  .contador .de{font-size:28px;padding-bottom:4px}
  .linea{margin:0 0 6px auto;text-align:right;max-width:46vw;font-size:.58rem;letter-spacing:.12em;line-height:1.5}
  .medida{display:none}
  .abrir{position:fixed;left:16px;bottom:118px;margin:0;z-index:3}
  .ctx{position:fixed;left:16px;right:16px;bottom:118px;margin:0;z-index:3}
  .ctx .sugs{max-width:none;justify-content:center}
  .ctx p{display:none}
  .escena{left:16px;right:16px;width:auto;top:110px;bottom:118px;perspective:none}
  .pantalla{transform:none;height:100%;aspect-ratio:auto}
  .reflejo{display:none}
  .sala.en-bot .escena{bottom:225px}
  .sala.en-grab .escena{bottom:160px}
  .pista{display:none}
  .tira{padding:0 16px 12px}
  .progreso{margin-bottom:10px}
  .tira .cab{display:none}
  .foto .mini{width:56px}
  .foto .txt{font-size:.56rem}
  .replay{display:none}
  .cartel h2{font-size:2.4rem}
}
@media (prefers-reduced-motion:reduce){
  .antes::after,.etiqueta i,.polvo i{animation:none}
}