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"
                      "galeria galeria galeria  similar"
                      "slider slider slider  similar"
                      "evento evento evento  similar"
                      "market market market  similar"
                      "ubicacion ubicacion  ubicacion similar"
                      "publicaciones publicaciones  publicaciones similar"
                     
                     
                      "ubicaciones ubicaciones ubicaciones  similar"
                       "contactos contactos contactos  similar"
                       "qr qr qr  similar"
    ;}


    .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; box-shadow: 0px 0px 10px 2px rgb(0,0,0);}

      .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 .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: 80vh;}
.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: #050505;
  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;
}

.barra {
  background: #222;
 
  
  margin: 5px 0;
  overflow: hidden;
  height: 50px;
}

.barra .relleno {
  height: 10px;
  border-radius: 10px;
}

/* Azul = efectividad */
.barra.azul .relleno {
  background: #2196F3;
}

/* Verde = clasificación */
.barra.verde .relleno {
  background: #4CAF50;
}

/* Responsive */
@media (max-width: 768px) {
  .comentario-item {
    flex: 0 0 80%;
  }
}
.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:80%; height: auto; margin: auto; margin-top: 100px; display: flex; 
  flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; }
.Contenedor .galeria div{ height:130px; box-shadow: 0px 0px 10px 2px rgb(0,0,0); border-radius: 5px; margin-top: 10px; text-align: center;}
.Contenedor .galeria div:hover{height:132px;}
.Contenedor .galeria div h5{ margin-top: 0px;}
.Contenedor .galeria .modal img{width: 500px;}
.Contenedor .galeria img{border-radius: 5px;}  

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

.Contenedor .slider{grid-area:slider; width: 99%; 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: 100px;
}

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

  

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

.card {
  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 */
.card-header {
  padding: 15px;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

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

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

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

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

/* Pie de la tarjeta */
.card-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 */
.card-footer a {
  color: #007bff;
  text-decoration: none;
  font-size: 14px;
}

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

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

  .card {
      max-width: 100%;
  }

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

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

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

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

  .card-body {
      padding: 10px;
  }

  .card-footer {
      padding: 8px;
  }

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

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

  .card-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;
  }
}


@media (max-width: 768px) {
    .comentarios {
     background-color: #0053ee;
        width: 90%;
    }

    .comentarios h2 {
        font-size: 24px;
    }

    .comentarios textarea {
        font-size: 13px;
    }

    .comentarios select {
        font-size: 13px;
    }

    .comentarios input[type="submit"] {
        font-size: 13px;
        padding: 8px 16px;
    }

    .comentario-item p {
        font-size: 13px;
    }

    .promedio {
        font-size: 16px;
        padding: 8px 12px;
    }
}


.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: 2em;
  margin-bottom: 30px;

}

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

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

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

/* Imagen de la ficha */
.card img {
  width: 100%;
  height: 180px;
  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: 0.95em;
  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(0.80); /* 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: 160px;
  }

  .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.85em;
  }

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

.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"
                        "vision"
                        "mision"
                        "comentarios"
                        "galeria"
                         "slider"
                         "imagen"
                         "publicaciones"
                        "evento"
                        "market"
                        "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 .barra a{font-size: 12px; padding: 22px 5px 22px 5px;  }
.Contenedor .historia{margin-top: 0px;  height:auto;}
.Contenedor .vision{margin-top: 0px;  height:auto;}
.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 div{margin-top: 10px; height: 100px; }
.Contenedor .galeria div:hover{height:100px;}
.Contenedor .galeria div img{width:100px; }
.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%;}  
.Contenedor .contactos{margin: auto;}
}