/* --- Hero Section (Sobre Mí) CON BURBUJAS --- */
.hero-section {
    background: linear-gradient(135deg, var(--lila-pastel), var(--rosa-pastel));
    padding: 120px 50px;
    border-radius: 0 0 50px 50px;
    box-shadow: 0 10px 20px var(--sombra-suave);
    position: relative; /* Necesario para contener las burbujas */
    overflow: hidden;    /* Para que las burbujas no se salgan de la sección */
}

/* Aseguramos que el texto esté por encima de las burbujas */
.intro-text {
    position: relative;
    z-index: 10;
}

.intro-text h1 {
    font-size: 48px;
    margin-bottom: 10px;
}

.intro-text p {
    max-width: 600px;
    margin: 20px auto;
    font-size: 18px;
}

.btn-principal {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--azul-claro);
    color: var(--texto-oscuro);
    text-decoration: none;
    border-radius: 25px;
    font-weight: bold;
    margin-top: 20px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
}

.btn-principal:hover {
    transform: translateY(-5px);
    background-color: var(--blanco-tarjetas);
}

/* --- ESTILO DE LAS BURBUJAS (NUEVO) --- */
.bubble {
    position: absolute;
    bottom: -100px; /* Empiezan abajo, fuera de vista */
    border-radius: 50%;
    opacity: 0.3; /* Transparentes para no molestar la lectura */
    pointer-events: none; /* Para que no interfieran con los clicks en el botón */
    animation: floatBubbles linear infinite;
}

/* Animación para que suban y giren un poco */
@keyframes floatBubbles {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.3; /* Aparecen suavemente */
    }
    90% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(-100vh) rotate(360deg); /* Suben toda la pantalla */
        opacity: 0; /* Desaparecen al llegar arriba */
    }
}

/* --- ESTILAS PARA LAS ESTRELLAS ANIMADAS DEL FONDO --- */
.fondo-estrellas {
    position: fixed; /* Se queda fijo aunque hagas scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Muy importante: evita que las estrellas bloqueen los clics */
    z-index: -1; /* Manda las estrellas por detrás de todo tu contenido */
    overflow: hidden;
}

.estrella-animada {
    position: absolute;
    width: 50px;
    height: 50px;
    opacity: 1;
    animation: flotarYgirar 6s ease-in-out infinite;
}

/* Posiciones aleatorias para 20 estrellas */
.e1 { top: 15%; left: 10%; animation-duration: 7s; }
.e2 { top: 75%; left: 85%; animation-duration: 5s; width: 35px; height: 35px; animation-delay: 1s; }
.e3 { top: 40%; left: 90%; animation-duration: 8s; width: 15px; height: 15px; animation-delay: 2s; }
.e4 { top: 80%; left: 15%; animation-duration: 6s; animation-delay: 0.5s; }
.e5 { top: 25%; left: 80%; animation-duration: 9s; width: 20px; height: 20px; animation-delay: 1.5s; }
.e6 { top: 5%; left: 50%; animation-duration: 6.5s; width: 18px; height: 18px; animation-delay: 3s; }
.e7 { top: 60%; left: 5%; animation-duration: 7.5s; width: 22px; height: 22px; animation-delay: 0.8s; }
.e8 { top: 90%; left: 50%; animation-duration: 5.5s; width: 12px; height: 12px; animation-delay: 2.5s; }
.e9 { top: 35%; left: 25%; animation-duration: 8.5s; width: 28px; height: 28px; animation-delay: 1.2s; }
.e10 { top: 55%; left: 70%; animation-duration: 6s; width: 16px; height: 16px; animation-delay: 0.3s; }
.e11 { top: 20%; left: 65%; animation-duration: 7.2s; width: 24px; height: 24px; animation-delay: 2.1s; }
.e12 { top: 85%; left: 35%; animation-duration: 5.8s; width: 14px; height: 14px; animation-delay: 1.8s; }
.e13 { top: 10%; left: 85%; animation-duration: 8.1s; width: 30px; height: 30px; animation-delay: 0.7s; }
.e14 { top: 45%; left: 15%; animation-duration: 6.3s; width: 19px; height: 19px; animation-delay: 2.4s; }
.e15 { top: 70%; left: 60%; animation-duration: 7.7s; width: 26px; height: 26px; animation-delay: 1.1s; }
.e16 { top: 30%; left: 5%; animation-duration: 5.2s; width: 15px; height: 15px; animation-delay: 0.9s; }
.e17 { top: 95%; left: 80%; animation-duration: 8.8s; width: 21px; height: 21px; animation-delay: 2.9s; }
.e18 { top: 50%; left: 40%; animation-duration: 6.9s; width: 17px; height: 17px; animation-delay: 1.6s; }
.e19 { top: 25%; left: 45%; animation-duration: 7.4s; width: 23px; height: 23px; animation-delay: 0.4s; }
.e20 { top: 65%; left: 95%; animation-duration: 5.6s; width: 13px; height: 13px; animation-delay: 2.2s; }
/* La animación que las hace respirar y girar */
@keyframes flotarYgirar {
    0% { transform: translateY(0px) rotate(0deg) scale(0.8); opacity: 0.4; }
    50% { transform: translateY(-20px) rotate(180deg) scale(1.1); opacity: 0.8; }
    100% { transform: translateY(0px) rotate(360deg) scale(0.8); opacity: 0.4; }
}