section.novedades-intro{
  margin-top: 69px;
  .container{
    .intro-adm{
      p{
        color: var(--bg-color-grey-2);
        text-align: center;
        font-family: "DIN-Regular",sans-serif;
        font-size: 30px;
        line-height: 35px; /* 116.667% */
        strong{
          font-family: "DIN-Medium",sans-serif;
          font-size: 30px;
          line-height: 35px;
        }
      }
    }
  }
}

section.categorys-cards{
  margin-top: 58px;
  .container{
    display: flex;
    flex-direction: row;
    gap: 23px;
    .category-card{
      width: 33%;
      position: relative;
      height: 434px;
      padding: 45px 20px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: end;
      border-radius:30px;

      transition: all ease 0.5s;
      .container-img{
        border-radius:30px;
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: -1;
        top: 0;
        left: 0;
        overflow: hidden;
        img{
          height: 100%;
          width: 100%;
          object-fit: cover;
          object-position: center;
          border-radius:30px;
          transition: all ease 0.5s;
        }
      }
      .content-adm{
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 60%;
        z-index: 0;
        h2{
          color: var(--bg-color-orange-2);
          font-family: "DINAlternate-Bold",sans-serif;
          font-size: 40px;
          line-height: 40px; /* 100% */
        }
        p{
          color: var(--bg-color-white);
          font-family: "DIN-Medium",sans-serif;
          font-size: 15px;
          /* line-height: 18px; */ /* 120% */
        }
        button{
          color: var(--bg-color-white);
          font-family: "DIN-Medium",sans-serif;
          font-size: 14.792px;
          /* line-height: 14.792px; */ /* 100% */
  
          border-radius: 21.144px;
          background: linear-gradient(90deg, #FF7409 0%, #F6A033 100%);
          display: flex;
          padding: 0px 14.582px;
          align-items: center;
          gap: 5.833px;
          margin-top: 9px;
  
          width: fit-content;

          transition: all ease 1s;
          max-height: 0;
          visibility: hidden;
          line-height:0;
          opacity: 0;
          &::after{
            content: '';
            background: url("../../images/arrow-white-right.svg");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            display: inline-block;
            width: 16px;
            height: 11px;
            cursor: pointer;
          }
        }
      }
      &::before{
        border-radius:30px;
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background: #000;
        opacity: 0.8;
        mix-blend-mode: multiply;
      }
      &:hover{
        .container-img{
          img{
            transform: scale(1.3);
          }
        }
        .content-adm{
          button{
            line-height: 14.792px;
            max-height: 10rem;
            padding: 9.478px 14.582px;
            visibility: visible;
            opacity: 1;
          }
        }
      }
    }
  }
}

section.table-categorys{
  margin-top: 19px;
  .container{
    position: relative;
    .category-name{
      padding: 0 45px;
      background: white;
      position: absolute;
      top: 0;
      left: 0;
      h3{
        color: var(--bg-color-orange);
        font-family: "DIN-Medium",sans-serif;
        font-size: 40px;
        line-height: 40px;
      }
    }
    .filter-cards{
      filter: url('#svg-rounded');
      .container-filter{
        display: flex;
        justify-content: end;
        .filter{
          padding: 0 143px;
          box-sizing: border-box;
          .body-filter{
            cursor: pointer;
            padding: 21px 41px 16px 39px;
            box-sizing: border-box;
            background: #FEEBDB;
            display: flex;
            gap: 8px;
            align-items: center;
            button{
              position: relative;
              width: 19px;
              height: 11px;
              transform: translate(0%, -50%);
              &::before, &::after {
                background: var(--bg-color-grey);
                border-radius: 141.029px;
                content: "";
                position: absolute;
                width: 100%;
                height: 1px;
                transition: all .5s ease;
                left: 50%;
                top: calc(50%);
                transform: translate(-50%, -50%);
              }
              &::after{
                transform: translate(-50%, -50%) rotate(0deg);
                top: calc(50% + 0.5rem);
              }
            }
            span{
              color: var(--bg-color-grey);
              font-family: "DIN-Regular",sans-serif;
              font-size: 20px;
              line-height: 20px;
            }
          }
        }
      }
      .body-cards{
        position: relative;
        padding: 36px 36px 78px 36px;
        box-sizing: border-box;
        &::before{
          background: #FEEBDB;
          content: '';
          height: 100%;
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;

          z-index: -1;
        }
        .filter-selects{
          transition: all ease 1s;
          max-height: 0;
          visibility: hidden;
          opacity: 0;
        }
        .filter-selects.displayed{
          max-height: 10rem;
          visibility: visible;
          padding-bottom: 40px;
          opacity: 1;
        }
        .cards-per-category{
          flex-direction: row;
          flex-wrap: wrap;
          /* gap: 53px; */
          position: relative;
          display: none;
          a.links-articles{
            /* width: 28%;
            max-width: 390px; */
            .card-per-category.articles{
              height: 100%;
              position: relative;
              width: 100%;
              transition: all ease 0.5s;
              .container-card{
                display: flex;
                flex-direction: column;
                height: 100%;
                width: 100%;
                padding: 12px 20px 68px 20px;
                box-sizing: border-box;
                position: relative;
                
                transition: all ease 0.5s;
                filter: url('#svg-rounded');
                &::before{
                  content: '';
                  height: 100%;
                  width: 100%;
                  position: absolute;
                  background:var(--bg-color-white);
                  
                  transition: all ease 0.5s;
                  z-index: -1;
                  top: 0;
                  left: 0;
                  border-radius: 20px;
                }
                .container-img{
                  width: 100%;
                  aspect-ratio: 249/158;
                  img{
                    aspect-ratio: 249 / 158;
                    border-radius: 10px;
                    height: 100%;
                    width: 100%;
                    object-position: center;
                    object-fit: cover;
                  }
                }
                span{
                  color: var(--bg-color-orange);
                  font-family: "DIN-Medium",sans-serif;
                  font-size: 15px;
                  line-height: 18px;
                  margin-top:11px;
                }
                .resume-adm{
                  margin-top: 4px;
                  h4{
                    color: var(--bg-color-orange-2);
                    font-family: "DINAlternate-Bold",sans-serif;
                    font-size: 20px;
                    line-height: 25px;
                  }
                  p{
                    color: var(--bg-color-grey);
                    font-family: "DIN-Regular",sans-serif;
                    font-size: 18px;
                    line-height: 23px;

                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 5;
                    text-overflow: ellipsis;
                    white-space: normal;
    
                    max-height: 100%;
                  }
                }
              }
              .container-img-arrow{
                height: 63px;
                width: 63px;
                position: absolute;
                bottom: 0;
                right: 0;
  
                transition: all ease 0.5s;
                opacity: 0;
  
                padding: 10px 12px;
                box-sizing: border-box;
                img{
                  height: 100%;
                  width: 100%;
                  object-fit: contain;
                  object-position: center;
                  /* transform: rotate(-45deg); */
                }
              }
              &:hover{
                .container-card{              
                 
                  &::before{
                    clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% calc(100% - 63px), calc(100% - 63px) calc(100% - 63px), calc(100% - 63px) 100%);
                  }
                }
                .container-img-arrow{
                  opacity: 1;
                  img{
                  }
                }
              }
            }
          }
          .card-per-category.event{
            background: var(--bg-color-white);
            border-radius: 20px;
            /* width: 28%;
            max-width: 390px; */
            overflow: hidden;
            position: relative;
            .container-card{
              display: flex;
              flex-direction: column;
              &::before{
               
              }
              .container-img{
                width: 100%;
                aspect-ratio: 271/169;
                img{
                  aspect-ratio: 271/169;
                  height: 100%;
                  width: 100%;
                  object-position: center;
                  object-fit: cover;
                }
              }
              .container-event-info{
                width: 90%;
                margin: 11px auto 13px auto;
                display: flex;
                flex-direction: column;
                gap: 5px;
                &>span{
                  color: #8F8F8F;
                  font-family: "DIN-Medium",sans-serif;
                  font-size: 15px;
                  line-height: normal;
                  margin-top:11px;
                }
                h4{
                  color: var(--bg-color-orange-2);
                  font-family: "DINAlternate-Bold",sans-serif;
                  font-size: 17.818px;
                  line-height: normal;
                }
                .event-info{
                  display: flex;
                  flex-wrap: wrap;
                  row-gap: 0.5rem;
                  .info{
                    align-items: center;
                    width: 50%;
                    padding: 0 4px;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: row;
                    gap: 3px;
                    &::before{
                      content: '';
                      display: inline-block;
                      width: 28px;
                    }
                    span{
                      color: var(--bg-color-grey);
                      font-family: "DINPro-Regular",sans-serif;
                      font-size: 12px;
                      line-height: normal;
                    }
                  }
                  .info.date{
                    &::before{
                      height: 25px;
                      background: url("../../images/novedad-calendar-icon.svg");
                      background-repeat: no-repeat;
                      background-size: contain;
                      background-position: center;
                    }
                  }
                  .info.hour{
                    &::before{
                      height: 25px;
                      background: url("../../images/novedad-hour-icon.svg");
                      background-repeat: no-repeat;
                      background-size: contain;
                      background-position: center;
                    }
                  }
                  .info.time{
                    &::before{
                      height: 24px;
                      background: url("../../images/novedad-time-icon.svg");
                      background-repeat: no-repeat;
                      background-size: contain;
                      background-position: center;
                    }
                  }
                  .info.mode{
                    &::before{
                      height: 25px;
                      background: url("../../images/novedad-modalidad-icon.svg");
                      background-repeat: no-repeat;
                      background-size: contain;
                      background-position: center;
                    }
                  }
                }
              }
              a{
                color: var(--bg-color-white);
                font-family: "DIN-Bold",sans-serif;
                font-size: 18.658px;
                line-height: normal;

                background: var(--bg-color-orange);
                border-radius: 0px 0px 20px 20px;
                text-align: center;
                padding: 17px 0;

                transition: all ease 0.5s;

                border: 1px solid transparent;
              }
            }
            &:hover{
              
              .container-card{
                a{
                  color: var(--bg-color-orange);
                  background: var(--bg-color-white);
                  border: 1px solid var(--bg-color-orange);
                }
              }
            }
          }
          .card-per-category.webinar{
            background: var(--bg-color-white);
            border-radius: 20px;
            /* width: 28%;
            max-width: 390px; */
            overflow: hidden;
            position: relative;
            .container-card{
              display: flex;
              flex-direction: column;
              height: 100%;
              &::before{
                
              }
              .container-img{
                width: 100%;
                aspect-ratio: 271/169;
                img{
                  aspect-ratio: 271/169;
                  height: 100%;
                  width: 100%;
                  object-position: center;
                  object-fit: cover;
                }
              }
              .container-event-info{
                width: 90%;
                margin: 11px auto 13px auto;
                display: flex;
                flex-direction: column;
                gap: 5px;
                flex-grow: 1;
                &>span{
                  color: #8F8F8F;
                  font-family: "DIN-Medium",sans-serif;
                  font-size: 15px;
                  line-height: normal;
                  margin-top:11px;
                }
                h4{
                  color: var(--bg-color-orange-2);
                  font-family: "DINAlternate-Bold",sans-serif;
                  font-size: 17.818px;
                  line-height: normal;
                }
                .event-info{
                  display: flex;
                  flex-wrap: wrap;
                  row-gap: 0.5rem;
                  .info{
                    align-items: center;
                    width: 100%;
                    padding: 0 4px;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: row;
                    gap: 3px;
                    &::before{
                      content: '';
                      display: inline-block;
                      width: 30px;
                      height: 30px;
                    }
                    span{
                      color: var(--bg-color-grey);
                      font-family: "DINPro-Bold",sans-serif;
                      font-size: 16px;
                      line-height: normal;
                    }
                  }
                  .info.date{
                    &::before{
                      background: url("../../images/novedad-calendar-icon.svg");
                      background-repeat: no-repeat;
                      background-size: contain;
                      background-position: center;
                    }
                  }
                  .info.hour{
                    &::before{
                      background: url("../../images/novedad-hour-icon.svg");
                      background-repeat: no-repeat;
                      background-size: contain;
                      background-position: center;
                    }
                  }
                  .info.time{
                    &::before{
                      background: url("../../images/novedad-time-icon.svg");
                      background-repeat: no-repeat;
                      background-size: contain;
                      background-position: center;
                    }
                  }
                  .info.mode{
                    &::before{
                      background: url("../../images/novedad-modalidad-icon.svg");
                      background-repeat: no-repeat;
                      background-size: contain;
                      background-position: center;
                    }
                  }
                }
              }
              a{
                color: var(--bg-color-white);
                font-family: "DIN-Bold",sans-serif;
                font-size: 18.658px;
                line-height: normal;

                background: var(--bg-color-orange);
                border-radius: 0px 0px 20px 20px;
                text-align: center;
                padding: 17px 0;

                transition: all ease 0.5s;

                border: 1px solid transparent;
              }
            }
            &:hover{
              
              .container-card{
                a{
                  color: var(--bg-color-orange);
                  background: var(--bg-color-white);
                  border: 1px solid var(--bg-color-orange);
                }
              }
            }
          }
        }
        .cards-per-category.active{
          /* display: flex; */
        }       
      }
    }
  }
}

@media (max-width: 1150px) {
  
  section.table-categorys{
    .container {
      .category-name {
        h3 {
        }
      }
      .filter-cards {
        .container-filter {
          .filter {
            
            .body-filter {
              
              button {
                position: relative;
                &::before,
                &::after {
                  
                }
                &::after {
                }
              }
              span {

              }
            }
          }
        }
        .body-cards {
          
          &::before {
          }
          .filter-selects {
            
            .custom-select
            {
              .select-selected{
                
              }
            }

          }
          .filter-selects.displayed {
          }
          .cards-per-category {
            
            a.links-articles {
              /* width: 45%; */
              .card-per-category.articles {
                
                .container-card {  
                  &::before {
                    
                  }
                  .container-img {
                    
                    img {

                    }
                  }
                  span {
                    
                  }
                  .resume-adm {
                    h4 {
                    }
                    p {
                    }
                  }
                }
                .container-img-arrow {
                  img {

                  }
                }
                
              }
            }
            .card-per-category.event {
              /* width: 45%; */
              .container-card {
                
                &::before {
                }
                .container-img {
                  img {
                  }
                }
                .container-event-info {
                  & > span {
                  }
                  h4 {
                  }
                  .event-info {
                    .info {
                      &::before {
                        
                      }
                      span {
                      }
                    }
                    .info.date {
                      &::before {
                        
                      }
                    }
                    .info.hour {
                      &::before {
                        
                      }
                    }
                    .info.time {
                      &::before {
                       
                      }
                    }
                    .info.mode {
                      &::before {
                        
                      }
                    }
                  }
                }
                a {
                  
                }
              }
            }
            .card-per-category.webinar {
              /* width: 45%; */
              .container-card {
                &::before {
                 
                }
                .container-img {
                  img {

                  }
                }
                .container-event-info {
                  
                  & > span {
                   
                  }
                  h4 {
                   
                  }
                  .event-info {
                   
                    .info {
                     
                      &::before {
                        
                      }
                      span {
                        
                      }
                    }
                    .info.date {
                      &::before {
                        
                      }
                    }
                    .info.hour {
                      &::before {
                        
                      }
                    }
                    .info.time {
                      &::before {
                        
                      }
                    }
                    .info.mode {
                      &::before {
                        
                      }
                    }
                  }
                }
                a {
                  
                }
              }
            }
          }
          .cards-per-category.active {
          }
        }
      }
      
    }
  }
  
}
@media (max-width: 700px) {
  section.novedades-intro{
    .container{
      .intro-adm{
        p{
          font-size: 20px;
          line-height: 25px;
          strong{
            font-size: 20px;
            line-height: 25px;
          }
        }
      }
    }
  }

  section.categorys-cards{
    margin-top: 38px;
    .container{
      flex-direction: column;
      align-items: center;
      .category-card{
        width: 100%;
        height: 244px;
        max-width: 320px;
        .container-img{
          img{
          }
        }
        .content-adm{
          width: 70%;
          h2{
            font-size: 30px;
            line-height: 30px;
          }
          p{
            font-size: 15px;
            line-height: 20px;
          }
          button{
            line-height: 14.792px;
            max-height: 10rem;
            padding: 9.478px 14.582px;
            visibility: visible;
            opacity: 1;
          }
        }
        &::before{
        }
        
      }
    }
  }
  
  section.table-categorys{
    display: none;
    margin-top: 63px;
    .container {
      width: 100%;
      .category-name {
        padding: 0 50px;
        h3 {
          font-size: 30px;
          line-height: 35px;
        }
      }
      .filter-cards {
        .container-filter {
          .filter {
            padding: 0;
            .body-filter {
              padding: 16px 24px 16px 24px;
              button {
                position: relative;
                &::before,
                &::after {
                  background: var(--bg-color-orange);
                }
                &::after {
                }
              }
              span {
                color: var(--bg-color-orange);
                font-size: 20px;
                line-height: 20px;
              }
            }
          }
        }
        .body-cards {
          padding: 16px 30px;
          &::before {
          }
          .filter-selects {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            row-gap: 1rem;
            .custom-select
            {
              .select-selected{
                padding: 7px 11px;

                font-size: 17px;
                line-height: 17px;
                gap: 40px;
              }
            }

          }
          .filter-selects.displayed {
          }
          .cards-per-category {
            display: none;
            row-gap: 32px;
            justify-content: center;
            a.links-articles {
              /* width: 100%; */
              .card-per-category.articles {
                /* width: 100%; */
                .container-card {  
                  &::before {
                    
                  }
                  .container-img {
                    
                    img {

                    }
                  }
                  span {
                    
                  }
                  .resume-adm {
                    h4 {
                    }
                    p {
                    }
                  }
                }
                .container-img-arrow {
                  opacity: 1;
                  img {

                  }
                }
                
              }
            }
            .card-per-category.event {
              /* width: 100%; */
              .container-card {
                
                &::before {
                }
                .container-img {
                  img {
                  }
                }
                .container-event-info {
                  & > span {
                  }
                  h4 {
                  }
                  .event-info {
                    .info {
                      &::before {
                        
                      }
                      span {
                      }
                    }
                    .info.date {
                      &::before {
                        
                      }
                    }
                    .info.hour {
                      &::before {
                        
                      }
                    }
                    .info.time {
                      &::before {
                       
                      }
                    }
                    .info.mode {
                      &::before {
                        
                      }
                    }
                  }
                }
                a {
                  
                }
              }
            }
            .card-per-category.webinar {
              /* width: 100%; */
              .container-card {
                &::before {
                 
                }
                .container-img {
                  img {

                  }
                }
                .container-event-info {
                  
                  & > span {
                   
                  }
                  h4 {
                   
                  }
                  .event-info {
                   
                    .info {
                     
                      &::before {
                        
                      }
                      span {
                        
                      }
                    }
                    .info.date {
                      &::before {
                        
                      }
                    }
                    .info.hour {
                      &::before {
                        
                      }
                    }
                    .info.time {
                      &::before {
                        
                      }
                    }
                    .info.mode {
                      &::before {
                        
                      }
                    }
                  }
                }
                a {
                  
                }
              }
            }
          }
          .cards-per-category.active {
          }
        }
      }
      a.ver-mas {  
        &::after {
        }
      }
    }
  }
  
}