/* LosYonkes - Dark/Light mode support */
:root {
    --bg-primary: #111318;
    --bg-secondary: #22262e;
    --bg-tertiary: #0c0e13;
    --text-primary: #e8f0fe;
    --text-secondary: #8ab4f8;
    --text-muted: #4285f4;
    --border-color: rgba(66, 133, 244, 0.25);
    --border-hover: rgba(66, 133, 244, 0.5);
    --accent: #4285f4;
    --accent-hover: #1a73e8;
}

.light {
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f3f4;
    --text-primary: #202124;
    --text-secondary: #1a73e8;
    --text-muted: #3c4043;
    --border-color: rgba(26, 115, 232, 0.18);
    --border-hover: rgba(66, 133, 244, 0.4);
    --accent: #1a73e8;
    --accent-hover: #1967d2;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s, color 0.3s;
}

.bg-card { background-color: var(--bg-secondary); }
.bg-page { background-color: var(--bg-primary); }
.bg-footer { background-color: var(--bg-tertiary); }
.text-main { color: var(--text-primary); }
.text-accent { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.border-theme { border-color: var(--border-color); }
.border-hover:hover { border-color: var(--border-hover); }
.input-theme {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}
.input-theme:focus {
    border-color: var(--accent);
    outline: none;
}
.btn-accent {
    background-color: var(--accent);
    color: white;
}
.btn-accent:hover {
    background-color: var(--accent-hover);
}
.btn-outline {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Sold badge overlay */
.sold-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.sold-badge {
    background: #dc2626;
    color: white;
    padding: 6px 20px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 1.1rem;
    transform: rotate(-12deg);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ==================== ANIMACIONES / VIBRANT ==================== */
@keyframes floatBlob {
    0%   { transform: translate(0,0) scale(1); }
    33%  { transform: translate(40px,-40px) scale(1.15); }
    66%  { transform: translate(-30px,20px) scale(0.9); }
    100% { transform: translate(0,0) scale(1); }
}
@keyframes floatBlob2 {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(-50px,30px) scale(1.2); }
    100% { transform: translate(0,0) scale(1); }
}
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes shine {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.8); }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes tiltIn {
    from { opacity: 0; transform: perspective(800px) rotateX(8deg) translateY(20px); }
    to   { opacity: 1; transform: perspective(800px) rotateX(0) translateY(0); }
}

.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    animation: floatBlob 14s ease-in-out infinite;
    pointer-events: none;
}
.hero-blob2 {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .4;
    animation: floatBlob2 18s ease-in-out infinite;
    pointer-events: none;
}
.marquee-track {
    display: flex;
    gap: 3rem;
    width: max-content;
    animation: marquee 28s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    letter-spacing: .04em;
    opacity: .75;
    transition: opacity .2s;
    white-space: nowrap;
}
.marquee-item:hover { opacity: 1; }

.gradient-text {
    background: linear-gradient(90deg, #4285f4, #a142f4, #f7630c, #4285f4);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shine 6s linear infinite;
}

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

.card-lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-lift:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 18px 40px -12px rgba(66,133,244,.35);
}

.stat-card {
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.stat-card:hover { transform: translateY(-4px); }

.live-dot { position: relative; }
.live-dot::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34a853;
    top: 0;
    right: -12px;
    animation: pulseDot 1.6s ease-in-out infinite;
}

.animate-tilt { animation: tiltIn .5s ease both; }

.brand-chip {
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.brand-chip:hover { transform: translateY(-3px); }

.scroll-strip {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .75rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(66,133,244,.5) transparent;
}
.scroll-strip > * { scroll-snap-align: start; flex: 0 0 auto; }
.scroll-strip::-webkit-scrollbar { height: 6px; }
.scroll-strip::-webkit-scrollbar-thumb { background: rgba(66,133,244,.45); border-radius: 99px; }

@media (prefers-reduced-motion: reduce) {
    .hero-blob, .hero-blob2, .marquee-track, .gradient-text { animation: none; }
    .reveal { opacity: 1; transform: none; }
}