@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@700&display=swap');

/* Ocultar elementos de layout globales si se usa el header, 
   pero en esta página no los pondremos. Solo forzamos que 
   el body tenga los estilos específicos de links */
body.links-page {
    margin: 0;
    padding: 0.8rem;
    width: 100%;
    box-sizing: border-box;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: pan-y; /* Solo permite el scroll vertical, bloquea el zoom táctil */
    overflow-x: hidden; /* Evita cualquier desplazamiento horizontal */
    background-image: url('assets/orange-web-background.webp');
    background-repeat: repeat;
    background-position: top left;
    background-attachment: fixed;
}

.container-links {
    background-color: #fffdf9;
    width: 100%; 
    max-width: 28rem;
    padding: 2.5rem 1rem;
    border-radius: 2.5rem; /* 40px */
    box-shadow: 0.091rem 0.085rem 0.625rem 0rem #E8A2AB;
    text-align: center;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    body.links-page {
        padding: 4rem;
    }
    .container-links {
        max-width: 30rem;
        padding: 3.75rem 3.125rem; /* 60px arriba/abajo, 50px laterales */
    }
}

/* Avatar y Título */
.profile-img {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    margin-bottom: 1rem;
}

.links-page h1 {
    font-family: "Gaegu", sans-serif;
    font-size: 2rem; /* 24px */
    letter-spacing: 0.12rem; 
    margin-bottom: 0.313rem; /* 5px */
    font-weight: normal;
    white-space: nowrap;
}

.subtitle {
    font-size: 1em;
    letter-spacing: 0.09rem;
    color: rgba(40,50,56,0.498);
    margin-bottom: 1.875rem; /* 30px */
    font-family: 'Jost', sans-serif;
}

/* Botones */
.links-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.938rem; /* 15px */
}

.link-button {
    width: 100%; 
    max-width: 100%; 
    display: block;
    padding: 0.938rem; /* 15px */
    text-decoration: none;
    border-radius: 2rem; /* 32px */
    font-weight: bold;
    transition: transform 0.2s;
    text-transform: uppercase;
    font-size: 0.875rem; /* 14px */
    letter-spacing: 0.063rem; /* 1px */
    font-family: 'Jost', sans-serif;
}

.link-button:hover {
    transform: scale(1.03);
}

/* Colores personalizados */
.btn-portfolio { background-color: #E1E2FC; color: #8F92D9; }
.btn-shop      { background-color: #FFF7CF; color: #FCC128; }
.btn-prints    { background-color: #FFE6C9; color: #FF8E26; }
.btn-support   { background-color: #DCEEF7; color: #578EF7; }
.btn-freebies  { background-color: #FFE6EB; color: #F5A4B6; }

/* Iconos Sociales */
.social-icons {
    margin-top: 1.875rem; /* 30px */
    display: flex;
    justify-content: center;
    gap: 1.25rem; /* 20px */
}

.social-icons a {
    color: #333;
    font-size: 1.5rem; /* 24px */
    text-decoration: none;
    display: inline-block;
    transition: transform 0.2s;
}

.social-icons a:hover {
    transform: scale(1.1);
}