/* NATIVA CONSULTING — public-effects.css
   SOLO @media (min-width: 1024px) — cero GPU triggers en mobile
   Gradientes animados · Glassmorphism · Flip 3D · Tilt · Nav scrolled
*/

@keyframes gradientShift {
    0%, 100% { background-position: 0%   50%; }
    50%       { background-position: 100% 50%; }
}

@media (min-width: 1024px) {

    /* ── CONTADORES — gradiente animado + hover lift ─────── */
    .section-contadores {
        background: linear-gradient(135deg, #2e65a5, #4b75af, #f5f9ff, #0f4695, #08305d);
        background-size: 400% 400%;
        animation: gradientShift 8s ease infinite;
    }
    .contador-item {
        transition: border-color .3s, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
        cursor: default;
    }
    .contador-item:hover {
        border-color: var(--accent);
        transform: translateY(-8px);
        box-shadow: var(--shadow-lg);
    }

    /* ── NAV — glassmorphism al hacer scroll ─────────────── */
    .nav {
        background: transparent;
        border-bottom: 1px solid transparent;
        transition: border-color var(--transition), box-shadow var(--transition);
    }
    .nav::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255,255,255,.92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: -1;
    }
    .nav.scrolled { border-color: var(--border); box-shadow: var(--shadow-sm); }
    [data-theme="dark"] .nav::before { background: rgba(8,15,32,.93); }

    /* ── SERVICIOS — gradiente animado + glassmorphism ───── */
    #servicios {
        background: linear-gradient(135deg, #020e30, #062048, #0d3070, #062048, #020e30);
        background-size: 400% 400%;
        animation: gradientShift 6s ease infinite;
    }
    #servicios .service-card-front {
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        backdrop-filter: blur(var(--glass-blur));
        -webkit-backdrop-filter: blur(var(--glass-blur));
        box-shadow: var(--glass-shadow);
    }
    #servicios .service-card:not(.flipped):hover .service-card-front {
        border-color: var(--glass-border-strong);
        box-shadow: 0 12px 36px rgba(0,0,0,.45);
    }
    #servicios .service-card-back {
        background: linear-gradient(135deg, #0a60a0 0%, var(--primary-dark) 100%);
    }

    /* ── HERO — Vanta FOG: hero-default transparente para que el canvas sea visible */
    .hero-default { background: transparent; position: relative; z-index: 1; }
    .hero-slider  { position: relative; z-index: 1; }

    /* ── FLIP CARD 3D — solo desktop ─────────────────────── */
    .service-card-inner {
        transform-style: preserve-3d;
        transition: transform .65s cubic-bezier(.4,.2,.2,1);
    }
    .service-card:not(.flipped):hover .service-card-inner { transform: rotateY(8deg); }
    .service-card.flipped .service-card-inner { transform: rotateY(180deg); }
    .service-card-front,
    .service-card-back {
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    /* En desktop el back es absoluto y rota; el accordion mobile queda desactivado */
    .service-card-back {
        position: absolute;
        inset: 0;
        transform: rotateY(180deg);
        margin-top: 0;
    }
    .service-card.expanded .service-card-back { display: none; }
    .service-card.flipped  .service-card-back { display: flex; overflow-y: auto; overflow-x: hidden; }

    /* ── ESPECIALISTAS — gradiente animado + glassmorphism ── */
    #especialistas {
        background: linear-gradient(135deg, #020b28, #051840, #0a2260, #051840, #020b28);
        background-size: 400% 400%;
        animation: gradientShift 6s ease infinite;
    }
    #especialistas .team-card {
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        backdrop-filter: blur(var(--glass-blur));
        -webkit-backdrop-filter: blur(var(--glass-blur));
        box-shadow: var(--glass-shadow);
        transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }
    #especialistas .team-card:hover {
        transform: translateY(-4px);
        border-color: var(--glass-border-strong);
        box-shadow: 0 12px 36px rgba(0,0,0,.45);
    }

    /* ── PORTFOLIO — tilt hover ──────────────────────────── */
    .tilt-card {
        transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow var(--transition);
    }
    .tilt-card:hover {
        transform: perspective(1000px) rotateX(2deg) rotateY(-3deg) translateY(-4px);
        box-shadow: var(--shadow-lg);
    }
    .tilt-card:hover .portfolio-card-inner { box-shadow: var(--shadow-lg); }

    /* ── BLOG CARDS — hover lift ─────────────────────────── */
    .blog-card {
        transition: transform var(--transition), box-shadow var(--transition);
    }
    .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

}

/* ── PREFERS-REDUCED-MOTION ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .section-contadores,
    #servicios,
    #especialistas { animation: none !important; }
    .service-card-inner { transition: none !important; }
    .tilt-card:hover { transform: none !important; }
}