/* ============================================================
   CARNE LATENTE — DESDE EL ÚTERO
   Hero con imagen fija (útero bordado), vídeo-loop de la mirada en su sección, la carta en seis movimientos
   (lectura lenta), voces que presionan, cierre y reproductor
   <dialog> con Vimeo + vídeo local de respaldo. Sin librerías.
   ============================================================ */

.ut{--ut-ease:cubic-bezier(.22,.61,.24,1);position:relative;overflow-x:clip}

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

/* ---------- 01. Hero ---------- */
.ut-hero{
  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;
}
.ut-hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--bg)}
.ut-hero-img{
  display:block;position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 0%;
  filter:contrast(1.03) brightness(.88);
  transform:scale(1.04);transform-origin:50% 0%;
}
/* La imagen ya deja la izquierda oscura: velo más suave que con la cara.
   Vino sutil por encima y fundido inferior al fondo. */
.ut-hero-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(11,7,8,.82) 0%,rgba(11,7,8,.5) 40%,rgba(11,7,8,.08) 75%),
    linear-gradient(180deg,transparent 50%,var(--bg) 100%),
    radial-gradient(60% 70% at 72% 40%,rgba(140,31,53,.18),transparent 70%);
}
.ut-hero-inner{position:relative;width:100%}
.ut-hero-copy{max-width:600px}
.ut-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;
}
.ut-lead{margin:0;font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:var(--text);max-width:42ch}
.ut-hero-rule{display:block;width:44px;height:1px;background:var(--line);margin:clamp(20px,3vh,30px) 0 16px;transform-origin:left}
.ut-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(22px,3vw,44px);margin:clamp(22px,3vh,34px) 0 0}
.ut-note{margin:16px 0 0;font-size:11px;letter-spacing:.06em;color:var(--muted)}

/* Botón editorial de reproducción (idéntico a .mc-play). */
.ut-play{display:inline-flex;align-items:center;gap:16px;padding:0;background:none;border:0;color:var(--text);font:inherit;cursor:pointer}
.ut-play-icon{position:relative;flex:none;display:grid;place-items:center;width:64px;height:64px;border:1px solid var(--accent2);border-radius:50%;transition:background .45s ease,border-color .45s ease}
.ut-play-icon::before{
  content:"";width:0;height:0;margin-left:4px;
  border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--accent2);
  transition:transform .45s var(--ut-ease),border-left-color .45s ease;
}
.ut-play-icon::after{content:"";position:absolute;inset:-1px;border:1px solid var(--accent2);border-radius:50%;opacity:0}
.ut-play-text{display:flex;flex-direction:column;align-items:flex-start;text-align:left;font-size:12px;letter-spacing:.16em;text-transform:uppercase;line-height:1.3;color:var(--text)}
.ut-play-text small{margin-top:5px;font-size:11px;letter-spacing:.1em;text-transform:none;color:var(--muted)}
.ut-play:hover .ut-play-icon{background:var(--accent);border-color:var(--accent)}
.ut-play:hover .ut-play-icon::before{border-left-color:#fff;transform:translateX(2px)}
.ut-play:hover .ut-play-icon::after{animation:ut-pulse 1.6s ease-out 1}
.ut-play:focus-visible{outline:1px solid var(--accent2);outline-offset:6px;border-radius:40px}
@keyframes ut-pulse{
  from{opacity:.65;transform:scale(1)}
  to{opacity:0;transform:scale(1.55)}
}

.ut-explore{display:inline-flex;align-items:center;gap:12px;padding:6px 0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--secondary);transition:color .4s ease,gap .4s ease}
.ut-explore span{color:var(--accent2);transition:transform .5s var(--ut-ease)}
.ut-explore:hover{color:var(--text)}
.ut-explore:hover span{transform:translateY(4px)}
.ut-explore:focus-visible{outline:1px solid var(--accent2);outline-offset:4px}

/* Entrada en cascada del hero (misma que Mirada). */
.ut-hero-copy > *{transition:opacity 1.2s var(--ut-ease),transform 1.2s var(--ut-ease)}
.ut-hero-img{transition:opacity 2.2s ease,transform 3.2s var(--ut-ease)}
.ut-intro .ut-hero-copy > *{opacity:0;transform:translateY(22px)}
.ut-intro .ut-hero-img{opacity:0;transform:scale(1.1)}
.ut-hero-copy > :nth-child(2){transition-delay:.12s}
.ut-hero-copy > :nth-child(3){transition-delay:.36s}
.ut-hero-copy > :nth-child(4){transition-delay:.5s}
.ut-hero-copy > :nth-child(5){transition-delay:.64s}
.ut-hero-copy > :nth-child(6){transition-delay:.78s}
.ut-intro:not(.cl-loading) .ut-hero-copy > *,
.ut-intro:not(.cl-loading) .ut-hero-img{animation:ut-failsafe 0s 3s forwards}
@keyframes ut-failsafe{to{opacity:1;transform:none}}

/* ---------- Revelado al entrar en viewport (la clase la pone JS) ---------- */
.ut-reveal{transition:opacity 1.1s var(--ut-ease),transform 1.1s var(--ut-ease);transition-delay:var(--ut-d,0s)}
.ut-reveal.is-pending{opacity:0;transform:translateY(18px)}

/* ---------- 02. La mirada: texto | tarjeta 3D con vídeo-loop (como .tl-card) ---------- */
.ut-film{position:relative;padding:clamp(96px,13vw,180px) 0 0;background:var(--bg)}
.ut-film-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:center}
.ut-film-title{margin:14px 0 clamp(22px,3vh,34px);font:300 clamp(36px,4.6vw,72px)/1 var(--serif);letter-spacing:-.02em}
.ut-film-desc{margin:0;font-size:clamp(15px,1.15vw,17px);line-height:1.7;color:var(--secondary);max-width:44ch}
.ut-film-desc + .ut-film-desc{margin-top:1em}
.ut-film-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin:clamp(24px,3.4vh,36px) 0 0;font:400 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.ut-film-meta span:first-child{color:var(--accent2)}

.ut-film-visual{
  perspective:1400px;perspective-origin:30% 50%;
  display:flex;justify-content:flex-end;align-items:center;
  animation:ut-float 7s ease-in-out infinite alternate;
}
@keyframes ut-float{from{transform:translateY(0)}to{transform:translateY(-10px)}}

.ut-card{
  margin:0;position:relative;
  width:100%;max-width:min(100%,860px,calc((100svh - var(--bar-h) - 160px) * 1.6));
  aspect-ratio:16/10;
  margin-right:clamp(8px,1.5vw,32px);
  border-radius:14px;border:1px solid rgba(245,240,236,.22);
  overflow:hidden;background:#000;
  transform:rotateY(-18deg) rotateX(4deg) rotateZ(-3deg);transform-origin:70% 50%;
  box-shadow:
    0 80px 140px -40px rgba(0,0,0,.95),
    0 40px 80px -30px rgba(140,31,53,.35),
    inset 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .9s cubic-bezier(.2,.7,.1,1),box-shadow .9s;
}
.ut-film-video{
  display:block;position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 35%;
  filter:saturate(.78) contrast(1.06) brightness(.86);
}
/* Integración cromática, tinte vino y grano (mismos que Territorio). */
.ut-card::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  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)),
    linear-gradient(rgba(140,31,53,.14),rgba(140,31,53,.14));
}
.ut-card-grain{
  position:absolute;inset:0;z-index:3;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 (panel de vidrio). */
.ut-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%);
}
/* Toda la tarjeta es el disparador; el círculo va centrado. */
.ut-card-play{
  position:absolute;inset:0;z-index:5;display:grid;place-items:center;
  padding:0;background:none;border:0;border-radius:inherit;cursor:pointer;color:var(--text);
}
.ut-card-icon{
  display:grid;place-items:center;width:96px;height:96px;border-radius:50%;
  background:rgba(11,7,8,.25);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(245,240,236,.8);
  transition:border-color .5s ease,box-shadow .5s ease;
}
.ut-card-icon::before{
  content:"";width:0;height:0;margin-left:5px;
  border-style:solid;border-width:12px 0 12px 20px;
  border-color:transparent transparent transparent var(--text);
}
.ut-card-play:focus-visible{outline:none}
.ut-card-play:focus-visible .ut-card-icon{outline:1px solid var(--accent2);outline-offset:6px}
@media(hover:hover) and (pointer:fine){
  .ut-card:hover{
    transform:rotateY(-12deg) rotateX(3deg) rotateZ(-2deg) scale(1.01);
    box-shadow:
      0 90px 150px -40px rgba(0,0,0,.96),
      0 46px 88px -30px rgba(140,31,53,.45),
      inset 0 0 0 1px rgba(255,255,255,.05);
  }
  .ut-card:hover .ut-card-icon{border-color:var(--accent2);box-shadow:0 0 26px rgba(178,51,73,.5)}
}

/* ---------- 03. La carta ---------- */
.ut-letter{position:relative;padding:clamp(96px,13vw,180px) 0;background:var(--bg)}
.ut-letter-head{margin-bottom:clamp(72px,10vw,140px)}
.ut-letter-title{margin:14px 0 0;font:300 clamp(36px,4.6vw,72px)/1 var(--serif);letter-spacing:-.02em;max-width:16ch}

/* Columna de lectura centrada-asimétrica: etiqueta sticky | texto. */
.ut-move{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.ut-move + .ut-move{margin-top:clamp(96px,14vh,180px)}
.ut-move-label{grid-column:1/4;position:sticky;align-self:start;top:calc(var(--bar-h) + 40px)}
.ut-move-body{grid-column:5/12}
/* Línea de 64px alineada con la etiqueta, entre movimientos. */
.ut-move + .ut-move .ut-move-label::before{content:"";display:block;width:64px;height:1px;background:var(--line);margin-bottom:clamp(20px,2.6vw,32px)}

.ut-move-num{display:block;font:400 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent2)}
.ut-move-title{margin:12px 0 0;font:italic 300 clamp(22px,1.9vw,26px)/1.15 var(--serif);color:var(--secondary)}
.ut-listen{display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding:4px 0;background:none;border:0;cursor:pointer;font:400 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .35s ease}
.ut-listen::before{content:"";flex:none;width:0;height:0;border-style:solid;border-width:4px 0 4px 7px;border-color:transparent transparent transparent var(--accent2)}
.ut-listen span{font-variant-numeric:tabular-nums}
.ut-listen:hover,.ut-listen:focus-visible{color:var(--text)}
.ut-listen:focus-visible{outline:1px solid var(--accent2);outline-offset:3px}

.ut-p{margin:0;font:300 clamp(21px,1.75vw,28px)/1.55 var(--serif);color:var(--text);max-width:34ch}
.ut-p + .ut-p{margin-top:1.1em}
.ut-q{font:italic 300 clamp(24px,2.1vw,34px)/1.45 var(--serif)}
/* Frase marcada: sin cursiva, del color del texto al acento al revelarse. */
.ut-hl{font-style:normal;color:var(--text);transition:color 1.4s var(--ut-ease)}
.ut-p:not(.is-pending) .ut-hl{color:var(--accent2)}

/* ---------- Movimiento especial: LAS VOCES ---------- */
.ut-voices{display:flex;flex-direction:column;gap:clamp(14px,2vh,26px);margin:clamp(30px,4.5vh,52px) 0}
.ut-voice{
  margin:0;max-width:100%;
  font:italic 300 clamp(18px,1.5vw,24px)/1.3 var(--sans);color:var(--muted);
}
.ut-voice::before{content:"«"}
.ut-voice::after{content:"»"}
.ut-voice.is-pending{opacity:0;transform:translateX(-16px)}
/* Posiciones dispersas en desktop + escalonado de 180 ms. */
.ut-voice:nth-child(1){margin-left:0;font-size:18px;--ut-d:0ms}
.ut-voice:nth-child(2){margin-left:24%;font-size:21px;--ut-d:180ms}
.ut-voice:nth-child(3){margin-left:6%;font-size:30px;--ut-d:360ms}
.ut-voice:nth-child(4){margin-left:40%;font-size:19px;--ut-d:540ms}
.ut-voice:nth-child(5){margin-left:12%;font-size:25px;--ut-d:720ms}
.ut-voice:nth-child(6){margin-left:30%;font-size:20px;--ut-d:900ms}
.ut-voice:nth-child(7){margin-left:2%;font-size:28px;--ut-d:1080ms}
.ut-voice:nth-child(8){margin-left:20%;font-size:22px;--ut-d:1260ms}

/* ---------- 04. Cierre ---------- */
.ut-close{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(var(--bar-h) + 24px) 0 40px;background:var(--bg-2);text-align:center;overflow:hidden}
.ut-close::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 55% at 50% 50%,rgba(140,31,53,.16),transparent 70%)}
.ut-close>.container-xxl{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center}
.ut-close .ut-w,.ut-close .ut-ch{display:inline-block;white-space:nowrap}
.ut-close-words{margin:0;font:300 clamp(44px,min(8vw,12.5vh),128px)/.95 var(--serif);letter-spacing:-.03em}
.ut-close-words > span{display:block}
.ut-close-words .ut-w{display:block}
.ut-close-last{color:var(--accent2)}
.ut-close-sign{margin:clamp(20px,4vh,40px) auto 0;max-width:34ch;font:300 clamp(13px,1.6vh,15px)/1.7 var(--sans);color:var(--secondary)}
.ut-close-name{margin:clamp(10px,1.6vh,18px) 0 0;font:400 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
/* Texto completo para lectores de pantalla (el partido queda aria-hidden). */
.ut-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Enlace final: la línea inferior se dibuja de izquierda a derecha (--ut-line). */
.ut-next{--ut-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}
.ut-next::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(var(--ut-line));transform-origin:left}
.ut-next:hover{color:var(--accent2);gap:20px}
.ut-next:focus-visible{outline:1px solid var(--accent2);outline-offset:4px}

/* ---------- Reproductor ---------- */
.ut-player{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;background:rgba(7,4,5,.96);color:var(--text);
  display:none;place-items:center;opacity:0;transition:opacity .5s ease;
}
.ut-player[open]{display:grid;align-content:center;justify-content:center;justify-items:center}
.ut-player.is-open{opacity:1}
.ut-player::backdrop{background:transparent}
.ut-player-top{
  position:absolute;top:0;left:0;right:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:max(14px,env(safe-area-inset-top)) clamp(16px,4vw,32px) 0;
}
.ut-player-title{margin:0;font:400 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--secondary)}
.ut-player-close{position:relative;flex:none;width:44px;height:44px;padding:0;background:none;border:0;color:var(--text);cursor:pointer;transition:transform .5s var(--ut-ease),color .4s ease}
.ut-player-close span{position:absolute;left:11px;top:50%;width:22px;height:1px;background:currentColor}
.ut-player-close span:first-child{transform:rotate(45deg)}
.ut-player-close span:last-child{transform:rotate(-45deg)}
.ut-player-close:hover{transform:rotate(90deg);color:var(--accent2)}
.ut-player-close:focus-visible{outline:1px solid var(--accent2);outline-offset:3px}
.ut-stage{
  position:relative;
  width:min(92vw,calc((100svh - 140px) * 16 / 9));aspect-ratio:16/9;background:#000;
  opacity:0;transform:scale(.96);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.1,1);
}
.ut-player.is-open .ut-stage{opacity:1;transform:none}
.ut-embed,.ut-video{position:absolute;inset:0;width:100%;height:100%;background:#000}
.ut-embed[hidden],.ut-video[hidden],.ut-player-loading[hidden],.ut-player-alt[hidden]{display:none}
.ut-embed iframe{display:block;width:100%;height:100%;border:0}
.ut-player-loading{
  position:absolute;inset:0;z-index:1;margin:0;display:flex;align-items:center;justify-content:center;
  padding:0 24px;text-align:center;pointer-events:none;
  font:400 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.ut-player-alt{
  justify-self:end;margin-top:clamp(14px,2vh,24px);padding:4px 0;background:none;border:0;cursor:pointer;
  font:400 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  transition:color .35s ease;
}
.ut-player-alt:hover,.ut-player-alt:focus-visible{color:var(--text)}
.ut-player-alt:focus-visible{outline:1px solid var(--accent2);outline-offset:3px}

html.ut-locked,html.ut-locked body{overflow:hidden}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .ut-hero{padding-top:calc(88px + 20px)}
  .ut-move{grid-template-columns:minmax(0,1fr);gap:0}
  .ut-move-label{grid-column:1;position:static;margin-bottom:clamp(20px,4vh,32px)}
  .ut-move-body{grid-column:1}
  .ut-letter-head{max-width:none}
  .ut-film-grid{grid-template-columns:minmax(0,1fr);gap:clamp(40px,7vw,64px)}
  .ut-film-visual{justify-content:center}
  .ut-card{max-width:min(560px,100%);margin:0 auto;transform:rotateY(-12deg) rotateX(4deg) rotateZ(-2deg)}
}
@media(max-width:767px){
  .ut-hero{padding-bottom:clamp(48px,9vh,80px)}
  .ut-hero-copy{max-width:none}
  .ut-title{font-size:clamp(52px,17vw,96px)}
  .ut-hero-actions{gap:20px}
  .ut-play-icon{width:56px;height:56px}
  /* Velo sobre todo vertical: el texto va abajo. */
  .ut-hero-bg::after{
    background:
      linear-gradient(180deg,transparent 0%,transparent 28%,rgba(11,7,8,.6) 55%,rgba(11,7,8,.92) 100%),
      radial-gradient(80% 60% at 50% 32%,rgba(140,31,53,.15),transparent 70%);
  }
  .ut-hero-img{object-position:50% 30%;transform-origin:50% 30%}
  .ut-card{max-width:360px;aspect-ratio:4/5;border-radius:12px;margin:0 auto;transform:rotateY(-14deg) rotateX(3deg) rotateZ(-2deg)}
  .ut-card-icon{width:78px;height:78px}
  /* Carta: lectura cómoda en móvil; la pregunta, un punto mayor. */
  .ut-p{font-size:18px}
  .ut-q{font-size:20px}
  /* Voces apiladas con sangrías menores. */
  .ut-voice:nth-child(1){margin-left:0}
  .ut-voice:nth-child(2){margin-left:10%}
  .ut-voice:nth-child(3){margin-left:0}
  .ut-voice:nth-child(4){margin-left:18%}
  .ut-voice:nth-child(5){margin-left:6%}
  .ut-voice:nth-child(6){margin-left:14%}
  .ut-voice:nth-child(7){margin-left:0}
  .ut-voice:nth-child(8){margin-left:8%}
}
@media(max-width:599px){
  .ut-hero{padding-top:calc(64px + 16px)}
  .ut-player-top{padding:max(10px,env(safe-area-inset-top)) 14px 0 18px}
  .ut-stage{width:min(94vw,calc((100svh - 120px) * 16 / 9))}
}
@media(prefers-reduced-motion:reduce){
  .ut-film-visual{animation:none}
  .ut-hero-copy > *,.ut-hero-img,.ut-reveal,.ut-hl,.ut-stage,.ut-player{transition:none!important;animation:none!important}
  .ut-intro .ut-hero-copy > *{opacity:1;transform:none}
  .ut-intro .ut-hero-img{opacity:1;transform:scale(1.04)}
  .ut-reveal.is-pending,.ut-voice.is-pending{opacity:1;transform:none}
  .ut-close .ut-w,.ut-close .ut-ch,.ut-close-name,.ut-next{opacity:1!important;transform:none!important;filter:none!important}
  .ut-next{--ut-line:1}
  .ut-play:hover .ut-play-icon::after{animation:none}
  .ut-player{opacity:1}
  .ut-stage{opacity:1;transform:none}
}