.blog{
  display:flex;
  width:100%;
  flex-direction:column;
  align-items:center;
  padding:127px 25px 127px 25px;
  background-color:#F8FBFB;
   position: relative;
}

.blogTop{
  display:flex;
  width:100%;
  max-width:567px;
  flex-direction:column;
  align-items:center;
}

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

.blogTitle span{
  color:#D80062;
}

.blogBoton{
  display:flex;
  width:299px;
  height:57px;
  margin-top:29px;
  border:1.1px solid #D80B6E;
  border-radius:28.5px;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#0B3636;
  text-decoration:none;
  font-size:16px;
  line-height:25px;
  letter-spacing:0px;
  font-weight:600;
  transition:all 0.25s ease;
}

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

.blogBoton:hover{
  transform:translateY(-2px);
  background-color:rgba(216,11,110,0.06);
}

.blogCards{
  display:flex;
  width:100%;
  max-width:1424px;
  margin-top:72px;
  flex-wrap:wrap;
  justify-content:center;
  gap:22px;
}

.blogCard{
  display:flex;
  flex:1 1 360px;
  max-width:460px;
  min-width:0;
  min-height:390px;
  flex-direction:column;
  background-color:white;
  border:1px solid #BDBFBF;
}

.blogImagen{
  display:flex;
  width:100%;
  aspect-ratio:460 / 242;
  flex-shrink:0;
  overflow:hidden;
}

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

.blogInfo{
  display:flex;
  flex:1;
  flex-direction:column;
  justify-content:space-between;
  padding:32px 26px 28px 33px;
}

.blogInfo h3{
  width:100%;
  max-width:327px;
  font-size:20px;
  line-height:23px;
  letter-spacing:-0.4px;
  font-weight:700;
  color:#0B3636;
}

.blogMeta{
  display:flex;
  width:100%;
  align-items:flex-end;
  justify-content:space-between;
}

.blogMeta p{
  font-size:13.341px;
  line-height:21.59px;
  letter-spacing:0px;
  font-weight:500;
  color:#0B3636;
}

.blogLeer{
  display:flex;
  align-items:flex-start;
  gap:8px;
  color:#0B3636;
  text-decoration:none;
}

.blogLeer span{
  display:flex;
  padding-bottom:5px;
  border-bottom:1.778px solid #87CBC1;
  font-size:12.452px;
  line-height:15.12px;
  letter-spacing:0px;
  font-weight:600;
  color:#0B3636;
}

.blogLeer img{
  width:11.414px;
  height:11.676px;
  margin-top:2px;
  object-fit:contain;
  object-position:center;
}

@media(max-width:1200px){
  .blog{
    padding:74px 25px 74px 25px;
  }

  .blogTitle{
    max-width:332px;
    font-size:23.14px;
    line-height:25.18px;
    letter-spacing:-1.39px;
  }

  .blogBoton{
    width:175px;
    height:33.4px;
    margin-top:17px;
    border-radius:16.7px;
    font-size:9.37px;
    line-height:14.64px;
    gap:7px;
  }

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

  .blogCards{
    max-width:822px;
    margin-top:42px;
    gap:13px;
  }

  .blogCard{
    flex-basis:260px;
    max-width:270px;
    min-height:241px;
  }

  .blogInfo{
    padding:19px 15px 16px 19px;
  }

  .blogInfo h3{
    width:192px;
    font-size:11.72px;
    line-height:13.48px;
    letter-spacing:-0.23px;
  }

  .blogMeta p{
    font-size:7.82px;
    line-height:12.65px;
  }

  .blogLeer{
    gap:5px;
  }

  .blogLeer span{
    padding-bottom:3px;
    font-size:7.3px;
    line-height:8.86px;
  }

  .blogLeer img{
    width:6.69px;
    height:6.84px;
    margin-top:1px;
  }
}

@media(max-width:900px){
  .blogCards{
    max-width:553px;
  }
}

@media(max-width:700px){
  .blog{
    padding:72px 25px 80px 25px;
  }

  .blogTitle{
    width:100%;
    max-width:340px;
    font-size:31px;
    line-height:34px;
    letter-spacing:-1.86px;
  }

  .blogBoton{
    width:260px;
    height:51px;
    margin-top:25px;
    border-radius:25.5px;
    font-size:14px;
    line-height:20px;
    gap:12px;
  }

  .blogBoton img{
    width:11px;
    height:11px;
  }

  .blogCards{
    max-width:460px;
    margin-top:54px;
    flex-direction:column;
    align-items:center;
    gap:22px;
  }

  .blogCard{
    width:100%;
    max-width:460px;
    flex-basis:auto;
    min-height:411px;
  }

  .blogInfo{
    min-height:169px;
    padding:30px 25px 26px 28px;
  }

  .blogInfo h3{
    width:100%;
    max-width:327px;
    font-size:20px;
    line-height:23px;
    letter-spacing:-0.4px;
  }

  .blogMeta p{
    font-size:13.341px;
    line-height:21.59px;
  }

  .blogLeer span{
    font-size:12.452px;
    line-height:15.12px;
  }

  .blogLeer img{
    width:11.414px;
    height:11.676px;
  }
}

@media(max-width:1200px) and (min-width:701px){
  .blog{
    padding:90px 54px 100px 54px;
  }

  .blogTop{
    max-width:560px;
  }

  .blogTitle{
    max-width:560px;
    font-size:38px;
    line-height:42px;
    letter-spacing:-1.8px;
  }

  .blogBoton{
    width:292px;
    height:52px;
    margin-top:26px;
    border-radius:26px;
    font-size:15px;
    line-height:22px;
    gap:12px;
  }

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

  .blogCards{
    max-width:720px;
    margin-top:58px;
    gap:20px;
  }

  .blogCard{
    flex:1 1 310px;
    max-width:350px;
    min-height:350px;
  }

  .blogInfo{
    min-height:142px;
    padding:26px 24px 24px 24px;
  }

  .blogInfo h3{
    width:100%;
    max-width:285px;
    font-size:17px;
    line-height:21px;
    letter-spacing:-0.3px;
  }

  .blogMeta p{
    font-size:12px;
    line-height:18px;
  }

  .blogLeer{
    gap:7px;
  }

  .blogLeer span{
    padding-bottom:4px;
    font-size:11px;
    line-height:14px;
  }

  .blogLeer img{
    width:10px;
    height:10px;
    margin-top:2px;
  }
}

.blogBoton{
  width:fit-content;
  height:auto;
  padding:15px 27px;
  line-height:25px;
  gap:12px;
}

@media(max-width:1200px){
  .blogBoton{
    width:fit-content;
    height:auto;
    padding:8.78px 16px;
    line-height:14.64px;
    gap:7px;
  }
}

@media(max-width:700px){
  .blogBoton{
    width:fit-content;
    height:auto;
    padding:14.5px 24px;
    line-height:20px;
    gap:12px;
  }
}

@media(max-width:1200px) and (min-width:701px){
  .blogBoton{
    width:fit-content;
    height:auto;
    padding:14px 25px;
    line-height:22px;
    gap:12px;
  }
}