/* ==========================================================================
   Squaid - Refined Antigravity UX/UI Design System
   Micro-dot Cursor, Subtle Particles & White Typography on Dark Blue Cards
   ========================================================================== */

/* Canvas de fondo interactivo con opacidad tenue y elegante */
#antigravity-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    opacity: 0.65;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Limpieza absoluta de contenedores e imágenes del Hero */
.hero-visual,
.visual-box,
.page-hero,
.hero-visual *,
.visual-box * {
    box-shadow: none !important;
    background-image: none;
}

/* Corrección de desbordamiento y posicionamiento de tarjetas de programas */
.program-card,
.program-card.featured,
.card.program-card {
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

.program-card.featured {
    z-index: 2;
    background: linear-gradient(145deg, #0b1e36, #1e3a8a) !important;
    border: 2px solid #3b82f6 !important;
    box-shadow: 0 20px 50px rgba(37, 99, 235, 0.25) !important;
}

/* Estilo perfeccionado y alta visibilidad para el Badge .popular */
.popular {
    position: absolute;
    top: -14px;
    right: 20px;
    background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
    color: #ffffff !important;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    z-index: 10;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.35);
    display: inline-block;
}

/* ==========================================================================
   REGLA DE CONTRASTE: Tarjetas con Fondo Azul u Oscuro tienen Letra Blanca
   ========================================================================== */
.program-card,
.program-card.featured,
.card.program-card {
    color: #ffffff !important;
}

.program-card h1, .program-card h2, .program-card h3, .program-card h4,
.program-card.featured h1, .program-card.featured h2, .program-card.featured h3, .program-card.featured h4,
.card.program-card h1, .card.program-card h2, .card.program-card h3, .card.program-card h4 {
    color: #ffffff !important;
    font-weight: 800;
}

.program-card p, .program-card p.muted, .program-card .muted,
.program-card.featured p, .program-card.featured p.muted, .program-card.featured .muted,
.card.program-card p, .card.program-card p.muted, .card.program-card .muted {
    color: #ffffff !important;
    opacity: 0.95;
    line-height: 1.6;
}

.program-card .price, .program-card.featured .price, .card.program-card .price {
    color: #ffffff !important;
    font-weight: 900;
}

.program-card .price small, .program-card.featured .price small, .card.program-card .price small {
    color: #f1f5f9 !important;
    font-weight: 700;
    opacity: 0.9;
}

.program-card .feature-list li,
.program-card.featured .feature-list li,
.card.program-card .feature-list li {
    color: #ffffff !important;
    font-weight: 500;
    font-size: 0.94rem;
}

.program-card .feature-list li::before,
.program-card.featured .feature-list li::before,
.card.program-card .feature-list li::before {
    color: #38bdf8 !important;
    font-weight: 900;
}

/* Tarjetas y Secciones Oscuras / Azul Marino Globales */
.dark-section,
.dark-card,
.card.dark-card,
[style*="background: #0f172a"],
[style*="background: #1e293b"],
[style*="background:#0f172a"],
[style*="background:#1e293b"],
[style*="background: #061a2e"],
[style*="background: #1e3a8a"],
.dark-section .card,
.dark-section .program-card {
    color: #ffffff !important;
}

.dark-card h1, .dark-card h2, .dark-card h3, .dark-card h4, .dark-card h5, .dark-card h6,
.card.dark-card h1, .card.dark-card h2, .card.dark-card h3, .card.dark-card h4, .card.dark-card h5, .card.dark-card h6,
.dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4, .dark-section h5, .dark-section h6,
.dark-section .card h1, .dark-section .card h2, .dark-section .card h3, .dark-section .card h4 {
    color: #ffffff !important;
    font-weight: 800;
}

.dark-card p, .dark-card p.muted, .dark-card .muted, .dark-card span.muted, .dark-card li,
.card.dark-card p, .card.dark-card p.muted, .card.dark-card .muted, .card.dark-card span.muted, .card.dark-card li,
.dark-section p, .dark-section p.muted, .dark-section .muted, .dark-section span.muted, .dark-section li,
.dark-section .lead, .dark-section small, .dark-section .feature-list li,
.dark-section .card p, .dark-section .card .muted {
    color: #ffffff !important;
    font-weight: 450;
    line-height: 1.6;
}

.dark-card strong, .card.dark-card strong, .dark-section strong {
    color: #ffffff !important;
}

.dark-card small, .dark-section small {
    color: #f1f5f9 !important;
}

.dark-card .price, .card.dark-card .price, .dark-section .price {
    color: #ffffff !important;
}

.dark-card .price small, .card.dark-card .price small, .dark-section .price small {
    color: #cbd5e1 !important;
}

.dark-card .feature-list li::before, .dark-section .feature-list li::before {
    color: #38bdf8 !important;
}

/* Píldoras e insignias distintivas */
.pill {
    font-weight: 750;
    letter-spacing: 0.02em;
}

/* Capa de Reflejo Vidriado (Glass Sheen) autosuficiente */
.case-card, [data-ag-clickable="true"] {
    position: relative;
    overflow: hidden;
}

.ag-glass-sheen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        350px circle at var(--ag-sheen-x, 50%) var(--ag-sheen-y, 50%),
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0) 70%
    );
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.35s ease;
    border-radius: inherit;
    overflow: hidden;
}

:hover > .ag-glass-sheen {
    opacity: 1;
}

/* ==========================================================================
   Micro-Punto Cursor Personalizado (Sin Anillo Exterior)
   ========================================================================== */
.ag-cursor-ring {
    display: none !important;
}

.ag-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 5px;
    height: 5px;
    background: #00efff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate3d(-50%, -50%, 0) scale(1);
    box-shadow: 0 0 8px rgba(0, 239, 255, 0.9), 0 0 16px rgba(0, 81, 255, 0.6);
    transition: opacity 0.4s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
    will-change: transform, opacity;
}

.ag-cursor-badge {
    position: fixed;
    top: 0;
    left: 0;
    padding: 4px 10px;
    background: rgba(0, 12, 38, 0.92);
    color: #ffffff;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border-radius: 20px;
    border: 1px solid rgba(0, 239, 255, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 12px rgba(0, 81, 255, 0.35);
    pointer-events: none;
    z-index: 100000;
    transform: translate3d(14px, -50%, 0) scale(0.85);
    opacity: 0;
    white-space: nowrap;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.ag-cursor-badge.ag-visible {
    opacity: 1;
    transform: translate3d(16px, -50%, 0) scale(1);
}

.ag-cursor-dot.ag-hover {
    transform: translate3d(-50%, -50%, 0) scale(1.5);
    background: #00efff;
    box-shadow: 0 0 12px rgba(0, 239, 255, 1);
}

.ag-cursor-inactive {
    opacity: 0 !important;
}

/* Inclinación y Relieve 3D Sutil (EXCLUSIVO para elementos cliqueables) */
.ag-tilt {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.18s cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 0.25s ease;
}

.ag-tilt:hover {
    box-shadow: 0 12px 28px -10px rgba(37, 99, 235, 0.16) !important;
}

/* Botones Magnéticos */
.btn, .btn-primary, .btn-secondary, .brand {
    will-change: transform;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background-color 0.2s ease;
}

/* Desactivación en dispositivos táctiles / móviles */
@media (hover: none), (pointer: coarse), (max-width: 768px) {
    .ag-cursor-dot,
    .ag-cursor-badge {
        display: none !important;
    }
    #antigravity-canvas {
        opacity: 0.35;
    }
}