/* En css/global.css */
:root {
    --bg-color: #050505;
    --text-main: #E5E5E5;
    --text-muted: #888888;
    --gold-accent: #C5A059;
    /* El rojo vino actual (para detalles sutiles) */
    --crimson-pop: #640c0c;
    /* NUEVO: El rojo brillante de la referencia (para impacto) */
    --bright-red: #9c1414; 
    --border-color: #333333;
}
/* ... resto del archivo ... */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: 'Space Grotesk', sans-serif; 
    
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
}

.gold-text { color: var(--gold-accent); }

/* Utilidades */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

/* --- CURSOR PERSONALIZADO (Estilo Radaville) --- */
#cursor-circle {
    position: fixed;
    top: 0;
    left: 0;
    width: 30px; /* Tamaño del círculo */
    height: 30px;
    border: 1px solid var(--gold-accent); /* Borde fino dorado */
    border-radius: 50%; /* Lo hace redondo */
    
    /* Esta es la magia para que no bloquee los clics: */
    pointer-events: none; 
    
    z-index: 9999; /* Siempre encima de todo */
    transform: translate(-50%, -50%); /* Centrado en el puntero */
    
    /* "retraso" suave: */
    transition: transform 0.1s ease, width 0.3s, height 0.3s, background-color 0.3s;
    
    /* Opcional: Mezcla de colores para que se vea "invertido" sobre negro */
    mix-blend-mode: difference; 
}

/* Cuando el mouse se mueva, añadiremos esta clase con JS para moverlo */
body.hovering #cursor-circle {
    width: 60px; /* Se hace más grande al pasar sobre botones */
    height: 60px;
    background-color: rgba(197, 160, 89, 0.1); /* Relleno sutil */
    border-color: transparent;
}

/* CAMBIAR COLOR DE SELECCIÓN - OPCIÓN DORADA */
::selection {
    background-color: #C5A059; /* Tu dorado actual */
    color: #000000;            /* Texto negro para que se lea bien */
}

/* Para Firefox (a veces requiere esto por separado) */
::-moz-selection {
    background-color: #C5A059;
    color: #000000;
}


/* El carril de fondo (Negro total) */
::-webkit-scrollbar {
    width: 8px; /* Muy fina */
    background-color: var(--bg-color); 
}

/* El "pulgar" que se mueve (Gris oscuro sutil) */
::-webkit-scrollbar-thumb {
    background-color: #333; 
    border-radius: 4px; /* Bordes redondeados */
    border: 1px solid var(--bg-color); /* Pequeño margen para que flote */
}

/* Cuando pasas el mouse por la barra (Se ilumina en Dorado) */
::-webkit-scrollbar-thumb:hover {
    background-color: var(--gold-accent); 
}





header.header-luxury {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Borde más sutil */
    
    /* CAMBIO AQUÍ: QUITA EL COLOR SÓLIDO Y PON ESTO */
    background-color: rgba(5, 5, 5, 0.85); /* Negro al 85% */
    backdrop-filter: blur(10px);           /* El efecto de desenfoque de Apple/Windows */
    -webkit-backdrop-filter: blur(10px);   /* Para Safari */
    
    height: 90px;
    width: 100%;
    overflow: hidden;
    
    /* Para que flote sobre el contenido al bajar */
    position: sticky; 
    top: 0;
    z-index: 1000;
}


/* Estado inicial: Invisible y un poco más abajo */
.reveal {
    opacity: 0;
    transform: translateY(30px); /* Un poco menos de movimiento es más elegante */
    /* Especificamos qué animar para evitar parpadeos */
    transition: opacity 1s cubic-bezier(0.5, 0, 0, 1), transform 1s cubic-bezier(0.5, 0, 0, 1);
    will-change: opacity, transform; /* Le avisa al navegador que prepare la GPU */
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   LINKS ULTRA PREMIUM – MAMITAS VIP
========================================== */

/* Estado normal */
a {
    color: var(--gold-accent);
    text-decoration: none;
    transition: 
        color 0.25s ease,
        opacity 0.25s ease,
        text-shadow 0.25s ease;
}

/* Visitado – dorado envejecido elegante */
a:visited {
    color: #b89b5a; /* oro vintage / joyería */
}

/* Hover – brillo fino, no neón */
a:hover {
    color: #e6c97a; /* champagne gold */
    text-decoration: none;
    text-shadow: 0 0 6px rgba(197,160,89,0.25);
}

/* Click */
a:active {
    color: var(--gold-accent);
}

/* ------------------------------------------
   Links especiales (calendario y modales)
------------------------------------------- */

.event-name,
#modal-name a {
    color: var(--gold-accent);
    font-weight: 600;
}

.event-name:visited,
#modal-name a:visited {
    color: #b89b5a;
}

.event-name:hover,
#modal-name a:hover {
    color: #e6c97a;
    text-shadow: 0 0 6px rgba(197,160,89,0.3);
}