/*#pilares h2 {font-size:50px;}*/
#pilares h2 {font-size: clamp(50px, 5.35vw, 64px);!important; }
.caja-color { position: relative; width: 100%; height: 420px; padding: 1.5rem; overflow: hidden;transition: background 0.3s ease;}
.contenido-icono-texto {height:300px; transition: transform 0.3s ease; z-index: 2; position: relative;}
.carousel-card .contenido-icono-texto img{height: 74px; width: auto;}


@media only screen and (min-width: 1020px) {
	.contenido-icono-texto .icono{max-width: 157px;margin: 0 auto;}
	.contenido-icono-texto .icono img{height: 100%;}
	
.caja-color { height: 100%;}
.contenido-icono-texto {height:240px; /*transition: transform 0.3s ease; z-index: 2; position: relative;*/}
.icono, .palabra {transition: transform 0.5s ease;}

.texto-hover { position: absolute; top: 0rem; left: 0rem; opacity: 0; transform: translateY(20px);transition: opacity 0.5s ease, transform 0.5s ease;
  z-index: 3; /*color: white; */background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0 0 0 / 31%) 100%); padding: 1.5rem 2rem;
  height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center;}

/* Efectos en hover */
.caja-color:hover .icono {
  transform: translateX(-260px);
}

.caja-color:hover .palabra {
  transform: translateX(260px);
}

.caja-color:hover .texto-hover {
  opacity: 1;
  transform: translateY(0);
}}