/* Landing features bento (from landing.css) */
/* —— Features Bento —— */
.landing-bento {
    padding: 48px 24px 40px;
}

.landing-bento__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.landing-bento__header,
.landing-bento__section-head {
    max-width: 720px;
    margin: 0 auto 40px;
    text-align: center;
}

.landing-bento__eyebrow {
    /* size/weight from landing-type.css */
}

.landing-bento__title {
    /* size from landing-type.css */
}

.landing-bento__lead {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--rtp-brand-muted);
}

/*
 * Bento grid — 12 columnas en desktop:
 *   lg-1: columnas 1–8, 2 filas  |  md-1: columnas 9–12, fila 1
 *   md-2: columnas 9–12, fila 2  |  lg-2: ancho completo, fila 3
 * Cada tarjeta: foto a sangre + texto sobre degradé.
 */
.landing-bento__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    gap: 18px;
    align-items: stretch;
}

.landing-bento__card {
    position: relative;
    display: grid;
    grid-template: 1fr / 1fr;
    min-height: 300px;
    padding: 0;
    border-radius: 12px;
    background: var(--rtp-bg-panel);
    border: 1px solid color-mix(in srgb, var(--rtp-border) 90%, var(--rtp-brand-primary) 10%);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.landing-bento__card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--rtp-brand-primary) 35%, var(--rtp-border));
    box-shadow: 0 8px 24px rgba(255, 69, 0, 0.15);
}

.landing-bento__card--lg-1 {
    grid-column: 1 / span 8;
    grid-row: 1 / span 2;
}

.landing-bento__card--md-1 {
    grid-column: 9 / span 4;
    grid-row: 1;
}

.landing-bento__card--md-2 {
    grid-column: 9 / span 4;
    grid-row: 2;
}

.landing-bento__card--lg-2 {
    grid-column: 1 / -1;
    grid-row: 3;
    min-height: 340px;
}

.landing-bento__media,
.landing-bento__copy {
    grid-area: 1 / 1;
    min-width: 0;
}

.landing-bento__media {
    position: absolute;
    inset: 0;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
}

.landing-bento__media-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
}

.landing-bento__card--lg-1 .landing-bento__media-img {
    object-position: center 18%;
}

.landing-bento__card--md-2 .landing-bento__media-img {
    object-position: center 22%;
}

.landing-bento__card--lg-2 .landing-bento__media-img {
    object-position: center 32%;
}

.landing-bento__copy {
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 8px;
    box-sizing: border-box;
    min-height: 300px;
    padding: 96px 20px 20px;
    background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0) 0%,
        rgba(15, 23, 42, 0.12) 34%,
        rgba(15, 23, 42, 0.84) 62%,
        rgba(15, 23, 42, 0.94) 100%
    );
}

.landing-bento__copy .landing-bento__card-title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.2rem, 2vw, 1.45rem);
}

.landing-bento__copy .landing-bento__card-text {
    max-width: none;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: color-mix(in srgb, #fff 88%, var(--rtp-brand-muted));
}

.landing-bento__pwa-icon {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
}

.landing-bento__install-icon {
    flex-shrink: 0;
    display: block;
}

.landing-bento__tag {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rtp-brand-primary);
    background: color-mix(in srgb, var(--rtp-brand-primary) 16%, rgba(15, 23, 42, 0.55));
    border: 1px solid color-mix(in srgb, var(--rtp-brand-primary) 40%, transparent);
}

.landing-bento__card-title {
    margin: 0;
    /* size/weight from landing-type.css */
}

.landing-bento__card-text {
    margin: 0;
    max-width: 62ch;
}

@media (min-width: 961px) {
    .landing-bento__card--lg-1,
    .landing-bento__card--lg-2,
    .landing-bento__card--lg-1 .landing-bento__copy,
    .landing-bento__card--lg-2 .landing-bento__copy {
        min-height: 340px;
    }

    .landing-bento__card--md-1,
    .landing-bento__card--md-2,
    .landing-bento__card--md-1 .landing-bento__copy,
    .landing-bento__card--md-2 .landing-bento__copy {
        min-height: 320px;
    }

    .landing-bento__card--lg-1 .landing-bento__copy {
        justify-content: flex-end;
        padding: 140px 28px 24px;
        background: linear-gradient(
            180deg,
            rgba(15, 23, 42, 0) 0%,
            rgba(15, 23, 42, 0) 46%,
            rgba(15, 23, 42, 0.72) 72%,
            rgba(15, 23, 42, 0.94) 100%
        );
    }

    .landing-bento__card--lg-2 .landing-bento__copy {
        justify-content: center;
        padding: 40px 40px 40px 36px;
        background: linear-gradient(
            90deg,
            rgba(15, 23, 42, 0.94) 0%,
            rgba(15, 23, 42, 0.86) 34%,
            rgba(15, 23, 42, 0.35) 58%,
            rgba(15, 23, 42, 0.05) 100%
        );
    }

    .landing-bento__card--lg-1 .landing-bento__card-title,
    .landing-bento__card--lg-2 .landing-bento__card-title {
        max-width: 18ch;
        font-size: clamp(1.7rem, 2.8vw, 2.2rem);
    }

    .landing-bento__card--lg-1 .landing-bento__card-text {
        max-width: 40rem;
        font-size: 1.0625rem;
        line-height: 1.5;
    }

    .landing-bento__card--lg-2 .landing-bento__card-text {
        max-width: 34rem;
        font-size: 1.0625rem;
        line-height: 1.5;
    }

    .landing-bento__card--lg-2 .landing-bento__media-img {
        object-position: 70% center;
    }
}

@media (max-width: 960px) {
    .landing-bento__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
    }

    .landing-bento__card--lg-1,
    .landing-bento__card--md-1,
    .landing-bento__card--md-2,
    .landing-bento__card--lg-2 {
        grid-column: auto;
        grid-row: auto;
    }

    .landing-bento__card--lg-1,
    .landing-bento__card--lg-2 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .landing-bento {
        padding: 36px 16px 32px;
    }

    .landing-bento__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .landing-bento__card,
    .landing-bento__copy {
        min-height: 280px;
    }

    .landing-bento__copy {
        padding: 88px 16px 16px;
    }
}

@media (max-width: 480px) {
    .landing-bento__copy .landing-bento__card-title {
        font-size: 1.2rem;
    }

    .landing-bento__copy .landing-bento__card-text {
        font-size: 0.875rem;
    }
}