/* Portada con bajada guiada hasta las tarjetas (prototipo, Mike 2 nov). Solo la carga la portada con transición (trans.js). */
.tscroll { position: relative; height: 200vh; }
.tscroll .heroB.heroT { position: sticky; top: 0; }
.heroT .name .ch { display: inline-block; will-change: transform, opacity; }
.heroT #herovid { transform-origin: 50% 40%; will-change: transform, opacity, filter; }
.heroT .reel, .heroT .meta, .heroT .scrollcue, .heroT .vsel { will-change: opacity, translate; }
/* las tarjetas suben cuando la pieza ya se ha ido (y al volver se van antes de que vuelva la pieza): Hugo, 2 nov */
.tpage .secs { position: relative; z-index: 2; margin-top: -45vh; }
/* la portada, negra entera (la pieza al alejarse no deja ver bordes); debajo, una franja que funde el negro con la página */
.heroB.heroT { background: #000; overflow: clip; }
.tscroll::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 160px; background: linear-gradient(to bottom, #000, rgba(0,0,0,0)); pointer-events: none; z-index: -1; }   /* por detras de la pieza que vuela */
/* el giro arranca solo, en silencio y sin controles; el video aparece cuando ya se reproduce (trans.js) */
.heroT #herovid .play { display: none; }
.heroT #herovid video { background: #000; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.heroT #herovid video.on { opacity: 1; }
.heroT #herovid video::-webkit-media-controls, .heroT #herovid video::-webkit-media-controls-enclosure { display: none !important; }
/* cabecera fija: se aparta durante la transición y vuelve, con fondo, en las tarjetas (trans.js) */
.tpage .top.over { position: fixed; transition: background .35s, border-color .35s; border-bottom: 1px solid transparent; }
.tpage .top.over.solid { background: var(--bar); border-bottom-color: var(--line); backdrop-filter: blur(10px); }
@media (min-width: 761px) {
  /* la pieza algo menor y más alta, y el párrafo y los puntos 1/2 fuera de su silueta */
  .heroT #herovid img, .heroT #herovid video { transform: scale(.74) translateY(-7%); }
  .heroT .meta p { max-width: max(240px, min(380px, calc(50vw - .163 * max(100vw, 177.78vh) - var(--pad) - 24px))); }
  /* los puntos 1/2 al lado de la opcion activa de la lista (trans.js los coloca) */
  .heroT .vsel { left: 0; top: 0; bottom: auto; transform: none; }
  .heroT .vsel button { width: 30px; height: 30px; font-size: 11px; }
  /* los enlaces bajo el parrafo, a la izquierda: el lado derecho queda libre para la pieza */
  .heroT .meta { right: auto; flex-direction: column; align-items: flex-start; gap: 14px; }
}
.tpage .secs .sc { opacity: 0; transform: translateY(48px) scale(.97); transition: opacity .8s ease, transform 1s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--k, 0) * 110ms); }
.tpage .secs .sc.in { opacity: 1; transform: none; }
@media (max-width: 760px) {
  /* en movil el hero no es de pantalla completa: sin pegado; la bajada guiada sigue llevando a las tarjetas */
  .tscroll { height: auto; } .tscroll .heroB.heroT { position: relative; }
  .tpage .secs { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tscroll { height: auto; } .tscroll .heroB.heroT { position: relative; }
  .tpage .secs { margin-top: 0; } .tpage .secs .sc { opacity: 1; transform: none; }
}
/* Propuestas de transicion (2 nov, en local): iris y vuelo */
.tv-iris .secs { margin-top: -100vh; }
.tring { position: fixed; left: 50%; top: 46%; width: 0; height: 0; transform: translate(-50%, -50%); border: 1.5px solid #ff4d1c; border-radius: 50%; pointer-events: none; z-index: 3; opacity: 0; box-shadow: 0 0 24px rgba(255,77,28,.35); }
@media (max-width: 760px) { .tv-iris .secs { margin-top: 0; } .tring { display: none; } }
/* Boton "Scroll" tambien en el ordenador (Mike, 2 nov): grande y visible, siempre por encima de la linea del nombre (Hugo, 2 nov) */
@media (min-width: 761px) {
  .heroT .scrollcue { display: flex; position: absolute; left: auto; right: var(--pad); top: auto; bottom: calc(clamp(96px, 16.5vw, 250px) * .92 + 22px); transform: none; z-index: 4;
    flex-direction: row; align-items: center; gap: 12px; padding: 13px 18px 13px 20px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px;
    background: rgba(0,0,0,.45); backdrop-filter: blur(8px); color: #fff; text-decoration: none; cursor: pointer; transition: border-color .2s, background .2s; }
  .heroT .scrollcue span { font: 600 12px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; }
  .heroT .scrollcue i { width: 11px; height: 11px; margin-top: -5px; border-right: 2px solid var(--acc); border-bottom: 2px solid var(--acc); transform: rotate(45deg); animation: cue 1.6s ease-in-out infinite; }
}
@media (min-width: 761px) and (hover: hover) { .heroT .scrollcue:hover { border-color: var(--acc); background: rgba(255,77,28,.16); } }
/* vuelo: la foto de la pieza que llega, entera en la tarjeta */
.tv-vuelo .secs .sc img.landed { object-fit: cover; object-position: 50% 45%; }
/* Ventanas de escritorio estrechas (761 a 1199, p. ej. tableta en horizontal): la pieza algo menor y a la derecha, el texto a la izquierda sin tocarla */
@media (min-width: 761px) and (max-width: 1199px) {
  .heroT #herovid img, .heroT #herovid video { transform: scale(.62) translate(16%, -9%); }
  .heroT .meta p { max-width: 300px; font-size: 14px; }
  .heroT .reel { top: 38%; }
}
@media (min-width: 761px) and (max-width: 900px) { .heroT #herovid img, .heroT #herovid video { transform: scale(.6) translate(21%, -9%); } }
/* vuelo: sin el degradado de la portada mientras la pieza vuela (en la tarjeta no esta) */
.heroT #herovid::after { transition: opacity .4s ease; } .heroT #herovid.flying::after { opacity: 0; }
/* vuelo: la imagen fija (vista 000) sigue debajo del video para que el giro se funda en ella a mitad de vuelo */
.heroT #herovid.playing > img { display: block; }
/* vuelo (Mike, 3 nov): en el ordenador la portada no recorta la pieza cuando baja hasta la tarjeta (se cortaba por abajo) */
.tv-vuelo .heroB.heroT { overflow: visible; }   /* tambien en movil: la pieza baja hasta la tarjeta */
/* vuelo en movil: el degradado bajo la portada y el pie de la pieza no tapan el vuelo */
@media (max-width: 760px) { .tv-vuelo .heroT #herovid { transform-origin: 50% 40%; will-change: transform, opacity, filter; } }