@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --color-futbol: #1e8738;
    --color-baloncesto: #e65c00;
    --color-voleibol: #0b6ba8;
    --color-deportescontacto: #b8141f;
    --color-otros: #5a268b;
    --color-blue-btn: #0069d9;
    --color-blue-somosfuenla: #333C87;
}

.soySubMenu {
    display: none !important;
}

.silbato-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
    box-sizing: border-box;
    font-family: 'Roboto', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
    color: #333;
    padding-top: 90px !important;
    position: relative;
}

.silbato-social-header, .silbato-cat-title {
    position: absolute;
    right: 15px;
    display: flex;
    align-items: self-end;
    z-index: 10;
    justify-content: center;
    line-height: 34px;
}
.silbato-social-header {
    top: 15px;
    flex-direction: row;
    gap: 10px;
}
.silbato-cat-title {
    max-width: 40%;
    flex-direction: column;
    top: 5px;
    gap: 0px;
}
.silbato-cat-title span {
    text-align: end;
}
.text-silbato-main {
    font-size: 25px;
}

.silbato-social-header-post {
    /*position: absolute;*/
    top: 30px;
    right: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10;
}

.silbato-social-header .social-icon, .silbato-social-header-post .social-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
}

.silbato-social-header .social-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.social-facebook {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23060606'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}

.social-instagram {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23060606'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E");
}

.social-x {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23060606'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

.social-youtube {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23060606'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

.silbato-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}
.news-card-link:hover, .news-item:hover {
    box-shadow: 1px 1px 10px -3px var(--color-blue-btn);
}

.silbato-hero-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    margin-bottom: 25px;
    align-items: stretch;
}
.silbatocat-hero-row {
    display: grid;
    /*grid-template-columns: minmax(0, 1fr) 300px;*/
    gap: 20px;
    margin-bottom: 25px;
    align-items: stretch;
}
.silbatocat-container {
    background-color: #fff !important;
    padding-top: 110px !important;
}
.silbatocat-container .hero-floating-logo {
    width: 240px;
    left: 35px;
    top: -160px;
}
.silbato-cat-title {
    font-size: 32px;
    color: #000000;
    font-weight: bold;
    font-family: 'Roboto';
}

/* ===== CATEGORIA: fila de contenido + columna lateral ===== */

.silbatocat-main-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.silbatocat-col-principal {
    flex: 1 1 auto;
    /* Sin esto la rejilla no se encoge y desborda la fila flex */
    min-width: 0;
}

.silbatocat-lateral {
    width: 300px;
    min-width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Con el lateral ocupando 300px la rejilla baja a 2 columnas */
.silbatocat-col-principal .silbato-blogposts {
    grid-template-columns: repeat(2, 1fr);
}


/* Barra de titulo del listado. Hereda el aspecto general de la web (.TituloModNoticias);
   el color de fondo lo pone el code-behind con el de la categoria */
.silbatocat-titulo-listado {
    margin: 0 0 18px 0;
    border-radius: 8px;
    font-size: 22px;
    letter-spacing: 0.5px;
    box-sizing: border-box;
}


/* ===== TIRA DE REELS: categoria y noticia, a ancho completo sobre el bloque de TDM ===== */
.silbato-reels-bloque {
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    padding: 20px;
    margin: 0 0 20px 0;
}

/* La cabecera general trae padding lateral propio, que aqui sobra */
.silbato-reels-bloque .section-badge-header {
    padding: 0;
}

.silbato-reels-acciones {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* min-width: 0 es imprescindible: sin el, el swiper empuja el ancho de la pagina */
.silbato-reels-swiper {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* El slide es columna: la tarjeta arriba con su proporcion y el pie debajo. Los slides
   se estiran al mas alto, asi que todos los pies empiezan a la misma altura */
.silbato-reels-swiper .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    height: auto;
}

.silbato-reel-card {
    position: relative;
    width: 100%;
    /* No se encoge: el pie crece hacia abajo, no a costa del video */
    flex: 0 0 auto;
    aspect-ratio: 9 / 16;
    min-height: 180px;
    background: #000000;
    border-radius: 10px;
    overflow: hidden;
}

/* El poster y el video se turnan. El poster es una imagen aparte, no el atributo del
   video, porque asi admite loading='lazy', que en el atributo poster no existe */
.silbato-reel-poster,
.silbato-reel-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: center;
    display: block;
}

.silbato-reel-poster {
    object-fit: cover;
}

.silbato-reel-video {
    display: none;
    object-fit: contain;
    background: #000000;
}

.silbato-reel-card.reproduciendo .silbato-reel-poster {
    display: none;
}

.silbato-reel-card.reproduciendo .silbato-reel-video {
    display: block;
}

/* El pie hereda el aspecto del de la portada (.reel-caption y .reel-caption-user),
   que ya va a la izquierda, sin recorte y partiendo las palabras largas */
.silbato-reels-swiper .reel-caption {
    padding: 0 2px;
}

@media (max-width: 576px) {
    .silbato-reels-bloque {
        padding: 14px;
    }
}

/* ===== CATEGORIA: banner de acceso a otra categoria ===== */

/* Es la propia imagen la que lleva el diseno; aqui solo el marco y el enlace */
.silbato-cat-banner {
    display: block;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .silbato-cat-banner:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    }

    .silbato-cat-banner img {
        width: 100%;
        height: auto;
        display: block;
    }

.silbatoNotiPubli {
    padding-top: 15px;
}

.box-hero.silbato-card {
    position: relative;
    overflow: visible !important;
}

.box-hero {
    position: relative;
    border-radius: 12px;
    min-height: 420px;
    background-color: #1a1a1a;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.swiper-container.hero-swiper {
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    min-height: 420px;
    border-radius: 12px;
    position: relative;
    overflow: hidden !important;
}

    .swiper-container.hero-swiper .swiper-slide {
        width: 100% !important;
        box-sizing: border-box;
    }

.loazul {
    background-color: blue;
    width: 100%;
}

.hero-slide {
    width: 100%;
    height: 100%;
    padding: 60px 40px 40px 40px;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

    .hero-slide::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient( 90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.75) 40%, rgba(255, 255, 255, 0) 80% );
        z-index: 1;
    }

.hero-floating-logo {
    position: absolute;
    top: -95px;
    left: 0px;
    width: 200px;
    height: auto;
    z-index: 100 !important;
    filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.25));
    transition: transform 0.2s ease;
    pointer-events: none;
}

    .hero-floating-logo:hover {
        transform: scale(1.03);
    }

.hero-content {
    max-width: 450px;
    z-index: 2;
    position: relative;
}

.hero-title {
    font-size: 44px;
    font-weight: 900;
    line-height: 1.05;
    margin: 0 0 15px 0;
    letter-spacing: -1.5px;
    color: #000000;
}

.text-blue-hero {
    color: var(--color-blue-btn);
}
.text-futbol { color: var(--color-futbol); }
.text-baloncesto { color: var(--color-baloncesto); }
.text-voleibol { color: var(--color-voleibol); }
.text-deportescontacto { color: var(--color-deportescontacto); }
.text-somosfuenla { color: var(--color-blue-somosfuenla); }
.text-otros { color: var(--color-otros); }

.hero-subtitle {
    font-size: 14px;
    margin-bottom: 25px;
    color: #444444;
    font-weight: 600;
}

.hero-swiper-pagination {
    bottom: 15px !important;
    left: 50% !important;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    z-index: 5;
    width: auto !important;
}

    .hero-swiper-pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background-color: rgba(0, 0, 0, 0.3);
        opacity: 1;
        border-radius: 50%;
        margin: 0 !important;
        transition: all 0.3s ease;
    }

    .hero-swiper-pagination .swiper-pagination-bullet-active {
        background-color: var(--color-blue-btn);
        width: 22px;
        border-radius: 4px;
    }

.box-deportista-top {
    padding: 24px 20px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.deportista-header {
    font-size: 24px;
    font-weight: 800;
    color: #004085;
    line-height: 1.1;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-family: 'Oswald';
}

.deportista-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.deportista-main-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    gap: 12px;
}

.deportista-img-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

.silbato-deportistas-swiper {
    position: relative;
    width: 100%;
    max-width: 280px;
    overflow: hidden;
    padding-bottom: 7px;
}
.silbato-deportistas-swiper .swiper-slide {
    display: flex;
    justify-content: center;
    height: auto;
}
.silbato-deportistas-swiper .swiper-button-prev,
.silbato-deportistas-swiper .swiper-button-next {
    color: #0b6ba8;
    transform: scale(0.4);
}

.deportista-img-wrapper img {
    max-height: 220px;
    width: auto;
    object-fit: contain;
}

.deportista-info {
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
}

    .deportista-info h3 {
        font-size: 16px;
        margin: 10px 0 2px 0;
        font-weight: 800;
    }

.deportista-tag {
    font-family: 'Roboto', 'Roboto', 'Segoe UI', sans-serif;
    font-size: 12px;
    color: var(--color-blue-btn);
    font-weight: bold;
    display: block;
    margin: 2px 0 6px 0;
}

.deportista-info p {
    font-size: 13px;
    color: #333;
    margin: 0;
    text-transform: none;
    font-weight: normal;
    line-height: 1.3;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;
    font-size: 13px;
    text-align: center;
}

.btn-primary {
    background: var(--color-blue-btn);
    color: #fff;
}

.btn-outline {
    border: 1px solid var(--color-blue-btn);
    color: var(--color-blue-btn);
}

.full-width {
    display: block;
    width: 100%;
}

.silbato-categories-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.cat-card {
    display: flex !important;
    flex-direction: column !important;
    height: 230px !important;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background-color: #ffffff;
}

    .cat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    }

.cat-card-img {
    height: 55%;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.cat-card-body {
    height: 45%;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    color: #ffffff !important;
    box-sizing: border-box;
}

.cat-futbol .cat-card-body {
    background-color: var(--color-futbol);
}

.cat-baloncesto .cat-card-body {
    background-color: var(--color-baloncesto);
}

.cat-voleibol .cat-card-body {
    background-color: var(--color-voleibol);
}

.cat-deportescontacto .cat-card-body {
    background-color: var(--color-deportescontacto);
}

.cat-otros .cat-card-body {
    background-color: var(--color-otros);
}

.cat-main-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    font-family: 'Oswald', 'Roboto', sans-serif;
    font-weight: 500;
}

.icon-silbato-dark {
    filter: invert(67%) sepia(85%) saturate(1000%) hue-rotate(190deg);
}

.icon-category-736, .icon-category-737, .icon-category-738, .icon-category-739, .icon-category-740 {
    background-image: url('/images/elsilbato/futbol.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: inline-block;
    width: 30px;
    height: 30px;
}

.icon-category-736 { background-image: url('/images/elsilbato/futbol.svg'); }
.icon-category-737 { background-image: url('/images/elsilbato/baloncesto.svg'); }
.icon-category-738 { background-image: url('/images/elsilbato/voleibol.svg'); }
.icon-category-739 { background-image: url('/images/elsilbato/contacto.svg'); }
.icon-category-740 { background-image: url('/images/elsilbato/otros.svg'); }

.icon-category-736-b { background-image: url('/images/elsilbato/futbol_b.svg'); }
.icon-category-737-b { background-image: url('/images/elsilbato/baloncesto_b.svg'); }
.icon-category-738-b { background-image: url('/images/elsilbato/voleibol_b.svg'); }
.icon-category-739-b { background-image: url('/images/elsilbato/contacto_b.svg'); }
.icon-category-740-b { background-image: url('/images/elsilbato/otros_b.svg'); }

.cat-icon-svg {
    font-size: 16px;
    line-height: 1;
}

.cat-main-info strong {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.3px;
    max-width: 120px;
    line-height: 1.1;
    text-transform: uppercase;
    color: #ffffff;
}

.cat-link {
    font-size: 11px;
    opacity: 0.9;
    font-weight: 600;
    color: #ffffff;
}

.silbato-main-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;
}

.silbato-content-col {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.silbato-middle-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 280px;
    gap: 20px;
    align-items: stretch;
}

.silbato-middle-row.silbato-middle2 {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

.section-badge-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 0px 10px;
}

.section-badge-header.space-between {
    justify-content: space-between;
}

.title-with-bar {
    display: flex;
    align-items: center;
}

.bar-accent {
    width: 4px;
    height: 18px;
    background: var(--color-blue-btn);
    margin-right: 8px;
    border-radius: 2px;
}

.section-badge-header h2 {
    font-size: 16px;
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.nav-arrows {
    display: flex;
    gap: 6px;
}

.btn-arrow {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #ced4da;
    background: #fff;
    color: var(--color-blue-btn);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-interview {
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
}

.interview-swiper {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    flex-grow: 1;
    display: flex;
}

.interview-swiper .swiper-slide {
    height: 100%;
}

/* Formato vertical: la foto arriba, el texto debajo. Es lo que permite que la tarjeta
   llene el alto que le impone el reel sin dejar un hueco en medio */
.interview-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 12px;
    width: 100%;
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.interview-img {
    width: 100%;
    /* El 4/3 marca el alto de partida y flex-grow se queda con lo que sobre, igual que
       en .reel-media-wrapper. El maximo evita ampliar la foto sin limite en filas muy
       altas: a partir de ahi reparte el margin-top:auto del boton */
    aspect-ratio: 4 / 3;
    flex: 1 1 auto;
    min-height: 220px;
    max-height: 600px;
    border-radius: 8px;
    overflow: hidden;
}

.interview-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.interview-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    flex: 0 0 auto;
    min-width: 0;
}

.tag-badge {
    color: var(--color-blue-btn);
    font-size: 12px;
    font-weight: normal;
    padding: 2px 6px;
    border-radius: 0px;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.6px;
    border-left: 4px solid var(--color-blue-btn);
}
.interview-title {
    font-size: 24px;
    font-weight: 900;
    line-height: 1.2;
    margin: 4px 0;
    color: #1a1a1a;
}

.interview-title span {
    display: flex;
    width: 100%;
    font-size: 20px;
}

.text-blue {
    color: var(--color-blue-btn);
}

.subtitle {
    font-size: 13px;
    color: #737373;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.description {
    font-size: 14px;
    color: #495057;
    line-height: 1.4;
    margin: 0 0 15px 0;
}

.btn-interview {
    font-size: 14px;
    padding: 4px 14px;
    border-radius: 6px;
    margin-top: 5px;
    font-weight: normal;
}

/* Con el contenedor en stretch el boton se estiraria de lado a lado. El margin-top:auto
   se queda como ultimo recurso: solo actua si la foto ya toco su max-height */
.interview-content .btn-interview {
    margin-top: auto;
    align-self: flex-start;
}
.btn-interview:hover, .hero-content .btn-primary:hover {
    background: #fff;
    color: var(--color-blue-btn);
}

.card-news-list {
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.news-items {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.news-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f3f5;
}

    .news-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .news-item img {
        width: 55px;
        height: 55px;
        object-fit: cover;
        border-radius: 8px;
    }

.news-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.news-item h4 {
    font-size: 17px;
    margin: 2px 0;
    line-height: 20px;
}

.news-item time {
    font-size: 12px;
    color: #013fa3;
}

.link-all {
    font-size: 11px;
    font-weight: bold;
    color: var(--color-blue-btn);
    text-decoration: none;
}

.silbato-destacados-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.news-card .card-img {
    position: relative;
    height: 110px;
}

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

.news-card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.news-card-link:hover {
    color: inherit;
}

.news-card .card-content {
    padding: 12px;
}

.news-card h4 {
    font-size: 15px;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.news-card time {
    font-size: 12px;
    color: #013fa3;
}

.cat-tag {
    position: absolute;
    bottom: 8px;
    left: 8px;
    color: #fff;
    font-size: 11px;
    font-weight: normal;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.silbato-blogposts .cat-label {
    padding: 3px 15px;
    border-radius: 7px;
    font-family: "oswald";
    letter-spacing: 0.6px;
    font-size: 13px;
}

.cat-tag-futbol, .cat-label-futbol {
    background: var(--color-futbol);
    color: #fff;
}

.cat-tag-baloncesto, .cat-label-baloncesto {
    background: var(--color-baloncesto);
    color: #fff;
}

.cat-tag-voleibol, .cat-label-voleibol {
    background: var(--color-voleibol);
    color: #fff;
}

.cat-tag-deportescontacto, .cat-label-deportescontacto {
    background: var(--color-deportescontacto);
    color: #fff;
}

.cat-tag-otros, .cat-label-otros {
    background: var(--color-otros);
    color: #fff;
}

.cat-label {
    font-size: 11px;
    font-weight: NORMAL;
    padding: 2px 4px;
    border-radius: 2px;
    display: inline-block;
    width: fit-content;
    letter-spacing: 0.5px;
}

.silbato-sidebar-col {
    height: 100%;
}

.box-deportista-sidebar {
    padding: 20px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.btn-jugador-mid {
    display: none;
}

.btn-jugador-gen {
    display: inline-block;
    margin-top: 10px;
}

/* --- TARJETA --- */
.news-card-grid {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #eef2f5;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    height: 100%;
    background: linear-gradient(21deg, #0069d91c 30%, #0080001a 60%, #b8061a1a 80%);
}

.news-card-grid:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.brand-time {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    color: #4b4b4b;
    letter-spacing: 0.5px;
    font-family: "Roboto";
}

/* DISEÑO BLOG POST SILBATO */
.bpsilbato {
    margin: 0px 20px 10px 0;
    width: 880px;
    float: left;
}
.bpsilbato .page-title {
    text-align: start;
    color: #072A54;
    text-decoration: none;
    font-family: "Roboto";
    font-weight: bold;
    margin: 0px !important;
}
.bpsilbato .page-title h1 {
    font-size: 40px;
    letter-spacing: 0.6px;
    font-family: 'Roboto';
    line-height: 45px;
    color: black;
}
.bpsilbato .cat-label {
    padding: 5px 10px;
    font-weight: bold;
    font-size: 13px;
    border-radius: 4px;
}
.bpsilbato .page-subtitle {
    text-decoration: none;
    font-family: 'Roboto';
    font-weight: bold;
    text-align: left;
}
.bpsilbato .page-subtitle h2 {
    font-size: 21px;
    font-family: 'Roboto';
    font-weight: normal;
    color: #6d6d6d;
}
.bpsilbato .postImg {
    display: inline-block;
    text-align: left;
    width: 100%;
    margin: 20px 0px 6px;
    /* border-top: 3px solid #0273b5; */
    /* border-bottom: 3px solid #0273b5; */
    position: relative;
}
.silbatoimgpost {
    position: absolute;
    top: 5px;
    right: 5px;
    max-width: 180px;
    min-width: 100px;
    width: 20%;
}
.bpsilbato .postImg p {
    float: right;
    vertical-align: top;
    color: #414141;
    font-size: 14px;
    text-align: left;
    font-family: Roboto;
    /* font-weight: bold; */
}
.bpsilbato .postImg figcaption {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}
.silbatoLatText {
    width: 10px;
    height: 10px;
    background-color: black;
}
.silbatoblogdate {
    color: #838383;
    display: flex;
    padding: 0px 5px 0px 0px;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}
.silbatopost-redactor-alias {
    font-size: 19px !important;
    font-weight: bold;
    text-transform: uppercase;
}
.silbato-post-info {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    margin-bottom: 12px;
}
.silbato-post-izq {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    width: 50%;
}
.icon-category-post {
    background-repeat: no-repeat;
    background-size: 21px;
    width: 20px;
    height: 20px;
}
.bpsilbato .postbody p {
    margin-bottom: 25px;
}
.colorSep {
    width: 150px;
    height: 4px;
    margin: 8px 0px;
}
.bpsilbato .product-share-button {
    width: 50%;
    float: right;
    text-align: right;
}
.bpsilbato .product-share-button .socialMediaLinks {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    margin-right: 15px;
}
.bpsilbato .postdate {
    color: #9a9a9a;
    font-style: italic;
    margin: 7px 0;
    float: left;
    width: 50%;
    line-height: 28px;
}
.bpsilbato .postbody {
    background: none repeat scroll 0 0 #fff;
    border-radius: 10px;
    margin: 0;
    width: 95%;
    margin: 0px auto;
    margin-top: 20px;
}
.bpsilbato .postbody p, .bpsilbato .postbody a, .bpsilbato .postbody span, .bpsilbato .postbody ul {
    font-family: 'Roboto' !important;
    letter-spacing: 0.5px;
    font-size: 19px;
    text-align: justify;
    line-height: 26px;
}
.bpsilbato .tags {
    margin-bottom: 30px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.card-category {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
}

.cat-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-futbol {
    background-image: url('/images/icons/futbol.svg');
}
.icon-baloncesto {
    background-image: url('/images/icons/baloncesto.svg');
}
.icon-otros {
    background-image: url('/images/icons/deportes.svg');
}

.silbatoTituloMasLeidas {
    text-transform: uppercase;
    margin-top: 10px;
}
.silbatoMasLeidos {
    padding: 10px 10px 20px 10px;
    gap: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.silbatoMasLeidaTitle {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}
.leidaContador {
    font-size: 22px;
    font-family: 'Roboto';
    font-weight: bold;
    color: #676767;
}
.leidaTitulo {
    font-family: 'Roboto';
    font-size: 16px;
    padding: 0px 20px 0px 0px;
}
.p010 {
    padding: 0px 10px;
}

/* --- BLOQUE CENTRAL (IMAGEN + TÍTULO) --- */
.card-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}

.card-img-link {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f3f4f6;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-title {
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
}

.card-title a {
    color: #111827;
    text-decoration: none;
    transition: color 0.2s;
}

.card-title a:hover {
    color: var(--color-blue-btn, #0073b7);
}

/* --- FOOTER INFERIOR --- */
.card-footer-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
}

.brand-tag {
    font-size: 12px;
    font-weight: 800;
    color: #9ca3af;
    letter-spacing: 0.5px;
    font-family: 'Roboto';
}

.post-time {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.silbato-blogposts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 10px;
}

.silbato-blogposts > article {
    min-width: 0;
    height: 100%;
}

.reel-card {
  width: 100%;
  max-width: 280px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #eef2f5;
}

.reel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #ffffff;
  border-bottom: 1px solid #f0f0f0;
}

.reel-profile-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.reel-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid #e1306c;
}

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

.reel-username {
  font-size: 0.72rem;
  font-weight: 700;
  color: #1a1a1a;
}

.btn-follow-ig {
  color: #e1306c;
  display: flex;
  align-items: center;
}

.reel-media-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    flex: 0 0 auto;
    min-height: 260px;
    background: #000000;
    overflow: hidden;
    margin: 0 auto;
}

.reel-poster,
.reel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #000000;
  display: block;
}

.reel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.6) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px;
  width: 100%;
  margin: 0;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.reel-overlay.reel-oculto {
  display: none;
}

.reel-overlay:hover .reel-play-btn,
.reel-overlay:focus-visible .reel-play-btn {
  background: rgba(255, 255, 255, 0.45);
  transform: scale(1.08);
}

.reel-play-btn {
  align-self: center;
  margin-top: auto;
  margin-bottom: auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: background .2s ease, transform .2s ease;
}

.reel-stats {
  display: flex;
  gap: 6px;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 600;
}

.reel-stat-item {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 6px;
  border-radius: 8px;
  backdrop-filter: blur(2px);
}

.reel-footer {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 0 auto;
  justify-content: space-between;
}

.reel-caption {
    font-size: 12px;
    color: #333;
    line-height: 1.20;
    margin: 0;
    text-align: left;
    overflow-wrap: break-word;
    word-break: break-word;
    margin-top: 6px;
}

.reel-caption-user {
  font-weight: 700;
  color: #1a1a1a;
  margin-right: 4px;
}

.btn-reel-link {
  padding: 5px 0;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 4px;
  text-decoration: none;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
    .cat-card,
    .hero-floating-logo,
    .news-card-link,
    .news-item {
        transition: none !important;
    }

    .swiper-wrapper {
        transition-duration: 1ms !important;
    }

    .reel-play-btn {
        transition: none !important;
    }
}

@media (max-width: 1200px) {
    .bpsilbato .blogposts .postBreves .product-share-button, .bpsilbato .blogposts .postBreves .blogdetails {
        width: 100% !important;
        text-align: center;
    }
    .bpsilbato {
        padding: 0 10px 5px 10px;
        width: 100%;
        box-sizing: border-box;
    }
    .bpsilbato  .page-title h1 {
        font-size: 32px;
        line-height: 34px;
    }
	.bpsilbato .page-subtitle h2 { font-size: 18px; }
	.bpsilbato .postImg { margin-bottom: 10px; }
	.bpsilbato .postImg p {	font-size: 15px; }
	.bpsilbato .postImg iframe, .videoEV #videoNoticia { height: 340px; }
    .bpsilbato .postImg #videoNoticia {
        /*height: 340px;*/
    }
	.bpsilbato .postbody { padding: 5px; margin-top: 5px; }
	.bpsilbato .postbody .sumarioIzq, .bpsilbato .postbody .sumarioDer { width: 50%; }
	.bpsilbato .postbody .sumarioIzq p, .bpsilbato .postbody .sumarioIzq a, .bpsilbato .postbody .sumarioIzq span, .bpsilbato .postbody .sumarioIzq div,
	.bpsilbato .postbody .sumarioDer p, .bpsilbato .postbody .sumarioDer a, .bpsilbato .postbody .sumarioDer span, .bpsilbato .postbody .sumarioDer div 
	{
		width: 64%;
		font-size: 18px !important;
		padding: 10px 18%;
	}
	.bpsilbato .postbody .sumarioCentral p, .bpsilbato .postbody .sumarioCentral a, 
	.bpsilbato .postbody .sumarioCentral span, .bpsilbato .postbody .sumarioCentral div 
	{
		width: 80%;
		font-size: 18px !important;
		padding: 10px 10%;
	}
}

@media (max-width: 992px) {
    /* El lateral se apila bajo las noticias; se usa 992 para seguir la escalera de
       esta hoja y evitar el tramo en que las tarjetas quedarian a ~215px */
    .silbatocat-main-row {
        flex-direction: column;
        /* En columna, align-items gobierna el ANCHO: con flex-start la columna
           principal se encogeria a su contenido minimo */
        align-items: stretch;
    }

    .silbatocat-lateral {
        width: 100%;
        min-width: 0;
    }

    .silbatocat-lateral .sticky {
        position: static;
    }

    .silbato-hero-row {
        grid-template-columns: 1fr;
    }

    .box-hero, .swiper-container.hero-swiper {
        min-height: 350px;
    }

    .hero-slide {
        padding-top: 50px;
    }
/*
    .hero-floating-logo {
        width: 120px;
        height: 95px;
        top: -20px;
        left: 10px;
    }
*/
    .box-deportista-top {
        text-align: left;
        padding: 20px;
    }

    .deportista-header {
        text-align: center;
        margin-bottom: 15px;
    }

    .deportista-main-block {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 20px;
        width: 100%;
    }

    .deportista-content-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 25px;
        margin-top: 0;
    }

    .deportista-img-wrapper {
        width: 60px;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
    }

    .deportista-img-wrapper img {
        max-height: 180px;
        width: 100%;
        object-fit: contain;
    }

    .deportista-info {
        flex: 1;
    }

    .deportista-info h3 {
        font-size: 18px;
        margin: 0 0 4px 0;
    }

    .deportista-info p {
        margin-top: 4px;
    }

    .deportista-content-wrapper .btn {
        margin-top: 15px;
        align-self: flex-end;
        width: auto;
        padding: 8px 20px;
    }

    .silbato-social-header {
        top: 15px;
    }

    .btn-jugador-mid {
        display: inline-block;
    }

    .btn-jugador-gen {
        display: none;
    }
    /* En una sola columna la tarjeta se va por encima de 900 px de ancho y la foto a
       pantalla completa quedaria desproporcionada */
    .interview-img {
        max-height: 420px;
    }
    .silbato-middle-row,
    .silbato-middle-row.silbato-middle2 {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .silbato-categories-row {
        grid-template-columns: repeat(3, 1fr);
    }
    .silbato-destacados-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cat-card {
        height: auto !important;
        min-height: 230px;
    }
    .cat-card-img {
        height: auto;
        aspect-ratio: 16 / 10;
    }
    .cat-card-body {
        height: auto;
        flex: 1 1 auto;
    }
    .silbato-blogposts {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* En una sola columna los 280px de la columna lateral dejan de tener sentido */
    .silbato-deportistas-swiper {
        max-width: none;
    }

    .reel-card {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 900px) {
    .silbato-post-info {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 5px;
        margin-bottom: 5px;
    }
    .silbato-post-izq, .product-share-button {
        width: 100% !important;
        justify-content: flex-start;
    }
    .bpsilbato .product-share-button .socialMediaLinks {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .silbato-destacados-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .interview-body {
        text-align: center;
    }

    .interview-img {
        max-height: 320px;
    }

    .interview-content {
        align-items: center;
    }

    .cat-main-info strong {
        font-size: 16px;
    }
    .hero-slide {
        padding: 60px 40px 40px 14px;
    }
    .hero-title {
        font-size: 32px;
    }
    .hero-floating-logo {
        width: 165px;
        height: auto;
        top: -94px;
        left: 10px;
    }
}

@media (max-width: 650px) {
    .silbatocat-container .hero-floating-logo {
        width: 200px;
        left: 5px;
        top: -121px;
    }
}

@media (max-width: 576px) {
    /* Ya apilado, la rejilla vuelve a una columna como el resto de la pagina */
    .silbatocat-col-principal .silbato-blogposts {
        grid-template-columns: 1fr;
    }

    .silbato-categories-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .silbato-categories-row .cat-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .deportista-content-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .deportista-img-wrapper {
        width: 100%;
    }

    .deportista-info {
        align-items: center;
    }

    .box-deportista-top {
        text-align: center;
        padding: 15px;
    }

    .deportista-main-block {
        flex-direction: column;
        gap: 10px;
    }

    .deportista-img-wrapper {
        width: 100%;
    }

    .deportista-img-wrapper img {
        max-height: 150px;
    }

    .deportista-content-wrapper .btn {
        align-self: center;
        width: 100%;
        margin-top: 12px;
    }

    .btn-jugador-mid {
        display: none;
    }

    .btn-jugador-gen {
        display: inline-block;
    }

    .silbato-blogposts {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .silbato-cat-title {
        font-size: 24px;
    }
    .silbato-social-header {
        top: 20px;
        right: 20px;
        line-height: 1.2;
        align-items: flex-end;
    }
    .silbato-cat-title {
        top: 20px;
        right: 20px;
        line-height: 1.2;
        align-items: flex-end;
        flex-direction: column;
        gap: 0px;
    }
    .silbatotitlesep {
        display: none;
    }
}