:root {
  --bg: #12081f;
  --bg-elev: #1b1030;
  --card: #21123a;
  --text: #f7f0ff;
  --muted: #b6a8cf;
  --accent: #8b3dff;
  --accent-hover: #9d58ff;
  --accent-soft: #c59bff;
  --border: #34224f;
  --radius: 14px;
  --shadow: 0 18px 50px rgba(6, 2, 18, .45);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* El atributo hidden siempre gana sobre display:flex de .modal/.player-overlay */
[hidden] { display: none !important; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(139, 61, 255, .2), transparent 28%),
    radial-gradient(circle at top right, rgba(76, 0, 255, .18), transparent 34%),
    linear-gradient(180deg, #1a0c2a 0%, #12081f 38%, #0d0717 100%);
  color: var(--text);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ===================== NAVBAR ===================== */
.navbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px 40px;
  background: linear-gradient(180deg, rgba(16,9,28,.96), rgba(16,9,28,.74) 70%, transparent);
  backdrop-filter: blur(6px);
}
.nav-left { display: flex; align-items: center; gap: 32px; }
.logo {
  font-size: 26px; font-weight: 900; letter-spacing: -.08em; color: var(--text);
  text-transform: uppercase;
}
.logo span { color: var(--accent-soft); }
.nav-links { display: flex; gap: 20px; }
.nav-links a { color: var(--muted); font-size: 14px; font-weight: 500; transition: color .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--text); }

.nav-right { display: flex; align-items: center; gap: 16px; }
.search-box { display: flex; gap: 8px; }
.search-box input, .search-box select {
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  color: var(--text); padding: 9px 12px; border-radius: 8px; font-size: 14px; outline: none;
}
.search-box input { width: 220px; transition: border-color .15s, width .2s; }
.search-box input:focus { border-color: var(--accent); }
.search-box select { cursor: pointer; }
.search-box option { background: var(--bg-elev); }

/* ===================== BOTONES ===================== */
.btn {
  border: none; border-radius: 8px; padding: 10px 18px; font-size: 14px; font-weight: 600;
  transition: transform .06s, background .15s, opacity .15s; color: var(--text);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: linear-gradient(135deg, var(--accent), #6a2ed8); box-shadow: 0 10px 30px rgba(139, 61, 255, .28); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: rgba(255,255,255,.12); }
.btn-secondary:hover { background: rgba(255,255,255,.25); }
.btn-ghost { background: transparent; border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--accent-soft); }
.btn-small { padding: 8px 14px; font-size: 13px; }
.btn-block { width: 100%; }

/* ===================== HERO ===================== */
.hero {
  position: relative; height: 64vh; min-height: 460px; display: flex; align-items: flex-end;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero-overlay { position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(18,8,31,.96) 0%, rgba(18,8,31,.62) 45%, rgba(18,8,31,.18) 70%, transparent 100%),
    linear-gradient(0deg, var(--bg), transparent 58%);
}
.hero-rail {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; pointer-events: none;
}
.hero-nav {
  width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(14,8,24,.46); color: var(--text); font-size: 28px; pointer-events: auto;
  backdrop-filter: blur(10px); transition: transform .18s, border-color .18s, background .18s;
}
.hero-nav:hover { transform: scale(1.05); border-color: rgba(197,155,255,.7); background: rgba(31,18,58,.72); }
.hero-content {
  position: relative; z-index: 3; padding: 0 40px 56px; max-width: 700px;
  animation: heroReveal .65s ease both;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 7px 12px;
  border-radius: 999px; background: rgba(139,61,255,.18); border: 1px solid rgba(197,155,255,.28);
  color: #f0e6ff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.hero-content h1 { font-size: 48px; font-weight: 900; line-height: 1.05; margin-bottom: 14px; }
.hero-meta { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.hero-desc { font-size: 16px; line-height: 1.5; color: #dcdce2; margin-bottom: 22px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hero-actions { display: flex; gap: 12px; }
.hero-dots { display: flex; gap: 10px; margin-top: 22px; }
.hero-dot {
  width: 10px; height: 10px; border-radius: 999px; border: none;
  background: rgba(255,255,255,.28); transition: transform .18s, background .18s, width .18s;
}
.hero-dot.active { width: 30px; background: var(--accent-soft); }

@keyframes heroReveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===================== CATÁLOGO ===================== */
.content { padding: 28px 40px 80px; }
.section-title { font-size: 22px; font-weight: 700; margin-bottom: 18px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.card {
  background: var(--card); border-radius: var(--radius); overflow: hidden; cursor: pointer;
  transition: transform .22s, box-shadow .22s, border-color .22s; position: relative;
  border: 1px solid rgba(255,255,255,.04);
}
.card:hover { transform: translateY(-8px) scale(1.025); box-shadow: var(--shadow); border-color: rgba(197,155,255,.18); z-index: 2; }
.card-poster { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; background: #222; }
.card-body { padding: 10px 12px 14px; }
.card-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-genres { font-size: 12px; color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-rating { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.75);
  color: #ffd34e; font-size: 12px; font-weight: 700; padding: 3px 7px; border-radius: 6px; }
.card-type {
  position: absolute; top: 8px; left: 8px; background: rgba(18,8,31,.82);
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 7px; border-radius: 6px; text-transform: uppercase;
}
.reveal-up {
  opacity: 0;
  transform: translateY(18px);
  animation: revealUp .55s ease forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes revealUp {
  to { opacity: 1; transform: translateY(0); }
}
.empty { text-align: center; color: var(--muted); padding: 60px 0; font-size: 16px; }

/* ===================== MODALES ===================== */
.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.75); backdrop-filter: blur(2px); }
.modal-card { position: relative; background: var(--bg-elev); border-radius: 14px; width: 100%;
  max-width: 860px; max-height: 92vh; overflow-y: auto; box-shadow: var(--shadow); }
.modal-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 36px; height: 36px;
  border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; font-size: 16px; }
.modal-close:hover { background: rgba(0,0,0,.85); }

/* Detalle serie */
.detail-hero { position: relative; height: 320px; }
.detail-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.detail-hero-fade { position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--bg-elev) 3%, transparent 60%),
             linear-gradient(90deg, rgba(27,16,48,.88), transparent 60%); }
.detail-hero-info { position: absolute; bottom: 22px; left: 28px; right: 28px; }
.detail-hero-info h2 { font-size: 34px; font-weight: 900; margin-bottom: 10px; }
.detail-meta { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.detail-actions { display: flex; gap: 12px; }
.detail-body { padding: 22px 28px 30px; }
.detail-desc { color: #d6d6dd; line-height: 1.6; margin-bottom: 22px; }
.season-select { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.season-select select { background: var(--card); color: var(--text); border: 1px solid var(--border);
  padding: 8px 12px; border-radius: 8px; }

.episode-list { display: flex; flex-direction: column; gap: 8px; }
.episode-row { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 10px;
  background: var(--card); cursor: pointer; transition: background .15s; }
.episode-row:hover { background: #2a1945; }
.episode-num { font-size: 20px; font-weight: 700; color: var(--muted); width: 28px; text-align: center; }
.episode-thumb { width: 120px; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; background: #333; flex: none; }
.episode-info { flex: 1; min-width: 0; }
.episode-info h4 { font-size: 15px; margin-bottom: 4px; }
.episode-info p { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.episode-dur { font-size: 12px; color: var(--muted); flex: none; }
.episode-play { font-size: 22px; color: var(--text); flex: none; opacity: .0; transition: opacity .15s; }
.episode-row:hover .episode-play { opacity: 1; }

/* ===================== AUTH ===================== */
.auth-card { max-width: 400px; padding: 34px 30px; }
.auth-card h2 { margin-bottom: 22px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input { width: 100%; background: var(--card); border: 1px solid var(--border); color: var(--text);
  padding: 11px 12px; border-radius: 8px; font-size: 15px; outline: none; }
.field input:focus { border-color: var(--accent); }
.auth-error { color: #ff6b6b; font-size: 13px; margin-bottom: 14px; }
.auth-switch { margin-top: 18px; font-size: 14px; color: var(--muted); text-align: center; }
.auth-switch a { color: var(--accent); font-weight: 600; margin-left: 4px; }

/* Menú usuario */
.user-menu { display: flex; align-items: center; gap: 12px; }
.user-avatar { width: 34px; height: 34px; border-radius: 8px; background: var(--accent);
  display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.user-name { font-size: 14px; font-weight: 600; }

/* ===================== REPRODUCTOR ===================== */
.player-overlay { position: fixed; inset: 0; z-index: 80; background: #000; display: flex; }
.player-close { position: absolute; top: 18px; left: 18px; z-index: 5; width: 44px; height: 44px;
  border-radius: 50%; border: none; background: rgba(0,0,0,.5); color: #fff; font-size: 20px; }
.player-close:hover { background: rgba(0,0,0,.8); }
.player-stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; }
.player-stage video { width: 100%; height: 100%; object-fit: contain; background: #000; }
/* Reproductor de terceros (Provider = 'embed') */
.player-stage .player-embed { width: 100%; height: 100%; border: 0; background: #000; }

.player-title { position: absolute; top: 22px; left: 74px; right: 74px; font-size: 18px; font-weight: 600;
  text-shadow: 0 2px 8px rgba(0,0,0,.9); pointer-events: none;
  opacity: 1; transition: opacity .3s; }
.player-stage.hide-ui .player-title,
.player-stage.hide-ui .player-controls { opacity: 0; pointer-events: none; }
.player-stage.hide-ui { cursor: none; }

.skip-btn { position: absolute; bottom: 120px; right: 40px; z-index: 4;
  background: rgba(255,255,255,.92); color: #111; border: none; padding: 12px 22px;
  border-radius: 8px; font-size: 15px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.skip-btn:hover { background: #fff; }
.skip-btn.next-ep { background: var(--accent); color: #fff; }
.skip-btn.next-ep:hover { background: var(--accent-hover); }

.player-controls { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  padding: 20px 40px 22px; background: linear-gradient(0deg, rgba(0,0,0,.85), transparent);
  transition: opacity .3s; }
.progress { position: relative; height: 6px; background: rgba(255,255,255,.25); border-radius: 4px;
  cursor: pointer; margin-bottom: 14px; }
.progress-buffer { position: absolute; height: 100%; background: rgba(255,255,255,.35); border-radius: 4px; }
.progress-played { position: absolute; height: 100%; width: 0; background: var(--accent); border-radius: 4px; }
.progress-played::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; background: var(--accent); border-radius: 50%; }
.progress-marker { position: absolute; top: 0; height: 100%; background: #ffd34e; opacity: .8; border-radius: 2px; }

.controls-row { display: flex; align-items: center; gap: 16px; }
.ctrl { background: transparent; border: none; color: #fff; font-size: 20px; line-height: 1;
  padding: 4px; opacity: .9; transition: opacity .12s, transform .06s; }
.ctrl:hover { opacity: 1; transform: scale(1.12); }
.ctrl-spacer { flex: 1; }
.time { font-size: 13px; color: #ddd; font-variant-numeric: tabular-nums; }
.ep-quick-select { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px; padding: 6px 10px; font-size: 13px; max-width: 240px; }
.ep-quick-select option { background: #16161d; }
.volume { display: flex; align-items: center; gap: 8px; }
.volume input[type=range] { width: 90px; accent-color: var(--accent); }

/* ===================== REPRODUCTOR: MANDO CENTRAL ===================== */
/* En escritorio manda la barra de abajo; esto es para el dedo, así que solo
   aparece donde el puntero es grueso o la pantalla es pequeña. */
.player-center {
  position: absolute; inset: 0; z-index: 4; display: none;
  align-items: center; justify-content: center; gap: 34px;
  pointer-events: none;
}
.player-center .round-btn { pointer-events: auto; }
.round-btn {
  position: relative; width: 54px; height: 54px; border-radius: 50%;
  border: none; background: rgba(0, 0, 0, .45); color: #fff;
  display: grid; place-items: center;
  transition: background .15s, transform .06s;
}
.round-btn:active { transform: scale(.92); background: rgba(0, 0, 0, .7); }
.round-btn.big { width: 74px; height: 74px; background: rgba(0, 0, 0, .55); }
/* El "10" va dentro de la flecha circular, como en cualquier reproductor. */
.round-btn-label {
  position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%);
  font-size: 10px; font-weight: 700; letter-spacing: -.02em;
}
.player-stage.hide-ui .player-center { opacity: 0; pointer-events: none; }
.player-center { transition: opacity .3s; }

/* Indicador de carga: los segmentos duran 20 s, así que el primero tarda en
   llegar y sin esto parece que el reproductor se colgó. */
.player-spinner { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none; }
.spinner-ring {
  width: 54px; height: 54px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--accent);
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Aviso cuando el capítulo no se puede reproducir (normalmente, enlace
   caducado). Ocupa el centro porque es lo único que hay que mirar. */
.player-error {
  position: absolute; inset: 0; z-index: 6; margin: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px;
  background: rgba(11, 11, 15, .82);
}
.player-error-title { font-size: 19px; font-weight: 700; }
.player-error-desc { font-size: 14px; color: var(--muted); max-width: 420px; line-height: 1.5; }
.player-error-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* ===================== REPRODUCTOR EN MÓVIL ===================== */
@media (max-width: 900px), (pointer: coarse) {
  .player-center { display: flex; }

  /* Lo que se movió al centro sobra abajo, y el volumen lo llevan las teclas
     físicas del teléfono. */
  .player-controls #btnPlay,
  .player-controls #btnPrev,
  .player-controls #btnNext,
  .player-controls .volume input[type=range] { display: none; }

  .player-controls { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .controls-row { gap: 10px; }
  /* 44 px es el mínimo por debajo del cual el dedo empieza a fallar. */
  .controls-row .ctrl { min-width: 44px; min-height: 44px; font-size: 22px; }
  .time { font-size: 12px; }
  .ep-quick-select { max-width: 108px; min-height: 40px; font-size: 12px; }

  /* La barra de progreso es lo más difícil de acertar con el dedo: se engorda y
     se le da un área de toque mayor que su altura visible. */
  .progress { height: 5px; margin-bottom: 12px; }
  .progress::before { content: ''; position: absolute; inset: -14px 0; }
  .progress-played::after { width: 16px; height: 16px; right: -8px; }

  .player-title {
    top: max(14px, env(safe-area-inset-top)); left: 68px; right: 16px;
    font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .player-close {
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
  }
  .skip-btn { bottom: 84px; right: max(14px, env(safe-area-inset-right)); padding: 11px 16px; font-size: 14px; }
  .settings-panel { font-size: 14px; }
  .settings-panel label { min-height: 34px; }
}

/* Móvil en horizontal: la pantalla es baja, así que todo se aprieta en vertical
   para que el vídeo siga siendo lo que más ocupa. */
@media (max-height: 480px) and (orientation: landscape) {
  .player-center { gap: 42px; }
  .round-btn { width: 46px; height: 46px; }
  .round-btn.big { width: 62px; height: 62px; }
  .player-controls { padding: 6px 14px calc(6px + env(safe-area-inset-bottom)); }
  .progress { margin-bottom: 8px; }
  .skip-btn { bottom: 62px; }
  .player-title { font-size: 13px; }
}

/* ===================== TOAST ===================== */
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 100;
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  padding: 12px 20px; border-radius: 10px; box-shadow: var(--shadow); font-size: 14px;
  animation: toastIn .25s ease; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 820px) {
  .navbar { flex-wrap: wrap; padding: 12px 18px; gap: 12px; }
  .nav-left { gap: 18px; }
  .search-box input { width: 140px; }
  .hero-content h1 { font-size: 32px; }
  .content { padding: 20px 18px 70px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
  .carousel { --card-w: 140px; }
  .carousel-track { gap: 12px; }
  .episode-thumb { width: 84px; }
  .player-controls { padding: 14px 16px 16px; }
  .ep-quick-select { max-width: 130px; }
  .skip-btn { right: 16px; bottom: 100px; }
}

/* Panel de opciones del reproductor (saltos automáticos y auto-avance) */
.player-settings { position: relative; }
.settings-panel {
  position: absolute; bottom: 34px; right: 0; z-index: 5;
  background: rgba(20, 20, 26, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  white-space: nowrap; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.settings-panel[hidden] { display: none; }
.settings-panel label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #e6e6ea; cursor: pointer;
}
.settings-panel input { accent-color: var(--accent); cursor: pointer; }

/* Secciones por tipo en el inicio (anime / series / películas separados) */
.type-section { margin-bottom: 38px; }
.type-section-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.type-section-head h3 { font-size: 21px; margin: 0; color: #f2f2f5; }
.type-count {
  font-size: 12px; color: #b6b6c0; background: rgba(255, 255, 255, 0.08);
  border-radius: 999px; padding: 2px 9px;
}
.type-section-all { margin-left: auto; font-size: 13px; padding: 5px 12px; flex: none; }

.continue-section .type-section-head h3 {
  background: linear-gradient(90deg, #fff, #d4bbff 72%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.continue-empty {
  position: relative;
  overflow: hidden;
  padding: 26px 24px;
  border-radius: 20px;
  border: 1px solid rgba(197,155,255,.14);
  background: linear-gradient(135deg, rgba(35, 19, 60, .96), rgba(22, 12, 38, .96));
  box-shadow: 0 18px 44px rgba(7, 3, 22, .25);
}
.continue-empty-glow {
  position: absolute;
  inset: auto -10% -45px auto;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(139,61,255,.34), transparent 68%);
  pointer-events: none;
}
.continue-empty h4 {
  position: relative;
  z-index: 1;
  font-size: 20px;
  margin-bottom: 8px;
}
.continue-empty p {
  position: relative;
  z-index: 1;
  max-width: 620px;
  color: var(--muted);
  line-height: 1.6;
}
.resume-card {
  background: linear-gradient(180deg, rgba(34,19,59,.95), rgba(27,16,48,.98));
  border: 1px solid rgba(197,155,255,.12);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.resume-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 44px rgba(7, 3, 22, .38);
  border-color: rgba(197,155,255,.28);
}
.resume-poster-wrap { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.resume-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.resume-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 18%, rgba(10, 6, 18, .15) 38%, rgba(10, 6, 18, .8) 100%);
}
.resume-type {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(18,8,31,.72); border: 1px solid rgba(197,155,255,.22);
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
.resume-progress {
  position: absolute; left: 12px; right: 12px; bottom: 12px; height: 6px;
  border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden;
}
.resume-progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
}
.resume-body { padding: 14px; }
.resume-body h4 { font-size: 15px; margin-bottom: 6px; }
.resume-body p { font-size: 12px; color: var(--muted); line-height: 1.45; }
.resume-meta { margin: 8px 0 14px; }

/* ===================== CARRUSELES DEL INICIO ===================== */
/* Cada tipo enseña sus 10 primeros en una fila que se desliza. La rejilla se
   reserva para el listado completo, donde sí hay que ver todo de golpe. */
.carousel { position: relative; --card-w: 180px; }
.carousel-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--card-w);
  gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
  /* Hueco para que el hover de la tarjeta no quede cortado por el desbordamiento:
     al desplazarse en horizontal el navegador recorta también en vertical. */
  padding: 8px 2px 14px;
  /* Sin esto, al llegar al final del carrusel el gesto sigue en la página (y en
     iOS puede disparar el "volver atrás"). */
  overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > .card { scroll-snap-align: start; }

.carousel-nav {
  position: absolute; top: 0; bottom: 14px; z-index: 3; width: 44px;
  display: flex; align-items: center; justify-content: center;
  border: none; color: var(--text); font-size: 30px; line-height: 1;
  background: linear-gradient(90deg, rgba(18,8,31,.92), rgba(18,8,31,0));
  opacity: 0; transition: opacity .18s;
}
.carousel-nav.next { right: 0; transform: scaleX(-1); }
.carousel-nav.prev { left: 0; }
.carousel:hover .carousel-nav { opacity: 1; }
.carousel-nav:hover { background: linear-gradient(90deg, rgba(18,8,31,.98), rgba(18,8,31,.2)); }
.carousel-nav:disabled { opacity: 0 !important; pointer-events: none; }
/* Si cabe entero no hay nada que desplazar. */
.carousel.no-scroll .carousel-nav { display: none; }

/* En táctil se arrastra con el dedo: las flechas sólo estorban. */
@media (hover: none) {
  .carousel-nav { display: none; }
}

/* ===================== LISTADO COMPLETO ===================== */
.browse-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.browse-head .section-title { margin-bottom: 0; min-width: 0; overflow-wrap: anywhere; }
.browse-count { font-size: 13px; color: var(--muted); }

.filter-bar {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  padding: 14px; margin-bottom: 22px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
}
.filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filter-field span { font-size: 12px; color: var(--muted); }
.filter-field select {
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  padding: 9px 12px; border-radius: 8px; font-size: 14px; outline: none; cursor: pointer;
  min-width: 160px; max-width: 100%;
}
.filter-field select:focus { border-color: var(--accent); }
.filter-field option { background: var(--bg-elev); }
.filter-clear { margin-left: auto; font-size: 13px; }

/* ===================== PAGINACIÓN ===================== */
.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 32px; flex-wrap: wrap; }
.page-numbers { display: flex; align-items: center; gap: 6px; }
.page-btn {
  min-width: 40px; height: 40px; padding: 0 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 14px; font-weight: 600;
  transition: background .15s, border-color .15s;
}
.page-btn:hover:not(:disabled) { border-color: var(--text); }
.page-btn.active { background: var(--accent); border-color: var(--accent); }
.page-btn:disabled { opacity: .4; cursor: default; }
.page-gap { color: var(--muted); padding: 0 2px; }
/* El resumen "3 / 12" sustituye a los números cuando no caben. */
.page-summary { display: none; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- Teléfonos -------------------------------------------------------- */
/* El corte de 820px cubre tablets. En un móvil de 360px la rejilla sigue
   apretada, la portada se come media pantalla y la ficha se abre como un
   modal centrado, que ahí desperdicia justo el espacio que no sobra. */
@media (max-width: 560px) {
  .navbar { padding: 10px 14px; }
  .nav-left { width: 100%; justify-content: space-between; gap: 12px; }
  /* Las secciones no caben en una línea: se deslizan en vez de romperse. */
  .nav-links { gap: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-right { width: 100%; }
  .search-box { width: 100%; }
  .search-box input { width: auto; flex: 1; }

  .hero { height: 52vh; min-height: 300px; }
  .hero-content { padding: 0 18px 28px; max-width: none; }
  .hero-content h1 { font-size: 26px; }
  .hero-desc { font-size: 14px; margin-bottom: 16px; }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .btn { flex: 1 1 auto; }

  .content { padding: 18px 14px 64px; }
  .section-title { font-size: 18px; margin-bottom: 12px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
  .card-body { padding: 8px 8px 10px; }
  .card-title { font-size: 13px; }
  .card-genres { font-size: 11px; }

  .type-section { margin-bottom: 26px; }
  .type-section-head { gap: 8px; margin-bottom: 10px; }
  .type-section-head h3 { font-size: 17px; }
  .type-section-all { padding: 5px 10px; min-height: 34px; }
  .carousel { --card-w: 116px; }
  .carousel-track { gap: 10px; padding: 6px 2px 10px; }

  /* Los dos filtros ocupan media fila cada uno en vez de apilarse. */
  .filter-bar { gap: 10px; padding: 12px; margin-bottom: 16px; }
  .filter-field { flex: 1 1 140px; }
  .filter-field select { min-width: 0; width: 100%; min-height: 44px; }
  .filter-clear { flex: 1 1 100%; margin-left: 0; }

  /* Con los números no cabe: se deja el paso a paso y el contador. */
  .pagination { gap: 10px; margin-top: 24px; }
  .page-numbers { display: none; }
  .page-summary { display: inline; }
  .page-step { flex: 1 1 0; min-height: 44px; }

  /* La ficha pasa a pantalla completa. */
  .modal { padding: 0; }
  .modal-card { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; }
  .detail-hero { height: 200px; }
  .detail-hero-info { left: 16px; right: 16px; bottom: 16px; }
  .detail-hero-info h2 { font-size: 22px; }
  .detail-body { padding: 16px 16px 24px; }
  .detail-actions { flex-wrap: wrap; }
  .detail-actions .btn { flex: 1 1 140px; }

  /* 44 px es el mínimo por debajo del cual un dedo empieza a fallar el toque. */
  .btn { min-height: 44px; }
  .modal-close { width: 44px; height: 44px; top: 10px; right: 10px; }
}

/* En pantalla táctil no hay puntero que "pase por encima": sin esto el efecto
   de hover se queda pegado en la tarjeta después de tocarla. */
@media (hover: none) {
  .card:hover { transform: none; box-shadow: none; }
}

/* --- iPhone con isla / notch ------------------------------------------ */
/* Dos cosas rompen aquí y no son cosméticas:
   1. En Safari de iOS, 100vh NO es la pantalla visible: incluye la barra del
      navegador, así que un elemento a 100vh se sale por abajo. dvh sí mide lo
      visible de verdad; el vh queda antes como respaldo para navegadores viejos.
   2. La isla dinámica y la barra inferior se comen contenido si no se respeta
      el área segura. */
@media (max-width: 560px) {
  .navbar { padding-top: max(10px, env(safe-area-inset-top)); }
  .content { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  .modal-card {
    max-height: 100vh;
    max-height: 100dvh;
    height: 100vh;
    height: 100dvh;
  }
  .detail-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .modal-close { top: max(10px, env(safe-area-inset-top)); }

  .hero { height: 52dvh; }
}

/* --- Menú de móvil ----------------------------------------------------- */
/* En un teléfono la barra amontonaba buscador, dos filtros y el botón de
   sesión en el mismo renglón. Ahora arriba solo quedan dos iconos y todo eso
   se recoge en un panel que se desliza. */
.nav-icons { display: none; gap: 4px; }
.nav-icon {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--text); cursor: pointer; border-radius: 8px;
}
.nav-icon:active { background: rgba(255,255,255,.12); }

@media (max-width: 560px) {
  .navbar { flex-wrap: nowrap; }
  .nav-icons { display: flex; }
  .nav-left { width: auto; flex: 1; min-width: 0; }
  .nav-links { display: none; }

  .nav-right {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 60%; max-width: 300px; min-width: 230px;
    flex-direction: column; align-items: stretch; gap: 18px;
    background: var(--bg-elev); border-left: 1px solid var(--border);
    padding: calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
    height: 100dvh;
    z-index: 70; overflow-y: auto;

    /* Cerrado se quita del todo, y esto es lo que de verdad mata la barra de
       desplazamiento horizontal. No basta con `visibility: hidden` ni con
       recortar en <html>: el panel es `fixed`, así que su bloque contenedor es
       el viewport y se escapa de cualquier recorte del documento. Estando
       desplazado un 100% a la derecha, seguía sumando su ancho al área
       desplazable de la página.
       De paso, cerrado tampoco lo alcanzan el tabulador ni el lector de
       pantalla. */
    display: none;
    transform: translateX(100%);
  }

  /* La transición se declara en el estado abierto a propósito: al cerrar
     desaparece con la clase, el panel se oculta en el acto y no queda ni un
     instante asomando fuera de la pantalla. Al abrir, `@starting-style` da el
     punto de partida para que entre deslizándose. */
  body.menu-open .nav-right {
    display: flex;
    transform: none;
    transition: transform .22s ease;
  }
  @starting-style {
    body.menu-open .nav-right { transform: translateX(100%); }
  }

  /* Fondo oscuro detrás del panel. */
  body.menu-open::before {
    content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 69;
  }

  /* Dentro del panel las secciones vuelven, en vertical y con sitio para el dedo. */
  /* Ya dentro del panel: en vertical y con sitio para el dedo. */
  .nav-right .nav-links {
    display: flex; flex-direction: column; gap: 2px; width: 100%;
  }
  .nav-right .nav-links a { padding: 12px 6px; font-size: 16px; border-bottom: 1px solid var(--border); }

  .search-box { flex-direction: column; gap: 10px; width: 100%; }
  .search-box input, .search-box select { width: 100%; min-height: 44px; }
  .auth-area, .auth-area .btn { width: 100%; }
}

/* Red de seguridad contra el desbordamiento horizontal: aquí sólo caen los
   casos normales (un título largo sin espacios, una imagen ancha). Al panel del
   menú, que era la causa real de la barra horizontal en móvil, esto NO le
   afecta: es `fixed` y se escapa del recorte del documento, así que se resuelve
   en su propia regla ocultándolo del todo mientras está cerrado.

   El recorte va SOLO en <html>, y con `clip` por delante de `hidden`:
   - en <body>, `overflow-x: hidden` lo convierte en contenedor de scroll y eso
     rompe el `position: sticky` de la barra superior, que dejaba de quedarse
     arriba al bajar;
   - `clip` recorta sin crear contenedor de scroll, así que el sticky sigue
     funcionando. `hidden` queda de respaldo para navegadores sin `clip`.

   Los carruseles sí se desplazan en horizontal, pero cada uno dentro de su
   propia pista: la página en sí, nunca. */
html {
  overflow-x: hidden;
  overflow-x: clip;
}
body { max-width: 100%; }