* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: "Open Sans", Arial, Sans-serif;
    font-size: 16px;
}

/* Estilos base para .contenedor */
.contenedor {
    width: 90%;
    max-width: 1000px;
    margin: auto;
    /* overflow: hidden; Eliminado */
}

/* ----- ----- HEADER ----- ----- */
header {
    margin-bottom: -23em;
    font-family: "Open Sans", Arial, Sans-serif;
    font-size: 16px;
    background-color: #C5E4EA;
    /* Color de fondo por defecto en caso de que la imagen no cargue */
       
    /* La ruta a la imagen de fondo */
    background-size: cover;
    /* Establece la anchura y permite que la altura se ajuste automaticamente */
    background-position: center center;
    /* Centra la imagen de fondo */
    background-repeat: no-repeat;
    /* Evita que la imagen se repita */
    background-attachment: fixed;
    /* Evita que la imagen de fondo se desplace con el scroll */
}

#videoBackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}



/* Media query para dispositivos con un ancho de 300px en adelante */
@media (min-width: 300px) {

    #videoBackground {
        object-fit: cover; /* Asegura que el video cubra el nuevo tamaño */
    }

    /* Puedes agregar más ajustes específicos para diferentes elementos dentro del header */
    header .textos {
        font-size: 16px; /* Ajusta el tamaño de fuente según la vista */
        padding: 20px; /* Más padding para mejor legibilidad */
    }
}

/* Ejemplo de ajustes adicionales para pantallas más grandes */
@media (min-width: 768px) {
 
    header .textos {
        font-size: 24px; /* Tamaño de fuente más grande para pantallas más grandes */
    }
}

@media (min-width: 1024px) {
    header .textos {
        font-size: 30px; /* Tamaño de fuente aún mayor para desktops */
    }
}

/* asegurate de que no hay reglas duplicadas o contradictorias  abajo en tu archivo CSS. */
header .contenedor {
    position: relative;
    height: 162px;
}

/* ----- ----- MAIN ----- ----- */
.main {
    background: url('../img/bg-textura.png');
    background-repeat: repeat;
}

/* Estilos del Main y Acerca De */
.main .acerca-de .contenedor {
    top: -1em;
    position: relative;
    overflow: visible;
}

.foto img {
    width: 100%;
    /* O un porcentaje del contenedor padre */
    height: auto;
    /* Mantiene la relaciion de aspecto de la imagen */
}

/* Media query para pantallas de 801px en adelante */
@media screen and (min-width: 801px) {
    .foto img {
        width: 80%;
        max-width: 600px;
        /* Por ejemplo, limita el ancho de la imagen a 600px */
        height: auto;
    }
}

.main .acerca-de .foto {
    width: 80%;
    position: relative;
    left: 0;
    top: -50px;
    z-index: 1;
    /* Debe ser menor que el z-index de las particulas */
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.35);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.35);
}

.main .acerca-de .foto img {
    width: 100%;
    vertical-align: top;
}

.main .acerca-de article {
    background: #0d005c;
    padding: 40px;
    width: 50%;
    position: relative;
    float: right;
    top: 500px;
    /* Con efecto Parallax */
    z-index: 3;
    /* Debe ser mayor que el z-index de la foto pero menor que el de las particulas */
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.35);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.35);
}

/* Estilos base para #particles-js */
#particles-js {
    position: absolute;
    top: -17%;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    /* Mayor que el z-index de .foto para superponerse */
}

/* Media query para pantallas de hasta 800px */
@media screen and (max-width: 800px) {
    #particles-js {
    top: -11%;

    }
}

/* Media query para pantallas de 801px en adelante */
@media screen and (min-width: 801px) {
    #particles-js {
  width: 80%;
        max-width: 600px;

        top: -8%;
        /* Modifica este valor  */
        left: 0%;
        /* Centra horizontalmente las particulas si es necesario */
        right: 10%;
        /* Centra horizontalmente las particulas  */
        position: absolute;
        /* O 'relative' dependiendo de tu layout */
        z-index: 2;
        /* Asegura que las particulas se superpongan como deseas */
    }
}

/*  alto que la foto para que se superponga */
.particles-over-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* Mayor que el z-index de .foto */
}

.main .acerca-de article h3 {
    counter-increment: item;
    font-weight: bold;
    font-size: 46px;
    margin-bottom: 18px;
    list-style-type: none;
    position: relative;
    padding-left: 40px;
    color: #adadff;
    background-color: #000000c7;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5), 2px 2px 0px rgba(0, 0, 0, 0.2), 3px 3px 0px rgba(0, 0, 0, 0.15), 4px 4px 0px rgba(0, 0, 0, 0.1);
    top: 0em;
}

.main .acerca-de article p {
    line-height: 28px;
    margin-bottom: 15px;
}

/* Estilos por defecto que se aplican a todos los tamaños de pantalla */
.main .menu {
    padding-top: 570px;
    margin-bottom: 50px;
}

/* Ajustes de media query para pantallas mas grandes */
@media screen and (max-width: 2000px) {
    .main .menu {
        width: 100%;
        /* Se ajusta al ancho disponible */
        padding-top: 34px;
        margin-bottom: 50px;
        /* Puedes agregar mas estilos si es necesario */
    }
}

/* Ajustes de media query para pantallas mas grandes */
@media screen and (max-width: 1000px) {
    .main .menu {
        width: 100%;
        /* Se ajusta al ancho disponible */
        padding-top: 3px;
        margin-bottom: 50px;
        /* Puedes agregar mas estilos si es necesario */
    }
}

/* Ajustes de media query para pantallas mas grandes */
@media screen and (max-width: 600px) {
    .main .menu {
        width: 100%;
        /* Se ajusta al ancho disponible */
        padding-top: 1px;
        margin-bottom: 50px;
        /* Puedes agregar mas estilos si es necesario */
    }
}

/* Ajustes de media query para pantallas mas grandes */
@media screen and (max-width: 700px) {
    .main .menu {
        width: 100%;
        /* Se ajusta al ancho disponible */
        padding-top: 7px;
        margin-bottom: 50px;
        /* Puedes agregar mas estilos si es necesario */
    }
}

/* Ajustes de media query para pantallas grandes */
@media screen and (max-width: 800px) {
    .main .menu {
        width: 100%;
        /* Se ajusta al ancho disponible */
        padding-top: 106px;
        margin-bottom: 50px;
        /* Puedes agregar mas estilos si es necesario */
    }
}

.main .menu .titulo {
    top: -1em;
        color: #FFC107;
    font-size: 30px;
    text-shadow: 1px 1px 2px #000, 0 0 25px #FFC107, 0 0 5px #FFD54F;
    font-size: 40px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 4px;
    background-color: rgb(0 0 0 / 76%);
    /* Fondo semitransparente */
    padding: 10px;
    /* Ajusta el relleno según sea necesario */
    border: 2px solid white;
    /* Contorno blanco */
}

/* Estilos base para .main .menu .contenedor-menu */
/* Estilos base */


.main .menu article {
    width: 50%;
    float: left;
}

.menu .categoria ol {
    counter-reset: item;
    /* Resetea el contador para los ítems de la lista */
    padding-left: 0;
    /* Remueve el padding predeterminado */
}

.menu .categoria li {
    counter-increment: item;
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 10px;
    list-style-type: none;
    position: relative;
    padding-left: 40px;
    color: #ece969; /* Color de texto blanco para más contraste */
    background-color: #333333d6; /* Fondo oscuro para mejorar el efecto 3D */
    text-shadow: 
        1px 1px 0px rgba(255, 255, 255, 0.5), /* Brillo superior izquierdo */
        2px 2px 0px rgba(0, 0, 0, 0.2), /* Sombra más pronunciada para efecto 3D */
        3px 3px 0px rgba(0, 0, 0, 0.15), /* Extensión de la sombra para profundidad */
        4px 4px 0px rgba(0, 0, 0, 0.1); /* Suavizado de la sombra exterior */
}


.menu .categoria li:before {
    content: counter(item) ". ";
    /* Agrega el número de la lista con un punto */
    position: absolute;
    /* Posición absoluta respecto al `li` */
    left: 10px;
    /* Posición hacia la izquierda */
    font-weight: bold;
    /* Texto en negrita para el número */
    color: #FFD700;
    /* Color amarillo para los números */
    font-size: 18px;
    /* Tamaño de fuente del número */
    text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
    /* Sombra para dar efecto 3D */
}

.main .menu article .platillo {
    position: relative;
    top: 3em;
    overflow: hidden;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 4px dotted #000;
}

.platillo ul {
    list-style-type: disc;
    /* Agrega marcadores como puntos */
    padding-left: 40px;
    /* Asegurate de que hay espacio para los marcadores */
}

.platillo li {
    margin-bottom: 10px;
    /* Espacio entre  abajo en tu CSS */
}

.main .menu article .nombre {
    position: relative;
    right: 0em;
    top: 0.9em;
    font-size: 20px;
    margin-bottom: 15px;
    float: left;
}

.main .menu article .precio {
    float: right;
    font-size: 20px;
    margin-bottom: 15px;
}

.main .menu article .descripcion {
    font-size: 16px;
    color: #000000;
    clear: both;
}

.main .menu .contenedor-menu2 {
    border: 1px solid #000;
    background: transparent;
    padding: 10px;
    overflow: hidden;
}

.main .galeria {
    position: relative;
    overflow: hidden;
    right: -2em;
}

.main .galeria .foto {
    width: 25%;
    float: left;
}

.main .galeria .foto img {
    vertical-align: top;
    width: 100%;
    opacity: .7;
}

.main .galeria .foto img:hover {
    opacity: 1;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.main .ubicacion {
    background: #fff;
    padding: 60px 0;
}

.main .ubicacion .titulo {
    text-align: center;
    font-size: 40px;
    line-height: 40px;
    font-weight: 300;
    margin-bottom: 60px;
}

.main .ubicacion .horarios {
    width: 50%;
    float: right;
    text-align: right;
}

.main .ubicacion .direccion .calle {
    margin-bottom: 15px;
}

.main .ubicacion .horarios {
    position: relative;
    overflow: hidden;
    top: -1.7em;
}

.main .ubicacion .horarios h4 {
    top: 1em;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}

.main .ubicacion .horarios .entre-semana, .main .ubicacion .horarios .fin-semana {
    width: 50%;
    float: left;
    text-align: center;
}

.main .mapa {
    width: 100%;
    overflow: hidden;
}

.main .mapa iframe {
    width: 100%;
    max-height: 600px;
}

/* ----- ----- MEDIA QUERIES ----- ----- */
@media screen and (min-width: 1200px) {
    /* Estilos para dispositivos con anchura de 1200px o mas */ header .contenedor {
        position: static;
        height: auto;
    }
}


/* Estilos por defecto antes del punto de ruptura */
.main .acerca-de .foto {
    position: relative;
    width: 100%;
}

/* Media query para pantallas de 801px */
@media screen and (min-width: 801px) {
    .main .acerca-de .foto {
        width: 47%;
        /* Nuevo ancho para pantallas mas grandes*/
    }
}

/* Estilos por defecto antes del punto de ruptura */
.main .acerca-de article {
    position: relative;
    width: 100%;
    top: 0px;
    transform: translate(0px, 0);
}

/* Media query para pantallas de mas de 801px */
@media screen and (min-width: 801px) {
    .main .acerca-de article {
        position: relative;
        right: 2.4em;
        width: 60%;
        /* Nuevo ancho para pantallas ­ puedes incluir cualquier otro ajuste de estilo que necesites */
        /* Por ejemplo, si necesitas ajustar la posicicion ancha */
        top: 0px;
        /* Ajusta este valor como sea necesario */
        border-radius: 36px;
    }
}

.main .menu {
    top: 2em;
    position: relative;
    padding-top: 0px;
    background-image: url('../imagenes/adquisitexfondo.jpg');
    background-color: rgba(255, 255, 255, 0.5);
    /* Fondo semitransparente */
    padding: 10px;
    /* Ajusta el relleno según sea necesario */
    border: 2px solid white;
    /* Contorno blanco */
}

.main .menu article {
    top: 0.1em;
    right: -0.0em;
    width: 100%;
    z-index: 10000;
    border: 4px solid #d5801a;
    background: #ffffffeb;
    padding: 10px;
    overflow: hidden;
}

@media screen and (max-width: 400px) {
    .main .acerca-de article h3 {
        font-size: 34px;
        margin-bottom: 44px;
    }

    .main .menu article .nombre, .main .menu article .precio {
        font-size: 16px;
        line-height: 16px;
    }

    .main .ubicacion .direccion, .main .ubicacion .horarios {
        width: 100%;
        text-align: center;
    }

    .main .ubicacion .horarios .entre-semana, .main .ubicacion .horarios .fin-semana {
        width: 100%;
        margin-bottom: 10px;
    }

    .stepstofollow {
        width: 115%;
        /* Esto hara que el video sea responsive y se ajuste al ancho de su contenedor padre */
        max-width: 617px;
        /* Puedes establecer un ancho  si lo deseas */
        height: auto;
        /* Esto mantendra del video al escalar */
        border-radius: 34px;
        /* Esto dara bordes redondeados al video */
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        /* Esto agregara estilos si es necesario */
        margin-left: -20px;
        /* Ajusta el valor  estilos si es necesario */
        margin-top: -19px;
        /* Ajusta el valor  sea necesario */
    }
}

.parte-select {
    position: relative;
    margin-top: 0em;
    /* Valor por defecto para pantallas pequeñas */
}

/* Pantallas medianas (tablets en orientación horizontal, pantallas pequeñas de escritorio/laptops) */
@media (min-width: 768px) {
    .parte-select {
        margin-top: 0em;
        /* Aumenta el margen superior */
    }
}

/* Pantallas grandes (desktops, pantallas grandes de escritorio/laptops) */
@media (min-width: 992px) {
    .parte-select {
        margin-top: 0em;
        /* Aumenta aún más el margen superior */
    }
}

/* Pantallas extra grandes (monitores grandes de escritorio) */
@media (min-width: 1200px) {
    .parte-select {
        margin-top: -1em;
        /* Aumenta significativamente el margen superior */
    }
}

/* Pantallas aún más grandes, como televisores */
@media (min-width: 1600px) {
    .parte-select {
        margin-top: 4em;
        /* Maximiza el margen superior para pantallas muy grandes */
    }
}

/* Puedes seguir agregando más puntos de ruptura según sea necesario

/* Estilo base para los títulos */
/* Aplica estilos generales a todos los títulos de precios */
.menu .titulo-boton {
    text-align: center;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #000000f0;
    font-size: 1.2em;
    /* Sombra amarilla alrededor del texto */
    box-shadow: 0 0 5px #000000, 0 0 10px #000000;
    /* Sombra externa para efecto 3D */
}

.menu table {
    width: 100%;
    /* Ocupa el ancho completo de su contenedor */
}

.menu td {
    text-align: center;
    /* Centra el contenido de cada celda */
    vertical-align: middle;
    /* Alinea verticalmente el contenido en el medio */
    padding: 10px;
    /* Espaciado interno para la celda */
}

/* Estilos para dispositivos pequeños (por ejemplo, teléfonos en orientación vertical) */
@media (max-width: 599px) {
    .menu .titulo-boton {
        font-size: 1.2rem;
        /* Tamaño de la fuente más pequeño */
        padding: 0 10px;
    }
}

.dequetrata {
    position: relative;
    margin-top: 166px;
    /* Aumenta el espacio por encima del título */
    font-size: 24px;
    /* Opcionalmente, puedes ajustar el tamaño de la fuente */
    color: #000;
    /* Ajusta el color de la fuente si es necesario */
    text-align: center;
    /* Alinea el texto al centro */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    /* Agrega sombra para un efecto 3D */
}

.galeria .foto {
    width: 25%;
    /* Ajusta el ancho de cada contenedor de foto si es necesario */
    float: left;
    padding: 5px;
    /* Añade padding para evitar que las imágenes se toquen */
}

.galeria .foto img {
    width: 100%;
    /* Hace que la imagen ocupe todo el contenedor .foto */
    height: auto;
    /* Mantiene la proporción de las imágenes */
    display: block;
    /* Elimina cualquier espacio extra debajo de la imagen */
}

.contact {
      right: 1em;
      counter-increment: item;
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 10px;
      list-style-type: none;
      position: relative;
      padding-left: 54px;
      color: #ece969;
      background-color: #000000d6;
      text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5), 2px 2px 0px rgba(0, 0, 0, 0.2), 3px 3px 0px rgba(0, 0, 0, 0.15), 4px 4px 0px rgba(0, 0, 0, 0.1);
      border-radius: 24px;
}


.instagram-targeted {
    text-align: center;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #000000;
    font-size: 1.2em;
    box-shadow: 0 0 5px #000000, 0 0 10px #000000;
    background-color: rgb(26 255 0);
    padding: 10px;
    border: 2px solid white;
}

#paypal-form-fields-container-4QTKQERWRT8ZS .desc-label {
    text-align: center;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #000000;
    font-size: 1.2em;
    box-shadow: 0 0 5px #000000, 0 0 10px #000000;
    background-color: rgb(0 244 255 / 30%);
    padding: 10px;
    border: 2px solid white;
}

#paypal-form-fields-container-4DGAXZMFYL9W6 .desc-label {
    text-align: center;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #000000;
    font-size: 1.2em;
    box-shadow: 0 0 5px #000000, 0 0 10px #000000;
    background-color: rgb(0 244 255 / 30%);
    padding: 10px;
    border: 2px solid white;
}

#paypal-form-fields-container-YM7QWCDWW8V74 .desc-label {
    text-align: center;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #000000;
    font-size: 1.2em;
    box-shadow: 0 0 5px #000000, 0 0 10px #000000;
    background-color: rgb(0 244 255 / 30%);
    padding: 10px;
    border: 2px solid white;
}

#paypal-form-fields-container-TMP64LJWESZYJ .desc-label {
    text-align: center;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #000000;
    font-size: 1.2em;
    box-shadow: 0 0 5px #000000, 0 0 10px #000000;
    background-color: rgb(0 244 255 / 30%);
    padding: 10px;
    border: 2px solid white;
}

#paypal-form-fields-container-KGQAPPNDT35RW .desc-label {
    text-align: center;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #000000;
    font-size: 1.2em;
    box-shadow: 0 0 5px #000000, 0 0 10px #000000;
    background-color: rgb(0 244 255 / 30%);
    padding: 10px;
    border: 2px solid white;
}

#paypal-form-fields-container-9DXJSYJLMD6D2 .desc-label {
    text-align: center;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #000000;
    font-size: 1.2em;
    box-shadow: 0 0 5px #000000, 0 0 10px #000000;
    background-color: rgb(0 244 255 / 30%);
    padding: 10px;
    border: 2px solid white;
}

/* Styling for the shared accounts paragraph */
.shared-accounts {
    font-family: 'Caveat', cursive; /* A more flowing, handwritten-like font */
    font-size: 27px; /* Larger font size for more impact */
    color: #000; /* Keeps text color black for contrast */
    line-height: 1.8; /* Slightly more space between lines for readability */
    margin-bottom: 30px; /* More space below the paragraph */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow for a soft 3D effect */
}


/* Styling for the best regards paragraph */
.bestregards {
  font-family: 'Georgia', serif; /* A more formal font for closing remarks */
  font-size: 14px; /* Slightly smaller font size for distinction */
  color: #555; /* Lighter grey for a subtle look */
  text-align: center; /* Centers the text */
  margin-top: 20px; /* Top margin to separate from the main content */
}

/* Estilos específicos para el ícono de WhatsApp */
.whatsapp-link .fab.fa-whatsapp {
    z-index: 1;
    position: relative;
    font-size: 36px; /* Ajusta el tamaño del ícono */
    color: #25D366; /* Color oficial de WhatsApp */
    top: 1.6em;
    right: -2.3em;
}

.toggle-instagram {
  font-size: 35px;
    font-weight: 700;
    color: #fbffca;
    background-color: #000; /* Fondo oscuro para contraste */
    border: 2px solid #fbffca; /* Borde del mismo color que el texto */
    border-radius: 25px; /* Bordes redondeados para un aspecto de botón */
    text-align: center;
    text-shadow: 2px 2px 10px #000, -6px -6px 10px #ffffffa6, -8px 8px 15px #ffffff, 0 0 20px #000000b8;
    letter-spacing: 0.1em;
    text-decoration: none;
    display: inline-block;
    padding: 0.5em 1em;
    transition: background-color 0.3s, color 0.3s, text-shadow 0.3s;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Sombra para dar efecto de elevación */
}
.toggle-instagram:hover {
  background-color: #45a049; /* Un verde un poco más oscuro para el hover */
}
.contenedor-menu {
    display: none; /* Esconde el menú por defecto */
}

.contenedor-menu.visible {
    display: block;
}

.direccion {
      position: relative;
      text-align: center; /* Centers the text */
      margin-top: -80px; /* Top margin to separate from the main content */
}
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: "Open Sans", Arial, Sans-serif;
    font-size: 16px;
}

/* Estilos base para .contenedor */
.contenedor {
    width: 90%;
    max-width: 1000px;
    margin: auto;
    /* overflow: hidden; Eliminado */
}

/* ----- ----- HEADER ----- ----- */
header {
    position: relative;
    top: 9em;
    margin-bottom: -5em;
    font-family: "Open Sans", Arial, Sans-serif;
    font-size: 16px;
    background-color: #C5E4EA;
    /* Color de fondo por defecto en caso de que la imagen no cargue */
       
    /* La ruta a la imagen de fondo */
    background-size: cover;
    /* Establece la anchura y permite que la altura se ajuste automaticamente */
    background-position: center center;
    /* Centra la imagen de fondo */
    background-repeat: no-repeat;
    /* Evita que la imagen se repita */
    background-attachment: fixed;
    /* Evita que la imagen de fondo se desplace con el scroll */
}

#videoBackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}


/* ----- ----- MAIN ----- ----- */
.main {
    background: url('../img/bg-textura.png');
    background-repeat: repeat;
}

/* Estilos del Main y Acerca De */
.main .acerca-de .contenedor {
    top: -1em;
    position: relative;
    overflow: visible;
}

.foto img {
    width: 100%;
    /* O un porcentaje del contenedor padre */
    height: auto;
    /* Mantiene la relaciion de aspecto de la imagen */
}

/* Media query para pantallas de 801px en adelante */
@media screen and (min-width: 801px) {
    .foto img {
        width: 80%;
        max-width: 600px;
        /* Por ejemplo, limita el ancho de la imagen a 600px */
        height: auto;
    }
}

.main .acerca-de .foto {
    width: 80%;
    position: relative;
    left: 0;
    top: -50px;
    z-index: 1;
    /* Debe ser menor que el z-index de las particulas */
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.35);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.35);
}

.main .acerca-de .foto img {
    width: 100%;
    vertical-align: top;
}

.main .acerca-de article {
    background: #0d005c;
    padding: 40px;
    width: 50%;
    position: relative;
    float: right;
    top: 500px;
    /* Con efecto Parallax */
    z-index: 3;
    /* Debe ser mayor que el z-index de la foto pero menor que el de las particulas */
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.35);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.35);
}

/* Estilos base para #particles-js */
#particles-js {
    position: absolute;
    top: -17%;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    /* Mayor que el z-index de .foto para superponerse */
}

/* Media query para pantallas de hasta 800px */
@media screen and (max-width: 800px) {
    #particles-js {
    top: -11%;

    }
}

/* Media query para pantallas de 801px en adelante */
@media screen and (min-width: 801px) {
    #particles-js {
  width: 80%;
        max-width: 600px;

        top: -8%;
        /* Modifica este valor  */
        left: 0%;
        /* Centra horizontalmente las particulas si es necesario */
        right: 10%;
        /* Centra horizontalmente las particulas  */
        position: absolute;
        /* O 'relative' dependiendo de tu layout */
        z-index: 2;
        /* Asegura que las particulas se superpongan como deseas */
    }
}

/*  alto que la foto para que se superponga */
.particles-over-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* Mayor que el z-index de .foto */
}

.main .acerca-de article h3 {
    counter-increment: item;
    font-weight: bold;
    font-size: 46px;
    margin-bottom: 18px;
    list-style-type: none;
    position: relative;
    padding-left: 40px;
    color: #adadff;
    background-color: #000000c7;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5), 2px 2px 0px rgba(0, 0, 0, 0.2), 3px 3px 0px rgba(0, 0, 0, 0.15), 4px 4px 0px rgba(0, 0, 0, 0.1);
    top: 0em;
}

.main .acerca-de article p {
    line-height: 28px;
    margin-bottom: 15px;
}

/* Estilos por defecto que se aplican a todos los tamaños de pantalla */
.main .menu {
    padding-top: 570px;
    margin-bottom: 50px;
}

/* Ajustes de media query para pantallas mas grandes */
@media screen and (max-width: 2000px) {
    .main .menu {
        width: 100%;
        /* Se ajusta al ancho disponible */
        padding-top: 34px;
        margin-bottom: 50px;
        /* Puedes agregar mas estilos si es necesario */
    }
}

/* Ajustes de media query para pantallas mas grandes */
@media screen and (max-width: 1000px) {
    .main .menu {
        width: 100%;
        /* Se ajusta al ancho disponible */
        padding-top: 3px;
        margin-bottom: 50px;
        /* Puedes agregar mas estilos si es necesario */
    }
}

/* Ajustes de media query para pantallas mas grandes */
@media screen and (max-width: 600px) {
    .main .menu {
        width: 100%;
        /* Se ajusta al ancho disponible */
        padding-top: 1px;
        margin-bottom: 50px;
        /* Puedes agregar mas estilos si es necesario */
    }
}

/* Ajustes de media query para pantallas mas grandes */
@media screen and (max-width: 700px) {
    .main .menu {
        width: 100%;
        /* Se ajusta al ancho disponible */
        padding-top: 7px;
        margin-bottom: 50px;
        /* Puedes agregar mas estilos si es necesario */
    }
}

/* Ajustes de media query para pantallas grandes */
@media screen and (max-width: 800px) {
    .main .menu {
        width: 100%;
        /* Se ajusta al ancho disponible */
        padding-top: 106px;
        margin-bottom: 50px;
        /* Puedes agregar mas estilos si es necesario */
    }
}

.main .menu .titulo {
    top: -1em;
        color: #FFC107;
    font-size: 30px;
    text-shadow: 1px 1px 2px #000, 0 0 25px #FFC107, 0 0 5px #FFD54F;
    font-size: 40px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 4px;
    background-color: rgb(0 0 0 / 76%);
    /* Fondo semitransparente */
    padding: 10px;
    /* Ajusta el relleno según sea necesario */
    border: 2px solid white;
    /* Contorno blanco */
}

/* Estilos base para .main .menu .contenedor-menu */
/* Estilos base */


.main .menu article {
    width: 50%;
    float: left;
}

.menu .categoria ol {
    counter-reset: item;
    /* Resetea el contador para los ítems de la lista */
    padding-left: 0;
    /* Remueve el padding predeterminado */
}

.menu .categoria li {
    counter-increment: item;
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 10px;
    list-style-type: none;
    position: relative;
    padding-left: 40px;
    color: #ece969; /* Color de texto blanco para más contraste */
    background-color: #333333d6; /* Fondo oscuro para mejorar el efecto 3D */
    text-shadow: 
        1px 1px 0px rgba(255, 255, 255, 0.5), /* Brillo superior izquierdo */
        2px 2px 0px rgba(0, 0, 0, 0.2), /* Sombra más pronunciada para efecto 3D */
        3px 3px 0px rgba(0, 0, 0, 0.15), /* Extensión de la sombra para profundidad */
        4px 4px 0px rgba(0, 0, 0, 0.1); /* Suavizado de la sombra exterior */
}


.menu .categoria li:before {
    content: counter(item) ". ";
    /* Agrega el número de la lista con un punto */
    position: absolute;
    /* Posición absoluta respecto al `li` */
    left: 10px;
    /* Posición hacia la izquierda */
    font-weight: bold;
    /* Texto en negrita para el número */
    color: #FFD700;
    /* Color amarillo para los números */
    font-size: 18px;
    /* Tamaño de fuente del número */
    text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
    /* Sombra para dar efecto 3D */
}

.main .menu article .platillo {
    position: relative;
    top: 3em;
    overflow: hidden;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 4px dotted #000;
}

.platillo ul {
    list-style-type: disc;
    /* Agrega marcadores como puntos */
    padding-left: 40px;
    /* Asegurate de que hay espacio para los marcadores */
}

.platillo li {
    margin-bottom: 10px;
    /* Espacio entre  abajo en tu CSS */
}

.main .menu article .nombre {
    position: relative;
    right: 0em;
    top: 0.9em;
    font-size: 20px;
    margin-bottom: 15px;
    float: left;
}

.main .menu article .precio {
    float: right;
    font-size: 20px;
    margin-bottom: 15px;
}

.main .menu article .descripcion {
    font-size: 16px;
    color: #000000;
    clear: both;
}

.main .menu .contenedor-menu2 {
    border: 1px solid #000;
    background: transparent;
    padding: 10px;
    overflow: hidden;
}

.main .galeria {
    position: relative;
    overflow: hidden;
    right: -2em;
}

.main .galeria .foto {
    width: 25%;
    float: left;
}

.main .galeria .foto img {
    vertical-align: top;
    width: 100%;
    opacity: .7;
}

.main .galeria .foto img:hover {
    opacity: 1;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.main .ubicacion {
    background: #fff;
    padding: 60px 0;
}

.main .ubicacion .titulo {
    text-align: center;
    font-size: 40px;
    line-height: 40px;
    font-weight: 300;
    margin-bottom: 60px;
}

.main .ubicacion .horarios {
    width: 50%;
    float: right;
    text-align: right;
}

.main .ubicacion .direccion .calle {
    margin-bottom: 15px;
}

.main .ubicacion .horarios {
    position: relative;
    overflow: hidden;
    top: -1.7em;
}

.main .ubicacion .horarios h4 {
    top: 1em;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}

.main .ubicacion .horarios .entre-semana, .main .ubicacion .horarios .fin-semana {
    width: 50%;
    float: left;
    text-align: center;
}

.main .mapa {
    width: 100%;
    overflow: hidden;
}

.main .mapa iframe {
    width: 100%;
    max-height: 600px;
}



/* Estilos por defecto antes del punto de ruptura */
.main .acerca-de article {
    position: relative;
    width: 100%;
    top: 0px;
    transform: translate(0px, 0);
}

/* Media query para pantallas de mas de 801px */
@media screen and (min-width: 801px) {
    .main .acerca-de article {
        position: relative;
        right: 2.4em;
        width: 60%;
        /* Nuevo ancho para pantallas ­ puedes incluir cualquier otro ajuste de estilo que necesites */
        /* Por ejemplo, si necesitas ajustar la posicicion ancha */
        top: 0px;
        /* Ajusta este valor como sea necesario */
        border-radius: 36px;
    }
}

.main .menu {
    top: 2em;
    position: relative;
    padding-top: 0px;
    background-image: url('../imagenes/adquisitexfondo.jpg');
    background-color: rgba(255, 255, 255, 0.5);
    /* Fondo semitransparente */
    padding: 10px;
    /* Ajusta el relleno según sea necesario */
    border: 2px solid white;
    /* Contorno blanco */
}

.main .menu article {
    top: 0.1em;
    right: -0.0em;
    width: 100%;
    z-index: 10000;
    border: 4px solid #d5801a;
    background: #ffffffeb;
    padding: 10px;
    overflow: hidden;
}

@media screen and (max-width: 400px) {
    .main .acerca-de article h3 {
        font-size: 34px;
        margin-bottom: 44px;
    }

    .main .menu article .nombre, .main .menu article .precio {
        font-size: 16px;
        line-height: 16px;
    }

    .main .ubicacion .direccion, .main .ubicacion .horarios {
        width: 100%;
        text-align: center;
    }

    .main .ubicacion .horarios .entre-semana, .main .ubicacion .horarios .fin-semana {
        width: 100%;
        margin-bottom: 10px;
    }

    .stepstofollow {
        width: 115%;
        /* Esto hara que el video sea responsive y se ajuste al ancho de su contenedor padre */
        max-width: 617px;
        /* Puedes establecer un ancho  si lo deseas */
        height: auto;
        /* Esto mantendra del video al escalar */
        border-radius: 34px;
        /* Esto dara bordes redondeados al video */
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        /* Esto agregara estilos si es necesario */
        margin-left: -20px;
        /* Ajusta el valor  estilos si es necesario */
        margin-top: -19px;
        /* Ajusta el valor  sea necesario */
    }
}

.parte-select {
    position: relative;
    margin-top: 0em;
    /* Valor por defecto para pantallas pequeñas */
}

/* Pantallas medianas (tablets en orientación horizontal, pantallas pequeñas de escritorio/laptops) */
@media (min-width: 768px) {
    .parte-select {
        margin-top: 0em;
        /* Aumenta el margen superior */
    }
}

/* Pantallas grandes (desktops, pantallas grandes de escritorio/laptops) */
@media (min-width: 992px) {
    .parte-select {
        margin-top: 0em;
        /* Aumenta aún más el margen superior */
    }
}

/* Pantallas extra grandes (monitores grandes de escritorio) */
@media (min-width: 1200px) {
    .parte-select {
        margin-top: -1em;
        /* Aumenta significativamente el margen superior */
    }
}

/* Pantallas aún más grandes, como televisores */
@media (min-width: 1600px) {
    .parte-select {
        margin-top: 4em;
        /* Maximiza el margen superior para pantallas muy grandes */
    }
}

/* Puedes seguir agregando más puntos de ruptura según sea necesario

/* Estilo base para los títulos */
/* Aplica estilos generales a todos los títulos de precios */
.menu .titulo-boton {
    text-align: center;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #000000f0;
    font-size: 1.2em;
    /* Sombra amarilla alrededor del texto */
    box-shadow: 0 0 5px #000000, 0 0 10px #000000;
    /* Sombra externa para efecto 3D */
}

.menu table {
    width: 100%;
    /* Ocupa el ancho completo de su contenedor */
}

.menu td {
    text-align: center;
    /* Centra el contenido de cada celda */
    vertical-align: middle;
    /* Alinea verticalmente el contenido en el medio */
    padding: 10px;
    /* Espaciado interno para la celda */
}

/* Estilos para dispositivos pequeños (por ejemplo, teléfonos en orientación vertical) */
@media (max-width: 599px) {
    .menu .titulo-boton {
        font-size: 1.2rem;
        /* Tamaño de la fuente más pequeño */
        padding: 0 10px;
    }
}

.dequetrata {
    position: relative;
    margin-top: 166px;
    /* Aumenta el espacio por encima del título */
    font-size: 24px;
    /* Opcionalmente, puedes ajustar el tamaño de la fuente */
    color: #000;
    /* Ajusta el color de la fuente si es necesario */
    text-align: center;
    /* Alinea el texto al centro */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    /* Agrega sombra para un efecto 3D */
}

.galeria .foto {
    width: 25%;
    /* Ajusta el ancho de cada contenedor de foto si es necesario */
    float: left;
    padding: 5px;
    /* Añade padding para evitar que las imágenes se toquen */
}

.galeria .foto img {
    width: 100%;
    /* Hace que la imagen ocupe todo el contenedor .foto */
    height: auto;
    /* Mantiene la proporción de las imágenes */
    display: block;
    /* Elimina cualquier espacio extra debajo de la imagen */
}

.contact {
      right: 1em;
      counter-increment: item;
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 10px;
      list-style-type: none;
      position: relative;
      padding-left: 54px;
      color: #ece969;
      background-color: #000000d6;
      text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5), 2px 2px 0px rgba(0, 0, 0, 0.2), 3px 3px 0px rgba(0, 0, 0, 0.15), 4px 4px 0px rgba(0, 0, 0, 0.1);
      border-radius: 24px;
}


.instagram-targeted {
    text-align: center;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #000000;
    font-size: 1.2em;
    box-shadow: 0 0 5px #000000, 0 0 10px #000000;
    background-color: rgb(26 255 0);
    padding: 10px;
    border: 2px solid white;
}

#paypal-form-fields-container-4QTKQERWRT8ZS .desc-label {
    text-align: center;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #000000;
    font-size: 1.2em;
    box-shadow: 0 0 5px #000000, 0 0 10px #000000;
    background-color: rgb(0 244 255 / 30%);
    padding: 10px;
    border: 2px solid white;
}

#paypal-form-fields-container-4DGAXZMFYL9W6 .desc-label {
    text-align: center;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #000000;
    font-size: 1.2em;
    box-shadow: 0 0 5px #000000, 0 0 10px #000000;
    background-color: rgb(0 244 255 / 30%);
    padding: 10px;
    border: 2px solid white;
}

#paypal-form-fields-container-YM7QWCDWW8V74 .desc-label {
    text-align: center;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #000000;
    font-size: 1.2em;
    box-shadow: 0 0 5px #000000, 0 0 10px #000000;
    background-color: rgb(0 244 255 / 30%);
    padding: 10px;
    border: 2px solid white;
}

#paypal-form-fields-container-TMP64LJWESZYJ .desc-label {
    text-align: center;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #000000;
    font-size: 1.2em;
    box-shadow: 0 0 5px #000000, 0 0 10px #000000;
    background-color: rgb(0 244 255 / 30%);
    padding: 10px;
    border: 2px solid white;
}

#paypal-form-fields-container-KGQAPPNDT35RW .desc-label {
    text-align: center;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #000000;
    font-size: 1.2em;
    box-shadow: 0 0 5px #000000, 0 0 10px #000000;
    background-color: rgb(0 244 255 / 30%);
    padding: 10px;
    border: 2px solid white;
}

#paypal-form-fields-container-9DXJSYJLMD6D2 .desc-label {
    text-align: center;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #000000;
    font-size: 1.2em;
    box-shadow: 0 0 5px #000000, 0 0 10px #000000;
    background-color: rgb(0 244 255 / 30%);
    padding: 10px;
    border: 2px solid white;
}

/* Styling for the shared accounts paragraph */
.shared-accounts {
    font-family: 'Caveat', cursive; /* A more flowing, handwritten-like font */
    font-size: 27px; /* Larger font size for more impact */
    color: #000; /* Keeps text color black for contrast */
    line-height: 1.8; /* Slightly more space between lines for readability */
    margin-bottom: 30px; /* More space below the paragraph */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow for a soft 3D effect */
}


/* Styling for the best regards paragraph */
.bestregards {
  font-family: 'Georgia', serif; /* A more formal font for closing remarks */
  font-size: 14px; /* Slightly smaller font size for distinction */
  color: #555; /* Lighter grey for a subtle look */
  text-align: center; /* Centers the text */
  margin-top: 20px; /* Top margin to separate from the main content */
}

/* Estilos específicos para el ícono de WhatsApp */
.whatsapp-link .fab.fa-whatsapp {
    z-index: 1;
    position: relative;
    font-size: 36px; /* Ajusta el tamaño del ícono */
    color: #25D366; /* Color oficial de WhatsApp */
    top: 1.6em;
    right: -2.3em;
}

.toggle-instagram {
  font-size: 35px;
    font-weight: 700;
    color: #fbffca;
    background-color: #000; /* Fondo oscuro para contraste */
    border: 2px solid #fbffca; /* Borde del mismo color que el texto */
    border-radius: 25px; /* Bordes redondeados para un aspecto de botón */
    text-align: center;
    text-shadow: 2px 2px 10px #000, -6px -6px 10px #ffffffa6, -8px 8px 15px #ffffff, 0 0 20px #000000b8;
    letter-spacing: 0.1em;
    text-decoration: none;
    display: inline-block;
    padding: 0.5em 1em;
    transition: background-color 0.3s, color 0.3s, text-shadow 0.3s;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Sombra para dar efecto de elevación */
}
.toggle-instagram:hover {
  background-color: #45a049; /* Un verde un poco más oscuro para el hover */
}
.contenedor-menu {
    display: none; /* Esconde el menú por defecto */
}

.contenedor-menu.visible {
    display: block;
}

.direccion {
      position: relative;
      text-align: center; /* Centers the text */
      margin-top: -80px; /* Top margin to separate from the main content */
}