:root {
    --primary: #0072BE;
}
html {
  scroll-behavior: smooth;
}
@layer base {
    .material-symbols-outlined {
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }
}
.glass {
    background: transparent;
    /* backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); */
    color: #fff;
}
.dark .glass {
    background: rgba(15, 23, 42, 0.7);
}
details summary::-webkit-details-marker {
    display: none;
}
details[open] summary .expand-icon {
    transform: rotate(180deg);
}
.hero-overlay {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.85) 40%, rgba(0, 114, 190, 0.2) 100%);
}

/* ── Header scroll states ──────────────────────────────── */
#site-header {
    transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
#site-header.header-scrolled {
    background: var(--primary) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent !important;
    box-shadow: 0 4px 24px rgba(0, 114, 190, 0.35);
}
/* Links y texto en estado scrolled siempre blancos */
#site-header.header-scrolled a,
#site-header.header-scrolled button,
#site-header.header-scrolled span {
    color: #fff !important;
}
#site-header.header-scrolled .bg-primary {
    background: rgba(255,255,255,0.2) !important;
    box-shadow: none;
}
#site-header.header-scrolled .hover\:bg-slate-200:hover,
#site-header.header-scrolled .dark\:hover\:bg-slate-800:hover {
    background: rgba(255,255,255,0.15) !important;
}

/* ── Modal glass card ──────────────────────────────────── */
.glass-effect {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.dark .glass-effect {
    background: rgba(15, 23, 42, 0.92);
}

/* ── Hero Swiper ───────────────────────────────────────── */
.hero-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.5);
    opacity: 1;
    transition: background 0.3s, transform 0.3s;
}
.hero-swiper .swiper-pagination-bullet-active {
    background: var(--primary);
    transform: scale(1.3);
}
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
    color: #fff;
    background: rgba(0,114,190,0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    transition: background 0.25s;
}
.hero-swiper .swiper-button-prev:hover,
.hero-swiper .swiper-button-next:hover {
    background: var(--primary);
}
.hero-swiper .swiper-button-prev::after,
.hero-swiper .swiper-button-next::after {
    font-size: 18px;
    font-weight: 700;
}

/* ── Scroll Animations ─────────────────────────────────── */
.scroll-animate {
    opacity: 0;
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.scroll-animate.from-bottom { transform: translateY(56px); }
.scroll-animate.from-top    { transform: translateY(-56px); }
.scroll-animate.from-left   { transform: translateX(-72px); }
.scroll-animate.from-right  { transform: translateX(72px); }

.scroll-animate.visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* Stagger helper delays */
.sa-delay-1 { transition-delay: 0.10s; }
.sa-delay-2 { transition-delay: 0.20s; }
.sa-delay-3 { transition-delay: 0.30s; }
.sa-delay-4 { transition-delay: 0.40s; }
.sa-delay-5 { transition-delay: 0.50s; }