@charset "utf-8";
/**{
  border: 1px dotted red;
}*/
/*Logo*/
main > h1.logo {
  font-size: 2rem;
  background: linear-gradient(90deg, var(--color-verde-oscuro) 35%, var(--color-verde-claro) 50%, var(--color-verde-oscuro) 65%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 1.3rem 0;
  position: relative;
  z-index: 10;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.6));
}
/*Portada*/
section.portada {
  background-image: url('../img/frutas_hierbas/herbes_menjivoles.png');
  background-position: bottom;
  width: 100%;
  height: 20rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 5px 6px -2px rgba(0, 0, 0, 0.9);
}
/*Productes*/
section.producte {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 2rem;
  position: relative;
}

div.imageContainer {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 20rem;
  border: 1px solid var(--color-verde-oscuro);
  box-shadow: 1px 2px 3px 2px rgba(0, 0, 0, 0.7);
}
div.tagProducte {
  font-family: 'Noto Serif', serif;
  font-size: 2rem;
  color: var(--color-verde-oscuro);
  position: absolute;
  align-self: center;
  top: -1rem; /* Per a que puje un poc per amunt */
  background: linear-gradient(0deg, var(--color-beige-oscuro), var(--color-beige-claro));
  border: 1px solid var(--color-verde-oscuro);
  padding: 0.3rem 0.6rem;
  border-radius: 0.2rem;
  font-weight: bold;
}
/*URL de herbes*/
section.producte>div.imageContainer{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
section.chenopodium>div.imageContainer{
  background-image: url('../img/frutas_hierbas/chenopodium.png');
}
section.chichorium>div.imageContainer{
  background-image: url('../img/frutas_hierbas/chichorium.jpg');
}
section.portulaca>div.imageContainer{
  background-image: url('../img/frutas_hierbas/potulaca.png');
}
section.silene>div.imageContainer{
  background-image: url('../img/frutas_hierbas/silene_vulgaris.png');
}
section.sonchust>div.imageContainer{
  background-image: url('../img/frutas_hierbas/sonchus_terrimus.png');
}
section.sonchuso>div.imageContainer{
  background-image: url('../img/frutas_hierbas/sonchus_oleraceus.png');
}
section.umbilicus>div.imageContainer{
  background-image: url('../img/frutas_hierbas/umbilicus.png');
}
section.rumexa>div.imageContainer{
  background-image: url('../img/frutas_hierbas/rumex.png');
}
section.rumexp>div.imageContainer{
  background-image: url('../img/frutas_hierbas/rumex_pulcher.png');
}
section.picris>div.imageContainer{
  background-image: url('../img/frutas_hierbas/picris_echioides.png');
}
section.taraxacum>div.imageContainer{
  background-image: url('../img/frutas_hierbas/tarachacum.png');
}
section.silene>div.imageContainer>div.tagProducte{
  font-size: 1.5rem;
}
section.umbilicus>div.imageContainer>div.tagProducte{
  font-size: 1.2rem;
}
section.taraxacum>div.imageContainer>div.tagProducte{
  font-size: 1rem;
  text-align: center;
}
/*Contacte*/
div.contacte{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
div.contacte>a{
  font-display: inline-flex;
}
button.btn_contacte {
  font-size: 1.4rem;
  border-radius: 0.2rem;
  padding: 0 0.4rem;
  color: white;
  background: linear-gradient(90deg, var(--color-rojo-oscuro) 0%, var(--color-rojo-claro) 100%)!important;/*Altra cosa del w3,,,*/
  border: 1px solid var(--color-verde-oscuro);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
button.btn_contacte:hover {
  transform: scale(1.03);
  box-shadow: 0 0 2px 1px rgba(203, 34, 50, 0.5);
}



/*Texte de producte*/
div.texteProducte {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  height: 100%;
  padding: 1rem;
  position: relative;
  border: 1px solid var(--color-verde-oscuro);
  box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.7);
}
div.w3-container>h4{
  margin-top: 1rem;
  margin-left: 1rem;
}
/*****************/
/****VERSIÓ PC****/
@media (width >= 992px) {
  a[href="hierbas_comestibles.html"]{
    background: linear-gradient(90deg, var(--color-rojo-oscuro) 0%, var(--color-rojo-claro) 50%);
    border-radius: 4px;
    color: var(--color-beige-claro) !important;/*Machaque els estils anteriors, si no no es mostra el colro de la lletra*/
    filter: drop-shadow(1px 1px 1px rgba(36, 4, 7, 0.9));
    margin-right: 0.2rem;
    margin-left: 0.2rem;
    transition: all 0.3s ease-in-out;
  }
  a[href="hierbas_comestibles.html"]:hover {
      color: whitesmoke!important; /* 🔹 Blanco roto */
  }
  main > h1.logo {
    font-size: 3rem;
  }
  section.producte {
    font-size: 1rem;
    width: 90%;
    flex-direction: row;
    margin: 3rem auto;
    justify-content: center;
    align-items: stretch;
    height: 20rem;
    
  }
  div.imageContainer {
    height: 100%;
    min-width: 20rem;
  }
  section.producte>*{
    width: 50%;
  }
  div.w3-container{
    font-size: 1rem;
    margin: 0.5rem auto;
    width: 90%;
  }
  div.texteProducte{
    margin: 0.5rem auto;
    height: 95%;
  }
}