@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');




html{
    font-size: 62.5%;
}
body{
    font-family: Montserrat;
    margin: 0;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li{
    text-decoration: none;
    list-style-type: none;
    font-size: 1.8rem;
}
h1 {
    font-size: 4rem;
    margin: 0;
}
h2 {
    font-size: 3rem;
}
h3 {
    font-size: 2rem;
}
h4{
    font-size: 1.8rem;
    margin: 0;
}
p{
    font-size: 1.8rem;
    color: #000;
    margin: 0;
}
a{
    text-decoration: none;
    color: #fff;
}



/* Body */
.padding{
  padding: 5rem 0;
}

.container-l{
    margin: 0 10rem;
}
.container-m{
    margin: 0 6rem;
}
.container-s{
    margin: 0 3rem;
}
.header{
    margin: 0;
    background-color: #000;
    padding: 2rem 0;
}
.head{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 950px){
  .head{
      display: flex;
      align-items: center;
      flex-direction: column;
  }
}
.header li{
    color: #fff;
    font-weight: 700;
}
.header img{
    width: 8rem;
}
@media (max-width: 950px){
  .header img{
    margin-bottom:3rem ;
}
}
/* .nav{
    padding: 0 4rem;
} */
.nav-bar{
    display: flex;
    align-items: center;
    gap: 4rem;
}

.nav a:hover{
    color: red;
}
.nav .join-us a:hover{
    color: #000;
}

.log-in{
    border: solid 2px red;
    border-radius: 15px;
    padding: 0.8rem;
}
.join-us{
    background-color: red;
    border-radius: 15px;
    padding: 0.8rem 1.4rem;
}
.intro{
    text-align: left;
    /* gap: 10rem; */
    margin: 5rem 0;
    /* height: 70vh; */
}
@media (min-width: 768px){
    .intro{
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items:center ;
    }
    /* .intro .logo{
        margin-bottom: 20rem;
    } */
    .intro h1{
        padding: 0 10rem;
    }
}
.intro img{
    width: 100%;
}
/* .intro h1{
    padding: 5rem 0;
} */
.intro p{
    font-weight: 600;
}
/* .intro .logo{
    margin-bottom: 5rem;
} */
.intro-logo{
    display: flex;
    justify-content: center;
    grid-column-start: 2;
    grid-row-start: 1;
    grid-row-end: 4;
    padding-top: 5rem;
}
.intro-logo img{
  width: auto;
  height: 60rem;
}
.intro-quote{
    grid-row-start: 2;
    margin: 3rem 0;
}
.intro-quote p{
  text-align: center;
}
.benefits{
    grid-template-columns: 1;
    grid-row-start: 3;
}
.benefits p, .benefits-list p{
    align-items: center;
    justify-items: center;
}
@media (min-width: 768px){
    .benefits-list{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        justify-items: center;
    }  
}
.benefits-list{
    padding: 5rem 0;
}
.benefits-list img{
    width: 5rem;
    grid-row-start: 1;
}
.benefits-list p{
    padding: 2rem 0;
}
.buy{
    grid-row-start: 3;
    margin: 0 5rem;
  }
.buy p{
  border: solid 3px #000;
  border-radius: 40px;
  color: red;
  /* width: 100%; */
  padding: 2rem;
  text-align: center;
  font-size: 3rem;
}

/* Section 2 */
.bg-black{
    background-color: #000;
    overflow-x: hidden;
}
.section-2 h3, .section-2 p{
    color: #fff;
}
.section-2 h1{
  text-align: center;
    padding-top: 5rem;
    font-size: 4rem;
    color: #fff;
}
@media (min-width: 768px){
    .benefits-list-2{
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 10rem 0;
        gap: 10rem;
    }
}
@media (max-width: 768px){
    .benefits-list-2 > div{
        padding: 3rem 0;
    }
}
.benefits-list-2{
    padding: 5rem 0;

}
.benefits-list-2 img{
    width: 4rem;
    height: auto;
    background-color: #fff;
    border-radius: 8px;
    padding: 1rem;
}
.benefits-list-2 h3{
    font-size: 2.3rem;
}
.benefits-list-2 p{
    font-weight: 300;
    font-size: 1.8rem;
}
.benefit{
  border: solid 2px #fff;
  padding: 3rem;
  border-radius: 80px;
  text-align: center;
  margin-top: 2rem;
}

/* Section 3 */
.section-3 h1{
    padding-top: 5rem;
}
.section-3 p{
  padding: 3rem 0;
  text-align: center;
}
.section-3 .section-3-text{
  text-align: left;
}

.stats h3{
    padding-top: 10rem;
    text-align: start;
}

.stats > div{
    padding: 3rem 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin: 3rem auto;
    border-radius: 2.5rem;
}
.stats > div h2{
  text-align: center;
}
.stats .sales{
    background-color: #000;
    border-radius: 25px;
    color: #fff;

}
.stats .sales p{
    color: #fff;
}
@media (min-width: 768px){
  .stats{
      margin: 0 10rem;
      padding: 10rem 0;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 3rem;
  }
}
@media (max-width: 768px){
  .stats h3{
    padding-top: 0;
    text-align: center;
  }
}
/* Section 4 */
 .save-photo img{
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}
 .save-text, .save-text p{
    color: #fff;
    grid-column-start: 2;
    grid-row-start: 1;
 }
 .save-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10rem 0 5rem 5rem;
 }

 .save-text h1{
    padding: 5rem 0;
 }
 .save-text .head{
    font-size: 2.5rem;
 }
.save-text .join{
    font-weight: 700;
    color: red;
    padding: 10rem 0;
 }
.save-text img{
  width: 20rem;
  height: auto;
}
.buynow{
  display: flex;
  justify-content: center;
  padding-top: 15rem;
}
@media (min-width: 768px){
  .save{
      display: grid;
      grid-template-columns: 1fr 2fr;
  }
}
@media (max-width: 600px) {
  .save-text{
    padding: 5rem 2rem
  }
  .save-photo img{
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }
  .save-text .head{
    font-size: 2.5rem;
    align-items: flex-start;
  }
  .buynow{
    padding-top: 5rem;
  }
}
  /* Section 5 */
  .customers-benefits .highlight{
    padding: 7rem 0;
    font-size: 2rem;
    font-weight: 700;
    color: red;
  }
.customers-benefits p{
    margin-top: 3rem;
}
.customers-benefits h1 {
    padding-top: 0;
}
@media (min-width: 768px){
  .customers{
    padding: 5rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10rem;
    align-items: flex-start;
  }
  
  .customers h1 {
    margin-top: 0;
  }
}

/* Estilos para el grid de clientes */
.customers h1 {
  margin-bottom: 2rem;
  padding-top: 0;
}

.customers-images {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centrar el contenido horizontalmente */
  margin-top: 5rem;
}

.customers-images h1 {
  align-self: center; /* Centrar el título */
  width: 100%;
  text-align: center;
}

.clientes-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 3rem;
  position: relative;
}

.clientes-carousel-container {
  width: 100%;
  max-width: 600px; /* Limitar el ancho para que ocupe aproximadamente la mitad de la página */
  overflow: hidden;
  position: relative;
}

.clientes-carousel-track {
   display: flex;
   transition: transform 0.5s ease-in-out;
   gap: 2rem;
   width: 100%;
}

.clientes-carousel-track img {
   flex: 0 0 auto;
   width: 120px; /* Tamaño más pequeño para desktop */
   height: 120px;
   aspect-ratio: 1/1;
   object-fit: cover;
   border-radius: 8px;
   transition: transform 0.3s ease;
   scroll-snap-align: center;
   margin: 0 0.85rem;
   /* Mejora compatibilidad con Safari */
   -webkit-transform: translateZ(0);
}

.clientes-carousel-track img:hover {
   transform: scale(1.05);
}

.clientes-btn-flecha {
   background: rgba(0, 0, 0, 0.5);
   color: white;
   border: none;
   border-radius: 50%;
   width: 40px;
   height: 40px;
   font-size: 1.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   position: absolute;
   z-index: 10;
   transition: background 0.3s ease;
}

.clientes-btn-flecha:hover {
   background: rgba(0, 0, 0, 0.8);
}

.clientes-btn-flecha.izq {
   left: 0;
}

.clientes-btn-flecha.der {
   right: 0;
}

/* Responsive para tablets */
@media (max-width: 992px) {
   .clientes-carousel-container {
     max-width: 500px; /* Reducido para mantener la proporción de la mitad de la página */
     margin: 0 auto;
   }
   
   .clientes-carousel-track img {
     width: 120px;
     height: 120px;
   }
}

/* Responsive para móviles */
@media (max-width: 768px) {
   .clientes-carousel-container {
     max-width: 400px; /* Reducido para mantener la proporción */
     margin: 0 auto;
     -webkit-overflow-scrolling: touch; /* Mejora el desplazamiento en Safari iOS */
   }
   
   .clientes-carousel {
     margin-top: 1.5rem;
   }
   
   .clientes-btn-flecha {
     width: 30px;
     height: 30px;
     font-size: 1.2rem;
   }
   
   .clientes-carousel-track img {
     width: 120px;
     height: 120px;
   }
}

/* Soporte específico para Safari en iOS */
@supports (-webkit-touch-callout: none) {
  .clientes-carousel-track img {
    /* Ajustes específicos para Safari en iOS */
    max-width: 100px;
    height: 100px;
  }
  
  /* Mejora el contenedor para Safari */
  .clientes-carousel-container {
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translateZ(0);
  }
  
  /* Mejora el track para Safari */
  .clientes-carousel-track {
    -webkit-transform: translateZ(0);
  }
}

/* Móviles pequeños */
@media (max-width: 576px) {
   .clientes-carousel-container {
     max-width: 300px; /* Reducido para mantener la proporción */
   }
   
   .clientes-carousel-track img {
     width: 120px;
     height: 120px;
   }
}
@media (max-width: 600px){
  .customers{
    padding: 5rem 0;
  }
  .customers-benefits .highlight{
    padding: 0;
  }
  .customers-benefits h1{
    font-size: 3rem;
  }
}
  /* Section 6*/
  .contact{
    padding: 5rem 0;
  }
@media (min-width: 768px){
  .contact img{
    max-width: 25%;
  }
}
  .contact img{
    width: 100%;
  }
  .contact h3{
    padding-top: 5rem;
    color: red;
  }
  .contact p{
    margin: 0;
    padding: 3rem 0;
    color: #fff;
  }
  .phones{
    display: flex;
    gap: 5rem;
  }
  .phones p{
    padding: 0;
  }
  @media (min-width: 768px){
    .unete{
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
    }
  }
  .unete h3{
    color: red;
  }
  .unete p{
    margin: 3rem 0;
  }
  .ofrecemos {
    padding: 5rem 0;
  }
  .ofrecemos, .ofrecemos p{
    color: #fff;
  }
  .ofrecemos p{
    padding: 3rem 0;
  }
  .ofrecemos span{
    font-weight: 600;
  }
  /* Footer */
  .social{
    display: flex;
    justify-content: center;
    gap: 5rem;
    padding: 3rem 0;
  }
  .social img{
    width: auto;
    height: 2.5rem;
  }
  .copyright{
    color: #fff;
    text-align: center;
    margin: 0;
    padding-bottom: 3rem;
  }

  /* Who we are */
  .we h2{
    color: red;
  }
  .we h1{
    padding: 2rem 0;
  }
  .we-photo img{
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-top: 35px solid rgb(220, 220, 220);
    border-right: 35px solid rgb(220, 220, 220);
  }
  .we-text p{
    padding-bottom: 3rem;
  }
  @media (min-width: 768px){
    .we{
      padding: 5rem 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      justify-items: center;
    }
    .we h1{
      padding: 8rem 0;
    }
  }

  /* History */
.revista p{
  color: red;
  font-weight: 500;
  font-size: 1.8rem;
  margin: 1rem;

}
.revista .end{
  text-align: right;
}
  .history img{
    max-width: 100%;
    /* height: 100%;
    object-fit: cover; */
  }
  .history-text{
    padding: 5rem 0;
  }
  .history-text h1{
    padding: 2rem 0;
  }
  .history-text h3{
    margin: 0;
  }
  .history-text p{
    padding: 2rem 0;
  }
  .history-list{
    display: flex;
    gap: 3rem;
    align-items: center;
  }
  .history-list p{
    margin: 0;
  }
  @media (min-width: 768px){
    .history{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10rem;
      align-items: center;
    }
    .history-list{
      display: flex;
      gap: 3rem;
      padding-top: 4rem;
      align-items: center;
    }
    .history-text h1{
      padding: 3rem 0;
    }
  }

  /* Team */
  .team {
    padding: 5rem 0;
    text-align: center;
    color: #fff;
  }
  .team p{
    color: #fff;
  }

  /* Mision */
  .mision-heading{
    text-align: center;
  }
@media (min-width: 768px){
  .mision_vision{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
    text-align: center;
  }
}

  .mision_vision_2 {
    background-color: #000;
    border-radius: 3rem;
    margin: 5rem 0;
    padding-top: 5rem;
  }

  @media (max-width: 768px){
    .mision_vision_2 {
      background-color: #000;
      border-radius: 3rem;
      margin: 5rem 0;
      padding-top: 5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  .mision_vision h3{
    color: red;
  }

  .mision_vision img{
    height: 10rem;
    width: 10rem;
    object-fit: contain;
  }
  .mision_vision .cohete{
    background-color: #fff;
    border-radius: 3rem;
    padding: 2rem 7rem;
  }
  /* @media (max-width: 768px){
    .mision_vision img{
      background-color: #fff;
      border-radius: 3rem;
      padding: 3rem 10rem;
      width: auto;
      height: 10rem;
    }
  } */
  .mision{
    background-color: #fff;
    border-radius: 3rem;
    padding: 2rem;
    margin: 3rem;
  }
  .mision_vision .our_val{
    text-align: center;
  }
  .values_com{
    padding-bottom: 5rem;
  }
  .values{
    border: solid 2px red;
    border-radius: 40px;
    text-align: center;
    padding: 2rem;
  }
  .val {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
  }
  .val img{
    width: auto;
    height: 3rem;
  }
  .compromise{
    margin-bottom: 5rem;
  }
.val-list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    gap: 5rem;
}

/* Quote */
.quote{
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px){
  .quote{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
  }
}

.quote img{
  max-width: 50rem;
  padding: 10rem;
}
@media (max-width: 600px) {
  .quote img {
      margin: 5rem auto;
      padding: 0;
      max-width: 50%;
  }
  .quote .quote-text {
    margin: 0 auto;
    padding-bottom: 3rem;
    max-width: 350px;
}
}
.quote p, .quote h3, .quote h2{
  color: #fff;
}
.quote h3{
  text-align: center;
  padding: 5rem 10rem;
  font-size: 3rem;
  font-weight: 300;
  border-bottom: solid 2px red;
}

/* Questions */
.questions-list{
  padding: 5rem 0;
}
@media (min-width: 768px){
  .questions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 20rem;
    padding-top: 5rem;
  }
}
.question {
  border-bottom: solid 2px red;
}
.question:nth-child(5), .question:nth-child(6){
  border-bottom: none;
}
.question h3{
  padding: 2rem 0;
}
.question p{
  padding: 0 5rem 3rem 5rem;
}

/* Servicios */
@media (min-width: 768px){
  .division{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
.text{
  padding: 5rem 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.text p{
  padding: 3rem 0;
}
.text h3{
  color: red;
  font-size: 3rem;
}
.sidebar{
  padding: 5rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sidebar .logo{
  width: 40%;
  margin-bottom: 10rem;
}
.sidebar .buy{
  height: 8rem;
  width: 24rem;
}
@media (max-width: 768px){
  .text {
    padding: 0;
  }
  .sidebar {
    padding: 0 0 5rem 0;
  }
  .sidebar .logo {
    width: 65%;
    margin-bottom: 5rem;
    
  }
  .sidebar .buy{
    height: 7rem;
    width: 20rem;
  }
}

/* Categorías */
.categories, .categories p{
  color: #fff;
  padding: 5rem 0;
  font-size: 1.6rem;
  text-align: center;
}
.categories-list{
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 768px){
.categories-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5rem;
  padding: 2rem 0;
  list-style: none;
  margin: 0 auto;
}
}
.categories-list li{
  margin-top: 2rem;
}
.categories-list ul{
  margin: 0;
}
.categories-list h2{
  font-size: 2rem;
  color: rgb(117, 0, 0);
  margin: 0;
  padding: 0;
}

.category {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 40px;
  color: #000;
  padding: 4rem;
  width: 132px;
}

.category:nth-child(1){
  border: solid 3px grey;
}
.category:nth-child(2){
  border: solid 3px red;
}
.category:nth-child(3){
  border: solid 3px brown;
}
.category:nth-child(4){
  border: solid 3px purple;
}
.category:nth-child(5){
  border: solid 3px grey;
}
.category img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin-bottom: 2rem;

  /* Compatibilidad Safari */
  -webkit-transform: translateZ(0);
  -webkit-mask-image: none;
}
.all{
  display: flex;
  align-items: center;
  justify-content: center;

}
.all-list{
  display: flex;
  align-items: center;
  gap: 3rem;
  max-width: 50rem;
  height: 5rem;
  margin-top: 10rem;
  background-color: #fff;
  border-radius: 20px;
  color: #000;
  text-align: center;
  padding: 1.5rem 2rem;
}
.all-list-index {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  background-color: #000;
  border-radius: 20px;
  color: #fff;
  text-align: center;
  padding: 1.5rem 2rem;
  justify-content: center;
}
.all-list-index p{
  color: #fff;
}
.all h3{
  margin: 0;
  color: #000;
}
@media (max-width: 600px) {
  .category img{
    width: 85%;
  }
  .categories-list img {
      max-width: 170px;
  }
}

@media (max-width: 768px) {
  .all-list{
    gap: 0;
    justify-content:center;
  }
  .all-list-index{
    margin-bottom: 2rem;
    padding: 0.5rem .5rem;
    gap: 0;
  }
  .categories h1{
    text-align: center;
    font-size: 3rem;
  }
}

/* Strategy */
.mt{
  padding: 5rem 0;
}
.mt > div{
  margin: 5rem 0;
  border-bottom: solid 2px #000;
}
.mt p{
  margin-bottom: 5rem;
}
.mt > div:last-of-type{
  border-bottom: none;
}
.mt img{
  display: block;
  margin: 0 auto;
  width: 60%;
  min-width: 30rem;
  padding: 5rem 0;
}
.mt h1{
  color: red;
  font-weight: 400;
}
/* Use */
.white-text{
  color: #fff;
}
.use{
  text-align: center;
  color: #fff;
}
.white-text p{
  margin: 5rem 0;
  color: #fff;
}
@media (min-width: 768px){
  .steps{
    margin: 10rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 20rem;
  }
}
.step{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 50%;
  padding: 3rem;
  width: 8rem;
  height: 8rem;
}
.step img{
  width: 10rem;
}
.right{
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 768px){
  .right{
    display: flex;
    justify-content: start;
  }
}
.steps-text span{
  color: red;
}

/* Login */
.login-header{
  padding: 5rem 0;
  text-align: center;
}

.form{
  max-width: 40rem;
  background: white;
  padding: 20px;
  margin: auto;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.login-input{
  width: 90%;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 16px;
}

.login-button{
  width: 100%;
  padding: 10px;
  font-size: 16px;
  background: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}
.login-button:hover{
  background: #0056b3;
}
.join a{
  color: #000;
}
.join a:hover{
  color: #007bff;
}

/* Comprar */
.saludo{
  text-align: right;
  color: #fff;
  
}
/* Cupones Cliente */
header span{
  font-size: 2rem;
  margin-right: 5rem;
}
#cupones-container p{
  margin: 2rem 0;
}

/* Cupones Admin */
.cuponesadmin{
  margin: 20px auto;
  max-width: 960px;
}

/* Resutaurantes */
.restaurantes h1 {
  color: #fff;
  padding: 5rem 0;
  text-align: center;
  font-size: 3rem;
}

.restaurante,
.restaurante p {
  color: #fff;
  padding: 2rem 0;
}

.restaurante-titulo {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background-color: #fff;
  color: #000;
  border-radius: 50%;
  font-weight: bold;
  font-style: italic;
  cursor: pointer;
  transition: all 0.2s ease;
}

.info-icon:hover {
  background-color: red;
  color: #fff;
}

.restaurante img {
  max-width: 100%;
}
.rest-buy{
  display: none;
}

.rest-buy a{
  text-align: center;
  font-size: 1.5rem;
  /* font-weight: bold; */
  /* border: solid 1px red; */
  background-color: green;
  padding: 1rem;
  border-radius: 10px;
  max-width: 10rem;
}
  .boton-flotante {
    position: fixed;
    top: 240px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(0, 128, 0);
    font-size: 1.5rem;
    color: white;
    padding: 1rem;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 999;
    transition: background-color 0.3s ease;
  }

  .boton-flotante:hover {
    background-color: #218838; /* Verde más oscuro */
  }

@media (max-width: 768px) {
  /* .rest-buy{
    display: block;
    text-align: center;
  } */
  .boton-flotante {
    top: auto;
    bottom: 40px;
    right: -20px;
    left: auto;
  }
}

/* Galería para escritorio */
@media (min-width: 768px) {
  .restaurantes-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }

  .galeria-restaurante {
    max-width: 100%;
    overflow-x: auto;
    display: flex;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding: 1rem 0;
  }

  .galeria-restaurante img {
    flex: 0 0 calc(33.333% - 10px); /* 3 imágenes por fila */
    max-width: calc(33.333% - 10px);
    scroll-snap-align: start;
    border-radius: 10px;
    height: 200px; /* Altura fija para todas las imágenes */
    object-fit: cover; /* Mantiene la proporción y cubre el contenedor */
  }

  .btn-flecha {
    display: inline-block;
  }
  .restaurantes h1 {
    color: #fff;
    padding-top: 5rem;
    text-align: left;
    font-size: 4rem;
    text-align: center;
  }

}

/* Galería carrusel para móviles */
.galeria-contenedor {
  position: relative;
  background-color: #000;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.galeria-restaurante {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 10px;
  padding: 1rem 0;
  max-width: 90vw;
  scrollbar-width: none; /* Ocultar scrollbar en Firefox */
  -ms-overflow-style: none; /* Ocultar scrollbar en IE/Edge */
}

.galeria-restaurante::-webkit-scrollbar {
  display: none; /* Ocultar scrollbar en Chrome/Safari/Opera */
}

.galeria-restaurante img {
  flex: 0 0 auto;
  width: 100%;
  max-width: 300px;
  height: 180px; /* Altura fija para todas las imágenes en móvil */
  object-fit: cover; /* Mantiene la proporción y cubre el contenedor */
  scroll-snap-align: start;
  border-radius: 10px;
}

/* En dispositivos móviles, ajustar para que se vea una imagen completa y parte de la siguiente */
@media (max-width: 767px) {
  .galeria-restaurante {
    scroll-snap-type: x mandatory;
    scroll-padding: 0 10px;
    -webkit-overflow-scrolling: touch; /* Mejora el desplazamiento en Safari iOS */
  }
  
  .galeria-restaurante img {
    flex: 0 0 85%;
    max-width: 85%;
    height: 160px; /* Reducir altura en móviles */
    -webkit-transform: translateZ(0); /* Mejora el renderizado en Safari */
  }
}

/* Soporte específico para Safari en iOS */
@supports (-webkit-overflow-scrolling: touch) {
  .galeria-restaurante img {
    /* Ajustes específicos para Safari en iOS */
    max-width: 80%;
    height: 150px;
  }
}



.btn-flecha {
  background: #000;
  border: none;
  color: white;
  font-size: 2rem;
  padding: 5px 12px;
  cursor: pointer;
  border-radius: 50%;
  opacity: 0.8;
  z-index: 10;
}

.btn-flecha:hover {
  opacity: 1;
}

.btn-flecha.izq {
  left: 10px;
}

.btn-flecha.der {
  right: 10px;
}


/* Común para hover en todas las vistas */
.galeria img {
  cursor: pointer;
  border-radius: 5px;
  transition: transform 0.2s;
}

.galeria img:hover {
  transform: scale(1.01);
}



/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 60px;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.9);
  text-align: center;
}

.modal-contenido {
  max-width: 90%;
  max-height: 80vh;
  margin: auto;
  display: block;
  border-radius: 10px;
  object-fit: contain; /* Asegura que la imagen completa sea visible sin distorsión */
}

.cerrar {
  position: absolute;
  top: 30px;
  right: 50px;
  color: white;
  font-size: 40px;
  cursor: pointer;
}

.flecha {
  cursor: pointer;
  position: absolute;
  top: 50%;
  font-size: 50px;
  color: white;
  padding: 10px;
  user-select: none;
  transform: translateY(-50%);
}
.izquierda { left: 20px; }
.derecha { right: 20px; }