.planes{
  display:flex;
  width:100%;
  justify-content:center;
  padding:124px 40px 118px 40px;
  overflow:hidden;
  background-color:#F8FBFB;
  position: relative;
}

.planesContainer{
  display:flex;
  width:100%;
  max-width:1698px;
  flex-direction:column;
  align-items:center;
  gap:51px;
}

.planesTop{
  display:flex;
  width:100%;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.planesTitle{
  width:100%;
  font-size:39.5px;
  line-height:43px;
  letter-spacing:-2.37px;
  font-weight:800;
  color:#0B3636;
}

.planesTitle span{
  color:#D80062;
}

.planesSubtitle{
  margin-top:18px;
  font-size:16px;
  line-height:20px;
  letter-spacing:0px;
  font-weight:500;
  color:#0B3636;
}

.planesCards{
  display:flex;
  width:100%;
  gap:13px;
}

.planesCard{
  display:flex;
  width:100%;
  height:519px;
  position:relative;
  overflow:hidden;
  justify-content:center;
  align-items:center;
}

.planesCardImagen{
  display:flex;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:1;
}

.planesCardImagen img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

.planesCardOverlay{
  display:flex;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  background-color:rgba(11,54,54,0.6);
  mix-blend-mode:multiply;
}

.planesCardInfo{
  display:flex;
  position:relative;
  z-index:3;
  flex-direction:column;
  align-items:center;
  color:white;
  text-align:center;
}

.planesDuracion{
  font-size:22.504px;
  line-height:36.419px;
  letter-spacing:2.2504px;
  font-weight:500;
  color:white;
}

.planesCardTitle{
  margin-top:12px;
  font-size:28px;
  line-height:30.31px;
  letter-spacing:-0.56px;
  font-weight:700;
  color:white;
}

.planesBoton{
  display:flex;
  width:fit-content;
  height:auto;
  margin-top:28px;
  padding:11.5px 24px;
  border:1.1px solid white;
  border-radius:23.161px;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-decoration:none;
  color:white;
  font-size:16px;
  line-height:19px;
  letter-spacing:0px;
  font-weight:600;
  transition:all 0.25s ease;
}

.planesBoton img{
  width:12.8336px;
  height:13.128px;
  object-fit:contain;
  object-position:center;
}

.planesBoton:hover{
  transform:translateY(-2px);
  background-color:rgba(255,255,255,0.12);
}

@media(max-width:1200px){
  .planes{
    padding:60px 40px 69px 40px;
  }

  .planesContainer{
    max-width:904px;
    gap:48px;
  }

  .planesTitle{
    font-size:23.13px;
    line-height:25.18px;
    letter-spacing:-1.39px;
  }

  .planesSubtitle{
    margin-top:10px;
    font-size:9.37px;
    line-height:12px;
  }

  .planesCards{
    gap:8px;
  }

  .planesCard{
    height:304px;
  }

  .planesDuracion{
    font-size:13.18px;
    line-height:21.35px;
    letter-spacing:1.318px;
  }

  .planesCardTitle{
    margin-top:7px;
    font-size:16.4px;
    line-height:17.76px;
    letter-spacing:-0.33px;
  }

  .planesBoton{
    margin-top:16px;
    padding:6.3px 14px;
    border-radius:13.58px;
    font-size:9.37px;
    line-height:11px;
    gap:7px;
  }

  .planesBoton img{
    width:7.52px;
    height:7.69px;
  }
}

@media(max-width:700px){
  .planes{
    padding:62px 25px 70px 25px;
  }

  .planesContainer{
    gap:42px;
  }

  .planesTitle{
    font-size:32px;
    line-height:35px;
    letter-spacing:-1.9px;
  }

  .planesSubtitle{
    margin-top:12px;
    font-size:14px;
    line-height:18px;
  }

  .planesCards{
    flex-direction:column;
    gap:16px;
  }

  .planesCard{
    height:360px;
  }

  .planesDuracion{
    font-size:17px;
    line-height:25px;
    letter-spacing:1.7px;
  }

  .planesCardTitle{
    width:280px;
    margin-top:10px;
    font-size:22px;
    line-height:25px;
    letter-spacing:-0.44px;
  }

  .planesBoton{
    margin-top:24px;
    padding:11px 22px;
    border-radius:22px;
    font-size:14px;
    line-height:18px;
    gap:10px;
  }

  .planesBoton img{
    width:10px;
    height:10px;
  }
}

@media(max-width:1200px) and (min-width:701px){
  .planes{
    padding:86px 54px 94px 54px;
  }

  .planesContainer{
    max-width:none;
    gap:54px;
  }

  .planesTitle{
    font-size:38px;
    line-height:42px;
    letter-spacing:-1.8px;
  }

  .planesSubtitle{
    margin-top:14px;
    font-size:15px;
    line-height:19px;
  }

  .planesCards{
    gap:16px;
  }

  .planesCard{
    height:430px;
  }

  .planesDuracion{
    font-size:18px;
    line-height:29px;
    letter-spacing:1.8px;
  }

  .planesCardTitle{
    margin-top:10px;
    font-size:24px;
    line-height:27px;
    letter-spacing:-0.4px;
  }

  .planesBoton{
    margin-top:24px;
    padding:10.9px 22px;
    border-radius:22px;
    font-size:15px;
    line-height:18px;
    gap:10px;
  }

  .planesBoton img{
    width:12px;
    height:12px;
  }
}