/* --- 1. Estilos Base y Centrado --- */

html {
    height: 100%;
}

body {
    font-family: 'Arial', sans-serif;
    /* 🎨 Fondo plano azul oscuro del banner */
    background-color: #0077b6; /* Un color similar al del banner */
    margin: 0;
    padding: 0; 
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

.contenedor-principal {
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
    text-align: center;
    /* La sombra en el contenedor simula el diseño del link-in-bio */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    background-color: #0077b6; /* Asegura que el fondo entre los elementos sea el azul */
}

/* --- 2. Estilos del Encabezado (Banner y Foto de Perfil) --- */

.encabezado-imagen {
    position: relative; 
    width: 100%;
    overflow: hidden; 
    background-color: #0d6efd; 
}

.banner-superior {
    width: 100%;
    height: auto; 
    display: block; 
}

/* Foto de perfil superpuesta */
.foto-perfil {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid white; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    
    position: absolute;
    bottom: -50px; 
    left: 50%;
    transform: translateX(-50%); 
    z-index: 10; 
}

/* --- 3. Estilos del Perfil (texto debajo de la foto) --- */

.perfil {
    margin-top: 60px; 
    padding: 0 20px;
    /* Alineación de texto central por defecto, pero alineado a la izquierda para las descripciones */
    text-align: center;
}

.perfil h1 {
    font-size: 1.6em;
    color: white; 
    margin: 5px 0 0;
}

.handle {
    font-size: 1em;
    color: #ade8f4;
    margin: 5px 0 5px 0;
}

.descripcion {
    font-size: 1em;
    color: white; 
    font-weight: 600;
    margin-bottom: 30px;
}

/* --- 4. Estilos de los Botones de Enlace (NUEVO ESTILO) --- */

.enlaces {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 20px 30px 20px; /* Padding inferior para separar del footer */
}

/* Estilo Base de los Botones: Bordes redondeados, fondo azul, texto blanco */
.boton-enlace, .whatsapp-alt, .app-android, .app-ios {
    display: flex; /* Usamos flex para alinear el texto y el (futuro) ícono */
    align-items: center;
    justify-content: center; /* Centra el texto */
    padding: 16px 20px;
    
    /* 🎨 Estilo de Botonera Nueva */
    background-color: #1994e7; /* Azul más vibrante para el botón */
    color: white; /* Texto blanco */
    border: 1px solid #0056b3; /* Borde sutil para darle más definición */
    border-radius: 30px; /* Bordes muy redondeados (Pill shape) */
    
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra para dar efecto 3D */
}

/* Efecto Hover */
.boton-enlace:hover, .whatsapp-alt:hover, .app-android:hover, .app-ios:hover {
    transform: translateY(-1px); /* Ligero levantamiento */
    background-color: #0077b6; /* Oscurece el azul al pasar el mouse */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); 
}

/* Estilos específicos (Ajustados al nuevo esquema de color) */
.boton-enlace.whatsapp, .whatsapp-alt {
    background-color: #25d366; /* WhatsApp Verde */
}
.boton-enlace.whatsapp:hover, .whatsapp-alt:hover {
    background-color: #128c7e;
}


/* --- 5. Estilos del Pie de Página (Footer) --- */

.pie-pagina {
    /* La información de derechos se mantiene, pero añadimos los íconos de contacto */
    margin-top: 10px;
    font-size: 0.85em;
    color: #f0f0f0;
    padding: 0 20px 20px 20px;
}

.iconos-contacto-footer {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 40px; 
}

.iconos-contacto-footer img {
    /* Los íconos en el footer deben ser blancos o claros para contrastar */
    width: 45px; 
    height: 45px;
    /* Filtro para hacer las imágenes blancas si son originalmente negras/oscuras */
    filter: brightness(0) invert(1); 
    transition: transform 0.2s ease;
}

.iconos-contacto-footer img:hover {
    transform: translateY(-3px) scale(1.1); 
    filter: brightness(1) invert(0) saturate(100) hue-rotate(180deg); /* Opcional: un efecto azulado al pasar el mouse */
}