/* Asegura que el texto se ajuste responsivamente */
.navbar-brand {
    font-size: 5vw; /* Ajusta el tamaño del texto según el ancho del viewport */
    text-align: center !important; /* Asegura que el texto esté centrado */
    padding: 10px 20px; /* Espacio alrededor del enlace */
    width: 100%; /* Asegura que el elemento ocupe todo el ancho disponible */
    box-sizing: border-box; /* Incluye padding en el cálculo del ancho */
    overflow: hidden; /* Asegura que el texto no se desborde */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
}

/* Estilo para el texto amarillo */
.navbar-brand .text-warning {
    font-weight: bold; /* Resalta el texto amarillo */
}

/* Ajuste para pantallas medianas (tabletas) */
@media (max-width: 1024px) {
    .navbar-brand {
        font-size: 3.9vw !important; /* Ajuste dinámico pero más moderado */
        padding: 8px; /* Ajuste de padding */
        white-space: nowrap; /* Evita que el título se divida en varias líneas */
        overflow: hidden; /* Asegura que no se desborde el texto */
        text-overflow: ellipsis; /* Añade puntos suspensivos si el texto es demasiado largo */
    }
}

/* Ajuste para pantallas de tamaño pequeño (celulares) */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 7vw; /* Ajusta el tamaño para pantallas más pequeñas */
        padding: 6px; /* Ajuste de padding */
    }
}

/* Ajuste para pantallas muy pequeñas (celulares pequeños) */
@media (max-width: 576px) {
    .navbar-brand {
        font-size: 8vw; /* Reduce el tamaño aún más en pantallas muy pequeñas */
        padding: 5px; /* Ajuste de padding */
    }
}











/* EFECTOS DE ENTRADA */

body {
    font-family: 'Arial', sans-serif;
}

/* Estilos generales para animaciones */
.animate {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate.show {
    opacity: 1;
    transform: translateY(0);
}

.animate.hide {
    opacity: 0;
    transform: translateY(-50px);
}

/* Transiciones y animaciones específicas para diferentes elementos */
h1, h2, h3, h4, h5, h6 {
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

p {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

img, video {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    border-radius: 10px; /* Estilo adicional */
}

.gallery-item {
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Ajustes responsive */
@media (max-width: 768px) {
    .gallery-item {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .gallery-item {
        grid-template-columns: 1fr;
    }
}














/* Moviles Bodyyy Margen Para Todooo */
@media (max-width: 991px) {
    body {
        margin: 10px; /* Añadir margen para que el borde se vea en móviles */
        border: 1px solid #ddd; /* Añadir borde visible */
    }

    .navbar {
        margin: 10px; /* Añadir margen para que el borde se vea en móviles */
        border: 1px solid #ddd; /* Añadir borde visible */
        background: linear-gradient(to bottom, rgba(0, 123, 255, 0.6), rgba(255, 255, 255, 0.6)) !important;
    }

    .navbar-nav {
        margin-top: 1rem;
        border-top: 1px solid #ddd;
        padding-top: 1rem;
        display: flex;
        flex-direction: column;
    }

    .nav-item {
        margin-bottom: 0.5rem;
    }
}

@media (min-width: 992px) {
    .navbar-nav {
        gap: 1rem;
        justify-content: center;
    }

    .navbar {
        justify-content: space-between;
    }
}


body{
    background-color: #0e0f0e;
}








/* Estilos de Navbar */
.navbar {
    background-color: #f5f5f5;
    padding: 0.8rem 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
}

.navbar {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Estilo cuando el navbar está fijo */
.fixed-top {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(169, 169, 169, 0.6)); /* Degradado de gris a blanco con transparencia */
    box-shadow: 0 4px 8px #050505; /* Sombra para dar profundidad */
    z-index: 1000; /* Asegúrate de que esté sobre otros elementos */
}



/* Marca del sitio con colores elegantes */
.navbar-brand {
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 1px;
    color: #333;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

.navbar-brand .text-warning {
    color: #ffb400;
    margin: 0 0.2rem;
}

/* Menú y enlaces */
.navbar-nav {
    margin-left: auto;
}

.nav-link {
    color: #555;
    padding: 0.5rem 1.2rem;
    font-size: 1.1rem;
    transition: color 0.3s, background-color 0.3s;
}

.nav-link:hover {
    color: #ffb400;
    background-color: rgba(255, 180, 0, 0.1);
    border-radius: 5px;
}

/* Botón de menú móvil */
.navbar-toggler i {
    font-size: 24px; /* Tamaño del ícono */
    color: #f8f4f4; /* Color del ícono */
}




.nav-item .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px; /* Espacio entre los íconos */
    font-size: 1em; /* Ajuste del tamaño de fuente */
    background: linear-gradient(to right, #f0e3e3,#e21c1cf8 );
    color: #fff; /* Texto blanco */
    border: none;
    border-radius: 25px; /* Bordes redondeados */
    padding: 10px 20px; /* Espaciado interno */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Sombra en el texto */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para darle profundidad */
    transition: transform 0.3s, box-shadow 0.3s; /* Transición suave para hover */
    text-decoration: none; /* Quita el subrayado */
}

.nav-item .btn:hover {
    background-color: #0056b3; /* Color más oscuro al pasar el mouse */
    transform: scale(1.05); /* Efecto de agrandamiento al hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Sombra más marcada al hover */
}




.nav-item .btn i {
    font-size: 1.2em; /* Ajuste del tamaño de los íconos */
}


/* Adaptabilidad y alineación */
@media (min-width: 992px) {
    .navbar-nav {
        gap: 1rem;
        justify-content: center;
    }
    .navbar {
        justify-content: space-between;
    }
}

/* Ajustes en dispositivos pequeños */
@media (max-width: 991px) {
    .navbar-nav {
        margin-top: 1rem;
        border-top: 1px solid #ddd;
        padding-top: 1rem;
        display: flex;
        flex-direction: column;
    }
    .nav-item {
        margin-bottom: 0.5rem;
    }
}









/* SECCION DE BIENVENIDA */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


#bienvenida_seccion {
    background: linear-gradient(45deg,  #101111,#42a5f5); /* Gradiente de colores más llamativo */
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    padding: 3rem;
    text-align: center;
    animation: slideInLeft 1s ease-out;
}

#titulo_bienvenida {
    font-size: 3rem;
    font-weight: bold;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

#mensaje_bienvenida {
    font-size: 1.4rem;
    margin-bottom: 2rem;
}

#boton_cotizacion {
    background: linear-gradient(45deg, #42a5f5, #101111); /* Gradiente de colores más llamativo */
    border: none;
    color: #fff;
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 1.2rem;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
    animation: pulse 2s infinite;
}

#boton_cotizacion:hover {
    background-color: #e2ad3b;
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

#contenedor_redes {
    margin-top: 2rem;
}

.icono_red {
    color: #fff;
    background: linear-gradient(45deg, #101111,#42a5f5); /* Gradiente de colores más llamativo */
    font-size: 2rem;
    margin: 0 10px;
    padding: 14px;
    border-radius: 50%;
    transition: background-color 0.3s, transform 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
}

.icono_red:hover {
    background: linear-gradient(45deg, #1565c0, #26c6da);
    transform: scale(1.2);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); /* Sombra más intensa */
}

.circle-img {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 50%;
    border: 4px solid #fff;
    transition: transform 0.3s, box-shadow 0.3s;
    display: inline-block;
    margin: 5px; /* Espaciado entre las imágenes */
}

.circle-img:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.circle-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Animación de pulso */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@media (max-width: 768px) {
    .circle-img {
        width: 80px;
        height: 80px;
        overflow: hidden;
        border-radius: 50%;
        border: 3px solid #fff;
        margin: 10px auto;
        transition: transform 0.3s, box-shadow 0.3s;
        display: inline-block;
    }

    .circle-img:hover {
        transform: scale(1.15);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }

    .circle-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.3s;
    }

    .circle-img:hover img {
        opacity: 0.8;
    }

    #bienvenida_seccion {
        padding: 2rem 1rem;
        text-align: center;
    }

    .row > .col-12 {
        display: flex;
        justify-content: center;
    }

    .row > .col-12 > .circle-img:nth-child(n+4) {
        display: none; /* Oculta todas las imágenes a partir de la cuarta */
    }

    #titulo_bienvenida {
        font-size: 2rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    #mensaje_bienvenida {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
    }

    #boton_cotizacion {
        font-size: 1rem;
        padding: 12px 20px;
        margin-top: 1rem;
        transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
        animation: pulse 2s infinite;
    }

    #contenedor_redes {
        margin-top: 1.5rem;
    }

    .icono_red {
        font-size: 1.5rem;
        padding: 10px;
        margin: 0 5px;
        transition: background-color 0.3s, transform 0.3s;
    }

    .icono_red:hover {
        transform: scale(1.1);
    }
}
















/* Formulario */
#miFormulario {
    box-shadow: 0 4px 8px rgba(43, 2, 224, 0.959);
    transition: all 0.3s ease;
    padding: 20px;
    margin: 0 auto; /* Centrado horizontal */
    max-width: 500px; /* Ancho máximo */
    background: linear-gradient(135deg, #000000, #666666); /* Degradado de negro a gris */
    color: white; /* Para que el texto se vea bien sobre el fondo oscuro */
}
#miFormulario:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    background: linear-gradient(to bottom, rgba(0, 123, 255, 0.6), rgba(255, 255, 255, 0.6)) !important;
}
.form-group label {
    font-weight: bold;
    color: #fff; /* Etiquetas en blanco para destacar sobre el fondo oscuro */
}
.form-control {
    border-radius: 8px;
    font-size: 1rem;
}
.btn {
    border-radius: 25px;
    padding: 10px;
    font-size: 1.1rem;
}
.fas {
    color: rgba(11, 96, 224, 0.979);
}

@media (max-width: 576px) {
    #miFormulario {
        padding: 20px;
    }
}
@media (min-width: 577px) {
    #miFormulario {
        padding: 30px;
        margin-top: 50px; /* Ajuste para que no esté pegado a la parte superior */
    }
}



















/* GALERIA PRINNCIPAL */
.gallery-container {
    max-width: 90%;
    margin: 0 auto;
    padding: 20px;
    background-color: #f5f5f5; /* Color de fondo suave */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra suave */
    background: linear-gradient(to bottom, rgba(0, 123, 255, 0.6), rgba(255, 255, 255, 0.062)) !important;
  }
  
  /* Contenedor de las imágenes */
  .gallery {
    display: flex;
    flex-wrap: wrap; /* Permite el ajuste en varias líneas */
    gap: 10px; /* Espacio entre los elementos */
  }
  
  /* Estilo de las imágenes de la galería */
  .gallery-image {
    flex: 1 1 calc(33.333% - 10px); /* Tres imágenes por fila, menos el espacio entre ellas */
    height: 200px; /* Altura fija */
    object-fit: cover; /* Asegura que las imágenes cubran el área sin distorsión */
    border-radius: 8px; /* Bordes redondeados */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    width: 100%; /* Asegura que las imágenes no se desborden del contenedor */
    max-width: 100%; /* Asegura que las imágenes no se estiren más allá del contenedor */
  }
  
  /* Efecto hover en las imágenes */
  .gallery-image:hover {
    transform: scale(1.05); /* Efecto de zoom en hover */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* Sombra más pronunciada en hover */
  }
  
  /* Estilo del título */
  .gallery h1 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 20px;
    color: #333; /* Color del texto */
    font-family: 'Arial', sans-serif; /* Fuente moderna */
  }
  
  
  
  /* El Modal (fondo) */
 /* Estilo para el modal */
/* Estilo para el modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .modal-contenido {
    margin: 0;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    animation-name: zoom;
    animation-duration: 0.6s;
    position: relative;
  }
  
  #caption {
    margin: 10px auto;
    text-align: center;
    color: #333;
    font-size: 16px;
    font-weight: bold;
  }
  
  @keyframes zoom {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1);
    }
  }
  
  .cerrar {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #333;
    font-size: 24px;
    font-weight: bold;
    background: #f1f1f1;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
  }
  
  .cerrar:hover {
    background-color: #333;
    color: #f1f1f1;
  }
  
  /* Responsive styling */
  @media (max-width: 768px) {
    .modal-contenido {
      width: 95%;
    }
  }
  
  
  








/* GALERIA DOSSSSS */
.galeria{
    background: linear-gradient(to bottom, rgba(0, 123, 255, 0.6), rgba(255, 255, 255, 0.062)) !important;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


.slider{
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: rotate 30s linear infinite;
}


@keyframes rotate {
    0% {
        transform: perspective(1000px) rotateY(0deg);
    }
    100% {
        transform: perspective(1000px) rotateY(360deg);
    }
}

.slider span {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    transform-origin: center ;
    transform-style: preserve-3d;
    transform: rotateY(calc(var(--i) * 45deg )) translateZ(350px);
}

.slider span img {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
    transition: 2s;
}

.slider span:hover img {
    transform: translateY(-50px) scale(1.2);
}

/* Media Queries para dispositivos móviles */
@media (max-width: 768px) {
    .galeria {
        height: auto; /* Permitir que la galería se ajuste automáticamente en altura */
        padding: 80px; /* Añadir espacio alrededor del contenido */
    }
    
    .slider {
        max-width: 90%; /* Asegurarse de que el slider no ocupe más del 90% del ancho */
        margin: 0 auto; /* Centrar el slider */
    }

    .slider span {
        transform: rotateY(calc(var(--i) * 145deg)) translateZ(190px); /* Aumentar translateZ para separar los elementos */
    }

    .slider span img {
        transform: none; /* Evitar transformación en hover en pantallas muy pequeñas */
    }

    .slider span:hover img {
        transform: none; /* Evitar transformación en hover en pantallas muy pequeñas */
    }

    .slider{
        position: relative;
        width: 190px;
        height: 190px;
        transform-style: preserve-3d;
        animation: rotate 30s linear infinite;
    }
}










/*VIDEOS */

.video-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px;
    animation: fadeIn 1s ease-in-out;
    background: linear-gradient(to bottom, rgba(0, 123, 255, 0.6), rgba(255, 255, 255, 0.062)) !important;
}

.video-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* Mantener el aspecto 16:9 */
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.video-container:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilo responsive para móviles */
@media (max-width: 768px) {
    .video-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .video-gallery {
        grid-template-columns: 1fr;
    }
}















/* BOTON WPP Y ANIMACIONES  */
.whatsapp-button {
    position: fixed;
    bottom: 80px; /* Cambia de 20px a 80px o ajusta según el tamaño del menú */
    left: 20px;
    background-color: #25d366;
    color: #fff;
    font-size: 1.8rem;
    padding: 0.8rem;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    text-align: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Animación en hover */
.whatsapp-button:hover {
    background-color: #1ebd5b;
    transform: scale(1.1);
}

@media screen and (max-width: 768px) {
    .whatsapp-button {
        bottom: 125px; /* Ajusta según el tamaño del menú inferior */
        left: 15px; /* Reduce el margen para pantallas pequeñas */
        padding: 0.6rem; /* Tamaño más compacto */
        font-size: 1.6rem; /* Ajusta el tamaño del icono/texto */
    }
}

/* Animación de pulso para llamar la atención */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.whatsapp-button {
    animation: pulse 2s infinite;
}

















/* Estilo para el footer */
/* Footer estilos */
.footer {
    background-color: #1c1c1c;
    color: #f0f0f0;
    font-family: 'Arial', sans-serif;
}

.footer h5 {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
}

.footer a {
    color: #f0f0f0;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: #ffb400;
}

/* Iconos de redes sociales */
.footer .fab {
    font-size: 1.5rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.footer .fab:hover {
    color: #ffb400;
    transform: scale(1.1);
}

/* Distribución en dispositivos grandes */
@media (min-width: 768px) {
    .footer .navbar-nav {
        display: flex;
    }
    .footer .navbar-nav .nav-link {
        margin: 0 1rem;
        font-size: 1rem;
        font-weight: 500;
        text-transform: uppercase;
    }
}

/* Ajustes en dispositivos móviles */
@media (max-width: 768px) {
    .footer h5 {
        margin-bottom: 1rem;
    }
}

@media (max-width: 768px) {
    .footer {
        margin: 0 5%; /* Margen a los lados para que no cubra toda la pantalla */
        max-width: 90%; /* Limitar el ancho máximo al 90% del ancho de la pantalla */
        border-radius: 15px; /* Bordes redondeados para un efecto más agradable */
        border: 1px solid #ccc; /* Agregar un borde para que sea visible */
        background: rgba(0, 0, 0, 0.8); /* Mantener el fondo oscuro con un poco de transparencia */
        overflow: hidden; /* Asegurarse de que el contenido se mantenga dentro del borde */
        padding: 0; /* Quitar el padding */
    }
}





/* estilos REDES footer */
.social-links a {
    display: inline-block;
    margin: 5px 0;
    font-size: 1rem;
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 20px;
    background: linear-gradient(45deg, #1da1f2, #007bb5); /* Gradiente de color */
    transition: all 0.3s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.social-links a:hover {
    background: linear-gradient(45deg, #007bb5, #1da1f2);
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.social-links i {
    margin-right: 5px;
}












/* menu FIJO */
/* Estilos para el menú inferior */
#menu-inferior {
    position: fixed;
    bottom: 20px; /* Espacio desde el borde inferior */
    left: 50%;
    transform: translateX(-50%);
    width: 90%; /* Ajuste al 90% del ancho para un buen margen */
    display: flex;
    justify-content: space-around;
    background: rgba(240, 240, 240, 0.9); /* Fondo semi-transparente claro */
    padding: 10px 0;
    border-radius: 20px; /* Bordes redondeados similares a un iPhone */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra suave para efecto de flotación */
}

.icono-menu-inferior {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px; /* Ancho fijo para evitar que se estiren */
    height: 60px; /* Alto fijo para mantener la proporción */
    font-size: 2rem; /* Tamaño de los íconos */
    color: #ffffff; /* Color de los íconos */
    border-radius: 30%; /* Bordes completamente redondeados */
    background: linear-gradient(145deg, #36d1dc, #5b86e5); /* Degradado en tonos azul y turquesa */
    box-shadow: 
        5px 5px 10px rgba(0, 0, 0, 0.1), 
        -5px -5px 10px rgba(255, 255, 255, 0.5), 
        10px 10px 20px rgba(0, 0, 0, 0.1), 
        -10px -10px 20px rgba(255, 255, 255, 0.5); /* Doble sombra suave */
    transition: transform 0.3s ease, color 0.3s ease;
}

.icono-menu-inferior:hover {
    transform: scale(1.1); /* Efecto de agrandamiento al pasar el mouse */
    color: #ffdf00; /* Cambio de color del ícono al pasar el mouse */
}

.icono-menu-inferior i {
    color: #ffffff !important; /* Asegúrate de que los íconos dentro de este contenedor sean blancos */
}
#icono3 i {
    color: rgb(255, 187, 0) !important; /* Cambia el color del ícono a rojo sin importar otros estilos */
}
#icono4 i {
    color: rgb(15, 15, 15) !important; /* Cambia el color del ícono a rojo sin importar otros estilos */
}





/* Estilos para el menú desplegable */
/* Estilos para el menú desplegable */
.menu-desplegable {
    position: fixed;
    top: 30%; /* Ajusta la distancia desde la parte superior para centrar el menú */
    left: 10%;
    width: 80%; /* El menú ocupará el 80% del ancho de la pantalla */
    height: 50%; /* El menú cubrirá solo la mitad de la pantalla */
    background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro semi-transparente */
    display: none; /* Inicialmente oculto */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 20px; /* Bordes redondeados */
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* Sombra más pequeña */
    z-index: 200;
}

/* Estilos para los ítems del menú */
.menu-item {
    background-color: #ffffff;
    color: #333333;
    font-size: 20px;
    padding: 15px 30px;
    margin: 10px 0;
    text-decoration: none;
    width: 80%; /* Ancho de los ítems ajustado al 80% */
    text-align: center;
    border-radius: 10px; /* Bordes más redondeados */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Sombra más pequeña para los ítems */
    transition: background-color 0.3s, transform 0.3s; /* Transición de color y transformación */
}


/* Efecto al pasar el cursor */
.menu-item:hover {
    background-color: #f0f0f0; /* Cambio de color al pasar el cursor */
    transform: scale(1.05); /* Efecto de agrandamiento al pasar el cursor */
}



.menu-item i {
    margin-right: 10px;
}

/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    .menu-item {
        width: 100%;
    }
}

/* Esconde el menú en pantallas de portátiles y otros dispositivos de mayor tamaño */
@media (min-width: 1025px) {
    #menu-inferior {
        display: none !important;
    }
}

    /* Ocultar el menú para pantallas grandes (escritorio) */
    @media (min-width: 768px) {
        .menu-flotante-inferior {
            display: none;
        }
    }