/**
 * SIEMPRE Design System - AstroPay Palette
 * Brand: SIEMPRE by CELTA
 * Palette: #13E8A4, #0B111B, #FFFFFF, #8E98A8
 * =====================================================
 */

:root {
    /* ========================================
       PALETA ASTROPAY (FUENTE DE VERDAD)
       ======================================== */

    /* Color Primario / Acento (Marca) */
    --color-brand-primary: #13E8A4;

    /* Color de Fondo Principal (Oscuro) */
    --color-bg-main: #0B111B;

    /* Color de Texto Principal / Fondos Claros */
    --color-text-primary: #FFFFFF;

    /* Color de Texto Secundario / Elementos Neutros */
    --color-text-secondary: #8E98A8;

    /* ========================================
       VARIABLES DERIVADAS
       ======================================== */

    /* Estados del color primario */
    --color-brand-primary-hover: #1AFFB4;
    --color-brand-primary-active: #0FD994;
    --color-brand-primary-dark: #0FD994;

    /* Superficies y fondos */
    --color-bg-secondary: #111827;
    --color-bg-surface: rgba(17, 24, 39, 0.6);
    --color-bg-elevated: #1F2937;

    /* Transparencias del color primario */
    --color-brand-primary-glow: rgba(19, 232, 164, 0.3);
    --color-brand-primary-subtle: rgba(19, 232, 164, 0.1);
    --color-brand-primary-border: rgba(19, 232, 164, 0.2);
    --color-brand-primary-05: rgba(19, 232, 164, 0.05);
    --color-brand-primary-10: rgba(19, 232, 164, 0.1);
    --color-brand-primary-20: rgba(19, 232, 164, 0.2);
    --color-brand-primary-30: rgba(19, 232, 164, 0.3);
    --color-brand-primary-40: rgba(19, 232, 164, 0.4);

    /* Transparencias de blanco */
    --color-white-05: rgba(255, 255, 255, 0.05);
    --color-white-10: rgba(255, 255, 255, 0.1);
    --color-white-20: rgba(255, 255, 255, 0.2);
    --color-white-30: rgba(255, 255, 255, 0.3);

    /* Transparencias de background */
    --color-bg-main-80: rgba(11, 17, 27, 0.8);
    --color-bg-main-90: rgba(11, 17, 27, 0.9);
    --color-bg-main-95: rgba(11, 17, 27, 0.95);

    /* ========================================
       SPACING SCALE
       ======================================== */

    --space-xs: 0.5rem;
    /* 8px */
    --space-sm: 1rem;
    /* 16px */
    --space-md: 1.5rem;
    /* 24px */
    --space-lg: 2rem;
    /* 32px */
    --space-xl: 3rem;
    /* 48px */
    --space-2xl: 4rem;
    /* 64px */
    --space-3xl: 6rem;
    /* 96px */

    /* ========================================
       TYPOGRAPHY
       ======================================== */

    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Poppins', 'Space Grotesk', sans-serif;

    --font-size-xs: 0.75rem;
    /* 12px */
    --font-size-sm: 0.875rem;
    /* 14px */
    --font-size-base: 1rem;
    /* 16px */
    --font-size-lg: 1.125rem;
    /* 18px */
    --font-size-xl: 1.25rem;
    /* 20px */
    --font-size-2xl: 1.5rem;
    /* 24px */
    --font-size-3xl: 2rem;
    /* 32px */
    --font-size-4xl: 2.5rem;
    /* 40px */
    --font-size-5xl: 3rem;
    /* 48px */
    --font-size-6xl: 4rem;
    /* 64px */

    /* ========================================
       EFFECTS
       ======================================== */

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.25);

    --shadow-brand: 0 0 20px var(--color-brand-primary-30);
    --shadow-brand-lg: 0 0 40px var(--color-brand-primary-40);

    --blur-sm: 8px;
    --blur-md: 16px;
    --blur-lg: 24px;

    /* ========================================
       BORDER RADIUS
       ======================================== */

    --radius-sm: 0.5rem;
    /* 8px */
    --radius-md: 1rem;
    /* 16px */
    --radius-lg: 1.5rem;
    /* 24px */
    --radius-xl: 2rem;
    /* 32px */
    --radius-full: 9999px;

    /* ========================================
       TRANSITIONS
       ======================================== */

    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Glass Morphism */
.siempre-glass {
    background: var(--color-bg-surface);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: 1px solid var(--color-white-10);
}

.siempre-glass-hover {
    transition: all var(--transition-base);
}

.siempre-glass-hover:hover {
    background: var(--color-brand-primary-10);
    border-color: var(--color-brand-primary-30);
    box-shadow: var(--shadow-brand);
    transform: translateY(-4px);
}

/* Brand Glow Effects */
.siempre-glow-text {
    text-shadow: 0 0 20px var(--color-brand-primary-40);
}


/* Gradient Backgrounds */
.siempre-gradient-brand {
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-primary-dark) 100%);
}

.siempre-gradient-dark {
    background: linear-gradient(180deg, var(--color-bg-main) 0%, var(--color-bg-secondary) 100%);
}

.siempre-gradient-overlay {
    background: linear-gradient(135deg, var(--color-bg-main-90) 0%, var(--color-bg-main-80) 100%);
}

/* Buttons */
.siempre-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    font-family: var(--font-heading);
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    cursor: pointer;
    text-decoration: none;
}

.siempre-btn-primary {
    background: var(--siempre-gradient-brand);
    color: var(--color-bg-main);
    box-shadow: var(--shadow-brand);
}

.siempre-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-brand-lg);
}

.siempre-btn-secondary {
    background: transparent;
    color: var(--color-brand-primary);
    border: 2px solid var(--color-brand-primary);
}

.siempre-btn-secondary:hover {
    background: var(--color-brand-primary);
    color: var(--color-bg-main);
}

/* Text Styles */
.siempre-text-gradient {
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-text-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Animations */
@keyframes siempreFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes siemprePulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes siempreGlow {

    0%,
    100% {
        box-shadow: 0 0 20px var(--color-brand-primary-30);
    }

    50% {
        box-shadow: 0 0 40px var(--color-brand-primary-40);
    }
}

.siempre-animate-float {
    animation: siempreFloat 6s ease-in-out infinite;
}

.siempre-animate-pulse {
    animation: siemprePulse 2s ease-in-out infinite;
}

.siempre-animate-glow {
    animation: siempreGlow 3s ease-in-out infinite;
}

/* Animated Border Glow - Rotating effect */
@keyframes borderGlow {
    0% {
        box-shadow:
            0 0 15px 2px rgba(0, 255, 255, 0.4),
            0 0 30px 4px rgba(0, 255, 255, 0.2);
    }

    25% {
        box-shadow:
            5px 5px 20px 3px rgba(0, 255, 255, 0.5),
            10px 10px 35px 5px rgba(0, 255, 255, 0.25);
    }

    50% {
        box-shadow:
            0 10px 25px 4px rgba(0, 255, 255, 0.6),
            0 15px 40px 6px rgba(0, 255, 255, 0.3);
    }

    75% {
        box-shadow:
            -5px 5px 20px 3px rgba(0, 255, 255, 0.5),
            -10px 10px 35px 5px rgba(0, 255, 255, 0.25);
    }

    100% {
        box-shadow:
            0 0 15px 2px rgba(0, 255, 255, 0.4),
            0 0 30px 4px rgba(0, 255, 255, 0.2);
    }
}

.siempre-glow-border {
    animation: borderGlow 4s ease-in-out infinite;
}

/* Promotional Banner Carousel (Native Scroll Snap) */
.promo-banner-carousel {
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
}

.carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    width: 100%;
    height: auto;
    scrollbar-width: none;
    /* Firefox */
}

.carousel-track::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.promo-slide {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    scroll-snap-align: center;
    position: relative;
    /* Removed opacity/transition styles */
}

.promo-slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.promo-indicators {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

.promo-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.promo-indicator:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.2);
}

.promo-indicator.active {
    background: var(--color-brand-primary);
    width: 25px;
    border-radius: 5px;
    border-color: transparent;
}

@media (max-width: 768px) {
    .promo-banner-carousel {
        height: auto;
    }
}

/* Responsive Typography */
@media (max-width: 768px) {
    :root {
        --font-size-6xl: 2.5rem;
        /* 40px on mobile */
        --font-size-5xl: 2rem;
        /* 32px on mobile */
        --font-size-4xl: 1.75rem;
        /* 28px on mobile */
    }
}