.mercados-cerca {
    padding: 20px;
}

.mercados-cerca h2 {
    font-size: 21px;
    margin-bottom: 20px;
}

/* Tarjeta */


.tarjeta-producto {
    width: 200px;
    max-height: 350px;
    min-height: 350px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0px 6px 17px 0px rgba(0,0,0,0.64);
    overflow: hidden;
    padding: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


/* Título destacado */
.title-tarjeta {
    background-color: #193f56;
    color: white;
    font-weight: bold;
    padding: 10px 0;
    border-radius: 15px 15px 0 0;
    margin: -16px -16px 10px -16px;
    font-size: 12px;
}


/* Imagen */

.img-tarjeta img {
    width: 100%;
    object-fit: contain;
    height: 140px; 
    border-radius: 5px;
    margin-bottom: 10px;
}


/* Nombre de la tienda */
.nombre-tarjeta {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 4px;
}

/* Dirección */
.calle-tarjeta {
    color: #999;
    font-size: 11px;
    margin-bottom: 10px;
}

/* Valoraciones - Estrellas */
.valoraciones-tarjeta {
    font-size: 17px;
    margin-bottom: 10px;
}
.valoraciones-tarjeta::before {
    content: "★★★☆☆";
    color: gold;
    font-size: 17px;
}

/* Horario */
.horario-tarjeta {
    font-size: 14px;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}
.horario-tarjeta::before {
    content: "🕒";
    margin-right: 6px;
}

/* Botón */
.tarjeta-boton {
    background-color: #193f56;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
}
.tarjeta-boton:hover {
    background-color: #4be1b8;
}

/* Íconos - opcional si se usa */
.iconos-tarjeta {
    display: none; /* Oculto porque no aparece en la imagen */
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

/* scroll lateral diferentes div*/

    /***** div best value*/
#best-value-section {
    overflow-x: auto;         
    overflow-y: visible;       
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;     
  }


#best-value-section main.content-secciones-home {
    display: flex;
    flex-wrap: nowrap;
    gap: 5rem;
    min-width: max-content;
  }
 
  #best-value-section article {
    flex: 0 0 auto;
    width: 250px; 
  }

  /***** div busqueda*/


        #markets-section {
            overflow-x: auto;
            overflow-y: visible;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            
        }
        
        /* Fila horizontal */
        #markets-section .flex-evenly-center {
            display: flex;
            flex-wrap: nowrap;
            gap: 5rem;
            min-width: max-content;
        }
        
        /* Tarjetas */
        #markets-section article {
            flex: 0 0 auto;
            width: 250px;
        }
  
    /***** div busqueda tienda*/

    
    #stores-section {
        overflow-x: auto;
        overflow-y: visible;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        
    }
    
    /* Fila horizontal */
    #stores-section .flex-evenly-center {
        display: flex;
        flex-wrap: nowrap;
        gap: 5rem;
        min-width: max-content;
    }
    
    /* Tarjetas */
    #stores-section article {
        flex: 0 0 auto;
        width: 250px;
    }

    /***** div busqueda producto*****/
    

    #products-section {
        overflow-x: auto;
        overflow-y: visible;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
     
    }
    
    /* Fila horizontal */
    #products-section .flex-evenly-center {
        display: flex;
        flex-wrap: nowrap;
        gap: 5rem;
        min-width: max-content;
    }
    
    /* Tarjetas */
    #products-section article {
        flex: 0 0 auto;
        width: 250px;
    }
    
   
      /***** div  tiendas-container*****/

      
      #scroll-tiendas-wrapper {
        overflow-x: auto;
        overflow-y: visible;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1rem;
      }
      
      #tiendas-container {
        display: flex;
        flex-wrap: nowrap;
        gap: 5rem;
        min-width: max-content;
      }
      
      .card-producto {
        flex: 0 0 auto;
        width: 250px;
      }

         /***** div  productos-scroll-wrapper*****/

      #productos-scroll-wrapper {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1rem;
      }

      #productos-subcategorias-scroll-wrapper {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1rem;
      }
      
      #productos-container {
        display: flex;
        flex-wrap: nowrap;
        gap: 5rem;
        min-width: max-content;
      }
      
      .product-card {
        flex: 0 0 auto;
        width: 250px;
      }
      
      #productos-container{
        padding: 1rem;
    }

    /** div general scroll **/

    .scroll-lateral-contenido {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
      }
      
      
      .scroll-lateral-fila {
        display: flex;
        flex-wrap: nowrap;
        gap: 3rem;
        min-width: max-content;
        }
      
      .scroll-lateral-fila article {
        flex: 0 0 auto;
        width: 250px;
      }

      .scroll-lateral-fila{
        padding: 0.5rem 1rem;
    }
      
  /* scroll lateral diferentes div fin*/

  .justify-around{
    justify-content: space-around;
  }
@media (max-width: 700px){
    .title-tarjeta {
        padding: 10px;
    }

    .tarjeta-producto{
        width: 260px;
        min-height: 380px;
        max-height: 380px;
    }

    #tiendas-container{
        padding: 1rem;
    }

    .nombre-tarjeta {
        font-size: 15px;
        margin-bottom: 0px;
    }


    .img-tarjeta img{
        object-fit: contain;
        height: 150px;
    }
   
}