@font-face {
        font-family: 'Montserrat';
        font-style: italic;
        font-weight: 100 900;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2) format('woff2');
        unicode-range: U +0460 -052F, U +1C80 -1C8A, U +20B4, U +2DE0 -2DFF, U + A640-A69F, U + FE2E-FE2F;
      }

      :root {
        --p7-blue: #141730;
        --p7-orange: #FF691E;
      }


      .sticky-ad {
        position: sticky;
        top: 100px;
        align-self: flex-start;
        /* MUY IMPORTANTE en Bootstrap */
      }


      .w-100 {
        width: 100% !important;
      }

      .w-90 {
        width: 90% !important;
      }

      .w-80 {
        width: 80% !important;
      }

      .bg-orange {
        background-color: var(--p7-orange);
      }

      h2 {
        color: var(--p7-blue);
        font-weight: 400;
        font-size: 26px;
        letter-spacing: 5px;
        text-transform: uppercase;
        text-align: center;
        margin-bottom: 40px;
      }

      .ads-top-site {
        transition: transform 0.4s ease, opacity 0.4s ease;
      }

      .ads-top-site.is-hidden {
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
      }

      main {
        background-image: url('../img/bg-site.png');
        background-position: top center;
        background-size: contain;
        background-repeat: no-repeat;
      }

      @media (max-width: 767px) {
        main {
          background-image: url('../img/bg-top-movil.png');
          background-position: top center;
          background-size: contain;
          background-repeat: no-repeat;
        }
      }

      /* HEADER */
      .site-header {
        position: relative;
        background: transparent;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
        z-index: 1050;
      }

      .site-header.is-fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: #ffffff;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
      }



      .search-button {
        border-right: 1px solid var(--p7-blue);
        padding-right: 25px;
        margin-right: 20px;
        background: transparent;
        border-left: none;
        border-top: none;
        border-bottom: none;
        cursor: pointer;
      }

      /* Área de búsqueda - Similar al menú principal */
      .main-header-search {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--p7-blue);
        z-index: 1100;
        padding: 0 20px;
      }

      .main-header-search.is-active {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .main-header-search__container {
        display: flex;
        align-items: center;
        gap: 15px;
        width: 100%;
        max-width: 600px;
      }

      .main-header-search__icon {
        color: #fff;
        font-size: 20px;
      }

      .main-header-search__text {
        flex: 1;
        border: none;
        border-bottom: 2px solid rgba(255, 255, 255, 0.3);
        background: transparent;
        padding: 12px 0;
        font-size: 16px;
        color: #fff;
        outline: none;
        transition: border-color 0.2s;
      }

      .main-header-search__text::placeholder {
        color: rgba(255, 255, 255, 0.6);
      }

      .main-header-search__text:focus {
        border-color: var(--p7-orange);
      }

      .main-header-search__submit {
        background: var(--p7-orange);
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 10px 20px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s;
      }

      .main-header-search__submit:hover {
        background: #e85f14;
      }

      .main-header-search__close {
        background: transparent;
        border: none;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
        padding: 5px;
        transition: color 0.2s;
      }

      .main-header-search__close:hover {
        color: var(--p7-orange);
      }

      .main-header-search__close-icon::before {
        content: '✕';
      }

      .main-header-search__icon::before {
        content: '🔍';
      }

      .circle-button {
        aspect-ratio: 1;
        background-color: var(--p7-blue);
        border-radius: 50%;
        border: 0;
        color: #ffffff;
        cursor: pointer;
        display: grid;
        font-size: 15px;
        inline-size: 1.88rem;
        place-items: center;
        padding: 5px;
      }


      .ads-top-site {
        background-color: var(--p7-blue);
        text-align: center;
        padding: 20px 0;
      }

      .ad-vertical {
        height: 600px;
      }

      .hero {
        position: relative;
        overflow: hidden;
      }

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

      .hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(20, 23, 48, .75), rgba(20, 23, 48, .2));
      }

      .hero-content {
        position: absolute;
        bottom: 0;
        padding: 2rem;
        color: #fff;
      }

      .hero-content h1 {
        font-size: 1.8rem;
        font-weight: 700;
      }


      .news-card {
        margin: auto;
      }

      .news-image {
        position: relative;
        width: 100%;
        aspect-ratio: 300 / 170;
        overflow: hidden;
      }

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

      /* Difuminado SOLO abajo */
      .news-fade {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 55%;
        background: linear-gradient(to top,
            rgba(20, 23, 48, 1),
            rgba(20, 23, 48, 0));
      }

      /* Fecha sobre la difuminación */
      .news-date {
        position: absolute;
        bottom: 8px;
        left: 12px;
        z-index: 2;
        font-size: 0.75rem;
        color: #fff;
        letter-spacing: .5px;
      }

      /* Box del título */
      .news-title-box {
        background: #141730;
        padding: 1rem;
        min-height: 110px;
      }

      .news-title {
        font-size: 0.95rem;
        font-weight: 600;
        color: #fff;
        line-height: 1.35;
        margin: 0;
      }

      /* MENÚ MÓVIL ========================================= */

      /* OVERLAY IZQUIERDO */
      .mobile-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        opacity: 0;
        visibility: hidden;
        transition: .3s;
        z-index: 4000;
      }

      /* PANEL */
      .mobile-menu {
        position: fixed;
        top: 0px;
        right: 0;
        width: 75%;
        max-width: 360px;
        height: 100vh;
        background: #fff;
        transform: translateX(100%);
        transition: .35s ease;
        z-index: 5000;
        display: flex;
        flex-direction: column;
      }

      /* ACTIVO */
      .mobile-menu.active {
        transform: translateX(0);
        position: absolute;
      }

      .mobile-overlay.active {
        opacity: 1;
        visibility: visible;
      }

      /* HEADER */
      .mobile-menu-header {
        display: flex;
        justify-content: flex-end;
        padding: 1rem;
      }

      /* BOTÓN CERRAR */
      .btn-close-custom {
        background: none;
        border: none;
        font-size: 1.5rem;
      }

      /* BUSCADOR */
      .mobile-search {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: 1rem;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
      }

      .mobile-search input {
        flex: 1;
        border: none;
        outline: none;
        font-size: .85rem;
      }

      /* RRSS */
      .mobile-rrss {
        display: flex;
        gap: .75rem;
        padding: 1.5rem 1rem;
      }

      .mobile-rrss .circle {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #141730;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-size: .75rem;
      }


      /* CARRUSEL ARTISTAS HOME */
      .artistas {
        background-image: url(../img/bg-artistas.png);
        background-position: top-center;
        background-repeat: none;
        background-size: cover;
      }

      .days-selector .day-btn {
        width: 90px;
        height: 110px;
        border: 1px solid #c9c9d6;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: .2s;
      }

      .day-btn.active,
      .day-btn:hover {
        background: #141730;
        color: #fff;
      }

      .day-number {
        font-size: 36px;
        font-weight: 400;
        line-height: 1;
        padding-bottom: 5px;
      }

      .day-name {
        font-size: 14px;
        letter-spacing: 1px;
      }

      .artist-name {
        padding: 20px;
        background: #141730;
        color: #fff;
        font-weight: 400;
        letter-spacing: 3px;
        font-size: 20px;
        letter-spacing: 5px;
        text-transform: uppercase;
      }


      .days-mobile .day-btn {
        width: 30%;
        height: 110px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: .2s;
      }

      .days-mobile::-webkit-scrollbar {
        display: none;
      }

      .days-mobile .day-btn {
        min-width: 90px;
        height: 90px;
        border: 1px solid #c9c9d6;
        background: #fff;
        flex-shrink: 0;
      }




      .carousel-indicators {
        position: static;
        margin-top: 12px;
      }

      .carousel-indicators [data-bs-target] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #c9c9d6;
        opacity: 1;
        border: none;
        margin: 10px 10px;
      }

      .carousel-indicators .active {
        background-color: #141730;
      }



      /*==========================================*/
      .news-list .news-card {
        display: flex;
        flex-direction: column;
        margin-bottom: 30px;
      }

      .news-list .news-card a {
        text-decoration: none;
      }

      .news-list .news-card a:hover {
        text-decoration: underline;
      }

      .news-list .news-img {
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
      }

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

      .news-list .news-meta {
        font-size: 12px;
        color: var(--p7-blue);
        font-weight: 400;
        margin: 0.75rem 0 0.5rem;
        letter-spacing: 0.5px;
      }

      .news-list .news-title {
        font-size: 18px;
        font-weight: 800;
        line-height: 21px;
        color: var(--p7-blue);
        margin: 0;
      }




      /* BOTÓN */
      .btn-load-more {
        background-color: #ff6a1a;
        color: #fff;
        padding: 0.75rem 2rem;
        font-size: 0.75rem;
        letter-spacing: 2px;
        border-radius: 4px;
        font-weight: 600;
      }

      .btn-load-more:hover {
        background-color: #e85f14;
        color: #fff;
      }

      /* DIVIDER */
      .footer-divider {
        border: none;
        border-top: 1px solid #8899A6;
        margin: 4rem 0;
      }

      /* FOOTER */
      .footer-logos img {
        display: block;
      }

      .footer-separator {
        width: 1px;
        height: 24px;
        background-color: #cfd4e0;
      }

      .footer-credit {
        font-size: 0.8rem;
        color: #8899A6;
      }




      @media (max-width: 767px) {

        .bg-white {
          background-color: #ffffff;
        }

        .news-card {
          margin-bottom: 30px;
        }

        .day-btn.active,
        .day-btn:hover {
          background: #141730 !important;
          color: #ffffff !important;
        }

        .mobile-rrss {
          display: flex;
          justify-content: space-around;
          align-items: center;
        }


        .hero {
          border-radius: 0;
          width: 100vw;
          margin-left: calc(-50vw + 50%);
          background: var(--p7-blue);
        }

        .hero img {
          width: 100%;
          height: 260px;
          object-fit: cover;
          display: block;

          /* DIFUMINADO hacia abajo */
          mask-image: linear-gradient(to bottom,
              rgba(0, 0, 0, 1) 60%,
              rgba(0, 0, 0, 0) 100%);
          -webkit-mask-image: linear-gradient(to bottom,
              rgba(0, 0, 0, 1) 60%,
              rgba(0, 0, 0, 0) 100%);
        }

        .hero-overlay {
          display: none;
          /* ya no se necesita */
        }

        .hero-content {
          position: relative;
          padding: 24px 16px 28px;
          background: var(--p7-blue);
          color: #fff;
        }

        .hero-content h1 {
          font-size: 24px;
          line-height: 30px;
          margin-bottom: 12px;
        }

        .hero-content p {
          font-size: 0.95rem;
          opacity: 0.95;
        }





      }





      /* ================================================================= */
      /* ARTICULO BASE */
      .article-body {
        margin-top: 1rem;
      }

      .article-share {
        position: sticky;
        top: 120px;
        /* queda fino al scrollear */
      }

      .article-share .circle-fb {
        background: #3A5988;
        inline-size: 2.88rem;
      }

      .article-share .circle-x {
        background: #2e3132;
        inline-size: 2.88rem;
      }

      .article-share .circle-whatsapp {
        background: #12C853;
        inline-size: 2.88rem;
      }

      .article-share .circle-link {
        background: #8899A6;
        inline-size: 2.88rem;
      }

      .article-content {
        padding-left: 25px;
        line-height: 26px;
        color: var(--p7-blue);
      }

      .article-content a {
        color: var(--p7-blue);
      }

      .article-content a:hover {
        color: var(--p7-orange);
        text-decoration: none;
      }


      @media (max-width: 767px) {
        .article-content {
          padding-left: 12px !important;
          line-height: 26px;
          color: var(--p7-blue);
        }

        .article-share-mobile a svg {
          color: #ffffff !important;
        }

        .article-share-mobile .circle-fb {
          background: #3A5988;
          inline-size: 2.88rem;
        }

        .article-share-mobile .circle-x {
          background: #2e3132;
          inline-size: 2.88rem;
        }

        .article-share-mobile .circle-whatsapp {
          background: #12C853;
          inline-size: 2.88rem;
        }

        .article-share-mobile .circle-link {
          background: #8899A6;
          inline-size: 2.88rem;
        }
      }

      /* FIN ARTICULO BASE */
      /* ================================================================= */

      /* ================================================================= */
      /* TAMBIEN PUEDES LEER */
      .also-read {
        background: #ff6f1e;
        border-radius: 18px;
      }

      .also-read-label {
        color: #ffffff;
        font-size: 0.75rem;
        letter-spacing: 1px;
      }

      .also-read-img img {
        width: 100%;
        border-radius: 10px;
        object-fit: cover;
      }

      @media (max-width: 767px) {
        .also-read {
          background: linear-gradient(90deg, #6b4bb4 0%, #8d70d7 100%) !important;
          border-radius: 18px;
        }

        .also-read h5 {
          font-size: 15px !important;
        }
      }

      /* FIN TAMBIEN PUEDES LEER */
      /* ================================================================= */

      /* ================================================================= */
      /* RESUMEN IA */

      .summary-box {
        border-radius: 10px;
        overflow: hidden;
      }

      /* BOTÓN */
      .summary-toggle {
        position: relative;
        width: 100%;
        height: 42px;
        padding: 0;
        background: linear-gradient(90deg, #FF7731, #FF2844);
        border: none;
        border-radius: 8px;
        cursor: pointer;
        overflow: hidden;
      }

      .summary-title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-weight: 700;
        letter-spacing: 1px;
        color: #fff;
        line-height: 1;
        pointer-events: none;
        font-size: 12px;
      }

      .summary-arrow {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        transition: transform 0.3s ease;
      }

      .summary-toggle:not(.collapsed) .summary-arrow {
        transform: translateY(-50%) rotate(180deg);
      }

      /* CONTENIDO */
      .summary-body {
        background: #ebebeb;
        padding: 24px;
      }

      .summary-body small:first-child {
        margin-top: 0;
      }

      .summary-label {
        display: block;
        text-align: center;
        font-size: 0.75rem;
        color: #8a8a8a;
        margin-bottom: 16px;
      }

      .summary-body p {
        font-family: Georgia, serif;
        font-size: 1.05rem;
        line-height: 1.7;
        color: #111;
      }

      #summaryContent {
        margin-top: -13px;
      }

      .summary-footer {
        display: block;
        text-align: center;
        font-size: 0.75rem;
        color: #8a8a8a;
        margin-top: 20px;
      }

      /* FIN RESUMEN IA */
      /* ================================================================= */

      .mas-leidos-lateral p {
        font-weight: 700;
        font-size: 14px;
        line-height: 20px;
      }

      .pic-credits {
        border-bottom: 1px solid #8899A6;
        font-size: 12px;
        font-weight: 500;
      }

      .pic-credits svg {
        color: var(--p7-blue);
        margin-top: -4px;
        margin-right: 10px;
      }

      img,
      picture,
      video,
      canvas,
      svg {
        display: inline;
        max-width: 100%;
      }

      blockquote p {
        padding: 0 !important;
        margin: 0 !important;
      }