@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-display: swap;
  font-weight: 300;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-300-italic.woff) format('woff'), url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-300-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* poppins-latin-400-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* poppins-latin-500-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-500-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-500-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* poppins-latin-700-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-700-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-700-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}



#main-nav {
  >.navbar {
    .nav-item {
      .nav-link {
        text-decoration: none;

        &.show,
        &:hover {
          color: var(--bs-primary) !important;
        }
      }

      .dropdown-menu {
        .nav-item {
          &.col.last {
            border: none !important;
          }
        }
      }
    }


    .dropdown-menu {
      padding-left: calc((100vw - 1320px) / 2);
      padding-right: calc((100vw - 1320px) / 2);

      &.show {
        display: flex;
      }
    }
  }

  .topics-menu {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    white-space: nowrap;

    .topic-item {
      &:not(:last-child)::after {
        content: "|";
      }
    }
  }
}

.background-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  aspect-ratio: 16/8;
}

.card {
  &.card-swiper{
    .card-body {
      background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.85) 100%);
      border-radius: var(--border-radius);
      a {
        text-decoration: none;
      }
    }
  }
  &.card-regular{
    a{
      color: inherit;
      text-decoration: none;
    }
  }
  &.card-cast {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    background: rgba(33,33,33,1);

    .cast-info {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 15px;
        background: linear-gradient(to top, rgba(33,33,33, 0.9), rgba(33,33,33, 0.7));
        text-align: center;
    }

    .cast-name {
        font-size: 1.2rem;
        font-weight: 300;
        margin: 0;
    }
  }

}

/* swiper section */
.swiper-wrapper-container {
  /* Botones de navegación de Swiper */
  .swiper-button-prev,
  .swiper-button-next {
    background-color: var(--bs-primary);
    color: var(--bs-white);
    font-size: 1.9rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;

    &:hover {
      background-color: #d60080;
    }

    &::after {
      font-size: 1rem;
    }
  }

  .swiper-button-prev {
    left: -1rem;
  }
  .swiper-button-next {
    right: -1rem;
  }

  .lazy-image {
    aspect-ratio: 4/3;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }

  .lazy-image.loaded {
      opacity: 1;
  }

  .swiper-slide {
    height: auto;
  }
}

.post-preview {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden;
    margin: 16px 0;
    color: inherit;
    a {
      text-decoration: none;
      color: inherit;
    }
}
.post-preview-link {
    display: flex;
    flex: 1 1 auto;
    text-decoration: none !important;
    color: inherit;
}


.post-preview-left {
    padding: 20px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.post-preview-title {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.2;
    color: #212529;
    margin: 0 0 8px 0;
}

.post-preview-summary {
    font-size: 1rem;
    color: #212529;
    opacity: 0.9;
    margin: 0;
}

.post-preview-right {
    flex: 0 0 150px; /* o el ancho que quieras para el lado derecho */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 150px;
}

/* --- Embeds de Instagram --- */
.embed.embed-instagram {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.5rem auto;
  max-width: 540px;
  width: 100%;
}

.embed.embed-instagram iframe {
  display: block;
  margin: 0 auto;
  width: 100% !important;
  max-width: 540px;
  border: 0;
  border-radius: 8px;
  background: #fff;
}

.iframely-embed,
.iframely-responsive { max-width: 400px; margin: auto; }

.iframely-embed iframe { display: block; }

.card-body .embed.embed-instagram {
  justify-content: center;
}

/* Small devices (landscape phones, 576px and up) */
@include media-breakpoint-up(sm){
  @import "app-sm-maoG0wF.css";
}

/* Medium devices (tablets, 768px and up) */
@include media-breakpoint-up(md){

}

/* Large devices (desktops, 992px and up) */
@include media-breakpoint-up(lg){
  @import "app-l-maoG0wF.css";
}

/* X-Large devices (large desktops, 1200px and up) */
@include media-breakpoint-up(xl){
  @import "app-xl-maoG0wF.css";
}

/* XX-Large devices (larger desktops, 1400px and up) */
@include media-breakpoint-up(xxl){
  @import "app-xxl-maoG0wF.css";
}

/* XXX-Large devices (Extra larger desktops, 1900px and up) */
@include media-breakpoint-up(xxxl){
  @import "app-xxxl-maoG0wF.css";
}