body {
            background-color: #b5d6d6; /* Lavanda claro */
        }

        header {
    /* 1. Centra el texto dentro del header */
    text-align: center;
    padding: 20px 0; /* Añade un poco de espacio arriba y abajo */
}

h1 {
    /* Opcional: Centrarlo directamente (si el header no es el contenedor) */
    /* text-align: center; */
    
    /* Define un tamaño grande para que el efecto 3D se vea mejor */
    font-size: 3em; 
}

h2 {
    /* Opcional: Centrarlo directamente (si el header no es el contenedor) */
    /* text-align: center; */
    
    /* Define un tamaño grande para que el efecto 3D se vea mejor */
    font-size: 2em; 
}

/* 1. Estilos Base para la Posición */
body {
    /* Centra el contenedor principal */
    text-align: center;
    /* Asegura que haya espacio para que el elemento rebote */
    min-height: 100vh; 
    padding-top: 50px; 
}

/* 2. Definición del Elemento Animado */
.subtitulo-animado {
    font-size: 2em;
    color: black;
    font-family: 'Arial', sans-serif;
    
    /* Configuración de la animación */
    animation: reboteY 5s ease-out forwards; 
    
    /* Posición inicial fuera de la vista */
    transform: translateY(-200px); 
    opacity: 0;
}

/* 3. Definición de los Keyframes (La Función de Animación) */
@keyframes reboteY {
    /* 0% (Inicio): Fuera de vista, invisible */
    0% {
        transform: translateY(-200px);
        opacity: 0;
    }
    
    /* 60% (Caída principal): Llega al centro (0px de desplazamiento) */
    60% {
        transform: translateY(0);
        opacity: 1;
    }
    
    /* 75% (Primer rebote): Supera ligeramente la posición central */
    75% {
        transform: translateY(-20px);
    }
    
    /* 90% (Segundo rebote): Vuelve a caer */
    90% {
        transform: translateY(0);
    }

    /* 95% (Tercer rebote): Pequeño ajuste final */
    95% {
        transform: translateY(-5px);
    }
    
    /* 100% (Final): Se queda centrado y visible */
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Estilos para hacer la imagen más pequeña y circular */
.imagen-circular {
    width: 150px;       /* Ancho deseado de la imagen */
    height: 150px;      /* Alto deseado de la imagen (debe ser igual al ancho para un círculo perfecto) */
    border-radius: 50%; /* Esto es lo que la hace circular: 50% de radio de borde */
    object-fit: cover;  /* Asegura que la imagen cubra el área sin distorsionarse */
    border: 3px solid #ff6347; /* Opcional: un borde bonito alrededor del círculo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Opcional: una sombra suave */
    margin: 20px auto;  /* Centra la imagen si está dentro de un contenedor de bloque */
    display: block;     /* Necesario para aplicar margin: auto */
}

/* Estilos para el botón */
.btn-principal {
    background-color: #ff6347; /* Color de fondo llamativo (rojo tomate) */
    color: white; /* Color del texto */
    padding: 15px 30px; /* Relleno interno para hacerlo más grande */
    border: none; /* Quita el borde predeterminado */
    border-radius: 8px; /* Esquinas redondeadas */
    font-size: 1.2em; /* Tamaño de fuente más grande */
    cursor: pointer; /* Cambia el cursor a una mano (indica que es cliqueable) */
    transition: background-color 0.3s ease; /* Transición suave para el efecto hover */
    margin-top: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Efecto al pasar el mouse por encima (hover) */
.btn-principal:hover {
    background-color: #e5533d; /* Un tono un poco más oscuro al pasar el mouse */
}