/* Estilo para el título principal */
.titulo-principal {
    position: absolute; /* Posición absoluta */
    top: 10px; /* Ajusta este valor para moverlo más arriba o abajo */
    left: 50%; /* Centro horizontal */
    transform: translateX(-50%); /* Ajuste para centrar completamente */
    font-size: 3em; /* Tamaño grande */
    font-weight: bold;
    color: #333; /* Cambia el color si deseas */
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    position: relative; /* Necesario para que el título se posicione correctamente */
}



h1 {
    text-align: center;
    color: #333;
    margin: 20px 0;
}

/* Estilo para centrar el contenedor de la lista */
nav {
    text-align: center;
    margin-top: -30px;
}











/* Estilos generales para eliminar puntos de la lista y centrar cada imagen */
ul.lista-especialidades {
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 150px; /* Espacio más moderado entre cada imagen */
    flex-wrap: wrap; /* Permite que las imágenes se ajusten en varias líneas si es necesario */
}

/* Estilos para los elementos de la lista */
ul.lista-especialidades li {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Permite que el texto se alinee debajo de la imagen */
    text-align: center; /* Centra el texto debajo de las imágenes */
    opacity: 0; /* Inicialmente invisibles */
    transform: translateY(20px); /* Desplazados hacia abajo */
    animation: fadeInUp 0.5s forwards; /* Animación de entrada */
}

/* Animación para la entrada de los elementos de la lista */
@keyframes fadeInUp {
    to {
        opacity: 1; /* Hacer visible */
        transform: translateY(0); /* Regresar a la posición original */
    }
}

/* Ajustes de imagen */
ul.lista-especialidades li img {
    width: 250px; /* Ajustado para un ancho más adecuado */
    height: auto; /* Altura automática para mantener la proporción */
    border-radius: 15px; /* Bordes redondeados más pronunciados */
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2); /* Sombra para mayor profundidad */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves para el efecto de zoom */
}

/* Efecto de zoom y rotación al pasar el mouse */
ul.lista-especialidades li img:hover {
    transform: scale(1.1) rotate(3deg); /* Efecto de zoom y ligera rotación */
    cursor: pointer; /* Cambia el cursor al pasar por encima */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); /* Sombra más pronunciada al hacer hover */
}

/* Estilo para los textos de cada especialidad */
ul.lista-especialidades li span {
    margin-top: 8px; /* Espacio entre la imagen y el texto */
    font-size: 16px; /* Tamaño de fuente ajustable */
    color: #555; /* Color del texto más suave */
    font-weight: bold; /* Texto en negrita */
    transform: translateY(10px); /* Desplazado hacia abajo para la animación */
    opacity: 0; /* Inicialmente invisibles */
    animation: fadeInUp 0.5s forwards; /* Animación de entrada para el texto */
    animation-delay: 0.2s; /* Retraso para el texto en la entrada */
}

/* Reutilización de la animación de entrada para el texto */
@keyframes fadeInUp {
    0% {
        opacity: 0; /* Hacer invisible */
        transform: translateY(20px); /* Desplazado hacia abajo */
    }
    100% {
        opacity: 1; /* Hacer visible */
        transform: translateY(0); /* Regresar a la posición original */
    }
}