.header-container {
    font-size: 1.2rem;
    color: #fff;
    text-align: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh; /* Soporte para viewport dinámico */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    position: relative;
    overflow-x: hidden;
    background-image: url("/static/imgs/social-links/background.01f6a7afd389.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* Cambio de fixed a scroll para mejor compatibilidad */
}

.header-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 2.5rem); /* Aumentado el espaciado para móvil */
    width: 100%;
    padding: clamp(3%, 5vw, 6%) 3% clamp(3%, 5vw, 6%) 3%; /* Reducido padding */
    box-sizing: border-box;
    position: relative;
}

.header-title {
    font-size: clamp(1.8rem, 5vw, 2rem);
    margin: 0;
    font-weight: 700;
}

.header-subtitle {
    font-size: clamp(1rem, 3vw, 1.2rem);
    margin: 0.5rem 0 0 0;
    opacity: 0.9;
}

.header-title-container {
    text-align: center;
    margin-bottom: 1rem;
}

.header-content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 500px; /* Limitar ancho máximo en mobile */
    margin: 0 auto;
}

.social-links-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(1.2rem, 3.5vw, 1.8rem); /* Aumentado el gap para móvil */
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
}

.social-link {
    width: min(85%, 400px); /* Ancho responsivo con máximo */
    display: block;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    overflow: hidden;
    will-change: transform; /* Optimización de performance */
}

.social-link:hover,
.social-link:focus {
    transform: scale(1.03) translateY(-2px);
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

.social-link:active {
    transform: scale(0.98);
    transition-duration: 0.1s;
}

.social-link img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast; /* Mejor renderizado */
}


/* Small Mobile: min-width: 480px */
@media (min-width: 480px) {
    .header-content-container {
        max-width: 600px;
    }

    .social-link {
        width: min(80%, 380px);
    }
}

/* Large Mobile: min-width: 576px */
@media (min-width: 576px) {
    .header-title {
        font-size: clamp(2.2rem, 5vw, 2.4rem);
    }

    .header-subtitle {
        font-size: clamp(1.1rem, 3vw, 1.3rem);
    }

    .social-links-buttons {
        gap: clamp(1.4rem, 4vw, 2rem); /* Aumentado gap para móvil */
    }

    .social-link {
        width: min(75%, 360px);
    }
}

/* Tablet Portrait: min-width: 768px */
@media (min-width: 768px) and (max-width: 1023px) {
    .header-content {
        padding: 2% 3% 3% 3%; /* Reducido padding */
        gap: clamp(1rem, 2vw, 1.5rem); /* Reducido gap */
        justify-content: flex-start; /* Cambio para mejor distribución */
        box-sizing: border-box;
    }

    .header-title {
        font-size: clamp(2.2rem, 4vw, 2.6rem); /* Reducido tamaño */
    }

    .header-subtitle {
        font-size: clamp(1.1rem, 2.5vw, 1.3rem); /* Reducido tamaño */
    }

    .header-content-container {
        max-width: 700px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Cambio para mejor distribución */
    }

    .social-links-buttons {
        gap: clamp(1rem, 2vw, 1.3rem); /* Reducido gap */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 600px;
    }

    .social-link {
        width: min(90%, 480px); /* Reducido tamaño máximo */
        max-width: 480px;
        min-width: 360px; /* Reducido tamaño mínimo */
    }
}

/* Tablet Grande/Portátil: min-width: 900px */
@media (min-width: 900px) and (max-width: 1199px) {
    .header-content {
        padding: 2% 3% 3% 3%; /* Reducido padding */
        gap: 1.2rem; /* Reducido gap */
        justify-content: flex-start; /* Cambio para mejor distribución */
        box-sizing: border-box;
    }

    .header-title {
        font-size: clamp(2.4rem, 3.5vw, 2.6rem); /* Reducido tamaño */
    }

    .header-subtitle {
        font-size: clamp(1.2rem, 2vw, 1.3rem); /* Reducido tamaño */
    }

    .header-content-container {
        max-width: 1000px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Cambio para mejor distribución */
    }

    .social-links-buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(1.2rem, 2vw, 1.8rem); /* Reducido gap */
        width: 100%;
        max-width: 800px;
        justify-items: center;
        align-items: center;
    }

    .social-link {
        width: 100%;
        max-width: 360px; /* Reducido tamaño máximo */
        min-width: 300px; /* Reducido tamaño mínimo */
    }
}

/* Específico para tablets portrait pequeños con altura limitada */
@media (min-width: 768px) and (max-width: 899px) and (max-height: 1100px) {
    .header-content {
        padding: 1.5% 3% 2% 3%; /* Reducido padding aún más */
        gap: 0.8rem; /* Reducido gap */
        justify-content: flex-start;
    }

    .header-title {
        font-size: 2rem; /* Reducido tamaño */
    }

    .header-subtitle {
        font-size: 1rem; /* Reducido tamaño */
    }

    .header-title-container {
        margin-bottom: 0.5rem; /* Reducido margen */
    }

    .social-links-buttons {
        gap: 0.8rem; /* Reducido gap */
    }

    .social-link {
        max-width: 420px; /* Reducido tamaño */
        min-width: 340px; /* Reducido tamaño */
    }
}

/* Tablet Landscape: min-width: 1024px */
@media (min-width: 1024px) {
    .header-content {
        padding: 2% 3% 3% 3%; /* Reducido padding */
        gap: clamp(1rem, 2vw, 1.5rem); /* Reducido gap */
        justify-content: flex-start; /* Cambio para mejor distribución */
        box-sizing: border-box;
    }

    .header-title {
        font-size: clamp(2.4rem, 3vw, 2.8rem); /* Reducido tamaño */
    }

    .header-subtitle {
        font-size: clamp(1.2rem, 2vw, 1.4rem); /* Reducido tamaño */
    }

    .header-content-container {
        max-width: 1200px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Cambio para mejor distribución */
    }

    .social-links-buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(1.3rem, 2.5vw, 2rem); /* Reducido gap */
        max-width: 900px;
        justify-items: center;
        align-items: center;
    }

    .social-link {
        width: 100%;
        max-width: 400px; /* Reducido tamaño máximo */
        min-width: 340px; /* Reducido tamaño mínimo */
    }
}

/* Específico para tablets landscape con altura limitada */
@media (min-width: 1024px) and (max-height: 800px) {
    .header-content {
        padding: 1% 3% 2% 3%; /* Reducido padding aún más */
        gap: 1rem; /* Reducido gap */
        justify-content: flex-start;
    }

    .header-title {
        font-size: 2.2rem; /* Reducido tamaño */
    }

    .header-subtitle {
        font-size: 1.1rem; /* Reducido tamaño */
    }

    .header-title-container {
        margin-bottom: 0.3rem; /* Reducido margen */
    }

    .social-links-buttons {
        gap: 1rem; /* Reducido gap */
    }

    .social-link {
        max-width: 360px; /* Reducido tamaño */
        min-width: 300px; /* Reducido tamaño */
    }
}

/* Small Desktop: min-width: 1200px */
@media (min-width: 1200px) {
    .header-content {
        padding: 2% 3% 3% 3%; /* Reducido padding */
        gap: clamp(1.2rem, 2.5vw, 2rem); /* Reducido gap */
        justify-content: flex-start; /* Cambio para mejor distribución */
        box-sizing: border-box;
    }

    .header-title {
        font-size: clamp(2.6rem, 3.5vw, 3rem); /* Reducido tamaño */
    }

    .header-subtitle {
        font-size: clamp(1.3rem, 2vw, 1.5rem); /* Reducido tamaño */
    }

    .header-content-container {
        max-width: 1300px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Cambio para mejor distribución */
    }

    .social-links-buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(1.5rem, 3vw, 2.5rem); /* Reducido gap */
        max-width: 1000px;
        justify-items: center;
        align-items: center;
    }

    .social-link {
        width: 100%;
        max-width: 460px; /* Reducido tamaño máximo */
        min-width: 380px; /* Reducido tamaño mínimo */
    }
}

/* Large Desktop: min-width: 1400px */
@media (min-width: 1400px) {
    .header-content {
        padding: 2% 3% 3% 3%; /* Reducido padding */
        gap: clamp(1.5rem, 3vw, 2.5rem); /* Reducido gap */
        justify-content: flex-start; /* Cambio para mejor distribución */
        box-sizing: border-box;
    }

    .header-title {
        font-size: clamp(2.8rem, 3.5vw, 3.2rem); /* Reducido tamaño */
    }

    .header-subtitle {
        font-size: clamp(1.4rem, 2vw, 1.6rem); /* Reducido tamaño */
    }

    .header-content-container {
        max-width: 1500px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Cambio para mejor distribución */
    }

    .social-links-buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(2rem, 3vw, 3rem); /* Reducido gap */
        max-width: 1200px;
        justify-items: center;
        align-items: center;
    }

    .social-link {
        width: 100%;
        max-width: 520px; /* Reducido tamaño máximo */
        min-width: 440px; /* Reducido tamaño mínimo */
    }
}

/* Ultra Wide Desktop: min-width: 1920px */
@media (min-width: 1920px) {
    .header-content {
        padding: 2% 3% 3% 3%; /* Reducido padding */
        gap: clamp(2rem, 3vw, 3rem); /* Reducido gap */
        justify-content: flex-start; /* Cambio para mejor distribución */
        box-sizing: border-box;
    }

    .header-content-container {
        max-width: 1800px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Cambio para mejor distribución */
    }

    .social-links-buttons {
        display: grid;
        max-width: 1400px;
        gap: clamp(2.5rem, 4vw, 4rem); /* Reducido gap */
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
        align-items: center;
    }

    .social-link {
        width: 100%;
        max-width: 600px; /* Reducido tamaño máximo */
        min-width: 500px; /* Reducido tamaño mínimo */
    }
}

/* Optimizaciones para dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {
    .social-link:hover {
        transform: none;
    }

    .social-link:active {
        transform: scale(0.95);
        transition-duration: 0.1s;
    }
}

/* Optimización para modo oscuro */
@media (prefers-color-scheme: dark) {
    /* Sin estilos adicionales para modo oscuro ya que no hay box-shadow */
}

/* Optimización para reduced motion */
@media (prefers-reduced-motion: reduce) {
    .social-link {
        transition: none;
    }

    .social-link:hover,
    .social-link:focus {
        transform: none;
    }
}