<?php

declare(strict_types=1);

require_once __DIR__ . '/config.php';
require_once __DIR__ . '/config_ui.php';

if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

function af_index_e(mixed $value): string
{
    return htmlspecialchars((string)$value, ENT_QUOTES, 'UTF-8');
}

function af_index_symbol(string $code, string $configured): string
{
    $configured = trim($configured);
    if ($configured !== '') return $configured;
    return ['PEN'=>'S/','USD'=>'$','EUR'=>'€','MXN'=>'$','COP'=>'$','ARS'=>'$','CLP'=>'$','BRL'=>'R$'][strtoupper(trim($code))] ?? strtoupper(trim($code));
}

function af_index_limit(mixed $value): string
{
    if ($value === null || $value === '' || !is_numeric((string)$value) || (int)$value <= 0) return 'Ilimitado';
    return number_format((int)$value);
}

$planes = [];
try {
    $stmt = $pdo->query("SELECT * FROM planes WHERE visible_publico = 1 AND activo = 1 AND es_interno = 0 ORDER BY CASE WHEN LOWER(nombre_plan) = 'gratis' THEN 0 ELSE 1 END, orden_publico ASC, id ASC");
    $planes = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (Throwable $e) {
    try {
        $planes = $pdo->query("SELECT * FROM planes WHERE activo = 1 ORDER BY id ASC")->fetchAll(PDO::FETCH_ASSOC);
    } catch (Throwable $ignored) {
        error_log('Portada, planes: ' . $e->getMessage());
    }
}

$plataformas = [];
try {
    $plataformas = $pdo->query("SELECT id, nombre, concepto, imagen_url FROM plataformas ORDER BY orden ASC, nombre ASC LIMIT 12")->fetchAll(PDO::FETCH_ASSOC);
} catch (Throwable $e) {
    error_log('Portada, plataformas: ' . $e->getMessage());
}

$currencySymbol = af_index_symbol((string)($ui_currency ?? 'PEN'), (string)($ui_currency_symbol ?? ''));
$activePlans = count($planes);
$platformCount = count($plataformas);
$accessModes = 3;
$supportNumber = preg_replace('/\D+/', '', (string)($ui_support_whatsapp_number ?? ''));
$supportMessage = rawurlencode('Hola, deseo información sobre ' . (string)($ui_title_system ?? 'la plataforma') . ' y sus planes.');
$primaryUrl = $supportNumber !== '' ? 'https://wa.me/' . $supportNumber . '?text=' . $supportMessage : 'registro.php';

$featuredPlanId = 0;
$paidPlanIds = [];
$monthlyPlanCount = 0;
$annualPlanCount = 0;
$trialPlanCount = 0;
foreach ($planes as $candidatePlan) {
    $candidateMonthly = (int)($candidatePlan['permite_mensual'] ?? 0) === 1 && (float)($candidatePlan['precio_mensual'] ?? 0) > 0;
    $candidateAnnual = (int)($candidatePlan['permite_anual'] ?? 0) === 1 && (float)($candidatePlan['precio_anual'] ?? 0) > 0;
    $candidateTrialDays = (int)($candidatePlan['duracion_prueba_dias'] ?? 0);

    if ($candidateMonthly) $monthlyPlanCount++;
    if ($candidateAnnual) $annualPlanCount++;
    if (!$candidateMonthly && !$candidateAnnual && $candidateTrialDays > 0) $trialPlanCount++;

    if ($candidateMonthly || $candidateAnnual) {
        $paidPlanIds[] = (int)($candidatePlan['id'] ?? 0);
    }
    $candidateName = mb_strtolower((string)($candidatePlan['nombre_plan'] ?? ''), 'UTF-8');
    if ($featuredPlanId === 0 && (str_contains($candidateName, 'premium') || str_contains($candidateName, 'pro'))) {
        $featuredPlanId = (int)($candidatePlan['id'] ?? 0);
    }
}
if ($featuredPlanId === 0 && $paidPlanIds !== []) {
    $featuredPlanId = $paidPlanIds[min(1, count($paidPlanIds) - 1)];
}

$steps = [
    ['01','fa-plug-circle-bolt',$ui_landing_step_1_title ?? 'Conecta tu operación',$ui_landing_step_1_text ?? 'Configura buzones, dominios y asuntos.'],
    ['02','fa-users-gear',$ui_landing_step_2_title ?? 'Organiza clientes y cuentas',$ui_landing_step_2_text ?? 'Asigna servicios y controla vencimientos.'],
    ['03','fa-shield-halved',$ui_landing_step_3_title ?? 'Entrega accesos con seguridad',$ui_landing_step_3_text ?? 'Usa consultas públicas o accesos con ID.'],
];
$features = [
    ['fa-users',$ui_landing_feature_1_title ?? 'Clientes centralizados',$ui_landing_feature_1_text ?? 'Administra clientes y accesos.'],
    ['fa-calendar-check',$ui_landing_feature_2_title ?? 'Renovaciones ordenadas',$ui_landing_feature_2_text ?? 'Controla fechas y vencimientos.'],
    ['fa-shield-halved',$ui_landing_feature_3_title ?? 'Privacidad configurable',$ui_landing_feature_3_text ?? 'Define el acceso a cada contenido.'],
    ['fa-language',$ui_landing_feature_4_title ?? 'Alias flexibles',$ui_landing_feature_4_text ?? 'Localiza mensajes con variantes.'],
    ['fa-envelope-open-text',$ui_landing_feature_5_title ?? 'Tus propios buzones',$ui_landing_feature_5_text ?? 'Conecta Gmail o cPanel.'],
    ['fa-arrow-trend-up',$ui_landing_feature_6_title ?? 'Operación escalable',$ui_landing_feature_6_text ?? 'Crece sin perder organización.'],
];
$controls = [
    ['fa-magnifying-glass',$ui_landing_control_1_title ?? 'Consulta pública',$ui_landing_control_1_text ?? 'Consulta por plataforma y correo.'],
    ['fa-key',$ui_landing_control_2_title ?? 'Acceso con ID',$ui_landing_control_2_text ?? 'Protege contenido privado.'],
    ['fa-gauge-high',$ui_landing_control_3_title ?? 'Gestión administrativa',$ui_landing_control_3_text ?? 'Controla clientes, pagos y vigencias.'],
];
?>
<!doctype html>
<html lang="<?= af_index_e($ui_language ?? 'es') ?>">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="theme-color" content="<?= af_index_e($ui_color_button_hex ?? '#dc2626') ?>">
    <title><?= af_index_e($ui_seo_title ?? $ui_title_system ?? 'Ave Fénix') ?></title>
    <meta name="description" content="<?= af_index_e($ui_seo_description ?? $ui_brand_description ?? '') ?>">
    <?php if (!empty($ui_favicon_path)): ?><link rel="icon" href="<?= af_index_e($ui_favicon_path) ?>"><?php endif; ?>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link rel="stylesheet" href="assets/css/public-shared.css?v=1.2.0">
    <style>
    :root{--brand:<?= af_index_e($ui_color_button_hex ?? '#dc2626') ?>;--brand-dark:<?= af_index_e($ui_color_secondary_hex ?? '#7f1d1d') ?>;--accent:<?= af_index_e($ui_color_accent_hex ?? '#f59e0b') ?>;--ink:#0b1220;--muted:#64748b;--line:#e4eaf2;--soft:#f5f7fb;--navy:#08111f}
    :root{--index-bg:<?= af_index_e($ui_index_background_hex ?? '#ffffff') ?>;--index-surface:<?= af_index_e($ui_index_surface_hex ?? '#ffffff') ?>;--index-soft:<?= af_index_e($ui_index_soft_hex ?? '#f6f8fc') ?>;--index-ink:<?= af_index_e($ui_index_text_hex ?? '#0b1220') ?>;--index-muted:<?= af_index_e($ui_index_muted_hex ?? '#64748b') ?>;--index-dark:<?= af_index_e($ui_index_dark_hex ?? '#08111f') ?>;--index-dark-alt:<?= af_index_e($ui_index_dark_alt_hex ?? '#111c30') ?>;--index-dark-text:<?= af_index_e($ui_index_dark_text_hex ?? '#ffffff') ?>;--plan-card-bg:<?= af_index_e($ui_plan_card_bg_hex ?? '#ffffff') ?>;--plan-card-border:<?= af_index_e($ui_plan_card_border_hex ?? '#dfe6ef') ?>;--plan-featured-bg:<?= af_index_e($ui_plan_featured_bg_hex ?? '#fff7f7') ?>;--plan-price-bg:<?= af_index_e($ui_plan_price_bg_hex ?? '#f8fafc') ?>}
    *{box-sizing:border-box}html{scroll-behavior:smooth}body.af-index-page{margin:0;padding-top:var(--public-header-height);padding-bottom:84px;background:#fff;color:var(--ink);font-family:Inter,system-ui,sans-serif}.landing-wrap{width:min(1240px,calc(100% - 40px));margin:0 auto}.section-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--brand);font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.section-kicker:before{content:"";width:24px;height:2px;border-radius:99px;background:var(--brand)}.landing-title{margin:14px 0 0;font-size:clamp(34px,5.3vw,70px);line-height:.98;letter-spacing:-.055em;font-weight:900}.landing-lead{max-width:720px;margin:20px 0 0;color:#526078;font-size:clamp(16px,2vw,20px);line-height:1.72}.landing-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:28px}.landing-btn{min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 18px;border-radius:14px;text-decoration:none;font-size:13px;font-weight:900;transition:.2s ease}.landing-btn:hover{transform:translateY(-2px)}.landing-btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;box-shadow:0 16px 35px color-mix(in srgb,var(--brand) 26%,transparent)}.landing-btn-secondary{border:1px solid #d7e0eb;background:#fff;color:#172033;box-shadow:0 10px 24px rgba(15,23,42,.06)}
    .hero-premium{position:relative;overflow:hidden;padding:72px 0 64px;background:radial-gradient(circle at 10% 5%,color-mix(in srgb,var(--brand) 12%,transparent),transparent 34%),radial-gradient(circle at 88% 20%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 28%),linear-gradient(180deg,#fff 0%,#f7f9fd 100%)}.hero-premium:after{content:"";position:absolute;right:-180px;top:-180px;width:520px;height:520px;border-radius:50%;border:1px solid color-mix(in srgb,var(--brand) 20%,transparent);box-shadow:0 0 0 70px color-mix(in srgb,var(--brand) 4%,transparent),0 0 0 140px color-mix(in srgb,var(--brand) 3%,transparent)}.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);gap:58px;align-items:center}.hero-proof{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}.hero-proof span{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid #dfe7f1;border-radius:999px;background:rgba(255,255,255,.75);color:#43516a;font-size:10px;font-weight:800;box-shadow:0 6px 16px rgba(15,23,42,.04)}.hero-proof i{color:#16a34a}.ops-card{position:relative;padding:18px;border:1px solid rgba(255,255,255,.16);border-radius:28px;background:linear-gradient(145deg,#0b1324 0%,#111d34 58%,#271016 100%);color:#fff;box-shadow:0 38px 85px rgba(8,17,31,.28)}.ops-card:before{content:"";position:absolute;inset:1px;border-radius:27px;background:radial-gradient(circle at 85% 4%,color-mix(in srgb,var(--brand) 30%,transparent),transparent 28%);pointer-events:none}.ops-head,.ops-body{position:relative}.ops-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 3px 16px}.ops-brand{display:flex;align-items:center;gap:10px}.ops-brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-dark));box-shadow:0 10px 24px color-mix(in srgb,var(--brand) 28%,transparent)}.ops-brand strong,.ops-brand small{display:block}.ops-brand strong{font-size:12px}.ops-brand small{margin-top:3px;color:#94a3b8;font-size:9px}.ops-live{display:inline-flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid rgba(74,222,128,.18);border-radius:999px;background:rgba(22,163,74,.12);color:#86efac;font-size:9px;font-weight:900}.ops-live:before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.1)}.ops-body{padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(255,255,255,.055);backdrop-filter:blur(12px)}.ops-eyebrow{color:#fca5a5;font-size:9px;font-weight:900;letter-spacing:.14em}.ops-body h2{margin:8px 0 0;font-size:24px;line-height:1.12;letter-spacing:-.03em}.ops-body>p{margin:9px 0 0;color:#cbd5e1;font-size:11px;line-height:1.6}.ops-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:18px}.ops-metric{padding:12px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(2,6,23,.28)}.ops-metric strong,.ops-metric span{display:block}.ops-metric strong{font-size:23px}.ops-metric span{margin-top:5px;color:#94a3b8;font-size:8px;line-height:1.35}.ops-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}.ops-flow span{display:flex;align-items:center;gap:7px;padding:9px;border-radius:11px;background:rgba(255,255,255,.06);color:#dbeafe;font-size:8px;font-weight:800}.ops-flow i{color:#fb7185}
    .trust-strip{border-top:1px solid #e5ebf3;border-bottom:1px solid #e5ebf3;background:#fff}.trust-grid{display:grid;grid-template-columns:repeat(3,1fr)}.trust-item{padding:22px 24px;display:flex;align-items:center;justify-content:center;gap:12px;border-right:1px solid #e9eef5}.trust-item:last-child{border-right:0}.trust-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--brand) 10%,#fff);color:var(--brand)}.trust-item strong,.trust-item span{display:block}.trust-item strong{font-size:16px}.trust-item span{margin-top:3px;color:#718096;font-size:9px}
    .section-premium{padding:88px 0}.section-head{max-width:800px}.section-head.center{margin:0 auto;text-align:center}.section-head.center .section-kicker{justify-content:center}.section-head.center .section-kicker:before{display:none}.section-head h2{margin:12px 0 0;font-size:clamp(30px,4vw,48px);line-height:1.06;letter-spacing:-.045em}.section-head p{margin:15px 0 0;color:#64748b;font-size:15px;line-height:1.72}.workflow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}.workflow-card{position:relative;min-height:240px;padding:24px;border:1px solid #e1e8f1;border-radius:22px;background:#fff;box-shadow:0 16px 38px rgba(15,23,42,.06);overflow:hidden}.workflow-card:after{content:attr(data-step);position:absolute;right:16px;top:2px;color:#f1f5f9;font-size:78px;font-weight:900;letter-spacing:-.08em}.workflow-icon{position:relative;z-index:1;width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 16%,#fff),#fff);color:var(--brand);box-shadow:0 10px 26px color-mix(in srgb,var(--brand) 10%,transparent)}.workflow-card h3{position:relative;z-index:1;margin:24px 0 0;font-size:20px}.workflow-card p{position:relative;z-index:1;margin:10px 0 0;color:#64748b;font-size:12px;line-height:1.7}.workflow-link{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;margin-top:20px;color:var(--brand);font-size:10px;font-weight:900;text-decoration:none}
    .platform-section{background:#f6f8fc}.platform-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-top:34px}.platform-card{min-width:0;padding:18px;border:1px solid #e1e8f1;border-radius:20px;background:#fff;box-shadow:0 12px 28px rgba(15,23,42,.045);transition:.18s ease}.platform-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--brand) 34%,#e1e8f1);box-shadow:0 20px 42px rgba(15,23,42,.09)}.platform-logo{width:50px;height:50px;display:grid;place-items:center;overflow:hidden;border:1px solid #e6ebf2;border-radius:15px;background:#fff}.platform-logo img{width:100%;height:100%;object-fit:contain;padding:5px}.platform-logo i{color:var(--brand);font-size:20px}.platform-card h3{margin:15px 0 0;font-size:15px}.platform-card p{margin:6px 0 0;color:#718096;font-size:10px;line-height:1.55}.platform-tag{display:inline-flex;align-items:center;gap:5px;margin-top:12px;color:#16a34a;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
    .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px}.feature-card{padding:22px;border:1px solid #e2e8f0;border-radius:20px;background:linear-gradient(180deg,#fff,#fbfcff);box-shadow:0 10px 24px rgba(15,23,42,.04)}.feature-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#fff1f2;color:var(--brand)}.feature-card h3{margin:16px 0 0;font-size:16px}.feature-card p{margin:8px 0 0;color:#64748b;font-size:11px;line-height:1.65}
    .control-section{position:relative;overflow:hidden;background:linear-gradient(145deg,#07101d,#111c30 57%,#250d13);color:#fff}.control-section:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,color-mix(in srgb,var(--brand) 25%,transparent),transparent 30%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:auto,44px 44px,44px 44px}.control-grid{position:relative;display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:center}.control-section .section-head p{color:#cbd5e1}.control-list{display:grid;gap:11px}.control-card{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:17px;border:1px solid rgba(255,255,255,.11);border-radius:17px;background:rgba(255,255,255,.055);backdrop-filter:blur(10px)}.control-card i{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:rgba(239,68,68,.16);color:#fca5a5}.control-card h3{margin:0;font-size:14px}.control-card p{margin:6px 0 0;color:#b8c4d6;font-size:10px;line-height:1.55}
    .pricing-section{background:#f6f8fc}.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:14px;margin-top:36px}.plan-card{position:relative;overflow:hidden;padding:22px;border:1px solid #dfe6ef;border-radius:22px;background:#fff;box-shadow:0 18px 40px rgba(15,23,42,.07)}.plan-card.is-featured{border-color:color-mix(in srgb,var(--brand) 50%,#e2e8f0);box-shadow:0 24px 55px color-mix(in srgb,var(--brand) 14%,transparent)}.plan-card:before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--brand),var(--accent))}.plan-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.plan-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#fff1f2;color:var(--brand)}.plan-badge{padding:6px 8px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:8px;font-weight:900}.plan-card h3{margin:18px 0 0;font-size:22px}.plan-desc{min-height:48px;margin:8px 0 0;color:#64748b;font-size:10px;line-height:1.6}.plan-prices{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:16px}.plan-price{padding:12px;border:1px solid #e4eaf2;border-radius:14px;background:#f8fafc}.plan-price span,.plan-price strong,.plan-price small{display:block}.plan-price span{color:#718096;font-size:8px;font-weight:900;text-transform:uppercase}.plan-price strong{margin-top:5px;font-size:18px}.plan-price small{margin-top:3px;color:#94a3b8;font-size:8px}.plan-limits{display:grid;gap:7px;margin-top:14px}.plan-limit{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed #e2e8f0;color:#526078;font-size:9px}.plan-limit:last-child{border-bottom:0}.plan-limit strong{color:#172033}.plan-card .landing-btn{width:100%;min-height:44px;margin-top:16px;font-size:11px}
    .final-cta{padding:84px 0;background:#fff}.final-card{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding:42px;border-radius:28px;background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;box-shadow:0 30px 75px color-mix(in srgb,var(--brand) 26%,transparent)}.final-card:after{content:"";position:absolute;right:-70px;top:-120px;width:330px;height:330px;border:1px solid rgba(255,255,255,.14);border-radius:50%;box-shadow:0 0 0 55px rgba(255,255,255,.04),0 0 0 110px rgba(255,255,255,.025)}.final-copy{position:relative;z-index:1}.final-copy .section-kicker{color:#fee2e2}.final-copy .section-kicker:before{background:#fff}.final-copy h2{margin:12px 0 0;font-size:clamp(30px,4vw,48px);line-height:1.02;letter-spacing:-.045em}.final-copy p{max-width:680px;margin:13px 0 0;color:#fee2e2;font-size:14px;line-height:1.65}.final-card .landing-btn{position:relative;z-index:1;background:#fff;color:#991b1b;box-shadow:0 16px 35px rgba(127,29,29,.25)}
    @media(max-width:1050px){.hero-grid,.control-grid{grid-template-columns:1fr}.hero-grid{gap:38px}.ops-card{max-width:720px}.platform-grid{grid-template-columns:repeat(3,1fr)}}
    /* Colores completos de la portada administrables desde Marca Blanca */
    body.af-index-page{background:var(--index-bg);color:var(--index-ink)}
    .landing-lead,.section-head p,.workflow-card p,.platform-card p,.feature-card p,.plan-desc{color:var(--index-muted)}
    .hero-premium{background:radial-gradient(circle at 10% 5%,color-mix(in srgb,var(--brand) 12%,transparent),transparent 34%),radial-gradient(circle at 88% 20%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 28%),linear-gradient(180deg,var(--index-bg) 0%,var(--index-soft) 100%)}
    .landing-btn-secondary,.trust-strip,.workflow-card,.platform-card,.platform-logo,.feature-card,.final-cta{background:var(--index-surface)}
    .platform-section,.pricing-section{background:var(--index-soft)}
    .ops-card,.control-section{background:linear-gradient(145deg,var(--index-dark),var(--index-dark-alt) 57%,color-mix(in srgb,var(--brand-dark) 55%,var(--index-dark)))}
    .ops-card,.control-section,.control-section h2,.control-card h3{color:var(--index-dark-text)}

    /* Planes premium */
    .pricing-section{position:relative;overflow:hidden}
    .pricing-section:before,.pricing-section:after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(1px)}
    .pricing-section:before{width:360px;height:360px;left:-190px;top:80px;background:color-mix(in srgb,var(--brand) 7%,transparent)}
    .pricing-section:after{width:420px;height:420px;right:-230px;bottom:-130px;background:color-mix(in srgb,var(--accent) 9%,transparent)}
    .pricing-section .landing-wrap{position:relative;z-index:1}
    .plans-grid{align-items:stretch;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:18px;margin-top:38px}
    .plan-card{display:flex;flex-direction:column;min-height:100%;padding:0;border:1px solid var(--plan-card-border);border-radius:26px;background:var(--plan-card-bg);color:var(--index-ink);box-shadow:0 22px 55px color-mix(in srgb,var(--index-dark) 9%,transparent);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
    .plan-card:hover{transform:translateY(-6px);box-shadow:0 30px 72px color-mix(in srgb,var(--index-dark) 14%,transparent)}
    .plan-card:before{height:6px;background:linear-gradient(90deg,var(--brand),var(--accent))}
    .plan-card.is-featured{background:linear-gradient(180deg,var(--plan-featured-bg),var(--plan-card-bg) 42%);border-color:color-mix(in srgb,var(--brand) 62%,var(--plan-card-border));box-shadow:0 30px 78px color-mix(in srgb,var(--brand) 18%,transparent);transform:translateY(-8px)}
    .plan-card.is-featured:hover{transform:translateY(-12px)}
    .plan-card-inner{display:flex;flex-direction:column;flex:1;padding:24px}
    .plan-top{align-items:flex-start}
    .plan-stage{display:flex;align-items:center;gap:11px}
    .plan-icon{width:46px;height:46px;border:1px solid color-mix(in srgb,var(--brand) 18%,transparent);background:color-mix(in srgb,var(--brand) 9%,var(--plan-card-bg));color:var(--brand);box-shadow:0 10px 24px color-mix(in srgb,var(--brand) 10%,transparent)}
    .plan-stage-copy small,.plan-stage-copy strong{display:block}
    .plan-stage-copy small{color:var(--index-muted);font-size:8px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
    .plan-stage-copy strong{margin-top:4px;color:var(--index-ink);font-size:11px}
    .plan-badge{padding:7px 10px;background:color-mix(in srgb,var(--brand) 9%,var(--plan-card-bg));color:var(--brand);font-size:8px;letter-spacing:.06em;text-transform:uppercase}
    .plan-card.is-featured .plan-badge{background:var(--brand);color:#fff;box-shadow:0 9px 20px color-mix(in srgb,var(--brand) 24%,transparent)}
    .plan-card h3{margin:20px 0 0;color:var(--index-ink);font-size:25px;letter-spacing:-.035em}
    .plan-desc{min-height:62px;margin-top:9px;font-size:11px;line-height:1.65}
    .plan-price-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;margin-top:18px;padding:16px;border:1px solid color-mix(in srgb,var(--plan-card-border) 78%,transparent);border-radius:17px;background:var(--plan-price-bg)}
    .plan-price-hero.has-annual{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px;gap:9px}
    .plan-price-main,.plan-price-side{min-width:0}
    .plan-price-main span,.plan-price-main strong,.plan-price-main small,.plan-price-side span,.plan-price-side strong,.plan-price-side small{display:block}
    .plan-price-main span,.plan-price-side span{color:var(--index-muted);font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.09em}
    .plan-price-main strong{margin-top:5px;color:var(--index-ink);font-size:27px;line-height:1}
    .plan-price-main strong sup{font-size:12px;vertical-align:top;margin-right:2px}
    .plan-price-main small,.plan-price-side small{margin-top:4px;color:var(--index-muted);font-size:8px}
    .plan-price-side{min-width:92px;padding-left:13px;border-left:1px solid var(--plan-card-border)}
    .plan-price-hero.has-annual .plan-price-main,.plan-price-hero.has-annual .plan-price-side{padding:12px;border:1px solid color-mix(in srgb,var(--plan-card-border) 80%,transparent);border-radius:13px;background:color-mix(in srgb,var(--plan-card-bg) 75%,var(--plan-price-bg));}
    .plan-price-hero.has-annual .plan-price-side{position:relative;padding-left:12px;border-left:1px solid color-mix(in srgb,var(--brand) 24%,var(--plan-card-border));background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 8%,var(--plan-card-bg)),color-mix(in srgb,var(--accent) 9%,var(--plan-card-bg)))}
    .plan-price-side strong{margin-top:5px;color:var(--index-ink);font-size:13px}
    .plan-price-side.is-annual strong{font-size:23px;line-height:1.05;letter-spacing:-.035em}
    .plan-price-side.is-annual strong sup{font-size:11px;vertical-align:top;margin-right:2px}
    .plan-saving{display:inline-flex!important;align-items:center;gap:4px;width:max-content;margin-top:8px!important;padding:5px 8px;border-radius:999px;background:#16a34a;color:#fff!important;font-size:8px!important;font-weight:950;box-shadow:0 7px 16px rgba(22,163,74,.2)}
    .plan-saving-detail{margin-top:6px!important;color:#15803d!important;font-size:8px!important;font-weight:850}
    @media(max-width:380px){.plan-price-hero.has-annual{grid-template-columns:1fr}}
    .plan-includes{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:19px;padding-bottom:9px;border-bottom:1px solid var(--plan-card-border)}
    .plan-includes strong{font-size:10px;text-transform:uppercase;letter-spacing:.08em}
    .plan-includes span{color:var(--index-muted);font-size:8px}
    .plan-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
    .plan-metric{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center;padding:9px;border:1px solid color-mix(in srgb,var(--plan-card-border) 80%,transparent);border-radius:12px;background:color-mix(in srgb,var(--plan-price-bg) 72%,var(--plan-card-bg))}
    .plan-metric i{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--brand) 9%,var(--plan-card-bg));color:var(--brand);font-size:11px}
    .plan-metric span,.plan-metric strong{display:block}
    .plan-metric span{color:var(--index-muted);font-size:7.5px;font-weight:800}
    .plan-metric strong{margin-top:2px;color:var(--index-ink);font-size:10px}
    .plan-extra{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
    .plan-extra span{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,var(--plan-card-bg));color:var(--index-ink);font-size:8px;font-weight:850}
    .plan-extra i{color:var(--accent)}
    .plan-card-footer{margin-top:auto;padding-top:18px}
    .plan-card .landing-btn{width:100%;min-height:48px;border-radius:13px;font-size:11px}
    .plan-card-note{display:flex;justify-content:center;align-items:center;gap:6px;margin:9px 0 0;color:var(--index-muted);font-size:8px;text-align:center}
    .plan-card-note i{color:#16a34a}
    @media(max-width:900px){.plan-card.is-featured{transform:none}.plan-card.is-featured:hover{transform:translateY(-6px)}}

    @media(max-width:760px){body.af-index-page{padding-bottom:0}.landing-wrap{width:min(100% - 28px,1240px)}.hero-premium{padding:52px 0}.landing-title{font-size:42px}.workflow-grid,.feature-grid,.platform-grid,.trust-grid{grid-template-columns:1fr}.trust-item{border-right:0;border-bottom:1px solid #e9eef5;justify-content:flex-start}.trust-item:last-child{border-bottom:0}.ops-metrics,.ops-flow{grid-template-columns:1fr}.section-premium{padding:66px 0}.final-card{grid-template-columns:1fr;padding:30px}.plans-grid{grid-template-columns:1fr}}
    
    /* AFENIXX-PRO-INDEX-20260724 */
    .ops-metrics{
        gap:14px;
    }

    .ops-metric{
        position:relative;
        min-height:142px;
        padding:17px 12px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        overflow:hidden;
        text-align:center;
        border-radius:20px;
        background:
            radial-gradient(
                circle at 50% 0,
                color-mix(in srgb,var(--brand) 22%,transparent),
                transparent 58%
            ),
            rgba(2,6,23,.34);
        transition:
            transform .24s ease,
            border-color .24s ease,
            background .24s ease;
    }

    .ops-metric:hover{
        transform:translateY(-5px);
        border-color:
            color-mix(in srgb,var(--brand) 45%,transparent);
        background:
            radial-gradient(
                circle at 50% 0,
                color-mix(in srgb,var(--brand) 32%,transparent),
                transparent 62%
            ),
            rgba(2,6,23,.48);
    }

    .ops-metric-icon{
        position:relative;
        z-index:1;
        width:58px;
        height:58px;
        display:grid!important;
        place-items:center;
        margin:0 auto;
        border:1px solid rgba(255,255,255,.13);
        border-radius:19px;
        background:
            linear-gradient(
                145deg,
                color-mix(in srgb,var(--brand) 68%,#fff),
                color-mix(in srgb,var(--brand-dark) 82%,#050816)
            );
        color:#fff!important;
        box-shadow:
            0 16px 30px
            color-mix(in srgb,var(--brand) 25%,transparent);
    }

    .ops-metric-icon i{
        font-size:24px;
    }

    .ops-metric strong{
        position:relative;
        z-index:1;
        margin-top:11px;
        font-size:31px;
        line-height:1;
    }

    .ops-metric > span:last-child{
        position:relative;
        z-index:1;
        max-width:125px;
        margin-top:8px;
        color:#b7c4d8;
        font-size:9px;
        line-height:1.45;
        text-align:center;
    }

    .trust-item{
        min-height:112px;
        gap:17px;
    }

    .trust-icon{
        width:64px;
        height:64px;
        flex:0 0 64px;
        border-radius:20px;
        font-size:25px;
        box-shadow:
            0 15px 32px
            color-mix(in srgb,var(--brand) 13%,transparent);
    }

    .workflow-card{
        min-height:285px;
        padding:28px;
        transition:
            transform .24s ease,
            box-shadow .24s ease,
            border-color .24s ease;
    }

    .workflow-card:hover{
        transform:translateY(-8px);
        border-color:
            color-mix(in srgb,var(--brand) 34%,#e1e8f1);
        box-shadow:0 27px 58px rgba(15,23,42,.11);
    }

    .workflow-icon{
        width:76px;
        height:76px;
        border-radius:23px;
        font-size:30px;
        box-shadow:
            0 17px 38px
            color-mix(in srgb,var(--brand) 17%,transparent);
    }

    .workflow-card:nth-child(3) .workflow-icon{
        color:#fff;
        background:
            linear-gradient(
                145deg,
                var(--brand),
                var(--brand-dark)
            );
    }

    .workflow-card h3{
        margin-top:26px;
    }

    .platform-sales-copy{
        max-width:900px!important;
        font-size:16px!important;
        line-height:1.75!important;
    }

    .platform-grid{
        perspective:1300px;
        overflow:visible;
        gap:18px;
    }

    .platform-card{
        position:relative;
        min-height:300px;
        display:flex;
        flex-direction:column;
        align-items:center;
        padding:24px 20px;
        overflow:visible;
        text-align:center;
        transform-origin:center;
        animation:
            afPlatformFloat 5.2s ease-in-out infinite;
        will-change:transform;
    }

    .platform-card:nth-child(2n){
        animation-delay:-1.3s;
    }

    .platform-card:nth-child(3n){
        animation-delay:-2.6s;
    }

    .platform-card:nth-child(4n){
        animation-delay:-3.9s;
    }

    .platform-card:hover{
        z-index:20;
        animation-play-state:paused;
        transform:
            translateY(-13px)
            scale(1.08)!important;
        border-color:
            color-mix(in srgb,var(--brand) 55%,#dce5ef);
        box-shadow:
            0 34px 75px rgba(15,23,42,.18);
    }

    .platform-card-head{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:8px;
    }

    .platform-card h3{
        margin:0;
        color:var(--index-ink);
        font-size:18px;
        line-height:1.2;
    }

    .platform-tag{
        margin-top:0;
        padding:6px 9px;
        border-radius:999px;
        background:#ecfdf5;
    }

    .platform-logo{
        width:92px;
        height:92px;
        margin:19px auto 0;
        border-radius:25px;
        transition:
            transform .3s ease,
            box-shadow .3s ease,
            border-color .3s ease;
        box-shadow:0 16px 35px rgba(15,23,42,.09);
    }

    .platform-logo img{
        padding:10px;
    }

    .platform-logo i{
        font-size:34px;
    }

    .platform-card:hover .platform-logo{
        transform:scale(1.3) rotate(-2deg);
        border-color:
            color-mix(in srgb,var(--brand) 35%,#e6ebf2);
        box-shadow:
            0 25px 54px
            color-mix(in srgb,var(--brand) 20%,transparent);
    }

    .platform-card p{
        margin-top:21px;
        font-size:11px;
        line-height:1.65;
    }

    .advantages-intro{
        display:grid;
        grid-template-columns:minmax(0,1fr) 370px;
        gap:44px;
        align-items:center;
        margin-bottom:42px;
    }

    .advantages-intro .section-head{
        max-width:820px;
    }

    .bot-visual{
        position:relative;
        min-height:285px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        overflow:hidden;
        padding:28px;
        border:
            1px solid
            color-mix(in srgb,var(--brand) 20%,#e2e8f0);
        border-radius:32px;
        background:
            radial-gradient(
                circle at 50% 10%,
                color-mix(in srgb,var(--brand) 20%,transparent),
                transparent 45%
            ),
            linear-gradient(145deg,#fff,#f7f9fd);
        box-shadow:0 28px 65px rgba(15,23,42,.1);
    }

    .bot-visual-core{
        position:relative;
        z-index:3;
        width:118px;
        height:118px;
        display:grid;
        place-items:center;
        border-radius:36px;
        background:
            linear-gradient(
                145deg,
                var(--brand),
                var(--brand-dark)
            );
        color:#fff;
        box-shadow:
            0 28px 60px
            color-mix(in srgb,var(--brand) 28%,transparent);
        animation:afBotPulse 3.5s ease-in-out infinite;
    }

    .bot-visual-core i{
        font-size:58px;
    }

    .bot-visual strong{
        position:relative;
        z-index:3;
        max-width:280px;
        margin-top:24px;
        color:#172033;
        font-size:13px;
        line-height:1.55;
        text-align:center;
    }

    .bot-orbit{
        position:absolute;
        left:50%;
        top:48%;
        border:1px solid
            color-mix(in srgb,var(--brand) 23%,transparent);
        border-radius:50%;
        transform:translate(-50%,-50%);
    }

    .bot-orbit-one{
        width:205px;
        height:205px;
    }

    .bot-orbit-two{
        width:285px;
        height:285px;
    }

    .bot-visual-bubble{
        position:absolute;
        z-index:4;
        width:48px;
        height:48px;
        display:grid;
        place-items:center;
        border:1px solid #e2e8f0;
        border-radius:16px;
        background:#fff;
        color:var(--brand);
        box-shadow:0 14px 30px rgba(15,23,42,.12);
    }

    .bot-visual-bubble.is-left{
        left:35px;
        top:58px;
        animation:afBubbleFloat 4s ease-in-out infinite;
    }

    .bot-visual-bubble.is-right{
        right:35px;
        top:108px;
        animation:
            afBubbleFloat 4s ease-in-out -2s infinite;
    }

    .feature-grid{
        margin-top:0;
    }

    .feature-card{
        min-height:215px;
        transition:
            transform .22s ease,
            box-shadow .22s ease;
    }

    .feature-card:hover{
        transform:translateY(-6px);
        box-shadow:0 22px 48px rgba(15,23,42,.1);
    }

    .feature-icon{
        width:59px;
        height:59px;
        border-radius:19px;
        font-size:23px;
    }

    .control-copy{
        position:relative;
    }

    .security-visual{
        position:relative;
        width:min(320px,100%);
        height:245px;
        margin-top:30px;
        border:1px solid rgba(255,255,255,.12);
        border-radius:30px;
        background:
            radial-gradient(
                circle at 50% 45%,
                color-mix(in srgb,var(--brand) 34%,transparent),
                transparent 48%
            ),
            rgba(255,255,255,.045);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    }

    .security-shield{
        position:absolute;
        left:50%;
        top:50%;
        width:112px;
        height:112px;
        display:grid;
        place-items:center;
        border-radius:35px;
        background:
            linear-gradient(
                145deg,
                var(--brand),
                var(--brand-dark)
            );
        color:#fff;
        transform:translate(-50%,-50%);
        box-shadow:
            0 25px 58px
            color-mix(in srgb,var(--brand) 32%,transparent);
        animation:afSecurityPulse 3.6s ease-in-out infinite;
    }

    .security-shield i{
        font-size:54px;
    }

    .security-node{
        position:absolute;
        width:48px;
        height:48px;
        display:grid;
        place-items:center;
        border:1px solid rgba(255,255,255,.14);
        border-radius:16px;
        background:rgba(255,255,255,.1);
        color:#fff;
        backdrop-filter:blur(10px);
    }

    .security-node.node-key{
        left:28px;
        top:35px;
    }

    .security-node.node-mail{
        right:28px;
        top:40px;
    }

    .security-node.node-user{
        right:45px;
        bottom:30px;
    }

    .control-card{
        grid-template-columns:60px 1fr;
        gap:17px;
        padding:20px;
    }

    .control-card > i{
        width:60px;
        height:60px;
        border-radius:18px;
        font-size:23px;
    }

    @keyframes afPlatformFloat{
        0%,100%{
            transform:translateY(0);
        }

        50%{
            transform:translateY(-8px);
        }
    }

    @keyframes afBotPulse{
        0%,100%{
            transform:translateY(0) scale(1);
        }

        50%{
            transform:translateY(-7px) scale(1.035);
        }
    }

    @keyframes afBubbleFloat{
        0%,100%{
            transform:translateY(0) rotate(0);
        }

        50%{
            transform:translateY(-10px) rotate(5deg);
        }
    }

    @keyframes afSecurityPulse{
        0%,100%{
            transform:
                translate(-50%,-50%)
                scale(1);
        }

        50%{
            transform:
                translate(-50%,-50%)
                scale(1.055);
        }
    }

    @media(max-width:1050px){
        .advantages-intro{
            grid-template-columns:1fr;
        }

        .bot-visual{
            width:min(620px,100%);
            margin:0 auto;
        }
    }

    @media(max-width:760px){
        .ops-metric{
            min-height:125px;
        }

        .platform-card{
            min-height:280px;
        }

        .platform-card:hover{
            transform:translateY(-8px) scale(1.025)!important;
        }

        .advantages-intro{
            gap:28px;
        }

        .bot-visual{
            min-height:260px;
        }

        .security-visual{
            margin-inline:auto;
        }
    }


    /* AFENIXX-INDEX-REFINE-20260724 */

    /*
    |--------------------------------------------------------------------------
    | Indicadores de plataformas, planes y accesos
    |--------------------------------------------------------------------------
    */

    .ops-metrics{
        display:grid!important;
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:12px!important;
    }

    .ops-metric{
        position:relative!important;
        min-width:0!important;
        min-height:148px!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:center!important;
        gap:0!important;
        padding:16px 9px!important;
        overflow:hidden!important;
        text-align:center!important;
        border-radius:19px!important;
    }

    .ops-metric .ops-metric-icon{
        width:62px!important;
        height:62px!important;
        min-width:62px!important;
        min-height:62px!important;
        display:grid!important;
        place-items:center!important;
        margin:0 auto!important;
        border:1px solid rgba(255,255,255,.14)!important;
        border-radius:19px!important;
        background:
            linear-gradient(
                145deg,
                color-mix(
                    in srgb,
                    var(--brand) 84%,
                    #ffffff
                ),
                color-mix(
                    in srgb,
                    var(--brand-dark) 88%,
                    #020617
                )
            )!important;
        color:#ffffff!important;
        line-height:1!important;
        box-shadow:
            0 15px 29px
            color-mix(
                in srgb,
                var(--brand) 25%,
                transparent
            )!important;
    }

    .ops-metric .ops-metric-icon i{
        width:28px!important;
        height:28px!important;
        display:grid!important;
        place-items:center!important;
        margin:0!important;
        color:#ffffff!important;
        font-size:25px!important;
        line-height:1!important;
    }

    .ops-metric > strong{
        display:block!important;
        margin:11px 0 0!important;
        color:#ffffff!important;
        font-size:29px!important;
        line-height:1!important;
        text-align:center!important;
    }

    .ops-metric > span:last-child{
        display:block!important;
        min-height:27px!important;
        max-width:126px!important;
        margin:8px auto 0!important;
        color:#b8c4d6!important;
        font-size:8.5px!important;
        font-weight:800!important;
        line-height:1.45!important;
        text-align:center!important;
    }

    /*
    |--------------------------------------------------------------------------
    | Plataformas: solamente icono y nombre
    |--------------------------------------------------------------------------
    */

    .platform-grid{
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(180px,1fr)
            )!important;
        gap:17px!important;
        overflow:visible!important;
    }

    .platform-card{
        min-height:205px!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:center!important;
        padding:23px 17px!important;
        overflow:visible!important;
        text-align:center!important;
    }

    .platform-card .platform-logo{
        order:1!important;
        width:106px!important;
        height:106px!important;
        min-width:106px!important;
        min-height:106px!important;
        display:grid!important;
        place-items:center!important;
        margin:0 auto!important;
        border-radius:27px!important;
    }

    .platform-card .platform-logo img{
        width:100%!important;
        height:100%!important;
        padding:9px!important;
        object-fit:contain!important;
    }

    .platform-card .platform-logo i{
        font-size:42px!important;
    }

    .platform-card .platform-card-head{
        order:2!important;
        width:100%!important;
        display:block!important;
        margin-top:17px!important;
    }

    .platform-card > h3{
        order:2!important;
    }

    .platform-card h3{
        margin:17px 0 0!important;
        color:var(--index-ink)!important;
        font-size:17px!important;
        font-weight:900!important;
        line-height:1.25!important;
        text-align:center!important;
    }

    .platform-card .platform-card-head h3{
        margin:0!important;
    }

    .platform-card p,
    .platform-card .platform-tag,
    .platform-card-head .platform-tag{
        display:none!important;
    }

    .platform-card:hover{
        z-index:20!important;
        transform:
            translateY(-9px)
            scale(1.045)!important;
    }

    .platform-card:hover .platform-logo{
        transform:scale(1.1)!important;
    }

    /*
    |--------------------------------------------------------------------------
    | Ventajas operativas
    |--------------------------------------------------------------------------
    */

    .feature-card{
        min-height:218px!important;
        padding:24px!important;
    }

    .feature-card .feature-icon{
        width:67px!important;
        height:67px!important;
        min-width:67px!important;
        min-height:67px!important;
        display:grid!important;
        place-items:center!important;
        border-radius:20px!important;
        font-size:27px!important;
        box-shadow:
            0 14px 29px
            color-mix(
                in srgb,
                var(--brand) 12%,
                transparent
            )!important;
    }

    .feature-card .feature-icon i{
        font-size:27px!important;
        line-height:1!important;
    }

    .feature-card h3{
        margin-top:20px!important;
        font-size:17px!important;
    }

    /*
    |--------------------------------------------------------------------------
    | Robot de páginas de bots públicos
    |--------------------------------------------------------------------------
    */

    .bot-visual{
        min-height:255px!important;
    }

    .bot-visual-core{
        width:96px!important;
        height:96px!important;
        border-radius:29px!important;
    }

    .bot-visual-core i{
        font-size:44px!important;
    }

    .bot-orbit-one{
        width:180px!important;
        height:180px!important;
    }

    .bot-orbit-two{
        width:250px!important;
        height:250px!important;
    }

    /*
    |--------------------------------------------------------------------------
    | Planes públicos
    |--------------------------------------------------------------------------
    |
    | No muestra:
    | - Descripciones guardadas en la base de datos.
    | - Cantidad de asuntos.
    | - Cantidad de subadministradores.
    |
    */

    .plan-card .plan-desc,
    .plan-card .plan-extra,
    .plan-price-side:not(.is-annual){
        display:none!important;
    }

    .plan-card h3{
        margin-bottom:0!important;
    }

    .plan-price-hero{
        margin-top:18px!important;
    }

    .plan-price-side.is-annual{
        display:flex!important;
        flex-direction:column!important;
        justify-content:center!important;
        min-height:132px!important;
        padding:15px!important;
    }

    .plan-price-side.is-annual > span{
        font-size:9px!important;
    }

    .plan-price-side.is-annual strong{
        margin-top:8px!important;
        color:var(--brand)!important;
        font-size:34px!important;
        font-weight:950!important;
        line-height:1!important;
        letter-spacing:-.045em!important;
    }

    .plan-price-side.is-annual strong sup{
        font-size:14px!important;
    }

    .plan-price-side.is-annual > small:not(.plan-saving):not(.plan-saving-detail){
        margin-top:6px!important;
        font-size:8.5px!important;
        font-weight:700!important;
    }

    /*
    |--------------------------------------------------------------------------
    | Adaptación responsive
    |--------------------------------------------------------------------------
    */

    @media(max-width:760px){
        .ops-metrics{
            grid-template-columns:
                repeat(3,minmax(0,1fr))!important;
            gap:7px!important;
        }

        .ops-metric{
            min-height:132px!important;
            padding:13px 5px!important;
        }

        .ops-metric .ops-metric-icon{
            width:52px!important;
            height:52px!important;
            min-width:52px!important;
            min-height:52px!important;
            border-radius:16px!important;
        }

        .ops-metric .ops-metric-icon i{
            font-size:21px!important;
        }

        .ops-metric > strong{
            margin-top:9px!important;
            font-size:24px!important;
        }

        .ops-metric > span:last-child{
            min-height:32px!important;
            max-width:95px!important;
            font-size:7.5px!important;
        }

        .platform-grid{
            grid-template-columns:
                repeat(2,minmax(0,1fr))!important;
        }

        .platform-card{
            min-height:185px!important;
            padding:19px 12px!important;
        }

        .platform-card .platform-logo{
            width:88px!important;
            height:88px!important;
            min-width:88px!important;
            min-height:88px!important;
        }

        .platform-card h3{
            font-size:15px!important;
        }

        .feature-card{
            min-height:auto!important;
        }

        .bot-visual-core{
            width:88px!important;
            height:88px!important;
        }

        .bot-visual-core i{
            font-size:40px!important;
        }
    }



    /* AFENIXX-INDEX-GRID-METRICS-V3 */

    /*
    |--------------------------------------------------------------------------
    | Estadísticas debajo de la portada
    |--------------------------------------------------------------------------
    */

    .trust-strip{
        position:relative;
        z-index:2;
        border-top:
            1px solid
            color-mix(
                in srgb,
                var(--brand) 10%,
                #e5ebf3
            )!important;
        border-bottom:
            1px solid
            color-mix(
                in srgb,
                var(--brand) 10%,
                #e5ebf3
            )!important;
        background:
            var(--index-surface)!important;
    }

    .trust-grid{
        display:grid!important;
        grid-template-columns:
            repeat(3,minmax(0,1fr))!important;
        align-items:stretch!important;
    }

    .trust-item{
        min-width:0!important;
        min-height:122px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        gap:18px!important;
        padding:22px 25px!important;
        text-align:left!important;
    }

    .trust-item .trust-icon{
        width:68px!important;
        height:68px!important;
        min-width:68px!important;
        min-height:68px!important;
        display:grid!important;
        place-items:center!important;
        margin:0!important;
        padding:0!important;
        overflow:hidden!important;
        border:
            1px solid
            color-mix(
                in srgb,
                var(--brand) 16%,
                transparent
            )!important;
        border-radius:21px!important;
        background:
            linear-gradient(
                145deg,
                color-mix(
                    in srgb,
                    var(--brand) 14%,
                    var(--index-surface)
                ),
                color-mix(
                    in srgb,
                    var(--brand) 5%,
                    var(--index-surface)
                )
            )!important;
        color:var(--brand)!important;
        box-shadow:
            0 15px 32px
            color-mix(
                in srgb,
                var(--brand) 12%,
                transparent
            )!important;
    }

    .trust-item .trust-icon i{
        width:30px!important;
        height:30px!important;
        display:grid!important;
        place-items:center!important;
        margin:0!important;
        padding:0!important;
        color:var(--brand)!important;
        font-size:27px!important;
        line-height:1!important;
        text-align:center!important;
    }

    .trust-item > span:last-child{
        min-width:0!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:flex-start!important;
        justify-content:center!important;
        margin:0!important;
    }

    .trust-item > span:last-child > strong{
        display:block!important;
        margin:0!important;
        color:var(--index-ink)!important;
        font-size:27px!important;
        font-weight:950!important;
        line-height:1!important;
    }

    .trust-item > span:last-child > span{
        display:block!important;
        max-width:160px!important;
        margin-top:8px!important;
        color:var(--index-muted)!important;
        font-size:10px!important;
        font-weight:800!important;
        line-height:1.4!important;
    }

    /*
    |--------------------------------------------------------------------------
    | Indicadores dentro del panel oscuro
    |--------------------------------------------------------------------------
    */

    .ops-metric{
        min-height:146px!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:center!important;
        text-align:center!important;
    }

    .ops-metric .ops-metric-icon{
        width:62px!important;
        height:62px!important;
        min-width:62px!important;
        min-height:62px!important;
        display:grid!important;
        place-items:center!important;
        margin:0 auto!important;
        padding:0!important;
        border-radius:19px!important;
    }

    .ops-metric .ops-metric-icon i{
        width:28px!important;
        height:28px!important;
        display:grid!important;
        place-items:center!important;
        margin:0!important;
        padding:0!important;
        color:#ffffff!important;
        font-size:25px!important;
        line-height:1!important;
    }

    .ops-metric > strong{
        margin-top:11px!important;
        text-align:center!important;
    }

    .ops-metric > span:last-child{
        margin-left:auto!important;
        margin-right:auto!important;
        text-align:center!important;
    }

    /*
    |--------------------------------------------------------------------------
    | Plataformas: cinco por fila
    |--------------------------------------------------------------------------
    |
    | Flexbox permite que, cuando existan menos de cinco elementos en la
    | última fila, esos elementos queden automáticamente centrados.
    |
    */

    .platform-grid{
        display:flex!important;
        flex-wrap:wrap!important;
        align-items:stretch!important;
        justify-content:center!important;
        gap:18px!important;
        width:100%!important;
        margin-top:38px!important;
        overflow:visible!important;
    }

    .platform-card{
        flex:
            0 1
            calc(
                (100% - 72px)
                / 5
            )!important;
        width:
            calc(
                (100% - 72px)
                / 5
            )!important;
        max-width:
            calc(
                (100% - 72px)
                / 5
            )!important;
        min-width:0!important;
        min-height:222px!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:center!important;
        padding:23px 15px!important;
        overflow:visible!important;
        text-align:center!important;
    }

    /*
     * Compatible tanto con el HTML original como con el HTML generado
     * por los parches anteriores.
     */

    .platform-card .platform-card-head{
        order:2!important;
        width:100%!important;
        display:block!important;
        margin:18px 0 0!important;
    }

    .platform-card .platform-logo{
        order:1!important;
        width:112px!important;
        height:112px!important;
        min-width:112px!important;
        min-height:112px!important;
        display:grid!important;
        place-items:center!important;
        margin:0 auto!important;
        padding:0!important;
        overflow:hidden!important;
        border-radius:29px!important;
    }

    .platform-card .platform-logo img{
        width:100%!important;
        height:100%!important;
        display:block!important;
        padding:9px!important;
        object-fit:contain!important;
        object-position:center!important;
    }

    .platform-card .platform-logo i{
        display:grid!important;
        place-items:center!important;
        color:var(--brand)!important;
        font-size:43px!important;
        line-height:1!important;
    }

    .platform-card > h3{
        order:2!important;
        width:100%!important;
    }

    .platform-card h3,
    .platform-card .platform-card-head h3{
        margin:18px 0 0!important;
        color:var(--index-ink)!important;
        font-size:17px!important;
        font-weight:950!important;
        line-height:1.25!important;
        text-align:center!important;
    }

    .platform-card .platform-card-head h3{
        margin:0!important;
    }

    .platform-card p,
    .platform-card .platform-tag,
    .platform-card-head .platform-tag{
        display:none!important;
    }

    .platform-card:hover{
        z-index:20!important;
        transform:
            translateY(-8px)
            scale(1.045)!important;
    }

    .platform-card:hover .platform-logo{
        transform:scale(1.08)!important;
    }

    /*
    |--------------------------------------------------------------------------
    | Pantallas medianas
    |--------------------------------------------------------------------------
    */

    @media(max-width:1100px){
        .platform-card{
            flex:
                0 1
                calc(
                    (100% - 54px)
                    / 4
                )!important;
            width:
                calc(
                    (100% - 54px)
                    / 4
                )!important;
            max-width:
                calc(
                    (100% - 54px)
                    / 4
                )!important;
        }
    }

    @media(max-width:900px){
        .trust-item{
            gap:13px!important;
            padding:18px 14px!important;
        }

        .trust-item .trust-icon{
            width:58px!important;
            height:58px!important;
            min-width:58px!important;
            min-height:58px!important;
            border-radius:18px!important;
        }

        .trust-item .trust-icon i{
            font-size:23px!important;
        }

        .platform-card{
            flex:
                0 1
                calc(
                    (100% - 36px)
                    / 3
                )!important;
            width:
                calc(
                    (100% - 36px)
                    / 3
                )!important;
            max-width:
                calc(
                    (100% - 36px)
                    / 3
                )!important;
        }
    }

    /*
    |--------------------------------------------------------------------------
    | Celulares
    |--------------------------------------------------------------------------
    */

    @media(max-width:760px){
        .trust-grid{
            grid-template-columns:1fr!important;
        }

        .trust-item{
            min-height:96px!important;
            justify-content:flex-start!important;
            padding:16px 20px!important;
            border-right:0!important;
            border-bottom:1px solid #e9eef5!important;
        }

        .trust-item:last-child{
            border-bottom:0!important;
        }

        .trust-item .trust-icon{
            width:60px!important;
            height:60px!important;
            min-width:60px!important;
            min-height:60px!important;
        }

        .trust-item > span:last-child > strong{
            font-size:25px!important;
        }

        .trust-item > span:last-child > span{
            max-width:none!important;
            font-size:10px!important;
        }

        .platform-card{
            flex:
                0 1
                calc(
                    (100% - 18px)
                    / 2
                )!important;
            width:
                calc(
                    (100% - 18px)
                    / 2
                )!important;
            max-width:
                calc(
                    (100% - 18px)
                    / 2
                )!important;
            min-height:195px!important;
        }

        .platform-card .platform-logo{
            width:92px!important;
            height:92px!important;
            min-width:92px!important;
            min-height:92px!important;
            border-radius:24px!important;
        }

        .platform-card h3,
        .platform-card .platform-card-head h3{
            font-size:15px!important;
        }
    }

    @media(max-width:420px){
        .platform-card{
            flex:0 1 100%!important;
            width:100%!important;
            max-width:280px!important;
        }
    }



    /* AFENIXX-INDEX-DETAILS-V4 */

    /*
    |--------------------------------------------------------------------------
    | Buzones, Clientes y Consultas
    |--------------------------------------------------------------------------
    */

    .ops-flow{
        display:grid!important;
        grid-template-columns:
            repeat(3,minmax(0,1fr))!important;
        gap:10px!important;
        margin-top:14px!important;
    }

    .ops-flow span{
        min-width:0!important;
        min-height:48px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:flex-start!important;
        gap:10px!important;
        padding:10px 12px!important;
        border:
            1px solid
            rgba(255,255,255,.07)!important;
        border-radius:13px!important;
        background:
            rgba(255,255,255,.075)!important;
        color:#e2e8f0!important;
        font-size:10.5px!important;
        font-weight:850!important;
        line-height:1.2!important;
    }

    .ops-flow span i{
        width:27px!important;
        height:27px!important;
        min-width:27px!important;
        min-height:27px!important;
        display:grid!important;
        place-items:center!important;
        margin:0!important;
        padding:0!important;
        border-radius:9px!important;
        background:
            rgba(239,68,68,.16)!important;
        color:#fb7185!important;
        font-size:12px!important;
        line-height:1!important;
    }

    /*
    |--------------------------------------------------------------------------
    | Logos de plataformas
    |--------------------------------------------------------------------------
    |
    | El HTML contiene un icono de TV como respaldo.
    | Se oculta cuando el logo cargó correctamente.
    |
    */

    .platform-logo img + i{
        display:none!important;
    }

    .platform-logo img[style*="display: none"] + i,
    .platform-logo img[style*="display:none"] + i{
        display:grid!important;
        place-items:center!important;
    }

    .platform-logo img:not([style*="display: none"]):not([style*="display:none"]){
        display:block!important;
    }

    .platform-card .platform-logo{
        overflow:hidden!important;
    }

    .platform-card .platform-logo img{
        position:relative!important;
        z-index:2!important;
        margin:0!important;
    }

    .platform-card .platform-logo i{
        position:relative!important;
        z-index:1!important;
        margin:0!important;
    }

    /*
    |--------------------------------------------------------------------------
    | Detalles de los planes
    |--------------------------------------------------------------------------
    */

    .plan-includes{
        gap:12px!important;
        margin-top:22px!important;
        padding-bottom:12px!important;
    }

    .plan-includes strong{
        color:var(--index-ink)!important;
        font-size:12px!important;
        font-weight:950!important;
        line-height:1.3!important;
    }

    .plan-includes span{
        color:var(--index-muted)!important;
        font-size:9.5px!important;
        font-weight:750!important;
        line-height:1.35!important;
        text-align:right!important;
    }

    .plan-metrics{
        display:grid!important;
        grid-template-columns:
            repeat(2,minmax(0,1fr))!important;
        gap:10px!important;
        margin-top:13px!important;
    }

    .plan-metric{
        min-width:0!important;
        min-height:70px!important;
        display:flex!important;
        align-items:center!important;
        gap:10px!important;
        padding:11px!important;
        border:
            1px solid
            color-mix(
                in srgb,
                var(--plan-card-border) 90%,
                transparent
            )!important;
        border-radius:14px!important;
        background:
            color-mix(
                in srgb,
                var(--plan-price-bg) 78%,
                var(--plan-card-bg)
            )!important;
    }

    .plan-metric > i{
        width:39px!important;
        height:39px!important;
        min-width:39px!important;
        min-height:39px!important;
        display:grid!important;
        place-items:center!important;
        margin:0!important;
        border-radius:12px!important;
        background:
            color-mix(
                in srgb,
                var(--brand) 11%,
                var(--plan-card-bg)
            )!important;
        color:var(--brand)!important;
        font-size:16px!important;
        line-height:1!important;
    }

    .plan-metric > span{
        min-width:0!important;
        display:flex!important;
        flex-direction:column!important;
        justify-content:center!important;
    }

    .plan-metric > span > span{
        color:var(--index-muted)!important;
        font-size:9.5px!important;
        font-weight:850!important;
        line-height:1.25!important;
    }

    .plan-metric > span > strong{
        display:block!important;
        margin-top:4px!important;
        color:var(--index-ink)!important;
        font-size:15px!important;
        font-weight:950!important;
        line-height:1!important;
    }

    .plan-price-main > span,
    .plan-price-side > span{
        font-size:9px!important;
        line-height:1.25!important;
    }

    .plan-price-main > small,
    .plan-price-side > small{
        font-size:9px!important;
        line-height:1.35!important;
    }

    .plan-card-footer{
        margin-top:auto!important;
        padding-top:18px!important;
    }

    .plan-card-footer .landing-btn{
        min-height:48px!important;
        font-size:12px!important;
    }

    .plan-card-note{
        margin-top:11px!important;
        color:var(--index-muted)!important;
        font-size:9.5px!important;
        font-weight:750!important;
        line-height:1.4!important;
    }

    .plan-card-note i{
        font-size:10px!important;
    }

    /*
    |--------------------------------------------------------------------------
    | Adaptación responsive
    |--------------------------------------------------------------------------
    */

    @media(max-width:760px){
        .ops-flow{
            grid-template-columns:1fr!important;
        }

        .ops-flow span{
            min-height:46px!important;
            font-size:11px!important;
        }

        .ops-flow span i{
            width:29px!important;
            height:29px!important;
            min-width:29px!important;
            min-height:29px!important;
            font-size:13px!important;
        }

        .plan-metrics{
            grid-template-columns:1fr!important;
        }

        .plan-metric{
            min-height:65px!important;
        }
    }



    /* AFENIXX-PLATFORM-LOGO-ONLY-V5 */

    /*
     * Ocultar definitivamente el icono genérico fa-tv
     * cuando la plataforma posee una imagen de la BD.
     *
     * Esta regla tiene mayor especificidad que las reglas
     * agregadas por los parches visuales anteriores.
     */

    .platform-card
    .platform-logo
    > img
    + i.fa-tv,
    .platform-card
    .platform-logo
    > img
    ~ i.fas.fa-tv{
        display:none!important;
        visibility:hidden!important;
        opacity:0!important;
        width:0!important;
        height:0!important;
        min-width:0!important;
        min-height:0!important;
        margin:0!important;
        padding:0!important;
        overflow:hidden!important;
        position:absolute!important;
        pointer-events:none!important;
    }



    /* AFENIXX-FLUJO-PLANES-V6 */

    /*
    |--------------------------------------------------------------------------
    | Flujo de trabajo
    |--------------------------------------------------------------------------
    |
    | Los títulos y descripciones continúan obteniéndose desde:
    |
    | - ui_landing_step_1_title
    | - ui_landing_step_1_text
    | - ui_landing_step_2_title
    | - ui_landing_step_2_text
    | - ui_landing_step_3_title
    | - ui_landing_step_3_text
    |
    | Por lo tanto, permanecen administrables desde Marca Blanca.
    |
    */

    .workflow-grid {
        display: grid !important;
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 18px !important;
        margin-top: 40px !important;
    }

    .workflow-card {
        --workflow-tone: var(--brand);

        position: relative !important;
        isolation: isolate !important;
        min-height: 280px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 27px !important;
        overflow: hidden !important;

        border:
            1px solid
            color-mix(
                in srgb,
                var(--workflow-tone) 18%,
                #e1e8f1
            ) !important;

        border-radius: 24px !important;

        background:
            radial-gradient(
                circle at 100% 0,
                color-mix(
                    in srgb,
                    var(--workflow-tone) 10%,
                    transparent
                ),
                transparent 38%
            ),
            linear-gradient(
                180deg,
                var(--index-surface),
                color-mix(
                    in srgb,
                    var(--workflow-tone) 3%,
                    var(--index-surface)
                )
            ) !important;

        box-shadow:
            0 18px 42px
            color-mix(
                in srgb,
                var(--index-dark) 7%,
                transparent
            ) !important;

        transition:
            transform .22s ease,
            box-shadow .22s ease,
            border-color .22s ease !important;
    }

    .workflow-card:nth-child(1) {
        --workflow-tone: var(--brand);
    }

    .workflow-card:nth-child(2) {
        --workflow-tone: var(--accent);
    }

    .workflow-card:nth-child(3) {
        --workflow-tone:
            color-mix(
                in srgb,
                var(--brand-dark) 72%,
                #2563eb
            );
    }

    /*
     * Línea superior decorativa.
     */
    .workflow-card::before {
        content: "" !important;
        position: absolute !important;
        z-index: 1 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 5px !important;

        background:
            linear-gradient(
                90deg,
                var(--workflow-tone),
                color-mix(
                    in srgb,
                    var(--workflow-tone) 45%,
                    var(--accent)
                )
            ) !important;
    }

    /*
     * Número grande decorativo.
     */
    .workflow-card::after {
        content: attr(data-step) !important;
        position: absolute !important;
        z-index: -1 !important;
        top: 4px !important;
        right: 15px !important;

        color:
            color-mix(
                in srgb,
                var(--workflow-tone) 8%,
                transparent
            ) !important;

        font-size: 94px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        letter-spacing: -.08em !important;
        pointer-events: none !important;
    }

    .workflow-card:hover {
        transform: translateY(-6px) !important;

        border-color:
            color-mix(
                in srgb,
                var(--workflow-tone) 38%,
                #dbe4ef
            ) !important;

        box-shadow:
            0 27px 58px
            color-mix(
                in srgb,
                var(--workflow-tone) 13%,
                transparent
            ) !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Iconos del flujo
    |--------------------------------------------------------------------------
    */

    .workflow-icon {
        position: relative !important;
        z-index: 2 !important;

        width: 66px !important;
        height: 66px !important;
        min-width: 66px !important;
        min-height: 66px !important;

        display: grid !important;
        place-items: center !important;
        margin: 0 !important;
        padding: 0 !important;

        border:
            1px solid
            color-mix(
                in srgb,
                var(--workflow-tone) 22%,
                transparent
            ) !important;

        border-radius: 20px !important;

        background:
            linear-gradient(
                145deg,
                color-mix(
                    in srgb,
                    var(--workflow-tone) 16%,
                    var(--index-surface)
                ),
                var(--index-surface)
            ) !important;

        color: var(--workflow-tone) !important;

        box-shadow:
            0 14px 30px
            color-mix(
                in srgb,
                var(--workflow-tone) 14%,
                transparent
            ) !important;

        transition:
            transform .22s ease,
            box-shadow .22s ease !important;
    }

    .workflow-icon i {
        width: 29px !important;
        height: 29px !important;
        display: grid !important;
        place-items: center !important;
        margin: 0 !important;
        padding: 0 !important;

        color: var(--workflow-tone) !important;
        font-size: 26px !important;
        line-height: 1 !important;
    }

    .workflow-card:hover .workflow-icon {
        transform:
            translateY(-2px)
            scale(1.06) !important;

        box-shadow:
            0 18px 36px
            color-mix(
                in srgb,
                var(--workflow-tone) 20%,
                transparent
            ) !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Títulos y textos configurables
    |--------------------------------------------------------------------------
    */

    .workflow-card h3 {
        position: relative !important;
        z-index: 2 !important;

        margin: 22px 0 0 !important;

        color: var(--index-ink) !important;
        font-size: 20px !important;
        font-weight: 950 !important;
        line-height: 1.22 !important;
        letter-spacing: -.025em !important;
    }

    .workflow-card p {
        position: relative !important;
        z-index: 2 !important;
        flex: 1 !important;

        width: 100% !important;
        margin: 15px 0 0 !important;
        padding: 15px 16px !important;

        border:
            1px solid
            color-mix(
                in srgb,
                var(--workflow-tone) 14%,
                var(--plan-card-border)
            ) !important;

        border-left:
            4px solid
            var(--workflow-tone) !important;

        border-radius: 15px !important;

        background:
            color-mix(
                in srgb,
                var(--workflow-tone) 5%,
                var(--index-surface)
            ) !important;

        color: var(--index-muted) !important;
        font-size: 12.5px !important;
        font-weight: 650 !important;
        line-height: 1.72 !important;
    }

    /*
     * Ocultar cualquier botón antiguo que pudiera permanecer
     * por caché o por una variante anterior del HTML.
     */
    .workflow-link {
        display: none !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Planes públicos ligeramente más compactos
    |--------------------------------------------------------------------------
    */

    .pricing-section .landing-wrap {
        width:
            min(
                1140px,
                calc(100% - 40px)
            ) !important;
    }

    .plans-grid {
        max-width: 1090px !important;
        margin: 34px auto 0 !important;
        gap: 14px !important;

        grid-template-columns:
            repeat(
                auto-fit,
                minmax(255px, 1fr)
            ) !important;
    }

    .plan-card {
        border-radius: 22px !important;

        box-shadow:
            0 16px 38px
            color-mix(
                in srgb,
                var(--index-dark) 8%,
                transparent
            ) !important;
    }

    .plan-card:hover {
        transform:
            translateY(-4px) !important;

        box-shadow:
            0 23px 52px
            color-mix(
                in srgb,
                var(--index-dark) 11%,
                transparent
            ) !important;
    }

    .plan-card.is-featured {
        transform:
            translateY(-4px) !important;

        box-shadow:
            0 23px 58px
            color-mix(
                in srgb,
                var(--brand) 15%,
                transparent
            ) !important;
    }

    .plan-card.is-featured:hover {
        transform:
            translateY(-7px) !important;
    }

    .plan-card-inner {
        padding: 20px !important;
    }

    .plan-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 12px !important;
    }

    .plan-card h3 {
        margin-top: 16px !important;
        font-size: 22px !important;
    }

    .plan-price-hero {
        margin-top: 14px !important;
        padding: 12px !important;
        gap: 10px !important;
        border-radius: 15px !important;
    }

    .plan-price-hero.has-annual {
        padding: 8px !important;
        gap: 7px !important;
    }

    .plan-price-hero.has-annual
    .plan-price-main,
    .plan-price-hero.has-annual
    .plan-price-side {
        padding: 10px !important;
    }

    .plan-price-main strong {
        font-size: 24px !important;
    }

    /*
     * El precio anual continúa grande y llamativo.
     */
    .plan-price-side.is-annual strong {
        font-size: 23px !important;
    }

    .plan-includes {
        margin-top: 15px !important;
    }

    .plan-metrics {
        gap: 7px !important;
        margin-top: 8px !important;
    }

    .plan-metric {
        min-height: 58px !important;

        grid-template-columns:
            28px 1fr !important;

        gap: 7px !important;
        padding: 7px !important;
    }

    .plan-metric i {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }

    .plan-card-footer {
        padding-top: 15px !important;
    }

    .plan-card .landing-btn {
        min-height: 44px !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Responsive
    |--------------------------------------------------------------------------
    */

    @media (max-width: 900px) {
        .workflow-grid {
            grid-template-columns: 1fr !important;
        }

        .workflow-card {
            min-height: auto !important;
        }

        .plan-card.is-featured {
            transform: none !important;
        }

        .plan-card.is-featured:hover {
            transform:
                translateY(-4px) !important;
        }
    }

    @media (max-width: 760px) {
        .workflow-card {
            padding: 22px !important;
        }

        .workflow-icon {
            width: 58px !important;
            height: 58px !important;
            min-width: 58px !important;
            min-height: 58px !important;
            border-radius: 18px !important;
        }

        .workflow-icon i {
            font-size: 23px !important;
        }

        .workflow-card h3 {
            margin-top: 18px !important;
            font-size: 18px !important;
        }

        .workflow-card p {
            font-size: 12px !important;
        }

        .pricing-section .landing-wrap {
            width:
                min(
                    100% - 28px,
                    1140px
                ) !important;
        }

        .plans-grid {
            grid-template-columns: 1fr !important;
        }
    }



    /* AFENIXX-SECCIONES-VISUALES-V8 */

    /*
    |--------------------------------------------------------------------------
    | Plataformas
    |--------------------------------------------------------------------------
    |
    | El texto continúa administrándose desde Marca Blanca:
    |
    | ui_landing_platforms_eyebrow
    | ui_landing_platforms_title
    | ui_landing_platforms_description
    |
    */

    .platform-section {
        position: relative !important;
        overflow: hidden !important;

        background:
            radial-gradient(
                circle at 6% 14%,
                color-mix(
                    in srgb,
                    var(--brand) 10%,
                    transparent
                ),
                transparent 28%
            ),
            radial-gradient(
                circle at 95% 80%,
                color-mix(
                    in srgb,
                    var(--accent) 12%,
                    transparent
                ),
                transparent 30%
            ),
            var(--index-soft) !important;
    }

    .platform-section::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 420px !important;
        height: 420px !important;

        background-image:
            radial-gradient(
                circle,
                color-mix(
                    in srgb,
                    var(--brand) 18%,
                    transparent
                ) 1.5px,
                transparent 1.5px
            ) !important;

        background-size:
            22px 22px !important;

        opacity: .42 !important;
        pointer-events: none !important;
    }

    .platform-section .landing-wrap {
        position: relative !important;
        z-index: 2 !important;
    }

    .platform-section .section-head {
        position: relative !important;
        isolation: isolate !important;

        max-width: none !important;
        min-height: 260px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        padding:
            38px
            310px
            38px
            39px !important;

        overflow: hidden !important;

        border:
            1px solid
            color-mix(
                in srgb,
                var(--brand) 17%,
                var(--plan-card-border)
            ) !important;

        border-radius:
            30px !important;

        background:
            radial-gradient(
                circle at 90% 10%,
                color-mix(
                    in srgb,
                    var(--brand) 13%,
                    transparent
                ),
                transparent 35%
            ),
            linear-gradient(
                145deg,
                var(--index-surface),
                color-mix(
                    in srgb,
                    var(--accent) 4%,
                    var(--index-surface)
                )
            ) !important;

        box-shadow:
            0 25px 65px
            color-mix(
                in srgb,
                var(--index-dark) 10%,
                transparent
            ) !important;
    }

    .platform-section
    .section-head::before {
        content: "\f5fd" !important;

        position: absolute !important;
        z-index: 2 !important;
        top: 50% !important;
        right: 86px !important;

        width: 128px !important;
        height: 128px !important;

        display: grid !important;
        place-items: center !important;

        border:
            1px solid
            color-mix(
                in srgb,
                var(--brand) 24%,
                transparent
            ) !important;

        border-radius:
            38px !important;

        background:
            linear-gradient(
                145deg,
                var(--brand),
                var(--brand-dark)
            ) !important;

        color: #ffffff !important;

        font-family:
            "Font Awesome 6 Free",
            "Font Awesome 5 Free" !important;

        font-size: 52px !important;
        font-weight: 900 !important;

        box-shadow:
            0 27px 58px
            color-mix(
                in srgb,
                var(--brand) 28%,
                transparent
            ) !important;

        transform:
            translateY(-50%)
            rotate(-5deg) !important;
    }

    .platform-section
    .section-head::after {
        content: "" !important;

        position: absolute !important;
        z-index: 1 !important;
        top: 50% !important;
        right: 44px !important;

        width: 220px !important;
        height: 220px !important;

        border:
            1px solid
            color-mix(
                in srgb,
                var(--brand) 18%,
                transparent
            ) !important;

        border-radius:
            50% !important;

        box-shadow:
            0 0 0 28px
            color-mix(
                in srgb,
                var(--brand) 5%,
                transparent
            ),
            0 0 0 58px
            color-mix(
                in srgb,
                var(--accent) 3%,
                transparent
            ) !important;

        transform:
            translateY(-50%) !important;
    }

    .platform-section
    .section-head h2 {
        position: relative !important;
        z-index: 3 !important;

        max-width: 830px !important;

        font-size:
            clamp(
                34px,
                4.2vw,
                54px
            ) !important;

        line-height: 1.02 !important;
    }

    .platform-section
    .section-head p {
        position: relative !important;
        z-index: 3 !important;

        max-width: 780px !important;

        font-size: 15px !important;
        line-height: 1.75 !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Ventajas operativas
    |--------------------------------------------------------------------------
    |
    | Los textos continúan siendo configurables desde Marca Blanca.
    |
    */

    .advantages-section,
    .section-premium:has(.feature-grid) {
        position: relative !important;
        overflow: hidden !important;

        background:
            radial-gradient(
                circle at 2% 50%,
                color-mix(
                    in srgb,
                    var(--brand) 8%,
                    transparent
                ),
                transparent 30%
            ),
            radial-gradient(
                circle at 98% 20%,
                color-mix(
                    in srgb,
                    var(--accent) 10%,
                    transparent
                ),
                transparent 31%
            ),
            var(--index-bg) !important;
    }

    .advantages-section .section-head,
    .section-premium:has(.feature-grid)
    .section-head {
        position: relative !important;
        isolation: isolate !important;

        max-width: none !important;
        min-height: 255px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        margin: 0 !important;

        padding:
            39px
            300px
            39px
            40px !important;

        overflow: hidden !important;
        text-align: left !important;

        border:
            1px solid
            rgba(255,255,255,.12) !important;

        border-radius:
            30px !important;

        background:
            radial-gradient(
                circle at 90% 12%,
                color-mix(
                    in srgb,
                    var(--brand) 30%,
                    transparent
                ),
                transparent 32%
            ),
            linear-gradient(
                145deg,
                var(--index-dark),
                var(--index-dark-alt)
            ) !important;

        color:
            var(--index-dark-text) !important;

        box-shadow:
            0 30px 70px
            color-mix(
                in srgb,
                var(--index-dark) 23%,
                transparent
            ) !important;
    }

    .advantages-section
    .section-head.center
    .section-kicker,
    .section-premium:has(.feature-grid)
    .section-head.center
    .section-kicker {
        justify-content:
            flex-start !important;

        color: #fca5a5 !important;
    }

    .advantages-section
    .section-head.center
    .section-kicker::before,
    .section-premium:has(.feature-grid)
    .section-head.center
    .section-kicker::before {
        display: block !important;
        background: #fca5a5 !important;
    }

    .advantages-section
    .section-head::before,
    .section-premium:has(.feature-grid)
    .section-head::before {
        content: "\f544" !important;

        position: absolute !important;
        z-index: 2 !important;
        top: 50% !important;
        right: 82px !important;

        width: 132px !important;
        height: 132px !important;

        display: grid !important;
        place-items: center !important;

        border:
            1px solid
            rgba(255,255,255,.18) !important;

        border-radius:
            40px !important;

        background:
            linear-gradient(
                145deg,
                var(--brand),
                var(--brand-dark)
            ) !important;

        color: #ffffff !important;

        font-family:
            "Font Awesome 6 Free",
            "Font Awesome 5 Free" !important;

        font-size: 56px !important;
        font-weight: 900 !important;

        box-shadow:
            0 25px 60px
            color-mix(
                in srgb,
                var(--brand) 38%,
                transparent
            ) !important;

        transform:
            translateY(-50%)
            rotate(5deg) !important;
    }

    .advantages-section
    .section-head::after,
    .section-premium:has(.feature-grid)
    .section-head::after {
        content: "" !important;

        position: absolute !important;
        z-index: 1 !important;
        top: 50% !important;
        right: 36px !important;

        width: 225px !important;
        height: 225px !important;

        border:
            1px solid
            rgba(255,255,255,.11) !important;

        border-radius:
            50% !important;

        box-shadow:
            0 0 0 32px
            rgba(255,255,255,.035),
            0 0 0 65px
            rgba(255,255,255,.02) !important;

        transform:
            translateY(-50%) !important;
    }

    .advantages-section
    .section-head h2,
    .section-premium:has(.feature-grid)
    .section-head h2 {
        position: relative !important;
        z-index: 3 !important;

        max-width: 760px !important;

        color:
            var(--index-dark-text) !important;

        font-size:
            clamp(
                34px,
                4.2vw,
                52px
            ) !important;
    }

    .advantages-section
    .section-head p,
    .section-premium:has(.feature-grid)
    .section-head p {
        position: relative !important;
        z-index: 3 !important;

        max-width: 760px !important;

        color: #cbd5e1 !important;
        font-size: 14px !important;
        line-height: 1.75 !important;
    }

    .advantages-section .feature-grid,
    .section-premium:has(.feature-grid)
    .feature-grid {
        gap: 18px !important;
        margin-top: 25px !important;
    }

    .advantages-section .feature-card,
    .section-premium:has(.feature-grid)
    .feature-card {
        position: relative !important;
        min-height: 225px !important;

        padding: 25px !important;

        overflow: hidden !important;

        border:
            1px solid
            color-mix(
                in srgb,
                var(--brand) 11%,
                var(--plan-card-border)
            ) !important;

        border-radius:
            23px !important;

        background:
            linear-gradient(
                180deg,
                var(--index-surface),
                color-mix(
                    in srgb,
                    var(--brand) 2.5%,
                    var(--index-surface)
                )
            ) !important;

        box-shadow:
            0 15px 38px
            color-mix(
                in srgb,
                var(--index-dark) 7%,
                transparent
            ) !important;

        transition:
            transform .22s ease,
            box-shadow .22s ease,
            border-color .22s ease !important;
    }

    .advantages-section
    .feature-card::after,
    .section-premium:has(.feature-grid)
    .feature-card::after {
        content: "" !important;

        position: absolute !important;
        right: -36px !important;
        bottom: -36px !important;

        width: 105px !important;
        height: 105px !important;

        border:
            1px solid
            color-mix(
                in srgb,
                var(--brand) 12%,
                transparent
            ) !important;

        border-radius:
            50% !important;
    }

    .advantages-section
    .feature-card:hover,
    .section-premium:has(.feature-grid)
    .feature-card:hover {
        transform:
            translateY(-6px) !important;

        border-color:
            color-mix(
                in srgb,
                var(--brand) 28%,
                var(--plan-card-border)
            ) !important;

        box-shadow:
            0 26px 55px
            color-mix(
                in srgb,
                var(--brand) 11%,
                transparent
            ) !important;
    }

    .advantages-section
    .feature-icon,
    .section-premium:has(.feature-grid)
    .feature-icon {
        width: 68px !important;
        height: 68px !important;
        min-width: 68px !important;
        min-height: 68px !important;

        border:
            1px solid
            color-mix(
                in srgb,
                var(--brand) 17%,
                transparent
            ) !important;

        border-radius:
            21px !important;

        background:
            linear-gradient(
                145deg,
                color-mix(
                    in srgb,
                    var(--brand) 15%,
                    var(--index-surface)
                ),
                var(--index-surface)
            ) !important;

        color: var(--brand) !important;

        font-size: 27px !important;

        box-shadow:
            0 14px 29px
            color-mix(
                in srgb,
                var(--brand) 13%,
                transparent
            ) !important;
    }

    .advantages-section
    .feature-card:nth-child(3n + 2)
    .feature-icon,
    .section-premium:has(.feature-grid)
    .feature-card:nth-child(3n + 2)
    .feature-icon {
        background:
            linear-gradient(
                145deg,
                color-mix(
                    in srgb,
                    var(--accent) 17%,
                    var(--index-surface)
                ),
                var(--index-surface)
            ) !important;

        color: var(--accent) !important;
    }

    .advantages-section
    .feature-card h3,
    .section-premium:has(.feature-grid)
    .feature-card h3 {
        margin-top: 20px !important;
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    .advantages-section
    .feature-card p,
    .section-premium:has(.feature-grid)
    .feature-card p {
        margin-top: 10px !important;
        font-size: 11.5px !important;
        line-height: 1.72 !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Control y seguridad
    |--------------------------------------------------------------------------
    |
    | El título y la descripción continúan administrándose
    | desde Marca Blanca.
    |
    */

    .control-section {
        padding:
            100px 0 !important;

        background:
            radial-gradient(
                circle at 13% 18%,
                color-mix(
                    in srgb,
                    var(--brand) 32%,
                    transparent
                ),
                transparent 31%
            ),
            radial-gradient(
                circle at 92% 85%,
                color-mix(
                    in srgb,
                    var(--accent) 13%,
                    transparent
                ),
                transparent 28%
            ),
            linear-gradient(
                145deg,
                var(--index-dark),
                var(--index-dark-alt) 58%,
                color-mix(
                    in srgb,
                    var(--brand-dark) 56%,
                    var(--index-dark)
                )
            ) !important;
    }

    .control-grid {
        gap: 30px !important;
        align-items: stretch !important;
    }

    .control-section .section-head {
        position: relative !important;
        isolation: isolate !important;

        max-width: none !important;
        min-height: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        padding:
            35px
            35px
            165px !important;

        overflow: hidden !important;

        border:
            1px solid
            rgba(255,255,255,.13) !important;

        border-radius:
            27px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.09),
                rgba(255,255,255,.035)
            ) !important;

        box-shadow:
            inset 0 1px 0
            rgba(255,255,255,.08),
            0 28px 65px
            rgba(0,0,0,.2) !important;

        backdrop-filter:
            blur(16px) !important;
    }

    .control-section
    .section-head::before {
        content: "\f3ed" !important;

        position: absolute !important;
        z-index: 2 !important;
        left: 36px !important;
        bottom: 28px !important;

        width: 105px !important;
        height: 105px !important;

        display: grid !important;
        place-items: center !important;

        border:
            1px solid
            rgba(255,255,255,.15) !important;

        border-radius:
            31px !important;

        background:
            linear-gradient(
                145deg,
                var(--brand),
                var(--brand-dark)
            ) !important;

        color: #ffffff !important;

        font-family:
            "Font Awesome 6 Free",
            "Font Awesome 5 Free" !important;

        font-size: 45px !important;
        font-weight: 900 !important;

        box-shadow:
            0 22px 48px
            color-mix(
                in srgb,
                var(--brand) 34%,
                transparent
            ) !important;
    }

    .control-section
    .section-head::after {
        content: none !important;
        display: none !important;
    }

    .control-section
    .section-head h2 {
        position: relative !important;
        z-index: 3 !important;

        font-size:
            clamp(
                30px,
                3.35vw,
                44px
            ) !important;
        line-height: 1.02 !important;
    }

    .control-section
    .section-head p {
        position: relative !important;
        z-index: 3 !important;

        font-size: 14px !important;
        line-height: 1.75 !important;
    }

    .control-list {
        gap: 14px !important;
    }

    .control-card {
        position: relative !important;

        grid-template-columns:
            58px 1fr !important;

        gap: 16px !important;

        min-height: 112px !important;

        padding: 20px !important;

        overflow: hidden !important;

        border:
            1px solid
            rgba(255,255,255,.12) !important;

        border-radius:
            20px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.09),
                rgba(255,255,255,.045)
            ) !important;

        box-shadow:
            0 15px 34px
            rgba(0,0,0,.13) !important;

        transition:
            transform .2s ease,
            border-color .2s ease,
            background .2s ease !important;
    }

    .control-card:hover {
        transform:
            translateX(6px) !important;

        border-color:
            color-mix(
                in srgb,
                var(--brand) 45%,
                rgba(255,255,255,.12)
            ) !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.12),
                rgba(255,255,255,.06)
            ) !important;
    }

    .control-card > i {
        width: 58px !important;
        height: 58px !important;

        border-radius:
            17px !important;

        background:
            color-mix(
                in srgb,
                var(--brand) 23%,
                transparent
            ) !important;

        color: #fecaca !important;

        font-size: 21px !important;

        box-shadow:
            0 13px 27px
            color-mix(
                in srgb,
                var(--brand) 14%,
                transparent
            ) !important;
    }

    .control-card h3 {
        font-size: 16px !important;
    }

    .control-card p {
        margin-top: 7px !important;

        font-size: 11px !important;
        line-height: 1.65 !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Separación entre tarjetas de planes
    |--------------------------------------------------------------------------
    */

    .pricing-section .plans-grid {
        max-width: 1135px !important;

        gap: 25px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Listo para crecer
    |--------------------------------------------------------------------------
    |
    | Continúan configurables desde Marca Blanca:
    |
    | ui_landing_final_eyebrow
    | ui_landing_final_title
    | ui_landing_final_description
    | ui_landing_final_button
    |
    */

    .final-cta {
        position: relative !important;
        overflow: hidden !important;

        padding:
            96px 0 !important;

        background:
            radial-gradient(
                circle at 3% 90%,
                color-mix(
                    in srgb,
                    var(--brand) 8%,
                    transparent
                ),
                transparent 29%
            ),
            radial-gradient(
                circle at 96% 5%,
                color-mix(
                    in srgb,
                    var(--accent) 10%,
                    transparent
                ),
                transparent 28%
            ),
            var(--index-bg) !important;
    }

    .final-card {
        position: relative !important;
        isolation: isolate !important;

        min-height: 315px !important;

        padding:
            50px
            48px !important;

        overflow: hidden !important;

        border:
            1px solid
            rgba(255,255,255,.17) !important;

        border-radius:
            34px !important;

        background:
            radial-gradient(
                circle at 82% 10%,
                rgba(255,255,255,.16),
                transparent 27%
            ),
            linear-gradient(
                135deg,
                var(--brand),
                color-mix(
                    in srgb,
                    var(--brand-dark) 80%,
                    var(--index-dark)
                )
            ) !important;

        box-shadow:
            0 37px 90px
            color-mix(
                in srgb,
                var(--brand) 29%,
                transparent
            ) !important;
    }

    .final-card::before {
        content: "\f135" !important;

        position: absolute !important;
        z-index: 0 !important;
        top: 50% !important;
        right: 205px !important;

        color:
            rgba(255,255,255,.11) !important;

        font-family:
            "Font Awesome 6 Free",
            "Font Awesome 5 Free" !important;

        font-size: 180px !important;
        font-weight: 900 !important;

        transform:
            translateY(-50%)
            rotate(-11deg) !important;
    }

    .final-card::after {
        content: "" !important;

        position: absolute !important;
        z-index: 0 !important;
        top: -130px !important;
        right: -95px !important;

        width: 380px !important;
        height: 380px !important;

        border:
            1px solid
            rgba(255,255,255,.17) !important;

        border-radius:
            50% !important;

        box-shadow:
            0 0 0 55px
            rgba(255,255,255,.05),
            0 0 0 110px
            rgba(255,255,255,.025) !important;
    }

    .final-copy {
        position: relative !important;
        z-index: 3 !important;

        max-width: 760px !important;
    }

    .final-copy h2 {
        max-width: 710px !important;

        font-size:
            clamp(
                36px,
                4.5vw,
                57px
            ) !important;

        line-height: 1 !important;
    }

    .final-copy p {
        max-width: 680px !important;

        font-size: 15px !important;
        line-height: 1.75 !important;
    }

    .final-copy::after {
        content: "" !important;

        display: block !important;

        width: 92px !important;
        height: 5px !important;

        margin-top: 23px !important;

        border-radius:
            999px !important;

        background:
            linear-gradient(
                90deg,
                #ffffff,
                var(--accent)
            ) !important;
    }

    .final-card .landing-btn {
        position: relative !important;
        z-index: 4 !important;

        min-height: 60px !important;

        padding:
            0 25px !important;

        border:
            1px solid
            rgba(255,255,255,.5) !important;

        border-radius:
            17px !important;

        background:
            #ffffff !important;

        color:
            var(--brand-dark) !important;

        font-size: 13px !important;

        box-shadow:
            0 19px 38px
            rgba(0,0,0,.22) !important;
    }

    .final-card
    .landing-btn i {
        width: 32px !important;
        height: 32px !important;

        display: grid !important;
        place-items: center !important;

        border-radius:
            10px !important;

        background:
            color-mix(
                in srgb,
                var(--brand) 11%,
                #ffffff
            ) !important;

        color:
            var(--brand) !important;
    }

    .final-card
    .landing-btn:hover {
        transform:
            translateY(-4px)
            scale(1.015) !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Responsive
    |--------------------------------------------------------------------------
    */

    @media (max-width: 1050px) {
        .platform-section
        .section-head,
        .advantages-section
        .section-head,
        .section-premium:has(.feature-grid)
        .section-head {
            padding-right:
                245px !important;
        }

        .platform-section
        .section-head::before,
        .advantages-section
        .section-head::before,
        .section-premium:has(.feature-grid)
        .section-head::before {
            right: 55px !important;
        }

        .platform-section
        .section-head::after,
        .advantages-section
        .section-head::after,
        .section-premium:has(.feature-grid)
        .section-head::after {
            right: 13px !important;
        }
    }

    @media (max-width: 900px) {
        .platform-section
        .section-head,
        .advantages-section
        .section-head,
        .section-premium:has(.feature-grid)
        .section-head {
            min-height: auto !important;

            padding:
                32px
                190px
                32px
                31px !important;
        }

        .platform-section
        .section-head::before,
        .advantages-section
        .section-head::before,
        .section-premium:has(.feature-grid)
        .section-head::before {
            right: 32px !important;

            width: 105px !important;
            height: 105px !important;

            border-radius:
                31px !important;

            font-size:
                43px !important;
        }

        .platform-section
        .section-head::after,
        .advantages-section
        .section-head::after,
        .section-premium:has(.feature-grid)
        .section-head::after {
            display: none !important;
        }

        .control-grid {
            grid-template-columns:
                1fr !important;
        }

        .control-section
        .section-head {
            min-height: 390px !important;
        }

        .pricing-section
        .plans-grid {
            gap: 20px !important;
        }
    }

    @media (max-width: 760px) {
        .platform-section
        .section-head,
        .advantages-section
        .section-head,
        .section-premium:has(.feature-grid)
        .section-head {
            padding:
                28px !important;
        }

        .platform-section
        .section-head::before,
        .platform-section
        .section-head::after,
        .advantages-section
        .section-head::before,
        .advantages-section
        .section-head::after,
        .section-premium:has(.feature-grid)
        .section-head::before,
        .section-premium:has(.feature-grid)
        .section-head::after {
            display: none !important;
        }

        .platform-section
        .section-head h2,
        .advantages-section
        .section-head h2,
        .section-premium:has(.feature-grid)
        .section-head h2 {
            font-size: 34px !important;
        }

        .advantages-section
        .feature-grid,
        .section-premium:has(.feature-grid)
        .feature-grid {
            grid-template-columns:
                1fr !important;
        }

        .advantages-section
        .feature-card,
        .section-premium:has(.feature-grid)
        .feature-card {
            min-height: auto !important;
        }

        .control-section {
            padding:
                68px 0 !important;
        }

        .control-section
        .section-head {
            min-height: 370px !important;

            padding:
                28px
                25px
                155px !important;
        }

        .control-section
        .section-head::before {
            left: 25px !important;
            bottom: 27px !important;

            width: 90px !important;
            height: 90px !important;

            font-size: 38px !important;
        }

        .control-section
        .section-head::after {
            left: 130px !important;
            bottom: 61px !important;
        }

        .control-card {
            grid-template-columns:
                52px 1fr !important;

            padding:
                17px !important;
        }

        .control-card > i {
            width: 52px !important;
            height: 52px !important;
        }

        .pricing-section
        .plans-grid {
            gap: 18px !important;
        }

        .final-cta {
            padding:
                70px 0 !important;
        }

        .final-card {
            min-height: auto !important;

            grid-template-columns:
                1fr !important;

            padding:
                34px 28px !important;
        }

        .final-card::before {
            right: -15px !important;

            font-size:
                135px !important;

            opacity: .55 !important;
        }

        .final-card
        .landing-btn {
            width: 100% !important;
        }
    }


    /* AFENIXX-INDEX-HERO-CONTROL-V12 */

    /*
    |--------------------------------------------------------------------------
    | Hero principal más comercial y profesional
    |--------------------------------------------------------------------------
    */

    body.af-index-page .hero-premium {
        position: relative;
        isolation: isolate;
        padding-top: 82px;
        padding-bottom: 76px;
        overflow: hidden;
    }

    body.af-index-page .hero-premium::before {
        content: "";
        position: absolute;
        z-index: -1;
        left: -190px;
        bottom: -240px;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background:
            radial-gradient(
                circle,
                color-mix(in srgb, var(--brand) 12%, transparent),
                transparent 67%
            );
        pointer-events: none;
    }

    body.af-index-page .hero-premium::after {
        right: -170px;
        top: -190px;
        width: 540px;
        height: 540px;
        opacity: .88;
    }

    body.af-index-page .hero-grid {
        grid-template-columns:
            minmax(0, 1.03fr)
            minmax(430px, .97fr);
        gap: 66px;
        align-items: center;
    }

    body.af-index-page .hero-grid > div:first-child {
        position: relative;
        padding: 28px 12px 30px 32px;
    }

    body.af-index-page .hero-grid > div:first-child::before {
        content: "";
        position: absolute;
        left: 0;
        top: 26px;
        bottom: 28px;
        width: 4px;
        border-radius: 999px;
        background:
            linear-gradient(
                180deg,
                var(--brand),
                var(--accent)
            );
        box-shadow:
            0 0 26px
            color-mix(
                in srgb,
                var(--brand) 32%,
                transparent
            );
    }

    body.af-index-page .hero-grid > div:first-child::after {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0 -18px 0 8px;
        border:
            1px solid
            color-mix(
                in srgb,
                var(--brand) 9%,
                transparent
            );
        border-radius: 30px;
        background:
            linear-gradient(
                135deg,
                color-mix(
                    in srgb,
                    var(--index-surface) 76%,
                    transparent
                ),
                color-mix(
                    in srgb,
                    var(--index-soft) 58%,
                    transparent
                )
            );
        box-shadow:
            0 26px 70px
            color-mix(
                in srgb,
                var(--index-dark) 7%,
                transparent
            );
        backdrop-filter: blur(13px);
    }

    body.af-index-page .hero-premium .section-kicker {
        position: relative;
        z-index: 2;
        padding: 8px 12px;
        border:
            1px solid
            color-mix(
                in srgb,
                var(--brand) 18%,
                transparent
            );
        border-radius: 999px;
        background:
            color-mix(
                in srgb,
                var(--brand) 7%,
                var(--index-surface)
            );
        box-shadow:
            0 8px 20px
            color-mix(
                in srgb,
                var(--brand) 7%,
                transparent
            );
    }

    body.af-index-page .hero-premium .section-kicker::before {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        box-shadow:
            0 0 0 5px
            color-mix(
                in srgb,
                var(--brand) 10%,
                transparent
            );
    }

    body.af-index-page .landing-title {
        position: relative;
        z-index: 2;
        display: inline-block;
        max-width: 760px;
        margin-top: 20px;
        font-size: clamp(43px, 5.4vw, 72px);
        line-height: .99;
        letter-spacing: -.058em;
        text-wrap: balance;
        background:
            linear-gradient(
                112deg,
                var(--index-ink) 0%,
                var(--index-ink) 68%,
                var(--brand) 100%
            );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    body.af-index-page .landing-title::after {
        content: "";
        display: block;
        width: 92px;
        height: 6px;
        margin-top: 20px;
        border-radius: 999px;
        background:
            linear-gradient(
                90deg,
                var(--brand),
                var(--accent)
            );
        box-shadow:
            0 9px 24px
            color-mix(
                in srgb,
                var(--brand) 25%,
                transparent
            );
    }

    body.af-index-page .landing-lead {
        position: relative;
        z-index: 2;
        max-width: 700px;
        margin-top: 20px;
        font-size: clamp(16px, 1.7vw, 19px);
        line-height: 1.72;
    }

    body.af-index-page .landing-actions,
    body.af-index-page .hero-proof {
        position: relative;
        z-index: 2;
    }

    body.af-index-page .landing-actions {
        margin-top: 27px;
    }

    body.af-index-page .hero-proof {
        gap: 9px;
        margin-top: 24px;
    }

    body.af-index-page .hero-proof span {
        min-height: 34px;
        padding: 8px 11px;
        border:
            1px solid
            color-mix(
                in srgb,
                var(--brand) 10%,
                #dfe7f1
            );
        background:
            color-mix(
                in srgb,
                var(--index-surface) 88%,
                transparent
            );
        box-shadow:
            0 9px 22px rgba(15, 23, 42, .055);
    }

    body.af-index-page .ops-card {
        border-radius: 30px;
        box-shadow:
            0 42px 95px
            color-mix(
                in srgb,
                var(--index-dark) 32%,
                transparent
            ),
            0 0 0 8px
            color-mix(
                in srgb,
                var(--brand) 3%,
                transparent
            );
        transform:
            perspective(1200px)
            rotateY(-1.5deg)
            translateY(-2px);
        transition:
            transform .25s ease,
            box-shadow .25s ease;
    }

    body.af-index-page .ops-card:hover {
        transform:
            perspective(1200px)
            rotateY(0)
            translateY(-7px);
        box-shadow:
            0 52px 110px
            color-mix(
                in srgb,
                var(--index-dark) 38%,
                transparent
            );
    }

    body.af-index-page .ops-body {
        padding: 20px;
    }

    body.af-index-page .ops-metric {
        min-height: 128px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    body.af-index-page .ops-metric strong {
        font-size: 28px;
    }

    body.af-index-page .ops-metric span {
        font-size: 8.5px;
        line-height: 1.45;
    }

    /*
    |--------------------------------------------------------------------------
    | Control y seguridad reorganizado
    |--------------------------------------------------------------------------
    */

    body.af-index-page .control-section {
        padding-top: 74px;
        padding-bottom: 74px;
    }

    body.af-index-page .control-grid {
        grid-template-columns:
            minmax(340px, .88fr)
            minmax(0, 1.12fr);
        gap: 24px;
        align-items: center;
    }

    body.af-index-page .control-section .section-head {
        position: relative;
        max-width: none;
        padding: 30px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .13);
        border-radius: 27px;
        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, .075),
                rgba(255, 255, 255, .025)
            );
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .07),
            0 24px 60px rgba(2, 6, 23, .22);
        backdrop-filter: blur(14px);
    }

    body.af-index-page .control-section .section-head::after {
        content: "";
        position: absolute;
        right: -65px;
        bottom: -75px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background:
            radial-gradient(
                circle,
                color-mix(
                    in srgb,
                    var(--brand) 18%,
                    transparent
                ),
                transparent 68%
            );
        pointer-events: none;
    }

    body.af-index-page .control-section .section-head h2 {
        max-width: 530px;
        margin-top: 14px;
        font-size: clamp(35px, 4vw, 54px);
        line-height: 1.01;
        letter-spacing: -.052em;
        text-wrap: balance;
    }

    body.af-index-page .control-section .section-head > p {
        max-width: 520px;
        margin-top: 17px;
        font-size: 13px;
        line-height: 1.72;
    }

    body.af-index-page .control-list {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        align-content: center;
        gap: 14px;
    }

    body.af-index-page .control-card {
        position: relative;
        min-height: 142px !important;
        height: auto !important;
        display: grid;
        grid-template-columns: 50px 1fr;
        align-items: start;
        gap: 14px;
        padding: 20px !important;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .13);
        border-radius: 20px;
        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, .075),
                rgba(255, 255, 255, .035)
            );
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .055),
            0 15px 38px rgba(2, 6, 23, .16);
        transition:
            transform .2s ease,
            border-color .2s ease,
            background .2s ease;
    }

    body.af-index-page .control-card::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 3px;
        background:
            linear-gradient(
                180deg,
                var(--brand),
                var(--accent)
            );
        opacity: .78;
    }

    body.af-index-page .control-card:hover {
        border-color:
            color-mix(
                in srgb,
                var(--brand) 52%,
                rgba(255, 255, 255, .13)
            );
        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, .095),
                rgba(255, 255, 255, .045)
            );
        transform: translateY(-4px);
    }

    body.af-index-page .control-card:nth-child(3) {
        grid-column: 1 / -1;
        min-height: 120px !important;
    }

    body.af-index-page .control-card > i,
    body.af-index-page .control-card > .control-icon {
        width: 50px !important;
        height: 50px !important;
        display: grid;
        place-items: center;
        flex: 0 0 50px;
        border-radius: 15px !important;
        font-size: 18px;
        background:
            linear-gradient(
                145deg,
                color-mix(
                    in srgb,
                    var(--brand) 25%,
                    transparent
                ),
                color-mix(
                    in srgb,
                    var(--brand-dark) 18%,
                    transparent
                )
            ) !important;
        color: #fecaca !important;
        box-shadow:
            0 11px 25px
            color-mix(
                in srgb,
                var(--brand) 17%,
                transparent
            );
    }

    body.af-index-page .control-card h3 {
        margin: 2px 0 0;
        font-size: 16px;
        line-height: 1.25;
    }

    body.af-index-page .control-card p {
        max-width: 560px;
        margin-top: 8px;
        font-size: 11px;
        line-height: 1.62;
    }

    /*
     * Compatibilidad con nombres utilizados por parches visuales anteriores.
     * Se oculta solamente el pequeño bloque inferior duplicado.
     */

    body.af-index-page #privacidad .control-proof,
    body.af-index-page #privacidad .control-protected,
    body.af-index-page #privacidad .control-protected-badge,
    body.af-index-page #privacidad .protected-badge,
    body.af-index-page #privacidad .security-proof,
    body.af-index-page #privacidad .security-status,
    body.af-index-page #privacidad .control-visual-footer,
    body.af-index-page #privacidad .control-visual-caption,
    body.af-index-page #privacidad .control-access-badge,
    body.af-index-page #privacidad .af-duplicate-control-badge,
    body.af-index-page #privacidad .af-control-duplicate-card {
        display: none !important;
    }

    body.af-index-page #privacidad .control-visual,
    body.af-index-page #privacidad .security-visual,
    body.af-index-page #privacidad .control-showcase,
    body.af-index-page #privacidad .control-illustration {
        margin-top: 23px;
    }

    /*
    |--------------------------------------------------------------------------
    | Adaptación responsive
    |--------------------------------------------------------------------------
    */

    @media (max-width: 1080px) {
        body.af-index-page .hero-grid,
        body.af-index-page .control-grid {
            grid-template-columns: 1fr;
        }

        body.af-index-page .hero-grid {
            gap: 42px;
        }

        body.af-index-page .ops-card {
            width: min(760px, 100%);
            transform: none;
        }

        body.af-index-page .control-grid {
            gap: 20px;
        }

        body.af-index-page .control-list {
            grid-template-columns:
                repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 760px) {
        body.af-index-page .hero-premium {
            padding-top: 52px;
            padding-bottom: 55px;
        }

        body.af-index-page .hero-grid > div:first-child {
            padding: 23px 18px 24px 25px;
        }

        body.af-index-page .hero-grid > div:first-child::after {
            right: 0;
        }

        body.af-index-page .landing-title {
            font-size: clamp(39px, 12vw, 52px);
        }

        body.af-index-page .ops-card {
            transform: none;
        }

        body.af-index-page .control-section {
            padding-top: 58px;
            padding-bottom: 58px;
        }

        body.af-index-page .control-section .section-head {
            padding: 23px;
        }

        body.af-index-page .control-section .section-head h2 {
            font-size: clamp(34px, 10vw, 46px);
        }

        body.af-index-page .control-list {
            grid-template-columns: 1fr;
        }

        body.af-index-page .control-card,
        body.af-index-page .control-card:nth-child(3) {
            grid-column: auto;
            min-height: 0 !important;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        body.af-index-page .ops-card,
        body.af-index-page .control-card {
            transition: none;
            transform: none !important;
        }
    }

    /*
    |--------------------------------------------------------------------------
    | Control, seguridad y catálogo premium de planes
    |--------------------------------------------------------------------------
    */

    body.af-index-page .control-proof-chips {
        position: relative;
        z-index: 2;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 22px;
    }

    body.af-index-page .control-proof-chips span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 34px;
        padding: 8px 11px;
        border: 1px solid rgba(255,255,255,.13);
        border-radius: 999px;
        background: rgba(255,255,255,.065);
        color: #e8eef8;
        font-size: 9px;
        font-weight: 850;
        letter-spacing: .01em;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }

    body.af-index-page .control-proof-chips i {
        color: color-mix(in srgb, var(--accent) 76%, #fff);
        font-size: 10px;
    }

    body.af-index-page .pricing-section {
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at 10% 0, color-mix(in srgb, var(--brand) 8%, transparent), transparent 30%),
            radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 26%),
            var(--index-soft);
    }

    body.af-index-page .pricing-section::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: .4;
        background-image:
            linear-gradient(color-mix(in srgb, var(--plan-card-border) 52%, transparent) 1px, transparent 1px),
            linear-gradient(90deg, color-mix(in srgb, var(--plan-card-border) 52%, transparent) 1px, transparent 1px);
        background-size: 46px 46px;
        mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 78%, transparent);
    }

    body.af-index-page .pricing-section .landing-wrap {
        position: relative;
        z-index: 1;
    }

    body.af-index-page .plans-overview {
        width: min(920px, 100%);
        margin: 28px auto 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
        gap: 10px;
        padding: 10px;
        border: 1px solid var(--plan-card-border);
        border-radius: 20px;
        background: color-mix(in srgb, var(--plan-card-bg) 92%, transparent);
        box-shadow: 0 18px 46px color-mix(in srgb, var(--index-dark) 8%, transparent);
        backdrop-filter: blur(12px);
    }

    body.af-index-page .plans-overview article {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 11px 13px;
        border-radius: 14px;
        background: var(--plan-price-bg);
    }

    body.af-index-page .plans-overview article > span {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        flex: 0 0 38px;
        border-radius: 12px;
        background: color-mix(in srgb, var(--brand) 10%, var(--plan-card-bg));
        color: var(--brand);
    }

    body.af-index-page .plans-overview strong,
    body.af-index-page .plans-overview small {
        display: block;
    }

    body.af-index-page .plans-overview strong {
        color: var(--index-ink);
        font-size: 18px;
        line-height: 1;
    }

    body.af-index-page .plans-overview small {
        margin-top: 4px;
        color: var(--index-muted);
        font-size: 8px;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    body.af-index-page .plans-grid {
        position: relative;
        margin-top: 22px;
    }

    body.af-index-page .plan-card {
        isolation: isolate;
        overflow: visible;
    }

    body.af-index-page .plan-card::before {
        border-radius: 22px 22px 0 0;
    }

    body.af-index-page .plan-card::after {
        content: "";
        position: absolute;
        inset: 6px 12px auto;
        height: 54px;
        z-index: -1;
        border-radius: 24px;
        background: color-mix(in srgb, var(--brand) 9%, transparent);
        filter: blur(24px);
        opacity: 0;
        transition: opacity .22s ease;
    }

    body.af-index-page .plan-card:hover::after,
    body.af-index-page .plan-card.is-featured::after {
        opacity: 1;
    }

    body.af-index-page .plan-featured-ribbon {
        position: absolute;
        top: -12px;
        left: 50%;
        z-index: 4;
        transform: translateX(-50%);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 28px;
        padding: 6px 12px;
        border: 3px solid var(--index-soft);
        border-radius: 999px;
        background: linear-gradient(135deg, var(--brand), var(--accent));
        color: #fff;
        font-size: 8px;
        font-weight: 950;
        letter-spacing: .07em;
        text-transform: uppercase;
        box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 24%, transparent);
        white-space: nowrap;
    }

    body.af-index-page .plan-card.is-featured .plan-card-inner {
        padding-top: 31px;
    }

    body.af-index-page .plan-metrics {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    body.af-index-page .plan-metric {
        min-height: 58px;
    }

    body.af-index-page .plan-card-footer .landing-btn {
        box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 18%, transparent);
    }

    @media (max-width: 760px) {
        body.af-index-page .control-proof-chips {
            display: grid;
            grid-template-columns: 1fr;
        }

        body.af-index-page .control-proof-chips span {
            justify-content: flex-start;
            border-radius: 12px;
        }

        body.af-index-page .plans-overview {
            grid-template-columns: repeat(2, minmax(0,1fr));
        }

        body.af-index-page .plan-metrics {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 460px) {
        body.af-index-page .plans-overview,
        body.af-index-page .plan-metrics {
            grid-template-columns: 1fr;
        }
    }



/* AFENIXX-CONTROL-PLATFORMS-COMPACT-V13 */
body.af-index-page .control-section{
    padding:64px 0!important;
}
body.af-index-page .control-grid{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;
    gap:22px!important;
    align-items:stretch!important;
}
body.af-index-page .control-section .section-head{
    min-height:0!important;
    padding:29px 30px 128px!important;
    border-radius:23px!important;
}
body.af-index-page .control-section .section-head h2{
    max-width:520px!important;
    font-size:clamp(30px,3.15vw,42px)!important;
    line-height:1.03!important;
    letter-spacing:-.045em!important;
}
body.af-index-page .control-section .section-head p{
    max-width:560px!important;
    margin-top:15px!important;
    font-size:12.5px!important;
    line-height:1.65!important;
}
body.af-index-page .control-proof-chips{
    margin-top:17px!important;
    gap:6px!important;
}
body.af-index-page .control-proof-chips span{
    min-height:29px!important;
    padding:6px 9px!important;
    font-size:8px!important;
}
body.af-index-page .control-section .section-head::before{
    left:30px!important;
    bottom:25px!important;
    width:82px!important;
    height:82px!important;
    border-radius:24px!important;
    font-size:35px!important;
}
body.af-index-page .control-section .section-head::after{
    left:126px!important;
    bottom:54px!important;
    font-size:10.5px!important;
}
body.af-index-page .security-visual{
    display:none!important;
}
body.af-index-page .control-list{
    gap:10px!important;
}
body.af-index-page .control-card,
body.af-index-page .control-card:nth-child(3){
    min-height:92px!important;
    padding:15px 17px!important;
    grid-template-columns:48px 1fr!important;
    gap:13px!important;
}
body.af-index-page .control-card>i,
body.af-index-page .control-card>.control-icon{
    width:48px!important;
    height:48px!important;
    flex-basis:48px!important;
    border-radius:14px!important;
    font-size:17px!important;
}
body.af-index-page .control-card h3{
    font-size:14px!important;
}
body.af-index-page .control-card p{
    margin-top:5px!important;
    font-size:10px!important;
    line-height:1.52!important;
}
body.af-index-page .pricing-section .plans-grid{
    margin-top:34px!important;
}
body.af-index-page .platform-card .platform-logo{
    width:94px!important;
    height:94px!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:23px!important;
    background:#fff!important;
}
body.af-index-page .platform-card .platform-logo img{
    width:100%!important;
    height:100%!important;
    padding:7px!important;
    object-fit:contain!important;
    border-radius:inherit!important;
    transform:none!important;
}
body.af-index-page .platform-card .platform-logo img.af-logo-solid-art{
    padding:0!important;
    object-fit:cover!important;
    transform:scale(1.16)!important;
}
@media(max-width:900px){
    body.af-index-page .control-grid{grid-template-columns:1fr!important}
    body.af-index-page .control-section .section-head{min-height:0!important}
}
@media(max-width:760px){
    body.af-index-page .control-section{padding:52px 0!important}
    body.af-index-page .control-section .section-head{
        min-height:0!important;
        padding:25px 23px 118px!important;
    }
    body.af-index-page .control-section .section-head h2{
        font-size:clamp(29px,9vw,37px)!important;
    }
    body.af-index-page .platform-card .platform-logo{
        width:82px!important;
        height:82px!important;
    }
}

/* AFENIXX-INDEX-AJUSTES-V4 */
body.af-index-page #privacidad .section-head::before,
body.af-index-page #privacidad .section-head::after{content:none!important;display:none!important}
body.af-index-page #privacidad .section-head h2{max-width:500px!important;font-size:clamp(30px,3.35vw,44px)!important;line-height:1.04!important;letter-spacing:-.045em!important}
body.af-index-page #privacidad .section-head{padding:28px!important}
body.af-index-page #privacidad .security-visual{position:relative!important;width:100%!important;height:112px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:11px!important;margin-top:22px!important;padding:15px!important;border-radius:22px!important;background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025))!important}
body.af-index-page #privacidad .security-shield,
body.af-index-page #privacidad .security-node{position:static!important;transform:none!important;animation:none!important}
body.af-index-page #privacidad .security-shield{order:2!important;width:72px!important;height:72px!important;flex:0 0 72px!important;border-radius:22px!important;box-shadow:0 16px 34px color-mix(in srgb,var(--brand) 26%,transparent)!important}
body.af-index-page #privacidad .security-shield i{font-size:34px!important}
body.af-index-page #privacidad .security-node{width:42px!important;height:42px!important;flex:0 0 42px!important;border-radius:13px!important;background:rgba(255,255,255,.09)!important}
body.af-index-page #privacidad .security-node.node-key{order:1!important}
body.af-index-page #privacidad .security-node.node-mail{order:3!important}
body.af-index-page #privacidad .security-node.node-user{order:4!important}
body.af-index-page .plan-price-side.is-annual{border:2px solid rgba(22,163,74,.34)!important;background:linear-gradient(145deg,#f0fdf4,#ecfdf5)!important;box-shadow:0 12px 28px rgba(22,163,74,.12)!important}
body.af-index-page .plan-saving{min-height:30px!important;margin-top:10px!important;padding:7px 11px!important;border:1px solid rgba(255,255,255,.35)!important;background:linear-gradient(135deg,#16a34a,#047857)!important;color:#fff!important;font-size:10px!important;letter-spacing:.02em!important;box-shadow:0 10px 22px rgba(22,163,74,.28)!important}
body.af-index-page .plan-saving i{font-size:10px!important}
body.af-index-page .plan-saving-detail{margin-top:8px!important;padding:6px 8px!important;border-radius:9px!important;background:#dcfce7!important;color:#166534!important;font-size:9.5px!important;font-weight:900!important;line-height:1.35!important}
@media(max-width:760px){body.af-index-page #privacidad .section-head{padding:25px 23px!important}body.af-index-page #privacidad .section-head h2{font-size:clamp(28px,8.5vw,37px)!important}body.af-index-page #privacidad .security-visual{height:100px!important}.plan-saving{width:100%!important;justify-content:center!important}}
</style>
</head>
<body class="af-index-page">
<?php require __DIR__ . '/partials/public_header.php'; ?>
<main>
    <section class="hero-premium">
        <div class="landing-wrap hero-grid">
            <div>
                <span class="section-kicker"><?= af_index_e($ui_landing_eyebrow ?? 'Una operación más profesional') ?></span>
                <h1 class="landing-title"><?= af_index_e($ui_landing_title ?? 'Gestiona tu negocio como una empresa.') ?></h1>
                <p class="landing-lead"><?= af_index_e($ui_landing_subtitle ?? '') ?></p>
                <div class="landing-actions">
                    <a class="landing-btn landing-btn-primary" href="<?= af_index_e($primaryUrl) ?>"<?= str_starts_with($primaryUrl,'http')?' target="_blank" rel="noopener"':'' ?>><i class="fas fa-rocket"></i><?= af_index_e($ui_landing_cta ?? 'Obtener el sistema') ?></a>
                    <a class="landing-btn landing-btn-secondary" href="#planes"><i class="fas fa-gem"></i><?= af_index_e($ui_landing_secondary_cta ?? 'Ver planes') ?></a>
                </div>
                <div class="hero-proof">
                    <?php foreach ([$ui_landing_proof_1 ?? '',$ui_landing_proof_2 ?? '',$ui_landing_proof_3 ?? ''] as $proof): if(trim((string)$proof)==='') continue; ?>
                    <span><i class="fas fa-circle-check"></i><?= af_index_e($proof) ?></span>
                    <?php endforeach; ?>
                </div>
            </div>
            <article class="ops-card" aria-label="Vista operativa de la plataforma">
                <div class="ops-head">
                    <div class="ops-brand"><span class="ops-brand-mark"><i class="fas fa-fire-flame-curved"></i></span><span><strong><?= af_index_e($ui_title_system ?? 'Ave Fénix') ?></strong><small><?= af_index_e($ui_brand_slogan ?? '') ?></small></span></div>
                    <span class="ops-live">Sistema preparado</span>
                </div>
                <div class="ops-body">
                    <span class="ops-eyebrow"><?= af_index_e($ui_landing_dashboard_eyebrow ?? 'OPERACIÓN EN TIEMPO REAL') ?></span>
                    <h2><?= af_index_e($ui_landing_dashboard_title ?? '') ?></h2>
                    <p><?= af_index_e($ui_landing_dashboard_description ?? '') ?></p>
                    <div class="ops-metrics">
                        <div class="ops-metric"><span class="ops-metric-icon"><i class="fas fa-layer-group"></i></span><strong><?= number_format($platformCount) ?></strong><span><?= af_index_e($ui_landing_metric_platforms_label ?? 'Plataformas configuradas') ?></span></div>
                        <div class="ops-metric"><span class="ops-metric-icon"><i class="fas fa-gem"></i></span><strong><?= number_format($activePlans) ?></strong><span><?= af_index_e($ui_landing_metric_plans_label ?? 'Planes disponibles') ?></span></div>
                        <div class="ops-metric"><span class="ops-metric-icon"><i class="fas fa-shield-halved"></i></span><strong><?= $accessModes ?></strong><span><?= af_index_e($ui_landing_metric_access_label ?? 'Niveles de acceso') ?></span></div>
                    </div>
                    <div class="ops-flow"><span><i class="fas fa-envelope"></i>Buzones</span><span><i class="fas fa-users"></i>Clientes</span><span><i class="fas fa-key"></i>Consultas</span></div>
                </div>
            </article>
        </div>
    </section>

    <section class="trust-strip">
        <div class="landing-wrap trust-grid">
            <div class="trust-item"><span class="trust-icon"><i class="fas fa-layer-group"></i></span><span><strong><?= number_format($platformCount) ?></strong><span><?= af_index_e($ui_landing_metric_platforms_label ?? '') ?></span></span></div>
            <div class="trust-item"><span class="trust-icon"><i class="fas fa-gem"></i></span><span><strong><?= number_format($activePlans) ?></strong><span><?= af_index_e($ui_landing_metric_plans_label ?? '') ?></span></span></div>
            <div class="trust-item"><span class="trust-icon"><i class="fas fa-shield-halved"></i></span><span><strong><?= number_format($accessModes) ?></strong><span><?= af_index_e($ui_landing_metric_access_label ?? '') ?></span></span></div>
        </div>
    </section>

    <section id="solucion" class="section-premium">
        <div class="landing-wrap">
            <div class="section-head center">
                <span class="section-kicker"><?= af_index_e($ui_landing_solution_eyebrow ?? 'FLUJO DE TRABAJO') ?></span>
                <h2><?= af_index_e($ui_landing_solution_title ?? '') ?></h2>
                <p><?= af_index_e($ui_landing_solution_description ?? '') ?></p>
            </div>
            <div class="workflow-grid">
                <?php foreach ($steps as $step): ?>
                <article class="workflow-card" data-step="<?= af_index_e($step[0]) ?>"><span class="workflow-icon"><i class="fas <?= af_index_e($step[1]) ?>"></i></span><h3><?= af_index_e($step[2]) ?></h3><p><?= af_index_e($step[3]) ?></p></article>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <section id="plataformas" class="section-premium platform-section">
        <div class="landing-wrap">
            <div class="section-head">
                <span class="section-kicker"><?= af_index_e($ui_landing_platforms_eyebrow ?? 'ECOSISTEMA REAL') ?></span>
                <h2><?= af_index_e($ui_landing_platforms_title ?? '') ?></h2>
                <p class="platform-sales-copy">Cada servicio puede usar sus propios dominios, asuntos y alias; además, puedes usar nuestro sistema para obtener códigos de cualquier plataforma de streaming y trabajar con asuntos ilimitados.</p>
            </div>
            <div class="platform-grid">
                <?php if ($plataformas): foreach ($plataformas as $platform): ?>
                <article class="platform-card">
    <div class="platform-card-head">
        <h3><?= af_index_e($platform['nombre'] ?? 'Plataforma') ?></h3>
        <span class="platform-tag"><i class="fas fa-circle-check"></i> Configurable</span>
    </div>

    <span class="platform-logo">
        <?php if(trim((string)($platform['imagen_url']??''))!==''): ?>
            <img src="<?= af_index_e($platform['imagen_url']) ?>" alt="<?= af_index_e($platform['nombre']) ?>" onload="window.afNormalizePlatformLogo&&window.afNormalizePlatformLogo(this)" onerror="this.style.display='none';this.nextElementSibling.style.display='grid'">
            <i class="fas fa-tv" style="display:none"></i>
        <?php else: ?>
            <i class="fas fa-tv"></i>
        <?php endif; ?>
    </span>

    <p><?= af_index_e(trim((string)($platform['concepto'] ?? '')) ?: 'Servicio disponible para consultas y entrega de accesos.') ?></p>
</article>
                <?php endforeach; else: ?>
                <article class="platform-card">
    <div class="platform-card-head">
        <h3>Plataformas configurables</h3>
        <span class="platform-tag"><i class="fas fa-circle-check"></i> Marca propia</span>
    </div>

    <span class="platform-logo">
        <i class="fas fa-layer-group"></i>
    </span>

    <p>Agrega tus servicios desde el panel administrativo y aparecerán automáticamente aquí.</p>
</article>
                <?php endif; ?>
            </div>
        </div>
    </section>

    <section class="section-premium">
        <div class="landing-wrap">
            <div class="advantages-intro">
    <div class="section-head">
        <span class="section-kicker"><?= af_index_e($ui_landing_features_eyebrow ?? 'VENTAJAS OPERATIVAS') ?></span>
        <h2><?= af_index_e($ui_landing_features_title ?? 'Herramientas reales para una operación profesional.') ?></h2>
        <p><?= af_index_e($ui_landing_features_description ?? $ui_brand_description ?? '') ?></p>
    </div>

    <div class="bot-visual" aria-hidden="true">
        <span class="bot-orbit bot-orbit-one"></span>
        <span class="bot-orbit bot-orbit-two"></span>

        <span class="bot-visual-core">
            <i class="fas fa-robot"></i>
        </span>

        <span class="bot-visual-bubble is-left">
            <i class="fas fa-envelope-open-text"></i>
        </span>

        <span class="bot-visual-bubble is-right">
            <i class="fas fa-key"></i>
        </span>

        <strong>Automatización profesional sin depender de páginas de bots públicos</strong>
    </div>
</div>
            <div class="feature-grid"><?php foreach($features as $feature): ?><article class="feature-card"><span class="feature-icon"><i class="fas <?= af_index_e($feature[0]) ?>"></i></span><h3><?= af_index_e($feature[1]) ?></h3><p><?= af_index_e($feature[2]) ?></p></article><?php endforeach; ?></div>
        </div>
    </section>

    <section id="privacidad" class="section-premium control-section">
        <div class="landing-wrap control-grid">
            <div class="section-head control-copy">
    <span class="section-kicker"><?= af_index_e($ui_landing_privacy_eyebrow ?? 'CONTROL Y SEGURIDAD') ?></span>
    <h2><?= af_index_e($ui_landing_privacy_title ?? '') ?></h2>
    <p><?= af_index_e($ui_landing_privacy_description ?? '') ?></p>

    <div class="control-proof-chips" aria-label="Capas de control disponibles">
        <span><i class="fas fa-circle-check"></i> Consultas autorizadas</span>
        <span><i class="fas fa-key"></i> IDs individuales</span>
        <span><i class="fas fa-user-shield"></i> Gestión centralizada</span>
    </div>

    <div class="security-visual" aria-hidden="true">
        <span class="security-shield">
            <i class="fas fa-shield-halved"></i>
        </span>

        <span class="security-node node-key">
            <i class="fas fa-key"></i>
        </span>

        <span class="security-node node-mail">
            <i class="fas fa-envelope"></i>
        </span>

        <span class="security-node node-user">
            <i class="fas fa-user-lock"></i>
        </span>
    </div>
</div>
            <div class="control-list"><?php foreach($controls as $control): ?><article class="control-card"><i class="fas <?= af_index_e($control[0]) ?>"></i><div><h3><?= af_index_e($control[1]) ?></h3><p><?= af_index_e($control[2]) ?></p></div></article><?php endforeach; ?></div>
        </div>
    </section>

    <section id="planes" class="section-premium pricing-section">
        <div class="landing-wrap">
            <div class="section-head center"><span class="section-kicker"><?= af_index_e($ui_landing_plans_eyebrow ?? 'PLANES PARA CADA ETAPA') ?></span><h2><?= af_index_e($ui_landing_plans_title ?? '') ?></h2><p><?= af_index_e($ui_landing_plans_description ?? '') ?></p></div>

            <div class="plans-grid">
                <?php if ($planes): foreach ($planes as $plan):
                    $monthlyAllowed = (int)($plan['permite_mensual'] ?? 0) === 1 && (float)($plan['precio_mensual'] ?? 0) > 0;
                    $annualAllowed = (int)($plan['permite_anual'] ?? 0) === 1 && (float)($plan['precio_anual'] ?? 0) > 0;
                    $monthlyPrice = (float)($plan['precio_mensual'] ?? 0);
                    $annualPrice = (float)($plan['precio_anual'] ?? 0);
                    $isFree = !$monthlyAllowed && !$annualAllowed;
                    $isFeatured = (int)($plan['id'] ?? 0) === $featuredPlanId;
                    $trialDays = (int)($plan['duracion_prueba_dias'] ?? 0);
                    $annualReference = $monthlyAllowed ? ($monthlyPrice * 12) : 0.0;
                    $annualSavingAmount = ($monthlyAllowed && $annualAllowed && $annualReference > $annualPrice)
                        ? max(0.0, $annualReference - $annualPrice) : 0.0;
                    $annualSaving = $annualSavingAmount > 0
                        ? max(1, (int)round(($annualSavingAmount / $annualReference) * 100)) : 0;
                    $stageEyebrow = $isFree ? 'DESCUBRE' : ($isFeatured ? 'ESCALA' : 'ORGANIZA');
                    $stageTitle = $isFree ? 'Conoce la plataforma' : ($isFeatured ? 'Operación en crecimiento' : 'Empieza con orden');
                    $badgeText = $isFree ? 'Prueba gratuita' : ($isFeatured ? 'Más elegido' : 'Plan disponible');
                    $metrics = [
                        ['fa-users','Usuarios',$plan['limite_usuarios'] ?? null],
                        ['fa-layer-group','Cuentas',$plan['limite_cuentas'] ?? null],
                        ['fa-inbox','Buzones',$plan['limite_buzones'] ?? null],
                        ['fa-globe','Dominios',$plan['limite_dominios'] ?? null],
                        ['fa-display','Plataformas',$plan['limite_plataformas'] ?? null],
                        ['fa-magnifying-glass-chart','Consultas',$plan['limite_consultas'] ?? null],
                    ];
                ?>
                <article class="plan-card <?= $isFeatured ? 'is-featured' : '' ?>">
                    <?php if ($isFeatured): ?><span class="plan-featured-ribbon"><i class="fas fa-crown"></i> Recomendado</span><?php endif; ?>
                    <div class="plan-card-inner">
                        <div class="plan-top">
                            <div class="plan-stage">
                                <span class="plan-icon"><i class="fas <?= $isFree ? 'fa-wand-magic-sparkles' : ($isFeatured ? 'fa-crown' : 'fa-rocket') ?>"></i></span>
                                <span class="plan-stage-copy"><small><?= af_index_e($stageEyebrow) ?></small><strong><?= af_index_e($stageTitle) ?></strong></span>
                            </div>
                            <span class="plan-badge"><?= af_index_e($badgeText) ?></span>
                        </div>
                        <h3><?= af_index_e($plan['nombre_plan'] ?? 'Plan') ?></h3>
                        <p class="plan-desc"><?= af_index_e(trim((string)($plan['descripcion'] ?? '')) ?: 'Capacidad, control y herramientas para organizar tu operación profesional.') ?></p>

                        <div class="plan-price-hero <?= ($annualAllowed && $monthlyAllowed) ? 'has-annual' : '' ?>">
                            <div class="plan-price-main">
                                <span><?= $isFree ? 'Periodo inicial' : ($monthlyAllowed ? 'Pago mensual' : 'Pago anual') ?></span>
                                <?php if ($isFree): ?>
                                    <strong>Gratis</strong>
                                    <small><?= $trialDays > 0 ? $trialDays . ' días para evaluar el sistema' : 'Evaluación inicial sin costo' ?></small>
                                <?php elseif ($monthlyAllowed): ?>
                                    <strong><sup><?= af_index_e($currencySymbol) ?></sup><?= number_format($monthlyPrice, 2) ?></strong>
                                    <small>por mes</small>
                                <?php else: ?>
                                    <strong><sup><?= af_index_e($currencySymbol) ?></sup><?= number_format($annualPrice, 2) ?></strong>
                                    <small>por año</small>
                                <?php endif; ?>
                            </div>
                            <?php if ($annualAllowed && $monthlyAllowed): ?>
                            <div class="plan-price-side is-annual">
                                <span>Precio anual</span>
                                <strong><sup><?= af_index_e($currencySymbol) ?></sup><?= number_format($annualPrice, 2) ?></strong>
                                <small>un solo pago por 12 meses</small>
                                <?php if ($annualSaving > 0): ?>
                                    <small class="plan-saving"><i class="fas fa-tags"></i> Ahorra <?= $annualSaving ?>%</small>
                                    <small class="plan-saving-detail">Ahorras <?= af_index_e($currencySymbol) ?> <?= number_format($annualSavingAmount, 2) ?> al año</small>
                                <?php endif; ?>
                            </div>
                            <?php elseif (!$isFree && (int)($plan['limite_subadmins'] ?? 0) > 0): ?>
                            <div class="plan-price-side"><span>Equipo</span><strong><?= af_index_limit($plan['limite_subadmins']) ?></strong><small>subadministradores</small></div>
                            <?php endif; ?>
                        </div>

                        <div class="plan-includes"><strong>Capacidad incluida</strong><span>Según configuración del plan</span></div>
                        <div class="plan-metrics">
                            <?php foreach ($metrics as [$metricIcon,$metricLabel,$metricValue]): ?>
                            <div class="plan-metric"><i class="fas <?= af_index_e($metricIcon) ?>"></i><span><span><?= af_index_e($metricLabel) ?></span><strong><?= af_index_limit($metricValue) ?></strong></span></div>
                            <?php endforeach; ?>
                        </div>

                        <div class="plan-extra">
                            <?php if ((int)($plan['limite_asuntos'] ?? 0) !== 0): ?><span><i class="fas fa-tags"></i><?= af_index_limit($plan['limite_asuntos']) ?> asuntos</span><?php endif; ?>
                            <?php if ((int)($plan['limite_subadmins'] ?? 0) > 0): ?><span><i class="fas fa-user-shield"></i><?= af_index_limit($plan['limite_subadmins']) ?> subadmins</span><?php endif; ?>
                        </div>

                        <div class="plan-card-footer">
                            <a class="landing-btn landing-btn-primary" href="registro.php"><i class="fas <?= $isFree ? 'fa-wand-magic-sparkles' : 'fa-arrow-right' ?>"></i><?= $isFree ? 'Comenzar prueba' : 'Elegir este plan' ?></a>
                            <p class="plan-card-note"><i class="fas fa-circle-check"></i>Configuración guiada</p>
                        </div>
                    </div>
                </article>
                <?php endforeach; else: ?>
                <article class="plan-card"><div class="plan-card-inner"><div class="plan-top"><div class="plan-stage"><span class="plan-icon"><i class="fas fa-gem"></i></span><span class="plan-stage-copy"><small>CATÁLOGO</small><strong>Próxima configuración</strong></span></div><span class="plan-badge">Próximamente</span></div><h3>Planes configurables</h3><p class="plan-desc">Activa los planes públicos desde el panel para mostrarlos automáticamente en esta sección.</p><div class="plan-card-footer"><a class="landing-btn landing-btn-primary" href="registro.php">Crear cuenta</a></div></div></article>
                <?php endif; ?>
            </div>
        </div>
    </section>

    <section class="final-cta">
        <div class="landing-wrap"><article class="final-card"><div class="final-copy"><span class="section-kicker"><?= af_index_e($ui_landing_final_eyebrow ?? 'LISTO PARA CRECER') ?></span><h2><?= af_index_e($ui_landing_final_title ?? '') ?></h2><p><?= af_index_e($ui_landing_final_description ?? '') ?></p></div><a class="landing-btn" href="<?= af_index_e($primaryUrl) ?>"<?= str_starts_with($primaryUrl,'http')?' target="_blank" rel="noopener"':'' ?>><i class="fas fa-rocket"></i><?= af_index_e($ui_landing_final_button ?? 'Solicitar información por WhatsApp') ?></a></article></div>
    </section>
</main>

<script>
/* AFENIXX-INDEX-HERO-CONTROL-V12 */

(function () {
    'use strict';

    function normalizeText(value) {
        return String(value || '')
            .normalize('NFD')
            .replace(/[\u0300-\u036f]/g, '')
            .replace(/\s+/g, ' ')
            .trim()
            .toLowerCase();
    }

    function applyIndexVisualFixes() {
        const controlSection =
            document.getElementById('privacidad')
            || document.querySelector('.control-section');

        if (!controlSection) {
            return;
        }

        /*
         * Eliminar tarjetas exactamente duplicadas.
         * No elimina controles diferentes.
         */
        const cards = Array.from(
            controlSection.querySelectorAll('.control-card')
        );

        const registeredCards = new Set();

        cards.forEach(function (card) {
            const title = normalizeText(
                card.querySelector('h3')?.textContent
            );

            const description = normalizeText(
                card.querySelector('p')?.textContent
            );

            const cardKey = title + '|' + description;

            if (
                cardKey !== '|'
                && registeredCards.has(cardKey)
            ) {
                card.classList.add(
                    'af-control-duplicate-card'
                );

                return;
            }

            registeredCards.add(cardKey);
        });

        /*
         * Eliminar el bloque inferior que repite:
         * icono de escudo + "Accesos protegidos".
         *
         * El escudo central grande permanece visible.
         */
        const possibleLabels = Array.from(
            controlSection.querySelectorAll('*')
        ).filter(function (element) {
            if (element.children.length > 0) {
                return false;
            }

            return normalizeText(element.textContent)
                === 'accesos protegidos';
        });

        possibleLabels.forEach(function (label) {
            let removableBlock = label;
            let parent = label.parentElement;

            for (
                let level = 0;
                level < 4
                && parent
                && parent !== controlSection;
                level++
            ) {
                const parentText = normalizeText(
                    parent.textContent
                );

                const hasImportantHeading =
                    parent.querySelector(
                        'h1, h2, h3, .section-kicker'
                    );

                const containsControlCard =
                    parent.classList.contains('control-card')
                    || parent.querySelector('.control-card');

                if (
                    parentText.length <= 100
                    && !hasImportantHeading
                    && !containsControlCard
                ) {
                    removableBlock = parent;
                    parent = parent.parentElement;
                } else {
                    break;
                }
            }

            removableBlock.classList.add(
                'af-duplicate-control-badge'
            );
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener(
            'DOMContentLoaded',
            applyIndexVisualFixes,
            {once: true}
        );
    } else {
        applyIndexVisualFixes();
    }
})();
</script>


<!-- AFENIXX-V11-ASSETS -->
<link rel="stylesheet" href="assets/css/afenixx_v11.css?v=2026.07.24-v11">
<script src="assets/js/afenixx_v11.js?v=2026.07.24-v11"></script>
<?php require __DIR__ . '/partials/public_footer.php'; ?>

<script>
/* AFENIXX-PLATFORM-LOGO-NORMALIZER-V1 */
window.afNormalizePlatformLogo = function (image) {
    if (!image || image.dataset.afLogoChecked === '1') return;
    image.dataset.afLogoChecked = '1';

    try {
        const canvas = document.createElement('canvas');
        const size = 18;
        canvas.width = size;
        canvas.height = size;
        const context = canvas.getContext('2d', {willReadFrequently:true});
        if (!context) return;
        context.drawImage(image, 0, 0, size, size);
        const corners = [[1,1],[size-2,1],[1,size-2],[size-2,size-2]];
        const inner = [[5,5],[size-6,5],[5,size-6],[size-6,size-6],[9,9]];
        let opaqueCorners = 0;
        let coloredInner = 0;
        corners.forEach(function (point) {
            const pixel = context.getImageData(point[0], point[1], 1, 1).data;
            if (pixel[3] > 220) opaqueCorners++;
        });
        inner.forEach(function (point) {
            const pixel = context.getImageData(point[0], point[1], 1, 1).data;
            if (pixel[3] <= 220) return;
            const max = Math.max(pixel[0], pixel[1], pixel[2]);
            const min = Math.min(pixel[0], pixel[1], pixel[2]);
            const brightness = (pixel[0] + pixel[1] + pixel[2]) / 3;
            if ((max - min) > 22 || brightness < 218) coloredInner++;
        });
        if (opaqueCorners >= 3 && coloredInner >= 2) image.classList.add('af-logo-solid-art');
    } catch (error) {
        // La imagen continúa con object-fit contain cuando el navegador bloquea el muestreo.
    }
};

document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.platform-card .platform-logo img').forEach(function (image) {
        if (image.complete && image.naturalWidth > 0) window.afNormalizePlatformLogo(image);
    });
});
</script>

<script>
/* AFENIXX-PLATFORM-LOGO-ONLY-V5 */
document.addEventListener(
    'DOMContentLoaded',
    function () {
        document
            .querySelectorAll(
                '.platform-card '
                + '.platform-logo '
                + 'img + i.fa-tv'
            )
            .forEach(
                function (fallbackIcon) {
                    fallbackIcon.remove();
                }
            );
    }
);
</script>
</body>
</html>
