:root {
  --color-primary: #3A302C;
  --color-secondary: #000000;
  --color-tertiary: #3A302C;
  --color-background: #f3ede6;
  --color-background-two: #ffffff;
  --color-btn-primary: #4C413D;
  --color-text-primary: #ffffff;
  --color-text-secondary: #000000;
  --color-search-bar: #f3ede6;
  --color-background-subsection: #E7D9C7;
}

body.dark-theme {
  --color-primary: #ffffff;
  --color-secondary: #d4c9c1;
  --color-tertiary: #FFF2EA;
  --color-background: #211b16;
  --color-background-two: #3a312d;
  --color-btn-primary: #FFF8F0;
  --color-text-primary: #4C413D;
  --color-text-secondary: #FFF2EA;
  --color-search-bar: #B4AFAA;
  --color-background-subsection: #160F0D;
}







#header-mobile {
  display: none;

  .logo-actions {
    display: flex;
    width: 100%;

    .theme {
      margin-left: 20px;
      width: 38px;
    }
  }

}

.menu-categories-mobile {
  display: none;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .header {
    display: none;
  }

  .menu-container {
    display: none;
  }

  .menu-categories {
    display: none;
  }

  .actions {
    display: flex;
    align-items: center;
    flex-direction: column;

    .container-search {
      width: 100%;
      height: 37px;
      margin-left: 0px;

      .search-input {
        width: 100%;
        height: 37px;
        padding-left: 14px;
      }

      .c-action {
        right: 9px;
        top: 10px;
      }
    }

    .subscribe-button {
      width: 100%;
      margin: 30px 0px;
      height: 32px;
      padding-left: 0px !important;
    }

  }

  #header-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 20px 20px;


    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem;
      background-color: #fff;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .logo {
      height: 40px;
      cursor: pointer;
    }

    .menu-button {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
    }

    .menu-icon {
      width: 25px;
      height: 3px;
      background-color: #000;
      border-radius: 3px;
    }

    .settings-button {
      background: none;
      border: none;
    }

    .settings-button img {
      height: 30px;
    }

    /* Menu styles */
    .menu {
      display: flex;
      gap: 1rem;
      list-style: none;
    }

    .menu ul {
      display: flex;
      gap: 1rem;
      padding-inline-start: 0px;
      justify-content: space-around;
    }

    .menu li {
      list-style: none;
    }

    .menu a {
      text-decoration: none;
      color: #000;
      font-weight: 500;
    }

    .menu a:hover {
      color: #007bff;
    }

    .menu {
      display: none;
      flex-direction: column;
      position: absolute;
      top: 60px;
      right: 0px;
      background-color: #fff;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      /* padding: .5rem; */
      border-radius: 5px;
    }

    .menu.open {
      display: flex;
      width: 100%;
    }

    .menu-button {
      display: flex;
      position: relative;
      padding: 0px;
      top: 9.5px;
      right: 6px;
    }
  }

  .menu-categories-mobile {
    display: flex;
    width: 100%;
    position: relative;

    .menu-list {
      background: #000;
      display: flex;
      width: 100%;
      height: 38px;
      padding: 0px 235px 0px 16px;
      align-items: center;
      justify-content: flex-start;
      color: #00CEBA;
      font-family: Inter;
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 112.8%;

      li {
        a {
          color: #00CEBA;
          font-size: 18px;
          padding-top: 8px;
          position: relative;
          top: -13px;

          span {
            color: #ffffff;
            font-size: 40px;
            padding-left: 4px;
          }
        }
      }
    }
  }

  .popover-menu {
    position: absolute;
    z-index: 1000;
    background: white;
    border-radius: 0px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 100%;
    color: #000;
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    top: 37px;

    .menu-selector-container {
      display: flex;
      flex-direction: column;
      background: #000000;
      border-radius: 0px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      overflow-y: auto;
      padding: 10px;
    }

    .menu-item {
      padding: 10px;
      cursor: pointer;
      text-align: left;
      border-bottom: none;


    }

    .menu-item:hover {
      background-color: #f0f0f0;
    }

  }

}

#main-menu-mobile {
  margin-top: 0px;
  padding-top: 0px;
  position: absolute;
  width: 100%;
  height: 100vh;
  background: #F4EDE6;
  z-index: 9999;
  padding: 31px 21px;

  ul {
    margin-top: 72px;

    li {
      margin-bottom: 30px;

      a {
        color: var(--Neutral-10, #17181C);
        text-align: right;
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
        text-transform: capitalize;
        text-decoration: none;
      }
    }
  }
}

#home {
  background: var(--color-background);
  display: flex;
  justify-content: center;

  .full-w {
    width: 1159px;

    #content-slogan {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .slogan {
        color: #B0A09A;
        font-family: "Albert Sans";
        font-size: 19px;
        font-style: normal;
        font-weight: 600;
        letter-spacing: 0.95px;
        text-transform: uppercase;
        margin-bottom: 0px;
      }

      .date {
        color: #786A64;
        font-family: Barlow;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        margin-bottom: 0px;
        /* line-height: 24px; */
      }

    }


    #main-container {
      display: flex;
      flex-direction: row;

      .left-container {
        width: 966px;
        margin-top: 8px;

        .detail {
          display: flex;
          justify-content: space-between;
          align-items: end;

          .main-img {
            width: 966px;
            height: 363px;
          }

          .main-title {
            width: 770px;
            height: 80px;

            color: #3A302C;
            font-family: "Albert Sans";
            font-size: 38px;
            font-style: normal;
            font-weight: 700;
            line-height: 36px;
            /* 94.737% */
            letter-spacing: 1.52px;
            margin: 0px;
          }

          .read-more {
            display: flex;
            width: 185px;
            height: 32px;
            padding: 12px 48px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
            border-radius: 4px;
            border: 1px solid var(--Neutral-100, #FFF);
            background: #4C413D;
            color: #F4EDE6;
            font-family: Barlow;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
            text-transform: capitalize;
            cursor: pointer;
          }
        }

        .last-three {
          margin-top: 8px;
          display: flex;
          justify-content: space-between;

          .news-card {
            width: 322px;
            display: flex;
            flex-direction: column;
            border: 1px solid #ccc;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            font-family: Arial, sans-serif;
            position: relative;


            .category {
              position: absolute;
              top: 10px;
              left: 10px;
              background-color: rgba(255, 255, 255, 0.8);
              padding: 4px 8px;
              border-radius: 4px;
              z-index: 2;

              color: var(--Neutral-800, #3F4047);
              font-family: Inter;
              font-size: 12px;
              font-style: normal;
              font-weight: 500;
              line-height: 18px;
              /* 150% */
              letter-spacing: 0.036px;
              text-transform: uppercase;
            }

            .news-image {
              width: 321.678px;
              height: 261px;
              flex-shrink: 0;
              object-fit: cover;
            }

            .content {
              padding: 0px;
              position: absolute;
              bottom: 0px;
              width: 100%;

              .title {
                margin: 0 0 8px;
                color: #333;
                width: 255.024px;
                height: 74px;
                color: #FFF;
                font-family: "Albert Sans";
                font-size: 22px;
                font-style: normal;
                font-weight: 600;
                line-height: 23px;
                padding-left: 9.6px;
              }

              .action {
                display: flex;
                justify-content: space-between;
                align-items: center;
              }

              .location {
                margin: 0 0 16px;
                color: #FFF;
                font-family: "Albert Sans";
                font-size: 16px;
                font-style: normal;
                font-weight: 300;
                padding-left: 9.6px;
              }

              .read-more {
                border: none;
                padding: 8px 16px;
                border-radius: 4px;
                cursor: pointer;
                transition: background-color 0.3s;
                width: 91.77px;
                height: 28px;
                background: #FFFFFF;
                color: #000;
                text-align: center;
                font-family: Barlow;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                text-transform: capitalize;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 10px;
                margin-bottom: 5px;
                cursor: pointer;
              }

            }

          }

          .br-bl {
            border-bottom-left-radius: 8px;
          }

          .br-br {
            border-bottom-right-radius: 8px;
          }
        }

        .daily {
          border-radius: 10px 0px 0px 10px;
          border: 1px solid var(--Neutral-80, #C7C9D1);
          background: #FFFBF4;
          display: flex;
          width: 326px;
          padding: 32px;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          gap: 16px;

          .d-category {
            border-radius: 4px;
            background: #00CEBA;
            display: flex;
            padding: 4px 8px;
            align-items: flex-start;
            gap: 8px;
            color: var(--green-success-800, #005929);
            font-family: "Albert Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 18px;
            letter-spacing: 0.036px;
            text-transform: uppercase;
          }

          .d-title {
            color: #3A302C;
            font-family: "Albert Sans";
            font-size: 40px;
            font-style: normal;
            font-weight: 700;
            line-height: 45px;
            margin-top: 16px;
            margin-bottom: 0px;
          }

          .d-date {
            color: #B0A09A;
            font-family: Barlow;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
            margin-top: 0px;
            margin-bottom: 0px;
          }

          .d-download {
            display: flex;
            height: 32px;
            padding: 12px 24px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            border-radius: 6px;
            background: #202823;
            color: #FFF;
            font-family: Barlow;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
            text-transform: capitalize;
            cursor: pointer;
          }

        }

        .d-image {
          width: 638px;
          height: 329px;
        }
      }

      .full-c {
        min-width: 966px;
        max-height: 329px;
        display: flex;
      }

      .right-container {
        width: 100%;

        .clean-notice {
          position: relative;
          height: 210px;
          border-bottom: 1px dashed #786A64;
          margin-left: 8px;

          .c-category {
            margin-top: 8px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 4px;
            color: var(--Neutral-800, #3F4047);
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
            letter-spacing: 0.036px;
            text-transform: uppercase;
            display: flex;
            display: inline-block;
            padding: 4px 8px;
            align-items: center;
            gap: 8px;
            justify-content: center;
          }

          .c-title {
            color: #000;
            font-family: "Albert Sans";
            font-size: 22px;
            font-style: normal;
            font-weight: 700;
            line-height: 24px;
            height: 121px;
            margin-top: 10px;
          }

          .c-read-more {
            width: 91.77px;
            height: 32px;
            border-radius: 4px;
            border: 1px solid var(--Neutral-100, #FFF);
            background: #4C413D;
            color: #F4EDE6;
            font-family: Barlow;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
            text-transform: capitalize;
            position: relative;
            bottom: 14px;
            float: right;
            cursor: pointer;
          }

        }

        .p-one {
          padding-left: 8px;
          margin-top: 8px;
          height: 329px;
        }
      }
    }

    #content-last-notices {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;

      .l-title {
        color: var(--color-secondary);
        ;
        font-family: Barlow;
        font-size: 32px;
        font-style: normal;
        font-weight: 300;
        text-transform: capitalize;
        margin-bottom: 0px;
        margin-top: 0px;
      }

      .m-notices {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0px;
        color: var(--color-secondary);
        ;
        text-align: right;
        font-family: Barlow;
        font-size: 18px;
        font-style: normal;
        font-weight: 300;
        margin-top: 0px;
        text-transform: capitalize;
        cursor: pointer;

        .icon {
          width: 18px;
          height: 18px;
          margin-left: 5px;
          position: relative;
          bottom: 1px;
        }
      }

      .m-notices:hover {
        opacity: .5;
      }

      .m-top {
        margin-bottom: 5px;
      }

    }

    #content-notices {
      display: flex;
      width: 100%;
      height: 485px;
      flex-direction: row;
      align-items: center;
      margin-top: 32px;
      justify-content: space-between;

      .item-notice {
        width: 281px;
        position: relative;

        .n-image {
          width: 281px;
          height: 263px;
          object-fit: cover;
          border-radius: 10px 10px 0px 0px;
        }

        .badge {
          position: absolute;
          top: 0px;
          right: 0px;
          width: 67px !important;
          height: auto !important;
        }

        .content-detail {
          border-radius: 0px 0px 10px 10px;
          background: var(--color-background-two);
          display: flex;
          padding: 16px;
          flex-direction: column;
          align-items: flex-start;
          height: 222px;
          max-height: 222px;
          justify-content: space-between;
          /* padding-top: 0px; */

          .n-category {
            display: flex;
            padding: 4px 8px;
            align-items: flex-start;
            border-radius: 4px;
            background: #F3E2DB;
            color: #4C413D;
            font-family: 'Inter';
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 18px;
            letter-spacing: 0.036px;
            text-transform: uppercase;
            margin-top: 0px;
            margin-bottom: 10px;
          }

          .n-title {
            color: var(--color-tertiary);
            font-family: "Albert Sans";
            /* font-size: 28px; */
            font-size: 1.5rem;
            font-style: normal;
            font-weight: 700;
            line-height: 30px;
            margin-top: 0px;
            margin-bottom: 10px;
            min-height: 120px;
          }

          .n-date {
            color: var(--color-tertiary);
            font-family: "Albert Sans";
            font-size: 16px;
            font-style: normal;
            font-weight: 300;
            line-height: 24px;
            margin-top: 0px;
            margin-bottom: 16px;
          }

        }


      }


    }
  }

  .banner-home-h {
    margin-top: 19px;
    margin-bottom: 20px;

    img {
      width: 1159px;
      height: 147px;
    }
  }

  .about-section {
    margin-top: 1px;
    margin-bottom: 20px;
    position: relative;

    img {
      width: 225.864px;
      height: 195.511px;
    }

    .container-about {
      position: absolute;
      bottom: 20px;
      left: 37px;

      .about-of {
        color: #FFF;
        font-family: Inter;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
        /* 120% */
        letter-spacing: 3px;
        text-transform: uppercase;
        margin-bottom: 0px;
      }

      .ecodiario {
        color: #FFF;
        font-family: "Albert Sans";
        font-size: 72px;
        font-style: normal;
        font-weight: 900;
        line-height: 90px;
        margin-top: 0px;
        margin-bottom: 0px;
      }
    }

    #about-detail {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-bottom: 30px;

      .d-title {
        color: #160F0D;
        font-family: Barlow;
        font-size: 32px;
        font-style: normal;
        font-weight: 400;
        line-height: 40px;
        max-width: 317px;
      }

      .content-detail {
        display: flex;
        flex-direction: row;

        .d-detail {
          color: #3A302C;
          font-family: Barlow;
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 24px;
          width: 377px;
          padding-left: 13px;
        }
      }

    }

    .digital {
      color: #3A302C;
      font-family: Barlow;
      font-size: 32px;
      font-style: normal;
      font-weight: 400;
      line-height: 40px;
      text-align: center;
    }
  }
}

.header {
  background: #E7D9C7 !important;

  .title {
    color: #3A302C;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 16px;
    margin-bottom: 6px;
  }

  .category {
    color: #3A302C;
    font-family: "Albert Sans";
    font-size: 56px;
    font-style: normal;
    font-weight: 700;
    line-height: 60px;
    margin-top: 0px;
    margin-bottom: 13px;
  }

  .detail {
    color: #3A302C;
    width: 572px;
    font-family: Barlow;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
  }

  .satira {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
}


.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  /* background-color: #f9f9f9; */
  padding: 20px;
}

.card {
  /* background: #fff; */
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 250px;
  text-align: center;
  overflow: hidden;
  font-family: Arial, sans-serif;
  padding: 10px;
  background: linear-gradient(180deg, #FFF8F0 0%, #F7ECE0 100%);
  box-shadow: 0px 10px 19px 0px rgba(0, 0, 0, 0.20);
}

.card-image {
  width: 100%;
  height: auto;
  border-bottom: 1px solid #eee;
}

.card-text {
  margin: 10px 0;
  color: #3A302C;
  text-align: center;
  font-family: Barlow;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px;
}

#navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  margin-bottom: 19px;

  button {
    background: transparent;
    border-radius: 7px;
    border: 1px solid #4C413D;
    display: flex;
    width: 122px;
    height: 32px;
    padding: 12px 48px;
    justify-content: center;
    align-items: center;
    color: #4C413D;

    font-family: Barlow;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 171.429% */
    text-transform: capitalize;
  }

  button:hover {
    background: #efefef;
    cursor: pointer;
  }

  .pagination {
    color: #4C413D;

    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 133.333% */
    text-transform: lowercase;
  }
}

#header-detail {
  .category {
    border-radius: 4px;
    background: #786A64;
    display: inline-flex;
    padding: 4px 8px;
    align-items: flex-start;
    color: #F4EDE6;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0.036px;
    text-transform: uppercase;
    margin-top: 22px;
  }

  .title {
    color: var(--color-primary);
    font-family: "Albert Sans";
    font-size: 72px;
    font-style: normal;
    font-weight: 700;
    line-height: 70px;
    max-width: 965px;
    margin-top: 31px;
    margin-bottom: 60px;
  }
}

#body-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .banner {
    width: 965px;
    margin-top: 33px;
    position: relative;
    text-align: center;

    img {
      /* width: auto;
      height: 100%; */

      width: auto;
      height: auto;
      max-width: 965px;

      /* width: 965px;
      height: 462px;
      object-fit: cover;
      object-position: top; */
      border-radius: 20px 20px 0px 0px;
    }

    #social-links {
      color: red;
      position: absolute;
      right: -77px;
      bottom: 50px;

      img {
        width: 50px;
        height: 50px;
        cursor: pointer;
      }
    }
  }

  .main-info {
    width: 770px;

    .date-detail {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #786A64;
      border-bottom: 1px solid #786A64;
      margin-top: 33px;

      .date {
        color: var(--color-btn-primary);
        font-family: Barlow;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        margin: 10px 0px;
      }

      .time {
        color: var(--color-btn-primary);
        text-align: right;
        font-family: Barlow;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        margin: 10px 0px;
      }
    }

    .author {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 35px;
      margin-bottom: 30px;

      img {
        display: flex;
        width: 32px;
        height: 32px;
        align-items: flex-start;
        border-radius: 50%;
      }

      p {
        color: var(--color-btn-primary);
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        margin-left: 17px;
        margin-top: 0px;
        margin-bottom: 0px;
      }
    }

    .main-text {
      color: var(--color-text-secondary);
      font-family: Inter;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px;
      margin-bottom: 70px;
    }
  }
}

#cont-slider {
  img {
    width: 100% !important;
    height: auto !important;
  }


  .carousel-container {
    width: 70vw;
    height: 80vh;
    margin: 16px auto;
  }

  :host ::ng-deep {
    .image-container {
      max-width: 85%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .igx-carousel {
      max-width: 100%;
      width: unset;
    }

    .igx-slide {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      width: unset;
    }

    .igx-slide img {
      object-fit: fill;
      max-width: 90%;
    }
  }

}

#quote {
  padding: 16px 36px;
  background: #fff;
  margin-top: 45px;
  margin-bottom: 30px;

  p,
  div {
    color: #197B71;
    font-size: 32px;
    font-style: italic;
    font-weight: 700;
    line-height: 40px;
  }

  div {
    padding-bottom: 11px;
  }
}

.element-mobile {
  display: none !important;
}

.element-web {
  display: block;
}

.svg-full {
  width: 100%;
}

.share-icon {
  position: fixed;
  right: 136px;
  bottom: 51px;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  padding: 0;
}

.share-icon img {
  width: 70px !important;
  height: 70px !important;
  display: block;
}

@media (max-width: 768px) {

  #home {
    .full-w {
      width: 100%;
      padding: 39px 23px;

      #content-notices {
        display: block;

        .item-notice {
          width: 100%;
          margin-bottom: 21px;

          .n-image {
            width: 100%;
          }
        }
      }
    }

    #header-detail {
      .title {
        font-size: 32px;
        line-height: 40px;
        font-weight: 700;
        margin-top: 15px;
        margin-bottom: 0px;
      }
    }

    #body-detail {
      .banner {
        width: 100%;

        img {
          /* width: 100%;
          height: 533px; */
          width: auto;
          height: auto;
          object-fit: cover;
          max-width: 100%;
        }
      }

      .main-info {
        width: 100%;
      }
    }

  }

  .element-mobile {
    display: flex !important;
  }

  .element-web {
    display: none !important;
  }

  #quote {
    margin-top: 20px;

    p {
      color: #197B71;
      font-family: "Albert Sans";
      font-size: 27px;
      font-style: italic;
      font-weight: 700;
      line-height: 40px;
    }
  }

  .igx-carousel-indicators,
  .igx-carousel-indicators--top,
  .igx-carousel-indicators--bottom {
    display: none;
    position: relative;
  }

  .share-icon {
    right: 0px;
    bottom: 6px !important;
    top: inherit;
  }

}

.skeleton {
  animation: skeleton-loading 1s linear infinite alternate;
}

@keyframes skeleton-loading {
  0% {
    background-color: hsl(200, 20%, 80%);
  }

  100% {
    background-color: hsl(200, 20%, 95%);
  }
}

.skeleton-text {
  display: block;
  width: 100%;
  height: 0.7rem;
  margin-bottom: 0.5rem;
  border-radius: 0.25rem;
}





/*new slider*/
.slider-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  /* Tamaño perfecto en móvil */
  overflow: hidden;
  margin: auto;
}

.slider {
  display: flex;
  transition: transform 0.4s ease-in-out;
}

.slide {
  min-width: 100%;
  box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Aumenta el tamaño de las imágenes en web */
@media (min-width: 768px) {
  .slider-container {
    max-width: 600px;
    /* Aumenta el ancho en pantallas más grandes */
  }
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  padding: 10px;
  font-size: 18px;
  border-radius: 50%;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

button:hover {
  background: rgba(0, 0, 0, 0.8);
}



/*header */
#main-menu-app {
  margin-top: 0px;
  padding-top: 0px;
  position: fixed;
  width: 100%;
  background: #ffffff;
  z-index: 9999;

  .header {
    width: 100%;
    display: flex;
    /* justify-content: space-between; */
    justify-content: center;
    align-items: center;
    padding: 10px 150px;
    background-color: #fff !important;

    .h-container {
      width: 1027px;
      min-width: 1027px;
      display: flex;
      justify-content: space-between;
    }

    .logo {
      /* position: relative;
        left: 150px; */

    }

    .content-main-links {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;

    .theme {
      padding-left: 21px;
      cursor: pointer;
    }

    .close {
      cursor: pointer;
      width: 30px;
      height: 30px;
      position: relative;
      right: 30px;
      color: #000;
    }
  }

  .logo .eco {
    color: #34d3c3;
  }

  .logo .diario {
    color: #000;
  }

  .logo-icon {
    width: 180.469px;
    height: 25px;
    flex-shrink: 0;
    cursor: pointer;
  }

  .menu {
    display: flex;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .menu li a {
    text-decoration: none;
    color: #17181C;
    text-align: right;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* text-transform: capitalize; */
    cursor: pointer;
  }

  .menu li .selected {
    color: #00CEBA !important;
  }

  .menu li a:hover {
    color: #34d3c3;
  }

  .actions {
    display: flex;
    align-items: center;
    gap: 10px;

    .container-search {
      width: 189px;
      display: flex;
      justify-content: space-between;
      margin-left: 20px;
      position: relative;

      .c-action {
        position: absolute;
        right: 5px;
        top: 6px;
      }

      .search {
        /* position: relative;
            top: 3px; */
        color: rgba(22, 15, 13, 0.70);
        font-family: "Material Symbols Outlined";
        font-size: 21px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 0.063px;
        text-transform: uppercase;
        width: 21px;
        height: 18px;
        /* margin-right: 3px; */
      }

      .divider {
        color: rgba(92, 96, 112, 0.60);
        text-align: center;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
      }
    }
  }

  .search-input {
    padding: 5px 10px;
    border-radius: 100px;
    border: 1px solid rgba(199, 201, 209, 0.50);
    background: rgba(246, 246, 246, 0.70);
    color: rgba(92, 96, 112, 0.60);
    text-align: left;
    font-family: Inter;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    cursor: pointer;
    width: 189px;
    /* padding-left: 47px; */

  }

  .search-input:hover {
    cursor: pointer;
  }

  .subscribe-button {
    cursor: pointer;
    width: 110px;
    height: 30px;
    align-items: center;
    border-radius: 6px;
    background: #000;
    color: #FFF;
    text-align: center;
    font-family: 'Barlow';
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 1.3px;
    text-transform: capitalize;
    margin-left: 20px;
    display: flex;
    justify-content: center;
    padding-left: 13px;
    padding-bottom: 12px;
    position: relative;
    top: 0px;
    transform: none;
  }

  .subscribe-button:hover {
    background-color: #444;
  }

  .menu-categories {
    background-color: #000;
    padding: 6px 20px;
    display: block;
  }

  .menu-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    justify-content: center;
    max-width: 1440px;
  }

  .menu-list li {
    margin-right: 17px;
    margin-bottom: 10px;
  }

  .menu-list li a {
    text-decoration: none;
    transition: color 0.3s;
    color: #FFF;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    cursor: pointer;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  .menu-list li a.active {
    color: #29d3c2 !important;
    font-weight: bold !important;
  }


  .active {
    color: #29d3c2 !important;
    font-weight: bold !important;
  }

  .menu-list li a:hover {
    color: #29d3c2;
    /* Color del hover */
  }

  .menu-list li a.more {
    display: flex;
    align-items: center;
  }

  .menu-list li a.more span {
    margin-left: 2px;
    font-size: 18px;
    font-weight: 400;
    position: relative;
    bottom: 2px;
  }

  /*Nuevo menu*/
  .menu-container {
    background: black;
    color: white;
    padding: 6px 10px 10px 10px;
    font-family: Arial, sans-serif;
  }

  .menu-row {
    display: flex;
    flex-wrap: wrap;
    gap: 17px;
    max-width: 1027px;
    margin: 0 auto;
  }

  .menu-item {
    cursor: pointer;
    text-decoration: none;
    transition: color 0.3s;
    color: #FFF;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    cursor: pointer;
    letter-spacing: 1px;
    white-space: nowrap;
    padding-top: 6px;
  }


  .menu-item:hover {
    color: #00CEBA;
  }

  .more-btn {
    color: #FFF;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.3s;
    color: #FFF;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    cursor: pointer;
    letter-spacing: 1px;
    position: relative;

    .icon-expand {
      color: #FFF;
      font-family: Inter;
      font-size: 19px;
      font-style: normal;
      font-weight: 300;
      line-height: 112.8%;
      position: absolute;
      top: 0px;
      right: -14px;
    }
  }

  .more-btn-active {
    color: #00CEBA;
  }


  .more-btn:hover {
    color: #00CEBA;
  }

}





/*Fin nuevo menu*/



/*end header*/








.footer {
  background-color: #f8f8f8;
  color: #333;
  font-family: Arial, sans-serif;
  padding: 20px 0;
  border-top: 1px solid #eaeaea;
}

.footer-container {
  max-width: 1159px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-logo {
  margin-bottom: 20px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  img {
    width: 228px;
    height: 32px;
  }

  p {
    color: #525252;
    text-align: right;
    font-family: "Albert Sans";
    font-size: 19px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.95px;
    text-transform: uppercase;
    margin: 2px 0px;
  }
}

.footer-logo h2 {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

.footer-logo h2 span {
  color: #666;
}

#f-menu {
  width: 100%;
  display: flex;
  justify-content: flex-end;


  .footer-sections {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    text-align: left;
    width: 901px;
  }

  .footer-sections div {
    /* flex: 1;
  min-width: 200px; */
  }

  .footer-sections h3 {
    color: var(--Neutral-60, #8F93A3);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    text-transform: uppercase;
  }

  .footer-sections ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .ul-clean {
    padding-top: 47px !important;
  }

  .footer-sections li {
    color: var(--Neutral-0, #000);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
    cursor: pointer;

    a {
      color: var(--Neutral-0, #000);
      text-decoration: none;
    }
  }

  .footer-sections .social-links {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .footer-sections .social-links li {
    font-size: 20px;
    color: #333;
    cursor: pointer;
  }

  .footer-sections .social-links li:hover {
    color: #666;
  }
}


.footer-bottom {
  font-size: 12px;
  color: #777;
  text-align: center;
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: flex-start;


  .copiright {
    color: var(--Neutral-70, #ABAEBA);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }

  .privacy {
    color: #444;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 171.429% */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    margin-right: 5px;
    margin-left: 5px;
  }
}

.footer-bottom a {
  color: #333;
  text-decoration: none;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

#f-menu {
  display: flex;
}

#m-menu {
  display: none;
}


.element-mobile {
  display: none !important;
}

.element-web {
  display: flex;
}

.svg-full {
  width: 100%;
}


@media (max-width: 768px) {

  .element-mobile {
    display: flex !important;
  }

  .element-web {
    display: none !important;
  }



  .footer {
    padding: 40px 20px;

    .footer-container {
      .footer-logo {
        p {
          display: none;
        }
      }
    }

    #f-menu {
      display: none;
    }

    #m-menu {
      width: 100%;
      display: flex;
      justify-content: flex-end;


      .footer-sections {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 20px;
        margin-bottom: 20px;
        text-align: left;
        width: 901px;
      }

      .footer-sections h3 {
        color: var(--Neutral-60, #8F93A3);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        text-transform: uppercase;
      }

      .footer-sections ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .ul-clean {
        padding-top: 47px !important;
      }

      .footer-sections li {
        color: var(--Neutral-0, #000);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        margin-bottom: 16px;

        a {
          color: var(--Neutral-0, #000);
          text-decoration: none;
        }
      }

      .footer-sections .social-links {
        display: flex;
        gap: 10px;
        justify-content: center;
        flex-direction: column;
        align-items: center;
      }

      .footer-sections .social-links li {
        font-size: 20px;
        color: #333;
        cursor: pointer;
      }

      .footer-sections .social-links li:hover {
        color: #666;
      }
    }


    .footer-bottom {
      justify-content: flex-start;
      flex-direction: column;

      .copiright,
      p {
        text-align: left;
        margin: 0px;
        margin-bottom: 5px;
      }

    }

  }
}

/* Oculta por defecto */
#header-mobile {
  display: none;
}

#main-menu-mobile {
  display: none;
}

#main-menu-app .header {
  display: block;
}

.footer {
  display: block;
}


/* Solo muestra en pantallas menores a 768px */
@media (max-width: 767px) {

  .footer {
    display: none;
  }

  #main-menu-app .header {
    display: none;
  }

  #main-menu-mobile ul {
    padding-left: 0px;
  }

  #main-menu-mobile.active {
    display: block;
    color: #f4ede6 !important;

    margin-top: 0;
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #f4ede6;
    z-index: 9999;
    padding: 31px 21px;

    .logo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 1.5rem;
      font-weight: 700;
      width: 89%;

      .logo-icon {
        width: 180.469px;
        height: 25px;
        flex-shrink: 0;
        cursor: pointer;
      }

      .close {
        cursor: pointer;
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #000000;
      }
    }


    .actions .subscribe-button {
      cursor: pointer;
      width: 110px;
      height: 30px;
      align-items: center;
      border-radius: 6px;
      background: #000;
      color: #fff;
      text-align: center;
      font-family: Barlow;
      font-size: 13px;
      font-style: normal;
      font-weight: 400;
      letter-spacing: 1.3px;
      text-transform: capitalize;
      margin-left: 20px;
      display: flex;
      justify-content: center;
      padding-left: 8px;
      padding-bottom: 3px;

      width: 100%;
      margin: 30px 0;
      height: 32px;
      padding-left: 0 !important;
    }

  }

  #main-menu-mobile {
    .container-search-mobile {
      width: 89%;

      .container-search {
        width: 100%;
        height: 37px;
        margin-left: 0;
        display: flex;
        justify-content: space-between;
        position: relative;

        input {
          border-radius: 100px;
          border: 1px solid rgba(199, 201, 209, .5);
          background: #f6f6f6b3;
          color: #5c607099;
          text-align: left;
          font-family: Inter;
          font-size: 15px;
          font-style: normal;
          font-weight: 400;
          cursor: pointer;
          width: 100%;
          height: 37px;
          padding: 0px;
          padding-left: 14px;
        }

        .c-action {
          position: absolute;
          right: 8px;
          top: 12px;

          .search {
            color: #160f0db3;
            font-family: Material Symbols Outlined;
            font-size: 21px;
            font-style: normal;
            font-weight: 500;
            line-height: 18px;
            letter-spacing: .063px;
            text-transform: uppercase;
            width: 21px;
            height: 18px;
          }
        }
      }


        .subscribe-button{
        cursor: pointer;
        width: 80%;
        align-items: center;
        border-radius: 6px;
        background: #000;
        color: #fff;
        text-align: center;
        font-family: Barlow;
        font-size: 13px;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 1.3px;
        text-transform: capitalize;
        display: flex;
        justify-content: center;
        margin: 45px 0 30px 0px;
        height: 32px;
        padding-left: 0 !important;
      }
    }
  }

  #header-mobile {
    display: flex;
  }
}

.c-hand {
  cursor: pointer;
}





/*Menu contextual*/
.context-menu {
  position: absolute;
  background: #2D2D2D;
  border-radius: 5px;
  list-style: none;
  padding: 5px 0;
  margin: 0;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  min-width: 160px;
}

.context-menu li {
  padding: 10px 15px;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.context-menu li:hover {
  background: #3D3D3D;
}

.context-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}


.menu-categories-mobile {
  .ul-mobile {
    justify-content: left !important;
    padding-left: 16px !important;

    li {
      a {
        color: #00ceba !important;
        font-size: 18px !important;
        padding-top: 8px;
        position: relative;
        top: -13px;

        span {
          color: #fff;
          font-size: 40px !important;
          padding-left: 4px;
        }
      }
    }
  }
}