/**
 * Compensaciones y Obras — integración Fundos Forestación (franja + temas).
 */

.comp-ff-integracion {
    --comp-ff-emerald: #00927a;
    --comp-ff-deep: #006854;
    --comp-ff-bright: #00cc8d;
}

.comp-ff-integracion__franja-wrap .home-ff-franja--comp {
    border-radius: 0.5rem;
    overflow: hidden;
}

.comp-ff-zona--link {
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.comp-ff-zona--link:hover,
.comp-ff-zona--link:focus-visible {
    box-shadow: 0 0.5rem 1.25rem rgba(0, 64, 52, 0.18) !important;
    transform: translateY(-2px);
}

.comp-ff-zona--link:focus-visible {
    outline: 2px solid var(--comp-ff-bright);
    outline-offset: 3px;
}

.comp-ff-zona--link:hover .comp-ff-zona__img,
.comp-ff-zona--link:focus-visible .comp-ff-zona__img {
    transform: scale(1.04);
}

.comp-ff-integracion__franja-wrap .home-ff-franja--title-only .home-ff-franja__panel:hover img {
    transform: none;
}

@media (min-width: 992px) {
    .comp-ff-integracion__franja-wrap .home-ff-franja--title-only .home-ff-franja__panels:has(.home-ff-franja__panel:hover) .home-ff-franja__panel,
    .comp-ff-integracion__franja-wrap .home-ff-franja--title-only .home-ff-franja__panels .home-ff-franja__panel:hover {
        flex: 1 1 50%;
    }
}

.comp-ff-integracion__franja-wrap .home-ff-franja--comp .home-ff-franja__link {
    height: clamp(120px, 16vh, 160px);
}

.comp-ff-integracion__franja-wrap .home-ff-franja--title-only .home-ff-franja__title {
    font-size: clamp(1.35rem, 3.5vw, 1.85rem);
}

.comp-ff-integracion__franja-wrap .home-ff-franja--title-only .home-ff-franja__title-wrap {
    transform: translate(-50%, -50%);
}

.comp-ff-zona__media {
    aspect-ratio: 16 / 9;
    max-height: 12rem;
    overflow: hidden;
}

.comp-ff-zona__img {
    height: 100%;
    min-height: 10rem;
    transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}

.comp-ff-zona__media-badge {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0, 64, 52, 0.82);
    border-radius: 0.25rem;
}

.comp-ff-temas__item {
    border-left: 3px solid var(--comp-ff-bright);
    padding-left: 0.85rem;
    margin-bottom: 0.85rem;
}

.comp-ff-temas__item:last-child {
    margin-bottom: 0;
}

.comp-ff-temas__label {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    color: var(--comp-ff-deep);
}

.comp-ff-temas__excerpt {
    display: block;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--bs-secondary-color);
}