body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
   
  }

    
  .Contenedor{
     
    display:grid;
    width:100%;
    margin: auto;
       grid-template-columns: repeat(4,25% 25% 25% 25% );
    grid-template-rows:repeat(1, auto);
    grid-template-areas:"topnav topnav topnav topnav "
                      
                     
                      
                       "portada portada portada portada"
                      "portadaa portadaa portadaa portadaa"
                      "barra barra barra barra"
                      
                       "logotipo logotipo logotipo logotipo"
                       "descripcion descripcion descripcion descripcion"
                       "historia historia vision vision"
                      "mision mision mision mision "
                     "comentarios comentarios comentarios comentarios "
                     
                      "productos productos productos  similar"
                      "evento evento evento  similar"
                      
                      "ubicacion ubicacion  ubicacion similar"
                      "publicaciones publicaciones  publicaciones similar"
                      "servicio servicio servicio  similar"
                       "ubicaciones ubicaciones ubicaciones  similar"
                       "contactos contactos contactos  similar"
                       "qr qr qr  similar"
                      
                       "galeria galeria galeria galeria"
                       "slider slider slider slider"
                       "introduccion introduccion introduccion introduccion"
                       "market market market  market"
                     
    ;}

    .topnav {grid-area: topnav;
      overflow: hidden;
      background-color: #000000;
  position: fixed;
  width: 100%;
  z-index:3;
    }
    .topnav a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 15px;
      font-weight:600;
    }
    .topnav a:hover {
      background-color: #009de6;
      color: rgb(255, 255, 255);
      text-decoration: underline;
    }
  
    .topnav .im{
      background-color: #000000;
      color: rgb(255, 255, 255);
     font-size: 9px;
    }
    .topnav .im:hover{
      background-color: #000000;
      color: #009de6;
      text-decoration: underline;
     
    }
  
    .topnav .im img:hover{
      margin: auto;
      width: 30px;
      
    }
   
  
    .topnav a.active {
      background-color: #000000;
      color: rgb(255, 255, 255);
    }
    .topnav .icon {
      display: none;
    }
  
  
  .bloque1{grid-area: bloque1; width: 100%;}
  .bloque1 img{width: 100%;}
  
  
  
  
  
  
  
    @media screen and (max-width: 900px) {
      .topnav a:not(:first-child) {display: none;}
      .topnav a.icon {
        float: right;
        display: block;
      }
    }
  
   
    
    @media screen and (max-width: 900px) {
      .topnav.responsive {position: relative;}
      .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
      }
      .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
      }
  
  .topnav.responsive{
  width: 100%; margin: auto; 
  }
    }
    .Contenedor .portada{grid-area: portada;  width: 100%; height: auto; background: url(back/INICIO.png); background-size:cover; 
      background-position: center; margin-top: 30px;}

      .Contenedor .portadaa{grid-area: portadaa;  width: 100%;  background: url(back/INICIO.png); background-size:cover; 
        background-position: center; margin-top: 30px; box-shadow: 0px 0px 10px 2px rgb(0,0,0);}
          .Contenedor .intro{grid-area:intro; width: 90%;  margin: auto; text-align: center; display: none;}
         .Contenedor .intro img{border-radius: 10px;}

  .Contenedor .portada div{height: 400px;}
  .Contenedor .portada a{width: 200px; height: 20px; background-color: #0098c9; color:#f0f0f0; font-size: 20px; 
          margin-left: 10%; padding: 10px; border-radius: 10px; text-decoration: none; }
  .Contenedor .portada a:hover{text-decoration: underline; padding: 11px;} 
  /* fin portada  */



.Contenedor .logotipo {grid-area: logotipo; margin-top: 100px; text-align: center; min-height: 60vh;}
.Contenedor .logotipo img{margin: auto; box-shadow: 0px 0px 10px 2px rgb(0,0,0); border-radius: 10px;}


.Contenedor .descripcion {grid-area: descripcion; width: 90%; margin: auto;  text-align: center; min-height: 50vh;}
.Contenedor .descripcion h1{font-size: 40px; font-weight: 900;}

.Contenedor .similar{ grid-area: similar; width: 100%; height: 80%; text-align: center;}
.Contenedor .similar img{ border-radius: 5px; box-shadow: 5px 5px 15px 0px rgb(0,0,0); }

.Contenedor .historia { 
  grid-area: historia;
  width: 100%;
  height: 100%;
  margin: auto;
  margin-top: 50px;
  
}

.Contenedor .historia img { 
  
  width: 100%;
    height: auto;
  margin: auto;
 
  
}






.Contenedor .productos {grid-area:productos; width: 90%; margin: auto; margin-top: 50px; text-align: center;}
.Contenedor .mision {grid-area:mision; width: 90%; margin: auto; margin-top: 50px; text-align: center;  min-height: 90vh}
.Contenedor .vision {grid-area:vision; width: 90%; margin: auto; margin-top: 50px; text-align: center;  min-height: 90vh}


/* Contenedor general */
.Contenedor .comentarios {
  grid-area: comentarios;
  width: 90%;
  margin: auto;
  margin-top: 0px;
  text-align: center;
  background-color: #ffffff;
  color: #000000;
  margin-top: 0px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  padding-bottom: 20px;
}

.comentarios h2 {
  font-size: 18px;
  margin: 10px 0;
  color: #00bcd4;
}

/* Comentarios estilo carrusel horizontal */
.comentarios-lista {
  display: flex;
  overflow-x: auto;
  gap: 15px;
  padding: 10px;
  scroll-snap-type: x mandatory;
}

.comentarios-lista::-webkit-scrollbar {
  height: 6px;
}

.comentarios-lista::-webkit-scrollbar-thumb {
  background: #2196F3;
  border-radius: 10px;
}

/* Cada comentario */
.comentario-item {
  background: #111;
  color: #fff;
  border-radius: 10px;
  flex: 0 0 250px; /* tamaño del “slide” */
  padding: 15px;
  scroll-snap-align: start;
  border: 1px solid #333;
  transition: transform 0.2s;
}

.comentario-item:hover {
  transform: scale(1.03);
  border-color: #00bcd4;
}

/* Cabecera del comentario */
.comentario-item strong {
  display: block;
  color: #4FC3F7;
  margin-bottom: 5px;
}

.comentario-item em {
  color: #888;
  font-size: 11px;
}

/* Texto */
.comentario-item p {
  font-size: 13px;
  color: #ddd;
  margin-top: 5px;
  text-align: left;
}

/* Estrellas */
.stars {
  color: gold;
  font-size: 16px;
  margin-top: 4px;
}

/* Sección de promedio */
.promedio {
  margin-top: 15px;
  color: #fff;
  font-size: 14px;
  text-align: left;
}

.Contenedor .barra{grid-area: barra; width: 100%;  margin: auto; display: flex; flex-direction: row; background-color:#000000; 
   flex-wrap: wrap;}
.Contenedor .barra a{font-size: 25px; font-weight:700;  text-decoration:none;  color: #ffffff; margin: auto; transition: background-color 0.5s ease; padding: 10px;}
.Contenedor .barra a:hover{ background-color: rgb(33, 155, 33); }
.Contenedor .barra a li{list-style: none; height: 100%; }

.Contenedor .barra .stay{color:#ff004c}


.Contenedor .galeria{grid-area: galeria; width:60%; height: auto; margin: auto; margin-top: 100px; display: flex; 
  flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; }
  
.Contenedor .galeria div{ width: 150px; height:160px; box-shadow: 0px 0px 10px 2px rgb(51, 51, 51); margin: 10px; text-align: left;}
.Contenedor .galeria div:hover{height:162px;}
.Contenedor .galeria div h5{ margin-top: 0px;}
.Contenedor .galeria .modal img{width: 500px;}
.Contenedor .galeria img{border-radius: 5px; width: 160px;}  


.Contenedor .evento{grid-area:evento;}

.Contenedor .slider{grid-area:slider; width: 60%; margin: auto;
margin-top: 50px;
}

.Contenedor .slider img{border-radius: 10px; box-shadow: 0px 0px 10px 2px rgb(85, 85, 85); }


/* Estilo general para la sección de publicaciones */
.publicaciones {
  grid-area: publicaciones;
  gap: 16px;
  padding: 20px;
  box-sizing: border-box;
  
  background-color: #e2e2e2;
  overflow-y: scroll;
  height: 1000px;
  width: 65%;
  margin: auto;
  margin-top: 0px;
}

.publicaciones .scro { 
  display: flex;
  flex-direction: column-reverse;
  padding: 20px;

  

 
  /* Elimina height para permitir que se ajuste al contenido */
}

.publicaciones .cards {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 100%;
  color: #333;

  max-width: 90%;
  margin:auto;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;

  /* Elimina height para que se ajuste al contenido */
}

/* Encabezado de la tarjeta */
.publicaciones .cards-header {
  padding: 15px;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Estilo para el título de la tarjeta */
.publicaciones .cards-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

/* Estilo para la imagen de la tarjeta */
.publicaciones .cards-body {
  flex-grow: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Imagen dentro de la tarjeta */
.publicaciones .cards-body img {
  width: 80%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

/* Contenido de texto en el cuerpo de la tarjeta */
.publicaciones .cards-body p {
  margin: 0;
  color: #333;
  font-size: 14px;
   flex-grow: 1;
}

/* Pie de la tarjeta */
.publicaciones .cards-footer {
  padding: 10px;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f7f7f7;
}

/* Estilo para los enlaces en el pie de la tarjeta */
.publicaciones .cards-footer a {
  color: #007bff;
  text-decoration: none;
  font-size: 14px;
}

.publicaciones .cards-footer a:hover {
  text-decoration: underline;
}

/* Media Queries para Responsividad */
@media (max-width: 768px) {
  .publicaciones {
      padding: 10px;
      gap: 10px;
      
  }

  .publicaciones .cards {
      max-width: 100%;
  }

  .publicaciones .cards-header h3 {
      font-size: 18px;
  }

  .publicaciones .cards-body p {
      font-size: 13px;
  }

  .publicaciones .cards-footer a {
      font-size: 13px;
  }
}

@media (max-width: 480px) {
  .publicaciones .cards-header {
      padding: 10px;
  }

  .publicaciones .cards-body {
      padding: 10px;
  }

 .publicaciones .cards-footer {
      padding: 8px;
  }

 .publicaciones .cards-header h3 {
      font-size: 16px;
  }

 .publicaciones .cards-body p {
      font-size: 12px;
  }

 .publicaciones .cards-footer a {
      font-size: 12px;
  }
}
 .imagen{grid-area:imagen; width: 100%;  margin-top:100px; text-align: center;}
 .imagen img{width: 350px; margin-top: 100px;}



 .evento {
  max-width: 600px;
  margin: auto;
  
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
}

.evento h2 {
  text-align: center;
  
  margin-bottom: 20px;
}

#eventoImg {
  width: 60%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 20px;
  margin: auto;
}

#countdown {
  font-weight: bold;
  color: #f15a29; /* Color similar to Instagram's gradient */
  text-align: center;
  margin-bottom: 20px;
}

#eventoTitulo {
  font-size: 24px;
  font-weight: bold;
  
  margin-bottom: 10px;
}

#eventoDescripcion {
  font-size: 16px;
 
  margin-bottom: 10px;
}

#eventoFecha {
  font-size: 14px;
 
  margin-bottom: 20px;
}

/* Responsive Design */
@media (max-width: 600px) {
  .evento {
      padding: 15px;
  }
  #eventoTitulo {
      font-size: 20px;
  }
  #eventoDescripcion {
      font-size: 14px;
  }
}


.Contenedor .contactos{grid-area:contactos; width:100%;  }

.Contenedor .ubicaciones{grid-area:ubicaciones; width:100%; display: flex; flex-direction: row; flex-wrap: wrap;  }
.Contenedor .ubicaciones div{ text-align: center;  margin: auto;}

.Contenedor .ubicacion{grid-area: ubicacion; width: 30%;}

.market {
  grid-area:market;
  text-align: center;
  padding: 40px 20px;
  /*background: #f9f9f9;*/
}

.market h2 {
  font-size: 20px;
  margin-bottom: 30px;

}

/* Contenedor de fichas en grid */
.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  max-width: 1000px;
  margin: auto;
  
  padding: 0 10px;
  height: 600px;
}

/* Estilos de cada ficha */
.card {
  width: 90%;
  height: 500px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 10px;
  text-align: center;
  transition: transform 0.2s ease-in-out;
}

.card:hover {
  transform: translateY(-5px);
}

/* Imagen de la ficha */
.card img {margin: auto;
   margin-top: 0px;
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

/* Título */
.card h3 {
  margin: 10px 0;
  font-size: 1.2em;
  color: #222;
}

/* Descripción */
.card p {
  font-size: 12px;
  color: #666;
  margin-bottom: 15px;
  line-height: 1.4;
}

/* Botón */
.card button {
  background: #2196F3;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
  font-size: 0.95em;
}

.card button:hover {
  background: #1976D2;
}

stripe-buy-button {
  transform: scale(1.00); /* 85% del tamaño original */
  transform-origin: top left; /* ajusta el punto de referencia */
  margin: 5px auto;
  display: block;
}

/* Responsividad extra */
@media (max-width: 768px) {
  .market h2 {
    font-size: 1.6em;
  }

  .card img {
    height: 230px;
  }

  .card h3 {
    font-size: 1.1em;
  }
}

@media (max-width: 480px) {
  .market {
    padding: 20px 10px;
  }

  .market h2 {
    font-size: 1.4em;
  }

  .card {
    padding: 15px;
  }

  .card img {
    height: 140px;
  }

  .card p {
    font-size: 0.5em;
  }

  .card button {
    padding: 8px 15px;
    font-size: 0.9em;
  }
}

.introduccion {
    grid-area: introduccion;
    padding: 20px;
    margin: 20px auto;
   text-align: center;
    border-radius: 8px;
    max-width: 100%;
    
  
}

.servicio{grid-area: servicio;
width: 80%;
height: 50px;
background-color: #be0000;
color: white;
margin: auto;
text-align: center;
}


/* Responsive para pantallas pequeñas */
@media screen and (max-width: 768px) {
    .introduccion {
        margin: 10px;
        padding: 15px;
       
    }
  }

  .Contenedor .contactos{grid-area:contactos; width:100%; height: 400px; }
  .Contenedor .ubicacion{grid-area: ubicacion; width: 30%;}
.qr{grid-area: qr; width: 100%; margin: auto; margin-top: 0px; text-align: center;}

  @media (max-width:900px){
    .Contenedor{ 
    width:100%;
    display:grid;
    grid-gap:0px;
    grid-template-columns: repeat(1, 100%);
    grid-template-rows:repeat(3, auto);
    grid-template-areas:"topnav"
                        "portada"
                        "portadaa"
                        
                        "barra"
                        "logotipo"
                        "descripcion"
                        "productos"
                        "historia"
                        "mision"
                        "vision"
                        "comentarios"
                        "galeria"
                        "slider"
                        "imagen"
                        "publicaciones"
                        "evento"
                        "introduccion"
                        "market"
                        "servicio"
                        "contactos"
                        "ubicaciones"
                        "qr"
                        "intro"
                        "similar"
   ;}
   /*inicia header*/
   /*inicia header*/
   .topnav .im{ font-size: 20px;
    
   }
   .topnav a{ display: none;}
   .topnav{width: 100%;}

/*Termina header*/
.Contenedor .portadaa {width: 100%; }
/*.Contenedor .intro {
  visibility: hidden; display: none;
}*/
.Contenedor .similar {
  visibility: hidden; display: none;
}


.Contenedor .intro{margin-top: 0px;}
.Contenedor .barra a{font-size: 12px; padding: 10px }

.Contenedor .logotipo img{width:200px; min-height: 0vh;}
.Contenedor .logotipo { min-height: 0vh;}
.Contenedor .historia{width:80%; margin: auto; margin-top: 100px; }
.Contenedor .descripcion{min-height: 0vh;}
.Contenedor .galeria{width:100%; }
.Contenedor .galeria div{margin-top: 10px; height: 100px; }
.Contenedor .galeria div:hover{height:100px;}
.Contenedor .galeria div img{width:120px; }
.Contenedor .galeria .desc{font-size: 10px; }

.Contenedor .galeria div h5{ font-size: 10px;}

.Contenedor .slider{ width: 100%; margin: auto;
  margin-top: 50px;
  }
.Contenedor .publicaciones{width:100%;}  

}