body {
  background: linear-gradient(to bottom, #000000 -70%, #fef3c5 23%, #fef3c5 100% ),
  url("Elementos de estilo/Cromatografía e2c39a.svg");
  background-size: 120%;
  background-position: center, center; 
  background-blend-mode: hard-light;
  font-size: 18px;
  margin: 0;

  a {
        color: #8a4c23;          
        text-decoration: none;
        display: inline-block; /* importante para que el transform funcione bien */
        transition: transform 0.3s ease;          
      }

  a:hover{
    color: #4a5527;
    transform: scale(1.2);
  }


.header {
  display: flex;
  height: 450px;

}


.block {
  display: flex;              
  flex-direction: column;     
  justify-content: center;
  padding-left: 100px;
}


.block-brown {
  width: 35%;
  background: linear-gradient(to right, #000000 -60%, #8a4c23 100%),
  url("Elementos de estilo/Cromatografía e2c39a.svg");
  background-size: 190%;
  background-position: center, center;
  background-blend-mode: hard-light;
  position: relative; 
  overflow: hidden;
  
}

.block-brown .overlay-img {
  position: absolute;
  height: auto;
}

      .croma1 {
        width: 500px;
        top: 100px;
        right: 0px;
      }
      .croma2 {
        width: 300px;
        bottom: 180px;
        right: -150px;
      }



.block-green {
  width: 65%;
  background: #4d4c07; /* verde olivo */
  background-image: url("Elementos de estilo/Cromatografía 6e7942.svg");
  background-size: 200%;
  background-position: center, center;

}

.titule {
  font-family: 'Anton';
  color: #fff;
  font-size: 80px;
  line-height: 1.5;
  margin: 0;
}

.subtitule {
  font-family: 'Oswald';
  color: #fff;
  font-size: 30px;
  line-height: 0.2;
  margin: 0;
}

.vineta {
  position: absolute;
  top: 430px;
  right: 10px;
  width: 200px;  
  font-family: 'lora';
  color: #8A4C23;
  font-size: 18px;
  font-weight: bold;
  padding: 50px;
  line-height: 1.8;

}

.lista-con-imagen{
  list-style: none; 
  padding-left: 0; 
  
 
}

.lista-con-imagen li {
  position: relative;
  padding-left: 40px; 
  display: inline-block; 

}

.lista-con-imagen li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -10px;
  width: 50px;
  height: 50px;
  background-image: url("Elementos de estilo/Brote Verde.svg");
  color: #4d4c07; 
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s ease; /* transicion de la escala del brote */
}


.lista-con-imagen li:hover::before {
  transform: translateX(-20%) scale(1.2); /* crece la viñeta al mismo ritmo */
}


.encabezado {
  display: flex;
  height: 20px;

.titule {
  font-family: 'Anton';
  color: #fff;
  font-size: 40px;
  line-height: 1.5;
  margin: 0;
}

.subtitule {
  font-family: 'Oswald';
  color: #fff;
  font-size: 15px;
  line-height: 0.2;
  margin: 0;
}

.block {
  display: flex;              
  flex-direction: column;     
  justify-content: center;
  padding-left: 100px;
}


.block-brown {
  width: 35%;
  background: linear-gradient(to right, #000000 -60%, #8a4c23 100%),
  url("Elementos de estilo/Cromatografía e2c39a.svg");
  background-size: 190%;
  background-position: center, center;
  background-blend-mode: hard-light;
  position: relative; 
  overflow: hidden;
  
}

.block-brown .overlay-img {
  position: absolute;
  height: auto;
}

      .croma1 {
        width: 500px;
        top: 100px;
        right: 0px;
      }
      .croma2 {
        width: 300px;
        bottom: 180px;
        right: -150px;
      }



.block-green {
  width: 65%;
  background: #4d4c07; /* verde olivo */
  background-image: url("Elementos de estilo/Cromatografía 6e7942.svg");
  background-size: 200%;
  background-position: center, center;

}

#map {
  width: 50%;           
  height: 400px;         
  border-radius: 20px;   
  overflow: hidden;      
}

}