/*
 * JaimeDiaz.TV Portal Reboot
 * Compact lead grid — v1.0.0
 */

.jdr-lead-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        286px
        54px;
    align-items: stretch;
    gap: 14px;
}

/* =========================================================
   Historia principal
   ========================================================= */

.jdr-lead-story {
    position: relative;
    min-width: 0;
    min-height: 260px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    border-radius: var(--jdr-radius-md);
    background:
        radial-gradient(
            circle at 78% 20%,
            rgba(96, 148, 154, 0.22),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            var(--jdr-navy-900),
            var(--jdr-navy-950)
        );
    color: #ffffff;
    box-shadow: var(--jdr-shadow-md);
}

.jdr-lead-story::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(7, 30, 35, 0.9),
            rgba(7, 30, 35, 0.42) 72%,
            rgba(7, 30, 35, 0.1)
        );
    content: "";
}

.jdr-lead-story__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.12);
    font-size: 3.7rem;
}

.jdr-lead-story__content {
    position: relative;
    z-index: 2;
    width: min(590px, 100%);
    padding: 25px 28px;
}

.jdr-lead-story__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
    color: #e2c77f;
    font-size: 0.61rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.jdr-lead-story__eyebrow::before {
    width: 24px;
    height: 3px;
    border-radius: var(--jdr-radius-pill);
    background: var(--jdr-orange-500);
    content: "";
}

.jdr-lead-story__title {
    max-width: 560px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.9rem, 3vw, 2.75rem);
    font-weight: 850;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.jdr-lead-story__summary {
    max-width: 510px;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.76rem;
    line-height: 1.45;
}

.jdr-lead-story__footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 13px;
}

.jdr-lead-story__meta {
    display: flex;
    gap: 14px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.61rem;
}

.jdr-lead-story__button {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-left: auto;
    padding-inline: 14px;
    border-radius: 9px;
    background:
        linear-gradient(
            135deg,
            var(--jdr-orange-400),
            var(--jdr-orange-600)
        );
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
}

/* =========================================================
   Próximo partido
   ========================================================= */

.jdr-match-card {
    min-width: 0;
    min-height: 260px;
    padding: 18px;
    border: 1px solid var(--jdr-border-soft);
    border-radius: var(--jdr-radius-md);
    background: var(--jdr-ivory);
    box-shadow: var(--jdr-shadow-sm);
}

.jdr-match-card__status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px;
    border-radius: var(--jdr-radius-pill);
    background: var(--jdr-orange-100);
    color: var(--jdr-orange-700);
    font-size: 0.56rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.jdr-match-card__status::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--jdr-orange-500);
    content: "";
}

.jdr-match-card__title {
    margin: 12px 0 0;
    color: var(--jdr-text-primary);
    font-size: 1.25rem;
    font-weight: 850;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.jdr-match-card__league {
    margin-top: 4px;
    color: var(--jdr-text-muted);
    font-size: 0.56rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.jdr-match-card__teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid var(--jdr-border-soft);
    border-radius: 9px;
    background: #ffffff;
}

.jdr-match-card__team {
    font-size: 0.67rem;
    font-weight: 850;
}

.jdr-match-card__team:last-child {
    text-align: right;
}

.jdr-match-card__versus {
    color: var(--jdr-red-500);
    font-size: 0.58rem;
    font-weight: 900;
    text-transform: uppercase;
}

.jdr-match-card__details {
    display: grid;
    gap: 6px;
    margin-top: 11px;
}

.jdr-match-card__detail {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--jdr-text-secondary);
    font-size: 0.62rem;
}

.jdr-match-card__detail i {
    width: 13px;
    color: var(--jdr-orange-700);
    text-align: center;
}

.jdr-match-card__actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px;
    margin-top: 12px;
}

.jdr-match-card__actions a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 10px;
    border-radius: 9px;
    font-size: 0.62rem;
    font-weight: 800;
}

.jdr-match-card__primary {
    background:
        linear-gradient(
            135deg,
            var(--jdr-orange-400),
            var(--jdr-orange-600)
        );
    color: #ffffff;
}

.jdr-match-card__secondary {
    border: 1px solid var(--jdr-border-medium);
    background: #ffffff;
    color: var(--jdr-text-primary);
}

/* =========================================================
   Banner vertical compacto
   ========================================================= */

.jdr-lead-promo {
    min-height: 260px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--jdr-border-soft);
    border-radius: var(--jdr-radius-md);
    background:
        linear-gradient(
            180deg,
            var(--jdr-navy-900),
            var(--jdr-navy-950)
        );
    color: #ffffff;
    box-shadow: var(--jdr-shadow-sm);
}

.jdr-lead-promo__content {
    display: flex;
    align-items: center;
    gap: 9px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.jdr-lead-promo__content i {
    color: var(--jdr-orange-400);
    font-size: 0.82rem;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 999px) {
    .jdr-lead-grid {
        grid-template-columns: minmax(0, 1fr) 270px;
    }

    .jdr-lead-promo {
        display: none;
    }
}

@media (max-width: 749px) {
    .jdr-lead-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .jdr-lead-story,
    .jdr-match-card {
        min-height: auto;
    }

    .jdr-lead-story {
        min-height: 245px;
    }
}

@media (max-width: 519px) {
    .jdr-lead-story__content {
        padding: 21px;
    }

    .jdr-lead-story__title {
        font-size: clamp(1.65rem, 9vw, 2.35rem);
    }

    .jdr-lead-story__summary {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .jdr-lead-story__button {
        margin-left: 0;
    }
}

/* =========================================================
   Lead grid states — v1.1.0
   Normal day + matchday
   ========================================================= */

/*
 * Día normal:
 * Historia amplia + partido + banner informativo.
 */

.jdr-lead-grid--normal {
    grid-template-columns:
        minmax(0, 1fr)
        292px
        96px;
    gap: 14px;
}

/*
 * La historia utiliza una imagen real a la izquierda.
 */

.jdr-lead-story {
    display: grid;
    grid-template-columns: minmax(200px, 38%) minmax(0, 1fr);
    align-items: stretch;
}

.jdr-lead-story::after {
    display: none;
}

.jdr-lead-story__media {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            rgba(13, 48, 56, 0.05),
            rgba(13, 48, 56, 0.32)
        ),
        #31565c;
}

.jdr-lead-story__media::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(13, 48, 56, 0.05),
            rgba(13, 48, 56, 0.38)
        );
    content: "";
}

.jdr-lead-story__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jdr-lead-story__media-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.28);
    font-size: 3rem;
}

.jdr-lead-story__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 26px;
    background:
        radial-gradient(
            circle at 92% 10%,
            rgba(96, 148, 154, 0.22),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            var(--jdr-navy-900),
            var(--jdr-navy-950)
        );
}

.jdr-lead-story__title {
    max-width: 480px;
    font-size: clamp(1.75rem, 2.45vw, 2.45rem);
}

.jdr-lead-story__summary {
    max-width: 470px;
}

.jdr-lead-story__footer {
    justify-content: space-between;
}

.jdr-lead-story__button {
    margin-left: 0;
}

/*
 * Banner derecho con ancho útil.
 * Puede informar sobre la próxima transmisión o una promoción propia.
 */

.jdr-lead-promo {
    min-width: 96px;
}

.jdr-lead-promo__content {
    gap: 12px;
    font-size: 0.61rem;
}

.jdr-lead-promo__label {
    color: rgba(255, 255, 255, 0.9);
}

.jdr-lead-promo__subline {
    color: var(--jdr-orange-400);
    font-size: 0.5rem;
}

/* =========================================================
   Día de partido
   ========================================================= */

/*
 * La historia y el partido conservan dos zonas internas,
 * pero se perciben como una sola pieza.
 */

.jdr-lead-grid--matchday {
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 14px;
}

.jdr-lead-grid--matchday .jdr-lead-story {
    grid-column: 1;
    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(270px, 0.7fr);
    min-height: 280px;
}

/*
 * En matchday, la tarjeta del partido se inserta dentro
 * del mismo bloque visual.
 */

.jdr-matchday-stage {
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 292px;
    border: 1px solid var(--jdr-border-soft);
    border-radius: var(--jdr-radius-md);
    box-shadow: var(--jdr-shadow-md);
}

.jdr-matchday-stage .jdr-lead-story {
    min-height: 280px;
    border-radius:
        var(--jdr-radius-md)
        0
        0
        var(--jdr-radius-md);
    box-shadow: none;
}

.jdr-matchday-stage .jdr-match-card {
    min-height: 280px;
    border: 0;
    border-left: 1px solid var(--jdr-border-soft);
    border-radius:
        0
        var(--jdr-radius-md)
        var(--jdr-radius-md)
        0;
    box-shadow: none;
}

/*
 * Patrocinador del evento.
 */

.jdr-sponsor-card {
    min-height: 280px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 16px 10px;
    border-radius: var(--jdr-radius-md);
    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(200, 154, 61, 0.18),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            var(--jdr-navy-900),
            var(--jdr-navy-950)
        );
    color: #ffffff;
    text-align: center;
    box-shadow: var(--jdr-shadow-sm);
}

.jdr-sponsor-card__eyebrow {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.jdr-sponsor-card__brand {
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
}

.jdr-sponsor-card__placeholder {
    width: 74px;
    min-height: 74px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--jdr-orange-400);
    font-size: 1.45rem;
}

/* =========================================================
   Responsive refinements
   ========================================================= */

@media (max-width: 1099px) {
    .jdr-lead-grid--normal {
        grid-template-columns: minmax(0, 1fr) 280px;
    }

    .jdr-lead-grid--normal .jdr-lead-promo {
        display: none;
    }

    .jdr-lead-grid--matchday {
        grid-template-columns: minmax(0, 1fr);
    }

    .jdr-lead-grid--matchday .jdr-sponsor-card {
        display: none;
    }
}

@media (max-width: 849px) {
    .jdr-lead-story {
        grid-template-columns: minmax(170px, 34%) minmax(0, 1fr);
    }

    .jdr-matchday-stage {
        grid-template-columns: minmax(0, 1fr);
    }

    .jdr-matchday-stage .jdr-lead-story {
        border-radius:
            var(--jdr-radius-md)
            var(--jdr-radius-md)
            0
            0;
    }

    .jdr-matchday-stage .jdr-match-card {
        border-top: 1px solid var(--jdr-border-soft);
        border-left: 0;
        border-radius:
            0
            0
            var(--jdr-radius-md)
            var(--jdr-radius-md);
    }
}

@media (max-width: 649px) {
    .jdr-lead-story {
        grid-template-columns: minmax(0, 1fr);
    }

    .jdr-lead-story__media {
        min-height: 185px;
    }

    .jdr-lead-story__content {
        padding: 22px;
    }
}

/* =========================================================
   Normal-day final lead proportions — v1.2.0
   Historia flexible + eCard compacta + banner respirado
   ========================================================= */

.jdr-lead-grid--normal {
    grid-template-columns:
        minmax(0, 1fr)
        238px
        146px;
    gap: 14px;
}

/* La eCard conserva toda su información en menos ancho. */

.jdr-lead-grid--normal .jdr-match-card {
    min-width: 0;
    padding: 15px;
}

.jdr-lead-grid--normal .jdr-match-card__status {
    padding: 5px 8px;
    font-size: 0.53rem;
}

.jdr-lead-grid--normal .jdr-match-card__title {
    margin-top: 10px;
    font-size: 1.08rem;
}

.jdr-lead-grid--normal .jdr-match-card__league {
    font-size: 0.53rem;
}

.jdr-lead-grid--normal .jdr-match-card__teams {
    gap: 6px;
    margin-top: 10px;
    padding: 9px 8px;
}

.jdr-lead-grid--normal .jdr-match-card__team {
    font-size: 0.63rem;
}

.jdr-lead-grid--normal .jdr-match-card__details {
    gap: 5px;
    margin-top: 10px;
}

.jdr-lead-grid--normal .jdr-match-card__detail {
    gap: 7px;
    font-size: 0.58rem;
}

.jdr-lead-grid--normal .jdr-match-card__actions {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    margin-top: 11px;
}

.jdr-lead-grid--normal .jdr-match-card__actions a {
    min-height: 33px;
    padding-inline: 8px;
    font-size: 0.59rem;
}

/* El banner deja de sentirse como una franja demasiado delgada. */

.jdr-lead-grid--normal .jdr-lead-promo {
    width: 100%;
    min-width: 0;
}

.jdr-lead-grid--normal .jdr-lead-promo__content {
    gap: 14px;
    font-size: 0.66rem;
}

.jdr-lead-grid--normal .jdr-lead-promo__content i {
    font-size: 1rem;
}

.jdr-lead-grid--normal .jdr-lead-promo__subline {
    font-size: 0.53rem;
}

/*
 * En pantallas donde las tres piezas ya no caben correctamente,
 * ocultamos primero el banner y conservamos historia + partido.
 */

@media (max-width: 1099px) {
    .jdr-lead-grid--normal {
        grid-template-columns:
            minmax(0, 1fr)
            238px;
    }

    .jdr-lead-grid--normal .jdr-lead-promo {
        display: none;
    }
}

/* =========================================================
   Normal-day match card vertical balance — v1.3.0
   ========================================================= */

.jdr-lead-grid--normal .jdr-match-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 16px;
}

/* Cabecera compacta */

.jdr-lead-grid--normal .jdr-match-card__status {
    align-self: flex-start;
}

.jdr-lead-grid--normal .jdr-match-card__title {
    margin-top: 12px;
    line-height: 1.05;
}

.jdr-lead-grid--normal .jdr-match-card__league {
    margin-top: 5px;
}

/* Enfrentamiento mejor separado del encabezado */

.jdr-lead-grid--normal .jdr-match-card__teams {
    margin-top: 15px;
}

/* Detalles con un poco más de respiración */

.jdr-lead-grid--normal .jdr-match-card__details {
    gap: 8px;
    margin-top: 14px;
}

/*
 * Los botones se apoyan en la parte inferior.
 * El espacio libre queda en el centro y se siente intencional,
 * no como un hueco olvidado debajo.
 */

.jdr-lead-grid--normal .jdr-match-card__actions {
    position: relative;
    margin-top: auto;
    padding-top: 16px;
}

.jdr-lead-grid--normal .jdr-match-card__actions::before {
    position: absolute;
    top: 7px;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--jdr-border-soft);
    content: "";
}

/* Botón principal con proporción menos pesada */

.jdr-lead-grid--normal .jdr-match-card__primary {
    min-width: 0;
}

.jdr-lead-grid--normal .jdr-match-card__secondary {
    white-space: nowrap;
}

/* =========================================================
   Normal-day lead final polish — v1.4.0
   ========================================================= */

/* Recuperar legibilidad dentro de la eCard compacta */

.jdr-lead-grid--normal .jdr-match-card__title {
    font-size: 1.14rem;
    line-height: 1.08;
}

.jdr-lead-grid--normal .jdr-match-card__league {
    font-size: 0.55rem;
}

.jdr-lead-grid--normal .jdr-match-card__team {
    font-size: 0.66rem;
}

.jdr-lead-grid--normal .jdr-match-card__detail {
    font-size: 0.6rem;
    line-height: 1.35;
}

/*
 * Mantener las acciones en la base, pero evitando que
 * la zona central se sienta exageradamente vacía.
 */

.jdr-lead-grid--normal .jdr-match-card__actions {
    margin-top: auto;
    padding-top: 13px;
}

.jdr-lead-grid--normal .jdr-match-card__actions::before {
    top: 5px;
}

/* Evitar que el estadio rompa la composición estrecha */

.jdr-lead-grid--normal .jdr-match-card__detail {
    min-width: 0;
}

.jdr-lead-grid--normal .jdr-match-card__detail span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Banner informativo con dos niveles claros */

.jdr-lead-grid--normal .jdr-lead-promo__label {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.66rem;
    line-height: 1.35;
}

.jdr-lead-grid--normal .jdr-lead-promo__subline {
    color: var(--jdr-orange-400);
    font-size: 0.54rem;
    font-weight: 850;
    letter-spacing: 0.09em;
}

/* Un poco menos de altura sin perder presencia */

.jdr-lead-grid--normal .jdr-lead-story,
.jdr-lead-grid--normal .jdr-match-card,
.jdr-lead-grid--normal .jdr-lead-promo {
    min-height: 250px;
}

/* =========================================================
   Definitive mobile stacking fix — v1.5.0
   Carrusel, partido y banner en filas independientes
   ========================================================= */

@media (max-width: 749px) {
    .jdr-lead-grid.jdr-lead-grid--normal {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 14px;
    }

    /* Carrusel editorial a todo el ancho */

    .jdr-lead-grid--normal .jdr-featured-carousel {
        width: 100%;
        min-width: 0;
        min-height: 0;
        grid-column: 1;
    }

    .jdr-lead-grid--normal
    .jdr-featured-carousel__viewport,
    .jdr-lead-grid--normal
    .jdr-featured-carousel__track,
    .jdr-lead-grid--normal
    .jdr-featured-carousel__slide {
        width: 100%;
        min-height: 0;
    }

    .jdr-lead-grid--normal
    .jdr-featured-carousel__slide
    .jdr-lead-story {
        width: 100%;
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    /* Imagen panorámica arriba */

    .jdr-lead-grid--normal .jdr-lead-story__media {
        width: 100%;
        min-height: 190px;
        aspect-ratio: 16 / 9;
    }

    /* Texto debajo de la imagen */

    .jdr-lead-grid--normal .jdr-lead-story__content {
        width: 100%;
        min-height: 0;
        padding: 22px;
    }

    .jdr-lead-grid--normal .jdr-lead-story__title {
        max-width: none;
        font-size: clamp(1.8rem, 8vw, 2.45rem);
        line-height: 1;
    }

    .jdr-lead-grid--normal .jdr-lead-story__summary {
        max-width: none;
    }

    /* Controles dentro de la zona de imagen */

    .jdr-lead-grid--normal .jdr-featured-carousel__controls {
        top: 144px;
        right: auto;
        bottom: auto;
        left: 16px;
    }

    .jdr-lead-grid--normal .jdr-featured-carousel__progress {
        top: 153px;
        right: 16px;
        bottom: auto;
    }

    /* eCard debajo del carrusel y con altura natural */

    .jdr-lead-grid--normal .jdr-match-card {
        width: 100%;
        min-width: 0;
        min-height: 0;
        height: auto;
        grid-column: 1;
        padding: 20px;
    }

    .jdr-lead-grid--normal .jdr-match-card__title {
        font-size: 1.35rem;
    }

    .jdr-lead-grid--normal .jdr-match-card__league {
        font-size: 0.62rem;
    }

    .jdr-lead-grid--normal .jdr-match-card__team {
        font-size: 0.75rem;
    }

    .jdr-lead-grid--normal .jdr-match-card__detail {
        font-size: 0.7rem;
    }

    /*
     * Ya no usamos margin-top:auto en móvil:
     * evita el enorme hueco entre detalles y botones.
     */

    .jdr-lead-grid--normal .jdr-match-card__actions {
        margin-top: 16px;
        padding-top: 14px;
    }

    /* Banner como franja horizontal debajo del partido */

    .jdr-lead-grid--normal .jdr-lead-promo {
        width: 100%;
        min-width: 0;
        min-height: 82px;
        display: flex;
        grid-column: 1;
    }

    .jdr-lead-grid--normal .jdr-lead-promo__content {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        writing-mode: horizontal-tb;
        transform: none;
        gap: 12px;
        padding: 18px;
    }

    .jdr-lead-grid--normal .jdr-lead-promo__label,
    .jdr-lead-grid--normal .jdr-lead-promo__subline {
        writing-mode: horizontal-tb;
    }
}

@media (max-width: 419px) {
    .jdr-lead-grid--normal .jdr-lead-story__media {
        min-height: 175px;
    }

    .jdr-lead-grid--normal .jdr-featured-carousel__controls {
        top: 130px;
    }

    .jdr-lead-grid--normal .jdr-featured-carousel__progress {
        top: 139px;
    }

    .jdr-lead-grid--normal .jdr-match-card__actions {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* =========================================================
   Próximo evento dinámico
   ========================================================= */

.jdr-match-card--event,
.jdr-match-card--empty {
    display: flex;
    flex-direction: column;
}

.jdr-match-card__event-date {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    margin-top: 14px;
}

.jdr-match-card__calendar {
    overflow: hidden;
    border: 1px solid var(--jdr-border-soft);
    border-radius: 11px;
    background: #ffffff;
    text-align: center;
}

.jdr-match-card__calendar span {
    display: block;
    padding: 5px 4px;
    background: var(--jdr-orange-500);
    color: #ffffff;
    font-size: 0.5rem;
    font-weight: 850;
    letter-spacing: 0.08em;
}

.jdr-match-card__calendar strong {
    display: block;
    padding: 7px 4px 8px;
    color: var(--jdr-text-primary);
    font-size: 1.3rem;
    line-height: 1;
}

.jdr-match-card__event-info {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.jdr-match-card__event-info span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--jdr-text-secondary);
    font-size: 0.59rem;
    line-height: 1.3;
}

.jdr-match-card__event-info i {
    width: 13px;
    color: var(--jdr-orange-700);
    text-align: center;
}

.jdr-match-card__empty-state {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--jdr-border-soft);
    border-radius: 11px;
    background: #ffffff;
}

.jdr-match-card__empty-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--jdr-orange-100);
    color: var(--jdr-orange-700);
}

.jdr-match-card__empty-state p {
    margin: 0;
    color: var(--jdr-text-secondary);
    font-size: 0.62rem;
    line-height: 1.45;
}

.jdr-match-card--empty .jdr-match-card__actions {
    grid-template-columns: 1fr;
    margin-top: 12px;
}

@media (max-width: 749px) {
    .jdr-match-card__event-date {
        grid-template-columns: 52px minmax(0, 1fr);
    }
}

/* ==========================================================
   Hero Inteligente
   ========================================================== */

.jdr-lead-grid:has(.jdr-featured-carousel--temporary)
>.jdr-featured-carousel--fallback{
    display:none;
}

.jdr-featured-carousel--temporary{
    width:100%;
    min-height:320px;
}

.jdr-featured-carousel--temporary
.jdr-lead-story{
    width:100%;
}

.jdr-lead-story__temporary-status{

    display:inline-flex;
    align-items:center;
    gap:6px;

    margin-bottom:10px;

    padding:6px 10px;

    border-radius:999px;

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:.62rem;

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;

}

.jdr-lead-story__temporary-status i{

    color:#ff8c1a;

}


/* =========================================================
   Smart Carousel V1 — implementación única
   ========================================================= */

.jdr-featured-carousel
.jdr-lead-story__temporary-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin: 0 0 9px;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(7, 30, 35, 0.58);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.jdr-featured-carousel
.jdr-lead-story__temporary-status i {
    color: var(--jdr-orange-400);
}

/* =========================================================
   JaimeDiaz.TV — Home Takeover V1
   Reemplaza carrusel + agenda + promoción
   ========================================================= */

.jdr-home-takeover {
    position: relative;
    isolation: isolate;

    grid-column: 1 / -1;

    min-width: 0;
    min-height: 420px;

    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(360px, 0.85fr);

    overflow: hidden;

    border: 1px solid rgba(16, 54, 62, 0.1);
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 26px 54px rgba(12, 47, 55, 0.13),
        0 6px 16px rgba(12, 47, 55, 0.06);
}

/*
 * Si existe Takeover, ocultar únicamente los tres bloques
 * tradicionales que son hermanos directos.
 */
.jdr-lead-grid:has(> .jdr-home-takeover)
> .jdr-featured-carousel,
.jdr-lead-grid:has(> .jdr-home-takeover)
> .jdr-match-card,
.jdr-lead-grid:has(> .jdr-home-takeover)
> .jdr-lead-promo {
    display: none !important;
}

.jdr-home-takeover__media {
    position: relative;
    min-width: 0;
    min-height: 420px;

    display: block;
    overflow: hidden;

    background: #102f38;
}

.jdr-home-takeover__image,
.jdr-home-takeover__media
> .jdr-lead-story__media-placeholder {
    width: 100%;
    height: 100%;
    min-height: 420px;
}

.jdr-home-takeover__image {
    display: block;

    object-fit: cover;
    object-position: center 35%;

    transition:
        transform 700ms cubic-bezier(.2,.75,.25,1);
}

.jdr-home-takeover:hover
.jdr-home-takeover__image {
    transform: scale(1.025);
}

.jdr-home-takeover__shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 31, 37, 0.08) 0%,
            rgba(5, 31, 37, 0) 58%
        ),
        linear-gradient(
            0deg,
            rgba(5, 31, 37, 0.25) 0%,
            rgba(5, 31, 37, 0) 45%
        );

    pointer-events: none;
}

.jdr-home-takeover__content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(32px, 4vw, 58px)
        clamp(30px, 4vw, 54px);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(244, 115, 33, 0.08),
            transparent 42%
        ),
        #ffffff;
}

.jdr-home-takeover__topline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;

    margin-bottom: 15px;
}

.jdr-home-takeover__category,
.jdr-home-takeover__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 27px;
    padding: 6px 9px;

    border-radius: 999px;

    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.jdr-home-takeover__category {
    background: rgba(244, 115, 33, 0.12);
    color: #b75213;
}

.jdr-home-takeover__status {
    border: 1px solid rgba(16, 54, 62, 0.12);
    background: #f7f9fc;
    color: #3e5964;
}

.jdr-home-takeover__status i {
    color: #f47321;
}

.jdr-home-takeover__title {
    max-width: 660px;
    margin: 0;

    color: #14243a;

    font-size: clamp(2.35rem, 4vw, 4.5rem);
    font-weight: 760;
    letter-spacing: -0.052em;
    line-height: 0.96;

    text-wrap: balance;
}

.jdr-home-takeover__title a {
    color: inherit;
    text-decoration: none;
}

.jdr-home-takeover__summary {
    max-width: 620px;
    margin: 20px 0 0;

    color: #667085;

    font-size: 0.9rem;
    line-height: 1.58;
}

.jdr-home-takeover__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-top: 27px;
}

.jdr-home-takeover__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 13px;

    color: #768792;

    font-size: 0.65rem;
}

.jdr-home-takeover__button {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 11px 16px;

    border-radius: 11px;

    background: #0d3b45;
    color: #ffffff;

    font-size: 0.68rem;
    font-weight: 800;
    text-decoration: none;

    transition:
        transform 160ms ease,
        background 160ms ease;
}

.jdr-home-takeover__button:hover {
    transform: translateY(-2px);
    background: #164d59;
}

@media (max-width: 980px) {
    .jdr-home-takeover {
        grid-template-columns: 1fr 0.82fr;
        min-height: 370px;
    }

    .jdr-home-takeover__media,
    .jdr-home-takeover__image,
    .jdr-home-takeover__media
    > .jdr-lead-story__media-placeholder {
        min-height: 370px;
    }

    .jdr-home-takeover__title {
        font-size: clamp(2rem, 4.5vw, 3.3rem);
    }
}

@media (max-width: 720px) {
    .jdr-home-takeover {
        min-height: 0;

        grid-template-columns: 1fr;

        border-radius: 16px;
    }

    .jdr-home-takeover__media {
        min-height: 220px;
        aspect-ratio: 16 / 10;
    }

    .jdr-home-takeover__image,
    .jdr-home-takeover__media
    > .jdr-lead-story__media-placeholder {
        min-height: 220px;
    }

    .jdr-home-takeover__content {
        padding: 22px 19px 21px;
    }

    .jdr-home-takeover__topline {
        margin-bottom: 11px;
    }

    .jdr-home-takeover__title {
        font-size: clamp(1.65rem, 8.4vw, 2.35rem);
        line-height: 1;
    }

    .jdr-home-takeover__summary {
        margin-top: 12px;

        display: -webkit-box;
        overflow: hidden;

        font-size: 0.72rem;
        line-height: 1.48;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .jdr-home-takeover__footer {
        align-items: flex-start;
        flex-direction: column;

        margin-top: 17px;
    }
}

/* =========================================================
   Home Takeover V1.1 — altura igual al carrusel
   ========================================================= */

@media (min-width: 721px) {

    /*
     * Misma altura visual del carrusel tradicional.
     */
    .jdr-home-takeover {
        height: 260px !important;
        min-height: 260px !important;

        grid-template-columns:
            minmax(0, 1.14fr)
            minmax(300px, 0.86fr);
    }

    .jdr-home-takeover__media {
        height: 260px !important;
        min-height: 260px !important;
    }

    .jdr-home-takeover__image,
    .jdr-home-takeover__media
    > .jdr-lead-story__media-placeholder {
        width: 100%;
        height: 260px !important;
        min-height: 260px !important;
    }

    /*
     * Contenido compacto para que nunca fuerce la altura.
     */
    .jdr-home-takeover__content {
        min-height: 0;
        overflow: hidden;

        justify-content: center;

        padding:
            22px
            clamp(25px, 3.2vw, 40px);
    }

    .jdr-home-takeover__topline {
        gap: 7px;
        margin-bottom: 9px;
    }

    .jdr-home-takeover__category,
    .jdr-home-takeover__status {
        min-height: 23px;
        padding: 5px 8px;

        font-size: 0.5rem;
    }

    .jdr-home-takeover__title {
        max-width: 540px;

        font-size: clamp(2rem, 3.15vw, 3.15rem);
        letter-spacing: -0.045em;
        line-height: 0.96;

        display: -webkit-box;
        overflow: hidden;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .jdr-home-takeover__summary {
        max-width: 530px;
        margin-top: 11px;

        font-size: 0.72rem;
        line-height: 1.46;

        display: -webkit-box;
        overflow: hidden;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .jdr-home-takeover__footer {
        gap: 14px;
        margin-top: 14px;
    }

    .jdr-home-takeover__meta {
        gap: 7px 11px;
        font-size: 0.57rem;
    }

    .jdr-home-takeover__button {
        min-height: 35px;
        padding: 8px 13px;

        border-radius: 9px;

        font-size: 0.6rem;
    }
}

/*
 * El breakpoint anterior de 980px establecía 370px.
 * Lo anulamos también para tablet horizontal.
 */
@media (min-width: 721px) and (max-width: 980px) {
    .jdr-home-takeover,
    .jdr-home-takeover__media,
    .jdr-home-takeover__image,
    .jdr-home-takeover__media
    > .jdr-lead-story__media-placeholder {
        height: 260px !important;
        min-height: 260px !important;
    }

    .jdr-home-takeover {
        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(280px, 0.95fr);
    }

    .jdr-home-takeover__title {
        font-size: clamp(1.8rem, 3.8vw, 2.6rem);
    }
}

/*
 * Placeholder editorial cuando la publicación no tiene imagen.
 * Ya no parece un bloque roto.
 */
.jdr-home-takeover__media
> .jdr-lead-story__media-placeholder {
    position: relative;
    isolation: isolate;

    display: grid;
    place-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 28% 26%,
            rgba(244, 115, 33, 0.18),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #123f49 0%,
            #0d333c 48%,
            #08272f 100%
        );
}

.jdr-home-takeover__media
> .jdr-lead-story__media-placeholder::before {
    content: "JD";

    position: absolute;

    display: grid;
    place-items: center;

    width: 78px;
    height: 78px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 22px;

    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);

    color: #e1ad3b;
    font-size: 1.35rem;
    font-weight: 850;
    letter-spacing: -0.04em;
}

.jdr-home-takeover__media
> .jdr-lead-story__media-placeholder i {
    display: none;
}

/*
 * Móvil conserva altura automática.
 */
@media (max-width: 720px) {
    .jdr-home-takeover {
        height: auto !important;
        min-height: 0 !important;
    }

    .jdr-home-takeover__media {
        height: auto !important;
        min-height: 190px !important;
        aspect-ratio: 16 / 10;
    }

    .jdr-home-takeover__image,
    .jdr-home-takeover__media
    > .jdr-lead-story__media-placeholder {
        height: 100% !important;
        min-height: 190px !important;
    }
}

/* =========================================================
   JaimeDiaz.TV — Editorial Takeover V2
   Opción A: imagen completa + contenido superpuesto
   ========================================================= */

section.jdr-lead-grid
> article.jdr-home-takeover--overlay {
    position: relative !important;
    isolation: isolate;

    grid-column: 1 / -1 !important;
    display: block !important;

    width: 100% !important;
    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;

    overflow: hidden !important;

    border: 0 !important;
    border-radius: 18px !important;

    background: #0b313a !important;

    box-shadow:
        0 22px 46px rgba(12, 47, 55, 0.14),
        0 5px 15px rgba(12, 47, 55, 0.07) !important;
}

/*
 * El Takeover sustituye los tres espacios superiores:
 * carrusel, próximo evento y promoción vertical.
 */
section.jdr-lead-grid:has(
    > article.jdr-home-takeover--overlay
)
> .jdr-featured-carousel,
section.jdr-lead-grid:has(
    > article.jdr-home-takeover--overlay
)
> .jdr-match-card,
section.jdr-lead-grid:has(
    > article.jdr-home-takeover--overlay
)
> .jdr-lead-promo {
    display: none !important;
}

/* ---------------------------------------------------------
   Imagen a pantalla completa
   --------------------------------------------------------- */

section.jdr-lead-grid
> article.jdr-home-takeover--overlay
> .jdr-home-takeover__media {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;

    display: block !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(244, 115, 33, 0.12),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #123f49,
            #082a32
        );
}

section.jdr-lead-grid
> article.jdr-home-takeover--overlay
.jdr-home-takeover__image,
section.jdr-lead-grid
> article.jdr-home-takeover--overlay
.jdr-lead-story__media-placeholder {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
}

section.jdr-lead-grid
> article.jdr-home-takeover--overlay
.jdr-home-takeover__image {
    object-fit: cover !important;
    object-position: 78% 34% !important;

    transform: scale(1.001);

    transition:
        transform 700ms cubic-bezier(.2,.75,.25,1);
}

section.jdr-lead-grid
> article.jdr-home-takeover--overlay:hover
.jdr-home-takeover__image {
    transform: scale(1.025);
}

/* ---------------------------------------------------------
   Degradado editorial
   --------------------------------------------------------- */

section.jdr-lead-grid
> article.jdr-home-takeover--overlay
.jdr-home-takeover__shade {
    position: absolute;
    inset: 0;
    z-index: 2;

    display: block;

    background:
        linear-gradient(
            90deg,
            rgba(4, 27, 33, 0.97) 0%,
            rgba(4, 27, 33, 0.91) 21%,
            rgba(4, 27, 33, 0.72) 40%,
            rgba(4, 27, 33, 0.34) 61%,
            rgba(4, 27, 33, 0.08) 80%,
            rgba(4, 27, 33, 0) 100%
        ),
        linear-gradient(
            0deg,
            rgba(2, 20, 25, 0.46) 0%,
            rgba(2, 20, 25, 0.04) 54%
        );

    pointer-events: none;
}

/* ---------------------------------------------------------
   Contenido superpuesto
   --------------------------------------------------------- */

section.jdr-lead-grid
> article.jdr-home-takeover--overlay
> .jdr-home-takeover__content {
    position: relative !important;
    z-index: 3;

    width: min(540px, 58%) !important;
    height: 260px !important;
    min-height: 0 !important;
    max-height: 260px !important;

    display: flex !important;
    flex-direction: column;
    justify-content: center;

    overflow: hidden !important;

    padding:
        22px
        34px !important;

    background: transparent !important;
}

/* Etiquetas */

.jdr-home-takeover--overlay
.jdr-home-takeover__topline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;

    margin: 0 0 8px !important;
}

.jdr-home-takeover--overlay
.jdr-home-takeover__category,
.jdr-home-takeover--overlay
.jdr-home-takeover__status {
    min-height: 22px;
    padding: 5px 8px;

    border-radius: 999px;

    font-size: 0.48rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.jdr-home-takeover--overlay
.jdr-home-takeover__category {
    border: 1px solid rgba(244, 115, 33, 0.34);
    background: rgba(244, 115, 33, 0.15);
    color: #ffc18f;
}

.jdr-home-takeover--overlay
.jdr-home-takeover__status {
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(5, 31, 37, 0.5);
    color: rgba(255, 255, 255, 0.83);
}

.jdr-home-takeover--overlay
.jdr-home-takeover__status i {
    color: #f7a85f;
}

/* Título */

.jdr-home-takeover--overlay
.jdr-home-takeover__title {
    width: 100%;
    max-width: 510px;

    margin: 0 !important;

    color: #ffffff !important;

    font-size: clamp(1.9rem, 3vw, 3rem) !important;
    font-weight: 770;
    letter-spacing: -0.048em;
    line-height: 0.96 !important;

    text-wrap: balance;

    display: -webkit-box;
    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.jdr-home-takeover--overlay
.jdr-home-takeover__title a {
    color: inherit !important;
    text-decoration: none;
}

/* Resumen */

.jdr-home-takeover--overlay
.jdr-home-takeover__summary {
    width: 100%;
    max-width: 500px;

    margin: 9px 0 0 !important;

    color: rgba(255, 255, 255, 0.72) !important;

    font-size: 0.66rem !important;
    line-height: 1.43 !important;

    display: -webkit-box;
    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Pie */

.jdr-home-takeover--overlay
.jdr-home-takeover__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;

    margin-top: 12px !important;
}

.jdr-home-takeover--overlay
.jdr-home-takeover__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 11px;

    color: rgba(255, 255, 255, 0.58) !important;

    font-size: 0.54rem !important;
}

.jdr-home-takeover--overlay
.jdr-home-takeover__button {
    min-height: 34px !important;

    padding: 8px 12px !important;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9px !important;

    background: rgba(255, 255, 255, 0.94) !important;
    color: #0d3b45 !important;

    font-size: 0.58rem !important;
    font-weight: 850;
    text-decoration: none;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);

    transition:
        transform 160ms ease,
        background 160ms ease;
}

.jdr-home-takeover--overlay
.jdr-home-takeover__button:hover {
    transform: translateY(-2px);
    background: #ffffff !important;
}

/* ---------------------------------------------------------
   Fallback sin imagen
   --------------------------------------------------------- */

.jdr-home-takeover--overlay
.jdr-lead-story__media-placeholder {
    position: relative;

    display: grid !important;
    place-items: center;

    background:
        radial-gradient(
            circle at 67% 28%,
            rgba(244, 115, 33, 0.16),
            transparent 29%
        ),
        linear-gradient(
            135deg,
            #164953,
            #082b33
        ) !important;
}

.jdr-home-takeover--overlay
.jdr-lead-story__media-placeholder::before {
    content: "JD";

    display: grid;
    place-items: center;

    width: 72px;
    height: 72px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 21px;

    background: rgba(255, 255, 255, 0.06);

    color: #e1ad3b;
    font-size: 1.25rem;
    font-weight: 850;

    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.jdr-home-takeover--overlay
.jdr-lead-story__media-placeholder i {
    display: none;
}

/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (min-width: 721px) and (max-width: 980px) {
    section.jdr-lead-grid
    > article.jdr-home-takeover--overlay
    > .jdr-home-takeover__content {
        width: 66% !important;
        padding-inline: 27px !important;
    }

    .jdr-home-takeover--overlay
    .jdr-home-takeover__title {
        font-size: clamp(1.75rem, 3.6vw, 2.55rem) !important;
    }
}

/* ---------------------------------------------------------
   Móvil
   --------------------------------------------------------- */

@media (max-width: 720px) {
    section.jdr-lead-grid
    > article.jdr-home-takeover--overlay {
        height: 320px !important;
        min-height: 320px !important;
        max-height: 320px !important;

        border-radius: 16px !important;
    }

    section.jdr-lead-grid
    > article.jdr-home-takeover--overlay
    > .jdr-home-takeover__media {
        height: 320px !important;
    }

    section.jdr-lead-grid
    > article.jdr-home-takeover--overlay
    > .jdr-home-takeover__content {
        width: 100% !important;
        height: 320px !important;
        max-height: 320px !important;

        justify-content: flex-end;

        padding:
            20px
            18px !important;
    }

    section.jdr-lead-grid
    > article.jdr-home-takeover--overlay
    .jdr-home-takeover__shade {
        background:
            linear-gradient(
                0deg,
                rgba(3, 25, 31, 0.98) 0%,
                rgba(3, 25, 31, 0.87) 31%,
                rgba(3, 25, 31, 0.46) 62%,
                rgba(3, 25, 31, 0.05) 100%
            );
    }

    .jdr-home-takeover--overlay
    .jdr-home-takeover__title {
        max-width: 94%;

        font-size: clamp(1.65rem, 8.2vw, 2.25rem) !important;
        line-height: 0.98 !important;
    }

    .jdr-home-takeover--overlay
    .jdr-home-takeover__summary {
        max-width: 94%;

        font-size: 0.64rem !important;

        -webkit-line-clamp: 2;
    }

    .jdr-home-takeover--overlay
    .jdr-home-takeover__footer {
        align-items: flex-start;
        flex-direction: column;

        margin-top: 10px !important;
    }

    .jdr-home-takeover--overlay
    .jdr-home-takeover__button {
        min-height: 32px !important;
    }
}

/* =========================================================
   Editorial Takeover V2.1 — enfoque visual a la derecha
   ========================================================= */

@media (min-width: 721px) {
    .jdr-home-takeover--overlay
    .jdr-home-takeover__image {
        object-position: 78% 34% !important;
    }
}

@media (max-width: 720px) {
    .jdr-home-takeover--overlay
    .jdr-home-takeover__image {
        object-position: 66% 35% !important;
    }
}

/* Takeover V2.2 — foco definitivo de la fotografía */
@media (min-width: 721px) {
    section.jdr-lead-grid
    > article.jdr-home-takeover--overlay
    .jdr-home-takeover__image {
        object-position: 78% 34% !important;
    }
}

@media (max-width: 720px) {
    section.jdr-lead-grid
    > article.jdr-home-takeover--overlay
    .jdr-home-takeover__image {
        object-position: 68% 34% !important;
    }
}

/* =========================================================
   JaimeDiaz.TV — Hero + Advertising Grid V1
   ========================================================= */

/*
 * El anuncio lateral solamente aparece cuando existe
 * un Takeover editorial activo.
 */
.jdr-hero-ad {
    display: none;
}

/* ---------------------------------------------------------
   Escritorio
   --------------------------------------------------------- */

@media (min-width: 981px) {

    /*
     * Takeover activo:
     * Hero flexible + anuncio fijo de 300px.
     */
    section.jdr-lead-grid:has(
        > article.jdr-home-takeover--overlay
    ) {
        grid-template-columns:
            minmax(0, 1fr)
            300px !important;

        grid-template-rows: 340px !important;

        align-items: stretch;
        gap: 18px;
    }

    section.jdr-lead-grid
    > article.jdr-home-takeover--overlay {
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: 100% !important;

        height: 340px !important;
        min-height: 340px !important;
        max-height: 340px !important;

        border-radius: 18px !important;
    }

    section.jdr-lead-grid
    > article.jdr-home-takeover--overlay
    > .jdr-home-takeover__media {
        height: 340px !important;
        min-height: 340px !important;
        max-height: 340px !important;
    }

    section.jdr-lead-grid
    > article.jdr-home-takeover--overlay
    .jdr-home-takeover__image,
    section.jdr-lead-grid
    > article.jdr-home-takeover--overlay
    .jdr-lead-story__media-placeholder {
        height: 340px !important;
        min-height: 340px !important;
        max-height: 340px !important;
    }

    section.jdr-lead-grid
    > article.jdr-home-takeover--overlay
    > .jdr-home-takeover__content {
        width: min(52%, 600px) !important;

        height: 340px !important;
        min-height: 0 !important;
        max-height: 340px !important;

        padding:
            28px
            34px !important;
    }

    /*
     * Mostrar el anuncio únicamente junto al Takeover.
     */
    section.jdr-lead-grid:has(
        > article.jdr-home-takeover--overlay
    )
    > .jdr-hero-ad {
        grid-column: 2;
        grid-row: 1;

        width: 300px;
        height: 340px;

        display: flex;
        align-items: center;
        justify-content: center;

        overflow: hidden;

        border: 1px solid rgba(16, 54, 62, 0.1);
        border-radius: 18px;

        background: #ffffff;

        box-shadow:
            0 18px 38px rgba(12, 47, 55, 0.1),
            0 4px 12px rgba(12, 47, 55, 0.05);
    }

    .jdr-hero-ad__placeholder {
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;

        padding: 22px;

        background:
            repeating-linear-gradient(
                -45deg,
                #ffffff,
                #ffffff 10px,
                #f7f9fc 10px,
                #f7f9fc 20px
            );

        color: #667085;
        text-align: center;
    }

    .jdr-hero-ad__label {
        color: #a0aab4;

        font-size: 0.56rem;
        font-weight: 850;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .jdr-hero-ad__type {
        color: #26384b;

        font-size: 0.85rem;
        font-weight: 800;
    }

    .jdr-hero-ad__size {
        color: #87939e;

        font-size: 0.62rem;
    }

    /*
     * Ajustes del contenido para los 340px disponibles.
     */
    .jdr-home-takeover--overlay
    .jdr-home-takeover__title {
        max-width: 560px !important;

        font-size: clamp(
            2.05rem,
            3.1vw,
            3.35rem
        ) !important;

        line-height: 0.96 !important;
    }

    .jdr-home-takeover--overlay
    .jdr-home-takeover__summary {
        max-width: 535px !important;
        margin-top: 12px !important;

        font-size: 0.72rem !important;
        line-height: 1.48 !important;

        -webkit-line-clamp: 3 !important;
    }

    .jdr-home-takeover--overlay
    .jdr-home-takeover__footer {
        margin-top: 16px !important;
    }
}

/* ---------------------------------------------------------
   Tablet
   El Takeover conserva todo el ancho y ocultamos publicidad.
   --------------------------------------------------------- */

@media (min-width: 721px) and (max-width: 980px) {

    .jdr-hero-ad {
        display: none !important;
    }

    section.jdr-lead-grid
    > article.jdr-home-takeover--overlay {
        grid-column: 1 / -1 !important;

        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
    }

    section.jdr-lead-grid
    > article.jdr-home-takeover--overlay
    > .jdr-home-takeover__media,
    section.jdr-lead-grid
    > article.jdr-home-takeover--overlay
    .jdr-home-takeover__image,
    section.jdr-lead-grid
    > article.jdr-home-takeover--overlay
    .jdr-lead-story__media-placeholder {
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
    }

    section.jdr-lead-grid
    > article.jdr-home-takeover--overlay
    > .jdr-home-takeover__content {
        height: 300px !important;
        max-height: 300px !important;
    }
}

/* ---------------------------------------------------------
   Móvil
   --------------------------------------------------------- */

@media (max-width: 720px) {
    .jdr-hero-ad {
        display: none !important;
    }
}

/* Ajuste temporal para probar esta fotografía */
@media (min-width: 981px) {
    .jdr-home-takeover--overlay
    .jdr-home-takeover__image {
        object-position: 68% 38% !important;
    }
}

/* =========================================================
   Takeover Smart Editorial Titles V1
   Ajuste automático según la longitud real del titular
   ========================================================= */

/*
 * Los titulares cortos conservan el impacto original.
 */

section.jdr-lead-grid
> article.jdr-home-takeover--overlay.is-title-short
.jdr-home-takeover__title {
    text-wrap: balance;
}

/*
 * Titulares de 37 a 64 caracteres.
 * Se muestran completos y normalmente ocupan 2 o 3 líneas.
 */

section.jdr-lead-grid
> article.jdr-home-takeover--overlay.is-title-medium
.jdr-home-takeover__title {
    width: 100%;
    max-width: 100% !important;

    font-size: clamp(
        2rem,
        2.25vw,
        2.5rem
    ) !important;

    letter-spacing: -0.035em !important;
    line-height: 1.02 !important;

    display: block !important;
    overflow: visible !important;

    text-wrap: balance;

    -webkit-box-orient: initial !important;
    -webkit-line-clamp: initial !important;
}

/*
 * Titulares de más de 64 caracteres.
 */

section.jdr-lead-grid
> article.jdr-home-takeover--overlay.is-title-long
.jdr-home-takeover__title {
    width: 100%;
    max-width: 100% !important;

    font-size: clamp(
        1.75rem,
        1.95vw,
        2.15rem
    ) !important;

    letter-spacing: -0.028em !important;
    line-height: 1.04 !important;

    display: -webkit-box !important;
    overflow: hidden !important;

    text-wrap: balance;

    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
}

section.jdr-lead-grid
> article.jdr-home-takeover--overlay.is-title-long
.jdr-home-takeover__summary {
    margin-top: 8px !important;
    -webkit-line-clamp: 2 !important;
}

/* Tablet */

@media (min-width: 721px) and (max-width: 980px) {
    section.jdr-lead-grid
    > article.jdr-home-takeover--overlay.is-title-medium
    .jdr-home-takeover__title {
        font-size: clamp(
            1.85rem,
            3.3vw,
            2.25rem
        ) !important;
    }

    section.jdr-lead-grid
    > article.jdr-home-takeover--overlay.is-title-long
    .jdr-home-takeover__title {
        font-size: clamp(
            1.65rem,
            2.9vw,
            1.95rem
        ) !important;
    }
}

/* Móvil */

@media (max-width: 720px) {
    section.jdr-lead-grid
    > article.jdr-home-takeover--overlay.is-title-medium
    .jdr-home-takeover__title {
        max-width: 100% !important;

        font-size: clamp(
            1.42rem,
            6.5vw,
            1.82rem
        ) !important;

        letter-spacing: -0.026em !important;
        line-height: 1.04 !important;
    }

    section.jdr-lead-grid
    > article.jdr-home-takeover--overlay.is-title-long
    .jdr-home-takeover__title {
        max-width: 100% !important;

        font-size: clamp(
            1.25rem,
            5.6vw,
            1.55rem
        ) !important;

        line-height: 1.05 !important;

        -webkit-line-clamp: 4 !important;
    }

    section.jdr-lead-grid
    > article.jdr-home-takeover--overlay.is-title-medium
    .jdr-home-takeover__summary,
    section.jdr-lead-grid
    > article.jdr-home-takeover--overlay.is-title-long
    .jdr-home-takeover__summary {
        margin-top: 8px !important;
        -webkit-line-clamp: 2 !important;
    }
}