/*
Theme Name: PrimeFlix by DownPrime.com
Theme URI: https://www.downprime.com
Author: DownPrime
Author URI: https://www.downprime.com
Description: Plataforma OTT avanzada tipo Netflix - Películas, Series y Animes con Smart Heroes, hubs de plataformas y experiencia fluida optimizada
Version: 3.10.14.18
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: primeflx
Tags: entertainment, ott, streaming, netflix-like, movies, series, anime
*/

/* ============================================================
   PRIMEFLX - GLOBAL CSS VARIABLES & RESET
   ============================================================ */
:root {
  /* Core Colors */
  --pf-bg:           #050508;
  --pf-bg-2:         #0a0a10;
  --pf-bg-3:         #12121a;
  --pf-bg-card:      #14141e;
  --pf-bg-glass:     rgba(255,255,255,0.04);
  --pf-border:       rgba(255,255,255,0.08);
  --pf-border-hover: rgba(255,255,255,0.18);

  /* Accent Colors */
  --pf-accent:       #7c3aed;
  --pf-accent-2:     #a855f7;
  --pf-accent-3:     #c084fc;
  --pf-accent-glow:  rgba(124,58,237,0.4);
  --pf-red:          #ef4444;
  --pf-gold:         #f59e0b;
  --pf-green:        #10b981;

  /* Text */
  --pf-text:         #f1f0f8;
  --pf-text-2:       #a09bbf;
  --pf-text-3:       #5e5a78;

  /* Gradients */
  --pf-grad-hero:    linear-gradient(135deg, #050508 0%, #1a0a2e 50%, #050508 100%);
  --pf-grad-card:    linear-gradient(180deg, transparent 50%, rgba(5,5,8,0.98) 100%);
  --pf-grad-accent:  linear-gradient(135deg, #7c3aed, #a855f7);
  --pf-grad-shine:   linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.08) 50%, transparent 60%);

  /* Blur */
  --pf-blur-sm:      blur(8px);
  --pf-blur-md:      blur(16px);
  --pf-blur-lg:      blur(32px);

  /* Spacing */
  --pf-radius:       12px;
  --pf-radius-lg:    20px;
  --pf-radius-xl:    28px;

  /* Transitions */
  --pf-transition:   0.3s cubic-bezier(0.4,0,0.2,1);
  --pf-transition-slow: 0.6s cubic-bezier(0.4,0,0.2,1);

  /* Fonts */
  --pf-font-display: 'Outfit', 'Syne', sans-serif;
  --pf-font-body:    'Roboto', 'DM Sans', 'Nunito', sans-serif;
  --pf-font-mono:    'JetBrains Mono', monospace;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--pf-font-body);
  background: var(--pf-bg);
  color: var(--pf-text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }
ul, ol { list-style: none; }

/* ============================================================
   GLOBAL UTILITY CLASSES
   ============================================================ */
.pf-container { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.pf-glass {
  background: var(--pf-bg-glass);
  backdrop-filter: var(--pf-blur-md);
  -webkit-backdrop-filter: var(--pf-blur-md);
  border: 1px solid var(--pf-border);
}
.pf-hidden { display: none !important; }
.pf-flex { display: flex; }
.pf-center { display: flex; align-items: center; justify-content: center; }
.pf-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--pf-bg); }
::-webkit-scrollbar-thumb { background: var(--pf-accent); border-radius: 3px; }

/* ============================================================
   LOADER GLOBAL
   ============================================================ */
.pf-loader-overlay {
  position: fixed; inset: 0;
  background: var(--pf-bg);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.25s, visibility 0.25s;
}
.pf-loader-overlay.hidden,
.pf-loader-overlay.fade-out { opacity: 0; visibility: hidden; pointer-events: none; }
.pf-loader-logo {
  font-family: var(--pf-font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  background: var(--pf-grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: pf-pulse 1.5s ease-in-out infinite;
}
@keyframes pf-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.97); }
}

/* ============================================================
   NAVBAR
   ============================================================ */
#pf-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: var(--pf-transition);
}
#pf-navbar.scrolled {
  background: rgba(5,5,8,0.92);
  backdrop-filter: var(--pf-blur-md);
  -webkit-backdrop-filter: var(--pf-blur-md);
  border-bottom: 1px solid var(--pf-border);
  box-shadow: 0 4px 32px rgba(0,0,0,0.5);
}
.pf-nav-logo {
  font-family: var(--pf-font-display);
  font-size: 1.6rem;
  font-weight: 900;
  background: var(--pf-grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}
.pf-nav-links {
  display: flex;
  gap: 8px;
  align-items: center;
}
.pf-nav-link {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--pf-text-2);
  transition: var(--pf-transition);
  position: relative;
}
.pf-nav-link:hover, .pf-nav-link.active { color: var(--pf-text); background: var(--pf-bg-glass); }
.pf-nav-right { display: flex; align-items: center; gap: 12px; }

/* Search bar in nav */
.pf-nav-search {
  position: relative;
  display: flex;
  align-items: center;
}
.pf-search-toggle {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--pf-bg-glass);
  border: 1px solid var(--pf-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--pf-text-2);
  transition: var(--pf-transition);
}
.pf-search-toggle:hover { color: var(--pf-text); border-color: var(--pf-border-hover); }
.pf-search-expanded {
  position: absolute;
  right: 0;
  width: 320px;
  background: var(--pf-bg-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  overflow: hidden;
  transform-origin: right center;
  transition: var(--pf-transition);
  display: none;
}
.pf-search-expanded.open { display: block; }
.pf-search-input-wrap {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  gap: 10px;
}
.pf-search-input-wrap input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--pf-text);
  font-size: 0.9rem;
}
.pf-search-input-wrap input::placeholder { color: var(--pf-text-3); }
.pf-search-results-dropdown {
  max-height: 380px;
  overflow-y: auto;
  border-top: 1px solid var(--pf-border);
}
.pf-search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: var(--pf-transition);
}
.pf-search-result-item:hover { background: var(--pf-bg-glass); }
.pf-search-result-thumb {
  width: 38px; height: 56px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--pf-bg-3);
  flex-shrink: 0;
}
.pf-search-result-info { flex: 1; overflow: hidden; }
.pf-search-result-title { font-size: 0.85rem; font-weight: 600; }
.pf-search-result-meta { font-size: 0.75rem; color: var(--pf-text-3); margin-top: 2px; }
.pf-search-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pf-badge-movie { background: rgba(124,58,237,0.3); color: var(--pf-accent-3); }
.pf-badge-serie { background: rgba(16,185,129,0.2); color: var(--pf-green); }
.pf-badge-anime { background: rgba(245,158,11,0.2); color: var(--pf-gold); }

/* User avatar */
.pf-user-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid var(--pf-border);
  transition: var(--pf-transition);
  position: relative;
}
.pf-user-avatar:hover { border-color: var(--pf-accent); }
.pf-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pf-user-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 220px;
  background: var(--pf-bg-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  overflow: hidden;
  padding: 8px;
  display: none;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.pf-user-dropdown.open { display: block; }
.pf-dropdown-user-info {
  padding: 12px;
  border-bottom: 1px solid var(--pf-border);
  margin-bottom: 8px;
}
.pf-dropdown-username { font-weight: 700; font-size: 0.9rem; }
.pf-dropdown-email { font-size: 0.75rem; color: var(--pf-text-3); }
.pf-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--pf-text-2);
  cursor: pointer;
  transition: var(--pf-transition);
}
.pf-dropdown-item:hover { background: var(--pf-bg-glass); color: var(--pf-text); }
.pf-dropdown-item.danger:hover { color: var(--pf-red); }
.pf-auth-btn {
  padding: 8px 20px;
  background: var(--pf-grad-accent);
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  transition: var(--pf-transition);
}
.pf-auth-btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* ============================================================
   HERO SECTION
   ============================================================ */
#pf-hero {
  position: relative;
  height: 85vh;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.pf-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.pf-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: var(--pf-transition-slow);
}
.pf-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(5,5,8,0.95) 30%, rgba(5,5,8,0.3) 70%, rgba(5,5,8,0.1) 100%),
              linear-gradient(to top, rgba(5,5,8,1) 0%, transparent 50%);
}
.pf-hero-content {
  position: relative;
  z-index: 1;
  padding: 0 5% 6%;
  max-width: 620px;
}
.pf-hero-meta {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pf-text-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.pf-hero-badge {
  padding: 3px 10px;
  background: var(--pf-grad-accent);
  border-radius: 20px;
  color: white;
  font-size: 0.7rem;
}
.pf-hero-title {
  font-family: var(--pf-font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.pf-hero-desc {
  font-size: 0.95rem;
  color: var(--pf-text-2);
  line-height: 1.6;
  margin-bottom: 28px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pf-hero-actions { display: flex; gap: 12px; align-items: center; }
.pf-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px;
  background: var(--pf-text);
  color: var(--pf-bg);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: var(--pf-transition);
  border: 2px solid transparent;
}
.pf-btn-primary:hover { background: var(--pf-text-2); transform: scale(1.02); }
.pf-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px;
  background: rgba(255,255,255,0.12);
  color: var(--pf-text);
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  backdrop-filter: var(--pf-blur-sm);
  transition: var(--pf-transition);
  border: 1px solid var(--pf-border);
}
.pf-btn-secondary:hover { background: rgba(255,255,255,0.2); transform: scale(1.02); }
.pf-hero-dots {
  position: absolute;
  bottom: 24px; right: 5%;
  display: flex; gap: 8px;
  z-index: 1;
}
.pf-hero-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pf-text-3);
  cursor: pointer;
  transition: var(--pf-transition);
}
.pf-hero-dot.active { background: var(--pf-accent); width: 24px; border-radius: 3px; }

/* ============================================================
   CONTENT ROWS (SLIDERS)
   ============================================================ */
.pf-section { padding: 32px 0; }
.pf-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  margin-bottom: 16px;
}
.pf-section-title {
  font-family: var(--pf-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  display: flex; align-items: center; gap: 10px;
}
.pf-section-title-icon { color: var(--pf-accent); }
.pf-section-see-all {
  font-size: 0.8rem;
  color: var(--pf-text-3);
  display: flex; align-items: center; gap: 4px;
  transition: var(--pf-transition);
}
.pf-section-see-all:hover { color: var(--pf-accent-3); }

.pf-slider-wrap {
  position: relative;
  overflow: hidden;
}
.pf-slider-track {
  display: flex;
  gap: 12px;
  padding: 8px 24px 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pf-slider-track::-webkit-scrollbar { display: none; }

.pf-slider-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 10;
  width: 44px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(90deg, rgba(5,5,8,0.9), transparent);
  color: white;
  cursor: pointer;
  transition: var(--pf-transition);
  border-radius: 4px;
}
.pf-slider-arrow.prev { left: 0; background: linear-gradient(90deg, rgba(5,5,8,0.95), transparent); }
.pf-slider-arrow.next { right: 0; background: linear-gradient(270deg, rgba(5,5,8,0.95), transparent); }
.pf-slider-arrow:hover svg { transform: scale(1.3); }
.pf-slider-arrow svg { transition: var(--pf-transition); }

/* ============================================================
   CONTENT CARDS
   ============================================================ */
.pf-card {
  flex-shrink: 0;
  width: 160px;
  cursor: pointer;
  position: relative;
  transition: transform var(--pf-transition), z-index 0s;
}
@media (min-width: 768px) { .pf-card { width: 180px; } }
@media (min-width: 1200px) { .pf-card { width: 200px; } }

.pf-card:hover { transform: scale(1.08) translateY(-4px); z-index: 10; }
.pf-card-thumb {
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: var(--pf-radius);
  overflow: hidden;
  background: var(--pf-bg-3);
  position: relative;
}
.pf-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: var(--pf-transition-slow);
}
.pf-card:hover .pf-card-thumb img { transform: scale(1.05); }
.pf-card-overlay {
  position: absolute;
  inset: 0;
  background: var(--pf-grad-card);
  opacity: 0;
  transition: var(--pf-transition);
  border-radius: var(--pf-radius);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px;
}
.pf-card:hover .pf-card-overlay { opacity: 1; }
.pf-card-play-btn {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: var(--pf-blur-sm);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,0.3);
  transition: var(--pf-transition);
}
.pf-card-play-btn:hover { background: var(--pf-text); color: var(--pf-bg); }
.pf-card-overlay-actions { display: flex; gap: 6px; }
.pf-card-action-btn {
  width: 32px; height: 32px;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  color: var(--pf-text-2);
  transition: var(--pf-transition);
  border: 1px solid var(--pf-border);
}
.pf-card-action-btn:hover { color: var(--pf-text); border-color: var(--pf-border-hover); }
.pf-card-action-btn.liked { color: var(--pf-red); }
.pf-card-info { padding: 8px 2px 0; }
.pf-card-title {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-card-meta { font-size: 0.72rem; color: var(--pf-text-3); margin-top: 2px; }
.pf-card-rating {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--pf-gold);
  font-size: 0.72rem;
  font-weight: 600;
}

/* Progress bar on card (Continue watching) */
.pf-card-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,0.2);
  border-radius: 0 0 var(--pf-radius) var(--pf-radius);
}
.pf-card-progress-bar {
  height: 100%;
  background: var(--pf-accent);
  border-radius: inherit;
  transition: width 0.3s;
}

/* Card skeleton loader */
.pf-card-skeleton .pf-card-thumb {
  background: linear-gradient(90deg, var(--pf-bg-3) 25%, var(--pf-bg-glass) 50%, var(--pf-bg-3) 75%);
  background-size: 200% 100%;
  animation: pf-shimmer 1.5s infinite;
}
@keyframes pf-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ============================================================
   PLAYER PAGE
   ============================================================ */
#pf-player-page { background: #000; min-height: 100vh; }
.pf-player-container {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding-top: 56.25%;
}
.pf-player-iframe-wrap {
  position: absolute;
  inset: 0;
  border-radius: 0;
  overflow: hidden;
  background: #000;
}
.pf-player-iframe-wrap iframe {
  width: 100%; height: 100%;
  border: none;
}
.pf-player-loader {
  position: absolute;
  inset: 0;
  background: var(--pf-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 5;
  transition: opacity 0.5s;
}
.pf-player-loader.hidden { opacity: 0; pointer-events: none; }
.pf-player-spinner {
  width: 50px; height: 50px;
  border: 3px solid var(--pf-border);
  border-top-color: var(--pf-accent);
  border-radius: 50%;
  animation: pf-spin 0.8s linear infinite;
}
@keyframes pf-spin { to { transform: rotate(360deg); } }

.pf-player-info {
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px;
}
.pf-player-meta {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  margin-bottom: 12px;
}
.pf-player-title {
  font-family: var(--pf-font-display);
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.pf-tag {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid;
}
.pf-tag-year { border-color: var(--pf-border); color: var(--pf-text-3); }
.pf-tag-rating { border-color: rgba(245,158,11,0.4); color: var(--pf-gold); }
.pf-tag-hd { border-color: rgba(124,58,237,0.4); color: var(--pf-accent-3); background: rgba(124,58,237,0.1); }

/* Episode selector */
.pf-episode-section { padding: 0 24px 40px; max-width: 1600px; margin: 0 auto; }
.pf-season-tabs {
  display: flex; gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.pf-season-tab {
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--pf-bg-3);
  border: 1px solid var(--pf-border);
  color: var(--pf-text-2);
  cursor: pointer;
  transition: var(--pf-transition);
}
.pf-season-tab.active {
  background: var(--pf-grad-accent);
  border-color: transparent;
  color: white;
}
.pf-episodes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.pf-episode-card {
  display: flex; gap: 12px;
  padding: 12px;
  background: var(--pf-bg-card);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  cursor: pointer;
  transition: var(--pf-transition);
}
.pf-episode-card:hover, .pf-episode-card.active {
  background: var(--pf-bg-3);
  border-color: var(--pf-accent);
}
.pf-episode-thumb {
  width: 120px; height: 68px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--pf-bg-3);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.pf-episode-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-episode-thumb-play {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: var(--pf-transition);
}
.pf-episode-card:hover .pf-episode-thumb-play { opacity: 1; }
.pf-episode-details { flex: 1; min-width: 0; }
.pf-episode-num { font-size: 0.72rem; color: var(--pf-text-3); font-weight: 600; }
.pf-episode-title { font-size: 0.875rem; font-weight: 600; margin: 2px 0; }
.pf-episode-desc {
  font-size: 0.75rem;
  color: var(--pf-text-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   INTERACTION BAR (Likes, Rating, Reactions)
   ============================================================ */
.pf-interaction-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: 1px solid var(--pf-border);
  margin-bottom: 20px;
}
.pf-reaction-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: var(--pf-bg-3);
  border: 1px solid var(--pf-border);
  border-radius: 20px;
  font-size: 0.85rem;
  color: var(--pf-text-2);
  transition: var(--pf-transition);
  position: relative;
  overflow: hidden;
}
.pf-reaction-btn:hover { border-color: var(--pf-border-hover); color: var(--pf-text); }
.pf-reaction-btn.active-like { color: var(--pf-green); border-color: var(--pf-green); background: rgba(16,185,129,0.1); }
.pf-reaction-btn.active-dislike { color: var(--pf-red); border-color: var(--pf-red); background: rgba(239,68,68,0.1); }
.pf-reaction-btn.active-fav { color: var(--pf-gold); border-color: var(--pf-gold); background: rgba(245,158,11,0.1); }

.pf-emoji-reactions {
  display: flex; gap: 6px;
  margin-left: auto;
}
.pf-emoji-btn {
  padding: 6px 12px;
  background: var(--pf-bg-3);
  border: 1px solid var(--pf-border);
  border-radius: 20px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: var(--pf-transition);
  position: relative;
}
.pf-emoji-btn:hover { transform: scale(1.2) rotate(-5deg); border-color: var(--pf-border-hover); }
.pf-emoji-btn .emoji-count {
  font-size: 0.65rem;
  font-family: var(--pf-font-body);
  color: var(--pf-text-3);
  vertical-align: super;
}

/* ============================================================
   MODAL / LIGHTBOX
   ============================================================ */
.pf-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: var(--pf-blur-md);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: var(--pf-transition);
}
.pf-modal-overlay.open { opacity: 1; visibility: visible; }
.pf-modal {
  width: 100%;
  max-width: 860px;
  background: var(--pf-bg-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-xl);
  overflow: hidden;
  transform: translateY(30px) scale(0.97);
  transition: var(--pf-transition);
  max-height: 90vh;
  overflow-y: auto;
}
.pf-modal-overlay.open .pf-modal { transform: translateY(0) scale(1); }
.pf-modal-hero {
  position: relative;
  width: 100%;
  height: 280px;
}
.pf-modal-hero img { width: 100%; height: 100%; object-fit: cover; }
.pf-modal-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), var(--pf-bg-3));
}
.pf-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--pf-border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--pf-text);
  cursor: pointer;
  z-index: 1;
  transition: var(--pf-transition);
}
.pf-modal-close:hover { background: var(--pf-red); border-color: var(--pf-red); }
.pf-modal-body { padding: 20px 24px 28px; }
.pf-modal-title {
  font-family: var(--pf-font-display);
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.pf-modal-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.pf-modal-desc { font-size: 0.9rem; color: var(--pf-text-2); line-height: 1.7; margin-bottom: 20px; }
.pf-modal-actions { display: flex; gap: 10px; }

/* ============================================================
   AUTH MODAL
   ============================================================ */
.pf-auth-modal .pf-modal {
  max-width: 440px;
  border-radius: var(--pf-radius-xl);
}
.pf-auth-header { padding: 32px 32px 0; text-align: center; }
.pf-auth-logo {
  font-family: var(--pf-font-display);
  font-size: 1.8rem;
  font-weight: 900;
  background: var(--pf-grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}
.pf-auth-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 4px; }
.pf-auth-sub { font-size: 0.85rem; color: var(--pf-text-3); }
.pf-auth-body { padding: 28px 32px 32px; }
.pf-social-login { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.pf-social-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px;
  background: var(--pf-bg-glass);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pf-text);
  cursor: pointer;
  transition: var(--pf-transition);
}
.pf-social-btn:hover { border-color: var(--pf-border-hover); background: var(--pf-bg-3); }
.pf-divider {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
  color: var(--pf-text-3);
  font-size: 0.8rem;
}
.pf-divider::before, .pf-divider::after {
  content: ''; flex: 1;
  height: 1px; background: var(--pf-border);
}
.pf-form-group { margin-bottom: 16px; }
.pf-form-label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 6px; color: var(--pf-text-2); }
.pf-form-input {
  width: 100%;
  padding: 11px 14px;
  background: var(--pf-bg);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  color: var(--pf-text);
  font-size: 0.9rem;
  outline: none;
  transition: var(--pf-transition);
}
.pf-form-input:focus { border-color: var(--pf-accent); box-shadow: 0 0 0 3px rgba(124,58,237,0.15); }
.pf-form-submit {
  width: 100%;
  padding: 13px;
  background: var(--pf-grad-accent);
  color: white;
  border-radius: var(--pf-radius);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--pf-transition);
  margin-top: 8px;
}
.pf-form-submit:hover { opacity: 0.9; transform: translateY(-1px); }
.pf-auth-switch { text-align: center; margin-top: 16px; font-size: 0.85rem; color: var(--pf-text-3); }
.pf-auth-switch a { color: var(--pf-accent-3); font-weight: 600; cursor: pointer; }
.pf-form-error { font-size: 0.8rem; color: var(--pf-red); margin-top: 4px; display: none; }
.pf-form-error.show { display: block; }

/* ============================================================
   PROFILE PAGE
   ============================================================ */
.pf-profile-hero {
  background: linear-gradient(135deg, var(--pf-bg-2), var(--pf-bg-3));
  padding: 100px 24px 48px;
  position: relative;
  overflow: hidden;
}
.pf-profile-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(124,58,237,0.15), transparent 60%);
  pointer-events: none;
}
.pf-profile-info {
  max-width: 960px; margin: 0 auto;
  display: flex; gap: 28px; align-items: flex-end;
  position: relative; z-index: 1;
}
.pf-profile-avatar {
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 3px solid var(--pf-accent);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--pf-bg-3);
}
.pf-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pf-profile-name { font-family: var(--pf-font-display); font-size: 1.6rem; font-weight: 800; }
.pf-profile-email { font-size: 0.85rem; color: var(--pf-text-3); margin-top: 4px; }
.pf-profile-stats {
  display: flex; gap: 24px;
  margin-top: 16px;
}
.pf-stat-item { text-align: center; }
.pf-stat-num { font-size: 1.2rem; font-weight: 800; color: var(--pf-accent-3); }
.pf-stat-label { font-size: 0.72rem; color: var(--pf-text-3); }

.pf-profile-tabs {
  display: flex; gap: 4px;
  padding: 0 24px;
  border-bottom: 1px solid var(--pf-border);
  max-width: 960px; margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.pf-profile-tab {
  padding: 14px 20px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pf-text-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: var(--pf-transition);
}
.pf-profile-tab.active { color: var(--pf-text); border-bottom-color: var(--pf-accent); }
.pf-profile-content { max-width: 960px; margin: 0 auto; padding: 28px 24px; }

/* ============================================================
   SUBSCRIPTION / PLANS
   ============================================================ */
.pf-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  padding: 0 24px 40px;
  max-width: 960px; margin: 0 auto;
}
.pf-plan-card {
  background: var(--pf-bg-card);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  padding: 28px;
  position: relative;
  transition: var(--pf-transition);
}
.pf-plan-card.featured {
  border-color: var(--pf-accent);
  background: linear-gradient(135deg, rgba(124,58,237,0.1), var(--pf-bg-card));
}
.pf-plan-card:hover { transform: translateY(-4px); border-color: var(--pf-border-hover); }
.pf-plan-card.featured:hover { border-color: var(--pf-accent-2); }
.pf-plan-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  padding: 3px 14px;
  background: var(--pf-grad-accent);
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  color: white;
  white-space: nowrap;
}
.pf-plan-name { font-family: var(--pf-font-display); font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.pf-plan-price { font-size: 2rem; font-weight: 900; margin-bottom: 4px; }
.pf-plan-price span { font-size: 0.9rem; font-weight: 400; color: var(--pf-text-3); }
.pf-plan-period { font-size: 0.8rem; color: var(--pf-text-3); margin-bottom: 20px; }
.pf-plan-features { margin-bottom: 24px; }
.pf-plan-feature {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  font-size: 0.85rem;
  color: var(--pf-text-2);
  border-bottom: 1px solid var(--pf-border);
}
.pf-plan-feature:last-child { border-bottom: none; }
.pf-plan-feature-icon { color: var(--pf-green); flex-shrink: 0; }
.pf-plan-feature.disabled .pf-plan-feature-icon { color: var(--pf-text-3); }
.pf-plan-feature.disabled { opacity: 0.5; }
.pf-plan-btn {
  width: 100%;
  padding: 12px;
  border-radius: var(--pf-radius);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--pf-transition);
  border: 1px solid var(--pf-border);
  background: var(--pf-bg-glass);
  color: var(--pf-text);
}
.pf-plan-card.featured .pf-plan-btn {
  background: var(--pf-grad-accent);
  border-color: transparent;
  color: white;
}
.pf-plan-btn:hover { transform: translateY(-1px); opacity: 0.9; }

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
#pf-toast-container {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.pf-toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: var(--pf-bg-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--pf-text);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  transform: translateX(120%);
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: all;
  max-width: 320px;
}
.pf-toast.show { transform: translateX(0); }
.pf-toast.success { border-left: 3px solid var(--pf-green); }
.pf-toast.error { border-left: 3px solid var(--pf-red); }
.pf-toast.info { border-left: 3px solid var(--pf-accent); }

/* ============================================================
   FOOTER
   ============================================================ */
#pf-footer {
  background: var(--pf-bg-2);
  border-top: 1px solid var(--pf-border);
  padding: 40px 24px;
  margin-top: 40px;
}
.pf-footer-inner {
  max-width: 1400px; margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
}
.pf-footer-brand .pf-nav-logo { font-size: 1.4rem; margin-bottom: 12px; }
.pf-footer-desc { font-size: 0.85rem; color: var(--pf-text-3); line-height: 1.6; }
.pf-footer-col-title { font-weight: 700; font-size: 0.85rem; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pf-text-2); }
.pf-footer-links { display: flex; flex-direction: column; gap: 8px; }
.pf-footer-link { font-size: 0.85rem; color: var(--pf-text-3); transition: var(--pf-transition); }
.pf-footer-link:hover { color: var(--pf-text); }
.pf-footer-bottom {
  max-width: 1400px; margin: 28px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--pf-border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.8rem; color: var(--pf-text-3);
  flex-wrap: wrap; gap: 12px;
}

/* ============================================================
   MOBILE APP NAVIGATION (bottom bar)
   ============================================================ */
.pf-mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 900;
  background: rgba(10,10,16,0.95);
  backdrop-filter: var(--pf-blur-md);
  -webkit-backdrop-filter: var(--pf-blur-md);
  border-top: 1px solid var(--pf-border);
  padding: 8px 0 env(safe-area-inset-bottom, 8px);
}
.pf-mobile-nav-items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: 480px; margin: 0 auto;
}
.pf-mobile-nav-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding: 8px;
  cursor: pointer;
  color: var(--pf-text-3);
  transition: var(--pf-transition);
  font-size: 0.62rem;
  font-weight: 600;
}
.pf-mobile-nav-item.active, .pf-mobile-nav-item:hover { color: var(--pf-accent-3); }
.pf-mobile-nav-item svg { width: 22px; height: 22px; }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 1024px) {
    .pf-uhero-warp,
    .pf-uhero-warp-fallback { display: none !important; }
}

@media (max-width: 768px) {
  .pf-nav-links { display: none; }
  #pf-footer { display: none; }
  .pf-mobile-nav { display: block; }
  body { padding-bottom: 72px; }
  .pf-hero-content { padding: 0 16px 80px; max-width: 100%; }
  .pf-hero-title { font-size: 1.8rem; }
  .pf-hero-desc { font-size: 0.85rem; -webkit-line-clamp: 2; }
  .pf-hero-actions { gap: 8px; }
  .pf-btn-primary, .pf-btn-secondary { padding: 10px 18px; font-size: 0.85rem; }
  .pf-search-expanded { width: 85vw; right: -60px; }
  .pf-episodes-grid { grid-template-columns: 1fr; }
  .pf-footer-inner { grid-template-columns: 1fr; }
  .pf-plans-grid { grid-template-columns: 1fr; }
  .pf-modal { border-radius: var(--pf-radius-lg); }
  .pf-modal-hero { height: 200px; }
  .pf-card { width: 130px; }
  #pf-navbar { padding: 0 16px; }
  .pf-container { padding: 0 16px; }
}

@media (max-width: 480px) {
  .pf-card { width: 120px; }
  .pf-section-header { padding: 0 16px; }
  .pf-slider-track { padding: 8px 16px 16px; gap: 10px; }
}

/* ============================================================
   GENRES / FILTER BAR
   ============================================================ */
.pf-filter-bar {
  display: flex;
  gap: 8px;
  padding: 0 24px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pf-filter-bar::-webkit-scrollbar { display: none; }
.pf-filter-chip {
  flex-shrink: 0;
  padding: 6px 16px;
  background: var(--pf-bg-3);
  border: 1px solid var(--pf-border);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pf-text-2);
  cursor: pointer;
  transition: var(--pf-transition);
  white-space: nowrap;
}
.pf-filter-chip:hover, .pf-filter-chip.active {
  background: var(--pf-accent);
  border-color: var(--pf-accent);
  color: white;
}

/* ============================================================
   SEARCH PAGE
   ============================================================ */
.pf-search-page { padding: 90px 24px 40px; }
.pf-search-hero { text-align: center; padding: 40px 0 32px; }
.pf-search-hero-title {
  font-family: var(--pf-font-display);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 800;
  margin-bottom: 24px;
}
.pf-search-big-input {
  display: flex; align-items: center; gap: 12px;
  max-width: 600px; margin: 0 auto;
  background: var(--pf-bg-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  padding: 14px 18px;
  transition: var(--pf-transition);
}
.pf-search-big-input:focus-within { border-color: var(--pf-accent); box-shadow: 0 0 0 3px var(--pf-accent-glow); }
.pf-search-big-input input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--pf-text); font-size: 1.1rem;
}
.pf-search-big-input input::placeholder { color: var(--pf-text-3); }
.pf-search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 32px;
}

/* ============================================================
   ADMIN NOTICE (Only visible in WP admin)
   ============================================================ */
.pf-admin-notice {
  padding: 12px 16px;
  background: rgba(124,58,237,0.1);
  border-left: 4px solid var(--pf-accent);
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--pf-text);
}

/* ============================================================
   POINTS & AFFILIATE
   ============================================================ */
.pf-points-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  background: rgba(245,158,11,0.15);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pf-gold);
}

/* ============================================================
   CONTINUE WATCHING PROGRESS
   ============================================================ */
.pf-progress-wrap {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 0 0 var(--pf-radius) var(--pf-radius);
}
.pf-progress-fill {
  height: 100%;
  background: var(--pf-accent);
  transition: width 0.3s;
}

/* ADS placeholders */
.pf-ad-slot {
  background: var(--pf-bg-3);
  border: 1px dashed var(--pf-border);
  border-radius: var(--pf-radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--pf-text-3);
  font-size: 0.75rem;
  overflow: hidden;
}
.pf-ad-header { width: 100%; height: 90px; margin-bottom: 20px; }
.pf-ad-sidebar { width: 300px; min-height: 250px; }

/* ══════════════════════════════════════════════
   PRIMEFLX — PATCH v3: Missing classes & fixes
   ══════════════════════════════════════════════ */

/* ── Logo image support ── */
.pf-logo-img {
  height: 36px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}
.pf-logo-text {
  font-family: var(--pf-font-display);
  font-size: 1.4rem;
  font-weight: 900;
  background: var(--pf-grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pf-nav-logo { display: flex; align-items: center; gap: 8px; text-decoration: none }

/* ── Search open state ── */
.pf-search-expanded { display: none }
.pf-search-expanded.pf-search-open { display: block !important }

/* ── Autocomplete dropdown items (new IDs from search.js) ── */
.pf-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--pf-text);
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background .15s, transform .15s;
}
.pf-search-result:hover { background: rgba(124,58,237,.12); transform: translateX(3px) }
.pf-search-result img { width: 36px; height: 52px; object-fit: cover; border-radius: 4px; flex-shrink: 0 }
.pf-sr-info { flex: 1; min-width: 0 }
.pf-sr-title { font-size: 13px; font-weight: 600; color: var(--pf-text); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pf-sr-meta  { font-size: 11px; color: var(--pf-text-3); margin-top: 2px; display: block }
.pf-sr-score { font-size: 11px; color: var(--pf-text-3); white-space: nowrap; flex-shrink: 0 }
.pf-search-all {
  display: block;
  text-align: center;
  padding: 10px;
  font-size: 12px;
  color: var(--pf-accent2);
  text-decoration: none;
  border-top: 1px solid rgba(255,255,255,.05);
  transition: background .15s;
}
.pf-search-all:hover { background: rgba(124,58,237,.08) }
.pf-search-loading, .pf-search-empty {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--pf-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ── Auth modal active state ── */
.pf-auth-modal { display: none; align-items: center; justify-content: center }
.pf-auth-modal.pf-modal-active { display: flex !important }
.pf-detail-modal { display: none; align-items: flex-start; justify-content: center }
.pf-detail-modal.pf-modal-active { display: flex !important }

#pf-detail-modal { display: none }
#pf-detail-modal.pf-modal-active { display: flex !important }
#pf-auth-modal   { display: none }
#pf-auth-modal.pf-modal-active   { display: flex !important }

/* ── Type pills ── */
.pf-type-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}
.pf-type-movie { background: rgba(124,58,237,.2); color: #a855f7 }
.pf-type-serie { background: rgba(16,185,129,.2); color: #34d399 }
.pf-type-anime { background: rgba(245,158,11,.2);  color: #fbbf24 }
.pf-genre-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  background: rgba(255,255,255,.07);
  color: var(--pf-text-2);
}

/* ── Card progress bar ── */
.pf-card-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,.15);
  border-radius: 0 0 2px 2px;
}

/* ── Hero bg image transition ── */
#pf-hero-bg-img {
  transition: opacity .4s ease;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ── Loader spinners ── */
.spinner { width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--pf-accent);border-radius:50%;animation:spin .8s linear infinite;margin:auto }
.spinner-sm { width:16px;height:16px;border:2px solid rgba(255,255,255,.15);border-top-color:var(--pf-accent);border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:middle }
@keyframes spin { to { transform:rotate(360deg) } }

/* ── Form error box ── */
.pf-form-error {
  display: none;
  padding: 8px 12px;
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.3);
  border-radius: 6px;
  color: #ef4444;
  font-size: 13px;
  margin-top: 8px;
}

/* ── User dropdown toggle ── */
#pf-user-avatar-btn { cursor: pointer }
#pf-user-avatar-btn:hover .pf-user-dropdown { opacity: 1; visibility: visible; transform: translateY(0) }
.pf-user-dropdown {
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: all .2s ease;
}

/* ── Logout button style ── */
#pf-logout-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}

/* ── Admin plan type options ── */
.pfa-logo-type-opts { display: flex; flex-direction: column; gap: 8px }
.pfa-logo-type-opts label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--pfa-text, #e8e8f8); cursor: pointer }
.pfa-logo-type-opts input[type="radio"] { accent-color: #7c3aed; width: 15px; height: 15px }

/* ── Hero section fallback bg ── */
#pf-hero { min-height: 60vh; background: linear-gradient(135deg, #0d0d1a 0%, #1a1a2e 100%) }
.pf-hero-bg { position: absolute; inset: 0; overflow: hidden }
#pf-hero-bg-img { width: 100%; height: 100%; object-fit: cover; opacity: .5 }

/* ── Search page results ── */
.search-empty-state { text-align: center; padding: 80px 20px; color: var(--pf-text-3) }
.search-empty-state .empty-icon { font-size: 48px; margin-bottom: 16px }
.search-empty-state h3 { color: var(--pf-text); margin-bottom: 8px }

/* ── Results header ── */
#results-header {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 0 0 16px;
  font-size: 14px;
  color: var(--pf-text-2);
}
#results-count { font-weight: 600; color: var(--pf-accent2) }

/* ── Load more button ── */
.btn-load-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: rgba(124,58,237,.15);
  border: 1px solid rgba(124,58,237,.3);
  color: var(--pf-accent2);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all .2s;
}
.btn-load-more:hover { background: rgba(124,58,237,.25) }
#load-more-container { display: none; justify-content: center; padding: 24px 0 }

/* ── pf-card missing info styles ── */
.pf-card-info { padding: 8px 4px 4px }
.pf-card-title { font-size: 12px; font-weight: 600; color: var(--pf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3 }
.pf-card-meta  { font-size: 11px; color: var(--pf-text-3); margin-top: 3px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap }

/* ── Suggestion tags (search page) ── */
.suggestion-tag {
  padding: 4px 12px;
  background: rgba(124,58,237,.15);
  border: 1px solid rgba(124,58,237,.3);
  color: var(--pf-accent2);
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  transition: all .2s;
}
.suggestion-tag:hover { background: rgba(124,58,237,.3) }
.trending-suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; align-items: center }
.trending-suggestions span { color: var(--pf-text-3); font-size: 13px }

/* ══════════════════════════════════════════════════
   HOME v4 — Server-side rendered components
   ══════════════════════════════════════════════════ */

/* ── Hero ── */
.pf-hero-section { position:relative; height:88vh; min-height:550px; overflow:hidden; margin-top:0 }
.pf-hero-swiper  { height:100% }
.pf-hero-slide   { position:relative; height:100% }
.pf-hero-bg      { position:absolute; inset:0; background-size:cover; background-position:center top; transition:opacity .4s }
.pf-hero-overlay { position:absolute; inset:0; background:linear-gradient(to right, rgba(5,5,8,.95) 0%, rgba(5,5,8,.6) 50%, rgba(5,5,8,.1) 100%), linear-gradient(to top, rgba(5,5,8,.8) 0%, transparent 60%) }
.pf-hero-content { position:absolute; bottom:15%; left:4%; max-width:580px; z-index:2 }
.pf-hero-badges  { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px }
.pf-hero-badge   { padding:4px 12px; border-radius:20px; font-size:12px; font-weight:700; backdrop-filter:blur(8px) }
.pf-badge-trending { background:rgba(239,68,68,.25); color:#fca5a5; border:1px solid rgba(239,68,68,.3) }
.pf-badge-rating   { background:rgba(245,158,11,.2); color:#fde68a; border:1px solid rgba(245,158,11,.3) }
.pf-badge-type     { border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.8) }
.pf-badge-type.pf-type-movie  { background:rgba(124,58,237,.25); color:#c4b5fd }
.pf-badge-type.pf-type-serie  { background:rgba(16,185,129,.2);  color:#6ee7b7 }
.pf-badge-type.pf-type-anime  { background:rgba(245,158,11,.2);  color:#fde68a }
.pf-hero-title    { font-size:clamp(1.8rem,4vw,3.2rem); font-weight:900; line-height:1.1; margin-bottom:12px; text-shadow:0 2px 20px rgba(0,0,0,.5) }
.pf-hero-genres   { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px }
.pf-hero-genre    { padding:3px 10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:20px; font-size:12px; color:rgba(255,255,255,.7) }
.pf-hero-overview { font-size:14px; line-height:1.6; color:rgba(255,255,255,.75); margin-bottom:16px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.pf-hero-meta     { display:flex; gap:16px; font-size:13px; color:rgba(255,255,255,.6); margin-bottom:20px }
.pf-hero-actions  { display:flex; gap:12px; flex-wrap:wrap }
.pf-hero-nav      { position:absolute; right:4%; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:5 }
.pf-hero-nav-btn  { width:44px; height:44px; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.15); border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(8px); transition:all .2s }
.pf-hero-nav-btn:hover { background:var(--pf-accent); border-color:var(--pf-accent) }
.pf-hero-progress { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.1) }
.pf-hero-progress-bar { height:100%; background:var(--pf-accent); transition:width .5s linear; width:0 }

/* ── Buttons ── */
.pf-btn-primary  { display:inline-flex; align-items:center; gap:8px; padding:12px 28px; background:var(--pf-accent); color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:700; cursor:pointer; transition:all .2s; box-shadow:0 4px 20px rgba(124,58,237,.4) }
.pf-btn-primary:hover  { background:var(--pf-accent2); transform:translateY(-2px); box-shadow:0 6px 28px rgba(124,58,237,.5) }
.pf-btn-secondary{ display:inline-flex; align-items:center; gap:8px; padding:12px 24px; background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; transition:all .2s; backdrop-filter:blur(8px) }
.pf-btn-secondary:hover { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.35) }

/* ── Content sections ── */
.pf-content-section { padding:24px 4% 16px }
.pf-section-head    { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px }
.pf-section-title   { font-size:1.2rem; font-weight:800; display:flex; align-items:center; gap:10px }
.pf-section-indicator { display:inline-block; width:4px; height:20px; background:var(--pf-accent); border-radius:2px }
.pf-section-nav     { display:flex; gap:8px }
.pf-sec-btn         { width:36px; height:36px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s }
.pf-sec-btn:hover   { background:var(--pf-accent); border-color:var(--pf-accent) }

/* ── Cards ── */
.pf-slider .swiper-slide  { width:160px }
.pf-content-card           { position:relative; border-radius:10px; overflow:hidden; background:var(--pf-bg-2) }
.pf-card-img-wrap          { position:relative; aspect-ratio:2/3; overflow:hidden }
.pf-card-img-wrap img      { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; display:block }
.pf-content-card:hover .pf-card-img-wrap img { transform:scale(1.06) }
.pf-card-overlay           { position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:opacity .25s; display:flex; align-items:center; justify-content:center }
.pf-content-card:hover .pf-card-overlay { opacity:1 }
.pf-card-play              { width:52px; height:52px; background:var(--pf-accent); border:none; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .2s; box-shadow:0 4px 20px rgba(124,58,237,.5) }
.pf-card-play:hover        { transform:scale(1.12) }
.pf-card-fav               { position:absolute; top:8px; right:8px; background:rgba(0,0,0,.6); border:none; border-radius:50%; width:30px; height:30px; font-size:13px; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .2s }
.pf-card-fav:hover         { transform:scale(1.2) }
.pf-card-type-badge        { position:absolute; top:8px; left:8px; padding:3px 8px; border-radius:4px; font-size:10px; font-weight:700; text-transform:uppercase }
.pf-card-progress-bar      { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.15); border-radius:2px }
.pf-card-meta-row          { padding:8px 6px 6px; display:flex; align-items:center; justify-content:space-between; gap:6px }
.pf-card-title-text        { font-size:12px; font-weight:600; color:var(--pf-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 }
.pf-card-rating            { font-size:11px; color:rgba(255,255,255,.5); white-space:nowrap; flex-shrink:0 }

/* ── Detail Modal ── */
.pf-modal-bg  { display:none; position:fixed; inset:0; background:rgba(0,0,0,.88); backdrop-filter:blur(10px); z-index:2000; opacity:0; transition:opacity .3s }
.pf-modal-bg.active  { display:block; opacity:1 }
.pf-modal-box { display:none; position:fixed; top:5%; left:50%; transform:translateX(-50%); width:95%; max-width:1000px; max-height:90vh; overflow-y:auto; background:var(--pf-bg-2); border-radius:16px; border:1px solid rgba(255,255,255,.08); z-index:2001; opacity:0; transition:opacity .3s, transform .3s; transform:translateX(-50%) scale(.95) }
.pf-modal-box.active  { display:block; opacity:1; transform:translateX(-50%) scale(1) }
.pf-modal-close { position:sticky; top:12px; float:right; margin:12px 12px 0 0; width:40px; height:40px; background:rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.15); border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10; transition:all .2s }
.pf-modal-close:hover { background:var(--pf-accent); transform:rotate(90deg) }
.pf-modal-hero { position:relative; height:380px }
.pf-modal-backdrop { width:100%; height:100%; object-fit:cover }
.pf-modal-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top, var(--pf-bg-2) 0%, rgba(0,0,0,.3) 100%) }
.pf-modal-poster-wrap  { position:absolute; bottom:-50px; left:36px; width:150px; border-radius:12px; overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,.6); border:3px solid var(--pf-bg-2) }
.pf-modal-poster       { width:100%; aspect-ratio:2/3; object-fit:cover; display:block }
.pf-modal-info         { padding:64px 36px 36px }
.pf-modal-badges       { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px }
.pf-modal-badges span  { padding:4px 12px; border-radius:20px; font-size:12px; font-weight:600; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12) }
.pf-badge-rating       { background:rgba(245,158,11,.15) !important; color:#fde68a !important }
.pf-badge-type         { border:none !important }
.pf-modal-title        { font-size:2rem; font-weight:800; margin-bottom:12px; line-height:1.1 }
.pf-modal-genres       { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px }
.pf-genre-tag          { padding:4px 12px; background:rgba(124,58,237,.15); border:1px solid rgba(124,58,237,.3); border-radius:20px; font-size:12px; color:var(--pf-accent2) }
.pf-modal-overview     { color:rgba(255,255,255,.75); line-height:1.7; margin-bottom:20px }
.pf-modal-actions      { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px }
.pf-fav-btn            { display:inline-flex; align-items:center; gap:6px }
.pf-modal-section      { margin-top:28px }
.pf-modal-section-title{ font-size:1rem; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:8px }
.pf-season-tabs        { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px }
.pf-season-tab         { padding:6px 16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:20px; color:rgba(255,255,255,.6); cursor:pointer; font-size:13px; transition:all .2s }
.pf-season-tab.active  { background:var(--pf-accent); border-color:var(--pf-accent); color:#fff }
.pf-episodes-grid      { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px }
.pf-episode-card       { display:flex; gap:12px; background:rgba(255,255,255,.04); border-radius:10px; overflow:hidden; cursor:pointer; transition:background .2s }
.pf-episode-card:hover { background:rgba(124,58,237,.15) }
.pf-ep-thumb           { position:relative; width:140px; flex-shrink:0; background:rgba(0,0,0,.3) }
.pf-ep-thumb img       { width:100%; aspect-ratio:16/9; object-fit:cover; display:block }
.pf-ep-no-img          { width:140px; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; font-size:24px }
.pf-ep-play            { position:absolute; inset:0; background:rgba(0,0,0,.5); opacity:0; display:flex; align-items:center; justify-content:center; transition:opacity .2s }
.pf-episode-card:hover .pf-ep-play { opacity:1 }
.pf-ep-info            { padding:10px; display:flex; flex-direction:column; justify-content:center; gap:3px; flex:1 }
.pf-ep-num             { font-size:11px; color:var(--pf-accent2); font-weight:700 }
.pf-ep-name            { font-size:13px; font-weight:600; color:#fff }
.pf-ep-runtime         { font-size:11px; color:rgba(255,255,255,.4) }
.pf-trailer-thumb      { position:relative; cursor:pointer; border-radius:12px; overflow:hidden }
.pf-trailer-thumb img  { width:100%; aspect-ratio:16/9; object-fit:cover; display:block }
.pf-trailer-play       { position:absolute; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; transition:background .2s }
.pf-trailer-thumb:hover .pf-trailer-play { background:rgba(124,58,237,.4) }
.pf-cast-grid          { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px }
.pf-cast-card          { flex-shrink:0; width:90px; text-align:center }
.pf-cast-card img      { width:80px; height:80px; border-radius:50%; object-fit:cover; margin:0 auto 6px; display:block }
.pf-cast-name          { font-size:11px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pf-cast-char          { font-size:10px; color:rgba(255,255,255,.4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* ── Player Modal (full overlay) ── */
.pf-player-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.97); z-index:3000; align-items:center; justify-content:center; flex-direction:column }
.pf-player-modal.active { display:flex }
.pf-player-modal-close { position:absolute; top:16px; right:16px; width:44px; height:44px; background:rgba(255,255,255,.1); border:none; border-radius:50%; color:#fff; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:10; transition:background .2s }
.pf-player-modal-close:hover { background:var(--pf-accent) }
.pf-player-modal-wrap { width:95vw; max-width:1400px; aspect-ratio:16/9 }
.pf-player-modal-wrap iframe { width:100%; height:100%; border:none; border-radius:12px }

/* ── Swiper pagination ── */
.pf-hero-swiper .swiper-pagination { bottom:24px !important }
.pf-hero-swiper .swiper-pagination-bullet { background:#fff; opacity:.4; width:8px; height:8px }
.pf-hero-swiper .swiper-pagination-bullet-active { opacity:1; background:var(--pf-accent); width:20px; border-radius:4px }

/* ── Responsive ── */
@media (max-width: 768px) {
    .pf-hero-section    { height:70vh; min-height:480px }
    .pf-hero-title      { font-size:1.6rem }
    .pf-hero-content    { bottom:10%; left:5%; right:5%; max-width:100% }
    .pf-hero-overview   { -webkit-line-clamp:2 }
    .pf-hero-nav        { display:none }
    .pf-content-section { padding:20px 3% 10px }
    .pf-modal-hero      { height:240px }
    .pf-modal-info      { padding:50px 20px 24px }
    .pf-modal-poster-wrap { width:110px; bottom:-35px; left:20px }
    .pf-modal-title     { font-size:1.4rem }
    .pf-modal-actions   { flex-direction:column }
    .pf-btn-primary, .pf-btn-secondary { width:100%; justify-content:center }
    .pf-episodes-grid   { grid-template-columns:1fr }
    .pf-player-modal-wrap { width:100vw; aspect-ratio:16/9 }
}

/* ══════════════════════════════════════════════
   HOME v5 — Hero + Cards + Genre Sliders
   ══════════════════════════════════════════════ */

/* ── Hero ── */
.pf-hero { position:relative; height:88vh; min-height:580px; overflow:hidden }
.pf-hero-sw { height:100% }
.pf-hero-slide { position:relative; height:100%; overflow:hidden }
.pf-hero-bg {
    position:absolute; inset:0;
    background-size:cover; background-position:center 20%;
    transform:scale(1.08);
    animation:heroKen 20s ease-in-out infinite alternate;
}
@keyframes heroKen { 0%{transform:scale(1.08)} 100%{transform:scale(1.14)} }
.pf-hero-overlay {
    position:absolute; inset:0;
    background:
        radial-gradient(ellipse at 15% 50%, transparent, rgba(5,2,10,.5) 60%, #050508 95%),
        linear-gradient(to top,#050508 0%,transparent 45%),
        linear-gradient(to right,#050508 0%,transparent 55%);
}
.pf-hero-body {
    position:relative; z-index:5; height:100%;
    display:grid; grid-template-columns:1.2fr .8fr;
    align-items:center; gap:60px;
    padding:0 5%; max-width:1500px; margin:0 auto;
}
.pf-hero-info { animation:slideL .9s cubic-bezier(.16,1,.3,1) both }
@keyframes slideL { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} }
.pf-hero-tags { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px }
.pf-hero-tag  { padding:5px 14px; border-radius:20px; font-size:12px; font-weight:700; backdrop-filter:blur(8px) }
.pf-tag-fire  { background:rgba(239,68,68,.2); color:#fca5a5; border:1px solid rgba(239,68,68,.3) }
.pf-tag-rate  { background:rgba(245,158,11,.2); color:#fde68a; border:1px solid rgba(245,158,11,.3) }
.pf-tag-type  { border:1px solid rgba(255,255,255,.2) }
.pf-tag-glass { background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.15) }
.pf-hero-ttl  { font-size:clamp(2rem,5vw,4rem); font-weight:900; line-height:1.05; margin-bottom:14px; text-shadow:0 8px 32px rgba(0,0,0,.6); letter-spacing:-1px }
.pf-hero-genres { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px }
.pf-hero-genre  { padding:4px 12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:20px; font-size:12px; color:rgba(255,255,255,.7) }
.pf-hero-ov   { font-size:15px; line-height:1.7; color:rgba(255,255,255,.75); margin-bottom:20px; max-width:580px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.pf-hero-btns { display:flex; gap:14px; flex-wrap:wrap }

/* ── Poster side with 3D mouse ── */
.pf-hero-poster-wrap { display:flex; align-items:center; justify-content:center; animation:slideR 1.1s cubic-bezier(.16,1,.3,1) both }
@keyframes slideR { from{opacity:0;transform:translateX(40px) rotateY(-12deg)} to{opacity:1;transform:translateX(0) rotateY(-6deg)} }
.pf-hero-poster-card {
    position:relative; width:100%; max-width:340px;
    border-radius:20px; overflow:hidden;
    transform:perspective(1000px) rotateY(-6deg);
    box-shadow:-20px 30px 60px rgba(0,0,0,.8), 0 0 40px rgba(124,58,237,.2);
    border:1px solid rgba(255,255,255,.1);
    transition:transform .15s ease;
}
.pf-hero-poster-card img { width:100%; display:block; aspect-ratio:2/3; object-fit:cover }
.pf-hero-poster-glow { position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,transparent 60%); pointer-events:none }
.pf-poster-stats { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-around; align-items:center; padding:12px 8px; background:linear-gradient(to top,rgba(0,0,0,.9),transparent); font-size:12px; color:rgba(255,255,255,.85) }
.pf-hero-nav-btns { position:absolute; right:3%; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:10 }
.pf-hero-nav-btns button { width:44px; height:44px; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.15); border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(8px); transition:all .2s }
.pf-hero-nav-btns button:hover { background:var(--pf-accent); border-color:var(--pf-accent) }
.pf-hero-pag { bottom:22px !important }
.pf-hero-pag .swiper-pagination-bullet { background:#fff; opacity:.4 }
.pf-hero-pag .swiper-pagination-bullet-active { opacity:1; background:var(--pf-accent); width:20px; border-radius:4px }
.pf-hero-prog { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.1); z-index:10 }
.pf-hero-prog-bar { height:100%; background:var(--pf-accent); transition:width .5s linear; width:0 }

/* ── Buttons ── */
.pfbtn-prim { display:inline-flex; align-items:center; gap:8px; padding:14px 32px; background:linear-gradient(135deg,var(--pf-accent),var(--pf-accent2)); color:#fff; border:none; border-radius:50px; font-size:15px; font-weight:800; cursor:pointer; box-shadow:0 4px 24px rgba(124,58,237,.45); transition:all .25s; letter-spacing:.3px }
.pfbtn-prim:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 8px 32px rgba(124,58,237,.6) }
.pfbtn-sec  { display:inline-flex; align-items:center; gap:8px; padding:14px 28px; background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:50px; font-size:14px; font-weight:600; cursor:pointer; backdrop-filter:blur(8px); transition:all .2s }
.pfbtn-sec:hover { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.4) }
.pfbtn-lg { padding:16px 40px; font-size:16px }

/* ── Content sections ── */
.pf-sect { padding:20px 4% 10px }
.pf-sect-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px }
.pf-sect-title { font-size:1.15rem; font-weight:800; display:flex; align-items:center; gap:10px }
.pf-sect-bar   { display:inline-block; width:4px; height:22px; background:linear-gradient(to bottom,var(--pf-accent),var(--pf-accent2)); border-radius:2px }
.pf-sect-nav   { display:flex; gap:8px }
.pfn-btn { width:36px; height:36px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s }
.pfn-btn:hover { background:var(--pf-accent); border-color:var(--pf-accent); transform:scale(1.1) }

/* ── Special weekly section ── */
.pf-sect-special { padding-top:0 }
.pf-sect-special-head { padding:16px 4%; margin-bottom:14px }

/* ── Top 10 cards ── */
.pf-top10-card { position:relative; padding-left:48px; cursor:pointer }
.pf-top10-num {
    position:absolute; left:-8px; bottom:0;
    font-size:100px; font-weight:900; line-height:.85;
    background:linear-gradient(180deg,var(--pf-accent) 0%,transparent 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    pointer-events:none; opacity:.9; z-index:2;
}
.pf-swiper { overflow:hidden }
.pf-swiper .swiper-slide { width:160px }
#sw-top10 .swiper-slide { width:210px }

/* ── Card ── */
.pfhc { border-radius:10px; overflow:hidden; background:var(--pf-bg-2); cursor:pointer; transition:transform .25s }
.pfhc:hover { transform:scale(1.04) translateY(-4px) }
.pfhc-img { position:relative; aspect-ratio:2/3; overflow:hidden }
.pfhc-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s }
.pfhc:hover .pfhc-img img { transform:scale(1.07) }
.pfhc-ov { position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:opacity .25s; display:flex; align-items:center; justify-content:center }
.pfhc:hover .pfhc-ov { opacity:1 }
.pfhc-play { width:54px; height:54px; background:var(--pf-accent); border:none; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .2s; box-shadow:0 4px 20px rgba(124,58,237,.5) }
.pfhc-play:hover { transform:scale(1.15) }
.pfhc-fav { position:absolute; top:8px; right:8px; background:rgba(0,0,0,.6); border:none; border-radius:50%; width:30px; height:30px; font-size:13px; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .2s }
.pfhc-fav:hover { transform:scale(1.2) }
.pfhc-badge { position:absolute; top:8px; left:8px; padding:3px 8px; border-radius:5px; font-size:10px; font-weight:800; text-transform:uppercase }
.pfhc-movie { background:rgba(124,58,237,.85); color:#fff }
.pfhc-serie { background:rgba(16,185,129,.85); color:#fff }
.pfhc-anime { background:rgba(245,158,11,.9);  color:#000 }
.pfhc-prog  { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.15) }
.pfhc-meta  { padding:8px 6px 6px; display:flex; align-items:center; justify-content:space-between; gap:6px }
.pfhc-title { font-size:12px; font-weight:600; color:var(--pf-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 }
.pfhc-rating{ font-size:11px; color:rgba(255,255,255,.5); white-space:nowrap; flex-shrink:0 }

/* ── Genre sections header ── */
.pf-genre-sliders-wrap { padding-top:10px }
.pf-genre-sliders-head { padding-bottom:4px }

/* ── Player Modal (Netflix fullscreen) ── */
.pfplay-modal { display:none; position:fixed; inset:0; background:#000; z-index:9999; flex-direction:column }
.pfplay-modal.active { display:flex }
.pfplay-back {
    position:absolute; top:20px; left:20px; z-index:100;
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.1); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:50px;
    padding:10px 20px; font-size:14px; font-weight:600; cursor:pointer;
    transition:all .2s;
}
.pfplay-back:hover { background:rgba(255,255,255,.2) }
.pfplay-frame { flex:1; display:flex; align-items:center; justify-content:center; padding:60px 0 20px }
.pfplay-frame iframe { width:95vw; max-width:1600px; height:90vh; border:none; border-radius:8px }

/* ── Detail Modal ── */
.pfmod-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.88); backdrop-filter:blur(12px); z-index:2000 }
.pfmod-bg.active { display:block }
.pfmod-box {
    display:none; position:fixed; top:4vh; left:50%; transform:translateX(-50%) scale(.95);
    width:95%; max-width:1020px; max-height:92vh; overflow-y:auto;
    background:var(--pf-bg-2); border-radius:18px; border:1px solid rgba(255,255,255,.08);
    z-index:2001; transition:transform .3s, opacity .3s; opacity:0;
    scrollbar-width:thin; scrollbar-color:var(--pf-accent) transparent;
}
.pfmod-box.active { display:block; opacity:1; transform:translateX(-50%) scale(1) }
.pfmod-close { position:sticky; top:12px; float:right; margin:12px 12px 0 0; width:40px; height:40px; background:rgba(0,0,0,.8); border:1px solid rgba(255,255,255,.15); border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10; transition:all .25s }
.pfmod-close:hover { background:var(--pf-accent); transform:rotate(90deg) }
.pfmod-hero { position:relative; height:380px; overflow:hidden }
.pfmod-backdrop { width:100%; height:100%; object-fit:cover; display:block }
.pfmod-hero-ov { position:absolute; inset:0; background:linear-gradient(to top,var(--pf-bg-2) 0%,rgba(0,0,0,.2) 100%) }
.pfmod-poster-wrap { position:absolute; bottom:-55px; left:36px; width:155px; border-radius:14px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.7); border:3px solid var(--pf-bg-2) }
.pfmod-poster { width:100%; aspect-ratio:2/3; object-fit:cover; display:block }
.pfmod-info { padding:70px 36px 40px }
.pfmod-badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px }
.pfmod-badge { padding:5px 14px; border-radius:20px; font-size:12px; font-weight:600; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12) }
.pfmod-badge-rating { background:rgba(245,158,11,.15) !important; color:#fde68a !important; border-color:rgba(245,158,11,.3) !important }
.pfmod-badge-status { background:rgba(16,185,129,.1) !important; color:#6ee7b7 !important }
.pfmod-type-movie { background:rgba(124,58,237,.2) !important; color:#c4b5fd !important }
.pfmod-type-serie, .pfmod-type-tv { background:rgba(16,185,129,.15) !important; color:#6ee7b7 !important }
.pfmod-type-anime { background:rgba(245,158,11,.15) !important; color:#fde68a !important }
.pfmod-title { font-size:2.1rem; font-weight:900; margin-bottom:8px; line-height:1.1 }
.pfmod-tagline { font-size:14px; font-style:italic; color:var(--pf-accent2); margin-bottom:12px }
.pfmod-genres { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px }
.pfmod-genre  { padding:4px 12px; background:rgba(124,58,237,.15); border:1px solid rgba(124,58,237,.3); border-radius:20px; font-size:12px; color:var(--pf-accent2) }
.pfmod-overview { color:rgba(255,255,255,.78); line-height:1.75; margin-bottom:8px; font-size:14px }
.pfmod-votes { font-size:12px; color:rgba(255,255,255,.4); display:block; margin-bottom:20px }
.pfmod-actions { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:28px }
.pfmod-section { margin-top:28px; padding-top:28px; border-top:1px solid rgba(255,255,255,.07) }
.pfmod-sec-title { font-size:15px; font-weight:800; margin-bottom:14px; display:flex; align-items:center; gap:8px }
.pfmod-loading { display:flex; align-items:center; justify-content:center; padding:60px }
.pfsea-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px }
.pfsea-tab { padding:6px 16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:20px; color:rgba(255,255,255,.6); cursor:pointer; font-size:13px; transition:all .2s }
.pfsea-tab.active { background:var(--pf-accent); border-color:var(--pf-accent); color:#fff }
.pfsea-tab small { font-size:10px; opacity:.8 }
.pfsea-grid { display:flex; flex-direction:column; gap:8px }
.pfsea-ep { display:flex; gap:12px; background:rgba(255,255,255,.04); border-radius:10px; overflow:hidden; cursor:pointer; transition:background .2s }
.pfsea-ep:hover { background:rgba(124,58,237,.15) }
.pfsea-thumb { position:relative; width:160px; flex-shrink:0; background:rgba(0,0,0,.3) }
.pfsea-thumb img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block }
.pfsea-noimg { width:160px; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; font-size:28px }
.pfsea-play { position:absolute; inset:0; background:rgba(0,0,0,.5); opacity:0; display:flex; align-items:center; justify-content:center; transition:opacity .2s }
.pfsea-ep:hover .pfsea-play { opacity:1 }
.pfsea-info { padding:12px; display:flex; flex-direction:column; gap:4px; flex:1; justify-content:center }
.pfsea-num  { font-size:11px; color:var(--pf-accent2); font-weight:700 }
.pfsea-name { font-size:13px; font-weight:700; color:#fff }
.pfsea-rt   { font-size:11px; color:rgba(255,255,255,.4) }
.pfsea-ov   { font-size:12px; color:rgba(255,255,255,.55); line-height:1.5; margin:4px 0 0 }
.pftrailer-wrap {}
.pftrailer-thumb { position:relative; cursor:pointer; border-radius:12px; overflow:hidden }
.pftrailer-thumb img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block }
.pftrailer-play { position:absolute; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; transition:background .2s }
.pftrailer-thumb:hover .pftrailer-play { background:rgba(124,58,237,.4) }
.pfcast-grid { display:flex; gap:14px; overflow-x:auto; padding-bottom:8px }
.pfcast-card { flex-shrink:0; width:85px; text-align:center }
.pfcast-card img { width:76px; height:76px; border-radius:50%; object-fit:cover; margin:0 auto 6px; display:block; border:2px solid rgba(124,58,237,.4) }
.pfcast-name { font-size:11px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pfcast-char { font-size:10px; color:rgba(255,255,255,.4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* ── Responsive ── */
@media (max-width:900px) {
    .pf-hero-body { grid-template-columns:1fr }
    .pf-hero-poster-wrap { display:none }
    .pf-hero { height:75vh; min-height:520px }
    .pf-hero-ttl { font-size:2rem }
}
@media (max-width:600px) {
    .pf-hero { height:70vh }
    .pf-hero-info { text-align:center }
    .pf-hero-tags, .pf-hero-genres { justify-content:center }
    .pf-hero-btns { justify-content:center }
    .pf-hero-ov { -webkit-line-clamp:2 }
    .pfmod-hero { height:240px }
    .pfmod-info { padding:55px 18px 28px }
    .pfmod-poster-wrap { width:110px; bottom:-35px; left:18px }
    .pfmod-title { font-size:1.5rem }
    .pfmod-actions { flex-direction:column }
    .pfbtn-prim,.pfbtn-sec { width:100%; justify-content:center }
    .pfsea-thumb { width:120px }
    .pfplay-frame { padding:50px 0 10px }
    .pfplay-frame iframe { width:100vw; height:85vh; border-radius:0 }
}

/* ── Search Page ── */
.pfsrch-page { padding-top:80px; min-height:80vh }
.pfsrch-header { background:linear-gradient(to bottom,rgba(5,5,8,.98),rgba(5,5,8,.85)); padding:30px 4% 20px; position:sticky; top:64px; z-index:100; backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,.06) }
.pfsrch-bar-wrap { position:relative; max-width:760px; margin:0 auto 18px }
.pfsrch-bar { display:flex; align-items:center; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:50px; padding:12px 20px; gap:12px; transition:all .2s }
.pfsrch-bar:focus-within { border-color:var(--pf-accent); box-shadow:0 0 0 4px rgba(124,58,237,.15) }
.pfsrch-icon { color:rgba(255,255,255,.4); flex-shrink:0 }
.pfsrch-input { flex:1; background:transparent; border:none; outline:none; color:#fff; font-size:16px; font-family:inherit }
.pfsrch-input::placeholder { color:rgba(255,255,255,.35) }
.pfsrch-clear { background:rgba(255,255,255,.1); border:none; color:#fff; border-radius:50%; width:26px; height:26px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; transition:background .2s }
.pfsrch-clear:hover { background:rgba(255,255,255,.2) }
.pfsrch-autocomplete { position:absolute; top:calc(100%+8px); left:0; right:0; background:#111122; border:1px solid rgba(255,255,255,.1); border-radius:16px; overflow:hidden; display:none; box-shadow:0 20px 60px rgba(0,0,0,.6); z-index:200 }
.pfsrch-ac-item { display:flex; align-items:center; gap:12px; padding:10px 16px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.05); transition:background .15s }
.pfsrch-ac-item:hover { background:rgba(124,58,237,.15) }
.pfsrch-ac-item img { width:36px; height:52px; object-fit:cover; border-radius:5px; flex-shrink:0 }
.pfsrch-ac-info { flex:1; min-width:0 }
.pfsrch-ac-title { font-size:13px; font-weight:700; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pfsrch-ac-meta  { font-size:11px; color:rgba(255,255,255,.4); display:block; margin-top:2px }
.pfsrch-ac-all   { text-align:center; padding:12px; font-size:13px; color:var(--pf-accent2); cursor:pointer; font-weight:600; transition:background .15s }
.pfsrch-ac-all:hover { background:rgba(124,58,237,.08) }
.pfsrch-ac-loading,.pfsrch-ac-empty { padding:16px; text-align:center; font-size:13px; color:rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center; gap:8px }
.pfsrch-filters { display:flex; justify-content:center }
.pfsrch-chips { display:flex; gap:10px; flex-wrap:wrap; justify-content:center }
.pfsrch-chip { padding:8px 20px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:50px; color:rgba(255,255,255,.7); cursor:pointer; font-size:14px; transition:all .2s }
.pfsrch-chip.active { background:var(--pf-accent); border-color:var(--pf-accent); color:#fff }
.pfsrch-body { padding:24px 4% 60px }
.pfsrch-results-header { display:flex; align-items:center; gap:8px; margin-bottom:20px; font-size:14px; color:rgba(255,255,255,.6) }
.pfsrch-count { font-weight:800; color:var(--pf-accent2); font-size:16px }
.pfsrch-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px }
.pfsrch-empty { text-align:center; padding:80px 20px; color:rgba(255,255,255,.4) }
.pfsrch-empty-icon { font-size:56px; margin-bottom:16px }
.pfsrch-empty h3 { color:#fff; font-size:1.3rem; margin-bottom:8px }
.pfsrch-suggestions { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:20px; align-items:center }
.pfsrch-suggestions span { color:rgba(255,255,255,.4); font-size:13px }
.pfsrch-suggestions button { padding:6px 16px; background:rgba(124,58,237,.15); border:1px solid rgba(124,58,237,.3); color:var(--pf-accent2); border-radius:20px; cursor:pointer; font-size:13px; transition:all .2s }
.pfsrch-suggestions button:hover { background:rgba(124,58,237,.3) }
.pfsrch-load-more { display:flex; justify-content:center; padding:24px 0 }
@media (max-width:600px) { .pfsrch-grid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)) } }

/* ══════════════════════════════════════════════════
   CONTENT PAGE (page-content.php)
   ══════════════════════════════════════════════════ */
.pfcp-wrap { min-height:100vh }

/* Hero */
.pfcp-hero { position:relative; min-height:100vh; overflow:hidden; display:flex; align-items:center }
#pfcp-warp-canvas { position:absolute; inset:0; width:100% !important; height:100% !important; pointer-events:none; z-index:3; mix-blend-mode:screen; opacity:.9; mask-image:radial-gradient(ellipse 60% 55% at 50% 50%, transparent 0%, transparent 55%, rgba(0,0,0,.15) 68%, rgba(0,0,0,.6) 80%, #000 100%); -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 50%, transparent 0%, transparent 55%, rgba(0,0,0,.15) 68%, rgba(0,0,0,.6) 80%, #000 100%); }
.pfcp-bg {
    position:absolute; inset:0;
    background-size:cover; background-position:center 20%;
    transform:scale(1.06);
    animation:cpKen 25s ease-in-out infinite alternate;
}
@keyframes cpKen { 0%{transform:scale(1.06)} 100%{transform:scale(1.12)} }
.pfcp-overlay {
    position:absolute; inset:0;
    background:
        radial-gradient(ellipse at 20% 50%, transparent, rgba(5,2,10,.55) 55%, #050508 95%),
        linear-gradient(to top, #050508 0%, transparent 50%),
        linear-gradient(to right, #050508 0%, transparent 60%);
}
.pfcp-back {
    position:absolute; top:90px; left:4%; z-index:20;
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(0,0,0,.5); backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.2); color:#fff;
    border-radius:50px; padding:10px 20px; font-size:14px; font-weight:600;
    text-decoration:none; transition:background .2s;
}
.pfcp-back:hover { background:rgba(255,255,255,.15) }
.pfcp-grid {
    position:relative; z-index:10;
    display:grid; grid-template-columns:1.2fr .8fr;
    align-items:center; gap:60px; padding:120px 5% 80px;
    max-width:1440px; margin:0 auto; width:100%;
}
/* Info side - slide from left */
.pfcp-info-side { animation:cpSlideL 1s cubic-bezier(.16,1,.3,1) both }
@keyframes cpSlideL { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} }
.pfcp-tags { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px }
.pfcp-tag { padding:6px 16px; border-radius:50px; font-size:12px; font-weight:700; backdrop-filter:blur(8px) }
.pfcp-tag-accent { background:linear-gradient(45deg,var(--pf-accent),var(--pf-accent2)); color:#fff }
.pfcp-tag-glass  { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.85) }
.pfcp-tag-rating { background:rgba(245,158,11,.2); border:1px solid rgba(245,158,11,.3); color:#fde68a }
.pfcp-title { font-size:clamp(2.4rem,5vw,4.5rem); font-weight:900; line-height:1.05; margin-bottom:14px; text-shadow:0 8px 40px rgba(0,0,0,.6); letter-spacing:-1px }
.pfcp-genres { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px }
.pfcp-genre { padding:4px 14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:20px; font-size:13px; color:rgba(255,255,255,.75) }
.pfcp-overview { font-size:15px; line-height:1.7; color:rgba(255,255,255,.78); margin-bottom:24px; max-width:580px }
.pfcp-rating-bar { margin-bottom:28px; max-width:340px }
.pfcp-rating-label { display:flex; align-items:center; gap:10px; margin-bottom:8px }
.pfcp-rating-name  { color:rgba(245,197,21,.9); font-weight:700; font-size:14px }
.pfcp-rating-val   { color:#fff; font-size:22px; font-weight:900 }
.pfcp-rating-count { color:rgba(255,255,255,.4); font-size:12px }
.pfcp-rating-track { height:4px; background:rgba(255,255,255,.15); border-radius:2px; overflow:hidden }
.pfcp-rating-fill  { height:100%; background:linear-gradient(to right,#f59e0b,#ef4444); border-radius:2px; transition:width 1s ease }
.pfcp-actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center }

/* Play button (liquid) */
.pfcp-btn-play {
    position:relative; display:inline-flex; align-items:center;
    padding:18px 48px; color:#fff; font-weight:900; font-size:1.1rem;
    border-radius:100px; overflow:hidden; border:none; cursor:pointer;
    text-decoration:none; transition:transform .3s,box-shadow .3s;
}
.pfcp-btn-bg { position:absolute; inset:0; background:linear-gradient(90deg,var(--pf-accent),var(--pf-accent2),var(--pf-accent)); background-size:200% auto; transition:.5s; z-index:0 }
.pfcp-btn-inner { position:relative; z-index:2; display:flex; align-items:center; gap:12px }
.pfcp-btn-glow { position:absolute; inset:-4px; background:var(--pf-accent); filter:blur(20px); opacity:.45; z-index:-1; transition:.3s }
.pfcp-btn-play:hover { transform:scale(1.05) translateY(-3px); box-shadow:0 24px 50px rgba(124,58,237,.5) }
.pfcp-btn-play:hover .pfcp-btn-bg { background-position:right }
.pfcp-btn-play:hover .pfcp-btn-glow { opacity:.75 }

.pfcp-btn-trailer { display:inline-flex; align-items:center; gap:8px; padding:16px 28px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:50px; font-size:14px; font-weight:700; cursor:pointer; backdrop-filter:blur(8px); transition:all .2s }
.pfcp-btn-trailer:hover { background:rgba(255,255,255,.2) }
.pfcp-btn-fav { width:52px; height:52px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; cursor:pointer; transition:all .2s }
.pfcp-btn-fav:hover { background:rgba(239,68,68,.2); border-color:rgba(239,68,68,.4); transform:scale(1.1) }

/* Poster side */
.pfcp-poster-side { display:flex; align-items:center; justify-content:center; animation:cpSlideR 1.2s cubic-bezier(.16,1,.3,1) both }
@keyframes cpSlideR { from{opacity:0;transform:translateX(40px) rotateY(-12deg)} to{opacity:1;transform:translateX(0) rotateY(-6deg)} }
.pfcp-poster-card {
    position:relative; width:100%; max-width:360px;
    border-radius:22px; overflow:hidden;
    transform:perspective(1000px) rotateY(-6deg);
    box-shadow:-20px 30px 70px rgba(0,0,0,.85), 0 0 40px rgba(124,58,237,.15);
    border:1px solid rgba(255,255,255,.1); transition:transform .12s ease;
}
.pfcp-poster-card a { display:block; position:relative; text-decoration:none }
.pfcp-poster-card img { width:100%; display:block; aspect-ratio:2/3; object-fit:cover }
.pfcp-poster-shine { position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.14) 0%,transparent 55%); pointer-events:none }
.pfcp-poster-info-ov { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.96) 0%,rgba(0,0,0,.65) 55%,transparent 100%); opacity:0; transition:opacity .35s; display:flex; align-items:flex-end; padding:20px }
.pfcp-poster-card:hover .pfcp-poster-info-ov { opacity:1 }
.pfcp-poster-info-inner { width:100%; transform:translateY(12px); transition:transform .35s }
.pfcp-poster-card:hover .pfcp-poster-info-inner { transform:translateY(0) }
.pfcp-pi-row { display:flex; flex-direction:column; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.08) }
.pfcp-pi-row:last-child { border-bottom:none }
.pfcp-pi-label { font-size:10px; color:var(--pf-accent2); text-transform:uppercase; letter-spacing:1.5px; font-weight:700; margin-bottom:3px }
.pfcp-pi-val   { font-size:13px; color:#fff; font-weight:500; line-height:1.4 }
.pfcp-poster-stats { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-around; background:linear-gradient(to top,rgba(0,0,0,.9),transparent); padding:14px 8px; color:rgba(255,255,255,.85); font-size:12px; font-weight:600 }

/* Sections below hero */
.pfcp-section { padding:36px 5%; border-top:1px solid rgba(255,255,255,.06) }
.pfcp-sec-title { font-size:1.25rem; font-weight:800; margin-bottom:18px; display:flex; align-items:center; gap:10px }

/* Episodes */
.pfcp-sea-tabs { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px }
.pfcp-sea-tab  { padding:8px 18px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:20px; color:rgba(255,255,255,.65); cursor:pointer; font-size:13px; transition:all .2s }
.pfcp-sea-tab small { font-size:10px; opacity:.7 }
.pfcp-sea-tab.active { background:var(--pf-accent); border-color:var(--pf-accent); color:#fff }
.pfcp-eps-grid { display:flex; flex-direction:column; gap:10px }
.pfcp-loading { display:flex; justify-content:center; padding:50px }
.pfcp-ep {
    display:flex; gap:14px; background:rgba(255,255,255,.04); border-radius:12px;
    overflow:hidden; cursor:pointer; text-decoration:none; color:#fff;
    transition:background .2s,transform .15s;
}
.pfcp-ep:hover { background:rgba(124,58,237,.18); transform:translateX(4px) }
.pfcp-ep-thumb { position:relative; width:180px; flex-shrink:0; background:rgba(0,0,0,.3) }
.pfcp-ep-thumb img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block }
.pfcp-ep-noimg { width:180px; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; font-size:32px }
.pfcp-ep-play  { position:absolute; inset:0; background:rgba(0,0,0,.5); opacity:0; display:flex; align-items:center; justify-content:center; transition:opacity .2s }
.pfcp-ep:hover .pfcp-ep-play { opacity:1 }
.pfcp-ep-info  { padding:14px; display:flex; flex-direction:column; gap:5px; justify-content:center }
.pfcp-ep-num   { font-size:11px; color:var(--pf-accent2); font-weight:800 }
.pfcp-ep-name  { font-size:14px; font-weight:700 }
.pfcp-ep-rt    { font-size:11px; color:rgba(255,255,255,.4) }
.pfcp-ep-ov    { font-size:12px; color:rgba(255,255,255,.55); line-height:1.5; margin:2px 0 0 }

/* Cast */
.pfcp-cast-scroll { display:flex; gap:14px; overflow-x:auto; padding-bottom:10px }
.pfcp-cast-card   { flex-shrink:0; width:90px; text-align:center }
.pfcp-cast-card img { width:80px; height:80px; border-radius:50%; object-fit:cover; margin:0 auto 6px; display:block; border:2px solid rgba(124,58,237,.4) }
.pfcp-cast-name { font-size:11px; font-weight:700 }
.pfcp-cast-char { font-size:10px; color:rgba(255,255,255,.4) }

/* Full overview */
.pfcp-full-overview { color:rgba(255,255,255,.8); line-height:1.8; font-size:15px; margin-bottom:24px; max-width:860px }
.pfcp-details-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px }
.pfcp-detail-item  { background:rgba(255,255,255,.04); border-radius:10px; padding:14px 16px; display:flex; flex-direction:column; gap:5px }
.pfcp-detail-item.pfcp-di-wide { grid-column:span 2 }
.pfcp-di-label { font-size:11px; color:var(--pf-accent2); text-transform:uppercase; letter-spacing:1px; font-weight:700 }

/* Similar grid */
.pfcp-similar-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px }
.pfcp-similar-card { text-decoration:none; color:inherit }

/* Trailer modal */
.pftr-bg  { display:none; position:fixed; inset:0; background:rgba(0,0,0,.92); backdrop-filter:blur(12px); z-index:9000 }
.pftr-box { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:92%; max-width:960px; z-index:9001; border-radius:14px; overflow:hidden }
.pftr-box iframe { width:100%; aspect-ratio:16/9; display:block; border:none }
.pftr-close { position:absolute; top:-44px; right:0; background:rgba(255,255,255,.15); border:none; color:#fff; border-radius:50%; width:36px; height:36px; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:10; transition:background .2s }
.pftr-close:hover { background:var(--pf-accent) }

/* Responsive */
@media (max-width:900px) {
    .pfcp-grid { grid-template-columns:1fr; gap:0; padding:100px 5% 60px }
    .pfcp-poster-side { display:none }
    .pfcp-title { font-size:2.2rem }
}
@media (max-width:600px) {
    .pfcp-title { font-size:1.8rem }
    .pfcp-actions { flex-direction:column }
    .pfcp-btn-play,.pfcp-btn-trailer { width:100%; justify-content:center }
    .pfcp-ep-thumb { width:130px }
    .pfcp-details-grid { grid-template-columns:1fr 1fr }
    .pfcp-detail-item.pfcp-di-wide { grid-column:span 2 }
}

/* ── Genre dropdown nav ── */
.pf-nav-dropdown:hover .pf-genre-menu,
.pf-nav-dropdown:focus-within .pf-genre-menu { display:grid !important }
.pf-genre-menu { display:none !important }
.pf-nav-genre-btn { color:rgba(255,255,255,.85); font-size:.88rem; font-weight:500; padding:6px 4px; transition:color .2s }
.pf-nav-genre-btn:hover { color:#fff }
.pf-genre-menu-item { display:block; padding:8px 12px; color:rgba(255,255,255,.75); font-size:12px; text-decoration:none; border-radius:7px; transition:background .15s,color .15s; white-space:nowrap }
.pf-genre-menu-item:hover { background:rgba(124,58,237,.2); color:#fff }

/* ══════════════════════════════════════════════════════
   NEW SLIDER STYLE — Expand on hover (reference style)
   ══════════════════════════════════════════════════════ */
.pf-xslider-wrap { padding: 0 0 10px }
.pf-xslider .swiper-slide { width: auto }

/* Card expand-on-hover */
.pf-xcrd {
    position: relative;
    width: 170px;
    height: 255px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: width .45s cubic-bezier(.165,.84,.44,1), box-shadow .35s, z-index 0s .45s;
    will-change: width;
    z-index: 1;
    flex-shrink: 0;
    background: #0d0d12;
    border: 1px solid rgba(255,255,255,.1);
}
.pf-xcrd:hover {
    width: 360px;
    z-index: 50;
    box-shadow: 0 28px 60px rgba(0,0,0,.8), 0 0 60px rgba(124,58,237,.18);
    transition: width .45s cubic-bezier(.165,.84,.44,1), box-shadow .35s, z-index 0s;
}
.pf-xcrd-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .55s ease, filter .4s ease;
}
.pf-xcrd:hover .pf-xcrd-img {
    transform: scale(1.12);
    filter: brightness(.38);
}
/* Shine sweep on hover */
.pf-xcrd::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%);
    transform: rotate(45deg) translateY(-100%);
    transition: transform .7s ease;
    z-index: 3; pointer-events: none;
}
.pf-xcrd:hover::after { transform: rotate(45deg) translateY(100%) }

/* Glass reflection */
.pf-xcrd::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.1) 0%, transparent 50%);
    z-index: 2; pointer-events: none; opacity: 0;
    transition: opacity .4s;
}
.pf-xcrd:hover::before { opacity: 1 }

/* Type badge */
.pf-xcrd-badge {
    position: absolute; top: 10px; left: 10px;
    padding: 4px 10px; border-radius: 5px;
    font-size: 9px; font-weight: 800; text-transform: uppercase;
    z-index: 15; letter-spacing: .5px;
    background: linear-gradient(135deg, var(--pf-accent), var(--pf-accent2)); color: #fff;
    transition: opacity .3s;
}
.pf-xcrd:hover .pf-xcrd-badge { opacity: 0 }

/* Glass overlay info */
.pf-xcrd-ov {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 20px; opacity: 0;
    transition: opacity .35s ease;
    z-index: 10;
}
.pf-xcrd:hover .pf-xcrd-ov { opacity: 1 }

.pf-xcrd-glass {
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);
    transform: translateY(16px);
    opacity: 0;
    transition: transform .45s cubic-bezier(.165,.84,.44,1) .1s, opacity .35s .1s;
}
.pf-xcrd:hover .pf-xcrd-glass { transform: translateY(0); opacity: 1 }

.pf-xcrd-rating {
    display: inline-flex; align-items: center; gap: 5px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #000; font-weight: 900; font-size: 12px;
    padding: 4px 10px; border-radius: 7px;
    box-shadow: 0 3px 10px rgba(251,191,36,.3);
    margin-bottom: 10px;
}
.pf-xcrd-title {
    color: #fff; font-size: 15px; font-weight: 700;
    line-height: 1.3; margin: 0 0 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pf-xcrd-meta {
    display: flex; align-items: center; gap: 10px;
    font-size: 11px; color: rgba(255,255,255,.75); flex-wrap: wrap;
}
/* Extra info (delayed appear) */
.pf-xcrd-extra {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.1);
    opacity: 0; transform: translateY(8px);
    transition: opacity .35s ease .2s, transform .35s ease .2s;
}
.pf-xcrd:hover .pf-xcrd-extra { opacity: 1; transform: translateY(0) }
.pf-xcrd-desc {
    font-size: 11px; color: rgba(255,255,255,.65); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 10px;
}
.pf-xcrd-actions { display: flex; gap: 8px }
.pf-xcrd-play {
    flex: 1; padding: 8px; border-radius: 8px; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    background: linear-gradient(135deg, var(--pf-accent), var(--pf-accent2)); color: #fff;
    border: none; cursor: pointer; transition: transform .2s; font-family: inherit;
    text-decoration: none;
}
.pf-xcrd-play:hover { transform: scale(1.04) }
.pf-xcrd-more {
    width: 36px; height: 36px; border-radius: 8px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
    color: #fff; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .2s; font-size: 16px; flex-shrink: 0; text-decoration: none;
}
.pf-xcrd-more:hover { background: rgba(255,255,255,.2) }

/* Mobile: no expand */
@media(max-width:768px){
    .pf-xcrd { width: 130px; height: 195px }
    .pf-xcrd:hover { width: 130px; box-shadow: none }
    .pf-xcrd:hover .pf-xcrd-img { transform: scale(1.04); filter: brightness(.65) }
    .pf-xcrd-ov { opacity: 1; background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 100%) }
    .pf-xcrd-glass { transform: none; opacity: 1; background: transparent; backdrop-filter: none; border: none; padding: 0; box-shadow: none }
    .pf-xcrd:hover .pf-xcrd-glass { transform: none }
    .pf-xcrd-extra, .pf-xcrd-actions { display: none }
    .pf-xcrd-title { font-size: 11px; -webkit-line-clamp: 1 }
    .pf-xcrd-meta { font-size: 10px }
}

/* ══════════════════════════════════════════════
   PRIMEFLX v9 — Nuevos estilos
══════════════════════════════════════════════ */

/* ── Sección subtítulo ── */
.pf-sect-sub { font-size:12px; color:rgba(255,255,255,.4); margin-top:2px; }

/* ── Continuar viendo ── */
.pf-cont-slide { width:280px !important; }
.pf-cont-card {
  position:relative; width:100%; height:158px;
  border-radius:12px; overflow:hidden; cursor:pointer;
  transition:transform .3s;
}
.pf-cont-card:hover { transform:scale(1.03); }
.pf-cont-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:transform .4s;
}
.pf-cont-card:hover .pf-cont-bg { transform:scale(1.06); }
.pf-cont-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.1) 60%, transparent 100%);
  display:flex; align-items:flex-end; justify-content:space-between; padding:12px;
}
.pf-cont-info { flex:1; min-width:0; }
.pf-cont-title { font-size:13px; font-weight:700; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-cont-ep { font-size:11px; color:rgba(255,255,255,.5); margin-top:2px; }
.pf-cont-play {
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.18); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  color:#fff; flex-shrink:0;
}
.pf-cont-prog { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.15); }

/* ── Top 10 ── */
.pf-top10-slide { width:150px !important; position:relative; }
.pf-top10-rank {
  position:absolute; left:-2px; bottom:10px; z-index:10;
  font-size:5.5rem; font-weight:900; line-height:1;
  color:transparent;
  -webkit-text-stroke:3px rgba(255,255,255,.92);
  text-stroke:3px rgba(255,255,255,.92);
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.9));
  pointer-events:none;
  font-family:'Arial Black', Impact, sans-serif;
}
.pf-top10-card {
  width:120px; height:180px; border-radius:11px;
  overflow:hidden; position:relative;
  margin-left:auto;
  transition:transform .3s, box-shadow .3s;
  border:2px solid rgba(255,255,255,.1);
}
.pf-top10-card:hover {
  transform:scale(1.06) translateY(-5px);
  border-color:rgba(124,58,237,.7);
  box-shadow:0 12px 30px rgba(124,58,237,.35);
}
.pf-top10-card img { width:100%; height:100%; object-fit:cover; }
.pf-top10-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.88) 0%, transparent 60%);
  opacity:0; transition:opacity .3s;
  display:flex; align-items:flex-end; justify-content:space-between; padding:8px;
}
.pf-top10-card:hover .pf-top10-overlay { opacity:1; }
.pf-top10-name {
  font-size:11px; font-weight:700; color:#fff;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  flex:1; min-width:0; margin-right:6px;
}
.pf-top10-play {
  width:28px; height:28px; border-radius:50%;
  background:rgba(124,58,237,.85); display:flex;
  align-items:center; justify-content:center;
  color:#fff; flex-shrink:0; text-decoration:none;
  transition:background .2s;
}
.pf-top10-play:hover { background:#7c3aed; }
.pf-top10-country {
  font-size:13px; background:rgba(255,255,255,.1);
  padding:3px 10px; border-radius:20px;
  font-weight:500; color:rgba(255,255,255,.7);
}
.pf-weekly-badge {
  font-size:11px;
  background:linear-gradient(135deg,#f97316,#ef4444);
  padding:3px 10px; border-radius:20px;
  font-weight:600; color:#fff;
  margin-left:8px; vertical-align:middle;
}

/* ── Platform sections ── */
.pf-platform-badge {
  display:inline-flex; align-items:center;
  padding:4px 14px; border-radius:7px;
  font-size:13px; font-weight:800; color:#fff; letter-spacing:.5px;
}

/* ── Sorpréndeme button ── */
.pf-btn-surprise {
  background:linear-gradient(135deg,#a855f7,#f59e0b);
  color:#fff; border:none; border-radius:50px;
  padding:12px 24px; font-size:14px; font-weight:700;
  cursor:pointer; font-family:inherit;
  transition:transform .2s, opacity .2s;
}
.pf-btn-surprise:hover { transform:translateY(-2px); opacity:.9; }

/* Sorpréndeme modal */
.pf-surprise-modal {
  display:none; position:fixed; inset:0; z-index:9500;
  background:rgba(0,0,0,.82); backdrop-filter:blur(10px);
  align-items:center; justify-content:center; padding:24px;
}
.pf-surprise-modal.show { display:flex; }
.pf-surprise-content {
  background:#0e0e1e; border:1px solid rgba(255,255,255,.12);
  border-radius:22px; padding:32px; max-width:480px; width:100%;
  position:relative;
  animation:pfAuthIn .4s cubic-bezier(.34,1.56,.64,1);
}
.pf-surprise-close {
  position:absolute; top:14px; right:14px;
  background:rgba(255,255,255,.08); border:none;
  color:rgba(255,255,255,.6); width:32px; height:32px;
  border-radius:50%; cursor:pointer; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.pf-surprise-inner { display:flex; gap:20px; align-items:center; }
.pf-surprise-poster { width:100px; border-radius:10px; flex-shrink:0; }
.pf-surprise-tag { font-size:12px; color:rgba(255,255,255,.5); margin-bottom:8px; }
.pf-surprise-title { font-size:1.3rem; font-weight:800; color:#fff; margin-bottom:8px; }
.pf-surprise-meta { display:flex; gap:12px; font-size:12px; color:rgba(255,255,255,.5); margin-bottom:16px; }
.pf-surprise-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* ── Reactions Facebook style ── */
.pfcp-reactions {
  margin-top:18px; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
}
.pfcp-react-row { display:flex; flex-wrap:wrap; gap:7px; }
.pfcp-react-btn {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.75); border-radius:50px;
  padding:7px 13px; font-size:13px;
  cursor:pointer; transition:all .22s; font-family:inherit;
}
.pfcp-react-btn:hover {
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.22);
  transform:scale(1.1) translateY(-2px);
}
.pfcp-react-btn.active {
  background:rgba(124,58,237,.28);
  border-color:rgba(124,58,237,.55); color:#fff;
}
.pfcp-react-emoji { font-size:1.3rem; line-height:1; transition:transform .2s; }
.pfcp-react-btn:hover .pfcp-react-emoji { transform:scale(1.35) translateY(-2px); }
.pfcp-react-count { font-size:12px; font-weight:700; color:rgba(255,255,255,.65); min-width:12px; }
.pfcp-react-login { font-size:12px; color:rgba(255,255,255,.4); margin-top:10px; }
.pfcp-react-login a { color:#a855f7; text-decoration:none; }

/* ── Coming Soon ── */
.pfcp-coming-soon { display:flex; flex-direction:column; gap:10px; margin-bottom:6px; }
.pfcp-cs-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,#f97316,#ef4444);
  color:#fff; padding:11px 24px; border-radius:50px;
  font-size:14px; font-weight:800; letter-spacing:.5px;
  width:fit-content; box-shadow:0 6px 20px rgba(239,68,68,.35);
}
.pfcp-cs-date { font-size:13px; color:rgba(255,255,255,.6); margin:0; }
.pfcp-cs-poster-wrap { position:relative; border-radius:14px; overflow:hidden; }
.pfcp-cs-poster-badge {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; font-weight:900; color:#fff;
  letter-spacing:3px; text-align:center;
  background:rgba(0,0,0,.3);
  text-shadow:0 2px 12px rgba(0,0,0,.8);
  writing-mode:horizontal-tb;
}

/* ── Favorite button active ── */
.pfcp-btn-fav.active span { filter:drop-shadow(0 0 8px #ef4444); }

/* ── Mobile responsive sliders ── */
@media (max-width: 600px) {
  .pf-cont-slide { width:240px !important; }
  .pf-top10-slide { width:120px !important; }
  .pf-top10-rank { font-size:4rem; }
  .pf-top10-card { width:96px; height:144px; }
  .pf-surprise-inner { flex-direction:column; }
  .pf-surprise-poster { width:80px; }
}

/* ══ Top 10 redesign ══ */
.pf-t10-slide { width:200px !important; padding:0 8px; }
.pf-t10-item { display:flex; align-items:flex-end; gap:0; position:relative; padding-bottom:4px; }
.pf-t10-num {
  font-size:7rem; font-weight:900; line-height:1;
  color:transparent;
  -webkit-text-stroke:3px rgba(255,255,255,.85);
  text-stroke:3px rgba(255,255,255,.85);
  font-family:'Arial Black',Impact,sans-serif;
  flex-shrink:0; width:68px; text-align:center;
  margin-right:-14px; position:relative; z-index:2;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.9));
  user-select:none;
}
.pf-t10-card {
  width:120px; height:180px; flex-shrink:0;
  border-radius:10px; overflow:hidden; position:relative;
  border:2px solid rgba(255,255,255,.12);
  transition:transform .3s, box-shadow .3s;
  z-index:1;
}
.pf-t10-card:hover {
  transform:scale(1.06) translateY(-4px);
  border-color:rgba(124,58,237,.7);
  box-shadow:0 14px 32px rgba(124,58,237,.35);
}
.pf-t10-card img { width:100%; height:100%; object-fit:cover; }
.pf-t10-hover {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.1) 60%,transparent 100%);
  opacity:0; transition:opacity .3s;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:10px 8px; gap:4px;
}
.pf-t10-card:hover .pf-t10-hover { opacity:1; }
.pf-t10-title { font-size:11px; font-weight:700; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-t10-rating { font-size:10px; color:rgba(255,255,255,.7); }
.pf-t10-year   { font-size:10px; color:rgba(255,255,255,.5); }
.pf-t10-play {
  display:flex; align-items:center; gap:5px; justify-content:center;
  background:var(--pf-accent); color:#fff; border-radius:20px;
  padding:5px 10px; font-size:11px; font-weight:700;
  text-decoration:none; margin-top:4px;
  transition:background .2s;
}
.pf-t10-play:hover { background:var(--pf-accent2); }

@media(max-width:600px){
  .pf-t10-slide { width:160px !important; }
  .pf-t10-num { font-size:5rem; width:52px; }
  .pf-t10-card { width:96px; height:144px; }
}

/* ══ Logo in loader ══ */
.pf-loader-logo {
  display:flex; align-items:center; justify-content:center;
}
.pf-loader-logo img {
  max-height:60px; width:auto;
}

/* ══ Similar content slider ══ */
.pf-similar-swiper { overflow:visible; }
.pf-similar-swiper .swiper-wrapper { padding-bottom:4px; }

/* ══════════════════════════════════════════════
   HERO v10 FIX — correct fade without breaking Swiper opacity
   KEY: DO NOT set opacity/visibility on .swiper-slide — Swiper
   needs to control those for the fade effect to work.
══════════════════════════════════════════════ */

/* Section + swiper must have explicit height */
.pf-hero-section         { position:relative !important; height:88vh !important; min-height:560px !important; overflow:hidden !important; }
#pf-hero-swiper          { height:100% !important; }
#pf-hero-swiper .swiper-wrapper { height:100% !important; }

/* Slides: height only — let Swiper handle opacity/visibility for fade */
#pf-hero-swiper .swiper-slide,
#pf-hero-swiper .pf-hero-slide {
    height: 100% !important;
    /* NO opacity/visibility here — Swiper fade sets these */
}

/* Background div — always render, z-index below overlay */
#pf-hero-swiper .pf-hero-bg {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center 25% !important;
    background-repeat: no-repeat !important;
    display: block !important;
    z-index: 0 !important;
    transform: scale(1.0);
    transition: transform 9s cubic-bezier(.25,.46,.45,.94);
}
/* Ken Burns on active slide */
#pf-hero-swiper .swiper-slide-active .pf-hero-bg {
    transform: scale(1.07);
}

/* Overlay — rich cinematic gradient */
#pf-hero-swiper .pf-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background:
        linear-gradient(105deg, rgba(5,5,8,.97) 0%, rgba(5,5,8,.78) 40%, rgba(5,5,8,.25) 68%, transparent 100%),
        linear-gradient(to top,  rgba(5,5,8,.96) 0%, rgba(5,5,8,.5)  38%, transparent 65%) !important;
    pointer-events: none !important;
}

/* Content — high z-index, animated entry */
#pf-hero-swiper .pf-hero-content {
    position: absolute !important;
    z-index: 5 !important;
    bottom: 14% !important;
    left: 4.5% !important;
    max-width: 580px !important;
}

/* ── v10 entry animations ── */
.pf-hero-slide .pf-hero-badges,
.pf-hero-slide .pf-hero-title,
.pf-hero-slide .pf-hero-genres,
.pf-hero-slide .pf-hero-overview,
.pf-hero-slide .pf-hero-meta,
.pf-hero-slide .pf-hero-actions {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.34,1.1,.64,1);
}
.swiper-slide-active .pf-hero-badges  { opacity:1; transform:none; transition-delay:.12s; }
.swiper-slide-active .pf-hero-title   { opacity:1; transform:none; transition-delay:.24s; }
.swiper-slide-active .pf-hero-genres  { opacity:1; transform:none; transition-delay:.34s; }
.swiper-slide-active .pf-hero-overview{ opacity:1; transform:none; transition-delay:.42s; }
.swiper-slide-active .pf-hero-meta    { opacity:1; transform:none; transition-delay:.50s; }
.swiper-slide-active .pf-hero-actions { opacity:1; transform:none; transition-delay:.58s; }

/* ── v10 badge styles ── */
.pf-hero-badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.pf-hero-badge  { display:inline-flex; align-items:center; gap:5px; padding:5px 13px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.4px; backdrop-filter:blur(8px); }
.pf-badge-trending { background:rgba(239,68,68,.18); border:1px solid rgba(239,68,68,.35); color:#fca5a5; }
.pf-badge-rating   { background:rgba(234,179,8,.14); border:1px solid rgba(234,179,8,.3);  color:#fde68a; }
.pf-badge-type     { border:1px solid rgba(255,255,255,.18); }
.pf-badge-type.pf-type-movie { background:rgba(124,58,237,.2); color:#c4b5fd; border-color:rgba(124,58,237,.4); }
.pf-badge-type.pf-type-serie { background:rgba(16,185,129,.18); color:#6ee7b7; border-color:rgba(16,185,129,.38); }
.pf-badge-type.pf-type-anime { background:rgba(236,72,153,.18); color:#f9a8d4; border-color:rgba(236,72,153,.38); }

/* ── v10 title ── */
.pf-hero-title {
    font-size: clamp(2rem, 4.5vw, 3.8rem) !important;
    font-weight: 900 !important; line-height: 1.06 !important;
    margin-bottom: 14px !important;
    text-shadow: 0 3px 30px rgba(0,0,0,.75) !important;
    letter-spacing: -.3px;
    color: #fff !important;
}

/* ── v10 genres ── */
.pf-hero-genres { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.pf-hero-genre  { padding:4px 12px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); border-radius:20px; font-size:12px; color:rgba(255,255,255,.7); }

/* ── v10 overview ── */
.pf-hero-overview {
    font-size:14px; line-height:1.7; color:rgba(255,255,255,.72);
    max-width:540px; margin-bottom:16px;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* ── v10 meta ── */
.pf-hero-meta { display:flex; gap:16px; font-size:13px; color:rgba(255,255,255,.55); margin-bottom:22px; }

/* ── v10 buttons ── */
.pf-hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.pf-btn-primary  { display:inline-flex; align-items:center; gap:8px; padding:13px 30px; background:var(--pf-accent); color:#fff; border:none; border-radius:50px; font-size:15px; font-weight:700; cursor:pointer; transition:all .2s; box-shadow:0 6px 28px rgba(124,58,237,.5); text-decoration:none; }
.pf-btn-primary:hover  { transform:translateY(-3px) scale(1.03); box-shadow:0 10px 36px rgba(124,58,237,.65); color:#fff; }
.pf-btn-secondary{ display:inline-flex; align-items:center; gap:8px; padding:12px 24px; background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.22); border-radius:50px; font-size:14px; font-weight:600; cursor:pointer; transition:all .2s; backdrop-filter:blur(10px); text-decoration:none; }
.pf-btn-secondary:hover { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.4); }

/* ── Surprise button ── */
.pf-btn-surprise { background:linear-gradient(135deg,#a855f7,#f59e0b); color:#fff; border:none; border-radius:50px; padding:12px 22px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; transition:transform .2s, box-shadow .2s; }
.pf-btn-surprise:hover { transform:translateY(-2px); box-shadow:0 6px 22px rgba(168,85,247,.45); }

/* ── Nav arrows — side buttons ── */
.pf-hero-nav { position:absolute; right:3%; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:10; }
.pf-hero-nav-btn { width:44px; height:44px; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.18); border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(10px); transition:all .22s; }
.pf-hero-nav-btn:hover { background:rgba(124,58,237,.55); border-color:rgba(124,58,237,.8); transform:scale(1.1); }

/* ── Progress bar ── */
.pf-hero-progress { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.08); z-index:10; }
.pf-hero-progress-bar { height:100%; background:var(--pf-accent); width:0; transition:width .15s linear; }

/* ── Pagination ── */
.pf-hero-swiper .swiper-pagination { bottom:28px !important; left:4.5% !important; text-align:left !important; width:auto !important; }
.pf-hero-swiper .swiper-pagination-bullet { background:rgba(255,255,255,.4); width:8px; height:8px; opacity:1; }
.pf-hero-swiper .swiper-pagination-bullet-active { background:var(--pf-accent); width:22px; border-radius:4px; }

/* ── Thumbnail rail (position:absolute — critical, NOT flex child) ── */
.pf-h10-rail {
    position: absolute;
    top: 0; right: 0; bottom: 0; width: 270px; z-index: 10;
    display: flex; flex-direction: column;
    padding: 100px 14px 64px;
    background: linear-gradient(to left, rgba(5,5,8,.9) 0%, rgba(5,5,8,.7) 55%, transparent 100%);
    backdrop-filter: blur(1px);
}
.pf-h10-rail-label { font-size:9px; font-weight:800; letter-spacing:2px; color:rgba(255,255,255,.25); text-transform:uppercase; margin-bottom:10px; padding-left:4px; }
.pf-h10-rail-list  { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:3px; scrollbar-width:none; }
.pf-h10-rail-list::-webkit-scrollbar { display:none; }
.pf-h10-thumb { display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:10px; cursor:pointer; border:1px solid transparent; background:rgba(255,255,255,.02); transition:all .22s; position:relative; overflow:hidden; }
.pf-h10-thumb:hover  { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.1); }
.pf-h10-thumb.active { background:rgba(124,58,237,.16); border-color:rgba(124,58,237,.38); }
.pf-h10-thumb-num   { font-size:11px; font-weight:800; color:rgba(255,255,255,.22); min-width:14px; text-align:center; flex-shrink:0; }
.pf-h10-thumb.active .pf-h10-thumb-num { color:var(--pf-accent); }
.pf-h10-thumb-img   { flex-shrink:0; }
.pf-h10-thumb-img img { width:37px; height:54px; border-radius:6px; object-fit:cover; border:1px solid rgba(255,255,255,.06); }
.pf-h10-thumb.active .pf-h10-thumb-img img { border-color:rgba(124,58,237,.5); }
.pf-h10-thumb-info  { flex:1; min-width:0; }
.pf-h10-thumb-title { display:block; font-size:11.5px; font-weight:600; color:rgba(255,255,255,.65); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .2s; }
.pf-h10-thumb.active .pf-h10-thumb-title { color:#fff; }
.pf-h10-thumb-sub   { display:block; font-size:10px; color:rgba(255,255,255,.28); margin-top:2px; }
.pf-h10-thumb-bar   { position:absolute; left:0; top:15%; bottom:15%; width:3px; border-radius:0 2px 2px 0; background:var(--pf-accent); opacity:0; transition:opacity .22s; }
.pf-h10-thumb.active .pf-h10-thumb-bar { opacity:1; }

/* ── v10 poster accent (right of content area) ── */
.pf-h10-poster {
    position:absolute; bottom:14%; left:calc(4.5% + 600px);
    z-index:6; opacity:0; transform:translateY(20px) scale(.96);
    transition:opacity .65s ease .65s, transform .65s cubic-bezier(.34,1.1,.64,1) .65s;
    pointer-events:none;
}
.swiper-slide-active .pf-h10-poster { opacity:1; transform:none; }
.pf-h10-poster img { width:130px; border-radius:14px; box-shadow:0 22px 60px rgba(0,0,0,.75), 0 0 0 2px rgba(255,255,255,.07); }

/* ── Scroll cue ── */
.pf-h10-scroll { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:10; color:rgba(255,255,255,.3); pointer-events:none; animation:pfBounce 2.2s ease-in-out infinite; }
@keyframes pfBounce { 0%,100%{transform:translateX(-50%) translateY(0);opacity:.35} 55%{transform:translateX(-50%) translateY(8px);opacity:.7} }

/* ── Responsive ── */
@media (max-width: 1100px) { .pf-h10-rail { width:230px; } }
@media (max-width: 900px)  { .pf-h10-rail,.pf-h10-poster,.pf-h10-scroll { display:none; } }
@media (max-width: 600px)  {
    .pf-hero-section { height:75vh !important; }
    .pf-hero-title { font-size:1.7rem !important; }
    .pf-btn-primary { padding:11px 22px !important; font-size:14px !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   PF10C — EXPANDING CARD SYSTEM v13
   Exactly 6 cards visible on desktop.
   Hover: card expands horizontally showing backdrop + details.
   Click card (collapsed OR expanded) → content page.
═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   PF10C SLIDER — POSTER REAL SIZE + RESPONSIVE v3.3
   Proporciones reales 2:3 · 10 items · 6 visibles desktop
   ═══════════════════════════════════════════════════════ */

/* CSS variable for slide height — scales with viewport */
:root {
    --pf-slide-h: 195px;   /* mobile base */
}
@media (min-width: 480px)  { :root { --pf-slide-h: 215px; } }
@media (min-width: 640px)  { :root { --pf-slide-h: 235px; } }
@media (min-width: 768px)  { :root { --pf-slide-h: 258px; } }
@media (min-width: 1024px) { :root { --pf-slide-h: 290px; } }
@media (min-width: 1200px) { :root { --pf-slide-h: 318px; } }
@media (min-width: 1440px) { :root { --pf-slide-h: 342px; } }
@media (min-width: 1920px) { :root { --pf-slide-h: 375px; } }

/* ── Slider container ── */
.pf10c-slider {
    overflow: visible !important;
    width: 100% !important;
    padding: 16px 0 32px !important;
}
.pf10c-slider .swiper-wrapper { align-items: center; }

/* ── Slide: altura variable, ancho = ratio 2:3 (real poster) ── */
.pf10c-slide {
    height: var(--pf-slide-h) !important;
    flex-shrink: 0;
    z-index: 1;
    position: relative;
    transition: z-index 0s;
}
/* Width = height × (2/3) → real poster proportions */
.swiper-slide.pf10c-slide {
    width: calc(var(--pf-slide-h) * 0.6667) !important;
    min-width: 110px;
    max-width: 260px;
    transition: width .48s cubic-bezier(.165,.84,.44,1) !important;
}
/* Hover: expand to show backdrop (16:9 aspect) */
.swiper-slide.pf10c-slide:hover {
    /* Expand to 16:9 aspect ratio on hover */
    width: calc(var(--pf-slide-h) * 1.7778) !important;
    max-width: 680px !important;
    z-index: 20 !important;
}

/* ── Card shell: rellena la altura fija del slide ── */
.pf10c-card {
    width: 100%;
    height: 100%;                /* hereda los 252px del slide */
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    background: #0d0d14;
    transition: box-shadow .3s, border-color .3s;
}
.pf10c-slide:hover .pf10c-card {
    border-color: rgba(124,58,237,.4);
    box-shadow: 0 18px 50px rgba(0,0,0,.7), 0 0 0 1px rgba(124,58,237,.25);
}

/* ── Poster layer ── */
.pf10c-poster {
    position: absolute; inset: 0; z-index: 1;
}
.pf10c-poster img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .55s ease, filter .45s ease;
}
.pf10c-slide:hover .pf10c-poster img {
    transform: scale(1.12);
    filter: brightness(.12);
}

/* ── Type badge ── */
.pf10c-badge {
    position: absolute; top: 7px; left: 7px; z-index: 5;
    padding: 2px 7px; border-radius: 4px;
    font-size: 8.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
    transition: opacity .3s;
}
.pf10c-slide:hover .pf10c-badge { opacity: 0; }
.pf10c-badge-movie { background: rgba(124,58,237,.85); color: #e9d5ff; }
.pf10c-badge-serie { background: rgba(16,185,129,.85);  color: #d1fae5; }
.pf10c-badge-anime { background: rgba(236,72,153,.85);  color: #fce7f3; }

/* ── Backdrop panel (hidden until hover) ── */
.pf10c-back {
    position: absolute; inset: 0; z-index: 3;
    background-size: cover; background-position: center;
    opacity: 0;
    transition: opacity .42s ease;
}
.pf10c-slide:hover .pf10c-back { opacity: 1; }

.pf10c-back-grad {
    position: absolute; inset: 0;
    background:
        linear-gradient(to top,  rgba(5,5,12,.97) 0%, rgba(5,5,12,.65) 40%, rgba(5,5,12,.2) 70%, transparent 100%),
        linear-gradient(to right, rgba(5,5,12,.55) 0%, transparent 52%);
}

/* Crystal shimmer sweep */
.pf10c-shimmer {
    position: absolute;
    top: -60%; left: -60%; width: 220%; height: 220%;
    background: linear-gradient(45deg, transparent 38%, rgba(255,255,255,.07) 50%, transparent 62%);
    transform: rotate(45deg) translateY(-120%);
    transition: transform .7s ease;
    pointer-events: none; z-index: 4;
}
.pf10c-slide:hover .pf10c-shimmer { transform: rotate(45deg) translateY(80%); }

/* ── Info overlay (slides up on hover) ── */
.pf10c-info {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
    padding: 16px 14px;
    display: flex; flex-direction: column; gap: 6px;
    transform: translateY(14px); opacity: 0;
    transition:
        transform .48s cubic-bezier(.165,.84,.44,1) .1s,
        opacity    .38s ease .06s;
}
.pf10c-slide:hover .pf10c-info { transform: translateY(0); opacity: 1; }

.pf10c-rating {
    display: inline-flex; align-items: center; gap: 5px;
    background: linear-gradient(135deg,#fbbf24,#f59e0b);
    color: #1a0a00; font-weight: 900; font-size: 11px;
    padding: 3px 9px; border-radius: 7px; width: fit-content;
    box-shadow: 0 3px 10px rgba(251,191,36,.35);
}
.pf10c-title {
    font-size: 14px; font-weight: 800; color: #fff; margin: 0;
    line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.pf10c-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: rgba(255,255,255,.68); flex-wrap: wrap;
}
.pf10c-stars { color: #fbbf24; letter-spacing: 1px; font-size: 10px; }

/* Description — staggered reveal */
.pf10c-desc {
    font-size: 10.5px; line-height: 1.5; color: rgba(255,255,255,.6); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    opacity: 0; transform: translateY(5px);
    transition: opacity .3s ease .22s, transform .3s ease .22s;
}
.pf10c-slide:hover .pf10c-desc { opacity: 1; transform: translateY(0); }

.pf10c-genres {
    display: flex; flex-wrap: wrap; gap: 4px;
    opacity: 0; transform: translateY(5px);
    transition: opacity .3s ease .3s, transform .3s ease .3s;
}
.pf10c-slide:hover .pf10c-genres { opacity: 1; transform: translateY(0); }
.pf10c-genre {
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.78); font-size: 9px; padding: 2px 8px; border-radius: 20px;
}

/* Action buttons */
.pf10c-actions {
    display: flex; align-items: center; gap: 6px;
    opacity: 0; transform: translateY(6px);
    transition: opacity .3s ease .36s, transform .3s ease .36s;
    padding-top: 3px;
}
.pf10c-slide:hover .pf10c-actions { opacity: 1; transform: translateY(0); }

.pf10c-btn {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,.12); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.85);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .2s; font-family: inherit; text-decoration: none; flex-shrink: 0;
}
.pf10c-btn:hover { background: rgba(255,255,255,.22); color: #fff; transform: scale(1.1); }
.pf10c-fav:hover, .pf10c-fav.active { background: rgba(239,68,68,.3); border-color: rgba(239,68,68,.6); color: #fca5a5; }
.pf10c-fav.active svg { fill: #ef4444; stroke: #ef4444; }
.pf10c-list:hover, .pf10c-list.active { background: rgba(16,185,129,.3); border-color: rgba(16,185,129,.6); color: #6ee7b7; }
.pf10c-info-btn { text-decoration: none; }

/* See all link */
.pf10-see-all {
    font-size: 11px; font-weight: 700; color: rgba(124,58,237,.75);
    text-decoration: none; transition: color .2s; white-space: nowrap;
}
.pf10-see-all:hover { color: #a855f7; }

/* ── Breakpoints — all use CSS var --pf-slide-h for true 2:3 ratio ── */
/* The --pf-slide-h variable is set per breakpoint in the variables block above.
   Width = height × (2/3) everywhere. No pixel overrides. */
@media (max-width: 768px) {
    /* Mobile: no expand on hover, always show title/rating */
    .swiper-slide.pf10c-slide:hover {
        width: calc(var(--pf-slide-h) * 0.6667) !important;
        max-width: none !important;
    }
    .pf10c-slide:hover .pf10c-poster img { transform: scale(1.03); filter: brightness(.72); }
    .pf10c-back { opacity: 1 !important; background-image: none !important; }
    .pf10c-back-grad { background: linear-gradient(to top, rgba(0,0,0,.92) 0%, transparent 48%); }
    .pf10c-info { transform: none !important; opacity: 1 !important; transition: none !important; padding: 7px 6px; }
    .pf10c-title { font-size: 9px !important; -webkit-line-clamp: 1; }
    .pf10c-desc, .pf10c-genres, .pf10c-actions { display: none !important; }
    .pf10c-rating { font-size: 9px; padding: 2px 5px; }
    .pf10c-meta { font-size: 9px; }
}

/* ── Overflow must be visible for expand effect ── */
.pf-sect { overflow: visible !important; }
.pf10-sect { overflow: visible !important; }
.pf10c-slider { overflow: visible !important; }


/* ═══════════════════════════════════════════════════════
   TOP 10 — HBO MAX STYLE
   Tall backdrop cards with big rank number
═══════════════════════════════════════════════════════ */
/* top10 v3.4 removed */

/* ═══ PLATFORM BADGES ═══ */
.pf-platform-badge {
    display: inline-flex; align-items: center; padding: 5px 14px;
    border-radius: 8px; font-size: 14px; font-weight: 900; color: #fff;
    letter-spacing: .5px; box-shadow: 0 4px 16px rgba(0,0,0,.4);
}

/* ═══════════════════════════════════════════════════════
   TRAILER MODAL — Perfectly centered 16:9
═══════════════════════════════════════════════════════ */
.pftr-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.93); z-index: 9800;
    backdrop-filter: blur(8px);
}
.pftr-overlay.open { display: block; }
.pftr-box {
    display: none !important; position: fixed; inset: 0; z-index: 9900;
    align-items: center; justify-content: center; padding: 20px;
}
.pftr-box.open { display: flex !important; }
.pftr-close {
    position: fixed; top: 16px; right: 16px;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
    color: #fff; width: 44px; height: 44px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    z-index: 9910; font-size: 20px; line-height: 1;
    transition: background .2s; font-family: sans-serif;
}
.pftr-close:hover { background: rgba(239,68,68,.5); border-color: rgba(239,68,68,.7); }
#pftr-frame {
    width: 100%;
    max-width: min(92vw, calc(88vh * 16 / 9));
    aspect-ratio: 16 / 9;
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.85);
    border: 1px solid rgba(255,255,255,.1);
}
#pftr-frame iframe { width: 100%; height: 100%; border: none; display: block; }

/* ═══ PFCHIPS Global ═══ */
.pfchips-wrap { position:relative;z-index:5;background:rgba(5,5,10,.75);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.06);padding:12px 0; }
.pfchips-wrap-series { background:rgba(2,14,12,.75); }
.pfchips-wrap-anime  { background:rgba(10,0,20,.75);border-color:rgba(236,72,153,.12); }
.pfchips-slider { overflow:hidden !important; }
.pfchips-center { display:flex !important;justify-content:center; }
.pfchips-slide  { width:auto !important;padding:0 4px; }
.pfchip {
    display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:24px;
    font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer;
    background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.1);color:rgba(255,255,255,.65);
    transition:background .22s,border-color .22s,color .22s,transform .2s,box-shadow .2s;
}
.pfchip:hover,.pfchip.pfchip-active { color:#fff;transform:translateY(-2px); }
.pfchip-dot { width:7px;height:7px;border-radius:50%;flex-shrink:0;transition:transform .2s;opacity:.8; }
.pfchip:hover .pfchip-dot,.pfchip.pfchip-active .pfchip-dot { transform:scale(1.35);opacity:1; }
@keyframes pfChipIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.pfchips-slide{animation:pfChipIn .32s ease both;}
.pfchips-slide:nth-child(1){animation-delay:.02s}.pfchips-slide:nth-child(2){animation-delay:.05s}
.pfchips-slide:nth-child(3){animation-delay:.08s}.pfchips-slide:nth-child(4){animation-delay:.11s}
.pfchips-slide:nth-child(5){animation-delay:.14s}.pfchips-slide:nth-child(6){animation-delay:.17s}
.pfchips-slide:nth-child(7){animation-delay:.20s}.pfchips-slide:nth-child(8){animation-delay:.23s}
.pfchips-slide:nth-child(n+9){animation-delay:.26s}
@media(max-width:900px){.pfchips-center{justify-content:flex-start !important;padding:0 4%}}

/* ═══ Genre banner ═══ */
.pf10-genre-banner{position:relative;overflow:hidden;height:60px;border-radius:0;margin:20px 0 0;border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09);border-left:none;border-right:none;cursor:pointer;transition:all .22s;display:flex;align-items:center;background:linear-gradient(135deg,rgba(0,0,0,.35),rgba(0,0,0,.18))}
.pf10-genre-banner:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.35);border-color:var(--gc,rgba(124,58,237,.5))}
.pf10-gb-content{position:relative;z-index:5;display:flex;align-items:center;gap:12px;padding:0 4%}
.pf10-gb-icon{font-size:1.5rem}
.pf10-gb-name{font-size:15px;font-weight:800;color:#fff}
.pf10-gb-arrow{font-size:14px;color:rgba(255,255,255,.4);margin-left:4px;transition:transform .2s,color .2s}
.pf10-genre-banner:hover .pf10-gb-arrow{transform:translateX(4px);color:#fff}
.pf10-gb-glow{position:absolute;top:-20px;right:-20px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,var(--gc,rgba(124,58,237,.3)) 0%,transparent 70%);opacity:.6;pointer-events:none}
.pf10-gb-particles{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}

/* Specific genre banner colors */
.pfx-action  { border-color: rgba(239,68,68,.3)!important; background: linear-gradient(135deg, rgba(239,68,68,.18), rgba(234,88,12,.08))!important; }
.pfx-horror  { border-color: rgba(107,33,168,.4)!important; background: linear-gradient(135deg, rgba(127,0,0,.25), rgba(10,0,5,.15))!important; }
.pfx-scifi   { border-color: rgba(14,165,233,.3)!important; background: linear-gradient(135deg, rgba(14,165,233,.18), rgba(124,58,237,.08))!important; }
.pfx-romance { border-color: rgba(236,72,153,.3)!important; background: linear-gradient(135deg, rgba(236,72,153,.18), rgba(244,63,94,.08))!important; }
.pfx-comedy  { border-color: rgba(234,179,8,.3)!important;  background: linear-gradient(135deg, rgba(234,179,8,.18),  rgba(249,115,22,.08))!important; }
.pfx-drama   { border-color: rgba(124,58,237,.3)!important; background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(79,70,229,.08))!important; }
.pfx-thriller{ border-color: rgba(29,78,216,.3)!important;  background: linear-gradient(135deg, rgba(30,58,95,.3),  rgba(15,23,42,.15))!important; }
.pfx-crime   { border-color: rgba(75,85,99,.35)!important;  background: linear-gradient(135deg, rgba(55,65,81,.25), rgba(17,24,39,.15))!important; }
.pfx-fantasy { border-color: rgba(167,139,250,.3)!important;background: linear-gradient(135deg, rgba(109,40,217,.2), rgba(139,92,246,.08))!important; }
.pfx-adventure{border-color: rgba(5,150,105,.3)!important; background: linear-gradient(135deg, rgba(5,150,105,.18),  rgba(6,182,212,.08))!important; }
.pfx-animation{border-color: rgba(245,158,11,.3)!important;background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(236,72,153,.08))!important; }
.pfx-family  { border-color: rgba(16,185,129,.3)!important; background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(6,182,212,.08))!important; }
.pfx-default { border-color: rgba(124,58,237,.3)!important; background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(6,182,212,.08))!important; }

/* ═══ pf-sect overflow fix ═══ */
.pf-sect { overflow: visible !important; }
.pf10-sect { overflow: visible !important; }

/* ═══ Genre title bigger on home ═══ */
.pf10-genre-main-title { font-size: 1.6rem !important; font-weight: 900 !important; }

/* ═══ Platform badge ═══ */
.pf-platform-badge { display:inline-flex;align-items:center;padding:5px 14px;border-radius:8px;font-size:14px;font-weight:900;color:#fff;letter-spacing:.5px;box-shadow:0 4px 16px rgba(0,0,0,.4); }

/* ═══════════════════════════════════════════════════════
   TOP 10 — 6 visible, poster 2:3 collapsed, expands horizontal
═══════════════════════════════════════════════════════ */
.pf10-top10-sect .pf10c-slider { padding: 20px 0 28px !important; }
.pf10-top10-sect .pf10c-slide {
    width: calc((95vw - 60px) / 6 + 26px) !important;
    min-width: 140px;
    max-width: 216px !important;
    padding-left: 26px !important;
}
.pf10-top10-sect .pf10c-slide:hover {
    width: calc((95vw - 60px) / 6 * 2.5 + 26px) !important;
    max-width: 486px !important;
}
.pf10-top10-sect .pf10c-card   { padding-bottom: 150% !important; border-radius: 10px !important; }
.pf10-top10-sect .pf10c-title  { font-size: 16px !important; }
.pf10-top10-sect .pf10c-info   { padding: 18px 14px !important; gap: 8px !important; }
@media (max-width: 1100px) {
    .pf10-top10-sect .pf10c-slide       { width: calc((95vw - 40px) / 5 + 22px) !important; padding-left:22px !important; max-width:190px !important; }
    .pf10-top10-sect .pf10c-slide:hover { width: calc((95vw - 40px) / 5 * 2.4 + 22px) !important; max-width:450px !important; }
}
@media (max-width: 768px) {
    .pf10-top10-sect .pf10c-slide       { width: calc((96vw - 24px) / 3 + 16px) !important; max-width:155px !important; padding-left:16px !important; }
    .pf10-top10-sect .pf10c-slide:hover { width: calc((96vw - 24px) / 3 + 16px) !important; max-width:155px !important; }
    .pf10c-rank { font-size: 70px !important; left: -8px !important; }
}


/* ============================================================
   GLOBAL FAV & LIST BUTTON STATES — PrimeFlix v1.3
   Works across all pages: cards, hero, sliders, content, search
   ============================================================ */

/* Fav — active (filled red heart) */
.pf-fav-active,
.pf10c-fav.active,
.pf10-btn-fav.active,
.pfcp-btn-fav.active,
.card-fav-btn.active,
[class*="btn-fav"].active {
  color: #ef4444 !important;
  border-color: rgba(239,68,68,.5) !important;
  background: rgba(239,68,68,.15) !important;
}
.pf-fav-active svg,
.pf10c-fav.active svg,
.pf10-btn-fav.active svg,
.pfcp-btn-fav.active svg,
.card-fav-btn.active svg {
  fill: #ef4444;
  stroke: #ef4444;
}

/* List — active (green checkmark) */
.pf-list-active,
.pf10c-list.active,
.pf10-btn-list.active,
.pfcp-btn-mylist.active,
[class*="btn-list"].active {
  color: #22c55e !important;
  border-color: rgba(34,197,94,.5) !important;
  background: rgba(34,197,94,.12) !important;
}
.pf-list-active svg,
.pf10c-list.active svg,
.pf10-btn-list.active svg,
.pfcp-btn-mylist.active svg {
  stroke: #22c55e;
}

/* Hover states */
.pf10c-fav:hover, .pf10-btn-fav:hover, .pfcp-btn-fav:hover { 
  background: rgba(239,68,68,.12) !important; 
  border-color: rgba(239,68,68,.4) !important;
}
.pf10c-list:hover, .pf10-btn-list:hover, .pfcp-btn-mylist:hover { 
  background: rgba(34,197,94,.1) !important; 
  border-color: rgba(34,197,94,.4) !important;
}

/* ═══════════════════════════════════════════════════════
   PF ADMIN FRONTEND BAR — v3.3
   Barra de admin flotante solo visible para administradores
   ═══════════════════════════════════════════════════════ */

/* Floating admin trigger */
#pf-admin-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99990;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border: 2px solid rgba(168,85,247,.4);
    box-shadow: 0 4px 24px rgba(124,58,237,.5), 0 0 0 0 rgba(124,58,237,.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s, box-shadow .25s;
    animation: pfAdminPulse 3s ease-in-out infinite;
}
#pf-admin-fab:hover {
    transform: scale(1.1) rotate(15deg);
    box-shadow: 0 6px 32px rgba(124,58,237,.7), 0 0 0 8px rgba(124,58,237,.1);
    animation: none;
}
#pf-admin-fab svg { color: #fff; flex-shrink: 0; }
@keyframes pfAdminPulse {
    0%,100% { box-shadow: 0 4px 24px rgba(124,58,237,.5), 0 0 0 0 rgba(124,58,237,.3); }
    50%      { box-shadow: 0 4px 24px rgba(124,58,237,.6), 0 0 0 8px rgba(124,58,237,.05); }
}

/* Tooltip on FAB */
#pf-admin-fab::after {
    content: 'Panel Admin';
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(10,10,18,.95);
    color: #c4b5fd;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    border: 1px solid rgba(124,58,237,.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
#pf-admin-fab:hover::after { opacity: 1; }

/* Admin panel overlay */
#pf-admin-overlay {
    position: fixed;
    inset: 0;
    z-index: 99991;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
#pf-admin-overlay.pf-aov-open {
    opacity: 1;
    pointer-events: all;
}

/* Admin drawer */
#pf-admin-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(680px, 100vw);
    height: 100%;
    z-index: 99992;
    background: linear-gradient(180deg, #0d0d18 0%, #0a0a14 100%);
    border-left: 1px solid rgba(124,58,237,.25);
    box-shadow: -8px 0 60px rgba(0,0,0,.8);
    display: flex;
    flex-direction: column;
    transition: right .35s cubic-bezier(.165,.84,.44,1);
    overflow: hidden;
}
#pf-admin-drawer.pf-adr-open { right: 0; }

/* Drawer header */
.pf-adr-head {
    padding: 20px 24px 16px;
    background: linear-gradient(135deg, rgba(124,58,237,.15), rgba(168,85,247,.08));
    border-bottom: 1px solid rgba(124,58,237,.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.pf-adr-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pf-adr-title-icon {
    width: 36px; height: 36px;
    background: linear-gradient(135deg,#7c3aed,#a855f7);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.pf-adr-title h2 { font-size: 16px; font-weight: 700; color: #e9d5ff; margin: 0; }
.pf-adr-title span { font-size: 11px; color: #7c6d99; }
.pf-adr-close {
    width: 32px; height: 32px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #9090b0;
    transition: background .2s, color .2s;
}
.pf-adr-close:hover { background: rgba(239,68,68,.15); color: #ef4444; border-color: rgba(239,68,68,.3); }

/* Tab nav */
.pf-adr-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    flex-wrap: wrap;
    flex-shrink: 0;
    background: rgba(0,0,0,.2);
}
.pf-adr-tab {
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
    color: #6b6b8a;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .2s;
    white-space: nowrap;
}
.pf-adr-tab:hover { color: #c4b5fd; background: rgba(124,58,237,.1); }
.pf-adr-tab.active {
    color: #e9d5ff;
    background: rgba(124,58,237,.2);
    border-color: rgba(124,58,237,.35);
}

/* Tab panels */
.pf-adr-body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(124,58,237,.3) transparent;
}
.pf-adr-body::-webkit-scrollbar { width: 4px; }
.pf-adr-body::-webkit-scrollbar-track { background: transparent; }
.pf-adr-body::-webkit-scrollbar-thumb { background: rgba(124,58,237,.3); border-radius: 4px; }

.pf-adr-panel { display: none; padding: 20px 24px; }
.pf-adr-panel.active { display: block; }

/* Form field groups */
.pf-af-group {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}
.pf-af-group-title {
    font-size: 11px;
    font-weight: 700;
    color: #7c6d99;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 12px;
    display: flex; align-items: center; gap: 6px;
}
.pf-af-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
.pf-af-row.full { grid-template-columns: 1fr; }
.pf-af-field { display: flex; flex-direction: column; gap: 5px; }
.pf-af-label {
    font-size: 11px;
    font-weight: 600;
    color: #8080a0;
}
.pf-af-input, .pf-af-select, .pf-af-textarea {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    color: #e8e8f8;
    font-size: 12px;
    padding: 8px 10px;
    outline: none;
    transition: border-color .2s, background .2s;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}
.pf-af-input:focus, .pf-af-select:focus, .pf-af-textarea:focus {
    border-color: rgba(124,58,237,.5);
    background: rgba(124,58,237,.06);
}
.pf-af-textarea { resize: vertical; min-height: 70px; }
.pf-af-select { cursor: pointer; }

/* Toggle switch */
.pf-af-toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.pf-af-toggle-wrap:last-child { border-bottom: none; padding-bottom: 0; }
.pf-af-toggle-label { font-size: 12px; color: #c4b5fd; font-weight: 500; }
.pf-af-toggle-desc { font-size: 10px; color: #5a5a78; margin-top: 2px; }
.pf-af-toggle {
    position: relative;
    width: 38px; height: 20px;
    flex-shrink: 0;
}
.pf-af-toggle input { display: none; }
.pf-af-toggle-slider {
    position: absolute; inset: 0;
    background: rgba(255,255,255,.08);
    border-radius: 10px;
    cursor: pointer;
    transition: background .25s;
    border: 1px solid rgba(255,255,255,.1);
}
.pf-af-toggle-slider::after {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    top: 2px; left: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform .25s;
}
.pf-af-toggle input:checked + .pf-af-toggle-slider {
    background: linear-gradient(90deg,#7c3aed,#a855f7);
    border-color: transparent;
}
.pf-af-toggle input:checked + .pf-af-toggle-slider::after {
    transform: translateX(18px);
}

/* Save button */
.pf-af-footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(255,255,255,.07);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    background: rgba(0,0,0,.2);
}
.pf-af-save {
    flex: 1;
    padding: 10px 20px;
    background: linear-gradient(90deg,#7c3aed,#a855f7);
    border: none;
    border-radius: 9px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s, transform .15s;
    letter-spacing: .02em;
}
.pf-af-save:hover { opacity: .9; transform: translateY(-1px); }
.pf-af-save:active { transform: translateY(0); }
.pf-af-goto {
    padding: 10px 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;
    color: #9090b0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, color .2s;
    white-space: nowrap;
}
.pf-af-goto:hover { background: rgba(255,255,255,.1); color: #e8e8f8; }

/* Status message */
.pf-af-status {
    font-size: 11px;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
    transition: opacity .3s;
}
.pf-af-status.ok  { background: rgba(34,197,94,.1); color: #4ade80; border: 1px solid rgba(34,197,94,.2); }
.pf-af-status.err { background: rgba(239,68,68,.1);  color: #f87171; border: 1px solid rgba(239,68,68,.2);  }

/* Quick action buttons */
.pf-af-quick-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}
.pf-af-qbtn {
    padding: 10px 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;
    color: #c4b5fd;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all .2s;
    text-decoration: none;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.pf-af-qbtn:hover { background: rgba(124,58,237,.12); border-color: rgba(124,58,237,.3); color: #e9d5ff; }
.pf-af-qbtn span { font-size: 16px; }

/* Maintenance toggle special */
.pf-af-maintenance {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px;
    background: rgba(239,68,68,.06);
    border: 1px solid rgba(239,68,68,.15);
    border-radius: 10px;
    margin-bottom: 14px;
}
.pf-af-maintenance label { font-size: 12px; color: #fca5a5; font-weight: 600; }

/* Responsive */
@media (max-width: 480px) {
    #pf-admin-drawer { width: 100vw; }
    .pf-af-row { grid-template-columns: 1fr; }
    .pf-af-quick-btns { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   PERFORMANCE HINTS v3.3
   GPU compositing only where needed, content-visibility
   for off-screen sections, contain for slider sections.
   ═══════════════════════════════════════════════════════ */

/* Off-screen sections: skip paint/layout until near viewport */
.pf10-sect {
    content-visibility: auto;
    contain-intrinsic-size: 0 360px; /* approximate height */
}

/* Force GPU layer only when card is being hovered */
.pf10c-slide:hover .pf10c-card {
    will-change: transform;
}
/* Remove will-change after transition ends to free GPU memory */
.pf10c-card {
    will-change: auto;
    /* Prevent layout recalculation from siblings during expand */
    contain: layout style;
}

/* Slider wrapper: isolate stacking context */
.pf10c-slider {
    isolation: isolate;
}

/* Images: GPU decode off main thread */
.pf10c-poster img,
.pf-card-img,
.pfhc-img img {
    decoding: async; /* handled via PHP filter, this is a hint */
    content-visibility: auto;
}

/* Smooth scrolling for all scroll containers */
.pf10c-slider .swiper-wrapper,
.pf-slider-track {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Reduce repaints on navbar during scroll */
#pf-navbar {
    will-change: transform;
    backface-visibility: hidden;
}

/* ═══════════════════════════════════════════════════════
   UNIFIED HERO — pf-uhero v3.4
   All pages: home, movies, series, anime share this CSS
   Nav buttons RIGHT · Poster far right · In-hero trailer
   ═══════════════════════════════════════════════════════ */

.pf-uhero {
    position: relative;
    width: 100%;
    height: 88vh;
    min-height: 560px;
    overflow: hidden;
    background: #05050a;
}

/* Slides */
.pf-uhero-slide {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease;
}
.pf-uhero-slide.pf-uhero-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

/* Background */
.pf-uhero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 22%;
    transform: scale(1);
    transition: transform 12s cubic-bezier(.25,.46,.45,.94);
}
.pf-uhero-slide.pf-uhero-active .pf-uhero-bg { transform: scale(1.07); }

/* Overlay gradient */
.pf-uhero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(105deg, rgba(5,5,10,.97) 0%, rgba(5,5,10,.78) 38%, rgba(5,5,10,.18) 70%, transparent 90%),
        linear-gradient(to top,  rgba(5,5,10,.97) 0%, rgba(5,5,10,.4) 40%, transparent 70%);
}

/* Particle canvas */
.pf-uhero-canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* Desktop warp-speed ring over the background, around the hero */
.pf-uhero-warp {
    position: absolute;
    inset: -2%;
    width: 104%;
    height: 104%;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    transition: opacity .8s ease;
    filter: saturate(1.08) brightness(1.02);
}
.pf-uhero-slide.pf-uhero-active .pf-uhero-warp { opacity: .92; }
.pf-uhero-warp-fallback {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at center, transparent 0 57%, rgba(124,58,237,.07) 63%, rgba(124,58,237,.14) 72%, rgba(255,255,255,.12) 80%, transparent 100%),
        conic-gradient(from 0deg, transparent 0deg 12deg, rgba(255,255,255,.12) 24deg, transparent 40deg 58deg, rgba(168,85,247,.15) 76deg, transparent 92deg 124deg, rgba(255,255,255,.09) 145deg, transparent 172deg 232deg, rgba(59,130,246,.11) 254deg, transparent 286deg 360deg);
    filter: blur(18px) saturate(1.1);
    animation: pfWarpHaloSpin 22s linear infinite;
}
.pf-uhero-slide.pf-uhero-active .pf-uhero-warp-fallback { opacity: .42; }
@keyframes pfWarpHaloSpin { from { transform: rotate(0deg) scale(1.02); } to { transform: rotate(360deg) scale(1.08); } }

/* Content area */
.pf-uhero-content {
    position: absolute;
    bottom: 13%;
    left: 5%;
    max-width: 540px;
    z-index: 10;
}
.pf-uhero-slide .pf-uhero-pills,
.pf-uhero-slide .pf-uhero-title,
.pf-uhero-slide .pf-uhero-genres,
.pf-uhero-slide .pf-uhero-ov,
.pf-uhero-slide .pf-uhero-actions {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.34,1.2,.64,1);
}
.pf-uhero-slide.pf-uhero-active .pf-uhero-pills    { opacity:1; transform:none; transition-delay:.08s; }
.pf-uhero-slide.pf-uhero-active .pf-uhero-title    { opacity:1; transform:none; transition-delay:.2s; }
.pf-uhero-slide.pf-uhero-active .pf-uhero-genres   { opacity:1; transform:none; transition-delay:.30s; }
.pf-uhero-slide.pf-uhero-active .pf-uhero-ov       { opacity:1; transform:none; transition-delay:.38s; }
.pf-uhero-slide.pf-uhero-active .pf-uhero-actions  { opacity:1; transform:none; transition-delay:.47s; }

/* Pills */
.pf-uhero-pills { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
.pf-uhero-pill  { display:inline-flex; align-items:center; padding:4px 12px; border-radius:20px; font-size:11px; font-weight:700; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.75); }
.pf-uhero-pill-movie   { background:rgba(124,58,237,.22); border-color:rgba(124,58,237,.4); color:#c4b5fd; }
.pf-uhero-pill-serie   { background:rgba(16,185,129,.18); border-color:rgba(16,185,129,.35); color:#6ee7b7; }
.pf-uhero-pill-anime   { background:rgba(236,72,153,.18); border-color:rgba(236,72,153,.35); color:#f9a8d4; }
.pf-uhero-pill-rating  { background:rgba(234,179,8,.14); border-color:rgba(234,179,8,.3); color:#fde68a; }
.pf-uhero-pill-label   { background:rgba(6,182,212,.12); border-color:rgba(6,182,212,.3); color:#67e8f9; }

/* Title */
.pf-uhero-title {
    font-size: clamp(2rem, 4.5vw, 3.8rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 12px;
    line-height: 1.06;
    letter-spacing: -.4px;
    text-shadow: 0 3px 28px rgba(0,0,0,.7);
}

/* Genres */
.pf-uhero-genres { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px; }
.pf-uhero-genre  { padding:3px 10px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:20px; font-size:11px; color:rgba(255,255,255,.68); }

/* Overview */
.pf-uhero-ov {
    font-size: 13.5px;
    line-height: 1.7;
    color: rgba(255,255,255,.7);
    max-width: 500px;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Action buttons */
.pf-uhero-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.pf-uhero-btn-play {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--pf-accent, #7c3aed); color: #fff;
    border: none; border-radius: 50px; padding: 12px 26px;
    font-size: 14px; font-weight: 700; cursor: pointer;
    text-decoration: none; font-family: inherit;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 5px 22px rgba(124,58,237,.45);
}
.pf-uhero-btn-play:hover { transform: translateY(-3px) scale(1.03); color: #fff; box-shadow: 0 8px 28px rgba(124,58,237,.6); }
.pf-uhero-btn-trailer {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.1); color: #fff;
    border: 1px solid rgba(255,255,255,.25); border-radius: 50px;
    padding: 11px 20px; font-size: 13px; font-weight: 700;
    cursor: pointer; font-family: inherit; transition: background .2s, border-color .2s;
}
.pf-uhero-btn-trailer:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); }
.pf-uhero-btn-info {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.1); color: rgba(255,255,255,.88);
    border: 1px solid rgba(255,255,255,.22); border-radius: 50px;
    padding: 11px 20px; font-size: 13px; font-weight: 700;
    cursor: pointer; text-decoration: none; font-family: inherit;
    transition: background .2s, color .2s;
    backdrop-filter: blur(8px);
}
.pf-uhero-btn-info:hover { background: rgba(255,255,255,.2); color: #fff; }
.pf-uhero-btn-icon {
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.1); color: rgba(255,255,255,.8);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .2s, color .2s;
    font-family: inherit;
}
.pf-uhero-btn-icon:hover { background: rgba(255,255,255,.2); color: #fff; }

/* Poster — far RIGHT */
.pf-uhero-poster {
    position: absolute;
    right: 7%;
    bottom: 9%;
    z-index: 8;
    opacity: 0;
    transform: translateY(22px) scale(.94);
    transition: opacity .65s ease .6s, transform .65s cubic-bezier(.34,1.2,.64,1) .6s;
    pointer-events: none;
    filter: drop-shadow(0 22px 50px rgba(0,0,0,.75));
}
.pf-uhero-slide.pf-uhero-active .pf-uhero-poster { opacity: 1; transform: none; }
.pf-uhero-poster img {
    width: clamp(110px, 10vw, 165px);
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,.12);
    display: block;
}

/* ── Navigation — RIGHT side ── */
.pf-uhero-nav-wrap {
    position: absolute;
    right: 5%;
    bottom: 46px;
    z-index: 20;
    display: flex;
    gap: 10px;
    align-items: center;
}
.pf-uhero-nav {
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, border-color .2s, transform .15s;
}
.pf-uhero-nav:hover {
    background: rgba(124,58,237,.4);
    border-color: rgba(124,58,237,.7);
    transform: scale(1.1);
}

/* Dots — bottom right, before nav */
.pf-uhero-dots {
    position: absolute;
    right: calc(5% + 104px);
    bottom: 56px;
    z-index: 20;
    display: flex;
    gap: 6px;
    align-items: center;
}
.pf-uhero-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,.3);
    border: none; cursor: pointer;
    transition: all .25s; padding: 0;
}
.pf-uhero-dot-active {
    background: var(--pf-accent, #7c3aed);
    width: 20px; border-radius: 4px;
}

/* Progress bar */
.pf-uhero-progress {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,.07);
    z-index: 20;
}
.pf-uhero-bar {
    height: 100%;
    background: var(--pf-accent, #7c3aed);
    width: 0;
    transition: none;
}

/* ── In-hero trailer box ── */
.pf-uhero-trailer-box {
    position: absolute;
    inset: 0;
    z-index: 15;
    background: #000;
    display: none;
    align-items: center;
    justify-content: center;
}
.pf-uhero-trailer-box.pf-ht-open { display: flex; }
.pf-uhero-trailer-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}
.pf-uhero-trailer-close {
    position: absolute;
    top: 18px; right: 18px;
    z-index: 20;
    display: flex; align-items: center; gap: 8px;
    background: rgba(0,0,0,.75);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    border-radius: 50px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    backdrop-filter: blur(10px);
    transition: background .2s;
}
.pf-uhero-trailer-close:hover { background: rgba(239,68,68,.35); border-color: rgba(239,68,68,.5); }

/* Desktop-only elements */
.pf-uhero-desktop-only { display: inline-flex; }
@media (max-width: 768px) {
    .pf-uhero-desktop-only { display: none !important; }
}

/* ── Mobile responsive ── */
@media (max-width: 900px) {
    .pf-uhero-poster { display: none; }
}
@media (max-width: 768px) {
    .pf-uhero { height: 74vh; min-height: 460px; }
    .pf-uhero-content { bottom: 9%; left: 5%; right: 5%; max-width: 100%; }
    .pf-uhero-title { font-size: 1.7rem; }
    .pf-uhero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .pf-uhero-btn-play { width: 100%; justify-content: center; padding: 13px 20px; font-size: 15px; }
    .pf-uhero-btn-info { justify-content: center; }
    .pf-uhero-dots { right: auto; left: 5%; bottom: 30px; }
    .pf-uhero-nav-wrap { bottom: 22px; }
}

/* ═══════════════════════════════════════════════════════
   SLIDERS — Full width, 10mm bevels, centered v3.4
   ═══════════════════════════════════════════════════════ */

/* Section wrapper: truly full width */
.pf-sect {
    overflow: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.pf-sect-head {
    padding-left: 4%;
    padding-right: 4%;
}

/* The slider wrapper is full-width; JS adds padding (bevels) */
.pf10c-slider {
    width: 100% !important;
    overflow: visible !important;
    padding: 16px 0 32px !important;
}

/* Platform logo badge on cards */
.pf-card-platform {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 6;
    height: 20px;
    max-width: 52px;
    border-radius: 4px;
    background: rgba(0,0,0,.75);
    padding: 2px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .3px;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
}
.pf10c-slide:hover .pf-card-platform { opacity: 1; }

/* Platform colors */
.pf-plat-netflix    { color: #e50914; border: 1px solid rgba(229,9,20,.4); }
.pf-plat-disney     { color: #0063e5; border: 1px solid rgba(0,99,229,.4); }
.pf-plat-hbo        { color: #9b59b6; border: 1px solid rgba(155,89,182,.4); }
.pf-plat-prime      { color: #00a8e0; border: 1px solid rgba(0,168,224,.4); }
.pf-plat-paramount  { color: #0064ff; border: 1px solid rgba(0,100,255,.4); }
.pf-plat-appletv    { color: #e8e8e8; border: 1px solid rgba(255,255,255,.25); }
.pf-plat-crunchyroll{ color: #f47521; border: 1px solid rgba(244,117,33,.4); }

/* Section header platform logo */
.pf-platform-logo-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pf-platform-logo-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .3px;
}

/* Top 10 rank numbers */
/* rank old removed */

/* Countdown badge */
.pf-countdown-badge {
    font-size: 11px;
    background: linear-gradient(135deg, #f97316, #ef4444);
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 700;
    color: #fff;
    margin-left: 8px;
    vertical-align: middle;
    white-space: nowrap;
}
.pf-countdown-badge.badge-blue {
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
}

/* ═══════════════════════════════════════════════════════
   v3.5 — Platform Icons Row, Genre fixes, Mobile nav
   ═══════════════════════════════════════════════════════ */

/* ── Platform Icons Row (desktop only, between hero and sliders) ── */
.pf-platforms-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* Full width with 38px (~10mm) side bevels */
    width: 100%;
    padding: 16px 38px;
    box-sizing: border-box;
    background: linear-gradient(to bottom, rgba(5,5,10,.95), rgba(10,10,16,.9));
    border-bottom: 1px solid rgba(255,255,255,.06);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.pf-platforms-row::-webkit-scrollbar { display: none; }
.pf-desktop-only { display: flex; }
@media (max-width: 768px) { .pf-desktop-only { display: none !important; } }

.pf-plat-icon-card {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Flex grow so cards fill the full row evenly */
    flex: 1 1 0;
    min-width: 100px;
    max-width: 180px;
    height: 56px;
    border-radius: 10px;
    background: var(--plat-bg, #111);
    border: 1px solid rgba(255,255,255,.1);
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    position: relative;
    overflow: hidden;
}
.pf-plat-icon-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--plat-color, #fff) 0%, transparent 80%);
    opacity: .05;
    transition: opacity .2s;
}
.pf-plat-icon-card:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 28px rgba(0,0,0,.5), 0 0 0 1px var(--plat-color, #fff) inset;
    border-color: var(--plat-color, rgba(255,255,255,.3));
}
.pf-plat-icon-card:hover::before { opacity: .12; }
.pf-plat-icon-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0 16px;
}
.pf-plat-icon-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .4px;
    white-space: nowrap;
    text-transform: uppercase;
}

/* Platform-specific styling */
.pf-plat-icon-netflix .pf-plat-icon-label  { font-size: 15px; letter-spacing: -.5px; }
.pf-plat-icon-disney .pf-plat-icon-label   { font-style: italic; }
.pf-plat-icon-appletv .pf-plat-icon-label  { font-weight: 300; letter-spacing: .8px; }

/* ── Section bar: ONE only (span.pf-sect-bar inside h2 title) ── */
.pf-sect-head > div > div[style*="width:4px"],
.pf-sect-head > div > div[style*="width: 4px"] {
    display: none !important;
}

/* ── Hide slider nav buttons on mobile ── */
@media (max-width: 768px) {
    .pf-sect-nav,
    .pfn-btn,
    .pfn-prev,
    .pfn-next,
    .pf-uhero-nav-wrap,
    .pf-uhero-dots {
        display: none !important;
    }
}

/* ── Genre banner: full width with visible borders ── */
.pf10-genre-banner {
    margin: 20px 0 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
/* Small bevel so content doesn't touch edges */
.pf10-gb-content {
    padding: 0 4% !important;
}
/* Genre slider immediately after banner: no extra top margin */
.pf10-sect-genre {
    margin-top: 0 !important;
}
.pf10-sect-genre .pf10c-slider {
    padding-top: 10px !important;
}
/* Genre nav floating top-right of slider, not header */
.pf-sect-genre-nav {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 8px 4% 0;
}
@media (max-width: 768px) {
    .pf-sect-genre-nav { display: none !important; }
}

/* ── Genres header block ── */
.pf-genres-header {
    padding-top: 28px !important;
    padding-bottom: 0 !important;
}

/* top10 CSS consolidated below */

/* ── Trending countdown badge in title ── */
.pf-sect-title .pf-countdown-badge {
    font-size: 10px;
    padding: 2px 8px;
    vertical-align: middle;
    margin-left: 6px;
}

/* ── Continue watching: remove extra bar ── */
.pf-continue-sect .pf-sect-title {
    gap: 10px;
}

/* ── Platform logo text styles ── */
.pf-plat-logo {
    display: block;
    font-weight: 900;
    letter-spacing: .5px;
    white-space: nowrap;
    color: var(--plat-color, #fff);
    font-size: 13px;
    text-transform: uppercase;
    transition: filter .2s;
}
.pf-plat-icon-card:hover .pf-plat-logo {
    filter: brightness(1.2);
}
/* Per-platform font tweaks */
.pf-plat-netflix    { font-size: 16px; letter-spacing: -.5px; font-style: italic; }
.pf-plat-disney     { font-size: 14px; font-style: italic; letter-spacing: -.2px; }
.pf-plat-hbo        { font-size: 18px; font-weight: 300; letter-spacing: 3px; }
.pf-plat-appletv    { font-size: 13px; font-weight: 300; letter-spacing: 1px; }
.pf-plat-crunchyroll{ font-size: 9px; letter-spacing: .8px; }
.pf-plat-prime      { font-size: 14px; font-weight: 400; letter-spacing: -.2px; font-style: italic; color: #00a8e0; }
.pf-plat-paramount  { font-size: 10px; letter-spacing: .3px; }

/* ═══════════════════════════════════════════════════════
   TOP 10 — v3.5 FINAL
   Same poster 2:3 size as normal sliders.
   Rank number: 70% overlaps the poster, 30% in the gap.
   The slide padding-left creates the gap; rank sits
   at left edge of card overlapping 70% onto it.
   ═══════════════════════════════════════════════════════ */

/* Rank number — the single definition */
.pf10c-rank {
    position: absolute;
    /* 
     * Positioned relative to the .pf10c-slide
     * left: 0 = at the left edge of the slide (= the gap area)
     * The number is wide enough that ~70% overlaps the card
     * and ~30% sits in the padding-left gap.
     * We use left: 0 and let the number naturally overflow into the card.
     */
    left: 0;
    bottom: 4px;
    z-index: 12;
    pointer-events: none;
    font-family: 'Arial Black', Impact, 'Arial Narrow', sans-serif;
    font-size: clamp(70px, 10vw, 120px);
    font-weight: 900;
    line-height: .82;
    /* Gradient text */
    color: transparent;
    background: linear-gradient(160deg, #3b82f6 0%, #8b5cf6 55%, #6d28d9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,.95)) drop-shadow(0 0 8px rgba(0,0,0,.8));
    transition: opacity .4s ease, transform .4s ease;
    /* Prevent it from taking layout space */
    user-select: none;
}

/* Top 10 section: same card dimensions as normal sliders */
.pf10-top10-sect {
    overflow: visible !important;
    position: relative;
    z-index: 1;
    isolation: isolate;
}
.pf10-top10-sect .pf10c-slider {
    overflow: visible !important;
    padding: 16px 0 32px !important;
}

/*
 * Top10 slide:
 * - Same height as normal (--pf-slide-h)
 * - padding-left = gap where 30% of rank number shows
 *   Gap = ~40% of font-size. At font-size 100px → gap ≈ 40px
 *   We use a fixed gap of 44px (between 38px bevel and card)
 */
.pf10-top10-sect .pf10c-slide,
.pf10-top10-sect .swiper-slide.pf10c-slide {
    height: var(--pf-slide-h, 260px) !important;
    padding-left: 44px !important;   /* the gap = 30% of number */
    position: relative;
    overflow: visible !important;
}

/* Card: same 2:3 proportions */
.pf10-top10-sect .swiper-slide.pf10c-slide {
    /* card width = height × (2/3), card takes up the right part after padding */
    width: calc(var(--pf-slide-h, 260px) * 0.6667 + 44px) !important;
    min-width: 130px !important;
    max-width: 280px !important;
    transition: width .48s cubic-bezier(.165,.84,.44,1) !important;
}
.pf10-top10-sect .swiper-slide.pf10c-slide:hover {
    /* 16:9 on hover */
    width: calc(var(--pf-slide-h, 260px) * 1.7778 + 44px) !important;
    max-width: 720px !important;
}

/* On hover, fade out rank so backdrop is visible */
.pf10-top10-sect .pf10c-slide:hover .pf10c-rank {
    opacity: .06;
    transform: translateX(-8px) scale(.85);
}

/* The actual .pf10c-card starts after the padding */
.pf10-top10-sect .pf10c-card {
    border-radius: 10px;
    /* card fills 100% of the padded area */
}

/* Rank label inside hover info */
.pf10c-rank-label {
    font-size: 11px;
    color: rgba(255,255,255,.45);
    font-style: italic;
}

/* Responsive */
@media (max-width: 1100px) {
    .pf10c-rank { font-size: clamp(60px, 9vw, 100px); }
    .pf10-top10-sect .swiper-slide.pf10c-slide {
        padding-left: 38px !important;
        width: calc(var(--pf-slide-h, 235px) * 0.6667 + 38px) !important;
        max-width: 250px !important;
    }
}
@media (max-width: 768px) {
    .pf10c-rank { font-size: clamp(50px, 14vw, 80px); }
    .pf10-top10-sect .swiper-slide.pf10c-slide {
        padding-left: 30px !important;
        width: calc(var(--pf-slide-h, 215px) * 0.6667 + 30px) !important;
        max-width: 200px !important;
    }
    .pf10-top10-sect .swiper-slide.pf10c-slide:hover {
        /* No expand on mobile */
        width: calc(var(--pf-slide-h, 215px) * 0.6667 + 30px) !important;
    }
}

/* ═══ LOGO — smaller on mobile v3.5.2 ═══ */
@media (max-width: 768px) {
    .pf-logo-text {
        font-size: 1.1rem !important;
    }
    .pf-logo-img {
        height: 24px !important;
    }
    .pf-nav-logo {
        margin-right: 0 !important;
    }
}

/* ═══ PLAN BADGE — Profile v3.5.2 ═══ */
.pf-plan-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .3px !important;
    text-transform: uppercase !important;
    position: static !important;
    transform: none !important;
    left: auto !important;
}
.pf-plan-icon { font-size: 13px; }
.pf-plan-free      { color: #9ca3af !important; background: rgba(156,163,175,.12) !important; border-color: rgba(156,163,175,.25) !important; }
.pf-plan-plus      { color: #60a5fa !important; background: rgba(59,130,246,.15) !important; border-color: rgba(59,130,246,.3) !important; }
.pf-plan-pro       { color: #c084fc !important; background: rgba(168,85,247,.15) !important; border-color: rgba(168,85,247,.3) !important; }
.pf-plan-vip       { color: #fbbf24 !important; background: rgba(245,158,11,.15) !important; border-color: rgba(245,158,11,.3) !important;
                     box-shadow: 0 0 12px rgba(245,158,11,.2); }

/* Plan badge in navbar dropdown */
.pf-ud-plan {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* Mobile online indicator compact */
@media (max-width: 960px) {
    .pf-online-wrap {
        padding: 4px 8px !important;
        font-size: 11px !important;
        gap: 4px !important;
    }
    .pf-online-label { display: none !important; }
    .pf-online-count { font-size: 11px !important; }
}

/* ═══ VERIFIED BADGE + PLAN SUP v3.5.5 ═══ */
.pf-verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 7px;
    color: #60a5fa;
    vertical-align: middle;
    position: relative;
    cursor: default;
    /* Animated glow */
    animation: pfVerifiedPulse 3s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(96,165,250,.6));
}
.pf-verified-badge svg { display: block; }
.pf-verified-badge:hover {
    animation: pfVerifiedSpin 1s ease-in-out;
    filter: drop-shadow(0 0 10px rgba(96,165,250,.9));
}
@keyframes pfVerifiedPulse {
    0%,100% { filter: drop-shadow(0 0 4px rgba(96,165,250,.5)); opacity: 1; }
    50%      { filter: drop-shadow(0 0 10px rgba(96,165,250,.9)); opacity: .9; }
}
@keyframes pfVerifiedSpin {
    0%   { transform: scale(1) rotate(0deg); }
    40%  { transform: scale(1.3) rotate(20deg); }
    70%  { transform: scale(1.1) rotate(-10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* VIP gets gold badge */
.pf-plan-vip ~ .pf-verified-badge,
.pf-profile-name .pf-verified-badge {
    /* Color set dynamically; default blue for plus, purple for pro */
}
/* Gold for VIP — applied via JS class or parent */
.pf-plan-vip-user .pf-verified-badge { color: #fbbf24; animation-name: pfVerifiedPulseGold; filter: drop-shadow(0 0 6px rgba(251,191,36,.6)); }
.pf-plan-pro-user .pf-verified-badge { color: #c084fc; filter: drop-shadow(0 0 6px rgba(192,132,252,.6)); }
@keyframes pfVerifiedPulseGold {
    0%,100% { filter: drop-shadow(0 0 4px rgba(251,191,36,.5)); }
    50%      { filter: drop-shadow(0 0 12px rgba(251,191,36,.9)); }
}

/* Small version for navbar dropdown */
.pf-verified-sm {
    width: 14px !important;
    height: 14px !important;
    margin-left: 5px;
    animation: pfVerifiedPulse 3s ease-in-out infinite;
    color: #60a5fa;
    filter: drop-shadow(0 0 4px rgba(96,165,250,.6));
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* Plan badge superscript letters */
.pf-plan-sup {
    font-size: .72em;
    vertical-align: super;
    margin-left: 1px;
    font-weight: 900;
    letter-spacing: .5px;
}

/* Plan badge — override position for profile context */
.pf-plan-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 13px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    letter-spacing: .2px;
}

/* Platform row: ensure flex evenly on wide screens */
@media (min-width: 1200px) {
    .pf-plat-icon-card { max-width: 200px; }
}
@media (max-width: 960px) {
    .pf-platforms-row { padding: 12px 20px; gap: 8px; }
    .pf-plat-icon-card { height: 48px; min-width: 80px; }
    .pf-plat-logo { font-size: 10px !important; }
}

/* ============================================================
   MEJORAS MÓVIL - PÁGINA DE INICIO
   Aplica SOLO en dispositivos ≤ 768px
   ============================================================ */

/* ──────────────────────────────────────────────────────────────
   1. HERO UNIFICADO (pf-uhero) — móvil mejorado
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Altura óptima: ocupa casi toda la pantalla visible */
    .pf-uhero {
        height: 88vh !important;
        min-height: 520px !important;
        max-height: 700px !important;
    }

    /* Fondo: posición mejorada para retratos */
    .pf-uhero-bg {
        background-position: center 15% !important;
    }

    /* Overlay más profundo para legibilidad del texto */
    .pf-uhero-slide::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to top,
            rgba(3,3,10,1) 0%,
            rgba(3,3,10,0.85) 35%,
            rgba(3,3,10,0.4) 60%,
            rgba(3,3,10,0.15) 100%
        );
        z-index: 1;
        pointer-events: none;
    }

    /* Contenido: posicionado en la parte inferior con buen padding */
    .pf-uhero-content {
        bottom: 6% !important;
        left: 0 !important;
        right: 0 !important;
        max-width: 100% !important;
        padding: 0 20px 16px !important;
        z-index: 2 !important;
    }

    /* Pills/etiquetas: más pequeñas y compactas */
    .pf-uhero-pills {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
    }
    .pf-uhero-pill {
        font-size: 10px !important;
        padding: 4px 10px !important;
        border-radius: 20px !important;
    }

    /* Título: grande e impactante */
    .pf-uhero-title {
        font-size: 2.1rem !important;
        line-height: 1.08 !important;
        margin-bottom: 8px !important;
        letter-spacing: -0.5px !important;
        text-shadow: 0 2px 12px rgba(0,0,0,0.7) !important;
    }

    /* Géneros: scroll horizontal suave */
    .pf-uhero-genres {
        display: flex !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        margin-bottom: 8px !important;
        padding-bottom: 2px !important;
    }
    .pf-uhero-genres::-webkit-scrollbar { display: none !important; }
    .pf-uhero-genre {
        font-size: 10px !important;
        padding: 3px 10px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Descripción: 3 líneas, legible */
    .pf-uhero-ov {
        font-size: 0.82rem !important;
        -webkit-line-clamp: 3 !important;
        line-height: 1.55 !important;
        margin-bottom: 14px !important;
        color: rgba(255,255,255,0.78) !important;
    }

    /* Botones: apilados verticalmente, full-width */
    .pf-uhero-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    /* Botón "Ver Ahora": prominente y llamativo */
    .pf-uhero-btn-play {
        flex: 1 !important;
        justify-content: center !important;
        padding: 13px 16px !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        border-radius: 10px !important;
        letter-spacing: 0.2px !important;
        min-height: 48px !important;
    }

    /* Botón "Más Info": secundario compacto */
    .pf-uhero-btn-info {
        justify-content: center !important;
        padding: 13px 14px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
        min-height: 48px !important;
        white-space: nowrap !important;
    }

    /* Botón lista (ícono): cuadrado, táctil */
    .pf-uhero-btn-icon {
        width: 48px !important;
        height: 48px !important;
        flex-shrink: 0 !important;
        border-radius: 10px !important;
    }

    /* Indicadores (dots): VISIBLES en móvil */
    .pf-uhero-dots {
        display: flex !important;
        bottom: 14px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
        gap: 6px !important;
        z-index: 10 !important;
    }
    .pf-uhero-dot {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,0.3) !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        transition: all 0.3s !important;
    }
    .pf-uhero-dot-active,
    .pf-uhero-dot.pf-uhero-dot-active {
        width: 22px !important;
        border-radius: 4px !important;
        background: var(--pf-accent, #7c3aed) !important;
    }

    /* Barra de progreso: visible */
    .pf-uhero-progress {
        height: 2px !important;
    }

    /* Canvas de partículas: más sutil en móvil */
    .pf-uhero-canvas {
        opacity: 0.5 !important;
    }
}

/* Pantallas muy pequeñas (≤480px) */
@media (max-width: 480px) {
    .pf-uhero {
        height: 90vh !important;
        min-height: 500px !important;
    }
    .pf-uhero-title {
        font-size: 1.75rem !important;
    }
    .pf-uhero-ov {
        -webkit-line-clamp: 2 !important;
        font-size: 0.78rem !important;
    }
    .pf-uhero-content {
        padding: 0 16px 14px !important;
    }
    .pf-uhero-btn-play {
        font-size: 13px !important;
        padding: 12px 14px !important;
        min-height: 44px !important;
    }
    .pf-uhero-btn-info {
        font-size: 12px !important;
        padding: 12px 12px !important;
        min-height: 44px !important;
    }
    .pf-uhero-btn-icon {
        width: 44px !important;
        height: 44px !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   2. NAVBAR SUPERIOR — más compacto y limpio en móvil
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    #pf-navbar {
        padding: 0 14px !important;
        height: 56px !important;
    }
    .pf-nav-logo {
        gap: 8px !important;
    }
    .pf-logo-text {
        font-size: 1.05rem !important;
        font-weight: 900 !important;
    }
    /* Búsqueda: icono táctil grande */
    .pf-search-trigger {
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* Expansión del buscador */
    .pf-search-expanded {
        width: 90vw !important;
        right: -10px !important;
        top: 52px !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   3. SECCIONES / ENCABEZADOS — móvil mejorado
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Separación entre secciones */
    .pf-sect {
        margin-bottom: 8px !important;
    }
    /* Encabezado de sección */
    .pf-sect-head {
        padding: 16px 4% 8px !important;
        align-items: center !important;
    }
    .pf-sect-title {
        font-size: 1rem !important;
        font-weight: 800 !important;
        gap: 8px !important;
        align-items: center !important;
    }
    .pf-sect-bar {
        width: 3px !important;
        height: 18px !important;
        border-radius: 2px !important;
        flex-shrink: 0 !important;
    }
    /* Ocultar botones de nav en sliders */
    .pf-sect-nav,
    .pfn-btn {
        display: none !important;
    }
    /* Countdown badge */
    .pf-countdown-badge {
        font-size: 9px !important;
        padding: 2px 7px !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   4. CARDS PF10C — más grandes y legibles en móvil
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Variable de altura: más grande que el default */
    :root {
        --pf-slide-h: 210px;
    }

    /* Card: sin hover-expand, siempre muestra info */
    .pf10c-slide:hover {
        width: calc(var(--pf-slide-h) * 0.6667) !important;
        max-width: none !important;
        z-index: 1 !important;
    }

    /* Poster: ligero brillo en hover táctil */
    .pf10c-slide:active .pf10c-poster img {
        transform: scale(1.04) !important;
        filter: brightness(0.7) !important;
    }

    /* Fondo de info: siempre visible */
    .pf10c-back {
        opacity: 1 !important;
        background-image: none !important;
    }
    .pf10c-back-grad {
        background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 45%, transparent 65%) !important;
    }

    /* Info del card: siempre visible */
    .pf10c-info {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
        padding: 8px 7px !important;
    }

    /* Título: una línea, legible */
    .pf10c-title {
        font-size: 10px !important;
        font-weight: 700 !important;
        -webkit-line-clamp: 2 !important;
        line-height: 1.3 !important;
        margin-bottom: 3px !important;
    }

    /* Rating y meta: visibles */
    .pf10c-rating {
        font-size: 9px !important;
        padding: 2px 5px !important;
        margin-bottom: 3px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
    }
    .pf10c-meta {
        font-size: 8px !important;
        display: flex !important;
        gap: 4px !important;
    }

    /* Ocultar desc, géneros y acciones (hay poco espacio) */
    .pf10c-desc,
    .pf10c-genres,
    .pf10c-actions {
        display: none !important;
    }

    /* Badge tipo (película/serie/anime) */
    .pf10c-badge {
        font-size: 8px !important;
        padding: 2px 6px !important;
    }

    /* Padding del slider */
    .pf10c-slider {
        padding: 10px 0 20px !important;
    }

    /* Espacio inicial (bevel izquierdo) */
    .pf10c-slider .swiper-wrapper {
        padding-left: 4% !important;
    }
}

@media (max-width: 480px) {
    :root {
        --pf-slide-h: 190px;
    }
    .pf10c-title {
        font-size: 9px !important;
        -webkit-line-clamp: 1 !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   5. TOP 10 — rank visible y cards mejor proporcionadas
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Número de ranking: grande e impactante */
    .pf10c-rank {
        font-size: clamp(52px, 15vw, 76px) !important;
        left: -2px !important;
        bottom: -4px !important;
        z-index: 2 !important;
        -webkit-text-stroke: 1.5px rgba(255,255,255,0.15) !important;
    }

    /* Slide del top10: acomoda número + poster */
    .pf10-top10-sect .swiper-slide.pf10c-slide {
        padding-left: 32px !important;
        width: calc(var(--pf-slide-h, 210px) * 0.6667 + 32px) !important;
        max-width: 210px !important;
    }
    .pf10-top10-sect .swiper-slide.pf10c-slide:hover {
        width: calc(var(--pf-slide-h, 210px) * 0.6667 + 32px) !important;
        max-width: 210px !important;
    }

    /* Label del rank */
    .pf10c-rank-label {
        font-size: 10px !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   6. "CONTINUAR VIENDO" — cards más anchas y usables
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pf-cont-slide {
        width: 240px !important;
    }
    .pf-cont-card {
        height: 135px !important;
        border-radius: 10px !important;
    }
    .pf-cont-title {
        font-size: 12px !important;
        font-weight: 700 !important;
    }
    .pf-cont-ep {
        font-size: 10px !important;
    }
    .pf-cont-play svg {
        width: 22px !important;
        height: 22px !important;
    }
    /* Barra de progreso: más gruesa y visible */
    .pf-cont-prog {
        height: 3px !important;
    }
    /* Slider continuar viendo */
    .pf-continue-sect .pf10-slider .swiper-wrapper {
        padding-left: 4% !important;
    }
    .pf-continue-sect .pf-sect-head {
        padding-bottom: 4px !important;
    }
}

@media (max-width: 480px) {
    .pf-cont-slide {
        width: 200px !important;
    }
    .pf-cont-card {
        height: 115px !important;
    }
    .pf-cont-title {
        font-size: 11px !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   7. GENRE BANNERS — compactos y tocables en móvil
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pf10-genre-banner {
        margin: 12px 0 0 !important;
        padding: 14px 4% !important;
    }
    .pf10-gb-content {
        padding: 0 !important;
    }
    /* Título del banner de género */
    .pf10-gb-title {
        font-size: 1rem !important;
        font-weight: 800 !important;
    }
    /* Ver más: visible */
    .pf10-gb-link {
        font-size: 11px !important;
        font-weight: 700 !important;
        padding: 6px 12px !important;
        border-radius: 20px !important;
        background: rgba(255,255,255,0.08) !important;
        white-space: nowrap !important;
    }
    /* Header del bloque géneros */
    .pf-genres-header {
        padding-top: 20px !important;
    }
    .pf-genres-header .pf-sect-title {
        font-size: 1.05rem !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   8. BOTTOM NAVIGATION — más grande y cómoda
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pf-mobile-nav {
        padding: 6px 0 env(safe-area-inset-bottom, 10px) !important;
        background: rgba(8, 8, 16, 0.97) !important;
        border-top: 1px solid rgba(255,255,255,0.08) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
    }
    .pf-mobile-nav-items {
        max-width: 500px !important;
        margin: 0 auto !important;
    }
    .pf-mobile-nav-item {
        padding: 8px 4px !important;
        gap: 3px !important;
        font-size: 0.6rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.2px !important;
        border-radius: 10px !important;
        transition: all 0.2s !important;
    }
    .pf-mobile-nav-item.active {
        color: var(--pf-accent-3, #a855f7) !important;
        background: rgba(168,85,247,0.1) !important;
    }
    .pf-mobile-nav-item svg {
        width: 23px !important;
        height: 23px !important;
    }
    /* Padding inferior del body para la nav bar */
    body {
        padding-bottom: 76px !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   9. MODAL DE CONTENIDO — mejorado en móvil
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pf-modal {
        border-radius: 16px 16px 0 0 !important;
        bottom: 0 !important;
        top: auto !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    .pf-modal-hero {
        height: 220px !important;
        border-radius: 16px 16px 0 0 !important;
        overflow: hidden !important;
    }
    .pf-modal-poster-wrap {
        width: 100px !important;
        bottom: -30px !important;
        left: 16px !important;
    }
    .pf-modal-info {
        padding: 44px 16px 24px !important;
    }
    .pf-modal-title {
        font-size: 1.3rem !important;
        font-weight: 900 !important;
    }
    .pf-modal-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .pf-btn-primary,
    .pf-btn-secondary {
        width: 100% !important;
        justify-content: center !important;
        padding: 13px 20px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        min-height: 48px !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   10. TIPOGRAFÍA Y ESPACIADO GENERAL — refinamiento móvil
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Contenedor general */
    .pf-container {
        padding: 0 16px !important;
    }
    /* Sección de contenido */
    .pf-content-section {
        padding: 16px 4% 8px !important;
    }
    /* Cards estándar */
    .pf-card {
        width: 130px !important;
    }
    /* Slider track spacing */
    .pf-slider-track {
        padding: 8px 16px 16px !important;
        gap: 10px !important;
    }

    /* Scroll suave horizontal en todos los sliders */
    .pf10-slider,
    .pf10c-slider {
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .pf10-slide,
    .pf10c-slide {
        scroll-snap-align: start !important;
    }
}

@media (max-width: 480px) {
    .pf-card {
        width: 115px !important;
    }
    .pf-section-header {
        padding: 0 14px !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   11. PLATAFORMAS ROW — oculto en móvil (solo desktop)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pf-platforms-row,
    .pf-desktop-only {
        display: none !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   12. HERO INFORMATIVO (pfi) — adaptación móvil mejorada
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Contenedor: una sola columna */
    .pfi-wrap {
        min-height: auto !important;
        height: auto !important;
    }
    .pfi-slide {
        flex-direction: column !important;
        padding: 70px 16px 80px !important;
        gap: 16px !important;
        min-height: auto !important;
        align-items: flex-start !important;
    }

    /* Poster flotante: oculto en móvil */
    .pfi-poster-float {
        display: none !important;
    }

    /* Panel izquierdo: oculto en móvil (o compacto) */
    .pfi-left {
        display: none !important;
    }

    /* Panel derecho: ocupa todo el ancho */
    .pfi-right {
        margin-right: 0 !important;
        max-height: none !important;
        overflow-y: visible !important;
        gap: 12px !important;
        width: 100% !important;
    }

    /* Título */
    .pfi-title {
        font-size: 1.8rem !important;
        letter-spacing: -0.3px !important;
    }

    /* Géneros: scroll horizontal */
    .pfi-genres {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }
    .pfi-genres::-webkit-scrollbar { display: none !important; }
    .pfi-genre {
        flex-shrink: 0 !important;
        font-size: 10px !important;
    }

    /* Descripción */
    .pfi-overview {
        font-size: 13px !important;
        -webkit-line-clamp: 4 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Grid de datos: 2 columnas */
    .pfi-data-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    /* Cast strip */
    .pfi-cast-card {
        width: 62px !important;
    }
    .pfi-cast-photo,
    .pfi-cast-no-photo {
        width: 62px !important;
        height: 62px !important;
    }

    /* Navegación (flechas): ocultas en móvil, se usa swipe */
    .pfi-arr {
        display: none !important;
    }

    /* Dots: más visibles */
    .pfi-dots {
        bottom: 12px !important;
    }

    /* Botones de acción del hero informativo */
    .pfi-play-btn {
        padding: 13px !important;
        font-size: 14px !important;
        min-height: 48px !important;
    }
    .pfi-trl-btn {
        padding: 10px 8px !important;
        font-size: 11px !important;
        min-height: 44px !important;
    }
    .pfi-sm-ico {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }
}

@media (max-width: 480px) {
    .pfi-title {
        font-size: 1.55rem !important;
    }
    .pfi-data-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .pfi-slide {
        padding: 65px 14px 76px !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   13. MEJORAS TÁCTILES GLOBALES — touch targets y feedback
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Todos los botones: mínimo 44px de área táctil (WCAG) */
    button,
    .pf-uhero-btn-play,
    .pf-uhero-btn-info,
    .pf-uhero-btn-icon,
    .pf-btn-primary,
    .pf-btn-secondary,
    .pf-mobile-nav-item,
    .pfi-play-btn {
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
    }

    /* Feedback visual al tocar cards */
    .pf10c-slide:active .pf10c-card,
    .pf-cont-card:active {
        opacity: 0.85 !important;
        transform: scale(0.97) !important;
        transition: transform 0.1s, opacity 0.1s !important;
    }

    /* Evitar zoom accidental en inputs */
    input, select, textarea {
        font-size: 16px !important;
    }

    /* Scroll suave en toda la página */
    html {
        scroll-behavior: smooth !important;
    }

    /* Ocultar scrollbars horizontales visibles */
    .pf10c-slider,
    .pf10-slider,
    .pf-cont-sect .pf10-slider {
        scrollbar-width: none !important;
    }
    .pf10c-slider::-webkit-scrollbar,
    .pf10-slider::-webkit-scrollbar {
        display: none !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   14. SAFE AREA — compatibilidad con notch/Dynamic Island
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    #pf-navbar {
        padding-top: env(safe-area-inset-top, 0) !important;
    }
    .pf-mobile-nav {
        padding-bottom: env(safe-area-inset-bottom, 10px) !important;
    }
    body {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ── FIN MEJORAS MÓVIL PÁGINA DE INICIO ── */


/* ═══════════════════════════════════════════════════════
   PRIMEFLIX SMART HEROES — v3.10.3
   Home: 6 slots fijos
   Movies / Series / Anime: personalidad visual propia
   ═══════════════════════════════════════════════════════ */

.pf-uhero {
    height: var(--pf-hero-height, 88vh);
    isolation: isolate;
}

.pf-uhero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 82% 18%, rgba(124,58,237,.20), transparent 34%),
        radial-gradient(circle at 12% 22%, rgba(6,182,212,.10), transparent 24%);
}

.pf-uhero--movies::before {
    background:
        radial-gradient(circle at 82% 15%, rgba(245,158,11,.18), transparent 34%),
        radial-gradient(circle at 18% 22%, rgba(239,68,68,.14), transparent 28%);
}

.pf-uhero--series::before {
    background:
        radial-gradient(circle at 82% 15%, rgba(16,185,129,.18), transparent 34%),
        radial-gradient(circle at 16% 22%, rgba(6,182,212,.14), transparent 28%);
}

.pf-uhero--anime::before {
    background:
        radial-gradient(circle at 82% 15%, rgba(236,72,153,.16), transparent 32%),
        radial-gradient(circle at 18% 22%, rgba(139,92,246,.18), transparent 30%);
}

.pf-uhero-overlay {
    z-index: 1;
}

.pf-uhero--movies .pf-uhero-overlay {
    background:
        linear-gradient(110deg, rgba(12,8,4,.97) 0%, rgba(12,8,4,.76) 40%, rgba(12,8,4,.20) 72%, transparent 92%),
        linear-gradient(to top, rgba(10,7,4,.98) 0%, rgba(10,7,4,.48) 42%, transparent 74%);
}

.pf-uhero--series .pf-uhero-overlay {
    background:
        linear-gradient(110deg, rgba(4,10,10,.97) 0%, rgba(4,10,10,.78) 42%, rgba(4,10,10,.18) 72%, transparent 92%),
        linear-gradient(to top, rgba(4,10,10,.98) 0%, rgba(4,10,10,.48) 42%, transparent 74%);
}

.pf-uhero--anime .pf-uhero-overlay {
    background:
        linear-gradient(110deg, rgba(8,5,14,.98) 0%, rgba(8,5,14,.78) 40%, rgba(8,5,14,.16) 72%, transparent 92%),
        linear-gradient(to top, rgba(8,5,14,.98) 0%, rgba(8,5,14,.42) 42%, transparent 74%);
}

.pf-uhero-content {
    bottom: 18%;
    max-width: 580px;
}

.pf-uhero--series .pf-uhero-content {
    max-width: 620px;
}

.pf-uhero--anime .pf-uhero-content {
    max-width: 600px;
}

.pf-uhero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.74);
}

.pf-uhero-kicker::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pf-accent, #7c3aed), var(--pf-accent-2, #a855f7));
    box-shadow: 0 0 18px rgba(255,255,255,.18);
}

.pf-uhero-deck {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
}

.pf-uhero-metric {
    min-width: 112px;
    padding: 10px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.pf-uhero-metric span {
    display: block;
    margin-bottom: 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.58);
}

.pf-uhero-metric strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
}

.pf-uhero--movies .pf-uhero-metric {
    background: linear-gradient(180deg, rgba(245,158,11,.16), rgba(255,255,255,.05));
    border-color: rgba(245,158,11,.18);
}

.pf-uhero--series .pf-uhero-metric {
    background: linear-gradient(180deg, rgba(16,185,129,.14), rgba(255,255,255,.05));
    border-color: rgba(16,185,129,.18);
}

.pf-uhero--anime .pf-uhero-metric {
    background: linear-gradient(180deg, rgba(236,72,153,.15), rgba(255,255,255,.05));
    border-color: rgba(236,72,153,.18);
}

.pf-uhero-poster {
    bottom: 18%;
}

.pf-uhero--movies .pf-uhero-poster img {
    border-color: rgba(245,158,11,.26);
    box-shadow: 0 18px 36px rgba(15,10,4,.45);
}

.pf-uhero--series .pf-uhero-poster img {
    border-color: rgba(16,185,129,.24);
    box-shadow: 0 18px 36px rgba(4,12,10,.42);
}

.pf-uhero--anime .pf-uhero-poster img {
    border-color: rgba(236,72,153,.24);
    box-shadow: 0 18px 36px rgba(12,6,16,.46);
}

.pf-uhero--movies .pf-uhero-btn-play {
    box-shadow: 0 10px 28px rgba(245,158,11,.32);
}

.pf-uhero--movies .pf-uhero-btn-play:hover {
    box-shadow: 0 16px 34px rgba(245,158,11,.42);
}

.pf-uhero--series .pf-uhero-btn-play {
    box-shadow: 0 10px 28px rgba(16,185,129,.30);
}

.pf-uhero--series .pf-uhero-btn-play:hover {
    box-shadow: 0 16px 34px rgba(16,185,129,.40);
}

.pf-uhero--anime .pf-uhero-btn-play {
    box-shadow: 0 10px 28px rgba(236,72,153,.28);
}

.pf-uhero--anime .pf-uhero-btn-play:hover {
    box-shadow: 0 16px 34px rgba(236,72,153,.38);
}

.pf-uhero-nav-wrap {
    top: 50%;
    right: 26px;
    bottom: auto;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 9px;
    padding: 8px;
    border-radius: 999px;
    background: rgba(7,7,14,.28);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.08);
}

.pf-uhero-nav {
    width: 44px;
    height: 44px;
}

.pf-uhero-dots {
    right: 26px;
    bottom: 126px;
    left: auto;
    transform: none;
    flex-direction: column;
    gap: 8px;
}

.pf-uhero-dot {
    width: 9px;
    height: 9px;
}

.pf-uhero-dot-active {
    width: 9px;
    height: 24px;
    border-radius: 999px;
}

.pf-uhero-queue {
    position: absolute;
    left: 5%;
    right: 110px;
    bottom: 18px;
    z-index: 18;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

.pf-uhero-qitem {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 84px;
    padding: 10px 12px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(18px);
    cursor: pointer;
    transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
    overflow: hidden;
}

.pf-uhero-qitem::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--pf-accent, #7c3aed), transparent);
    opacity: 0;
    transition: opacity .25s ease;
}

.pf-uhero-qitem:hover,
.pf-uhero-qitem-active {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,.18);
    background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
    box-shadow: 0 14px 30px rgba(0,0,0,.26), 0 0 0 1px rgba(255,255,255,.03) inset;
}

.pf-uhero-qitem:hover::after,
.pf-uhero-qitem-active::after {
    opacity: 1;
}

.pf-uhero-qthumb {
    width: 42px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 11px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,.30);
}

.pf-uhero-qthumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pf-uhero-qcopy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pf-uhero-qeyebrow {
    display: block;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.58);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf-uhero-qtitle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 700;
    color: rgba(255,255,255,.96);
    text-align: left;
}

.pf-uhero--movies .pf-uhero-qitem {
    background: linear-gradient(180deg, rgba(245,158,11,.12), rgba(255,255,255,.04));
    border-color: rgba(245,158,11,.15);
}

.pf-uhero--series .pf-uhero-qitem {
    background: linear-gradient(180deg, rgba(16,185,129,.10), rgba(255,255,255,.04));
    border-color: rgba(16,185,129,.15);
}

.pf-uhero--anime .pf-uhero-qitem {
    background: linear-gradient(180deg, rgba(236,72,153,.12), rgba(255,255,255,.04));
    border-color: rgba(236,72,153,.15);
}

.pf-uhero--anime .pf-uhero-title {
    letter-spacing: -.7px;
    text-shadow: 0 4px 28px rgba(88,28,135,.30), 0 3px 28px rgba(0,0,0,.70);
}

.pf-uhero--series .pf-uhero-title {
    text-shadow: 0 4px 24px rgba(6,182,212,.14), 0 3px 28px rgba(0,0,0,.70);
}

.pf-uhero--movies .pf-uhero-title {
    text-shadow: 0 4px 24px rgba(245,158,11,.12), 0 3px 28px rgba(0,0,0,.70);
}

@media (max-width: 1100px) {
    .pf-uhero-content {
        bottom: 20%;
        max-width: 540px;
    }

    .pf-uhero-queue {
        right: 92px;
    }

    .pf-uhero-qitem {
        padding: 9px 10px;
        gap: 8px;
    }

    .pf-uhero-qtitle {
        font-size: 11px;
    }
}

@media (max-width: 900px) {
    .pf-uhero-content {
        bottom: 17%;
        max-width: 100%;
    }

    .pf-uhero-poster {
        display: none;
    }

    .pf-uhero-queue {
        right: 16px;
        left: 16px;
    }
}

@media (max-width: 768px) {
    .pf-uhero {
        height: var(--pf-hero-height, 88vh) !important;
        min-height: 560px !important;
    }

    .pf-uhero-content {
        bottom: 10% !important;
        left: 0 !important;
        right: 0 !important;
        max-width: 100% !important;
        padding: 0 16px 94px !important;
    }

    .pf-uhero-kicker {
        margin-bottom: 10px;
        font-size: 9px;
        letter-spacing: .18em;
    }

    .pf-uhero-deck {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 8px;
        margin-bottom: 12px;
        padding-bottom: 2px;
    }

    .pf-uhero-deck::-webkit-scrollbar {
        display: none;
    }

    .pf-uhero-metric {
        min-width: 98px;
        padding: 8px 10px;
        border-radius: 14px;
    }

    .pf-uhero-metric strong {
        font-size: 12px;
    }

    .pf-uhero-nav-wrap {
        display: none !important;
    }

    .pf-uhero-dots {
        display: flex !important;
        flex-direction: row;
        left: 50% !important;
        right: auto !important;
        bottom: 82px !important;
        transform: translateX(-50%) !important;
        gap: 6px !important;
    }

    .pf-uhero-dot {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
    }

    .pf-uhero-dot-active {
        width: 22px !important;
        height: 8px !important;
        border-radius: 999px !important;
    }

    .pf-uhero-queue {
        left: 12px;
        right: 12px;
        bottom: 12px;
        gap: 5px;
    }

    .pf-uhero-qitem {
        min-height: unset;
        padding: 6px 4px 7px;
        border-radius: 12px;
        justify-content: center;
        gap: 0;
    }

    .pf-uhero-qitem::before {
        content: attr(data-slot);
        position: absolute;
        top: 5px;
        right: 5px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 999px;
        background: rgba(0,0,0,.65);
        color: rgba(255,255,255,.85);
        font-size: 9px;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pf-uhero-qcopy {
        display: none;
    }

    .pf-uhero-qthumb {
        width: 100%;
        height: auto;
        aspect-ratio: 2 / 3;
        border-radius: 10px;
    }

    .pf-uhero-actions {
        gap: 8px !important;
    }

    .pf-uhero-btn-play,
    .pf-uhero-btn-info {
        border-radius: 10px !important;
    }
}

@media (max-width: 480px) {
    .pf-uhero-content {
        padding: 0 14px 88px !important;
    }

    .pf-uhero-dots {
        bottom: 76px !important;
    }

    .pf-uhero-queue {
        gap: 4px;
        left: 10px;
        right: 10px;
    }

    .pf-uhero-qitem {
        padding: 5px 3px 6px;
    }

    .pf-uhero-qitem::before {
        top: 4px;
        right: 4px;
        min-width: 14px;
        height: 14px;
        font-size: 8px;
    }
}


/* ═══════════════════════════════════════════════════════
   PRIMEFLIX SMART HEROES — STABILITY FIX v3.10.3
   • recupera la altura visual clásica del hero
   • evita desplazamiento horizontal / franja negra
   ═══════════════════════════════════════════════════════ */

.pf-uhero {
    height: min(var(--pf-hero-height, 85vh), 85vh);
    min-height: 520px;
    max-width: 100vw;
    overflow: hidden;
    touch-action: pan-y;
    overscroll-behavior-x: contain;
}

.pf-uhero-content {
    bottom: 14%;
}

.pf-uhero-poster {
    bottom: 9%;
}

.pf-uhero-slide,
.pf-uhero-bg,
.pf-uhero-content,
.pf-uhero-queue,
.pf-uhero-nav-wrap,
.pf-uhero-dots {
    max-width: 100%;
}

.pf-uhero-queue {
    overflow: hidden;
    overscroll-behavior-x: contain;
}

.pf-uhero-qitem {
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 1100px) {
    .pf-uhero-content {
        bottom: 16%;
    }
}

@media (max-width: 900px) {
    .pf-uhero-content {
        bottom: 15%;
    }
}

@media (max-width: 768px) {
    .pf-uhero {
        height: min(var(--pf-hero-height, 74vh), 74vh) !important;
        min-height: 460px !important;
    }

    .pf-uhero-content {
        bottom: 9% !important;
        padding: 0 16px 86px !important;
    }

    .pf-uhero-dots {
        bottom: 74px !important;
    }

    .pf-uhero-queue {
        left: 12px;
        right: 12px;
        bottom: 10px;
    }
}

@media (max-width: 480px) {
    .pf-uhero-content {
        padding: 0 14px 82px !important;
    }

    .pf-uhero-dots {
        bottom: 70px !important;
    }
}


/* ═══════════════════════════════════════════════════════
   PRIMEFLIX SMART HEROES — CINEMATIC HEIGHT FIX v3.10.3
   • restaura altura cinematográfica real del hero
   • desktop casi full-screen con proporción 16:9
   • móvil alto tipo app con proporción 9:16
   • bloquea el desplazamiento lateral del viewport
   • mantiene el tema como actualización del mismo paquete
   ═══════════════════════════════════════════════════════ */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

.pf-uhero {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: var(--pf-hero-height-desktop, min(max(56.25vw, 84vh), 100vh));
    min-height: 560px;
    max-height: 100vh;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    overflow: clip;
    touch-action: pan-y pinch-zoom;
    overscroll-behavior-x: contain;
    isolation: isolate;
}

.pf-uhero-slide,
.pf-uhero-bg,
.pf-uhero-overlay,
.pf-uhero-canvas {
    width: 100%;
    max-width: 100%;
}

.pf-uhero-slide {
    overflow: hidden;
}

.pf-uhero-bg {
    background-size: cover;
    background-position: center center;
    transform: translate3d(0, 0, 0);
    will-change: opacity, transform;
}

.pf-uhero-content {
    bottom: 13%;
}

.pf-uhero-poster {
    bottom: 8%;
}

.pf-uhero-queue,
.pf-uhero-nav-wrap,
.pf-uhero-dots {
    max-width: calc(100% - 24px);
}

.pf-uhero-queue {
    overflow: hidden;
    overscroll-behavior-x: contain;
}

.pf-uhero-qitem,
.pf-uhero-dot,
.pf-uhero-nav,
.pf-uhero-btn-trailer,
.pf-uhero-trailer-close {
    touch-action: manipulation;
}

@media (max-width: 1100px) {
    .pf-uhero-content {
        bottom: 12%;
    }
}

@media (max-width: 900px) {
    .pf-uhero-content {
        bottom: 11%;
    }

    .pf-uhero-queue {
        left: 14px;
        right: 14px;
    }
}

@media (max-width: 768px) {
    .pf-uhero {
        height: var(--pf-hero-height-mobile, min(max(177.78vw, 88vh), 96vh)) !important;
        min-height: 620px !important;
        max-height: 96vh !important;
        aspect-ratio: 9 / 16;
    }

    .pf-uhero-bg {
        background-position: center 18% !important;
    }

    .pf-uhero-content {
        bottom: 8% !important;
        padding: 0 16px 114px !important;
    }

    .pf-uhero-dots {
        bottom: 92px !important;
    }

    .pf-uhero-queue {
        left: 10px !important;
        right: 10px !important;
        bottom: 12px !important;
        gap: 4px !important;
    }
}

@media (max-width: 480px) {
    .pf-uhero {
        height: var(--pf-hero-height-mobile, min(max(177.78vw, 90vh), 98vh)) !important;
        min-height: 560px !important;
        max-height: 98vh !important;
    }

    .pf-uhero-content {
        padding: 0 14px 108px !important;
    }

    .pf-uhero-dots {
        bottom: 88px !important;
    }
}


/* ═══════════════════════════════════════════════════════
   PRIMEFLIX SMART HEROES — CINEMATIC POLISH v3.10.3
   • sube el poster para liberar el slot final
   • evita el corte superior de los slots al levantar
   • trailer cinematográfico sin controles visibles del usuario
   • refuerza la presencia visual de las partículas por género
   ═══════════════════════════════════════════════════════ */

.pf-uhero-poster {
    bottom: clamp(108px, 15%, 164px);
}

.pf-uhero-queue {
    padding-top: 10px;
    padding-bottom: 4px;
    overflow: hidden;
    align-items: start;
}

.pf-uhero-qitem {
    overflow: visible;
    transform-origin: center bottom;
    will-change: transform;
}

.pf-uhero-qitem:hover,
.pf-uhero-qitem-active {
    z-index: 2;
}

.pf-uhero-trailer-box {
    z-index: 26;
    background: #000;
    padding: 18px 18px 16px;
    align-items: stretch;
    justify-content: stretch;
}

.pf-uhero-trailer-shell {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pf-uhero-trailer-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pf-uhero-trailer-player-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 24px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 24px 60px rgba(0,0,0,.55);
}

.pf-uhero-trailer-player,
.pf-uhero-trailer-player iframe,
.pf-uhero-trailer-player-wrap > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
}

.pf-uhero-trailer-player iframe,
.pf-uhero-trailer-player-wrap > iframe {
    pointer-events: none;
}

.pf-uhero-trailer-actions {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 2px;
}

.pf-uhero-trailer-watch {
    box-shadow: 0 12px 32px rgba(124,58,237,.34);
}

.pf-uhero-trailer-close {
    position: relative;
    top: auto;
    right: auto;
    margin: 0;
}

.pf-uhero-trailer-mode .pf-uhero-content,
.pf-uhero-trailer-mode .pf-uhero-queue,
.pf-uhero-trailer-mode .pf-uhero-nav-wrap,
.pf-uhero-trailer-mode .pf-uhero-dots,
.pf-uhero-trailer-mode .pf-uhero-progress,
.pf-uhero-trailer-mode .pf-uhero-poster {
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 1100px) {
    .pf-uhero-poster {
        bottom: clamp(100px, 14%, 150px);
    }
}

@media (max-width: 768px) {
    .pf-uhero-queue {
        padding-top: 6px;
        padding-bottom: 2px;
    }

    .pf-uhero-qitem {
        overflow: visible;
    }

    .pf-uhero-trailer-box {
        padding: 14px 14px 12px;
    }

    .pf-uhero-trailer-shell {
        gap: 10px;
    }

    .pf-uhero-trailer-actions {
        gap: 8px;
    }

    .pf-uhero-trailer-watch,
    .pf-uhero-trailer-close {
        border-radius: 12px;
    }
}


/* ═══════════════════════════════════════════════════════
   PRIMEFLIX SMART HEROES — HOME VARIANTS + TRAILER COVER v3.10.4
   • tráiler full-cover dentro de todo el hero
   • viñeta cinematográfica y botones abajo a la izquierda
   • hero principal con variantes ligeras desde admin
   ═══════════════════════════════════════════════════════ */

.pf-uhero-trailer-box {
    z-index: 30;
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    background: #000;
}

.pf-uhero-trailer-shell {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.pf-uhero-trailer-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #000;
}

.pf-uhero-trailer-player-wrap,
.pf-uhero-trailer-player {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
    background: #000;
}

.pf-uhero-trailer-player iframe,
.pf-uhero-trailer-player-wrap > iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: none;
    max-height: none;
    border: 0;
    background: #000;
    pointer-events: none;
}

.pf-uhero-trailer-vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(circle at center, rgba(0,0,0,0) 26%, rgba(0,0,0,.12) 48%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.78) 100%),
        linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.14) 24%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.74) 100%);
}

.pf-uhero-trailer-actions {
    position: absolute;
    left: 5%;
    right: auto;
    bottom: 7%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 0;
}

.pf-uhero-trailer-watch {
    box-shadow: 0 16px 34px rgba(124,58,237,.32);
}

.pf-uhero-trailer-close {
    position: relative;
    top: auto;
    right: auto;
    margin: 0;
}

.pf-uhero-trailer-mode .pf-uhero-overlay,
.pf-uhero-trailer-mode .pf-uhero-canvas {
    opacity: 0 !important;
}

.pf-home-variant .pf-uhero-overlay {
    background:
        linear-gradient(108deg, rgba(5,5,10,.98) 0%, rgba(5,5,10,.78) 34%, rgba(5,5,10,.22) 70%, transparent 92%),
        linear-gradient(to top, rgba(5,5,10,.98) 0%, rgba(5,5,10,.42) 36%, transparent 72%);
}

.pf-home-variant .pf-home-variant-content {
    left: 5%;
    right: 5%;
    bottom: 19%;
    max-width: none;
}

.pf-home-variant .pf-hvx-shell {
    width: min(1180px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
    gap: 28px;
    align-items: end;
}

.pf-home-variant .pf-hvx-main {
    position: relative;
    min-width: 0;
    max-width: 760px;
}

.pf-home-variant .pf-hvx-kicker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.pf-home-variant .pf-hvx-badge,
.pf-home-variant .pf-hvx-copyline {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    backdrop-filter: blur(14px);
}

.pf-home-variant .pf-hvx-badge {
    color: #fff;
    background: linear-gradient(135deg, var(--pf-accent, #7c3aed), var(--pf-accent-2, #a855f7));
    box-shadow: 0 10px 28px color-mix(in srgb, var(--pf-accent, #7c3aed) 30%, transparent);
}

.pf-home-variant .pf-hvx-copyline {
    color: rgba(255,255,255,.76);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}

.pf-home-variant .pf-uhero-title {
    max-width: 760px;
}

.pf-home-variant .pf-uhero-ov {
    max-width: 640px;
}

.pf-home-variant .pf-hvx-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-self: stretch;
}

.pf-home-variant .pf-hvx-poster-card,
.pf-home-variant .pf-hvx-metric {
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 40px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(20px);
}

.pf-home-variant .pf-hvx-poster-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 14px;
}

.pf-home-variant .pf-hvx-poster-media {
    overflow: hidden;
    border-radius: 18px;
    aspect-ratio: 2 / 3;
    background: rgba(255,255,255,.08);
}

.pf-home-variant .pf-hvx-poster-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pf-home-variant .pf-hvx-poster-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    color: rgba(255,255,255,.74);
    font-size: 11px;
    font-weight: 700;
}

.pf-home-variant .pf-hvx-poster-note strong {
    color: #fff;
}

.pf-home-variant .pf-hvx-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.pf-home-variant .pf-hvx-metric {
    border-radius: 18px;
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pf-home-variant .pf-hvx-metric span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.46);
}

.pf-home-variant .pf-hvx-metric strong {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
}

.pf-home-variant .pf-hvx-stats-mobile {
    display: none;
}

.pf-home-variant--informativo .pf-hvx-shell {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}

.pf-home-variant--informativo .pf-hvx-main::before {
    content: "";
    position: absolute;
    inset: -22px auto auto -22px;
    width: 76px;
    height: 76px;
    border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--pf-accent, #7c3aed) 42%, transparent) 0%, transparent 70%);
    filter: blur(12px);
    opacity: .8;
    pointer-events: none;
}

.pf-home-variant--editorial .pf-home-variant-content {
    bottom: 20%;
}

.pf-home-variant--editorial .pf-uhero-title {
    font-size: clamp(2.55rem, 5.5vw, 4.8rem);
    letter-spacing: -.05em;
    max-width: 800px;
}

.pf-home-variant--editorial .pf-hvx-main {
    padding-left: 18px;
}

.pf-home-variant--editorial .pf-hvx-main::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 10px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--pf-accent, #7c3aed), var(--pf-accent-2, #a855f7));
    box-shadow: 0 0 26px color-mix(in srgb, var(--pf-accent, #7c3aed) 40%, transparent);
}

.pf-home-variant--spotlight .pf-home-variant-content {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
}

.pf-home-variant--spotlight .pf-hvx-shell {
    width: min(940px, calc(100vw - 48px));
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 18px;
    padding: 30px 32px;
    border-radius: 34px;
    background: linear-gradient(180deg, rgba(11,11,18,.48), rgba(11,11,18,.2));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 28px 70px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(24px);
}

.pf-home-variant--spotlight .pf-hvx-main {
    max-width: 760px;
}

.pf-home-variant--spotlight .pf-uhero-pills,
.pf-home-variant--spotlight .pf-uhero-genres,
.pf-home-variant--spotlight .pf-uhero-actions,
.pf-home-variant--spotlight .pf-hvx-kicker-row {
    justify-content: center;
}

.pf-home-variant--spotlight .pf-uhero-ov {
    margin-inline: auto;
}

.pf-home-variant--spotlight .pf-hvx-side {
    display: none;
}

.pf-home-variant--spotlight .pf-uhero-queue {
    left: 50%;
    right: auto;
    width: min(1120px, calc(100vw - 48px));
    transform: translateX(-50%);
}

.pf-home-variant--marquee .pf-home-variant-content {
    bottom: 16%;
}

.pf-home-variant--marquee .pf-hvx-shell {
    max-width: 1220px;
    padding: 26px 28px;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(11,11,18,.52), rgba(11,11,18,.2));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 26px 72px rgba(0,0,0,.42);
    backdrop-filter: blur(24px);
}

.pf-home-variant--marquee .pf-uhero-title {
    font-size: clamp(2.3rem, 4.8vw, 4.2rem);
}

.pf-home-variant--pulse .pf-hvx-shell {
    position: relative;
}

.pf-home-variant--pulse .pf-hvx-shell::before {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    right: 180px;
    top: -90px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--pf-accent-2, #a855f7) 45%, transparent) 0%, transparent 68%);
    filter: blur(22px);
    pointer-events: none;
}

.pf-home-variant--pulse .pf-hvx-poster-card {
    border-color: color-mix(in srgb, var(--pf-accent-2, #a855f7) 34%, rgba(255,255,255,.12));
    box-shadow: 0 22px 54px color-mix(in srgb, var(--pf-accent-2, #a855f7) 16%, rgba(0,0,0,.42)), inset 0 1px 0 rgba(255,255,255,.1);
}

.pf-home-variant--panorama .pf-hvx-shell {
    grid-template-columns: minmax(0, 720px) minmax(240px, 300px);
    gap: 34px;
}

.pf-home-variant--panorama .pf-hvx-main {
    padding: 28px 30px;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(10,10,16,.56), rgba(10,10,16,.18));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 64px rgba(0,0,0,.36);
    backdrop-filter: blur(22px);
}

.pf-home-variant--panorama .pf-uhero-title {
    max-width: 660px;
}

.pf-home-variant--panorama .pf-hvx-side {
    align-self: end;
}

.pf-home-variant--informativo .pf-uhero-queue .pf-uhero-qitem,
.pf-home-variant--editorial .pf-uhero-queue .pf-uhero-qitem,
.pf-home-variant--spotlight .pf-uhero-queue .pf-uhero-qitem,
.pf-home-variant--marquee .pf-uhero-queue .pf-uhero-qitem,
.pf-home-variant--pulse .pf-uhero-queue .pf-uhero-qitem,
.pf-home-variant--panorama .pf-uhero-queue .pf-uhero-qitem {
    background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.045));
}

@media (max-width: 1200px) {
    .pf-home-variant .pf-hvx-shell {
        width: min(100%, 1040px);
        grid-template-columns: minmax(0, 1fr) 280px;
    }

    .pf-home-variant .pf-uhero-queue {
        right: 96px;
    }

    .pf-home-variant--spotlight .pf-uhero-queue {
        width: min(100vw - 40px, 1040px);
    }
}

@media (max-width: 980px) {
    .pf-home-variant .pf-home-variant-content {
        bottom: 17%;
    }

    .pf-home-variant .pf-hvx-shell,
    .pf-home-variant--informativo .pf-hvx-shell,
    .pf-home-variant--panorama .pf-hvx-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .pf-home-variant .pf-hvx-side {
        max-width: 360px;
    }

    .pf-home-variant .pf-hvx-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pf-home-variant--pulse .pf-hvx-shell::before {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        top: -50px;
    }
}

@media (max-width: 768px) {
    .pf-uhero-trailer-actions {
        left: 16px;
        right: 16px;
        bottom: 14px;
        gap: 8px;
    }

    .pf-uhero-trailer-watch,
    .pf-uhero-trailer-close {
        border-radius: 14px;
    }

    .pf-home-variant .pf-home-variant-content {
        left: 16px;
        right: 16px;
        bottom: 17%;
        transform: none;
        text-align: left;
    }

    .pf-home-variant--spotlight .pf-home-variant-content {
        left: 16px;
        right: 16px;
        transform: none;
        text-align: left;
    }

    .pf-home-variant .pf-hvx-shell,
    .pf-home-variant--spotlight .pf-hvx-shell,
    .pf-home-variant--marquee .pf-hvx-shell,
    .pf-home-variant--panorama .pf-hvx-shell {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        backdrop-filter: none;
    }

    .pf-home-variant .pf-hvx-side {
        display: none;
    }

    .pf-home-variant .pf-hvx-stats-mobile {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 12px;
    }

    .pf-home-variant .pf-hvx-stats-mobile span {
        display: inline-flex;
        gap: 4px;
        align-items: center;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.10);
        color: rgba(255,255,255,.72);
        font-size: 11px;
        font-weight: 700;
    }

    .pf-home-variant .pf-hvx-stats-mobile strong {
        color: #fff;
    }

    .pf-home-variant .pf-uhero-ov {
        max-width: 100%;
    }

    .pf-home-variant .pf-uhero-queue,
    .pf-home-variant--spotlight .pf-uhero-queue {
        left: 16px;
        right: 16px;
        width: auto;
        transform: none;
    }

    .pf-home-variant .pf-hvx-kicker-row {
        margin-bottom: 10px;
    }

    .pf-home-variant .pf-hvx-badge,
    .pf-home-variant .pf-hvx-copyline {
        padding: 6px 11px;
        font-size: 10px;
    }
}


/* ═══════════════════════════════════════════════════════
   PRIMEFLIX v3.10.12.2 — TRUE HOME HERO VARIANTS + STREAM HUBS
   ═══════════════════════════════════════════════════════ */

.pf-home-variant .pf-home-variant-content {
  left: 5%;
  right: 5%;
  bottom: clamp(132px, 17%, 220px);
  max-width: min(1260px, 100%);
}
.pf-home-variant .pf-uhero-overlay {
  background:
    radial-gradient(circle at 72% 18%, color-mix(in srgb, var(--pf-accent-2, #a855f7) 20%, transparent) 0%, transparent 42%),
    linear-gradient(108deg, rgba(5,5,10,.97) 0%, rgba(5,5,10,.78) 32%, rgba(5,5,10,.22) 68%, transparent 92%),
    linear-gradient(to top, rgba(5,5,10,.98) 0%, rgba(5,5,10,.55) 34%, transparent 72%);
}
.pf-hv-layout {
  width: min(1180px, 100%);
  display: grid;
  position: relative;
  z-index: 3;
}
.pf-hv-topline,
.pf-hv-pill-row,
.pf-hv-tag-row,
.pf-hv-data-strip,
.pf-hv-data-grid,
.pf-hv-actions,
.pf-hv-spotlight-stats,
.pf-hv-pulse-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pf-hv-chip,
.pf-hv-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  color: rgba(255,255,255,.86);
}
.pf-hv-chip--solid {
  background: linear-gradient(135deg, var(--pf-accent, #7c3aed), var(--pf-accent-2, #a855f7));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--pf-accent, #7c3aed) 34%, transparent);
}
.pf-hv-copy {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,.78);
  max-width: 740px;
}
.pf-hv-panel,
.pf-hv-sidecard,
.pf-hv-spotlight-card,
.pf-hv-marquee-ticketcard,
.pf-hv-panorama-footer,
.pf-stream-page-intro-card,
.pf-stream-page-feature {
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(18px);
}
.pf-hv-sideposter img,
.pf-hv-editorial-poster img,
.pf-hv-spotlight-poster img,
.pf-hv-marquee-poster img,
.pf-hv-pulse-poster img,
.pf-hv-panorama-window img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Informativo */
.pf-home-variant--informativo .pf-hv-layout--informativo {
  grid-template-columns: minmax(0, 760px) minmax(250px, 320px);
  gap: 26px;
  align-items: end;
}
.pf-home-variant--informativo .pf-hv-panel--lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px 28px;
  border-radius: 28px;
}
.pf-home-variant--informativo .pf-uhero-title { font-size: clamp(2.5rem, 4.2vw, 4.75rem); }
.pf-home-variant--informativo .pf-hv-data-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pf-home-variant--informativo .pf-hv-data-cell {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pf-home-variant--informativo .pf-hv-data-cell span { font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: rgba(255,255,255,.52); }
.pf-home-variant--informativo .pf-hv-data-cell strong { font-size: 1rem; color: #fff; }
.pf-home-variant--informativo .pf-hv-sidecard--informativo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 26px;
}
.pf-home-variant--informativo .pf-hv-sideposter {
  aspect-ratio: 2 / 3;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 46px rgba(0,0,0,.38);
}
.pf-home-variant--informativo .pf-hv-sidecopy { display: grid; gap: 5px; }
.pf-home-variant--informativo .pf-hv-sidecopy span { font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: rgba(255,255,255,.48); }
.pf-home-variant--informativo .pf-hv-sidecopy strong { font-size: 1.06rem; color: #fff; }
.pf-home-variant--informativo .pf-hv-sidecopy small { color: rgba(255,255,255,.64); line-height: 1.6; }

/* Editorial */
.pf-home-variant--editorial .pf-hv-layout--editorial {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px;
  align-items: end;
}
.pf-home-variant--editorial .pf-hv-editorial-main {
  display: grid;
  gap: 18px;
  max-width: 760px;
}
.pf-home-variant--editorial .pf-hv-editorial-masthead {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.pf-home-variant--editorial .pf-hv-editorial-issue,
.pf-home-variant--editorial .pf-hv-editorial-label {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
.pf-home-variant--editorial .pf-hv-editorial-line {
  width: 140px;
  height: 1px;
  background: linear-gradient(90deg, var(--pf-accent, #7c3aed), transparent);
}
.pf-home-variant--editorial .pf-uhero-title {
  font-size: clamp(3rem, 5vw, 5.6rem);
  line-height: .94;
  max-width: 760px;
}
.pf-home-variant--editorial .pf-hv-editorial-quote {
  width: fit-content;
  max-width: 460px;
  padding: 14px 18px;
  border-left: 3px solid var(--pf-accent, #7c3aed);
  background: rgba(255,255,255,.05);
  border-radius: 0 18px 18px 0;
  color: rgba(255,255,255,.78);
  font-style: italic;
}
.pf-home-variant--editorial .pf-hv-editorial-sidebar {
  display: grid;
  gap: 14px;
}
.pf-home-variant--editorial .pf-hv-editorial-poster {
  aspect-ratio: 5 / 7;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 26px 58px rgba(0,0,0,.44);
}
.pf-home-variant--editorial .pf-hv-editorial-meta {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.10);
}
.pf-home-variant--editorial .pf-hv-editorial-meta div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.pf-home-variant--editorial .pf-hv-editorial-meta span { font-size: 11px; color: rgba(255,255,255,.54); text-transform: uppercase; letter-spacing: .16em; }
.pf-home-variant--editorial .pf-hv-editorial-meta strong { font-size: 1rem; color: #fff; }

/* Spotlight */
.pf-home-variant--spotlight .pf-home-variant-content {
  display: flex;
  justify-content: center;
}
.pf-home-variant--spotlight .pf-hv-layout--spotlight {
  place-items: center;
}
.pf-home-variant--spotlight .pf-hv-spotlight-card {
  width: min(780px, 100%);
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 30px 30px 26px;
  border-radius: 34px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05)),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--pf-accent-2, #a855f7) 30%, transparent) 0%, transparent 45%);
}
.pf-home-variant--spotlight .pf-hv-spotlight-badge {
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .24em;
  text-transform: uppercase;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.pf-home-variant--spotlight .pf-hv-spotlight-poster {
  width: 132px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 30px 56px rgba(0,0,0,.4);
}
.pf-home-variant--spotlight .pf-uhero-title {
  max-width: 720px;
  font-size: clamp(2.4rem, 4.6vw, 4.6rem);
}
.pf-home-variant--spotlight .pf-hv-copy {
  max-width: 620px;
  text-align: center;
}
.pf-home-variant--spotlight .pf-hv-spotlight-stats { justify-content: center; }
.pf-home-variant--spotlight .pf-hv-spotlight-stat {
  min-width: 140px;
  padding: 13px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  display: grid;
  gap: 4px;
}
.pf-home-variant--spotlight .pf-hv-spotlight-stat span { font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: rgba(255,255,255,.52); }
.pf-home-variant--spotlight .pf-hv-spotlight-stat strong { font-size: 1rem; color: #fff; }
.pf-home-variant--spotlight .pf-hv-tag-row--center,
.pf-home-variant--spotlight .pf-hv-actions { justify-content: center; }

/* Marquee */
.pf-home-variant--marquee .pf-hv-layout--marquee {
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 26px;
  align-items: stretch;
}
.pf-home-variant--marquee .pf-hv-marquee-copy {
  display: grid;
  align-content: end;
  gap: 14px;
}
.pf-home-variant--marquee .pf-hv-marquee-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pf-home-variant--marquee .pf-hv-marquee-ticket,
.pf-home-variant--marquee .pf-hv-marquee-mini {
  min-height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.pf-home-variant--marquee .pf-hv-marquee-ticket {
  color: #fff;
  background: linear-gradient(135deg, var(--pf-accent, #7c3aed), var(--pf-accent-2, #a855f7));
}
.pf-home-variant--marquee .pf-hv-marquee-mini {
  color: rgba(255,255,255,.72);
  border: 1px dashed rgba(255,255,255,.22);
}
.pf-home-variant--marquee .pf-hv-marquee-number {
  font-size: clamp(5.6rem, 13vw, 10rem);
  line-height: .86;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.86);
  text-shadow: 0 0 36px color-mix(in srgb, var(--pf-accent, #7c3aed) 18%, transparent);
}
.pf-home-variant--marquee .pf-uhero-title {
  font-size: clamp(2.5rem, 4.8vw, 4.9rem);
  max-width: 680px;
}
.pf-home-variant--marquee .pf-hv-marquee-ticketcard {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 28px;
  position: relative;
}
.pf-home-variant--marquee .pf-hv-marquee-ticketcard::before,
.pf-home-variant--marquee .pf-hv-marquee-ticketcard::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pf-bg, #050508) 82%, transparent);
  border: 1px solid rgba(255,255,255,.08);
}
.pf-home-variant--marquee .pf-hv-marquee-ticketcard::before { top: -14px; }
.pf-home-variant--marquee .pf-hv-marquee-ticketcard::after { bottom: -14px; }
.pf-home-variant--marquee .pf-hv-marquee-poster {
  aspect-ratio: 2 / 3;
  border-radius: 22px;
  overflow: hidden;
}
.pf-home-variant--marquee .pf-hv-marquee-strip {
  display: grid;
  gap: 10px;
}
.pf-home-variant--marquee .pf-hv-marquee-strip div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
}
.pf-home-variant--marquee .pf-hv-marquee-strip span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.pf-home-variant--marquee .pf-hv-marquee-strip strong { font-size: 1rem; color: #fff; }

/* Pulse */
.pf-home-variant--pulse .pf-hv-layout--pulse {
  min-height: 420px;
  align-items: center;
}
.pf-home-variant--pulse .pf-hv-pulse-orb {
  position: absolute;
  right: 8%;
  top: 8%;
  width: clamp(240px, 24vw, 340px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(16px);
  background:
    radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--pf-accent-2, #a855f7) 56%, white 6%) 0%, color-mix(in srgb, var(--pf-accent, #7c3aed) 50%, transparent) 34%, transparent 72%);
  opacity: .62;
}
.pf-home-variant--pulse .pf-hv-pulse-main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 250px;
  gap: 24px;
  align-items: center;
}
.pf-home-variant--pulse .pf-hv-pulse-score {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  font-weight: 900;
  color: #fff;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,.04) 58%, transparent 60%),
    conic-gradient(from -25deg, var(--pf-accent, #7c3aed), var(--pf-accent-2, #a855f7), var(--pf-accent, #7c3aed));
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.pf-home-variant--pulse .pf-hv-pulse-copy {
  display: grid;
  gap: 15px;
  max-width: 680px;
}
.pf-home-variant--pulse .pf-uhero-title {
  font-size: clamp(2.8rem, 5vw, 5.2rem);
  line-height: .95;
}
.pf-home-variant--pulse .pf-hv-pulse-stats span {
  min-width: 132px;
  padding: 11px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  display: grid;
  gap: 4px;
}
.pf-home-variant--pulse .pf-hv-pulse-stats strong { font-size: 1rem; color: #fff; }
.pf-home-variant--pulse .pf-hv-pulse-stats em { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.48); }
.pf-home-variant--pulse .pf-hv-pulse-poster {
  aspect-ratio: 2 / 3;
  border-radius: 28px;
  overflow: hidden;
  transform: rotate(7deg);
  box-shadow: 0 28px 56px rgba(0,0,0,.42);
}

/* Panorama */
.pf-home-variant--panorama .pf-hv-layout--panorama {
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 30px;
  align-items: center;
}
.pf-home-variant--panorama .pf-hv-panorama-window {
  aspect-ratio: 10 / 13;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 60px rgba(0,0,0,.38);
}
.pf-home-variant--panorama .pf-hv-panorama-footer {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pf-home-variant--panorama .pf-hv-panorama-footer span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(255,255,255,.46);
}
.pf-home-variant--panorama .pf-hv-panorama-footer strong { font-size: 1rem; color: #fff; }
.pf-home-variant--panorama .pf-hv-panorama-right {
  display: grid;
  gap: 16px;
  max-width: 760px;
}
.pf-home-variant--panorama .pf-uhero-title {
  font-size: clamp(2.7rem, 4.8vw, 5.2rem);
}
.pf-home-variant--panorama .pf-hv-data-strip div {
  min-width: 140px;
  padding: 13px 15px;
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.09);
  display: grid;
  gap: 4px;
}
.pf-home-variant--panorama .pf-hv-data-strip span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(255,255,255,.46);
}
.pf-home-variant--panorama .pf-hv-data-strip strong { color: #fff; }

/* Variant queue personalities */
.pf-home-variant--informativo .pf-uhero-queue { gap: 10px; }
.pf-home-variant--informativo .pf-uhero-qitem { border-radius: 16px; }
.pf-home-variant--editorial .pf-uhero-qitem {
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04));
  border-color: rgba(255,255,255,.18);
}
.pf-home-variant--spotlight .pf-uhero-qitem {
  border-radius: 999px;
  padding: 10px 16px;
}
.pf-home-variant--marquee .pf-uhero-qitem {
  border-radius: 18px 18px 18px 4px;
}
.pf-home-variant--pulse .pf-uhero-qitem {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pf-accent-2, #a855f7) 18%, rgba(255,255,255,.02)), rgba(255,255,255,.03));
}
.pf-home-variant--panorama .pf-uhero-qitem {
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
}

/* Mobile for variants */
@media (max-width: 1100px) {
  .pf-home-variant .pf-home-variant-content { bottom: 18%; }
  .pf-home-variant--informativo .pf-hv-layout--informativo,
  .pf-home-variant--editorial .pf-hv-layout--editorial,
  .pf-home-variant--marquee .pf-hv-layout--marquee,
  .pf-home-variant--panorama .pf-hv-layout--panorama,
  .pf-home-variant--pulse .pf-hv-pulse-main {
    grid-template-columns: 1fr;
  }
  .pf-home-variant--pulse .pf-hv-pulse-score { width: 132px; height: 132px; }
  .pf-home-variant--pulse .pf-hv-pulse-poster { width: 220px; max-width: 52vw; }
  .pf-home-variant--informativo .pf-hv-sidecard--informativo,
  .pf-home-variant--editorial .pf-hv-editorial-sidebar,
  .pf-home-variant--marquee .pf-hv-marquee-ticketcard {
    width: min(320px, 100%);
  }
}
@media (max-width: 768px) {
  .pf-home-variant .pf-home-variant-content {
    left: 5%;
    right: 5%;
    bottom: 128px;
  }
  .pf-hv-layout { width: 100%; }
  .pf-home-variant .pf-uhero-title {
    font-size: clamp(2rem, 10vw, 3rem) !important;
    line-height: .98;
  }
  .pf-hv-copy { font-size: 14px; line-height: 1.6; }
  .pf-home-variant--informativo .pf-hv-panel--lead,
  .pf-home-variant--spotlight .pf-hv-spotlight-card,
  .pf-home-variant--marquee .pf-hv-marquee-ticketcard,
  .pf-home-variant--panorama .pf-hv-panorama-footer {
    border-radius: 22px;
  }
  .pf-home-variant--informativo .pf-hv-data-grid { grid-template-columns: 1fr 1fr; }
  .pf-home-variant--informativo .pf-hv-sidecard--informativo,
  .pf-home-variant--editorial .pf-hv-editorial-sidebar,
  .pf-home-variant--marquee .pf-hv-marquee-ticketcard,
  .pf-home-variant--panorama .pf-hv-panorama-left,
  .pf-home-variant--pulse .pf-hv-pulse-poster {
    display: none;
  }
  .pf-home-variant--spotlight .pf-hv-spotlight-poster { width: 108px; }
  .pf-home-variant--pulse .pf-hv-pulse-orb { right: auto; left: 50%; transform: translateX(-50%); width: 220px; }
  .pf-home-variant--pulse .pf-hv-pulse-main { gap: 16px; }
  .pf-home-variant--spotlight .pf-hv-actions,
  .pf-home-variant--informativo .pf-hv-actions,
  .pf-home-variant--editorial .pf-hv-actions,
  .pf-home-variant--marquee .pf-hv-actions,
  .pf-home-variant--pulse .pf-hv-actions,
  .pf-home-variant--panorama .pf-hv-actions {
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
  }
}

/* Streaming hubs on home */
.pf-stream-hubs {
  padding-top: 26px;
  padding-bottom: 6px;
}
.pf-stream-hubs-head {
  padding-bottom: 10px;
}
.pf-stream-hubs .pf-sect-title .pf-sect-bar {
  background: linear-gradient(135deg, #e50914, #00a8e0, #8b5cf6) !important;
}
.pf-stream-hubs-sub {
  margin: 8px 0 0;
  color: rgba(255,255,255,.62);
  font-size: 14px;
  line-height: 1.7;
}
.pf-stream-hubs-grid {
  width: 100%;
  display: grid;
  gap: 18px;
  padding: 0 4% 10px;
  grid-template-columns: 1fr;
}
.pf-stream-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  padding: clamp(18px, 2vw, 28px);
  color: #fff;
  text-decoration: none;
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--pf-stream-accent) 38%, transparent) 0%, transparent 32%),
    radial-gradient(circle at 86% 20%, color-mix(in srgb, var(--pf-stream-accent-2) 28%, transparent) 0%, transparent 34%),
    linear-gradient(135deg, var(--pf-stream-bg), color-mix(in srgb, var(--pf-stream-bg) 72%, #010104 28%));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 26px 64px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
  isolation: isolate;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.pf-stream-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 38%),
    linear-gradient(45deg, transparent 0 44%, rgba(255,255,255,.04) 50%, transparent 56%);
  opacity: .8;
  z-index: -1;
}
.pf-stream-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--pf-stream-accent) 34%, rgba(255,255,255,.14));
  box-shadow: 0 34px 72px rgba(0,0,0,.36), 0 0 0 1px color-mix(in srgb, var(--pf-stream-accent) 28%, transparent) inset;
}
.pf-stream-card-noise,
.pf-stream-card-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.pf-stream-card-noise {
  opacity: .18;
  background-image:
    linear-gradient(transparent 96%, rgba(255,255,255,.05) 100%),
    linear-gradient(90deg, transparent 96%, rgba(255,255,255,.035) 100%);
  background-size: 10px 10px, 10px 10px;
}
.pf-stream-card-glow {
  background:
    radial-gradient(circle at 75% 18%, color-mix(in srgb, var(--pf-stream-accent-2) 28%, transparent) 0%, transparent 35%),
    radial-gradient(circle at 20% 74%, color-mix(in srgb, var(--pf-stream-accent) 30%, transparent) 0%, transparent 42%);
}
.pf-stream-card-copy {
  display: grid;
  align-content: start;
  gap: 12px;
  max-width: 72%;
}
.pf-stream-card-logo {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -.03em;
}
.pf-stream-card-tagline {
  font-size: clamp(1rem, 1.8vw, 1.22rem);
  line-height: 1.55;
  color: rgba(255,255,255,.92);
}
.pf-stream-card-sub {
  color: rgba(255,255,255,.62);
  line-height: 1.6;
  font-size: 13px;
}
.pf-stream-card-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pf-stream-card-modes span {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
}
.pf-stream-card-cta {
  align-self: flex-start;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pf-stream-accent) 88%, transparent), color-mix(in srgb, var(--pf-stream-accent-2) 66%, rgba(255,255,255,.12)));
  box-shadow: 0 16px 34px color-mix(in srgb, var(--pf-stream-accent) 26%, transparent);
}
@media (max-width: 980px) {
  .pf-stream-hubs-grid { grid-template-columns: 1fr; }
  .pf-stream-card { border-radius: 22px; }
}
@media (max-width: 680px) {
  .pf-stream-card {
    aspect-ratio: 16 / 9;
    padding: 18px;
  }
  .pf-stream-card-copy { max-width: 100%; }
  .pf-stream-card-tagline { font-size: 15px; }
  .pf-stream-card-sub { display: none; }
}

/* Streaming platform pages */
.pf-stream-page {
  --pf-stream-accent: #7c3aed;
  --pf-stream-accent-2: #a855f7;
  --pf-stream-bg: #090910;
  --pf-stream-surface: rgba(124,58,237,.12);
  padding-bottom: 28px;
}
.pf-stream-page-hero {
  position: relative;
  min-height: min(72vh, 760px);
  display: flex;
  align-items: end;
  padding: clamp(46px, 6vw, 72px) 4% 34px;
  background:
    radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--pf-stream-accent) 24%, transparent) 0%, transparent 28%),
    linear-gradient(135deg, var(--pf-stream-bg), #020206);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.pf-stream-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(5,5,10,.98) 0%, rgba(5,5,10,.8) 32%, rgba(5,5,10,.3) 64%, rgba(5,5,10,.78) 100%),
    linear-gradient(to top, rgba(5,5,10,.98) 0%, rgba(5,5,10,.44) 34%, transparent 70%);
}
.pf-stream-page-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 16%, color-mix(in srgb, var(--pf-stream-accent-2) 24%, transparent) 0%, transparent 36%),
    radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--pf-stream-accent) 18%, transparent) 0%, transparent 38%);
  pointer-events: none;
}
.pf-stream-page-shell {
  position: relative;
  z-index: 2;
  width: min(1280px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 30px;
  align-items: end;
}
.pf-stream-page-copy {
  max-width: 760px;
  display: grid;
  gap: 16px;
}
.pf-stream-page-kicker {
  min-height: 34px;
  width: fit-content;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--pf-stream-accent), var(--pf-stream-accent-2));
  box-shadow: 0 16px 34px color-mix(in srgb, var(--pf-stream-accent) 26%, transparent);
}
.pf-stream-page-copy h1 {
  margin: 0;
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: .94;
  letter-spacing: -.04em;
}
.pf-stream-page-copy p {
  margin: 0;
  max-width: 720px;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,.8);
}
.pf-stream-page-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pf-stream-page-pills span {
  min-height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(14px);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
}
.pf-stream-page-feature {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 8px;
  padding: 20px 22px;
  border-radius: 28px;
}
.pf-stream-page-feature-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(255,255,255,.54);
}
.pf-stream-page-feature strong {
  font-size: 1.35rem;
  line-height: 1.2;
}
.pf-stream-page-feature small {
  color: rgba(255,255,255,.64);
  line-height: 1.6;
}
.pf-stream-page-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 22px 4% 10px;
}
.pf-stream-page-intro-card {
  padding: 20px 22px;
  border-radius: 24px;
  display: grid;
  gap: 10px;
}
.pf-stream-page-intro-card p {
  margin: 0;
  color: rgba(255,255,255,.7);
  line-height: 1.7;
}
.pf-stream-page-empty {
  margin: 20px 4% 0;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}
.pf-stream-page-empty h3 {
  margin: 0 0 10px;
}
.pf-stream-page-empty p {
  margin: 0;
  color: rgba(255,255,255,.7);
  line-height: 1.7;
}
.pf-stream-section .pf-sect-bar {
  box-shadow: 0 0 18px color-mix(in srgb, var(--pf-stream-accent) 22%, transparent);
}
@media (max-width: 900px) {
  .pf-stream-page-shell,
  .pf-stream-page-intro {
    grid-template-columns: 1fr;
  }
  .pf-stream-page-feature { max-width: 420px; }
}
@media (max-width: 640px) {
  .pf-stream-page-hero { min-height: 60vh; padding-top: 84px; }
  .pf-stream-page-copy h1 { font-size: clamp(2.4rem, 12vw, 3.6rem); }
  .pf-stream-page-copy p { font-size: 15px; }
  .pf-stream-page-feature,
  .pf-stream-page-intro-card { border-radius: 20px; }
}


/* === v3.10.12.2 platform cards + alt heroes real variants === */
.pf-stream-hubs--static{padding:18px 0 10px}
.pf-stream-hubs--static .pf-stream-hubs-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:clamp(14px,1.1vw,28px);
  padding:0;
}
.pf-stream-hubs--static .pf-stream-card{
  aspect-ratio:16/9;
  border-radius:18px;
  padding:0;
  min-height:0;
  transform-style:preserve-3d;
  perspective:1000px;
  overflow:hidden;
  box-shadow:0 24px 56px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.pf-stream-hubs--static .pf-stream-card-media,
.pf-stream-hubs--static .pf-stream-card-media img{
  position:absolute; inset:0; width:100%; height:100%;
}
.pf-stream-hubs--static .pf-stream-card-media img{object-fit:cover; display:block; transform:scale(1.01); transition:transform .55s ease, filter .55s ease}
.pf-stream-hubs--static .pf-stream-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 32%,rgba(2,2,6,.18) 100%);
}
.pf-stream-hubs--static .pf-stream-card-sheen{
  position:absolute; inset:-20%;
  background:linear-gradient(110deg,transparent 20%, rgba(255,255,255,.16) 50%, transparent 80%);
  transform:translateX(-120%) rotate(8deg);
  transition:transform .8s ease;
  pointer-events:none;
}
.pf-stream-hubs--static .pf-stream-card-depth{
  position:absolute; inset:auto 10% 2% 10%; height:22%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.35), transparent 72%);
  filter:blur(14px); transform:translateZ(-20px);
}
.pf-stream-hubs--static .pf-stream-card:hover{
  transform:translateY(-8px) rotateX(4deg) rotateY(-4deg);
}
.pf-stream-hubs--static .pf-stream-card:hover .pf-stream-card-media img{transform:scale(1.05); filter:saturate(1.08)}
.pf-stream-hubs--static .pf-stream-card:hover .pf-stream-card-sheen{transform:translateX(120%) rotate(8deg)}
@media (max-width: 1200px){
  .pf-stream-hubs--static .pf-stream-hubs-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width: 820px){
  .pf-stream-hubs--static .pf-stream-hubs-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
  .pf-stream-hubs--static .pf-stream-card{border-radius:16px}
}
@media (max-width: 520px){
  .pf-stream-hubs--static .pf-stream-hubs-grid{grid-template-columns:1fr}
}

/* platform page hero 16:4 */
.pf-stream-page-hero{
  min-height:auto;
  aspect-ratio:16/4;
  padding:clamp(38px,4vw,56px) 4% 20px;
}
.pf-stream-page-shell{width:100%; max-width:none}
@media (max-width: 900px){
  .pf-stream-page-hero{aspect-ratio:auto; min-height:50vh}
}

/* home alt heroes */
.pf-home-variant .pf-home-variant-content{left:4%; right:4%; bottom:16%}
.pf-home-variant .pf-uhero-queue{bottom:20px}
.pf-xhero{width:min(1280px,100%); display:grid; gap:26px; align-items:end}
.pf-xhero .pf-uhero-title{font-size:clamp(2.8rem,5vw,5.8rem); line-height:.94; max-width:780px; margin:0}
.pf-xhero .pf-hv-copy{max-width:760px; margin:0; color:rgba(255,255,255,.82); line-height:1.7}
.pf-xhero-label,.pf-xhero-kicker,.pf-xhero-kicker-row span,.pf-xhero-story-top span{
  display:inline-flex; align-items:center; min-height:34px; padding:0 14px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  font-size:11px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; width:fit-content;
}
.pf-xhero-tags{display:flex; flex-wrap:wrap; gap:10px}
.pf-xhero-tags span,.pf-xhero-inline-meta span{
  display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); font-size:11px; font-weight:800;
}
.pf-xhero-inline-meta{display:flex; flex-wrap:wrap; gap:10px}
.pf-xhero-metrics,.pf-xhero-story-strip{display:grid; gap:12px}
.pf-xhero-metrics div,.pf-xhero-stat,.pf-xhero-mini-meta{
  padding:14px 16px; border-radius:18px; background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(16px);
}
.pf-xhero-metrics span,.pf-xhero-stat span,.pf-xhero-mini-meta span{display:block; font-size:11px; color:rgba(255,255,255,.58); text-transform:uppercase; letter-spacing:.12em}
.pf-xhero-metrics strong,.pf-xhero-stat strong,.pf-xhero-mini-meta strong{display:block; margin-top:6px; font-size:1rem; color:#fff}

/* 1 Data slate */
.pf-xhero--data-slate{grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr)}
.pf-xhero-slate{display:grid; gap:16px; padding:24px; border-radius:28px; background:linear-gradient(180deg,rgba(5,5,10,.58),rgba(5,5,10,.18)); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(18px)}
.pf-xhero-panel{display:grid; gap:14px}
.pf-xhero-poster{aspect-ratio:5/7; border-radius:24px; overflow:hidden; box-shadow:0 24px 48px rgba(0,0,0,.42)}
.pf-xhero-poster img{width:100%;height:100%;object-fit:cover;display:block}

/* 2 Story deck */
.pf-xhero--story-deck{grid-template-columns:1fr; align-items:center}
.pf-xhero-story-top{display:flex; gap:10px; flex-wrap:wrap}
.pf-xhero-story-main{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:24px; align-items:end}
.pf-xhero-story-card{padding:24px; border-radius:28px; background:rgba(5,5,10,.34); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(18px)}
.pf-xhero-story-strip{grid-template-columns:repeat(3,minmax(0,1fr))}

/* 3 Focus stage */
.pf-xhero--focus-stage{grid-template-columns:minmax(0,1fr) 300px; align-items:center}
.pf-xhero-stage-cta{justify-self:end; display:grid; justify-items:center; gap:14px}
.pf-xhero-play-ring{
  width:138px; height:138px; border-radius:50%; border:2px solid rgba(255,255,255,.72);
  background:rgba(255,255,255,.05); color:#fff; font-size:48px; box-shadow:0 0 0 14px rgba(255,255,255,.05);
  backdrop-filter:blur(14px)
}
.pf-xhero-play-ring span{transform:translateX(3px)}

/* 4 Side rail */
.pf-xhero--side-rail{grid-template-columns:320px minmax(0,1fr); align-items:end}
.pf-xhero-mini-rail{display:grid; gap:14px}
.pf-xhero-mini-card{padding:14px; border-radius:24px; background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.1)}
.pf-xhero-mini-card img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:16px; display:block; margin-bottom:12px}
.pf-xhero-mini-card strong{font-size:1.1rem}
.pf-xhero-side-main{display:grid; gap:16px; padding-left:10px}
.pf-xhero-kicker-row{display:flex; gap:10px; flex-wrap:wrap}

/* 5 Poster stack */
.pf-xhero--poster-stack{grid-template-columns:minmax(0,1fr) 360px; align-items:center}
.pf-xhero-stack-copy{display:grid; gap:16px}
.pf-xhero-stack-posters{position:relative; min-height:560px}
.pf-xhero-stack-card{
  position:absolute; right:0; width:280px; aspect-ratio:2/3; overflow:hidden; border-radius:26px;
  box-shadow:0 30px 60px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.1)
}
.pf-xhero-stack-card img{width:100%;height:100%;object-fit:cover;display:block}
.pf-xhero-stack-card--back{top:36px; transform:rotate(-12deg); opacity:.45}
.pf-xhero-stack-card--mid{top:18px; transform:rotate(-5deg); opacity:.72}
.pf-xhero-stack-card--front{top:0; transform:rotate(3deg)}

/* 6 Split canvas */
.pf-xhero--split-canvas{grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr); align-items:stretch}
.pf-xhero-split-copy{display:grid; align-content:end; gap:16px; padding:22px 22px 24px; background:linear-gradient(135deg,rgba(5,5,10,.74),rgba(5,5,10,.18)); border-radius:30px; border:1px solid rgba(255,255,255,.09)}
.pf-xhero-split-visual{display:grid; gap:14px}
.pf-xhero-split-poster{aspect-ratio:16/11; border-radius:28px; overflow:hidden; box-shadow:0 24px 56px rgba(0,0,0,.38)}
.pf-xhero-split-poster img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width: 1024px){
  .pf-xhero--data-slate,
  .pf-xhero--story-deck .pf-xhero-story-main,
  .pf-xhero--focus-stage,
  .pf-xhero--side-rail,
  .pf-xhero--poster-stack,
  .pf-xhero--split-canvas{grid-template-columns:1fr}
  .pf-xhero-story-main{grid-template-columns:1fr}
  .pf-xhero-story-strip{grid-template-columns:1fr 1fr 1fr}
  .pf-xhero-stage-cta{justify-self:start}
  .pf-xhero-stack-posters{min-height:420px; width:min(320px,100%)}
}
@media (max-width: 720px){
  .pf-home-variant .pf-home-variant-content{bottom:92px}
  .pf-xhero{gap:18px}
  .pf-xhero .pf-uhero-title{font-size:clamp(2.2rem,10vw,3.8rem)}
  .pf-xhero-story-strip{grid-template-columns:1fr}
  .pf-xhero-play-ring{width:108px;height:108px;font-size:38px}
  .pf-xhero-stack-posters{min-height:340px}
  .pf-xhero-mini-rail{display:none}
}


/* ===== PrimeFlix v3.10.12.2.2 — Hero Streamflix ===== */
.pf-home-variant--streamflix .pf-uhero-overlay{
  background:
    linear-gradient(90deg, rgba(5,5,10,.96) 0%, rgba(5,5,10,.86) 28%, rgba(5,5,10,.40) 56%, rgba(5,5,10,.22) 72%, rgba(5,5,10,.72) 100%),
    linear-gradient(to top, rgba(5,5,10,.96) 0%, rgba(5,5,10,.42) 34%, transparent 78%);
}
.pf-home-variant--streamflix .pf-home-variant-content{
  left:5%;
  right:34%;
  bottom:16%;
}
.pf-home-variant--streamflix .pf-uhero-nav-wrap,
.pf-home-variant--streamflix .pf-uhero-dots{z-index:8}

.pf-xhero--streamflix{display:block}
.pf-home-variant--streamflix .pf-home-variant-content{
  left:5%;
  right:38%;
  bottom:15%;
  max-width:min(720px,56vw);
  z-index:8;
}
.pf-streamflix-panel{
  display:grid;
  gap:16px;
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
}
.pf-streamflix-topline,.pf-streamflix-subline,.pf-streamflix-actions{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
}
.pf-streamflix-chip{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:36px; padding:0 14px;
  border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#fff;
  background:rgba(5,5,8,.46);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
  box-shadow:0 10px 28px rgba(0,0,0,.26);
}
.pf-streamflix-chip--soft{background:rgba(255,255,255,.08); color:rgba(255,255,255,.86)}
.pf-streamflix-chip--ghost{background:rgba(255,255,255,.04); color:rgba(255,255,255,.72)}
.pf-streamflix-titlewrap{display:grid; gap:14px}
.pf-streamflix-title{
  margin:0;
  font-size:clamp(2.9rem,5.8vw,6rem);
  line-height:.9;
  letter-spacing:-.05em;
  text-transform:uppercase;
  max-width:11ch;
}
.pf-streamflix-subline span{
  display:inline-flex; align-items:center;
  padding:7px 0;
  margin-right:14px;
  font-size:.95rem; font-weight:700; color:rgba(255,255,255,.88);
  position:relative;
}
.pf-streamflix-subline span::after{
  content:"";
  position:absolute; right:-9px; top:50%;
  width:4px; height:4px; border-radius:50%;
  background:rgba(255,255,255,.45);
  transform:translateY(-50%);
}
.pf-streamflix-subline span:last-child::after{display:none}
.pf-streamflix-copy{
  max-width:64ch;
  font-size:1.03rem;
  line-height:1.72;
  color:rgba(255,255,255,.84);
  text-shadow:0 6px 22px rgba(0,0,0,.28);
}
.pf-streamflix-rating-lines{
  display:grid;
  gap:12px;
  max-width:min(520px,100%);
}
.pf-streamflix-line{display:grid; gap:8px}
.pf-streamflix-line__head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  color:#fff;
}
.pf-streamflix-line__head span{
  font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.76);
}
.pf-streamflix-line__head strong{
  font-size:1.2rem; font-weight:900; color:#fff;
}
.pf-streamflix-line__track{
  height:10px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.pf-streamflix-line__fill{
  display:block; height:100%; width:0;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--pf-accent,#e11d48),var(--pf-accent-2,#8b5cf6),#fff3);
  box-shadow:0 0 18px color-mix(in srgb, var(--pf-accent,#e11d48) 45%, transparent);
  animation:pf-streamflix-fill 1s cubic-bezier(.22,1,.36,1) forwards;
}
.pf-streamflix-line__fill--soft{
  background:linear-gradient(90deg,rgba(255,255,255,.72),rgba(255,255,255,.22));
  box-shadow:none;
}
.pf-streamflix-actions{gap:14px; margin-top:4px}
.pf-streamflix-appbtn{
  display:inline-flex; align-items:center; gap:12px;
  min-height:58px; padding:0 20px;
  border-radius:20px; border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.05));
  color:#fff; text-decoration:none; font-weight:800;
  box-shadow:0 20px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
  cursor:pointer;
}
.pf-streamflix-appbtn:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 24px 44px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.05) inset;
}
.pf-streamflix-appbtn__icon{
  display:grid; place-items:center;
  width:32px; height:32px; border-radius:11px;
  background:linear-gradient(135deg,var(--pf-accent,#e11d48),var(--pf-accent-2,#8b5cf6));
  box-shadow:0 10px 22px color-mix(in srgb, var(--pf-accent,#e11d48) 40%, transparent);
}
.pf-streamflix-appbtn--info .pf-streamflix-appbtn__icon{background:rgba(255,255,255,.16)}
.pf-home-variant--streamflix .pf-uhero-queue{
  position:absolute;
  top:50%;
  right:4.8%;
  left:auto;
  bottom:auto;
  transform:translateY(-50%);
  width:min(28vw,420px);
  min-height:420px;
  display:grid;
  gap:0;
  padding:0;
  z-index:7;
  overflow:visible;
}
.pf-home-variant--streamflix .pf-uhero-qitem{
  position:absolute;
  left:0; right:0;
  min-height:0;
  padding:0;
  overflow:hidden;
  border-radius:18px;
  background:rgba(8,8,10,.28);
  transform-origin:center center;
  transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .35s ease, filter .35s ease, box-shadow .35s ease;
  box-shadow:0 26px 60px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.06);
}
.pf-home-variant--streamflix .pf-uhero-qthumb{width:100%; height:auto; border-radius:0; box-shadow:none}
.pf-home-variant--streamflix .pf-uhero-qthumb img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  filter:saturate(1.06) contrast(1.03);
}
.pf-home-variant--streamflix .pf-uhero-qcopy{display:none}
.pf-home-variant--streamflix .pf-uhero-qitem::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.08) 55%, rgba(0,0,0,.02));
  pointer-events:none;
}
.pf-home-variant--streamflix .pf-uhero-qitem--pos-0{
  transform:translate3d(0,-50%,0) scale(1) rotateX(0deg) rotateY(0deg);
  opacity:1; z-index:6; filter:none;
}
.pf-home-variant--streamflix .pf-uhero-qitem--pos--1{
  transform:translate3d(0,-84%,0) scale(.92) rotateX(60deg) rotateY(0deg);
  opacity:.92; z-index:5; filter:brightness(.96);
}
.pf-home-variant--streamflix .pf-uhero-qitem--pos-1{
  transform:translate3d(0,-16%,0) scale(.92) rotateX(-60deg) rotateY(0deg);
  opacity:.92; z-index:5; filter:brightness(.96);
}
.pf-home-variant--streamflix .pf-uhero-qitem--pos--2{
  transform:translate3d(0,-108%,0) scale(.8) rotateX(74deg) rotateY(0deg);
  opacity:.54; z-index:4; filter:brightness(.76) blur(.3px);
}
.pf-home-variant--streamflix .pf-uhero-qitem--pos-2{
  transform:translate3d(0,8%,0) scale(.8) rotateX(-74deg) rotateY(0deg);
  opacity:.54; z-index:4; filter:brightness(.76) blur(.3px);
}
.pf-home-variant--streamflix .pf-uhero-qitem--far{opacity:0; pointer-events:none; z-index:1}
.pf-home-variant--streamflix .pf-uhero-qitem-active{border-color:rgba(255,255,255,.18)}
.pf-home-variant--streamflix .pf-uhero-progress{left:5%; right:35%}

@keyframes pf-streamflix-fill{
  from{width:0}
}

@media (max-width: 1100px){
  .pf-home-variant--streamflix .pf-home-variant-content{
    left:5%; right:5%; bottom:28%;
    max-width:min(720px,90vw);
  }
  .pf-home-variant--streamflix .pf-uhero-queue{
    top:auto; bottom:8%;
    right:5%; left:5%;
    width:auto;
    min-height:240px;
    transform:none;
  }
  .pf-home-variant--streamflix .pf-uhero-qitem{
    width:min(46vw,360px);
    left:auto; right:0;
  }
  .pf-home-variant--streamflix .pf-uhero-progress{right:5%}
}

@media (max-width: 767px){
  .pf-home-variant--streamflix .pf-home-variant-content{
    left:4%; right:4%; bottom:25%;
    max-width:none;
  }
  .pf-streamflix-title{font-size:clamp(2.15rem,11vw,3.5rem); max-width:12ch}
  .pf-streamflix-copy{font-size:.95rem; line-height:1.56; max-width:none}
  .pf-streamflix-actions{gap:10px}
  .pf-streamflix-appbtn{
    min-height:52px; padding:0 14px; border-radius:18px;
    flex:1 1 calc(50% - 10px); justify-content:center
  }
  .pf-streamflix-appbtn--info{flex-basis:100%}
  .pf-home-variant--streamflix .pf-uhero-queue{
    bottom:8%;
    min-height:170px;
    left:4%; right:4%;
  }
  .pf-home-variant--streamflix .pf-uhero-qitem{width:min(58vw,260px); border-radius:16px}
  .pf-home-variant--streamflix .pf-uhero-nav-wrap{bottom:18px}
}
@keyframes pf-streamflix-ring{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.04)}
}

@media (max-width: 1100px){
  .pf-home-variant--streamflix .pf-home-variant-content{right:5%; bottom:12%}
  .pf-home-variant--streamflix .pf-uhero-queue{
    position:static;
    transform:none;
    width:100%;
    max-width:none;
    margin:22px 5% 0;
    min-height:230px;
  }
  .pf-home-variant--streamflix .pf-uhero-qitem{
    width:min(70vw,420px);
    left:50%;
    right:auto;
  }
  .pf-home-variant--streamflix .pf-uhero-progress{right:5%}
}

@media (max-width: 767px){
  .pf-home-variant--streamflix .pf-home-variant-content{left:4%; right:4%; bottom:12%}
  .pf-streamflix-app{padding:18px 18px 18px; gap:14px; border-radius:26px}
  .pf-streamflix-title{font-size:clamp(2rem,11vw,3.2rem); max-width:11ch}
  .pf-streamflix-copy{font-size:.95rem; line-height:1.56; max-width:none}
  .pf-streamflix-actions{gap:10px}
  .pf-streamflix-appbtn{min-height:52px; padding:0 14px; border-radius:18px; flex:1 1 calc(50% - 10px); justify-content:center}
  .pf-streamflix-appbtn--trailer{flex-basis:100%}
  .pf-streamflix-bottom{display:grid; grid-template-columns:92px minmax(0,1fr); gap:12px}
  .pf-streamflix-score,.pf-streamflix-score__ring{width:92px; height:92px; min-width:92px}
  .pf-streamflix-score__ring strong{font-size:1.4rem}
  .pf-streamflix-meta{gap:8px}
  .pf-streamflix-meta-pill{padding:10px 12px; min-width:0; flex:1 1 calc(50% - 8px); border-radius:14px}
  .pf-home-variant--streamflix .pf-uhero-queue{
    min-height:180px;
    margin:16px 0 0;
  }
  .pf-home-variant--streamflix .pf-uhero-qitem{width:min(72vw,310px); border-radius:18px}
  .pf-home-variant--streamflix .pf-uhero-qtitle{font-size:.92rem}
}


/* === Dynamic slider titles / icons === */

.pf-dyn-title{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
    transform-style:preserve-3d;
    transition:transform .22s ease, filter .22s ease;
}
.pf-dyn-title::after{ display:none; }
.pf-dyn-title:hover{
    transform:translateY(-2px) scale(1.012);
    filter:drop-shadow(0 10px 20px rgba(0,0,0,.28));
}
.pf-dyn-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border-radius:16px;
    background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), rgba(255,255,255,.04) 60%, transparent 100%);
    box-shadow:0 10px 22px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.12);
    animation:pfTitleFloat 3s ease-in-out infinite;
    transform:translateZ(16px);
    backdrop-filter:blur(8px);
}
.pf-dyn-text{
    font-family: "Trebuchet MS","Segoe Print","Lucida Handwriting","Bookman Old Style",cursive,fantasy;
    font-size:clamp(1.12rem,2.1vw,1.7rem);
    font-weight:800;
    letter-spacing:.02em;
    line-height:1.05;
    text-shadow:0 2px 10px rgba(0,0,0,.35),0 0 24px rgba(139,92,246,.12);
    transition:transform .22s ease, letter-spacing .22s ease, color .22s ease;
    transform:translateZ(10px);
}
.pf-dyn-title:hover .pf-dyn-icon{ transform:translateZ(22px) scale(1.08) rotate(-8deg); }
.pf-dyn-title:hover .pf-dyn-text{ transform:translateZ(14px); letter-spacing:.03em; color:#fff; }

#sect-daily-top10 .pf-dyn-text{ color:#ffd36f; }
#sect-week-trending-mix .pf-dyn-text{ color:#7dd3fc; }
#sect-prev-year-best .pf-dyn-text{ color:#fbbf24; }
#sect-algo-live .pf-dyn-text{ color:#a5f3fc; }
#sect-upcoming-mix .pf-dyn-text{ color:#c4b5fd; }

@keyframes pfTitleFloat {
    0%,100% { transform:translateY(0) translateZ(16px) rotate(0deg); }
    50% { transform:translateY(-4px) translateZ(16px) rotate(5deg); }
}
@media (max-width: 768px){
    .pf-dyn-title{ gap:10px; }
    .pf-dyn-icon{ width:38px; height:38px; border-radius:14px; }
    .pf-dyn-text{ font-size:clamp(1rem,4.6vw,1.35rem); }
}


.pf-sect-head .pf-sect-title .pf-countdown-badge{ margin-left:10px; }

.pf10-top10-sect .pf10c-slide:hover .pf10c-card{
    padding-bottom:56.25% !important;
}
.pf10-top10-sect .pf10c-slide:hover .pf10c-poster{
    opacity:0;
    transform:scale(1.08);
    transition:opacity .25s ease, transform .35s ease;
}
.pf10-top10-sect .pf10c-slide:hover .pf10c-back{
    opacity:1;
    background-size:cover !important;
    background-position:center center !important;
}
.pf10-top10-sect .pf10c-slide .pf10c-poster{
    transition:opacity .22s ease, transform .35s ease;
}
@media (max-width:768px){
    .pf10-top10-sect .pf10c-slide:hover .pf10c-card{
        padding-bottom:150% !important;
    }
    .pf10-top10-sect .pf10c-slide:hover .pf10c-poster{
        opacity:1;
        transform:none;
    }
}


/* === PrimeFlix v3.10.13.2 slider header polish === */
.pf10c-slider .swiper-wrapper{
  align-items:center;
  gap:18px;
}
@media (max-width:768px){
  .pf10c-slider .swiper-wrapper{ gap:14px; }
}
.pf-dyn-title{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  overflow:visible !important;
  transform-style:preserve-3d;
  transition:transform .22s ease, filter .22s ease;
}
.pf-dyn-title:hover{
  transform:translateY(-2px) scale(1.015);
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.28));
}
.pf-dyn-icon.pf-dyn-icon-fx{
  position:relative;
  display:inline-flex;
  width:34px;
  height:34px;
  min-width:34px;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  backdrop-filter:none !important;
}
.pf-dyn-icon-fx i{
  position:absolute;
  inset:auto;
  display:block;
  border-radius:999px;
  pointer-events:none;
}
.pf-dyn-icon-fx i:nth-child(1){
  width:26px;height:26px;left:4px;top:4px;
  border:2px solid rgba(255,255,255,.7);
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 0 20px rgba(124,58,237,.35);
  animation:pfGlyphSpin 8s linear infinite;
}
.pf-dyn-icon-fx i:nth-child(2){
  width:10px;height:10px;left:12px;top:12px;
  background:linear-gradient(135deg,#fff,#9f7aea);
  box-shadow:0 0 16px rgba(168,85,247,.55);
  animation:pfGlyphPulse 2s ease-in-out infinite;
}
.pf-dyn-icon-fx i:nth-child(3){
  width:34px;height:10px;left:0;top:12px;
  border-top:2px solid rgba(255,255,255,.45);
  border-bottom:2px solid rgba(255,255,255,.08);
  opacity:.9;
  transform:skewX(-18deg);
  animation:pfGlyphSweep 2.8s ease-in-out infinite;
}
.pf-dyn-text{
  font-family:"Roboto", "DM Sans", Arial, sans-serif !important;
  font-size:clamp(1.08rem,2vw,1.7rem);
  font-weight:800;
  letter-spacing:.04em;
  line-height:1.05;
  background:linear-gradient(90deg,#fff,rgba(255,255,255,.9),#d8b4fe,#7dd3fc,#fff);
  background-size:240% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  animation:pfTitleGradient 8s linear infinite;
  text-shadow:none !important;
}
.pf-dyn-title:hover .pf-dyn-text{ letter-spacing:.055em; }
.pf-sect-title .pf-countdown-badge{ margin-left:10px; }
@keyframes pfGlyphSpin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes pfGlyphPulse{ 0%,100%{transform:scale(.9);opacity:.88;} 50%{transform:scale(1.25);opacity:1;} }
@keyframes pfGlyphSweep{ 0%,100%{transform:translateX(-4px) skewX(-18deg);opacity:.55;} 50%{transform:translateX(4px) skewX(-18deg);opacity:1;} }
@keyframes pfTitleGradient{ 0%{background-position:0% 50%;} 100%{background-position:240% 50%;} }

.pf-card-platform{
  opacity:1 !important;
  top:7px;
  right:7px;
  bottom:auto;
  height:22px;
  min-width:42px;
  max-width:68px;
  border-radius:999px;
  padding:2px 8px;
  font-size:9px;
  line-height:1;
  box-shadow:0 8px 22px rgba(0,0,0,.36);
}
.pf10c-slide:hover .pf-card-platform{ opacity:1 !important; }

/* standard rows use cleaner visual spacing closer to Top 10 */
.pf10c-slide{ margin-right:0 !important; }
.pf10c-card{ border-radius:12px; }

/* Top 10 hover: force panoramic reveal */
.pf10-top10-sect .pf10c-back{
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}


/* ============================================================
   v3.10.13.2 — Smart sliders activation + headers + platform logos
   ============================================================ */
.pf10-sect .pf-sect-head{margin-bottom:12px}
.pf10-sect .pf10c-slider{padding-inline:2px !important}
.pf10-sect:not(.pf10-top10-sect) .pf10c-slide{margin-right:18px !important}
@media (max-width:768px){
  .pf10-sect:not(.pf10-top10-sect) .pf10c-slide{margin-right:14px !important}
}

.pf-dyn-title{
  gap:14px;
  perspective:1200px;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.18));
}
.pf-dyn-title:hover{filter:drop-shadow(0 16px 30px rgba(0,0,0,.26))}
.pf-dyn-icon{
  width:40px;
  height:40px;
  border-radius:50%;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  overflow:visible;
}
.pf-dyn-icon-fx{
  position:relative;
  isolation:isolate;
}
.pf-dyn-icon-fx::before,
.pf-dyn-icon-fx::after,
.pf-dyn-icon-fx i{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
}
.pf-dyn-icon-fx::before{
  border:2px solid rgba(255,255,255,.25);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 0 24px rgba(124,58,237,.22);
  animation:pfOrbSpin 8s linear infinite;
}
.pf-dyn-icon-fx::after{
  inset:7px;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 38%), linear-gradient(135deg, rgba(124,58,237,.95), rgba(6,182,212,.9));
  filter:blur(.2px);
  animation:pfPulseDot 2.6s ease-in-out infinite;
}
.pf-dyn-icon-fx i:nth-child(1){inset:-3px;border:1.5px dashed rgba(255,255,255,.3);animation:pfOrbSpin 10s linear infinite reverse}
.pf-dyn-icon-fx i:nth-child(2){inset:5px;border:1px solid rgba(255,255,255,.22);animation:pfOrbSpin 6s linear infinite}
.pf-dyn-icon-fx i:nth-child(3){
  inset:auto;
  width:10px;height:10px;left:50%;top:50%;
  margin-left:-5px;margin-top:-21px;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 0 16px currentColor, 0 0 26px currentColor;
  animation:pfOrbitDot 4.5s linear infinite;
}
.pf-dyn-title:hover .pf-dyn-icon-fx::before{box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 0 30px currentColor}
.pf-dyn-text{
  font-family:"Avenir Next Condensed","Baskerville Old Face","Palatino Linotype","Trebuchet MS",serif;
  font-size:clamp(1.18rem,2.25vw,1.86rem);
  font-weight:900;
  letter-spacing:.015em;
  line-height:1;
  text-transform:none;
}
.pf-dyn-title:hover .pf-dyn-text{
  transform:translateZ(14px) translateY(-1px);
  letter-spacing:.035em;
}
#sect-daily-top10 .pf-dyn-text, #sect-studio-mix .pf-dyn-text, #sect-awards-buzz .pf-dyn-text{
  font-family:"Copperplate","Impact","Arial Black",sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
}
#sect-week-trending-mix .pf-dyn-text, #sect-global-hits .pf-dyn-text, #sect-pulse-random .pf-dyn-text{
  font-family:"Trebuchet MS","Gill Sans","Segoe UI",sans-serif;
}
#sect-romance-wave .pf-dyn-text, #sect-comfort-rewatch .pf-dyn-text{
  font-family:"Palatino Linotype","Georgia","Book Antiqua",serif;
  font-style:italic;
}
#sect-anime-boost .pf-dyn-text, #sect-scifi-portal .pf-dyn-text{
  font-family:"Segoe Print","Comic Sans MS","Marker Felt",cursive;
}
#sect-true-story .pf-dyn-text, #sect-critics-choice .pf-dyn-text{
  font-family:"Garamond","Book Antiqua",serif;
}
#sect-dark-mode .pf-dyn-text, #sect-late-night .pf-dyn-text, #sect-revenge-mode .pf-dyn-text{
  font-family:"Arial Narrow","Franklin Gothic Medium","Trebuchet MS",sans-serif;
  text-transform:uppercase;
}
#sect-for-you .pf-dyn-icon-fx,
#sect-algo-live .pf-dyn-icon-fx{color:#8b5cf6}
#sect-daily-top10 .pf-dyn-icon-fx,
#sect-awards-buzz .pf-dyn-icon-fx,
#sect-prev-year-best .pf-dyn-icon-fx{color:#f59e0b}
#sect-week-trending-mix .pf-dyn-icon-fx,
#sect-global-hits .pf-dyn-icon-fx,
#sect-upcoming-mix .pf-dyn-icon-fx{color:#06b6d4}
#sect-anime-boost .pf-dyn-icon-fx,
#sect-romance-wave .pf-dyn-icon-fx{color:#ec4899}
#sect-dark-mode .pf-dyn-icon-fx,
#sect-late-night .pf-dyn-icon-fx,
#sect-hidden-gems .pf-dyn-icon-fx{color:#94a3b8}
#sect-action-burn .pf-dyn-icon-fx,
#sect-revenge-mode .pf-dyn-icon-fx{color:#ef4444}
#sect-family-night .pf-dyn-icon-fx,
#sect-binge-weekend .pf-dyn-icon-fx,
#sect-comfort-rewatch .pf-dyn-icon-fx{color:#22c55e}
#sect-scifi-portal .pf-dyn-icon-fx{color:#60a5fa}
#sect-true-story .pf-dyn-icon-fx,
#sect-critics-choice .pf-dyn-icon-fx{color:#c084fc}
#sect-popcorn-mode .pf-dyn-icon-fx,
#sect-laugh-zone .pf-dyn-icon-fx{color:#fb923c}
#sect-daily-top10 .pf-dyn-icon-fx::before,
#sect-action-burn .pf-dyn-icon-fx::before{border-style:solid}
#sect-week-trending-mix .pf-dyn-icon-fx i:nth-child(1),
#sect-global-hits .pf-dyn-icon-fx i:nth-child(1){border-style:dotted}
#sect-anime-boost .pf-dyn-icon-fx::after{
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,0) 30%),
    conic-gradient(from 0deg, rgba(255,255,255,.18), rgba(236,72,153,.95), rgba(124,58,237,.95), rgba(255,255,255,.18));
}
#sect-dark-mode .pf-dyn-icon-fx::after,
#sect-late-night .pf-dyn-icon-fx::after{
  background:
    radial-gradient(circle at 34% 34%, rgba(255,255,255,.85), rgba(255,255,255,0) 26%),
    linear-gradient(145deg, rgba(15,23,42,.95), rgba(51,65,85,.92));
}
#sect-upcoming-mix .pf-dyn-icon-fx::before{animation-duration:5.8s}
#sect-upcoming-mix .pf-dyn-icon-fx i:nth-child(3){animation-duration:2.8s}
@keyframes pfOrbSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pfPulseDot{0%,100%{transform:scale(.92)}50%{transform:scale(1.08)}}
@keyframes pfOrbitDot{
  0%{transform:rotate(0deg) translateY(16px) rotate(0deg)}
  100%{transform:rotate(360deg) translateY(16px) rotate(-360deg)}
}

.pf-card-platform{
  opacity:1 !important;
  width:56px;
  max-width:none;
  height:24px;
  right:8px;
  bottom:8px;
  padding:3px 6px;
  border-radius:7px;
  background:var(--pf-plat-bg, rgba(10,10,16,.82)) !important;
  border:1px solid color-mix(in srgb, var(--pf-plat-color, #fff) 40%, transparent);
  box-shadow:0 10px 22px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);
}
.pf-card-platform img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.32));
}
.pf-card-platform span{
  color:var(--pf-plat-color, #fff);
  font-size:9px;
  font-weight:900;
}
.pf10c-slide:hover .pf-card-platform{
  transform:translateY(-2px) scale(1.04);
  opacity:1 !important;
}

@media (max-width:768px){
  .pf-dyn-title{gap:11px}
  .pf-dyn-icon{width:34px;height:34px}
  .pf-dyn-text{font-size:clamp(1rem,4.5vw,1.35rem)}
  .pf-card-platform{width:50px;height:22px;right:6px;bottom:6px}
}


/* v3.10.13.3 lighter streaming hubs on desktop only */
.pf-stream-hubs--lite{padding-top:22px;padding-bottom:4px}
.pf-stream-hubs--lite .pf-stream-hubs-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:clamp(12px,1.1vw,20px);
  padding:0 4% 10px;
}
.pf-stream-card--lite{
  position:relative;
  aspect-ratio:16/9;
  min-height:0;
  border-radius:18px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding:clamp(14px,1.6vw,18px);
  background:
    radial-gradient(circle at 14% 22%, color-mix(in srgb, var(--pf-stream-accent) 34%, transparent) 0%, transparent 34%),
    radial-gradient(circle at 84% 24%, color-mix(in srgb, var(--pf-stream-accent-2) 26%, transparent) 0%, transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--pf-stream-bg) 85%, #07070b 15%), #06070b 70%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 16px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
  transform-style:preserve-3d;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, filter .28s ease;
  will-change:transform;
}
.pf-stream-card--lite::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 38%),
    linear-gradient(120deg, transparent 0 46%, rgba(255,255,255,.05) 50%, transparent 54%);
  opacity:.85;
}
.pf-stream-card--lite:hover{
  transform:translateY(-5px) rotateX(6deg) rotateY(-5deg);
  border-color:color-mix(in srgb, var(--pf-stream-accent) 38%, rgba(255,255,255,.16));
  box-shadow:0 22px 44px rgba(0,0,0,.3), 0 0 0 1px color-mix(in srgb, var(--pf-stream-accent) 28%, transparent) inset;
  filter:saturate(1.06);
}
.pf-stream-card-glyph{
  position:absolute;
  top:12px; right:12px;
  width:34px; height:34px;
  border-radius:11px;
  display:grid; place-items:center;
  font-size:12px; font-weight:900; letter-spacing:.08em;
  color:rgba(255,255,255,.95);
  background:linear-gradient(135deg, color-mix(in srgb, var(--pf-stream-accent) 48%, rgba(255,255,255,.12)), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 24px rgba(0,0,0,.24);
  z-index:2;
}
.pf-stream-card-wordmark{
  position:relative;
  z-index:2;
  display:block;
  max-width:100%;
  font-size:clamp(1rem,1.2vw,1.28rem);
  line-height:1;
  font-weight:900;
  letter-spacing:-.03em;
  color:#fff;
  text-shadow:0 8px 22px rgba(0,0,0,.35);
}
.pf-stream-card-pulse,
.pf-stream-card-lines{
  position:absolute; inset:0; pointer-events:none;
}
.pf-stream-card-pulse{
  background:
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--pf-stream-accent-2) 36%, transparent) 0%, transparent 26%),
    radial-gradient(circle at 16% 80%, color-mix(in srgb, var(--pf-stream-accent) 24%, transparent) 0%, transparent 28%);
  filter:blur(4px);
  opacity:.9;
}
.pf-stream-card-lines{
  opacity:.22;
  background-image:
    linear-gradient(transparent 96%, rgba(255,255,255,.06) 100%),
    linear-gradient(90deg, transparent 96%, rgba(255,255,255,.05) 100%);
  background-size:12px 12px, 12px 12px;
  transform:translateZ(0);
}
.pf-stream-card--netflix .pf-stream-card-wordmark{letter-spacing:-.06em}
.pf-stream-card--disney .pf-stream-card-wordmark{font-style:italic;font-weight:800}
.pf-stream-card--apple-tv .pf-stream-card-wordmark{font-weight:500;letter-spacing:.04em}
.pf-stream-card--prime-video .pf-stream-card-wordmark{text-transform:lowercase}
@media (max-width: 1200px){
  .pf-stream-hubs--lite .pf-stream-hubs-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width: 900px){
  .pf-stream-hubs--lite{display:none !important}
}



/* v3.10.13.4 platform cards + text platform badges */
.pf-stream-hubs--lite .pf-stream-hubs-grid{
  padding:0 4% 10px;
  gap:clamp(14px,1.2vw,22px);
}
.pf-stream-card--lite{
  align-items:center;
  justify-content:center;
  padding:clamp(14px,1.2vw,18px);
  border-radius:18px;
  text-align:center;
}
.pf-stream-card-glyph{
  display:none;
}
.pf-stream-card-wordmark{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:clamp(1.22rem,1.55vw,1.9rem);
  line-height:.95;
  font-weight:900;
  letter-spacing:-.045em;
  text-transform:none;
  color:var(--pf-stream-accent);
  text-shadow:0 10px 26px rgba(0,0,0,.40), 0 0 24px color-mix(in srgb,var(--pf-stream-accent) 20%, transparent);
}
.pf-stream-card--netflix .pf-stream-card-wordmark{
  color:#e50914;
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  letter-spacing:-.06em;
  transform:scaleY(1.06);
}
.pf-stream-card--disney .pf-stream-card-wordmark{
  color:#7fd0ff;
  font-family:'Trebuchet MS','Segoe UI',cursive,sans-serif;
  font-style:italic;
  font-weight:800;
  letter-spacing:-.04em;
}
.pf-stream-card--hbo .pf-stream-card-wordmark{
  color:#b597ff;
  font-family:Outfit, Arial, sans-serif;
  font-weight:900;
  letter-spacing:-.06em;
  text-transform:lowercase;
}
.pf-stream-card--appletv .pf-stream-card-wordmark{
  color:#f5f5f7;
  font-family:'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight:600;
  letter-spacing:.01em;
}
.pf-stream-card--crunchyroll .pf-stream-card-wordmark{
  color:#ff8a3d;
  font-family:Impact, 'Arial Black', sans-serif;
  letter-spacing:-.03em;
}
.pf-stream-card--prime .pf-stream-card-wordmark{
  color:#39cfff;
  font-family:'Trebuchet MS','Segoe UI',sans-serif;
  font-weight:800;
  letter-spacing:-.04em;
  text-transform:lowercase;
}
.pf-stream-card--paramount .pf-stream-card-wordmark{
  color:#7ea5ff;
  font-family:Georgia, 'Times New Roman', serif;
  font-weight:700;
  letter-spacing:-.03em;
}
.pf-stream-card-lines{
  opacity:.16;
}
.pf-stream-card-pulse{
  filter:blur(7px);
}
.pf-stream-card--lite:hover{
  transform:translateY(-6px) rotateX(7deg) rotateY(-7deg);
}
.pf-card-platform{
  position:absolute;
  bottom:8px;
  right:8px;
  z-index:6;
  min-width:54px;
  height:22px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--pf-plat-bg), color-mix(in srgb,var(--pf-plat-bg) 72%, #000 28%));
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--pf-plat-color) 35%, rgba(255,255,255,.12));
  box-shadow:0 8px 18px rgba(0,0,0,.30);
  backdrop-filter:blur(6px);
  opacity:.96;
}
.pf-card-platform-label{
  display:block;
  color:var(--pf-plat-color);
  font-size:8.5px;
  line-height:1;
  font-weight:900;
  letter-spacing:.01em;
  white-space:nowrap;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.pf-plat-netflix .pf-card-platform-label{
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  letter-spacing:-.04em;
}
.pf-plat-disney .pf-card-platform-label{
  font-family:'Trebuchet MS','Segoe UI',cursive,sans-serif;
  font-style:italic;
}
.pf-plat-hbo .pf-card-platform-label{
  font-family:Outfit, Arial, sans-serif;
  text-transform:lowercase;
  font-size:9px;
}
.pf-plat-prime .pf-card-platform-label{
  font-family:'Trebuchet MS','Segoe UI',sans-serif;
  text-transform:lowercase;
}
.pf-plat-paramount .pf-card-platform-label{
  font-family:Georgia, serif;
}
.pf-plat-appletv .pf-card-platform-label{
  font-family:'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight:700;
  letter-spacing:0;
}
.pf-plat-crunchyroll .pf-card-platform-label{
  font-family:Impact, 'Arial Black', sans-serif;
  font-size:8px;
}
@media (max-width:1200px){
  .pf-stream-card-wordmark{font-size:clamp(1.02rem,1.3vw,1.5rem)}
}



/* v3.10.13.5 platform brand refinements */
.pf-stream-hubs--lite .pf-stream-hubs-grid{
  width:100%;
  padding:0 3.8% 10px;
  gap:clamp(16px,1.15vw,22px);
  grid-template-columns:repeat(7,minmax(0,1fr));
}
.pf-stream-card--lite{
  aspect-ratio:16/9;
  min-height:0;
  border-radius:16px;
  padding:clamp(14px,1vw,18px);
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(120% 92% at 16% 18%, color-mix(in srgb,var(--pf-stream-accent) 22%, transparent) 0%, transparent 58%),
    radial-gradient(90% 80% at 82% 70%, color-mix(in srgb,var(--pf-stream-accent-2) 18%, transparent) 0%, transparent 62%),
    linear-gradient(145deg, color-mix(in srgb,var(--pf-stream-bg) 94%, #090910 6%) 0%, color-mix(in srgb,var(--pf-stream-bg) 76%, #020206 24%) 100%);
  box-shadow:0 26px 64px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.035);
}
.pf-stream-card--lite::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), transparent 34%),
    radial-gradient(80% 100% at 50% -10%, rgba(255,255,255,.06) 0%, transparent 62%),
    linear-gradient(135deg, transparent 0 38%, rgba(255,255,255,.035) 50%, transparent 62%);
  opacity:.95;
}
.pf-stream-card--lite::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(255,255,255,.045) 18%, transparent 24%, transparent 76%, rgba(255,255,255,.032) 84%, transparent 92%),
    radial-gradient(64% 80% at 50% 120%, color-mix(in srgb,var(--pf-stream-accent) 18%, transparent) 0%, transparent 72%);
  opacity:.65;
  pointer-events:none;
}
.pf-stream-card--lite:hover{
  transform:translateY(-5px) rotateX(4deg) rotateY(-5deg);
  box-shadow:0 34px 72px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb,var(--pf-stream-accent) 32%, transparent) inset;
}
.pf-stream-card-glyph{ display:none !important; }
.pf-stream-card-pulse{ filter:blur(10px); opacity:.88; }
.pf-stream-card-lines{
  opacity:.14;
  background-image:
    linear-gradient(transparent 94%, rgba(255,255,255,.08) 100%),
    linear-gradient(90deg, transparent 94%, rgba(255,255,255,.06) 100%);
  background-size:14px 14px, 14px 14px;
}
.pf-stream-card-wordmark{
  position:relative;
  z-index:3;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:clamp(1.2rem,1.34vw,1.85rem);
  line-height:1;
  font-weight:800;
  letter-spacing:0;
  color:#fff;
  text-shadow:0 10px 24px rgba(0,0,0,.36), 0 0 34px color-mix(in srgb,var(--pf-stream-accent) 18%, transparent);
}
.pf-stream-card--netflix{
  background:
    radial-gradient(120% 90% at 12% 18%, rgba(229,9,20,.28) 0%, transparent 58%),
    radial-gradient(90% 84% at 82% 82%, rgba(255,66,66,.18) 0%, transparent 62%),
    linear-gradient(155deg, #160204 0%, #0a0a0f 56%, #150103 100%);
}
.pf-stream-card--netflix .pf-stream-card-wordmark{
  color:#e50914;
  font-family:"Netflix Sans","Helvetica Neue",Arial,sans-serif;
  font-weight:900;
  font-size:clamp(1.22rem,1.4vw,1.94rem);
  letter-spacing:.24em;
  padding-left:.24em;
  text-transform:uppercase;
}
.pf-stream-card--disney{
  background:
    radial-gradient(120% 100% at 18% 20%, rgba(110,184,255,.20) 0%, transparent 62%),
    radial-gradient(90% 86% at 82% 78%, rgba(60,104,255,.18) 0%, transparent 64%),
    linear-gradient(160deg, #041120 0%, #081b36 58%, #041024 100%);
}
.pf-stream-card--disney .pf-stream-card-wordmark{
  color:#f4f9ff;
  font-family:"Waltograph","Segoe Script","Trebuchet MS",cursive;
  font-weight:700;
  font-size:clamp(1.2rem,1.38vw,1.88rem);
  letter-spacing:-.01em;
}
.pf-stream-card--hbo{
  background:
    radial-gradient(125% 94% at 18% 18%, rgba(162,105,255,.24) 0%, transparent 60%),
    radial-gradient(85% 82% at 86% 76%, rgba(90,52,175,.20) 0%, transparent 62%),
    linear-gradient(158deg, #120423 0%, #19092f 54%, #090314 100%);
}
.pf-stream-card--hbo .pf-stream-card-wordmark{
  color:#fff;
  font-family:"HBO Street","Helvetica Neue",Arial,sans-serif;
  font-weight:800;
  font-size:clamp(1.18rem,1.33vw,1.82rem);
  letter-spacing:-.025em;
}
.pf-stream-card--apple-tv{
  background:
    radial-gradient(120% 92% at 18% 18%, rgba(255,255,255,.15) 0%, transparent 58%),
    radial-gradient(90% 84% at 82% 80%, rgba(148,163,184,.14) 0%, transparent 60%),
    linear-gradient(155deg, #0d0d10 0%, #17171c 58%, #08080b 100%);
}
.pf-stream-card--apple-tv .pf-stream-card-wordmark{
  color:#fafafa;
  font-family:"SF Pro Display","SF Pro Text","San Francisco","Helvetica Neue",Arial,sans-serif;
  font-weight:600;
  font-size:clamp(1.12rem,1.28vw,1.72rem);
  letter-spacing:-.02em;
}
.pf-stream-card--crunchyroll{
  background:
    radial-gradient(124% 92% at 16% 18%, rgba(244,117,33,.28) 0%, transparent 58%),
    radial-gradient(86% 84% at 84% 82%, rgba(255,170,86,.16) 0%, transparent 62%),
    linear-gradient(155deg, #241005 0%, #1c0b03 58%, #0a0909 100%);
}
.pf-stream-card--crunchyroll .pf-stream-card-wordmark{
  color:#f47521;
  font-family:"Crunchyroll Atyp","Trebuchet MS","Arial",sans-serif;
  font-weight:900;
  font-size:clamp(1.12rem,1.28vw,1.74rem);
  letter-spacing:-.01em;
}
.pf-stream-card--prime{
  background:
    radial-gradient(120% 90% at 16% 18%, rgba(255,255,255,.10) 0%, transparent 58%),
    radial-gradient(86% 82% at 84% 80%, rgba(0,168,224,.22) 0%, transparent 62%),
    linear-gradient(160deg, #07161f 0%, #08212d 56%, #041118 100%);
}
.pf-stream-card--prime .pf-stream-card-wordmark{
  font-family:"Prime Video Sharp","Sharp Grotesk","Helvetica Neue",Arial,sans-serif;
  font-weight:800;
  font-size:clamp(1.06rem,1.24vw,1.66rem);
  letter-spacing:-.02em;
}
.pf-stream-card--prime .pf-stream-card-wordmark span:first-child{ color:#fff; }
.pf-stream-card--prime .pf-stream-card-wordmark span:last-child{ color:#00a8e1; }
.pf-stream-card--paramount{
  background:
    radial-gradient(120% 92% at 16% 18%, rgba(72,125,255,.24) 0%, transparent 60%),
    radial-gradient(88% 84% at 84% 80%, rgba(125,175,255,.18) 0%, transparent 62%),
    linear-gradient(156deg, #071530 0%, #0a2150 56%, #041126 100%);
}
.pf-stream-card--paramount .pf-stream-card-wordmark{
  color:#f8fbff;
  font-family:"Loyalkaspar Sans","Helvetica Neue",Arial,sans-serif;
  font-weight:800;
  font-size:clamp(1.04rem,1.22vw,1.62rem);
  letter-spacing:-.01em;
}
.pf-stream-card--netflix .pf-stream-card-pulse{ background:radial-gradient(circle at 82% 16%, rgba(229,9,20,.22) 0%, transparent 26%), radial-gradient(circle at 16% 82%, rgba(255,88,88,.14) 0%, transparent 28%); }
.pf-stream-card--disney .pf-stream-card-pulse{ background:radial-gradient(circle at 82% 16%, rgba(0,99,229,.22) 0%, transparent 26%), radial-gradient(circle at 16% 82%, rgba(76,201,255,.14) 0%, transparent 28%); }
.pf-stream-card--hbo .pf-stream-card-pulse{ background:radial-gradient(circle at 82% 16%, rgba(139,92,246,.26) 0%, transparent 26%), radial-gradient(circle at 16% 82%, rgba(194,132,252,.14) 0%, transparent 28%); }
.pf-stream-card--apple-tv .pf-stream-card-pulse{ background:radial-gradient(circle at 82% 16%, rgba(255,255,255,.16) 0%, transparent 26%), radial-gradient(circle at 16% 82%, rgba(148,163,184,.14) 0%, transparent 28%); }
.pf-stream-card--crunchyroll .pf-stream-card-pulse{ background:radial-gradient(circle at 82% 16%, rgba(244,117,33,.24) 0%, transparent 26%), radial-gradient(circle at 16% 82%, rgba(255,180,104,.14) 0%, transparent 28%); }
.pf-stream-card--prime .pf-stream-card-pulse{ background:radial-gradient(circle at 82% 16%, rgba(0,168,225,.22) 0%, transparent 26%), radial-gradient(circle at 16% 82%, rgba(255,255,255,.10) 0%, transparent 28%); }
.pf-stream-card--paramount .pf-stream-card-pulse{ background:radial-gradient(circle at 82% 16%, rgba(52,109,255,.22) 0%, transparent 26%), radial-gradient(circle at 16% 82%, rgba(150,188,255,.14) 0%, transparent 28%); }

.pf-card-platform{
  right:8px;
  bottom:8px;
  min-width:36px;
  max-width:84px;
  height:24px;
  border-radius:999px;
  padding:0 9px;
  background:linear-gradient(135deg,var(--pf-plat-bg), color-mix(in srgb,var(--pf-plat-bg) 84%, #000 16%));
  border:1px solid color-mix(in srgb,var(--pf-plat-color) 48%, rgba(255,255,255,.12));
  box-shadow:0 10px 22px rgba(0,0,0,.32);
}
.pf-card-platform-label{
  font-size:8.4px;
  font-weight:800;
  letter-spacing:0;
}
.pf-plat-netflix .pf-card-platform-label{
  color:#e50914;
  font-family:"Netflix Sans","Helvetica Neue",Arial,sans-serif;
  letter-spacing:.14em;
  padding-left:.14em;
}
.pf-plat-disney .pf-card-platform-label{
  color:#e9f6ff;
  font-family:"Waltograph","Segoe Script","Trebuchet MS",cursive;
  font-weight:700;
}
.pf-plat-hbo .pf-card-platform-label{
  color:#fff;
  font-family:"HBO Street","Helvetica Neue",Arial,sans-serif;
  font-size:8.6px;
  text-transform:none;
}
.pf-plat-appletv .pf-card-platform-label{
  color:#f5f5f7;
  font-family:"SF Pro Display","SF Pro Text","San Francisco","Helvetica Neue",Arial,sans-serif;
}
.pf-plat-prime .pf-card-platform-label{
  color:#fff;
  font-family:"Prime Video Sharp","Sharp Grotesk","Helvetica Neue",Arial,sans-serif;
}
.pf-plat-paramount .pf-card-platform-label{
  color:#f8fbff;
  font-family:"Loyalkaspar Sans","Helvetica Neue",Arial,sans-serif;
}
.pf-plat-crunchyroll .pf-card-platform-label{
  color:#f47521;
  font-family:"Crunchyroll Atyp","Trebuchet MS","Arial",sans-serif;
}
@media (max-width: 1200px){
  .pf-stream-hubs--lite .pf-stream-hubs-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width: 900px){
  .pf-stream-hubs--lite{display:none !important}
}


/* === v3.10.14.18 mobile slider touch fix + Roboto titles === */
.pf10c-slider,
.pf10c-slider .swiper-wrapper,
.pf10c-slider .swiper-slide,
.pf-xslider,
.pf-xslider .swiper-wrapper,
#xs-similar,
#xs-similar .swiper-wrapper,
#xs-continue,
#xs-continue .swiper-wrapper,
.pfchips-slider,
.pfchips-slider .swiper-wrapper {
  touch-action: pan-y pinch-zoom;
}

.pf10c-slider .swiper-wrapper,
.pf-xslider .swiper-wrapper,
#xs-similar .swiper-wrapper,
#xs-continue .swiper-wrapper,
.pfchips-slider .swiper-wrapper {
  user-select: none;
  -webkit-user-select: none;
}

.pf-sect-title,
.pf-dyn-title,
.pf-dyn-text,
.pf-stream-section .pf-sect-title {
  font-family: 'Roboto', 'DM Sans', Arial, sans-serif !important;
}