/* ==========================================================
   EMPRESA B / IMPACTO EN LA COMUNIDAD
   Estética editorial, limpia y minimalista.
   Bootstrap 5 compatible.
   ========================================================== */

.empresa-b-page,
.impacto-page {
    --eb-dark: #202925;
    --eb-green: #5b7662;
    --eb-light: #f5f6f4;
    --eb-border: #e1e5e1;
    --eb-text: #303833;
    color: var(--eb-text);
}

.section-space { padding: 84px 0; }

.empresa-b-hero {
    min-height: 500px;
    display: flex;
    align-items: center;
    background: var(--eb-dark);
    background-size: cover;
    background-position: center;
    color: #fff;
}

.empresa-b-hero-content { max-width: 760px; padding: 76px 0; }

.empresa-b-eyebrow, .section-heading > span {
    display: block;
    margin-bottom: 13px;
    font-size: .74rem;
    font-weight: 700;
    color: #7aba32;
    letter-spacing: .17em;
    text-transform: uppercase;
    opacity: .72;
}

.empresa-b-hero h1 {
    margin: 0;
    font-size: clamp(2.5rem, 5.8vw, 5rem);
    line-height: .98;
    font-weight: 700;
    letter-spacing: -.025em;
}

.section-heading h3 {
    margin: 0;
     line-height: 1.08;
    font-weight: 650;
    letter-spacing: -.02em;
    color:#144a22;
}
.empresa-b-hero p { max-width: 640px; margin: 18px 0 0; line-height: 1.7; }

.impacto-intro-grid {
    display: grid;
    grid-template-columns: minmax(260px, .85fr) minmax(300px, 1.15fr);
    gap: clamp(40px, 8vw, 110px);
    align-items: start;
}

.section-heading { max-width: 820px; margin-bottom: 42px; }
.section-heading.text-start { margin-bottom: 0; }
.section-heading h2 {
    margin: 0;
    font-size: clamp(2rem, 3.7vw, 3rem);
    line-height: 1.08;
    font-weight: 650;
    letter-spacing: -.02em;
}

.empresa-b-content { font-size: 1.04rem; line-height: 1.82; }
.empresa-b-content > *:last-child { margin-bottom: 0; }

.impacto-acciones {
    background: #1c4936;
}
.impacto-card {
    height: 100%;
    overflow: hidden;
    background: #08312b;
    border: 1px solid #10322c;
    border-radius: 2px;
    transition: transform .25s ease, box-shadow .25s ease;
}

.impacto-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(32,41,37,.07); }

.impacto-card-image { aspect-ratio: 4 / 3; overflow: hidden; background: #dfe4e0; }
.impacto-card-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .5s ease; }
.impacto-card:hover .impacto-card-image img { transform: scale(1.025); }

.impacto-card-body { padding: 28px 30px 32px; }
.impacto-card-body > span {
    display: block;
    margin-bottom: 11px;
    color: #4b7a59;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .14em;
}
.impacto-card h3 {
    margin-bottom: 13px;
    font-size: 1.4rem;
    line-height: 1.2;
    color: #fff;
}.impacto-card p {
    margin: 0;
    color: #c9c9c9;
    line-height: 1.68;
}/* ==========================================================
   GALERÍA EMPRESA B
   Full width / editorial / limpia
   ========================================================== */

   .empresa-b-gallery {
    width: 100%;
    margin-top: 70px;
    padding: 0 0 90px;
    background: #fff;
}


/* ----------------------------------------------------------
   TÍTULO
---------------------------------------------------------- */

.empresa-b-gallery .gallery-heading {
    margin-bottom: 38px;
}


/* ----------------------------------------------------------
   CONTENEDOR FULL WIDTH
---------------------------------------------------------- */

.empresa-b-gallery .container-fluid {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.empresa-b-gallery .gallery-heading-wrap {
    width: 100%;
}


/* ----------------------------------------------------------
   GRID
---------------------------------------------------------- */

.empresa-b-gallery-grid {

    width: 100%;

    display: grid;

    /*
     * Cuatro columnas.
     * Todos los espacios se completan.
     */
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;

    /*
     * No usamos grid-row span.
     * Esto evita definitivamente los huecos blancos.
     */
    grid-auto-flow: dense;

    align-items: stretch;
}


/* ----------------------------------------------------------
   ITEM BASE
---------------------------------------------------------- */

.empresa-b-gallery-item {

    position: relative;

    display: block;

    width: 100%;
    height: 310px;

    overflow: hidden;

    background: #f1f2f0;

    text-decoration: none;

    min-width: 0;
}


/* ----------------------------------------------------------
   TAMAÑOS

   2 + 1 + 1 = 4
   1 + 1 + 2 = 4

   Cada fila siempre completa.
---------------------------------------------------------- */


/* Imagen ancha */

.empresa-b-gallery-item:nth-child(6n + 1) {
    grid-column: span 2;
}


/* Imagen normal */

.empresa-b-gallery-item:nth-child(6n + 2) {
    grid-column: span 1;
}


/* Imagen normal */

.empresa-b-gallery-item:nth-child(6n + 3) {
    grid-column: span 1;
}


/* Imagen normal */

.empresa-b-gallery-item:nth-child(6n + 4) {
    grid-column: span 1;
}


/* Imagen normal */

.empresa-b-gallery-item:nth-child(6n + 5) {
    grid-column: span 1;
}


/* Imagen ancha */

.empresa-b-gallery-item:nth-child(6n + 6) {
    grid-column: span 2;
}


/* ----------------------------------------------------------
   IMAGEN
---------------------------------------------------------- */

.empresa-b-gallery-item img {

    display: block;

    width: 100%;
    height: 100%;

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

    transition:
        transform .45s cubic-bezier(.2,.65,.3,1),
        filter .3s ease;
}


/* ----------------------------------------------------------
   HOVER
---------------------------------------------------------- */

.empresa-b-gallery-item::after {

    content: "";

    position: absolute;

    inset: 0;

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

    opacity: 0;

    pointer-events: none;

    transition: opacity .3s ease;
}

.empresa-b-gallery-item:hover::after {
    opacity: 1;
}

.empresa-b-gallery-item:hover img {
    transform: scale(1.035);
}


/* ----------------------------------------------------------
   BOTÓN +
---------------------------------------------------------- */

.gallery-zoom {

    position: absolute;

    right: 15px;
    bottom: 15px;

    z-index: 5;

    width: 35px;
    height: 35px;

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

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

    color: #202925;

    font-size: 20px;
    font-weight: 300;

    line-height: 1;

    opacity: 0;

    transform: translateY(5px);

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.empresa-b-gallery-item:hover .gallery-zoom {

    opacity: 1;

    transform: translateY(0);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 991.98px) {

    .empresa-b-gallery {

        margin-top: 60px;

        padding-bottom: 75px;
    }

    .empresa-b-gallery-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;
    }

    /*
     * En tablet:
     *
     * 2 + 1
     * 1 + 2
     *
     * siempre completa el ancho.
     */

    .empresa-b-gallery-item {

        height: 280px;
    }

    .empresa-b-gallery-item:nth-child(4n + 1),
    .empresa-b-gallery-item:nth-child(4n + 4) {

        grid-column: span 2;
    }

    .empresa-b-gallery-item:nth-child(4n + 2),
    .empresa-b-gallery-item:nth-child(4n + 3) {

        grid-column: span 1;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

    .empresa-b-gallery {

        margin-top: 45px;

        padding-bottom: 60px;
    }

    .empresa-b-gallery-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 6px;
    }

    .empresa-b-gallery-item {

        height: 190px;
    }

    /*
     * Una grande + dos chicas.
     */

    .empresa-b-gallery-item:nth-child(3n + 1) {

        grid-column: span 2;

        height: 250px;
    }

    .empresa-b-gallery-item:nth-child(3n + 2),
    .empresa-b-gallery-item:nth-child(3n + 3) {

        grid-column: span 1;

        height: 190px;
    }

    .gallery-zoom {

        opacity: 1;

        transform: none;

        width: 30px;
        height: 30px;

        right: 9px;
        bottom: 9px;

        font-size: 17px;
    }
}


/* ==========================================================
   MOBILE PEQUEÑO
   ========================================================== */

@media (max-width: 480px) {

    .empresa-b-gallery-grid {

        gap: 5px;
    }

    .empresa-b-gallery-item {

        height: 160px;
    }

    .empresa-b-gallery-item:nth-child(3n + 1) {

        height: 210px;
    }

    .empresa-b-gallery-item:nth-child(3n + 2),
    .empresa-b-gallery-item:nth-child(3n + 3) {

        height: 160px;
    }

    .gallery-zoom {
        display: none;
    }
}


/* ==========================================================
   ACCESIBILIDAD
   ========================================================== */

.empresa-b-gallery-item:focus-visible {

    outline: 2px solid #202925;

    outline-offset: 3px;
}


/* ==========================================================
   REDUCIR ANIMACIONES
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .empresa-b-gallery-item img,
    .empresa-b-gallery-item::after,
    .gallery-zoom {

        transition: none;
    }
}

/* ==========================================================
   LIGHTBOX
   ========================================================== */
body.empresa-b-lightbox-open { overflow: hidden; }

.empresa-b-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 45px 75px;
    background: rgba(14,18,16,.95);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
}
.empresa-b-lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.empresa-b-lightbox-content { max-width: 92vw; max-height: 88vh; text-align: center; }
.empresa-b-lightbox-content img { display: block; max-width: 92vw; max-height: 82vh; width: auto; height: auto; margin: auto; object-fit: contain; }
.empresa-b-lightbox-counter { margin-top: 12px; color: rgba(255,255,255,.65); font-size: .78rem; letter-spacing: .08em; }

.empresa-b-lightbox-close,
.empresa-b-lightbox-prev,
.empresa-b-lightbox-next {
    position: fixed;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.empresa-b-lightbox-close:hover,
.empresa-b-lightbox-prev:hover,
.empresa-b-lightbox-next:hover { background: rgba(255,255,255,.18); }
.empresa-b-lightbox-close { top: 22px; right: 24px; font-size: 32px; font-weight: 300; }
.empresa-b-lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); font-size: 21px; }
.empresa-b-lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); font-size: 21px; }
.empresa-b-lightbox-prev:hover,
.empresa-b-lightbox-next:hover { transform: translateY(-50%) scale(1.04); }

@media (max-width: 991.98px) {
    .impacto-intro-grid { grid-template-columns: 1fr; gap: 28px; }
    .empresa-b-gallery-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 180px; }
    .gallery-size-1, .gallery-size-4 { grid-column: span 3; grid-row: span 2; }
    .gallery-size-2, .gallery-size-6 { grid-column: span 3; grid-row: span 1; }
    .gallery-size-3, .gallery-size-5, .gallery-size-7 { grid-column: span 3; grid-row: span 1; }
}

@media (max-width: 767.98px) {
    .section-space { padding: 64px 0; }
    .empresa-b-hero { min-height: 430px; }
    .empresa-b-hero-content { padding: 60px 0; }
    .empresa-b-gallery { padding-bottom: 70px; }
    .empresa-b-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 5px; }
    .gallery-size-1, .gallery-size-4, .gallery-size-7 { grid-column: span 2; grid-row: span 2; }
    .gallery-size-2, .gallery-size-3, .gallery-size-5, .gallery-size-6 { grid-column: span 1; grid-row: span 1; }
    .gallery-zoom { opacity: 1; transform: none; width: 30px; height: 30px; right: 10px; bottom: 10px; }
    .empresa-b-lightbox { padding: 50px 12px 28px; }
    .empresa-b-lightbox-content img { max-width: 96vw; max-height: 76vh; }
    .empresa-b-lightbox-prev { left: 8px; }
    .empresa-b-lightbox-next { right: 8px; }
}