body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    margin-bottom: 0px; /* Añade un margen inferior al cuerpo para dejar espacio para el footer */
}

header {
    background: linear-gradient(to right, #FFA500, #000);
    color: #FFF; /* Cambiamos el color del texto a blanco */
    padding: 0px;
    text-align: center;
    background-image: url('imagenes/006.jpg'); /* Ruta de la imagen de fondo */
    background-size: cover; /* Ajusta la imagen de fondo para cubrir completamente el encabezado */
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    height: 500px; /* Ajusta la altura del encabezado para que coincida con la imagen de fondo */
    
}

header h1 {
    margin: 0;
    font-family: 'Arial Black', sans-serif; /* Cambiamos la fuente a Arial Black o cualquier otra que prefieras */
    font-size: 36px; /* Tamaño de letra más grande */
    animation: fadeInDown 1s ease-out; /* Agregamos una animación fadeInDown */
}

header p {
    font-family: 'Verdana', sans-serif; /* Cambiamos la fuente a Verdana o cualquier otra que prefieras */
    font-size: 18px; /* Tamaño de letra */
    animation: fadeInUp 1s ease-out; /* Agregamos una animación fadeInUp */
}

header .fusion-word {
    font-family: Tahoma, sans-serif; /* Cambia la fuente de la palabra FUSION a Nunito */
    font-size: 48px; /* Cambia el tamaño de letra de la palabra FUSION a 48px */
    color: hwb(253 2% 72%);
     
    
}

.logo {
    flex: 1; /* O ajusta según tus necesidades */
    flex-wrap: wrap;
    position: absolute;
    top: 20px;
    right: 20px; /* Ajusta la posición según tus preferencias */
    animation: swingLogo 2s infinite alternate; /* Agrega la animación oscilante */
}


@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px); /* Empieza ligeramente arriba */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Termina en su posición normal */
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* Empieza ligeramente abajo */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Termina en su posición normal */
    }
}



@keyframes swingLogo {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(5deg); /* Cambia el ángulo de rotación según tu preferencia */
    }
}

.logo img {
    width: 100px; /* Ajusta el tamaño según el tamaño de tu logo */
    border-radius: 10%; /* Hacemos que la imagen tenga bordes redondeados */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Aplica una sombra difuminada alrededor del logo */
     
}

.slogan {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro con una opacidad del 50% */
    color: white; /* Color del texto blanco para contrastar */
    padding: 10px; /* Añade espacio alrededor del texto para que el fondo sea visible */
    margin-top: -5px; /* Ajusta este valor según sea necesario */
}

nav ul {
    background-color: #7e6969; /* Color de fondo gris claro */
    padding: 0px; /* Ajusta el relleno según sea necesario */
    display: flex; /* Usamos flexbox para distribuir equidistantemente */
    /*justify-content: space-around; /* Distribuye los elementos equidistantemente */
    padding-top: 15px; /* Añade espacio arriba del nav */
    padding-bottom: 15px; /* Añade espacio abajo del nav */
    /*justify-content: space-between;*/
    /*justify-content: center;*/
    flex-wrap: wrap;
    justify-content: space-evenly;
}

nav ul li {
    /*flex-wrap: wrap;*/
    margin: 5px  10px; /* Agrega un margen a los lados de los elementos li */
    padding: 7px;
    max-width: 150px;
    display: inline-block; /* Para que los elementos li se muestren en línea */
}

nav ul li a {
    font-size: 12px; /* Reducir el tamaño de la fuente */
    max-width: 150px; /* Establecer un ancho máximo para los elementos */
    white-space: nowrap; /* Evitar el salto de línea */
       
    color: #fff; /* Color de letra blanco */
    text-decoration: none; /* Elimina el subrayado del enlace */
    padding: 10px 5px; /* Ajusta el relleno para que parezca un botón */
    background-color: #0652a3; /* Color de fondo azul que simula un botón */
    border-radius: 5px; /* Agrega esquinas redondeadas */
    box-shadow: 0 0 10px rgba(0, 0, 0, 1); /* Aplica una sombra difuminada alrededor del logo */
    transition: transform 0.3s ease;    
    transform: translateY(0) scale(1);
    
   }

nav ul li a:hover {
    background-color: hsl(211, 77%, 19%); /* Cambia el color de fondo al pasar el cursor */
    transform: translateY(3px) scale(0.95);
    
}


.container {
    width: 90%; /* Ancho del contenedor del 90% del ancho del viewport */
    margin: 0 auto; /* Centra el contenedor horizontalmente */
}

img {
    max-width: 100%; /* Escala la imagen hasta un máximo del 100% del ancho del contenedor */
    height: auto; /* Mantiene la relación de aspecto original de la imagen */
}

section.specialty {
    position: relative;
    font-size: 18px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
    background-color: #a38752; 
    text-align: center;
    width: 100%;
    padding: 20px;
    display: inline-block;
    margin-bottom: 1px; /* Ajusta el margen inferior según tus preferencias */
}


section.specialty h2 {
    /* Estilos para los títulos de las secciones */
    color: #f7cf08; /* Cambia el color del texto a blanco */
    background-color: rgba(0, 0, 0, 0.3); /* Fondo oscuro con una opacidad del 50% */
    margin-bottom: 1px; /* Ajusta el margen inferior del título h2 según tus preferencias */
    margin-top: 1px; /* Ajusta el margen superior del título h2 según tus preferencias */
}

section.specialty p {
    /* Estilos para los párrafos de las secciones */
    color: #fff; /* Cambia el color del texto a blanco */
    background-color: rgba(0, 0, 0, 0.3); /* Fondo oscuro con una opacidad del 50% */
    margin-bottom: 3px; /* Ajusta el margen inferior según tus preferencias */
    margin-top: 10px; /* Ajusta el margen superiorsegún tus preferencias */
    display: inline-block; /* Cambia el display a inline-block */
    
}

section.specialty img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.3s, box-shadow 0.3s; /* Agrega transición para una animación suave */
    
}
.background-image {
    position: relative;
    overflow: hidden; /* Oculta el exceso de sombra */
    display: flex; /* Utiliza flexbox para centrar verticalmente */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
   /* height: 250px; /* Ajusta la altura según tus preferencias */
    margin-bottom: 0px;

}

section.specialty .background-image {
    position: relative;
    overflow: hidden; /* Oculta el exceso de sombra */
}


section.specialty .background-image img:hover {
    transform: scale(1.05); /* Escala ligeramente la imagen al pasar el cursor */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Añade una sombra más pronunciada al pasar el cursor */
}

#clases,
#trail,
#personalizado,
#planes,
#combinadas,
#funcional {
    position: relative; /* Establece la posición relativa */
    
}


footer {
    display: flex; /* Utilizamos flexbox para distribuir los contenidos */
    flex-direction: column; /* Cambiamos la dirección a columna para que los contenidos estén apilados verticalmente */
    background: linear-gradient(to right, #c78c1e, #000); /* Mismo fondo que el encabezado */
    color: #FFF; /* Color del texto en el footer */
    text-align: center;
    padding: 15px;
    position: relative;
    bottom: 0;
    width: 100%;
    height: auto; /* Ajusta la altura del footer según sea necesario */
    border-bottom: 0;
    border-top: 10px solid transparent; /* Añadimos un borde superior transparente */
    border-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,2)) 1; /* Agregamos el degradado transparente/difuminado en el borde superior */
    justify-content: flex-start;
}


footer p {
    margin-top: auto;
    text-align: center;
}



.footer-content {
    flex: 1; /* Hace que este elemento ocupe el espacio restante */
    display: flex; /* Utilizamos flexbox para organizar los elementos */
    margin-bottom: 10px; /* Agregamos un margen inferior para separar los contenidos */
    justify-content: flex-start;
    align-items: flex-start;
    
}
    

.footer-logo {
    width: 60px; /* Ajusta el tamaño del logo según sea necesario */
    margin-right: 20px; /* Añade un margen derecho al logo para separarlo de los demás elementos */
    width: 80px; /* Ajusta el ancho del logo según sea necesario */
    height: auto; /* Mantiene la relación de aspecto original de la imagen */
    border-radius: 10%; /* Hacemos que la imagen tenga bordes redondeados */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Aplica una sombra difuminada alrededor del logo */
}

.social-media {
    /* Estilos para el contenedor del enlace a las redes sociales */
    position: absolute; /* Establece la posición absoluta para poder usar las propiedades right y bottom */
    right: 20px; /* Ajusta la posición del contenedor desde el lado derecho */
    bottom: 20px; /* Ajusta la posición del contenedor desde la parte inferior */

    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.social-media img {
    /* Estilos para el logo de las redes sociales */
    max-width: 40px; /* Ajusta el ancho máximo del logo según sea necesario */
    max-height: 40px; /* Ajusta el alto máximo del logo según sea necesario */
    margin-right: 10px; /* Ajusta el valor según sea necesario para mover el logo hacia la izquierda */
    border-radius: 10%; /* Hacemos que la imagen tenga bordes redondeados */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Aplica una sombra difuminada alrededor del logo */
    flex: 1; /* O ajusta según tus necesidades */
    position: absolute;
    bottom: 20px;
    right: 20px;
}


.contact-info {
    margin-top: 10px; /* Ajusta el margen superior para separar el nuevo contenido */
}

.contact-info img {
    width: 30px; /* Ajusta el tamaño del logo de WhatsApp según sea necesario */
    margin-right: 10px; /* Ajusta el margen entre el logo y el texto */
    border-radius: 10%; /* Hacemos que la imagen tenga bordes redondeados */
}

/* Estilos para el número de contacto */
.contact-info span {
    font-weight: bold; /* Hace que el número de contacto sea negrita */
    color: #fff; /* Cambia el color del número de contacto */
}

.content-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center; /* Esto centra verticalmente los elementos */
}

header,
nav,
section,
footer {
    width: 100%; /* Establece el ancho al 100% de la pantalla */
    box-sizing: border-box; /* Incluye el ancho del borde y el relleno en el ancho total */
}

/* Estilos generales para dispositivos móviles */
@media only screen and (max-width: 768px) {
    .logo { width: 50px; }

    .slogan {
        margin-top: 20px; /* Ajusta el valor según sea necesario para mover el texto hacia abajo */
    }

    nav ul { font-size: 12px; 
            justify-content: center;
            /*flex-direction: column; /* Cambiar la dirección a vertical */
            /*flex-direction: row; /* Cambiar la dirección a horizontal */
            align-items: center; /* Centrar los elementos horizontalmente */
            text-align: center; /* Centrar el texto horizontalmente */
            margin: 5px 0;
            flex-wrap: wrap;
    }
        
    nav ul li {  
        margin: 0; /* Reduce el margen entre las etiquetas para pantallas pequeñas */
        font-size: 12px; /* Reduce el tamaño de la fuente para pantallas pequeñas */
        max-width: calc(33.33% - 5px); /* Establece un ancho máximo para las etiquetas (3 columnas con margen) */
        white-space: nowrap; /* Evita que las etiquetas se desborden */
        
    }
    nav ul li a {font-size: 12px; /* Reduce el tamaño de la fuente */ 
                padding: 10px;}

    section.specialty { padding: 20px; 
                        font-size: 16px; }

    .footer-content { height: auto; 
                    padding: 10px; 
                    font-size: 12px; }

    footer p {
             font-size: 12px; /* Ajustar el tamaño del texto para pantallas pequeñas */
                    }

    .contact-info img { width: 25px; }

    .social-media { width: 30px; }

    .footer-logo {
        width: 40px;
    }

    .social-media img {
        max-width: 25px;
        max-height: 25px;
        margin: 0 3px; /* Ajusta el margen entre los íconos de redes sociales */
        position: relative; /* Establecer la posición relativa */
        top: -10px; /* Mover el logo hacia arriba */
        right: 10px; /* Mover el logo hacia la derecha */
    }

}