<?php
// Para producción, comenta las siguientes líneas
// ini_set('display_errors', 1);
// ini_set('display_startup_errors', 1);
// error_reporting(E_ALL);

/**
 * FRONTEND IPTV
 * Lee ÚNICAMENTE las columnas que guarda el admin/iptv_panel.php
 * (brand, subtitle, whatsapp, hero_*, plans_title, home_button_url,
 *  logo_path, currency_*, plan_*_price, plan_*_period)
 * El resto de textos son fijos (NO vienen de DB).
 */

require_once __DIR__ . '/../config/config.php';
require_once __DIR__ . '/../config/db.php';

$pdo = getPDO();
$companyId = 1; // siempre empresa principal

// ====== Cargar settings con company_id = 1 ======
$st = $pdo->prepare("SELECT * FROM iptv_settings WHERE company_id = ? LIMIT 1");
$st->execute([$companyId]);
$row = $st->fetch(PDO::FETCH_ASSOC);

// Si no existe, crear fila por defecto
if (!$row) {
    $pdo->prepare("INSERT INTO iptv_settings (company_id, enabled, updated_at) VALUES (?, 1, NOW())")
        ->execute([$companyId]);
    $st->execute([$companyId]);
    $row = $st->fetch(PDO::FETCH_ASSOC);
}

// ====== Extraer SOLO las columnas que existen en el admin ======
$brand          = $row['brand']          ?? 'JMTVDigital';
$subtitle       = $row['subtitle']       ?? 'Servicio estable • HD/4K • Soporte rápido • Activación inmediata';
$whatsappNumber = $row['whatsapp']        ?? '50672409841';

// Nuevo número de WhatsApp adicional
$whatsappNumber2 = '+50664169373';

$heroTitle      = $row['hero_title']      ?? 'Todas tus plataformas en un solo lugar';
$heroSubtitle   = $row['hero_subtitle']   ?? 'Canales en vivo, películas, series, documentales, conciertos y mucho más! Vive La Nueva Experiencia';
$heroBtnText    = $row['hero_btn_text']   ?? 'Explorar Catálogo';
$plansTitle     = $row['plans_title']     ?? 'Planes Disponibles';

$homeButtonUrl  = $row['home_button_url'] ?? 'https://catalogo.lightiius.com/';
$logoPath       = $row['logo_path']       ?? '';

// Moneda y formato
$currencyCode   = $row['currency_code']   ?? 'CRC';
$currencySymbol = $row['currency_symbol'] ?? '₡';
$currencyLocale = $row['currency_locale'] ?? 'es-CR';

// Precios y periodos actualizados
$planDemoPrice  = isset($row['plan_demo_price']) ? (float)$row['plan_demo_price'] : 0;
$planDemoPeriod = $row['plan_demo_period']        ?? '6 horas';

$planFamPrice   = isset($row['plan_familiar_price']) ? (float)$row['plan_familiar_price'] : 4000; // Cambiado a 4000
$planFamPeriod  = $row['plan_familiar_period']      ?? 'mes';

$planPlusPrice  = isset($row['plan_plus_price']) ? (float)$row['plan_plus_price'] : 10000; // Cambiado a 10000
$planPlusPeriod = $row['plan_plus_period']        ?? '3 meses';

// ====== Construir URL del logo y verificar existencia ======
$iptvLogoUrl = '';
if ($logoPath) {
    if (preg_match('~^https?://~i', $logoPath)) {
        $iptvLogoUrl = $logoPath;
    } else {
        $localPath = '../' . ltrim($logoPath, '/');
        if (file_exists(__DIR__ . '/' . $localPath)) {
            $iptvLogoUrl = $localPath;
        }
    }
}

// ====== Favicon: usar archivo fijo o logo como fallback ======
$faviconPath = '../uploads/iptv/favicon.png';
if (file_exists(__DIR__ . '/' . $faviconPath)) {
    $faviconUrl = $faviconPath;
} elseif ($iptvLogoUrl) {
    $faviconUrl = $iptvLogoUrl;
} else {
    $faviconUrl = '';
}

// ====== Textos fijos (NO vienen de DB) ======
$badgeText      = 'IPTV PREMIUM';
$badgeIcon      = 'fa-crown';
$footerText     = 'Este servicio requiere conexión a internet estable. No somos responsables por contenido de terceros.';
$top10Title     = 'TOP 10 Destacados';
$top10Sub       = 'Las películas y series más populares de nuestro catálogo';
$catalogTitle   = 'Catálogo Completo';
$catalogSub     = 'Explora miles de películas y series disponibles';
$appsTitle      = 'Apps Compatibles';
$appsSub        = 'Disponible en todos tus dispositivos favoritos';
$requestTitle   = 'Solicitar Contenido';
$requestSub     = '¿No encuentras lo que buscas? ¡Solicítalo aquí!';

$apkPath = "images/sharon.apk";

// ====== Función de formato de moneda ======
function money_fmt(float $amount, string $locale, string $currencyCode, string $symbol): string {
    if (class_exists('NumberFormatter')) {
        $fmt = new NumberFormatter($locale, NumberFormatter::CURRENCY);
        $out = $fmt->formatCurrency($amount, $currencyCode);
        if (is_string($out)) return $out;
    }
    $decimals = ($amount == floor($amount)) ? 0 : 2;
    return $symbol . number_format($amount, $decimals, '.', ',');
}

$demoPriceText = money_fmt($planDemoPrice, $currencyLocale, $currencyCode, $currencySymbol);
$famPriceText  = money_fmt($planFamPrice,  $currencyLocale, $currencyCode, $currencySymbol);
$plusPriceText = money_fmt($planPlusPrice, $currencyLocale, $currencyCode, $currencySymbol);

// ====== WhatsApp helpers ======
function waLink(string $number, string $text): string {
    // Limpiar el número: eliminar + y espacios
    $cleanNumber = preg_replace('/[^0-9]/', '', $number);
    return "https://wa.me/".$cleanNumber."?text=".rawurlencode($text);
}

$waDemo     = waLink($whatsappNumber, "Hola! Quiero una DEMO de {$planDemoPeriod}.");
$waFamiliar = waLink($whatsappNumber, "Hola! Quiero el plan FAMILIAR ({$planFamPeriod}). ¿Cómo lo activo?");
$waPlus     = waLink($whatsappNumber, "Hola! Quiero el plan PLUS ({$planPlusPeriod}). ¿Cómo lo activo?");
$waGeneral  = waLink($whatsappNumber, "Hola! Quiero información de IPTV.");
$waGeneral2 = waLink($whatsappNumber2, "Hola! Quiero información de IPTV.");

?><!doctype html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><?php echo htmlspecialchars($brand); ?> | Catálogo Premium de Series y Películas</title>

  <!-- Favicon -->
  <?php if (!empty($faviconUrl)): ?>
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo htmlspecialchars($faviconUrl); ?>">
    <link rel="apple-touch-icon" sizes="180x180" href="<?php echo htmlspecialchars($faviconUrl); ?>">
  <?php endif; ?>

  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    /* ===== VARIABLES DEL TEMA CLARO (por defecto) ===== */
    :root {
      --primary-main: #8B5CF6; /* Morado principal */
      --primary-gradient: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
      --primary-contrast: #FFFFFF;

      --background-surface: #FFFFFF;
      --background-app: #F8FAFC;
      --background-card: #FFFFFF;

      --text-heading: #1E293B;
      --text-body: #64748B;
      --text-accent: #8B5CF6;

      --indicator-success: #10B981;
      --indicator-border: #E2E8F0;
      --indicator-warning: #F59E0B;

      --font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
      --font-regular: 400;
      --font-medium: 500;
      --font-bold: 700;

      --spacing-xs: 4px;
      --spacing-sm: 8px;
      --spacing-md: 16px;
      --spacing-lg: 24px;
      --spacing-xl: 32px;
      --spacing-2xl: 48px;
      --spacing-3xl: 60px;

      --radius-sm: 8px;
      --radius-md: 16px;
      --radius-lg: 24px;
      --radius-full: 9999px;

      --shadow-card: 0px 4px 20px rgba(0, 0, 0, 0.05);
      --shadow-button: 0px 2px 10px rgba(139, 92, 246, 0.3);
      --shadow-elevated: 0px 10px 25px rgba(0, 0, 0, 0.08);
      --shadow-hover: 0px 15px 35px rgba(139, 92, 246, 0.25);

      --max-width: 1200px;
      --grid-gap: 20px;
      --card-padding: 24px;
    }

    /* ===== TEMA OSCURO ===== */
    body.dark-mode {
      --background-surface: #1a1a1a;
      --background-app: #121212;
      --background-card: #2d2d2d;

      --text-heading: #ffffff;
      --text-body: #b0b0b0;
      --text-accent: #A78BFA;

      --indicator-border: #333333;
      --indicator-success: #34d399;
      --indicator-warning: #fbbf24;

      --shadow-card: 0px 4px 20px rgba(0, 0, 0, 0.5);
      --shadow-elevated: 0px 10px 25px rgba(0, 0, 0, 0.7);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: var(--font-family);
      background-color: var(--background-app);
      color: var(--text-body);
      line-height: 1.6;
      font-weight: var(--font-regular);
      font-size: 14px;
      transition: background-color 0.3s ease, color 0.2s ease;
    }

    h1, h2, h3, h4, h5, h6 {
      color: var(--text-heading);
      font-weight: var(--font-bold);
      line-height: 1.2;
      transition: color 0.2s ease;
    }

    h1 { font-size: 32px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }
    h5 { font-size: 16px; }

    .container {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 var(--spacing-md);
    }

    /* Header y Logo */
    header {
      background-color: var(--background-surface);
      border-bottom: 1px solid var(--indicator-border);
      padding: var(--spacing-md) 0;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: var(--shadow-card);
      transition: background-color 0.3s ease, border-color 0.2s ease;
    }

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .brand {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);
      align-items: flex-start;
    }

    .brand-logo-wrap {
      height: 52px;
      display: flex;
      align-items: center;
    }

    .brand-logo {
      height: 48px;
      width: auto;
      max-width: 220px;
      object-fit: contain;
      display: block;
    }

    @media (max-width: 768px) {
      .brand-logo {
        height: 40px;
        max-width: 180px;
      }
    }

    .brand h1 {
      background: var(--primary-gradient);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-size: 24px;
    }

    .brand p {
      color: var(--text-body);
      font-size: 12px;
      font-weight: var(--font-medium);
    }

    .nav-links {
      display: flex;
      gap: var(--spacing-md);
      align-items: center;
    }

    .nav-link {
      color: var(--text-body);
      text-decoration: none;
      font-weight: var(--font-medium);
      padding: var(--spacing-sm) var(--spacing-md);
      border-radius: var(--radius-sm);
      transition: all 0.2s ease;
    }

    .nav-link:hover {
      color: var(--text-accent);
      background-color: rgba(139, 92, 246, 0.05);
    }

    /* Botón de tema */
    .theme-toggle {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 18px;
      color: var(--text-body);
      padding: 8px;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      margin-left: 4px;
    }

    .theme-toggle:hover {
      color: var(--text-accent);
      background-color: rgba(139, 92, 246, 0.1);
    }

    /* Botón Inicio */
    .btn-home {
      background-color: rgba(139, 92, 246, 0.1);
      color: var(--text-accent);
      border: 1px solid rgba(139, 92, 246, 0.2);
      padding: 10px 20px;
      border-radius: var(--radius-sm);
      font-weight: var(--font-medium);
      text-decoration: none;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-sm);
    }

    .btn-home:hover {
      background-color: rgba(139, 92, 246, 0.15);
      color: var(--text-accent);
      transform: translateY(-1px);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--spacing-sm);
      padding: 12px 24px;
      border-radius: var(--radius-sm);
      font-weight: var(--font-bold);
      text-decoration: none;
      transition: all 0.3s ease;
      border: none;
      cursor: pointer;
      font-size: 14px;
    }

    .btn-primary {
      background: var(--primary-gradient);
      color: var(--primary-contrast);
      box-shadow: var(--shadow-button);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-hover);
    }

    .btn-secondary {
      background-color: transparent;
      border: 1px solid var(--indicator-border);
      color: var(--text-heading);
    }

    .btn-secondary:hover {
      border-color: var(--text-accent);
      color: var(--text-accent);
    }

    .btn-purple {
      background-color: #8B5CF6;
      color: white;
    }

    .btn-purple:hover {
      background-color: #7C3AED;
    }

    /* Menú Hamburguesa */
    .hamburger-menu {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 24px;
      color: var(--text-heading);
      padding: var(--spacing-sm);
      z-index: 1001;
    }

    .mobile-nav {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--background-surface);
      z-index: 999;
      padding: var(--spacing-3xl) var(--spacing-md) var(--spacing-md);
      transform: translateX(-100%);
      transition: transform 0.3s ease, background-color 0.3s ease;
      overflow-y: auto;
    }

    .mobile-nav.open {
      transform: translateX(0);
    }

    .mobile-nav-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--spacing-2xl);
      padding-bottom: var(--spacing-md);
      border-bottom: 1px solid var(--indicator-border);
    }

    .mobile-nav-links {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-md);
    }

    .mobile-nav-link {
      display: flex;
      align-items: center;
      gap: var(--spacing-md);
      padding: var(--spacing-md);
      border-radius: var(--radius-md);
      text-decoration: none;
      color: var(--text-heading);
      font-weight: var(--font-medium);
      transition: all 0.2s ease;
    }

    .mobile-nav-link:hover {
      background-color: rgba(139, 92, 246, 0.05);
      color: var(--text-accent);
    }

    .mobile-nav-link i {
      width: 24px;
      text-align: center;
    }

    .mobile-nav-actions {
      margin-top: var(--spacing-xl);
      display: flex;
      flex-direction: column;
      gap: var(--spacing-md);
    }

    /* Hero Section */
    .hero {
      background-color: var(--background-surface);
      padding: var(--spacing-3xl) 0;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--primary-gradient);
    }
    .hero-content {
      max-width: 800px;
      margin: 0 auto;
    }
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-sm);
      background-color: rgba(139, 92, 246, 0.1);
      color: var(--text-accent);
      padding: var(--spacing-sm) var(--spacing-lg);
      border-radius: var(--radius-full);
      font-weight: var(--font-bold);
      font-size: 12px;
      margin-bottom: var(--spacing-lg);
    }
    .hero h2 {
      font-size: 40px;
      margin-bottom: var(--spacing-md);
      line-height: 1.1;
    }
    .hero p {
      font-size: 18px;
      color: var(--text-body);
      max-width: 600px;
      margin: 0 auto var(--spacing-xl);
    }

    /* Top 10 Section */
    .top10-section {
      padding: var(--spacing-3xl) 0;
      background-color: var(--background-surface);
    }
    .section-header {
      text-align: center;
      margin-bottom: var(--spacing-2xl);
    }
    .section-header h2 {
      margin-bottom: var(--spacing-sm);
    }
    .section-header p {
      color: var(--text-body);
      max-width: 600px;
      margin: 0 auto;
    }
    .top10-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--grid-gap);
    }
    @media (min-width: 768px) {
      .top10-grid {
        grid-template-columns: repeat(5, 1fr);
      }
    }
    .top10-card {
      background-color: var(--background-card);
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: var(--shadow-card);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      position: relative;
    }
    .top10-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-elevated);
    }
    .top10-rank {
      position: absolute;
      top: var(--spacing-md);
      left: var(--spacing-md);
      width: 32px;
      height: 32px;
      background: var(--primary-gradient);
      color: var(--primary-contrast);
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: var(--font-bold);
      font-size: 14px;
      z-index: 2;
    }
    .top10-poster {
      width: 100%;
      aspect-ratio: 2/3;
      overflow: hidden;
      background-color: #f1f5f9;
    }
    .top10-poster img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    .top10-card:hover .top10-poster img {
      transform: scale(1.05);
    }
    .top10-content {
      padding: var(--spacing-md);
    }
    .top10-content h4 {
      font-size: 14px;
      margin-bottom: var(--spacing-xs);
      line-height: 1.3;
    }
    .top10-rating {
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
      color: var(--indicator-warning);
      font-weight: var(--font-bold);
      font-size: 12px;
    }

    /* Catalog Section */
    .catalog-section {
      padding: var(--spacing-3xl) 0;
      background-color: var(--background-app);
    }
    .catalog-controls {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-sm);
      margin-bottom: var(--spacing-xl);
      justify-content: center;
    }
    .pill {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-sm);
      padding: 10px 20px;
      border-radius: var(--radius-full);
      background-color: var(--background-surface);
      border: 1px solid var(--indicator-border);
      color: var(--text-body);
      font-weight: var(--font-medium);
      cursor: pointer;
      transition: all 0.2s ease;
      user-select: none;
    }
    .pill:hover {
      border-color: var(--text-accent);
      color: var(--text-accent);
    }
    .pill.active {
      background: var(--primary-gradient);
      color: var(--primary-contrast);
      border-color: transparent;
    }
    .search-box {
      width: 100%;
      max-width: 600px;
      margin: var(--spacing-lg) auto;
      position: relative;
    }
    .search-input {
      width: 100%;
      padding: 14px 20px 14px 48px;
      border: 1px solid var(--indicator-border);
      border-radius: var(--radius-md);
      background-color: var(--background-surface);
      color: var(--text-heading);
      font-size: 14px;
      transition: all 0.2s ease;
    }
    .search-input:focus {
      outline: none;
      border-color: var(--text-accent);
      box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
    }
    .search-icon {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-body);
    }
    .catalog-grid {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: var(--grid-gap);
    }
    @media (min-width: 640px) {
      .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (min-width: 768px) {
      .catalog-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    @media (min-width: 1024px) {
      .catalog-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }
    @media (min-width: 1200px) {
      .catalog-grid {
        grid-template-columns: repeat(5, 1fr);
      }
    }
    .catalog-card {
      background-color: var(--background-card);
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: var(--shadow-card);
      transition: all 0.3s ease;
      border: 1px solid var(--indicator-border);
    }
    .catalog-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-elevated);
      border-color: rgba(139, 92, 246, 0.3);
    }
    .card-poster {
      width: 100%;
      aspect-ratio: 2/3;
      overflow: hidden;
      background-color: #f1f5f9;
    }
    .card-poster img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    .catalog-card:hover .card-poster img {
      transform: scale(1.05);
    }
    .card-content {
      padding: var(--spacing-md);
    }
    .card-content h4 {
      font-size: 14px;
      margin-bottom: var(--spacing-sm);
      line-height: 1.3;
      height: 36px;
      overflow: hidden;
    }
    .card-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--spacing-sm);
      font-size: 12px;
      color: var(--text-body);
    }
    .card-rating {
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
      color: var(--indicator-warning);
      font-weight: var(--font-bold);
    }
    .card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-xs);
    }
    .tag {
      padding: 4px 8px;
      background-color: rgba(139, 92, 246, 0.1);
      color: var(--text-accent);
      border-radius: var(--radius-full);
      font-size: 10px;
      font-weight: var(--font-medium);
    }

    /* Plans Section */
    .plans-section {
      padding: var(--spacing-3xl) 0;
      background-color: var(--background-surface);
    }
    .plans-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--spacing-xl);
    }
    @media (min-width: 768px) {
      .plans-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    .plan-card {
      background-color: var(--background-card);
      border-radius: var(--radius-lg);
      padding: var(--card-padding);
      box-shadow: var(--shadow-card);
      border: 1px solid var(--indicator-border);
      position: relative;
      transition: all 0.3s ease;
    }
    .plan-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-elevated);
    }
    .plan-badge {
      position: absolute;
      top: var(--spacing-md);
      right: var(--spacing-md);
      padding: 6px 16px;
      border-radius: var(--radius-full);
      font-size: 12px;
      font-weight: var(--font-bold);
      background-color: var(--background-surface);
      border: 1px solid var(--indicator-border);
    }
    .plan-badge.red {
      color: #DC2626;
      border-color: rgba(220, 38, 38, 0.2);
      background-color: rgba(220, 38, 38, 0.1);
    }
    .plan-badge.blue {
      color: var(--text-accent);
      border-color: rgba(139, 92, 246, 0.2);
      background-color: rgba(139, 92, 246, 0.1);
    }
    .plan-badge.gold {
      color: #D97706;
      border-color: rgba(217, 119, 6, 0.2);
      background-color: rgba(217, 119, 6, 0.1);
    }
    .plan-card h3 {
      margin-bottom: var(--spacing-xs);
    }
    .plan-subtitle {
      color: var(--text-body);
      font-size: 14px;
      margin-bottom: var(--spacing-lg);
    }
    .plan-price {
      font-size: 48px;
      font-weight: var(--font-bold);
      margin-bottom: var(--spacing-lg);
      background: var(--primary-gradient);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .plan-price span {
      font-size: 14px;
      color: var(--text-body);
    }
    .plan-features {
      list-style: none;
      margin-bottom: var(--spacing-xl);
    }
    .plan-features li {
      display: flex;
      align-items: center;
      gap: var(--spacing-md);
      margin-bottom: var(--spacing-md);
      color: var(--text-body);
    }
    .feature-check {
      width: 20px;
      height: 20px;
      border-radius: var(--radius-full);
      background-color: rgba(16, 185, 129, 0.1);
      color: var(--indicator-success);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      flex-shrink: 0;
    }

    /* Apps Section - Mejorado */
    .apps-section {
      padding: var(--spacing-3xl) 0;
      background-color: var(--background-app);
    }
    .apps-grid {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: var(--grid-gap);
    }
    @media (min-width: 640px) {
      .apps-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (min-width: 1024px) {
      .apps-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    .app-card {
      background-color: var(--background-card);
      border-radius: var(--radius-lg);
      padding: var(--spacing-xl);
      text-align: center;
      box-shadow: var(--shadow-card);
      transition: all 0.3s ease;
      border: 1px solid var(--indicator-border);
      position: relative;
      overflow: hidden;
    }
    .app-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--primary-gradient);
      transform: translateY(-100%);
      transition: transform 0.3s ease;
    }
    .app-card:hover::before {
      transform: translateY(0);
    }
    .app-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-elevated);
    }
    .app-icon {
      width: 80px;
      height: 80px;
      border-radius: 24px;
      background: var(--primary-gradient);
      color: var(--primary-contrast);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto var(--spacing-lg);
      font-size: 36px;
      box-shadow: var(--shadow-button);
    }
    .app-card h4 {
      font-size: 20px;
      margin-bottom: var(--spacing-sm);
      color: var(--text-heading);
    }
    .app-card p {
      font-size: 14px;
      color: var(--text-body);
      margin-bottom: var(--spacing-lg);
      line-height: 1.5;
    }
    .app-instructions {
      background-color: var(--background-app);
      border-radius: var(--radius-md);
      padding: var(--spacing-md);
      margin: var(--spacing-md) 0;
      font-size: 13px;
      color: var(--text-body);
      border-left: 3px solid var(--text-accent);
      text-align: left;
    }
    .code-block {
      background-color: var(--background-card);
      border: 1px solid var(--indicator-border);
      border-radius: var(--radius-sm);
      padding: var(--spacing-sm) var(--spacing-md);
      font-family: monospace;
      font-size: 18px;
      font-weight: bold;
      color: var(--text-accent);
      margin: var(--spacing-sm) 0;
      text-align: center;
    }

    /* Request Section */
    .request-section {
      padding: var(--spacing-3xl) 0;
      background-color: var(--background-surface);
      border-top: 1px solid var(--indicator-border);
    }
    .request-form {
      max-width: 800px;
      margin: 0 auto;
      background-color: var(--background-card);
      border-radius: var(--radius-lg);
      padding: var(--spacing-xl);
      box-shadow: var(--shadow-card);
    }
    .form-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--spacing-lg);
      margin-bottom: var(--spacing-lg);
    }
    @media (min-width: 768px) {
      .form-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    .form-group {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm);
    }
    .form-label {
      font-weight: var(--font-medium);
      color: var(--text-heading);
      font-size: 14px;
    }
    .form-input, .form-select, .form-textarea {
      padding: 12px 16px;
      border: 1px solid var(--indicator-border);
      border-radius: var(--radius-sm);
      background-color: var(--background-surface);
      color: var(--text-heading);
      font-size: 14px;
      transition: all 0.2s ease;
    }
    .form-input:focus, .form-select:focus, .form-textarea:focus {
      outline: none;
      border-color: var(--text-accent);
      box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
    }
    .radio-group {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-md);
      margin-top: var(--spacing-xs);
    }
    .radio-option {
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
      cursor: pointer;
    }
    .radio-input {
      display: none;
    }
    .radio-custom {
      width: 18px;
      height: 18px;
      border-radius: var(--radius-full);
      border: 2px solid var(--indicator-border);
      position: relative;
      transition: all 0.2s ease;
    }
    .radio-input:checked + .radio-custom {
      border-color: var(--text-accent);
    }
    .radio-input:checked + .radio-custom::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 8px;
      height: 8px;
      border-radius: var(--radius-full);
      background-color: var(--text-accent);
    }

    /* WhatsApp Buttons */
    .whatsapp-buttons {
      display: flex;
      gap: var(--spacing-md);
      justify-content: center;
      margin-top: var(--spacing-lg);
      flex-wrap: wrap;
    }

    .whatsapp-btn {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-sm);
      padding: 12px 24px;
      border-radius: var(--radius-full);
      font-weight: var(--font-bold);
      text-decoration: none;
      transition: all 0.3s ease;
    }

    .whatsapp-btn-primary {
      background: linear-gradient(135deg, #25D366, #128C7E);
      color: white;
    }

    .whatsapp-btn-secondary {
      background: var(--primary-gradient);
      color: white;
    }

    .whatsapp-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }

    /* Preview Box */
    .preview-box {
      background-color: var(--background-surface);
      border-radius: var(--radius-md);
      padding: var(--spacing-lg);
      margin-top: var(--spacing-xl);
      border: 1px solid var(--indicator-border);
      display: none;
    }
    .preview-content {
      background-color: rgba(139, 92, 246, 0.05);
      border-radius: var(--radius-sm);
      padding: var(--spacing-lg);
      font-family: monospace;
      white-space: pre-wrap;
      word-break: break-word;
      font-size: 13px;
      line-height: 1.5;
      margin-bottom: var(--spacing-lg);
      border: 1px solid var(--indicator-border);
    }

    /* Modal */
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 2000;
      padding: var(--spacing-md);
    }
    .modal.show {
      display: flex;
    }
    .modal-content {
      background-color: var(--background-card);
      border-radius: var(--radius-lg);
      max-width: 1000px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: var(--shadow-elevated);
    }
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--spacing-lg);
      border-bottom: 1px solid var(--indicator-border);
    }
    .modal-close {
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: var(--text-body);
    }
    .modal-body {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--spacing-xl);
      padding: var(--spacing-lg);
    }
    @media (min-width: 768px) {
      .modal-body {
        grid-template-columns: 300px 1fr;
      }
    }
    .modal-poster {
      width: 100%;
      border-radius: var(--radius-md);
      overflow: hidden;
      background-color: #f1f5f9;
    }
    .modal-poster img {
      width: 100%;
      height: auto;
      display: block;
    }
    .modal-info h3 {
      margin-bottom: var(--spacing-md);
    }
    .modal-meta {
      display: flex;
      gap: var(--spacing-md);
      margin-bottom: var(--spacing-lg);
      color: var(--text-body);
      font-size: 14px;
    }
    .modal-rating {
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
      color: var(--indicator-warning);
      font-weight: var(--font-bold);
    }
    .modal-description {
      margin-bottom: var(--spacing-lg);
      line-height: 1.6;
    }
    .modal-tags {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-sm);
      margin-bottom: var(--spacing-xl);
    }
    .modal-actions {
      display: flex;
      gap: var(--spacing-md);
      flex-wrap: wrap;
    }

    /* Footer */
    footer {
      background-color: var(--background-surface);
      border-top: 1px solid var(--indicator-border);
      padding: var(--spacing-xl) 0;
      text-align: center;
      transition: background-color 0.3s ease, border-color 0.2s ease;
    }
    .footer-content {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-md);
    }
    .footer-disclaimer {
      font-size: 12px;
      color: var(--text-body);
      max-width: 600px;
      margin: 0 auto;
    }

    /* WhatsApp Float */
    .whatsapp-float {
      position: fixed;
      bottom: var(--spacing-xl);
      right: var(--spacing-xl);
      width: 60px;
      height: 60px;
      background-color: #25D366;
      color: white;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      box-shadow: var(--shadow-elevated);
      z-index: 1000;
      transition: all 0.3s ease;
      text-decoration: none;
    }
    .whatsapp-float:hover {
      transform: scale(1.1);
      box-shadow: var(--shadow-hover);
    }

    /* Pagination */
    .pagination {
      display: flex;
      justify-content: center;
      gap: var(--spacing-sm);
      margin-top: var(--spacing-2xl);
      flex-wrap: wrap;
    }
    .page-btn {
      width: 40px;
      height: 40px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--indicator-border);
      background-color: var(--background-surface);
      color: var(--text-body);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      font-weight: var(--font-medium);
    }
    .page-btn:hover {
      border-color: var(--text-accent);
      color: var(--text-accent);
    }
    .page-btn.active {
      background: var(--primary-gradient);
      color: var(--primary-contrast);
      border-color: transparent;
    }

    /* Loading State */
    .loading {
      text-align: center;
      padding: var(--spacing-3xl);
      grid-column: 1 / -1;
    }
    .loading-spinner {
      width: 40px;
      height: 40px;
      border: 3px solid rgba(139, 92, 246, 0.1);
      border-radius: var(--radius-full);
      border-top-color: var(--text-accent);
      animation: spin 1s linear infinite;
      margin: 0 auto var(--spacing-md);
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    .text-center { text-align: center; }
    .mt-1 { margin-top: var(--spacing-sm); }
    .mt-2 { margin-top: var(--spacing-md); }
    .mt-3 { margin-top: var(--spacing-lg); }
    .mt-4 { margin-top: var(--spacing-xl); }
    .mb-1 { margin-bottom: var(--spacing-sm); }
    .mb-2 { margin-bottom: var(--spacing-md); }
    .mb-3 { margin-bottom: var(--spacing-lg); }
    .mb-4 { margin-bottom: var(--spacing-xl); }

    @media (max-width: 768px) {
      .header-content {
        flex-direction: row;
        gap: var(--spacing-md);
      }
      .hamburger-menu {
        display: block;
      }
      .nav-links {
        display: none;
      }
      .mobile-nav {
        display: block;
      }
      h1 { font-size: 24px; }
      h2 { font-size: 20px; }
      .hero h2 { font-size: 32px; }
      .plan-price {
        font-size: 36px;
      }
      .whatsapp-float {
        bottom: var(--spacing-md);
        right: var(--spacing-md);
        width: 50px;
        height: 50px;
        font-size: 24px;
      }
    }
    @media (min-width: 769px) {
      .mobile-nav {
        display: none !important;
      }
    }
  </style>
</head>
<body>
<!-- WhatsApp Floating Button -->
<a href="<?php echo htmlspecialchars($waGeneral); ?>" class="whatsapp-float" target="_blank" rel="noopener" aria-label="Contactar por WhatsApp">
  <i class="fab fa-whatsapp"></i>
</a>

<header>
  <div class="container header-content">
    <div class="brand">
      <?php if (!empty($iptvLogoUrl)): ?>
        <div class="brand-logo-wrap">
          <img class="brand-logo" src="<?php echo htmlspecialchars($iptvLogoUrl); ?>" alt="Logo">
        </div>
      <?php else: ?>
        <h1><?php echo htmlspecialchars($brand); ?></h1>
      <?php endif; ?>
      <p><?php echo htmlspecialchars($subtitle); ?></p>
    </div>
    
    <button class="hamburger-menu" id="hamburgerBtn" aria-label="Abrir menú">
      <i class="fas fa-bars"></i>
    </button>
    
    <div class="nav-links">
      <a href="<?php echo htmlspecialchars($homeButtonUrl); ?>" class="btn-home" target="_blank" rel="noopener">
        <i class="fas fa-home"></i> Inicio
      </a>
      <a href="#catalogo" class="nav-link">Catálogo</a>
      <a href="#solicitud" class="nav-link">Solicitar</a>
      <a href="#planes" class="nav-link">Planes</a>
      <a href="#apps" class="nav-link">Apps</a>
      <!-- Botón de tema (escritorio) -->
      <button class="theme-toggle" id="themeToggleDesktop" aria-label="Cambiar tema">
        <i class="fas fa-sun"></i>
      </button>
      <a href="<?php echo htmlspecialchars($waGeneral); ?>" class="btn btn-primary" target="_blank" rel="noopener">
        <i class="fab fa-whatsapp"></i> WhatsApp
      </a>
    </div>
  </div>
</header>

<!-- Menú Hamburguesa (Móvil) -->
<div class="mobile-nav" id="mobileNav">
  <div class="mobile-nav-header">
    <div class="brand">
      <?php if (!empty($iptvLogoUrl)): ?>
        <div class="brand-logo-wrap">
          <img class="brand-logo" src="<?php echo htmlspecialchars($iptvLogoUrl); ?>" alt="Logo">
        </div>
      <?php else: ?>
        <h1><?php echo htmlspecialchars($brand); ?></h1>
      <?php endif; ?>
      <p><?php echo htmlspecialchars($subtitle); ?></p>
    </div>
    <button class="hamburger-menu" id="closeMobileBtn" aria-label="Cerrar menú">
      <i class="fas fa-times"></i>
    </button>
  </div>
  
  <div class="mobile-nav-links">
    <a href="<?php echo htmlspecialchars($homeButtonUrl); ?>" class="mobile-nav-link" target="_blank" rel="noopener">
      <i class="fas fa-home"></i> Inicio
    </a>
    <a href="#catalogo" class="mobile-nav-link">
      <i class="fas fa-film"></i> Catálogo
    </a>
    <a href="#solicitud" class="mobile-nav-link">
      <i class="fas fa-paper-plane"></i> Solicitar
    </a>
    <a href="#planes" class="mobile-nav-link">
      <i class="fas fa-tags"></i> Planes
    </a>
    <a href="#apps" class="mobile-nav-link">
      <i class="fas fa-mobile-alt"></i> Apps
    </a>
    <!-- Botón de tema (móvil) -->
    <button class="mobile-nav-link theme-toggle" id="themeToggleMobile" style="width:100%; text-align:left; background:none; border:none;">
      <i class="fas fa-sun"></i> Tema claro/oscuro
    </button>
  </div>
  
  <div class="mobile-nav-actions">
    <a href="<?php echo htmlspecialchars($waGeneral); ?>" class="btn btn-primary" target="_blank" rel="noopener">
      <i class="fab fa-whatsapp"></i> Contactar por WhatsApp
    </a>
    <a href="#catalogo" class="btn btn-secondary">
      <i class="fas fa-play-circle"></i> Explorar Catálogo
    </a>
  </div>
</div>

<!-- HERO SECTION -->
<section class="hero">
  <div class="container hero-content">
    <span class="hero-badge">
      <i class="fas <?php echo htmlspecialchars($badgeIcon); ?>"></i> <?php echo htmlspecialchars($badgeText); ?>
    </span>
    <h2><?php echo htmlspecialchars($heroTitle); ?></h2>
    <p><?php echo htmlspecialchars($heroSubtitle); ?></p>
    <div class="whatsapp-buttons">
      <a href="<?php echo htmlspecialchars($waGeneral); ?>" class="whatsapp-btn whatsapp-btn-primary" target="_blank" rel="noopener">
        <i class="fab fa-whatsapp"></i> Contactar Soporte 1
      </a>
      <a href="<?php echo htmlspecialchars($waGeneral2); ?>" class="whatsapp-btn whatsapp-btn-secondary" target="_blank" rel="noopener">
        <i class="fab fa-whatsapp"></i> Contactar Soporte 2
      </a>
    </div>
    <a href="#catalogo" class="btn btn-primary" style="margin-top: var(--spacing-lg);">
      <i class="fas fa-play-circle"></i> <?php echo htmlspecialchars($heroBtnText); ?>
    </a>
  </div>
</section>

<!-- TOP 10 SECTION -->
<section class="top10-section" id="catalogo">
  <div class="container">
    <div class="section-header">
      <h2><?php echo htmlspecialchars($top10Title); ?></h2>
      <p><?php echo htmlspecialchars($top10Sub); ?></p>
    </div>
    
    <div class="top10-grid">
      <!-- TOP 10 se carga dinámicamente con JS -->
      <div class="loading">
        <div class="loading-spinner"></div>
        <p>Cargando contenido destacado...</p>
      </div>
    </div>
  </div>
</section>

<!-- CATALOG SECTION -->
<section class="catalog-section">
  <div class="container">
    <div class="section-header">
      <h2><?php echo htmlspecialchars($catalogTitle); ?></h2>
      <p><?php echo htmlspecialchars($catalogSub); ?></p>
    </div>
    
    <div class="catalog-controls">
      <div id="tabAll" class="pill active" data-filter="all">
        <i class="fas fa-globe"></i> Todo
      </div>
      <div id="tabMovies" class="pill" data-filter="movie">
        <i class="fas fa-film"></i> Películas
      </div>
      <div id="tabSeries" class="pill" data-filter="series">
        <i class="fas fa-tv"></i> Series
      </div>
      <div id="tabTop" class="pill" data-filter="top">
        <i class="fas fa-star"></i> Destacados
      </div>
    </div>
    
    <div class="search-box">
      <i class="fas fa-search search-icon"></i>
      <input id="search" class="search-input" placeholder="Buscar película o serie..." />
    </div>
    
    <div id="resultsInfo" class="text-center mb-4" style="color: var(--text-body); font-weight: var(--font-medium);"></div>
    
    <div id="catalogGrid" class="catalog-grid">
      <div class="loading">
        <div class="loading-spinner"></div>
        <p>Cargando catálogo...</p>
      </div>
    </div>
    
    <div id="pagination" class="pagination"></div>
  </div>
</section>

<!-- PLANS SECTION -->
<section class="plans-section" id="planes">
  <div class="container">
    <div class="section-header">
      <h2><?php echo htmlspecialchars($plansTitle); ?></h2>
      <p>Elige el plan perfecto para tu entretenimiento</p>
    </div>
    
    <div class="plans-grid">
      <article class="plan-card">
        <div class="plan-badge red">
          <i class="fas fa-bolt"></i> PRUEBA
        </div>
        <h3>DEMO GRATIS</h3>
        <div class="plan-subtitle">Prueba nuestro servicio sin costo</div>
        <div class="plan-price"><?php echo htmlspecialchars($demoPriceText); ?> <span>/ <?php echo htmlspecialchars($planDemoPeriod); ?></span></div>
        <ul class="plan-features">
          <li><span class="feature-check">✓</span> 1 pantalla / dispositivo</li>
          <li><span class="feature-check">✓</span> +5,000 canales SD & HD</li>
          <li><span class="feature-check">✓</span> +20,000 películas</li>
          <li><span class="feature-check">✓</span> +2,200 series de TV</li>
          <li><span class="feature-check">✓</span> Full Deportes HD/4K</li>
        </ul>
        <a class="btn btn-primary" href="<?php echo htmlspecialchars($waDemo); ?>" target="_blank" rel="noopener">
          <i class="fab fa-whatsapp"></i> Solicitar Demo
        </a>
      </article>
      
      <article class="plan-card">
        <div class="plan-badge blue">
          <i class="fas fa-users"></i> POPULAR
        </div>
        <h3>PLAN FAMILIAR</h3>
        <div class="plan-subtitle">Ideal para toda la familia</div>
        <div class="plan-price"><?php echo htmlspecialchars($famPriceText); ?> <span>/ <?php echo htmlspecialchars($planFamPeriod); ?></span></div>
        <ul class="plan-features">
          <li><span class="feature-check">✓</span> 4 pantallas simultáneas</li>
          <li><span class="feature-check">✓</span> +8,000 canales HD/4K</li>
          <li><span class="feature-check">✓</span> +22,000 películas Cine</li>
          <li><span class="feature-check">✓</span> +2,500 series de TV</li>
          <li><span class="feature-check">✓</span> Full Deportes HD/4K</li>
          <li><span class="feature-check">✓</span> Soporte 24/7</li>
        </ul>
        <a class="btn btn-primary" href="<?php echo htmlspecialchars($waFamiliar); ?>" target="_blank" rel="noopener">
          <i class="fab fa-whatsapp"></i> Comenzar Ahora
        </a>
      </article>
      
      <article class="plan-card">
        <div class="plan-badge gold">
          <i class="fas fa-gem"></i> MEJOR VALOR
        </div>
        <h3>PLAN PLUS</h3>
        <div class="plan-subtitle">Experiencia completa premium</div>
        <div class="plan-price"><?php echo htmlspecialchars($plusPriceText); ?> <span>/ <?php echo htmlspecialchars($planPlusPeriod); ?></span></div>
        <ul class="plan-features">
          <li><span class="feature-check">✓</span> 4 pantallas simultáneas</li>
          <li><span class="feature-check">✓</span> +8,000 canales HD/4K</li>
          <li><span class="feature-check">✓</span> +22,000 películas Cine</li>
          <li><span class="feature-check">✓</span> +2,500 series de TV</li>
          <li><span class="feature-check">✓</span> Full Deportes HD/4K</li>
          <li><span class="feature-check">✓</span> Ahorra más del 60%</li>
        </ul>
        <a class="btn btn-primary" href="<?php echo htmlspecialchars($waPlus); ?>" target="_blank" rel="noopener">
          <i class="fab fa-whatsapp"></i> Comenzar Ahora
        </a>
      </article>
    </div>
    
    <div class="text-center mt-4" style="color: var(--text-body); font-size: 14px;">
      <i class="fas fa-shield-alt"></i> Todos los planes incluyen: Soporte 24/7 • Activación inmediata • Compatible con múltiples dispositivos • Garantía de estabilidad.
    </div>
    
    <div class="whatsapp-buttons">
      <a href="<?php echo htmlspecialchars($waGeneral); ?>" class="whatsapp-btn whatsapp-btn-primary" target="_blank" rel="noopener">
        <i class="fab fa-whatsapp"></i> Soporte 1: <?php echo htmlspecialchars($whatsappNumber); ?>
      </a>
      <a href="<?php echo htmlspecialchars($waGeneral2); ?>" class="whatsapp-btn whatsapp-btn-secondary" target="_blank" rel="noopener">
        <i class="fab fa-whatsapp"></i> Soporte 2: <?php echo htmlspecialchars($whatsappNumber2); ?>
      </a>
    </div>
  </div>
</section>

<!-- APPS SECTION - MEJORADA -->
<section class="apps-section" id="apps">
  <div class="container">
    <div class="section-header">
      <h2><?php echo htmlspecialchars($appsTitle); ?></h2>
      <p><?php echo htmlspecialchars($appsSub); ?></p>
    </div>
    
    <div class="apps-grid">
      <div class="app-card">
        <div class="app-icon">
          <i class="fab fa-android"></i>
        </div>
        <h4>Android</h4>
        <p>Móvil & Tablet — Descarga la app oficial</p>
        <a href="https://play.google.com/store/apps/details?id=tvmagico.appcom" class="btn btn-primary" target="_blank" rel="noopener">
          <i class="fas fa-download"></i> Google Play
        </a>
      </div>
      
      <div class="app-card">
        <div class="app-icon">
          <i class="fab fa-apple"></i>
        </div>
        <h4>iOS</h4>
        <p>iPhone & iPad — App recomendada</p>
        <a href="https://apps.apple.com/us/app/smarters-player-lite/id1628995509" class="btn btn-primary" target="_blank" rel="noopener">
          <i class="fab fa-apple"></i> App Store
        </a>
      </div>
      
      <div class="app-card">
        <div class="app-icon">
          <i class="fas fa-tv"></i>
        </div>
        <h4>Smart TV</h4>
        <p>Samsung & LG — App recomendada</p>
        <div class="app-instructions">
          <strong>Instrucciones:</strong> Busca "Smart IPTV" o "SS IPTV" en la tienda de tu TV
        </div>
        <a href="<?php echo htmlspecialchars(waLink($whatsappNumber, "Hola! Tengo Smart TV. ¿Cómo configuro IPTV?")); ?>" class="btn btn-secondary" target="_blank" rel="noopener">
          <i class="fas fa-info-circle"></i> Ayuda Configuración
        </a>
      </div>
      
      <div class="app-card">
        <div class="app-icon">
          <i class="fas fa-box"></i>
        </div>
        <h4>Android TV</h4>
        <p>TV Box & Fire Stick — Fácil instalación</p>
        <div class="app-instructions">
          <strong>En Downloader, ingresa el código:</strong>
          <div class="code-block">3673039</div>
        </div>
        <a href="<?php echo htmlspecialchars(waLink($whatsappNumber, "Hola! Tengo Android TV / Fire Stick. ¿Cómo instalo y configuro?")); ?>" class="btn btn-secondary" target="_blank" rel="noopener">
          <i class="fas fa-info-circle"></i> Ver instrucciones
        </a>
      </div>
      
      <div class="app-card">
        <div class="app-icon">
          <i class="fas fa-satellite-dish"></i>
        </div>
        <h4>Roku</h4>
        <p>Streaming Device — Configuración</p>
        <div class="app-instructions">
          <strong>Pasos:</strong><br>
          1. Abre el Roku Channel Store<br>
          2. Busca "TV Mágico"<br>
          3. Instala el canal<br>
          4. Solicita demo para configuración
        </div>
        <a href="<?php echo htmlspecialchars(waLink($whatsappNumber, "Hola! Tengo Roku. ¿Cómo configuro IPTV?")); ?>" class="btn btn-secondary" target="_blank" rel="noopener">
          <i class="fas fa-info-circle"></i> Ayuda Configuración
        </a>
      </div>
      
      <div class="app-card">
        <div class="app-icon">
          <i class="fab fa-windows"></i>
        </div>
        <h4>Windows/Mac</h4>
        <p>PC & Laptop — App recomendada</p>
        <div class="app-instructions">
          <strong>Recomendado:</strong> IPTV Smarters Pro o VLC Media Player
        </div>
        <a href="<?php echo htmlspecialchars(waLink($whatsappNumber, "Hola! Quiero ver IPTV en PC. ¿Qué app recomiendas?")); ?>" class="btn btn-secondary" target="_blank" rel="noopener">
          <i class="fas fa-info-circle"></i> Ver opciones
        </a>
      </div>
    </div>
  </div>
</section>

<!-- REQUEST SECTION -->
<section class="request-section" id="solicitud">
  <div class="container">
    <div class="section-header">
      <h2><?php echo htmlspecialchars($requestTitle); ?></h2>
      <p><?php echo htmlspecialchars($requestSub); ?></p>
    </div>
    
    <div class="request-form">
      <div class="form-grid">
        <div class="form-group">
          <label class="form-label">Tu Nombre</label>
          <input type="text" id="requestName" class="form-input" placeholder="Ej: Juan Pérez" required>
        </div>
        
        <div class="form-group">
          <label class="form-label">Correo Electrónico (opcional)</label>
          <input type="email" id="requestEmail" class="form-input" placeholder="ejemplo@correo.com">
        </div>
        
        <div class="form-group">
          <label class="form-label">Tipo de Contenido</label>
          <div class="radio-group">
            <label class="radio-option">
              <input type="radio" name="contentType" value="movie" checked>
              <span class="radio-custom"></span>
              <span class="radio-label">Película</span>
            </label>
            <label class="radio-option">
              <input type="radio" name="contentType" value="series">
              <span class="radio-custom"></span>
              <span class="radio-label">Serie</span>
            </label>
            <label class="radio-option">
              <input type="radio" name="contentType" value="channel">
              <span class="radio-custom"></span>
              <span class="radio-label">Canal</span>
            </label>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">¿Eres cliente actual?</label>
          <select id="requestCustomer" class="form-select">
            <option value="no">No, soy cliente nuevo</option>
            <option value="demo">Tengo demo activa</option>
            <option value="familiar">Plan Familiar</option>
            <option value="plus">Plan Plus</option>
          </select>
        </div>
      </div>
      
      <div class="form-group">
        <label class="form-label">Nombre del Contenido</label>
        <input type="text" id="requestTitle" class="form-input" placeholder="Ej: Lady, La Vendedora de Rosas" required>
      </div>
      
      <div class="form-grid">
        <div class="form-group">
          <label class="form-label">Año (opcional)</label>
          <input type="number" id="requestYear" class="form-input" placeholder="Ej: 2015" min="1900" max="2030">
        </div>
        
        <div class="form-group">
          <label class="form-label">Temporada (para series)</label>
          <input type="number" id="requestSeason" class="form-input" placeholder="Ej: 1" min="1">
        </div>
        
        <div class="form-group">
          <label class="form-label">Idioma Preferido</label>
          <select id="requestLanguage" class="form-select">
            <option value="es">Español</option>
            <option value="en">Inglés</option>
            <option value="dual">Español/Inglés</option>
            <option value="sub">Subtitulado</option>
          </select>
        </div>
      </div>
      
      <div class="form-group">
        <label class="form-label">Descripción o Detalles Adicionales</label>
        <textarea id="requestDescription" class="form-textarea" placeholder="Describe lo que buscas, calidad preferida (HD/4K), etc." rows="3"></textarea>
      </div>
      
      <div class="text-center mt-3">
        <button id="generateRequest" class="btn btn-primary">
          <i class="fas fa-paper-plane"></i> Generar Solicitud para WhatsApp
        </button>
      </div>
      
      <!-- Preview Box -->
      <div id="requestPreview" class="preview-box">
        <h4 class="mb-2">Vista Previa del Mensaje</h4>
        <div class="preview-content" id="previewContent"></div>
        <div class="modal-actions">
          <a id="whatsappRequestLink" class="btn btn-primary" target="_blank" rel="noopener">
            <i class="fab fa-whatsapp"></i> Enviar por WhatsApp
          </a>
          <button id="copyRequest" class="btn btn-secondary">
            <i class="fas fa-copy"></i> Copiar Mensaje
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- MODAL -->
<div id="modal" class="modal" aria-hidden="true">
  <div class="modal-content">
    <div class="modal-header">
      <h3 id="mTitle">Cargando...</h3>
      <button id="modalClose" class="modal-close">×</button>
    </div>
    <div class="modal-body">
      <div class="modal-poster">
        <img id="mPoster" src="" alt="">
      </div>
      <div class="modal-info">
        <div class="modal-meta">
          <span id="mType"></span>
          <span id="mYear"></span>
          <span class="modal-rating" id="mRating"></span>
        </div>
        <div class="modal-description" id="mDescription"></div>
        <div class="modal-tags" id="mTags"></div>
        <div class="modal-actions">
          <a id="mWa" class="btn btn-primary" href="#" target="_blank" rel="noopener">
            <i class="fab fa-whatsapp"></i> Pedir por WhatsApp
          </a>
          <a class="btn btn-secondary" href="#planes">
            <i class="fas fa-tags"></i> Ver Planes
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<footer>
  <div class="container footer-content">
    <p>© <?php echo date('Y'); ?> <?php echo htmlspecialchars($brand); ?> — Soporte vía WhatsApp</p>
    <div class="whatsapp-buttons">
      <a href="<?php echo htmlspecialchars($waGeneral); ?>" class="whatsapp-btn whatsapp-btn-primary" target="_blank" rel="noopener">
        <i class="fab fa-whatsapp"></i> Soporte 1: <?php echo htmlspecialchars($whatsappNumber); ?>
      </a>
      <a href="<?php echo htmlspecialchars($waGeneral2); ?>" class="whatsapp-btn whatsapp-btn-secondary" target="_blank" rel="noopener">
        <i class="fab fa-whatsapp"></i> Soporte 2: <?php echo htmlspecialchars($whatsappNumber2); ?>
      </a>
    </div>
    <p class="footer-disclaimer">
      <i class="fas fa-exclamation-triangle"></i> <?php echo htmlspecialchars($footerText); ?>
    </p>
  </div>
</footer>

<script>
  // ====== CÓDIGO EXISTENTE (no modificado) ======
  const API_BASE = "./api/tmdb.php";
  const WHATSAPP = <?php echo json_encode($whatsappNumber, JSON_UNESCAPED_UNICODE); ?>;

  const elGrid = document.getElementById('catalogGrid');
  const elPag = document.getElementById('pagination');
  const elSearch = document.getElementById('search');
  const elInfo = document.getElementById('resultsInfo');

  const hamburgerBtn = document.getElementById('hamburgerBtn');
  const closeMobileBtn = document.getElementById('closeMobileBtn');
  const mobileNav = document.getElementById('mobileNav');

  const tabs = document.querySelectorAll('.pill[data-filter]');
  let activeFilter = 'all';
  let query = '';
  let page = 1;
  const PER_PAGE = 10;

  let CATALOG = [];
  let TOP10 = [];

  function toggleMobileMenu() {
    mobileNav.classList.toggle('open');
    document.body.style.overflow = mobileNav.classList.contains('open') ? 'hidden' : 'auto';
  }

  function closeMobileMenu() {
    mobileNav.classList.remove('open');
    document.body.style.overflow = 'auto';
  }

  hamburgerBtn.addEventListener('click', toggleMobileMenu);
  closeMobileBtn.addEventListener('click', toggleMobileMenu);

  document.querySelectorAll('.mobile-nav-link').forEach(link => {
    link.addEventListener('click', closeMobileMenu);
  });

  mobileNav.addEventListener('click', (e) => {
    if (e.target === mobileNav) {
      closeMobileMenu();
    }
  });

  function waLink(text){
    return `https://wa.me/${WHATSAPP}?text=${encodeURIComponent(text)}`;
  }

  function normalize(str){
    return (str || '')
      .toString()
      .toLowerCase()
      .normalize("NFD")
      .replace(/[\u0300-\u036f]/g, "");
  }

  async function fetchJSON(url) {
    const res = await fetch(url, { cache: "no-store" });
    const ct = (res.headers.get("content-type") || "").toLowerCase();

    if (!ct.includes("application/json")) {
      const text = await res.text();
      throw new Error(`Respuesta no JSON (HTTP ${res.status}). Inicio: ${text.slice(0, 80)}`);
    }

    const data = await res.json();
    if (!res.ok) {
      throw new Error(data?.error || `Error HTTP ${res.status}`);
    }
    return data;
  }

  function matches(item){
    if (activeFilter === 'movie' && item.type !== 'movie') return false;
    if (activeFilter === 'series' && item.type !== 'series') return false;
    if (activeFilter === 'top' && Number(item.rating || 0) < 8.0) return false;

    if (!query) return true;
    const q = normalize(query);
    const hay = [
      item.title,
      item.type,
      ...(item.genres || []),
      String(item.year || ''),
    ].map(normalize).join(' ');

    return hay.includes(q);
  }

  function paginate(items){
    const total = items.length;
    const totalPages = Math.max(1, Math.ceil(total / PER_PAGE));
    if (page > totalPages) page = totalPages;
    const start = (page - 1) * PER_PAGE;
    return { total, totalPages, items: items.slice(start, start + PER_PAGE) };
  }

  function cardTemplate(item){
    const typeLabel = item.type === 'movie' ? 'Película' : 'Serie';
    const posterUrl = item.poster || 'https://via.placeholder.com/300x450/f8fafc/64748b?text=No+Image';

    return `
      <div class="catalog-card" data-tmdb="${item.tmdb_id}" data-type="${item.type}">
        <div class="card-poster">
          <img src="${posterUrl}" alt="${item.title || ''}" loading="lazy" />
        </div>
        <div class="card-content">
          <h4>${item.title || ''}</h4>
          <div class="card-meta">
            <div>${typeLabel} • ${item.year || ''}</div>
            <div class="card-rating">★ ${Number(item.rating || 0).toFixed(1).replace('.0','')}</div>
          </div>
          <div class="card-tags">
            ${(item.genres || []).slice(0, 2).map(g => `<span class="tag">${g}</span>`).join('')}
          </div>
        </div>
      </div>
    `;
  }

  function renderPagination(totalPages){
    elPag.innerHTML = '';
    if (totalPages <= 1) return;

    for (let i = 1; i <= totalPages; i++){
      const b = document.createElement('button');
      b.className = 'page-btn' + (i === page ? ' active' : '');
      b.textContent = i;
      b.addEventListener('click', () => {
        page = i;
        render();
        document.getElementById('catalogo').scrollIntoView({behavior:'smooth', block:'start'});
      });
      elPag.appendChild(b);
    }
  }

  function renderTop10FromCache(){
    const topWrap = document.querySelector('.top10-grid');
    if (!topWrap) return;

    if (!TOP10.length) {
      topWrap.innerHTML = `
        <div style="grid-column: 1 / -1; text-align: center; padding: 20px; color: var(--text-body);">
          <p>No se pudo cargar el TOP 10</p>
        </div>
      `;
      return;
    }

    topWrap.innerHTML = TOP10.map((item, idx) => {
      const posterUrl = item.poster || 'https://via.placeholder.com/300x450/f8fafc/64748b?text=No+Image';
      return `
        <div class="top10-card" data-tmdb="${item.tmdb_id}" data-type="${item.type}">
          <div class="top10-rank">${idx + 1}</div>
          <div class="top10-poster">
            <img src="${posterUrl}" alt="${item.title || ''}" loading="lazy">
          </div>
          <div class="top10-content">
            <h4>${item.title || ''}</h4>
            <div class="top10-rating">★ ${Number(item.rating || 0).toFixed(1).replace('.0', '')}</div>
          </div>
        </div>
      `;
    }).join('');

    document.querySelectorAll('.top10-card[data-tmdb]').forEach(card => {
      card.addEventListener('click', () => {
        const id = card.getAttribute('data-tmdb');
        const type = card.getAttribute('data-type') === 'series' ? 'tv' : 'movie';
        openDetailsModal(id, type);
      });
    });
  }

  async function loadTop10(){
    const topWrap = document.querySelector('.top10-grid');
    if (topWrap) {
      topWrap.innerHTML = `
        <div class="loading">
          <div class="loading-spinner"></div>
          <p>Cargando contenido destacado...</p>
        </div>
      `;
    }

    try {
      const [movies, series] = await Promise.all([
        fetchJSON(`${API_BASE}?action=popular&type=movie`),
        fetchJSON(`${API_BASE}?action=popular&type=tv`)
      ]);

      const allItems = [...(movies || []), ...(series || [])];
      TOP10 = allItems
        .sort((a, b) => (b.rating || 0) - (a.rating || 0))
        .slice(0, 10);

      renderTop10FromCache();
    } catch (e) {
      console.error("TOP10 error:", e);
      TOP10 = [];
      renderTop10FromCache();
    }
  }

  function render(){
    const filtered = CATALOG.filter(matches);
    const { total, totalPages, items } = paginate(filtered);

    elInfo.textContent = `${total} resultados encontrados`;

    if (items.length === 0) {
      elGrid.innerHTML = `
        <div style="grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--text-body);">
          <i class="fas fa-search" style="font-size: 48px; margin-bottom: 20px;"></i>
          <h3>No se encontraron resultados</h3>
          <p>${query ? `Intenta con otros términos distintos a "${query}"` : 'Intenta con otros filtros'}</p>
        </div>
      `;
    } else {
      elGrid.innerHTML = items.map(cardTemplate).join('');
    }

    renderPagination(totalPages);

    document.querySelectorAll('.catalog-card[data-tmdb]').forEach(card => {
      card.addEventListener('click', () => {
        const id = card.getAttribute('data-tmdb');
        const type = card.getAttribute('data-type') === 'series' ? 'tv' : 'movie';
        openDetailsModal(id, type);
      });
    });
  }

  // ===== Modal =====
  const modal = document.getElementById('modal');
  const modalClose = document.getElementById('modalClose');
  const mPoster = document.getElementById('mPoster');
  const mTitle = document.getElementById('mTitle');
  const mType = document.getElementById('mType');
  const mYear = document.getElementById('mYear');
  const mRating = document.getElementById('mRating');
  const mDescription = document.getElementById('mDescription');
  const mTags = document.getElementById('mTags');
  const mWa = document.getElementById('mWa');

  function openModalFromDetail(detail){
    const typeLabel = detail.type === 'series' ? 'Serie' : 'Película';
    const posterUrl = detail.poster || 'https://via.placeholder.com/350x525/f8fafc/64748b?text=No+Image';

    mPoster.src = posterUrl;
    mPoster.alt = detail.title || '';
    mTitle.textContent = detail.title || '';
    mType.textContent = typeLabel;
    mYear.textContent = detail.year || '';
    mRating.textContent = `★ ${Number(detail.rating || 0).toFixed(1).replace('.0','')}`;

    const extra =
      (detail.type === 'series' && detail.seasons) ? ` • ${detail.seasons} temporadas` :
      (detail.type === 'movie' && detail.runtime) ? ` • ${detail.runtime} min` : '';

    const overview = detail.overview || 'Sin descripción disponible.';

    mDescription.textContent = overview;

    mTags.innerHTML = (detail.genres || []).map(g => `<span class="tag">${g}</span>`).join('');

    const msg = `Hola! Quiero activar IPTV y ver "${detail.title}" (${typeLabel} - ${detail.year}). ¿Me ayudas con una demo o activación?`;
    mWa.href = waLink(msg);

    modal.classList.add('show');
    modal.setAttribute('aria-hidden','false');
    document.body.style.overflow = 'hidden';
  }

  function closeModal(){
    modal.classList.remove('show');
    modal.setAttribute('aria-hidden','true');
    document.body.style.overflow = 'auto';
  }

  modalClose.addEventListener('click', closeModal);
  modal.addEventListener('click', (e)=>{ if (e.target === modal) closeModal(); });
  document.addEventListener('keydown', (e)=>{ if (e.key === 'Escape') closeModal(); });

  async function openDetailsModal(id, tmdbType){
    mTitle.textContent = 'Cargando...';
    mDescription.textContent = 'Cargando detalles...';
    mTags.innerHTML = '';
    modal.classList.add('show');
    modal.setAttribute('aria-hidden','false');
    document.body.style.overflow = 'hidden';

    try {
      const detail = await fetchJSON(`${API_BASE}?action=details&type=${tmdbType}&id=${encodeURIComponent(id)}`);
      openModalFromDetail(detail);
    } catch (e) {
      console.error("details error:", e);
      const fallbackType = (tmdbType === 'tv') ? 'series' : 'movie';
      const item = CATALOG.find(x => String(x.tmdb_id) === String(id) && x.type === fallbackType);
      if (item) openModalFromDetail(item);
      else {
        mTitle.textContent = 'Error';
        mDescription.textContent = 'No se pudieron cargar los detalles.';
      }
    }
  }

  async function loadFromAPI(){
    elInfo.textContent = 'Cargando...';
    elGrid.innerHTML = '<div class="loading" style="grid-column: 1 / -1;"><div class="loading-spinner"></div><p>Cargando catálogo...</p></div>';
    elPag.innerHTML = '';

    try {
      if (query.length >= 2) {
        const type = (activeFilter === 'series') ? 'tv' : 'movie';
        CATALOG = await fetchJSON(`${API_BASE}?action=search&type=${type}&q=${encodeURIComponent(query)}`);
        page = 1;
        render();
        return;
      }

      if (activeFilter === 'series') {
        CATALOG = await fetchJSON(`${API_BASE}?action=trending&type=tv`);
      } else if (activeFilter === 'movie') {
        CATALOG = await fetchJSON(`${API_BASE}?action=trending&type=movie`);
      } else {
        const [m, t] = await Promise.all([
          fetchJSON(`${API_BASE}?action=trending&type=movie`),
          fetchJSON(`${API_BASE}?action=trending&type=tv`)
        ]);
        CATALOG = [...(m || []), ...(t || [])].sort((a,b)=> (b.rating||0) - (a.rating||0));
      }

      page = 1;
      render();
    } catch (e) {
      console.error("catalog error:", e);
      elGrid.innerHTML = `
        <div style="grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--text-body);">
          <i class="fas fa-exclamation-triangle" style="font-size: 48px; margin-bottom: 20px;"></i>
          <h3>Error al cargar el catálogo</h3>
          <p>${String(e.message || e)}</p>
          <p style="margin-top:10px;font-size:12px;color:rgba(100,116,139,.5);">
            Verifica que exista: <b>/alexa/iptv/api/tmdb.php</b>
          </p>
        </div>
      `;
    }
  }

  tabs.forEach(t => {
    t.addEventListener('click', () => {
      tabs.forEach(x => x.classList.remove('active'));
      t.classList.add('active');

      activeFilter = t.getAttribute('data-filter');
      query = '';
      elSearch.value = '';

      loadFromAPI();
    });
  });

  let searchTimer = null;
  elSearch.addEventListener('input', (e) => {
    query = e.target.value.trim();
    clearTimeout(searchTimer);
    searchTimer = setTimeout(() => loadFromAPI(), 350);
  });

  const generateRequestBtn = document.getElementById('generateRequest');
  const requestPreview = document.getElementById('requestPreview');
  const previewContent = document.getElementById('previewContent');
  const whatsappRequestLink = document.getElementById('whatsappRequestLink');
  const copyRequestBtn = document.getElementById('copyRequest');

  generateRequestBtn.addEventListener('click', function() {
    const name = document.getElementById('requestName').value.trim();
    const email = document.getElementById('requestEmail').value.trim();
    const contentType = document.querySelector('input[name="contentType"]:checked').value;
    const customer = document.getElementById('requestCustomer').value;
    const title = document.getElementById('requestTitle').value.trim();
    const year = document.getElementById('requestYear').value.trim();
    const season = document.getElementById('requestSeason').value.trim();
    const language = document.getElementById('requestLanguage').value;
    const description = document.getElementById('requestDescription').value.trim();

    if (!name || !title) {
      alert('Por favor completa al menos tu nombre y el título del contenido que buscas.');
      return;
    }

    let contentTypeText = '';
    let icon = '';
    switch(contentType) {
      case 'movie': contentTypeText = 'Película'; icon = '🎬'; break;
      case 'series': contentTypeText = 'Serie'; icon = '📺'; break;
      case 'channel': contentTypeText = 'Canal'; icon = '📡'; break;
      default: contentTypeText = 'Contenido'; icon = '📝';
    }

    let customerText = '';
    switch(customer) {
      case 'no': customerText = 'Cliente nuevo'; break;
      case 'demo': customerText = 'Demo activa'; break;
      case 'familiar': customerText = 'Plan Familiar'; break;
      case 'plus': customerText = 'Plan Plus'; break;
      default: customerText = 'Cliente';
    }

    let languageText = '';
    switch(language) {
      case 'es': languageText = 'Español'; break;
      case 'en': languageText = 'Inglés'; break;
      case 'dual': languageText = 'Español/Inglés'; break;
      case 'sub': languageText = 'Subtitulado'; break;
      default: languageText = 'Español';
    }

    let whatsappMessage = `${icon} SOLICITUD DE CONTENIDO - ${contentTypeText.toUpperCase()}\n`;
    whatsappMessage += `\n*👤 Solicitante:* ${name}`;
    if (email) whatsappMessage += `\n*📧 Correo:* ${email}`;
    whatsappMessage += `\n*📊 Tipo de Cliente:* ${customerText}`;
    whatsappMessage += `\n\n*${icon} ${contentTypeText} solicitada:*`;
    whatsappMessage += `\n*• Nombre:* ${title}`;
    if (year) whatsappMessage += `\n*• Año:* ${year}`;
    if (season && contentType === 'series') whatsappMessage += `\n*• Temporada:* ${season}`;
    whatsappMessage += `\n*• Idioma preferido:* ${languageText}`;

    if (description) {
      whatsappMessage += `\n\n*📝 Descripción adicional:*\n${description}`;
    }

    whatsappMessage += `\n\n_Esta solicitud fue generada desde el sitio web de JM TV Digital_`;

    previewContent.textContent = whatsappMessage;
    requestPreview.style.display = 'block';

    whatsappRequestLink.href = waLink(whatsappMessage);
    requestPreview.scrollIntoView({ behavior: 'smooth', block: 'center' });
  });

  copyRequestBtn.addEventListener('click', function() {
    const textToCopy = previewContent.textContent;
    navigator.clipboard.writeText(textToCopy).then(function() {
      const originalText = copyRequestBtn.innerHTML;
      copyRequestBtn.innerHTML = '<i class="fas fa-check"></i> ¡Copiado!';
      copyRequestBtn.style.background = 'var(--primary-gradient)';
      copyRequestBtn.style.color = '#fff';

      setTimeout(function() {
        copyRequestBtn.innerHTML = originalText;
        copyRequestBtn.style.background = '';
        copyRequestBtn.style.color = '';
      }, 2000);
    }).catch(function(err) {
      console.error('Error al copiar: ', err);
      alert('No se pudo copiar el texto. Por favor, cópialo manualmente.');
    });
  });

  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
      e.preventDefault();
      const targetId = this.getAttribute('href');
      if(targetId === '#') return;
      const targetElement = document.querySelector(targetId);
      if(targetElement) {
        closeMobileMenu();
        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  });

  // ====== NUEVO: LÓGICA DEL SELECTOR DE TEMA ======
  const themeToggleDesktop = document.getElementById('themeToggleDesktop');
  const themeToggleMobile = document.getElementById('themeToggleMobile');
  const body = document.body;

  // Función para aplicar el tema y actualizar iconos
  function setTheme(theme) {
    if (theme === 'dark') {
      body.classList.add('dark-mode');
      // Cambiar iconos a luna
      themeToggleDesktop.querySelector('i').className = 'fas fa-moon';
      themeToggleMobile.querySelector('i').className = 'fas fa-moon';
    } else {
      body.classList.remove('dark-mode');
      themeToggleDesktop.querySelector('i').className = 'fas fa-sun';
      themeToggleMobile.querySelector('i').className = 'fas fa-sun';
    }
    localStorage.setItem('theme', theme);
  }

  // Inicializar tema desde localStorage
  const savedTheme = localStorage.getItem('theme') || 'light';
  setTheme(savedTheme);

  // Event listeners para ambos botones
  function toggleTheme() {
    const isDark = body.classList.contains('dark-mode');
    setTheme(isDark ? 'light' : 'dark');
  }

  themeToggleDesktop.addEventListener('click', toggleTheme);
  themeToggleMobile.addEventListener('click', toggleTheme);

  // Iniciar carga de datos
  loadTop10();
  loadFromAPI();
</script>
</body>
</html>