/* =========================================
   1. VARIABLES & CONFIGURACIÓN
   ========================================= */
:root {
    --brand-dark: #1c1917;
    --brand-base: #8a3338;
    --brand-vibrant: #ce5e56;
    --brand-light: #fff1f2;
    --brand-surface: #fafaf9;
    
    /* Fuentes */
    --font-sans: 'Inter', sans-serif;
    --font-heading: 'Outfit', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--brand-surface);
    color: var(--brand-dark);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

/* =========================================
   2. ESTILOS VISUALES (Cursor, Gradientes)
   ========================================= */

/* Cursor de máquina de escribir (Estilo EXACTO de prueba.html) */
.typing-cursor::after {
    content: '|';
    animation: blink 1s step-end infinite;
    color: #8a3338;
    margin-left: 2px;
    font-weight: 400;
}

@keyframes move {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(20px, -20px) scale(1.1); }
}

/* Texto con Gradiente */
.text-gradient {
    background: linear-gradient(135deg, #8a3338 0%, #ce5e56 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Navegación Glassmorphism */
.glass-nav {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* Animación de Blobs de fondo */
.blob {
    position: absolute;
    filter: blur(90px);
    z-index: -1;
    opacity: 0.5;
    animation: move 10s infinite alternate;
}

@keyframes move {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(20px, -20px) scale(1.1); }
}

/* =========================================
   3. CARRUSEL INFINITO
   ========================================= */
.carousel-container {
    display: flex;
    overflow: hidden;
    width: 100%;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    padding: 20px 0;
}

.carousel-track {
    display: flex;
    gap: 2rem;
    width: max-content;
    animation: scroll 80s linear infinite; /* Velocidad lenta */
}

.carousel-track:hover {
    animation-play-state: paused;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}

/* =========================================
   4. ANIMACIONES AL SCROLL
   ========================================= */
.opacity-0 { opacity: 0; }
.translate-y-10 { transform: translateY(2.5rem); }
.translate-y-0 { transform: translateY(0); }
.opacity-100 { opacity: 1; }

/* =========================================
   5. BANNER DE COOKIES (FLOTANTE)
   ========================================= */
@keyframes slideInUpBanner {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

#cookie-banner {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 9999;
    width: calc(100% - 4rem);
    max-width: 380px;
    
    background: white;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 1rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0,0,0,0.02);
    
    animation: slideInUpBanner 0.5s ease-out forwards;
    padding: 1.5rem;
}

@media (max-width: 640px) {
    #cookie-banner {
        left: 1rem;
        bottom: 1rem;
        width: calc(100% - 2rem);
    }
}