/* style.css */
body { margin: 0; background: #000; font-family: sans-serif; color: white; }

/* Header y Footer */
.header { text-align: center; padding: 40px 20px; }
.logo { max-width: 350px; display: block; margin: 0 auto 20px; }
.social-icons { display: flex; justify-content: center; gap: 20px; font-size: 1.5em; margin-bottom: 20px; }
.social-icons a { color: white; }
.footer { text-align: center; padding: 30px; color: #666; font-size: 0.8em; }

/* Estructura de las filas */
.profile-row { 
    height: 450px; width: 100%; display: flex; align-items: center; 
    background-size: cover; background-position: center; border-top: 1px solid #333;
}

/* Contenedor que agrupa Nombre y Botón y define la posición */
.content-wrapper { 
    width: 90%; max-width: 1200px; margin: 0 auto; 
    display: flex; flex-direction: column;
}

/* --- EFECTOS HOVER --- */

/* Efecto Verde para botones */
.btn-link { 
    background: #fff; color: #000; padding: 12px 35px; 
    border-radius: 50px; text-decoration: none; font-weight: bold; 
    width: fit-content; transition: 0.3s ease; /* Transición suave */
}

.btn-link:hover { 
    background: #99ec12; /* El color verde que pediste */
    color: #000; 
}

/* Efecto Verde para iconos sociales */
.social-icons a { 
    color: white; 
    transition: 0.3s ease; 
}

.social-icons a:hover { 
    color: #99ec12; /* Cambia a verde al pasar el ratón */
}

/* Alineación para La Duque */
.laduque-container { align-items: flex-start; text-align: left; }
/* Alineación para Gleydi */
.gleydi-container { align-items: flex-end; text-align: right; }

/* Texto y Botón (Estilos controlados para que no se estiren) */
.profile-text { font-size: 4em; font-weight: bold; margin-bottom: 15px; }

.btn-link { 
    background: #fff; color: #000; padding: 12px 35px; 
    border-radius: 50px; text-decoration: none; font-weight: bold; 
    width: fit-content; /* ESTO EVITA QUE SE ESTIRE */
}
/* ... (movil) ... */

@media (max-width: 768px) {
    .profile-row { 
        height: 350px; 
        justify-content: center !important; 
    }
    
    /* Ajuste del enfoque para el móvil */
    /* Cambiamos el enfoque de la imagen de La Duque */
    .laduque-row { 
        background-position: center top !important; /* Enfoca la parte superior */
    }
    
    /* Cambiamos el enfoque de la imagen de Gleydi */
    .gleydi-row { 
        background-position: center 20% !important; /* Ajusta el % según necesites ver más cara */
    }

    .content-wrapper { align-items: center !important; text-align: center !important; }
    .profile-text { font-size: 2.5em; }
}