/* ==========================================================================
   VARIABLES DE COLOR (PALETA OFICIAL GLYDE)
   ========================================================================== */
:root {
    /* Modo Día */
    --bg-main: #f9f5f0;
    --bg-pitch: #f2ebe1;
    --text-color: #2b0d14;
    --card-bg: rgba(255, 255, 255, 0.85);
    /* Filtro para que el logo de fondo destaque con tono grisáceo/burdeo en modo día */
    --watermark-filter: brightness(0.2) sepia(0.3) hue-rotate(310deg);
    --watermark-opacity: 0.10;
}

.dark {
    /* Modo Noche / Pitch */
    --bg-main: #09090b;
    --bg-pitch: #000000;
    --text-color: #f8fafc;
    --card-bg: rgba(20, 10, 15, 0.75);
    /* En modo noche el logo se mantiene blanco/claro original */
    --watermark-filter: none;
    --watermark-opacity: 0.12;
}

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

/* ==========================================================================
   HEADER UNIFICADO (IGUAL EN MODO DÍA Y NOCHE)
   ========================================================================== */
.site-header {
    background-color: #0d0407 !important;
    border-bottom: 1px solid rgba(136, 19, 55, 0.3);
}

.header-brand-title {
    color: #ffffff !important;
}

.header-brand-subtitle {
    color: #ffffff !important;
    opacity: 0.85;
}

/* ==========================================================================
   ESTILOS DE TARJETAS Y EFECTOS GLOSSY
   ========================================================================== */
.glossy-card {
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(136, 19, 55, 0.25);
    box-shadow: 0 20px 40px -15px rgba(136, 19, 55, 0.15);
}

.dark .glossy-card {
    border: 1px solid rgba(225, 29, 72, 0.25);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9), 0 0 35px rgba(136, 19, 55, 0.15);
}

/* ==========================================================================
   LOGOTIPO DE FONDO (WATERMARK GIGANTE Y ADAPTABLE)
   ========================================================================== */
.bg-watermark-logo {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 750px;
    height: 750px;
    background-image: url('../assets/images/glyde-logo-fondo-transparente.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: var(--watermark-opacity);
    filter: var(--watermark-filter);
    pointer-events: none;
    z-index: 0;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Destacar logos oscuros en modo noche */
.dark .brand-logo-glow {
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

/* ==========================================================================
   BOTONES DE REDES PERSONALIZADOS
   ========================================================================== */
.btn-discord-custom {
    background-color: rgba(88, 101, 242, 0.15);
    border: 1px solid rgba(88, 101, 242, 0.3);
    color: #4f5bc1;
}
.dark .btn-discord-custom {
    color: #8ea1e1;
}
.btn-discord-custom:hover {
    background-color: rgba(88, 101, 242, 0.25);
    color: #ffffff;
    border-color: rgba(88, 101, 242, 0.6);
}

.btn-whatsapp-custom {
    background-color: rgba(37, 211, 102, 0.15);
    border: 1px solid rgba(37, 211, 102, 0.3);
    color: #15803d;
}
.dark .btn-whatsapp-custom {
    color: #4ade80;
}
.btn-whatsapp-custom:hover {
    background-color: rgba(37, 211, 102, 0.25);
    color: #ffffff;
    border-color: rgba(37, 211, 102, 0.6);
}