@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500&display=swap");

:root {
  --color-blanco-1: #fff;
  --color-verde-1: #46bc57;
  --color-verde-hover-1: #379845;
  --color-verde-oscuro-1: #139338;
  --color-lila-1: #9995df;
  --color-lila-hover: #736ed3;
  --color-menta-1: #09ddc3;
  --color-aguamarina-1: #06c6a9;
  --color-aguamarina-hover: #05957f;
  --color-azul-1: #0085ed;
  --color-azul-hover-1: #0068ba;
  --color-postfooter-1: #e5e5e5;
  --color-gris-1: #666;
}

/* Se pueden borrar */

* {
  font-family: "Fira sans", sans-serif;
}

.formulario_crz.form-calc {
  background-image: url("https://crezcamos.com/wp-content/uploads/2023/10/fondo-mosaico.svg");
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.25s linear;
}

.formulario_crz.form-calc .icono-input-digital {
  left: 12px;
}

.formulario_crz.form-calc .label-digital {
  left: 34px;
}

.formulario_crz.form-calc .icono-input-digital {
  left: 14px;
}

.formulario_crz.form-calc .input-digital {
  border-radius: 12px !important;
}

.form-calc .sec-der,
.form-calc .sec-izq {
  padding: 30px 60px;
}

.form-calc .text-calculadora {
  color: #808080;
  font-size: 14px;
}

.form-calc .sec-izq {
  flex-direction: column;
  display: flex;
  gap: 20px;
}

.form-calc .sec-izq .cont-tit {
  display: flex;
  align-items: center;
}

.form-calc .sec-izq .cont-tit img {
  width: 60px;
}

.form-calc .sec-izq .cont-tit h2 {
  font-weight: 600;
  font-size: 28px;
  color: #06c1a4;
}

.form-calc .sec-izq .tit-input {
  font-weight: 500;
  font-size: 18px;
  color: #06c1a4;
}

.form-calc .sec-izq .contenedor-boton-enviar {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.form-calc .sec-izq .contenedor-boton-enviar .boton_formulario {
  border-radius: 60px;
}

.form-calc .sec-der {
  background-color: #f5f5f5;
  padding-bottom: 0;
  display: flex;
}

.form-calc .sec-der .cont-paso {
  justify-content: space-between;
  background-color: #f5f5f5;
  flex-direction: column;
  display: flex;
  width: 100%;
}

.form-calc .sec-der.ahorro_calculado .paso-1,
.form-calc .sec-der .paso-2 {
  display: none;
}

.form-calc .sec-der .paso-1,
.form-calc .sec-der.ahorro_calculado .paso-2 {
  display: flex;
}

.form-calc .sec-der.ahorro_calculado {
  height: 600px;
  transition: height 5s ease-in-out;
}

.form-calc .sec-der.ahorro_calculado.activo {
  height: auto;
}

.form-calc .sec-der.ahorro_calculado.activo .img-gastos,
.form-calc .sec-der.ahorro_calculado.activo .tarj-gastos {
  animation: animarTooltip 0.5s forwards;
}

.form-calc .sec-der .img-gastos {
  height: 100%;
}

.form-calc .sec-der .paso-2 {
  padding-bottom: 60px;
}

.sec-der .paso-2 .tit-sec-der {
  max-width: max-content;
  text-align: center;
  margin: 0;
}

.sec-der .tit-sec-der {
  margin-left: auto;
  color: #9490da;
  max-width: 100%;
  font-weight: 600;
  font-size: 38px;
  text-align: center;
  line-height: 1em;
}

.sec-der .cont-imagenes {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.sec-der .desc-sec-der {
  margin-left: auto;
  color: #808080;
  width: 80%;
  margin: auto;
  /* max-width: 260px; */
  font-weight: 400;
  font-size: 22px;
  text-align: center;
}

.sec-der .cont-imagenes .img-1 {
  width: 90%;
  z-index: 10;
}

.sec-der .cont-imagenes .img-2 {
  margin-left: -80px;
  width: 50%;
}

.sec-der .cont-tarjetas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sec-der .tarj-gastos {
  background-color: white;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
}

.sec-der .tarj-gastos .sec-gasto {
  color: white;
  min-width: 200px;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cont-grafico {
  text-align: center;
}

.num-item {
  padding: 0;
  margin: 0;
  font-weight: 500;
  font-size: 20px;
}

.sec-der .tarj-gastos > * {
  padding: 10px;
}

.sec-der .tarj-gastos.tarj-gastos-fijos {
  border: 1.5px solid #06c1a4;
}

.sec-der .tarj-gastos.tarj-gastos-fijos .sec-gasto {
  background-color: #06c1a4;
  border-radius: 4px;
}

.sec-der .tarj-gastos.tarj-gastos-extras {
  border: 1.5px solid #9490da;
}

.sec-der .tarj-gastos.tarj-gastos-extras .sec-gasto {
  background-color: #9490da;
  border-radius: 4px;
}

.sec-der .tarj-gastos.tarj-gastos-ahorros {
  border: 1.5px solid #90e06a;
}

.sec-der .tarj-gastos.tarj-gastos-ahorros .sec-gasto {
  background-color: #90e06a;
  border-radius: 4px;
}

.sec-der .tarj-gastos .desc-gasto {
  background-color: white;
  display: flex;
  align-items: center;
}

.ancla-ahorro {
  display: flex;
  margin: auto;
}

.banner-calc-suenos {
  width: 300px;
  margin: auto;
}

.banner-calc-suenos:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

.banner-calc-suenos:not(:hover) {
  transform: scale(1);
  transition: transform 0.3s ease;
}

@keyframes animarTooltip {
  0% {
    transform: translateY(20px) scale(0.1);
  }

  50% {
    transform: translateY(-5px) scale(1.05);
  }

  100% {
    transform: translateY(0px) scale(1);
  }
}

@media only screen and (max-width: 1024px) {
  .sec-der .tarj-gastos .sec-gasto {
    min-width: 150px;
    width: 150px;
    text-align: center;
  }
  .cont-grafico img {
    width: 100%;
  }
  .sec-der .cont-imagenes .img-1 {
    width: 100%;
    min-width: 400px;
    margin-left: -50px;
  }
  .sec-der .tit-sec-der {
    max-width: 100%;
    width: 100%;
    font-size: 36px;
  }
  
}

@media only screen and (max-width: 995px) {
  

}

@media only screen and (max-width: 768px) {
  .sec-der .cont-imagenes .img-1 {
    width: 100%;
    min-width: 0px;
    margin-left: 0;
    margin-top: 50px;
  }
  .sec-der .desc-sec-der {
    margin-top: 20px;
  }
}

@media only screen and (max-width: 576px) {
  .banner-calc-suenos {
    width: 100%;
    min-width: 200px;
    max-width: 300px;
  }
  
}