/* ══════════════════════════════════════════════
   TOKENS DE MARCA
   Los valores salen de las variables de Figma. Cambiar de marca es cambiar
   este bloque: el resto del CSS no conoce ningún hex de marca.
══════════════════════════════════════════════ */
:root {
  --c-primary: #FFCC00;                   /* color/primary */
  --c-primary-muted: #FFF3C2;             /* color/primary-muted */
  --c-background: #121212;                /* color/background y color/on-primary */
  --c-surface: #282828;                   /* color/surface */
  --c-surface-container: #1A1A1A;         /* color/surface-container */
  --c-surface-variant: #646464;           /* color/surface-variant */
  --c-on-surface: #EBEBEB;                /* color/on-surface */
  --c-on-surface-variant: #989898;        /* color/on-surface-variant */
  --c-outline: #8A8A8A;
  --c-outline-rgb: 138,138,138;                   /* color/outline */
  --c-outline-variant: #636366;           /* color/outline-variant */
  --c-error: #EF4444;                     /* color/error */
  --c-primary-rgb: 255,204,0;
  --c-primary-muted-rgb: 255,243,194;
  --c-background-rgb: 18,18,18;
  --c-surface-rgb: 40,40,40;
  --c-on-surface-rgb: 235,235,235;
  --c-primary-tint: #3A341A;                /* primary mezclado con el fondo (tarjeta seleccionada) */
  --c-primary-disabled: #B7A869;            /* color/primary-disabled */
  --c-skeleton: #282828;                    /* bloques de carga */
  --c-seg-active: var(--c-primary-muted);   /* segmento Monthly/Annual */
  --c-spinner-track: rgba(235,235,235,0.25);
  --c-field-bg: var(--c-surface);          /* campos de formulario */
  --c-field-border: var(--c-outline);
  --c-field-focus: var(--c-on-surface);
  --c-field-text: var(--c-on-surface);
  --c-field-placeholder: var(--c-on-surface-variant);
  --c-on-primary-disabled: #8A8A8A;         /* color/on-primary-disabled */
  --c-success: #039855;                     /* color/success */
  --c-success-container: #0D2010;           /* color/success-container */
  --c-error-container: #281717;             /* color/error-container */
}

/* BritBox — mismos tokens, valores de su Brand Library */
[data-brand="britbox"] {
  --c-primary: #A6E2F5;
  --c-primary-muted: #28CFFB;
  --c-background: #00182B;
  --c-surface: #002C49;
  --c-surface-container: #334655;
  --c-surface-variant: #667480;
  --c-on-surface: #E3DDCE;
  --c-on-surface-variant: #AAA8A1;
  --c-outline: #AAA8A1;
  --c-outline-rgb: 170,168,161;
  --c-outline-variant: #808B95;
  --c-error: #EF4444;
  --c-primary-rgb: 166,226,245;
  --c-primary-muted-rgb: 40,207,251;
  --c-background-rgb: 0,24,43;
  --c-surface-rgb: 0,44,73;
  --c-on-surface-rgb: 227,221,206;
  --c-primary-tint: #1C3A4D;                
  --c-skeleton: #162E41;                    
  --c-seg-active: var(--c-primary);         
  --c-spinner-track: rgba(166,226,245,0.16);
  --c-field-bg: #02212A;
  --c-field-border: #808B95;
  --c-field-focus: #F8F4EB;
  --c-field-text: #F8F4EB;
  --c-field-placeholder: rgba(248,244,235,0.6);
  --c-primary-disabled: #334655;            
  --c-on-primary-disabled: #808B95;         
  --c-success: #40E68C;                     
  --c-success-container: #02212A;           
  --c-error-container: #281717;             
}

/* ══ RESET ══ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; }
html, body { height:100%; overflow:hidden; }
/* El hueco de la izquierda es del panel del demo, que flota: sin el, el telefono
   se centra en toda la ventana y queda medio por debajo. --stage-pad y
   --phone-fit los pone demo-nav.js, que es quien sabe si el panel esta puesto. */
body { display:flex; align-items:center; justify-content:center; background:#111; font-family:'Inter',sans-serif;
  padding-left:var(--stage-pad, 0); padding-bottom:var(--stage-pad-b, 0);
  padding-top:var(--stage-pad-t, 0);
  transition:padding-left 0.3s cubic-bezier(0.4,0,0.2,1); }

/* Ventana estrecha: los avisos del demo no caben a los lados del telefono, asi
   que se apilan en tres filas abajo —conmutadores, y el aviso de credenciales
   encima— y el telefono les deja esa banda libre (--stage-pad-b). Antes se
   montaban unos sobre otros y sobre el propio telefono. */
html.dn-tight #authHint,
html.dn-tight #pcHint { bottom:136px; }
button, input { font-family:'Inter',sans-serif; }

/* ══ iPHONE SHELL ══ */
.iphone {
  width:393px; height:852px; border-radius:52px;
  position:relative; overflow:hidden; background:var(--c-background);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.12),
    0 0 0 10px #3d3d3d, 0 0 0 12px #505050,
    0 40px 100px rgba(0,0,0,0.9),
    0 0 80px rgba(255,255,255,0.05);
  flex-shrink:0;
  transform-origin: center center;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  /* Se encoge para caber en ventanas cortas; nunca pasa de 1. */
  transform: scale(var(--phone-fit, 1));
}
.iphone.landscape {
  transform: scale(var(--phone-fit, 1)) rotate(90deg);
  overflow: clip;
}

/* ══ DYNAMIC ISLAND ══ */
.dynamic-island {
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:126px; height:36px; background:#000; border-radius:20px; z-index:200;
}

/* ══ STATUS BAR ══ */
.status-bar {
  position:absolute; top:0; left:0; right:0; height:59px;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 26px 10px; z-index:160; pointer-events:none;
}
.status-time { color:#fff; font-size:15px; font-weight:600; letter-spacing:-0.3px; }
.status-icons { display:flex; gap:6px; align-items:center; transform:scale(0.82); transform-origin:right center; }

/* ══ HOME BAR ══ */
.home-bar {
  position:absolute; bottom:13px; left:50%; transform:translateX(-50%);
  width:128px; height:6px; background:rgba(255,255,255,0.5); border-radius:9999px;
  z-index:100; pointer-events:none;
}

/* ══ SCREEN SYSTEM ══ */
.screen { position:absolute; inset:0; opacity:0; pointer-events:none; }
.screen.active { opacity:1; pointer-events:all; }
/* Una pantalla oculta nunca debe capturar clics, ni en botones que reactivan
   pointer-events (ej. .bt-appbar button). Evita que un botón invisible de otra
   pantalla intercepte el toque de la flecha back. */
.screen:not(.active) * { pointer-events:none !important; }
#splash.active, #welcome.active, #signin.active, #forgotpw.active, #setpw.active, #pwsuccess.active, #otprequest.active, #otpenter.active { z-index: 10; }

/* ══════════════════════════════════════════════
   SPLASH
══════════════════════════════════════════════ */
#splash {
  background:var(--c-background);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.splash-logo { width:120px; height:40px; object-fit:contain; margin-bottom:32px; }
/* El src lo cambia el script del final del body, que llega tarde para el splash:
   el logotipo alcanzaba a verse en su version de Streamit. Con content la
   sustitucion entra en el primer pintado, y el script lo deja igual despues. */
[data-brand="britbox"] .splash-logo { content:url(../../Components/britbox/britbox-logo.svg); }
/* Dos clases, porque .spinner-ring fija su tamaño más abajo en la hoja. */
.spinner-ring.splash-ring { width:42px; height:42px; }
@keyframes spin { to { transform:rotate(360deg); } }
.splash-version {
  position:absolute; bottom:44px; width:100%; text-align:center;
  color:rgba(255,255,255,0.3); font-size:13px;
}
.splash-exit { animation:splashOut 0.55s cubic-bezier(0.4,0,1,1) forwards; }
@keyframes splashOut {
  0%   { opacity:1; transform:scale(1); }
  35%  { opacity:1; transform:scale(1.06); }
  100% { opacity:0; transform:scale(1.06); }
}

/* ══════════════════════════════════════════════
   WELCOME
══════════════════════════════════════════════ */
#welcome { background:var(--c-background); }

.hero-wrap { height:585px; position:absolute; top:0; left:0; right:0; overflow:hidden; z-index:1; }
.hero-photo {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top; z-index:1;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 44%,
    rgba(0,0,0,0.82) 60%, rgba(0,0,0,0.35) 80%, transparent 99%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 44%,
    rgba(0,0,0,0.82) 60%, rgba(0,0,0,0.35) 80%, transparent 99%);
}
/* La entrada es SOLO del heroe de Welcome, que es el unico que anima al abrir
   la app. Las tres fotos del carrusel de la Home comparten clase, y con el
   opacity:0 de arriba se quedaban invisibles para siempre: nadie les pone
   .reveal. La opacidad de esas la lleva el carrusel, slide a slide. */
#heroPhoto { opacity:0; transform:scale(1.07); }
#heroPhoto.reveal { animation:heroIn 1.15s cubic-bezier(0.22,0.61,0.36,1) forwards; }
@keyframes heroIn { from { opacity:0; transform:scale(1.07); }
                    to   { opacity:1; transform:scale(1); } }
.hero-fade-top {
  position:absolute; top:0; left:0; right:0; height:100px; z-index:3;
  background:linear-gradient(to bottom, rgba(0,0,0,0.3), transparent);
}
/* El desvanecido vive en la mascara de .hero-photo: un rectangulo de degradado
   encima dejaba un canto visible justo donde acababa. */
.hero-fade { display:none; }
.hero-logo-el {
  position:absolute; top:59px; left:50%; width:120px; height:40px;
  object-fit:contain; z-index:10; opacity:0; transform:translateX(-50%) scale(1.18);
}
.hero-logo-el.reveal { animation:logoIn 0.65s cubic-bezier(0.34,1.4,0.64,1) 0.55s forwards; }
@keyframes logoIn { to { opacity:1; transform:translateX(-50%) scale(1); } }

.cta-section { position:absolute; top:507px; bottom:0; left:0; right:0; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:0 24px 34px; }
.cta-item { opacity:0; transform:translateY(26px); width:100%; text-align:center; }
.cta-item.reveal { animation:ctaIn 0.55s cubic-bezier(0.34,1.3,0.64,1) forwards; }
@keyframes ctaIn { to { opacity:1; transform:translateY(0); } }

.cta-title { font-size:24px; font-weight:600; line-height:1.2; color:var(--c-on-surface); margin-bottom:8px; }
.cta-sub   { font-size:16px; font-weight:400; line-height:1.5; color:var(--c-on-surface); margin-bottom:32px; }

.btn-primary {
  width:100%; height:44px; background:var(--c-primary); color:var(--c-background);
  border:none; border-radius:8px; font-size:16px; font-weight:600;
  cursor:pointer; margin-bottom:16px; transition:transform 0.12s, opacity 0.12s;
}
.btn-primary:active { transform:scale(0.97); opacity:0.85; }
.btn-outline {
  width:100%; height:44px; background:transparent; color:var(--c-on-surface);
  border:1.2px solid var(--c-outline); border-radius:8px;
  font-size:16px; font-weight:600; cursor:pointer; transition:transform 0.12s, background 0.15s;
}
.btn-outline:active { transform:scale(0.97); background:rgba(255,255,255,0.06); }
.promo-wrap { margin-top:24px; text-align:center; }
.promo-small { font-size:16px; font-weight:400; line-height:1.5; color:var(--c-on-surface); margin-bottom:12px; }
.promo-link-btn { background:none; border:none; color:var(--c-primary); font-size:16px; font-weight:600; line-height:1.5; cursor:pointer; }

/* ══════════════════════════════════════════════
   SIGN IN
══════════════════════════════════════════════ */
#signin { background:var(--c-background); display:flex; flex-direction:column; overflow:hidden; }
#signin.slide-enter { animation:slideIn 0.36s cubic-bezier(0.25,0.46,0.45,0.94) both; }
#signin.slide-leave { animation:slideOut 0.3s cubic-bezier(0.25,0.46,0.45,0.94) both; }
@keyframes slideIn  { from { transform:translateX(100%); } to { transform:translateX(0); } }
@keyframes slideOut { from { transform:translateX(0);    } to { transform:translateX(100%); } }
/* Empuje lateral de verdad: las DOS pantallas se mueven a la vez. La que sale no
   se apaga, se va desplazando (un 26%, como hace iOS, no el 100%: se queda algo
   visible por detras de la que entra). Antes perdia .active en el mismo frame
   en que la otra empezaba, asi que lo que entraba parecia empujar vacio. */
@keyframes slideUnder { from { transform:translateX(0);     } to { transform:translateX(-26%); } }
@keyframes slideBack  { from { transform:translateX(-26%);  } to { transform:translateX(0);    } }


.si-header {
  height:64px; margin-top:59px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.si-back {
  position:absolute; left:18px; background:none; border:none;
  color:#fff; font-size:26px; line-height:1; cursor:pointer;
  padding:6px 8px; transition:opacity 0.15s;
}
.si-back:active { opacity:0.5; }

.si-body {
  flex:1; overflow-y:auto; min-height:0;
  padding:16px 24px 28px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column;
}
.si-body::-webkit-scrollbar { display:none; }
.si-body > * { flex-shrink:0; }

.si-h1 { font-size:24px; font-weight:600; color:var(--c-on-surface); margin-bottom:8px; text-align:center; }
.si-sub { font-size:16px; color:var(--c-on-surface); line-height:1.5; margin-bottom:32px; text-align:center; }

/* ── Fields ── */
.fgroup + .fgroup { margin-top:24px; }
.flabel { display:block; font-size:16px; font-weight:600; color:var(--c-on-surface); margin-bottom:8px; }
.fwrap  { position:relative; }

.finput {
  width:100%; height:58px;
  background:var(--c-field-bg); border:1px solid var(--c-field-border);
  border-radius:8px; padding:0 48px 0 17px;
  color:var(--c-field-text); font-size:16px; outline:none; cursor:pointer;
  caret-color:var(--c-primary); user-select:none;
  transition:border-color 0.2s, background 0.2s;
  -webkit-tap-highlight-color:transparent;
}
.finput::placeholder { color:var(--c-field-placeholder); }
.finput.focused { border-color:var(--c-field-focus); }
.finput.err     { border-color:var(--c-error) !important; background:var(--c-error-container) !important; }

.eye-toggle {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  background:none; border:none; outline:none;
  cursor:pointer; padding:4px; line-height:1; z-index:2;
  opacity:0.28;
  transition:opacity 0.15s; -webkit-tap-highlight-color:transparent;
}
.eye-toggle img { display:block; }

/* Field errors */
.ferror {
  font-size:13px; color:var(--c-error); font-weight:400;
  height:0; overflow:hidden;
  opacity:0; transform:translateY(-3px);
  transition:opacity 0.18s, transform 0.18s, height 0.18s;
  margin-top:0;
}
.ferror.show { height:auto; opacity:1; transform:translateY(0); margin-top:6px; }

@keyframes shakeX {
  0%,100% { transform:translateX(0); }
  15% { transform:translateX(-8px); }
  30% { transform:translateX(7px); }
  45% { transform:translateX(-6px); }
  60% { transform:translateX(5px); }
  75% { transform:translateX(-3px); }
}
.do-shake { animation:shakeX 0.4s ease; }

/* Forgot */
.forgot {
  display:block; text-align:right; background:none; border:none;
  color:var(--c-primary); font-size:14px; font-weight:600;
  cursor:pointer; margin-top:14px; margin-bottom:32px; padding:0;
}
.forgot:active { opacity:0.6; }

/* ── Forgot Password Screen ── */
#forgotpw {
  background:var(--c-background); display:flex; flex-direction:column; overflow:hidden;
}
#forgotpw.slide-enter { animation:slideIn 0.36s cubic-bezier(0.25,0.46,0.45,0.94) both; }
#forgotpw.slide-leave { animation:slideOut 0.3s cubic-bezier(0.25,0.46,0.45,0.94) both; }

.fp-header {
  height:64px; margin-top:59px; flex-shrink:0;
  display:flex; align-items:center; padding:0 24px; position:relative;
}
.fp-header > img { position:absolute; left:50%; transform:translateX(-50%); }

.fp-body {
  flex:1; overflow-y:auto; min-height:0;
  padding:16px 24px 24px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column;
}
.fp-body::-webkit-scrollbar { display:none; }
.fp-body > * { flex-shrink:0; }

.fp-copy { margin-bottom:32px; }
.fp-title {
  font-size:24px; font-weight:600; color:var(--c-on-surface);
  text-align:center; margin-bottom:8px; line-height:1.2;
}
.fp-subtitle {
  font-size:16px; font-weight:400; color:var(--c-on-surface);
  text-align:center; line-height:1.5;
}
.fp-body .fgroup { margin-bottom:32px; }
.fp-body .flabel { color:var(--c-on-surface); padding:0 4px; }
#setpwBody { padding-top:0; }
.fp-body .finput {
  background:var(--c-surface); border:1px solid var(--c-outline);
  padding:0 17px; border-radius:8px; height:58px;
}
.fp-body .finput::placeholder { color:var(--c-on-surface-variant); }
.fp-body .finput.focused { border-color:var(--c-on-surface); }

.fp-req-btn {
  width:100%; height:44px; flex-shrink:0;
  border:none; border-radius:8px; font-size:16px; font-weight:600;
  cursor:not-allowed; background:var(--c-primary-disabled); color:var(--c-on-primary-disabled);
  transition:background 0.2s, color 0.2s, transform 0.1s;
  font-family:'Inter',sans-serif;
  position:relative; overflow:hidden;
}
.fp-req-btn.on { background:var(--c-primary); color:var(--c-background); cursor:pointer; }
.fp-req-btn.on:active { transform:scale(0.97); }
.fp-req-btn.loading { pointer-events:none; background:var(--c-primary-disabled); color:var(--c-on-primary-disabled); }
.fp-req-btn .lbl { transition:opacity 0.15s; }
.fp-req-btn.loading .lbl { opacity:0; }
.fp-req-btn.loading .sbtn-spin { display:block; }

.fp-cancel-btn {
  width:100%; height:44px; background:none; border:none;
  color:var(--c-primary); font-size:16px; font-weight:600; cursor:pointer;
  margin-top:16px; transition:opacity 0.15s;
}
.fp-cancel-btn:active { opacity:0.6; }

.fp-err-banner {
  display:none; align-items:center; gap:10px;
  background:var(--c-error-container); border:1px solid var(--c-error);
  border-radius:8px; padding:12px 14px; margin-bottom:32px; flex-shrink:0;
}
.fp-err-banner.show { display:flex; animation:fslide 0.22s ease; }
.fp-err-banner-text { font-size:14px; font-weight:600; color:var(--c-error); line-height:1.5; }

.fp-success {
  flex:1; padding:0 24px;
  display:none; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:0;
}
.fp-success.visible { display:flex; }
.fp-mail-icon { margin-bottom:32px; flex-shrink:0; }
.fp-ok-title { font-size:24px; font-weight:600; color:var(--c-on-surface); line-height:1.2; margin-bottom:8px; }
.fp-ok-body { font-size:16px; font-weight:400; color:var(--c-on-surface); line-height:1.5; margin-bottom:0; }
.fp-ok-email { font-size:16px; font-weight:400; color:var(--c-on-surface-variant); line-height:1.5; }
.fp-ok-instructions { font-size:16px; font-weight:400; color:var(--c-on-surface); line-height:1.5; margin-bottom:32px; }
.fp-reset-btn {
  width:100%; height:44px;
  border:none; border-radius:8px; font-size:16px; font-weight:600;
  background:var(--c-primary); color:var(--c-background); cursor:pointer;
  transition:transform 0.1s; font-family:'Inter',sans-serif; flex-shrink:0;
}
.fp-reset-btn:active { transform:scale(0.97); }

.fp-footer { flex-shrink:0; background:var(--c-background); border-top:1px solid rgba(255,255,255,0.08); }
.fp-footer-row {
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:16px 24px 24px;
}
.fp-footer-muted { font-size:14px; font-weight:400; color:var(--c-on-surface-variant); }
.fp-footer-link { font-size:14px; font-weight:600; color:var(--c-primary); cursor:pointer; }
.fp-home-pill {
  height:32px; display:flex; align-items:center; justify-content:center;
}
.fp-home-pill::after {
  content:''; width:128px; height:6px;
  background:rgba(255,255,255,0.5); border-radius:9999px;
}

/* Credentials error banner */
.creds-error {
  display:none; align-items:center; gap:10px;
  background:var(--c-error-container); border:1px solid var(--c-error);
  border-radius:8px; padding:12px 14px; margin-bottom:20px;
  flex-shrink:0;
}
.creds-error.show { display:flex; animation:fslide 0.22s ease; }
@keyframes fslide { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.creds-error-text { font-size:14px; font-weight:600; color:var(--c-error); line-height:1.5; }

/* Submit button */
.si-submit {
  width:100%; height:44px; flex-shrink:0;
  border:none; border-radius:8px; font-size:16px; font-weight:600;
  cursor:not-allowed; background:var(--c-primary-disabled); color:var(--c-on-primary-disabled);
  transition:background 0.2s, color 0.2s, transform 0.1s;
  position:relative; overflow:hidden;
}
.si-submit.on  { background:var(--c-primary); color:var(--c-background); cursor:pointer; }
.si-submit.on:active { transform:scale(0.97); }
.si-submit.loading { pointer-events:none; background:var(--c-primary-disabled); }
.si-submit .lbl { transition:opacity 0.15s; }
.si-submit.loading .lbl { opacity:0; }
.sbtn-spin {
  display:none; width:22px; height:22px;
  border:2.5px solid rgba(var(--c-on-surface-rgb),0.25); border-top-color:var(--c-primary);
  border-radius:50%; animation:spin 0.65s linear infinite;
  position:absolute; top:50%; left:50%; margin-top:-11px; margin-left:-11px;
}
.si-submit.loading .sbtn-spin { display:block; }

/* Or / secondary */
.or-divider { display:flex; align-items:center; gap:32px; margin:24px 0 24px; }
.or-line { flex:1; height:1px; background:rgba(255,255,255,0.12); }
.or-text  { font-size:14px; color:var(--c-on-surface); }

.si-code-btn {
  width:100%; height:44px; background:none; border:none;
  color:var(--c-primary); font-size:16px; font-weight:600; cursor:pointer;
  margin-bottom:32px; transition:opacity 0.15s;
}
.si-code-btn:active { opacity:0.6; }

.si-register {
  text-align:center; font-size:16px; color:var(--c-on-surface);
  padding-bottom:32px; line-height:1.5;
}
.si-register span { color:var(--c-primary); font-weight:600; cursor:pointer; }

.si-help {
  text-align:center; font-size:14px; color:var(--c-on-surface-variant);
  border-top:1px solid rgba(255,255,255,0.08); padding:16px 0 24px;
}
.si-help span { color:var(--c-primary); font-weight:600; cursor:pointer; }

/* ══════════════════════════════════════════════
   EMAIL NOTIFICATION (outside iPhone)
══════════════════════════════════════════════ */
#emailNotif {
  position:fixed; top:28px; right:28px;
  display:none; flex-direction:row; align-items:center; gap:12px;
  background:#1c1c1c; border:1px solid rgba(255,255,255,0.15);
  border-radius:12px; padding:12px 18px 12px 14px;
  cursor:pointer; font-family:'Inter',sans-serif;
  box-shadow:0 4px 28px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
  -webkit-tap-highlight-color:transparent;
  transition:transform 0.12s, opacity 0.12s;
  z-index:9999;
}
#emailNotif:hover { border-color:rgba(255,255,255,0.35); }
#emailNotif:active { transform:scale(0.97); opacity:0.85; }
#emailNotif.show { display:flex; animation:notifIn 0.4s cubic-bezier(0.34,1.1,0.64,1) both; }
@keyframes notifIn {
  from { opacity:0; transform:translateX(18px); }
  to   { opacity:1; transform:translateX(0); }
}
.enotif-icon { position:relative; flex-shrink:0; }
.enotif-badge {
  position:absolute; top:-7px; right:-9px;
  width:17px; height:17px; border-radius:50%;
  background:var(--c-error);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:#fff; line-height:1;
}
.enotif-label { font-size:13px; font-weight:600; color:#EDEDED; margin-bottom:3px; }
.enotif-link  { font-size:12px; font-weight:500; color:#9EC5FE; }

/* ── OTP code notification ── */
#otpNotif {
  position:fixed; top:28px; right:28px;
  display:none; flex-direction:row; align-items:center; gap:12px;
  background:#1c1c1c; border:1px solid rgba(255,255,255,0.15);
  border-radius:12px; padding:12px 18px 12px 14px;
  cursor:default; font-family:'Inter',sans-serif;
  box-shadow:0 4px 28px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
  z-index:9999;
}
#otpNotif.show { display:flex; animation:notifIn 0.4s cubic-bezier(0.34,1.1,0.64,1) both; }
.otp-notif-label { font-size:13px; font-weight:600; color:#EDEDED; margin-bottom:4px; }
.otp-notif-code {
  font-size:22px; font-weight:700; color:var(--c-primary);
  letter-spacing:8px; font-variant-numeric:tabular-nums;
}

/* ══════════════════════════════════════════════
   SET NEW PASSWORD SCREEN
══════════════════════════════════════════════ */
#setpw {
  background:var(--c-background); display:flex; flex-direction:column; overflow:hidden;
}

/* ══════════════════════════════════════════════
   PASSWORD UPDATED SUCCESS SCREEN
══════════════════════════════════════════════ */
#pwsuccess { background:var(--c-background); display:flex; flex-direction:column; }
.pwsuccess-body {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:0 24px 16px;
}
.pwsuccess-icon { margin-bottom:32px; }
.pwsuccess-copy {
  text-align:center; margin-bottom:32px;
  display:flex; flex-direction:column; gap:8px; width:100%;
}
.pwsuccess-title { font-size:24px; font-weight:600; color:var(--c-on-surface); line-height:1.2; }
.pwsuccess-subtitle { font-size:16px; font-weight:400; color:var(--c-on-surface); line-height:1.5; }
.pwsuccess-btn {
  width:100%; height:44px; border:none; border-radius:8px;
  background:var(--c-primary); color:var(--c-background); font-size:16px; font-weight:600;
  cursor:pointer; font-family:'Inter',sans-serif;
  transition:transform 0.1s;
}
.pwsuccess-btn:active { transform:scale(0.97); }
/* Ruta secundaria del alta: entrar en la plataforma sin plan */
.pwsuccess-alt {
  width:100%; height:44px; margin-top:8px; background:none; border:none;
  color:var(--c-primary); font-family:'Inter',sans-serif; font-size:16px; font-weight:600; cursor:pointer;
}
.setpw-criteria {
  display:flex; flex-direction:column; gap:12px; padding:0 8px;
}
#setpwBody .setpw-criteria { margin-top:24px; margin-bottom:32px; }
#setpwBody .fgroup { margin-bottom:0; }
.setpw-criterion { display:flex; align-items:center; gap:12px; }
.setpw-crit-icon { width:20px; height:20px; flex-shrink:0; display:block; }
.setpw-criterion span { font-size:14px; color:var(--c-on-surface-variant); font-weight:400; line-height:1.5; }
#setpwBody .finput { padding-right:50px; }
.sp-match-err {
  font-size:14px; color:var(--c-error); font-weight:400; line-height:1.5;
  padding-left:4px;
  height:0; overflow:hidden; opacity:0; transform:translateY(-3px);
  transition:opacity 0.18s, transform 0.18s, height 0.18s; margin-top:0;
}
.sp-match-err.show { height:auto; opacity:1; transform:translateY(0); margin-top:6px; }

/* ══════════════════════════════════════════════
   SUCCESS OVERLAY
══════════════════════════════════════════════ */
.overlay {
  display:none; position:absolute; inset:0;
  background:rgba(0,0,0,0.82); backdrop-filter:blur(12px);
  flex-direction:column; align-items:center; justify-content:center;
  gap:12px; z-index:300;
}
.overlay.show { display:flex; animation:fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.ok-circle {
  width:76px; height:76px; background:#32d74b; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:34px;
  animation:popBounce 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes popBounce { from { transform:scale(0); opacity:0; } to { transform:scale(1); opacity:1; } }
.ok-title { font-size:20px; font-weight:700; color:#fff; margin-top:4px; }
.ok-sub   { font-size:14px; color:rgba(255,255,255,0.48); }
.ok-btn {
  margin-top:10px; background:var(--c-primary); color:#000;
  border:none; border-radius:8px; height:44px; padding:0 52px;
  font-size:16px; font-weight:700; cursor:pointer; transition:transform 0.1s;
}
.ok-btn:active { transform:scale(0.96); }

/* ══════════════════════════════════════════════
   iOS LIGHT KEYBOARD
══════════════════════════════════════════════ */
.kbd-panel {
  position:absolute; bottom:0; left:0; right:0;
  background:#d0d3d9;
  transform:translateY(100%);
  transition:transform 0.4s cubic-bezier(0.32,0.72,0,1);
  z-index:100;
}
.iphone.landscape .kbd-panel,
.iphone.landscape .home-bar { display:none; }
.kbd-panel.visible { transform:translateY(0); }

.kbd-rows { padding:10px 3px 4px; }
.kb-row {
  display:flex; align-items:center; justify-content:center;
  gap:6px; height:42px; margin-bottom:11px;
}
.kb-row:last-child { margin-bottom:0; }

.kb-key {
  position:relative; height:42px; width:33px;
  background:#fff; border-radius:5px; box-shadow:0 1px 0 #898a8d;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none; flex-shrink:0;
  -webkit-tap-highlight-color:transparent; transition:background 0.05s;
}
.kb-key span { font-size:16px; font-weight:400; color:#000; line-height:1; pointer-events:none; }
.kb-key.active { background:#e5e5ea; }

.kb-sym {
  height:42px; width:40px;
  background:#fff; border-radius:5px; box-shadow:0 1px 0 #898a8d;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none; flex-shrink:0;
  -webkit-tap-highlight-color:transparent; transition:background 0.05s;
}
.kb-sym span { font-size:15px; color:#000; pointer-events:none; }
.kb-sym.active { background:#e5e5ea; }

.kb-modifier {
  height:42px; width:42px;
  background:#adb5bd; border-radius:5px; box-shadow:0 1px 0 #898a8d;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none; flex-shrink:0;
  -webkit-tap-highlight-color:transparent; transition:background 0.05s;
}
.kb-modifier span { font-size:15px; color:#000; line-height:1; pointer-events:none; }
.kb-modifier.active { background:#c8cdd3; }
.kb-modifier.shift-on span { color:#007AFF; }

.kb-fn {
  height:42px; width:72px;
  background:#adb5bd; border-radius:5px; box-shadow:0 1px 0 #898a8d;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none; flex-shrink:0;
  -webkit-tap-highlight-color:transparent; transition:background 0.05s;
}
.kb-fn span { font-size:14px; color:#000; pointer-events:none; }
.kb-fn.active { background:#c8cdd3; }

.kb-space {
  height:42px; flex:1;
  background:#fff; border-radius:5px; box-shadow:0 1px 0 #898a8d;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none;
  -webkit-tap-highlight-color:transparent; transition:background 0.05s;
}
.kb-space span { font-size:14px; color:rgba(0,0,0,0.5); pointer-events:none; }
.kb-space.active { background:#e5e5ea; }

.kb-next {
  height:42px; width:90px;
  background:#007AFF; border-radius:5px; box-shadow:0 1px 0 #0056b3;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none; flex-shrink:0;
  -webkit-tap-highlight-color:transparent; transition:background 0.05s;
}
.kb-next span { font-size:14px; font-weight:500; color:#fff; pointer-events:none; }
.kb-next.active { background:#0062cc; }

.kbd-accessory {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 16px 20px;
}
.kbd-accessory-btn {
  background:none; border:none; cursor:pointer; color:var(--c-outline-variant); padding:4px;
  -webkit-tap-highlight-color:transparent;
}

.kb-bubble {
  position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%) scaleY(0.5);
  transform-origin:bottom center;
  width:44px; height:54px;
  background:#fff; border-radius:10px 10px 2px 10px;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:300; color:#000;
  opacity:0; pointer-events:none; z-index:200;
  box-shadow:0 2px 12px rgba(0,0,0,0.22);
  transition:opacity 0.04s, transform 0.07s cubic-bezier(0.34,1.3,0.64,1);
}
.kb-bubble::after {
  content:''; position:absolute; bottom:-8px; left:0;
  width:14px; height:8px; background:#fff;
  clip-path:polygon(0 0, 100% 0, 100% 100%);
}
.kb-key.active .kb-bubble { opacity:1; transform:translateX(-50%) scaleY(1); }

/* ══════════════════════════════════════════════
   HOME SCREEN
══════════════════════════════════════════════ */
.screen-fade-enter { animation:fadeIn 0.42s ease forwards; }
.screen-dark-enter { animation:darkToLight 0.8s cubic-bezier(0.4,0,0.2,1) forwards; }
/* Transición push tipo iOS al navegar de un detalle a otro vía card de More Like This.
   La entrante se desliza desde la derecha; la saliente retrocede a la izquierda y se oscurece. */
.screen.detail-push-enter {
  animation:detailPushIn 0.52s cubic-bezier(0.32,0.72,0,1) both;
  box-shadow:-18px 0 44px rgba(0,0,0,0.55);
}
.screen.detail-push-leave {
  animation:detailPushOut 0.52s cubic-bezier(0.32,0.72,0,1) both;
}
@keyframes detailPushIn {
  from { transform:translateX(100%); }
  to   { transform:translateX(0); }
}
@keyframes detailPushOut {
  from { transform:translateX(0);     filter:brightness(1); }
  to   { transform:translateX(-22%);  filter:brightness(0.5); }
}
@media (prefers-reduced-motion:reduce) {
  .screen.detail-push-enter { animation:fadeIn 0.4s ease forwards; box-shadow:none; }
  .screen.detail-push-leave { animation:none; }
}
@keyframes darkToLight {
  0%   { opacity:0; filter:brightness(0); }
  30%  { opacity:1; filter:brightness(0.06); }
  100% { opacity:1; filter:brightness(1); }
}

/* ══════════════════════════════════════════════
   TRANSICIONES DE ENTRADA GENÉRICAS
   Las aplica trApply() (JS) a cualquier .screen que se active sin animación
   propia: fade para pestañas y raíces, slide para un paso más profundo o un
   paso de flujo, rise para resultados e interrupciones.
   Sin fill-mode a propósito: al acabar, la pantalla queda en su estado natural
   y una pantalla oculta nunca se queda congelada en opacity:1.
══════════════════════════════════════════════ */
.screen.tr-fade  { animation:trFade  0.26s ease; }
.screen.tr-rise  { animation:trRise  0.32s cubic-bezier(0.32,0.72,0,1); }
.screen.tr-slide { animation:slideIn 0.36s cubic-bezier(0.25,0.46,0.45,0.94); }
/* ── Empuje lateral: las dos pantallas se mueven a la vez ──
   Van DESPUES de las .tr-* a proposito: misma especificidad, asi que gana la
   ultima declarada, y antes la que salia se quedaba con su trFade — que es lo
   que la hacia desaparecer dejando una superficie plana en vez de acompañar.
   .tr-under es la saliente del empuje generico; slide-* son los flujos de auth
   que ya traian animacion propia. */
.screen.tr-under    { animation:slideUnder 0.36s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.screen.slide-enter { animation:slideIn 0.36s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.screen.slide-leave { animation:slideOut 0.3s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.screen.slide-under { animation:slideUnder 0.36s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.screen.slide-back  { animation:slideBack 0.3s cubic-bezier(0.25,0.46,0.45,0.94) both; }
/* !important porque varias pantallas fijan z-index por id (#welcome.active y
   compañia), y un id gana a dos clases: sin esto la que entra no se pone por
   delante y el orden lo decidia el DOM. */
.screen.slide-enter, .screen.slide-leave, .screen.tr-slide { z-index:30 !important; }
.screen.slide-under, .screen.slide-back, .screen.tr-under   { z-index:20 !important; }
@media (prefers-reduced-motion: reduce) {
  .screen.slide-enter, .screen.slide-leave, .screen.slide-under,
  .screen.slide-back, .screen.tr-under { animation:none; }
}
@keyframes trFade { from { opacity:0; } to { opacity:1; } }
@keyframes trRise {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce) {
  .screen.tr-rise, .screen.tr-slide { animation:trFade 0.2s ease; }
}


.nav-bar {
  position:absolute; top:0; left:0; right:0; z-index:50; height:115px;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 16px 14px;
  background-color:rgba(var(--c-background-rgb),calc(0.97 * var(--nav-solid, 0)));
  background-image:linear-gradient(to bottom, rgba(var(--c-background-rgb),0.82) 0%, rgba(var(--c-background-rgb),0.25) 72%, transparent 100%);
}
.nav-bar.solid {
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.nav-logo { font-size:22px; font-weight:900; color:var(--c-primary); letter-spacing:1px; }
.nav-right { display:flex; align-items:center; gap:14px; }
.nav-btn { cursor:pointer; background:none; border:none; padding:0; transition:opacity 0.15s; }
.nav-btn:active { opacity:0.45; }

.home-scroll {
  position:absolute; top:0; left:0; right:0; bottom:110px;
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  z-index:2;
}
.home-scroll::-webkit-scrollbar { display:none; }

/* El arte sube hasta el borde, por detrás de la barra de estado: lo que protege
   al reloj y al logo es el degradado de .nav-bar, no un hueco. Dejarlo a 59
   abría una banda plana y un canto justo donde empezaba la foto. Se compensa en
   el alto para que los raíles de abajo no se muevan. */
.hero-section { position:relative; width:100%; height:579px; overflow:hidden; flex-shrink:0; }
/* Scroll horizontal nativo con paging (equivale a .scrollTargetBehavior(.paging)) */
.hero-track {
  position:absolute; inset:0;
  display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; overscroll-behavior-x:contain;
}
.hero-track::-webkit-scrollbar { display:none; }
.hero-slide {
  min-width:100%; width:100%; height:100%; flex-shrink:0;
  position:relative; overflow:hidden;
  scroll-snap-align:start; scroll-snap-stop:always;
  cursor:grab; user-select:none; -webkit-user-select:none; -webkit-user-drag:none;
  opacity:1; will-change:opacity;   /* opacidad guiada por el scroll (JS) */
}
.hero-section.dragging, .hero-section.dragging .hero-slide { cursor:grabbing; }
/* Overlay fijo de detalles: no se desplaza con el scroll, hace crossfade + swap */
.hero-details { position:absolute; inset:0; z-index:3; pointer-events:none; will-change:opacity; }
.hero-details .hero-cta-row { pointer-events:auto; }
/* ── Heroe de coleccion ──
   Una sola pieza por marca. Streamit usa el mosaico compuesto que viene del
   diseno, y por eso se encuadra a la derecha: ahi estan las caras. BritBox usa
   un 2:3 de Shetland recortado del arte sin rotulo, que encuadra como los demas
   heroes y deja las dos caras por encima del logo. */
.hero-collection .hc-art {
  position:absolute; inset:0; width:100%; height:100%; display:block;
  object-fit:cover; object-position:80% center; z-index:1;
}
[data-brand="britbox"] .hero-collection .hc-art { object-position:center top; }
.hero-collection .hc-veil {
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to bottom, rgba(var(--c-background-rgb),0.25) 0%,
    rgba(var(--c-background-rgb),0.55) 45%, rgba(var(--c-background-rgb),0.9) 100%);
}
/* El de coleccion no se reproduce ni se añade a la lista: el CTA lleva a la
   coleccion y el "+" no pinta nada ahi. */
.hero-details.is-collection #hsAddBtn { display:none; }
.hero-details.is-collection #hsPlayIcon { display:none; }
.hero-details.is-collection .hero-meta { display:none; }
.hero-details.is-collection .hero-tagline { -webkit-line-clamp:3; }

.hero-slide img.hero-photo {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top; z-index:1; transform:none;
}
/* Vera es un retrato cerrado y con el encuadre por arriba la barbilla cae justo
   donde entra el rotulo. Se baja el recorte al pie: la cara sube entera por
   encima del logo y la letra queda sobre el abrigo. */
[data-brand="britbox"] .hero-slide img.hero-photo[data-bb="hero2x3-vera-s12.jpg"] { object-position:center bottom; }
.hero-fade-layer {
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to bottom,
    rgba(var(--c-background-rgb),0.68) 0%, rgba(var(--c-background-rgb),0.15) 12%, transparent 24%,
    transparent 46%, rgba(var(--c-background-rgb),0.35) 56%, rgba(var(--c-background-rgb),0.82) 68%,
    rgba(var(--c-background-rgb),0.97) 82%, var(--c-background) 100%);
}
.hero-content {
  position:absolute; bottom:76px; left:0; right:0;
  z-index:3; text-align:left; padding:0 16px;
}
.hero-show-title {
  font-size:54px; font-weight:900; color:#fff; line-height:1;
  margin-bottom:8px; letter-spacing:-1.5px; font-style:italic;
  text-shadow:0 2px 24px rgba(0,0,0,0.55);
}
.hero-meta {
  font-size:14px; font-weight:400; line-height:1.5; text-align:center;
  color:rgba(255,255,255,0.8); margin-bottom:12px;
}
/* La sinopsis del heroe va centrada en las tres variantes, como el diseno:
   el bloque de titulo esta centrado y alinearla a la izquierda lo rompia. */
.hero-tagline {
  font-size:16px; font-weight:400; color:var(--c-on-surface);
  line-height:1.5; text-align:center;
}
.hero-cta-row {
  position:absolute; bottom:24px; left:16px; right:16px;
  z-index:4; display:flex; gap:16px; align-items:center; will-change:opacity;
}
.btn-play {
  flex:1; height:40px; background:var(--c-primary); color:var(--c-background);
  border:none; border-radius:8px; font-size:14px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; font-family:'Inter',sans-serif; transition:transform 0.1s, opacity 0.1s;
}
.btn-play:active { transform:scale(0.97); opacity:0.88; }
.btn-plus {
  width:40px; height:40px; flex-shrink:0; background:var(--c-surface);
  border:1px solid rgba(var(--c-primary-rgb),0.3); border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.15s;
}
.btn-plus:active { background:rgba(255,255,255,0.14); }

.hero-dots {
  /* Fuera del hero: en el diseno van en una banda propia de 40px justo
     debajo (Figma: Pagination Dots y=520, h=40). Dentro los recortaba el
     overflow:hidden que necesita el carrusel. */
  height:40px; display:flex; align-items:center; justify-content:center;
  gap:8px; z-index:3; margin-bottom:24px;
}
.dot {
  width:8px; height:8px; border-radius:50%;
  background:rgba(189,189,189,0.5); cursor:pointer; transition:background 0.25s; flex-shrink:0;
}
.dot.active { background:var(--c-primary); }

.sections-wrap { background:var(--c-background); padding-top:8px; padding-bottom:24px; }
.section { margin-top:16px; }      /* gap entre rails (space/l) — Figma */

/* ── Scroll reveal — secciones de la Home entran al hacer scroll ── */
/* Solo se ocultan si JS armó el observer (.hs-reveal-ready) y el usuario no pidió menos movimiento */
@media (prefers-reduced-motion: no-preference) {
  #hsHomeScroll.hs-reveal-ready .hs-reveal {
    opacity:0; transform:translateY(24px);
    transition:opacity 0.6s cubic-bezier(0.4,0,0.2,1), transform 0.6s cubic-bezier(0.4,0,0.2,1);
    will-change:opacity, transform;
  }
  #hsHomeScroll.hs-reveal-ready .hs-reveal.in { opacity:1; transform:none; }

  /* ── Keyframes de entrada (usan fill-mode backwards → no bloquean el :active) ── */
  @keyframes hsRise   { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
  @keyframes hsEmerge { from { opacity:0; transform:scale(1.08);      } to { opacity:1; transform:scale(1); } }
  @keyframes hsFadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

  /* Las secciones con cascada NO se mueven como bloque; animamos sus hijos */
  #hsHomeScroll.hs-reveal-ready .hs-reveal.hs-stagger,
  #hsHomeScroll.hs-reveal-ready .hs-reveal.section-avatar { opacity:1; transform:none; }

  /* El encabezado de la sección con cascada aparece cuando la sección entra en vista */
  #hsHomeScroll.hs-reveal-ready .hs-stagger .section-header {
    opacity:0; transform:translateY(14px);
    transition:opacity 0.5s cubic-bezier(0.4,0,0.2,1), transform 0.5s cubic-bezier(0.4,0,0.2,1);
  }
  #hsHomeScroll.hs-reveal-ready .hs-stagger.in .section-header { opacity:1; transform:none; }

  /* ── CARDS POR-CARD — cada card aparece al entrar en el viewport (vertical Y horizontal) ── */
  /* El JS (cardIO) añade .card-in a cada card al entrar; el animation-delay del stagger lo pone el JS inline */
  #hsHomeScroll.hs-reveal-ready .hs-stagger .top10-card,
  #hsHomeScroll.hs-reveal-ready .section-avatar .avatar-cards .vcard { opacity:0; }
  #hsHomeScroll.hs-reveal-ready .hs-stagger .top10-card.card-in,
  #hsHomeScroll.hs-reveal-ready .section-avatar .avatar-cards .vcard.card-in {
    opacity:1; animation:hsRise 0.5s cubic-bezier(0.4,0,0.2,1) backwards;
  }

  /* ── AVATAR — la imagen emerge de la oscuridad + logo/tagline (las cards van por-card, arriba) ── */
  #hsHomeScroll.hs-reveal-ready .section-avatar:not(.in) .avatar-hero img,
  #hsHomeScroll.hs-reveal-ready .section-avatar:not(.in) .avatar-logo,
  #hsHomeScroll.hs-reveal-ready .section-avatar:not(.in) .avatar-tagline { opacity:0; }
  #hsHomeScroll.hs-reveal-ready .section-avatar.in .avatar-hero img { animation:hsEmerge 1.1s cubic-bezier(0.4,0,0.2,1) backwards; }
  #hsHomeScroll.hs-reveal-ready .section-avatar.in .avatar-logo    { animation:hsFadeUp 0.6s cubic-bezier(0.4,0,0.2,1) 0.30s backwards; }
  #hsHomeScroll.hs-reveal-ready .section-avatar.in .avatar-tagline { animation:hsFadeUp 0.6s cubic-bezier(0.4,0,0.2,1) 0.42s backwards; }
}
.section-header {
  padding:0 16px; margin-bottom:12px;   /* header → cards = 12px (space/m) */
  display:flex; align-items:flex-start; justify-content:space-between;
}
.sh-left { flex:1; min-width:0; }
.sh-title { font-size:18px; font-weight:600; color:var(--c-on-surface); margin-bottom:0; line-height:1.5; }
.sh-sub { font-size:12px; font-weight:400; color:var(--c-on-surface-variant); line-height:1.5; }
.sh-arrow { display:flex; align-items:center; padding-left:4px; cursor:pointer; flex-shrink:0; }

/* ══ WE THINK YOU MIGHT LIKE SCREEN ══ */
.wtml-bar {
  position:absolute; top:59px; left:0; right:0; height:52px; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; background:var(--c-background);
}
.wtml-back {
  width:24px; height:24px; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0; flex-shrink:0;
}
.wtml-title {
  font-size:18px; font-weight:600; color:var(--c-on-surface); letter-spacing:-0.2px;
}
.wtml-grid-wrap {
  position:absolute; top:111px; left:0; right:0; bottom:32px;
  overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; padding:0 16px 16px;
}
.wtml-grid-wrap::-webkit-scrollbar { display:none; }
.wtml-grid {
  display:grid; grid-template-columns:repeat(3,111px); gap:12px;
}
.wtml-card {
  position:relative; width:111px; height:167px;
  border-radius:8px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.2); flex-shrink:0;
  cursor:pointer; transition:transform 0.1s, opacity 0.1s;
}
.wtml-card:active { transform:scale(0.95); opacity:0.88; }
.wtml-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wtml-card-label {
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  background:var(--c-primary); color:var(--c-background); font-size:8px; font-weight:600;
  padding:3px 4px; border-radius:2px 2px 0 0; white-space:nowrap;
}
.wtml-home-indicator {
  position:absolute; bottom:0; left:0; right:0; height:32px;
  display:flex; align-items:center; justify-content:center;
}
.wtml-home-indicator span {
  width:128px; height:6px; border-radius:9999px; background:rgba(255,255,255,0.5);
}

/* ══ MY LIST MAIN ══ */
#myListMain { background:var(--c-background); }
.ml-appbar {
  position:absolute; top:59px; left:0; right:0; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; z-index:150; background:var(--c-background);
}
.ml-appbar-title { font-size:24px; font-weight:600; color:var(--c-on-surface); line-height:1.2; }
.ml-appbar-icons { display:flex; align-items:center; gap:20px; }
.ml-appbar-cast { background:none; border:none; padding:0; cursor:pointer; display:flex; align-items:center; }
.ml-appbar-cast:active { opacity:0.5; }
.ml-avatar {
  width:32px; height:32px; border-radius:50%; background:var(--c-primary-muted);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ml-avatar span { font-size:14px; font-weight:600; color:var(--c-surface-container); line-height:1.5; }
.ml-main-scroll {
  position:absolute; top:123px; left:0; right:0; bottom:110px;
  overflow-y:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.ml-main-scroll::-webkit-scrollbar { display:none; }
.ml-section-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px 4px; cursor:pointer;
}
.ml-section-hdr:active { opacity:0.7; }
.ml-section-title { font-size:18px; font-weight:600; color:var(--c-on-surface); line-height:1.5; }
.ml-section-sub { font-size:12px; font-weight:400; color:var(--c-on-surface-variant); line-height:1.5; padding:0 16px 12px; }
.ml-section-arrow {
  width:24px; height:24px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ml-poster-rail {
  display:flex; gap:12px; padding:0 16px 16px;
  overflow-x:auto; scrollbar-width:none;
}
.ml-poster-rail::-webkit-scrollbar { display:none; }
.wl-list-item { cursor:pointer; }   /* la fila entera abre la ficha */
/* El rail de Continue Watching lleva .wcard (256×206), no pósters verticales */
.ml-cw-rail .wcard { min-width:256px; }
.ml-rail-poster {
  width:144px; height:216px; flex-shrink:0; border-radius:8px; overflow:hidden;
  position:relative; border:1px solid rgba(255,255,255,0.2); cursor:pointer;
  transition:transform 0.1s, opacity 0.1s;
}
.ml-rail-poster:active { transform:scale(0.95); opacity:0.88; }
.ml-rail-poster img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ml-rail-poster-label {
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  background:var(--c-primary); color:var(--c-background); font-size:10px; font-weight:600;
  padding:2px 4px; border-radius:2px 2px 0 0; white-space:nowrap; z-index:2;
}
.ml-wl-empty {
  display:none; flex-direction:column; align-items:center;
  padding:16px 16px 0; text-align:center;
}
.ml-wl-empty.visible { display:flex; border-bottom:0.5px solid rgba(var(--c-outline-rgb),0.35); }
.ml-wl-empty-title {
  font-size:20px; font-weight:600; color:var(--c-on-surface); margin-bottom:8px; line-height:1.2;
}
.ml-wl-empty-sub {
  font-size:16px; font-weight:400; color:var(--c-on-surface); line-height:1.5; margin-bottom:12px;
}
.ml-wl-empty-btn {
  width:100%; height:44px; background:var(--c-primary); color:var(--c-background);
  border:none; border-radius:8px; font-size:16px; font-weight:600;
  cursor:pointer; font-family:'Inter',sans-serif;
  transition:transform 0.1s, opacity 0.1s;
  margin-bottom:24px;
}
.ml-wl-empty-btn:active { transform:scale(0.97); opacity:0.85; }
.ml-tab-home {
  position:absolute; left:0; top:0; width:79px; height:80px; cursor:pointer;
}
.ml-tab-search {
  position:absolute; left:157px; top:0; width:79px; height:80px; cursor:pointer;
}

/* ══ WATCHLIST SCREEN ══ */
#watchlist { background:var(--c-background); }
.wl-appbar {
  position:absolute; top:59px; left:0; right:0; height:64px;
  display:flex; align-items:center; padding:0 16px; z-index:150; background:var(--c-background);
}
.wl-appbar-back {
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; padding:0; flex-shrink:0;
}
.wl-appbar-back:active { opacity:0.5; }
.wl-appbar-title {
  position:absolute; left:50%; transform:translateX(-50%);
  font-size:18px; font-weight:600; color:var(--c-on-surface); letter-spacing:-0.2px; white-space:nowrap;
}
.wl-appbar-right { margin-left:auto; display:flex; align-items:center; }
.wl-header {
  position:absolute; top:123px; left:0; right:0; z-index:140;
  display:flex; align-items:center; justify-content:flex-end;
  padding:0 16px 16px;
}
.wl-edit-btn {
  background:none; border:none; font-size:16px; font-weight:600; line-height:1.5;
  color:var(--c-primary); cursor:pointer; padding:0; white-space:nowrap; flex-shrink:0;
}
.wl-list-scroll {
  position:absolute; top:163px; left:0; right:0; bottom:110px;
  overflow-y:auto; overflow-x:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.wl-list-scroll::-webkit-scrollbar { display:none; }
.wl-list-item {
  display:flex; align-items:center; padding:12px 16px; gap:12px;
  background:var(--c-background); overflow:hidden; position:relative;
}
/* Divider insertado a los márgenes (Figma "Line Divider": w-full de la lista, que
   está a 16px de cada borde), no de borde a borde de la pantalla. */
.wl-list-item + .wl-list-item::before {
  content:""; position:absolute; top:0; left:16px; right:16px;
  height:0.5px; background:var(--c-outline);
}
.wl-item-thumb {
  width:117px; height:66px; flex-shrink:0; border-radius:8px;
  object-fit:cover; background:var(--c-surface);
  border:1px solid rgba(255,255,255,0.2);
}
.wl-item-info { flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.wl-item-title {
  font-size:14px; font-weight:600; color:var(--c-on-surface); line-height:1.5;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wl-item-meta {
  font-size:14px; font-weight:400; color:var(--c-on-surface-variant); line-height:1.5;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wl-item-delete {
  width:40px; height:40px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; background:none; border:none; padding:0;
  -webkit-tap-highlight-color:transparent;
  opacity:0; pointer-events:none; transition:opacity 0.2s;
}
.wl-item-delete:active { opacity:0.4 !important; }
#watchlist.edit-mode .wl-item-delete { opacity:1; pointer-events:all; }
.wl-empty-state {
  display:none; flex-direction:column; align-items:center; justify-content:center;
  padding:80px 40px 40px; gap:12px;
}
.wl-empty-state.visible { display:flex; }
.wl-empty-icon {
  width:56px; height:56px; border-radius:50%; background:var(--c-surface);
  display:flex; align-items:center; justify-content:center; margin-bottom:8px;
}
.wl-empty-title { font-size:18px; font-weight:600; color:var(--c-on-surface); text-align:center; }
.wl-empty-sub { font-size:14px; font-weight:400; color:var(--c-on-surface-variant); text-align:center; line-height:1.5; }

/* ══ RECOMMENDATIONS GRID ══ */
#recommendations { background:var(--c-background); }
.rec-grid-wrap {
  position:absolute; top:123px; left:0; right:0; bottom:110px;
  overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; padding:16px 16px;
}
.rec-grid-wrap::-webkit-scrollbar { display:none; }
.rec-grid { display:grid; grid-template-columns:repeat(3,111px); gap:12px; }

.rail {
  display:flex; gap:12px; overflow-x:auto; overflow-y:visible;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:0 16px;
}
.rail::-webkit-scrollbar { display:none; }

.pcard {
  min-width:144px; height:216px; border-radius:8px; overflow:hidden;
  position:relative; flex-shrink:0; cursor:pointer; transition:transform 0.15s;
  border:1px solid rgba(255,255,255,0.2);
}
.pcard:active { transform:scale(0.95); }
/* Premium Indicator: 26×26, fondo surface-container y borde primary@30 (var(--c-primary)4d) */
.pcard-crown {
  position:absolute; top:12px; right:12px; z-index:3; box-sizing:border-box;
  width:26px; height:26px; border-radius:4px; background:var(--c-surface-container);
  border:1px solid rgba(var(--c-primary-rgb),0.3);
  display:flex; align-items:center; justify-content:center;
}
.pcard-grad {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, rgba(0,0,0,0.52) 0%, transparent 38%),
             linear-gradient(to top,   rgba(0,0,0,0.72) 0%, transparent 52%);
}
.wcard-thumb-grad {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,0.42) 0%, transparent 40%),
             linear-gradient(to top,   rgba(0,0,0,0.55) 0%, transparent 50%);
}

.wcard {
  min-width:256px; height:206px; border-radius:8px; overflow:hidden;
  position:relative; flex-shrink:0; cursor:pointer; background:var(--c-surface);
  transition:transform 0.15s; border:1px solid rgba(255,255,255,0.2);
}
.wcard.pressing { transform:scale(0.97); }
.wcard-thumb { width:100%; height:144px; position:relative; overflow:hidden; }
.wcard-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; }
.wcard-progress { position:absolute; top:144px; left:0; right:0; height:4px; background:var(--c-surface-variant); z-index:2; }
.wcard-progress-bar { height:100%; background:var(--c-primary); }
.wcard-info {
  position:absolute; bottom:0; left:0; right:0; top:148px; padding:8px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:4px;
}
.wcard-text { flex:1; min-width:0; }
.wcard-title { font-size:16px; font-weight:600; color:var(--c-on-surface); line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wcard-ep { font-size:12px; font-weight:400; color:var(--c-on-surface-variant); line-height:1.5; }
.wcard-menu { position:relative; flex-shrink:0; width:16px; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.wcard-menu::after { content:''; position:absolute; inset:-10px; }
.wcard-menu span { width:4px; height:4px; border-radius:50%; background:var(--c-on-surface); display:block; transition:background 0.12s, transform 0.12s; }
.wcard-menu:active span { background:var(--c-primary); transform:scale(1.3); }

.wcard-play { position:absolute; left:7px; top:87px; width:48px; height:48px; z-index:3; pointer-events:none; }

/* ══ TOP 10 CARD — "Most Popular" (Figma 14495:220969)
   Top 10 Card = Top 10 Digits (50×65, mr -10) + Vertical Card (111×167).
   El nº es un outline con gradiente (white .8→.05): se usa el SVG completo
   (canvas 278×303) escalado al footprint; el dígito cae abajo-izq solapando. */
.rail-top10 { align-items:flex-end; }
.top10-card { position:relative; flex-shrink:0; width:153px; height:167px; cursor:pointer; transition:transform 0.15s; }
.top10-card:active { transform:scale(0.96); }
.top10-poster { position:absolute; right:0; top:0; width:111px; height:167px; border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,0.2); z-index:2; }
.top10-poster img { width:100%; height:100%; object-fit:cover; display:block; }
/* El número va DETRÁS del póster (z-index:1): solo asoma la parte izquierda,
   el resto queda oculto tras el póster — igual que en Figma. */
.top10-num { position:absolute; left:0; bottom:0; width:153px; height:167px; z-index:1; pointer-events:none; }

/* ══ FEATURED / AVATAR — Cards Rail destacado (Figma 14495:221569, h=536)
   Hero (390×520) con fade a var(--c-background) + Action Section abajo:
   Logo (230w) + tagline (16px) + 3 cards (144×216). */
.section-avatar { position:relative; height:536px; overflow:hidden; }
.avatar-hero { position:absolute; top:0; left:0; right:0; height:520px; overflow:hidden; }
.avatar-hero img { width:100%; height:100%; object-fit:cover; object-position:center 28%; }
.avatar-hero::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(rgba(var(--c-background-rgb),0.30), rgba(var(--c-background-rgb),0.30)),
    linear-gradient(to bottom, transparent 0%, transparent 32%, rgba(var(--c-background-rgb),0.55) 56%, rgba(var(--c-background-rgb),0.92) 74%, var(--c-background) 86%);
}
.avatar-action { position:absolute; left:0; right:0; bottom:24px; display:flex; flex-direction:column; gap:12px; z-index:2; }
.avatar-logo { width:230px; height:auto; display:block; margin:0 16px; }
.avatar-tagline { font-size:16px; font-weight:400; line-height:1.5; color:var(--c-on-surface); margin:0 16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* El primer rail arranca justo donde acaba la banda de puntos: el relleno del
   wrap y el margen de la primera seccion sumaban 24px de mas. */
.sections-wrap { padding-top:0; }
.sections-wrap > .section:first-child { margin-top:0; }

/* ── Home loading skeleton — pantalla propia (#homeSkeleton.screen.hs-skel) ──
   Se superpone a la Home REAL (que va detrás, ya renderizada). Cada sección es una
   BANDA OPACA a ancho completo; al retirarse (arriba→abajo) revela el contenido real
   que ya está detrás = "reemplazo" en el sitio, sin fundir a negro y sin intro.
   Calca el frame Figma "Skeleton — Home". SIN tab bar. Respeta prefers-reduced-motion. */
.hs-skel { position:absolute; inset:0; z-index:150; background:transparent; overflow:hidden; padding:0; }
.hs-skel .sk, .hs-skel .sk-card,
.hs-skel .sk-hero-line, .hs-skel .sk-hero-cta { background:var(--c-skeleton); }
/* La barra de estado mide 59, no 47: con 47 la primera banda se metía doce
   píxeles por debajo del reloj y la batería, y quedaba un canto justo ahí. Es la
   misma altura con la que arranca el heroe de la Home, y por eso el reemplazo
   cae en su sitio. Las esquinas redondeadas tambien son las del heroe. */
.hs-skel-top { height:59px; background:var(--c-background); }
/* Cada sección = banda opaca full-width (pad izq 16 para el contenido, pad inf = separación).
   .sk-gone la vuelve invisible al instante (conserva el layout) → aparece la Home detrás. */
.hs-skel .sk-section { position:relative; background:var(--c-background); padding:0 0 22px 16px; opacity:1; transition:opacity 0.3s ease; }
.hs-skel .sk-section.sk-gone { opacity:0; }
/* Shimmer POR FORMA (no sobre toda la banda): en los rails el brillo va sólo dentro de
   las cards y del título; el hero/avatar brillan en su bloque. Al retirarse la sección,
   sus formas —y su shimmer— se van con ella. */
.hs-skel .sk-hero, .hs-skel .sk-avatar-hero,
.hs-skel .sk-card, .hs-skel .sk-title { overflow:hidden; }
.hs-skel .sk-avatar-hero, .hs-skel .sk-card, .hs-skel .sk-title { position:relative; }
.hs-skel .sk-hero::after,
.hs-skel .sk-avatar-hero::after,
.hs-skel .sk-card::after,
.hs-skel .sk-title::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.06) 50%, transparent 58%);
  background-size:220% 220%;
  animation:skShimmer 1.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hs-skel .sk-hero::after, .hs-skel .sk-avatar-hero::after,
  .hs-skel .sk-card::after, .hs-skel .sk-title::after { animation:none; }
}
@media (prefers-reduced-motion: reduce) { .hs-skel .sk-section { transition:none; } }

/* Cada sección real ENTRA en su sitio (sube + aparece) justo cuando su banda se retira,
   de forma escalonada arriba→abajo → el reemplazo se lee claramente como cascada. */
.hs-intro-el { opacity:0; transform:translateY(20px);
  transition:opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,0.61,0.36,1); }
.hs-intro-el.hs-intro-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .hs-intro-el { opacity:1 !important; transform:none !important; transition:none; }
}
/* Hero con texto: gradiente atenuado (full-bleed) + 2 líneas + botón */
/* Los dos degradados del esqueleto iban en gris fijo: sobre el azul de BritBox
   se veian del tema por defecto. Al token del esqueleto, como los bloques. */
.sk-hero { position:relative; height:500px; margin-left:-16px; background:linear-gradient(180deg,var(--c-skeleton) 0%,var(--c-background) 100%); }
.sk-hero-content { position:absolute; left:16px; right:16px; bottom:44px; display:flex; flex-direction:column; gap:10px; }
.sk-hero-line { height:12px; border-radius:6px; }
.sk-hero-line.l1 { width:92%; }
.sk-hero-line.l2 { width:92%; }
.sk-hero-cta { height:44px; width:100%; border-radius:8px; margin-top:8px; }
/* Título de rail: barra tipo pill */
.sk-title { height:24px; width:230px; border-radius:12px; margin-bottom:12px; }
/* Rail: sangría izq por el padding de la sección; sangra a la derecha hasta el borde */
.sk-rail  { display:flex; gap:12px; overflow:hidden; }
.sk-card  { flex:0 0 auto; border-radius:8px; }
.sk-card.poster { width:144px; height:216px; }
.sk-card.top10  { width:111px; height:167px; }
/* Sección Avatar (promo): hero grande atenuado (full-bleed) + posters debajo */
.sk-avatar-hero { height:220px; margin:0 0 12px -16px; background:linear-gradient(180deg,var(--c-skeleton) 0%,var(--c-background) 100%); }
/* barrido diagonal de luz (keyframes usados por el shimmer por-sección de arriba) */
@keyframes skShimmer { 0% { background-position:130% 0; } 100% { background-position:-30% 0; } }
.avatar-cards .vcard { min-width:144px; width:144px; height:216px; border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,0.2); flex-shrink:0; cursor:pointer; transition:transform 0.15s; box-shadow:0 10px 7.5px rgba(0,0,0,0.1), 0 4px 3px rgba(0,0,0,0.1); }
.avatar-cards .vcard:active { transform:scale(0.97); }
.avatar-cards .vcard img { width:100%; height:100%; object-fit:cover; display:block; }

.tab-bar-img { position:absolute; bottom:0; left:0; right:0; z-index:100; height:110px; display:block; }
.tab-bar-img img { width:393px; height:110px; display:block; }

/* ═══ PLAYER SCREENS ═══════════════════════════════════════ */
#vplayer { background:#000; }
#hplayer { background:#000; }

/* ── Spinner loader (vertical + horizontal) ─────────────── */
@keyframes spinnerRotate { to { transform:rotate(360deg); } }

.spinner-ring {
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  border:3px solid var(--c-spinner-track);
  border-top-color:var(--c-primary);
  animation:spinnerRotate 0.85s linear infinite;
}

/* Vertical player spinner */
.vp-spinner {
  position:absolute; inset:0; background:var(--c-background); z-index:20;
  display:flex; flex-direction:column;
  transition:opacity 0.25s ease;
}
.vp-spinner.hidden { opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity 0.25s ease, visibility 0s linear 0.25s; }
.vp-spinner-bar {
  position:absolute; top:59px; left:0; right:0; height:35px;
  display:flex; align-items:center; padding:0 24px; gap:12px; z-index:10;
}
.vp-spinner-center {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}

/* Horizontal player spinner */
.hp-spinner {
  position:absolute; inset:0; background:var(--c-background); z-index:20;
  display:flex; flex-direction:column;
  transition:opacity 0.25s ease;
}
/* Al ocultarse sale del todo, no solo a opacidad 0: asi no puede quedar una
   segunda capa de carga pintada por detras de la siguiente. visibility va con
   retardo para que el fundido se vea entero. */
.hp-spinner.hidden {
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity 0.25s ease, visibility 0s linear 0.25s;
}
.hp-spinner-bar {
  position:absolute; top:0; left:0; right:0; height:78px;
  display:flex; align-items:flex-end; padding:0 32px 14px; gap:0;
  background:linear-gradient(to bottom, rgba(var(--c-background-rgb),0.7) 0%, rgba(var(--c-background-rgb),0.15) 77%, transparent);
}
.hp-spinner-center {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}

/* Vertical player */
.vp-video-wrap {
  position:absolute; left:0; right:0;
  top:312px; height:221px;
}
.vp-video-wrap video {
  width:100%; height:100%; object-fit:contain; background:#000; display:block;
}
/* App bar — always visible, not part of auto-hide controls */
.vp-app-bar {
  position:absolute; top:59px; left:0; right:0; height:64px; z-index:10;
}
.vp-appbar-bg { display:block; width:390px; height:64px; }
.vp-appbar-text {
  position:absolute; top:0; left:64px; right:64px; height:64px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none;
}
.vp-top-title {
  font-size:16px; font-weight:600; color:var(--c-on-surface); line-height:1.5; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.vp-top-sub {
  font-size:16px; font-weight:400; color:var(--c-on-surface); line-height:1.5;
  display:flex; align-items:center; gap:8px;
}
.vp-top-dot {
  width:4px; height:4px; border-radius:50%; background:var(--c-on-surface); flex-shrink:0;
}
.vp-appbar-back {
  position:absolute; top:0; left:0; width:64px; height:64px;
  background:none; border:none; cursor:pointer; padding:0;
}
.vp-appbar-cast {
  position:absolute; top:0; right:0; width:64px; height:64px;
  background:none; border:none; cursor:pointer; padding:0;
}
/* Controls visibility */
.vp-controls { transition:opacity 0.3s ease; z-index:6; }
.vp-controls.hidden { opacity:0; pointer-events:none; }
/* Overlay dim */
.vp-overlay {
  position:absolute; inset:0; z-index:4;
  background:rgba(0,0,0,0.5);
  transition:opacity 0.3s ease; pointer-events:none;
}
.vp-overlay.hidden { opacity:0; }
/* Progress area */
.vp-progress-area {
  position:absolute; left:32px; right:32px; bottom:124px;
}
.vp-progress-track {
  height:4px; border-radius:9999px;
  background:rgba(255,255,255,0.2); position:relative; cursor:pointer;
}
.vp-progress-fill {
  position:absolute; left:0; top:0; bottom:0;
  background:var(--c-primary); border-radius:9999px; width:0%;
}
.vp-progress-handle {
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:18px; height:18px; border-radius:50%; background:var(--c-primary);
  left:0%; pointer-events:none;
}
.vp-time-row {
  display:flex; justify-content:space-between; margin-top:8px;
  font-size:16px; font-weight:400; color:var(--c-on-surface); line-height:1.5;
}
/* Bottom controls row — full-width 390×84 VControls.svg */
.vp-ctrls-row {
  position:absolute; left:0; right:0; bottom:44px; height:84px; z-index:6;
}
/* Invisible overlay buttons on top of VControls.svg */
.vp-ov-btn {
  position:absolute; top:0; bottom:0; background:none; border:none; cursor:pointer; padding:0;
}
.vp-ov-play { left:50%; transform:translateX(-50%); width:80px; }
.vp-ov-skip-back  { left:96px;  width:68px; }
.vp-ov-skip-fwd   { right:96px; width:68px; }
.vp-ov-cc         { left:46px;  width:46px; }

/* ══ SUBTITLES / CLOSED CAPTIONS MENU (portrait) ══ */
.vp-subs {
  position:absolute; inset:0; z-index:50; background:var(--c-background);
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transition:opacity 0.25s ease;
}
.vp-subs.open { opacity:1; pointer-events:auto; }
.vp-subs-top { display:flex; justify-content:flex-end; padding:72px 24px 16px; }
.vp-subs-close {
  width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; background:none; border:0; padding:0;
}
.vp-subs-close:active { opacity:0.65; }
.vp-subs-body { display:flex; flex-direction:column; gap:32px; padding:8px 24px 24px; }
.vp-subs-col { display:flex; flex-direction:column; gap:16px; }
.vp-subs-label { font-size:16px; font-weight:600; line-height:1.5; color:var(--c-on-surface-variant); }
.vp-subs-list { display:flex; flex-direction:column; }
.vp-subs-item { display:flex; gap:16px; align-items:center; padding:8px 0; cursor:pointer; }
.vp-subs-item .vp-subs-txt { flex:1; min-width:0; line-height:1.5; color:var(--c-on-surface); font-weight:400; }
.vp-subs-item.sel .vp-subs-txt { color:var(--c-primary); }
.vp-subs-item .vp-subs-check { width:20px; height:20px; flex-shrink:0; visibility:hidden; }
.vp-subs-item.sel .vp-subs-check { visibility:visible; }
.vp-subs-divider { height:1px; background:rgba(138,138,138,0.4); }

/* ══════════════════════════════════════════════
   OTP SIGN IN SCREENS
══════════════════════════════════════════════ */
#otprequest { background:var(--c-background); display:flex; flex-direction:column; overflow:hidden; }
#otpenter   { background:var(--c-background); display:flex; flex-direction:column; overflow:hidden; }

.otp-boxes {
  display:flex; gap:20px; justify-content:center; margin-bottom:24px;
}
.otp-box {
  width:42px; height:51px;
  background:var(--c-surface); border:1px solid var(--c-outline); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:600; color:var(--c-on-surface);
  cursor:pointer; flex-shrink:0;
  transition:border-color 0.15s;
  -webkit-tap-highlight-color:transparent;
  position:relative;
}
/* filled → white border */
.otp-box.has-digit  { border-color:var(--c-on-surface); }
/* all 4 filled → gold border on all */
.otp-box.complete   { border-color:var(--c-primary); }
/* active (next input pos) → white border — must come after .complete to override */
.otp-box.active     { border-color:var(--c-on-surface); }
/* when all filled AND last box still active → gold wins */
.otp-box.complete.active { border-color:var(--c-primary); }
/* error → red border, text stays white */
.otp-box.err        { border-color:var(--c-error) !important; color:var(--c-on-surface); }

/* blinking caret — only on empty active box */
.otp-box.active:not(.has-digit)::after {
  content:''; position:absolute;
  width:2px; height:26px;
  top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--c-on-surface); animation:caretBlink 1s step-end infinite;
}
@keyframes caretBlink { 0%,100%{opacity:1;} 50%{opacity:0;} }

.otp-err-banner {
  display:none; align-items:center; gap:10px;
  background:var(--c-error-container); border:1px solid var(--c-error);
  border-radius:8px; padding:12px 14px; margin-bottom:24px; flex-shrink:0;
}
.otp-err-banner.show { display:flex; animation:fslide 0.22s ease; }
.otp-err-banner-text { font-size:14px; font-weight:600; color:var(--c-error); line-height:1.5; }

.otp-resend-row {
  display:flex; align-items:center; justify-content:center; gap:20px;
  margin-bottom:32px; font-size:16px; flex-shrink:0;
}
.otp-resend-muted { color:var(--c-on-surface); }
.otp-resend-link  { color:var(--c-primary); font-weight:600; cursor:pointer; }
.otp-resend-link:active { opacity:0.6; }

.otp-email-shown { color:var(--c-on-surface-variant); }

/* ── iOS Numeric Pad ── */
.numpad-panel {
  position:absolute; bottom:0; left:0; right:0;
  background:#d0d3d9; padding:8px 4px 0;
  transform:translateY(100%);
  transition:transform 0.4s cubic-bezier(0.32,0.72,0,1);
  z-index:100;
}
.iphone.landscape .numpad-panel { display:none; }
.numpad-panel.visible { transform:translateY(0); }
.np-row {
  display:flex; gap:5px; margin-bottom:8px;
}
.np-row:last-child { margin-bottom:0; }
.np-key {
  flex:1; height:52px;
  background:#fff; border-radius:5px; box-shadow:0 1px 0 #898a8d;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; user-select:none;
  -webkit-tap-highlight-color:transparent; transition:background 0.05s;
}
.np-key span { font-size:22px; font-weight:400; color:#000; line-height:1; pointer-events:none; }
.np-key.active { background:#e5e5ea; }
.np-key-del {
  flex:1; height:52px;
  background:#adb5bd; border-radius:5px; box-shadow:0 1px 0 #898a8d;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none;
  -webkit-tap-highlight-color:transparent; transition:background 0.05s;
}
.np-key-del.active { background:#c8cdd3; }
.np-key-empty {
  flex:1; height:52px; background:#adb5bd; border-radius:5px; pointer-events:none;
}
.np-accessory {
  height:28px; display:flex; align-items:center; justify-content:center;
}
.np-accessory::after {
  content:''; width:128px; height:5px;
  background:rgba(255,255,255,0.5); border-radius:9999px;
}

/* ══════════════════════════════════════════════
   REGISTER SCREENS
══════════════════════════════════════════════ */
#register1, #register2 {
  background:var(--c-background); display:flex; flex-direction:column; overflow:hidden;
}
#register1.slide-enter, #register2.slide-enter { animation:slideIn 0.36s cubic-bezier(0.25,0.46,0.45,0.94) both; }
#register1.slide-leave, #register2.slide-leave { animation:slideOut 0.3s cubic-bezier(0.25,0.46,0.45,0.94) both; }

.reg-body {
  flex:1; overflow-y:auto; min-height:0;
  padding:0 24px 24px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column;
}
.reg-body::-webkit-scrollbar { display:none; }
.reg-body > * { flex-shrink:0; }

.reg-copy { margin-bottom:32px; padding-top:32px; }
.reg-title {
  font-size:24px; font-weight:600; color:var(--c-on-surface);
  text-align:center; margin-bottom:8px; line-height:1.2;
}
.reg-subtitle {
  font-size:16px; font-weight:400; color:var(--c-on-surface);
  text-align:center; line-height:1.5;
}

.promo-module {
  background:var(--c-surface); border-radius:8px;
  padding:16px 20px; margin-bottom:32px;
}
.promo-module-title {
  font-size:20px; font-weight:600; color:var(--c-on-surface); margin-bottom:4px; line-height:1.2;
}
.promo-module-desc {
  font-size:14px; font-weight:400; color:var(--c-on-surface-variant); line-height:1.5; margin-bottom:4px;
}
.promo-module-link {
  font-size:14px; font-weight:600; color:var(--c-primary); cursor:pointer;
}
.promo-module-link:active { opacity:0.7; }

.legal-text {
  font-size:12px; font-weight:400; color:var(--c-on-surface-variant); line-height:1.5;
  margin-bottom:32px;
}
.legal-text a { color:var(--c-primary); text-decoration:none; }

.pw-checklist {
  display:flex; flex-direction:column; gap:12px;
  padding:0 8px; margin-top:24px; margin-bottom:32px;
}
.pw-check-item {
  display:flex; align-items:center; gap:12px;
}
.pw-check-icon {
  width:20px; height:20px; flex-shrink:0;
  display:block;
}
.pw-check-text {
  font-size:14px; font-weight:400; color:var(--c-on-surface-variant); line-height:1.5;
}

/* Register buttons: always tappable for validation feedback */
#reg1ContinueBtn, #reg2CreateBtn { cursor:pointer; }
#reg1ContinueBtn:active, #reg2CreateBtn:active { transform:scale(0.97); }

/* reg-body inherits fp-body input style */
.reg-body .fgroup { margin-bottom:0; }
.reg-body .fgroup + .fgroup { margin-top:0; }
.reg-body .flabel { color:var(--c-on-surface); font-size:16px; }
.reg-body .finput {
  background:var(--c-surface); border:1px solid var(--c-outline);
  padding:0 16px; border-radius:8px; height:58px;
}
.reg-body .finput::placeholder { color:var(--c-on-surface-variant); }
.reg-body .finput.focused { border-color:var(--c-on-surface); }

.reg-card {
  background:transparent; border-radius:0;
  padding:0; margin-bottom:0;
  display:flex; flex-direction:column; flex-shrink:0;
}

/* ══════════════════════════════════════════════
   CONTINUE WATCHING — ACTION SHEET
══════════════════════════════════════════════ */
#cwActionSheet, #dlActionSheet, #signOutSheet {
  position:absolute; inset:0; z-index:310;
  pointer-events:none;
}
#cwActionSheet.visible, #dlActionSheet.visible, #signOutSheet.visible { pointer-events:all; }

.cw-overlay {
  position:absolute; inset:0;
  background:rgba(var(--c-background-rgb),0.5);
  opacity:0; transition:opacity 0.3s ease;
}
#cwActionSheet.visible .cw-overlay, #dlActionSheet.visible .cw-overlay,
#signOutSheet.visible .cw-overlay { opacity:1; }

.cw-sheet {
  position:absolute; bottom:0; left:0; right:0;
  background:var(--c-surface);
  border-radius:8px 8px 0 0;
  padding:8px 20px 0;
  transform:translateY(100%);
  transition:transform 0.3s ease;
}
#cwActionSheet.visible .cw-sheet, #dlActionSheet.visible .cw-sheet,
#signOutSheet.visible .cw-sheet { transform:translateY(0); }

.cw-drag-handle {
  width:40px; height:4px;
  background:rgba(189,189,189,0.5);
  border-radius:9999px;
  margin:0 auto 20px;
}

.cw-sheet-title {
  font-size:24px; font-weight:600; color:var(--c-on-surface); line-height:1.2;
  margin-bottom:32px;
}

.cw-action-row {
  display:flex; align-items:center; gap:16px;
  padding:0 0 24px; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.cw-action-row:active { opacity:0.6; }

.cw-action-icon {
  width:20px; height:20px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.cw-action-icon svg { width:20px; height:20px; }

.cw-action-label {
  font-size:16px; font-weight:400; color:var(--c-on-surface); line-height:1.5;
}

.cw-sheet-pill {
  height:32px;
  display:flex; align-items:center; justify-content:center;
}
.cw-sheet-pill::after {
  content:''; width:128px; height:6px;
  background:rgba(255,255,255,0.5); border-radius:9999px;
}

/* ══════════════════════════════════════════════
   CONTINUE WATCHING — CONFIRM ALERT
   Usa el componente .ndlg (diálogo nativo, Figma 25862:822305).
══════════════════════════════════════════════ */

/* Remove animation */
@keyframes wcardSlideOut {
  0%   { transform:translateX(0); opacity:1; }
  100% { transform:translateX(-120%); opacity:0; }
}
@keyframes wcardCollapse {
  0%   { min-width:248px; opacity:0; margin-right:12px; }
  100% { min-width:0px;   opacity:0; margin-right:0; }
}
.wcard.removing { animation:wcardSlideOut 0.3s ease forwards; }
.wcard.collapsing {
  overflow:hidden; pointer-events:none;
  animation:wcardCollapse 0.25s ease forwards;
}

/* Horizontal player — 852×393 rotated -90deg inside 393×852 */
#hplayer { background:#000; }
#hplayer.active { z-index:300; }
.hp-dim {
  position:absolute; inset:0; z-index:4;
  background:rgba(var(--c-background-rgb),0.5);
  transition:opacity 0.3s ease; pointer-events:none;
}
.hp-dim.hidden { opacity:0; }
.hp-controls { transition:opacity 0.3s ease; }
.hp-controls.hidden { opacity:0; pointer-events:none; }
.hp-inner {
  position:absolute; width:852px; height:393px;
  left:50%; top:50%;
  transform:translate(-50%,-50%) rotate(-90deg);
  overflow:hidden; background:#000;
}
.hp-inner video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; background:#000; display:block;
}
/* ── Top bar ── */
.hp-top-bar {
  position:absolute; top:0; left:0; right:0; height:72px; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 32px;
  background:linear-gradient(to bottom, rgba(var(--c-background-rgb),0.7) 0%, rgba(var(--c-background-rgb),0.15) 77%, transparent);
}
.hp-back-btn {
  width:24px; height:24px; background:none; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; padding:0;
}
/* Centrado respecto a la PANTALLA, no al hueco que dejan los iconos: a la derecha hay
   3 iconos (120px con sus gaps) y a la izquierda solo el back (24px), así que dentro
   del `space-between` el bloque caía descentrado. Fuera del flujo y centrado de verdad
   (en Figma el `Icons Container - Right` mide 24px justo para lograr esto). */
.hp-title-wrap {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; width:204px;
}
.hp-title-main {
  font-size:16px; font-weight:600; color:var(--c-on-surface); line-height:1.5;
  text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.hp-title-sub {
  font-size:16px; font-weight:400; color:var(--c-on-surface); line-height:1.5;
  display:flex; align-items:center; gap:8px;
}
.hp-title-dot {
  width:4px; height:4px; border-radius:50%; background:var(--c-on-surface); flex-shrink:0;
}
.hp-top-icons {
  display:flex; align-items:center; gap:24px;
}
.hp-icon-btn {
  width:24px; height:24px; background:none; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; padding:0;
}
/* ── Center controls ── */
.hp-center-group {
  position:absolute; z-index:10;
  left:50%; top:50%;
  transform:translate(-50%, -50%);
  display:flex; align-items:center; gap:64px;
  transition:opacity 0.18s ease;
}
/* Arrastrando el scrubber el card del thumbnail ocupa exactamente este hueco: en el
   frame de Figma (13887:86841) los controles centrales no están, así que se van. */
#hplayer.scrubbing .hp-center-group { opacity:0; pointer-events:none; }
.hp-play-btn {
  flex-shrink:0; width:48px; height:48px;
  background:none; border:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.hp-skip-btn {
  flex-shrink:0; width:32px; height:32px;
  background:none; border:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
/* ── Bottom bar ── */
.hp-bottom-bar {
  position:absolute; bottom:0; left:0; right:0; z-index:10;
  display:flex; flex-direction:column; gap:20px;
  padding:16px 32px 24px;
  background:linear-gradient(to top, rgba(var(--c-background-rgb),0.8) 0%, transparent 100%);
}
.hp-slider-row {
  display:flex; align-items:center; gap:12px;
}
.hp-slider-time {
  font-size:16px; font-weight:400; color:var(--c-on-surface); line-height:1.5;
  white-space:nowrap; flex-shrink:0;
}
.hp-slider-track {
  flex:1; height:4px; border-radius:9999px;
  background:rgba(255,255,255,0.2); position:relative; cursor:pointer;
  touch-action:none;   /* el arrastre es nuestro, no un scroll del navegador */
}
/* La barra mide 4px: sin esto es imposible agarrarla. Zona de toque de 32px de alto. */
.hp-slider-track::before {
  content:''; position:absolute; left:-9px; right:-9px; top:-14px; bottom:-14px;
}
.hp-slider-fill {
  position:absolute; left:0; top:0; bottom:0;
  background:var(--c-primary); border-radius:9999px; width:0%;
}
.hp-slider-handle {
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:18px; height:18px; border-radius:50%; background:var(--c-primary);
  left:0%; pointer-events:none;
}

/* ── Thumbnail del scrubber (Figma 13887:86841 "Player — Controls (Thumbnail)") ──
   El card va centrado sobre el handle. `bottom:calc(50% + 25px)`: 50% del track (4px)
   es su centro, +25px deja los 16px de gap del Figma sobre el handle de 18px (9+16). */
.hp-thumb {
  position:absolute; left:0; bottom:calc(50% + 25px);
  width:180px; padding:4px; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--c-surface); border-radius:12px;
  transform:translateX(-50%) translateY(6px) scale(0.94);
  transform-origin:50% 100%;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.18s ease,
             transform 0.22s cubic-bezier(0.2,0.8,0.3,1),
             visibility 0.18s;
}
.hp-slider-track.scrubbing .hp-thumb {
  opacity:1; visibility:visible;
  transform:translateX(-50%) translateY(0) scale(1);
}
.hp-thumb-img {
  width:172px; height:95px; flex-shrink:0; position:relative;
  border-radius:8px; overflow:hidden; background:var(--c-background);
}
.hp-thumb-img img,
.hp-thumb-img canvas {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
/* El canvas pinta el frame real del vídeo; hasta que hay frame se ve el póster de debajo. */
.hp-thumb-img canvas { opacity:0; transition:opacity 0.15s ease; }
.hp-thumb-time {
  font-size:16px; font-weight:600; color:var(--c-on-surface); line-height:1.5;
  text-align:center; white-space:nowrap;
}
/* Vídeo oculto que alimenta el canvas: fuera de vista pero decodificando. */
.hp-thumb-src {
  position:absolute; left:0; top:0; width:2px; height:2px;
  opacity:0; pointer-events:none; z-index:-1;
}
.hp-ctrls-row {
  display:flex; align-items:center; justify-content:space-between;
}
/* El Info Tab va SIEMPRE en surface-variant var(--c-surface-variant), no solo abierto: así está en los dos
   frames del Figma (cerrado 13887:86846 y abierto 13887:86955). Antes cerrado usaba
   white@20 y se veía translúcido sobre el vídeo. */
.hp-info-pill {
  background:var(--c-surface-variant); padding:4px 16px; border-radius:8px;
  font-size:14px; font-weight:400; color:var(--c-on-surface); line-height:1.5;
  border:none; font-family:'Inter',sans-serif; cursor:pointer;
}

/* Panel de info (Figma 13887:86950). Sustituye a los controles de reproducción: el
   bottom bar pasa a 231,2px y desaparecen slider, play central y volumen/subtítulos. */
.hp-info-panel { display:none; align-items:center; gap:8px; width:506px; }
#hplayer.info-open .hp-info-panel { display:flex; }
#hplayer.info-open .hp-slider-row,
#hplayer.info-open .hp-ctrls-icons,
#hplayer.info-open .hp-center-group { display:none; }

.hp-info-card {
  width:252px; height:142.22px; flex-shrink:0; overflow:hidden;
  border-radius:8.1px; background:var(--c-surface);
  box-shadow:inset 0 0 0 1.012px rgba(255,255,255,0.2);
}
.hp-info-card img { width:100%; height:100%; object-fit:cover; display:block; }
.hp-info-meta  { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.hp-info-block { display:flex; flex-direction:column; gap:8px; }
.hp-info-titles{ display:flex; flex-direction:column; }
.hp-info-show  { font-size:14px; font-weight:600; color:var(--c-on-surface); line-height:1.5; }
.hp-info-ep    { font-size:14px; font-weight:400; color:var(--c-on-surface); line-height:1.5; }
.hp-info-tags  { display:flex; align-items:center; gap:8px; }
.hp-info-synopsis { font-size:12px; font-weight:400; color:var(--c-on-surface); line-height:1.5; }
/* Tap target over the subtitles/CC icon inside Controls.svg (192px wide) */
/* Fila de controles de la derecha: volumen · subtítulos · siguiente, gap 24 (Figma). */
.hp-ctrls-icons { display:flex; align-items:center; gap:24px; }
.hp-ctrl-btn {
  width:24px; height:24px; background:none; border:0; padding:0;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; -webkit-tap-highlight-color:transparent;
}
.hp-ctrl-static { display:block; flex-shrink:0; }   /* icono sin acción asociada */

/* ══ SUBTITLES / CLOSED CAPTIONS MENU (landscape) ══ */
.hp-subs {
  position:absolute; inset:0; z-index:20; background:var(--c-background);
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transition:opacity 0.25s ease;
}
.hp-subs.open { opacity:1; pointer-events:auto; }
.hp-subs-top { display:flex; justify-content:flex-end; padding:24px 32px 16px; }
.hp-subs-close {
  width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; background:none; border:0; padding:0;
}
.hp-subs-close:active { opacity:0.65; }
.hp-subs-body { display:flex; justify-content:center; padding:0 32px 24px; }
.hp-subs-col { width:300px; padding:0 32px; display:flex; flex-direction:column; gap:16px; }
.hp-subs-label { font-size:16px; font-weight:600; line-height:1.5; color:var(--c-on-surface-variant); }
.hp-subs-list { display:flex; flex-direction:column; }
.hp-subs-item { display:flex; gap:16px; align-items:center; padding:8px 0; cursor:pointer; }
.hp-subs-item .hp-subs-txt { flex:1; min-width:0; line-height:1.5; color:var(--c-on-surface); font-weight:400; }
.hp-subs-item.sel .hp-subs-txt { color:var(--c-primary); }
.hp-subs-item .hp-subs-check { width:20px; height:20px; flex-shrink:0; visibility:hidden; }
.hp-subs-item.sel .hp-subs-check { visibility:visible; }
.hp-subs-divider { height:1px; background:rgba(138,138,138,0.4); }

/* ══ CHROMECAST — CAST TO (action sheet, landscape) ══ */
/* Subtítulo sobre el vídeo (Figma "Subtitles Displayed": overlay rgba(var(--c-background-rgb),0.5),
   radius xs 4px, texto body/l 16px semibold on-surface, centrado). Independiente de
   los controles → se mantiene visible al pausar / mostrar-ocultar controles. */
.hp-subtitle {
  position:absolute; left:50%; bottom:116px; transform:translateX(-50%);
  max-width:370px; box-sizing:border-box;
  background:rgba(var(--c-background-rgb),0.5); border-radius:4px;
  padding:4px 8px; z-index:9; pointer-events:none;
  font-family:'Inter',sans-serif; font-size:16px; font-weight:600; line-height:1.5;
  color:var(--c-on-surface); text-align:center;
  display:none;
}
#hplayer.subs-on .hp-subtitle { display:block; }
/* Sin barra de controles los subtítulos estorban arriba: bajan a su sitio */
.hp-subtitle { transition:bottom 0.3s ease; }
#hplayer.ctrls-off .hp-subtitle { bottom:40px; }

/* Casting banner (estado conectado horizontal) — bajo el top bar, centrado */
.hp-cast-banner {
  position:absolute; top:72px; left:0; right:0; z-index:11;
  display:none; align-items:center; justify-content:center; gap:8px;
  pointer-events:none;
}
.hp-cast-banner span { font-size:14px; font-weight:400; line-height:1.5; color:var(--c-on-surface); }
.hp-cast-banner img { display:block; }
#hplayer.casting .hp-cast-banner { display:flex; }

/* Hoja "Stop Casting" horizontal (desconectar desde el player) */
.hp-cast-stop {
  position:absolute; inset:0; z-index:23;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(var(--c-background-rgb),0.5);
  opacity:0; pointer-events:none; transition:opacity 0.25s ease;
}
.hp-cast-stop.open { opacity:1; pointer-events:auto; }
.hp-cast-stop-sheet {
  width:580px; background:var(--c-surface); border-radius:8px 8px 0 0;
  padding:8px 20px 20px; display:flex; flex-direction:column; align-items:center; gap:16px;
  transform:translateY(100%); transition:transform 0.3s cubic-bezier(0.32,0.72,0,1);
}
.hp-cast-stop.open .hp-cast-stop-sheet { transform:translateY(0); }
.hp-cast-stop-row { display:flex; align-items:center; gap:12px; }
.hp-cast-stop-row img { display:block; }
.hp-cast-stop-row span { font-size:16px; font-weight:400; color:var(--c-on-surface); }

.hp-cast {
  position:absolute; inset:0; z-index:22;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(var(--c-background-rgb),0.5);
  opacity:0; pointer-events:none; transition:opacity 0.25s ease;
}
.hp-cast.open { opacity:1; pointer-events:auto; }
.hp-cast-sheet {
  width:580px; background:var(--c-surface); border-radius:8px 8px 0 0;
  padding:8px 20px 0; display:flex; flex-direction:column; align-items:center; overflow:hidden;
  transform:translateY(100%); transition:transform 0.3s cubic-bezier(0.32,0.72,0,1);
}
.hp-cast.open .hp-cast-sheet { transform:translateY(0); }
.hp-cast-handle { display:flex; justify-content:center; width:100%; padding-bottom:20px; }
.hp-cast-handle span { width:40px; height:4px; border-radius:9999px; background:rgba(255,255,255,0.2); }
.hp-cast-title { width:100%; font-size:24px; font-weight:600; line-height:1.2; color:var(--c-on-surface); padding-bottom:32px; }
.hp-cast-list { width:100%; display:flex; flex-direction:column; gap:24px; padding-bottom:24px; }
.hp-cast-item {
  display:flex; gap:16px; align-items:center; width:100%;
  background:none; border:0; padding:0; cursor:pointer; font-family:'Inter',sans-serif; text-align:left;
}
.hp-cast-item:active { opacity:0.6; }
.hp-cast-item img { width:20px; height:20px; display:block; flex-shrink:0; }
.hp-cast-item span { font-size:16px; font-weight:400; line-height:1.5; color:var(--c-on-surface); }

/* ── Chromecast: estados de error dentro del reproductor ──
   "No devices found" (25862:821956) sustituye la lista; el pie de ayuda sólo se ve en
   ese estado, igual que en el diseño. */
.hp-cast-empty { display:none; width:100%; align-items:center; justify-content:center; gap:16px;
  padding:8px 0 28px; font-family:'Inter',sans-serif; font-size:16px; color:var(--c-on-surface); }
.hp-cast-bang { width:22px; height:22px; border-radius:50%; background:var(--c-on-surface); color:var(--c-background);
  font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hp-cast-foot { display:none; width:100%; align-items:center; justify-content:center; gap:12px;
  border-top:1px solid rgba(255,255,255,0.15); padding:22px 0 26px;
  font-family:'Inter',sans-serif; font-size:16px; color:var(--c-on-surface); }
.hp-cast-help { background:none; border:none; padding:0; cursor:pointer;
  color:var(--c-primary); font-family:'Inter',sans-serif; font-size:16px; font-weight:600; }
.hp-cast.no-devices .hp-cast-list { display:none; }
.hp-cast.no-devices .hp-cast-empty,
.hp-cast.no-devices .hp-cast-foot { display:flex; }
/* Reconectando (25862:821975) */
/* Velo propio: al ocultar los controles desaparece también .hp-dim, y sobre un
   fotograma claro el mensaje en blanco no se leía. */
.hp-reconnect { position:absolute; inset:0; z-index:40; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:22px;
  background:rgba(0,0,0,0.4); }
.hp-reconnect.show { display:flex; }
.hp-rc-ring { width:44px; height:44px; border-radius:50%; border:4px solid rgba(255,255,255,0.35);
  border-top-color:var(--c-primary); animation:af-spin .9s linear infinite; }
.hp-rc-msg { color:#fff; font-family:'Inter',sans-serif; font-size:17px; }
/* Reconectando: sólo queda la flecha atrás; el resto de controles desaparece */
#hplayer.rc-on .hp-controls { opacity:0 !important; pointer-events:none !important; }
#hplayer.rc-on .hp-top-bar { opacity:1 !important; }
#hplayer.rc-on .hp-top-bar .hp-back-btn { pointer-events:auto !important; }
#hplayer.rc-on .hp-title-wrap, #hplayer.rc-on .hp-top-icons { visibility:hidden; }
/* Errores de reproducción (25862:821723 / 821716 / 821709 / 821737): página en negro
   dentro del reproductor. Sin icono; sólo título, copy, meta opcional y dos botones. */
.hp-err { position:absolute; inset:0; z-index:46; display:none;
  flex-direction:column; align-items:center; justify-content:center; padding:0 24px; background:var(--c-background); }
.hp-err.show { display:flex; }
.hp-err-title { color:#fff; font-family:'Inter',sans-serif; font-size:20px; font-weight:600; }
.hp-err-copy { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:16px; line-height:1.5;
  text-align:center; max-width:520px; margin:10px 0 0; }
.hp-err-meta { color:var(--c-outline); font-family:'Inter',sans-serif; font-size:13px;
  letter-spacing:.04em; margin-top:8px; }
.hp-err-meta:empty { display:none; }
.hp-err-primary, .hp-err-secondary { width:342px; height:40px; border-radius:6px; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:15px; font-weight:600; }
.hp-err-primary { border:none; background:var(--c-primary); color:var(--c-background); margin-top:26px; }
.hp-err-secondary { background:none; border:1px solid var(--c-outline); color:#fff; margin-top:20px; }
.hp-err-secondary:empty { display:none; }
/* ─── Autoplay: tarjeta "Up Next" (25862:821801) y carga del siguiente (821806) ───
   La tarjeta va abajo a la derecha sobre el vídeo; la cuenta atrás la lleva el aro. */
.hp-upnext { position:absolute; right:22px; bottom:24px; z-index:44; width:396px;
  background:var(--c-surface); border-radius:12px; padding:16px; display:none; }
.hp-upnext.show { display:block; }
.hp-un-head { display:flex; align-items:center; justify-content:space-between; }
.hp-un-label { color:#fff; font-family:'Inter',sans-serif; font-size:17px; font-weight:600; }
.hp-un-close { background:none; border:none; padding:0; cursor:pointer; display:flex; }
.hp-un-row { display:flex; gap:20px; margin-top:14px; }
.hp-un-thumb { position:relative; width:152px; height:86px; border-radius:6px; overflow:hidden; flex-shrink:0; }
.hp-un-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.hp-un-ring { position:absolute; top:50%; left:50%; width:48px; height:48px; transform:translate(-50%,-50%); }
.hp-un-num { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:#fff; font-family:'Inter',sans-serif; font-size:17px; font-weight:600; }
.hp-un-meta { flex:1; min-width:0; }
.hp-un-show { color:#fff; font-family:'Inter',sans-serif; font-size:16px; font-weight:600; }
.hp-un-ep { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:14px; margin-top:4px; }
.hp-un-play { display:flex; align-items:center; gap:10px; margin-top:22px;
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--c-primary); font-family:'Inter',sans-serif; font-size:15px; font-weight:600; }
/* Carga del siguiente episodio: sobre el vídeo, sólo spinner + título */
.hp-nextload { position:absolute; inset:0; z-index:45; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:rgba(0,0,0,0.35); }
.hp-nextload.show { display:flex; }
.hp-nl-ring { width:28px; height:28px; border-radius:50%; border:3px solid rgba(255,255,255,0.3);
  border-top-color:var(--c-primary); animation:af-spin .9s linear infinite; }
.hp-nl-title { color:#fff; font-family:'Inter',sans-serif; font-size:17px; font-weight:600; }
.hp-nl-sub { color:#fff; font-family:'Inter',sans-serif; font-size:17px; }
#hplayer.nextload-on .hp-controls { opacity:0 !important; pointer-events:none !important; }
#hplayer.nextload-on .hp-top-bar { opacity:1 !important; }
#hplayer.nextload-on .hp-title-wrap, #hplayer.nextload-on .hp-top-icons { visibility:hidden; }

/* Mientras se muestra el aviso el lienzo está en negro y sin controles: el vídeo
   entra después, para que aviso y contenido no se solapen. */
#hplayer.warn-intro #hpVideo { visibility:hidden; }
#hplayer.warn-intro .hp-inner { background:#000; }
#hplayer.warn-intro .hp-controls { opacity:0 !important; pointer-events:none !important; }
#hplayer.warn-intro .hp-spinner { opacity:0 !important; }   /* el aviso va solo, sin loader */
/* Aviso de contenido (25862:821786): arriba a la izquierda, sin velo ni botones */
.hp-warn { position:absolute; top:28px; left:32px; z-index:44; display:none;
  opacity:0; transition:opacity .4s ease; }
.hp-warn.show { display:block; opacity:1; }
.hp-warn-badge { display:flex; flex-direction:column; line-height:.92;
  color:#fff; font-family:'Inter',sans-serif; font-size:26px; font-weight:800; letter-spacing:.02em; }
.hp-warn-copy { color:#fff; font-family:'Inter',sans-serif; font-size:15px; line-height:1.4;
  max-width:300px; margin:18px 0 0; }

/* Falta permiso de red local (25862:821987): página completa en negro */
.hp-casterr { position:absolute; inset:0; z-index:45; display:none;
  flex-direction:column; align-items:center; justify-content:center; padding:0 24px; background:var(--c-background); }
.hp-casterr.show { display:flex; }
.hp-ce-title { color:#fff; font-family:'Inter',sans-serif; font-size:20px; font-weight:700;
  text-align:center; margin-bottom:10px; }
.hp-ce-copy { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:16px; line-height:1.5;
  text-align:center; max-width:500px; margin:0 0 28px; }
.hp-ce-ok, .hp-ce-back { width:342px; height:40px; border-radius:6px; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:15px; font-weight:600; }
.hp-ce-ok { border:none; background:var(--c-primary); color:var(--c-background); margin-bottom:20px; }
.hp-ce-back { background:none; border:1px solid var(--c-outline); color:var(--c-on-surface); }

/* Chromecast — hoja "Cast to" (selector de dispositivo), overlay global vertical */
.cast-sheet {
  position:absolute; inset:0; z-index:210;
  display:flex; align-items:flex-end; justify-content:center;
  pointer-events:none;
}
/* Backdrop separado: hace fade por su cuenta, sin afectar al panel */
.cast-sheet::before {
  content:""; position:absolute; inset:0;
  background:rgba(var(--c-background-rgb),0.5);
  opacity:0; transition:opacity 0.32s ease;
}
.cast-sheet.open { pointer-events:auto; }
.cast-sheet.open::before { opacity:1; }
/* Panel desliza a opacidad COMPLETA (no se desvanece) → transición más fluida */
.cast-sheet-panel {
  position:relative; width:100%; background:var(--c-surface); border-radius:20px 20px 0 0;
  padding:8px 16px 34px; display:flex; flex-direction:column; align-items:flex-start;
  transform:translateY(100%); transition:transform 0.36s cubic-bezier(0.32,0.72,0,1);
  will-change:transform;
}
.cast-sheet.open .cast-sheet-panel { transform:translateY(0); }
.cast-sheet-handle { display:flex; justify-content:center; width:100%; padding-bottom:20px; }
.cast-sheet-handle span { width:40px; height:4px; border-radius:9999px; background:rgba(255,255,255,0.2); }
.cast-sheet-title { font-size:24px; font-weight:600; line-height:1.2; color:var(--c-on-surface); padding-bottom:32px; }
.cast-sheet-list { width:100%; display:flex; flex-direction:column; gap:24px; padding-bottom:24px; }
.cast-sheet-item {
  display:flex; gap:16px; align-items:center; width:100%;
  background:none; border:0; padding:0; cursor:pointer; font-family:'Inter',sans-serif; text-align:left;
}
.cast-sheet-item:active { opacity:0.6; }
.cast-sheet-item img { width:20px; height:20px; display:block; flex-shrink:0; }
.cast-sheet-item span { font-size:16px; font-weight:400; line-height:1.5; color:var(--c-on-surface); }

/* ══════════════════════════════════════════════
   CHROMECAST — CASTING STATE (vertical player)
══════════════════════════════════════════════ */
#castingscreen { background:var(--c-background); display:flex; flex-direction:column; padding-top:59px; padding-bottom:34px; }
.cs-top-bar {
  flex-shrink:0; display:flex; align-items:flex-start; justify-content:space-between;
  padding:12px 16px;
  background:linear-gradient(to bottom, rgba(var(--c-background-rgb),0.7) 0%, rgba(var(--c-background-rgb),0.15) 77%, transparent);
}
.cs-icbtn { background:none; border:0; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cs-icbtn:active { opacity:0.65; }
.cs-title { width:204px; display:flex; flex-direction:column; align-items:center; }
.cs-title-main { font-size:16px; font-weight:600; line-height:1.5; color:var(--c-on-surface); text-align:center; white-space:nowrap; }
.cs-title-sub { display:flex; gap:8px; align-items:center; font-size:16px; font-weight:400; line-height:1.5; color:var(--c-on-surface); }
.cs-dot { width:4px; height:4px; border-radius:50%; background:var(--c-on-surface); flex-shrink:0; }
.cs-main { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:0; }
.cs-preview { flex:1; width:100%; display:flex; align-items:center; justify-content:center; padding:40px 16px; min-height:0; }
/* El arte va a esquina viva, como en el diseño (25862:822019) */
.cs-preview img { width:100%; aspect-ratio:390/219.16; object-fit:cover; display:block; background:#000; }
.cs-bottom { flex-shrink:0; width:100%; padding:16px 16px 24px; display:flex; flex-direction:column; align-items:center; }
.cs-slider { width:100%; padding-bottom:24px; display:flex; flex-direction:column; gap:12px; }
.cs-track { width:100%; height:4px; border-radius:9999px; background:rgba(255,255,255,0.2); position:relative; }
.cs-fill { position:absolute; left:0; top:0; bottom:0; width:38%; background:var(--c-primary); border-radius:9999px; }
.cs-handle { position:absolute; top:50%; left:38%; transform:translate(-50%,-50%); width:18px; height:18px; border-radius:50%; background:var(--c-primary); }
.cs-times { display:flex; justify-content:space-between; font-size:16px; font-weight:400; color:var(--c-on-surface); }
.cs-controls { display:flex; align-items:center; justify-content:center; }
.cs-playgroup { display:flex; align-items:center; gap:40px; padding:16px 32px; }
.cs-banner { display:flex; align-items:center; gap:16px; background:none; border:0; padding:0; cursor:pointer; font-family:'Inter',sans-serif; }
.cs-banner:active { opacity:0.65; }
.cs-banner span { font-size:16px; font-weight:400; line-height:1.5; color:var(--c-on-surface); }
/* Stop Casting sheet */
/* ─── Casting: hojas de volumen y subtítulos (Figma 25862:822026 / 822034) ───
   Mismo patrón que .cs-stop: overlay a pantalla completa con el panel abajo. */
.cs-sheet {
  position:absolute; inset:0; z-index:32;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(var(--c-background-rgb),0.5);
  opacity:0; pointer-events:none; transition:opacity 0.25s ease;
}
.cs-sheet.open { opacity:1; pointer-events:auto; }
.cs-sheet-panel {
  width:100%; background:var(--c-surface); border-radius:14px 14px 0 0;
  display:flex; flex-direction:column;
}
.cs-grabber { width:36px; height:4px; border-radius:2px; background:#5a5a5a; align-self:center; margin:9px 0 0; }
/* Volumen (Figma 25862:822033): cabecera centrada a 26px del grabber, pista a 26 más */
.cs-vol-panel { padding:0 16px 40px; }
.cs-sheet-head { display:flex; align-items:center; gap:12px; justify-content:center;
  color:#fff; font-family:'Inter',sans-serif; font-size:16px; margin-top:26px; }
.cs-vol-row { display:flex; align-items:center; gap:12px; margin-top:26px; padding:0 6px; }
.cs-vol-track { flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,0.3);
  position:relative; cursor:pointer; }
.cs-vol-fill { position:absolute; left:0; top:0; bottom:0; width:17%; background:#fff; border-radius:2px; }
.cs-vol-knob { position:absolute; top:50%; left:17%; width:11px; height:11px; border-radius:50%;
  background:#fff; transform:translate(-50%,-50%); }
/* Subtítulos (Figma 25862:822041): caja de contenido de 44px a cada lado, texto +12 */
.cs-subs-panel { padding:0 44px 56px; }
.cs-subs-label { color:var(--c-outline); font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
  letter-spacing:.06em; margin:22px 0 4px; }
.cs-subs-list + .cs-subs-label { margin-top:26px; }
.cs-subs-row { display:flex; align-items:center; gap:12px; height:40px; padding-left:12px;
  border-bottom:1px solid rgba(255,255,255,0.15); cursor:pointer; }
.cs-subs-list:last-of-type .cs-subs-row:last-child { border-bottom:none; }
.cs-subs-txt { flex:1; min-width:0; color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:16px; line-height:1.3; }
.cs-subs-row.sel .cs-subs-txt { color:var(--c-primary); }
.cs-subs-check { width:18px; height:18px; flex-shrink:0; visibility:hidden; }
.cs-subs-row.sel .cs-subs-check { visibility:visible; }

/* ─── Mini-controlador de Chromecast (Figma 25862:822006) ───
   Vive en .iphone, no en una pantalla: sigue visible al salir del reproductor. */
/* Medidas reales del componente (25862:822015): la barra es 390×**90** — los 122 del
   frame incluyen 32 de home indicator, que aquí ya lo pinta el teléfono. Padding 12,
   miniatura 117×66, gap 8, y a su lado una columna de 241 con título (24), subtítulo
   (21) y el enlace (21): los tres DENTRO de la misma fila, que es lo que suma 66.
   El tamaño NO cambia nunca — sólo cambia el `bottom` según haya tab bar o no. Antes
   el padding se retocaba por pantalla y el componente se deformaba. */
#castMini {
  position:absolute; left:0; right:0; bottom:0; z-index:300; box-sizing:border-box;
  display:none; padding:12px 12px 44px; background:var(--c-surface);
}
#castMini.show { display:block; }
/* Con el teclado arriba el mini se colocaba EN MEDIO de las teclas: z-index 300
   contra 100, así que lo tapaba. Sube por encima del panel que esté abierto.
   El alto se toma del propio panel para no fijar un número que luego mienta. */
.iphone:has(.kbd-panel.visible) #castMini,
.iphone:has(.numpad-panel.visible) #castMini {
  bottom:var(--kbd-h, 278px); padding-bottom:12px;
}
/* La tab bar mide 110: el mini DESCANSA encima, sin taparla ni quedar recortado.
   Ahí no hay home indicator que cubrir, así que el padding vuelve a 12. */
#castMini.above-tabs { bottom:110px; padding-bottom:12px; }
/* Con el mini puesto, los listados le reservan su alto (66 + 12 + 12 = 90). Sin
   esto el mini se queda encima del contenido y, en la Home, parte justo por la
   mitad el titulo del primer rail: la pagina parece a medio pintar aunque este
   entera. Las medidas de abajo son las de cada contenedor mas esos 90. */
/* La Home acorta el area visible en vez de rellenar por abajo: el relleno solo
   se nota al final del scroll, y el problema estaba en el estado de reposo —
   con el heroe a pantalla casi completa, el titulo del primer rail asoma justo
   por donde se apoya el mini. 110 de tab bar + 90 de mini. */
.iphone:has(#castMini.show) .home-scroll { bottom:200px; }
.iphone:has(#castMini.show) .ml-main-scroll,
.iphone:has(#castMini.show) .wl-list-scroll,
.iphone:has(#castMini.show) .gp-scroll { padding-bottom:90px; }
.iphone:has(#castMini.show) .rec-grid-wrap,
.iphone:has(#castMini.show) .dl-scroll,
.iphone:has(#castMini.show) .wtml-grid-wrap { padding-bottom:106px; }
.cm-open { display:flex; align-items:flex-start; gap:8px; width:100%; height:66px;
  text-align:left; background:none; border:none; padding:0; cursor:pointer; }
.cm-thumb { width:117px; height:66px; border-radius:4px; overflow:hidden; flex-shrink:0; display:block; }
.cm-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.cm-meta { flex:1 1 auto; min-width:0; display:block; }
.cm-title { display:block; color:#fff; font-family:'Inter',sans-serif; font-size:17px; font-weight:600;
  line-height:24px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-sub { display:block; color:var(--c-on-surface-variant); font-family:'Inter',sans-serif; font-size:15px;
  line-height:21px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-return { display:block; cursor:pointer; line-height:21px;
  color:var(--c-primary); font-family:'Inter',sans-serif; font-size:15px; font-weight:600; }

/* Emitiendo desde el reproductor: el vídeo local se apaga (la tele es la que reproduce),
   así que el lienzo se queda en negro (Karen). */
#hplayer.casting #hpVideo { visibility:hidden; }
#hplayer.casting .hp-inner { background:#000; }

.cs-stop {
  position:absolute; inset:0; z-index:30;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(var(--c-background-rgb),0.5);
  opacity:0; pointer-events:none; transition:opacity 0.25s ease;
}
.cs-stop.open { opacity:1; pointer-events:auto; }
.cs-stop-sheet {
  width:100%; background:var(--c-surface); border-radius:16px 16px 0 0;
  padding:8px 16px 34px; display:flex; flex-direction:column; align-items:center; gap:20px;
  transform:translateY(100%); transition:transform 0.3s cubic-bezier(0.32,0.72,0,1);
}
.cs-stop.open .cs-stop-sheet { transform:translateY(0); }
.cs-stop-handle span { display:block; width:40px; height:4px; border-radius:9999px; background:rgba(255,255,255,0.2); margin-bottom:4px; }
.cs-stop-row { display:flex; align-items:center; gap:12px; }
.cs-stop-row span { font-size:16px; font-weight:400; color:var(--c-on-surface); }
.cs-stop-btn { width:100%; background:var(--c-primary); color:var(--c-background); font-weight:600; font-size:16px; line-height:1.5; border:0; border-radius:8px; padding:12px; cursor:pointer; font-family:'Inter',sans-serif; }
.cs-stop-btn:active { opacity:0.85; }
.cs-cancel-btn { width:100%; background:none; color:var(--c-primary); font-weight:600; font-size:16px; line-height:1.5; border:0; padding:4px; cursor:pointer; font-family:'Inter',sans-serif; }

/* ══════════════════════════════════════════════
   PICTURE-IN-PICTURE (over iOS home screen)
══════════════════════════════════════════════ */
#pipscreen { background:#000; }
/* The springboard image has its own status bar — hide the frame's global one here */
.iphone:has(#pipscreen.active) > .dynamic-island,
.iphone:has(#pipscreen.active) > .status-bar { display:none; }
.pip-home-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.pip-window {
  position:absolute; top:50px; right:10px; width:249px; height:141px;
  border-radius:16px; overflow:hidden;
  box-shadow: inset 0.75px 0.75px 0.75px 0 rgba(255,255,255,0.55), inset -0.75px -0.75px 0.75px 0 rgba(255,255,255,0.55), 0 12px 32px rgba(0,0,0,0.45);
}
.pip-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.pip-dim { position:absolute; inset:0; background:rgba(0,0,0,0.5); }
.pip-header { position:absolute; top:10px; left:10px; right:10px; display:flex; align-items:center; justify-content:space-between; }
.pip-controls { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:32px; }
.pip-gbtn {
  position:relative; display:flex; align-items:center; justify-content:center;
  border:0; padding:0; cursor:pointer; border-radius:50%;
  background:rgba(255,255,255,0.08); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  box-shadow: inset 0 0 0 0.75px rgba(255,255,255,0.6);
}
.pip-gbtn:active { opacity:0.7; }
.pip-sm { width:24px; height:24px; }
.pip-md { width:34px; height:34px; }
.pip-lg { width:48px; height:48px; }
.pip-10 { position:absolute; left:50%; top:53%; transform:translate(-50%,-50%); font-size:6px; font-weight:700; color:#fff; line-height:1; }
.pip-progress {
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  width:229px; height:17px; border-radius:90px;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
}
.pip-progress-track {
  width:212px; height:5px; border-radius:21px;
  background:rgba(133,133,133,0.7); position:relative; overflow:hidden;
}
.pip-progress-fill {
  position:absolute; left:0; top:0; bottom:0; width:34%;
  background:rgba(255,255,255,0.92); border-radius:21px;
}
.hp-right-ctrls {
  display:flex; align-items:center; gap:24px;
}
.hp-vol-group {
  display:flex; align-items:center; gap:0;
}
/* La pista solo aparece en hover (o con foco de teclado, o mientras se arrastra): colapsa
   ancho + margen para que salga deslizándose desde el icono. Sin overflow:hidden, que el
   tirador mide 12px sobre una pista de 4px y se recortaría. */
.hp-vol-track {
  width:0; margin-left:0; height:4px; border-radius:9999px;
  background:rgba(255,255,255,0.2); position:relative;
  cursor:pointer; flex-shrink:0; opacity:0; touch-action:none;
  transition:width 0.22s cubic-bezier(0.32,0.72,0,1),
             margin-left 0.22s cubic-bezier(0.32,0.72,0,1),
             opacity 0.18s ease;
}
/* La pista se despliega SÓLO con TAP en el icono (.vol-open). Es una app móvil: no hay
   hover en ningún sitio, y la regla @media (hover:hover) se activaba en el navegador de
   escritorio donde se revisa el demo, que es justo lo que había que evitar. */
.hp-vol-group:focus-within .hp-vol-track,
.hp-vol-group.dragging .hp-vol-track,
.hp-vol-group.vol-open .hp-vol-track {
  width:64px; margin-left:8px; opacity:1;
}
.hp-vol-fill {
  position:absolute; left:0; top:0; bottom:0;
  background:var(--c-on-surface); border-radius:9999px; width:64px;
}
/* El tirador viaja DENTRO de la pista (0→52px): muteado su borde izquierdo toca el 0 y
   a volumen máximo el derecho toca el 64. Igual que en el player web. */
.hp-vol-handle {
  position:absolute; top:50%; transform:translateY(-50%);
  width:12px; height:12px; border-radius:50%; background:var(--c-on-surface);
  left:52px; pointer-events:none;
}
@media (prefers-reduced-motion:reduce) {
  .hp-vol-track { transition:opacity 0.18s ease; }
}

/* ══════════════════════════════════════════════
   BOOKSMART — TRAILERS PAGE
══════════════════════════════════════════════ */
#booksmartTrailers, #seDetail, #avatarDetail, #euphoriaDetail {
  background:var(--c-background); overflow-y:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; display:flex; flex-direction:column;
  /* La página de detalle se presenta como tarjeta DEBAJO de la status bar (Figma:
     StatusBar 47px encima + Content Hero con esquinas superiores redondeadas). El
     hueco lo da el margin-top del hero (no padding aquí: el padding se sumaría al
     top:59px del app bar sticky y bajaría los iconos). */
}
#booksmartTrailers::-webkit-scrollbar, #seDetail::-webkit-scrollbar,
#avatarDetail::-webkit-scrollbar, #euphoriaDetail::-webkit-scrollbar { display:none; }

/* La foto tiene altura FIJA (585px) y el contenido va en flujo normal anclado
   arriba (padding-top). Así, al expandir la descripción, el bloque crece HACIA
   ABAJO empujando tags/tabs, mientras foto, logo y Play quedan fijos. */
.bt-hero {
  position:relative; width:100%; flex-shrink:0; overflow:hidden;
  /* margin-top:59px → hueco de fondo var(--c-background) bajo la status bar (tarjeta debajo). */
  margin:59px 0 16px;
  /* Esquinas superiores redondeadas (Figma "Content Hero": rounded-tl/tr 20px).
     overflow:hidden recorta la imagen de fondo a las esquinas. */
  border-radius:20px 20px 0 0;
  /* Sin min-height fijo: el hero mide EXACTAMENTE lo que ocupa su contenido, que está
     anclado ARRIBA (logo/Play/acciones quedan fijos). Así la línea de tags cae siempre
     al final del contenido y la distancia a los tabs = margin-bottom:16px CONSTANTE.
     Al expandir la descripción, el texto empuja hacia abajo tags + tabs con los mismos
     espacios, sin subir nada por encima del logo. overflow:hidden recorta la imagen de
     fondo (585px) al alto real del hero (zona inferior ya fundida a negro). */
}
.bt-hero-bg {
  position:absolute; top:0; left:0; right:0; width:100%; height:585px;
  object-fit:cover; object-position:center top;
}
.bt-hero-fade {
  position:absolute; top:0; left:0; right:0; height:585px; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(var(--c-background-rgb),0.45) 0%, rgba(var(--c-background-rgb),0.15) 18%,
    rgba(var(--c-background-rgb),0.25) 40%, rgba(var(--c-background-rgb),0.72) 58%,
    rgba(var(--c-background-rgb),0.95) 72%, var(--c-background) 85%);
}
.bt-appbar {
  position:sticky; top:59px; left:0; right:0; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; z-index:20;
  margin-bottom:-64px; flex-shrink:0; pointer-events:none;
}
.bt-appbar button { pointer-events:all; }
.bt-circle-btn {
  width:32px; height:32px; background:none; border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  -webkit-tap-highlight-color:transparent; flex-shrink:0; padding:0;
}
.bt-circle-btn:active { opacity:0.7; }

.bt-hero-content {
  position:relative; z-index:2;
  padding:214px 16px 0;
  display:flex; flex-direction:column; gap:12px; align-items:center;
}
.bt-movie-info { display:flex; flex-direction:column; gap:20px; align-items:center; width:100%; padding-bottom:12px; }
.bt-actions    { display:flex; flex-direction:column; gap:16px; align-items:center; width:100%; }
.bt-logo {
  width:218px; height:73px; object-fit:contain; object-position:center bottom;
}
.bt-play-btn {
  width:100%; height:44px; background:var(--c-primary); color:var(--c-background);
  border:none; border-radius:8px; font-size:16px; font-weight:600;
  font-family:'Inter',sans-serif; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; gap:12px;
  transition:transform 0.1s, opacity 0.1s; -webkit-tap-highlight-color:transparent;
}
.bt-play-btn:active { transform:scale(0.97); opacity:0.9; }
.bt-action-row { display:flex; gap:12px; align-items:flex-start; }
.bt-action-btn {
  background:none; border:none; padding:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent; flex-shrink:0;
  display:block; line-height:0;
}
.bt-action-btn:active { opacity:0.7; }
.bt-action-btn:active { opacity:0.7; }
/* ── Control de descarga en las páginas de detalle (Figma 25862:416811 / 416812) ──
   Cuatro estados (Default · Waiting · Downloading · Check) sobre las mismas capas
   de .dl-dlanim que usa la lista de descargas. Dos tamaños: el círculo de 40px de
   la fila de acciones de una película y el de 24px de cada episodio de una serie. */
/* El círculo calca el de los iconos vecinos (Icon1/Icon3.svg): relleno var(--c-surface) y
   borde primary@30 — NO primary a full, que es lo que lo hacía destacar. */
.bt-dl-btn { width:40px; height:40px; border-radius:50%; box-sizing:border-box;
  border:1px solid rgba(var(--c-primary-rgb),0.3); background:var(--c-surface);
  display:flex; align-items:center; justify-content:center; }
.bt-ep-dl { width:24px; height:24px; flex-shrink:0; margin-left:auto;
  background:none; border:none; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.bt-dl-ctl:active { opacity:0.6; }

.bt-meta { width:100%; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.bt-streaming { font-size:12px; font-weight:600; color:var(--c-primary-muted); line-height:1.5; text-transform:uppercase; }
.bt-desc-wrap { position:relative; width:100%; }
.bt-desc {
  font-size:14px; color:var(--c-on-surface); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
/* Degradado que funde el texto hacia el botón MORE (Figma "Rating Background": 103×19, to-left).
   Tokens Figma: color/background var(--c-background) → color/overlay-variant rgba(var(--c-background-rgb),0.3). */
.bt-desc-wrap::after {
  content:""; position:absolute; right:0; bottom:0;
  width:103px; height:21px; z-index:1; pointer-events:none;
  background:linear-gradient(to left, var(--c-background) 0%, rgba(var(--c-background-rgb),0.3) 100%);
}
.bt-more-pill {
  position:absolute; right:0; bottom:0; z-index:2; background:var(--c-surface-variant);
  border:none; border-radius:4px; padding:2px 8px;
  font-size:10px; font-weight:600; color:var(--c-on-surface);
  font-family:'Inter',sans-serif; cursor:pointer; line-height:1.5;
}
/* Estado expandido: texto completo a ancho completo (líneas superiores sin recortar)
   y el pill LESS INLINE al final de la última línea, a la derecha del texto (como en
   Figma "Full description"). Detalles:
   - font-size:0 elimina el espacio en blanco del HTML entre <p> y <button> (solo queda
     el margin-left de 4px como separación).
   - width:calc(100% + 6px) da un pelín más de ancho (se extiende dentro del padding
     lateral de 16px) para que LESS quepa en la última línea con la fuente Inter.
   - margin-bottom:-3px compensa el half-leading extra que añade display:inline bajo
     la última línea, para que el gap descripción→tags sea 12px CONSTANTE (igual que
     colapsado y que Figma), y al expandir el resto baje en proporción sin cambiar. */
/* Estado expandido: el texto SIEMPRE ocupa el ancho completo (columna en flex), y el
   pill LESS cae en su propia línea anclado abajo-derecha. Sin trucos de inline/font-size
   que estrechaban el texto. */
.bt-desc-wrap.expanded { width:100%; }
.bt-desc-wrap.expanded .bt-desc {
  display:block; width:100%; -webkit-line-clamp:unset; overflow:visible;
}
.bt-desc-wrap.expanded::after { display:none; }
.bt-desc-wrap.expanded .bt-more-pill {
  position:static; display:block; width:max-content; margin:4px 0 0 auto; z-index:auto;
}
.bt-tags { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.bt-tag-txt { font-size:14px; color:var(--c-on-surface); line-height:1.5; }
.bt-dot-sep { width:4px; height:4px; background:var(--c-on-surface); border-radius:50%; flex-shrink:0; }
/* Mismo componente `Tag` de Figma que .dl-tag: 19px de alto, trazo de 1px por dentro. */
.bt-pill {
  box-shadow:inset 0 0 0 1px var(--c-outline); border-radius:4px; padding:2px 8px;
  font-size:10px; font-weight:600; color:var(--c-on-surface); line-height:1.5;
}

/* Segmented control */
.bt-tabs {
  display:flex; align-items:flex-end; flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,0.08);
  overflow-x:auto; scrollbar-width:none;
  position:relative;
}
.bt-tabs::-webkit-scrollbar { display:none; }
.bt-tab {
  padding:12px 16px; font-size:16px; font-weight:400;
  color:var(--c-on-surface-variant); cursor:pointer; white-space:nowrap;
  flex-shrink:0; line-height:1.5;
  transition:color 0.22s ease, font-weight 0s;
  -webkit-tap-highlight-color:transparent;
}
.bt-tab.bt-active { color:var(--c-on-surface); font-weight:600; }

/* indicador deslizante */
#btTabIndicator {
  position:absolute; bottom:0; height:3px;
  background:var(--c-primary); border-radius:9999px 9999px 0 0;
  transition:left 0.3s cubic-bezier(0.4,0,0.2,1),
             width 0.3s cubic-bezier(0.4,0,0.2,1);
  pointer-events:none;
}

/* animación de entrada del panel */
@keyframes btPanelIn {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}
.bt-panel-entering {
  animation: btPanelIn 0.3s cubic-bezier(0.4,0,0.2,1) forwards;
}

/* Trailer list */
.bt-list {
  padding:16px; display:flex; flex-direction:column; gap:24px; flex-shrink:0;
}

/* More Like This */
.bt-mlt-content {
  padding:16px 16px 16px; display:flex; flex-direction:column; flex-shrink:0;
}
.mlt-grid {
  display:grid; grid-template-columns:repeat(3, 111px); gap:12px;
}
.mlt-card {
  position:relative; width:111px; height:167px; border-radius:8px; overflow:hidden;
  background:var(--c-surface); border:1px solid rgba(255,255,255,0.2); flex-shrink:0;
  cursor:pointer; transition:transform 0.15s; -webkit-tap-highlight-color:transparent;
}
.mlt-card:active { transform:scale(0.96); }
.mlt-card img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.mlt-badge {
  position:absolute; bottom:-1.25px; left:calc(50% + 0.5px); transform:translateX(-50%);
  background:var(--c-primary); border-radius:2px 2px 0 0;
  padding:2px 4px; white-space:nowrap;
  display:flex; align-items:center; justify-content:center;
}
.mlt-badge-label {
  font-family:'Inter',sans-serif;
  font-size:8px; font-weight:600; color:var(--c-background); line-height:1.5; white-space:nowrap;
}

/* ════════════════ SEARCH — Landing Pre Search ════════════════ */
/* padding-top:59px = status bar absoluto del shell (el demo usa 59px; Figma 47px —
   desviación aceptada y consistente en todas las pantallas del demo). */
#searchScreen { background:var(--c-background); display:flex; flex-direction:column; overflow:hidden; padding-top:59px; }
.sr-appbar { padding:12px 16px; flex-shrink:0; }
/* Alto 50px = 24 de contenido + 12·2 de padding + 1·2 de borde (Figma: App Bar 74px). */
.sr-search-input {
  display:flex; align-items:center; gap:16px;
  background:var(--c-surface); border:1px solid var(--c-outline); border-radius:8px;
  padding:12px 16px; width:100%; box-sizing:border-box;
  transition:border-color .18s ease;
}
.sr-search-input svg { flex-shrink:0; display:block; }

/* ── Estados del text input (Figma 6. Search) ──
   borde:  color/outline var(--c-outline) en reposo → color/outline-variant var(--c-on-surface) al teclear
   lupa:   on-surface-variant var(--c-on-surface-variant) vacío → on-surface var(--c-on-surface) con query
   texto:  var(--c-on-surface-variant) placeholder → var(--c-on-surface) tecleado
   caret:  1×24px var(--c-on-surface), sólo mientras se teclea                                     */
.sr-search-icon { color:var(--c-on-surface-variant); transition:color .18s ease; }
#searchScreen:not([data-state="landing"]) .sr-search-icon { color:var(--c-on-surface); }
#searchScreen[data-state="active"] .sr-search-input { border-color:var(--c-on-surface); }

.sr-query { flex:1; min-width:0; display:flex; align-items:center; overflow:hidden; }
.sr-search-ph {
  min-width:0;
  font-family:'Inter',sans-serif; font-size:16px; font-weight:400; line-height:1.5; color:var(--c-on-surface-variant);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sr-search-ph.typed { color:var(--c-on-surface); }
.sr-caret { display:none; flex-shrink:0; width:1px; height:24px; background:var(--c-on-surface); }
#searchScreen[data-state="active"] .sr-caret {
  display:block; animation:sr-caret-blink 1.06s step-end infinite;
}
@keyframes sr-caret-blink { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
.sr-content { flex:1; overflow-y:auto; scrollbar-width:none; padding:16px 16px 0; }
.sr-content::-webkit-scrollbar { display:none; }
.sr-section-title {
  font-family:'Inter',sans-serif; font-size:20px; font-weight:600; line-height:1.2; color:var(--c-on-surface);
  padding-bottom:16px;
}
.sr-grid { padding-bottom:300px; } /* clearance para scrollear detrás del teclado */

/* Botón limpiar (X) — solo cuando hay query */
.sr-clear { display:none; flex-shrink:0; background:none; border:none; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.sr-clear img { display:block; }
#searchScreen:not([data-state="landing"]) .sr-clear { display:flex; }

/* Lista de sugerencias (estado active) */
.sr-suggestions { display:none; flex-direction:column; padding-bottom:24px; }
#searchScreen[data-state="active"] .sr-suggestions { display:flex; }
.sr-result-item {
  font-family:'Inter',sans-serif; font-size:16px; font-weight:600; line-height:1.5; color:var(--c-on-surface);
  padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.1); cursor:pointer;
}

/* Sin resultados (estado noresults) */
.sr-noresults { display:none; padding-bottom:16px; }
#searchScreen[data-state="noresults"] .sr-noresults { display:block; }
.sr-noresults-copy { font-family:'Inter',sans-serif; font-size:16px; font-weight:400; line-height:1.5; color:var(--c-on-surface-variant); }
.sr-noresults-copy .sr-q { color:var(--c-on-surface); }
.sr-separator { height:1px; background:rgba(255,255,255,0.1); margin:16px 0 8px; }

/* Título de recomendaciones: oculto en active/results/error */
#searchScreen[data-state="active"] #srRecsTitle,
#searchScreen[data-state="results"] #srRecsTitle,
#searchScreen[data-state="error"] #srRecsTitle { display:none; }

/* Estado de error (Figma 24232:318707): sólo el bloque centrado, sin grid ni recs */
.sr-error {
  display:none; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; min-height:560px; padding:24px 24px 40px;
}
#searchScreen[data-state="error"] .sr-error { display:flex; }
#searchScreen[data-state="error"] .sr-grid { display:none; }
.sr-error-inner { display:flex; flex-direction:column; align-items:center; width:100%; max-width:342px; }
.sr-error-icon { display:block; margin-bottom:24px; }
.sr-error-title { font-family:'Inter',sans-serif; font-size:24px; font-weight:700; color:#fff; line-height:1.3; margin-bottom:8px; }
.sr-error-sub { font-family:'Inter',sans-serif; font-size:16px; font-weight:400; color:var(--c-on-surface-variant); line-height:1.5; margin-bottom:32px; }
.sr-error-btn {
  width:100%; height:48px; border:none; border-radius:8px; background:var(--c-primary);
  color:var(--c-surface-container); font-family:'Inter',sans-serif; font-size:16px; font-weight:600; cursor:pointer;
}
.sr-error-btn:active { opacity:0.85; }

/* Las cards de resultado entran una a una, de oscuro a claro. Mismo tratamiento que
   el demo web (web/streamit-search) para que APP y WEB se sientan igual. */
#searchScreen .sr-grid .mlt-card.card-in {
  opacity:0; animation:sr-card-in 0.55s ease forwards;
}
@keyframes sr-card-in {
  0%   { opacity:0; filter:brightness(0.3); }
  100% { opacity:1; filter:brightness(1); }
}
@media (prefers-reduced-motion:reduce) {
  #searchScreen .sr-grid .mlt-card.card-in { animation:none; opacity:1; filter:none; }
}

/* Cast & Crew */
.bt-panel-hidden { display:none !important; }
.bt-cc-content {
  padding:16px; display:flex; flex-direction:column; gap:40px; flex-shrink:0;
}
.cc-group { display:flex; flex-direction:column; gap:4px; }
.cc-heading { font-size:20px; font-weight:600; color:var(--c-on-surface); line-height:1.2; padding-bottom:4px; }
.cc-list { display:flex; flex-direction:column; }
.cc-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; gap:32px;
}
.cc-name { font-size:16px; font-weight:600; color:var(--c-on-surface); flex:1; min-width:0; }
.cc-role { font-size:14px; font-weight:400; color:var(--c-on-surface-variant); white-space:nowrap; text-align:right; }
.cc-divider { height:0.5px; background:rgba(255,255,255,0.08); flex-shrink:0; }
/* Pressed state — soft size-down de TODA la card (artwork + metadata), como el Home */
.bt-episode { display:flex; flex-direction:column; gap:8px; cursor:pointer; transition:transform 0.15s; }
.bt-episode:active { transform:scale(0.97); }
.bt-ep-card {
  width:358px; height:202px; border-radius:8px; overflow:hidden;
  position:relative; background:var(--c-surface);
  border:1px solid rgba(255,255,255,0.2); flex-shrink:0;
}
.bt-ep-card > img {
  position:absolute; inset:-1px;
  width:calc(100% + 2px); height:calc(100% + 2px); object-fit:cover;
}
.bt-ep-play {
  position:absolute; bottom:-1px; left:-1px; padding:12px; z-index:2; pointer-events:none;
}
.bt-ep-meta { display:flex; flex-direction:column; gap:8px; }
.bt-ep-title { font-size:14px; font-weight:600; color:var(--c-on-surface); line-height:1.5; }
.bt-ep-row { display:flex; align-items:center; gap:8px; }
.bt-ep-dur { font-size:12px; color:var(--c-on-surface-variant); white-space:nowrap; }
.bt-ep-tags { display:flex; gap:8px; align-items:center; }
.bt-ep-desc { font-size:12px; color:var(--c-on-surface-variant); line-height:1.5; }
.bt-home-ind {
  height:32px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.bt-home-ind span {
  width:128px; height:6px; background:rgba(255,255,255,0.5);
  border-radius:9999px; display:block;
}

/* ── Series Detail — Episodes tab (Sex Education) ── */
/* 16px bajo el segmented control (Figma: Detail Segmented Control - Margin → pb-16) */
.se-episodes { padding:16px; display:flex; flex-direction:column; flex-shrink:0; position:relative; }
#seDetail .bt-mlt-content,
#euphoriaDetail .bt-mlt-content,
#avatarDetail .bt-mlt-content { padding-top:16px; }
.se-season {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--c-surface); border:none; border-radius:8px; padding:8px 12px 8px 16px;
  cursor:pointer; font-family:'Inter',sans-serif; -webkit-tap-highlight-color:transparent;
}
.se-season:active { opacity:0.85; }
.se-season-label { font-size:16px; font-weight:600; color:var(--c-on-surface); line-height:1.5; }
.se-season-chevron { flex-shrink:0; }
.se-season-note { font-size:12px; font-weight:400; color:var(--c-on-surface); line-height:1.5; margin-top:16px; }
.se-sep { height:0.5px; background:rgba(255,255,255,0.08); margin-top:8px; margin-bottom:24px; }
.se-ep-list { display:flex; flex-direction:column; gap:24px; }
.se-ep-list.se-list-hidden { display:none; }

/* Chevron del selector de temporada gira al abrir el menú */
.se-season-chevron { transition:transform 0.22s ease; }
.se-season[aria-expanded="true"] .se-season-chevron { transform:rotate(180deg); }

/* Menú de temporada — material "glass" nativo iOS: full width, esquinas 14px,
   sin selector/checkmark, sin highlight, sin gris de disabled, sin separadores. */
.se-season-menu {
  position:absolute; top:60px; left:16px; right:16px; z-index:60;
  background:rgba(60,60,60,0.45);
  -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%);
  border:0.5px solid rgba(255,255,255,0.14); border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,0.5); overflow:hidden;
  opacity:0; transform:scale(0.96); transform-origin:top center; pointer-events:none;
  transition:opacity 0.18s ease, transform 0.18s cubic-bezier(0.2,0.9,0.3,1.2);
}
.se-season-menu.open { opacity:1; transform:scale(1); pointer-events:auto; }
.se-season-opt {
  padding:13px 16px; font-size:16px; color:var(--c-on-surface); line-height:1.4;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.se-season-opt.disabled { cursor:default; }

/* progress bar overlaid on the episode thumbnail */
.se-ep-progress {
  position:absolute; bottom:0; left:0; right:0; height:4px;
  background:var(--c-surface-variant); z-index:2;
}
.se-ep-progress-bar { height:100%; background:var(--c-primary); }

/* title row + download icon */
.se-ep-titlerow { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.se-ep-dl { width:24px; height:24px; flex-shrink:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.se-ep-dl:active { opacity:0.6; }

/* coming-soon yellow label above the title — 4px al título (Figma gap-4) sobre el gap-8 del meta */
.se-ep-streaming { font-size:14px; font-weight:600; color:var(--c-primary); line-height:1.5; margin-bottom:-4px; }

/* episode without artwork — faded brand logo centered */
.se-ep-empty { display:flex; align-items:center; justify-content:center; }
.bt-ep-card > img.se-ep-emptylogo {
  position:static; inset:auto; width:160px; height:auto; object-fit:contain; opacity:0.4;
}

/* coming-soon dark overlay over the thumbnail */
.se-ep-coming::after {
  content:""; position:absolute; inset:0; z-index:1;
  background:rgba(var(--c-background-rgb),0.74);
}
.se-ep-coming .bt-ep-play { z-index:2; }

/* App bar que se opaca con el scroll (igual que el nav-bar del Home) → sin overlap
   del contenido. El ::before extiende el fondo sobre la zona de la status bar (0-59px);
   la status bar global (z-160) queda por encima de este fondo (appbar z-20). */
/* "X" (cerrar) solo visible cuando el detalle se abrió desde otro detalle */
.bt-appbar .bt-close { display:none; }
.screen.show-close .bt-appbar .bt-close { display:flex; }

#seDetail .bt-appbar,
#booksmartTrailers .bt-appbar,
#avatarDetail .bt-appbar,
#euphoriaDetail .bt-appbar {
  background-color:rgba(var(--c-background-rgb),var(--nav-solid, 0));
}
#seDetail .bt-appbar::before,
#booksmartTrailers .bt-appbar::before,
#avatarDetail .bt-appbar::before,
#euphoriaDetail .bt-appbar::before {
  content:""; position:absolute; left:0; right:0; bottom:100%; height:59px;
  background-color:rgba(var(--c-background-rgb),var(--nav-solid, 0));
  pointer-events:none;
}

/* Sin override de color para episodios de series: Sex Education / Euphoria heredan
   los defaults de .bt-ep-* (title var(--c-on-surface), dur/desc var(--c-on-surface-variant)), igual que el resto de
   detail pages. (Antes tenían un override azulado F4F5FC/8A9BB5.) */
/* gap del bloque de descripción del hero (Figma "Content" → gap space/m = 12px) */
#seDetail .bt-meta,
#euphoriaDetail .bt-meta,
#avatarDetail .bt-meta { gap:12px; }

/* indicador deslizante de tabs para las pantallas de detalle clonadas */
#seTabIndicator, #avTabIndicator, #euTabIndicator {
  position:absolute; bottom:0; height:3px;
  background:var(--c-primary); border-radius:9999px 9999px 0 0;
  transition:left 0.3s cubic-bezier(0.4,0,0.2,1),
             width 0.3s cubic-bezier(0.4,0,0.2,1);
  pointer-events:none;
}

/* ══ PARENTAL CONTROL GATE (dentro del hplayer landscape) ══ */
.hp-gate {
  position:absolute; inset:0; z-index:30; display:none;
  align-items:center; justify-content:center;
  background:var(--c-background);   /* fondo sólido (color/background), no el vídeo transparente */
}
#hplayer.gate .hp-gate { display:flex; }
#hplayer.gate .hp-controls, #hplayer.gate .hp-spinner { display:none !important; }
.hp-gate-back { position:absolute; top:20px; left:24px; z-index:2; }
.hp-gate-panel { display:flex; flex-direction:column; align-items:center; }
#hplayer.gate.locked .hp-gate-panel { display:none; }
.hp-gate-title { font-family:'Inter',sans-serif; font-size:20px; font-weight:600; color:var(--c-on-surface); line-height:1.2; text-align:center; }
.hp-gate-desc { font-family:'Inter',sans-serif; font-size:16px; font-weight:400; color:var(--c-on-surface); line-height:1.5; text-align:center; margin-top:8px; margin-bottom:24px; }
.hp-gate-boxes { display:flex; gap:20px; }
.hp-gate-box { width:42px; height:51px; background:var(--c-surface); border:1px solid var(--c-outline); border-radius:8px; display:flex; align-items:center; justify-content:center; transition:border-color .15s; }
.hp-gate-box.active { border-color:var(--c-on-surface); }                 /* focus: celda activa (blanco) */
.hp-gate-box.filled { border-color:var(--c-primary); }                /* filled: celda con dígito (amarillo) */
.hp-gate-box.filled::after { content:"*"; font-family:'Inter',sans-serif; font-size:20px; font-weight:600; line-height:1; color:var(--c-on-surface); transform:translateY(0.18em); }
#hplayer.gate.error .hp-gate-box { border-color:var(--c-error); }
#hplayer.gate.error .hp-gate-box.filled::after { color:var(--c-on-surface); }
.hp-gate-err { display:none; align-items:center; gap:12px; margin-top:16px; background:var(--c-error-container); border:1px solid var(--c-error); border-radius:8px; padding:13px; font-family:'Inter',sans-serif; font-size:14px; font-weight:600; letter-spacing:-0.14px; color:var(--c-error); line-height:1.5; }
#hplayer.gate.error .hp-gate-err { display:flex; }
.hp-gate-forgot { background:none; border:none; color:var(--c-primary); font-family:'Inter',sans-serif; font-size:14px; font-weight:600; cursor:pointer; margin-top:20px; padding:0; }
.hp-gate-lock { display:none; flex-direction:column; align-items:center; width:342px; max-width:80%; }
#hplayer.gate.locked .hp-gate-lock { display:flex; }
.hp-gate-lock-title { font-family:'Inter',sans-serif; font-size:20px; font-weight:600; color:var(--c-on-surface); line-height:1.2; text-align:center; }
.hp-gate-lock-body { font-family:'Inter',sans-serif; font-size:14px; font-weight:400; color:var(--c-on-surface); line-height:1.5; text-align:center; margin-top:8px; margin-bottom:24px; }
.hp-gate-lock-btns { display:flex; flex-direction:column; gap:12px; width:100%; }
.hp-gate-btn { height:48px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:'Inter',sans-serif; font-size:15px; font-weight:600; cursor:pointer; width:100%; }
.hp-gate-btn.primary { background:var(--c-primary); border:none; color:var(--c-background); }
.hp-gate-btn.secondary { background:none; border:1px solid rgba(255,255,255,0.35); color:var(--c-on-surface); }

/* Pista del PIN (fuera del iPhone) */
#pcHint {
  position:fixed; left:308px; bottom:28px; display:none; align-items:center;
  background:#1c1c1c; border:1px solid rgba(255,255,255,0.15); border-radius:12px;
  padding:10px 16px; font-family:'Inter',sans-serif; font-size:14px; color:#EDEDED;
  box-shadow:0 4px 28px rgba(0,0,0,0.6); z-index:9999;
  transition:left .3s cubic-bezier(0.4,0,0.2,1);
}
body.dn-collapsed #pcHint { left:28px; }
#pcHint b { color:#fff; font-weight:600; letter-spacing:.06em; margin-left:6px; }
#pcHint.show { display:flex; }

/* Hint flotante de credenciales demo para el flujo de auth (mismo patrón que #pcHint) */
#authHint {
  position:fixed; left:308px; bottom:28px; display:none; align-items:center; gap:2px;
  background:#1c1c1c; border:1px solid rgba(255,255,255,0.15); border-radius:12px;
  padding:10px 16px; font-family:'Inter',sans-serif; font-size:14px; color:#EDEDED;
  box-shadow:0 4px 28px rgba(0,0,0,0.6); z-index:9999; max-width:calc(100vw - 336px);
  transition:left .3s cubic-bezier(0.4,0,0.2,1), max-width .3s cubic-bezier(0.4,0,0.2,1);
}
/* Con el panel recogido recupera el borde izquierdo */
body.dn-collapsed #authHint { left:28px; max-width:calc(100vw - 56px); }
#authHint b { color:#fff; font-weight:600; letter-spacing:.04em; }
#authHint.show { display:flex; }

/* Toggle demo: simular sin conexión */
#offlineToggle {
  position:fixed; right:28px; bottom:28px; z-index:9999;
  display:flex; align-items:center; gap:8px; cursor:pointer;
  background:#1c1c1c; border:1px solid rgba(255,255,255,0.15); border-radius:12px;
  padding:10px 14px; font-family:'Inter',sans-serif; font-size:14px; font-weight:600; color:#EDEDED;
  box-shadow:0 4px 28px rgba(0,0,0,0.6); transition:color .15s, border-color .15s;
}
#offlineToggle .off-tog-ic { color:#4ADE80; }
#offlineToggle.off { color:#EDEDED; border-color:rgba(248,113,113,0.5); }
#offlineToggle.off .off-tog-ic { color:#F87171; }


/* Selector de marca — chrome de la demo, fuera del teléfono: no sigue los tokens */
#brandSwitch {
  position:fixed; top:28px; right:28px; z-index:9999; display:flex; gap:4px;
  background:#1c1c1c; border:1px solid rgba(255,255,255,0.18); border-radius:12px;
  padding:4px; box-shadow:0 4px 28px rgba(0,0,0,0.6);
}
#brandSwitch button {
  border:none; cursor:pointer; border-radius:9px; padding:9px 16px;
  background:none; color:#9a9a9a;
  font-family:'Inter',sans-serif; font-size:14px; font-weight:600;
  transition:background .15s, color .15s;
}
#brandSwitch button.on { background:#ffffff; color:#121212; }
#brandSwitch button:not(.on):hover { color:#ebebeb; }

/* Estado Premier del detalle (Euphoria Season 2 upsell, Figma 25578:422162) */
#euphoriaDetail .bt-premier-cta { display:none; }
#euphoriaDetail.premier-active .bt-play-normal { display:none; }
#euphoriaDetail.premier-active .bt-premier-cta { display:inline-flex; }
/* "Watch new season with Premier": siempre visible, en primary-muted (var(--c-primary-muted)) */
.bt-premier-line { display:block; color:var(--c-primary-muted); font-family:'Inter',sans-serif;
  font-size:14px; font-weight:600; line-height:1.5; margin-bottom:6px; }
.iphone:not(.has-premier) #euEpisodes .se-ep-list[data-season="2"] .bt-ep-play { display:none; }
/* Con Premier ya comprado la reja se retira: ni línea, ni pill, y vuelve el play. */
.iphone.has-premier .bt-premier-line,
.iphone.has-premier .bt-ep-upgrade { display:none; }
/* Pill "Upgrade to Watch" (Figma 25578:422170): white@80 + texto/flecha on-white.
   La flecha va suelta, SIN contenedor. Tokens: white@80, on-white, radius/full, body/l. */
.bt-ep-upgrade {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  display:flex; align-items:center; gap:12px; white-space:nowrap; cursor:pointer;
  background:rgba(255,255,255,0.8); border:none; border-radius:9999px; padding:10px 24px;
  color:var(--c-background); font-family:'Inter',sans-serif; font-size:16px; font-weight:600;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.bt-ep-up-arrow { flex-shrink:0; display:flex; align-items:center; justify-content:center; }

/* ══════════════════════════════════════════════
   DOWNLOADS  (Library · Show · Empty · Managing)
══════════════════════════════════════════════ */
#downloads, #downloadsShow, #downloadsEmpty { background:var(--c-background); }

/* App bar — Show (back + centered title + cast) reuses .wl-appbar */
.dl-appbar-title {
  position:absolute; left:50%; transform:translateX(-50%);
  font-size:18px; font-weight:600; color:var(--c-on-surface); line-height:1.5;
}

/* Scroll area */
.dl-scroll {
  position:absolute; top:123px; left:0; right:0; bottom:110px;
  overflow-y:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  padding:0 16px 16px;
}
.dl-scroll::-webkit-scrollbar { display:none; }

/* Header row (Edit / Select All · Cancel) */
.dl-header {
  display:flex; align-items:center; justify-content:flex-end;
  gap:16px; padding:16px 0;
}
.dl-header-btn {
  background:none; border:none; padding:0; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:16px; font-weight:600;
  color:var(--c-primary); line-height:1.5;
}
.dl-header-btn:active { opacity:0.5; }
/* "Select All" entra con un fade+desplazamiento en vez de aparecer de golpe.
   `margin-right:auto` ya empuja Edit a la derecha, así que estar siempre en el flujo
   no cambia el layout del modo normal. */
.dl-selectall {
  display:block; margin-right:auto; opacity:0; transform:translateX(-6px); pointer-events:none;
  transition:opacity 0.22s ease, transform 0.34s cubic-bezier(0.32,0.72,0,1);
}
#downloads.managing .dl-selectall, #downloadsShow.managing .dl-selectall {
  opacity:1; transform:none; pointer-events:auto;
}

/* Section list */
.dl-list { display:flex; flex-direction:column; gap:12px; }
.dl-list + .dl-list { margin-top:16px; }
.dl-list-title { font-size:18px; font-weight:600; color:var(--c-on-surface); line-height:1.5; }
.dl-items { display:flex; flex-direction:column; gap:12px; }

/* List item */
.dl-item { display:flex; align-items:center; gap:12px; }
.dl-item[data-nav]:active { opacity:0.7; }
.dl-divider { height:1px; background:rgba(255,255,255,0.10); }

/* Borrado: la fila sale hacia la izquierda y después se cierra el hueco.
   Se ocultan con .dl-gone (no se sacan del DOM) para que dlReset() las restaure. */
@keyframes dlSlideOut {
  0%   { transform:translateX(0);     opacity:1; }
  100% { transform:translateX(-110%); opacity:0; }
}
.dl-item.dl-removing { animation:dlSlideOut 0.3s ease forwards; pointer-events:none; }
.dl-gone { display:none !important; }
.dl-list.dl-collapsing { overflow:hidden; transition:height 0.25s ease, margin-top 0.25s ease; }

/* Trazo por dentro (inset), no `border`: en Figma el stroke va en el límite del frame y los
   hijos recortan al frame completo. Con `border`, `overflow:hidden` recorta al padding box
   y la barra de progreso no llegaría nunca al borde exterior de la tarjeta. */
.dl-thumb {
  position:relative; width:117px; height:66px; flex-shrink:0;
  border-radius:8px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2); background:var(--c-surface);
}
.dl-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
/* Un cuerpo de episodios por serie dentro de #downloadsShow; sólo uno visible */
.dl-show-body { display:none; }
.dl-show-body.on { display:block; }
/* Figma: el Progress Bar ocupa los 117px de ancho de la tarjeta y cuelga 1px por debajo
   (bottom:−1.07px), así que el recorte deja ver 3px de los 4. */
.dl-prog { position:absolute; left:0; right:0; bottom:-1px; height:4px; background:var(--c-surface-variant); }
.dl-prog > i { display:block; height:100%; background:var(--c-primary); }

.dl-meta { flex:1; min-width:0; display:flex; flex-direction:column; }
.dl-meta.gap2 { gap:2px; }
.dl-meta.gap4 { gap:4px; }
/* Título de una sola línea: los que no caben se cortan con puntos suspensivos */
.dl-meta-title { font-size:14px; font-weight:600; color:var(--c-on-surface); line-height:1.5;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dl-meta-sub  { font-size:14px; font-weight:400; color:var(--c-on-surface-variant); line-height:1.5; }
.dl-meta-size { font-size:12px; font-weight:400; color:var(--c-on-surface-variant); line-height:1.5; }
.dl-meta-size.downloading { color:var(--c-primary); }
.dl-meta-exp  { font-size:12px; font-weight:400; color:var(--c-on-surface); line-height:1.5; }
.dl-meta-row  { display:flex; align-items:center; gap:4px; font-size:12px; font-weight:400; color:var(--c-on-surface-variant); line-height:1.5; }
/* En Figma "Expires in…" y la fila de tamaño viven en un mismo `Details Container`
   SIN gap interno; sólo hay 4px entre título/tags/ese bloque. Anulamos el gap del padre. */
.dl-meta-exp + .dl-meta-row { margin-top:-4px; }
.dl-dot { width:2px; height:2px; border-radius:50%; background:var(--c-on-surface-variant); flex-shrink:0; }

.dl-tags { display:flex; gap:8px; }
/* Tag = 19px de alto (15 de línea + 2·2 de padding). El trazo de 1px va POR DENTRO,
   como en Figma: con `border` el navegador lo suma fuera y salen 21×(texto+18). */
.dl-tag {
  box-shadow:inset 0 0 0 1px var(--c-outline); border-radius:4px; padding:2px 8px;
  font-size:10px; font-weight:600; color:var(--c-on-surface); line-height:1.5;
}

/* Status icon (right) */
.dl-status {
  width:24px; height:24px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  margin-left:0; opacity:1;
  /* Al volver: primero se abre el hueco y el icono entra al final, así no se ve aplastado. */
  transition:width 0.38s cubic-bezier(0.4,0,0.2,1),
             margin-left 0.38s cubic-bezier(0.4,0,0.2,1),
             opacity 0.2s ease 0.18s;
}
.dl-status svg { display:block; }
.dl-status.tap { cursor:pointer; }
.dl-status.tap:active { opacity:0.5; }

/* Download-complete animation: queued → downloading (arc fills) → done (check)
   Three layers stacked; phase class on the container fades between them. */
.dl-dlanim { position:relative; }
.dl-dlanim > * { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:opacity 0.25s ease; }
/* Las tres capas parten ocultas y cada fase enciende SOLO la suya. Antes .dl-dl-queued
   no tenía opacity:0 de base: en ph-done ninguna regla la apagaba, así que el icono gris
   volvía a aparecer por detrás del tick. */
.dl-dl-queued, .dl-dl-ring, .dl-dl-done, .dl-dl-idle { opacity:0; }
.dl-dlanim.ph-idle    .dl-dl-idle   { opacity:1; }
.dl-dlanim.ph-queued  .dl-dl-queued { opacity:1; }
.dl-dlanim.ph-loading .dl-dl-ring   { opacity:1; }
.dl-dlanim.ph-done    .dl-dl-done   { opacity:1; }
/* Descargado: el tick no es una acción. Sin cursor ni feedback de pulsación. */
.dl-dlanim.ph-done { pointer-events:none; cursor:default; }
/* progress arc: 2πr with r=9 → 56.55; empty at 56.55, full at 0 */
.dl-ring-arc { stroke-dasharray:56.55; stroke-dashoffset:56.55; }
/* El arco lo anima el CSS pero las fases las cuenta el JS: si los dos tiempos no
   coinciden, el anillo acaba antes (o después) de que la fase cambie. La duración la
   inyecta dlPlayDownloadAnim() desde DL_LOADING_MS, así que hay una sola fuente. */
.dl-dlanim { --dl-loading-ms:4000ms; }
.dl-dlanim.ph-loading .dl-ring-arc { stroke-dashoffset:0; transition:stroke-dashoffset var(--dl-loading-ms) linear; }
.dl-dlanim.ph-done .dl-dl-done { animation:dlDonePop 0.4s cubic-bezier(0.34,1.4,0.64,1); }
@keyframes dlDonePop { 0%{transform:translate(-50%,-50%) scale(0.4)} 60%{transform:translate(-50%,-50%) scale(1.12)} 100%{transform:translate(-50%,-50%) scale(1)} }
@media (prefers-reduced-motion:reduce) {
  .dl-dlanim.ph-loading .dl-ring-arc { transition:none; }
  .dl-dlanim.ph-done .dl-dl-done { animation:none; }
  .dl-check, .dl-check svg, .dl-status, .dl-selectall,
  .dl-tabbar, .dl-delete-footer, .dl-list.dl-collapsing { transition:none; }
  .dl-item.dl-removing { animation:none; opacity:0; }
}

/* Managing checkbox (left) */
/* Unselected checkbox matches Components/icons/Checkbox-unselected.svg:
   20×20 circle, var(--c-surface) fill, var(--c-primary) ring 1.14px. Selected → filled var(--c-primary) + dark check. */
/* El checkbox nunca se conmuta con display: siempre está en el flujo y crece/se retrae.
   El margin-right negativo se come el gap de 12px de .dl-item para que no quede hueco
   cuando está a 0 de ancho. Así el paso a/desde modo edición no da el salto de 32px. */
.dl-check {
  display:flex; width:0; height:20px; flex-shrink:0; border-radius:50%;
  border:1.14px solid var(--c-primary); background:var(--c-surface); box-sizing:border-box;
  align-items:center; justify-content:center; cursor:pointer;
  margin-right:-12px; opacity:0; transform:scale(0.5); overflow:hidden;
  pointer-events:none;
  /* Una transición CSS usa la del estado DESTINO. Esta gobierna la SALIDA del modo
     edición (destino = este estado): curva simétrica y sin rebote, para que se retraiga
     acompañando en vez de desaparecer de golpe. */
  transition:width 0.38s cubic-bezier(0.4,0,0.2,1),
             margin-right 0.38s cubic-bezier(0.4,0,0.2,1),
             transform 0.38s cubic-bezier(0.4,0,0.2,1),
             opacity 0.3s ease,
             background-color 0.18s ease;
}
#downloads.managing .dl-check, #downloadsShow.managing .dl-check {
  width:20px; margin-right:0; opacity:1; transform:scale(1); pointer-events:auto;
  /* Gobierna la ENTRADA: ease-out marcado + un pelín de rebote al aparecer. */
  transition:width 0.34s cubic-bezier(0.32,0.72,0,1),
             margin-right 0.34s cubic-bezier(0.32,0.72,0,1),
             transform 0.34s cubic-bezier(0.34,1.32,0.64,1),
             opacity 0.2s ease,
             background-color 0.18s ease;
}
.dl-check svg {   /* gobierna el DESmarcado */
  display:block; width:13px; height:13px; opacity:0; transform:scale(0.4);
  transition:opacity 0.16s ease, transform 0.22s cubic-bezier(0.4,0,0.2,1);
}
.dl-item.selected .dl-check { background:var(--c-primary); }
.dl-item.selected .dl-check svg {   /* gobierna el marcado: el tick entra con rebote */
  opacity:1; transform:scale(1);
  transition:opacity 0.14s ease, transform 0.26s cubic-bezier(0.34,1.5,0.64,1);
}
/* El icono de la derecha se retrae igual. Sin overflow:hidden para no recortar el anillo
   de progreso de .dl-dlanim: en su lugar se juega con el retardo de la opacidad. */
#downloads.managing .dl-item .dl-status, #downloadsShow.managing .dl-item .dl-status {
  width:0; margin-left:-12px; opacity:0; pointer-events:none;
  /* Al desaparecer: se apaga antes de aplastarse. */
  transition:width 0.34s cubic-bezier(0.32,0.72,0,1),
             margin-left 0.34s cubic-bezier(0.32,0.72,0,1),
             opacity 0.14s ease;
}

/* ════════════════ OFFLINE (sección "Offline" de Figma, 19440:144885) ════════════════ */

/* 19440:144886 "12.1 Downloads Library — Empty". El Main - Content Body va de la status
   bar al home indicator y centra el bloque icono(112) + copy(141) + botones(128) = 381. */
#offlineEmpty { background:var(--c-background); }
.off-body {
  position:absolute; top:59px; left:0; right:0; bottom:32px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 24px; text-align:center;
}
/* El asset ES el nodo `Icon - Margin` completo (80 de icono + 32 de padding = 112),
   así que no lleva padding propio: el hueco inferior ya viene en la imagen. */
.off-icon img { display:block; width:80px; height:112px; }
.off-copy { width:100%; padding-bottom:32px; display:flex; flex-direction:column; gap:8px; }
.off-title { font-size:24px; font-weight:600; color:var(--c-on-surface); line-height:1.2; }
.off-sub   { font-size:16px; font-weight:400; color:var(--c-on-surface); line-height:1.5; }
.off-btns  { width:100%; padding-bottom:24px; display:flex; flex-direction:column; gap:16px; }
.off-btn {
  width:100%; height:44px; border:none; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Inter',sans-serif; font-size:16px; font-weight:600; cursor:pointer;
  transition:transform 0.1s, opacity 0.1s;
}
.off-btn:active { transform:scale(0.97); opacity:0.85; }
.off-btn-primary   { background:var(--c-primary); color:var(--c-background); }
.off-btn-secondary { background:none; color:var(--c-on-surface); border:1.2px solid var(--c-outline); }

/* 19440:144900 "— With Content": la misma librería, sin cast/avatar y sin tab bar
   (el home indicator compartido ocupa su sitio). Variante por clase, no pantalla nueva. */
#downloads.offline .ml-appbar-icons { display:none; }
#downloads.offline .dl-tabbar { display:none; }   /* el frame offline no lleva tab bar */
#downloads.offline .dl-scroll { bottom:32px; }

/* 19440:144894 "Player — Offline Controls": sin AirPlay ni Chromecast (los dos huecos
   de 24px van vacíos en Figma) y título de película en una sola línea. */
#hplayer.hp-offline #hpAirplayBtn,
#hplayer.hp-offline #hpCastBtn { display:none; }
#hplayer.hp-offline .hp-title-sub { display:none; }

/* Empty state */
.dl-empty {
  position:absolute; top:123px; left:0; right:0; bottom:110px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 24px; text-align:center;
}
.dl-empty-icon { margin-bottom:32px; }
.dl-empty-title { font-size:24px; font-weight:600; color:var(--c-on-surface); line-height:1.2; margin-bottom:8px; }
.dl-empty-sub { font-size:16px; font-weight:400; color:var(--c-on-surface); line-height:1.5; margin-bottom:32px; }
.dl-empty-btn {
  width:100%; height:44px; background:var(--c-primary); color:var(--c-background);
  border:none; border-radius:8px; font-family:'Inter',sans-serif;
  font-size:16px; font-weight:600; cursor:pointer;
  transition:transform 0.1s, opacity 0.1s;
}
.dl-empty-btn:active { transform:scale(0.97); opacity:0.85; }

/* Tab bar / delete footer swap — cross-fade, no display:none (ambos son absolute
   a bottom:0, así que se solapan sin afectar al layout). */
.dl-tabbar {   /* gobierna la vuelta de la tab bar */
  display:block; opacity:1; transform:none;
  transition:opacity 0.3s ease, transform 0.38s cubic-bezier(0.4,0,0.2,1);
}
#downloads.managing .dl-tabbar, #downloadsShow.managing .dl-tabbar {
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity 0.24s ease, transform 0.34s cubic-bezier(0.32,0.72,0,1);
}
.dl-tab-mylist { position:absolute; right:0; top:0; width:79px; height:80px; cursor:pointer; }

/* Footer 100px = button 44px (flush top) + 24px gap + home indicator 32px (Figma 19440:144936) */
.dl-delete-footer {
  display:flex; position:absolute; left:0; right:0; bottom:0; height:100px;
  flex-direction:column; align-items:center; background:var(--c-background);
  padding:0 16px;
  opacity:0; transform:translateY(10px); pointer-events:none;
  /* gobierna la salida del footer */
  transition:opacity 0.3s ease, transform 0.38s cubic-bezier(0.4,0,0.2,1);
}
#downloads.managing .dl-delete-footer, #downloadsShow.managing .dl-delete-footer {
  opacity:1; transform:none; pointer-events:auto;
  transition:opacity 0.24s ease, transform 0.34s cubic-bezier(0.32,0.72,0,1);
}
.dl-delete-btn {
  width:100%; height:44px; margin-bottom:24px; border:none; border-radius:8px;
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-family:'Inter',sans-serif; font-size:16px; font-weight:600;
  background:var(--c-primary-disabled); color:var(--c-on-primary-disabled); cursor:not-allowed;
  transition:transform 0.1s, opacity 0.1s;
}
.dl-delete-btn.on { background:var(--c-primary); color:var(--c-background); cursor:pointer; }
.dl-delete-btn.on:active { transform:scale(0.99); opacity:0.9; }
.dl-delete-btn svg path { stroke:currentColor; }
.dl-footer-home { height:32px; display:flex; align-items:center; justify-content:center; }
.dl-footer-home::after {
  content:''; display:block; width:128px; height:6px;
  background:rgba(255,255,255,0.5); border-radius:9999px;
}

/* Action sheet — reuse .cw-sheet; header block for title+sub+status */
.dl-sheet-head { margin-bottom:28px; }
.dl-sheet-head .cw-sheet-title { margin-bottom:6px; }
.dl-sheet-sub { font-size:16px; font-weight:400; color:var(--c-on-surface); line-height:1.5; }
.dl-sheet-status { font-size:12px; font-weight:400; color:var(--c-on-surface-variant); line-height:1.5; margin-top:4px; }

/* Delete confirmation — iOS native alert (Figma 19440:144955)
   Overlay var(--c-background)@50%, glass box 300w r34, title 17/semibold, desc 17/#999,
   pill buttons rgba(118,118,128,0.4) py14 px20, Remove #ff383c. */
/* Confirmaciones de Downloads: también sobre .ndlg */

/* ═══════════════ EXPLORE — Genre + Collections (Figma 24097:124595) ═══════════════ */
.ex-screen { background:var(--c-background); }
.ex-appbar {
  position:absolute; top:59px; left:0; right:0; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; z-index:150; background:var(--c-background);
}
.ex-logo { width:120px; height:32px; object-fit:contain; object-position:left center; display:block; }
.ex-appbar-right { display:flex; align-items:center; gap:14px; }
.ex-scroll {
  position:absolute; top:123px; bottom:110px; left:0; right:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch; background:var(--c-background);
}
.ex-section-head {
  background:var(--c-surface); color:var(--c-on-surface-variant);
  font-family:'Inter',sans-serif; font-weight:600; font-size:24px; line-height:1.2;
  padding:16px;
}
.ex-group { border-top:1px solid rgba(255,255,255,0.08); }
.ex-row {
  display:block; width:100%; text-align:left;
  background:var(--c-background); border:none; border-bottom:1px solid rgba(255,255,255,0.08);
  color:var(--c-on-surface); font-family:'Inter',sans-serif; font-weight:600; font-size:16px; line-height:1.5;
  padding:12px 32px; cursor:pointer;
  transition:background 0.15s ease;
}
.ex-row:active { background:#1f1f1f; }
/* Sin hover: sólo feedback de pulsación (:active más abajo) */

/* ═══════════════ ACCOUNT — Settings landing (Figma 24097:125299) ═══════════════ */
.ac-screen { background:var(--c-background); }
.ac-appbar {
  position:absolute; top:59px; left:0; right:0; height:45px;
  display:flex; align-items:center; padding:0 8px; z-index:150; background:var(--c-background);
}
.ac-back {
  background:none; border:none; padding:8px; cursor:pointer; display:flex;
  align-items:center; justify-content:center; z-index:2;
}
.ac-title {
  position:absolute; left:0; right:0; text-align:center;
  color:#fff; font-family:'Inter',sans-serif; font-weight:600; font-size:18px;
  line-height:45px; pointer-events:none;
}
.ac-scroll {
  position:absolute; top:104px; bottom:0; left:0; right:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch; background:var(--c-background);
  padding:8px 24px 40px;
}
.ac-sec-label {
  color:var(--c-on-surface); font-family:'Inter',sans-serif; font-weight:600; font-size:14px;
  text-transform:uppercase; letter-spacing:0.04em; margin:16px 0 12px;
}
.ac-card { background:var(--c-surface); border-radius:8px; overflow:hidden; }
.ac-row {
  display:flex; align-items:center; gap:16px; width:100%;
  padding:16px; background:none; border:none; text-align:left;
  cursor:pointer; transition:background 0.15s ease; font-family:'Inter',sans-serif;
}
.ac-row-static { cursor:default; align-items:center; }
.ac-row-text { flex:1 0 0; min-width:0; }
.ac-row-title { color:var(--c-on-surface); font-weight:600; font-size:16px; line-height:1.5; }
.ac-row-sub { color:var(--c-on-surface-variant); font-weight:400; font-size:14px; line-height:1.5; }
.ac-row-sub b { color:var(--c-on-surface); font-weight:600; }
.ac-row-value { color:var(--c-on-surface); font-weight:400; font-size:16px; line-height:1.5; white-space:nowrap; }
.ac-div { height:1px; background:rgba(255,255,255,0.09); }
.ac-avatar {
  width:48px; height:48px; border-radius:50%; background:var(--c-primary-muted); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.ac-avatar span { color:var(--c-surface-container); font-weight:600; font-size:20px; }
.ac-chevron, .ac-ext { flex-shrink:0; }
.ac-apple {
  width:32px; height:32px; border-radius:8px; background:#48484A; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.ac-row:not(.ac-row-static):active { background:rgba(255,255,255,0.05); }

/* Toast de éxito flotante — va POR ENCIMA del contenido (Figma 24232:319312) */
.ac-banner {
  position:absolute; top:104px; left:24px; right:24px; z-index:250;
  display:flex; align-items:center; gap:12px;
  padding:13px; border-radius:8px; background:var(--c-success-container); border:1px solid var(--c-success);
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
  opacity:0; transform:translateY(-12px); pointer-events:none;
  transition:opacity 0.28s ease, transform 0.28s ease;
}
.ac-banner.show { opacity:1; transform:translateY(0); pointer-events:auto; }
.ac-banner-icon { flex-shrink:0; }
.ac-banner-text { flex:1; color:var(--c-success); font-family:'Inter',sans-serif; font-size:14px; font-weight:600; line-height:1.5; }
.ac-banner-close { background:none; border:none; cursor:pointer; padding:2px; color:var(--c-success); flex-shrink:0; }

/* ═══════════════ ACCOUNT · Edit forms (Change Name/Email/Password) ═══════════════ */
.af-screen { background:var(--c-background); }
.af-scroll {
  position:absolute; top:104px; bottom:150px; left:0; right:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 24px 24px;
}
.af-copy { color:var(--c-on-surface-variant); font-family:'Inter',sans-serif; font-size:16px; line-height:1.5; text-align:center; padding:4px 4px 24px; }
.af-scroll .fgroup { margin-bottom:24px; }
.af-help { color:var(--c-on-surface-variant); font-family:'Inter',sans-serif; font-size:14px; line-height:1.5; margin-top:8px; }
/* Error de campo (Figma 25862:822673 y hermanas). El campo en rojo lo pone .finput.err */
.af-err { display:none; color:var(--c-error); font-family:'Inter',sans-serif; font-size:14px;
  line-height:1.5; margin:8px 0 0; }
.af-err.show { display:block; }
.af-forgot { display:block; margin-left:auto; margin-top:12px; background:none; border:none; cursor:pointer;
  color:var(--c-primary); font-family:'Inter',sans-serif; font-size:14px; font-weight:600; }
.af-sep { height:1px; background:rgba(255,255,255,0.1); margin:20px 0 24px; }
.af-btnbar { position:absolute; left:0; right:0; bottom:30px; padding:0 24px; display:flex; flex-direction:column; align-items:center; }
.af-submit {
  width:100%; height:44px; border:none; border-radius:8px; background:var(--c-primary);
  color:var(--c-surface-container); font-family:'Inter',sans-serif; font-size:16px; font-weight:600;
  cursor:pointer; position:relative; pointer-events:none;
  transition:background 0.2s, color 0.2s;
  background:var(--c-surface-variant); color:var(--c-on-surface-variant);          /* disabled: surface-variant / on-surface-variant */
}
.af-submit.on { background:var(--c-primary); color:var(--c-surface-container); pointer-events:auto; }
.af-submit.loading .af-label { visibility:hidden; }
.af-submit .af-spin { display:none; }
.af-submit.loading .af-spin {
  display:block; position:absolute; inset:0; margin:auto; width:20px; height:20px;
  border:2.5px solid rgba(26,26,26,0.35); border-top-color:var(--c-surface-container); border-radius:50%;
  animation:af-spin 0.7s linear infinite;
}
@keyframes af-spin { to { transform:rotate(360deg); } }
.af-cancel { background:none; border:none; color:var(--c-primary); font-family:'Inter',sans-serif;
  font-size:16px; font-weight:600; cursor:pointer; padding:16px; margin-top:16px; }
#changeName .finput, #changeEmail .finput, #changePassword .finput { cursor:pointer; }

/* ═══════════════ PLAN & BILLING (Figma 24232:319151) ═══════════════ */
.pl-screen { background:var(--c-background); }
.pl-scroll { position:absolute; top:104px; bottom:150px; left:0; right:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 24px 24px; }
.pl-copy { color:var(--c-on-surface-variant); font-family:'Inter',sans-serif; font-size:16px; line-height:1.5; text-align:center; padding:4px 4px 24px; }
.pl-seg { position:relative; display:flex; gap:4px; background:var(--c-surface);
  border-radius:10px; padding:4px; margin-bottom:20px; }
/* La pastilla se desliza entre Monthly y Annual en vez de saltar: --seg-i lleva
   el indice del segmento activo y lo pone el JS al pulsar. */
.pl-seg::before {
  content:''; position:absolute; z-index:0; top:4px; bottom:4px; left:4px;
  width:calc(50% - 6px); border-radius:7px; background:var(--c-seg-active);
  transform:translateX(calc(var(--seg-i, 0) * (100% + 4px)));
  transition:transform .26s cubic-bezier(0.4,0,0.2,1);
}
.pl-seg-btn { position:relative; z-index:1; flex:1; height:37px; border:none; border-radius:7px;
  background:none; color:var(--c-on-surface-variant);
  font-family:'Inter',sans-serif; font-size:14px; font-weight:600; cursor:pointer; transition:color .18s; }
.pl-seg-btn.active { background:none; color:var(--c-surface-container); }
.pl-cards { display:flex; flex-direction:column; gap:16px; }
.pl-card, .pl-compact, .pl-review {
  display:flex; align-items:flex-start; gap:16px; width:100%; text-align:left;
  background:var(--c-surface); border:1px solid var(--c-outline); border-radius:8px; padding:17px; cursor:pointer;
}
.pl-card { transition:border-color .18s, background .18s; }
.pl-card.sel { border-color:var(--c-primary); background:var(--c-primary-tint); }
.pl-card-info, .pl-compact-info { flex:1 0 0; min-width:0; }
.pl-card-name, .pl-compact-name { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:18px; font-weight:400; line-height:1.5; margin-bottom:4px; }
.pl-card-pricerow, .pl-compact-pricerow { display:flex; align-items:flex-end; gap:6px; flex-wrap:wrap; }
.pl-card-price { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:24px; font-weight:600; line-height:1.2; }
.pl-card-per { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:14px; line-height:1.6; }
.pl-card-was { color:var(--c-on-surface-variant); font-family:'Inter',sans-serif; font-size:14px; line-height:1.6; }
.pl-card-offer { color:var(--c-primary); font-family:'Inter',sans-serif; font-size:12px; font-weight:700; letter-spacing:.06em; margin-top:6px; }
.pl-card-note { color:var(--c-on-surface-variant); font-family:'Inter',sans-serif; font-size:14px; line-height:1.5; margin-top:4px; }
.pl-radio { flex-shrink:0; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--c-primary);
  display:flex; align-items:center; justify-content:center; }
.pl-radio.on { background:var(--c-primary); border-color:var(--c-primary); }
.pl-compact { cursor:default; align-items:center; }
#planConfirm .pl-compact { margin-bottom:16px; }   /* separación entre plan actual y nuevo */
.pl-current-badge {
  flex-shrink:0; align-self:flex-start; background:var(--c-primary); color:var(--c-surface-container);
  font-family:'Inter',sans-serif; font-size:11px; font-weight:700; letter-spacing:.04em;
  padding:4px 8px; border-radius:6px; white-space:nowrap;
}
.pl-review { cursor:default; background:var(--c-primary-tint); border-color:var(--c-primary); position:relative; }
.pl-review-body { flex:1 0 0; min-width:0; width:100%; }
.pl-review-check { position:absolute; top:17px; right:17px; }
.pl-review-div { height:1px; background:rgba(255,255,255,0.12); margin:12px 0 10px; }
.pl-review-line { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:14px; line-height:1.5; }
/* Éxito "You're all set!" */
.pl-done { position:absolute; top:104px; bottom:0; left:0; right:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:24px 32px; }
.pl-done-icon { display:block; margin-bottom:24px; }
.pl-done-title { color:#fff; font-family:'Inter',sans-serif; font-size:24px; font-weight:700; margin-bottom:8px; }
.pl-done-sub { color:var(--c-on-surface-variant); font-family:'Inter',sans-serif; font-size:16px; line-height:1.5; max-width:320px; margin-bottom:32px; }
.pl-done-btn { width:100%; max-width:342px; height:48px; border:none; border-radius:8px; background:var(--c-primary);
  color:var(--c-surface-container); font-family:'Inter',sans-serif; font-size:16px; font-weight:600; cursor:pointer; }
/* Action sheet de error */
.pl-sheet { position:absolute; inset:0; z-index:400; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.6); padding:24px; }
.pl-sheet.show { display:flex; }
.pl-sheet-card { width:100%; max-width:342px; background:var(--c-surface); border-radius:16px; padding:28px 24px;
  display:flex; flex-direction:column; align-items:center; text-align:center; }
.pl-sheet-icon { display:block; margin-bottom:20px; }
/* heading/m = 24 · body/l = 16, igual que el resto de tarjetas de error */
.pl-sheet-title { color:#fff; font-family:'Inter',sans-serif; font-size:24px; font-weight:600;
  line-height:1.2; margin-bottom:8px; }
.pl-sheet-sub { color:var(--c-on-surface-variant); font-family:'Inter',sans-serif; font-size:16px; line-height:1.5; margin-bottom:24px; }
.pl-sheet-btn { width:100%; height:48px; border:none; border-radius:8px; background:none; color:var(--c-primary);
  font-family:'Inter',sans-serif; font-size:16px; font-weight:600; cursor:pointer; }
.pl-sheet-btn.primary { background:var(--c-primary); color:var(--c-surface-container); margin-bottom:4px; }

/* ═══════════════ UPSELL — Unlock Premier (Figma 25578:422152) ═══════════════ */
.up-screen { background:var(--c-background); }
.up-scroll { position:absolute; top:104px; bottom:0; left:0; right:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 24px 250px; }
/* Footer con degradado (Figma "Button Footer" 25578:422178) — el contenido pasa por detrás */
.up-footer {
  position:absolute; left:0; right:0; bottom:0; padding:32px 24px 26px;
  display:flex; flex-direction:column; gap:16px; align-items:stretch;
  background:linear-gradient(to top, var(--c-background) 70%, rgba(var(--c-background-rgb),0.5) 85%, rgba(var(--c-background-rgb),0) 100%);
}
.up-cancel-outline {
  width:100%; height:44px; border:1.2px solid var(--c-outline); border-radius:8px; background:none;
  color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:16px; font-weight:600; cursor:pointer;
}
.up-footer-note { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:12px; line-height:1.5; margin:0; }
.up-copy-title { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:24px; font-weight:600; line-height:1.2; text-align:center; }
.up-copy-sub { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:16px; line-height:1.5; text-align:center; margin:8px 0 32px; }
.up-plan { background:var(--c-surface); border:1px solid var(--c-outline); border-radius:8px; padding:17px; margin-bottom:16px; }
/* El fondo era #3a341a: el amarillo ya mezclado con el fondo, horneado en un hex
   plano. Expresado como primary translúcido, igual que la celda de la tabla. */
.up-plan-prem { background:var(--c-primary-tint); border-color:var(--c-primary); }
.up-plan-info { width:100%; }
.up-plan-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.up-plan-name { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:18px; line-height:1.5; }
.up-tag { align-self:auto; text-transform:uppercase; }
.up-table-title { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:16px; font-weight:600; text-align:center; margin:8px 0 16px; }
.up-table { width:100%; background:var(--c-background); border-radius:8px; overflow:hidden; }
.up-trow { display:grid; grid-template-columns:130px 1fr 1fr; }
.up-tcell {
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:12px; min-height:50px; box-sizing:border-box;
  border-bottom:1px solid rgba(255,255,255,0.05);
  font-family:'Inter',sans-serif; font-size:14px; color:var(--c-on-surface); line-height:1.3;
}
.up-trow-last .up-tcell { border-bottom:none; }
.up-tcell.up-tfeat { justify-content:flex-start; text-align:left; background:var(--c-surface); }
.up-tcell.up-tprem { background:rgba(var(--c-primary-rgb),0.2); }
.up-thead .up-tcell { min-height:60px; font-weight:600; }
.up-thead .up-tfeat { color:var(--c-on-surface-variant); }
.up-tdash { color:var(--c-on-surface-variant); }
.up-check { display:block; }
/* La hoja de pago del upsell es ahora la compartida #applePaySheet (ver bloque APPLE PAY). */
/* Welcome to Premier (Figma 25578:422193) — Hero 390×585 fundido a negro; el bloque de
   texto arranca en y=314 (Main Content Body) y debajo del botón la pantalla es negra. */
/* Mismo caso que el onboarding: el negro puro dejaba la mitad inferior en
   negro sobre el azul de BritBox. Al token, y cada marca funde contra el suyo. */
.up-welcome { background:var(--c-background); }
.up-welcome-hero { position:absolute; top:0; left:0; right:0; height:585px; }
.up-welcome-hero img { width:100%; height:100%; object-fit:cover; display:block; }
.up-welcome-fade { position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 12%, rgba(var(--c-background-rgb),0.5) 33%, var(--c-background) 52%); }
.up-welcome-body { position:absolute; top:314px; left:16px; right:16px; text-align:center; }
.up-welcome-title { color:#fff; font-family:'Inter',sans-serif; font-size:24px; font-weight:600; margin-bottom:8px; }
.up-welcome-sub { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:16px; line-height:1.5; margin-bottom:20px; }
.up-welcome-body .pl-done-btn { max-width:none; height:48px; }
/* Variante "Subscription Success" (Figma 25578:422233): el bloque de texto baja a y=627 */
.up-welcome-low .up-welcome-fade { background:linear-gradient(to bottom, transparent 46%, rgba(var(--c-background-rgb),0.5) 68%, var(--c-background) 86%); }
.up-welcome-low .up-welcome-body { top:627px; }

/* ═══════════════ UPSELL — Secondary flow (Figma 25578:422186) ═══════════════ */
.us2-body { position:absolute; top:127px; left:24px; right:24px; }
.us2-title { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:22px; font-weight:600; line-height:1.3; margin-bottom:12px; }
.us2-copy { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:16px; line-height:1.5; margin:0 0 16px; }
.us2-list { margin:0 0 24px; padding-left:22px; color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:16px; line-height:1.5; }
.us2-link { display:block; width:100%; text-align:left; background:none; border:none; padding:0; margin-bottom:24px;
  color:var(--c-primary); font-family:'Inter',sans-serif; font-size:16px; font-weight:600; cursor:pointer; }
.us2-ok { height:48px; }

/* ═══════ ERRORES DE APP · sección 19.4 (Figma 25862:821067 / 821080 / 821087) ═══════
   Session expired y Update required son páginas; el genérico recuperable es una hoja.
   Comparten el bloque icono + título + copy + meta + CTA + botón de texto. */
.aerr-page { background:var(--c-background); }
.aerr-brand { position:static; }
.aerr-body { position:absolute; top:104px; bottom:0; left:24px; right:24px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.aerr-icon { display:block; }
/* heading/m = 24 · body/l = 16: la escala del sistema, no una aproximación */
.aerr-title { color:#fff; font-family:'Inter',sans-serif; font-size:24px; font-weight:600;
  line-height:1.2; margin-top:28px; }
.aerr-copy { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:16px; line-height:1.5; margin:10px 0 0; }
.aerr-meta { color:var(--c-outline); font-family:'Inter',sans-serif; font-size:13px; margin-top:10px; }
.aerr-cta { margin-top:26px; }
.aerr-body .sb-btn-text { margin-top:16px; }   /* Cancel iba pegado al CTA */

/* ══════════════════════════════════════════════
   SIGN OUT (Figma 28204:448749)
   Hoja de confirmación (28204:448645) + pantalla de error (28204:448648).
══════════════════════════════════════════════ */
/* Error: espaciado exacto del frame — icono 80 +32, título 29, +8 copy, +32 CTA */
.aerr-body.so-err .aerr-title { margin-top:32px; }
.aerr-body.so-err .aerr-copy  { margin-top:8px; }
.aerr-body.so-err .aerr-cta   { margin-top:32px; }

.so-sheet { padding-bottom:0; }
.so-title {
  color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:24px; font-weight:600;
  line-height:1.2; text-align:center;
}
.so-sub {
  color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:16px; font-weight:400;
  line-height:1.5; text-align:center; margin:8px 0 32px;
}
.so-btn {
  display:block; width:100%; height:44px; border:none; border-radius:8px;
  font-family:'Inter',sans-serif; font-size:16px; font-weight:600;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.so-btn-primary { background:var(--c-primary); color:var(--c-background); }
.so-btn-alt {
  background:none; border:1px solid var(--c-outline); color:var(--c-on-surface);
  margin-top:16px; margin-bottom:24px;
}
.so-btn:active { opacity:0.7; }
.aerr-sheet { position:absolute; inset:0; z-index:360; display:none;
  align-items:flex-end; background:rgba(0,0,0,0.5); }
.aerr-sheet.show { display:flex; }
.aerr-sheet-panel { width:100%; background:var(--c-surface); border-radius:14px 14px 0 0;
  padding:0 24px 30px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.aerr-sheet-panel .aerr-icon { margin-top:24px; }
.aerr-sheet-panel .aerr-title { margin-top:22px; font-size:20px; }

/* ═══════ Lista de episodios: cargando / error (Figma 25862:821579 / 821597) ═══════
   Sustituyen a la lista dentro de .se-episodes; el desplegable de temporada se queda. */
.se-ep-loading, .se-ep-error { display:none; }
.screen.ep-loading .se-ep-loading { display:flex; align-items:center; justify-content:center; padding:64px 0; }
.screen.ep-error   .se-ep-error   { display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:56px 24px 72px; }
/* En ambos estados desaparecen la lista, la nota de temporada y el separador */
.screen.ep-loading .se-ep-list, .screen.ep-error .se-ep-list,
.screen.ep-loading .se-season-note, .screen.ep-error .se-season-note { display:none; }
.se-ep-ring { width:40px; height:40px; border-radius:50%; border:4px solid rgba(255,255,255,0.28);
  border-top-color:var(--c-primary); animation:af-spin .9s linear infinite; }
.se-ep-err-title { color:#fff; font-family:'Inter',sans-serif; font-size:20px; font-weight:600; margin-top:24px; }
.se-ep-err-sub { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:15px; line-height:1.5; margin:8px 0 0; }

/* ═══════════════ PAYWALL (Figma 25862:821039 / 821057 / 822296 / 822319) ═══════════════ */
.pw-screen { background:var(--c-background); }
/* El wordmark es el asset de marca, no texto suelto (feedback Sep 11) */
.pw-brand { position:absolute; top:68px; left:50%; transform:translateX(-50%); z-index:3;
  width:132px; height:44px; object-fit:contain; display:block; }
.aerr-brand { position:static; transform:none; margin:0 auto; }
.ac-title-logo { width:120px; height:40px; object-fit:contain; display:block; margin:0 auto; }
.pw-hero { position:absolute; top:0; left:0; right:0; height:470px; }
.pw-hero img { width:100%; height:100%; object-fit:cover; display:block; }
.pw-hero-fade { position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(var(--c-background-rgb),0.35) 0%, rgba(var(--c-background-rgb),0.1) 25%, rgba(var(--c-background-rgb),0.75) 70%, var(--c-background) 100%); }
.pw-body { position:absolute; left:24px; right:24px; bottom:106px; z-index:2; text-align:center; }
.pw-title { color:#fff; font-family:'Inter',sans-serif; font-size:24px; font-weight:600; line-height:1.25; }
.pw-sub { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:16px; line-height:1.5; margin:8px 0 0; }
.pw-btn-primary, .pw-btn-outline { width:100%; height:44px; border-radius:8px; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:16px; font-weight:600; }
.pw-btn-primary { border:none; background:var(--c-primary); color:var(--c-background); margin-top:28px; }
.pw-btn-outline { background:none; border:1px solid var(--c-outline); color:var(--c-on-surface); margin-top:16px; }
.pw-promo { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:15px; margin-top:22px; }
.pw-promo-link { background:none; border:none; padding:0; margin-top:12px; cursor:pointer;
  color:var(--c-primary); font-family:'Inter',sans-serif; font-size:15px; font-weight:600; }
/* Variante "Web Register" (821057): tarjeta con la URL y sólo Sign In */
.pw-webcard { display:none; background:var(--c-surface); border-radius:8px; padding:14px 16px; margin-top:24px; }
.pw-webcard-t { display:block; color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:15px; line-height:1.4; }
.pw-webcard-url { display:block; width:100%; margin-top:4px; background:none; border:none; padding:0; cursor:pointer;
  color:var(--c-primary); font-family:'Inter',sans-serif; font-size:15px; font-weight:600; }
.pw-screen.pw-web .pw-webcard { display:block; }
.pw-screen.pw-web .pw-sub,
.pw-screen.pw-web .pw-btn-primary,
.pw-screen.pw-web .pw-promo,
.pw-screen.pw-web .pw-promo-link { display:none; }
/* Variante "Out of country" (25862:820920): el mismo paywall sin CTA, con el bloque
   de bloqueo geográfico y el pie de ayuda. */
.pw-ooc { display:none; }
.pw-ooc-title { color:#fff; font-family:'Inter',sans-serif; font-size:22px; font-weight:600; margin-top:26px; }
.pw-ooc-copy { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:15px; line-height:1.5; margin:10px 0 0; }
.pw-help { display:none; }
.pw-screen.pw-ooc-on .pw-ooc { display:block; }
.pw-screen.pw-ooc-on .pw-help { display:flex; }
.pw-screen.pw-ooc-on .pw-body { bottom:104px; }
.pw-screen.pw-ooc-on .pw-title,
.pw-screen.pw-ooc-on .pw-sub,
.pw-screen.pw-ooc-on .pw-webcard,
.pw-screen.pw-ooc-on .pw-btn-primary,
.pw-screen.pw-ooc-on .pw-btn-outline,
.pw-screen.pw-ooc-on .pw-promo,
.pw-screen.pw-ooc-on .pw-promo-link { display:none; }
/* ── Diálogo nativo (Figma 25862:822305) — componente reutilizable ──
   295×198, radio 24, texto alineado a la IZQUIERDA y pills al ancho de su contenido
   (no repartidas al 50%), que era el error de mi primera versión. */
.ndlg { position:absolute; inset:0; z-index:340; display:none;
  align-items:center; justify-content:center; background:rgba(0,0,0,0.4); }
/* .visible es el nombre que ya usaban las confirmaciones de CW y Downloads */
.ndlg.show, .ndlg.visible { display:flex; }

/* ── Alertas del sistema ──────────────────────────────────────────────────
   Esto es chrome de iOS, no de la app: ni se tiñe con la marca ni usa Inter.
   Medidas de UIAlertController en oscuro: 270pt de ancho, radio 14, material
   translucido, titulo 17 semibold, mensaje 13, y los botones separados por
   hairlines de medio punto, en azul del sistema. Identico en ambas marcas. */
.ndlg-card {
  width:270px; box-sizing:border-box; overflow:hidden;
  border-radius:14px; background:rgba(44,44,46,0.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif;
  animation:ndlgIn 0.22s cubic-bezier(0.34,1.3,0.64,1);
}
@keyframes ndlgIn { from { opacity:0; transform:scale(0.92); } to { opacity:1; transform:scale(1); } }
.ndlg-title { padding:19px 16px 0; text-align:center; color:#fff;
  font-family:inherit; font-size:17px; font-weight:600; line-height:22px; }
.ndlg-copy { padding:2px 16px 0; text-align:center; color:#fff; max-width:none;
  font-family:inherit; font-size:13px; font-weight:400; line-height:18px; margin:2px 0 0; }
.ndlg-btns { display:flex; gap:0; margin-top:19px;
  border-top:0.5px solid rgba(255,255,255,0.22); }
.ndlg-btn { flex:1; height:44px; padding:0 8px; border:none; border-radius:0; cursor:pointer;
  background:transparent; color:#0A84FF;
  font-family:inherit; font-size:17px; font-weight:400; line-height:22px; }
.ndlg-btn + .ndlg-btn { border-left:0.5px solid rgba(255,255,255,0.22); }
/* iOS marca en semibold la accion preferente y en rojo la destructiva */
.ndlg-btn.ndlg-alt { font-weight:600; }
.ndlg-btn.ndlg-danger { color:#FF453A; }
.ndlg-btn:active { background:rgba(255,255,255,0.12); }
/* Tres o mas acciones: iOS las apila */
.ndlg-btns.ndlg-stack { flex-direction:column; }
.ndlg-btns.ndlg-stack .ndlg-btn + .ndlg-btn {
  border-left:none; border-top:0.5px solid rgba(255,255,255,0.22); }
#paywallAge .pw-brand { z-index:3; }

/* ═══════════ GENRE / COLLECTION (Figma 25862:820723) ═══════════
   Sub-pantalla empujada: sin tab bar, sólo flecha atrás sobre el héroe. La altura del
   héroe depende de la proporción del arte: .r169 (25862:820528) o .r11 (25862:820535). */
.gp-screen { background:var(--c-background); }
.gp-back { position:absolute; top:63px; left:8px; z-index:160; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; padding:0; cursor:pointer; }
.gp-scroll { position:absolute; top:59px; bottom:0; left:0; right:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch; }
/* Igual que el heroe de las fichas (Figma "Content Hero"): arranca bajo la
   barra de estado y con las esquinas superiores redondeadas. A escuadra y con
   una foto clara se veia un canto duro justo bajo el reloj. */
.gp-hero { position:relative; width:100%; border-radius:20px 20px 0 0; overflow:hidden; }
.gp-hero.r169 { height:236px; }
.gp-hero.r11  { height:407px; }
.gp-hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.gp-hero-fade { position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.55) 72%, var(--c-background) 100%); }
.gp-hero-body { position:absolute; left:0; right:0; bottom:0; padding:0 24px 16px; }
.gp-desc { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:16px; line-height:1.5; margin:0; }
/* El heroe necesita aire antes del primer rail: a 8 el texto de la
   portada quedaba pegado al titular de la seccion. */
#genrePage .sections-wrap { padding-top:20px; }

/* ═══════════════ ONBOARDING (Figma 25578:422136 / 422128) ═══════════════ */
.ob-screen { background:var(--c-background); }
/* TODO scrollea junto: hero, titular y rejilla van dentro de .ob-scroll y sólo
   el footer del CTA queda flotando. */
/* z-index:0 crea contexto de apilado propio: así los z-index de dentro (hero/rejilla)
   no compiten con el footer del CTA, que debe quedar por encima de las cards. */
.ob-scroll { position:absolute; inset:0; z-index:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.ob-hero { position:absolute; top:0; left:0; right:0; height:585px; z-index:0; overflow:hidden; }
/* El diseno pone arriba un collage de carteles ladeados, no una sola foto. */
.ob-hero img { position:absolute; width:150px; height:225px; object-fit:cover;
  border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.5); display:block; }
.ob-hero img:nth-of-type(1) { left:-26px;  top:18px;  transform:rotate(-9deg); }
.ob-hero img:nth-of-type(2) { left:118px;  top:-28px; transform:rotate(5deg); }
.ob-hero img:nth-of-type(3) { left:262px;  top:22px;  transform:rotate(11deg); }
.ob-hero img:nth-of-type(4) { left:-40px;  top:208px; transform:rotate(7deg); }
.ob-hero img:nth-of-type(5) { left:104px;  top:176px; transform:rotate(-5deg); }
.ob-hero img:nth-of-type(6) { left:252px;  top:214px; transform:rotate(-12deg); }
/* El velo del collage y el del pie iban en negro puro: en Streamit se notaba
   poco sobre #121212, pero en BritBox cortaba el azul con una banda negra. Van
   al token de fondo, asi que cada marca funde contra el suyo. */
.ob-hero-fade { position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 8%, rgba(var(--c-background-rgb),0.55) 32%, var(--c-background) 50%); }
/* Bloque "Welcome to STREAMIT" (Onboarding Dialog y=280) + copy (y=401); la rejilla
   empieza en 441, así que .ob-top reserva esa altura sobre el hero. */
.ob-top { position:relative; z-index:1; height:441px; }
.ob-head { position:absolute; top:280px; left:16px; right:16px; text-align:center; }
.ob-welcome { color:#fff; font-family:'Inter',sans-serif; font-size:24px; font-weight:600; line-height:1.3; }
.ob-brand { color:var(--c-primary); font-family:'Inter',sans-serif; font-size:34px; font-weight:800; letter-spacing:.01em; margin-top:6px; }
.ob-copy { position:absolute; top:401px; left:16px; right:16px; margin:0;
  color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:16px; line-height:1.5; }
/* Rejilla 3×3 de cards 111×167 (Section - Onboarding Grid Content) */
.ob-grid {
  position:relative; z-index:1; margin:0 16px; padding-bottom:150px;
  display:grid; grid-template-columns:repeat(3, 111px); gap:12px; justify-content:space-between;
}
.ob-card { position:relative; width:111px; height:167px; padding:0; border:none; border-radius:8px;
  overflow:hidden; background:var(--c-surface); cursor:pointer; }
.ob-card img { width:100%; height:100%; object-fit:cover; display:block; }
/* La etiqueta del rail es para cards de 144: en 111 hay que encogerla */
.ob-card .ml-rail-poster-label {
  left:4px; right:4px; bottom:4px; width:auto; max-width:none; transform:none;
  font-size:8px; line-height:1.2; padding:3px 4px; text-align:center;
  white-space:normal; overflow-wrap:break-word;
}
.ob-pick {
  position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:50%;
  box-sizing:border-box; background:var(--c-surface); border:1px solid rgba(var(--c-primary-rgb),0.3);
  display:flex; align-items:center; justify-content:center;
}
.ob-pick::before {
  content:''; width:18px; height:18px; background:var(--c-primary);
  -webkit-mask:no-repeat center/18px 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M9 3.2v11.6M3.2 9h11.6' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask:no-repeat center/18px 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M9 3.2v11.6M3.2 9h11.6' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.ob-card.picked .ob-pick { background:var(--c-primary); border-color:var(--c-primary); }
.ob-card.picked .ob-pick::before {
  background:var(--c-background);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M3.6 9.4l3.6 3.6L14.4 5.6' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M3.6 9.4l3.6 3.6L14.4 5.6' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ob-footer { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:40px 16px 30px;
  background:linear-gradient(to top, var(--c-background) 66%, rgba(var(--c-background-rgb),0.6) 86%, rgba(var(--c-background-rgb),0) 100%); }
.ob-cta { max-width:none; height:48px; }
/* Variante "Recommendations Off": copy de 3 líneas + CTA en el propio bloque (y=310) */
.ob-off .ob-head { top:310px; }
.ob-off-copy { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:16px; line-height:1.5; margin:16px 0 20px; }

/* Demo control: usuario suscrito / no suscrito */
#unsubToggle {
  position:fixed; right:28px; bottom:80px; z-index:9999;
  display:flex; align-items:center; gap:8px; cursor:pointer;
  background:#1c1c1c; border:1px solid rgba(255,255,255,0.15); border-radius:12px;
  padding:10px 14px; font-family:'Inter',sans-serif; font-size:14px; font-weight:600; color:#EDEDED;
  box-shadow:0 4px 28px rgba(0,0,0,0.6); transition:color .15s, border-color .15s;
}
#unsubToggle .unsub-tog-ic { color:#4ADE80; }
#unsubToggle.on { border-color:rgba(255,255,255,0.35); }
#unsubToggle.on .unsub-tog-ic { color:#EDEDED; }

/* ═══════════════ SUBSCRIPTION — Plan selection + IAP (Figma 25578:422040) ═══════════════ */
.sb-screen { background:var(--c-background); }
.ac-title.brand { color:var(--c-primary); font-weight:700; font-size:20px; letter-spacing:.02em; }
/* El footer flota sobre el scroll (Figma "Button Footer" 228px) */
/* El respiro de abajo lo pone el pie, no el contenedor: si lo pusiera aqui,
   al llegar al final del scroll el pie se despegaria esos 34px del borde. */
.sb-scroll { position:absolute; top:104px; bottom:0; left:0; right:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 24px 0; }
.sb-title { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:24px; font-weight:600; line-height:1.2; text-align:center; }
.sb-sub { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:16px; line-height:1.5; text-align:center; margin:8px 0 24px; }
/* Tarjeta de plan: reutiliza .pl-card. El CONTENIDO es fijo por plan (Premier lleva su
   checklist, los demás su descripción); seleccionar sólo cambia el ESTADO (borde/fondo/radio). */
#subPlans .pl-card { flex-direction:column; align-items:stretch; gap:0; }
.sb-card-top { display:flex; align-items:flex-start; gap:16px; }
.sb-desc { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:14px; line-height:1.5; margin:12px 0 0; }
.sb-feats { margin-top:16px; }
.sb-feat { position:relative; padding-left:32px; margin-top:12px; }
.sb-feat:first-child { margin-top:0; }
.sb-feat::before {
  content:''; position:absolute; left:0; top:2px; width:20px; height:20px;
  background:var(--c-primary);
  -webkit-mask:no-repeat center/20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10.5l4 4 8-9' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask:no-repeat center/20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10.5l4 4 8-9' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sb-feat span { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:14px; line-height:1.5; }
/* Boton y letra pequeña van fijos al fondo (node 22892:324291): el pie es
   hermano del contenido en el diseño, no parte de el. Sticky en vez de absolute
   para que siga ocupando su hueco en el flujo — asi la ultima tarjeta nunca
   queda debajo y no hay que medir el alto del pie en ningun sitio. El fondo es
   el token de la pantalla, de modo que cada marca trae el suyo. */
.sb-footer {
  position:sticky; bottom:0; z-index:2;
  /* El contenedor del diseño va a sangre, no metido en el margen del listado:
     los margenes negativos cancelan los 24px del scroll y el pie pone los suyos,
     de modo que el degradado llega a los dos bordes. */
  margin:0 -24px;
  padding:32px 24px 34px;
  /* No es un bloque macizo: las tarjetas se desvanecen por detras. Tres paradas,
     las del diseño (node 22892:324296) — fondo hasta el 70%, fondo al 50% en el
     85%, y transparente arriba. Con el token RGB, cada marca trae el suyo. */
  background:linear-gradient(to top,
    var(--c-background) 70%,
    rgba(var(--c-background-rgb),0.5) 85%,
    rgba(var(--c-background-rgb),0) 100%);
}
.sb-cta {
  width:100%; height:44px; border:none; border-radius:8px; background:var(--c-primary); color:var(--c-surface-container);
  font-family:'Inter',sans-serif; font-size:16px; font-weight:600; cursor:pointer; position:relative;
  pointer-events:none; transition:background .2s, color .2s;
  background:var(--c-surface-variant); color:var(--c-on-surface-variant);          /* disabled, no transparente */
}
.sb-cta.on { background:var(--c-primary); color:var(--c-surface-container); pointer-events:auto; }
.sb-cta.loading .af-label { visibility:hidden; }
.sb-cta .af-spin { display:none; }
.sb-cta.loading .af-spin {
  display:block; position:absolute; inset:0; margin:auto; width:20px; height:20px;
  border:3px solid rgba(26,26,26,0.3); border-top-color:var(--c-surface-container); border-radius:50%;
  animation:af-spin .7s linear infinite;
}
.sb-legal { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:12px; line-height:1.5; margin:16px 0 0; }
/* Processing payment (25578:422059)
   La pantalla entraba de golpe y el aro giraba a .9s: para una espera de dos
   segundos largos quedaba atropellado. Ahora el bloque se asienta con un fundido
   corto y el aro gira mas despacio — la marca que no define giro usa este ritmo;
   BritBox trae el suyo mas abajo. */
.sb-load { position:absolute; top:104px; bottom:0; left:0; right:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; }
.screen.active .sb-load { animation:sbLoadIn 0.55s cubic-bezier(0.22,0.61,0.36,1) both; }
@keyframes sbLoadIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:none; }
}
.sb-ring { width:64px; height:64px; border-radius:50%; border:5px solid var(--c-outline); border-right-color:var(--c-primary);
  animation:af-spin 1.15s linear infinite; }
.sb-load-msg { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:16px; font-weight:500; }
@media (prefers-reduced-motion: reduce) {
  .screen.active .sb-load { animation:none; }
}
/* Estado de error (25578:422145) */
.sb-state { position:absolute; top:104px; bottom:90px; left:0; right:0; padding:0 24px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.sb-state-icon { display:block; margin-bottom:30px; }
.sb-state-title { color:var(--c-on-surface); font-family:'Inter',sans-serif; font-size:24px; font-weight:600; line-height:1.2; margin-bottom:8px; }
.sb-state-sub { color:var(--c-on-surface-variant); font-family:'Inter',sans-serif; font-size:16px; line-height:1.5; margin:0 0 32px; }
.sb-btns { width:100%; display:flex; flex-direction:column; gap:8px; }
.sb-btn-primary { width:100%; height:44px; border:none; border-radius:8px; background:var(--c-primary); color:var(--c-surface-container);
  font-family:'Inter',sans-serif; font-size:16px; font-weight:600; cursor:pointer; }
.sb-btn-text { width:100%; height:44px; background:none; border:none; color:var(--c-primary);
  font-family:'Inter',sans-serif; font-size:16px; font-weight:600; cursor:pointer; }
.sb-help { position:absolute; left:0; right:0; bottom:0; height:90px; padding-bottom:26px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  border-top:1px solid rgba(255,255,255,0.08);
  font-family:'Inter',sans-serif; font-size:14px; color:var(--c-on-surface-variant); }
.sb-help-link { background:none; border:none; padding:0; color:var(--c-primary);
  font-family:'Inter',sans-serif; font-size:14px; font-weight:600; cursor:pointer; }

/* ═══════════════ APPLE PAY — hoja de pago nativa (Figma 25578:422070) ═══════════════ */
.ap-sheet { position:absolute; inset:0; z-index:420; display:none; }
.ap-sheet.show { display:block; }
.ap-dim { position:absolute; inset:0; background:rgba(0,0,0,0.5); }
/* Aviso "Double Click to Pay" apuntando al botón lateral del iPhone */
.ap-sidebtn { position:absolute; top:269px; right:0; width:4px; height:73px; border-radius:2px 0 0 2px; background:#fff; }
.ap-hint { position:absolute; top:291px; right:22px; text-align:right;
  color:#fff; font-size:17px; font-weight:600; line-height:1.25;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif; }
/* La hoja la pinta el sistema, no la app: ni un solo token --c-* de aqui en
   adelante, igual que en los dialogos nativos. Los valores son los del modo
   oscuro de iOS — fondo systemGray6, celdas systemGray5, etiquetas secundaria
   y terciaria sobre blanco roto, separador del sistema y azul #0A84FF. Asi la
   hoja sale identica en Streamit y en BritBox, que es justo lo que pasa en el
   telefono. La unica marca que entra es el icono del comercio, porque ese si
   es de quien cobra. */
.ap-card {
  position:absolute; left:0; right:0; bottom:0;
  background:#1C1C1E; border-radius:13px 13px 0 0; padding:16px 16px 0;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif;
}
.ap-head { display:flex; align-items:center; justify-content:space-between; margin:0 4px 16px; }
.ap-x { width:30px; height:30px; border-radius:50%; border:none; background:#2C2C2E; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ap-x:active { background:#3A3A3C; }
.ap-row { display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:#2C2C2E; border:none; border-radius:12px; padding:14px 16px; margin-bottom:12px; }
.ap-row-btn { cursor:pointer; }
.ap-row-btn:active { background:#3A3A3C; }
.ap-cardart { width:36px; height:24px; border-radius:4px; flex-shrink:0;
  background:linear-gradient(115deg,#e8a0c8,#b9a6e8 32%,#f3d269 72%,#f7ef9a); }
.ap-row-t { flex:1; min-width:0; color:#fff; font-family:inherit; font-size:17px; font-weight:400;
  letter-spacing:-0.41px; }
.ap-row-r { flex-shrink:0; color:rgba(235,235,245,0.6); font-family:inherit; font-size:17px;
  letter-spacing:.04em; }
.ap-merchant { display:block; padding:16px 16px 0; margin-bottom:0; }
.ap-m-head { display:flex; align-items:center; gap:12px; }
/* El cuadro del comercio es lo unico de marca: en el telefono seria el icono de
   la app, que ninguna de las dos tiene aqui, asi que va la inicial sobre su
   propio fondo. */
.ap-m-logo { width:40px; height:40px; border-radius:9px; background:var(--c-background); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; }
.ap-m-main { min-width:0; }
.ap-m-name { color:#fff; font-family:inherit; font-size:17px; font-weight:400; letter-spacing:-0.41px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-m-sub { color:rgba(235,235,245,0.6); font-family:inherit; font-size:15px; margin-top:1px;
  letter-spacing:-0.24px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-m-div { height:0.5px; background:rgba(84,84,88,0.65); margin:14px 0 12px; }
.ap-m-price { color:#fff; font-family:inherit; font-size:20px; font-weight:600; letter-spacing:-0.45px; }
.ap-legal { color:rgba(235,235,245,0.3); font-family:inherit; font-size:12px; line-height:1.45;
  margin:12px 0 0; }
/* Bloque de confirmación: se superpone al texto legal, como en la hoja nativa */
.ap-confirm { position:relative; margin-top:-42px; padding:14px 0 28px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:linear-gradient(to top,#1C1C1E 55%,rgba(28,28,30,0.86) 100%); }
.ap-dc { display:block; }
.ap-confirm-label { color:#fff; font-family:inherit; font-size:15px; font-weight:600;
  letter-spacing:-0.24px; }
.ap-confirm-hit { position:absolute; inset:0; background:none; border:none; cursor:pointer; }
/* La inicial del comercio, que cambia con la marca igual que su color */
.ap-m-glyph { font-family:'Inter',sans-serif; font-size:20px; font-weight:800; line-height:1;
  color:var(--c-primary); }
.ap-m-glyph::after { content:'S'; }
[data-brand="britbox"] .ap-m-glyph::after { content:'b'; }

/* ═══════════════ PARENTAL CONTROL (Figma 24232:319084) ═══════════════ */
.pc-screen { background:var(--c-background); }
.pc-body { position:absolute; top:104px; left:0; right:0; padding:24px 24px 0; text-align:center; }
.pc-title { color:#fff; font-family:'Inter',sans-serif; font-size:22px; font-weight:700; line-height:1.3; margin-bottom:8px; }
.pc-copy { color:var(--c-on-surface-variant); font-family:'Inter',sans-serif; font-size:15px; line-height:1.5; max-width:300px; margin:0 auto 32px; }
.pc-boxes { display:flex; gap:12px; justify-content:center; }
.pc-box { display:flex; align-items:center; justify-content:center;
  font-family:'Inter',sans-serif; font-size:24px; font-weight:600; color:var(--c-on-surface); }
.pc-err { display:none; align-items:center; justify-content:center; gap:8px; margin-top:20px;
  padding:12px 14px; border-radius:8px; background:rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.4); }
.pc-err.show { display:flex; }
.pc-err span { color:var(--c-error); font-family:'Inter',sans-serif; font-size:14px; font-weight:500; line-height:1.4; }

/* ── Marca rotulada en cabeceras ──────────────────────────────────────────
   .ac-title.brand y .ob-brand escriben el nombre como texto, que en Streamit
   imita su wordmark. BritBox tiene el suyo propio, asi que ahi va la pieza. */
[data-brand="britbox"] .ac-title.brand,
[data-brand="britbox"] .ob-brand {
  font-size:0; line-height:0; color:transparent;
}
[data-brand="britbox"] .ac-title.brand::after,
[data-brand="britbox"] .ob-brand::after {
  content:''; display:inline-block; width:104px; height:26px; vertical-align:middle;
  background:no-repeat center/contain url("../../Components/britbox/britbox-logo.svg");
}
[data-brand="britbox"] .ob-brand::after { width:132px; height:33px; }

/* ── Spinner de BritBox ───────────────────────────────────────────────────
   El suyo no es un aro: es un rombo macizo que gira y late, tal como esta en
   el prototipo de TV (apollo-concepts/demos/britbox-tv, nodo 1735:246174).
   Streamit conserva el aro, que es lo que pide su diseno. */
[data-brand="britbox"] .spinner-ring,
[data-brand="britbox"] .sb-ring {
  border:none; border-radius:0; background:var(--c-primary);
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  animation:bbDiamond 1.4s linear infinite;
}
@keyframes bbDiamond {
  from { transform:rotate(0deg)   scale(1);    opacity:1; }
  50%  { transform:rotate(180deg) scale(0.68); opacity:0.55; }
  to   { transform:rotate(360deg) scale(1);    opacity:1; }
}
@media (prefers-reduced-motion: reduce) {
  [data-brand="britbox"] .spinner-ring,
  [data-brand="britbox"] .sb-ring { animation:none; opacity:0.8; }
}

/* ══════════════════════════════════════════════
   LEGAL — Terms, Cookies, Privacy (Figma 32879:320110)
   Tres documentos con la misma plantilla: titulo, fecha, indice plegable,
   secciones numeradas y pie de ayuda. Todo con los tokens de marca, asi que
   BritBox lo hereda sin tocar nada.
══════════════════════════════════════════════ */
.lg-screen { background:var(--c-background); display:flex; flex-direction:column; }
.lg-scroll {
  flex:1; min-height:0; overflow-y:auto; padding:16px 24px 0;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.lg-scroll::-webkit-scrollbar { display:none; }

.lg-title { font-size:24px; font-weight:600; line-height:1.2; color:var(--c-on-surface); margin:0 0 8px; }
.lg-date  { font-size:16px; line-height:1.5; color:var(--c-on-surface-variant); margin-bottom:24px; }

/* Indice: cerrado se ve solo la cabecera; abierto, los enlaces a cada seccion. */
.lg-index { background:var(--c-surface); border-radius:8px; padding:16px 20px; margin-bottom:20px; }
.lg-index-head {
  width:100%; display:flex; align-items:center; gap:4px; background:none; border:0; padding:0;
  font-family:'Inter',sans-serif; font-size:14px; font-weight:600; line-height:1.5;
  color:var(--c-on-surface-variant); cursor:pointer; text-align:left;
}
.lg-index-head > span { flex:1; }
.lg-index-chev { flex-shrink:0; transition:transform 0.25s cubic-bezier(0.4,0,0.2,1); }
.lg-index.open .lg-index-chev { transform:rotate(180deg); }
/* El plegado va por max-height para que se pueda animar; 0 cerrado, de sobra abierto. */
.lg-index-body { max-height:0; overflow:hidden; transition:max-height 0.3s cubic-bezier(0.4,0,0.2,1); }
.lg-index.open .lg-index-body { max-height:300px; }
.lg-index-link {
  display:block; width:100%; text-align:left; background:none; border:0; padding:12px 0 0;
  font-family:'Inter',sans-serif; font-size:14px; line-height:1.5; color:var(--c-primary); cursor:pointer;
}
.lg-index-link + .lg-index-link { border-top:0.2px solid rgba(var(--c-outline-rgb),0.35); margin-top:12px; padding-top:12px; }

/* Secciones: el numero en color de marca, el titulo en texto normal. */
.lg-sec { padding-bottom:32px; scroll-margin-top:12px; }
.lg-sec-head { display:flex; gap:8px; align-items:flex-start; margin-bottom:8px; }
.lg-sec-num  { font-size:24px; font-weight:600; line-height:1.2; color:var(--c-primary); flex-shrink:0; }
.lg-sec-name { font-size:24px; font-weight:600; line-height:1.2; color:var(--c-on-surface); }
.lg-sec p { font-size:16px; line-height:1.5; color:var(--c-on-surface); margin:0 0 8px; }
.lg-sec p:last-child { margin-bottom:0; }
.lg-sec a { color:var(--c-primary); text-decoration:none; cursor:pointer; }
/* La llamada destacada: caja gris, texto menor y apagado. */
.lg-note {
  background:var(--c-surface); border-radius:4px; padding:16px 18px; margin:0 0 8px;
  font-size:14px; line-height:1.5; color:var(--c-on-surface-variant);
}

.lg-footer {
  border-top:0.5px solid rgba(var(--c-outline-rgb),0.35);
  margin:0 -24px; padding:12px 16px 24px;
  display:flex; gap:12px; align-items:center; justify-content:center;
}
.lg-footer-q   { font-size:14px; line-height:1.5; color:var(--c-on-surface-variant); }
.lg-footer-cta {
  background:none; border:0; padding:0; cursor:pointer; font-family:'Inter',sans-serif;
  font-size:14px; font-weight:600; line-height:1.5; color:var(--c-primary);
}

/* Fila de legales en Ajustes: misma caja que el resto de la cuenta. */
.ac-row[data-legal] .ac-row-title { margin:0; }
@media (prefers-reduced-motion: reduce) {
  .lg-index-body, .lg-index-chev { transition:none; }
}