:root {
    --gold: #b8860b;
    --gold-light: #d4af37;
    /* Color piel más claro y sutil (Filtro crema/champán) */
    --skin-filter: rgba(252, 248, 242, 0.82); 
    --glass: rgba(255, 255, 255, 0.88);
}

html, body {
    height: 100%;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    position: relative;
}

/* CAPA 1: La imagen de textura que mandaste */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('images/background_light.png'); 
    background-size: cover;
    background-position: center;
    /* Un blur muy leve para que la textura no distraiga */
    filter: blur(3px); 
    z-index: -2;
}

/* CAPA 2: El filtro color piel claro (Predominante) */
body::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--skin-filter);
    z-index: -1;
}

.container {
    position: relative;
    z-index: 10;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* LOGO: Dorado metálico y con presencia */
.logo-container {
    margin-bottom: 2.8rem;
}

.logo-gold {
    width: 240px; /* Mantenemos el tamaño grande solicitado */
    height: auto;
    margin: 0 auto;
    display: block;
    
    /* NUEVO FILTRO: Dorado Sobrio / Oro Viejo */
    /* 1. Brightness(0) asegura que partimos de negro absoluto.
       2. Sepia teñimos.
       3. Saturate(110%) ES LA CLAVE: muy baja saturación para evitar el amarillo.
       4. Hue-rotate(15deg) lo mueve del amarillo hacia el bronce/oro viejo.
       5. Brightness(70%) lo oscurece para dar contraste sobre el fondo claro. */
    filter: brightness(0) saturate(100%) invert(29%) sepia(96%) saturate(110%) hue-rotate(15deg) brightness(70%) contrast(105%);
    
    /* Sombras más oscuras y nítidas para dar relieve metálico */
    drop-shadow: 0 5px 10px rgba(80, 60, 20, 0.4);
    
    transition: all 0.5s ease;
    user-select: none;
    -webkit-user-drag: none;
}

.logo-gold:hover {
    transform: scale(1.03);
    /* En hover, le damos un brillo metálico muy leve */
    filter: brightness(0) saturate(100%) invert(29%) sepia(96%) saturate(130%) hue-rotate(15deg) brightness(85%) contrast(110%);
}

/* BOTONES: Efecto Glassmorphism refinado */
.link-card {
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    transition: all 0.4s ease;
}

.link-card:hover {
    transform: translateY(-5px);
    background: white;
    border-color: var(--gold-light);
    box-shadow: 0 20px 40px rgba(184, 134, 11, 0.12);
}

/* Efecto de brillo metálico al pasar el mouse */
.shine {
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.6), transparent);
    transform: skewX(-25deg);
    transition: 0.8s;
}

.link-card:hover .shine {
    left: 150%;
}

.icon-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    color: var(--gold-light);
}

/* Redes Sociales */
.social-btn {
    background: white;
    border-radius: 15px;
    border: 1px solid rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}

.social-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
    transform: translateY(-3px);
}

/* Animaciones de entrada */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    animation: revealIn 0.8s ease-out forwards;
}

@keyframes revealIn {
    to { opacity: 1; transform: translateY(0); }
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }