*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    font-family: "Oswald", sans-serif;
 }


 
 body{
   background-image: url(carta1111/fondo.jpg);
   background-size: contain;
   font-family: "Oswald", sans-serif;
 }
 
.nav{
   font-family: "Oswald", sans-serif;
   background-color: black;
   font-size: large;
   z-index: 10; /* Ajusta el valor según sea necesario */
}

.nav a{
   text-align: center;
}

.container{
    text-align: center;
    color: white;
    margin-top: 2rem;
 }
 
 .containerLogo{
    display: flex;
    justify-content: center;
    
 }
 
 .logo{
    width: auto;
    height: 300px;
 }

 .neon{
    font-size: 60px;
    text-shadow: 0 0 5px #ffc107, 0 0 15px #ffc107, 0 0 30px #ffc107, 0 0 50px #ffc107;
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-family: 'Neonderthaw', cursive;
 }
 .container2{
    margin-top: 7rem;
    margin-bottom: 3rem;
    text-align: center;
    color: white;
 }
 
 
 .neon2{
    font-size: 60px;
    text-shadow: 0 0 5px #ffc107, 0 0 15px #ffc107, 0 0 30px #ffc107, 0 0 50px #ffc107;
    font-family: 'Neonderthaw', cursive;
 }


 .titulo{
    text-align: center;
    font-family: "Oswald", sans-serif;
    color: #ffc107;
    background: rgba(0, 0, 0, .85);
    border-radius: 60px ;
    border-color: #ffc107;
    margin: 10rem 1rem 1rem 1rem;
    padding: 1rem 1rem 1rem 1rem;
 }

 .TituloTragosAutor{
   text-align: center;
    font-family: "Oswald", sans-serif;
    color: #ffc107;
    background: rgba(0, 0, 0, .85);
    border-radius: 60px ;
    border-color: #ffc107;
    margin: 10rem 1rem 5rem 1rem;
    padding: 1rem 1rem 1rem 1rem;
 }
 
 .elementoTitulo{
    text-align: center;
    font-size: 60px;
 }

 .elementoTitulo2{
   text-align: center;
   font-size: 45px;
}

 
 .listas{
    text-align: center;
    font-family: "Oswald", sans-serif;
    color: #ffc107;
    margin-top: 5rem;
    background: rgba(0, 0, 0, .85);
    border-radius: 30px ;
    border-color: #ffc107;
    font-size: 20px;
    font-style: italic;
    padding: 1rem 1rem 1rem 1rem;
    margin: 3rem 1rem 1rem 1rem;
 }
 


  .elementoLista2{
    font-size: 35px;
    margin-top: 1rem;
 }

  .elementoLista3{
    font-size: 30px;
    margin-top: -1rem;
 }


.logo2{
   width: 300px;
   height: 300px;
}

.logoNav{
   width: 50px;
   height: 50px;
}

.tituloBebida{
   text-align: center;
   font-family: "Oswald", sans-serif;
   color: #ffc107;
   background: rgba(0, 0, 0, .85);
   border-radius: 60px;
   border-color: #ffc107;
   margin: 3rem 5rem 1rem 5rem;
   padding: 1rem 1rem 1rem 1rem;
}

.listasBebidas {
   font-family: "Oswald", sans-serif;
    color: #ffc107;
    background: rgba(0, 0, 0, .85);
    border-radius: 30px;
    font-size: 20px;
    font-style: italic;
    margin: 1rem 1rem 1rem 1rem;
   }

.elementoListaBebidas{
   color: #ffc107;
}

.tituloBebidas{
   padding-top: 1rem;
   color: #ffc107;
}

.tituloBebidas2{
   padding-top: 1rem;
   padding-bottom: 1rem;
   color: #ffc107;
}

.listaDaikiri{
  margin-top: -1rem;
   font-size: 15px;
}

.listaDaikiri3{
   font-size: 11px;
}

.listaDaikir{
   margin-top: -1rem;
   font-size: 11px;
}

.elementoLimonadas{
   color: #ffc107;
   font-size: 15px;
}

.elementoListaBebidas2{
   color: #ffc107;
   font-size: 19px;
}

.elementoListaBebidas3{
   color: #ffc107;
   font-size: 18px;
}


.tituloCervezas{
   color: #ffc107;
   font-size: 37px;
}

.listaDaikiri2{
   margin-top: -1rem;
   font-size: 15px;
   color: white;
}



.precios{
   font-size: 35px;
   margin-top: -2rem;
   text-align: center;
}

.extras{
   font-size: 25px;
   margin-bottom: 1rem;
   text-align: center;
}

.punto{
  color: black;
}

.precios{
   font-size: 35px;
   margin-top: 1rem;
   text-align: center;
}

.extras{
   font-size: 25px;
   margin-bottom: 1rem;
   text-align: center;
}

.preciosExtras{
   font-size: 35px;
   margin-top: -1rem;
   text-align: center;
}

.h2{
   font-size: 37px;
}


.footer{
  color: goldenrod;
  font-family: "Oswald", sans-serif;
  background: rgba(0, 0, 0, .85);
  border-radius: 60px;
  border-color: #ffc107;
  margin: 3rem 5rem 1rem 5rem;
  padding: 1rem 1rem 1rem 1rem;
}

.redes{
  width: 32px ;
  height: 32px ;
}

.fuego{
   width: 32px ;
   height: 32px ;
}

.Demora{
   font-size: 20px;
}

.elementoTitulo3{
   text-align: center;
   font-size: 45px;
   color: goldenrod;
}


.contenedor-videos {
   display: flex;
   flex-direction: column;
   gap: 20px; /* Espacio entre los videos */
   align-items: center;
   position: relative; 
   overflow: hidden;
   padding-left: 1rem;
   padding-right: 1rem;
 }
 


 .videosTragos {
   width: 100%;
   height: auto; /* Alto de historia de Instagram */
   -webkit-object-fit: cover;
   object-fit: cover; /* Ajustar video al tamaño del contenedor */
   border-radius: 60px;
   border: 1px solid #ffc107;
   
 }


 .texto-overlay {
   position: absolute;
   top: 73.9%;
   left: 39%;
   transform: translate(-50%, -50%);
   color: white;
   text-align: center;
   font-family: arimo;
   font-style: italic;
}

.texto-overlay p {
   font-size: 1.2rem;
}
 
.texto-overlay2 {
   position: absolute;
   top: 11.1%;
   left: 39%;
   transform: translate(-50%, -50%);
   color: white;
   text-align: center;
   font-family: arimo;
   font-style: italic;
}

.texto-overlay2 p {
   font-size: 1.2rem;
}

.texto-overlay3 {
   position: absolute;
   top: 23.7%;
   left: 39%;
   transform: translate(-50%, -50%);
   color: white;
   text-align: center;
   font-family: arimo;
   font-style: italic;
}

.texto-overlay3 p {
   font-size: 1.2rem;
}

.texto-overlay4 {
   position: absolute;
   top: 36.3%;
   left: 39%;
   transform: translate(-50%, -50%);
   color: white;
   text-align: center;
   font-family: arimo;
   font-style: italic;
}

.texto-overlay4 p {
   font-size: 1.2rem;
}

.texto-overlay5 {
   position: absolute;
   top: 48.8%;
   left: 39%;
   transform: translate(-50%, -50%);
   color: white;
   text-align: center;
   font-family: arimo;
   font-style: italic;
}

.texto-overlay5 p {
   font-size: 1.2rem;
}

.texto-overlay6 {
   position: absolute;
   top: 61.3%;
   left: 39%;
   transform: translate(-50%, -50%);
   color: white;
   text-align: center;
   font-family: arimo;
   font-style: italic;
}

.texto-overlay6 p {
   font-size: 1.2rem;
}

.texto-overlay7 {
   position: absolute;
   top: 86.4%;
   left: 39%;
   transform: translate(-50%, -50%);
   color: white;
   text-align: center;
   font-family: arimo;
   font-style: italic;
}

.texto-overlay7 p {
   font-size: 1.2rem;
}

.texto-overlay9 {
   position: absolute;
   top: 99%;
   left: 39%;
   transform: translate(-50%, -50%);
   color: white;
   text-align: center;
   font-family: arimo;
   font-style: italic;
}

.texto-overlay9 p {
   font-size: 1.2rem;
}



@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .contenedor-videos {
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: center; /* Centrado en Safari */
      position: relative;
      overflow: hidden;
      padding: 1rem;
    }

    .videosTragos {
      width: 100%;
      max-width: 500px; /* Limita el ancho para evitar que ocupe toda la pantalla */
      height: auto;
      display: block;
      margin: 0 auto; /* Centrado horizontal */
      -webkit-object-fit: cover; /* Soporte específico para Safari */
      object-fit: cover;
      -webkit-border-radius: 60px;
      border-radius: 60px;
      border: 2px solid #ffc107; /* Borde dorado visible */
      position: relative;
      z-index: 1;
    }

    .texto-overlay {
      position: absolute;
      top: 73.9%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      text-align: center;
      font-family: 'Arimo', sans-serif;
      font-style: italic;
      z-index: 2; /* Superpone el texto sobre el video */
    }
  }
}

/* Modal Picantito */
.modal {
   display: none;
   position: fixed;
   z-index: 1;
   left: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
   align-items: center;
   justify-content: center;
   pointer-events: none; /* No bloquea el contenido detrás */
   z-index: 9999; /* Asegúrate de que el modal esté por encima del menú */
 }
 

.modal-content {
   position: relative;
   pointer-events: auto;
   max-width: auto;
   max-height: 100%;
   border-radius: 50px;
   box-shadow: 0 0 20px #9b00b3;
   border: 10px solid #9b00b3;
   animation: neon 1.5s infinite alternate;
   padding: 0;
   background: transparent;
}

 
 @keyframes neon {
   0% {
     box-shadow: 0 0 20px #9b00b3, 0 0 30px #9b00b3, 0 0 40px #9b00b3;
     border-color: #9b00b3;
   }
   100% {
     box-shadow: 0 0 30px #9b00b3, 0 0 40px #9b00b3, 0 0 50px #9b00b3;
     border-color: #7a009d;
   }
 }
 
 .modal-img {
   width: 100%;
   height: auto;
   border-radius: 30px;
 }
 
 .close-btn {
   position: absolute;
   top: 10px;
   right: 20px;
   font-size: 50px;
   color: #9b00b3;
   cursor: pointer;
 }
 
 .close-btn:hover {
   color: #7a009d;
 }
 
 .listasMilas {
   color: #ffc107;
   font-family: "Oswald", sans-serif;
   background: rgba(0, 0, 0, 0.85);
   border-radius: 60px;
   padding: 3rem;
   margin: 20px;
   list-style: none;
   font-style: italic; /* para quitar los bullets si querés */
 }

.tituloMilas{
   text-align: center; /* centra el h2 */
   margin-bottom: 10px; 
   font-style: italic;/* un poco de espacio debajo */
 }

 .listasMilas .h2  {
   text-align: center;
   font-style: italic;
}

.listasMilas .h23  {
   text-align: center;
   font-size:xx-large;
   font-style: italic;
}

.listasMilas p {
   text-align: center;
   font-family: "Oswald", sans-serif;
   color: goldenrod;
   font-style: italic;
}

   .subtituloMilas{
      text-align: center;
      font-family: "Oswald", sans-serif;
      color: #ffc107;
      background: rgba(0, 0, 0, .85);
      border-radius: 60px ;
      border-color: #ffc107;
      margin: 5rem 1rem 1rem 1rem;
      padding: 1rem 1rem 1rem 1rem;
   }   

 @media screen and (max-width: 768px) {
   .modal-img {
     width: 100%;
   }
 }