header {

  .container,
  .row{
    height: 100%;
  }

  .header-hero {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;

    .content-hero-portada {
      .text-hero {
        font-weight: 700;
      }
    }

    .portada-images {
      position: relative;

      .img-small {
        position: absolute;
        width: 35%;
        bottom: -300px;
        right: 49%;
      }

      .img-big {
        position: absolute;
        width: 56%;
        top: 50%;
        transform: translateY(-50%);
        right: 53px;
      }
    }

    @media (width < 992px) {
      .portada-images {
        display: none;
      }
    }
  }
}

.observatorio-portada-main {
  .portada-radar {
    background-color: var(--color-negro-ddhub);
    position: relative;
    padding: 6rem 0;
    color: var(--color-primary-light);

    h2 {
      width: max-content;
      color: var(--color-primary-dark);
      background-color: var(--color-verde-ddhub);
      padding: 0.6rem 8rem;
      position: absolute;
      top: 50px;
    }

    .radar-img {
      height: 30rem;
      margin-bottom: 3rem;

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

    .text-left_radar {
      margin-bottom: 3rem;
    }

    .link-radar_portada {
      color: var(--color-primary-light);
      border: var(--button-border) var(--color-primary-light);
    }

    .box-article{
      @media (width < 992px){
        margin-top: 3rem;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
      }
    }

    .portada-radar_articulo {
      .radar-article_img {
        height: 12.5rem;

        @media (width < 1400px){
          margin-bottom: 2rem;
        }

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

      .art-link {
        display: flex;
        align-items: center;
        gap: 5px;
        color: var(--color-secondary-light);

        &::before {
          background-color: var(--color-secondary-light);
        }

        i {
          transition: all 0.3s ease;
        }

        &:hover {
          i {
            margin-left: 1rem;
          }
        }
      }
    }

    .button-ddhub.enlace-portada{
      border: var(--button-border) var(--color-primary-light);
      color: var(--color-primary-light);
      margin-top: 5rem;
    }
  }

  .content-autor-observatorio {
    background-color: var(--color-verde-ddhub);
    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%;
        object-fit: cover;
      }
    }

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

      .button-autor {
        color: var(--color-primary-dark);
        border: var(--button-border) var(--color-primary-dark);
      }
    }
  }

  .portada-zoom {
    padding: 10rem 0 8rem;

    h2 {
      display: flex;
      align-items: center;
      padding: 0 2rem;
      margin: 0 2rem;
      position: absolute;
      left: 0;
      top: 57px;

      &::before {
        content: "";
        height: 150%;
        width: 15px;
        background-color: var(--color-secondary-dark);
        left: 0;
        position: absolute;
      }
    }

    .img-zoom {
      width: 100%;
      height: 30rem;

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

    .card-zoom {
      .art-link {
        display: flex;
        align-items: center;
        gap: 5px;

        i {
          transition: all 0.3s ease;
        }

        &:hover {
          i {
            margin-left: 1rem;
          }
        }
      }
    }

    .button-ddhub.enlace-portada{
      border: var(--button-border) var(--color-primary-dark);
      color: var(--color-primary-dark);
      margin-top: 5rem;
    }
  }

  .content-banner {
    background-color: var(--color-negro-ddhub);
    gap: 10rem;

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

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

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

      .button-banner {
        color: var(--color-primary-light);
        border: var(--button-border) var(--color-primary-light);
      }
    }
  }

  .observatorio-text {
    padding: 7rem 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    .content-text {
      background-color: var(--color-verde-ddhub);
      color: var(--color-secondary-dark);
      padding: 3rem;
      gap: 1rem;

      h2,
      p {
        text-align: center;
        width: 65%;
      }

      .button-text {
        border: var(--button-border) var(--color-secondary-dark);
        color: var(--color-secondary-dark);
      }
    }
  }
}

@media (width < 992px) {
  .observatorio-portada-main {
    .portada-images {
      display: none;
    }

    .portada-radar {
      .portada-radar_noticia {
        margin-top: 3rem;
      }

      h2 {
        padding: 0.6rem 5rem;
      }
    }

    .content-autor-observatorio {
      gap: 0;
      .img-autor {
        overflow: hidden;
        clip-path: none;

        img {
          position: absolute;
          top: 0;
          width: 100%;
        }
      }

      .info-autor {
        padding: 2rem;
      }
    }

    .content-banner {
      gap: 0;
      .img-banner {
        overflow: hidden;
        clip-path: none;

        img {
          position: absolute;
          top: 0;
          width: 100%;
        }
      }

      .info-banner {
        padding: 2rem;
      }
    }
  }
}

@media (width < 768px) {
  .observatorio-portada-main {
    .portada-radar {
      h2 {
        padding: 0.6rem 2rem;
      }
    }

    .observatorio-text {
      .content-text {
        margin: 0 1.5rem;
      }
    }
  }
}

@media (width < 576px) {
  .observatorio-portada-main {
    .observatorio-text {
      .content-text {
        h2,
        p {
          width: 100%;
        }
      }
    }
  }
}