@font-face {
  font-family: 'Verdana Pro Condensed';
  src: url('../fonts/VerdanaPro-CondRegular.woff2') format('woff2');
  font-display: swap;
}


/* Estilos existentes... */
.sc-facade {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    width: 100%;
    height: 100px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0 20px;
    cursor: pointer;
    transition: background 0.2s ease;
    border-top: 3px solid #fe450f;
    overflow: hidden;
}
.sc-facade:hover {
    background: #e8e8e8;
}

/* Apilamiento Grid (Stacked): ambos ocupan la misma celda */
.sc-facade__histogram,
.sc-facade__btn {
    grid-column: 1;
    grid-row: 1;
}

.cards-categories__iframe.podcast-iframe .sc-facade__histogram {
    width: 100%;
    height: 50px;
    background-image: var(--bg-url);
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 100%;
    opacity: 0.4 !important;
    pointer-events: none;
    z-index: 1;
}

.sc-facade__btn {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #333;
    z-index: 2;
    white-space: nowrap;
}

.sc-facade__btn .title {
    background: #000;
    color: #fff;
    padding: 5px;
    border-radius: 6px;
}

/* Fachada Youtube */
.yt-facade {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 150px;
    background-color: #000;
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yt-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.yt-facade:hover img {
    opacity: 0.85;
}

.yt-facade__btn {
    position: absolute;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yt-facade:hover .yt-facade__btn path.bg {
    fill: #ff0000;
    fill-opacity: 1;
}

/* Ampliar área táctil de la paginación de Swiper */
.banner-primary__wrapper .swiper-pagination-bullet {
    min-width: 20px;
    min-height: 20px;
    margin: 0 6px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Mantener el diseño del círculo visual centrado */
.banner-primary__wrapper .swiper-pagination-bullet::before {
    content: '';
    width: 8px; /* O el tamaño original que tengan tus puntos */
    height: 8px;
    background-color: currentColor;
    border-radius: 50%;
}

/* Ampliar el área táctil sin cambiar el aspecto visual */
.swiper-pagination-bullets .swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    margin: 0 8px !important; /* Aumenta el espacio horizontal entre puntos */
    position: relative !important;
    display: inline-block !important;
}

/* Pseudoelemento invisible de 24x24px para ampliar la zona interactiva */
.swiper-pagination-bullets .swiper-pagination-bullet::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    background: transparent !important;
}

/* Responsive logo footer */
.responsive-logo {
  max-width: 100%;
  height: auto; /* Anula los 111px fijos en pantallas pequeñas */
  object-fit: contain; /* Evita que la imagen se deforme o recorte */
}