/* ════════════════════════════════════════════════════
   K-RYPTA — UX/UI IMPROVEMENTS
   Análisis con ui-ux-pro-max skill
   Checklist WCAG AA + UX Best Practices
   ════════════════════════════════════════════════════ */

/* ── 1. CONTRASTE WCAG AA ───────────────────────────
   Fix: --text-muted #64748b sobre #030305 = ~3.5:1 ❌
   Fix: elevar a #8896a8 = ~5.1:1 ✅
   ─────────────────────────────────────────────────── */
:root {
    --text-muted: #8896a8;
    /* Era #64748b — ahora pasa WCAG AA */
    --text-sec: #a8b8cc;
    /* Ligeramente más claro para mejor legibilidad */
}

/* ── 2. FOCUS STATES VISIBLES (teclado/accesibilidad)
   La skill exige: visible focus rings en todos los
   elementos interactivos
   ─────────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--accent-neon);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Quitar outline feo en click normal, mantener en teclado */
:focus:not(:focus-visible) {
    outline: none;
}

/* Inputs del formulario */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent-neon);
    outline-offset: 0;
    border-color: var(--accent-neon) !important;
    box-shadow: 0 0 0 4px rgba(176, 38, 255, 0.15) !important;
}

/* ── 3. CURSOR POINTER en elementos interactivos ────
   La skill exige cursor-pointer en cards y elementos
   clicables que no son <button> ni <a>
   ─────────────────────────────────────────────────── */
.blog-card,
.service-card,
.showcase-card,
.faq-item,
.beneficio-item,
.glass-panel,
.plan-card,
[onclick] {
    cursor: pointer;
}

/* ── 4. TOUCH TARGETS — mínimo 44×44px ────────────
   Skill: "Minimum 44x44px touch targets"
   Aplica a botones pequeños de la UI
   ─────────────────────────────────────────────────── */
.btn-cta {
    min-height: 44px;
}

.blog-modal-close {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
}

.navbar-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* ── 5. PREFERS-REDUCED-MOTION ──────────────────────
   La skill marca esto como HIGH priority.
   Usuarios con vestibular disorders / epilepsia
   ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Mantener visibilidad de elementos fade-up */
    .fade-up,
    .fade-in,
    .slide-left,
    .slide-right {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Desactivar partículas y cursor custom */
    #particle-canvas {
        display: none;
    }
}

/* ── 6. HOVER STATES — feedback visual claro ────────
   Skill: "Hover states provide clear visual feedback"
   Cards sin feedback → añadir transición suave
   ─────────────────────────────────────────────────── */
.blog-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    will-change: transform;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 30px rgba(176, 38, 255, 0.12);
    border-color: rgba(176, 38, 255, 0.2);
}

.service-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}

.service-card:hover {
    transform: translateY(-3px);
}

.showcase-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.showcase-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* ── 7. SMOOTH TRANSITIONS — 150-300ms ─────────────
   Skill: "use 150-300ms for micro-interactions"
   Reemplazar transiciones lentas en elems pequeños
   ─────────────────────────────────────────────────── */
.navbar-links a {
    transition: color 0.2s ease;
}

.tag {
    transition: background 0.2s ease, color 0.2s ease;
}

/* ── 8. LINE HEIGHT BODY — 1.5-1.75 ────────────────
   Skill: "Use 1.5-1.75 for body text"
   ─────────────────────────────────────────────────── */
body {
    line-height: 1.65;
}

.blog-modal-body p,
.blog-modal-lead {
    line-height: 1.75;
}

/* ── 9. GLASSMORPHISM UPGRADE ───────────────────────
   Skill recomienda: bg-white/10 backdrop-blur-lg
   border border-white/20 shadow-xl
   Aplicar a todos los glass panels
   ─────────────────────────────────────────────────── */
.glass-panel,
.service-card,
.plan-card,
.blog-card {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ── 10. LOADING STATES — botones async ─────────────
   Skill: "Disable button during async operations"
   Añadir estado visual al botón de contacto
   ─────────────────────────────────────────────────── */
.btn-cta:disabled,
.btn-cta[aria-busy="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── 11. LÍNEA DE LONGITUD — 65-75 chars/línea ──────
   Skill: "Limit to 65-75 characters per line"
   Aplica a texto de contenido de artículos
   ─────────────────────────────────────────────────── */
.blog-modal-body p,
.blog-modal-lead,
.blog-modal-body li {
    max-width: 68ch;
}

/* ── 12. ALT TEXT VISIBLE si imagen no carga ────────
   Accesibilidad básica
   ─────────────────────────────────────────────────── */
img {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ── 13. SCROLL BAR DEL SITIO — más elegante ────────
   Coherencia visual con la estética del sitio
   ─────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: rgba(176, 38, 255, 0.25);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(176, 38, 255, 0.5);
}

/* ── 14. SELECTION COLOR ────────────────────────────
   Coherencia de marca al seleccionar texto
   ─────────────────────────────────────────────────── */
::selection {
    background: rgba(176, 38, 255, 0.3);
    color: #fff;
}

/* ── 15. FAQ items — hover feedback ─────────────────
   ─────────────────────────────────────────────────── */
.faq-item {
    transition: border-color 0.2s ease, background 0.2s ease;
}

.faq-item:hover {
    border-color: rgba(176, 38, 255, 0.2);
    background: rgba(176, 38, 255, 0.03);
}