/* ============================================================
   CARNE LATENTE — TERRITORIO
   Las máscaras: ocho piezas de video-arte.
   Instalación cinematográfica: negro, espacio negativo y rojo
   únicamente como acento.
   ============================================================ */

/* ===== FONDO ATMOSFÉRICO (sin uso: la sección es contenida) ===== */
.tl-bg{display:none!important}

/* ===== SECCIÓN CONTENIDA (índice editorial + visor) ===== */
.tl{
  --tl-pad:var(--pad);
  position:relative;z-index:1;
  width:100%;
  overflow-x:clip;
  background:var(--bg-2);
  border-top:1px solid var(--line);
  padding:clamp(72px,10vh,120px) var(--pad);
  display:block;
}
.tl-section{position:relative;z-index:1;display:block}
.tl-container{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  grid-template-areas:"head head" "visual list" "copy list";
  column-gap:clamp(32px,4.5vw,72px);
  row-gap:28px;
  width:100%;
}

/* ===== CABECERA DE SECCIÓN ===== */
.tl-obras-head{grid-area:head;max-width:100%}
.tl-obras-kicker{
  margin:0 0 14px;
  display:flex;align-items:center;gap:12px;
  font-family:var(--sans);font-weight:400;
  font-size:11px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--secondary);
}
.tl-obras-kicker-line{display:block;width:34px;height:1px;background:var(--accent2)}
.tl-obras-title{
  margin:0;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(32px,4.2vw,64px);
  line-height:1.04;letter-spacing:0;
  color:var(--text);
  max-width:20ch;
}

/* ===== INTRO (inerte: la copia ya no entra en la carga) ===== */

/* ===== ESCENARIO: el stage no tiene caja, reparte áreas del grid ===== */
.tl-stage{display:contents}
.tl-visual{grid-area:visual;min-width:0}
.tl-copy{grid-area:copy;min-width:0}
.tl-strip-wrap{grid-area:list;min-width:0}

/* ===== PIE DEL VISOR ===== */
.tl-copy{position:relative;z-index:2}

.tl-kicker,
.tl-rule{display:none!important}

.tl-meta{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  font-size:12px;
  letter-spacing:.2em;
  color:var(--secondary);
}
.tl-num,.tl-count{font:inherit;color:inherit;letter-spacing:inherit}

.tl-title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(26px,2.6vw,40px);
  line-height:1.1;
  letter-spacing:-.01em;
  text-transform:none;
  hyphens:none;
  overflow-wrap:normal;
  max-width:100%;
  margin:10px 0 0;
  color:var(--text);
}

.tl-desc{
  margin:12px 0 0;
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  letter-spacing:.01em;
  color:var(--secondary);
  max-width:44ch;
}

/* ===== CTA (desktop) ===== */
.tl-cta{
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:0;
  background:none;
  border:0;
  color:var(--text);
  font-family:var(--sans);
  cursor:pointer;
}
.tl-cta-circle{
  width:72px;height:72px;
  border-radius:50%;
  border:1px solid rgba(245,240,236,.7);
  display:grid;place-items:center;
  box-shadow:0 0 0 0 rgba(178,51,73,0);
  transition:border-color .5s ease,box-shadow .5s ease,transform .5s ease;
}
.tl-cta-label{
  font-family:var(--sans);
  font-weight:400;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.2em;
}
.tl-cta:focus-visible{outline:1px solid var(--accent2);outline-offset:6px}
@media(hover:hover){
  .tl-cta:hover .tl-cta-circle{
    border-color:var(--accent2);
    box-shadow:0 0 24px rgba(178,51,73,.35);
    transform:scale(1.05);
  }
}

/* Triángulo de reproducción */
.tl-play-icon{
  display:block;width:0;height:0;
  border-style:solid;
  border-color:transparent;
  border-left-color:var(--text);
  border-left-width:20px;
  border-top-width:12px;
  border-bottom-width:12px;
  margin-left:4px;
}
.tl-cta-circle .tl-play-icon{
  border-left-width:13px;
  border-top-width:8px;
  border-bottom-width:8px;
  margin-left:3px;
}

/* ===== VISOR (plano, 16:9) ===== */
.tl-visual{
  display:block;
  min-width:0;
}

.tl-card{
  margin:0;
  position:relative;
  width:100%;
  max-width:100%;
  aspect-ratio:16/9;
  border-radius:10px;
  border:1px solid var(--line);
  overflow:hidden;
  background:#000;
  transform:none;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
  transition:border-color .5s ease;
  cursor:pointer;
}

.tl-card-media{position:absolute;inset:0}
.tl-card-media picture{display:block;position:absolute;inset:0}
.tl-card-img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  filter:saturate(.78) contrast(1.06) brightness(.86);
}
/* Integración cromática sobre la imagen */
.tl-card-media::after{
  content:"";
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg,rgba(11,7,8,.15),rgba(11,7,8,.55)),
    radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.65));
  pointer-events:none;
}
/* Tinte rojo muy leve */
.tl-card-media::before{
  content:"";
  position:absolute;inset:0;z-index:3;
  background:rgba(140,31,53,.18);
  mix-blend-mode:multiply;
  pointer-events:none;
}

/* Grano sobre la tarjeta */
.tl-card-grain{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  opacity:.12;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* Reflejo diagonal sutil (panel de vidrio) */
.tl-card::after{
  content:"";
  position:absolute;inset:0;z-index:4;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 28%);
}

/* Botón de reproducción (sin <video>, sólo el disparador) */
.tl-play{
  position:absolute;top:50%;left:50%;z-index:5;
  transform:translate(-50%,-50%);
  width:64px;height:64px;
  border-radius:50%;
  background:rgba(11,7,8,.25);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border:1px solid var(--accent2);
  color:var(--text);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:border-color .5s ease,background .5s ease;
}
.tl-play:focus-visible{outline:1px solid var(--accent2);outline-offset:6px}

/* Contador bajo la tarjeta: sólo mobile */
.tl-card-count{display:none}

@media(hover:hover) and (pointer:fine){
  .tl-card:hover{border-color:var(--accent2)}
  .tl-card:hover .tl-card-img{filter:saturate(.78) contrast(1.06) brightness(.95)}
  .tl-card:hover .tl-play{background:var(--accent)}
}

/* ===== LISTA DE PIEZAS (vertical, ≥900px) ===== */
.tl-strip-wrap{
  position:relative;z-index:1;
  margin:0;
}
.tl-strip{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
  overflow:visible;
}
.tl-item{min-width:0}
.tl-item:last-child .tl-thumb{border-bottom:1px solid var(--line)}

.tl-thumb{
  position:relative;
  display:grid;
  grid-template-columns:56px 1fr auto;
  align-items:center;
  column-gap:16px;
  width:100%;
  margin:0;
  padding:14px 12px 14px 14px;
  background:none;
  border:0;
  border-top:1px solid var(--line);
  color:inherit;
  text-align:left;
  font:inherit;
  cursor:pointer;
  transform:none;
  opacity:1;
  transition:background .4s ease;
}
.tl-thumb::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;
  width:2px;background:var(--accent2);
  opacity:0;transition:opacity .4s ease;
}
.tl-thumb::after{
  content:attr(data-dur);
  font-family:var(--sans);font-weight:300;font-size:12px;
  letter-spacing:.08em;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.tl-thumb-media{
  display:block;position:relative;
  width:56px;height:70px;
  border-radius:4px;
  overflow:hidden;
  outline:0;
}
.tl-thumb-media::after{content:none}
.tl-thumb-media img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  filter:grayscale(.4) brightness(.6);
  transition:filter .5s ease;
}
.tl-thumb-label{
  position:static;
  display:flex;align-items:baseline;gap:10px;
  min-width:0;
}
.tl-thumb-num{
  font-family:var(--sans);
  font-style:normal;
  font-weight:400;
  font-size:11px;
  line-height:1;
  letter-spacing:.12em;
  color:var(--muted);
}
.tl-thumb-title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(20px,1.6vw,22px);
  line-height:1.15;
  letter-spacing:0;
  text-transform:none;
  color:var(--secondary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:color .4s ease;
}

/* Línea de carga: borde inferior de la fila activa */
.tl-thumb-progress{
  position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:transparent;overflow:hidden;z-index:3;
  opacity:0;transition:opacity .4s ease;pointer-events:none;
}
.tl-thumb-progress-fill{position:absolute;inset:0;background:var(--accent2);transform:scaleX(0);transform-origin:0 50%}
.tl-thumb.is-active .tl-thumb-progress{opacity:1}

/* Activa / hover / foco */
.tl-thumb.is-active,
.tl-thumb:hover,
.tl-thumb:focus-visible{
  transform:none;
  background:rgba(140,31,53,.10);
}
.tl-thumb.is-active::before,
.tl-thumb:hover::before,
.tl-thumb:focus-visible::before{opacity:1}
.tl-thumb.is-active .tl-thumb-title,
.tl-thumb:hover .tl-thumb-title,
.tl-thumb:focus-visible .tl-thumb-title{color:var(--text)}
.tl-thumb.is-active .tl-thumb-media img,
.tl-thumb:hover .tl-thumb-media img,
.tl-thumb:focus-visible .tl-thumb-media img{filter:grayscale(0) brightness(.9)}

/* Foco accesible */
.tl-thumb:focus-visible{outline:1px solid var(--accent2);outline-offset:-1px}

/* ===== TABLET Y MÓVIL (<900px): una columna + tira horizontal ===== */
@media(max-width:899px){
  .tl-container{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"head" "visual" "copy" "list";
    row-gap:20px;
  }
  .tl-obras-title{font-size:clamp(28px,7vw,44px)}
  .tl-card{aspect-ratio:16/9;border-radius:10px}
  .tl-desc{max-width:60ch}
  .tl-cta{margin-top:16px}

  /* Tira horizontal con scroll-snap y drag */
  .tl-strip-wrap{margin-inline:calc(var(--pad) * -1)}
  .tl-strip{
    flex-direction:row;
    gap:clamp(8px,1.2vw,16px);
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding:14px var(--pad) 10px;
    scroll-padding-inline:var(--pad);
  }
  .tl-strip::-webkit-scrollbar{display:none}
  .tl-item{flex:0 0 clamp(130px,19vw,170px);scroll-snap-align:start}
  .tl-item:last-child .tl-thumb{border-bottom:0}

  /* La fila vuelve a ser miniatura */
  .tl-thumb{display:block;padding:0;border:0;background:none}
  .tl-thumb::before{content:none}
  .tl-thumb::after{content:none}
  .tl-thumb.is-active,
  .tl-thumb:hover,
  .tl-thumb:focus-visible{background:none}
  .tl-thumb:focus-visible{outline:none}
  .tl-thumb-media{width:100%;height:clamp(96px,17svh,180px);border-radius:6px;outline:1px solid rgba(245,240,236,.14)}
  .tl-thumb:focus-visible .tl-thumb-media{outline:1px solid rgba(245,240,236,.6);outline-offset:3px}
  .tl-thumb-label{
    position:absolute;left:12px;right:10px;bottom:20px;
    display:flex;flex-direction:column;gap:4px;
  }
  .tl-thumb-num{
    font-family:var(--serif);font-style:italic;font-weight:300;
    font-size:clamp(1.6rem,2.4vw,2.4rem);line-height:1;color:var(--text);letter-spacing:0;
  }
  .tl-thumb-title{
    font-family:var(--sans);font-weight:400;font-size:.6rem;
    text-transform:uppercase;letter-spacing:.16em;color:rgba(245,240,236,.85);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .tl-thumb-progress{left:12px;right:12px;bottom:8px;height:2px}
}

/* ===== MOBILE (≤767px) ===== */
@media(max-width:767px){
  .tl{padding:clamp(56px,8vh,72px) var(--pad) 48px}
  .tl-container{row-gap:16px}
  .tl-cta{display:none}
  .tl-desc{font-size:15px;max-width:none}
  .tl-card-count{
    display:block;
    text-align:center;
    margin:12px 0 0;
    font-family:var(--sans);
    font-weight:400;
    font-size:12px;
    letter-spacing:.2em;
    color:var(--secondary);
  }

  .tl-strip{gap:12px;padding:12px var(--pad) 6px}
  .tl-item{flex:0 0 26vw;max-width:120px}

  .tl-thumb-media{aspect-ratio:3/4;height:auto}
  .tl-thumb-label{
    position:static;
    margin-top:10px;
    align-items:center;
    left:auto;right:auto;bottom:auto;
  }
  .tl-thumb-title{display:none}
  .tl-thumb-progress{position:relative;left:auto;right:auto;bottom:auto;display:block;width:100%;margin-top:8px}
  .tl-thumb-num{
    font-family:var(--sans);
    font-style:normal;
    font-weight:300;
    font-size:1rem;
    color:var(--muted);
    transition:color .5s ease;
  }
  .tl-thumb.is-active .tl-thumb-num,
  .tl-thumb:focus-visible .tl-thumb-num{color:var(--text)}
}

/* ===== MOVIMIENTO REDUCIDO ===== */
@media(prefers-reduced-motion:reduce){
  .tl-card,.tl-play,.tl-play-icon,.tl-cta-circle,
  .tl-thumb,.tl-thumb-media,.tl-thumb-media img,
  .tl-thumb-num,.tl-thumb-title{transition:none}
  .tl-thumb-progress{display:none}
}

/* ===== ESTADOS JS ===== */
/* Capas de imagen de la tarjeta para el crossfade. */
.tl-card-media picture{position:absolute;inset:0;display:block}
.tl-card-media picture img{width:100%;height:100%;object-fit:cover}

/* Swipe horizontal sobre la tarjeta sin bloquear el scroll vertical. */
.tl-visual{touch-action:pan-y}

/* Arrastre de la tira cuando desborda. */
.tl-strip.is-draggable{cursor:grab}
.tl-strip.is-dragging{cursor:grabbing;user-select:none}
.tl-strip.is-dragging .tl-thumb{pointer-events:none}

/* ===== LIGHTBOX ===== */
.tl-lb{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
}
.tl-lb[hidden]{display:none!important}

.tl-lb-backdrop{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 60% at 50% 50%,rgba(140,31,53,.12),transparent 70%),
    rgba(5,3,4,.94);
}

.tl-lb-frame{
  position:relative;
  width:min(92vw,calc((100svh - 64px) * 16 / 9));
  aspect-ratio:16/9;
  border-radius:10px;
  overflow:hidden;
  background:#000;
  border:1px solid rgba(245,240,236,.14);
  box-shadow:
    0 60px 140px -40px rgba(0,0,0,.95),
    0 0 80px -20px rgba(140,31,53,.35);
}

.tl-lb-screen{position:absolute;inset:0}
.tl-lb-screen video{width:100%;height:100%;object-fit:contain;display:block;background:#000}

.tl-lb-shade{
  position:absolute;inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.6),transparent 22%),
    linear-gradient(0deg,rgba(0,0,0,.82),transparent 45%);
}

.tl-lb-top{
  position:absolute;top:0;left:0;right:0;
  padding:clamp(16px,2.4vw,28px);
  display:flex;justify-content:space-between;align-items:flex-start;
}
.tl-lb-meta{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  font-size:.95rem;
  letter-spacing:.14em;
  color:var(--text);
}
.tl-lb-meta-title{display:none}

.tl-lb-close{
  position:relative;
  width:44px;height:44px;
  background:none;border:0;
  color:var(--text);
  cursor:pointer;
  transition:transform .4s ease,color .4s ease;
}
.tl-lb-close span{
  position:absolute;top:50%;left:50%;
  width:26px;height:1.5px;
  margin:-.75px 0 0 -13px;
  background:none;
}
.tl-lb-close span::before,
.tl-lb-close span::after{
  content:"";position:absolute;inset:0;
  background:currentColor;
}
.tl-lb-close span::before{transform:rotate(45deg)}
.tl-lb-close span::after{transform:rotate(-45deg)}
.tl-lb-close:hover{color:var(--accent2);transform:rotate(90deg)}

.tl-lb-bottom{
  position:absolute;left:0;right:0;bottom:0;
  padding:0 clamp(18px,3vw,36px) clamp(16px,2.4vw,28px);
}

.tl-lb-title{
  font-family:var(--serif);
  font-weight:300;
  text-transform:uppercase;
  font-size:clamp(1.6rem,2.6vw,2.4rem);
  margin:0 0 6px;
}
.tl-lb-desc{
  font-family:var(--sans);
  font-weight:300;
  font-size:.95rem;
  line-height:1.5;
  color:rgba(245,240,236,.82);
  margin:0 0 18px;
}
.tl-lb-desc br{display:none}

.tl-lb-progress{
  position:relative;
  height:18px;
  cursor:pointer;
  touch-action:none;
}
.tl-lb-progress::before{
  content:"";
  position:absolute;left:0;right:0;top:50%;
  height:2px;margin-top:-1px;
  background:rgba(245,240,236,.25);
}
.tl-lb-buffer,
.tl-lb-fill{
  position:absolute;left:0;top:50%;
  height:2px;margin-top:-1px;
}
.tl-lb-buffer{width:var(--buf,0%);background:rgba(245,240,236,.35)}
.tl-lb-fill{width:var(--p,0%);background:var(--accent2)}
.tl-lb-knob{
  position:absolute;top:50%;left:var(--p,0%);
  width:12px;height:12px;
  border-radius:50%;
  background:#F5F0EC;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 4px rgba(178,51,73,.25);
}

.tl-lb-times{
  display:flex;justify-content:space-between;
  margin-top:4px;
  font-family:var(--sans);
  font-weight:300;
  font-size:.82rem;
  letter-spacing:.08em;
  color:rgba(245,240,236,.8);
  font-variant-numeric:tabular-nums;
}

.tl-lb-controls{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(22px,4vw,48px);
  margin-top:10px;
}
.tl-lb-btn{
  width:44px;height:44px;
  background:none;border:0;
  color:var(--text);
  cursor:pointer;
  opacity:.85;
  display:grid;place-items:center;
  transition:opacity .3s ease,color .3s ease;
}
.tl-lb-btn:hover{opacity:1;color:var(--accent2)}
.tl-lb-btn:focus-visible{outline:1px solid var(--accent2);outline-offset:4px}
.tl-lb-toggle svg{width:30px;height:30px}
.tl-lb .ic-play{display:none}
.tl-lb.is-paused .ic-pause{display:none}
.tl-lb.is-paused .ic-play{display:block}
.tl-lb .ic-muted{display:none}
.tl-lb.is-muted .ic-vol{display:none}
.tl-lb.is-muted .ic-muted{display:block}

.tl-lb.is-idle .tl-lb-top,
.tl-lb.is-idle .tl-lb-bottom,
.tl-lb.is-idle .tl-lb-shade{opacity:0;transition:opacity .6s ease}
.tl-lb.is-idle{cursor:none}

body.tl-lb-open{overflow:hidden}

@media(max-width:767px){
  .tl-lb-frame{
    width:100vw;height:100svh;
    aspect-ratio:auto;
    border-radius:0;border:0;
  }
  .tl-lb-top{padding:calc(env(safe-area-inset-top) + 18px) 20px 0}
  .tl-lb-meta-title{
    display:block;
    margin-top:6px;
    text-transform:uppercase;
    letter-spacing:.14em;
  }
  .tl-lb-bottom{padding:0 22px calc(env(safe-area-inset-bottom) + 22px)}
  .tl-lb-title{font-size:clamp(2rem,9vw,2.6rem)}
  .tl-lb-desc br{display:inline}
  .tl-lb-controls{justify-content:space-between;padding:0 6px}
}

@media(prefers-reduced-motion:reduce){
  .tl-lb-close,.tl-lb-btn{transition:none}
}

/* Footer por encima del fondo fijo */
.site-foot{position:relative;z-index:1}