/* ══ RESET ══ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; }
html, body { height:100%; overflow:hidden; }
body { display:flex; align-items:center; justify-content:center; background:#111; font-family:'Inter',sans-serif; }
button, input { font-family:'Inter',sans-serif; }

/* ══ iPHONE SHELL ══ */
.iphone {
  width:393px; height:852px; border-radius:52px;
  position:relative; overflow:hidden; background:#0d0d0d;
  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(245,197,24,0.06);
  flex-shrink:0;
  transform-origin: center center;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.iphone.landscape {
  transform: 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:#0d0d0d;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.splash-logo { width:120px; height:40px; object-fit:contain; margin-bottom:32px; }
.arc-ring { width:42px; height:42px; }
.arc-ring svg { animation:spin 0.85s linear infinite; transform-origin:50% 50%; }
@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:#121212; }

.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; transform:scale(1.07);
}
.hero-photo.reveal { animation:kenBurns 2s cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
@keyframes kenBurns { to { transform:scale(1); } }
.hero-dark { position:absolute; inset:0; background:#000; z-index:5; pointer-events:none; }
.hero-dark.reveal { animation:darkReveal 1.5s cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes darkReveal { 0% { opacity:1; } 100% { opacity:0; } }
.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);
}
.hero-fade {
  position:absolute; bottom:0; left:0; right:0; height:340px; z-index:3;
  background:linear-gradient(to bottom,
    transparent 0%, rgba(18,18,18,0.15) 25%,
    rgba(18,18,18,0.55) 55%, rgba(18,18,18,0.88) 78%, #121212 100%);
}
.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:2; 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:#EBEBEB; margin-bottom:8px; }
.cta-sub   { font-size:16px; font-weight:400; line-height:1.5; color:#EBEBEB; margin-bottom:32px; }

.btn-primary {
  width:100%; height:44px; background:#FFCC00; color:#121212;
  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:#EBEBEB;
  border:1.2px solid #8a8a8a; 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:#EBEBEB; margin-bottom:12px; }
.promo-link-btn { background:none; border:none; color:#FFCC00; font-size:16px; font-weight:600; line-height:1.5; cursor:pointer; }

/* ══════════════════════════════════════════════
   SIGN IN
══════════════════════════════════════════════ */
#signin { background:#121212; 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%); } }

.si-header {
  height:64px; margin-top:47px; 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:#ebebeb; margin-bottom:8px; text-align:center; }
.si-sub { font-size:16px; color:#ebebeb; 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:#ebebeb; margin-bottom:8px; }
.fwrap  { position:relative; }

.finput {
  width:100%; height:58px;
  background:#282828; border:1px solid #8a8a8a;
  border-radius:8px; padding:0 48px 0 17px;
  color:#ebebeb; font-size:16px; outline:none; cursor:pointer;
  caret-color:#FFCC00; user-select:none;
  transition:border-color 0.2s, background 0.2s;
  -webkit-tap-highlight-color:transparent;
}
.finput::placeholder { color:#989898; }
.finput.focused { border-color:#EBEBEB; }
.finput.err     { border-color:#EF4444 !important; background:#281717 !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:#EF4444; 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:#FFCC00; 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:#121212; 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:47px; 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:#EBEBEB;
  text-align:center; margin-bottom:8px; line-height:1.2;
}
.fp-subtitle {
  font-size:16px; font-weight:400; color:#EBEBEB;
  text-align:center; line-height:1.5;
}
.fp-body .fgroup { margin-bottom:32px; }
.fp-body .flabel { color:#EBEBEB; padding:0 4px; }
#setpwBody { padding-top:0; }
.fp-body .finput {
  background:#282828; border:1px solid #8A8A8A;
  padding:0 17px; border-radius:8px; height:58px;
}
.fp-body .finput::placeholder { color:#989898; }
.fp-body .finput.focused { border-color:#EBEBEB; }

.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:#B7A869; color:#8A8A8A;
  transition:background 0.2s, color 0.2s, transform 0.1s;
  font-family:'Inter',sans-serif;
  position:relative; overflow:hidden;
}
.fp-req-btn.on { background:#FFCC00; color:#121212; cursor:pointer; }
.fp-req-btn.on:active { transform:scale(0.97); }
.fp-req-btn.loading { pointer-events:none; background:#B7A869; color:#8A8A8A; }
.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:#FFCC00; 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:#281717; border:1px solid #EF4444;
  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:#EF4444; 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:#EBEBEB; line-height:1.2; margin-bottom:8px; }
.fp-ok-body { font-size:16px; font-weight:400; color:#EBEBEB; line-height:1.5; margin-bottom:0; }
.fp-ok-email { font-size:16px; font-weight:400; color:#989898; line-height:1.5; }
.fp-ok-instructions { font-size:16px; font-weight:400; color:#EBEBEB; 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:#FFCC00; color:#121212; 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:#121212; 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:#989898; }
.fp-footer-link { font-size:14px; font-weight:600; color:#FFCC00; 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:#281717; border:1px solid #EF4444;
  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:#EF4444; 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:#B7A869; color:#8A8A8A;
  transition:background 0.2s, color 0.2s, transform 0.1s;
  position:relative; overflow:hidden;
}
.si-submit.on  { background:#FFCC00; color:#121212; cursor:pointer; }
.si-submit.on:active { transform:scale(0.97); }
.si-submit.loading { pointer-events:none; background:#B7A869; }
.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(235,235,235,0.25); border-top-color:#FFCC00;
  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:#ebebeb; }

.si-code-btn {
  width:100%; height:44px; background:none; border:none;
  color:#FFCC00; 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:#ebebeb;
  padding-bottom:32px; line-height:1.5;
}
.si-register span { color:#FFCC00; font-weight:600; cursor:pointer; }

.si-help {
  text-align:center; font-size:14px; color:#989898;
  border-top:1px solid rgba(255,255,255,0.08); padding:16px 0 24px;
}
.si-help span { color:#FFCC00; 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,204,0,0.3);
  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,204,0,0.07);
  -webkit-tap-highlight-color:transparent;
  transition:transform 0.12s, opacity 0.12s;
  z-index:9999;
}
#emailNotif:hover { border-color:rgba(255,204,0,0.55); }
#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:#EF4444;
  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:#EBEBEB; margin-bottom:3px; }
.enotif-link  { font-size:12px; font-weight:500; color:#FFCC00; }

/* ── 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,204,0,0.3);
  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,204,0,0.07);
  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:#EBEBEB; margin-bottom:4px; }
.otp-notif-code {
  font-size:22px; font-weight:700; color:#FFCC00;
  letter-spacing:8px; font-variant-numeric:tabular-nums;
}

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

/* ══════════════════════════════════════════════
   PASSWORD UPDATED SUCCESS SCREEN
══════════════════════════════════════════════ */
#pwsuccess, #regsuccess { background:#121212; 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:#EBEBEB; line-height:1.2; }
.pwsuccess-subtitle { font-size:16px; font-weight:400; color:#EBEBEB; line-height:1.5; }
.pwsuccess-btn {
  width:100%; height:44px; border:none; border-radius:8px;
  background:#FFCC00; color:#121212; 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:#FFCC00; 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:#989898; font-weight:400; line-height:1.5; }
#setpwBody .finput { padding-right:50px; }
.sp-match-err {
  font-size:14px; color:#EF4444; 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:#FFCC00; 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:#636366; 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); }
@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; }
}

/* status bar transparente para la pantalla de home (hero imagen visible desde arriba) */
.hs-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:165; pointer-events:none;
  background:#121212;
}

.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(13,13,13,calc(0.97 * var(--nav-solid, 0)));
  background-image:linear-gradient(to bottom, rgba(13,13,13,0.82) 0%, rgba(13,13,13,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:#FFCC00; 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 hero arranca DEBAJO de la status bar (47) como en las fichas, con las esquinas
   superiores redondeadas; antes se metía por detrás y se comía la status bar. */
.hero-section { position:relative; width:100%; height:520px; overflow:hidden; flex-shrink:0;
  margin-top:59px; border-radius:20px 20px 0 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; }
.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;
}
.hero-fade-layer {
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to bottom,
    rgba(13,13,13,0.68) 0%, rgba(13,13,13,0.15) 12%, transparent 24%,
    transparent 46%, rgba(13,13,13,0.35) 56%, rgba(13,13,13,0.82) 68%,
    rgba(13,13,13,0.97) 82%, #0d0d0d 100%);
}
.hero-content {
  position:absolute; bottom:80px; 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; color:rgba(255,255,255,0.8); margin-bottom:9px; }
.hero-tagline {
  font-size:16px; font-weight:400; color:#EBEBEB;
  line-height:1.5;
}
.hero-cta-row {
  position:absolute; bottom:32px; left:16px; right:16px;
  z-index:4; display:flex; gap:16px; align-items:center; will-change:opacity;
}
.btn-play {
  flex:1; height:40px; background:#FFCC00; color:#121212;
  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:#282828;
  border:1px solid rgba(255,204,0,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 {
  position:absolute; bottom:4px; left:0; right:0;
  display:flex; justify-content:center; gap:8px; z-index:3;
}
.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:#FFCC00; }

.sections-wrap { background:#0d0d0d; 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:#EBEBEB; margin-bottom:0; line-height:1.5; }
.sh-sub { font-size:12px; font-weight:400; color:#989898; 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:#121212;
}
.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:#EBEBEB; 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:#FFCC00; color:#121212; 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:#121212; }
.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:#121212;
}
.ml-appbar-title { font-size:24px; font-weight:600; color:#EBEBEB; 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:#FFF3C2;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ml-avatar span { font-size:14px; font-weight:600; color:#1a1a1a; 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:#EBEBEB; line-height:1.5; }
.ml-section-sub { font-size:12px; font-weight:400; color:#989898; 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:#FFCC00; color:#121212; 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(138,138,138,0.35); }
.ml-wl-empty-title {
  font-size:20px; font-weight:600; color:#EBEBEB; margin-bottom:8px; line-height:1.2;
}
.ml-wl-empty-sub {
  font-size:16px; font-weight:400; color:#EBEBEB; line-height:1.5; margin-bottom:12px;
}
.ml-wl-empty-btn {
  width:100%; height:44px; background:#FFCC00; color:#121212;
  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:#121212; }
.wl-appbar {
  position:absolute; top:59px; left:0; right:0; height:64px;
  display:flex; align-items:center; padding:0 16px; z-index:150; background:#121212;
}
.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:#EBEBEB; 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:#FFCC00; 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:#121212; 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:#8A8A8A;
}
.wl-item-thumb {
  width:117px; height:66px; flex-shrink:0; border-radius:8px;
  object-fit:cover; background:#282828;
  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:#EBEBEB; line-height:1.5;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wl-item-meta {
  font-size:14px; font-weight:400; color:#989898; 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:#282828;
  display:flex; align-items:center; justify-content:center; margin-bottom:8px;
}
.wl-empty-title { font-size:18px; font-weight:600; color:#EBEBEB; text-align:center; }
.wl-empty-sub { font-size:14px; font-weight:400; color:#989898; text-align:center; line-height:1.5; }

/* ══ RECOMMENDATIONS GRID ══ */
#recommendations { background:#121212; }
.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 (#ffcc004d) */
.pcard-crown {
  position:absolute; top:12px; right:12px; z-index:3; box-sizing:border-box;
  width:26px; height:26px; border-radius:4px; background:#1a1a1a;
  border:1px solid rgba(255,204,0,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:#282828;
  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:#646464; z-index:2; }
.wcard-progress-bar { height:100%; background:#FFCC00; }
.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:#EBEBEB; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wcard-ep { font-size:12px; font-weight:400; color:#989898; 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:#EBEBEB; display:block; transition:background 0.12s, transform 0.12s; }
.wcard-menu:active span { background:#FFCC00; 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 #0d0d0d + 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(18,18,18,0.30), rgba(18,18,18,0.30)),
    linear-gradient(to bottom, transparent 0%, transparent 32%, rgba(13,13,13,0.55) 56%, rgba(13,13,13,0.92) 74%, #0d0d0d 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:#EBEBEB; margin:0 16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── 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:#2a2a2a; }
.hs-skel-top { height:47px; background:#141414; }      /* franja del status bar */
/* 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:#141414; 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 */
.sk-hero { position:relative; height:500px; margin-left:-16px; background:linear-gradient(180deg,#2e2e2e 0%,#141414 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,#2e2e2e 0%,#141414 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 rgba(235,235,235,0.25);
  border-top-color:#FFCC00;
  animation:spinnerRotate 0.85s linear infinite;
}

/* Vertical player spinner */
.vp-spinner {
  position:absolute; inset:0; background:#121212; z-index:20;
  display:flex; flex-direction:column;
  transition:opacity 0.25s ease;
}
.vp-spinner.hidden { opacity:0; pointer-events:none; }
.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:#121212; z-index:20;
  display:flex; flex-direction:column;
  transition:opacity 0.25s ease;
}
.hp-spinner.hidden { opacity:0; pointer-events:none; }
.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(18,18,18,0.7) 0%, rgba(18,18,18,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:47px; 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:#ebebeb; 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:#ebebeb; line-height:1.5;
  display:flex; align-items:center; gap:8px;
}
.vp-top-dot {
  width:4px; height:4px; border-radius:50%; background:#ebebeb; 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:#FFCC00; border-radius:9999px; width:0%;
}
.vp-progress-handle {
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:18px; height:18px; border-radius:50%; background:#FFCC00;
  left:0%; pointer-events:none;
}
.vp-time-row {
  display:flex; justify-content:space-between; margin-top:8px;
  font-size:16px; font-weight:400; color:#ebebeb; 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:#121212;
  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:#989898; }
.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:#ebebeb; font-weight:400; }
.vp-subs-item.sel .vp-subs-txt { color:#FFCC00; }
.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:#121212; display:flex; flex-direction:column; overflow:hidden; }
#otpenter   { background:#121212; 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:#282828; border:1px solid #8A8A8A; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:600; color:#EBEBEB;
  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:#EBEBEB; }
/* all 4 filled → gold border on all */
.otp-box.complete   { border-color:#FFCC00; }
/* active (next input pos) → white border — must come after .complete to override */
.otp-box.active     { border-color:#EBEBEB; }
/* when all filled AND last box still active → gold wins */
.otp-box.complete.active { border-color:#FFCC00; }
/* error → red border, text stays white */
.otp-box.err        { border-color:#EF4444 !important; color:#EBEBEB; }

/* 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:#EBEBEB; 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:#281717; border:1px solid #EF4444;
  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:#EF4444; 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:#EBEBEB; }
.otp-resend-link  { color:#FFCC00; font-weight:600; cursor:pointer; }
.otp-resend-link:active { opacity:0.6; }

.otp-email-shown { color:#989898; }

/* ── 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:#121212; 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:#EBEBEB;
  text-align:center; margin-bottom:8px; line-height:1.2;
}
.reg-subtitle {
  font-size:16px; font-weight:400; color:#EBEBEB;
  text-align:center; line-height:1.5;
}

.promo-module {
  background:#282828; border-radius:8px;
  padding:16px 20px; margin-bottom:32px;
}
.promo-module-title {
  font-size:20px; font-weight:600; color:#EBEBEB; margin-bottom:4px; line-height:1.2;
}
.promo-module-desc {
  font-size:14px; font-weight:400; color:#989898; line-height:1.5; margin-bottom:4px;
}
.promo-module-link {
  font-size:14px; font-weight:600; color:#FFCC00; cursor:pointer;
}
.promo-module-link:active { opacity:0.7; }

.legal-text {
  font-size:12px; font-weight:400; color:#989898; line-height:1.5;
  margin-bottom:32px;
}
.legal-text a { color:#FFCC00; 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:#989898; 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:#EBEBEB; font-size:16px; }
.reg-body .finput {
  background:#282828; border:1px solid #8A8A8A;
  padding:0 16px; border-radius:8px; height:58px;
}
.reg-body .finput::placeholder { color:#989898; }
.reg-body .finput.focused { border-color:#EBEBEB; }

.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(18,18,18,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:#282828;
  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:#ebebeb; 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:#ebebeb; 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(18,18,18,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(18,18,18,0.7) 0%, rgba(18,18,18,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:#ebebeb; 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:#ebebeb; line-height:1.5;
  display:flex; align-items:center; gap:8px;
}
.hp-title-dot {
  width:4px; height:4px; border-radius:50%; background:#ebebeb; 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(18,18,18,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:#ebebeb; 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:#FFCC00; border-radius:9999px; width:0%;
}
.hp-slider-handle {
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:18px; height:18px; border-radius:50%; background:#FFCC00;
  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:#282828; 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:#121212;
}
.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:#EBEBEB; 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 #646464, 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:#646464; padding:4px 16px; border-radius:8px;
  font-size:14px; font-weight:400; color:#ebebeb; 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:#282828;
  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:#EBEBEB; line-height:1.5; }
.hp-info-ep    { font-size:14px; font-weight:400; color:#EBEBEB; line-height:1.5; }
.hp-info-tags  { display:flex; align-items:center; gap:8px; }
.hp-info-synopsis { font-size:12px; font-weight:400; color:#EBEBEB; 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:#121212;
  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:#989898; }
.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:#ebebeb; font-weight:400; }
.hp-subs-item.sel .hp-subs-txt { color:#FFCC00; }
.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(18,18,18,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(18,18,18,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:#ebebeb; 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:#ebebeb; }
.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(18,18,18,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:#282828; 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:#ebebeb; }

.hp-cast {
  position:absolute; inset:0; z-index:22;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(18,18,18,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:#282828; 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:#ebebeb; 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:#ebebeb; }

/* ── 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:#ebebeb; }
.hp-cast-bang { width:22px; height:22px; border-radius:50%; background:#EBEBEB; color:#121212;
  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:#ebebeb; }
.hp-cast-help { background:none; border:none; padding:0; cursor:pointer;
  color:#FFCC00; 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:#FFCC00; 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:#121212; }
.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:#EBEBEB; 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:#8a8a8a; 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:#FFCC00; color:#121212; margin-top:26px; }
.hp-err-secondary { background:none; border:1px solid #8a8a8a; 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:#1c1c1c; 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:#EBEBEB; 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:#FFCC00; 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:#FFCC00; 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:#121212; }
.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:#EBEBEB; 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:#FFCC00; color:#121212; margin-bottom:20px; }
.hp-ce-back { background:none; border:1px solid #8a8a8a; color:#EBEBEB; }

/* 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(18,18,18,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:#282828; 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:#ebebeb; 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:#ebebeb; }

/* ══════════════════════════════════════════════
   CHROMECAST — CASTING STATE (vertical player)
══════════════════════════════════════════════ */
#castingscreen { background:#121212; display:flex; flex-direction:column; padding-top:47px; 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(18,18,18,0.7) 0%, rgba(18,18,18,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:#ebebeb; 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:#ebebeb; }
.cs-dot { width:4px; height:4px; border-radius:50%; background:#ebebeb; 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:#FFCC00; border-radius:9999px; }
.cs-handle { position:absolute; top:50%; left:38%; transform:translate(-50%,-50%); width:18px; height:18px; border-radius:50%; background:#FFCC00; }
.cs-times { display:flex; justify-content:space-between; font-size:16px; font-weight:400; color:#ebebeb; }
.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:#ebebeb; }
/* 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(18,18,18,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:#282828; 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:#8a8a8a; 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:#EBEBEB; font-family:'Inter',sans-serif; font-size:16px; line-height:1.3; }
.cs-subs-row.sel .cs-subs-txt { color:#FFCC00; }
.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:#1c1c1c;
}
#castMini.show { display:block; }
/* 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; }
.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:#989898; 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:#FFCC00; 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(18,18,18,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:#282828; 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:#ebebeb; }
.cs-stop-btn { width:100%; background:#FFCC00; color:#121212; 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:#FFCC00; 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:#ebebeb; 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:#ebebeb;
  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:#121212; 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 #121212 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(18,18,18,0.45) 0%, rgba(18,18,18,0.15) 18%,
    rgba(18,18,18,0.25) 40%, rgba(18,18,18,0.72) 58%,
    rgba(18,18,18,0.95) 72%, #121212 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:#FFCC00; color:#121212;
  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 #282828 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(255,204,0,0.3); background:#282828;
  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:#fff3c2; line-height:1.5; text-transform:uppercase; }
.bt-desc-wrap { position:relative; width:100%; }
.bt-desc {
  font-size:14px; color:#EBEBEB; 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 #121212 → color/overlay-variant rgba(18,18,18,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, #121212 0%, rgba(18,18,18,0.3) 100%);
}
.bt-more-pill {
  position:absolute; right:0; bottom:0; z-index:2; background:#646464;
  border:none; border-radius:4px; padding:2px 8px;
  font-size:10px; font-weight:600; color:#EBEBEB;
  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:#EBEBEB; line-height:1.5; }
.bt-dot-sep { width:4px; height:4px; background:#EBEBEB; 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 #8A8A8A; border-radius:4px; padding:2px 8px;
  font-size:10px; font-weight:600; color:#EBEBEB; 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:#989898; 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:#EBEBEB; font-weight:600; }

/* indicador deslizante */
#btTabIndicator {
  position:absolute; bottom:0; height:3px;
  background:#FFCC00; 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:#282828; 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:#FFCC00; 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:#121212; 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:#121212; 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:#282828; border:1px solid #8A8A8A; 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 #8A8A8A en reposo → color/outline-variant #EBEBEB al teclear
   lupa:   on-surface-variant #989898 vacío → on-surface #EBEBEB con query
   texto:  #989898 placeholder → #EBEBEB tecleado
   caret:  1×24px #EBEBEB, sólo mientras se teclea                                     */
.sr-search-icon { color:#989898; transition:color .18s ease; }
#searchScreen:not([data-state="landing"]) .sr-search-icon { color:#EBEBEB; }
#searchScreen[data-state="active"] .sr-search-input { border-color:#EBEBEB; }

.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:#989898;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sr-search-ph.typed { color:#EBEBEB; }
.sr-caret { display:none; flex-shrink:0; width:1px; height:24px; background:#EBEBEB; }
#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:#EBEBEB;
  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:#EBEBEB;
  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:#989898; }
.sr-noresults-copy .sr-q { color:#EBEBEB; }
.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:#989898; line-height:1.5; margin-bottom:32px; }
.sr-error-btn {
  width:100%; height:48px; border:none; border-radius:8px; background:#FFCC00;
  color:#1a1a1a; 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-demos/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:#EBEBEB; 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:#EBEBEB; flex:1; min-width:0; }
.cc-role { font-size:14px; font-weight:400; color:#989898; 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:#282828;
  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:#EBEBEB; line-height:1.5; }
.bt-ep-row { display:flex; align-items:center; gap:8px; }
.bt-ep-dur { font-size:12px; color:#989898; white-space:nowrap; }
.bt-ep-tags { display:flex; gap:8px; align-items:center; }
.bt-ep-desc { font-size:12px; color:#989898; 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:#282828; 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:#EBEBEB; line-height:1.5; }
.se-season-chevron { flex-shrink:0; }
.se-season-note { font-size:12px; font-weight:400; color:#EBEBEB; 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:#EBEBEB; 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:#646464; z-index:2;
}
.se-ep-progress-bar { height:100%; background:#FFCC00; }

/* 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:#FFCC00; 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(18,18,18,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(18,18,18,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(18,18,18,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 #EBEBEB, dur/desc #989898), 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:#FFCC00; 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:#121212;   /* 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:#EBEBEB; line-height:1.2; text-align:center; }
.hp-gate-desc { font-family:'Inter',sans-serif; font-size:16px; font-weight:400; color:#EBEBEB; 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:#282828; border:1px solid #8A8A8A; border-radius:8px; display:flex; align-items:center; justify-content:center; transition:border-color .15s; }
.hp-gate-box.active { border-color:#EBEBEB; }                 /* focus: celda activa (blanco) */
.hp-gate-box.filled { border-color:#FFCC00; }                /* 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:#EBEBEB; transform:translateY(0.18em); }
#hplayer.gate.error .hp-gate-box { border-color:#EF4444; }
#hplayer.gate.error .hp-gate-box.filled::after { color:#EBEBEB; }
.hp-gate-err { display:none; align-items:center; gap:12px; margin-top:16px; background:#281717; border:1px solid #EF4444; border-radius:8px; padding:13px; font-family:'Inter',sans-serif; font-size:14px; font-weight:600; letter-spacing:-0.14px; color:#EF4444; line-height:1.5; }
#hplayer.gate.error .hp-gate-err { display:flex; }
.hp-gate-forgot { background:none; border:none; color:#FFCC00; 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:#EBEBEB; line-height:1.2; text-align:center; }
.hp-gate-lock-body { font-family:'Inter',sans-serif; font-size:14px; font-weight:400; color:#EBEBEB; 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:#FFCC00; border:none; color:#121212; }
.hp-gate-btn.secondary { background:none; border:1px solid rgba(255,255,255,0.35); color:#EBEBEB; }

/* Pista del PIN (fuera del iPhone) */
#pcHint {
  position:fixed; left:28px; bottom:28px; display:none; align-items:center;
  background:#1c1c1c; border:1px solid rgba(255,204,0,0.3); border-radius:12px;
  padding:10px 16px; font-family:'Inter',sans-serif; font-size:14px; color:#EBEBEB;
  box-shadow:0 4px 28px rgba(0,0,0,0.6); z-index:9999;
}
#pcHint b { color:#FFCC00; 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:28px; bottom:28px; display:none; align-items:center; gap:2px;
  background:#1c1c1c; border:1px solid rgba(255,204,0,0.3); border-radius:12px;
  padding:10px 16px; font-family:'Inter',sans-serif; font-size:14px; color:#EBEBEB;
  box-shadow:0 4px 28px rgba(0,0,0,0.6); z-index:9999; max-width:calc(100vw - 56px);
}
#authHint b { color:#FFCC00; 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:#EBEBEB;
  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:#EBEBEB; border-color:rgba(239,68,68,0.5); }
#offlineToggle.off .off-tog-ic { color:#EF4444; }

/* 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 (#fff3c2) */
.bt-premier-line { display:block; color:#FFF3C2; 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:#121212; 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:#121212; }

/* 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:#EBEBEB; 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:#FFCC00; 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:#EBEBEB; 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:#282828;
}
.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:#646464; }
.dl-prog > i { display:block; height:100%; background:#FFCC00; }

.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:#EBEBEB; line-height:1.5;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dl-meta-sub  { font-size:14px; font-weight:400; color:#989898; line-height:1.5; }
.dl-meta-size { font-size:12px; font-weight:400; color:#989898; line-height:1.5; }
.dl-meta-size.downloading { color:#FFCC00; }
.dl-meta-exp  { font-size:12px; font-weight:400; color:#EBEBEB; line-height:1.5; }
.dl-meta-row  { display:flex; align-items:center; gap:4px; font-size:12px; font-weight:400; color:#989898; 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:#989898; 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 #8A8A8A; border-radius:4px; padding:2px 8px;
  font-size:10px; font-weight:600; color:#EBEBEB; 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, #282828 fill, #FFCC00 ring 1.14px. Selected → filled #FFCC00 + 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 #FFCC00; background:#282828; 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:#FFCC00; }
.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:#121212; }
.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:#EBEBEB; line-height:1.2; }
.off-sub   { font-size:16px; font-weight:400; color:#EBEBEB; 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:#FFCC00; color:#121212; }
.off-btn-secondary { background:none; color:#EBEBEB; border:1.2px solid #8A8A8A; }

/* 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:#EBEBEB; line-height:1.2; margin-bottom:8px; }
.dl-empty-sub { font-size:16px; font-weight:400; color:#EBEBEB; line-height:1.5; margin-bottom:32px; }
.dl-empty-btn {
  width:100%; height:44px; background:#FFCC00; color:#121212;
  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:#121212;
  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:#B7A869; color:#8A8A8A; cursor:not-allowed;
  transition:transform 0.1s, opacity 0.1s;
}
.dl-delete-btn.on { background:#FFCC00; color:#121212; 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:#EBEBEB; line-height:1.5; }
.dl-sheet-status { font-size:12px; font-weight:400; color:#989898; line-height:1.5; margin-top:4px; }

/* Delete confirmation — iOS native alert (Figma 19440:144955)
   Overlay #121212@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:#141414; }
.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:#141414;
}
.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:#141414;
}
.ex-section-head {
  background:#282828; color:#989898;
  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:#141414; border:none; border-bottom:1px solid rgba(255,255,255,0.08);
  color:#EBEBEB; 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:#141414; }
.ac-appbar {
  position:absolute; top:59px; left:0; right:0; height:45px;
  display:flex; align-items:center; padding:0 8px; z-index:150; background:#141414;
}
.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:#141414;
  padding:8px 24px 40px;
}
.ac-sec-label {
  color:#EBEBEB; 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:#282828; 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:#EBEBEB; font-weight:600; font-size:16px; line-height:1.5; }
.ac-row-sub { color:#989898; font-weight:400; font-size:14px; line-height:1.5; }
.ac-row-sub b { color:#EBEBEB; font-weight:600; }
.ac-row-value { color:#EBEBEB; 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:#FFF3C2; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.ac-avatar span { color:#1a1a1a; 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:#0d2010; border:1px solid #039855;
  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:#039855; 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:#039855; flex-shrink:0; }

/* ═══════════════ ACCOUNT · Edit forms (Change Name/Email/Password) ═══════════════ */
.af-screen { background:#141414; }
.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:#989898; 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:#989898; 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:#EF4444; 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:#FFCC00; 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:#FFCC00;
  color:#1a1a1a; 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:#646464; color:#989898;          /* disabled: surface-variant / on-surface-variant */
}
.af-submit.on { background:#FFCC00; color:#1a1a1a; 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:#1a1a1a; border-radius:50%;
  animation:af-spin 0.7s linear infinite;
}
@keyframes af-spin { to { transform:rotate(360deg); } }
.af-cancel { background:none; border:none; color:#FFCC00; 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:#141414; }
.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:#989898; font-family:'Inter',sans-serif; font-size:16px; line-height:1.5; text-align:center; padding:4px 4px 24px; }
.pl-seg { display:flex; gap:4px; background:#282828; border-radius:10px; padding:4px; margin-bottom:20px; }
.pl-seg-btn { flex:1; height:37px; border:none; border-radius:7px; background:none; color:#989898;
  font-family:'Inter',sans-serif; font-size:14px; font-weight:600; cursor:pointer; transition:background .18s,color .18s; }
.pl-seg-btn.active { background:#FFF3C2; color:#1a1a1a; }
.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:#282828; border:1px solid #8a8a8a; border-radius:8px; padding:17px; cursor:pointer;
}
.pl-card { transition:border-color .18s, background .18s; }
.pl-card.sel { border-color:#FFCC00; background:#3a341a; }
.pl-card-info, .pl-compact-info { flex:1 0 0; min-width:0; }
.pl-card-name, .pl-compact-name { color:#EBEBEB; 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:#EBEBEB; font-family:'Inter',sans-serif; font-size:24px; font-weight:600; line-height:1.2; }
.pl-card-per { color:#EBEBEB; font-family:'Inter',sans-serif; font-size:14px; line-height:1.6; }
.pl-card-was { color:#989898; font-family:'Inter',sans-serif; font-size:14px; line-height:1.6; }
.pl-card-offer { color:#FFCC00; font-family:'Inter',sans-serif; font-size:12px; font-weight:700; letter-spacing:.06em; margin-top:6px; }
.pl-card-note { color:#989898; 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 #FFCC00;
  display:flex; align-items:center; justify-content:center; }
.pl-radio.on { background:#FFCC00; border-color:#FFCC00; }
.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:#FFCC00; color:#1a1a1a;
  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:#3a341a; border-color:#FFCC00; 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:#EBEBEB; 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:#989898; 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:#FFCC00;
  color:#1a1a1a; 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:#1c1c1c; 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:#989898; 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:#FFCC00;
  font-family:'Inter',sans-serif; font-size:16px; font-weight:600; cursor:pointer; }
.pl-sheet-btn.primary { background:#FFCC00; color:#1a1a1a; margin-bottom:4px; }

/* ═══════════════ UPSELL — Unlock Premier (Figma 25578:422152) ═══════════════ */
.up-screen { background:#141414; }
.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, #121212 70%, rgba(18,18,18,0.5) 85%, rgba(18,18,18,0) 100%);
}
.up-cancel-outline {
  width:100%; height:44px; border:1.2px solid #8a8a8a; border-radius:8px; background:none;
  color:#EBEBEB; font-family:'Inter',sans-serif; font-size:16px; font-weight:600; cursor:pointer;
}
.up-footer-note { color:#EBEBEB; font-family:'Inter',sans-serif; font-size:12px; line-height:1.5; margin:0; }
.up-copy-title { color:#EBEBEB; font-family:'Inter',sans-serif; font-size:24px; font-weight:600; line-height:1.2; text-align:center; }
.up-copy-sub { color:#EBEBEB; font-family:'Inter',sans-serif; font-size:16px; line-height:1.5; text-align:center; margin:8px 0 32px; }
.up-plan { background:#282828; border:1px solid #8a8a8a; border-radius:8px; padding:17px; margin-bottom:16px; }
.up-plan-prem { background:#3a341a; border-color:#FFCC00; }
.up-plan-info { width:100%; }
.up-plan-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.up-plan-name { color:#EBEBEB; font-family:'Inter',sans-serif; font-size:18px; line-height:1.5; }
.up-tag { align-self:auto; text-transform:uppercase; }
.up-table-title { color:#EBEBEB; font-family:'Inter',sans-serif; font-size:16px; font-weight:600; text-align:center; margin:8px 0 16px; }
.up-table { width:100%; background:#121212; 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:#EBEBEB; line-height:1.3;
}
.up-trow-last .up-tcell { border-bottom:none; }
.up-tcell.up-tfeat { justify-content:flex-start; text-align:left; background:#282828; }
.up-tcell.up-tprem { background:rgba(255,204,0,0.2); }
.up-thead .up-tcell { min-height:60px; font-weight:600; }
.up-thead .up-tfeat { color:#989898; }
.up-tdash { color:#989898; }
.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. */
.up-welcome { background:#000; }
.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(0,0,0,0.5) 33%, #000 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:#EBEBEB; 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(0,0,0,0.5) 68%, #000 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:#EBEBEB; font-family:'Inter',sans-serif; font-size:22px; font-weight:600; line-height:1.3; margin-bottom:12px; }
.us2-copy { color:#EBEBEB; 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:#EBEBEB; 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:#FFCC00; 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:#121212; }
.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:#EBEBEB; font-family:'Inter',sans-serif; font-size:16px; line-height:1.5; margin:10px 0 0; }
.aerr-meta { color:#8a8a8a; 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:#EBEBEB; font-family:'Inter',sans-serif; font-size:24px; font-weight:600;
  line-height:1.2; text-align:center;
}
.so-sub {
  color:#EBEBEB; 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:#FFCC00; color:#121212; }
.so-btn-alt {
  background:none; border:1px solid #8a8a8a; color:#EBEBEB;
  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:#282828; 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:#FFCC00; 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:#EBEBEB; 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:#121212; }
/* 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(18,18,18,0.35) 0%, rgba(18,18,18,0.1) 25%, rgba(18,18,18,0.75) 70%, #121212 100%); }
.pw-body { position:absolute; left:24px; right:24px; bottom:30px; 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:#EBEBEB; 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:#FFCC00; color:#121212; margin-top:28px; }
.pw-btn-outline { background:none; border:1px solid #8a8a8a; color:#EBEBEB; margin-top:16px; }
.pw-promo { color:#EBEBEB; 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:#FFCC00; 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:#282828; border-radius:8px; padding:14px 16px; margin-top:24px; }
.pw-webcard-t { display:block; color:#EBEBEB; 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:#FFCC00; 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:#EBEBEB; 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.55); }
/* .visible es el nombre que ya usaban las confirmaciones de CW y Downloads */
.ndlg.show, .ndlg.visible { display:flex; }
.ndlg-card { width:295px; box-sizing:border-box; background:#1a1a1a; border-radius:24px;
  padding:36px 20px 12px; box-shadow:0 18px 48px rgba(0,0,0,0.55);
  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 { color:#fff; font-family:'Inter',sans-serif; font-size:17px; font-weight:600; line-height:1.3; }
.ndlg-copy { color:#EBEBEB; font-family:'Inter',sans-serif; font-size:15.5px; line-height:1.5;
  margin:10px 0 0; max-width:250px; }
.ndlg-btns { display:flex; gap:20px; margin-top:28px; }
.ndlg-btn { height:48px; padding:0 26px; border:none; border-radius:9999px; cursor:pointer;
  background:#3a3a3a; color:#fff; font-family:'Inter',sans-serif; font-size:16px; }
.ndlg-btn.ndlg-alt { background:#6e6e73; }
.ndlg-btn.ndlg-danger { color:#ff383c; }   /* acción destructiva: iOS la marca en rojo */
.ndlg-btn:active { opacity:.75; }
#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:#121212; }
.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:47px; bottom:0; left:0; right:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch; }
.gp-hero { position:relative; width:100%; }
.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%, #121212 100%); }
.gp-hero-body { position:absolute; left:0; right:0; bottom:0; padding:0 24px 16px; }
.gp-desc { color:#EBEBEB; font-family:'Inter',sans-serif; font-size:16px; line-height:1.5; margin:0; }
#genrePage .sections-wrap { padding-top:8px; }

/* ═══════════════ ONBOARDING (Figma 25578:422136 / 422128) ═══════════════ */
.ob-screen { background:#000; }
/* 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; }
.ob-hero img { width:100%; height:100%; object-fit:cover; display:block; }
.ob-hero-fade { position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 8%, rgba(0,0,0,0.55) 32%, #000 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:#FFCC00; 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:#EBEBEB; 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:#282828; 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;
  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:#282828; border:1px solid rgba(255,204,0,0.3);
  display:flex; align-items:center; justify-content:center;
}
.ob-pick::before {
  content:''; width:18px; height:18px;
  background: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='%23FFCC00' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.ob-card.picked .ob-pick { background:#FFCC00; border-color:#FFCC00; }
.ob-card.picked .ob-pick::before {
  background-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='%23121212' 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, #000 66%, rgba(0,0,0,0.6) 86%, rgba(0,0,0,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:#EBEBEB; 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:#EBEBEB;
  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,204,0,0.5); }
#unsubToggle.on .unsub-tog-ic { color:#FFCC00; }

/* ═══════════════ SUBSCRIPTION — Plan selection + IAP (Figma 25578:422040) ═══════════════ */
.sb-screen { background:#141414; }
.ac-title.brand { color:#FFCC00; font-weight:700; font-size:20px; letter-spacing:.02em; }
/* El footer flota sobre el scroll (Figma "Button Footer" 228px) */
.sb-scroll { position:absolute; top:104px; bottom:0; left:0; right:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 24px 230px; }
.sb-title { color:#EBEBEB; font-family:'Inter',sans-serif; font-size:24px; font-weight:600; line-height:1.2; text-align:center; }
.sb-sub { color:#EBEBEB; 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:#EBEBEB; 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: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='%23FFCC00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sb-feat span { color:#EBEBEB; font-family:'Inter',sans-serif; font-size:14px; line-height:1.5; }
.sb-footer {
  position:absolute; left:0; right:0; bottom:0; padding:40px 24px 26px;
  background:linear-gradient(to top, #141414 68%, rgba(20,20,20,0.55) 86%, rgba(20,20,20,0) 100%);
}
.sb-cta {
  width:100%; height:44px; border:none; border-radius:8px; background:#FFCC00; color:#1a1a1a;
  font-family:'Inter',sans-serif; font-size:16px; font-weight:600; cursor:pointer; position:relative;
  pointer-events:none; transition:background .2s, color .2s;
  background:#646464; color:#989898;          /* disabled, no transparente */
}
.sb-cta.on { background:#FFCC00; color:#1a1a1a; 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:#1a1a1a; border-radius:50%;
  animation:af-spin .7s linear infinite;
}
.sb-legal { color:#EBEBEB; font-family:'Inter',sans-serif; font-size:12px; line-height:1.5; margin:16px 0 0; }
/* Processing payment (25578:422059) */
.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; }
.sb-ring { width:64px; height:64px; border-radius:50%; border:5px solid #8a8a8a; border-right-color:#FFCC00;
  animation:af-spin .9s linear infinite; }
.sb-load-msg { color:#EBEBEB; font-family:'Inter',sans-serif; font-size:16px; font-weight:500; }
/* 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:#EBEBEB; font-family:'Inter',sans-serif; font-size:24px; font-weight:600; line-height:1.2; margin-bottom:8px; }
.sb-state-sub { color:#989898; 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:#FFCC00; color:#1a1a1a;
  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:#FFCC00;
  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:#989898; }
.sb-help-link { background:none; border:none; padding:0; color:#FFCC00;
  font-family:'Inter',sans-serif; font-size:14px; font-weight:600; cursor:pointer; }
/* Diálogo de compra externa del App Store (25578:422071) */
.sb-extdlg { background:#1c1c1c; }
.sb-ext-body { position:absolute; top:76px; left:24px; right:24px; bottom:0; display:flex; flex-direction:column; }
.sb-ext-head { display:flex; align-items:center; gap:9px; margin-bottom:56px; }
.sb-ext-appicon { width:34px; height:34px; border-radius:8px; flex-shrink:0;
  background:linear-gradient(180deg,#2a9bff,#0a6fe0); display:flex; align-items:center; justify-content:center; }
.sb-ext-appname { color:#fff; font-family:'Inter',sans-serif; font-size:20px; font-weight:600; }
.sb-ext-title { color:#fff; font-family:'Inter',sans-serif; font-size:22px; font-weight:700; line-height:1.35; margin-bottom:20px; }
.sb-ext-copy { color:#8a8a8a; font-family:'Inter',sans-serif; font-size:15px; line-height:1.5; margin:0 0 18px; }
.sb-ext-link { align-self:flex-start; background:none; border:none; padding:0; color:#0A84FF;
  font-family:'Inter',sans-serif; font-size:15px; cursor:pointer; }
.sb-ext-btns { margin-top:auto; padding-bottom:44px; display:flex; flex-direction:column; gap:14px; }
.sb-ext-btn { width:100%; height:56px; border:none; border-radius:14px; background:#2C2C2E; color:#0A84FF;
  font-family:'Inter',sans-serif; font-size:17px; 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-family:'Inter',sans-serif; font-size:17px; font-weight:600; line-height:1.25; }
.ap-card { position:absolute; left:0; right:0; bottom:0; background:#0d0d0d;
  border-radius:22px 22px 0 0; padding:16px 16px 0; }
.ap-head { display:flex; align-items:center; justify-content:space-between; margin:0 4px 16px; }
.ap-x { width:34px; height:34px; border-radius:50%; border:none; background:#2c2c2e; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ap-row { display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:#1c1c1c; border:none; border-radius:16px; padding:16px; margin-bottom:14px; }
.ap-row-btn { cursor:pointer; }
.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:'Inter',sans-serif; font-size:16px; font-weight:500; }
.ap-row-r { flex-shrink:0; color:#EBEBEB; font-family:'Inter',sans-serif; font-size:16px; letter-spacing:.04em; }
.ap-merchant { display:block; padding:16px 16px 0; margin-bottom:0; }
.ap-m-head { display:flex; align-items:center; gap:12px; }
.ap-m-logo { width:40px; height:40px; border-radius:9px; background:#121212; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; }
.ap-m-main { min-width:0; }
.ap-m-name { color:#fff; font-family:'Inter',sans-serif; font-size:16px; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-m-sub { color:#8a8a8e; font-family:'Inter',sans-serif; font-size:14px; margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-m-div { height:1px; background:rgba(255,255,255,0.12); margin:14px 0 12px; }
.ap-m-price { color:#fff; font-family:'Inter',sans-serif; font-size:19px; font-weight:700; }
.ap-legal { color:#5a5a5a; font-family:'Inter',sans-serif; 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,#0d0d0d 55%,rgba(13,13,13,0.86) 100%); }
.ap-dc { display:block; }
.ap-confirm-label { color:#fff; font-family:'Inter',sans-serif; font-size:15px; font-weight:600; }
.ap-confirm-hit { position:absolute; inset:0; background:none; border:none; cursor:pointer; }

/* ═══════════════ PARENTAL CONTROL (Figma 24232:319084) ═══════════════ */
.pc-screen { background:#141414; }
.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:#989898; 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:#EBEBEB; }
.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:#EF4444; font-family:'Inter',sans-serif; font-size:14px; font-weight:500; line-height:1.4; }