/* ============================================================
   CARNE LATENTE — TOUR VIRTUAL
   Recorrido cinematográfico con la cámara controlada por el
   scroll (three.js + GSAP ScrollTrigger). Prefijo tv-.
   ============================================================ */

/* ---------- 01. Intro / El ritual ---------- */
.tv-intro-s{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;align-items:flex-end;
  padding:calc(104px + 24px) 0 clamp(64px,12vh,140px);
  isolation:isolate;background:var(--bg);overflow:hidden;
}
/* Fondo: la imagen ya deja la izquierda oscura para el texto.
   Velo lateral suave y fundido inferior hacia el recorrido. */
.tv-hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--bg)}
.tv-hero-img{
  display:block;position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:100% 0%;
}
.tv-hero-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(11,7,8,.6) 0%,rgba(11,7,8,.25) 40%,transparent 70%),
    linear-gradient(180deg,transparent 55%,var(--bg) 100%);
}
.tv-intro-inner{position:relative;width:100%;display:flex;flex-direction:column;gap:clamp(40px,7vh,72px)}
.tv-intro-copy{max-width:600px}

.tv-kicker{display:flex;align-items:center;gap:14px;margin:0 0 18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--secondary)}
.tv-kicker-line{display:block;width:34px;height:1px;background:var(--accent2);transform-origin:left;flex:none}

.tv-title{
  margin:0 0 clamp(18px,2.6vh,30px);
  font:300 clamp(56px,min(11vw,17vh),168px)/.86 var(--serif);
  letter-spacing:-.035em;text-transform:uppercase;max-width:12ch;
}
.tv-lead{margin:0;font:300 16px/1.6 var(--sans);color:var(--secondary);max-width:40ch}

/* Scroll para entrar: línea vertical que desciende */
.tv-scroll{
  display:flex;align-items:center;gap:12px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.tv-scroll-line{position:relative;width:1px;height:44px;background:var(--line);overflow:hidden}
.tv-scroll-line::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:45%;background:var(--accent2);
  animation:tv-scroll-line 2.1s cubic-bezier(.6,0,.2,1) infinite;
}
@keyframes tv-scroll-line{
  0%{transform:translateY(-110%)}
  55%{transform:translateY(235%)}
  100%{transform:translateY(235%)}
}

/* Entrada en cascada (misma lógica que Mirada/Útero) */
.tv-intro-copy > *{transition:opacity 1.2s cubic-bezier(.22,.61,.24,1),transform 1.2s cubic-bezier(.22,.61,.24,1)}
.tv-intro .tv-intro-copy > *{opacity:0;transform:translateY(22px)}
.tv-intro .tv-scroll{opacity:0}
.tv-scroll{transition:opacity 1.2s ease .7s}
.tv-intro-copy > :nth-child(2){transition-delay:.12s}
.tv-intro-copy > :nth-child(3){transition-delay:.34s}
.tv-intro:not(.cl-loading) .tv-intro-copy > *,
.tv-intro:not(.cl-loading) .tv-scroll{animation:tv-failsafe 0s 3s forwards}
@keyframes tv-failsafe{to{opacity:1;transform:none}}

/* ---------- 02. Recorrido ---------- */
.tv-tour{position:relative}
.tv-stage{
  display:none;position:relative;width:100%;height:100vh;height:100svh;
  overflow:hidden;background:var(--bg);
}
html.tv-has-3d .tv-stage{display:block}

.tv-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Velo negro sobre el canvas: fundido de entrada (lo anima tour.js) */
.tv-veil{position:absolute;inset:0;background:var(--bg);pointer-events:none;z-index:4;opacity:1}

/* HUD */

/* HUD: entra (opacity 0→1) cuando empieza el pin, no antes */
.tv-hud{
  position:absolute;top:calc(var(--bar-h) + 20px);left:clamp(18px,3vw,40px);right:clamp(18px,3vw,40px);
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  pointer-events:none;z-index:5;
  opacity:0;transition:opacity .5s ease;
}
.tv-stage.is-live .tv-hud,.tv-stage.is-live .tv-arrows,.tv-stage.is-live .tv-progress{opacity:1}
.tv-hud-sala{font:400 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--secondary)}
.tv-hud-count{font:400 11px var(--sans);letter-spacing:.08em;color:var(--secondary);font-variant-numeric:tabular-nums}

/* Línea de progreso en el borde inferior */
.tv-progress{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(245,240,236,.08);z-index:5;opacity:0;transition:opacity .6s ease}
.tv-progress-fill{display:block;height:100%;background:var(--accent2);transform:scaleX(0);transform-origin:left}

/* Tooltip de la obra */
.tv-tip{
  position:absolute;top:50%;right:clamp(24px,4vw,64px);transform:translateY(calc(-50% + 10px));
  width:min(380px,30vw);padding:22px 26px;
  background:rgba(11,7,8,.72);border-left:1px solid var(--accent2);
  opacity:0;visibility:hidden;z-index:6;
  transition:opacity .6s ease,transform .6s ease,visibility 0s .6s;
}
.tv-tip.is-visible{opacity:1;visibility:visible;transform:translateY(-50%);transition:opacity .6s ease,transform .6s ease,visibility 0s 0s}
.tv-tip-num{display:block;font:400 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent2);margin:0 0 10px}
.tv-tip-title{margin:0 0 12px;font:300 clamp(28px,3vw,44px)/1 var(--serif);letter-spacing:-.01em;text-transform:uppercase}
.tv-tip-text{margin:0;font:italic 300 clamp(17px,1.2vw,20px)/1.5 var(--serif);color:var(--secondary);max-width:34ch}

/* Flechas */
.tv-arrows{position:absolute;right:clamp(18px,3vw,40px);bottom:clamp(18px,3vh,36px);display:flex;gap:10px;z-index:7;opacity:0;transition:opacity .5s ease}
.tv-arrow{
  width:48px;height:48px;display:grid;place-items:center;
  background:rgba(11,7,8,.6);border:1px solid var(--line);color:var(--text);
  font:300 20px var(--sans);cursor:pointer;padding:0;
  transition:border-color .3s ease,color .3s ease;
}
.tv-arrow:hover,.tv-arrow:focus-visible{border-color:var(--accent2);color:#fff;outline:none}
.tv-arrow:disabled{opacity:.3;pointer-events:none}

/* Lista editorial de respaldo */
.tv-list{padding:clamp(72px,10vw,140px) 0;background:var(--bg)}
html.tv-has-3d .tv-list{display:none}
.tv-list-room{max-width:min(720px,100%);margin:0 auto;padding:0 var(--pad)}
.tv-list-room + .tv-list-room{margin-top:clamp(64px,9vw,110px)}
.tv-list-h{display:flex;align-items:center;gap:16px;margin:0 0 clamp(28px,4vw,40px);font:400 13px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--secondary)}
.tv-list-h::before{content:"";display:block;width:34px;height:1px;background:var(--accent2)}
.tv-list-works{display:grid;gap:clamp(40px,6vw,72px)}
.tv-list-work{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(20px,3vw,32px);align-items:start}
.tv-list-work img{width:100%;height:auto;display:block;background:#140c0e}
.tv-list-num{display:block;font:400 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent2);margin:0 0 8px}
.tv-list-meta h3{margin:0 0 10px;font:300 clamp(22px,2.6vw,30px)/1.05 var(--serif);text-transform:uppercase;letter-spacing:-.01em}
.tv-list-meta p{margin:0;font:italic 300 16px/1.55 var(--serif);color:var(--secondary);max-width:34ch}

/* ---------- 03. El espejo ---------- */
.tv-mirror{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--bar-h) + 24px) 0 clamp(40px,6vh,72px);
  background:radial-gradient(55% 50% at 50% 50%,rgba(140,31,53,.14),transparent 70%),var(--bg);
  overflow:hidden;text-align:center;
}
.tv-mirror-inner{position:relative;width:100%;display:flex;flex-direction:column;align-items:center}

.tv-mirror-frame{
  position:relative;container-type:inline-size;
  width:min(92vw,1180px,calc((100svh - var(--bar-h) - 150px) * 1.777));
  margin:0 auto;
}
.tv-mirror-frame picture{display:block;line-height:0}
.tv-mirror-img{
  display:block;width:100%;height:auto;
}

.tv-mirror-q{
  position:absolute;left:16%;right:16%;top:27%;bottom:38%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;margin:0;
  font-family:var(--serif);font-weight:300;letter-spacing:-.02em;
  text-shadow:0 2px 18px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.6);
}
.tv-q-line{display:block}
.tv-mirror-q > .tv-q-line:first-child{font-size:6.4cqw;line-height:.95;color:var(--text)}
.tv-q-line--it{font-style:italic;font-size:2.6cqw;line-height:1.3;color:var(--secondary);margin-top:.35em}
.tv-q-accent{color:var(--text)}
.tv-q-line .tv-w,.tv-q-line .tv-ch{display:inline-block}
.tv-mirror .tv-w{white-space:pre}

/* Texto completo para lectores de pantalla */
.tv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.tv-next{
  --tv-line:1;position:relative;display:inline-flex;align-items:center;gap:14px;
  margin-top:clamp(28px,5vh,56px);padding:9px 0;
  font:500 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;
  transition:color .3s ease,gap .3s ease;
}
.tv-next::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(var(--tv-line));transform-origin:left}
.tv-next:hover{color:var(--accent2);gap:20px}
.tv-next:focus-visible{outline:1px solid var(--accent2);outline-offset:4px}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .tv-intro-s{padding-top:calc(88px + 20px)}
  .tv-list-work{grid-template-columns:minmax(0,180px) minmax(0,1fr)}
}
@media(max-width:767px){
  .tv-intro-s{padding-bottom:clamp(48px,9vh,80px);padding-top:calc(64px + 16px)}
  .tv-title{font-size:clamp(40px,13.6vw,96px)}
  /* Móvil: la figura arriba a la derecha, el texto abajo sobre negro. */
  .tv-hero-img{object-position:45% 0}
  .tv-hero-bg::after{
    background:linear-gradient(180deg,transparent 0%,transparent 35%,rgba(11,7,8,.6) 60%,rgba(11,7,8,.92) 100%);
  }
  .tv-tip{
    top:auto;bottom:0;right:16px;left:16px;transform:translateY(10px);
    width:auto;max-height:34svh;overflow:hidden;
    padding:16px;border-left:0;border-top:1px solid var(--accent2);
  }
  .tv-tip.is-visible{transform:none}
  .tv-tip-title{font-size:clamp(24px,6vw,30px)}
  .tv-hud{right:116px}
  .tv-arrows{right:16px;bottom:auto;top:calc(var(--bar-h) + 12px)}
  .tv-arrow{width:40px;height:40px;background:transparent;border:1px solid var(--line)}
  .tv-list-work{grid-template-columns:minmax(0,1fr);gap:18px}
  .tv-list-work img{max-height:60svh;object-fit:contain}
  .tv-mirror-frame{width:min(94vw,calc((100svh - var(--bar-h) - 130px) * 0.8))}
  .tv-mirror-q{left:13%;right:13%;top:22%;bottom:38%}
  .tv-mirror-q > .tv-q-line:first-child{font-size:9cqw}
  .tv-q-line--it{font-size:4.4cqw}
}

@media(prefers-reduced-motion:reduce){
  .tv-scroll-line::after{animation:none}
  .tv-intro-copy > *,.tv-scroll,.tv-tip{transition:none!important;animation:none!important}
  .tv-intro .tv-intro-copy > *,.tv-intro .tv-scroll{opacity:1;transform:none}
  .tv-mirror .tv-w,.tv-mirror .tv-ch,.tv-q-line,.tv-next,.tv-mirror-img{opacity:1!important;transform:none!important;filter:none!important}
  .tv-next{--tv-line:1}
}