/* ── Logo hover ── */
.logo-spin {
    transition: transform 0.3s ease, filter 0.3s ease, opacity 0.2s;
}
.group:hover .logo-spin {
    transform: scale(1.08);
    filter: drop-shadow(0 0 8px rgba(240, 164, 0, 0.55));
}

/* ── Navbar underline desde el centro ── */
.nav-link {
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    right: 50%;
    height: 1.5px;
    background-color: #F0A400;
    border-radius: 1px;
    transition: left 0.25s ease, right 0.25s ease;
}
.nav-link:hover::after,
.nav-link.is-active::after {
    left: 12px;
    right: 12px;
}

/* ── Acordeón apps ── */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* Wrapper: solo maneja el bounce vertical (translateY) */
@keyframes arrow-hint {
    0%, 100% { transform: translateY(0); }
    35%      { transform: translateY(6px); }
    65%      { transform: translateY(3px); }
}
.accordion-bounce {
    flex-shrink: 0;
    animation: arrow-hint 0.9s ease 1.2s 3;
}

/* SVG: solo maneja la rotación (transform independiente del bounce) */
.accordion-chevron {
    display: block;
    transition: transform 0.3s ease;
}
details[open] .accordion-chevron {
    transform: rotate(180deg);
}

/* Apertura del cuerpo */
@keyframes accordion-open {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.accordion-body {
    animation: accordion-open 0.2s ease;
}

/* ── Texto neon dorado pulsante ── */
@keyframes neon-glow {
    0%, 100% {
        text-shadow:
            0 0 4px  rgba(240, 164, 0, 0.5),
            0 0 10px rgba(240, 164, 0, 0.25);
    }
    50% {
        text-shadow:
            0 0 8px  rgba(240, 164, 0, 0.9),
            0 0 20px rgba(240, 164, 0, 0.5),
            0 0 36px rgba(240, 164, 0, 0.2);
    }
}
.neon-text {
    color: #F0A400;
    animation: neon-glow 2.8s ease-in-out infinite;
}

/* ── Flecha continua en hover de cards ── */
@keyframes arrow-slide {
    0%, 100% { transform: translateX(0); }
    40%      { transform: translateX(5px); }
    70%      { transform: translateX(3px); }
}
.group:hover .arrow-bounce {
    animation: arrow-slide 0.8s ease infinite;
}

/* ── Card glow ── */
.card-glow {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.card-glow:hover {
    box-shadow: 0 0 28px rgba(240, 164, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* ── Reveal on scroll (fade + slide up) ── */
.reveal-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Pulso sutil en el CTA principal ── */
@keyframes cta-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240, 164, 0, 0.45); }
    50%      { box-shadow: 0 0 0 8px rgba(240, 164, 0, 0); }
}
.cta-pulse {
    animation: cta-pulse 2.2s ease-in-out infinite;
}

/* ── Navbar compacta al hacer scroll ── */
.nav-row, .nav-logo {
    transition: height 0.25s ease;
}
.navbar-shell.nav-compact .nav-row {
    height: 3.25rem;
}
.navbar-shell.nav-compact .nav-logo {
    height: 2rem;
}

/* ── Destello periódico en el logo del navbar (mismo shimmer que .btn-primary, en loop) ──
   El brillo se enmascara con el propio PNG del logo (--logo-mask, seteado inline con
   {% static %} en el template) para que solo ilumine los píxeles opacos del isotipo,
   no el rectángulo completo del contenedor. */
.nav-logo-badge {
    position: relative;
    display: inline-block;
}
.nav-logo-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.95) 50%, transparent 60%);
    background-size: 300% 300%;
    -webkit-mask-image: var(--logo-mask);
    mask-image: var(--logo-mask);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    pointer-events: none;
    z-index: 5;
    animation: logo-shine 4.5s ease-in-out infinite;
}
@keyframes logo-shine {
    0%   { background-position: -100% -100%; opacity: 0; }
    8%   { opacity: 1; }
    30%  { background-position: 200% 200%; opacity: 1; }
    38%  { opacity: 0; }
    100% { background-position: 200% 200%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .nav-logo-badge::after { animation: none; }
}

/* ── Botones CTA primarios (shimmer) ── */
.btn-primary {
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s ease;
    pointer-events: none;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(240, 164, 0, 0.35);
}
.btn-primary:hover::after { left: 160%; }

/* ── Accesibilidad: respetar preferencia de movimiento reducido ──
   Solo apaga animaciones automáticas/en loop (no disparadas por hover directo). */
@media (prefers-reduced-motion: reduce) {
    .accordion-bounce,
    .neon-text,
    .cta-pulse {
        animation: none !important;
    }
    .group:hover .arrow-bounce {
        animation: none !important;
    }
    .reveal-up {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}