section.content {
  display: flex;
  justify-content: center;
  padding: 127px 0;
  gap: 62px;
  .main-content-entrada {
    width: 75%;
    display: flex;
    flex-direction: column;
    h1 {
      color: var(--bg-color-orange);
      font-family: "DINAlternate-Bold",sans-serif;
      font-size: 30px;
      line-height: 35px; /* 116.667% */
    }
    .container-img {
      width: 100%;
      margin-top: 33px;
      margin-bottom: 29px;
      aspect-ratio: 1200/614;
      img {
        aspect-ratio: 1200/614;
        border-radius: 25px;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
      }
    }
    .entrada-caracteristicas{
      display: flex;
      flex-wrap: wrap;
      margin: 30px 0;
      gap: 10px;
      justify-content: space-between;
      div{
        width: 20%;
        min-width: fit-content;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      div.only-date{
        color: var(--bg-color-orange);
        font-family: "DIN-Medium",sans-serif;
        font-size: 22px;
        line-height: 27px; /* 122.727% */
        &::before{
          content: "";
          background: url("../../images/novedad-hour-icon.svg");
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
          width: 21px;
          height: 21px;
          display: inline-block;
        }
      }
      div.autor{
        color: var(--bg-color-orange);
        font-family: "DIN-Medium",sans-serif;
        font-size: 22px;
        line-height: 27px; /* 122.727% */
      }
      div.info{
        .info-data{
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 0;
          span{
            color: var(--bg-color-orange);
            font-family: "DINPro-Regular",sans-serif;
            font-size: 12px;
            line-height: normal;
          }
          span.data{
            color: var(--bg-color-grey);
            font-family: "DINPro-Bold",sans-serif;
            font-size: 20.553px;
            line-height: normal;
          }
        }
      }
      div.info.date{
       &::before{
        content: "";
        background: url("../../images/novedad-calendar-icon.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 46px;
        height: 43px;
        display: inline-block;
       } 
      }
      div.info.hour{
       &::before{
        content: "";
        background: url("../../images/novedad-hour-icon.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 42px;
        height: 42px;
        display: inline-block;
       } 
      }
      div.info.time{
       &::before{
        content: "";
        background: url("../../images/novedad-time-icon.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 33px;
        height: 42px;
        display: inline-block;
       } 
      }
      div.info.mode{
       &::before{
        content: "";
        background: url("../../images/novedad-modalidad-icon.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 47px;
        height: 42px;
        display: inline-block;
       } 
      }
    }
    p {
      color: var(--bg-color-grey);
      font-family: "DIN-Regular",sans-serif;
      font-size: 18px;
      line-height: 23px; /* 127.778% */
    }

    h2{
      color: var(--bg-color-orange);
      font-family: "DIN-Bold",sans-serif;
      font-size: 22px;
      line-height: 28px; /* 127.778% */
    }
    h3{
      color: var(--bg-color-orange);
      font-family: "DIN-Medium",sans-serif;
      font-size: 20px;
      line-height: 25px; /* 127.778% */
    }
    .additional-info-img{
      align-items: center;
      display: flex;
      flex-direction: row;
      gap: 50px;
      margin-top: 45px;
      .info-adm{
        width: 50%;
        h3{
          color: var(--bg-color-orange);
          font-family: "DIN-Medium",sans-serif;
          font-size: 25px;
          line-height: 23px; /* 92% */
        }
        p{
          color: var(--bg-color-grey);
          font-family: "DIN-Regular",sans-serif;
          font-size: 18px;
          line-height: 23px; /* 127.778% */
          margin-top: 0.5rem;
        }
      }
      .container-img{
        width: 50%;
        filter: url('#svg-rounded');
        max-width: 380px;
        /* transition: all ease 1s; */
        img{
          /* transition: all ease 1s; */
          aspect-ratio: 1/1;
          height: 100%;
          width: 100%;
          object-fit: cover;
          object-position: center;
          
        }
      }
      .container-img.cut{
        img{
          clip-path: polygon(0% 100%, 0% 0%, 83% 0%, 83% 17%, 100% 17%, 100% 100%);
        }
      }
    }
    .additional-info-img.img-left{
      .info-adm{
        order: 2;
      }
      .container-img{
        order: 1;
      }
    }

    .banner-info{
      border-radius: 20px;
      display: flex;
      flex-direction: row;
      position: relative;
      width: 100%;
      margin-top: 51px;
      .info-adm{
        width: 40%;
        padding: 113px 30px;
        box-sizing: border-box;
        h3{
          color: var(--bg-color-orange);
          font-family: "DIN-Medium",sans-serif;
          font-size: 25px;
          line-height: 23px; /* 92% */
        }
        p{
          color: var(--bg-color-white);
          font-family: "DIN-Regular",sans-serif;
          font-size: 18px;
          line-height: 23px; /* 127.778% */
        }
      }
      .container-img{
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        margin: 0;
        &::before{
          border-radius: 20px;
          content: '';
          height: 100%;
          width: 100%;
          position: absolute;
          background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, #000 66.29%);
        }
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
        }
      }
    }
    .banner-info.right{
      justify-content: end;
      .container-img{
        &::before{
          background: linear-gradient(90deg, rgba(0, 0, 0, 0.00) 0%, #000 66.29%);
        }
      }
    }

    .additional-info-img-transparent{
      align-items: center;
      display: flex;
      gap: 46px;
      margin-top: 50px;
      .info-adm{
        width: 70%;
        h3{
          color: var(--bg-color-orange);
          font-family:"DIN-Medium",sans-serif;
          font-size: 25px;
          line-height: 23px; /* 92% */
        }
        p{
          color: var(--bg-color-grey);
          font-family: "DIN-Regular",sans-serif;
          font-size: 18px;
          line-height: 23px; /* 127.778% */
        }
      }
      .container-img{
        background: var(--bg-color-orange);
        border-radius: 30px;
        width: 30%;
        height: 290px;
        position: relative;
        margin: 0;

        display: flex;
        align-items: end;
        justify-content: center;
        img{
          height: 90%;
          width: 90%;
          margin: 0 auto;
        }
      }
    }

    hr{
      width: 100%;
      height: 2px; /* Altura del hr */
      background-color: var(--bg-color-orange);
      margin-top: 54px;
    }
    button {
      color: var(--bg-color-white);
      font-family: "DIN-Medium",sans-serif;
      font-size: 18.38px;
      line-height: 18.38px; /* 100% */
      margin: 100px auto 0 auto;

      display: flex;
      width: fit-content;
      padding: 11.778px 18.12px;
      box-sizing: border-box;
      align-items: center;
      gap: 8px;

      border-radius: 26.273px;
      background: linear-gradient(90deg, #F47E24 0%, #F59F42 100%);
      transition: all ease 0.5s;
      &::after{
        content: '';
        background: url("../../images/arrow-white-back.svg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        display: inline-block;
        width: 20px;
        height: 16px;
        cursor: pointer;
      }
      &:hover {
        gap: 1rem;
      }
    }
  }
  .related-content {
    align-items: start;
    height: fit-content;
    width: 25%;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    position: relative;
    padding: 22px;
    box-sizing: border-box;
    align-items: center;
    &::before{
      border-radius: 20px;
      opacity: 0.1;
      background: var(--2, #F89D4B);
      content: '';
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }
    
    h3{
      color: var(--bg-color-grey-2);
      font-family: "DINAlternate-Bold",sans-serif;
      font-size: 20px;
      line-height: 25px; /* 125% */
    }
    .card-per-category.articles{
      max-width: 390px;
      position: relative;

      transition: all ease 0.5s;
      .container-card{
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        padding: 12px 20px 63px 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;
          /* clip-path: polygon(0% 100%, 1% 0%, 99% 0%, 100% 84%, 72% 83%, 72% 100%); */
          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; /* 120% */
          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; /* 125% */
          }
          p{
            color: var(--bg-color-grey);
            font-family: "DIN-Regular",sans-serif;
            font-size: 18px;
            line-height: 23px; /* 127.778% */

            /*overflow texto*/
            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;
        }
      }
      &:hover{
        .container-card{              
          /* filter: url('#svg-rounded'); */
          &::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;
      max-width: 390px;
      overflow: hidden;
      position: relative;
      .container-card{
        display: flex;
        flex-direction: column;
        &::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: 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: 1rem;
            .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;
      max-width: 390px;
      overflow: hidden;
      position: relative;
      .container-card{
        display: flex;
        flex-direction: column;
        &::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: 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;
            .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);
          }
        }
      }
    }
  }
}

section.trabajemos-juntos{
  display: none;
}

@media (max-width: 992px) {
  section.content {
    flex-direction: column;
    padding: 127px 0 0 0;
    .main-content-entrada {
      width: 100%;
      h1 {
        font-size: 25px;
        line-height: 30px;
      }
      .container-img {
        width: 100%;
        margin-top: 21px;
        margin-bottom: 20px;
        img {
          /* aspect-ratio: 309/212; */
        }
      }
      .entrada-caracteristicas{
        margin: 0px 0 30px 0;
        div{
          width: 20%;
          min-width: fit-content;
          display: flex;
          align-items: center;
          gap: 10px;
        }
        div.only-date{
          font-size: 16px;
          line-height: 20px;
          &::before{
            width: 15px;
            height: 15px;
          }
        }
        div.autor{
          font-size: 16px;
          line-height: 15px; /* 122.727% */
        }
        div.info{
          .info-data{
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 0;
            span{
              font-size: 9px;
            }
            span.data{
              font-size: 15px;
              line-height: normal;
            }
          }
        }
        div.info.date{
         &::before{
          width: 33px;
          height: 31px;
         } 
        }
        div.info.hour{
         &::before{
          width: 31px;
          height: 31px;
         } 
        }
        div.info.time{
         &::before{
          width: 24px;
          height: 31px;
         } 
        }
        div.info.mode{
         &::before{
          width: 35px;
          height: 31px;
         } 
        }
      }
      p {
        font-size: 15px;
        line-height: 23px; /* 127.778% */
      }
      .additional-info-img{
        flex-direction: column;
        gap: 50px;
        .info-adm{
          width: 100%;
          h3{
            font-size: 20px;
            line-height: 23px; /* 92% */
          }
          p{
            font-size: 15px;
            line-height: 23px; /* 127.778% */
          }
        }
        .container-img{
          width: 100%;
          img{            
          }
        }
        .container-img.cut{
          img{
          }
        }
      }
      
      .additional-info-img.img-left{
        .info-adm{
          order: 2;
        }
        .container-img{
          order: 1;
        }
      }
  
      .banner-info{
        flex-direction: column;
        min-height: 50rem;
        .info-adm{
          width: 100%;
          padding: 53px 1.5rem;
          h3{
            font-size: 23px;
            line-height: 23px; /* 92% */
          }
          p{
            font-size: 18px;
            line-height: 23px; /* 127.778% */
          }
        }
        .container-img{
          &::before{
            background: linear-gradient(360deg, rgba(0, 0, 0, 0.00) 0%, #000 66.29%);
          }
          img{
            object-position: center bottom;
          }
        }
      }
      .banner-info.right{
        justify-content: end;
        .container-img{
          &::before{
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 66.29%);
          }
        }
      }
  
      .additional-info-img-transparent{
        flex-direction: column;
        .info-adm{
          width: 100%;
          h3{
            font-size: 23px;
          }
          p{
          }
        }
        .container-img{
          width: 100%;
          img{
          }
        }
      }
  
      hr{
        width: 100%;
        height: 2px; /* Altura del hr */
        background-color: var(--bg-color-orange);
        margin-top: 54px;
      }
      button {
        margin: 40px auto 0 auto;
        &::after{
        }
      }
    }
    .related-content {
      width: 70%;
      margin: 0 auto;
      align-items: center;
      &::before{
      }
      
      h3{
      }
    }
  }
}
@media (max-width: 700px) {
  section.content {
    flex-direction: column;
    padding: 127px 0 0 0;
    .main-content-entrada {
      width: 100%;
      h1 {
        font-size: 25px;
        line-height: 30px;
      }
      .container-img {
        width: 100%;
        margin-top: 21px;
        margin-bottom: 20px;
        img {
          /* aspect-ratio: 309/212; */
        }
      }
      .entrada-caracteristicas{
        margin: 0px 0 30px 0;
        div{
          width: 20%;
          min-width: fit-content;
          display: flex;
          align-items: center;
          gap: 10px;
        }
        div.only-date{
          font-size: 16px;
          line-height: 20px;
          &::before{
            width: 15px;
            height: 15px;
          }
        }
        div.autor{
          font-size: 16px;
          line-height: 15px; /* 122.727% */
        }
        div.info{
          .info-data{
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 0;
            span{
              font-size: 9px;
            }
            span.data{
              font-size: 15px;
              line-height: normal;
            }
          }
        }
        div.info.date{
         &::before{
          width: 33px;
          height: 31px;
         } 
        }
        div.info.hour{
         &::before{
          width: 31px;
          height: 31px;
         } 
        }
        div.info.time{
         &::before{
          width: 24px;
          height: 31px;
         } 
        }
        div.info.mode{
         &::before{
          width: 35px;
          height: 31px;
         } 
        }
      }
      p {
        font-size: 15px;
        line-height: 23px; /* 127.778% */
      }
      .additional-info-img{
        flex-direction: column;
        gap: 50px;
        .info-adm{
          width: 100%;
          h3{
            font-size: 20px;
            line-height: 23px; /* 92% */
          }
          p{
            font-size: 15px;
            line-height: 23px; /* 127.778% */
          }
        }
        .container-img{
          width: 100%;
          img{            
          }
        }
        .container-img.cut{
          img{
          }
        }
      }
      
      .additional-info-img.img-left{
        .info-adm{
          order: 2;
        }
        .container-img{
          order: 1;
        }
      }
  
      .banner-info{
        flex-direction: column;
        min-height: 50rem;
        .info-adm{
          width: 100%;
          padding: 53px 1.5rem;
          h3{
            font-size: 23px;
            line-height: 23px; /* 92% */
          }
          p{
            font-size: 18px;
            line-height: 23px; /* 127.778% */
          }
        }
        .container-img{
          &::before{
            background: linear-gradient(360deg, rgba(0, 0, 0, 0.00) 0%, #000 66.29%);
          }
          img{
            object-position: center bottom;
          }
        }
      }
      .banner-info.right{
        justify-content: end;
        .container-img{
          &::before{
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 66.29%);
          }
        }
      }
  
      .additional-info-img-transparent{
        flex-direction: column;
        .info-adm{
          width: 100%;
          h3{
            font-size: 23px;
          }
          p{
          }
        }
        .container-img{
          width: 100%;
          img{
          }
        }
      }
  
      hr{
        width: 100%;
        height: 2px; /* Altura del hr */
        background-color: var(--bg-color-orange);
        margin-top: 54px;
      }
      button {
        margin: 40px auto 0 auto;
        &::after{
        }
      }
    }
    .related-content {
      width: 100%;
      &::before{
      }
      
      h3{
      }
    }
  }

  section.trabajemos-juntos{
    display: flex;
  }
}