@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Varela+Round&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500&display=swap");
@font-face {
  font-family: "Metropolis-Medium";
  src: url("/fonts/metropolis/Metropolis-Medium.otf") format("opentype");
}

.columna {
  width: 50%;
  /* Cada celda ocupa el 25% del ancho */
  padding: 20px;
  border: 1px solid lightgrey;
  border-top: none;
  border-left: none;
  transition: background-color 0.5s;
    /* Transición suave */
  
}

.columna:hover {
  background-color: #FAEDE9;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  text-shadow: 1px 1px 2px red;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  
  
  
}

.texto {
  align-items: left;
  font-family: "Space Grotesk", sans-serif;
  text-align: left;
  font-style: italic;
}

.titulo {
  font-family: "Montserrat", sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  position: relative;
  color: #D54B2A;
}
.titulogreen {
  font-family: "Montserrat", sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  position: left;
  color: #0d8f38 ;
}
.titulomedio {
  font-family: "Montserrat", sans-serif;
  font-size: 1.1rem;
  font-weight: 200;
  position: left;
  font-style: italic;
  color: #333333 ;
}



.degradado {
  background: linear-gradient(to right, #ffcc00, #ff6600);
}

.container {
  width: 100%;
  height: 480px;
}


#learn-more {
  fill-opacity: 0;
  fill: #D54B2A;
  stroke: #000;
  stroke-width: 2;
  border-radius: 10px;
  stroke-linejoin: round;
  transition: all 250ms ease-in;
  cursor: pointer;
}
#learn-more:hover {
  fill-opacity: 1;
}
#learn-more:hover ~ .learn-more-text {
  fill: #000000;
}

.learn-more-text {
  font-family: "Roboto";
  fill: #000;
  pointer-events: none;
  font-size: 18px;
  transition: all 250ms ease-in;
}

.center {
  fill: #D54B2A;
}

.pointer {
  fill: #fff;
  stroke: #3b8fc0;
  stroke-width: 2;
}

.nav-copy {
  font-family: "Roboto";
  fill: #333333;
  fill-opacity: 1;
  transition: all 250ms ease-in;
}
.nav-copy.changing {
  fill-opacity: 0;
}

.service {
  cursor: pointer;
}
.service text {
  font-size: 14px;
  font-family: "Roboto";
  text-anchor: middle;
}
.service .icon-wrapper {
  transform-origin: 30% 30%;
}
.service .icon-wrapper, .service .icon-wrapper > * {
  transition: all 250ms ease-in;
}
.service circle {
  fill: #D54B2A;
}
.service circle.shadow {
  fill-opacity: 0;
  filter: url(#service-shadow);
}
.service use {
  fill: #fff;
}
.service text {
  fill: #4d4d4d;
  font-weight: bold;
 
}
.service.active .icon-wrapper, .service:hover .icon-wrapper {
  transform: scale(0.9) translateY(0px) translateX(30px);
}
.service.active .icon-wrapper, .service.active .icon-wrapper > *, .service:hover .icon-wrapper, .service:hover .icon-wrapper > * {
  transition: all 250ms ease-out;
}
.service.active .icon-wrapper circle.shadow, .service:hover .icon-wrapper circle.shadow {
  fill-opacity: 0.4;
}
.service.active text, .service:hover text {
  fill: #D54B2A;
  font-weight: bold;
  
}