.hero {
  position: relative;
  background-color: rgba(0, 0, 0, 0.6);

  video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }

  .row-hero {
    .logo-ddhub {
      width: 70%;
    }

    h1 {
      font-size: var(--size-h1);
      color: var(--color-primary-light);

      @media (width < 576px) {
        font-size: var(--size-h2);
      }
    }

    .text-hero {
      font-size: var(--size-h1);
      font-family: var(--fonts-heading);
      font-weight: 700;
      color: var(--color-primary-light);
    }

    .button-ddhub {
      text-transform: uppercase;
      font-weight: 700;
    }
    .button-ddhub.button-fill {
      background-color: var(--color-verde-ddhub);
      color: var(--color-primary-dark);
    }
    .button-ddhub.button-border {
      border: var(--button-border) var(--color-primary-light);
      color: var(--color-primary-light);
    }
  }
}

main {
  .proyectos-home {
    background-color: #ebe6d6;
    padding: 5rem 0 3rem;

    p {
      width: 75%;

      @media (width < 992px) {
        width: 100%;
      }
    }
    
    .img-proyect_home{
        height: 30rem !important;
        
         img {
              object-fit: cover;
              /* margin-top: 2rem;
              margin-bottom: 1rem; */
              transition: filter 0.3s ease;
              height: 100%;
              width: 100%;
        
              &:hover {
                filter: brightness(0.7);
              }
        }   
    }

    .link-hover {
      font-size: var(--size-h3);
      font-family: var(--fonts-heading);
      margin: 2rem 0;
    }
  }

  .content-autor-home {
    background-color: #101820;
    gap: 5rem;

    .img-autor {
      overflow: hidden;
      height: 35rem;
      clip-path: ellipse(84% 85% at 95% 50%);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      img{
        width: 100%;
        height: 100%;
      }
    }

    .info-autor {
      color: var(--color-primary-light);

      .button-autor {
        background-color: var(--color-verde-ddhub);
        color: var(--color-primary-dark);
        border: var(--button-border) var(--color-primary-dark);
        text-transform: uppercase;
      }
    }
  }

  .laboratorio-home {
    padding-top: 5rem;
    padding-bottom: 3rem;

    p {
    width: 75%;

    @media (width < 992px) {
      width: 100%;
    }
  }

  .box-img-lab {
    height: 25rem;
    margin-bottom: 1.5rem;

    @media (width < 992px) {
      height: 30vh;
      margin-top: 2rem;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: filter 0.3s ease;

      &:hover {
        filter: brightness(0.5);
      }
    }
  }

  .link-hover {
    text-decoration: none;
    color: var(--color-azul);
    font-size: var(--size-h4);
    font-family: var(--fonts-heading);

    &:hover {
      text-decoration: underline;
    }
  }
  }

  .vigilancia-home {
    background-color: var(--color-beige);
    padding: 5rem 0;

    p {
      width: 75%;

      @media (width < 992px) {
        width: 100%;
      }
    }

    .box-img-home {
      width: 100%;
      height: 40vh;
      overflow: hidden;
      margin-top: 2rem;
      margin-bottom: 1rem;

      @media (width < 992px) {
        height: 30vh;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .box-content-home {
      padding: 40px;

      @media (width < 992px) {
        padding: 1rem;
      }
    }
  }

  .noticias-destacadas-home {
    padding-top: 5rem;
    padding-bottom: 5rem;

    .img-destacada {
      height: 30rem;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .text-destacada {
      padding: 2rem;

      .button-ddhub {
        border: var(--button-border) var(--color-primary-dark);
        color: var(--color-primary-dark);
        text-transform: uppercase;
      }
    }

    figure {
      margin-bottom: 0;
    }
  }
}

@media (width < 992px) {
  main {
    .content-autor-home {
      gap: 0;

      .img-autor {
        overflow: hidden;
        clip-path: none;
        padding: 0;

        img {
          position: absolute;
          top: 0;
          width: 100%;
        }
      }
      .info-autor {
        padding: 4rem 2rem;
      }
    }
  }
}

@media (width < 576px) {
  main {
    .content-autor-home {
      .info-autor {
        .button-autor {
          width: 100%;
          justify-content: space-between;
        }
      }
    }
  }
}