/*
 * Bloque News.
 */
.okip-news {
    position: relative;
    z-index: var(--okip-news-z, 6);
    overflow: hidden;
    isolation: isolate;
    min-height: var(--okip-news-minh, 56vh);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--okip-news-pt, 3rem) 0 var(--okip-news-pb, 3.35rem);
    background: var(--okip-news-bg, var(--okip-color-surface-light));
    color: #0b111b;
    --okip-news-content-y: 0px;
    --okip-news-content-opacity: 1;
}

/* Cover-rise: News sigue subiendo como una hoja clara sobre Mission. */
.okip-news--cover {
    box-shadow: 0 -22px 50px rgba(0, 0, 0, .34);
}

/* Estado inicial de la seccion: la transicion existente controla el contenedor. */
.okip-js .okip-news--cover {
    --okip-news-content-y: 26px;
    --okip-news-content-opacity: 0;
}

.okip-news__viewport {
    position: relative;
    z-index: 2;
    width: 100%;
    overflow: visible;
    padding-inline: var(--okip-container-pad);
    opacity: var(--okip-news-content-opacity, 1);
    transform: translateY(var(--okip-news-content-y, 0));
    transform-origin: 50% 50%;
    will-change: opacity, transform;
}

.okip-news__track {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    grid-auto-rows: clamp(96px, 8.5vw, 132px);
    gap: var(--okip-news-gap, 8px);
    width: 100%;
    max-width: var(--okip-news-grid-max, 1120px);
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.okip-news__item {
    min-width: 0;
    display: flex;
}

/* Bento editorial (ref image.png): text (bloque de texto), feature (imagen
   grande con título debajo), wide (imagen ancha con título superpuesto), mini
   (imagen chica con título debajo). */
.okip-news__item--text {
    grid-column: span 6;
    grid-row: span 2;
}

.okip-news__item--feature {
    grid-column: span 6;
    grid-row: span 3;
}

.okip-news__item--wide {
    grid-column: span 6;
    grid-row: span 2;
}

.okip-news__item--mini {
    grid-column: span 3;
    grid-row: span 2;
}

/* Retrocompat: 'hero' (patrón viejo) se comporta como feature. */
.okip-news__item--hero {
    grid-column: span 6;
    grid-row: span 3;
}

.okip-news__item:only-child {
    grid-column: span 12;
    grid-row: span 3;
}

.okip-js .okip-news--cards-animated .okip-news__item {
    opacity: 0;
    transform: translate3d(0, var(--okip-news-card-offset, 22px), 0);
    transition:
        opacity var(--okip-news-card-duration, 620ms) var(--okip-ease),
        transform var(--okip-news-card-duration, 620ms) var(--okip-ease);
    transition-delay: var(--okip-news-card-delay, 0ms);
}

/* will-change solo mientras la tarjeta está pendiente de revelar; al añadir
   .is-card-revealed (IO, una vez) se suelta la capa GPU. */
.okip-js .okip-news--cards-animated .okip-news__item:not(.is-card-revealed) {
    will-change: opacity, transform;
}

.okip-js .okip-news--cards-animated .okip-news__item.is-card-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Tarjeta a sangre, sin marco gris: imagen redondeada + título debajo (editorial). */
.okip-news__card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    transition: transform .28s var(--okip-ease);
}

a.okip-news__card:hover,
a.okip-news__card:focus-visible {
    transform: translateY(-3px);
}

.okip-news__media {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border-radius: clamp(12px, 1.1vw, 18px);
    background: #d9dde0;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
    transition: box-shadow .28s var(--okip-ease);
}

a.okip-news__card:hover .okip-news__media,
a.okip-news__card:focus-visible .okip-news__media {
    box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
}

/* Tarjeta de solo texto (fondo gris claro, título grande, sin imagen). */
.okip-news__card--text .okip-news__text-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    height: 100%;
    padding: clamp(1.1rem, 1.6vw, 1.6rem);
    border-radius: clamp(12px, 1.1vw, 18px);
    background: #ececea;
}

.okip-news__card--text .okip-news__category {
    position: static;
}

.okip-news__card--text .okip-news__title {
    display: block;
    color: #0b111b;
    font-size: clamp(1.35rem, 2.1vw, 2.15rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.01em;
    text-transform: none;
    -webkit-line-clamp: none;
}

.okip-news__image,
.okip-news__placeholder {
    display: block;
    width: 100%;
    height: 100%;
}

.okip-news__image {
    object-fit: cover;
    transition:
        transform .55s var(--okip-ease),
        filter .55s var(--okip-ease);
}

.okip-news__placeholder {
    position: relative;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0)),
        #d8dbde;
}

.okip-news__placeholder-label {
    position: absolute;
    top: 50%;
    left: clamp(.8rem, 1.2vw, 1.1rem);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    padding: .32rem .64rem;
    transform: translateY(-50%);
    border: 1px solid rgba(18, 24, 32, .18);
    border-radius: 4px;
    background: rgba(255, 255, 255, .76);
    color: #303846;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Scrim inferior solo cuando el título va SUPERPUESTO (overlay), para legibilidad. */
.okip-news__card--overlay .okip-news__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(5, 10, 18, .72) 0%, rgba(5, 10, 18, .28) 28%, rgba(5, 10, 18, 0) 58%);
}

.okip-news__card:hover .okip-news__image,
.okip-news__card:focus-visible .okip-news__image {
    transform: scale(1.045);
    filter: saturate(1.08);
}

/* Chip claro (ref): badge redondeado + label uppercase sobre fondo frosted. */
.okip-news__category {
    position: absolute;
    top: clamp(.6rem, .9vw, .85rem);
    left: clamp(.6rem, .9vw, .85rem);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: calc(100% - 1.2rem);
    padding: .28rem .55rem .28rem .32rem;
    border-radius: 999px;
    background: rgba(248, 248, 247, .88);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .14);
}

.okip-news__category-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: clamp(1.15rem, 1.35vw, 1.45rem);
    height: clamp(1.15rem, 1.35vw, 1.45rem);
    border-radius: 5px;
    background: #202747;
    color: #fff;
}

.okip-news__item:nth-child(2n) .okip-news__category-icon {
    background: #3478f6;
}

.okip-news__item:nth-child(3n) .okip-news__category-icon {
    background: #7894b8;
}

.okip-news__category-icon svg {
    width: 64%;
    height: auto;
}

.okip-news__category-text {
    overflow: hidden;
    color: #3a4250;
    font-family: var(--okip-font-mono);
    font-size: clamp(.5rem, .54vw, .62rem);
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Título DEBAJO de la imagen: sentence-case, sans oscuro, sin caja (editorial). */
.okip-news__body {
    display: flex;
    align-items: flex-start;
    flex: 0 0 auto;
    padding: clamp(.55rem, .8vw, .8rem) .1rem .1rem;
    background: transparent;
}

.okip-news__title {
    display: -webkit-box;
    overflow: hidden;
    color: #0b111b;
    font-family: var(--okip-font-sans, inherit);
    font-size: clamp(.86rem, 1vw, 1.05rem);
    font-weight: 500;
    letter-spacing: -.005em;
    line-height: 1.24;
    text-transform: none;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.okip-news__item--feature .okip-news__title,
.okip-news__item--hero .okip-news__title {
    font-size: clamp(.98rem, 1.2vw, 1.3rem);
    font-weight: 600;
}

.okip-news__item--mini .okip-news__title {
    font-size: clamp(.8rem, .9vw, .98rem);
    -webkit-line-clamp: 3;
}

/* Título SUPERPUESTO (variante wide): blanco, abajo de la imagen sobre el scrim. */
.okip-news__title--overlay {
    position: absolute;
    left: clamp(1rem, 1.5vw, 1.5rem);
    right: clamp(1rem, 1.5vw, 1.5rem);
    bottom: clamp(.9rem, 1.4vw, 1.35rem);
    z-index: 2;
    color: #fff;
    font-weight: 600;
    font-size: clamp(1.05rem, 1.35vw, 1.5rem);
    line-height: 1.16;
    -webkit-line-clamp: 3;
}

.okip-news__controls {
    display: none;
}

@media (max-width: 1024px) and (min-width: 769px) {
    .okip-news__track {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-auto-rows: clamp(94px, 12vw, 128px);
    }

    .okip-news__item--text,
    .okip-news__item--mini {
        grid-column: span 3;
        grid-row: span 2;
    }

    .okip-news__item--feature,
    .okip-news__item--hero {
        grid-column: span 3;
        grid-row: span 3;
    }

    .okip-news__item--wide {
        grid-column: span 6;
        grid-row: span 2;
    }
}

@media (max-width: 768px) {
    .okip-news {
        min-height: max(34rem, calc(var(--okip-news-card-h, 430px) + 4rem));
        padding-top: 1rem;
        padding-bottom: 2rem;
    }

    .okip-news__viewport {
        overflow-x: auto;
        overflow-y: hidden;
        padding-inline: 0;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .okip-news__viewport::-webkit-scrollbar {
        display: none;
    }

    .okip-news__track {
        display: flex;
        gap: var(--okip-news-gap, 8px);
        width: max-content;
        min-width: 100%;
        max-width: none;
        margin: 0;
        padding: 0 var(--okip-container-pad);
    }

    .okip-news__item,
    .okip-news__item--text,
    .okip-news__item--feature,
    .okip-news__item--hero,
    .okip-news__item--wide,
    .okip-news__item--mini {
        flex: 0 0 var(--okip-news-card-w, min(82vw, 350px));
        display: flex;
        grid-column: auto;
        grid-row: auto;
        scroll-snap-align: center;
    }

    .okip-news__card {
        height: var(--okip-news-card-h, min(112vw, 430px));
    }

    .okip-news__card--text .okip-news__text-inner {
        padding: 1.25rem;
    }

    .okip-news__card--text .okip-news__title {
        font-size: clamp(1.5rem, 6.5vw, 2rem);
    }

    .okip-news__category-icon {
        width: 1.85rem;
        height: 1.85rem;
        border-radius: 7px;
    }

    .okip-news__category-text {
        font-size: .7rem;
    }

    .okip-news__body {
        flex-basis: auto;
        padding: .7rem .1rem .1rem;
    }

    .okip-news__title,
    .okip-news__item--hero .okip-news__title,
    .okip-news__item--feature .okip-news__title,
    .okip-news__item--mini .okip-news__title {
        font-size: clamp(1rem, 5vw, 1.35rem);
        -webkit-line-clamp: 3;
    }

    .okip-news__title--overlay {
        font-size: clamp(1.2rem, 6vw, 1.6rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .okip-news--cover {
        box-shadow: none;
    }

    .okip-news__viewport {
        opacity: 1;
        transform: none;
    }

    .okip-js .okip-news--cards-animated .okip-news__item {
        opacity: 1;
        transform: none;
    }

    .okip-news__image,
    .okip-news__card,
    .okip-news__media,
    .okip-news__item {
        transition: none;
    }
}