/* Portal14 Destacados - slider principal estilo Atlético (verde Inter)
   La imagen es protagonista; el texto se reduce al mínimo. */
.ifs-hero {
        --ifs-green: #2FA04E;
        --ifs-green-dark: #22833B;
        --ifs-band: #22833B;
        --ifs-white: #ffffff;
        --ifs-card-bg: #2FA04E;
        --ifs-gap: 16px;
        --ifs-radius: 6px;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 16px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.ifs-hero *,
.ifs-hero *::before,
.ifs-hero *::after {
        box-sizing: border-box;
}

/* Rejilla: bloque grande (izq) + dos cajones (der) */
.ifs-hero__grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: var(--ifs-gap);
        align-items: stretch;
}

/* ---------- Bloque principal ---------- */
.ifs-hero__main {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: var(--ifs-radius);
        background: var(--ifs-band);
        min-height: 100%;
}
.ifs-hero__media {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        background: linear-gradient(135deg, var(--ifs-green), var(--ifs-green-dark));
}
.ifs-hero__media .ifs-hero__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.5s ease;
}
.ifs-hero__main:hover .ifs-hero__media .ifs-hero__img {
        transform: scale(1.04);
}

/* Banda inferior con el titular (y botón opcional) */
.ifs-hero__band {
        position: relative;
        z-index: 2;
        background: var(--ifs-band);
        padding: 16px 22px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
}
.ifs-hero__title {
        margin: 0;
        font-size: clamp(1.15rem, 1.9vw, 1.9rem);
        font-weight: 800;
        line-height: 1.15;
        color: var(--ifs-white);
        /* Una línea y un poco: máximo 2 líneas con puntos suspensivos. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        flex: 1 1 60%;
}

/* ---------- Columna lateral (2 cajones) ---------- */
.ifs-hero__side {
        display: grid;
        grid-template-rows: 1fr 1fr;
        gap: var(--ifs-gap);
}
.ifs-hero__card {
        position: relative;
        display: flex;
        /* Imagen a la DERECHA (para que no choque con la foto principal de la izquierda). */
        flex-direction: row-reverse;
        align-items: stretch;
        overflow: hidden;
        border-radius: var(--ifs-radius);
        background: var(--ifs-card-bg);
        min-height: 0;
}
.ifs-hero__card-text {
        flex: 1 1 46%;
        min-width: 0;
        padding: 16px 18px 16px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
}
.ifs-hero__card-heading {
        margin: 0;
        font-size: 19px;
        font-weight: 800;
        line-height: 1.2;
        color: var(--ifs-white);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
}
.ifs-hero__card-excerpt {
        margin: 0;
        font-size: 14px;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.95);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
}
/* Titulares enlazables: heredan el estilo del encabezado y quedan por encima
   del enlace-cubierta para que al pulsar el texto también se abra la noticia. */
.ifs-hero__title a,
.ifs-hero__card-heading a {
        color: inherit;
        text-decoration: none;
        position: relative;
        z-index: 3;
}
.ifs-hero__title a:hover,
.ifs-hero__card-heading a:hover {
        text-decoration: underline;
}
.ifs-hero__card-media {
        position: relative;
        flex: 0 0 58%;
        overflow: hidden;
        background: linear-gradient(135deg, var(--ifs-green), var(--ifs-green-dark));
}
.ifs-hero__card-media .ifs-hero__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.5s ease;
}
.ifs-hero__card:hover .ifs-hero__card-media .ifs-hero__img {
        transform: scale(1.05);
}

/* ---------- Etiqueta de categoría ---------- */
.ifs-hero__cat {
        position: absolute;
        left: 12px;
        top: 12px;
        z-index: 3;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ifs-white);
        background: var(--ifs-green-dark);
        padding: 4px 9px;
        border-radius: 3px;
        pointer-events: none;
}
.ifs-hero__cat--inline {
        position: static;
        align-self: flex-start;
}

/* ---------- Botón (COMPRAR, etc.) ---------- */
.ifs-hero__btn {
        position: relative;
        z-index: 4;
        display: inline-block;
        flex: none;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--ifs-white);
        background: var(--ifs-green);
        padding: 10px 18px;
        border-radius: 4px;
        transition: background 0.2s ease, transform 0.15s ease;
        white-space: nowrap;
}
.ifs-hero__btn:hover {
        background: var(--ifs-green-dark);
        color: var(--ifs-white);
}
.ifs-hero__btn:active {
        transform: scale(0.97);
}
.ifs-hero__btn--sm {
        align-self: flex-start;
        font-size: 0.74rem;
        padding: 8px 14px;
        background: #DBFBA2;
        color: #1a1a1a;
}
.ifs-hero__btn--sm:hover {
        background: #c8e890;
        color: #1a1a1a;
}

/* ---------- Botón de PLAY (vídeo) ---------- */
.ifs-hero__play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 4;
        width: 74px;
        height: 74px;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;
        transition: transform 0.2s ease;
}
.ifs-hero__play svg {
        width: 100%;
        height: 100%;
        display: block;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}
.ifs-hero__play circle {
        fill: rgba(255, 255, 255, 0.92);
}
.ifs-hero__play polygon {
        fill: var(--ifs-green-dark);
}
.ifs-hero__play:hover {
        transform: translate(-50%, -50%) scale(1.08);
}
.ifs-hero__play--sm {
        width: 48px;
        height: 48px;
}

/* ---------- Enlace que cubre toda la tarjeta ---------- */
.ifs-hero__cover {
        position: absolute;
        inset: 0;
        z-index: 1;
        text-indent: -9999px;
        overflow: hidden;
}

/* Placeholder de imagen */
.ifs-hero__img--placeholder {
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, var(--ifs-green) 0%, var(--ifs-green-dark) 100%);
}

/* ================= RESPONSIVE ================= */

/* Tablet / escritorio estrecho: grande arriba, los dos cajones juntos debajo.
   Subimos el punto de corte a 1200px para que, al encoger la ventana, NUNCA
   quede la franja estrecha en la que el texto se apretaba dentro del cajón. */
@media (max-width: 1200px) {
        .ifs-hero__grid {
                grid-template-columns: 1fr;
        }
        .ifs-hero__main .ifs-hero__media {
                aspect-ratio: 16 / 9;
        }
        .ifs-hero__side {
                grid-template-rows: none;
                grid-template-columns: 1fr 1fr;
        }
        /* En tablet reducimos un poco el texto para que quepa bien */
        .ifs-hero__card-heading {
                font-size: 18px;
                -webkit-line-clamp: 2;
        }
        .ifs-hero__card-excerpt {
                font-size: 14px;
                -webkit-line-clamp: 2;
        }
}

/* Franja intermedia (cajones lado a lado pero aún algo estrechos): apilamos
   imagen arriba y texto debajo dentro de cada cajón, para que el texto tenga
   todo el ancho y no se apelmace. */
@media (max-width: 1200px) and (min-width: 621px) {
        .ifs-hero__card {
                flex-direction: column;
        }
        .ifs-hero__card-media {
                flex: none;
                width: 100%;
                aspect-ratio: 16 / 9;
                order: -1;
        }
        .ifs-hero__card-text {
                flex: 1 1 auto;
        }
}

/* Móvil: presencia máxima. Todo en vertical, imágenes grandes. */
@media (max-width: 620px) {
        .ifs-hero {
                padding: 0 12px;
        }
        .ifs-hero__grid {
                gap: 18px;
        }
        .ifs-hero__main .ifs-hero__media {
                aspect-ratio: 4 / 3;
        }
        .ifs-hero__band {
                padding: 14px 16px 16px;
        }
        .ifs-hero__title {
                font-size: 1.25rem;
                flex-basis: 100%;
        }
        /* Cajones pequeños en vertical: imagen grande arriba, texto debajo. */
        .ifs-hero__side {
                grid-template-columns: 1fr;
                gap: 18px;
        }
        .ifs-hero__card {
                flex-direction: column;
        }
        .ifs-hero__card-media {
                flex: none;
                width: 100%;
                aspect-ratio: 16 / 9;
                order: -1;
        }
        .ifs-hero__card-text {
                padding: 14px 14px 16px;
        }
        .ifs-hero__card-heading {
                font-size: 1.15rem;
        }
        .ifs-hero__card-excerpt {
                font-size: 0.9rem;
                -webkit-line-clamp: 3;
        }
        .ifs-hero__play {
                width: 62px;
                height: 62px;
        }
        .ifs-hero__play--sm {
                width: 62px;
                height: 62px;
        }
        .ifs-hero__btn--sm {
                font-size: 0.8rem;
                padding: 10px 16px;
        }
}

/* ================= MODAL DE VÍDEO (compartido Portal14) ================= */
.p14-video-modal {
        position: fixed;
        inset: 0;
        z-index: 999999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(0, 0, 0, 0.82);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
}
.p14-video-modal.is-open {
        opacity: 1;
        visibility: visible;
}
.p14-video-modal__box {
        position: relative;
        width: 100%;
        max-width: 960px;
        aspect-ratio: 16 / 9;
        background: #000;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        transform: scale(0.94);
        transition: transform 0.25s ease;
}
.p14-video-modal.is-open .p14-video-modal__box {
        transform: scale(1);
}
.p14-video-modal__box iframe,
.p14-video-modal__box video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
}
.p14-video-modal__close {
        position: absolute;
        top: -14px;
        right: -14px;
        z-index: 2;
        width: 42px;
        height: 42px;
        border: none;
        border-radius: 50%;
        background: #fff;
        color: #111;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
        transition: transform 0.15s ease;
}
.p14-video-modal__close:hover {
        transform: scale(1.08);
}
@media (max-width: 620px) {
        .p14-video-modal__close {
                top: 8px;
                right: 8px;
        }
}