body { font-family: 'Outfit', sans-serif; }
.animate-fade-in {
    opacity: 0;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Selector de idioma */
.lang-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 20px; font-size: 11px;
    font-weight: 700; letter-spacing: 0.05em; border: 1px solid transparent;
    transition: all 0.15s ease; text-decoration: none; color: #6b7280;
}
.lang-btn:hover, .lang-btn.active {
    border-color: #000; color: #000; background: #f9fafb;
}
.lang-btn.active { background: #000; color: #fff; border-color: #000; }

/* Hand-drawn Sketch Animations */
@keyframes drawIn {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}
@keyframes floatUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-1.5deg); }
    75% { transform: rotate(1.5deg); }
}
@keyframes jitter {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-0.5px, 0.5px); }
    50% { transform: translate(0.5px, -0.5px); }
    75% { transform: translate(-0.5px, -0.5px); }
}
.animate-float { opacity: 0; }
.animate-wiggle:hover { }
.animate-draw { }
.animate-jitter { }

/* Sketch border utility */
.sketch-border { border-style: dashed !important; position: relative; }

/* Card hand-drawn style — monochrome sketch */
.card-hand {
    position: relative;
    border: 2px dashed #ccc;
    background: #fff;
    transition: all .3s cubic-bezier(.16,1,.3,1);
}
.card-hand:hover {
    border-color: #000;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    transform: translateY(-3px) rotate(-.5deg);
}
.btn-hand {
    position: relative;
    overflow: hidden;
    transition: all .25s cubic-bezier(.16,1,.3,1);
}
.btn-hand::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,.15) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform .5s ease;
}
.btn-hand:hover::after { transform: translateX(100%); }

.badge-hand {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 20px;
    font-size: 10px; font-weight: 700;
    border: 1.5px dashed;
    transition: all .2s ease;
}

/* Coupon hand-drawn style — monochrome */
.coupon-hand {
    position: relative;
    border: 2px dashed #ccc;
    background: #fff;
    transition: all .25s cubic-bezier(.16,1,.3,1);
    cursor: pointer;
}
.coupon-hand:hover {
    border-color: #000;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    transform: translateY(-2px) rotate(-.5deg);
}

/* Paper texture overlay */
body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 9999;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.015;
    mix-blend-mode: multiply;
}

/* SVG filters for sketchy feel */
.svg-filters { position: absolute; width: 0; height: 0; overflow: hidden; }

:root {
    --retro-ocre: #D4A373;
    --retro-mustard: #E9C46A;
    --retro-orange: #F4A261;
    --retro-coffee: #8D6E63;
}

/* Grain texture overlay for hero */
.hero-grain::after {
    content: '';
    position: absolute; inset: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    pointer-events: none;
    mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes wobble { 0% { transform: rotate(-1.5deg); } 20% { transform: rotate(1.2deg); } 40% { transform: rotate(-0.8deg); } 60% { transform: rotate(0.6deg); } 80% { transform: rotate(-0.3deg); } 100% { transform: rotate(0deg); } }
    .animate-wobble { animation: wobble 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .animate-fade-in {
        animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .animate-float { animation: floatUp .6s cubic-bezier(.16,1,.3,1) forwards; }
    .animate-wiggle:hover { animation: wiggle .3s ease; }
    .animate-draw { animation: drawIn .7s cubic-bezier(.16,1,.3,1) forwards; }
    .animate-jitter { animation: jitter .3s infinite; }
    .ufo-container {
        position: fixed; top: 12%; left: 0; z-index: 1;
        pointer-events: none; animation: ufoFly 28s linear infinite;
    }
    .ufo-container:nth-child(2) {
        top: 65%; animation-delay: 18s; animation-duration: 35s;
    }
    .ufo-saucer { animation: ufoWobble 1.8s ease-in-out infinite; transform-origin: center center; }
    .ufo-light { animation: ufoLight 0.6s ease-in-out infinite alternate; }
    .ufo-light:nth-child(2) { animation-delay: 0.2s; }
    .ufo-light:nth-child(3) { animation-delay: 0.4s; }
    .ufo-beam { animation: ufoBeam 2.5s ease-in-out infinite; transform-origin: top center; }
    .vintage-scanlines::before {
        content: ''; position: fixed; inset: 0; z-index: 9998;
        pointer-events: none;
        background: repeating-linear-gradient(
            0deg,
            transparent, transparent 2px,
            rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px
        );
        animation: scanlineMove 8s linear infinite;
    }
    .radar-arc { animation: radarSpin 2.5s linear infinite; transform-origin: 10px 10px; }
    .radar-pulse { animation: radarPulse 1.5s ease-in-out infinite; }
    .radar-pulse:nth-child(2) { animation-delay: 0.5s; }
    .radar-pulse:nth-child(3) { animation-delay: 1s; }
    .card-float { animation: cardFloat 4s ease-in-out infinite; }
    .stagger-grid > * { animation: fadeIn 0.5s cubic-bezier(0.16,1,0.3,1) forwards; }
    .stagger-grid > *:nth-child(1) { animation-delay: 0s; }
    .stagger-grid > *:nth-child(2) { animation-delay: 0.06s; }
    .stagger-grid > *:nth-child(3) { animation-delay: 0.12s; }
    .stagger-grid > *:nth-child(4) { animation-delay: 0.18s; }
    .stagger-grid > *:nth-child(5) { animation-delay: 0.24s; }
    .stagger-grid > *:nth-child(6) { animation-delay: 0.3s; }
    .stagger-grid > *:nth-child(7) { animation-delay: 0.36s; }
    .stagger-grid > *:nth-child(8) { animation-delay: 0.42s; }
    .stagger-grid > *:nth-child(9) { animation-delay: 0.48s; }
    .stagger-grid > *:nth-child(10) { animation-delay: 0.54s; }
}
/* === UFO Flying Saucer === */
@keyframes ufoFly {
    0% { transform: translate(calc(100vw + 120px), 0) scale(0.6); opacity: 0; }
    5% { opacity: 0.7; }
    85% { opacity: 0.7; }
    95% { transform: translate(calc(-120px), -20px) scale(0.6); opacity: 0.2; }
    100% { transform: translate(calc(-120px), -20px) scale(0.6); opacity: 0; }
}
@keyframes ufoWobble {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    25% { transform: rotate(3deg) translateY(-2px); }
    75% { transform: rotate(-3deg) translateY(2px); }
}
@keyframes ufoLight {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}
@keyframes ufoBeam {
    0%, 100% { opacity: 0; transform: scaleY(0.5); }
    50% { opacity: 0.15; transform: scaleY(1); }
}
.ufo-container {
    position: fixed; top: 12%; left: 0; z-index: 1;
    pointer-events: none;
}
.ufo-container:nth-child(2) {
    top: 65%;
}
.ufo-saucer { transform-origin: center center; }
.ufo-light:nth-child(2) { }
.ufo-light:nth-child(3) { }
.ufo-beam { transform-origin: top center; }

/* === Scanlines vintage === */
@keyframes scanlineMove {
    0% { transform: translateY(0); }
    100% { transform: translateY(4px); }
}
.vintage-scanlines::before {
    content: ''; position: fixed; inset: 0; z-index: 9998;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent, transparent 2px,
        rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px
    );
}
/* Vignette */
.vintage-scanlines::after {
    content: ''; position: fixed; inset: 0; z-index: 9997;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.15) 100%);
}

/* Feed Radar SVG animation */
@keyframes radarSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes radarPulse { 0%, 100% { opacity: 0.15; r: 3; } 50% { opacity: 0.4; r: 5; } }
.radar-arc { transform-origin: 10px 10px; }
.radar-pulse { }

/* Float animation enhancement for cards */
@keyframes cardFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}
.card-float { }

/* Micro-glow for hover states */
.glow-hover { transition: all 0.3s ease; }
.glow-hover:hover { filter: brightness(1.05) drop-shadow(0 0 8px rgba(99,102,241,0.15)); }

/* Stagger fade-in for grid items */
.stagger-grid > * { opacity: 0; }
.stagger-grid > *:nth-child(1) { }
.stagger-grid > *:nth-child(2) { }
.stagger-grid > *:nth-child(3) { }
.stagger-grid > *:nth-child(4) { }
.stagger-grid > *:nth-child(5) { }
.stagger-grid > *:nth-child(6) { }
.stagger-grid > *:nth-child(7) { }
.stagger-grid > *:nth-child(8) { }
.stagger-grid > *:nth-child(9) { }
.stagger-grid > *:nth-child(10) { }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Botón de PayPal */
.btn-paypal {
    background-color: #0070ba !important;
    color: #ffffff !important;
}
.btn-paypal:hover {
    background-color: #005ea6 !important;
}