/*
Theme Name: Antigravity Theme
Theme URI: https://findy.com/
Author: Antigravity (Cynthia)
Author URI: https://findy.com/
Description: Theme personalizado de élite para el ecosistema Findy (Phase 15)
Version: 1.3.00
Text Domain: antigravity-theme
*/

/* ==========================================================================
   Design System Findy - App Layout (Dark Theme + SVG Icons)
   ========================================================================== */
:root {
    --bg-base: #1C1A19;       /* Fondo general muy oscuro */
    --bg-surface: #242220;    /* Fondo de sidebars y tarjetas */
    --primary: #B1885E;       /* Terracota para botones y active states */
    --primary-gradient: linear-gradient(135deg, #C2966A, #9A724A);
    --text-primary: #EBEBEB;  /* Blanco roto */
    --text-secondary: #9E9E9E;/* Gris claro */
    --border-color: #33312E;  /* Bordes sutiles */
    
    --font-ui: 'Inter', sans-serif;
    --font-heading: 'Playfair Display', serif;
}

body.light-mode {
    --bg-base: #F5F2EC;       /* Crema arena cálido */
    --bg-surface: #FFFFFF;    /* Blanco puro para contraste de tarjetas */
    --primary: #A27245;       /* Terracota ligeramente más intenso */
    --primary-gradient: linear-gradient(135deg, #B1885E, #8C6138);
    --text-primary: #1C1A19;  /* Texto oscuro (el bg-base original) */
    --text-secondary: #6B625C;/* Gris topo cálido */
    --border-color: #E6DFD6;  /* Bordes sutiles oscuros */
}

/* Ajustes de transparencias y gradientes para modo claro */
body.light-mode .cine-overlay {
    background: linear-gradient(to right, rgba(245,242,236,1) 0%, rgba(245,242,236,0.85) 40%, transparent 100%);
}
body.light-mode .cine-overlay.heavy {
    background: linear-gradient(to top, rgba(245,242,236,1) 10%, transparent 100%) !important;
}
body.light-mode .sticky-tabs {
    background: rgba(245,242,236, 0.85);
    backdrop-filter: blur(15px);
}
body.light-mode .topbar {
    background: rgba(245,242,236, 0.8);
    backdrop-filter: blur(20px);
}
body.light-mode .left-sidebar {
    background-color: rgba(245, 242, 236, 0.75) !important;
    border-right: 1px solid rgba(0,0,0,0.05);
}
body.light-mode .product-card,
body.light-mode .meta-card,
body.light-mode .stat-card {
    background: rgba(255,255,255,0.9) !important;
    border-color: rgba(0,0,0,0.05) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03) !important;
}
body.light-mode .cine-overlay[style*="to top"],
body.light-mode .cine-overlay[style*="rgba(0,0,0,0.9)"] {
    background: linear-gradient(to top, rgba(255,255,255,1), transparent) !important;
}
body.light-mode .toggle-switch::after {
    background: var(--bg-base);
}
body.light-mode .toggle-switch {
    background: var(--primary);
}

/* Ambient glow fix para evitar anillos grises sucios */
body.light-mode .ambient-glow {
    background: radial-gradient(circle, rgba(162, 114, 69, 0.15) 0%, rgba(245, 242, 236, 0) 70%) !important;
}
body.light-mode .ambient-glow.secondary {
    background: radial-gradient(circle, rgba(177, 136, 94, 0.12) 0%, rgba(245, 242, 236, 0) 70%) !important;
}

/* Sobreescritura MUY agresiva de estilos inline oscuros */
body.light-mode [style*="color"], 
body.light-mode h1, 
body.light-mode h2, 
body.light-mode h3, 
body.light-mode h4,
body.light-mode p,
body.light-mode span {
    color: var(--text-primary);
}

/* PERO restaurar color blanco sobre las imágenes hero y de tarjetas cuadradas! */
body.light-mode .cine-hero h1,
body.light-mode .cine-hero h2,
body.light-mode .cine-hero h3,
body.light-mode .cine-hero p,
body.light-mode .cine-hero span:not([style*="color: var(--primary)"]),
body.light-mode .card-image h1,
body.light-mode .card-image h2,
body.light-mode .card-image h3,
body.light-mode .card-image p,
body.light-mode .card-image span,
body.light-mode .card-image [style*="color"] {
    color: #ffffff !important;
}

/* Y convertir los gradientes oscuros de las tarjetas estilo Netflix a modo claro premium */
body.light-mode .netflix-card-overlay[style*="rgba(28,26,25,0.95)"] {
    background: linear-gradient(to top, rgba(245,242,236,1) 0%, rgba(245,242,236,0.6) 40%, transparent 100%) !important;
}
body.light-mode .netflix-card-title,
body.light-mode .netflix-card-desc {
    color: var(--text-primary) !important;
    text-shadow: none !important;
}

body.light-mode .cine-badge, 
body.light-mode .btn-cine-primary,
body.light-mode .btn-primary {
    color: #fff !important; /* Excepción para botones que siguen teniendo fondo de color */
}
body.light-mode .card-icons span,
body.light-mode .card-icons i,
body.light-mode .meta-icon,
body.light-mode .text-secondary {
    color: var(--text-secondary) !important;
}
body.light-mode [style*="background: rgba(0,0,0,0.6)"] {
    background: rgba(255,255,255,0.85) !important;
    border-color: rgba(0,0,0,0.05) !important;
}

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

body, html {
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 14px;
    position: relative;
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
}

/* 1. TEXTURA DE RUIDO SUTIL (NOISE) */
body::after {
    content: '';
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.04;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* 2. GRADIENTES DINÁMICOS AMBIENTALES */
.ambient-glow {
    position: fixed;
    width: 60vw; height: 60vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(177, 136, 94, 0.08) 0%, rgba(28, 26, 25, 0) 70%);
    top: -20vh; left: -10vw;
    z-index: -1;
    pointer-events: none;
    filter: blur(80px);
    animation: floatGlow 15s ease-in-out infinite alternate;
}
.ambient-glow.secondary {
    top: auto; bottom: -20vh; left: auto; right: -10vw;
    background: radial-gradient(circle, rgba(194, 150, 106, 0.05) 0%, rgba(28, 26, 25, 0) 70%);
    animation-delay: -5s;
    animation-duration: 20s;
}

@keyframes floatGlow {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(5vw, 10vh) scale(1.1); }
    100% { transform: translate(-5vw, 5vh) scale(0.9); }
}

/* 3. CLASES DE ANIMACIÓN (SCROLL REVEAL) */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Base styles for Lucide Icons */
.lucide {
    width: 20px;
    height: 20px;
    stroke-width: 1.5;
    flex-shrink: 0;
}
.icon-sm { width: 16px; height: 16px; }
.icon-xs { width: 14px; height: 14px; }

.app-layout {
    display: flex;
    min-height: 100vh;
}

/* ==========================================================================
   LEFT SIDEBAR
   ========================================================================== */
.left-sidebar {
    width: 260px;
    background-color: rgba(18, 17, 16, 0.75); /* Dark translucent */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    left: 0; top: 0;
    z-index: 1000;
    overflow-x: hidden;
    transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
}

/* SIDEBAR COLLAPSED STATE (DESKTOP) - MINI SIDEBAR */
@media (min-width: 1025px) {
    body.sidebar-collapsed .left-sidebar {
        width: 80px;
        transform: none; /* Keep it visible */
    }
    body.sidebar-collapsed .main-content {
        margin-left: 80px;
    }
    body.sidebar-collapsed .topbar {
        width: calc(100% - 80px);
        left: 80px;
    }
    
    /* Hide Text Elements and Toggle Button */
    body.sidebar-collapsed .left-sidebar .nav-text,
    body.sidebar-collapsed .left-sidebar #location-city,
    body.sidebar-collapsed .left-sidebar #location-region,
    body.sidebar-collapsed .left-sidebar #weather-temp,
    body.sidebar-collapsed .left-sidebar .sidebar-toggle-btn {
        opacity: 0;
        visibility: hidden;
        max-width: 0;
        margin: 0;
        padding: 0;
    }

    /* Adjust padding/layout for Mini Sidebar */
    body.sidebar-collapsed .left-sidebar .logo-area {
        padding: 1rem 0 2rem;
        justify-content: center;
    }
    body.sidebar-collapsed .left-sidebar .location-widget {
        padding: 1.5rem 0 0.5rem;
        align-items: center;
        justify-content: center;
    }
    body.sidebar-collapsed .left-sidebar .location-widget > div {
        justify-content: center;
    }
    body.sidebar-collapsed .left-sidebar .nav-menu ul {
        padding: 0 0.5rem;
    }
    body.sidebar-collapsed .left-sidebar .nav-menu a {
        padding: 0.8rem;
        justify-content: center;
    }
    body.sidebar-collapsed .left-sidebar .social-icons {
        flex-direction: column;
        align-items: center;
    }
    
    /* --- HOVER EXPANSION DEACTIVATED --- 
       (El menú solo se expande/contrae mediante clics, como se solicitó) */
}

.location-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1.5rem 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    cursor: pointer;
}

.logo-area {
    padding: 1rem 1.5rem 2rem;
    text-align: center;
    display: flex;
    justify-content: center;
}
.isotipo {
    color: var(--primary);
    display: inline-block;
}
.brand-logo-container svg {
    width: clamp(40px, 4vw, 55px); /* Responsive sizing for desktop sidebar */
    height: auto;
    fill: currentColor;
    filter: drop-shadow(0 0 5px rgba(177, 136, 94, 0.2));
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s ease;
}
.brand-logo-container:hover svg {
    transform: scale(1.1) rotate(2deg);
    filter: drop-shadow(0 0 15px rgba(177, 136, 94, 0.6));
}

/* MOBILE BRAND LOGO (Topbar) */
.mobile-brand-logo {
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}
.mobile-brand-logo svg {
    width: 38px;
    height: auto;
    fill: currentColor;
    transition: transform 0.3s ease;
}
@media (max-width: 1024px) {
    .mobile-brand-logo {
        display: flex;
    }
}

.nav-menu {
    flex: 1;
    overflow-y: auto;
}
.nav-menu ul {
    list-style: none;
    padding: 0 1rem;
}
.nav-menu li {
    margin-bottom: 0.2rem;
}
.nav-menu a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    border-radius: 6px;
    transition: 0.2s, padding 0.3s ease;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.nav-text {
    transition: opacity 0.3s ease, max-width 0.3s ease, visibility 0.3s ease;
    max-width: 200px;
}
.nav-menu a .lucide {
    color: var(--text-secondary);
    transition: 0.2s;
    flex-shrink: 0;
}
.nav-menu a:hover {
    background-color: rgba(255,255,255,0.05);
    color: var(--text-primary);
}
.nav-menu a:hover .lucide {
    color: var(--text-primary);
}
.nav-menu li.active a {
    background-color: rgba(177, 136, 94, 0.15);
    color: var(--primary);
    border-right: 3px solid var(--primary);
}
.nav-menu li.active a .lucide {
    color: var(--primary);
}

.nav-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(177, 136, 94, 0.4) 50%, transparent 100%);
    margin: 1.5rem;
    position: relative;
}
.nav-divider::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--primary);
    opacity: 0.8;
}

.sidebar-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
}
.social-icons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}
.social-icons .lucide {
    width: 18px; height: 18px;
    cursor: pointer;
    transition: color 0.2s;
}
.social-icons .lucide:hover {
    color: var(--text-primary);
}
.theme-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    background-color: rgba(0,0,0,0.2);
    border-radius: 20px;
}
.toggle-switch {
    width: 30px;
    height: 16px;
    background-color: var(--primary);
    border-radius: 10px;
    position: relative;
}
.toggle-switch::after {
    content: '';
    position: absolute;
    width: 12px; height: 12px;
    background: #fff;
    border-radius: 50%;
    top: 2px; left: 2px;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.3s ease;
}
body.light-mode .toggle-switch::after {
    transform: translateX(14px);
}

/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */
.main-content {
    flex: 1;
    margin-left: 260px;
    display: flex;
    flex-direction: column;
    transition: margin-left 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* TOPBAR (Fixed con Glassmorphism) */
.topbar {
    display: flex;
    flex-direction: row; /* HTML order is now correct: Menu, Search, Actions */
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    height: 70px;
    position: fixed;
    top: 0;
    right: 0;
    width: calc(100% - 260px); /* 100% menos el sidebar izquierdo */
    background: rgba(28, 26, 25, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 1000;
    transition: all 0.3s ease;
}
/* STICKY TABS (Glassmorphism) */
.sticky-tabs {
    background: rgba(18, 17, 16, 0.9);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 1rem 0;
    position: sticky;
    top: 70px; /* Match Desktop Topbar height */
    z-index: 90;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.topbar-search-container {
    display: flex;
    align-items: center;
}
.search-bar {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 20px;
    padding: 0.5rem 1rem;
    width: 600px;
    max-width: 45vw;
}
.search-bar .lucide-search {
    color: #888;
}
.search-bar input {
    border: none;
    outline: none;
    margin-left: 0.5rem;
    font-family: var(--font-ui);
    width: 100%;
    font-size: 16px; /* Evita zoom automático en iOS/iPhone */
}
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.topbar-right-container {
    display: flex;
    align-items: center;
}
.btn-primary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--primary-gradient);
    color: #fff;
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
}
.link-inscribirse {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
}
.icon-cart {
    color: var(--primary);
    cursor: pointer;
}
.user-avatar {
    width: 35px; height: 35px;
    background-color: var(--bg-surface);
    border: 1px solid var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

/* HERO BANNER */
.hero-banner {
    margin: 0 2rem;
    background: url('https://images.unsplash.com/photo-1542640244-7e672d6cb461?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80') center center/cover;
    height: 250px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    padding: 2rem;
}
.hero-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    border-radius: 12px;
}
.hero-banner > * {
    position: relative;
    z-index: 1;
}
.hero-icon {
    width: 32px; height: 32px;
    margin-bottom: 0.5rem;
    color: #fff;
}
.hero-banner h2 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}
.hero-banner p {
    font-size: 0.85rem;
    color: #ccc;
    max-width: 600px;
}

/* TABS */
.tabs-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
}
.tab {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.5rem 2rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}
.tab.active {
    background: var(--bg-surface);
    border-color: var(--primary);
    color: var(--text-primary);
}

/* CONTENT BODY (Grid + Right Sidebar) */
.content-body {
    display: flex;
    padding: 0 2rem 2rem;
    gap: 2rem;
}

/* PRODUCTS GRID */
.products-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}
.product-card {
    background-color: var(--bg-surface);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.card-image {
    height: 350px;
    background-color: #333;
    position: relative;
    background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8)), url('https://images.unsplash.com/photo-1606760227091-3dd870d97f1d?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80');
    background-size: cover;
    background-position: center;
}
.badge-nuevo {
    position: absolute;
    top: 1rem; left: 1rem;
    background-color: rgba(177, 136, 94, 0.8);
    color: #fff;
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
}
.badge-tag {
    position: absolute;
    top: 1rem; right: 1rem;
    background-color: #fff;
    border-radius: 50%;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
}
.icon-tag-badge {
    width: 14px; height: 14px;
    color: var(--bg-surface);
}

.card-info {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.card-info h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
}
.card-info p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}
.card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.creator-avatar {
    width: 30px; height: 30px;
    background-color: var(--border-color);
    border-radius: 50%;
    border: 2px solid var(--primary);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
}
.creator-avatar .lucide { width: 14px; height: 14px; }
.card-icons {
    display: flex;
    gap: 0.8rem;
    color: var(--text-secondary);
}
.card-icons .lucide {
    width: 18px; height: 18px;
    cursor: pointer;
    transition: color 0.2s;
}
.card-icons .lucide:hover { color: var(--text-primary); }

.btn-ver {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem;
    background: var(--primary-gradient);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    margin-top: auto;
}

/* RIGHT SIDEBAR */
.right-sidebar {
    width: 250px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.filter-section, .share-section {
    background-color: var(--bg-surface);
    border-radius: 12px;
    padding: 1.5rem;
}
.filter-section h4 {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    letter-spacing: 1px;
}
.filter-section ul {
    list-style: none;
}
.filter-section li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background-color: rgba(0,0,0,0.2);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
}
.filter-section li .lucide {
    width: 18px; height: 18px;
}
.filter-section li.active {
    background-color: rgba(177, 136, 94, 0.2);
    color: var(--text-primary);
}
.filter-section li.active .lucide {
    color: var(--primary);
}
.dot-red {
    margin-left: auto;
    color: #e74c3c;
    font-size: 1.2rem;
}

.btn-compartir {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.8rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    cursor: pointer;
}
.share-icons {
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary);
}
.share-icons .lucide {
    width: 20px; height: 20px;
    cursor: pointer;
    transition: color 0.2s;
}
.share-icons .lucide:hover {
    color: var(--text-primary);
}

/* ==========================================================================
   EXPLORAR VIEW (Cultura, Mapa, Rutas)
   ========================================================================== */
.explorar-map {
    background: url('https://images.unsplash.com/photo-1524661135-423995f22d0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80') center center/cover;
    height: 400px;
    border-radius: 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}
.explorar-map::before {
    content: '';
    position: absolute;
    top:0; left:0; right:0; bottom:0;
    background: rgba(0,0,0,0.4);
    border-radius: 12px;
}
.map-overlay-content {
    position: relative;
    z-index: 1;
    text-align: center;
}
.map-overlay-content h3 {
    font-family: var(--font-heading);
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.btn-mapa {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--primary);
    padding: 0.8rem 1.5rem;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}
.rutas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.ruta-card {
    background-color: var(--bg-surface);
    border-radius: 12px;
    display: flex;
    overflow: hidden;
    height: 220px;
}
.ruta-image {
    width: 40%;
    background-size: cover;
    background-position: center;
}
.ruta-info {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ruta-info h4 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--primary);
}
.ruta-info p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}
/* ==========================================================================
   SINGLE PRODUCT VIEW (Trazabilidad)
   ========================================================================== */
.single-product-container {
    display: flex;
    gap: 3rem;
    padding-top: 1rem;
}
.product-gallery {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.main-image {
    width: 100%;
    height: 500px;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    background-color: var(--bg-surface);
}
.thumbnail-list {
    display: flex;
    gap: 1rem;
}
.thumb {
    width: 80px; height: 80px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.2s;
}
.thumb:hover { border-color: var(--primary); }

.product-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.product-details h1 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}
.product-price {
    font-size: 1.5rem;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 1.5rem;
}
.trazabilidad-card {
    background-color: var(--bg-surface);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 2rem;
    border: 1px solid var(--border-color);
}
.trazabilidad-card h4 {
    font-family: var(--font-heading);
    color: var(--primary);
    margin-bottom: 1rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.creator-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.creator-pic {
    width: 50px; height: 50px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}
.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.8rem;
    font-size: 0.9rem;
}
.info-label { color: var(--text-secondary); display:flex; align-items:center; gap: 0.4rem; }
.info-value { font-weight: 500; }

/* ==========================================================================
   NETFLIX-STYLE CAROUSELS (HOME OASIS)
   ========================================================================== */
.netflix-section {
    margin-bottom: 3rem;
    position: relative;
}
.netflix-section-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    padding-left: 2rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* Netflix Rows (Flickity Powered) */
.netflix-row {
    width: 100%;
    padding-bottom: 3rem;
    padding-top: 1rem;
    /* Flickity will handle the layout and scrolling */
}

/* Flickity Navigation Styling */
.netflix-row .flickity-button {
    background: rgba(28, 26, 25, 0.8);
    backdrop-filter: blur(10px);
    color: var(--primary);
    transition: all 0.3s ease;
    width: 48px;
    height: 48px;
}
.netflix-row .flickity-button:hover {
    background: var(--primary);
    color: #fff;
    transform: scale(1.1);
}
.netflix-row .flickity-button-icon {
    fill: currentColor;
}
.netflix-row .flickity-prev-next-button.previous { left: 1rem; }
.netflix-row .flickity-prev-next-button.next { right: 1rem; }

/* Flickity Page Dots */
.netflix-row .flickity-page-dots {
    bottom: -35px;
}
.netflix-row .flickity-page-dots .dot {
    width: 10px;
    height: 10px;
    opacity: 1;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}
.netflix-row .flickity-page-dots .dot.is-selected {
    background: var(--primary);
    border-color: var(--primary);
    transform: scale(1.3);
    box-shadow: 0 0 10px var(--primary);
}

/* The cards */
.netflix-card {
    height: clamp(240px, 40vw, 420px);
    margin-right: 1.5rem; /* Gap between slides for Flickity */
    flex-shrink: 0;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    position: relative;
    scroll-snap-align: start;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.netflix-card.video {
    width: 300px;
    aspect-ratio: 16 / 9;
}
.netflix-card:first-child {
    margin-left: max(2rem, calc(50% - 700px + 2rem)) !important;
}
.netflix-card:last-child {
    margin-right: max(2rem, calc(50% - 700px + 2rem)) !important;
}
.netflix-card.blog {
    width: auto;
    aspect-ratio: 1 / 1;
}
.card-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.8s ease;
    z-index: 0;
}
.netflix-card:hover .card-bg {
    transform: scale(1.1);
    filter: brightness(0.9) !important;
}
.netflix-card:hover {
    transform: scale(1.04) translateY(-5px);
    box-shadow: 0 10px 30px rgba(177, 136, 94, 0.3);
    z-index: 10;
}
.netflix-card-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    transition: background 0.3s ease;
}
.netflix-card:hover .netflix-card-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(177, 136, 94, 0.4) 100%);
}
.netflix-card-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: #fff;
    transform: translateY(10px);
    transition: transform 0.3s ease;
}
.netflix-card:hover .netflix-card-title {
    transform: translateY(0);
}
.netflix-card-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.netflix-card:hover .netflix-card-desc {
    opacity: 1;
    transform: translateY(0);
    color: #fff;
}
.netflix-play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 50px; height: 50px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: all 0.3s ease;
}
.netflix-card:hover .netflix-play-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    background: var(--primary);
    border-color: var(--primary);
}

/* Explore Metadata Overlay (Phase 46) */
.explore-metadata-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(17, 17, 17, 0.9);
    backdrop-filter: blur(8px);
    z-index: 15;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.explore-meta-icon {
    color: var(--primary);
    margin-bottom: 0.5rem;
}
.explore-meta-text {
    color: #fff;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.explore-meta-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

@media (hover: hover) {
    .netflix-card:hover .explore-metadata-overlay {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}
@media (hover: none) {
    .netflix-card:active .explore-metadata-overlay,
    .netflix-card:focus-within .explore-metadata-overlay {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* ==========================================================================
   FASE 9: CINE SECTIONS (NORMALIZED FLOW)
   ========================================================================== */
.cine-section {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 6rem 0;
    margin-bottom: 2rem;
}
.category-section {
    margin-bottom: clamp(3rem, 10vw, 7rem);
}
.cine-hero {
    min-height: 85vh;
    padding-top: 150px;
}
.cine-hero h1, .cine-title, .netflix-card-title {
    /* Sombras eliminadas por petición de compatibilidad con modo claro */
}
.cine-hero p, .cine-desc {
    /* Sombras eliminadas por petición de compatibilidad con modo claro */
}

/* ==========================================================================
   FASE 10: SINGLE NEGOCIO PROFILE
   ========================================================================== */
.negocio-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}
.negocio-story {
    flex: 2;
    min-width: 300px;
}
.negocio-meta {
    flex: 1;
    min-width: 300px;
}
.meta-card {
    background: rgba(28,26,25, 0.8);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 2rem;
    position: sticky;
    top: 100px; /* Sticks under the topbar */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.meta-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 0.5rem;
}
.meta-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.meta-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.meta-icon {
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
}
.meta-list li strong {
    color: #fff;
    font-weight: 500;
}

/* ==========================================================================
   FASE 14: HIGH-END AGENCY STYLES (MASKING & BLUR)
   ========================================================================== */

/* Fade Up Clásico */
.fade-up-line {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}
.fade-up-line.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Masking Reveal (Texto emerge de la nada) */
.reveal-mask {
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    width: 100%;
}
.reveal-mask-inner {
    display: block;
    padding-bottom: 0.25em; /* Previene corte en letras como la 'y' o 'g' */
    margin-bottom: -0.25em;
    transform: translateY(120%) scale(1.05); /* Escala sutil para mayor drama */
    transition: transform 2.2s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: transform;
}
.reveal-mask.is-visible .reveal-mask-inner {
    transform: translateY(0) scale(1);
}

/* Blur Reveal */
.reveal-mask.blur-in .reveal-mask-inner {
    transform: translateY(60px) scale(1.02);
    opacity: 0;
    filter: blur(20px);
    transition: transform 2.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 2.5s ease, filter 2.5s ease;
}
.reveal-mask.blur-in.is-visible .reveal-mask-inner {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
}

/* ==========================================================================
   CINEMATIC GLOWS (Lighting)
   ========================================================================== */
.cinematic-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
    opacity: 0.4;
    pointer-events: none;
    animation: pulse-glow 10s infinite alternate ease-in-out;
}
.cinematic-glow-1 {
    width: 600px;
    height: 600px;
    background: rgba(184, 134, 11, 0.15); /* Tono dorado/cobre sutil */
    top: -200px;
    left: -200px;
}
.cinematic-glow-2 {
    width: 800px;
    height: 800px;
    background: rgba(255, 255, 255, 0.05); /* Tono frío sutil */
    bottom: -300px;
    right: -200px;
    animation-delay: -5s;
}

@keyframes pulse-glow {
    0% { transform: scale(1) translate(0, 0); opacity: 0.3; }
    100% { transform: scale(1.2) translate(50px, -50px); opacity: 0.6; }
}

/* Sticky Stack */
.sticky-stack {
    position: sticky;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
}

/* Base Styles adjustments */
.text-huge {
    letter-spacing: -0.03em;
}

/* Parallax Background */
.parallax-bg-slow {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 120%; /* Extra height for scrolling */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Simple Parallax CSS */
    z-index: 1;
}

/* ==========================================================================
   FASE 11: RESPONSIVE DESIGN (MOBILE & IPAD)
   ========================================================================== */

/* Topbar Toggle Button (Visible only on Mobile) */
.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    margin-right: 1.5rem;
    transition: color 0.3s ease;
}
.mobile-menu-toggle:hover {
    color: var(--primary);
}
.topbar-left {
    display: flex;
    align-items: center;
}

@media (max-width: 1024px) and (min-width: 769px) {
    /* IPAD / TABLET: Force Mini Sidebar (80px) */
    .left-sidebar {
        width: 80px !important;
        transform: none !important;
    }
    .left-sidebar .nav-text,
    .left-sidebar #location-city,
    .left-sidebar #location-region,
    .left-sidebar #weather-temp,
    .left-sidebar .sidebar-toggle-btn {
        opacity: 0;
        visibility: hidden;
        max-width: 0;
        margin: 0;
        padding: 0;
    }
    .left-sidebar .logo-area {
        padding: 1rem 0 2rem;
        justify-content: center;
    }
    .left-sidebar .location-widget {
        padding: 1.5rem 0 0.5rem;
        align-items: center;
        justify-content: center;
    }
    .left-sidebar .location-widget > div {
        justify-content: center;
    }
    .left-sidebar .nav-menu ul {
        padding: 0 0.5rem;
    }
    .left-sidebar .nav-menu a {
        padding: 0.8rem;
        justify-content: center;
    }
    .left-sidebar .social-icons {
        flex-direction: column;
        align-items: center;
    }
    
    /* --- HOVER EXPANSION DEACTIVATED FOR IPAD --- 
       (El menú en iPad es 100% estático para no bloquear scroll) */
    .main-content {
        margin-left: 80px;
        width: calc(100% - 80px);
    }
    .topbar {
        width: calc(100% - 80px);
        left: 80px;
    }


    /* Hero Text Adjustments */
    .cine-title {
        font-size: clamp(2rem, 8vw, 3.5rem) !important;
    }
    .cine-desc {
        font-size: 1rem !important;
    }
}

@media (max-width: 768px) {
    .app-layout {
        flex-direction: column;
    }
    
    /* Sidebar becomes an off-canvas menu with Deep Blur */
    .left-sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        bottom: 0;
        width: 85vw !important;
        max-width: 320px;
        z-index: 9999;
        transition: left 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        background-color: rgba(18, 17, 16, 0.95);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        box-shadow: none;
    }
    .left-sidebar.is-open {
        left: 0 !important;
        box-shadow: 20px 0 50px rgba(0,0,0,0.8);
    }
    .left-sidebar:hover {
        width: 85vw !important;
    }
    
    .left-sidebar .nav-text,
    .left-sidebar #location-city,
    .left-sidebar #location-region,
    .left-sidebar #weather-temp {
        opacity: 1 !important;
        visibility: visible !important;
        max-width: 100% !important;
    }
    .left-sidebar .sidebar-toggle-btn {
        display: none !important;
    }
    .left-sidebar .nav-menu ul {
        padding: 0 1.5rem;
    }
    .left-sidebar .nav-menu a {
        padding: 1rem;
        font-size: 1.1rem;
        justify-content: flex-start;
    }
    .left-sidebar .logo-area {
        padding: 1.5rem 1.5rem 2rem;
        justify-content: flex-start;
    }
    
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .topbar {
        width: 100% !important;
        left: 0 !important;
        padding: 0 1.25rem;
        height: 70px;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }

    /* Topbar Search Bar Fix */
    .sticky-tabs {
        top: 120px; /* Match Mobile Topbar height exactly */
    }
    
    .content-body {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        flex-direction: column; /* Force grid and right sidebar to stack */
    }

    
    /* Convertir Right Sidebar (Filtros) en un slider horizontal */
    .right-sidebar {
        width: 100%;
        order: -1; /* Mover filtros arriba de la cuadrícula */
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        scrollbar-width: none; /* Firefox */
    }
    .right-sidebar::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    .filter-section, .share-section {
        min-width: 280px;
        flex-shrink: 0;
        margin-bottom: 0;
    }
    .tabs-container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .desktop-only {
        display: none !important;
    }
    
    /* Mobile Topbar 1-Row Layout (Aligned as requested) */
    .topbar {
        padding: 0.75rem 1rem;
        height: 70px;
        display: flex;
        flex-direction: row; /* Everything in one row */
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        background: rgba(15, 14, 13, 0.95) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
    .topbar-search-container {
        flex: 1; /* Takes up remaining space in the middle */
        display: flex;
        justify-content: center;
    }
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0;
        color: #ffffff !important;
        flex-shrink: 0;
    }
    .mobile-menu-toggle svg {
        width: 26px;
        height: 26px;
        stroke-width: 1.5;
    }
    .icon-cart, .user-avatar {
        color: var(--primary) !important;
    }
    .user-avatar {
        border: 1px solid var(--primary) !important;
        background: transparent !important;
    }
    .user-avatar svg, .icon-cart svg {
        width: 22px;
        height: 22px;
        stroke-width: 1.5;
    }
    .topbar-actions {
        width: auto;
        display: flex;
        align-items: center;
        gap: 0.8rem;
        flex-shrink: 0;
    }

    .topbar-left {
        width: auto;
        margin-right: 0;
    }
    
    /* Glassmorphic Search Bar on Mobile - Squeezed version */
    .search-bar {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        border-radius: 30px;
        background: #ffffff !important;
        border: none;
        padding: 0.5rem 1rem;
        display: flex;
        align-items: center;
    }
    .search-bar input {
        -webkit-appearance: none;
        appearance: none;
        background: transparent !important;
        color: #333333 !important;
        border-radius: 0;
        width: 100%;
        border: none;
        font-size: 0.9rem;
        padding-left: 5px;
        outline: none;
        margin-left: 0.5rem;
    }
    .search-bar input::placeholder {
        color: #888888 !important;
    }
    .search-bar .lucide-search {
        color: #888888 !important;
        width: 18px;
        height: 18px;
    }
    
    /* Hide Bell on mobile to match exact screenshot spacing */
    .notif-bell-btn {
        display: none !important;
    }


    /* Single Negocio Layout */
    .negocio-layout {
        flex-direction: column;
    }
    .meta-card {
        position: relative;
        top: 0;
    }

    /* Netflix Rows Mobile Fixes */
    .netflix-card.blog {
        width: 100%;
        max-width: 300px;
    }
    .netflix-card.video {
        width: 100%;
        max-width: 380px;
    }

    .netflix-card.reel {
        min-width: 200px;
        height: 360px;
    }
    
    .netflix-row {
        gap: 1rem;
        padding-bottom: 2rem;
    }

    /* Make the Hero Action buttons wrap */
    .cine-actions {
        flex-direction: column;
        width: 100%;
    }
    .cine-actions button {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   CINE CONTAINER (STRICT ALIGNMENT)
   ========================================================================== */
.cine-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
    box-sizing: border-box;
}


.cine-bg.parallax-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Native CSS Parallax */
    z-index: 1;
    transition: transform 10s ease-out, filter 1s ease;
}

.cine-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, var(--bg-base) 0%, rgba(28,26,25,0.4) 60%, rgba(28,26,25,0.8) 100%);
    z-index: 2;
}
.cine-overlay.heavy {
    background: linear-gradient(to bottom, var(--bg-base) 0%, rgba(28,26,25,0.7) 40%, var(--bg-base) 100%);
}

.cine-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.cine-content-full {
    position: relative;
    z-index: 3;
    width: 100%;
    padding-top: 10vh;
}

/* Typography for Cinematic Sections */
.cine-label {
    color: var(--primary); font-weight: 600; letter-spacing: 3px; font-size: 0.9rem; margin-bottom: 1rem; display: flex; align-items: center; gap:0.5rem; text-transform: uppercase;
}
.cine-title {
    font-size: clamp(3rem, 6vw, 5.5rem); font-family: var(--font-heading); line-height: 1.1; margin-bottom: 1.5rem; text-shadow: 2px 2px 30px rgba(0,0,0,0.9);
}
.cine-desc {
    font-size: 1.1rem; margin-bottom: 2.5rem; max-width: 600px; color: #EBEBEB; text-shadow: 1px 1px 15px rgba(0,0,0,0.9); line-height: 1.6;
}
.cine-section-title {
    font-family: var(--font-heading); font-size: 2.5rem; margin-bottom: 2rem; padding-left: 2rem; color: #fff; display: flex; flex-direction: column; text-shadow: 2px 2px 20px rgba(0,0,0,0.8);
}
.cine-subtitle {
    font-family: var(--font-ui); font-size: 1rem; color: var(--text-secondary); font-weight: 400; margin-top: 0.5rem; text-shadow: none;
}

/* Actions */
.cine-actions {
    display: flex; gap: 1.5rem; flex-wrap: wrap;
}
.btn-cine-primary {
    padding: 1rem 2.5rem; font-size: 1rem; background: #fff; color: #000; font-weight: 700; border: none; border-radius: 4px; box-shadow: 0 4px 15px rgba(255,255,255,0.2); cursor: pointer; display: flex; align-items: center; gap: 0.5rem; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-cine-primary:hover {
    transform: scale(1.05); box-shadow: 0 10px 25px rgba(255,255,255,0.4);
}
.btn-cine-secondary {
    background: rgba(100,100,100,0.3); backdrop-filter: blur(10px); color: #fff; border: 1px solid rgba(255,255,255,0.3); border-radius: 30px; padding: 1rem 2.5rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; transition: background 0.3s, border-color 0.3s;
}
.btn-cine-secondary:hover {
    background: rgba(100,100,100,0.6); border-color: #fff;
}

/* Advanced Reveals */
.reveal-blur {
    opacity: 0;
    filter: blur(20px);
    transform: scale(1.05) translateY(40px);
    transition: opacity 1.2s ease, filter 1.2s ease, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal-blur.active {
    opacity: 1;
    filter: blur(0);
    transform: scale(1) translateY(0);
}

/* Cinematic Cards specific styling */
.cinematic-row .cine-card {
    border-radius: 12px;
    height: 55vh;
    min-height: 400px;
}
.cine-card-link {
    margin-top: 1rem; color: var(--primary); font-weight: 600; text-decoration: none; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; display: inline-block;
}
.netflix-card:hover .cine-card-link {
    opacity: 1; transform: translateY(0);
}
.cine-badge {
    position: absolute; top: 1rem; right: 1rem; background: var(--primary-gradient); color: #fff; padding: 0.3rem 0.8rem; border-radius: 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* Navigation Icons & Tabs */
.elite-category-btn { background: transparent; border: none; display: flex; flex-direction: column; align-items: center; gap: 1rem; cursor: pointer; opacity: 0.85; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); flex-shrink: 0; min-width: 140px; }
.elite-category-btn.active, .elite-category-btn:hover { opacity: 1; }
.elite-category-btn .icon-wrapper { width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); position: relative; overflow: visible; }
.elite-category-btn.active .icon-wrapper { border-color: var(--primary); color: var(--primary); background: rgba(177, 136, 94, 0.1); box-shadow: 0 0 25px rgba(177, 136, 94, 0.25); }
.elite-category-btn:hover .icon-wrapper { transform: translateY(-8px) scale(1.05); border-color: rgba(177, 136, 94, 0.6); color: var(--primary); background: rgba(177, 136, 94, 0.15); }

/* Powerful Geometric SVG Animation */
.ancestral-icon { width: 32px; height: 32px; transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(0 0 0px rgba(177,136,94,0)); }
.elite-category-btn:hover .ancestral-icon { transform: scale(1.15) rotate(45deg); filter: drop-shadow(0 0 8px rgba(177,136,94,0.6)); stroke-width: 1.5px; }
.elite-category-btn.active .ancestral-icon { transform: scale(1.1); filter: drop-shadow(0 0 5px rgba(177,136,94,0.4)); stroke-width: 1.5px; }

/* Excepciones de rotación para formas específicas */
.elite-category-btn:hover .no-rotate { transform: scale(1.2) translateY(-2px); }

.elite-category-btn .category-name { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--text-primary); transition: transform 0.4s ease; text-align: center; line-height: 1.4; }
.elite-category-btn:hover .category-name { transform: translateY(3px); color: var(--primary); text-shadow: 0 0 10px rgba(177,136,94,0.3); }

/* Hide scrollbar for webkit */
.tabs-container::-webkit-scrollbar { display: none; }

/* Flex Safari Bug Fix */
.tabs-container { min-height: 120px; align-items: flex-start; }

/* Filter Pill Switch */
.format-filter-container {
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 21;
}
.format-filter-pill {
    display: inline-flex;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50px;
    padding: 0.3rem;
    backdrop-filter: blur(10px);
}
.format-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.8rem 1.5rem;
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.format-btn.active {
    background: var(--primary);
    color: var(--bg-base);
    box-shadow: 0 4px 15px rgba(177, 136, 94, 0.4);
}
.format-btn:hover:not(.active) {
    color: var(--text-primary);
}

.cine-hidden {
    display: none !important;
}

/* CSS-Only Hero Animations (Failsafe for Safari/Mac) */
@keyframes heroFadeIn {
    0% { opacity: 0; transform: translateY(30px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-animated {
    /* No opacity 0 by default to prevent elements staying invisible if animation fails */
    animation: heroFadeIn 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .hero-animated {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* CUSTOM CURSOR (Bulletproof - No blend mode, maximum visibility) */
@media (pointer: fine) {
    body, a, button, input, textarea, select, .netflix-card, .btn-primary, .tab, .bento-item, .magnetic-wrap, .fp-mini-card {
        cursor: none !important;
    }
}
@media (pointer: coarse) {
    .custom-cursor, .custom-cursor-follower {
        display: none !important;
    }
}
.custom-cursor {
    position: fixed;
    top: 0; left: 0;
    width: 10px; height: 10px;
    background: #FFFFFF;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2147483647;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 6px rgba(255,255,255,0.8), 0 0 15px rgba(177,136,94,0.5);
    transition: width 0.25s ease, height 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    will-change: left, top;
}
.custom-cursor-follower {
    position: fixed;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border: 2px solid rgba(177, 136, 94, 0.7);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2147483646;
    transform: translate(-50%, -50%);
    transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    will-change: left, top;
}
/* Hover state */
.custom-cursor.is-hovering {
    width: 14px; height: 14px;
    background: var(--primary);
    box-shadow: 0 0 12px rgba(177,136,94,0.8), 0 0 25px rgba(177,136,94,0.4);
}
.custom-cursor-follower.is-hovering {
    width: 55px; height: 55px;
    border-color: var(--primary);
    background: rgba(177, 136, 94, 0.08);
}
/* Blink effect */
.custom-cursor.is-blinking,
.custom-cursor-follower.is-blinking {
    transform: translate(-50%, -50%) scaleY(0.08) !important;
    transition: transform 0.12s ease !important;
}

/* ==========================================================================
   FASE 11: ANIMATED ICONOGRAPHY
   ========================================================================== */
.icon-pulse {
    animation: iconPulse 2s infinite ease-in-out;
}
.icon-float {
    animation: iconFloat 3s infinite ease-in-out;
}
.icon-spin-hover:hover {
    animation: iconSpin 1s infinite linear;
}
.icon-glow {
    filter: drop-shadow(0 0 8px var(--primary));
}

@keyframes iconPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes iconFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}
@keyframes iconSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   FASE 20: REFINAMIENTO UX (OFFCANVAS, MOBILE, HOVER, VIBRATION)
   ========================================================================== */

/* 1. Offcanvas Lateral Derecho */
.offcanvas-right-sidebar {
    position: fixed;
    right: -380px;
    top: 0;
    bottom: 0;
    width: 350px;
    max-width: 100vw;
    background: rgba(12,12,12,0.98);
    backdrop-filter: blur(20px);
    z-index: 9999;
    transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    padding: 2rem;
    box-shadow: -10px 0 40px rgba(0,0,0,0.9);
    overflow-y: auto;
    border-left: 1px solid rgba(255,255,255,0.05);
}
.offcanvas-right-sidebar.is-open {
    right: 0;
}

/* 2. Geolocalización Móvil (Píldora Flotante Eliminada en Fase 22) */

/* 3. Hover Card Metadatos */
.card-info {
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.card-metadata-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(17, 17, 17, 0.95);
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    padding: 2rem;
    text-align: center;
    pointer-events: none;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
@media (hover: hover) {
    .business-card:hover .card-metadata-overlay {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .business-card:hover .card-info {
        opacity: 0.1;
        filter: blur(8px);
    }
}
@media (hover: none) {
    .business-card:active .card-metadata-overlay,
    .business-card:focus-within .card-metadata-overlay {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .business-card:active .card-info,
    .business-card:focus-within .card-info {
        opacity: 0.1;
        filter: blur(8px);
    }
}

/* 4. Vibración de Energía Hero (Efecto Sin Sombras) */
@keyframes subtle-pulse-vibrate {
    0%, 100% { transform: scale(1) translateY(0); opacity: 1; letter-spacing: -0.02em; }
    50% { transform: scale(1.01) translateY(-2px); opacity: 0.85; letter-spacing: 0.01em; }
}
.hero-monumental h1, #hero-dynamic-title {
    animation: subtle-pulse-vibrate 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* 5. Search Bar Filter Button (Phase 23) */
.search-filter-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.3s ease;
    margin-right: 0.5rem;
}
.search-filter-btn:hover {
    color: var(--primary);
    background: rgba(177, 136, 94, 0.1);
    transform: scale(1.05);
}

/* 6. Portfolio Bento Grid (Phase 26) */
.portfolio-filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 4rem;
    flex-wrap: wrap;
}
.portfolio-filter-btn {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary);
    padding: 0.8rem 1.8rem;
    border-radius: 50px;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}
.portfolio-filter-btn:hover, .portfolio-filter-btn.active {
    background: var(--primary);
    color: var(--bg-base);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(177, 136, 94, 0.2);
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 300px;
    gap: 1.5rem;
    perspective: 2000px; /* Enhanced 3D Perspective */
}
.bento-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease, opacity 0.4s ease;
    transform-style: preserve-3d; /* Required for 3D Tilt */
    will-change: transform;
}
.bento-item.hidden {
    display: none;
}
.bento-item:hover {
    box-shadow: 0 30px 60px rgba(0,0,0,0.8);
    border-color: rgba(177, 136, 94, 0.5);
    z-index: 2;
    /* The transform translateY(-5px) is removed from CSS because JS will control the transform */
}
.bento-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease, filter 0.8s ease;
    filter: brightness(0.6) contrast(1.1);
}
.bento-item:hover img {
    transform: scale(1.05);
    filter: brightness(0.8) contrast(1.1);
}
.bento-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2.5rem 2rem;
    background: linear-gradient(to top, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.7) 50%, transparent 100%);
    transform: translateY(20px);
    opacity: 0.9;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.bento-item:hover .bento-content {
    transform: translateY(0);
    opacity: 1;
}
.bento-category {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--primary);
    margin-bottom: 0.8rem;
    display: block;
    font-weight: 600;
}
.bento-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}
.bento-metrics {
    color: var(--text-secondary);
    font-size: 0.9rem;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
    margin-top: 1rem;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 1rem;
}
.bento-item:hover .bento-metrics {
    opacity: 1;
    transform: translateY(0);
}
.metric-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    font-weight: 500;
}
.metric-item i {
    color: var(--primary);
}

/* Span configurations for Bento Layout */
.bento-large { grid-column: span 2; grid-row: span 2; }
.bento-wide { grid-column: span 2; grid-row: span 1; }
.bento-tall { grid-column: span 1; grid-row: span 2; }
.bento-square { grid-column: span 1; grid-row: span 1; }

.bento-large .bento-title { font-size: 2.8rem; }
.bento-tall .bento-title { font-size: 2rem; }

@media (max-width: 1024px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .bento-large, .bento-wide { grid-column: span 2; }
    .bento-tall { grid-row: span 1; }
}
@media (max-width: 768px) {
    .bento-grid { grid-template-columns: 1fr; grid-auto-rows: 350px; }
    .bento-large, .bento-wide, .bento-tall, .bento-square { grid-column: span 1; grid-row: span 1; }
    .bento-large .bento-title { font-size: 2rem; }
    .bento-content { transform: translateY(0); opacity: 1; }
    .bento-metrics { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   EVENT TICKET CARDS (Alta Gamma)
   ========================================================================== */
.events-ticket-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2.5rem;
    width: 100%;
}
.event-ticket-card {
    aspect-ratio: 3 / 4;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
}
.event-ticket-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 2;
    pointer-events: none;
}
.event-ticket-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0,0,0,0.7), 0 0 20px rgba(177, 136, 94, 0.2);
    border-color: rgba(177, 136, 94, 0.4);
}
.event-ticket-card:hover::before {
    opacity: 1;
}
.event-ticket-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0; left: 0;
    z-index: 0;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.5s ease;
    filter: brightness(0.7) contrast(1.1);
}
.event-ticket-card:hover img {
    transform: scale(1.08);
    filter: brightness(0.4) contrast(1.2);
}
.event-ticket-content {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
    padding: 2rem;
    background: linear-gradient(to top, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.7) 40%, transparent 100%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.event-ticket-category {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--primary);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    opacity: 0.8;
}
.event-ticket-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 1rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    transform: translateY(30px);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.event-ticket-card:hover .event-ticket-title {
    transform: translateY(0);
}
.event-ticket-metrics {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease 0.1s;
    height: 0;
    overflow: hidden;
}
.event-ticket-card:hover .event-ticket-metrics {
    opacity: 1;
    transform: translateY(0);
    height: auto;
}
.event-metric-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #ccc;
}
.event-metric-item i {
    width: 14px; height: 14px;
    color: var(--primary);
}
.event-ticket-btn {
    width: 100%;
    padding: 1rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    text-align: center;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    opacity: 0;
    transform: translateY(20px);
}
.event-ticket-card:hover .event-ticket-btn {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}
.event-ticket-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #000;
}
}

/* ==========================================================================
   NOTIFICATIONS HUB (Alta Gamma)
   ========================================================================== */
.notifications-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 3rem;
    align-items: start;
}
.notification-sidebar {
    position: sticky;
    top: 100px;
}
.notif-filter-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
}
.notif-filter-btn i {
    width: 20px;
    height: 20px;
    opacity: 0.7;
}
.notif-filter-btn:hover {
    background: rgba(255,255,255,0.05);
    color: #fff;
}
.notif-filter-btn.active {
    background: rgba(177, 136, 94, 0.1);
    color: var(--primary);
}
.notif-filter-btn.active i {
    opacity: 1;
}
.notif-badge {
    margin-left: auto;
    background: rgba(255,255,255,0.1);
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}
.notif-filter-btn.active .notif-badge {
    background: var(--primary);
    color: #000;
}
.feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.btn-mark-read:hover {
    opacity: 0.8;
}
.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.notification-card {
    display: flex;
    gap: 1.5rem;
    background: rgba(20, 18, 17, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 16px;
    position: relative;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    transform-style: preserve-3d;
    animation: slideUpFade 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    opacity: 0;
}
@keyframes slideUpFade {
    0% { opacity: 0; transform: translateY(30px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.notification-card:nth-child(1) { animation-delay: 0.1s; }
.notification-card:nth-child(2) { animation-delay: 0.2s; }
.notification-card:nth-child(3) { animation-delay: 0.3s; }
.notification-card:nth-child(4) { animation-delay: 0.4s; }
.notification-card:nth-child(5) { animation-delay: 0.5s; }
.notification-card:nth-child(6) { animation-delay: 0.6s; }
.notification-card:hover {
    transform: translateY(-5px) scale(1.01);
    background: rgba(30, 28, 26, 0.9);
    border-color: rgba(177, 136, 94, 0.3);
    box-shadow: 0 15px 40px rgba(0,0,0,0.5), inset 0 0 20px rgba(177, 136, 94, 0.05);
    z-index: 10;
}
@keyframes unreadPulse {
    0% { box-shadow: 0 0 10px rgba(177, 136, 94, 0.5); }
    50% { box-shadow: 0 0 20px rgba(177, 136, 94, 0.9); }
    100% { box-shadow: 0 0 10px rgba(177, 136, 94, 0.5); }
}
.notification-card.unread {
    background: rgba(177, 136, 94, 0.08);
    border-color: rgba(177, 136, 94, 0.3);
}
.notification-card.unread::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 40px;
    background: var(--primary);
    border-radius: 0 4px 4px 0;
    animation: unreadPulse 2s infinite ease-in-out;
}
.notif-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
}
.notif-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.notif-icon-wrapper i {
    width: 24px;
    height: 24px;
}
.tx-icon { color: #2ecc71; background: rgba(46, 204, 113, 0.1); }
.community-icon { color: #f1c40f; background: rgba(241, 196, 15, 0.1); }
.security-icon { color: #ff4757; background: rgba(255, 71, 87, 0.1); }
.system-icon { color: var(--primary); background: rgba(177, 136, 94, 0.1); }

.notif-content {
    flex: 1;
}
.notif-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
}
.notif-category {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: var(--primary);
}
.notif-time {
    color: var(--text-secondary);
}
.notif-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 0.5rem;
}
.notif-desc {
    color: #aaa;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}
.notif-actions {
    display: flex;
    gap: 1rem;
}
.notif-btn {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}
.notif-btn.primary {
    background: var(--primary);
    color: #000;
}
.notif-btn.primary:hover {
    opacity: 0.9;
}
.notif-btn.secondary {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.notif-btn.secondary:hover {
    background: rgba(255,255,255,0.2);
}
.notif-btn.warning {
    background: rgba(255, 71, 87, 0.1);
    color: #ff4757;
    border: 1px solid rgba(255, 71, 87, 0.2);
}
.notif-btn.warning:hover {
    background: #ff4757;
    color: #fff;
}
.notif-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease, color 0.3s ease;
}
.notification-card:hover .notif-close-btn {
    opacity: 1;
}
.notif-close-btn:hover {
    color: #ff4757;
}

@media (max-width: 1024px) {
    .notifications-layout {
        grid-template-columns: 1fr;
    }
    .notification-sidebar {
        position: static;
        margin-bottom: 2rem;
    }
    .notification-card {
        flex-direction: column;
        gap: 1rem;
    }
    .notif-close-btn {
        opacity: 1;
        top: 1rem;
        right: 1rem;
    }
}

/* ==========================================================================
   7. ÁGORA DIGITAL — DEBATE PAGE (Refactored V72)
   ========================================================================== */

/* ── HERO BANNER ── */
.debate-hero-banner {
    position: relative;
    padding: 140px 2rem 5rem;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(177,136,94,0.15) 0%, transparent 70%), var(--bg-base);
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.debate-particles span {
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0;
    animation: floatParticle 8s infinite ease-in-out;
}
.debate-particles span:nth-child(1){left:10%;top:30%;animation-delay:0s;animation-duration:7s;}
.debate-particles span:nth-child(2){left:25%;top:60%;animation-delay:1s;animation-duration:9s;background:rgba(177,136,94,0.5);}
.debate-particles span:nth-child(3){left:50%;top:20%;animation-delay:2s;animation-duration:6s;}
.debate-particles span:nth-child(4){left:70%;top:50%;animation-delay:0.5s;animation-duration:10s;background:rgba(177,136,94,0.3);}
.debate-particles span:nth-child(5){left:85%;top:25%;animation-delay:3s;animation-duration:8s;}
.debate-particles span:nth-child(6){left:5%;top:70%;animation-delay:2.5s;animation-duration:7.5s;}
.debate-particles span:nth-child(7){left:40%;top:80%;animation-delay:1.5s;animation-duration:9.5s;background:rgba(177,136,94,0.4);}
.debate-particles span:nth-child(8){left:60%;top:10%;animation-delay:4s;animation-duration:11s;}
.debate-particles span:nth-child(9){left:90%;top:75%;animation-delay:3.5s;animation-duration:8s;}
.debate-particles span:nth-child(10){left:15%;top:45%;animation-delay:0.8s;animation-duration:6.5s;background:rgba(177,136,94,0.6);}
@keyframes floatParticle {
    0%,100% { opacity:0; transform: translateY(0) scale(1); }
    50% { opacity: 0.8; transform: translateY(-40px) scale(1.5); }
}
.debate-hero-content { position: relative; z-index: 5; max-width: 800px; margin: 0 auto; text-align: center; }
.debate-live-indicator {
    display: inline-flex; align-items: center; gap: 0.6rem;
    background: rgba(177,136,94,0.1); border: 1px solid rgba(177,136,94,0.2);
    color: var(--primary); font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
    padding: 0.4rem 1.2rem; border-radius: 50px; margin-bottom: 1.5rem;
}
.pulse-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34,197,94,0.4);
    animation: pulse-live 2s infinite;
}
@keyframes pulse-live {
    0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
    70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.debate-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    color: #fff; font-weight: 900; letter-spacing: -1px;
    line-height: 1.05; margin-bottom: 1rem;
}
.text-glow { color: var(--primary); text-shadow: 0 0 30px rgba(177,136,94,0.5); }
.debate-hero-sub {
    color: var(--text-secondary); font-size: 1.15rem; line-height: 1.6; margin-bottom: 2rem;
}
.debate-hero-stats {
    display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
}
.stat-chip {
    display: flex; align-items: center; gap: 0.5rem;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50px; padding: 0.5rem 1.2rem;
    font-size: 0.85rem; color: var(--text-secondary);
    transition: all 0.3s ease;
}
.stat-chip i { color: var(--primary); width: 16px; height: 16px; }
.stat-chip span { color: #fff; font-weight: 700; }
.stat-chip:hover { border-color: rgba(177,136,94,0.3); background: rgba(177,136,94,0.05); }

/* ── MAIN 3-COLUMN LAYOUT ── */
.agora-layout-wrapper {
    display: grid;
    grid-template-columns: 260px 1fr 300px;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 3rem 2rem 8rem;
    align-items: start;
}

/* ── LEFT SIDEBAR ── */
.debate-sidebar-left {
    position: sticky; top: 100px;
    display: flex; flex-direction: column; gap: 1.5rem;
}
.agora-sidebar-block {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px; padding: 1.5rem;
}
.agora-sidebar-heading {
    font-family: var(--font-heading);
    font-size: 0.75rem; letter-spacing: 3px; text-transform: uppercase;
    color: var(--text-secondary); margin-bottom: 1rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.agora-sidebar-heading i { color: var(--primary); width: 14px; height: 14px; }
.agora-category-nav { display: flex; flex-direction: column; gap: 0.4rem; }
.agora-cat-btn {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.6rem 0.8rem; border-radius: 10px;
    background: none; border: none; cursor: pointer; width: 100%; text-align: left;
    color: var(--text-secondary); font-size: 0.85rem; font-weight: 500;
    transition: all 0.25s ease;
}
.agora-cat-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.agora-cat-icon i { color: #fff !important; width: 16px; height: 16px; }
.agora-cat-btn:hover { background: rgba(255,255,255,0.05); color: #fff; }
.agora-cat-btn.active { background: rgba(177,136,94,0.12); color: var(--primary); }
.agora-cat-btn.active .agora-cat-icon { box-shadow: 0 0 12px rgba(177,136,94,0.4); }
.agora-cat-count {
    margin-left: auto; font-size: 0.75rem;
    background: rgba(255,255,255,0.06); border-radius: 50px;
    padding: 0.1rem 0.6rem; color: var(--text-secondary);
}
.agora-sort-group { display: flex; flex-direction: column; gap: 0.4rem; }
.agora-sort-btn {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.65rem 1rem; border-radius: 8px;
    background: none; border: none; cursor: pointer; width: 100%; text-align: left;
    color: var(--text-secondary); font-size: 0.85rem; font-weight: 500;
    transition: all 0.2s ease;
}
.agora-sort-btn i { width: 16px; height: 16px; }
.agora-sort-btn:hover { background: rgba(255,255,255,0.05); color: #fff; }
.agora-sort-btn.active { color: var(--primary); background: rgba(177,136,94,0.1); }
.agora-sort-btn.active i { color: var(--primary); }
.agora-codigo-block {
    text-align: center;
    background: linear-gradient(135deg, rgba(177,136,94,0.05), rgba(177,136,94,0.01));
    border-color: rgba(177,136,94,0.15);
}
.agora-codigo-icon {
    width: 48px; height: 48px; background: rgba(177,136,94,0.15);
    border: 1px solid rgba(177,136,94,0.3); border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem; color: var(--primary);
}
.agora-codigo-block h4 { color: #fff; font-size: 1rem; margin-bottom: 0.5rem; font-family: var(--font-heading); }
.agora-codigo-block p { color: var(--text-secondary); font-size: 0.8rem; line-height: 1.5; margin-bottom: 1rem; }
.agora-codigo-link { color: var(--primary); font-size: 0.8rem; text-decoration: none; font-weight: 600; }
.agora-codigo-link:hover { text-decoration: underline; }

/* ── CENTER FEED ── */
.debate-feed-main { display: flex; flex-direction: column; gap: 1rem; }

/* Composer Box */
.debate-composer-box {
    display: flex; align-items: center; gap: 1rem;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px; padding: 1rem 1.2rem;
    transition: all 0.3s ease; cursor: pointer;
}
.debate-composer-box:hover { border-color: rgba(177,136,94,0.3); background: rgba(177,136,94,0.05); }
.composer-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(177,136,94,0.2); border: 1px solid rgba(177,136,94,0.3);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--primary);
}
.composer-input-fake {
    flex: 1; padding: 0.6rem 1rem;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50px; color: var(--text-secondary); font-size: 0.9rem;
    cursor: text; transition: all 0.3s ease;
}
.composer-input-fake:hover { background: rgba(255,255,255,0.07); border-color: rgba(177,136,94,0.2); }
.composer-launch-btn {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--primary-gradient); border: none; cursor: pointer;
    color: #fff; display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease; flex-shrink: 0;
}
.composer-launch-btn:hover { transform: scale(1.1); box-shadow: 0 4px 15px rgba(177,136,94,0.4); }
.feed-mobile-tabs { display: none; }

/* Debate Cards */
.debate-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px; padding: 1.5rem;
    display: flex; gap: 1rem;
    transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
}
.debate-card:hover {
    border-color: rgba(177,136,94,0.25);
    background: rgba(255,255,255,0.035);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.debate-card.pinned {
    border-color: rgba(177,136,94,0.3);
    background: linear-gradient(145deg, rgba(177,136,94,0.05), rgba(177,136,94,0.01));
}
.debate-card.hot { border-color: rgba(239,68,68,0.2); }
.debate-card.voted { animation: voteFlash 0.4s ease; }
@keyframes voteFlash { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 0 2px rgba(177,136,94,0.4);} }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 60%{transform:translateX(5px)} }

/* Vote Column */
.debate-vote-col {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    flex-shrink: 0; min-width: 42px;
}
.vote-btn {
    width: 32px; height: 28px; border-radius: 6px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-secondary); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.vote-btn i { width: 16px; height: 16px; }
.vote-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.vote-btn.vote-up.active { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.4); color: #22c55e; }
.vote-btn.vote-down.active { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.4); color: #ef4444; }
.vote-count {
    font-size: 0.85rem; font-weight: 700; color: #fff;
    min-width: 24px; text-align: center; line-height: 1;
}
.vote-fire { color: var(--text-secondary); }
.vote-fire i { width: 14px; height: 14px; }
.hot-fire { color: #f97316; filter: drop-shadow(0 0 4px rgba(249,115,22,0.5)); }

/* Card Body */
.debate-body-col { flex: 1; min-width: 0; }
.debate-meta-row {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.75rem;
}
.debate-tag {
    padding: 0.2rem 0.7rem; border-radius: 50px;
    font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
    background: rgba(177,136,94,0.12); color: var(--primary);
}
.pinned-tag { display: flex; align-items: center; gap: 0.3rem; }
.pinned-tag i { width: 10px; height: 10px; }
.trending-tag { background: rgba(239,68,68,0.12); color: #f87171; display: flex; align-items: center; gap: 0.3rem; }
.trending-tag i { width: 11px; height: 11px; }
.debate-author-chip {
    display: flex; align-items: center; gap: 0.4rem; color: #fff; font-weight: 600;
}
.author-avatar-mini {
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(177,136,94,0.2); border: 1px solid rgba(177,136,94,0.3);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.author-avatar-mini i { width: 12px; height: 12px; color: var(--primary); }
.verified-badge { color: #22c55e; display: inline-flex; align-items: center; }
.verified-badge i { width: 13px; height: 13px; }
.verified-badge.small i { width: 11px; height: 11px; }
.debate-time { display: flex; align-items: center; gap: 0.3rem; }
.debate-time i { width: 12px; height: 12px; }
.debate-card-title {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    color: #fff; line-height: 1.3; margin-bottom: 0.6rem;
    transition: color 0.2s ease;
}
.debate-card:hover .debate-card-title { color: var(--primary); }
.debate-card-excerpt {
    color: var(--text-secondary); font-size: 0.9rem; line-height: 1.65;
    margin-bottom: 1rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.debate-action-row {
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
    border-top: 1px solid rgba(255,255,255,0.05); padding-top: 0.8rem;
}
.debate-act-btn {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.75rem; border-radius: 6px;
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary); font-size: 0.8rem;
    transition: all 0.2s ease;
}
.debate-act-btn i { width: 14px; height: 14px; }
.debate-act-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.locked-btn { cursor: not-allowed; opacity: 0.5; }
.debate-act-spacer { flex: 1; }
.debate-social-links { display: flex; gap: 0.3rem; }
.social-share-mini {
    width: 28px; height: 28px; border-radius: 6px; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease; color: #fff;
}
.social-share-mini.whatsapp { background: rgba(37,211,102,0.15); color: #25d366; }
.social-share-mini.twitter { background: rgba(255,255,255,0.08); color: #fff; }
.social-share-mini.facebook { background: rgba(24,119,242,0.15); color: #1877f2; }
.social-share-mini:hover { transform: scale(1.15); filter: brightness(1.3); }

/* Load More */
.agora-load-more-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.7rem;
    width: 100%; padding: 1rem;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; color: var(--text-secondary); font-size: 0.85rem; cursor: pointer;
    transition: all 0.3s ease; margin-top: 0.5rem;
}
.agora-load-more-btn:hover { border-color: rgba(177,136,94,0.3); color: var(--primary); background: rgba(177,136,94,0.05); }
.spin-icon { animation: spin 1.2s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── RIGHT SIDEBAR ── */
.debate-sidebar-right {
    position: sticky; top: 100px;
    display: flex; flex-direction: column; gap: 1.5rem;
}
.agora-cta-sticky { }
.agora-new-debate-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.7rem;
    width: 100%; padding: 1rem 1.5rem;
    background: var(--primary-gradient); border: none; border-radius: 12px;
    color: #fff; font-weight: 700; font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase;
    cursor: pointer; transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(177,136,94,0.3);
}
.agora-new-debate-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(177,136,94,0.5); }
.agora-new-debate-btn i { width: 18px; height: 18px; }
.agora-widget {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px; padding: 1.5rem;
}
.agora-widget-title {
    font-family: var(--font-heading);
    font-size: 0.75rem; letter-spacing: 3px; text-transform: uppercase;
    color: var(--text-secondary); margin-bottom: 1.2rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.agora-widget-title i { color: var(--primary); width: 14px; height: 14px; }
.agora-hot-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.agora-hot-item {
    display: flex; align-items: flex-start; gap: 0.8rem;
    padding-bottom: 0.75rem; border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.agora-hot-item:last-child { border-bottom: none; padding-bottom: 0; }
.hot-rank {
    width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700;
    background: rgba(255,255,255,0.05); color: var(--text-secondary);
}
.hot-rank-1 { background: rgba(250,204,21,0.15); color: #fbbf24; }
.hot-rank-2 { background: rgba(148,163,184,0.15); color: #94a3b8; }
.hot-rank-3 { background: rgba(205,127,50,0.15); color: #cd7f32; }
.hot-info { flex: 1; min-width: 0; }
.hot-link {
    display: block; color: var(--text-secondary); font-size: 0.8rem; line-height: 1.4;
    text-decoration: none; transition: color 0.2s ease; margin-bottom: 0.2rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hot-link:hover { color: var(--primary); }
.hot-meta { font-size: 0.7rem; color: rgba(255,255,255,0.25); display: flex; align-items: center; gap: 0.3rem; }
.hot-meta i { width: 10px; height: 10px; color: var(--primary); }

/* Leaderboard */
.agora-leaderboard { display: flex; flex-direction: column; gap: 0.9rem; }
.leader-item {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.75rem; border-radius: 10px; background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04); transition: all 0.2s ease;
}
.leader-item:hover { background: rgba(255,255,255,0.05); border-color: rgba(177,136,94,0.15); }
.leader-rank-badge { font-size: 1rem; flex-shrink: 0; }
.leader-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(177,136,94,0.15); border: 1px solid rgba(177,136,94,0.2);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--primary);
}
.leader-avatar i { width: 16px; height: 16px; }
.leader-info { flex: 1; min-width: 0; }
.leader-name { color: #fff; font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 0.3rem; }
.leader-pts { color: var(--text-secondary); font-size: 0.72rem; margin-top: 0.1rem; }
.leader-flame { font-size: 1rem; }

/* Share Widget */
.agora-share-widget { }
.agora-share-desc { color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5; margin-bottom: 1rem; }
.agora-share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.agora-share-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.6rem 0.5rem; border-radius: 8px; border: 1px solid transparent;
    font-size: 0.78rem; font-weight: 600; cursor: pointer; text-decoration: none;
    transition: all 0.2s ease;
}
.whatsapp-btn { background: rgba(37,211,102,0.1); border-color: rgba(37,211,102,0.2); color: #25d366; }
.whatsapp-btn:hover { background: rgba(37,211,102,0.2); }
.twitter-btn { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: #fff; }
.twitter-btn:hover { background: rgba(255,255,255,0.1); }
.facebook-btn { background: rgba(24,119,242,0.1); border-color: rgba(24,119,242,0.2); color: #1877f2; }
.facebook-btn:hover { background: rgba(24,119,242,0.2); }
.copy-btn { background: rgba(177,136,94,0.1); border-color: rgba(177,136,94,0.2); color: var(--primary); }
.copy-btn:hover { background: rgba(177,136,94,0.2); }

/* ── MODAL ── */
.agora-modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.75); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: all 0.35s ease; padding: 1rem;
}
.agora-modal-overlay.is-open { opacity: 1; visibility: visible; }
.agora-modal-box {
    background: var(--bg-surface); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px; width: 100%; max-width: 640px;
    max-height: 90vh; overflow-y: auto;
    transform: scale(0.92) translateY(20px); transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: 0 30px 80px rgba(0,0,0,0.8);
}
.agora-modal-overlay.is-open .agora-modal-box { transform: scale(1) translateY(0); }
.agora-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.5rem 1.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 1rem;
}
.agora-modal-title-group { display: flex; align-items: center; gap: 0.7rem; }
.agora-modal-title-group h3 { color: #fff; font-size: 1.1rem; font-family: var(--font-heading); margin: 0; }
.agora-modal-title-group i { width: 20px; height: 20px; }
.agora-modal-close {
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(255,255,255,0.06); border: none; color: var(--text-secondary); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.2s ease;
}
.agora-modal-close:hover { background: rgba(255,71,87,0.15); color: #ff4757; }
.agora-modal-close i { width: 16px; height: 16px; }
.agora-modal-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.modal-label { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.6rem; }
.required { color: var(--primary); }
.modal-cat-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.modal-cat-pill {
    padding: 0.4rem 0.9rem; border-radius: 50px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-secondary); font-size: 0.8rem; cursor: pointer; transition: all 0.2s ease;
}
.modal-cat-pill:hover { border-color: rgba(177,136,94,0.3); color: var(--primary); }
.modal-cat-pill.active { background: rgba(177,136,94,0.15); border-color: var(--primary); color: var(--primary); }
.modal-field { position: relative; }
.modal-input {
    width: 100%; padding: 0.85rem 1rem; box-sizing: border-box;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; color: #fff; font-size: 0.9rem; transition: all 0.2s ease;
}
.modal-input:focus { outline: none; border-color: var(--primary); background: rgba(177,136,94,0.05); box-shadow: 0 0 0 3px rgba(177,136,94,0.1); }
.modal-textarea {
    width: 100%; padding: 0.85rem 1rem; box-sizing: border-box;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; color: #fff; font-size: 0.9rem; resize: vertical;
    transition: all 0.2s ease; font-family: inherit; line-height: 1.6; min-height: 120px;
}
.modal-textarea:focus { outline: none; border-color: var(--primary); background: rgba(177,136,94,0.05); box-shadow: 0 0 0 3px rgba(177,136,94,0.1); }
.char-counter { position: absolute; right: 0.75rem; bottom: -1.2rem; font-size: 0.7rem; color: var(--text-secondary); }
.modal-share-options { display: flex; flex-direction: column; gap: 0.6rem; }
.modal-checkbox-label {
    display: flex; align-items: center; gap: 0.6rem;
    color: var(--text-secondary); font-size: 0.85rem; cursor: pointer;
}
.modal-checkbox-label input { accent-color: var(--primary); width: 15px; height: 15px; }
.modal-checkbox-label i, .modal-checkbox-label svg { color: var(--primary); flex-shrink: 0; }
.agora-modal-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 1rem;
    padding: 1rem 1.5rem; border-top: 1px solid rgba(255,255,255,0.06);
}
.modal-btn-cancel {
    padding: 0.75rem 1.5rem; border-radius: 10px;
    background: none; border: 1px solid rgba(255,255,255,0.1); color: var(--text-secondary);
    cursor: pointer; font-size: 0.85rem; transition: all 0.2s ease;
}
.modal-btn-cancel:hover { background: rgba(255,255,255,0.05); color: #fff; }
.modal-btn-publish {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.75rem 1.8rem; border-radius: 10px;
    background: var(--primary-gradient); border: none;
    color: #fff; font-weight: 700; font-size: 0.9rem; cursor: pointer;
    transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(177,136,94,0.3);
}
.modal-btn-publish:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(177,136,94,0.5); }
.modal-btn-publish i { width: 16px; height: 16px; }
body.modal-open { overflow: hidden; }

/* ── FAB (Mobile) ── */
.agora-fab {
    display: none; position: fixed; bottom: 5rem; right: 1.5rem; z-index: 200;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--primary-gradient); border: none;
    color: #fff; cursor: pointer; font-size: 1.2rem;
    align-items: center; justify-content: center;
    box-shadow: 0 8px 25px rgba(177,136,94,0.5);
    transition: all 0.3s ease;
}
.agora-fab:hover { transform: scale(1.1); }
.agora-fab i { width: 22px; height: 22px; }

/* ── RESPONSIVE ── */

/* Global overflow guard for mobile */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    * { box-sizing: border-box; }
}

@media (max-width: 1250px) {
    .agora-layout-wrapper { grid-template-columns: 230px 1fr 270px; gap: 1.5rem; }
}
@media (max-width: 1024px) {
    .agora-layout-wrapper { grid-template-columns: 220px 1fr; }
    .debate-sidebar-right { display: none; }
    .agora-fab { display: flex; }
}

@media (max-width: 768px) {
    /* Layout */
    .agora-layout-wrapper {
        grid-template-columns: 1fr;
        padding: 1rem 0.75rem 6rem;
        gap: 1rem;
        width: 100%;
        overflow: hidden;
    }
    .debate-sidebar-left { position: static; }

    /* Hero */
    .debate-hero-banner {
        padding: 110px 1rem 3rem;
        overflow: hidden;
    }
    .debate-hero-title { font-size: clamp(1.8rem, 8vw, 2.8rem); }
    .debate-hero-sub { font-size: 0.95rem; }
    .debate-hero-stats { gap: 0.5rem; }
    .stat-chip { font-size: 0.78rem; padding: 0.4rem 0.8rem; }

    /* Left sidebar scroll on mobile */
    .agora-sidebar-block { padding: 1rem; }
    .agora-category-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 0.4rem;
        padding-bottom: 0.25rem;
    }
    .agora-category-nav::-webkit-scrollbar { display: none; }
    .agora-cat-btn {
        flex-direction: column;
        min-width: 68px;
        max-width: 80px;
        font-size: 0.7rem;
        padding: 0.5rem 0.4rem;
        text-align: center;
        gap: 0.3rem;
    }
    .agora-cat-btn span:not(.agora-cat-count) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 70px;
    }
    .agora-cat-count { display: none; }
    .agora-sort-group { flex-direction: row; flex-wrap: wrap; gap: 0.35rem; }
    .agora-sort-btn { flex: 1; min-width: 120px; justify-content: center; padding: 0.55rem 0.5rem; font-size: 0.78rem; }

    /* Mobile tabs */
    .feed-mobile-tabs { display: flex; gap: 0.5rem; margin-bottom: 0.25rem; }
    .feed-tab-btn {
        flex: 1;
        display: flex; align-items: center; justify-content: center; gap: 0.4rem;
        padding: 0.6rem 0.5rem; border-radius: 8px;
        background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
        color: var(--text-secondary); font-size: 0.8rem; cursor: pointer; transition: all 0.2s ease;
    }
    .feed-tab-btn.active { background: rgba(177,136,94,0.15); border-color: var(--primary); color: var(--primary); }
    .feed-tab-btn i { width: 14px; height: 14px; }

    /* Composer */
    .debate-composer-box { padding: 0.75rem 1rem; gap: 0.7rem; }
    .composer-input-fake { font-size: 0.82rem; padding: 0.5rem 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* ── DEBATE CARDS: THE MAIN FIX ── */
    .debate-card {
        padding: 0.85rem;
        gap: 0.6rem;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        flex-direction: column; /* Stack vote below content */
    }
    /* Stack vote column + body vertically on very small screens */
    .debate-vote-col {
        flex-direction: row;
        min-width: unset;
        width: 100%;
        gap: 0.5rem;
        align-items: center;
        order: 2; /* Move votes BELOW content */
        border-top: 1px solid rgba(255,255,255,0.05);
        padding-top: 0.7rem;
        margin-top: 0.2rem;
    }
    .vote-btn { width: 28px; height: 28px; }
    .vote-fire { margin-left: auto; }
    .debate-body-col {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        order: 1;
    }

    /* Meta row: make it scroll horizontally */
    .debate-meta-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 0.4rem;
        padding-bottom: 0.25rem;
        mask-image: linear-gradient(to right, black 85%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    }
    .debate-meta-row::-webkit-scrollbar { display: none; }
    .debate-tag { white-space: nowrap; flex-shrink: 0; }
    .debate-author-chip { white-space: nowrap; flex-shrink: 0; }
    .debate-time { white-space: nowrap; flex-shrink: 0; }

    /* Titles and excerpts */
    .debate-card-title { font-size: 1rem; }
    .debate-card-excerpt { font-size: 0.85rem; -webkit-line-clamp: 2; }

    /* Action row */
    .debate-action-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 0.25rem;
        padding-bottom: 0.25rem;
        border-top: none; /* border moved to vote-col */
    }
    .debate-action-row::-webkit-scrollbar { display: none; }
    .debate-act-btn {
        flex-shrink: 0;
        padding: 0.35rem 0.6rem;
        font-size: 0.76rem;
        white-space: nowrap;
    }
    .debate-act-spacer { display: none; }
    .debate-social-links { flex-shrink: 0; gap: 0.25rem; }
    .social-share-mini { width: 26px; height: 26px; }

    /* Modal */
    .agora-modal-box { border-radius: 16px 16px 0 0; align-self: flex-end; max-height: 95vh; }
    .agora-modal-overlay { align-items: flex-end; padding: 0; }
    .agora-modal-body { padding: 1rem; gap: 1rem; }
    .agora-modal-header { padding: 1rem 1rem 0; padding-bottom: 0.75rem; }
    .agora-modal-footer { padding: 0.75rem 1rem; }
    .modal-cat-pills { gap: 0.4rem; }
    .modal-cat-pill { font-size: 0.75rem; padding: 0.35rem 0.7rem; }
    .agora-share-grid { grid-template-columns: 1fr 1fr; }

    /* Load more */
    .agora-load-more-btn { font-size: 0.8rem; padding: 0.85rem; }
}

@media (max-width: 400px) {
    .agora-layout-wrapper { padding: 0.75rem 0.5rem 6rem; }
    .debate-composer-box { gap: 0.5rem; }
    .composer-avatar { width: 34px; height: 34px; }
    .debate-hero-title { font-size: clamp(1.6rem, 9vw, 2.2rem); }
    .stat-chip { padding: 0.35rem 0.6rem; font-size: 0.72rem; }
}


/* ==========================================================================
   20. WOOCOMMERCE ELITE STYLES (Phase 29)
   ========================================================================== */

.woocommerce-container .products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.woocommerce-container .product {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
    display: flex;
    flex-direction: column;
}

.woocommerce-container .product:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(177, 136, 94, 0.2);
    border-color: rgba(177, 136, 94, 0.4);
    z-index: 2;
}

.woocommerce-container .product img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform 0.8s ease, filter 0.8s ease;
    filter: brightness(0.8) contrast(1.1);
}

.woocommerce-container .product:hover img {
    transform: scale(1.05);
    filter: brightness(1) contrast(1.1);
}

.woocommerce-container .product > a {
    text-decoration: none;
    color: inherit;
    flex-grow: 1;
}

.woocommerce-container .product .woocommerce-loop-product__title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: #fff;
    margin: 1.5rem 1.5rem 0.5rem;
}

.woocommerce-container .product .price {
    display: block;
    font-size: 1.2rem;
    color: var(--primary);
    font-weight: 600;
    margin: 0 1.5rem 1.5rem;
}

/* WooCommerce Add to Cart Button */
.woocommerce-container .product .button {
    display: block;
    margin: 0 1.5rem 1.5rem;
    padding: 1rem;
    text-align: center;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid rgba(177, 136, 94, 0.4);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.woocommerce-container .product .button:hover {
    background: var(--primary);
    color: var(--bg-base);
    box-shadow: 0 0 20px rgba(177, 136, 94, 0.4);
}

/* Single Product Page basic styles */
.woocommerce-container div.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.woocommerce-container div.product .images img {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.05);
}

.woocommerce-container div.product .product_title {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: #fff;
    margin-bottom: 1rem;
}

.woocommerce-container div.product .price {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 2rem;
    display: block;
}

.woocommerce-container div.product .woocommerce-product-details__short-description {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.woocommerce-container div.product form.cart {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.woocommerce-container div.product form.cart .qty {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    padding: 1rem;
    border-radius: 8px;
    width: 80px;
    font-size: 1.1rem;
}

.woocommerce-container div.product form.cart .single_add_to_cart_button {
    background: var(--primary);
    color: var(--bg-base);
    border: none;
    padding: 1rem 3rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.woocommerce-container div.product form.cart .single_add_to_cart_button:hover {
    box-shadow: 0 0 20px rgba(177, 136, 94, 0.6);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .woocommerce-container div.product {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ==========================================================================
   21. ADVANCED SEARCH UI (Phase 30)
   ========================================================================== */

/* Search Filters Dropdown (Glassmorphism) */
.search-filters-dropdown {
    position: absolute;
    top: 120%;
    right: 0;
    width: 320px;
    background: rgba(15, 15, 15, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    padding: 1.5rem;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.search-filters-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-filters-dropdown .dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.search-filters-dropdown .styled-select {
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1em;
}

/* Typing search placeholder effect */
.typing-search::placeholder {
    color: var(--text-secondary);
    opacity: 0.8;
}

@media (max-width: 768px) {
    .search-filters-dropdown {
        width: 100%;
        left: 0;
        right: 0;
    }
}

/* ==========================================================================
   22. FINDY STUDIO & PRICING (Phase 31)
   ========================================================================== */

/* Pricing Grid */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: center; /* Center to allow middle card to pop up */
}

.pricing-card {
    background: rgba(20, 20, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 3rem 2rem;
    position: relative;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pricing-card:hover {
    transform: translateY(-10px);
    border-color: rgba(177, 136, 94, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.pricing-card.recommended {
    border-color: rgba(177, 136, 94, 0.5);
    box-shadow: 0 0 30px rgba(177, 136, 94, 0.1);
    transform: scale(1.05);
    z-index: 2;
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.8) 0%, rgba(20, 20, 20, 0.9) 100%);
}

.pricing-card.recommended:hover {
    transform: scale(1.05) translateY(-10px);
    box-shadow: 0 20px 50px rgba(177, 136, 94, 0.2);
}

.recommended-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: var(--bg-base);
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(177, 136, 94, 0.4);
}

.pricing-header h4 {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.pricing-header .price {
    font-size: 3rem;
    font-family: var(--font-heading);
    color: #fff;
    margin-bottom: 1rem;
    line-height: 1;
}

.pricing-header .price span {
    font-size: 1rem;
    color: var(--text-secondary);
    font-family: var(--font-body);
}

.pricing-header p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 2rem;
    min-height: 65px;
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 2rem;
}

.features-list li {
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.features-list li i {
    color: var(--primary);
    width: 18px;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .pricing-card.recommended {
        transform: none;
    }
    .pricing-card.recommended:hover {
        transform: translateY(-10px);
    }
}

/* ==========================================================================
   23. CINEMATIC ANIMATIONS (Phase 32)
   ========================================================================== */

@keyframes iconPulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(177, 136, 94, 0)); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 15px rgba(177, 136, 94, 0.6)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(177, 136, 94, 0)); }
}

@keyframes iconFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-8px); filter: drop-shadow(0 10px 10px rgba(177, 136, 94, 0.4)); }
    100% { transform: translateY(0); }
}

@keyframes iconSpinSlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.icon-pulse {
    animation: iconPulse 3s infinite ease-in-out;
}

.icon-float {
    animation: iconFloat 4s infinite ease-in-out;
}

.icon-spin-slow {
    animation: iconSpinSlow 15s infinite linear;
}

.icon-glow-persistent {
    filter: drop-shadow(0 0 10px rgba(177, 136, 94, 0.8));
}

@keyframes shine {
    0% { left: -100%; }
    20% { left: 100%; }
    100% { left: 100%; }
}

/* ==========================================================================
   24. SPLIT-SCREEN LOGIN / REGISTRATION HUB
   ========================================================================== */

.split-login-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
    background: var(--bg-base);
    overflow: hidden;
}

/* Left Panel - Form */
.split-login-form-side {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem 2rem;
    position: relative;
    background: rgba(10, 10, 10, 0.95);
    z-index: 10;
}
.split-login-form-wrapper {
    width: 100%;
    max-width: 480px;
}
.custom-woo-login .woocommerce-account form {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.custom-woo-login form.login, .custom-woo-login form.register {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 2.5rem !important;
    backdrop-filter: blur(10px);
}
.custom-woo-login form p.form-row {
    margin-bottom: 1.5rem !important;
}
.custom-woo-login form label {
    color: var(--text-secondary) !important;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
}
.custom-woo-login form input[type="text"],
.custom-woo-login form input[type="password"],
.custom-woo-login form input[type="email"] {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    padding: 1rem !important;
    border-radius: 8px !important;
    width: 100%;
    transition: all 0.3s ease;
}
.custom-woo-login form input[type="text"]:focus,
.custom-woo-login form input[type="password"]:focus,
.custom-woo-login form input[type="email"]:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 15px rgba(177, 136, 94, 0.3) !important;
    outline: none;
}
.custom-woo-login form .button {
    background: var(--primary) !important;
    color: #fff !important;
    width: 100%;
    padding: 1rem !important;
    border-radius: 8px !important;
    font-family: var(--font-heading);
    letter-spacing: 1px;
    font-size: 1.1rem;
    text-transform: uppercase;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    border: none !important;
    cursor: pointer;
    margin-top: 1rem;
}
.custom-woo-login form .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(177, 136, 94, 0.4) !important;
}

/* Right Panel - Cinematic Background */
.split-login-hero-side {
    flex: 1.2;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 5rem;
    overflow: hidden;
}
.login-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}
.login-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(177,136,94,0.2) 100%);
    z-index: 2;
}
.login-hero-content {
    position: relative;
    z-index: 10;
}

/* Responsive */
@media (max-width: 1024px) {
    .split-login-container {
        flex-direction: column;
    }
    .split-login-hero-side {
        display: none; /* Hide image side on mobile for pure focus */
    }
    .split-login-form-side {
        padding: 2rem 1rem;
        min-height: 100vh;
    }
    .custom-woo-login form.login, .custom-woo-login form.register {
        padding: 1.5rem !important;
    }
}

/* ==========================================================================
   26. AVATAR DROPDOWN (TOP BAR)
   ========================================================================== */
.user-avatar-container {
    position: relative;
}
.user-avatar.logged-in {
    background: var(--primary);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: bold;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.user-avatar-container:hover .user-avatar.logged-in {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(177, 136, 94, 0.4);
}
.avatar-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 15px;
    background: rgba(15, 15, 15, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    z-index: 1000;
}
.user-avatar-container:hover .avatar-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.avatar-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 12px;
    width: 12px;
    height: 12px;
    background: rgba(15, 15, 15, 0.85);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    transform: rotate(45deg);
    z-index: -1;
}
.avatar-dropdown .dropdown-header {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.avatar-dropdown .dropdown-header .d-name {
    display: block;
    font-weight: 600;
    color: #fff;
    font-size: 0.95rem;
}
.avatar-dropdown .dropdown-header .d-email {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.avatar-dropdown a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    text-decoration: none;
    padding: 0.5rem;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: background 0.3s ease, color 0.3s ease;
}
.avatar-dropdown a:hover {
    background: rgba(255,255,255,0.05);
    color: var(--primary);
}
.avatar-dropdown a.logout-link:hover {
    background: rgba(255, 71, 87, 0.1);
    color: #ff4757;
}

/* ==========================================================================
   27. TABBED LOGIN & FLOATING LABELS
   ========================================================================== */
.login-tabs-nav {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 0;
}
.login-tab-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    position: relative;
    transition: color 0.3s ease;
}
.login-tab-btn:hover {
    color: #fff;
}
.login-tab-btn.active {
    color: var(--primary);
}
.login-tab-btn::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: left;
}
.login-tab-btn.active::after {
    transform: scaleX(1);
}

.login-tab-content {
    display: none;
    animation: fadeSlideUp 0.4s ease forwards;
}
.login-tab-content.active {
    display: block;
}
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* FLOATING LABELS WOOCOMMERCE OVERRIDE */
.custom-woo-login form .form-row {
    position: relative;
    margin-bottom: 1.8rem !important;
}
.custom-woo-login form label {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: normal;
}
/* When input is focused OR has value (handled via JS or valid pseudo), float label */
.custom-woo-login form input[type="text"]:focus ~ label,
.custom-woo-login form input[type="password"]:focus ~ label,
.custom-woo-login form input[type="email"]:focus ~ label,
.custom-woo-login form input.has-value ~ label {
    top: -10px;
    left: 0.5rem;
    font-size: 0.75rem;
    color: var(--primary) !important;
    background: rgba(10, 10, 10, 0.95);
    padding: 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
}
/* Re-order elements in WooCommerce so Label comes AFTER Input (required for CSS ~ selector) */
.custom-woo-login form .form-row {
    display: flex;
    flex-direction: column-reverse;
}

/* ==========================================================================
   28. DASHBOARD "MI ECOSISTEMA" (WOOCOMMERCE OVERRIDES)
   ========================================================================== */
.ecosystem-woo-wrapper .woocommerce {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 3rem;
    align-items: start;
}
.ecosystem-woo-wrapper .woocommerce-MyAccount-navigation {
    float: none;
    width: 100%;
}
.ecosystem-woo-wrapper .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ecosystem-woo-wrapper .woocommerce-MyAccount-navigation ul li {
    margin: 0;
}
.ecosystem-woo-wrapper .woocommerce-MyAccount-navigation ul li a {
    display: flex;
    align-items: center;
    padding: 1rem 1.2rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 12px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.ecosystem-woo-wrapper .woocommerce-MyAccount-navigation ul li a:hover,
.ecosystem-woo-wrapper .woocommerce-MyAccount-navigation ul li.is-active a {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 5px 15px rgba(177, 136, 94, 0.3);
    transform: translateX(5px);
}
.ecosystem-woo-wrapper .woocommerce-MyAccount-content {
    float: none;
    width: 100%;
    background: rgba(15, 15, 15, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* Tablas y Formularios dentro del Dashboard */
.ecosystem-woo-wrapper .woocommerce-MyAccount-content p {
    color: var(--text-secondary);
    line-height: 1.6;
}
.ecosystem-woo-wrapper .woocommerce-MyAccount-content a {
    color: var(--primary);
    text-decoration: none;
}
.ecosystem-woo-wrapper .woocommerce-MyAccount-content a:hover {
    text-decoration: underline;
}

/* Formularios de WooCommerce en Dashboard */
.ecosystem-woo-wrapper .woocommerce-MyAccount-content form .form-row {
    position: relative;
    margin-bottom: 2rem !important;
    display: flex;
    flex-direction: column-reverse;
}
.ecosystem-woo-wrapper .woocommerce-MyAccount-content form label {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    margin-bottom: 0;
}
.ecosystem-woo-wrapper .woocommerce-MyAccount-content form input[type="text"],
.ecosystem-woo-wrapper .woocommerce-MyAccount-content form input[type="password"],
.ecosystem-woo-wrapper .woocommerce-MyAccount-content form input[type="email"],
.ecosystem-woo-wrapper .woocommerce-MyAccount-content form input[type="tel"] {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    padding: 1.2rem 1rem 0.8rem !important;
    border-radius: 8px !important;
    width: 100%;
    transition: all 0.3s ease;
    font-family: var(--font-body);
}
.ecosystem-woo-wrapper .woocommerce-MyAccount-content form input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 15px rgba(177, 136, 94, 0.3) !important;
    outline: none;
    background: rgba(0, 0, 0, 0.5) !important;
}

/* Floating labels for Dashboard Forms */
.ecosystem-woo-wrapper .woocommerce-MyAccount-content form input:focus ~ label,
.ecosystem-woo-wrapper .woocommerce-MyAccount-content form input.has-value ~ label {
    top: -10px;
    left: 0.5rem;
    font-size: 0.75rem;
    color: var(--primary) !important;
    background: rgba(15, 15, 15, 0.95);
    padding: 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
}

/* Fieldset and Legend (Password change box) */
.ecosystem-woo-wrapper .woocommerce-MyAccount-content fieldset {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 2rem;
    margin-top: 3rem;
    background: rgba(0,0,0,0.1);
}
.ecosystem-woo-wrapper .woocommerce-MyAccount-content legend {
    color: var(--primary);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    padding: 0 1rem;
    background: transparent;
}
.ecosystem-woo-wrapper .woocommerce-MyAccount-content fieldset p {
    margin-top: 0;
}

.ecosystem-woo-wrapper .woocommerce-MyAccount-content .woocommerce-Message,
.ecosystem-woo-wrapper .woocommerce-MyAccount-content .woocommerce-info,
.ecosystem-woo-wrapper .woocommerce-MyAccount-content .woocommerce-error,
.ecosystem-woo-wrapper .woocommerce-MyAccount-content .woocommerce-message {
    background: rgba(255,255,255,0.05) !important;
    border-top: 3px solid var(--primary) !important;
    padding: 1rem !important;
    color: #fff !important;
    border-radius: 8px !important;
    margin-bottom: 2rem !important;
    list-style: none;
}
.ecosystem-woo-wrapper .woocommerce-MyAccount-content table.shop_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 2rem;
}
.ecosystem-woo-wrapper .woocommerce-MyAccount-content table.shop_table th,
.ecosystem-woo-wrapper .woocommerce-MyAccount-content table.shop_table td {
    padding: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-align: left;
    color: var(--text-secondary);
}
.ecosystem-woo-wrapper .woocommerce-MyAccount-content table.shop_table th {
    background: rgba(255,255,255,0.03);
    color: #fff;
    font-family: var(--font-heading);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.ecosystem-woo-wrapper .woocommerce-MyAccount-content .button {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
}
.ecosystem-woo-wrapper .woocommerce-MyAccount-content .button:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    text-decoration: none !important;
}

@media (max-width: 1024px) {
    .ecosystem-woo-wrapper .woocommerce {
        grid-template-columns: 1fr;
    }
    .ecosystem-woo-wrapper .woocommerce-MyAccount-content {
        padding: 1.5rem;
    }
}

/* ==========================================================================
   29. OFF-CANVAS CART (CARRITO DESLIZANTE)
   ========================================================================== */
.offcanvas-cart-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.offcanvas-cart-overlay.is-open {
    opacity: 1;
    visibility: visible;
}
.offcanvas-cart {
    position: fixed;
    top: 0; right: 0;
    width: 420px; max-width: 90vw;
    height: 100vh;
    background: rgba(12, 12, 12, 0.92);
    backdrop-filter: blur(30px);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6);
}
.offcanvas-cart.is-open {
    transform: translateX(0);
}
.offcanvas-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.offcanvas-cart-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 2rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

/* WooCommerce Mini Cart Overrides */
.offcanvas-cart .woocommerce-mini-cart {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.offcanvas-cart .woocommerce-mini-cart-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.offcanvas-cart .woocommerce-mini-cart-item a:not(.remove) {
    color: #fff !important;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
}
.offcanvas-cart .woocommerce-mini-cart-item a.remove {
    color: #ff4444 !important;
    font-size: 1.2rem;
    text-decoration: none;
    transition: opacity 0.3s ease;
}
.offcanvas-cart .woocommerce-mini-cart-item a.remove:hover {
    opacity: 0.6;
}
.offcanvas-cart .woocommerce-mini-cart-item img {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
}
.offcanvas-cart .woocommerce-mini-cart-item .quantity {
    color: var(--primary);
    font-weight: 600;
    display: block;
    margin-top: 0.3rem;
}
.offcanvas-cart .woocommerce-mini-cart__total {
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    display: flex;
    justify-content: space-between;
}
.offcanvas-cart .woocommerce-mini-cart__total .woocommerce-Price-amount {
    color: var(--primary);
    font-weight: 700;
    font-size: 1.3rem;
}
.offcanvas-cart .woocommerce-mini-cart__buttons {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding-top: 1rem;
}
.offcanvas-cart .woocommerce-mini-cart__buttons a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-radius: 10px;
    text-decoration: none !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}
.offcanvas-cart .woocommerce-mini-cart__buttons .button:first-child {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
}
.offcanvas-cart .woocommerce-mini-cart__buttons .button:first-child:hover {
    background: rgba(255,255,255,0.15);
}
.offcanvas-cart .woocommerce-mini-cart__buttons .checkout {
    background: var(--primary) !important;
    color: #fff !important;
    border: none;
    box-shadow: 0 5px 20px rgba(177, 136, 94, 0.4);
}
.offcanvas-cart .woocommerce-mini-cart__buttons .checkout:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(177, 136, 94, 0.6);
}
.offcanvas-cart .woocommerce-mini-cart__empty-message {
    text-align: center;
    color: var(--text-secondary);
    padding: 3rem 0;
    font-size: 1rem;
}

/* ==========================================================================
   30. DASHBOARD WIDGETS & STORIES
   ========================================================================== */
.findy-stories-container::-webkit-scrollbar {
    display: none;
}
.story-circle.add-story:hover {
    border-color: var(--primary);
    background: rgba(177, 136, 94, 0.1);
}
.story-circle.active-story {
    transition: transform 0.3s ease;
}
.story-circle.active-story:hover {
    transform: scale(1.08);
}
.glass-widget {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.glass-widget:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.recently-viewed-grid a {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.recently-viewed-grid a:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}
.recently-viewed-grid a:hover img {
    transform: scale(1.1);
}

/* ==========================================================================
   31. FOOTER PREMIUM RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .findy-footer > div:nth-child(4) {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center;
    }
    .findy-footer > div:nth-child(4) > div:first-child {
        text-align: center;
    }
    .findy-footer > div:nth-child(4) > div:first-child > div:last-child {
        justify-content: center;
    }
    .footer-newsletter form {
        flex-direction: column !important;
    }
    }
    .footer-newsletter form button {
        width: 100%;
    }
}

/* ==========================================================================
   32. MOTOR DE HISTORIAS AVANZADO
   ========================================================================== */

/* Animated Story Border */
@keyframes storySpin {
    100% { transform: rotate(360deg); }
}
.story-circle-animated {
    position: relative;
    border-radius: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-base);
    padding: 3px;
    box-sizing: border-box;
}
.story-circle-animated::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--primary), #fff, var(--primary), #fff, var(--primary));
    z-index: -1;
    animation: storySpin 4s linear infinite;
}
.story-circle-animated.highlighted::before {
    background: conic-gradient(from 0deg, #ffd700, #ff8c00, #ffd700, #ff8c00, #ffd700);
}
.story-circle-animated img {
    border-radius: 50%;
    border: 3px solid var(--bg-base); /* Mask inner space */
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 2;
}

/* Progress Bar */
.story-progress-container {
    position: absolute;
    top: 15px; left: 15px; right: 15px;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    overflow: hidden;
    z-index: 10;
}
.story-progress-bar {
    height: 100%;
    background: #fff;
    width: 0%;
    transition: width linear;
}
.story-progress-bar.animate {
    width: 100%;
    transition-duration: 6s; /* Controlled by JS but fallback here */
}

/* Like Heart Animation */
@keyframes heartPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}
.story-action-btn {
    background: none; border: none;
    color: #fff; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    transition: transform 0.2s ease;
}
.story-action-btn:hover {
    transform: scale(1.1);
}
.story-action-btn.liked i {
    color: #ff4444;
    fill: #ff4444;
    animation: heartPulse 0.4s ease;
}
.story-action-btn.highlighted i {
    color: #ffd700;
    fill: #ffd700;
}

/* ==========================================================================
   33. CINEMATIC WOOCOMMERCE PRODUCT PAGE
   ========================================================================== */
.custom-add-to-cart-wrapper form.cart {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.custom-add-to-cart-wrapper .quantity {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
}
.custom-add-to-cart-wrapper .quantity input {
    background: transparent;
    border: none;
    color: #fff;
    text-align: center;
    font-size: 1.2rem;
    padding: 1rem;
    width: 100%;
}
.custom-add-to-cart-wrapper .quantity input:focus {
    outline: none;
}
.custom-add-to-cart-wrapper button.single_add_to_cart_button {
    background: var(--primary);
    color: var(--text-dark);
    border: none;
    padding: 1.2rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;
}
.custom-add-to-cart-wrapper button.single_add_to_cart_button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(177, 136, 94, 0.3);
}
.custom-add-to-cart-wrapper .variations select {
    width: 100%;
    padding: 1rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    border-radius: 8px;
    margin-bottom: 1rem;
}
.custom-add-to-cart-wrapper .reset_variations {
    color: var(--primary);
    font-size: 0.85rem;
    text-decoration: none;
}

/* ==========================================================================
   21. FINDY VAULT — Digital Resource Marketplace
   ========================================================================== */

/* ── HERO ── */
.vault-hero {
    min-height: 100vh;
    background: #080808;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 100px 2rem 4rem;
}

.vault-grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(177,136,94,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(177,136,94,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.vault-glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
}
.vault-orb-1 { width: 600px; height: 600px; background: rgba(177,136,94,0.12); top: -100px; right: -150px; }
.vault-orb-2 { width: 400px; height: 400px; background: rgba(106,27,154,0.1); bottom: -100px; left: -80px; }
.vault-orb-3 { width: 300px; height: 300px; background: rgba(26,115,232,0.08); top: 40%; left: 30%; }

.vault-hero-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
}

.vault-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--primary);
    font-weight: 600;
    background: rgba(177,136,94,0.08);
    border: 1px solid rgba(177,136,94,0.2);
    padding: 0.5rem 1rem;
    border-radius: 100px;
    margin-bottom: 2rem;
}
.vault-badge-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary);
    animation: vaultPulse 2s ease infinite;
}
@keyframes vaultPulse {
    0%,100% { opacity:1; transform:scale(1); }
    50% { opacity:.5; transform:scale(0.8); }
}

.vault-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 6vw, 5rem);
    color: #fff;
    line-height: 1.05;
    margin: 0 0 1.5rem;
    letter-spacing: -0.02em;
}
.vault-title-gradient {
    background: linear-gradient(135deg, #b1885e, #e8a870, #b1885e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200%;
    animation: vaultGradientShift 4s ease infinite;
}
@keyframes vaultGradientShift {
    0%,100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.vault-hero-sub {
    color: rgba(255,255,255,0.65);
    font-size: 1.1rem;
    line-height: 1.7;
    margin: 0 0 2.5rem;
    max-width: 580px;
}

.vault-hero-stats {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}
.vault-stat { display: flex; flex-direction: column; }
.vault-stat-num { font-family: var(--font-heading); font-size: 1.8rem; color: #fff; font-weight: 700; line-height: 1; }
.vault-stat-label { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; margin-top: 0.2rem; }
.vault-stat-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.1); }

.vault-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.vault-btn-primary {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.9rem 1.8rem; border-radius: 12px;
    background: var(--primary); color: #fff;
    font-weight: 700; font-size: 0.95rem; text-decoration: none;
    border: none; cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-body);
}
.vault-btn-primary i { width: 18px; height: 18px; }
.vault-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(177,136,94,0.4); }
.vault-btn-primary.sm { padding: 0.7rem 1.4rem; font-size: 0.88rem; }

.vault-btn-secondary {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.9rem 1.8rem; border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff; font-weight: 600; font-size: 0.95rem; text-decoration: none;
    transition: all 0.3s ease; cursor: pointer;
    font-family: var(--font-body);
}
.vault-btn-secondary i { width: 18px; height: 18px; }
.vault-btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); }

/* ── FLOATING CARDS ── */
.vault-floating-cards {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 3;
}
.vault-float-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: rgba(20,20,20,0.8);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    backdrop-filter: blur(20px);
    width: 260px;
    animation: vaultFloat 6s ease-in-out infinite;
    transition: transform 0.3s;
}
.vault-fc-1 { animation-delay: 0s; }
.vault-fc-2 { animation-delay: 2s; }
.vault-fc-3 { animation-delay: 4s; }
@keyframes vaultFloat {
    0%,100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}
.vault-float-card:hover { transform: scale(1.04); }
.vfc-icon {
    width: 42px; height: 42px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.vfc-icon i { width: 20px; height: 20px; color: #fff; }
.vfc-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.vfc-info span { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; }
.vfc-info strong { font-size: 0.85rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vfc-free, .vfc-premium {
    font-size: 0.65rem; font-weight: 700; padding: 0.25rem 0.5rem; border-radius: 6px;
    white-space: nowrap; flex-shrink: 0;
}
.vfc-free { background: rgba(76,175,80,0.15); color: #81c784; border: 1px solid rgba(76,175,80,0.3); }
.vfc-premium { background: rgba(177,136,94,0.15); color: var(--primary); border: 1px solid rgba(177,136,94,0.3); }

/* ── TIER BANNER ── */
.vault-tier-banner {
    background: rgba(14,14,14,0.98);
    border-top: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    padding: 3rem 2rem;
}
.vault-tier-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; gap: 2rem;
    flex-wrap: wrap;
}
.vault-tier-card {
    flex: 1; min-width: 260px;
    display: flex; align-items: flex-start; gap: 1.5rem;
    padding: 2rem; border-radius: 16px;
}
.vault-tier-free {
    background: rgba(76,175,80,0.06);
    border: 1px solid rgba(76,175,80,0.15);
}
.vault-tier-premium {
    background: rgba(177,136,94,0.06);
    border: 1px solid rgba(177,136,94,0.2);
}
.vault-tier-icon {
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(76,175,80,0.12);
    border: 1px solid rgba(76,175,80,0.2);
}
.vault-tier-icon.premium-icon {
    background: rgba(177,136,94,0.12);
    border-color: rgba(177,136,94,0.3);
}
.vault-tier-icon i { width: 24px; height: 24px; color: #81c784; }
.vault-tier-icon.premium-icon i { color: var(--primary); }
.vault-tier-card h3 { color: #fff; font-family: var(--font-heading); font-size: 1.2rem; margin: 0 0 0.5rem; }
.vault-tier-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; margin: 0; }
.vault-tier-btn {
    display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.2rem;
    padding: 0.65rem 1.2rem; border-radius: 10px;
    font-size: 0.85rem; font-weight: 700; text-decoration: none;
    white-space: nowrap; transition: all 0.3s ease;
    font-family: var(--font-body);
}
.vault-tier-btn i { width: 16px; height: 16px; }
.free-tier-btn { background: rgba(76,175,80,0.15); color: #81c784; border: 1px solid rgba(76,175,80,0.3); }
.free-tier-btn:hover { background: rgba(76,175,80,0.25); }
.premium-tier-btn { background: rgba(177,136,94,0.15); color: var(--primary); border: 1px solid rgba(177,136,94,0.3); }
.premium-tier-btn:hover { background: rgba(177,136,94,0.25); }
.vault-tier-divider {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    font-size: 0.75rem; font-weight: 700; color: var(--text-secondary);
    flex-shrink: 0;
}

/* ── MAIN SECTION ── */
.vault-main-section {
    background: #0a0a0a;
    padding: 4rem 2rem 6rem;
    min-height: 80vh;
}

/* ── SEARCH BAR ── */
.vault-search-section {
    max-width: 1200px; margin: 0 auto 2.5rem;
}
.vault-search-bar-wrap {
    position: relative;
    display: flex; align-items: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 0 1.5rem;
    transition: border-color 0.3s;
    gap: 1rem;
}
.vault-search-bar-wrap:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(177,136,94,0.1);
}
.vault-search-icon { width: 20px; height: 20px; color: var(--text-secondary); flex-shrink: 0; }
.vault-search-input {
    flex: 1; background: none; border: none; outline: none;
    color: #fff; font-size: 1rem; padding: 1rem 0;
    font-family: var(--font-body);
}
.vault-search-input::placeholder { color: var(--text-secondary); }
.vault-result-count {
    font-size: 0.8rem; color: var(--primary); font-weight: 600;
    white-space: nowrap; opacity: 0.8;
}

/* ── CATEGORY TABS ── */
.vault-category-tabs {
    max-width: 1200px; margin: 0 auto 1rem;
    display: flex; gap: 0.5rem; flex-wrap: wrap;
    padding-bottom: 0.25rem;
}
.vault-cat-tab {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1.1rem; border-radius: 100px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-secondary); font-size: 0.85rem;
    cursor: pointer; transition: all 0.25s ease;
    font-family: var(--font-body); white-space: nowrap;
}
.vault-cat-tab i { width: 15px; height: 15px; }
.vault-cat-tab:hover { border-color: rgba(255,255,255,0.2); color: #fff; }
.vault-cat-tab.active {
    background: rgba(177,136,94,0.15);
    border-color: var(--primary);
    color: var(--primary);
}

/* ── ACCESS PILLS ── */
.vault-access-pills {
    max-width: 1200px; margin: 0 auto 2.5rem;
    display: flex; gap: 0.5rem;
}
.vault-access-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 1rem; border-radius: 100px;
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-secondary); transition: all 0.2s ease;
    font-family: var(--font-body);
}
.vault-access-pill i { width: 14px; height: 14px; }
.vault-access-pill.active { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: #fff; }
.vault-access-pill[data-access="free"].active { background: rgba(76,175,80,0.12); border-color: rgba(76,175,80,0.3); color: #81c784; }
.vault-access-pill[data-access="premium"].active { background: rgba(177,136,94,0.12); border-color: rgba(177,136,94,0.3); color: var(--primary); }

/* ── FEATURED CARD ── */
.vault-featured-card {
    max-width: 1200px; margin: 0 auto 3rem;
    background: rgba(177,136,94,0.06);
    border: 1px solid rgba(177,136,94,0.2);
    border-radius: 20px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
}
.vault-featured-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
}
.vault-featured-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 2px;
    color: var(--primary); font-weight: 700;
    background: rgba(177,136,94,0.1); border: 1px solid rgba(177,136,94,0.2);
    padding: 0.35rem 0.8rem; border-radius: 100px; margin-bottom: 1.5rem;
}
.vault-featured-badge i { width: 12px; height: 12px; }
.vault-featured-inner { display: flex; gap: 2.5rem; align-items: flex-start; }
.vault-featured-visual { flex-shrink: 0; position: relative; }
.vault-featured-icon-wrap {
    width: 100px; height: 100px; border-radius: 22px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.vault-featured-icon-wrap i { width: 48px; height: 48px; color: #fff; }
.vault-featured-type-badge {
    position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
    padding: 0.2rem 0.6rem; border-radius: 100px;
    background: rgba(106,27,154,0.9); color: #e1bee7;
    border: 1px solid rgba(156,39,176,0.5); white-space: nowrap;
}
.vault-featured-content { flex: 1; min-width: 0; }
.vault-featured-cat { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: var(--primary); }
.vault-featured-content h2 { font-family: var(--font-heading); font-size: 1.6rem; color: #fff; margin: 0.5rem 0 0.8rem; }
.vault-featured-content p { color: rgba(255,255,255,0.7); font-size: 0.95rem; line-height: 1.7; margin: 0 0 1.2rem; }
.vault-featured-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.vault-featured-meta span { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--text-secondary); }
.vault-featured-meta span i { width: 14px; height: 14px; color: var(--primary); }
.vault-featured-actions { display: flex; align-items: center; gap: 1rem; }
.vault-free-chip {
    font-size: 0.78rem; color: #81c784;
    background: rgba(76,175,80,0.1); border: 1px solid rgba(76,175,80,0.25);
    padding: 0.3rem 0.8rem; border-radius: 100px; font-weight: 600;
}

/* ── RESOURCE GRID ── */
.vault-resources-grid {
    max-width: 1200px; margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* ── RESOURCE CARD ── */
.vault-resource-card {
    background: rgba(20,20,20,0.8);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex; flex-direction: column;
}
.vault-resource-card:hover {
    transform: translateY(-5px);
    border-color: rgba(177,136,94,0.3);
    box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}

/* Mega card (spans 2 cols) */
.vault-mega-card {
    grid-column: span 2;
    position: relative;
    background: linear-gradient(135deg, rgba(177,136,94,0.08), rgba(106,27,154,0.08), rgba(26,115,232,0.08));
    border-color: rgba(177,136,94,0.25);
}
.vault-mega-badge {
    position: absolute; top: 1rem; right: 1rem;
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: var(--primary); background: rgba(177,136,94,0.15);
    border: 1px solid rgba(177,136,94,0.3);
    padding: 0.3rem 0.7rem; border-radius: 100px;
}
.vault-mega-badge i { width: 12px; height: 12px; }

/* Preview area */
.vrc-preview {
    height: 110px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.2rem 1.5rem;
    position: relative;
}
.imagenes-preview  { background: linear-gradient(135deg, rgba(46,125,50,0.15), rgba(27,94,32,0.08)); }
.clips-preview     { background: linear-gradient(135deg, rgba(21,101,192,0.15), rgba(13,71,161,0.08)); }
.agentes-preview   { background: linear-gradient(135deg, rgba(106,27,154,0.15), rgba(74,20,140,0.08)); }
.prompts-preview   { background: linear-gradient(135deg, rgba(0,131,143,0.15), rgba(0,96,100,0.08)); }
.hojas-preview     { background: linear-gradient(135deg, rgba(46,125,50,0.15), rgba(51,105,30,0.08)); }
.docs-preview      { background: linear-gradient(135deg, rgba(198,40,40,0.15), rgba(136,14,79,0.08)); }
.plantillas-preview{ background: linear-gradient(135deg, rgba(245,127,23,0.15), rgba(230,81,0,0.08)); }
.audio-preview     { background: linear-gradient(135deg, rgba(0,121,107,0.15), rgba(0,77,64,0.08)); }
.kits-preview      { background: linear-gradient(135deg, rgba(177,136,94,0.15), rgba(106,27,154,0.08), rgba(26,115,232,0.08)); }

.vrc-preview-icon {
    width: 56px; height: 56px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.vrc-preview-icon i { width: 26px; height: 26px; color: #fff; }
.vrc-format-tag {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: rgba(255,255,255,0.5); background: rgba(0,0,0,0.3);
    padding: 0.25rem 0.7rem; border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.08);
}
.vrc-duration-tag {
    position: absolute; bottom: 0.8rem; left: 1.5rem;
    font-size: 0.65rem; color: var(--primary); font-weight: 700;
}

/* Body */
.vrc-body { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.vrc-meta { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
.vrc-cat-badge {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    padding: 0.25rem 0.6rem; border-radius: 6px;
}
.vrc-cat-badge.imagenes   { background: rgba(46,125,50,0.15); color: #81c784; }
.vrc-cat-badge.clips      { background: rgba(21,101,192,0.15); color: #64b5f6; }
.vrc-cat-badge.agentes    { background: rgba(106,27,154,0.15); color: #ce93d8; }
.vrc-cat-badge.prompts    { background: rgba(0,131,143,0.15); color: #80cbc4; }
.vrc-cat-badge.hojas      { background: rgba(46,125,50,0.15); color: #a5d6a7; }
.vrc-cat-badge.docs       { background: rgba(198,40,40,0.15); color: #ef9a9a; }
.vrc-cat-badge.plantillas { background: rgba(245,127,23,0.15); color: #ffcc80; }
.vrc-cat-badge.audio      { background: rgba(0,121,107,0.15); color: #80cbc4; }
.vrc-cat-badge.kits       { background: rgba(177,136,94,0.15); color: var(--primary); }

.vrc-access {
    font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    padding: 0.25rem 0.6rem; border-radius: 6px; margin-left: auto;
}
.vrc-access.free    { background: rgba(76,175,80,0.12); color: #81c784; border: 1px solid rgba(76,175,80,0.25); }
.vrc-access.premium { background: rgba(177,136,94,0.12); color: var(--primary); border: 1px solid rgba(177,136,94,0.25); }

.vrc-body h3 { font-family: var(--font-heading); font-size: 1.05rem; color: #fff; margin: 0 0 0.5rem; line-height: 1.3; }
.vrc-body p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 0.8rem; flex: 1; }

.vrc-stats {
    display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.vrc-stats span {
    display: flex; align-items: center; gap: 0.3rem;
    font-size: 0.75rem; color: var(--text-secondary);
}
.vrc-stats span i { width: 12px; height: 12px; color: var(--primary); }

.vrc-actions { display: flex; gap: 0.6rem; align-items: center; }
.vrc-btn-free, .vrc-btn-premium {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.6rem 1.1rem; border-radius: 10px;
    font-size: 0.82rem; font-weight: 700; text-decoration: none;
    transition: all 0.25s ease; flex: 1; justify-content: center;
    font-family: var(--font-body);
}
.vrc-btn-free.lg, .vrc-btn-premium.lg { padding: 0.8rem 1.5rem; font-size: 0.9rem; }
.vrc-btn-free i, .vrc-btn-premium i { width: 15px; height: 15px; }
.vrc-btn-free {
    background: rgba(76,175,80,0.1); color: #81c784;
    border: 1px solid rgba(76,175,80,0.25);
}
.vrc-btn-free:hover { background: rgba(76,175,80,0.2); border-color: rgba(76,175,80,0.4); }
.vrc-btn-premium {
    background: rgba(177,136,94,0.12); color: var(--primary);
    border: 1px solid rgba(177,136,94,0.3);
}
.vrc-btn-premium:hover { background: rgba(177,136,94,0.22); border-color: rgba(177,136,94,0.5); }

.vrc-preview-btn {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease;
    display: flex; align-items: center; justify-content: center;
}
.vrc-preview-btn i { width: 16px; height: 16px; }
.vrc-preview-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* ── EMPTY STATE ── */
.vault-empty-state {
    max-width: 1200px; margin: 0 auto;
    flex-direction: column; align-items: center; justify-content: center;
    padding: 5rem 2rem; text-align: center;
    color: var(--text-secondary); gap: 1rem;
}
.vault-empty-state i { width: 64px; height: 64px; opacity: 0.3; }
.vault-empty-state h3 { color: #fff; font-family: var(--font-heading); font-size: 1.5rem; }

/* ── LOAD MORE ── */
.vault-load-more-wrap { max-width: 1200px; margin: 3rem auto 0; text-align: center; }
.vault-load-more-btn {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.9rem 2rem; border-radius: 12px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary); font-size: 0.9rem; font-weight: 600; cursor: pointer;
    transition: all 0.3s ease; font-family: var(--font-body);
}
.vault-load-more-btn i { width: 18px; height: 18px; }
.vault-load-more-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* ── REGISTER CTA ── */
.vault-register-cta {
    background: linear-gradient(135deg, rgba(10,10,10,0.98), rgba(20,15,10,0.98));
    border-top: 1px solid rgba(177,136,94,0.15);
    padding: 5rem 2rem;
    position: relative; overflow: hidden; text-align: center;
}
.vault-register-glow {
    position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
    width: 600px; height: 300px;
    background: radial-gradient(ellipse, rgba(177,136,94,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.vault-register-content {
    position: relative; z-index: 2;
    max-width: 900px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
}
.vault-register-icon {
    width: 70px; height: 70px; border-radius: 20px;
    background: rgba(177,136,94,0.1); border: 1px solid rgba(177,136,94,0.3);
    display: flex; align-items: center; justify-content: center;
}
.vault-register-icon i { width: 32px; height: 32px; color: var(--primary); }
.vault-register-content h2 {
    font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); color: #fff; margin: 0;
}
.vault-register-content h2 span { color: var(--primary); }
.vault-register-content p { color: var(--text-secondary); font-size: 1rem; line-height: 1.7; margin: 0; max-width: 600px; }
.vault-register-btn {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 1rem 2rem; border-radius: 12px;
    background: var(--primary); color: #fff;
    font-weight: 700; font-size: 1rem; text-decoration: none;
    transition: all 0.3s ease;
}
.vault-register-btn i { width: 20px; height: 20px; }
.vault-register-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(177,136,94,0.4); }
.vault-register-social-proof {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 0.8rem; justify-content: center;
    margin-top: 1rem;
}
.vault-proof-avatars { display: flex; }
.vpa {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), rgba(177,136,94,0.6));
    border: 2px solid #0a0a0a; margin-left: -8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700; color: #fff;
    font-family: var(--font-heading);
}
.vpa:first-child { margin-left: 0; }
.vault-register-social-proof span { font-size: 0.85rem; color: var(--text-secondary); }

/* ── PREVIEW MODAL ── */
.vault-modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.75); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    padding: 2rem; opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}
.vault-modal-overlay.is-open { opacity: 1; pointer-events: all; }
.vault-modal-box {
    background: #141414;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    max-width: 540px; width: 100%;
    padding: 0; position: relative;
    transform: translateY(30px);
    transition: transform 0.3s ease;
    overflow: hidden;
}
.vault-modal-overlay.is-open .vault-modal-box { transform: translateY(0); }
.vault-modal-close {
    position: absolute; top: 1rem; right: 1rem; z-index: 10;
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.vault-modal-close:hover { background: rgba(255,255,255,0.15); color: #fff; }
.vault-modal-close i { width: 16px; height: 16px; }
.vault-modal-body { padding: 2rem 2rem 2rem; }
.vault-modal-preview-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.vault-modal-title { font-family: var(--font-heading); font-size: 1.4rem; color: #fff; margin: 0 0 0.8rem; }
.vault-modal-desc { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.7; margin: 0 0 1rem; }
.vault-modal-stats { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 1.5rem; }
.vault-modal-actions { margin-bottom: 1rem; }
.vault-modal-actions .vrc-btn-free,
.vault-modal-actions .vrc-btn-premium { width: 100%; justify-content: center; padding: 0.9rem; font-size: 0.95rem; }
.vault-modal-note { font-size: 0.8rem; color: var(--text-secondary); margin: 0; text-align: center; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
    .vault-floating-cards { display: none; }
    .vault-hero-content { max-width: 100%; }
    .vault-mega-card { grid-column: span 1; }
}

@media (max-width: 768px) {
    .vault-hero { padding: 100px 1rem 3rem; text-align: center; }
    .vault-hero-stats { justify-content: center; }
    .vault-hero-actions { justify-content: center; }
    .vault-hero-badge { font-size: 0.65rem; }
    .vault-tier-inner { flex-direction: column; gap: 1rem; }
    .vault-tier-divider { display: none; }
    .vault-tier-card { min-width: unset; flex-direction: column; }
    .vault-featured-inner { flex-direction: column; gap: 1.5rem; }
    .vault-category-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 0.5rem; }
    .vault-category-tabs::-webkit-scrollbar { display: none; }
    .vault-cat-tab { flex-shrink: 0; }
    .vault-resources-grid { grid-template-columns: 1fr; }
    .vault-mega-card { grid-column: span 1; }
    .vault-main-section { padding: 3rem 1rem 5rem; }
    .vault-register-content { gap: 1.2rem; }
}

@media (max-width: 480px) {
    .vault-hero-title { font-size: clamp(2rem, 9vw, 2.8rem); }
    .vault-featured-card { padding: 1.5rem; }
    .vault-featured-content h2 { font-size: 1.3rem; }
    .vault-modal-box { margin: 0 1rem; }
}

/* ==========================================================================
   22. FINDY LIVE — Premium Events Hub
   ========================================================================== */

/* ── HERO ── */
.flive-hero {
    min-height: 90vh;
    background: #080808;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 120px 2rem 4rem;
}

.flive-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(10px) brightness(0.6);
    transform: scale(1.1); /* Hide blur edges */
    z-index: 0;
}

.flive-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(8,8,8,0.9) 0%, rgba(8,8,8,0.7) 50%, rgba(8,8,8,0.4) 100%),
                linear-gradient(to bottom, transparent 60%, #080808 100%);
    z-index: 1;
}

.flive-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 2;
}
.flive-glow-1 { width: 500px; height: 500px; background: rgba(177,136,94,0.15); top: 10%; left: -10%; }
.flive-glow-2 { width: 400px; height: 400px; background: rgba(0,255,204,0.08); bottom: 20%; right: 10%; }

.flive-hero-content {
    position: relative;
    z-index: 10;
    max-width: 800px;
}

.flive-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #fff;
    font-weight: 700;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 0.5rem 1.2rem;
    border-radius: 100px;
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
}
.flive-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ff3366;
    box-shadow: 0 0 10px #ff3366, 0 0 20px #ff3366;
    animation: flivePulse 1.5s ease-out infinite;
}
@keyframes flivePulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

.flive-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 7vw, 6rem);
    color: #fff;
    line-height: 1.05;
    margin: 0 0 1.5rem;
    letter-spacing: -0.02em;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.flive-text-gradient {
    background: linear-gradient(135deg, #fff 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.flive-hero-sub {
    color: rgba(255,255,255,0.7);
    font-size: 1.2rem;
    line-height: 1.6;
    margin: 0 0 2.5rem;
    max-width: 600px;
}

.flive-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.flive-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 0.9rem 2rem; border-radius: 12px;
    background: var(--primary); color: #fff;
    font-weight: 700; font-size: 0.95rem; text-decoration: none;
    border: none; cursor: pointer; transition: all 0.3s ease;
    font-family: var(--font-body);
}
.flive-btn-primary.lg { padding: 1.1rem 2.5rem; font-size: 1.05rem; }
.flive-btn-primary i { width: 18px; height: 18px; }
.flive-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(177,136,94,0.4); }

.flive-btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 0.9rem 2rem; border-radius: 12px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15);
    color: #fff; font-weight: 600; font-size: 0.95rem; text-decoration: none;
    transition: all 0.3s ease; cursor: pointer; font-family: var(--font-body);
    backdrop-filter: blur(10px);
}
.flive-btn-secondary i { width: 18px; height: 18px; color: var(--primary); }
.flive-btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); }

/* ── MAIN WRAPPER ── */
.flive-main-wrapper {
    background: #080808;
    padding-bottom: 6rem;
}

/* ── SECTION HEADERS ── */
.flive-section-header {
    max-width: 1300px; margin: 0 auto 3rem;
    padding: 0 2rem;
}
.flive-section-header.centered { text-align: center; }
.flive-section-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 2.8rem);
    color: #fff; margin: 0;
}
.flive-section-title span { color: var(--primary); }
.flive-section-header p {
    color: var(--text-secondary);
    font-size: 1.1rem; margin: 0.5rem 0 0;
}

/* ── FEATURED EVENT (MAIN STAGE) ── */
.flive-featured-section { padding: 4rem 0 6rem; }
.flive-featured-ticket {
    max-width: 1200px; margin: 0 auto;
    background: #111;
    border: 1px solid rgba(177,136,94,0.3);
    border-radius: 24px;
    display: flex;
    overflow: hidden;
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.flive-featured-ticket::after {
    content: '';
    position: absolute; right: 35%; top: 0; bottom: 0; width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.1), transparent);
    border-left: 2px dashed rgba(255,255,255,0.1);
}

.flive-ft-visual {
    width: 65%; position: relative;
}
.flive-ft-img {
    width: 100%; height: 100%; object-fit: cover;
    filter: brightness(0.85); transition: transform 0.7s ease;
}
.flive-featured-ticket:hover .flive-ft-img { transform: scale(1.05); filter: brightness(1); }

.flive-ft-date {
    position: absolute; top: 2rem; left: 2rem;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px; padding: 1rem 1.2rem;
    display: flex; flex-direction: column; align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.flive-ft-date .month { color: var(--primary); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; }
.flive-ft-date .day { color: #fff; font-family: var(--font-heading); font-size: 2.5rem; line-height: 1; margin-top: 0.2rem; }

.flive-ft-body {
    width: 35%; padding: 3rem;
    display: flex; flex-direction: column; justify-content: center;
    background: linear-gradient(135deg, #161616, #0a0a0a);
    position: relative; z-index: 2;
}
.flive-ft-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.flive-badge {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
    padding: 0.3rem 0.8rem; border-radius: 6px; background: rgba(177,136,94,0.15); color: var(--primary);
}
.flive-status.blinking {
    font-size: 0.75rem; font-weight: 600; color: #ff3366;
    animation: textPulse 2s infinite;
}
@keyframes textPulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} }

.flive-ft-title { font-family: var(--font-heading); font-size: 2.2rem; color: #fff; line-height: 1.1; margin: 0 0 1rem; }
.flive-ft-desc { color: rgba(255,255,255,0.6); font-size: 0.95rem; line-height: 1.6; margin: 0 0 2rem; }

.flive-ft-meta { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 2.5rem; }
.flive-ft-meta .meta-item { display: flex; align-items: center; gap: 0.8rem; color: var(--text-secondary); font-size: 0.9rem; }
.flive-ft-meta .meta-item i { width: 16px; height: 16px; color: var(--primary); }

.flive-ft-footer { margin-top: auto; }
.flive-ft-price { font-family: var(--font-heading); font-size: 2rem; color: #fff; margin-bottom: 1rem; }
.flive-ft-price .currency { font-size: 1rem; color: var(--text-secondary); font-family: var(--font-body); }
.flive-ft-footer .flive-btn-primary { width: 100%; }

/* ── FILTERS BAR ── */
.flive-filters-bar {
    max-width: 1300px; margin: 0 auto 3rem; padding: 0 2rem;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem;
}
.flive-cat-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.flive-tab {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 1.2rem; border-radius: 100px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-secondary); font-size: 0.9rem; font-weight: 500;
    cursor: pointer; transition: all 0.3s ease; font-family: var(--font-body);
}
.flive-tab i { width: 16px; height: 16px; }
.flive-tab:hover { background: rgba(255,255,255,0.08); color: #fff; }
.flive-tab.active { background: rgba(177,136,94,0.15); border-color: var(--primary); color: var(--primary); }

.flive-time-pills { display: flex; background: rgba(255,255,255,0.03); border-radius: 10px; padding: 0.3rem; }
.flive-pill {
    padding: 0.5rem 1rem; border: none; background: transparent;
    color: var(--text-secondary); font-size: 0.85rem; font-weight: 600;
    border-radius: 8px; cursor: pointer; transition: all 0.3s ease; font-family: var(--font-body);
}
.flive-pill:hover { color: #fff; }
.flive-pill.active { background: rgba(255,255,255,0.1); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }

/* ── EVENTS GRID ── */
.flive-grid {
    max-width: 1300px; margin: 0 auto; padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2rem;
}

/* ── EVENT CARD (TICKET) ── */
.flive-card {
    background: #111;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform 0.4s ease, opacity 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    position: relative;
}
.flive-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    opacity: 0; transition: opacity 0.3s; z-index: 10;
}
.flive-card:hover {
    border-color: rgba(177,136,94,0.3);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    z-index: 5;
}
.flive-card:hover::before { opacity: 1; background: linear-gradient(90deg, transparent, var(--primary), transparent); }

.flive-card-visual { position: relative; height: 220px; overflow: hidden; }
.flive-card-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; filter: brightness(0.8); }
.flive-card:hover .flive-card-visual img { transform: scale(1.05); filter: brightness(1); }

.flive-card-date {
    position: absolute; top: 1rem; right: 1rem;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px; padding: 0.6rem 0.8rem;
    display: flex; flex-direction: column; align-items: center;
}
.flive-card-date .month { color: var(--primary); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.flive-card-date .day { color: #fff; font-family: var(--font-heading); font-size: 1.6rem; line-height: 1; margin-top: 0.1rem; }

.flive-card-badge {
    position: absolute; bottom: 1rem; left: 1.5rem;
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
    padding: 0.3rem 0.8rem; border-radius: 6px;
    backdrop-filter: blur(8px);
}
.flive-card-badge.cultura  { background: rgba(139,195,74,0.2); color: #aed581; border: 1px solid rgba(139,195,74,0.4); }
.flive-card-badge.negocios { background: rgba(177,136,94,0.2); color: var(--primary); border: 1px solid rgba(177,136,94,0.4); }
.flive-card-badge.noche    { background: rgba(106,27,154,0.2); color: #ce93d8; border: 1px solid rgba(106,27,154,0.4); }
.flive-card-badge.deportes { background: rgba(25,118,210,0.2); color: #90caf9; border: 1px solid rgba(25,118,210,0.4); }

.flive-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.flive-card-title { font-family: var(--font-heading); font-size: 1.4rem; color: #fff; margin: 0 0 0.8rem; line-height: 1.2; }
.flive-card-desc { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; margin: 0 0 1.5rem; flex: 1; }
.flive-card-meta { display: flex; flex-direction: column; gap: 0.6rem; }
.flive-card-meta span { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: #ccc; }
.flive-card-meta span i { width: 14px; height: 14px; color: var(--text-secondary); }
.flive-card-meta span.free-text i { color: #81c784; }

.flive-card-footer {
    padding: 1.5rem; border-top: 1px dashed rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.2);
}
.flive-card-link {
    display: flex; align-items: center; justify-content: space-between;
    color: var(--primary); font-size: 0.95rem; font-weight: 600; text-decoration: none;
    transition: all 0.2s ease;
}
.flive-card-link i { width: 16px; height: 16px; transition: transform 0.2s; }
.flive-card-link:hover { color: #fff; }
.flive-card-link:hover i { transform: translateX(5px); }
.flive-card-link.text-muted { color: var(--text-secondary); pointer-events: none; }
.flive-card-link.text-muted i { color: #81c784; }

/* ── EMPTY STATE ── */
.flive-empty {
    flex-direction: column; align-items: center; justify-content: center;
    padding: 6rem 2rem; text-align: center; color: var(--text-secondary);
}
.flive-empty i { width: 64px; height: 64px; opacity: 0.3; margin-bottom: 1rem; }
.flive-empty h3 { color: #fff; font-family: var(--font-heading); font-size: 1.5rem; margin: 0 0 0.5rem; }

/* ── CTA SECTION ── */
.flive-cta-section { padding: 4rem 2rem; }
.flive-cta-box {
    max-width: 900px; margin: 0 auto;
    background: linear-gradient(135deg, rgba(177,136,94,0.1), rgba(0,0,0,0.5));
    border: 1px solid rgba(177,136,94,0.2);
    border-radius: 24px; padding: 4rem 3rem;
    display: flex; align-items: center; gap: 3rem;
}
.flive-cta-icon {
    width: 80px; height: 80px; border-radius: 24px; flex-shrink: 0;
    background: rgba(177,136,94,0.15); border: 1px solid rgba(177,136,94,0.3);
    display: flex; align-items: center; justify-content: center;
}
.flive-cta-icon i { width: 36px; height: 36px; color: var(--primary); }
.flive-cta-text { flex: 1; }
.flive-cta-text h2 { font-family: var(--font-heading); font-size: 2.2rem; color: #fff; margin: 0 0 0.8rem; line-height: 1.1; }
.flive-cta-text p { color: var(--text-secondary); font-size: 1rem; line-height: 1.6; margin: 0; }
.flive-cta-form { display: flex; flex-direction: column; gap: 1rem; width: 300px; flex-shrink: 0; }
.flive-input {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: #fff; padding: 1rem 1.2rem; border-radius: 12px; font-size: 0.95rem; font-family: var(--font-body);
    outline: none; transition: border-color 0.3s;
}
.flive-input:focus { border-color: var(--primary); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
    .flive-featured-ticket { flex-direction: column; }
    .flive-featured-ticket::after { display: none; }
    .flive-ft-visual { width: 100%; height: 300px; }
    .flive-ft-body { width: 100%; padding: 2.5rem; }
    .flive-cta-box { flex-direction: column; text-align: center; gap: 2rem; padding: 3rem 2rem; }
    .flive-cta-form { width: 100%; max-width: 400px; }
}

@media (max-width: 768px) {
    .flive-hero { padding: 100px 1.5rem 3rem; text-align: center; min-height: auto; }
    .flive-hero-actions { justify-content: center; }
    .flive-hero-title { font-size: clamp(2.5rem, 8vw, 3.5rem); }
    .flive-filters-bar { flex-direction: column; align-items: stretch; }
    .flive-cat-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 0.5rem; }
    .flive-cat-tabs::-webkit-scrollbar { display: none; }
    .flive-tab { flex-shrink: 0; }
    .flive-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   23. FINDY SHOWCASE — Elite Portfolio
   ========================================================================== */

/* ── HERO ── */
.fshowcase-page-wrapper {
    background: #050505;
    min-height: 100vh;
}

.fshowcase-hero {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 120px 2rem 4rem;
}

.fshowcase-hero-bg {
    position: absolute; inset: 0; z-index: 0;
}
.fshowcase-grid-pattern {
    position: absolute; inset: 0;
    background-image: 
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center center;
    mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
}

.fshowcase-glow {
    position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; opacity: 0.5;
}
.fsg-1 { width: 600px; height: 600px; background: rgba(177,136,94,0.15); top: -20%; left: -10%; }
.fsg-2 { width: 500px; height: 500px; background: rgba(0,255,204,0.05); bottom: -10%; right: -10%; }

.fshowcase-hero-content {
    position: relative; z-index: 10;
    max-width: 900px; text-align: center;
    display: flex; flex-direction: column; align-items: center;
}

.fshowcase-subtitle {
    display: inline-flex; align-items: center; gap: 0.8rem;
    font-size: 0.85rem; text-transform: uppercase; letter-spacing: 4px;
    color: var(--primary); font-weight: 600; margin-bottom: 2rem;
}
.pulse-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
    box-shadow: 0 0 10px var(--primary); animation: fshowcasePulse 2s infinite;
}
@keyframes fshowcasePulse { 0%{opacity:1;transform:scale(1);} 50%{opacity:0.4;transform:scale(1.5);} 100%{opacity:1;transform:scale(1);} }

.fshowcase-title {
    font-family: var(--font-heading);
    font-size: clamp(3.5rem, 8vw, 6.5rem);
    color: #fff; line-height: 1.05; margin: 0 0 2rem;
    letter-spacing: -0.02em;
}
.fshowcase-gradient-text {
    background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.4) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.fshowcase-desc {
    color: var(--text-secondary); font-size: 1.25rem; line-height: 1.6;
    max-width: 700px; margin: 0 0 4rem;
}

.fshowcase-stats-row {
    display: flex; align-items: center; justify-content: center; gap: 3rem;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);
    padding: 2rem 3rem; border-radius: 20px; backdrop-filter: blur(10px);
}
.fshowcase-stat { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.fshowcase-stat h2 { font-family: var(--font-heading); font-size: 2.5rem; color: #fff; margin: 0; line-height: 1; }
.fshowcase-stat span { color: var(--text-secondary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.fshowcase-stat.divider { width: 1px; height: 50px; background: rgba(255,255,255,0.1); }

/* ── FILTERS ── */
.fshowcase-portfolio-section { position: relative; z-index: 20; padding-bottom: 6rem; }
.fshowcase-filter-wrap {
    position: sticky; top: 80px; z-index: 50;
    display: flex; justify-content: center; padding: 1rem 0; margin-bottom: 3rem;
    pointer-events: none;
}
.fshowcase-filters {
    display: flex; gap: 0.5rem; padding: 0.5rem;
    background: rgba(10,10,10,0.8); backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 100px;
    pointer-events: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.fs-filter {
    padding: 0.8rem 1.5rem; border: none; background: transparent;
    color: var(--text-secondary); font-size: 0.9rem; font-weight: 600;
    border-radius: 100px; cursor: pointer; transition: all 0.3s ease; font-family: var(--font-body);
}
.fs-filter:hover { color: #fff; }
.fs-filter.active { background: #fff; color: #000; box-shadow: 0 4px 15px rgba(255,255,255,0.2); }

/* ── GRID WRAPPER ── */
.fshowcase-grid-wrapper { max-width: 1400px; margin: 0 auto; padding: 0 2rem; }
.fshowcase-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 350px;
    gap: 1.5rem;
}

/* ── GRID ITEMS ── */
.fshowcase-item {
    position: relative; border-radius: 24px; overflow: hidden;
    display: block; text-decoration: none;
    background: #111; border: 1px solid rgba(255,255,255,0.05);
    transition: transform 0.4s ease, opacity 0.4s ease, border-color 0.4s ease;
}
.fshowcase-item.large { grid-column: span 2; grid-row: span 2; }
.fshowcase-item.tall { grid-column: span 1; grid-row: span 2; }
.fshowcase-item.wide { grid-column: span 2; grid-row: span 1; }
.fshowcase-item.square { grid-column: span 1; grid-row: span 1; }

.fs-img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.6); transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.5s ease; }
.fshowcase-item:hover .fs-img { transform: scale(1.05); filter: brightness(0.85); }
.fshowcase-item:hover { border-color: rgba(177,136,94,0.4); transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.5); z-index: 10; }

.fs-overlay {
    position: absolute; inset: 0; padding: 2.5rem;
    display: flex; flex-direction: column; justify-content: space-between;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
    pointer-events: none;
}
.fshowcase-item.square .fs-overlay { padding: 1.5rem; }

.fs-cat-badge {
    display: inline-block; padding: 0.4rem 1rem; border-radius: 100px;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
}

.fs-content-bottom { transform: translateY(10px); transition: transform 0.4s ease; }
.fshowcase-item:hover .fs-content-bottom { transform: translateY(0); }

.fs-title { font-family: var(--font-heading); font-size: 2rem; color: #fff; margin: 0 0 0.5rem; line-height: 1.1; }
.fshowcase-item.square .fs-title { font-size: 1.5rem; }
.fshowcase-item.tall .fs-title { font-size: 1.8rem; }

.fs-desc { color: rgba(255,255,255,0.7); font-size: 1rem; line-height: 1.5; margin: 0 0 1.5rem; max-width: 90%; }
.fshowcase-item.square .fs-desc { display: none; }
.fshowcase-item.tall .fs-desc { display: none; }

.fs-metrics { display: flex; gap: 1rem; flex-wrap: wrap; }
.fs-metrics.col { flex-direction: column; gap: 0.5rem; }
.fs-metrics span {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; color: var(--primary); font-weight: 600;
}
.fs-metrics span i { width: 14px; height: 14px; }
.fshowcase-item.square .fs-metrics span { font-size: 0.75rem; }

.fs-hover-arrow {
    position: absolute; top: 2rem; right: 2rem;
    width: 48px; height: 48px; border-radius: 50%;
    background: #fff; color: #000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(0.8) translate(-10px, 10px);
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fshowcase-item.square .fs-hover-arrow { top: 1.5rem; right: 1.5rem; width: 40px; height: 40px; }
.fshowcase-item:hover .fs-hover-arrow { opacity: 1; transform: scale(1) translate(0, 0); }
.fs-hover-arrow i { width: 20px; height: 20px; transition: transform 0.3s; }
.fshowcase-item:hover .fs-hover-arrow i { transform: translate(2px, -2px); }

/* ── CTA SECTION ── */
.fshowcase-cta-section { padding: 4rem 2rem 8rem; }
.fshowcase-cta-inner {
    max-width: 1000px; margin: 0 auto; text-align: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 32px; padding: 6rem 2rem;
    position: relative; overflow: hidden;
}
.fshowcase-cta-inner::before {
    content: ''; position: absolute; top: -50%; left: 50%; transform: translateX(-50%);
    width: 600px; height: 600px; background: radial-gradient(circle, rgba(177,136,94,0.1) 0%, transparent 70%); pointer-events: none;
}
.fshowcase-cta-title { font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, 4rem); color: #fff; margin: 0 0 1rem; line-height: 1.1; }
.fshowcase-cta-title span { color: var(--primary); }
.fshowcase-cta-desc { color: var(--text-secondary); font-size: 1.2rem; max-width: 600px; margin: 0 auto 3rem; line-height: 1.6; }

.fshowcase-cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.fs-btn-primary, .fs-btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 1.1rem 2.5rem; border-radius: 100px; font-weight: 700; font-size: 1.05rem;
    text-decoration: none; transition: all 0.3s ease; font-family: var(--font-body);
}
.fs-btn-primary { background: #fff; color: #000; }
.fs-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(255,255,255,0.2); }
.fs-btn-secondary { background: rgba(255,255,255,0.05); color: #fff; border: 1px solid rgba(255,255,255,0.1); }
.fs-btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.fs-btn-primary i, .fs-btn-secondary i { width: 18px; height: 18px; }

/* ── RESPONSIVE ── */
@media (max-width: 1200px) {
    .fshowcase-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; }
    .fshowcase-item.large { grid-column: span 2; grid-row: span 2; }
    .fshowcase-item.tall { grid-column: span 1; grid-row: span 2; }
    .fshowcase-item.wide { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 992px) {
    .fshowcase-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 280px; }
    .fshowcase-item.large, .fshowcase-item.wide { grid-column: span 2; }
    .fshowcase-item.tall, .fshowcase-item.square { grid-column: span 1; }
    .fshowcase-stats-row { flex-direction: column; gap: 1.5rem; }
    .fshowcase-stat.divider { width: 100px; height: 1px; }
}
@media (max-width: 600px) {
    .fshowcase-hero { padding: 100px 1.5rem 2rem; }
    .fshowcase-filters { overflow-x: auto; width: 100%; border-radius: 12px; padding: 0.5rem; }
    .fs-filter { flex-shrink: 0; white-space: nowrap; padding: 0.6rem 1.2rem; }
    .fshowcase-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .fshowcase-item { grid-column: span 1 !important; grid-row: span 1 !important; height: 400px; }
    .fshowcase-item.square { height: 300px; }
    .fs-overlay { padding: 1.5rem; }
}

/* ==========================================================================
   24. FINDY NEXUS — Elite Intelligence Agora
   ========================================================================== */

.fnexus-wrapper {
    background: #030305;
    min-height: 100vh;
    color: #e2e8f0;
    font-family: var(--font-body);
}

/* ── HERO HEADER ── */
.fnexus-hero {
    position: relative;
    padding: 120px 2rem 4rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: radial-gradient(circle at 50% 0%, rgba(177,136,94,0.1) 0%, transparent 70%);
}
.fnexus-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 30px 30px; mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}
.fnexus-hero-inner {
    max-width: 1400px; margin: 0 auto; position: relative; z-index: 10;
    display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 3rem;
}
.fnexus-hero-left { max-width: 700px; }
.fnexus-live-tag {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 2px; color: #10b981;
    background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2);
    padding: 0.4rem 1rem; border-radius: 100px; margin-bottom: 1.5rem;
}
.fnexus-pulse { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 10px #10b981; animation: fnPulse 1.5s infinite; }
@keyframes fnPulse { 0%{opacity:1;} 50%{opacity:0.3;} 100%{opacity:1;} }

.fnexus-hero-title { font-family: var(--font-heading); font-size: clamp(3rem, 6vw, 4.5rem); color: #fff; margin: 0 0 1rem; line-height: 1; letter-spacing: -0.02em; }
.fnexus-hero-title span { color: var(--primary); }
.fnexus-hero-desc { color: #94a3b8; font-size: 1.15rem; line-height: 1.6; margin: 0; }

.fnexus-hero-right { display: flex; gap: 1.5rem; }
.fnexus-stat-box { display: flex; flex-direction: column; padding: 1rem 1.5rem; background: rgba(255,255,255,0.02); border-left: 2px solid rgba(255,255,255,0.1); }
.fnexus-stat-box.highlight { border-left-color: var(--primary); background: rgba(177,136,94,0.05); }
.fnexus-stat-box .fs-val { font-family: var(--font-heading); font-size: 2rem; color: #fff; line-height: 1; }
.fnexus-stat-box .fs-lbl { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: #64748b; margin-top: 0.4rem; font-weight: 600; }

/* ── DASHBOARD LAYOUT ── */
.fnexus-dashboard {
    max-width: 1400px; margin: 0 auto; padding: 3rem 2rem;
    display: grid; grid-template-columns: 260px 1fr 300px; gap: 3rem;
}

/* ── SIDEBARS ── */
.fnexus-sidebar { position: sticky; top: 100px; height: fit-content; }
.fnexus-nav-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: #64748b; margin: 0 0 1rem 0.5rem; font-weight: 700; }
.fnexus-nav-btn {
    display: flex; align-items: center; gap: 0.8rem; width: 100%; text-align: left;
    background: transparent; border: none; color: #cbd5e1; font-size: 0.95rem; font-weight: 500;
    padding: 0.7rem 1rem; border-radius: 12px; cursor: pointer; transition: all 0.2s;
    font-family: var(--font-body); margin-bottom: 0.2rem;
}
.fnexus-nav-btn i { width: 18px; height: 18px; color: #64748b; transition: color 0.2s; }
.fnexus-nav-btn:hover { background: rgba(255,255,255,0.03); color: #fff; }
.fnexus-nav-btn.active { background: rgba(177,136,94,0.1); color: var(--primary); font-weight: 600; }
.fnexus-nav-btn.active i { color: var(--primary); }

.fn-icon-badge {
    width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
}
.fn-icon-badge i { width: 14px; height: 14px; color: inherit; }
.mt-xl { margin-top: 3rem; }

.fnexus-sidebar-footer { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.05); font-size: 0.8rem; color: #64748b; }
.fnexus-sidebar-footer a { color: var(--primary); text-decoration: none; }

/* ── COMPOSER TRIGGER ── */
.fnexus-composer-trigger {
    display: flex; align-items: center; justify-content: center; gap: 0.8rem;
    background: var(--primary); color: #000; font-weight: 700; font-size: 1rem;
    padding: 1rem; border-radius: 14px; cursor: pointer; transition: all 0.3s;
    margin-bottom: 3rem; box-shadow: 0 10px 25px rgba(177,136,94,0.3);
}
.fnexus-composer-trigger:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(177,136,94,0.4); }
.fnexus-composer-trigger i { width: 20px; height: 20px; }

/* ── CENTER FEED ── */
.fnexus-feed { display: flex; flex-direction: column; gap: 1.5rem; }

/* ── NEXUS CARDS (DEBATES) ── */
.fnexus-card {
    background: #0b0c10; border: 1px solid rgba(255,255,255,0.05); border-radius: 16px;
    display: flex; overflow: hidden; transition: all 0.3s ease; position: relative;
}
.fnexus-card:hover { border-color: rgba(177,136,94,0.3); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.fnexus-card-glow { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); opacity: 0; transition: 0.3s; }
.fnexus-card:hover .fnexus-card-glow { opacity: 1; }

.fn-card-vote {
    width: 60px; background: rgba(0,0,0,0.2); border-right: 1px solid rgba(255,255,255,0.02);
    display: flex; flex-direction: column; align-items: center; padding: 1.5rem 0; gap: 0.5rem;
}
.fn-card-vote button {
    background: transparent; border: none; color: #64748b; cursor: pointer; padding: 0.5rem; border-radius: 8px; transition: all 0.2s;
}
.fn-card-vote button:hover { background: rgba(255,255,255,0.05); color: #fff; }
.fn-card-vote button.active { color: var(--primary); background: rgba(177,136,94,0.1); }
.fn-vote-count { font-weight: 700; font-size: 0.95rem; color: #cbd5e1; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.fn-vote-count.fire { color: #f97316; }
.fn-vote-count i { width: 14px; height: 14px; }

.fn-card-body { padding: 1.5rem 2rem; flex: 1; }
.fn-card-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.fn-badge {
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    padding: 0.3rem 0.6rem; border-radius: 6px; display: flex; align-items: center; gap: 0.4rem;
}
.fn-badge.system { background: rgba(239,68,68,0.1); color: #ef4444; border: 1px solid rgba(239,68,68,0.2); }
.fn-badge.trending { background: rgba(249,115,22,0.1); color: #f97316; border: 1px solid rgba(249,115,22,0.2); }
.fn-badge.cat-negocios { background: rgba(26,115,232,0.1); color: #60a5fa; }
.fn-badge.cat-cultura { background: rgba(198,40,40,0.1); color: #f87171; }
.fn-badge.cat-turismo { background: rgba(46,125,50,0.1); color: #86efac; }

.fn-author { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: #94a3b8; }
.fn-avatar { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; }
.fn-avatar i { width: 12px; height: 12px; color: #fff; }
.fn-author strong { color: #e2e8f0; font-weight: 600; }
.fn-verified { width: 14px; height: 14px; color: #3b82f6; }
.fn-time { font-size: 0.8rem; color: #64748b; margin-left: auto; }

.fn-card-title { font-family: var(--font-heading); font-size: 1.4rem; color: #fff; margin: 0 0 0.8rem; line-height: 1.3; cursor: pointer; transition: color 0.2s; }
.fn-card-title:hover { color: var(--primary); }
.fn-card-desc { font-size: 0.95rem; color: #94a3b8; line-height: 1.6; margin: 0 0 1.5rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.fn-card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.fn-act-btn {
    display: flex; align-items: center; gap: 0.5rem; background: transparent; border: none;
    color: #64748b; font-size: 0.85rem; font-weight: 600; padding: 0.5rem 0.8rem; border-radius: 8px; cursor: pointer; transition: all 0.2s;
}
.fn-act-btn i { width: 16px; height: 16px; }
.fn-act-btn:hover { background: rgba(255,255,255,0.05); color: #fff; }
.fn-act-btn.reply-trigger { color: var(--primary); background: rgba(177,136,94,0.05); }

/* Pinned & Hot Modifiers */
.fnexus-card.pinned { border-color: rgba(177,136,94,0.4); background: linear-gradient(to bottom right, #111, #080808); }
.fnexus-card.hot .fire-glow { background: linear-gradient(90deg, transparent, #f97316, transparent); opacity: 1; }

.fnexus-load-more {
    width: 100%; padding: 1.2rem; background: rgba(255,255,255,0.02); border: 1px dashed rgba(255,255,255,0.1);
    color: #94a3b8; font-weight: 600; border-radius: 12px; cursor: pointer; transition: all 0.3s;
    display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 1rem;
}
.fnexus-load-more:hover { background: rgba(255,255,255,0.05); color: #fff; }

/* ── RIGHT SIDEBAR ── */
.fn-intel-widget { background: #0b0c10; border: 1px solid rgba(255,255,255,0.05); border-radius: 16px; padding: 1.5rem; }
.fn-intel-widget h4 { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: #fff; margin: 0 0 1.5rem; text-transform: uppercase; letter-spacing: 1px; }
.fn-intel-widget h4 i { width: 16px; height: 16px; color: var(--primary); }

.fn-trending-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.fn-trending-list li { display: flex; flex-direction: column; gap: 0.2rem; }
.fn-trending-list a { color: #cbd5e1; text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: color 0.2s; }
.fn-trending-list a:hover { color: var(--primary); }
.fn-trending-list span { font-size: 0.75rem; color: #64748b; }

.fn-user-list { display: flex; flex-direction: column; gap: 1rem; }
.fn-user-item { display: flex; align-items: center; gap: 1rem; }
.fn-user-item .fn-avatar { width: 36px; height: 36px; background: rgba(177,136,94,0.1); border: 1px solid rgba(177,136,94,0.2); }
.fn-user-item .fn-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.fn-user-item .fn-avatar i { color: var(--primary); }
.fn-uinfo { display: flex; flex-direction: column; }
.fn-uinfo strong { color: #e2e8f0; font-size: 0.9rem; display: flex; align-items: center; gap: 0.3rem; }
.fn-uinfo span { color: #64748b; font-size: 0.75rem; }

/* ── MODAL ── */
.fnexus-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(5px); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s; }
.fnexus-modal-overlay.is-open { opacity: 1; visibility: visible; }
.fnexus-modal-box { width: 100%; max-width: 600px; background: #0b0c10; border: 1px solid rgba(177,136,94,0.3); border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); transform: translateY(20px) scale(0.95); transition: all 0.3s; margin: 1rem; }
.is-open .fnexus-modal-box { transform: translateY(0) scale(1); }

.fn-modal-header { padding: 1.5rem 2rem; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; align-items: center; }
.fn-modal-header h3 { font-family: var(--font-heading); margin: 0; color: #fff; font-size: 1.2rem; }
.fn-modal-close { background: transparent; border: none; color: #64748b; cursor: pointer; transition: color 0.2s; }
.fn-modal-close:hover { color: #fff; }

.fn-modal-body { padding: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.fn-composer-cats { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.fn-cat-pill { padding: 0.5rem 1rem; border-radius: 100px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #94a3b8; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.fn-cat-pill:hover { background: rgba(255,255,255,0.1); color: #fff; }
.fn-cat-pill.active { background: rgba(177,136,94,0.15); border-color: var(--primary); color: var(--primary); }

.fn-input { width: 100%; background: transparent; border: none; border-bottom: 2px solid rgba(255,255,255,0.1); padding: 0.5rem 0; color: #fff; font-size: 1.4rem; font-family: var(--font-heading); outline: none; transition: border-color 0.3s; }
.fn-input:focus { border-color: var(--primary); }
.fn-char-count { text-align: right; font-size: 0.75rem; color: #64748b; }

.fn-textarea { width: 100%; min-height: 150px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 1rem; color: #cbd5e1; font-size: 1rem; font-family: var(--font-body); outline: none; resize: vertical; transition: border-color 0.3s; }
.fn-textarea:focus { border-color: var(--primary); }

.fn-modal-footer { padding: 1.5rem 2rem; border-top: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: flex-end; gap: 1rem; }
.fn-btn-ghost { background: transparent; border: none; color: #94a3b8; font-weight: 600; cursor: pointer; padding: 0.8rem 1.5rem; transition: color 0.2s; }
.fn-btn-ghost:hover { color: #fff; }
.fn-btn-primary { background: var(--primary); color: #000; font-weight: 700; border: none; border-radius: 10px; padding: 0.8rem 1.5rem; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; transition: transform 0.2s, box-shadow 0.2s; }
.fn-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(177,136,94,0.4); }
.fn-btn-primary i { width: 18px; height: 18px; }

/* ── RESPONSIVE ── */
.fnexus-mobile-tabs { display: none; }

@media (max-width: 1024px) {
    .fnexus-dashboard { grid-template-columns: 200px 1fr; }
    .fnexus-sidebar.right-nav { display: none; }
}

@media (max-width: 768px) {
    .fnexus-hero { padding: 100px 1.5rem 2rem; }
    .fnexus-hero-title { font-size: clamp(2.5rem, 8vw, 3rem); }
    .fnexus-hero-right { justify-content: center; width: 100%; margin-top: 2rem; }
    
    .fnexus-dashboard { grid-template-columns: 1fr; padding: 1.5rem; gap: 1.5rem; }
    .fnexus-sidebar.left-nav { display: none; }
    
    .fnexus-mobile-tabs {
        display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: none;
    }
    .fnexus-mobile-tabs::-webkit-scrollbar { display: none; }
    .fnexus-mobile-tabs button {
        padding: 0.6rem 1.2rem; border-radius: 100px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
        color: #94a3b8; font-weight: 600; white-space: nowrap; flex-shrink: 0; cursor: pointer;
    }
    .fnexus-mobile-tabs button.active { background: rgba(177,136,94,0.15); border-color: var(--primary); color: var(--primary); }
    
    .fn-card-body { padding: 1rem; }
    .fn-card-vote { width: 50px; padding: 1rem 0; }
    .fn-card-title { font-size: 1.2rem; }
}

/* ==========================================================================
   25. FINDY COMMERCE / BUSINESS — Elite Directory & Profile
   ========================================================================== */

/* ── PROFILE (single-findy_negocio.php) ── */
.fbusiness-wrapper { background: #030305; color: #e2e8f0; min-height: 100vh; font-family: var(--font-body); }
.fbusiness-hero { position: relative; padding: 160px 2rem 6rem; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 60vh; }
.fbusiness-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(5px) brightness(0.4); transform: scale(1.05); }
.fbusiness-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, #030305 0%, rgba(3,3,5,0.7) 40%, rgba(3,3,5,0.2) 100%); }

.fbusiness-hero-content { position: relative; z-index: 10; max-width: 1200px; margin: 0 auto; width: 100%; }
.fbusiness-hero-header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.fbusiness-badges { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.fb-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 1rem; border-radius: 100px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.fb-badge.primary { background: rgba(177,136,94,0.15); color: var(--primary); border: 1px solid rgba(177,136,94,0.3); }
.fb-badge.secondary { background: rgba(255,255,255,0.1); color: #cbd5e1; border: 1px solid rgba(255,255,255,0.1); }
.fb-badge i { width: 14px; height: 14px; }
.fb-status-pill { display: inline-flex; align-items: center; gap: 0.5rem; background: #10b981; color: #000; padding: 0.4rem 1.2rem; border-radius: 100px; font-size: 0.75rem; font-weight: 800; letter-spacing: 1px; }
.fb-pulse { width: 6px; height: 6px; border-radius: 50%; background: #000; animation: fbPulse 1.5s infinite; }
@keyframes fbPulse { 0%{opacity:1;} 50%{opacity:0.3;} 100%{opacity:1;} }

.fbusiness-title { font-family: var(--font-heading); font-size: clamp(3rem, 6vw, 4.5rem); color: #fff; margin: 0 0 0.5rem; line-height: 1; text-shadow: 0 4px 20px rgba(0,0,0,0.5); }
.fbusiness-subtitle { font-size: 1.2rem; color: #cbd5e1; margin: 0 0 3rem; display: flex; align-items: center; gap: 0.5rem; }

.fbusiness-stats-bar { display: flex; gap: 2rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 1.5rem 2rem; border-radius: 20px; backdrop-filter: blur(10px); flex-wrap: wrap; }
.fb-stat { display: flex; align-items: center; gap: 1rem; }
.fb-stat i { width: 24px; height: 24px; color: var(--primary); }
.fb-stat div { display: flex; flex-direction: column; gap: 0.2rem; }
.fb-stat strong { color: #fff; font-size: 1.1rem; }
.fb-stat span { color: #64748b; font-size: 0.8rem; }
.fb-stat.divider { width: 1px; height: 40px; background: rgba(255,255,255,0.1); }

.fbusiness-dashboard { max-width: 1200px; margin: -2rem auto 0; padding: 0 2rem 6rem; display: grid; grid-template-columns: 1fr 380px; gap: 3rem; position: relative; z-index: 20; }
.fbusiness-main { display: flex; flex-direction: column; gap: 2rem; }

.fb-card { background: #0b0c10; border: 1px solid rgba(255,255,255,0.05); border-radius: 24px; padding: 2.5rem; }
.fb-card-header h2 { display: flex; align-items: center; gap: 0.8rem; color: #fff; font-family: var(--font-heading); font-size: 1.8rem; margin: 0 0 1.5rem; }
.fb-card-header h2 i { color: var(--primary); }
.fb-content-text { color: #94a3b8; line-height: 1.8; font-size: 1.05rem; }
.fb-content-text p { margin-bottom: 1.5rem; }

.fb-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.fb-gal-item { border-radius: 16px; overflow: hidden; aspect-ratio: 1; }
.fb-gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.fb-gal-item:hover img { transform: scale(1.05); }

.highlight-card { background: linear-gradient(135deg, rgba(177,136,94,0.1), transparent); border-color: rgba(177,136,94,0.3); }
.fb-impact-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; color: var(--primary); letter-spacing: 2px; margin-bottom: 1rem; }
.highlight-card h3 { font-family: var(--font-heading); font-size: 1.8rem; color: #fff; margin: 0 0 1rem; }
.highlight-card p { color: #cbd5e1; line-height: 1.6; margin: 0; }

.fbusiness-sidebar { display: flex; flex-direction: column; gap: 2rem; }
.fb-widget { background: #0b0c10; border: 1px solid rgba(255,255,255,0.05); border-radius: 24px; padding: 2rem; }
.fb-contact-widget h3 { display: flex; align-items: center; gap: 0.8rem; font-family: var(--font-heading); font-size: 1.4rem; color: #fff; margin: 0 0 1.5rem; }
.fb-contact-widget h3 i { color: var(--primary); }
.fb-contact-list { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.fb-contact-list li { display: flex; gap: 1rem; align-items: flex-start; }
.fb-icon-box { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; }
.fb-icon-box i { width: 18px; height: 18px; color: #94a3b8; }
.fb-c-info { display: flex; flex-direction: column; gap: 0.2rem; }
.fb-c-info span { font-size: 0.8rem; color: #64748b; text-transform: uppercase; letter-spacing: 1px; }
.fb-c-info strong { color: #fff; font-size: 1rem; }
.fb-link { font-size: 0.85rem; color: var(--primary); text-decoration: none; margin-top: 0.2rem; }
.fb-actions { display: flex; flex-direction: column; gap: 1rem; }
.fb-btn { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 1rem; border-radius: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; border: none; text-decoration: none; font-family: var(--font-body); font-size: 0.95rem; }
.fb-btn.primary { background: #10b981; color: #000; }
.fb-btn.primary:hover { background: #059669; }
.fb-btn.secondary { background: rgba(255,255,255,0.05); color: #fff; border: 1px solid rgba(255,255,255,0.1); }
.fb-btn.secondary:hover { background: rgba(255,255,255,0.1); }
.fb-btn.outline-gold { background: transparent; border: 1px solid var(--primary); color: var(--primary); width: 100%; }
.fb-btn.outline-gold:hover { background: rgba(177,136,94,0.1); }

.fb-promo-widget { background: linear-gradient(135deg, #1e293b, #0f172a); border-color: #334155; text-align: center; }
.fb-promo-icon { width: 50px; height: 50px; border-radius: 50%; background: rgba(177,136,94,0.1); color: var(--primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.fb-promo-widget h4 { font-family: var(--font-heading); color: #fff; font-size: 1.3rem; margin: 0 0 0.8rem; }
.fb-promo-widget p { color: #cbd5e1; font-size: 0.9rem; line-height: 1.5; margin: 0 0 1.5rem; }

/* ── DIRECTORY (page-negocios.php) ── */
.fcommerce-wrapper { background: #030305; min-height: 100vh; color: #e2e8f0; font-family: var(--font-body); }
.fcommerce-hero { padding: 120px 2rem 4rem; position: relative; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.05); }
.fc-glow { position: absolute; width: 400px; height: 400px; border-radius: 50%; filter: blur(80px); opacity: 0.3; pointer-events: none; }
.fc-glow.top-right { background: var(--primary); top: -100px; right: -100px; }
.fc-glow.bottom-left { background: #10b981; bottom: -100px; left: -100px; }
.fcommerce-hero-inner { position: relative; z-index: 10; max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.fc-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(177,136,94,0.1); border: 1px solid rgba(177,136,94,0.2); color: var(--primary); padding: 0.4rem 1.2rem; border-radius: 100px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 1.5rem; }
.fc-title { font-family: var(--font-heading); font-size: clamp(3rem, 6vw, 4.5rem); color: #fff; margin: 0 0 1rem; line-height: 1.1; }
.fc-title span { color: var(--primary); }
.fc-desc { font-size: 1.15rem; color: #94a3b8; line-height: 1.6; }

.fcommerce-dashboard { max-width: 1400px; margin: 0 auto; padding: 3rem 2rem 6rem; }
.fcommerce-filters-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); padding: 1rem; border-radius: 100px; }
.fc-search-wrap { display: flex; align-items: center; gap: 0.8rem; background: rgba(0,0,0,0.5); padding: 0.8rem 1.5rem; border-radius: 100px; flex: 1; max-width: 300px; border: 1px solid rgba(255,255,255,0.05); }
.fc-search-wrap i { color: #64748b; width: 18px; height: 18px; }
.fc-search-input { background: transparent; border: none; color: #fff; font-family: var(--font-body); width: 100%; outline: none; }
.fc-search-input::placeholder { color: #64748b; }
.fc-filter-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.fc-filter-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.2rem; border-radius: 100px; background: transparent; border: none; color: #94a3b8; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.2s; font-family: var(--font-body); }
.fc-filter-btn i { width: 16px; height: 16px; }
.fc-filter-btn:hover { color: #fff; background: rgba(255,255,255,0.05); }
.fc-filter-btn.active { background: #fff; color: #000; }
.fc-view-options { display: flex; gap: 0.5rem; }
.fc-view-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(255,255,255,0.1); color: #64748b; cursor: pointer; transition: all 0.2s; }
.fc-view-btn.active { background: var(--primary); color: #000; border-color: var(--primary); }

.fcommerce-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; }
.fc-card { background: #0b0c10; border: 1px solid rgba(255,255,255,0.05); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: all 0.3s; position: relative; }
.fc-card:hover { border-color: rgba(177,136,94,0.3); transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.5); }
.fc-card-img { height: 200px; position: relative; }
.fc-card-img img { width: 100%; height: 100%; object-fit: cover; }
.fc-card-badge { position: absolute; top: 15px; left: 15px; padding: 0.3rem 0.8rem; border-radius: 6px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; backdrop-filter: blur(10px); }
.fc-card-badge.cat-gastronomia { background: rgba(26,115,232,0.8); color: #fff; }
.fc-card-badge.cat-servicios { background: rgba(16,185,129,0.8); color: #fff; }
.fc-card-badge.cat-educacion { background: rgba(139,92,246,0.8); color: #fff; }
.fc-card-badge.cat-comercio { background: rgba(249,115,22,0.8); color: #fff; }
.fc-card-badge.cat-turismo { background: rgba(236,72,153,0.8); color: #fff; }
.fc-card-status { position: absolute; bottom: -12px; right: 20px; background: #10b981; color: #000; font-size: 0.7rem; font-weight: 800; padding: 0.3rem 0.8rem; border-radius: 100px; border: 2px solid #0b0c10; }

.fc-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.fc-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.fc-card-title { font-family: var(--font-heading); font-size: 1.4rem; color: #fff; margin: 0; }
.fc-verified { color: #3b82f6; width: 18px; height: 18px; }
.fc-card-desc { font-size: 0.9rem; color: #94a3b8; line-height: 1.5; margin: 0 0 1.5rem; flex: 1; }
.fc-card-meta { display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.05); }
.fc-card-meta span { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: #cbd5e1; font-weight: 600; }
.fc-card-meta span i { width: 14px; height: 14px; color: var(--primary); }

.fc-card-footer { display: flex; gap: 0.5rem; padding: 0 1.5rem 1.5rem; }
.fc-btn-profile { flex: 1; display: flex; justify-content: center; align-items: center; background: rgba(255,255,255,0.05); color: #fff; text-decoration: none; font-weight: 600; border-radius: 10px; padding: 0.8rem; transition: background 0.2s; font-size: 0.9rem; }
.fc-btn-profile:hover { background: var(--primary); color: #000; }
.fc-btn-icon { width: 42px; height: 42px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); background: transparent; color: #94a3b8; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.fc-btn-icon:hover { color: #ef4444; border-color: #ef4444; background: rgba(239,68,68,0.1); }

@media (max-width: 1024px) {
    .fbusiness-dashboard { grid-template-columns: 1fr; }
    .fcommerce-filters-bar { flex-direction: column; border-radius: 20px; align-items: stretch; }
    .fc-search-wrap { max-width: 100%; }
    .fc-filter-group { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.5rem; scrollbar-width: none; }
    .fc-filter-btn { white-space: nowrap; }
}
@media (max-width: 768px) {
    .fbusiness-hero { padding: 100px 1.5rem 4rem; }
    .fbusiness-stats-bar { flex-direction: column; gap: 1.5rem; align-items: flex-start; }
    .fb-stat.divider { width: 100%; height: 1px; }
    .fb-gallery-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   26. FINDY SIGNAL — Elite Command Center (Notificaciones)
   ========================================================================== */

.fsignal-wrapper { background: #030305; color: #e2e8f0; min-height: 100vh; font-family: var(--font-body); }

/* ── SIGNAL HERO ── */
.fsignal-hero { position: relative; padding: 140px 2rem 4rem; border-bottom: 1px solid rgba(255,255,255,0.05); overflow: hidden; }
.fsignal-radar-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0.5; pointer-events: none; }
.radar-grid { width: 100%; height: 100%; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 40px 40px; background-position: 0 0, 20px 20px; }
.radar-sweep { position: absolute; width: 60vw; height: 60vw; border-radius: 50%; background: conic-gradient(from 0deg, transparent 70%, rgba(16,185,129,0.1) 100%); animation: sweep 4s linear infinite; }
@keyframes sweep { 100% { transform: rotate(360deg); } }

.fsignal-hero-inner { position: relative; z-index: 10; max-width: 1200px; margin: 0 auto; }
.fsignal-status { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; color: #10b981; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2); padding: 0.4rem 1rem; border-radius: 100px; margin-bottom: 1.5rem; }
.fsignal-pulse { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 10px #10b981; animation: fsPulse 1.5s infinite; }
@keyframes fsPulse { 0%{opacity:1;} 50%{opacity:0.3;} 100%{opacity:1;} }
.fsignal-title { font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, 4rem); color: #fff; margin: 0 0 0.8rem; line-height: 1; }
.fsignal-title span { color: var(--primary); font-style: italic; }
.fsignal-desc { color: #94a3b8; font-size: 1.1rem; line-height: 1.6; max-width: 600px; margin: 0; }

/* ── SIGNAL DASHBOARD ── */
.fsignal-dashboard { max-width: 1200px; margin: 0 auto; padding: 3rem 2rem; display: grid; grid-template-columns: 280px 1fr; gap: 3rem; }

/* ROUTER (Sidebar) */
.fsignal-router { position: sticky; top: 100px; height: fit-content; display: flex; flex-direction: column; gap: 2rem; }
.router-block { display: flex; flex-direction: column; gap: 0.3rem; }
.router-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: #64748b; margin: 0 0 1rem 0.5rem; font-weight: 700; }
.router-btn { display: flex; align-items: center; gap: 0.8rem; width: 100%; background: transparent; border: none; color: #cbd5e1; font-size: 0.95rem; font-weight: 500; padding: 0.8rem 1rem; border-radius: 12px; cursor: pointer; transition: all 0.2s; font-family: var(--font-body); text-align: left; }
.router-btn:hover { background: rgba(255,255,255,0.03); color: #fff; }
.router-btn.active { background: rgba(177,136,94,0.1); color: var(--primary); font-weight: 600; }
.router-btn i { width: 18px; height: 18px; color: #64748b; transition: color 0.2s; }
.router-btn.active i { color: var(--primary); }
.router-icon-box { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.router-icon-box i { width: 14px; height: 14px; color: inherit !important; }
.router-icon-box.system { background: rgba(59,130,246,0.1); color: #60a5fa; }
.router-icon-box.community { background: rgba(16,185,129,0.1); color: #34d399; }
.router-icon-box.tx { background: rgba(249,115,22,0.1); color: #fb923c; }
.router-icon-box.security { background: rgba(239,68,68,0.1); color: #f87171; }
.router-badge { margin-left: auto; background: rgba(255,255,255,0.05); padding: 0.2rem 0.6rem; border-radius: 100px; font-size: 0.75rem; font-weight: 700; color: #94a3b8; }
.router-badge.alert { background: #ef4444; color: #fff; }
.router-divider { height: 1px; background: rgba(255,255,255,0.05); margin: 0.5rem 0; }

/* FEED */
.fsignal-feed { display: flex; flex-direction: column; gap: 1.5rem; }
.feed-controls { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 1.5rem; margin-bottom: 1rem; }
.feed-title { font-family: var(--font-heading); font-size: 1.5rem; color: #fff; margin: 0; }
.btn-acknowledge { display: flex; align-items: center; gap: 0.5rem; background: transparent; border: none; color: var(--primary); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-acknowledge:hover { color: #fff; }
.btn-acknowledge i { width: 18px; height: 18px; }

.transmission-list { display: flex; flex-direction: column; gap: 1rem; }
.transmission-card { background: #0b0c10; border: 1px solid rgba(255,255,255,0.05); border-radius: 16px; padding: 1.5rem; display: flex; gap: 1.5rem; position: relative; overflow: hidden; transition: all 0.3s ease; }
.transmission-card:hover { border-color: rgba(255,255,255,0.15); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.tx-glow { position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: var(--primary); opacity: 0; transition: 0.3s; }
.transmission-card.unread .tx-glow { opacity: 1; }
.transmission-card.unread.critical .tx-glow.red { background: #ef4444; }

.tx-icon-pillar { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 2; }
.tx-icon-pillar img { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; }
.tx-icon-pillar i { width: 22px; height: 22px; }
.tx-color { background: rgba(249,115,22,0.1); color: #fb923c; border: 1px solid rgba(249,115,22,0.2); }
.community-color { background: rgba(16,185,129,0.1); color: #34d399; border: 1px solid rgba(16,185,129,0.2); }
.security-color { background: rgba(239,68,68,0.1); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }
.system-color { background: rgba(59,130,246,0.1); color: #60a5fa; border: 1px solid rgba(59,130,246,0.2); }

.tx-content { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; position: relative; z-index: 2; }
.tx-header { display: flex; justify-content: space-between; align-items: center; }
.tx-cat { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: #94a3b8; font-weight: 700; }
.tx-cat.critical-text { color: #ef4444; }
.tx-time { font-size: 0.75rem; color: #64748b; }
.tx-title { font-size: 1.15rem; color: #fff; margin: 0; font-family: var(--font-body); font-weight: 600; line-height: 1.3; }
.transmission-card.unread .tx-title { font-family: var(--font-heading); font-size: 1.3rem; }
.tx-desc { color: #cbd5e1; font-size: 0.95rem; line-height: 1.6; margin: 0; }

.tx-actions { margin-top: 1rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.tx-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; padding: 0.6rem 1.2rem; border-radius: 8px; text-decoration: none; transition: all 0.2s; }
.tx-btn i { width: 16px; height: 16px; }
.tx-btn.primary { background: var(--primary); color: #000; }
.tx-btn.primary:hover { background: #8e6c4a; }
.tx-btn.outline { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: #fff; }
.tx-btn.outline:hover { border-color: #fff; background: rgba(255,255,255,0.05); }
.tx-btn.danger { background: rgba(239,68,68,0.1); color: #ef4444; border: 1px solid rgba(239,68,68,0.2); }
.tx-btn.danger:hover { background: #ef4444; color: #fff; }

.tx-dismiss { position: absolute; top: 1.5rem; right: 1.5rem; background: transparent; border: none; color: #64748b; cursor: pointer; transition: color 0.2s; z-index: 5; opacity: 0; }
.transmission-card:hover .tx-dismiss { opacity: 1; }
.tx-dismiss:hover { color: #fff; }
.tx-dismiss i { width: 18px; height: 18px; }

.fsignal-load-more { width: 100%; padding: 1.2rem; background: rgba(255,255,255,0.02); border: 1px dashed rgba(255,255,255,0.1); color: #94a3b8; font-weight: 600; border-radius: 12px; cursor: pointer; transition: all 0.3s; display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.fsignal-load-more:hover { background: rgba(255,255,255,0.05); color: #fff; }

@media (max-width: 1024px) {
    .fsignal-dashboard { grid-template-columns: 220px 1fr; gap: 2rem; }
}
@media (max-width: 768px) {
    .fsignal-hero { padding: 100px 1.5rem 3rem; }
    .fsignal-dashboard { grid-template-columns: 1fr; padding: 1.5rem; }
    .fsignal-router { position: static; gap: 1rem; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 1.5rem; margin-bottom: 1rem; }
    .router-block { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.5rem; }
    .router-title { display: none; }
    .router-btn { white-space: nowrap; width: auto; padding: 0.6rem 1.2rem; border-radius: 100px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
    .router-divider { display: none; }
    .router-divider { display: none; }
    .tx-dismiss { opacity: 1; top: 1rem; right: 1rem; }
    .transmission-card { padding: 1.2rem; flex-direction: column; gap: 1rem; }
    .tx-icon-pillar { width: 36px; height: 36px; }
}

/* ==========================================================================
   27. FINDY EXPLORE — Elite Curatorial Museum
   ========================================================================== */

.fexplore-wrapper { background: #030305; min-height: 100vh; color: #fff; font-family: var(--font-body); overflow-x: hidden; }

/* ── EXPLORE HERO ── */
.fexplore-hero { position: relative; height: 85vh; min-height: 600px; display: flex; align-items: flex-end; padding: 0 4rem 8rem; }
.fexplore-hero-bg { position: absolute; inset: 0; z-index: 0; }
.fexplore-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.fexplore-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 150px rgba(0,0,0,0.8); }
.fexplore-gradient { position: absolute; inset: 0; background: linear-gradient(to top, #030305 0%, rgba(3,3,5,0.8) 20%, transparent 60%), linear-gradient(to right, #030305 0%, rgba(3,3,5,0.5) 40%, transparent 100%); }

.fexplore-hero-content { position: relative; z-index: 10; max-width: 800px; width: 100%; }
.fexplore-hero-meta { display: flex; gap: 0.8rem; margin-bottom: 1.5rem; align-items: center; flex-wrap: wrap; }
.fexplore-tag { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 0.3rem 0.6rem; border-radius: 4px; display: inline-flex; align-items: center; gap: 0.4rem; }
.fexplore-tag.trending { color: #ef4444; }
.fexplore-tag.trending i { fill: #ef4444; width: 14px; height: 14px; }
.fexplore-tag.format { border: 1px solid rgba(255,255,255,0.3); color: #cbd5e1; }
.fexplore-tag.format i { width: 14px; height: 14px; }
.fexplore-tag.age { background: rgba(255,255,255,0.2); color: #fff; }

.fexplore-hero-title { font-family: var(--font-heading); font-size: clamp(3.5rem, 8vw, 6rem); margin: 0 0 1rem; line-height: 1.1; display: flex; align-items: center; gap: 1rem; }
.fexplore-hero-title span { color: var(--primary); }
.fexplore-brand-icon { height: clamp(3rem, 6vw, 4.5rem); width: auto; object-fit: contain; }
.fexplore-hero-desc { font-size: 1.25rem; color: #cbd5e1; line-height: 1.6; margin: 0 0 2rem; max-width: 650px; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }

.fexplore-hero-actions { display: flex; gap: 1rem; }
.fexplore-btn-play { background: #fff; color: #000; border: none; padding: 0.8rem 2rem; border-radius: 8px; font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; gap: 0.6rem; cursor: pointer; transition: all 0.2s; font-family: var(--font-body); }
.fexplore-btn-play:hover { background: rgba(255,255,255,0.8); }
.fexplore-btn-play i { width: 22px; height: 22px; fill: #000; }
.fexplore-btn-info { background: rgba(109,109,110,0.7); color: #fff; border: none; padding: 0.8rem 2rem; border-radius: 8px; font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; gap: 0.6rem; cursor: pointer; transition: all 0.2s; font-family: var(--font-body); }
.fexplore-btn-info:hover { background: rgba(109,109,110,0.5); }
.fexplore-btn-info i { width: 22px; height: 22px; }

/* ── NAVIGATOR ── */
.fexplore-nav-wrapper { position: sticky; top: 80px; z-index: 50; background: linear-gradient(to bottom, rgba(3,3,5,0.95) 0%, rgba(3,3,5,0.8) 80%, transparent 100%); padding: 1rem 0; backdrop-filter: blur(10px); }
.fexplore-nav-inner { display: flex; gap: 0.5rem; max-width: 1400px; margin: 0 auto; padding: 0 4rem; overflow-x: auto; scrollbar-width: none; }
.fexplore-nav-inner::-webkit-scrollbar { display: none; }
.fexplore-cat-btn { background: transparent; border: 1px solid transparent; color: #94a3b8; font-weight: 600; padding: 0.6rem 1.2rem; border-radius: 100px; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; transition: all 0.2s; white-space: nowrap; font-family: var(--font-body); font-size: 0.95rem; }
.fexplore-cat-btn i { width: 16px; height: 16px; }
.fexplore-cat-btn:hover { color: #fff; background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.fexplore-cat-btn.active { background: #fff; color: #000; }

/* ── MUSEUM (Content Rows) ── */
.fexplore-museum { padding: 2rem 0 6rem; overflow: hidden; }
.fexplore-category-section { margin-bottom: 4rem; }
.fexplore-section-title { font-family: var(--font-heading); font-size: 2.5rem; color: #fff; padding: 0 4rem; margin: 0 0 1rem; }
.fexplore-row-title { font-size: 1.2rem; color: #e2e8f0; font-weight: 600; padding: 0 4rem; margin: 0 0 1rem; }

/* FLICKITY CAROUSEL OVERRIDES */
.fexplore-carousel { padding: 0 4rem 4rem; /* Bottom padding for hover expansion */ margin-bottom: -3rem; }
.fexplore-carousel .flickity-viewport { overflow: visible !important; }
.fexplore-carousel .flickity-prev-next-button { width: 40px; height: 100%; border-radius: 0; background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.3s; top: 0; transform: none; }
.fexplore-carousel:hover .flickity-prev-next-button { opacity: 1; }
.fexplore-carousel .flickity-prev-next-button.previous { left: 0; }
.fexplore-carousel .flickity-prev-next-button.next { right: 0; }
.fexplore-carousel .flickity-prev-next-button .flickity-button-icon { fill: #fff; width: 24px; height: 24px; left: 20%; top: 40%; }

/* ── NETFLIX-STYLE ELITE CARDS ── */
.fexplore-card { width: 300px; height: 170px; margin-right: 0.5rem; border-radius: 12px; background: #0a0a0a; cursor: pointer; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; position: relative; }
.fexplore-card-img { width: 100%; height: 100%; border-radius: 12px; background-size: cover; background-position: center; position: relative; z-index: 1; transition: border-radius 0.3s, transform 0.4s; }
.fexplore-card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(177,136,94,0.1) 50%, transparent 100%); border-radius: 12px; transition: opacity 0.4s; }
.fexplore-card-title-front { position: absolute; bottom: 15px; left: 15px; color: #fff; font-family: var(--font-heading); font-size: 1.3rem; margin: 0; z-index: 2; transition: all 0.3s ease; text-shadow: 0 4px 10px rgba(0,0,0,0.9); }

/* Progress Bar */
.fexplore-progress-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: rgba(255,255,255,0.2); z-index: 2; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; overflow: hidden; }
.fexplore-progress-bar .progress { height: 100%; background: var(--primary); box-shadow: 0 0 10px var(--primary); }

/* Expanded Info Card (The Netflix-style dropdown) */
.fexplore-card-info { position: absolute; top: 100%; left: 0; width: 100%; background: rgba(15, 15, 15, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 1.5rem; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; border: 1px solid rgba(177,136,94,0.3); border-top: none; box-shadow: 0 30px 60px rgba(0,0,0,0.9), 0 0 40px rgba(177,136,94,0.15); opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1); z-index: 20; display: flex; flex-direction: column; gap: 1rem; transform: translateY(-10px); }

/* Hover States */
.fexplore-card:hover { transform: scale(1.35) translateY(-15px); z-index: 100; box-shadow: 0 25px 50px rgba(0,0,0,0.9), 0 0 0 1px rgba(177,136,94,0.5); }
.fexplore-card:hover .fexplore-card-img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.fexplore-card:hover .fexplore-card-img::after { opacity: 0; }
.fexplore-card:hover .fexplore-card-title-front { opacity: 0; transform: translateY(10px); }
.fexplore-card:hover .fexplore-progress-bar { display: none; }
.fexplore-card:hover .fexplore-card-info { opacity: 1; visibility: visible; transform: translateY(0); }

/* Carousel Edge Cases */
.fexplore-carousel .flickity-slider > .fexplore-card:first-child:hover { transform: scale(1.35) translateY(-15px) translateX(15%); }
.fexplore-carousel .flickity-slider > .fexplore-card:last-child:hover { transform: scale(1.35) translateY(-15px) translateX(-15%); }

/* Actions (Play, Add, etc) */
.fexplore-card-actions { display: flex; gap: 0.8rem; align-items: center; }
.fexplore-card-actions button { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.fexplore-card-actions .fe-play { background: #fff; border: none; color: #000; box-shadow: 0 5px 15px rgba(255,255,255,0.3); }
.fexplore-card-actions .fe-play:hover { background: var(--primary); color: #fff; box-shadow: 0 8px 25px rgba(177,136,94,0.6); transform: scale(1.1); }
.fexplore-card-actions .fe-play i { width: 16px; height: 16px; fill: currentColor; margin-left: 2px; }
.fexplore-card-actions .fe-add, .fexplore-card-actions .fe-more { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); color: #fff; backdrop-filter: blur(5px); }
.fexplore-card-actions .fe-add:hover, .fexplore-card-actions .fe-more:hover { border-color: var(--primary); background: rgba(177,136,94,0.2); color: var(--primary); transform: scale(1.1); }
.fexplore-card-actions .fe-add i, .fexplore-card-actions .fe-more i { width: 18px; height: 18px; }
.fexplore-card-actions .fe-more { margin-left: auto; }

.fe-tags { display: flex; gap: 0.4rem; font-size: 0.7rem; color: #64748b; font-weight: 500; }
.fe-tags span { color: #cbd5e1; }

@media (max-width: 1024px) {
    .fexplore-hero { padding: 0 2rem 4rem; height: 70vh; }
    .fexplore-section-title, .fexplore-row-title { padding: 0 2rem; }
    .fexplore-carousel { padding: 0 2rem 4rem; }
    .fexplore-nav-inner { padding: 0 2rem; }
}

@media (max-width: 768px) {
    .fexplore-hero { padding: 0 1.5rem 2rem; height: 60vh; }
    .fexplore-hero-title { font-size: 3rem; }
    .fexplore-brand-icon { height: 2.5rem; }
    .fexplore-hero-desc { font-size: 1rem; }
    
    .fexplore-nav-wrapper { top: 60px; padding: 0.5rem 0; }
    .fexplore-nav-inner { padding: 0 1.5rem; }
    
    .fexplore-section-title { font-size: 2rem; padding: 0 1.5rem; }
    .fexplore-row-title { font-size: 1.1rem; padding: 0 1.5rem; }
    .fexplore-carousel { padding: 0 1.5rem 4rem; }
    
    .fexplore-card { width: 260px; height: 146px; }
    /* Disable aggressive scale on mobile for better UX */
    .fexplore-card:hover { transform: scale(1.05) translateY(-5px); }
    .fexplore-carousel .flickity-slider > .fexplore-card:first-child:hover { transform: scale(1.05) translateY(-5px); }
    .fexplore-carousel .flickity-slider > .fexplore-card:last-child:hover { transform: scale(1.05) translateY(-5px); }
}

/* ── ANIMACIONES DE ELITE (EXPLORE) ── */
.fe-anim { opacity: 0; }
.fe-fade-up { animation: feFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes feFadeUp {
    0% { opacity: 0; transform: translateY(40px) scale(0.98); filter: blur(10px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.fe-delay-1 { animation-delay: 0.1s; }
.fe-delay-2 { animation-delay: 0.3s; }
.fe-delay-3 { animation-delay: 0.5s; }
.fe-delay-4 { animation-delay: 0.7s; }

/* Efecto de Ken Burns (Zoom lento) en el Hero Background */
.fexplore-hero-bg img {
    animation: feKenBurns 25s ease-out forwards;
}
@keyframes feKenBurns {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

/* ── 28. TRANSICIONES DE PÁGINA (ELITE) ── */
body {
    animation: pageFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes pageFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.reveal-mask, .reveal-mask-inner {
    /* Override any JS-based opacity defaults */
    opacity: 1 !important;
    animation: native-fade-up 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.reveal-blur {
    opacity: 1 !important;
    filter: blur(0) !important;
    animation: native-fade-blur 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes native-fade-blur {
    0% { opacity: 0; filter: blur(20px); transform: translateY(30px) scale(0.95); }
    100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

/* ── 29. WOOCOMMERCE ELITE INTEGRATION ── */
/* Grilla General */
ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 30px !important;
    padding: 0 !important;
    margin: 40px 0 !important;
    list-style: none !important;
}

/* Tarjeta Elite */
.fc-product-card {
    background: rgba(15, 15, 20, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    backdrop-filter: blur(10px) !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
}
.fc-product-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    border-color: rgba(177, 136, 94, 0.4) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 40px rgba(177, 136, 94, 0.15) !important;
}

/* Imagen del Producto */
.fc-product-visual {
    position: relative;
    padding: 20px;
    background: radial-gradient(circle at center, rgba(255,255,255,0.03) 0%, transparent 70%);
}
.fc-product-visual img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    transition: transform 0.5s ease !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
.fc-product-card:hover .fc-product-visual img {
    transform: scale(1.05) translateY(-5px) !important;
}

/* Insignia de Oferta */
.woocommerce span.onsale {
    background: linear-gradient(135deg, var(--secondary), var(--primary)) !important;
    color: white !important;
    padding: 5px 15px !important;
    border-radius: 20px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1.2 !important;
    z-index: 9 !important;
}

/* Cuerpo de la Tarjeta */
.fc-product-body {
    padding: 0 20px 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: white !important;
    margin: 15px 0 10px !important;
    font-family: var(--font-primary) !important;
    padding: 0 !important;
}
.woocommerce ul.products li.product .price {
    color: var(--primary) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}
.woocommerce ul.products li.product .price del {
    color: rgba(255,255,255,0.4) !important;
    font-size: 0.9rem !important;
    margin-right: 8px !important;
}

/* Botón Añadir al Carrito */
.woocommerce ul.products li.product .button {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.85rem !important;
    transition: all 0.3s ease !important;
    margin: 0 20px 20px !important;
    display: block !important;
}
.woocommerce ul.products li.product .button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px rgba(177, 136, 94, 0.4) !important;
}

/* ── Checkout & Cart Basic Branding ── */
.woocommerce a.button.alt, 
.woocommerce button.button.alt, 
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 16px 30px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: 0 10px 20px rgba(177, 136, 94, 0.2) !important;
    transition: all 0.3s ease !important;
}
.woocommerce a.button.alt:hover, 
.woocommerce button.button.alt:hover, 
.woocommerce input.button.alt:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 30px rgba(177, 136, 94, 0.4) !important;
}

.woocommerce-message, .woocommerce-info, .woocommerce-error {
    background: rgba(15,15,20, 0.8) !important;
    border-top-color: var(--primary) !important;
    color: white !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 12px !important;
}
.woocommerce-message::before, .woocommerce-info::before {
    color: var(--primary) !important;
}

/* ── 30. FRONT-PAGE DYNAMIC SLIDERS ── */
.fp-dynamic-slider {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 20px;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.fp-dynamic-slider::-webkit-scrollbar {
    display: none;
}
.fp-mini-card {
    scroll-snap-align: start;
    flex: 0 0 240px;
    height: 320px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.05);
    transition: transform 0.4s ease;
}
.fp-mini-card:hover {
    transform: translateY(-5px);
    border-color: rgba(177, 136, 94, 0.4);
}
.fp-mini-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.fp-mini-card:hover img {
    transform: scale(1.05);
}
.fp-mc-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 30px 20px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.fp-mc-overlay h4 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
    font-family: var(--font-primary);
}
.fp-mc-overlay span {
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fp-mc-overlay span i {
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   30. FASE 9: ELITE BENTO GRID & CINEMATIC INTERACTIONS
   ========================================================================== */

/* Magnetic Elements */
.magnetic-wrap {
    display: inline-block;
    position: relative;
}
.magnetic-item {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* Staggered Word Reveal (Hero) */
.word-stagger {
    display: inline-block;
    opacity: 0;
    animation: staggerFadeUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes staggerFadeUp {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Scroll-Scrub Text (Manifiesto Apple-Style) */
.text-scrub-container {
    perspective: 1000px;
}
.text-scrub-word {
    color: rgba(255, 255, 255, 0.15);
    transition: color 0.1s ease-out, text-shadow 0.1s ease-out;
    display: inline-block;
}
.text-scrub-word.active {
    color: rgba(255, 255, 255, 1);
    text-shadow: 0 0 20px rgba(255,255,255,0.3);
}
body.light-mode .text-scrub-word {
    color: rgba(0, 0, 0, 0.15);
}
body.light-mode .text-scrub-word.active {
    color: rgba(0, 0, 0, 1);
    text-shadow: none;
}

/* Elite Bento Grid */
.bento-ecosystem {
    max-width: 1300px;
    margin: 0 auto;
    padding: 2rem;
}
.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(350px, auto);
    gap: 1.5rem;
}
.bento-item {
    position: relative;
    border-radius: 32px;
    background: linear-gradient(145deg, rgba(25,24,23,0.8), rgba(15,14,13,0.9));
    border: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
    backdrop-filter: blur(20px);
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s ease;
}
.bento-item:hover {
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}
.bento-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(177,136,94,0.15) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}
.bento-item:hover .bento-glow {
    opacity: 1;
}
.bento-content {
    position: relative;
    z-index: 2;
    padding: 3rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateZ(30px); /* 3D pop */
}
.bento-bg-video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.15;
    z-index: 0;
    transition: opacity 0.5s ease, transform 3s ease;
}
.bento-item:hover .bento-bg-video {
    opacity: 0.35;
    transform: scale(1.05);
}

/* Bento Spans */
.bento-span-8 { grid-column: span 8; }
.bento-span-4 { grid-column: span 4; }
.bento-span-6 { grid-column: span 6; }
.bento-span-12 { grid-column: span 12; }

@media (max-width: 1024px) {
    .bento-span-8, .bento-span-4, .bento-span-6 {
        grid-column: span 12;
    }
    .bento-grid {
        grid-auto-rows: minmax(300px, auto);
    }
}

/* Floating Mini Cards in Bento */
.bento-floating-cards {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    transform: translateZ(40px);
}
.bento-floating-cards .fp-mini-card {
    flex: 1;
    min-width: 150px;
    height: 150px;
    border-radius: 20px;
}

/* ==========================================================================
   FASE 31: DASHBOARD OPERATIVO ELITE (SWITCHES & TABS)
   ========================================================================== */

/* Security Switches */
.security-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
}
.security-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.security-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: .4s;
    border-radius: 34px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.light-mode .security-switch .slider {
    background-color: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
}
.security-switch .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text-secondary);
    transition: .4s;
    border-radius: 50%;
}
.security-switch input:checked + .slider {
    background-color: #F44336;
    border-color: #F44336;
}
.security-switch input:checked + .slider:before {
    transform: translateX(22px);
    background-color: #FFF;
}

/* Inbox Tabs */
.inbox-tab {
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
    transition: 0.3s;
}
.inbox-tab.active {
    border-bottom-color: var(--primary);
}

/* Report Button */
.btn-report {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 10px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: 0.3s;
}
.btn-report:hover {
    background: rgba(177,136,94,0.1);
    box-shadow: 0 5px 15px rgba(177,136,94,0.2);
}
.btn-report.generating {
    background: var(--primary);
    color: #000;
    pointer-events: none;
    animation: reportPulse 1.5s infinite;
}
@keyframes reportPulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* ==========================================================================
   FASE 32: CINEMATIC MODAL (EXPLORAR)
   ========================================================================== */
.cinematic-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cinematic-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
.cinematic-modal-container {
    width: 90%;
    max-width: 900px;
    background: #0a0a0a;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transform: scale(0.95) translateY(20px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 40px 100px rgba(0,0,0,0.9), 0 0 0 1px rgba(177,136,94,0.3);
}
.cinematic-modal-overlay.active .cinematic-modal-container {
    transform: scale(1) translateY(0);
}
.cinematic-modal-close {
    position: absolute;
    top: 20px; right: 20px;
    width: 40px; height: 40px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s;
    backdrop-filter: blur(10px);
}
.cinematic-modal-close:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: scale(1.1) rotate(90deg);
}
.cinematic-modal-hero {
    width: 100%;
    height: 350px;
    background-size: cover;
    background-position: center;
    position: relative;
}
.cinematic-modal-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #0a0a0a 0%, transparent 100%);
}
.cinematic-modal-content {
    padding: 0 3rem 3rem 3rem;
    position: relative;
    margin-top: -60px;
    z-index: 5;
}
.cinematic-modal-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: #fff;
    margin: 0 0 10px 0;
    text-shadow: 0 4px 10px rgba(0,0,0,0.8);
}
.cinematic-modal-meta {
    display: flex;
    gap: 15px;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 20px;
}
.cm-match { color: #4CAF50; text-shadow: 0 0 10px rgba(76,175,80,0.4); }
.cm-age { border: 1px solid rgba(255,255,255,0.4); padding: 2px 6px; border-radius: 4px; color: #fff; }
#cinematic-modal-type { color: #cbd5e1; }
.cinematic-modal-desc {
    font-size: 1.05rem;
    color: #cbd5e1;
    line-height: 1.6;
    max-width: 600px;
    margin-bottom: 30px;
    font-weight: 300;
}
.cinematic-modal-actions {
    display: flex;
    gap: 15px;
}
.cm-btn-play {
    background: #fff;
    color: #000;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    display: flex; align-items: center; gap: 8px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.cm-btn-play:hover {
    background: var(--primary);
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(177,136,94,0.5);
}
.cm-btn-add {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    display: flex; align-items: center; gap: 8px;
    cursor: pointer;
    transition: all 0.3s;
    backdrop-filter: blur(5px);
}
.cm-btn-add:hover {
    background: rgba(255,255,255,0.2);
    border-color: #fff;
}

@media (max-width: 768px) {
    .cinematic-modal-hero { height: 250px; }
    .cinematic-modal-content { padding: 0 1.5rem 2rem 1.5rem; margin-top: -40px; }
    .cinematic-modal-title { font-size: 1.8rem; }
    .cinematic-modal-actions { flex-direction: column; }
    .cm-btn-play, .cm-btn-add { width: 100%; justify-content: center; }
}