/* ========================================
   HEADER
   Litl Studio Website
   
   - Elementos posicionados en las 4 esquinas
   - Todos con position fixed
   - Siempre visibles sobre todas las capas
   ======================================== */

/* ==================
   HEADER CONTAINER
   ================== */

   .header {
    pointer-events: none;
    position: relative;
    z-index: 1000;
}

/* ==================
   POSICIONAMIENTO EN ESQUINAS
   Todos los elementos son FIXED e independientes
   ================== */

/* Logo - Esquina Superior Izquierda */
.header__logo {
    position: fixed !important;
    top: 2rem !important;
    left: 2rem !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
    
    /* Animación de entrada */
    animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.header__logo img {
    width: 60px;
    height: 60px;
    display: block;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header__logo img:hover {
    transform: scale(1.05);
}

/* Tagline - Esquina Inferior Izquierda */
.header__tagline {
    position: fixed !important;
    bottom: 2rem !important;
    left: 2rem !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
    
    font-size: clamp(0.875rem, 1.2vw, 1rem);
    font-weight: 600;
    color: var(--color-text);
    text-transform: lowercase;
    letter-spacing: -0.02em;
    
    /* Animación de entrada */
    animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

/* Instagram - Esquina Inferior Derecha */
.header__instagram {
    position: fixed !important;
    bottom: 2rem !important;
    right: 2rem !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
    
    font-size: clamp(0.875rem, 1.2vw, 1rem);
    font-weight: 600;
    color: var(--color-text);
    text-transform: lowercase;
    letter-spacing: -0.02em;
    text-decoration: none;
    
    transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Animación de entrada */
    animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

/* Efecto hover en link de Instagram */
/* .header__instagram::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-accent);
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header__instagram:hover {
    color: var(--color-accent);
}

.header__instagram:hover::after {
    width: 100%;
} */

/* ==================
   ANIMACIONES
   ================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================
   RESPONSIVE
   ================== */

/* Tablet */
@media (max-width: 1024px) {
    .header__logo {
        top: 1.5rem !important;
        left: 1.5rem !important;
    }
    
    .header__tagline {
        bottom: 1.5rem !important;
        left: 1.5rem !important;
    }
    
    .header__instagram {
        bottom: 1.5rem !important;
        right: 1.5rem !important;
    }
    
    .header__logo img {
        width: 50px;
        height: 50px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .header__logo {
        top: 1rem !important;
        left: 1rem !important;
    }
    
    .header__tagline {
        bottom: 1rem !important;
        left: 1rem !important;
        font-size: 0.8rem;
    }
    
    /* Ocultar Instagram en mobile */
    .header__instagram {
        display: none !important;
    }
    
    .header__logo img {
        width: 45px;
        height: 45px;
    }
}