/* /creator: portafolio de video. Se apoya en portfolio.css; aquí solo vive lo propio de esta página. */
.creator-page { --ease: cubic-bezier(.22, 1, .36, 1); scrollbar-gutter: stable; }
.creator-page.theater-open { overflow: hidden; }
.creator-hero { padding-bottom: 104px; }

/* Escenario: el video principal ocupa todo el ancho. El póster se disuelve en un teaser mudo y,
   al dar play, la película entra en el mismo marco. */
.stage { margin-top: 60px; }
.stage-wrap { position: relative; }
.stage-wrap::before { content: ''; position: absolute; inset: -12px; pointer-events: none; opacity: .32; color: var(--ink); background:
  linear-gradient(currentColor, currentColor) 0 0 / 14px 1px no-repeat, linear-gradient(currentColor, currentColor) 0 0 / 1px 14px no-repeat,
  linear-gradient(currentColor, currentColor) 100% 0 / 14px 1px no-repeat, linear-gradient(currentColor, currentColor) 100% 0 / 1px 14px no-repeat,
  linear-gradient(currentColor, currentColor) 0 100% / 14px 1px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 1px 14px no-repeat,
  linear-gradient(currentColor, currentColor) 100% 100% / 14px 1px no-repeat, linear-gradient(currentColor, currentColor) 100% 100% / 1px 14px no-repeat; }
.stage-frame { position: relative; aspect-ratio: var(--r, 1.7778); overflow: hidden; background: #0d0d0d; }
.stage-poster, .stage-teaser, .stage-film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; }
.stage-poster, .stage-teaser { object-fit: cover; }
.stage-teaser { opacity: 0; transition: opacity 1.4s ease; }
.stage-frame.is-live .stage-teaser { opacity: 1; }
.stage-film { z-index: 3; background: #000; opacity: 0; transition: opacity .7s ease; }
.stage-frame.is-playing .stage-film { opacity: 1; }
.stage-hit { position: absolute; inset: 0; z-index: 2; width: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.stage-hit:focus-visible { outline-offset: -8px; }
.stage-frame.is-playing .stage-hit { visibility: hidden; }
.stage-frame.is-tracking .stage-hit { cursor: none; }
.stage-cue { position: absolute; right: 28px; bottom: 28px; display: inline-flex; align-items: center; gap: 13px; height: 52px; padding: 0 22px 0 7px; border-radius: 99px; background: #f4f4f4; color: #111; font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; translate: var(--dx, 0px) var(--dy, 0px); transition: scale .4s var(--ease), opacity .3s ease; }
.stage-hit:hover .stage-cue { scale: 1.05; }
.stage-cue-dot { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #111; }
.stage-cue-dot svg { width: 11px; height: 12px; margin-left: 2px; fill: #f4f4f4; }
.stage-cue-time { font: 400 11px/1 var(--mono); color: #6b6b6b; }
.stage-frame.is-loading .stage-cue { opacity: .55; }
.stage-frame.is-loading .stage-cue-dot { animation: cue-wait 1s ease-in-out infinite; }
@keyframes cue-wait { 50% { scale: .82; } }
.stage-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-top: 34px; }
.stage-title { margin: 10px 0 0; font-size: clamp(27px, 2.6vw, 34px); font-weight: 400; line-height: 1.25; letter-spacing: -.05em; }
.stage-desc { margin: 0; max-width: 500px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.stage-facts, .theater-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; font: 400 11px/1.6 var(--mono); color: var(--quiet); }
.stage-facts a, .theater-meta a, .clip-meta a { color: #c9c9c9; }
.stage-facts a:hover, .theater-meta a:hover, .clip-meta a:hover { color: #fff; }
.site-link { text-decoration: underline; text-decoration-color: #4a4a4a; text-underline-offset: 4px; transition: color .25s ease, text-decoration-color .25s ease; }
.site-link:hover { text-decoration-color: currentColor; }

/* Índice a la izquierda, trabajo a la derecha. */
.work { padding-bottom: 120px; }
/* Las columnas llevan minmax(0, …): sin eso crecen hasta el ancho fijo de las tarjetas y la página se desborda. */
.work-grid { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 70px; align-items: start; }
.rail { position: sticky; top: 136px; display: grid; gap: 4px; }
.rail-label { margin: 0 0 14px; font: 400 11px/1.4 var(--mono); color: var(--quiet); }
.rail-link { position: relative; display: grid; grid-template-columns: 26px 1fr auto; align-items: baseline; gap: 2px 0; padding: 14px 0; border-top: 1px solid var(--line); color: var(--quiet); transition: color .35s ease; }
.rail-num, .rail-count { font: 400 11px/1.4 var(--mono); }
.rail-name { font-size: 19px; letter-spacing: -.04em; line-height: 1.2; }
.rail-sub { grid-column: 2 / -1; font-size: 12px; line-height: 1.5; }
.rail-link::before { content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease); }
.rail-link:hover { color: #cfcfcf; }
.rail-link.is-active { color: var(--ink); }
.rail-link.is-active::before { transform: scaleX(1); }
.rail-link.is-active .rail-sub { color: var(--muted); }
.group + .group { margin-top: 118px; }
.group-head { margin-bottom: 48px; }
.group-head h2 { margin: 12px 0 0; font-size: clamp(27px, 2.6vw, 34px); font-weight: 400; line-height: 1.25; letter-spacing: -.05em; }
.group-head h2 span { color: #818181; }
.group-empty { margin: 0; padding: 30px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 400 11px/1.6 var(--mono); color: var(--quiet); }
.group-empty a { color: #c9c9c9; }

/* Canal de YouTube: la prueba de audiencia propia, arriba de sus videos. */
.channel { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto auto; align-items: center; gap: 28px; margin-bottom: 46px; padding: 28px 32px; border: 1px solid var(--line); transition: border-color .35s ease; }
.channel:hover { border-color: #4d4d4d; }
.channel-avatar { display: block; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; filter: grayscale(1); transition: filter .5s ease; }
.channel:hover .channel-avatar { filter: none; }
.channel-name { display: block; font-size: 21px; letter-spacing: -.04em; line-height: 1.3; }
.channel-handle { display: block; margin-top: 4px; font: 400 11px/1.6 var(--mono); color: var(--quiet); }
.channel-stat { padding-right: 20px; }
.channel-stat strong { display: block; font-weight: 400; font-size: 44px; line-height: 1.1; letter-spacing: -.055em; }
.channel-stat span { display: block; margin-top: 6px; color: #a4a4a4; font-size: 13px; }

/* Galería justificada: creator.js fija el ancho de cada tarjeta para que las filas cierren parejas
   aunque se mezclen videos horizontales y verticales. Sin ese cálculo quedan a una altura común. */
.gallery { display: flex; flex-wrap: wrap; gap: 46px 20px; }
.gallery:empty { display: none; }
.clip { flex: 0 0 auto; width: calc(var(--r) * 258px); max-width: 100%; min-width: 0; }
.clip-open { display: block; }
.clip-media { position: relative; display: block; aspect-ratio: var(--r); overflow: hidden; background: #111; }
.clip-poster, .clip-teaser { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.clip-poster { transition: transform 1.6s var(--ease); }
.clip-teaser { opacity: 0; transition: opacity .7s ease; }
.clip.is-live .clip-teaser { opacity: 1; }
/* Play y duración van juntos abajo a la derecha: es la esquina que los pósters dejan libre. */
.clip-badge { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 12px; border-radius: 99px; background: #111c; color: #f2f2f2; font: 400 11px/1 var(--mono); transition: background-color .35s ease, color .35s ease, scale .5s var(--ease); }
.clip-badge svg { width: 8px; height: 9px; fill: currentColor; }
.clip-copy { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 0; align-items: baseline; padding-top: 18px; }
.clip-idx { font: 400 11px/1.4 var(--mono); color: var(--quiet); }
.clip-title { font-size: 19px; letter-spacing: -.04em; line-height: 1.3; }
.clip-desc { grid-column: 2; color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 400px; }
.clip-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0 30px; font: 400 11px/1.6 var(--mono); color: var(--quiet); }
.clip-views { color: #c9c9c9; }
.clip-open:focus-visible { outline-offset: 8px; }
@media (hover: hover) and (pointer: fine) {
  .clip-open:hover .clip-poster { transform: scale(1.035); }
  .clip-open:hover .clip-badge { background: #f4f4f4; color: #111; scale: 1.06; }
}
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 1s ease, transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* En producto: piezas hechas para vivir dentro de una app, mostradas en la pantalla de un celular. */
.shelf { margin-top: 92px; }
.shelf[hidden] { display: none; }
.shelf-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; padding-bottom: 20px; margin-bottom: 46px; border-bottom: 1px solid var(--line); }
.shelf-head h3 { margin: 0; font-size: 21px; font-weight: 400; letter-spacing: -.04em; line-height: 1.3; }
.shelf-head p { margin: 0; font: 400 11px/1.6 var(--mono); color: var(--quiet); }
.shelf-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 20px; }
.device { min-width: 0; }
.phone { position: relative; width: min(100%, 252px); aspect-ratio: 9 / 19.4; padding: 8px; border-radius: 42px; background: linear-gradient(150deg, #2c2c2c, #101010 55%, #1c1c1c); box-shadow: inset 0 0 0 1px #3d3d3d, inset 0 0 0 2px #080808, 0 40px 70px -40px #000; }
.phone::before, .phone::after { content: ''; position: absolute; width: 3px; border-radius: 2px; background: #262626; }
.phone::before { left: -3px; top: 22%; height: 11%; box-shadow: 0 calc(100% + 10px) 0 #262626; }
.phone::after { right: -3px; top: 29%; height: 15%; }
/* Todo lo que va dentro de la pantalla se mide en cqw (centésimas del ancho de la pantalla), así el
   contenido escala con el celular sin importar a qué tamaño quede. */
.phone-screen { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 34px; background: #000; isolation: isolate; container-type: inline-size; }
.phone-island { position: absolute; z-index: 5; top: 5cqw; left: 50%; width: 31%; height: 9cqw; translate: -50% 0; border-radius: 99px; background: #000; pointer-events: none; }
.phone-film { position: absolute; inset: 0; display: block; }
.phone-fill { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.phone-teaser { opacity: 0; transition: opacity .7s ease; }
.device.is-live .phone-teaser { opacity: 1; }
.phone .clip-badge { z-index: 4; right: 12px; bottom: 14px; }
.device-copy { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 0; align-items: baseline; padding-top: 22px; }
.device .clip-meta { margin-top: 10px; }
.phone-open:focus-visible { outline-offset: 6px; border-radius: 34px; }
@media (hover: hover) and (pointer: fine) {
  .phone-open:hover .clip-badge { background: #f4f4f4; color: #111; scale: 1.06; }
}

/* Reproductor de entrenamiento de Swell: gris de estudio de borde a borde, video sin marco y texto oscuro encima. */
.is-workout { background: linear-gradient(#c4c3c6 0 40%, #dcdbde 64% 100%); color: #141615; font-family: ui-rounded, 'SF Pro Rounded', var(--font); }
.is-workout .phone-film { inset: 14% 0 auto; aspect-ratio: var(--r); -webkit-mask-image: linear-gradient(#0000, #000 10%, #000 88%, #0000); mask-image: linear-gradient(#0000, #000 10%, #000 88%, #0000); }
.is-workout svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wk-top { position: absolute; z-index: 3; top: 18.5cqw; left: 5.5cqw; right: 5.5cqw; display: flex; align-items: center; gap: 2cqw; }
.wk-dot, .wk-pause, .wk-pill { display: grid; place-items: center; border-radius: 99px; background: rgb(20 22 21 / .09); }
.wk-dot { width: 11cqw; height: 11cqw; }
.wk-dot svg { width: 5cqw; height: 5cqw; }
.wk-pill { grid-auto-flow: column; gap: 1.4cqw; height: 11cqw; margin-left: auto; padding: 0 3.6cqw 0 2.8cqw; color: #7a3210; font-size: 3.9cqw; font-weight: 600; line-height: 1; white-space: nowrap; }
.wk-pill svg { width: 4.6cqw; height: 4.6cqw; }
.wk-info { position: absolute; z-index: 3; left: 6cqw; right: 22cqw; bottom: 9cqw; display: grid; justify-items: start; }
.wk-label { font-size: 3.3cqw; font-weight: 600; letter-spacing: .12em; line-height: 1.4; color: #464a48; text-transform: uppercase; }
.wk-count { display: flex; align-items: baseline; gap: 1.8cqw; margin-top: .4cqw; }
.wk-count b { font-size: 23cqw; font-weight: 500; line-height: .95; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.wk-count i { font-size: 4.4cqw; font-style: normal; font-weight: 500; color: #3a3d3b; }
.wk-name { margin-top: 1.6cqw; font-size: 6.6cqw; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; }
.wk-next { margin-top: 1.5cqw; font-size: 3.8cqw; font-weight: 500; line-height: 1.3; color: #464a48; }
.wk-pause { position: absolute; z-index: 3; right: 5.5cqw; bottom: 10cqw; width: 14.5cqw; height: 14.5cqw; }
.wk-pause svg { width: 6.4cqw; height: 6.4cqw; stroke-width: 2.2; }
.wk-bar { position: absolute; z-index: 3; left: 6cqw; right: 6cqw; bottom: 4.4cqw; display: flex; gap: 1cqw; }
.wk-bar i { flex: 1; height: 2px; border-radius: 2px; background: rgb(20 22 21 / .14); transition: background-color .4s ease; }
.wk-bar .done { background: rgb(20 22 21 / .55); }
.wk-bar .now { background: #141615; }
.wk-play { position: absolute; z-index: 3; left: 50%; top: 43%; display: grid; place-items: center; width: 15cqw; height: 15cqw; translate: -50% -50%; border-radius: 50%; background: rgb(20 22 21 / .72); opacity: 0; scale: .9; transition: opacity .3s ease, scale .4s var(--ease); }
.wk-play svg { width: 4.4cqw; height: 5cqw; margin-left: .8cqw; fill: #f4f4f4; stroke: none; }
@media (hover: hover) and (pointer: fine) {
  .phone-open:hover .wk-play { opacity: 1; scale: 1; }
}

/* Avatar 3D: el modelo real, girando sobre un resplandor del color de su equipo; con mouse se arrastra. */
.phone-stage { position: absolute; inset: 0; background: radial-gradient(ellipse 58% 24% at 50% 46%, rgba(var(--glow, 255, 255, 255), .26), #0000 72%), #050505; }
/* La imagen de respaldo y el primer cuadro del 3D son idénticos: el cambio es un corte, porque un fundido dejaría doble imagen al girar. */
.phone-stage model-viewer { position: absolute; inset: 26.5% 25% 34%; width: auto; height: auto; background: transparent; --poster-color: transparent; --progress-bar-color: transparent; opacity: 0; }
.device.is-3d .phone-stage model-viewer { opacity: 1; }
.phone-stage img { position: absolute; inset: 26.5% 25% 34%; width: 50%; height: 39.5%; object-fit: contain; }
.device.is-3d .phone-stage img { visibility: hidden; }
.phone-kicker { position: absolute; z-index: 4; top: 19cqw; left: 0; right: 0; text-align: center; font: 400 3.3cqw/1.4 var(--mono); letter-spacing: .14em; color: #ffffff80; pointer-events: none; }
.phone-tag { position: absolute; z-index: 4; left: 0; right: 0; top: 70%; display: grid; gap: 1.2cqw; justify-items: center; text-align: center; pointer-events: none; }
.phone-tag strong { font-size: 8.4cqw; font-weight: 500; letter-spacing: .06em; line-height: 1.1; color: #f4f4f4; text-transform: uppercase; }
.phone-tag span { font: 400 3.3cqw/1.4 var(--mono); letter-spacing: .16em; color: rgba(var(--glow, 255, 255, 255), .95); text-transform: uppercase; }
.phone-hint { position: absolute; z-index: 4; top: 34cqw; left: 50%; translate: -50% 0; padding: 4px 9px; border-radius: 99px; background: #0009; font: 400 10px/1.4 var(--mono); color: #ffffffb3; white-space: nowrap; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .device.is-3d .phone:hover .phone-hint { opacity: 1; }
  .device.is-3d .phone-stage { cursor: grab; }
  .device.is-3d .phone-stage:active { cursor: grabbing; }
}

/* Sin unidades cqw (Safari 15 y anteriores) la interfaz simulada no se puede medir: queda el celular solo con su video o avatar. */
@supports not (width: 1cqw) {
  .phone-island { top: 12px; height: 21px; }
  .wk-top, .wk-info, .wk-pause, .wk-bar, .wk-play, .phone-kicker, .phone-tag, .phone-hint { display: none; }
}

/* Teatro: el video crece desde su miniatura y regresa a ella al cerrar. */
.theater { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: transparent; color: var(--ink); }
.theater::backdrop { background: transparent; }
.theater-bg { position: absolute; inset: 0; background: #050505; opacity: 0; transition: opacity .5s ease; }
.theater.is-open .theater-bg { opacity: 1; }
.theater-ui { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 20px; padding: 22px 36px 26px; }
.theater-top, .theater-info, .theater-strip { opacity: 0; transition: opacity .25s ease; }
.theater.is-open .theater-top, .theater.is-open .theater-info, .theater.is-open .theater-strip { opacity: 1; transition: opacity .6s ease .28s; }
.theater-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; font: 400 11px/1.4 var(--mono); color: var(--quiet); }
.theater-close, .theater-ctrl button, .theater-thumb { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.theater-close { display: inline-flex; align-items: center; gap: 12px; min-height: 36px; padding: 0 16px; border: 1px solid #333; border-radius: 99px; color: #ddd; font: 400 12px/1 var(--font); transition: border-color .2s, color .2s; }
.theater-close:hover { border-color: #777; color: #fff; }
.theater-stage { position: relative; display: grid; place-items: center; min-height: 0; min-width: 0; touch-action: pan-y; }
.theater-frame { position: relative; margin: 0; overflow: hidden; background: #000; transform-origin: 0 0; will-change: transform; }
.theater-poster, .theater-media { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; }
.theater-poster { object-fit: cover; }
.theater-media { background: #000; opacity: 0; transition: opacity .5s ease; }
.theater-media.ready.landed { opacity: 1; }
.theater-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: end; }
.theater-title { margin: 0; font-size: 24px; font-weight: 400; letter-spacing: -.045em; line-height: 1.25; }
.theater-desc { margin: 8px 0 0; max-width: 620px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.theater-desc:empty { display: none; }
.theater-meta { margin-top: 10px; }
.theater-ctrl { display: flex; align-items: center; gap: 16px; font: 400 11px/1 var(--mono); color: var(--quiet); }
.theater-ctrl button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #333; border-radius: 50%; color: #ddd; font: 400 18px/1 var(--font); transition: border-color .2s, color .2s, background-color .2s; }
.theater-ctrl button:hover { border-color: #f4f4f4; background: #f4f4f4; color: #111; }
.theater-ctrl[hidden] { display: none; }
.theater-strip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px; margin: -4px; }
.theater-strip::-webkit-scrollbar { display: none; }
.theater-strip[hidden] { display: none; }
.theater-thumb { position: relative; flex: 0 0 auto; height: 48px; aspect-ratio: var(--r); overflow: hidden; opacity: .38; transition: opacity .35s ease; }
.theater-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.theater-thumb:hover { opacity: .75; }
.theater-thumb[aria-current="true"] { opacity: 1; outline: 1px solid #f4f4f4; outline-offset: 3px; }
.theater-thumb.gap { margin-left: 18px; }

@media (max-width: 1000px) {
  .work-grid { grid-template-columns: 150px minmax(0, 1fr); gap: 44px; }
  .channel { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .channel .text-link { grid-column: 2 / -1; }
}
/* En tableta tres celulares quedan demasiado chicos para leer su pantalla: van de dos en dos. */
@media (max-width: 880px) {
  .shelf-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .creator-hero { padding-bottom: 64px; }
  .stage { margin-top: 44px; }
  .stage-wrap::before { inset: -8px; }
  .stage-cue { right: 12px; bottom: 12px; height: 42px; gap: 10px; padding: 0 16px 0 5px; font-size: 12px; }
  .stage-cue-dot { width: 32px; height: 32px; }
  .stage-meta { grid-template-columns: 1fr; gap: 16px; padding-top: 26px; }
  .stage-title { font-size: 28px; }
  .stage-desc { font-size: 15px; }
  .work { padding-bottom: 70px; }
  .work-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .rail { position: static; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
  .rail-link { grid-template-columns: 22px 1fr; }
  .rail-count { display: none; }
  .rail-sub { grid-column: 1 / -1; font-size: 11px; }
  .rail-label { display: none; }
  .group + .group { margin-top: 76px; }
  .group-head { margin-bottom: 32px; }
  .group-head h2 { font-size: 28px; }
  .gallery { gap: 36px 12px; }
  .shelf { margin-top: 64px; }
  .shelf-head { margin-bottom: 32px; }
  /* En teléfono los celulares se recorren de lado, como capturas de una tienda de apps. */
  .shelf-row { display: flex; gap: 16px; margin-inline: -20px; padding: 0 20px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .shelf-row::-webkit-scrollbar { display: none; }
  .device { flex: 0 0 min(66%, 252px); scroll-snap-align: center; }
  /* Dentro del carrusel la entrada es solo fundido: el desplazamiento de una tarjeta fuera de vista haría la fila desplazable en vertical y se tragaría el gesto. */
  .js .shelf-row .reveal { transform: none; }
  .channel { grid-template-columns: 56px minmax(0, 1fr); gap: 18px 16px; margin-bottom: 36px; padding: 22px; }
  .channel-avatar { width: 56px; height: 56px; }
  .channel-name { font-size: 19px; }
  .channel-stat, .channel .text-link { grid-column: 1 / -1; }
  .channel-stat strong { font-size: 38px; }
  .theater-ui { gap: 14px; padding: 12px 16px 18px; }
  .theater-info { grid-template-columns: 1fr; gap: 16px; }
  .theater-title { font-size: 21px; }
  .theater-ctrl { justify-content: space-between; }
  .theater-thumb { height: 40px; }
}
@media (max-height: 620px) {
  .theater-strip, .theater-desc { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}