/* Reset básico para eliminar márgenes por defecto */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* --- INICIO DEL CAMBIO DE FONDO --- */
    /* Creamos el degradado tornasol con los colores solicitados */
    background: linear-gradient(135deg, #38a0a6 0%, #8652A3 100%);
    /* Importante: Cambiamos el color de texto base a blanco para que contraste */
    color: #ffffff;
    /* --- FIN DEL CAMBIO DE FONDO --- */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

/* Contenedor principal (estilo tarjeta o móvil) */
.container {
    width: 100%;
    max-width: 400px; /* Ancho máximo para que parezca app móvil */
    text-align: center;
    /* Opcional: un fondo semitransparente para que el texto resalte más */
    /* background-color: rgba(255, 255, 255, 0.1); */
    /* padding: 30px 20px; */
    /* border-radius: 20px; */
}

/* --- HEADER --- */
header {
    margin-bottom: 30px;
}

.image-container {
    width: 150px;
    height: 150px;
    margin: 0 auto 15px auto;
    border-radius: 50%; /* Esto crea la máscara circular */
    overflow: hidden; /* Recorta la imagen que se salga del círculo */
    /* Borde ligeramente transparente para integrarse con el fondo */
    border: 4px solid rgba(255, 255, 255, 0.8); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* Sombra un poco más marcada */
}

.profile-pic {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la foto no se deforme */
}

h1 {
    font-size: 1.5rem;
    margin-bottom: 5px;
    /* Eliminamos el color oscuro anterior para que herede el blanco del body */
    font-weight: 700;
}

header p {
    /* Usamos un blanco con un poco de transparencia para dar jerarquía */
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

/* --- BOTONES DE ENLACES --- */
.links-container {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio entre botones */
}

.link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 15px 20px;
    border-radius: 50px; /* Bordes muy redondeados */
    font-weight: bold;
    color: white;
    transition: all 0.3s ease; /* Transición más suave */
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    position: relative;
    border: 2px solid transparent; /* Preparamos borde para el hover */
}

.link-btn i {
    position: absolute;
    left: 20px;
    font-size: 1.2rem;
}

/* Efecto al pasar el mouse */
.link-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    /* Un pequeño brillo blanco al pasar el mouse */
    border-color: rgba(255, 255, 255, 0.4);
}

/* Colores específicos para cada red */
.tiktok {
    background-color: #000000;
}

.instagram {
    /* Hacemos el degradado de Instagram un poco más vibrante */
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.whatsapp {
    background-color: #25D366;
}

/* --- FOOTER --- */
footer {
    margin-top: 40px;
    font-size: 0.8rem;
    /* Color blanco semitransparente para el footer */
    color: rgba(255, 255, 255, 0.6);
}