/* ============================================================
   CARNE LATENTE — TERRITORIO (HERO + VOCES + TEXTO, parte 1)
   Hero a sangre, pila de 7 tarjetas con video dentro y sección
   de texto puente hacia las máscaras. Provisional hasta la parte 2.
   ============================================================ */

/* Provisional (parte 2 lo retira): fondo fijo del carrusel taparía lo nuevo. */
.tl-page{background:var(--bg);overflow-x:clip}
.tl-obras .tl-bg{display:none}
.tl-voces,.tl-txt{scroll-margin-top:var(--bar-h)}

/* ===== KICKER COMPARTIDO (hero + voces + texto) ===== */
.tl-h-kicker{display:flex;align-items:center;gap:12px;margin:0 0 22px;font:500 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--secondary)}
.tl-h-kicker-line{display:inline-block;width:34px;height:1px;background:var(--accent2)}

/* ===== HERO ===== */
.tl-hero{position:relative;display:flex;align-items:flex-end;min-height:100svh;overflow:clip;background:var(--bg)}
.tl-hero-img{position:absolute;inset:0;display:block;margin:0}
.tl-hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block;filter:saturate(1.15) brightness(.88) contrast(1.05);animation:tl-h-img 2.4s cubic-bezier(.22,.61,.24,1) both}
@keyframes tl-h-img{from{transform:scale(1.08)}to{transform:scale(1)}}
.tl-hero-veil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 55% at 30% 70%,rgba(140,31,53,.28),transparent 70%),linear-gradient(90deg,rgba(11,7,8,.78) 0%,rgba(11,7,8,.3) 45%,rgba(11,7,8,0) 100%),linear-gradient(180deg,rgba(11,7,8,.35) 0%,rgba(11,7,8,.15) 45%,rgba(11,7,8,.92) 100%)}
.tl-hero-inner{position:relative;z-index:1;width:100%;padding-top:calc(var(--bar-h) + 40px);padding-bottom:clamp(48px,9vh,96px)}
.tl-h-title{margin:0;max-width:12ch;font:300 clamp(48px,min(9vw,15vh),150px)/.9 var(--serif);letter-spacing:-.035em;text-transform:uppercase;color:var(--text);text-wrap:balance}
.tl-h-text{margin:24px 0 0;max-width:46ch;font:300 clamp(17px,1.4vw,19px)/1.65 var(--sans);color:var(--secondary)}
.tl-h-cue{display:inline-flex;align-items:center;gap:14px;margin-top:34px;font:500 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--secondary);text-decoration:none}
.tl-h-cue:hover{color:var(--text)}
.tl-h-cue:focus-visible{outline:1px solid var(--accent2);outline-offset:4px}
.tl-h-cue i{position:relative;display:inline-block;width:1px;height:40px;background:rgba(245,240,236,.18);overflow:hidden}
.tl-h-cue i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--accent2);animation:tl-h-cue 1.8s cubic-bezier(.22,.61,.24,1) infinite}
@keyframes tl-h-cue{0%{top:-40%}100%{top:110%}}
/* Entrada del hero (solo CSS, escalonada). */
.tl-h-kicker,.tl-h-title,.tl-h-text,.tl-h-cue{animation:tl-h-in 1.1s cubic-bezier(.22,.61,.24,1) both}
.tl-h-kicker{animation-delay:.05s}
.tl-h-title{animation-delay:.17s}
.tl-h-text{animation-delay:.29s}
.tl-h-cue{animation-delay:.41s}
@keyframes tl-h-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ===== VOCES ===== */
.tl-voces{background:var(--bg);padding:96px var(--pad)}
.tl-v-head{max-width:1100px;margin-bottom:clamp(36px,6vh,72px)}
.tl-v-title{margin:0;font:300 clamp(36px,5vw,72px)/1.05 var(--serif);letter-spacing:-.015em;color:var(--text);text-wrap:balance}
.tl-v-list{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.tl-v-list > li{margin:0;min-width:0}
.tl-voz{background:var(--bg-2);border:1px solid var(--line);padding:clamp(24px,3.2vw,48px);display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.tl-voz-title{margin:0;font:300 clamp(30px,3.4vw,52px)/1.05 var(--serif);color:var(--text);text-wrap:balance}
.tl-voz-quote{margin:24px 0 0;padding-left:20px;border-left:1px solid var(--accent)}
.tl-voz-quote p{margin:0;font:italic 300 clamp(18px,1.7vw,24px)/1.5 var(--serif);color:var(--secondary)}
.tl-voz-quote p::before{content:"\00AB"}
.tl-voz-quote p::after{content:"\00BB"}
.tl-voz-media{margin:0;min-width:0}
/* Subcard de video: botón 16:9 con póster. */
.tl-voz-frame{position:relative;display:block;width:100%;aspect-ratio:16/9;margin:0;padding:0;border:1px solid var(--line);background:#000;cursor:pointer;overflow:hidden}
.tl-voz-frame picture,.tl-voz-frame img{position:absolute;inset:0;width:100%;height:100%;display:block}
.tl-voz-frame img{object-fit:cover;filter:brightness(.8)}
.tl-voz-frame:focus-visible{outline:1px solid var(--accent2);outline-offset:4px}
.tl-voz-play{position:absolute;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);border:1px solid var(--accent2);border-radius:50%;transition:background-color .3s ease}
.tl-voz-play::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-38%,-50%);border-left:14px solid var(--text);border-top:9px solid transparent;border-bottom:9px solid transparent}
.tl-voz-frame:hover .tl-voz-play{background:var(--accent);animation:tl-voz-pulse 1.2s ease-out}
@keyframes tl-voz-pulse{0%{box-shadow:0 0 0 0 rgba(178,51,73,.55)}100%{box-shadow:0 0 0 22px rgba(178,51,73,0)}}
.tl-voz-dur{position:absolute;left:14px;bottom:12px;font:500 12px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--text);text-shadow:0 1px 8px rgba(0,0,0,.8)}
/* Video en reproducción: misma caja 16:9. */
.tl-voz-video{display:block;width:100%;aspect-ratio:16/9;background:#000;object-fit:contain}
/* Entrada al scroll: oculta solo con JS. */
.tl-js .tl-voz,.tl-js .tl-v-head,.tl-js .tl-txt-inner{opacity:0;transform:translateY(32px);transition:opacity 1s cubic-bezier(.22,.61,.24,1),transform 1s cubic-bezier(.22,.61,.24,1)}
.tl-js .is-in{opacity:1;transform:none}

/* Pila de tarjetas con scroll (solo escritorio, sin reduced-motion). */
@media (min-width:900px){
  .tl-v-list{gap:0}
  .tl-v-list > li{margin-bottom:14vh}
  .tl-v-list > li:last-child{margin-bottom:0}
  /* El sticky va en el <li> (hermanos dentro del <ol>): así la pila tiene recorrido. */
  .tl-v-list > li{position:sticky;top:calc(var(--bar-h) + 20px + var(--i,0) * 14px)}
  .tl-v-list > li:nth-child(2){--i:1}
  .tl-v-list > li:nth-child(3){--i:2}
  .tl-v-list > li:nth-child(4){--i:3}
  .tl-v-list > li:nth-child(5){--i:4}
  .tl-v-list > li:nth-child(6){--i:5}
  .tl-v-list > li:nth-child(7){--i:6}
  .tl-voz{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px)}
}

/* ===== TEXTO PUENTE ===== */
.tl-txt{background:var(--bg-2);background-image:radial-gradient(70% 90% at 50% 115%,rgba(140,31,53,.16),transparent 70%);padding:clamp(96px,16vh,200px) var(--pad)}
.tl-txt-inner{max-width:1100px}
.tl-txt-quote{margin:0;max-width:min(100%,1000px)}
.tl-txt-quote p{margin:0;font:300 clamp(32px,4.6vw,76px)/1.08 var(--serif);letter-spacing:-.015em;color:var(--text);text-wrap:balance}
.tl-txt-body{margin:32px 0;font:300 17px/1.65 var(--sans);color:var(--secondary)}
.tl-txt-next{--tl-line:1;position:relative;display:inline-flex;align-items:center;gap:14px;padding:9px 0;font:500 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text);text-decoration:none;transition:color .3s ease,gap .3s ease}
.tl-txt-next::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(var(--tl-line));transform-origin:left}
.tl-txt-next:hover{color:var(--accent2);gap:20px}
.tl-txt-next:focus-visible{outline:1px solid var(--accent2);outline-offset:4px}

/* ===== MÓVIL ===== */
@media (max-width:899px){
  .tl-voces{padding:64px var(--pad)}
  .tl-voz-play{width:56px;height:56px}
  .tl-txt-quote{max-width:none}
}
@media (max-width:767px){
  .tl-hero-img img{object-position:40% 0;filter:saturate(1.15) brightness(.92)}
  .tl-h-title{font-size:clamp(40px,12vw,64px)}
  .tl-hero-inner{padding-bottom:44px}
  .tl-h-kicker{margin-bottom:16px}
  .tl-h-text{margin-top:18px}
  .tl-h-cue{margin-top:26px}
}

/* ===== MOVIMIENTO REDUCIDO ===== */
@media (prefers-reduced-motion:reduce){
  .tl-hero-img img,.tl-h-kicker,.tl-h-title,.tl-h-text,.tl-h-cue{animation:none}
  .tl-h-cue i::after{animation:none;top:30%}
  .tl-js .tl-voz,.tl-js .tl-v-head,.tl-js .tl-txt-inner{opacity:1;transform:none;transition:none}
  .tl-v-list > li{position:static}
  .tl-voz-frame:hover .tl-voz-play{animation:none}
}

/* ===== AJUSTES FINALES (parte 1) ===== */
/* La entrada con @keyframes solo anima dentro del hero. */
.tl-voces .tl-h-kicker,.tl-txt .tl-h-kicker{animation:none}
/* Texto puente: el observador marca .tl-txt-inner y sus hijos entran escalonados. */
.tl-js .tl-txt-inner{opacity:1;transform:none;transition:none}
.tl-js .tl-txt-inner > *{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.22,.61,.24,1),transform 1s cubic-bezier(.22,.61,.24,1)}
.tl-js .tl-txt-inner.is-in > *{opacity:1;transform:none}
.tl-js .tl-txt-inner.is-in > :nth-child(2){transition-delay:.12s}
.tl-js .tl-txt-inner.is-in > :nth-child(3){transition-delay:.24s}
.tl-js .tl-txt-inner.is-in > :nth-child(4){transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  .tl-js .tl-txt-inner > *{opacity:1;transform:none;transition:none}
}
/* Con movimiento reducido la pila es normal también en escritorio. */
@media (min-width:900px) and (prefers-reduced-motion:reduce){
  .tl-v-list{gap:20px}
  .tl-v-list > li{margin-bottom:0}
}