:root {
    --brand-primary: #028638;
    --brand-primary-dark: #147B39;
    --brand-primary-mid: #23894C;
    --brand-mint: #B4E5CA;
    --brand-mint-soft: #99D0AF;
    --brand-red: #F10706;
    --brand-warm: #F7FAF8;
    --brand-black: #0B0B0B;
    /* Alias de marca para componentes CBIM */
    --cbim-green: var(--brand-primary);
    --cbim-red: var(--brand-red);
}

body {
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    color: var(--brand-black);
    background: var(--brand-warm);
}

.fw-800 {
    font-weight: 800;
}

.text-primary {
    color: var(--brand-primary) !important;
}

.btn-primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}

    .btn-primary:hover {
        background: var(--brand-primary-dark);
        border-color: var(--brand-primary-dark);
    }

.btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

    .btn-outline-primary:hover {
        background: var(--brand-mint);
        border-color: var(--brand-primary);
    }

.border-top, .border-bottom {
    border-color: var(--brand-mint-soft) !important;
}

.badge.bg-primary-soft {
    background: var(--brand-primary-mid);
}

.navbar {
    border-color: var(--brand-mint-soft) !important;
}

    .navbar .btn {
        border-radius: 12px;
    }

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 2px solid var(--brand-primary);
    color: var(--brand-red);
    font-weight: 800;
}

.hero {
    background: linear-gradient(120deg, rgba(2,134,56,.6), rgba(0,0,0,.5)), url('/content/img/hero.jpg') center/cover no-repeat;
}

.hero-inner {
    background: linear-gradient(120deg, rgba(2,134,56,.8), rgba(0,0,0,.5));
}

.breadcrumb-light .breadcrumb-item, .breadcrumb-light .breadcrumb-item a {
    color: #fff;
}

.kpi {
    border: 1px solid var(--brand-mint-soft);
    border-radius: 16px;
    padding: 16px;
}

.kpi-title {
    color: var(--brand-primary);
    font-weight: 700;
}

.kpi-desc {
    font-size: .9rem;
    opacity: .8;
}

.card-specialty .icon-placeholder {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--brand-mint);
}

.band-donate {
    background: linear-gradient(90deg, var(--brand-mint), #fff);
}

:focus {
    outline: 2px solid var(--brand-mint-soft);
    outline-offset: 2px;
}

/* ==========================
   HEADER / BRAND
   ========================== */

.cbim-navbar .cbim-brand {
    text-decoration: none;
}

.cbim-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Logo: más sobrio en desktop */
.cbim-brand-logo {
    width: 88px;
    height: 88px;
    object-fit: contain;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, .10);
    box-shadow: 0 6px 18px rgba(16,24,40,.08);
}

/* Texto: desktop alineado a la izquierda */
.cbim-brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.1;
}

/* Jerarquía tipográfica */
.cbim-brand-company {
    color: var(--cbim-green);
    font-weight: 800;
    font-size: 17px; /* más grande */
    letter-spacing: .2px;
}

.cbim-brand-motto {
    color: var(--cbim-red);
    font-weight: 700;
    font-size: 14px; /* más pequeño */
    letter-spacing: .2px;
}

.cbim-brand-subtitle {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: rgba(16,24,40,.70);
}

/* Botones header */
.cbim-btn-primary {
    border-radius: 999px;
    padding: 8px 14px;
}

.cbim-btn-outline {
    border-radius: 999px;
    padding: 8px 14px;
}

.cbim-btn-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    vertical-align: middle;
}

/* ==========================
   NAV MENU (hover verde + subrayado rojo)
   ========================== */

.cbim-nav .nav-link {
    position: relative;
    font-weight: 600;
    color: rgba(16,24,40,.78);
    padding: .5rem .75rem;
    transition: color .18s ease;
}

    .cbim-nav .nav-link::after {
        content: "";
        position: absolute;
        left: .75rem;
        right: .75rem;
        bottom: .25rem;
        height: 2px;
        background: var(--cbim-red);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .18s ease;
    }

    .cbim-nav .nav-link:hover {
        color: var(--cbim-green);
    }

        .cbim-nav .nav-link:hover::after {
            transform: scaleX(1);
        }

    .cbim-nav .nav-link.active {
        color: var(--cbim-green);
    }

        .cbim-nav .nav-link.active::after {
            transform: scaleX(1);
        }

/* ==========================
   MOBILE: brand centrado real + toggler derecha
   ========================== */
@media (max-width: 991.98px) {

    /* Layout 3 columnas: logo | texto | toggler */
    .cbim-topbar {
        display: grid;
        grid-template-columns: 56px 1fr 56px;
        align-items: center;
        width: 100%;
        padding: .45rem 0;
        column-gap: 6px;
    }

    /* Columna logo */
    .cbim-mobile-logo {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-decoration: none;
    }

    .cbim-brand-logo--mobile {
        width: 66px;
        height: 66px;
    }

    /* Columna texto centrado */
    .cbim-mobile-title {
        display: block;
        text-decoration: none;
    }

    .cbim-brand-text--mobile {
        align-items: center;
        text-align: center;
    }

    /* Columna toggler derecha + líneas centradas */
    .cbim-toggler {
        justify-self: end;
        width: 48px;
        height: 44px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        /* Centrar el icono (líneas) dentro del botón */
        .cbim-toggler .navbar-toggler-icon {
            background-position: center;
            background-size: 22px 22px;
        }
    /* Menú móvil: alineación a la derecha */
    #mainNav {
        text-align: right;
    }

    .cbim-nav {
        align-items: flex-end;
    }

    /* Acciones (Hazte socio + Contacto) en una fila, no apiladas */
    .cbim-nav-actions {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        width: 100%;
        margin-top: .75rem;
    }

        .cbim-nav-actions .btn {
            width: auto;
            min-height: 44px;
            padding: .65rem 1rem;
            border-radius: 999px;
            white-space: nowrap;
        }
}
/* ===============================
   HERO institucional (Index)
   =============================== */

.cbim-hero {
    position: relative;
}

.cbim-hero-carousel {
    border-bottom: 1px solid rgba(16,24,40,.08);
}

.cbim-hero-slide {
    position: relative;
    min-height: 520px;
}

@media (max-width: 991.98px) {
    .cbim-hero-slide {
        min-height: 520px;
    }
}

@media (max-width: 575.98px) {
    .cbim-hero-slide {
        min-height: 560px;
    }
}

.cbim-hero-media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.03);
    transition: transform 1200ms ease;
}

.carousel-item.active .cbim-hero-media {
    transform: scale(1.0);
}

/* Overlay variantes */
.cbim-hero-overlay {
    position: absolute;
    inset: 0;
}

.cbim-hero-overlay--primary {
    background: linear-gradient(90deg, rgba(9,74,36,.82), rgba(9,74,36,.55) 55%, rgba(9,74,36,.15));
}

.cbim-hero-overlay--deep {
    background: linear-gradient(90deg, rgba(7,48,28,.88), rgba(7,48,28,.58) 55%, rgba(7,48,28,.18));
}

.cbim-hero-overlay--soft {
    background: linear-gradient(90deg, rgba(9,74,36,.68), rgba(9,74,36,.40) 55%, rgba(9,74,36,.12));
}

.cbim-hero-overlay--heritage {
    background: linear-gradient(90deg, rgba(9,74,36,.78), rgba(9,74,36,.50) 55%, rgba(9,74,36,.14));
}

/* Contenido */
.cbim-hero-content {
    position: relative;
    z-index: 2;
    padding-top: 90px;
    padding-bottom: 70px;
}

.cbim-hero-card {
    color: #fff;
    max-width: 720px;
}

.cbim-hero-eyebrow {
    display: inline-flex;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);
    margin-bottom: 14px;
}

.cbim-hero-title {
    font-weight: 800;
    font-size: 44px;
    line-height: 1.05;
    margin: 0 0 12px 0;
}

.cbim-hero-subtitle {
    font-weight: 700;
    font-size: 16px;
    opacity: .95;
    margin-bottom: 12px;
}

.cbim-hero-desc {
    font-size: 16px;
    line-height: 1.55;
    opacity: .95;
    margin-bottom: 20px;
}

.cbim-hero-cta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cbim-btn-ghost {
    border-color: rgba(255,255,255,.55);
    color: #fff;
}

    .cbim-btn-ghost:hover {
        border-color: rgba(255,255,255,.85);
        color: #fff;
    }

/* Responsive */
@media (max-width: 991.98px) {
    .cbim-hero-content {
        padding-top: 74px;
        padding-bottom: 62px;
    }

    .cbim-hero-title {
        font-size: 36px;
    }
}

@media (max-width: 575.98px) {
    .cbim-hero-title {
        font-size: 30px;
    }

    .cbim-hero-desc {
        font-size: 15px;
    }
}

/* Indicadores/controles */
.cbim-hero-carousel .carousel-control-prev-icon,
.cbim-hero-carousel .carousel-control-next-icon {
    filter: drop-shadow(0 2px 10px rgba(0,0,0,.25));
    opacity: .9;
}

.cbim-hero-carousel .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    opacity: .55;
}

.cbim-hero-carousel .carousel-indicators .active {
    opacity: 1;
}
/* ===============================
   IDENTIDAD RÁPIDA (Home)
   =============================== */

.cbim-quickfacts {
    padding: 26px 0 10px 0;
    background: #fff;
}

.cbim-quickfacts-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    transform: translateY(-28px); /* “flota” sobre el hero como Fruitkha */
}

.cbim-qf-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 16px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(16,24,40,.10);
    box-shadow: 0 10px 22px rgba(16,24,40,.06);
}

.cbim-qf-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cbim-green, #0a7a3a);
    background: rgba(10,122,58,.10);
    border: 1px solid rgba(10,122,58,.18);
    flex: 0 0 auto;
}

.cbim-qf-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(16,24,40,.75);
    margin-bottom: 4px;
}

.cbim-qf-value {
    font-size: 16px;
    font-weight: 800;
    color: rgba(16,24,40,.95);
    line-height: 1.25;
    margin-bottom: 4px;
}

.cbim-qf-meta {
    font-size: 13px;
    color: rgba(16,24,40,.68);
    line-height: 1.35;
}

/* Responsive */
@media (max-width: 991.98px) {
    .cbim-quickfacts-wrap {
        grid-template-columns: 1fr;
        transform: translateY(-18px);
    }

    .cbim-qf-card {
        padding: 14px 14px;
    }
}
/* Media dentro de quick facts */
.cbim-qf-card--media {
    flex-direction: column;
}

.cbim-qf-top {
    display: flex;
    gap: 12px;
}

.cbim-qf-media {
    margin-top: 14px;
    border-radius: 12px;
    overflow: hidden;
}

    .cbim-qf-media img {
        width: 100%;
        height: 160px;
        object-fit: cover;
        display: block;
    }

.cbim-qf-map iframe {
    width: 100%;
    height: 180px;
    border: 0;
}

/* Mobile tweaks */
@media (max-width: 991.98px) {
    .cbim-qf-media img,
    .cbim-qf-map iframe {
        height: 200px;
    }
}
/* Card base */
.cbim-qf-card {
    background: #fff;
    border-radius: 0 0 16px 16px; /* solo abajo */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Top */
.cbim-qf-top {
    display: flex;
    gap: 12px;
    padding: 16px;
}

/* Icon badge */
.cbim-qf-icon {
    width: 42px;
    height: 42px;
    background: #e7f4ec;
    color: #0b7a3e;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* Media (imagen y mapa iguales) */
.cbim-qf-media {
    margin: 0 16px;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cbim-qf-media img,
    .cbim-qf-media iframe {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: 0;
    }

/* Acción inferior */
.cbim-qf-action {
    margin-top: auto;
    padding: 14px 16px 16px;
}

    .cbim-qf-action a {
        font-size: 0.9rem;
        font-weight: 600;
        color: #0b7a3e;
        text-decoration: none;
    }

        .cbim-qf-action a:hover {
            text-decoration: underline;
        }

/* Mobile */
@media (max-width: 991.98px) {
    .cbim-qf-media {
        height: 200px;
    }
}
/* ===============================
   QUICK FACTS (ajustado)
   =============================== */

.cbim-qf-card {
    background: #fff;
    border-radius: 0 0 16px 16px; /* solo abajo */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(16,24,40,.10);
    box-shadow: 0 10px 22px rgba(16,24,40,.06);
}

.cbim-qf-top {
    display: flex;
    gap: 12px;
    padding: 16px;
}

/* Icono badge (FA) */
.cbim-qf-icon {
    width: 42px;
    height: 42px;
    background: #e7f4ec;
    color: #0b7a3e;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* MEDIA: MISMO ESPACIO para IMG e IFRAME */
.cbim-qf-media {
    margin: 0 16px;
    height: 190px; /* altura fija => mismo tamaño siempre */
    border-radius: 12px;
    overflow: hidden;
    background: #f3f4f6; /* fallback si carga lento */
    display: block;
}

    .cbim-qf-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block; /* evita gaps */
    }

    .cbim-qf-media iframe {
        width: 100%;
        height: 100%;
        border: 0;
        display: block; /* evita gaps */
    }

/* Acción: derecha */
.cbim-qf-action {
    margin-top: auto;
    padding: 14px 16px 16px;
    display: flex;
    justify-content: flex-end;
}

.cbim-qf-more {
    font-size: .9rem;
    font-weight: 700;
    color: #0b7a3e;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .cbim-qf-more:hover {
        text-decoration: underline;
    }

/* Icono fuego color (naranjo/amarillo institucional) */
.cbim-qf-fire {
    color: #f59e0b; /* ámbar */
}

/* Responsive */
@media (max-width: 991.98px) {
    .cbim-qf-media {
        height: 210px;
    }
}
/* ===============================
   QUICKFACTS FIX (forzar tamaños y alineación)
   =============================== */

.cbim-quickfacts .cbim-quickfacts-wrap .cbim-qf-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

    /* MISMO ESPACIO: media igual para imagen y mapa */
    .cbim-quickfacts .cbim-quickfacts-wrap .cbim-qf-card .cbim-qf-media {
        height: 190px !important; /* misma altura */
        width: calc(100% - 32px) !important; /* respeta márgenes laterales 16px */
        margin: 0 16px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        background: #f3f4f6 !important;
        display: block !important;
    }

        .cbim-quickfacts .cbim-quickfacts-wrap .cbim-qf-card .cbim-qf-media img,
        .cbim-quickfacts .cbim-quickfacts-wrap .cbim-qf-card .cbim-qf-media iframe {
            width: 100% !important;
            height: 100% !important;
            display: block !important;
            border: 0 !important;
        }

        .cbim-quickfacts .cbim-quickfacts-wrap .cbim-qf-card .cbim-qf-media img {
            object-fit: cover !important;
        }

    /* ACCIÓN ABAJO A LA DERECHA */
    .cbim-quickfacts .cbim-quickfacts-wrap .cbim-qf-card .cbim-qf-action {
        margin-top: auto !important;
        padding: 14px 16px 16px !important;
        display: flex !important;
        justify-content: flex-end !important;
        width: 100% !important;
    }

    .cbim-quickfacts .cbim-quickfacts-wrap .cbim-qf-card .cbim-qf-more {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-weight: 700 !important;
        color: #0b7a3e !important;
        text-decoration: none !important;
    }

        .cbim-quickfacts .cbim-quickfacts-wrap .cbim-qf-card .cbim-qf-more:hover {
            text-decoration: underline !important;
        }

    .cbim-quickfacts .cbim-quickfacts-wrap .cbim-qf-card .cbim-qf-fire {
        color: #f59e0b !important; /* ámbar */
    }

/* Responsive */
@media (max-width: 991.98px) {
    .cbim-quickfacts .cbim-quickfacts-wrap .cbim-qf-card .cbim-qf-media {
        height: 210px !important;
    }
}
/* ===============================
   HEADER SEMI TRANSPARENTE
   =============================== */

.cbim-header,
.navbar.cbim-navbar {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

    /* Asegurar contraste del texto */
    .cbim-header .navbar-brand,
    .cbim-header .nav-link {
        color: #0f172a; /* gris oscuro institucional */
    }

        /* Hover sigue funcionando */
        .cbim-header .nav-link:hover {
            color: #0b7a3e;
        }
.cbim-header,
.navbar.cbim-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
}

@media (max-width: 991.98px) {
    .cbim-header,
    .navbar.cbim-navbar {
        background-color: rgba(255, 255, 255, 0.92);
    }
}
/* ===============================
   HEADER SEMI TRANSPARENTE (FIX REAL)
   =============================== */

.navbar.cbim-navbar {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    background-image: none !important;
}

    /* Mantener legibilidad */
    .navbar.cbim-navbar .nav-link,
    .navbar.cbim-navbar .navbar-brand {
        color: #0f172a;
    }

        /* Hover normal */
        .navbar.cbim-navbar .nav-link:hover {
            color: #0b7a3e;
        }

/* Sticky (si ya lo usas, no cambia nada) */
.navbar.cbim-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Mobile: un poco menos transparente */
@media (max-width: 991.98px) {
    .navbar.cbim-navbar {
        background-color: rgba(255, 255, 255, 0.92) !important;
    }
}
/* ===============================
   BLOQUE B: ESPECIALIDADES (Home)
   =============================== */

.cbim-specs {
    padding: 34px 0 10px 0;
    background: #fff;
}

.cbim-section-head {
    margin-bottom: 16px;
}

.cbim-section-title {
    font-weight: 900;
    font-size: 28px;
    margin: 0 0 6px 0;
    color: rgba(16,24,40,.95);
}

.cbim-section-subtitle {
    margin: 0;
    color: rgba(16,24,40,.68);
    max-width: 760px;
}

.cbim-specs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 18px;
}

.cbim-spec-card {
    border: 1px solid rgba(16,24,40,.10);
    box-shadow: 0 10px 22px rgba(16,24,40,.06);
    background: #fff;
    border-radius: 0 0 16px 16px; /* coherente con quickfacts: arriba recto */
    padding: 16px;
    display: flex;
    flex-direction: column;
    min-height: 220px;
}

.cbim-spec-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cbim-green, #0b7a3e);
    background: rgba(11,122,62,.10);
    border: 1px solid rgba(11,122,62,.18);
    margin-bottom: 12px;
}

.cbim-spec-title {
    font-weight: 900;
    font-size: 16px;
    margin: 0 0 6px 0;
    color: rgba(16,24,40,.95);
}

.cbim-spec-desc {
    margin: 0 0 14px 0;
    color: rgba(16,24,40,.68);
    line-height: 1.4;
    font-size: 13.5px;
}

.cbim-spec-link {
    margin-top: auto;
    align-self: flex-end;
    font-weight: 800;
    font-size: 13.5px;
    color: var(--cbim-green, #0b7a3e);
    text-decoration: none;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

    .cbim-spec-link:hover {
        text-decoration: underline;
    }

.cbim-specs-foot {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

/* Responsive */
@media (max-width: 1199.98px) {
    .cbim-specs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .cbim-specs-grid {
        grid-template-columns: 1fr;
    }

    .cbim-spec-card {
        min-height: auto;
    }
}
/* ===============================
   BLOQUE B: ESPECIALIDADES (Carrusel)
   =============================== */

.cbim-specs--mint {
    background: #DDF3E7; /* color de la imagen adjunta */
    padding: 34px 0 18px 0;
}

.cbim-specs-carousel {
    position: relative;
    padding: 6px 40px; /* espacio para controles */
}

/* Títulos */
.cbim-section-title {
    font-weight: 900;
    font-size: 28px;
    margin: 0 0 6px 0;
    color: rgba(16,24,40,.95);
}

.cbim-section-subtitle {
    margin: 0;
    color: rgba(16,24,40,.68);
    max-width: 760px;
}

/* Cards sin puntas redondeadas */
.cbim-spec-card {
    position: relative;
    border: 1px solid rgba(16,24,40,.10);
    background: rgba(255,255,255,.92);
    border-radius: 0; /* sin redondeo */
    box-shadow: 0 10px 22px rgba(16,24,40,.06);
    padding: 18px;
    min-height: 220px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Fondo semi-transparente por card */
.cbim-spec-card--bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(var(--cbim-spec-bg-url));
    background-size: cover;
    background-position: center;
    opacity: .18; /* súbelo para que se note */
    filter: saturate(1.1) contrast(1.05);
    pointer-events: none;
    z-index: 0;
}

.cbim-spec-card--bg > * {
    position: relative;
    z-index: 1;
}


/* Capa de contenido sobre el fondo */
.cbim-spec-card--bg > * {
    position: relative;
    z-index: 1;
}

/* Top */
.cbim-spec-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.cbim-spec-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0b7a3e;
    background: rgba(11,122,62,.10);
    border: 1px solid rgba(11,122,62,.18);
}

/* Texto */
.cbim-spec-title {
    font-weight: 900;
    font-size: 16px;
    margin: 0;
    color: rgba(16,24,40,.95);
}

.cbim-spec-desc {
    margin: 0 0 14px 0;
    color: rgba(16,24,40,.70);
    line-height: 1.4;
    font-size: 13.5px;
    max-width: 46ch;
}

/* Link */
.cbim-spec-link {
    margin-top: auto;
    align-self: flex-end;
    font-weight: 800;
    font-size: 13.5px;
    color: #0b7a3e;
    text-decoration: none;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

    .cbim-spec-link:hover {
        text-decoration: underline;
    }

.cbim-specs-foot {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
}

/* Controles carrusel */
.cbim-carousel-btn {
    width: 40px;
    opacity: 1;
}

    .cbim-carousel-btn .carousel-control-prev-icon,
    .cbim-carousel-btn .carousel-control-next-icon {
        filter: none;
    }

/* Mobile: reducir padding lateral de carrusel */
@media (max-width: 575.98px) {
    .cbim-specs-carousel {
        padding: 6px 18px;
    }
}
/* ===============================
   BLOQUE B: ESPECIALIDADES (Carrusel)
   =============================== */

.cbim-specs--mint {
    background: #DDF3E7; /* color de la imagen adjunta */
    padding: 34px 0 18px 0;
}

.cbim-specs-carousel {
    position: relative;
    padding: 6px 40px 0 40px; /* espacio lateral para flechas */
}

/* Ocultar carrusel desktop en móvil y viceversa */
@media (max-width: 767.98px) {
    #cbimSpecsCarousel {
        display: none;
    }
}

@media (min-width: 768px) {
    #cbimSpecsCarouselMobile {
        display: none;
    }
}

/* Indicadores discretos (puntos) */
.cbim-carousel-dots {
    position: static; /* debajo, no encima */
    margin: 10px 0 0 0;
    justify-content: center;
    gap: 8px;
}

    .cbim-carousel-dots [data-bs-target] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        opacity: .30;
        background-color: #0b7a3e;
    }

    .cbim-carousel-dots .active {
        opacity: .90;
    }

/* Cards sin puntas redondeadas + fondo imagen semitransparente */
.cbim-spec-card {
    position: relative;
    border: 1px solid rgba(16,24,40,.10);
    background: rgba(255,255,255,.92);
    border-radius: 0; /* sin redondeo */
    box-shadow: 0 10px 22px rgba(16,24,40,.06);
    padding: 18px;
    min-height: 220px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cbim-spec-card--bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(var(--cbim-spec-bg-url));
    background-size: cover;
    background-position: center;
    opacity: .18; /* súbelo para que se note */
    filter: saturate(1.1) contrast(1.05);
    pointer-events: none;
    z-index: 0;
}

.cbim-spec-card--bg > * {
    position: relative;
    z-index: 1;
}


.cbim-spec-card--bg > * {
    position: relative;
    z-index: 1;
}

.cbim-spec-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.cbim-spec-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0b7a3e;
    background: rgba(11,122,62,.10);
    border: 1px solid rgba(11,122,62,.18);
}

.cbim-spec-title {
    font-weight: 900;
    font-size: 16px;
    margin: 0;
    color: rgba(16,24,40,.95);
}

.cbim-spec-desc {
    margin: 0 0 14px 0;
    color: rgba(16,24,40,.70);
    line-height: 1.4;
    font-size: 13.5px;
    max-width: 46ch;
}

.cbim-spec-link {
    margin-top: auto;
    align-self: flex-end;
    font-weight: 800;
    font-size: 13.5px;
    color: #0b7a3e;
    text-decoration: none;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

    .cbim-spec-link:hover {
        text-decoration: underline;
    }

.cbim-specs-foot {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
}

/* Flechas más discretas (no invasivas) */
.cbim-carousel-btn {
    width: 40px;
    opacity: 1;
}

    .cbim-carousel-btn .carousel-control-prev-icon,
    .cbim-carousel-btn .carousel-control-next-icon {
        filter: none;
        opacity: .85;
    }

.cbim-spec-card {
    background: rgba(255,255,255,.88); /* antes .92, lo bajo un poco */
}

.cbim-spec-card--bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.88));
    pointer-events: none;
    z-index: 0;
}
/* ===============================
   HEADER SEMI TRANSPARENTE (FINAL)
   =============================== */

.navbar.cbim-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background-image: none;
}

    .navbar.cbim-navbar .nav-link,
    .navbar.cbim-navbar .navbar-brand {
        color: #0f172a;
    }

        .navbar.cbim-navbar .nav-link:hover {
            color: #0b7a3e;
        }

/* Mobile: más sólido para legibilidad */
@media (max-width: 991.98px) {
    .navbar.cbim-navbar {
        background-color: rgba(255, 255, 255, 0.92);
    }
}
/* ===============================
   FIX FONDO ESPECIALIDADES (data-bg)
   =============================== */

/* base */
.cbim-spec-card--bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

    /* overlay institucional */
    .cbim-spec-card--bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255,255,255,.86);
        pointer-events: none;
    }

    /* asegurar contenido sobre overlay */
    .cbim-spec-card--bg > * {
        position: relative;
        z-index: 1;
    }

    /* aplicar imagen por atributo */
    .cbim-spec-card--bg[data-bg] {
        background-image: attr(data-bg url);
    }
.cbim-spec-card--bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

    .cbim-spec-card--bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255,255,255,.86);
        pointer-events: none;
    }

    .cbim-spec-card--bg > * {
        position: relative;
        z-index: 1;
    }
/* ===============================
   BLOQUE B: ESPECIALIDADES (Parallax + Tiles)
   =============================== */

.cbim-specs-parallax {
    position: relative;
    padding: 54px 0 28px 0;
    overflow: hidden;
}

/* Fondo parallax (sin JS) */
.cbim-specs-parallax__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateZ(0);
    will-change: transform;
    background-attachment: fixed; /* parallax simple */
    filter: saturate(1.05) contrast(1.05);
}

.cbim-specs-parallax__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.30) 100%);
}

/* iOS: background-attachment fixed suele fallar -> degradamos a normal */
@media (max-width: 991.98px) {
    .cbim-specs-parallax__bg {
        background-attachment: scroll;
    }
}

.cbim-specs-parallax__head {
    margin-bottom: 18px;
    color: #fff;
}

.cbim-specs-parallax__title {
    font-weight: 900;
    letter-spacing: .2px;
    margin: 0 0 6px 0;
    font-size: clamp(26px, 3.2vw, 40px);
    text-shadow: 0 10px 25px rgba(0,0,0,.28);
}

    .cbim-specs-parallax__title span {
        font-weight: 800;
        opacity: .95;
    }

.cbim-specs-parallax__subtitle {
    margin: 0 auto;
    max-width: 70ch;
    opacity: .92;
    font-size: 15.5px;
}

/* Contenedor tiles */
.cbim-tiles-wrap {
    margin-top: 18px;
}

.cbim-tiles {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 18px 40px rgba(0,0,0,.20);
}

/* Tile */
.cbim-tile {
    display: block;
    text-decoration: none;
    color: #fff;
    padding: 22px 18px 18px 18px;
    min-height: 210px;
    position: relative;
    overflow: hidden;
    border-radius: 0; /* sin redondeo */
    border-right: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
    transition: transform .18s ease, filter .18s ease;
}

    .cbim-tile:hover {
        transform: translateY(-2px);
        filter: brightness(1.02);
    }

.cbim-tile__icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
}

.cbim-tile__title {
    margin: 14px 0 8px 0;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: .2px;
}

.cbim-tile__desc {
    margin: 0;
    opacity: .92;
    font-size: 13.5px;
    max-width: 34ch;
}

.cbim-tile__cta {
    position: absolute;
    left: 18px;
    bottom: 16px;
    font-weight: 800;
    font-size: 13.5px;
    opacity: .95;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

/* Colores por especialidad (coherentes con el tema) */
.cbim-tile--altura {
    background: linear-gradient(135deg, #0B7A3E 0%, #0E9A4F 100%);
}

.cbim-tile--agua {
    background: linear-gradient(135deg, #0B4F8A 0%, #0D73C7 100%);
}

.cbim-tile--abastecimiento {
    background: linear-gradient(135deg, #E07A00 0%, #FF9A1F 100%);
}

.cbim-tile--forestal {
    background: linear-gradient(135deg, #2D6A2E 0%, #3D8B3F 100%);
}

/* Footer */
.cbim-tiles-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 0 0 0;
}
/* ===============================
   BLOQUE B: ESPECIALIDADES (Parallax + Tiles) - Ajuste "colgado"
   =============================== */

/* Definimos altura visual del parallax y espacio inferior para que no corte los tiles */
.cbim-specs-parallax {
    padding: 60px 0 0 0; /* quitamos padding bottom */
    min-height: 360px; /* da presencia al parallax */
}

/* El contenedor de tiles se desplaza hacia abajo para "cruzar" el borde inferior */
.cbim-tiles-wrap {
    margin-top: 26px;
    transform: translateY(55px); /* mitad dentro / mitad fuera */
}

/* Reservamos espacio bajo la sección para que no se superponga con el siguiente bloque */
.cbim-specs-parallax {
    padding-bottom: 85px; /* equivalente al translateY */
}

/* Sombra un poco más marcada para el efecto flotante */
.cbim-tiles {
    box-shadow: 0 22px 55px rgba(0,0,0,.28);
}

/* En móviles, reducimos el "colgado" para que no se vea exagerado */
@media (max-width: 991.98px) {
    .cbim-tiles-wrap {
        transform: translateY(32px);
    }

    .cbim-specs-parallax {
        padding-bottom: 55px;
        min-height: 320px;
    }
}
/* ===============================
   BLOQUE B: ESPECIALIDADES - Tiles colgados (offset negativo)
   =============================== */

.cbim-specs-parallax {
    position: relative;
    padding: 60px 0 0 0;
    min-height: 360px;
    /* Reservamos el espacio que ocuparán los tiles colgados,
     para que el siguiente bloque no se monte encima */
    padding-bottom: 140px;
}

/* Contenedor anclado al borde inferior del parallax */
.cbim-tiles-anchor {
    position: absolute;
    left: 0;
    right: 0;
    /* clave: colgar hacia abajo */
    bottom: -200px; /* ajusta: más negativo => más cuelga */

    z-index: 2;
}

.cbim-tiles-wrap {
    margin-top: 0; /* ya no lo usamos */
}

/* sombra flotante más marcada */
.cbim-tiles {
    box-shadow: 0 22px 55px rgba(0,0,0,.28);
}

/* En móviles, colgamos menos y reservamos menos espacio */
@media (max-width: 991.98px) {
    .cbim-specs-parallax {
        min-height: 320px;
        padding-bottom: 110px;
    }

    .cbim-tiles-anchor {
        bottom: -45px;
    }
}
/* =========================================================
   ESPECIALIDADES: tiles colgados (desktop) con separación real
   ========================================================= */

/* asegura que el parallax quede atrás */
.cbim-specs-parallax__bg,
.cbim-specs-parallax__overlay {
    z-index: 0;
}

/* contenido y cabecera sobre el fondo */
.cbim-specs-parallax .container.position-relative {
    z-index: 1;
}

/* tiles por delante del parallax */
.cbim-tiles-anchor {
    z-index: 5; /* más alto que overlay */

}

/* separación visual: "despegado" */
.cbim-tiles-wrap {
    filter: drop-shadow(0 18px 38px rgba(0,0,0,.25));
}

/* un pequeño gap entre tiles y borde inferior visual del parallax */
.cbim-specs-parallax {
    /* este padding-bottom debe cubrir tu bottom negativo */
    padding-bottom: 240px; /* si bottom:-200, deja 240 aprox */
}

/* opcional: bordes más limpios (como referencia) */
.cbim-tiles {
    background: transparent;
    border: none;
    box-shadow: none; /* usamos drop-shadow arriba */
}

.cbim-tile {
    border-right: 2px solid rgba(255,255,255,.18);
    border-bottom: 0;
}
/* ===============================
   ESPECIALIDADES: layout responsive
   =============================== */

/* Desktop/Tablet: se usa grilla colgada */
.cbim-tiles-anchor {
    display: block;
}

/* Mobile: ocultamos grilla y usamos carrusel */
@media (max-width: 991.98px) {
    .cbim-tiles-anchor {
        display: none;
    }

    .cbim-specs-mobile {
        margin-top: 18px;
    }

    /* los tiles en móvil van dentro del parallax, sin colgar */
    .cbim-tile--mobile {
        min-height: 190px;
        border-right: 0;
    }

    /* controles más discretos */
    .cbim-carousel-ctrl {
        width: 14%;
        opacity: .85;
    }

    /* indicadores discretos */
    #cbimSpecsCarousel .carousel-indicators {
        margin-bottom: 0;
        gap: 6px;
    }

        #cbimSpecsCarousel .carousel-indicators [data-bs-target] {
            width: 7px;
            height: 7px;
            border-radius: 999px;
            opacity: .6;
        }

        #cbimSpecsCarousel .carousel-indicators .active {
            opacity: 1;
        }
}
/* =========================
   ESPECIALIDADES (PARALLAX + TILES)
   ========================= */

.cbim-spec-parallax {
    position: relative;
    overflow: visible; /* clave para “colgar” tiles */
    padding: 56px 0 40px;
    min-height: 420px;
}

.cbim-parallax-bg {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: translate3d(0,0,0);
    will-change: transform;
    z-index: 0;
}

.cbim-parallax-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.50));
    z-index: 1;
}

.cbim-spec-inner {
    position: relative;
    z-index: 3; /* contenido por sobre overlay */
}

.cbim-spec-header {
    max-width: 900px;
    margin: 0 auto 22px;
    color: #fff;
}

.cbim-spec-title {
    font-weight: 800;
    letter-spacing: .2px;
    margin-bottom: 8px;
}

.cbim-spec-subtitle {
    margin: 0 auto;
    max-width: 720px;
    opacity: .95;
}

/* Tiles colgados (solo desktop) */
.cbim-tiles-anchor {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -200px; /* cuelga 200px hacia abajo */
    z-index: 5; /* tiles por delante del parallax */
    pointer-events: auto;
}

.cbim-tiles-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    box-shadow: 0 18px 40px rgba(16,24,40,.22);
}

/* Tile base (sin puntas redondeadas) */
.cbim-tile {
    position: relative;
    padding: 22px 22px 18px;
    min-height: 170px;
    color: #fff;
    border-radius: 0; /* sin redondeo */
}

.cbim-tile-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.12);
    margin-bottom: 10px;
    color: #fff;
}

.cbim-tile-title {
    font-weight: 800;
    font-size: 18px;
    margin: 0 0 6px;
}

.cbim-tile-text {
    margin: 0 0 14px;
    opacity: .95;
    font-size: 14px;
    line-height: 1.35;
    max-width: 340px;
}

.cbim-tile-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    opacity: .95;
}

    .cbim-tile-link:hover {
        opacity: 1;
        text-decoration: underline;
    }

/* Colores por especialidad */
.cbim-tile-altura {
    background: #0a8a45;
}

.cbim-tile-agua {
    background: #0b63b3;
}

.cbim-tile-abast {
    background: #f08a00;
}

.cbim-tile-forestal {
    background: #2f7a34;
}

/* MOBILE: carrusel dentro del parallax (no colgar) */
.cbim-spec-mobile {
    margin-top: 18px;
}

    .cbim-spec-mobile .cbim-tile {
        width: 100%;
        min-height: 200px;
        box-shadow: 0 18px 40px rgba(16,24,40,.22);
    }

.cbim-carousel-control {
    width: 44px;
    opacity: .85;
}

.cbim-spec-mobile .carousel-indicators {
    margin-bottom: -6px;
}

    .cbim-spec-mobile .carousel-indicators [data-bs-target] {
        width: 7px;
        height: 7px;
        border-radius: 999px;
    }

/* Ajustes responsive */
@media (max-width: 991.98px) {
    .cbim-spec-parallax {
        padding: 40px 0 30px;
        min-height: 360px;
    }
    /* evita el colgado en mobile */
    .cbim-tiles-anchor {
        position: static;
        bottom: auto;
    }
}
/* =========================
   ESPECIALIDADES (PARALLAX CONTROLADO)
   ========================= */

.cbim-spec-parallax {
    position: relative;
    overflow: visible;
    padding: 64px 0 40px;
    min-height: 420px;
    /* fondo */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #0b0f0d; /* fallback */
}

/* Parallax REAL SOLO EN DESKTOP */
@media (min-width: 992px) {
    .cbim-spec-parallax {
        background-attachment: fixed;
    }
}

/* En mobile: evitar fixed para no “romper” */
@media (max-width: 991.98px) {
    .cbim-spec-parallax {
        background-attachment: scroll;
        padding: 44px 0 28px;
        min-height: 380px;
    }
}

.cbim-parallax-overlay {
    position: absolute;
    inset: 0;
    /* Overlay fijo, NO se mueve */
    background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
    z-index: 1;
    pointer-events: none;
}

.cbim-spec-inner {
    noticing: initial;
    position: relative;
    z-index: 3;
}

.cbim-spec-header {
    max-width: 920px;
    margin: 0 auto 22px;
    color: #fff;
}

.cbim-spec-title {
    font-weight: 800;
    margin-bottom: 8px;
}

.cbim-spec-subtitle {
    margin: 0 auto;
    max-width: 720px;
    opacity: .95;
}

/* Tiles colgados (desktop) */
.cbim-tiles-anchor {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -200px; /* cuelga hacia abajo */
    z-index: 10; /* SIEMPRE por delante del parallax */
}

.cbim-tiles-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    box-shadow: 0 18px 40px rgba(16,24,40,.22);
}

/* Mobile: NO colgar, se usa carrusel */
@media (max-width: 991.98px) {
    .cbim-tiles-anchor {
        position: static;
        bottom: auto;
    }
}

/* IMPORTANTE: deja espacio bajo el parallax para que los tiles no tapen la sección siguiente */
@media (min-width: 992px) {
    .cbim-spec-parallax {
        margin-bottom: 220px; /* para que “Noticias” no choque */
    }
}
/* ===== Tiles colgados (DESKTOP) ===== */

.cbim-tiles-anchor {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0; /* anclado exacto al borde inferior */
    transform: translateY(110%); /* cuelga 50% hacia abajo */
    z-index: 20; /* por delante del parallax */
    pointer-events: none; /* evita que el overlay capture clicks */
}

.cbim-tiles-row {
    pointer-events: auto; /* recupera clicks en los tiles */
    width: min(1140px, calc(100% - 48px)); /* banda centrada */
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    box-shadow: 0 18px 40px rgba(16,24,40,.22);
}

/* espacio real bajo el parallax para que NO choque con Noticias */
@media (min-width: 992px) {
    .cbim-spec-parallax {
        padding-bottom: 140px; /* deja “aire” dentro del parallax */
        margin-bottom: 220px; /* deja espacio externo por el cuelgue */
    }
}

/* MOBILE: no cuelgues nada */
@media (max-width: 991.98px) {
    .cbim-tiles-anchor {
        position: static;
        transform: none;
        pointer-events: auto;
    }

    .cbim-tiles-row {
        width: 100%;
        margin: 0;
        grid-template-columns: 1fr; /* si por error se muestra */
        box-shadow: none;
    }

    .cbim-spec-parallax {
        margin-bottom: 0;
        padding-bottom: 24px;
    }
}
.cbim-spec-header {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 18px;
}
/* Overlay sutil para mejorar contraste */
.cbim-parallax::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.25) );
    z-index: 1;
}

/* Asegurar que el contenido quede sobre el overlay */
.cbim-parallax > * {
    position: relative;
    z-index: 2;
}
.cbim-spec-header h2 {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.cbim-spec-header p {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.cbim-spec-card {
    backdrop-filter: saturate(120%) blur(1px);
    border-radius: 0; /* bordes rectos como definiste */
}

    .cbim-spec-card.altura {
        background-color: rgba(10, 139, 69, 0.8); /* verde rescate */
    }

    .cbim-spec-card.agua {
        background-color: rgba(13, 98, 173, 0.8); /* azul agua */
    }

    .cbim-spec-card.abastecimiento {
        background-color: rgba(245, 138, 7, 0.8); /* naranjo logística */
    }

    .cbim-spec-card.forestal {
        background-color: rgba(52, 122, 52, 0.8); /* verde forestal */
    }

    .cbim-spec-card h3,
    .cbim-spec-card p,
    .cbim-spec-card a {
        color: #ffffff;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    }
/* =========================
   BLOQUE: COMUNIDAD (estilo “Frutkha”)
   ========================= */

.cbim-community-section {
    padding: 56px 0;
    background: #fff;
}

.cbim-section-head {
    margin-bottom: 28px;
}

.cbim-section-title {
    font-size: 34px;
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 6px 0;
}

.cbim-section-subtitle {
    margin: 0;
    color: #6b7280;
    max-width: 820px;
}

/* Row layout */
.cbim-community-row {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 34px;
    align-items: center;
    margin-top: 34px;
}

.cbim-community-row--reverse {
    grid-template-columns: .95fr 1.05fr;
}

    .cbim-community-row--reverse .cbim-community-media {
        order: 2;
    }

    .cbim-community-row--reverse .cbim-community-content {
        order: 1;
    }

/* Media (imagen) */
.cbim-media-frame {
    position: relative;
    width: 100%;
    min-height: 360px;
    background-size: cover;
    background-position: center;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0,0,0,.08);
}

    /* Overlay sutil para legibilidad (como Frutkha) */
    .cbim-media-frame::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 30% 40%, rgba(0,0,0,.12), rgba(0,0,0,.35));
        pointer-events: none;
    }

/* Botón play centrado */
.cbim-media-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 78px;
    height: 78px;
    border-radius: 999px;
    background: #f59e0b; /* naranjo institucional tipo “Frutkha” */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 26px rgba(245, 158, 11, .35);
    z-index: 2;
    transition: transform .18s ease, filter .18s ease;
    text-decoration: none;
}

    .cbim-media-play:hover {
        transform: translate(-50%, -50%) scale(1.04);
        filter: brightness(1.02);
    }

.cbim-play-icon {
    width: 0;
    height: 0;
    border-left: 18px solid #fff;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    margin-left: 4px;
}

/* Content */
.cbim-eyebrow {
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 6px;
}

.cbim-community-title {
    font-size: 38px;
    line-height: 1.05;
    font-weight: 900;
    margin: 0 0 12px 0;
    color: #0f172a;
}

.cbim-community-lead {
    margin: 0 0 14px 0;
    color: #111827;
    line-height: 1.65;
    max-width: 640px;
}

.cbim-community-list {
    margin: 0 0 16px 18px;
    color: #374151;
    line-height: 1.6;
}

    .cbim-community-list li {
        margin: 6px 0;
    }

.cbim-community-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 999px;
    background: #f59e0b;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 14px 26px rgba(245, 158, 11, .28);
    transition: transform .18s ease, filter .18s ease;
}

    .cbim-community-cta:hover {
        transform: translateY(-1px);
        filter: brightness(1.03);
    }

/* Responsive */
@media (max-width: 991.98px) {
    .cbim-community-row,
    .cbim-community-row--reverse {
        grid-template-columns: 1fr;
        gap: 18px;
    }

        .cbim-community-row--reverse .cbim-community-media,
        .cbim-community-row--reverse .cbim-community-content {
            order: initial;
        }

    .cbim-media-frame {
        min-height: 260px;
        border-radius: 12px;
    }

    .cbim-community-title {
        font-size: 30px;
    }
}
/* =========================
   FOOTER (estilo Heatrix, adaptado CBIM)
   ========================= */

.cbim-footer {
    background: #111213;
    color: rgba(255,255,255,.86);
    margin-top: 40px;
}

/* Top subscribe bar */
.cbim-footer-top {
    padding: 34px 0 26px;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}

.cbim-footer-top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.cbim-footer-top-title {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
}

.cbim-footer-top-subtitle {
    margin: 6px 0 0 0;
    color: rgba(255,255,255,.72);
    max-width: 560px;
}

.cbim-footer-top-form {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.06);
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    min-width: 440px;
    justify-content: flex-end;
}

.cbim-footer-input {
    flex: 1;
    min-width: 220px;
    border: 0;
    outline: none;
    background: transparent;
    color: #fff;
    padding: 12px 12px;
    border-radius: 10px;
}

    .cbim-footer-input::placeholder {
        color: rgba(255,255,255,.55);
    }

.cbim-footer-btn {
    border: 0;
    padding: 12px 18px;
    border-radius: 10px;
    font-weight: 800;
    background: #f59e0b; /* naranjo */
    color: #111;
    transition: filter .18s ease, transform .18s ease;
}

    .cbim-footer-btn:hover {
        filter: brightness(1.03);
        transform: translateY(-1px);
    }

.cbim-footer-divider {
    height: 1px;
    background: rgba(255,255,255,.10);
}

/* Main grid */
.cbim-footer-main {
    padding: 30px 0;
}

.cbim-footer-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr 1.15fr;
    gap: 26px;
}

.cbim-footer-title {
    margin: 0 0 12px 0;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
}

/* Brand */
.cbim-footer-brandlink {
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    color: #fff;
}

.cbim-footer-logo {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    object-fit: cover;
}

.cbim-footer-brandname {
    font-weight: 900;
    font-size: 20px;
    line-height: 1.1;
}

.cbim-footer-brandmotto {
    color: rgba(255,255,255,.70);
    font-weight: 700;
    font-size: 13px;
    margin-top: 2px;
}

.cbim-footer-desc {
    margin: 14px 0 0 0;
    color: rgba(255,255,255,.72);
    line-height: 1.65;
}

/* Links */
.cbim-footer-links,
.cbim-footer-social,
.cbim-footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .cbim-footer-links li,
    .cbim-footer-social li {
        margin: 8px 0;
    }

    .cbim-footer-links a,
    .cbim-footer-social a {
        text-decoration: none;
        color: rgba(255,255,255,.78);
        transition: color .16s ease;
    }

        .cbim-footer-links a:hover,
        .cbim-footer-social a:hover {
            color: #f59e0b;
        }

    /* Social icon */
    .cbim-footer-social i {
        width: 18px;
        text-align: center;
        margin-right: 10px;
        color: #f59e0b;
    }

.cbim-footer-note {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255,255,255,.65);
}

/* Contact */
.cbim-footer-contact li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 10px 0;
    color: rgba(255,255,255,.78);
}

.cbim-footer-contact i {
    margin-top: 2px;
    color: #f59e0b;
    width: 18px;
    text-align: center;
}

.cbim-footer-contact a {
    color: rgba(255,255,255,.82);
    text-decoration: none;
}

    .cbim-footer-contact a:hover {
        color: #f59e0b;
    }

/* Bottom */
.cbim-footer-bottom {
    padding: 16px 0;
}

.cbim-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.cbim-footer-copy {
    color: rgba(255,255,255,.70);
    font-size: 13px;
}

.cbim-footer-legal {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

    .cbim-footer-legal a {
        color: rgba(255,255,255,.72);
        text-decoration: none;
    }

        .cbim-footer-legal a:hover {
            color: #f59e0b;
        }

.cbim-footer-dot {
    color: rgba(255,255,255,.35);
}

/* Responsive */
@media (max-width: 991.98px) {
    .cbim-footer-top-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .cbim-footer-top-form {
        min-width: 100%;
        width: 100%;
    }

    .cbim-footer-grid {
        grid-template-columns: 1fr;
    }

    .cbim-footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* =========================================================
   ESPECIALIDADES (PARALLAX + TILES) - CONSOLIDADO FINAL
   - Tiles “a mitad” del borde inferior (como tu referencia)
   - Sin bloque blanco excesivo antes de Comunidad
   - Mobile sin colgado (se apilan/carrusel si luego lo reactivas)
   ========================================================= */

.cbim-spec-parallax {
    position: relative;
    overflow: visible; /* permite que los tiles “cuelguen” */
    padding: 64px 0 40px;
    min-height: 420px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #0b0f0d; /* fallback */
}

/* Parallax real solo en desktop */
@media (min-width: 992px) {
    .cbim-spec-parallax {
        background-attachment: fixed;
    }
}

/* Mobile: evitar fixed (iOS/Android suele fallar o verse torpe) */
@media (max-width: 991.98px) {
    .cbim-spec-parallax {
        background-attachment: scroll;
        padding: 44px 0 28px;
        min-height: 380px;
    }
}

/* Overlay fijo (NO debe moverse “raro”) */
.cbim-parallax-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.58));
    z-index: 1;
    pointer-events: none;
}

.cbim-spec-inner {
    position: relative;
    z-index: 3;
}

.cbim-spec-header {
    max-width: 920px;
    margin: 0 auto 22px;
    color: #fff;
}

    /* Texto con contraste y sombra (como tu parallax) */
    .cbim-spec-header h2 {
        color: #fff;
        text-shadow: 0 3px 14px rgba(0,0,0,.55);
    }

    .cbim-spec-header p {
        color: rgba(255,255,255,.92);
        text-shadow: 0 2px 10px rgba(0,0,0,.45);
    }

/* ===== Tiles colgados (DESKTOP) =====
   Antes lo tenías “muy abajo” (110%).
   Para que quede “a mitad” del borde inferior, usa 50%.
*/
.cbim-tiles-anchor {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(125%); /* CLAVE: mitad dentro/mitad fuera */
    z-index: 20; /* delante del overlay */
    pointer-events: none; /* no bloquea interacciones fuera */
}

.cbim-tiles-row {
    pointer-events: auto; /* recupera clicks en tiles */
    width: min(1140px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    box-shadow: 0 18px 40px rgba(16,24,40,.22);
}

/* Espacio real bajo el parallax para que NO choque con la siguiente sección.
   Como ahora cuelga 50%, el espacio necesario es MUCHO menor que 220px.
*/
@media (min-width: 992px) {
    .cbim-spec-parallax {
        margin-bottom: 120px; /* reduce el bloque blanco */
    }
}

/* Tile base */
.cbim-tile {
    position: relative;
    display: block;
    text-decoration: none;
    color: #fff;
    padding: 22px 22px 18px;
    min-height: 170px;
    border-radius: 0; /* sin redondeo */
}

.cbim-tile-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.12);
    margin-bottom: 10px;
    color: #fff;
}

.cbim-tile-title {
    font-weight: 800;
    font-size: 18px;
    margin: 0 0 6px;
}

.cbim-tile-text {
    margin: 0 0 14px;
    opacity: .95;
    font-size: 14px;
    line-height: 1.35;
    max-width: 340px;
}

.cbim-tile-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    opacity: .95;
}

    .cbim-tile-link:hover {
        opacity: 1;
        text-decoration: underline;
    }

/* Colores por especialidad */
.cbim-tile-altura {
    background: rgba(10,139,69,.80);
}
/* 80% */
.cbim-tile-agua {
    background: rgba(13,98,173,.80);
}
/* 80% */
.cbim-tile-abast {
    background: rgba(245,138,7,.80);
}
/* 80% */
.cbim-tile-forestal {
    background: rgba(52,122,52,.80);
}
/* 80% */

/* MOBILE: no colgar (los tiles deben vivir dentro del flujo) */
@media (max-width: 991.98px) {
    .cbim-tiles-anchor {
        position: static;
        transform: none;
        pointer-events: auto;
        margin-top: 16px;
    }

    .cbim-tiles-row {
        width: 100%;
        margin: 0;
        grid-template-columns: 1fr; /* si no hay carrusel activo */
        box-shadow: 0 18px 40px rgba(16,24,40,.18);
    }

    .cbim-spec-parallax {
        margin-bottom: 0; /* evita el “bloque blanco” en mobile */
    }
}
/* =========================================================
   HOME: CUARTELES + CARROS (full-width panels + hover card)
   ========================================================= */

.cbim-wide-panels {
    width: 100%;
    background: #fff;
}

/* Full width real (no depender del container del layout) */
.cbim-wide-wrap {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

/* Panel base */
.cbim-wide-panel {
    position: relative;
    display: block;
    min-height: 360px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    outline: none;
}

/* Imagen */
.cbim-wide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: transform .45s ease;
}

/* Oscurecedor sutil para legibilidad */
.cbim-wide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.45));
    transition: background .35s ease;
}

/* “Etiqueta” discreta (texto fijo antes del hover) */
.cbim-wide-badge {
    position: absolute;
    left: 22px;
    top: 22px;
    z-index: 2;
    max-width: 70%;
    padding: 12px 14px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(2px);
}

.cbim-wide-badge-right {
    left: auto;
    right: 22px;
    text-align: right;
}

.cbim-wide-badge-title {
    display: block;
    font-weight: 800;
    letter-spacing: .06em;
    font-size: 12px;
}

.cbim-wide-badge-sub {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    opacity: .95;
}

/* Tarjeta tipo “cuadro amarillo” */
.cbim-wide-card {
    position: absolute;
    left: 26%;
    top: 50%;
    transform: translateY(-50%) translateX(0) scale(0.96);
    z-index: 3;
    width: min(460px, calc(100% - 64px));
    padding: 22px 22px;
    background: #f2c14e; /* amarillo “card” */
    color: #111;
    box-shadow: 0 18px 46px rgba(0,0,0,.26, 0.8);
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease, transform .55s cubic-bezier(0.22, 1, 0.36, 1);
}

.cbim-wide-card-right {
    left: auto;
    right: 26%;
    transform: translateY(-50%) translateX(10px);
}

.cbim-wide-card-kicker {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    opacity: .9;
}

.cbim-wide-card-title {
    margin-top: 6px;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.15;
}

.cbim-wide-card-text {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.45;
    opacity: .92;
}

.cbim-wide-card-cta {
    margin-top: 14px;
    font-weight: 800;
    font-size: 14px;
    color: #0b5f35; /* guiño al verde institucional */
}

/* Hover / Focus */
.cbim-wide-panel:hover .cbim-wide-bg,
.cbim-wide-panel:focus-visible .cbim-wide-bg {
    transform: scale(1.06);
}

.cbim-wide-panel:hover .cbim-wide-overlay,
.cbim-wide-panel:focus-visible .cbim-wide-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.40));
}

/* Mostrar tarjeta en hover/focus (desktop) */
.cbim-wide-panel:hover .cbim-wide-card,
.cbim-wide-panel:focus-visible .cbim-wide-card {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
}

/* Mantener outline visible en teclado */
.cbim-wide-panel:focus-visible {
    outline: 3px solid rgba(242,193,78,.85);
    outline-offset: -3px;
}

/* =========================
   Responsive (mobile/tablet)
   - 2 bloques apilados
   - tarjeta se muestra “siempre” como banda inferior (sin depender de hover)
   ========================= */

@media (max-width: 991.98px) {
    .cbim-wide-wrap {
        grid-template-columns: 1fr;
    }

    .cbim-wide-panel {
        min-height: 340px;
    }

    .cbim-wide-badge,
    .cbim-wide-badge-right {
        left: 16px;
        right: 16px;
        max-width: none;
        text-align: left;
    }

    /* En mobile, tarjeta fija abajo (más usable táctil) */
    .cbim-wide-card,
    .cbim-wide-card-right {
        left: 16px;
        right: 16px;
        top: auto;
        bottom: 16px;
        transform: none;
        width: auto;
        opacity: 1;
        pointer-events: auto;
    }
}
/* ================================
   CUERPO DE OFICIALES - Carrusel (sin JS)
================================= */

.cbim-officers-section {
    padding: 56px 0;
}

.cbim-section-header {
    margin-bottom: 22px;
}

.cbim-section-title {
    font-weight: 800;
    margin: 0 0 6px;
}

.cbim-section-subtitle {
    margin: 0;
    color: #6b7280;
}

.cbim-officers-carousel {
    position: relative;
}

.cbim-off-slide {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cbim-off-main {
    position: relative;
    border-radius: 12px;
}

.cbim-off-panel {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 24px;
    align-items: center;
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 12px;
    padding: 18px;
    min-height: 360px;
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .35s ease, transform .45s ease;
    pointer-events: none;
}

.cbim-off-photo {
    border-radius: 10px;
    overflow: hidden;
    background: #f3f4f6;
    height: 320px;
}

    .cbim-off-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.cbim-off-content {
    padding: 6px 6px 6px 2px;
}

.cbim-off-kicker {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
    margin: 0 0 8px;
    color: #111827;
    opacity: .7;
}

.cbim-off-title {
    font-size: 1.6rem;
    font-weight: 900;
    margin: 0 0 10px;
    line-height: 1.1;
}

.cbim-off-text {
    margin: 0 0 14px;
    color: #4b5563;
    line-height: 1.55;
}

.cbim-off-meta {
    display: flex;
    gap: 10px;
    align-items: center;
}

.cbim-off-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.85);
    font-weight: 700;
    font-size: .9rem;
    color: #111827;
}

/* Controles prev/next */
.cbim-off-controls {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.cbim-off-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,.14);
    border-radius: 10px;
    background: #fff;
    color: #111827;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}

    .cbim-off-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(0,0,0,.10);
        border-color: rgba(0,0,0,.20);
    }

/* Miniaturas abajo */
.cbim-off-thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.cbim-off-thumb {
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    background: #f3f4f6;
    transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}

    .cbim-off-thumb img {
        width: 100%;
        height: 90px;
        object-fit: cover;
        display: block;
    }

    .cbim-off-thumb:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(0,0,0,.10);
    }

/* Estado activo: resalta miniatura correspondiente */
#cbimOff1:checked ~ .cbim-off-thumbs label[for="cbimOff1"],
#cbimOff2:checked ~ .cbim-off-thumbs label[for="cbimOff2"],
#cbimOff3:checked ~ .cbim-off-thumbs label[for="cbimOff3"],
#cbimOff4:checked ~ .cbim-off-thumbs label[for="cbimOff4"] {
    border-color: rgba(0, 128, 0, .55);
}

/* Mostrar panel seleccionado */
#cbimOff1:checked ~ .cbim-off-main .cbim-off-panel-1,
#cbimOff2:checked ~ .cbim-off-main .cbim-off-panel-2,
#cbimOff3:checked ~ .cbim-off-main .cbim-off-panel-3,
#cbimOff4:checked ~ .cbim-off-main .cbim-off-panel-4 {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
}

/* Responsive: en móvil, miniaturas quedan abajo (ya lo están), y panel pasa a 1 columna */
@media (max-width: 991.98px) {
    .cbim-off-panel {
        grid-template-columns: 1fr;
        gap: 14px;
        min-height: auto;
    }

    .cbim-off-photo {
        height: 260px;
    }

    .cbim-off-thumbs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cbim-off-thumb img {
        height: 72px;
    }
}

/* Muy pequeño: miniaturas en 2 filas (2x2) */
@media (max-width: 420px) {
    .cbim-off-thumbs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* ================================
   CUERPO DE OFICIALES - Carrusel (Bootstrap)
   Requisitos:
   - Fotos cuadradas, sin bordes redondeados
   - Miniaturas cuadradas (alto=ancho)
   - Imagen "cabe" dentro del contenedor (object-fit: contain)
================================= */

.cbim-officers-section {
    padding: 56px 0;
}

.cbim-officers-wrap {
    position: relative;
}

/* Panel */
.cbim-off-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: center;
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 0; /* sin bordes redondeados */
    padding: 18px;
}

/* Foto principal: CUADRADA y sin bordes */
.cbim-off-photo {
    aspect-ratio: 1 / 1; /* cuadrado */
    width: 100%;
    background: #f3f4f6;
    overflow: hidden;
    border-radius: 0; /* sin bordes redondeados */
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cbim-off-photo img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* CLAVE: la imagen cabe dentro */
        object-position: center;
        display: block;
        background: #f3f4f6;
    }

/* Texto */
.cbim-off-content {
    padding: 4px 4px 4px 0;
}

.cbim-off-name {
    font-weight: 700;
    color: #6b7280;
    margin: 0 0 6px;
}

.cbim-off-role {
    font-size: 2rem;
    font-weight: 900;
    margin: 0 0 10px;
    line-height: 1.05;
}

.cbim-off-text {
    margin: 0 0 14px;
    color: #4b5563;
    line-height: 1.55;
}

.cbim-off-meta {
    margin-bottom: 14px;
}

.cbim-off-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.85);
    font-weight: 700;
    font-size: .92rem;
    color: #111827;
}

/* Botones prev/next */
.cbim-off-controls {
    display: flex;
    gap: 10px;
}

.cbim-off-btn {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(0,0,0,.14);
    border-radius: 10px;
    background: #fff;
    color: #111827;
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}

    .cbim-off-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(0,0,0,.10);
        border-color: rgba(0,0,0,.22);
    }

/* Miniaturas: CUADRADAS, sin bordes redondeados */
.cbim-off-thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.cbim-off-thumb {
    padding: 0;
    border: 2px solid transparent;
    background: #f3f4f6;
    border-radius: 0; /* sin bordes redondeados */
    overflow: hidden;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
    aspect-ratio: 1 / 1; /* cuadrado */
}

    .cbim-off-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* también cabe */
        object-position: center;
        display: block;
        background: #f3f4f6;
    }

    .cbim-off-thumb:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(0,0,0,.10);
    }

    /* Resaltar miniatura activa (Bootstrap agrega .active) */
    .cbim-off-thumb.active {
        border-color: rgba(0, 128, 0, .55);
    }

/* Responsive: en móvil, panel en 1 columna y miniaturas con grid flexible */
@media (max-width: 991.98px) {
    .cbim-off-panel {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .cbim-off-role {
        font-size: 1.6rem;
    }

    .cbim-off-thumbs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Muy pequeño: miniaturas 2x2 o 3xN según prefieras */
@media (max-width: 420px) {
    .cbim-off-thumbs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* =========================
   Cuerpo de Oficiales (layout tipo ejemplo)
   ========================= */

.cbim-officers-section {
    padding: 48px 0 56px;
}

.cbim-officers-wrap {
    margin-top: 18px;
}

/* Grid principal: imagen izquierda + contenido derecha */
.cbim-off-maingrid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 28px;
    align-items: start;
}

/* Imagen grande: SIN bordes redondeados, y la foto "cabe" (sin recorte) */
.cbim-off-mainimg {
    background: #f4f6f7;
    width: 100%;
    aspect-ratio: 16 / 10; /* ajustable */
    overflow: hidden;
    border-radius: 0;
}

    .cbim-off-mainimg img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* clave: que la foto CABE */
        object-position: center;
        display: block;
    }

/* Contenido derecho */
.cbim-off-maincontent {
    padding-top: 6px;
}

.cbim-off-kicker {
    font-size: 14px;
    color: #5b6770;
    margin-bottom: 6px;
}

.cbim-off-title {
    font-size: 34px;
    line-height: 1.15;
    margin: 0 0 14px 0;
    font-weight: 800;
}

.cbim-off-text {
    margin: 0 0 18px 0;
    color: #4a5560;
}

.cbim-off-badge {
    display: inline-block;
    border: 1px solid #d7dde3;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 600;
    background: #fff;
}

/* Botones prev/next como en referencia */
.cbim-off-controls {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.cbim-off-navbtn {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid #d7dde3;
    background: #fff;
    color: #111;
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, background-color .15s ease;
}

    .cbim-off-navbtn:hover {
        transform: translateY(-1px);
        background: #f6f8fa;
    }

/* Miniaturas abajo: CUADRADAS, sin bordes redondeados, y scroll si hay muchas */
.cbim-off-thumbs {
    display: flex;
    gap: 16px;
    margin-top: 18px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
}

.cbim-off-thumb {
    flex: 0 0 auto;
    width: 140px;
    height: 140px; /* cuadradas */
    background: #f4f6f7;
    border: 0;
    padding: 0;
    border-radius: 0; /* sin bordes redondeados */
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: start;
    outline: none;
}

    .cbim-off-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* thumbs sí pueden recortar para verse “pro” */
        object-position: center;
        display: block;
    }

    /* Indicador visual de thumb activa (sin depender de bordes redondeados) */
    .cbim-off-thumb:focus {
        box-shadow: 0 0 0 2px rgba(0, 128, 0, .35);
    }

/* Responsive: en móvil, apila imagen y contenido; miniaturas quedan abajo */
@media (max-width: 991.98px) {
    .cbim-off-maingrid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .cbim-off-title {
        font-size: 28px;
    }

    .cbim-off-thumb {
        width: 110px;
        height: 110px;
    }
}
/* =========================
   HOME - NOTICIAS (Latest Posts)
   ========================= */

.cbim-news-block {
    padding-top: .25rem;
}

.cbim-news-head {
    text-align: center;
    margin-bottom: 1.25rem;
}

.cbim-news-title {
    margin: 0;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 1.05rem;
}

.cbim-news-divider {
    display: inline-block;
    width: 56px;
    height: 2px;
    background: rgba(0,0,0,.15);
    margin-top: .55rem;
    position: relative;
}

    .cbim-news-divider::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 10px;
        height: 10px;
        border: 2px solid rgba(0,0,0,.15);
        transform: translate(-50%, -50%) rotate(45deg);
        background: #fff;
    }

.cbim-news-feature {
    border: 0;
    background: #fff;
}

.cbim-news-feature-media {
    display: block;
    width: 100%;
    overflow: hidden;
}

    .cbim-news-feature-media img {
        width: 100%;
        height: 360px;
        object-fit: cover;
        display: block;
    }

.cbim-news-feature-body {
    padding-top: 1rem;
}

.cbim-news-feature-title {
    margin: 0 0 .35rem 0;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1rem;
    line-height: 1.25;
}

    .cbim-news-feature-title a,
    .cbim-news-side-title a {
        color: #111;
        text-decoration: none;
    }

        .cbim-news-feature-title a:hover,
        .cbim-news-side-title a:hover {
            text-decoration: underline;
        }

.cbim-news-meta {
    color: rgba(0,0,0,.55);
    font-size: .82rem;
    margin-bottom: .65rem;
}

.cbim-news-meta-sep {
    margin: 0 .35rem;
    color: rgba(0,0,0,.35);
}

.cbim-news-lead {
    margin: 0;
    color: rgba(0,0,0,.72);
    line-height: 1.55;
    font-size: .95rem;
}

.cbim-news-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cbim-news-side-item {
    display: flex;
    gap: .9rem;
}

.cbim-news-side-thumb {
    flex: 0 0 120px;
    display: block;
    overflow: hidden;
}

    .cbim-news-side-thumb img {
        width: 120px;
        height: 86px;
        object-fit: cover;
        display: block;
    }

.cbim-news-side-title {
    margin: 0 0 .35rem 0;
    font-weight: 800;
    text-transform: uppercase;
    font-size: .85rem;
    line-height: 1.25;
}

.cbim-news-side-lead {
    margin: .35rem 0 0 0;
    color: rgba(0,0,0,.70);
    font-size: .9rem;
    line-height: 1.45;
    /* evita que se alargue demasiado */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive */
@media (max-width: 991.98px) {
    .cbim-news-feature-media img {
        height: 280px;
    }

    .cbim-news-side-thumb {
        flex-basis: 110px;
    }

        .cbim-news-side-thumb img {
            width: 110px;
            height: 80px;
        }
}

@media (max-width: 575.98px) {
    .cbim-news-side-item {
        gap: .75rem;
    }

    .cbim-news-feature-media img {
        height: 240px;
    }
}
/* NOTICIAS */

.news-featured-img img {
    width: 100%;
    height: auto;
    display: block;
}

.news-featured-body {
    margin-top: 1rem;
}

.news-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.news-lead {
    color: #555;
    font-size: .95rem;
}

.news-date {
    font-size: .8rem;
    color: #999;
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.news-item {
    display: flex;
    gap: .75rem;
}

.news-thumb img {
    width: 90px;
    height: 70px;
    object-fit: cover;
}

.news-item-title {
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .25rem;
}
/* =========================
   DONACIONES (versión convocante)
   ========================= */

.cbim-donate.cbim-donate--full {
    background: #145c4e;
    position: relative;
}

    /* textura/gradiente sutil para que no se vea plano */
    .cbim-donate.cbim-donate--full::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(1200px 500px at 20% 10%, rgba(255,255,255,.10), transparent 55%), radial-gradient(900px 450px at 80% 90%, rgba(0,0,0,.18), transparent 60%), linear-gradient(90deg, rgba(0,0,0,.10), rgba(0,0,0,.00) 45%, rgba(0,0,0,.18));
        pointer-events: none;
    }

    /* mantener contenido arriba de la textura */
    .cbim-donate.cbim-donate--full .container,
    .cbim-donate.cbim-donate--full .cbim-donate-wrap {
        position: relative;
        z-index: 1;
    }

    .cbim-donate.cbim-donate--full .cbim-donate-wrap {
        display: grid;
        grid-template-columns: 1.1fr .9fr;
        gap: 2.25rem;
        align-items: stretch;
    }

    .cbim-donate.cbim-donate--full .cbim-donate-panel {
        padding: 3rem 0;
        color: rgba(255,255,255,.92);
    }

.cbim-donate-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cbim-donate-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .7rem;
    border: 1px solid rgba(255,255,255,.20);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    letter-spacing: .12em;
    font-weight: 700;
    font-size: .75rem;
}

.cbim-donate-trust {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    opacity: .92;
}

.cbim-donate-trust-item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .9rem;
}

    .cbim-donate-trust-item i {
        color: rgba(255,193,7,.95);
    }

.cbim-donate-title {
    font-size: 2rem;
    line-height: 1.12;
    font-weight: 800;
    margin: 0 0 .75rem 0;
    text-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.cbim-donate-highlight {
    color: rgba(255,193,7,.98);
}

.cbim-donate-lead {
    max-width: 58ch;
    font-size: 1.02rem;
    margin: 0 0 1.35rem 0;
    color: rgba(255,255,255,.86);
}

.cbim-donate-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
    margin: 0 0 1.75rem 0;
}

.cbim-donate-point {
    display: flex;
    gap: .75rem;
    padding: .85rem .9rem;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.10);
    backdrop-filter: blur(2px);
}

    .cbim-donate-point i {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255,255,255,.18);
        background: rgba(255,255,255,.06);
        color: rgba(255,193,7,.98);
        font-size: 1rem;
        flex: 0 0 34px;
    }

.cbim-donate-muted {
    color: rgba(255,255,255,.78);
    font-size: .92rem;
    margin-top: .2rem;
}

.cbim-donate-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    margin-top: .25rem;
}

.cbim-donate-cta {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.25rem;
    font-weight: 800;
    text-decoration: none;
    background: rgba(255,193,7,.98);
    color: #1b1b1b;
    box-shadow: 0 14px 34px rgba(0,0,0,.28);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

    .cbim-donate-cta:hover {
        transform: translateY(-2px);
        filter: brightness(1.02);
        box-shadow: 0 18px 44px rgba(0,0,0,.34);
    }

.cbim-donate-secondary {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: rgba(255,255,255,.92);
    text-decoration: none;
    font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,.35);
    padding-bottom: .15rem;
}

    .cbim-donate-secondary:hover {
        border-bottom-color: rgba(255,193,7,.85);
        color: #fff;
    }

.cbim-donate-footnote {
    margin-top: 1.15rem;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    color: rgba(255,255,255,.74);
    font-size: .92rem;
}

    .cbim-donate-footnote i {
        margin-top: .15rem;
        color: rgba(255,193,7,.92);
    }

/* Imagen derecha integrada */
.cbim-donate-media {
    min-height: 520px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.10);
}

    /* overlay para legibilidad global */
    .cbim-donate-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(20,92,78,.15), rgba(0,0,0,.42));
    }

/* Responsive */
@media (max-width: 991.98px) {
    .cbim-donate.cbim-donate--full .cbim-donate-wrap {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .cbim-donate.cbim-donate--full .cbim-donate-panel {
        padding: 2.25rem 0 1.25rem 0;
    }

    .cbim-donate-media {
        min-height: 280px;
    }

    .cbim-donate-grid {
        grid-template-columns: 1fr;
    }

    .cbim-donate-title {
        font-size: 1.65rem;
    }
}
/* =========================
   MAPA FULL WIDTH + FADES
   ========================= */

/* MAPA FULL WIDTH */
.cbim-map {
    position: relative;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: #000; /* evita blancos al cargar */
    overflow: hidden;
}

.cbim-map-wrap {
    position: relative;
    width: 100%;
    height: clamp(360px, 52vw, 560px);
}

    /* Quitar fades (por si quedaron definidos antes) */
    .cbim-map-wrap::before,
    .cbim-map-wrap::after {
        content: none !important;
    }

    /* Iframe full */
    .cbim-map-wrap iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
        /* Escala de grises + ajuste sutil */
        filter: grayscale(100%) contrast(1.05) brightness(0.95);
    }
    /* MAPA EN SEPIA */
    .cbim-map-wrap iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
        /* Estilo sepia institucional */
        filter: sepia(65%) saturate(115%) contrast(1.05) brightness(0.95);
    }

footer, .cbim-footer {
    margin-top: 0 !important;
}
/* ====== QUIÉNES SOMOS: look & feel tipo index ====== */
.cbim-hero--split {
    padding: 28px 0 10px;
    background: #0b3b2f;
}

.cbim-hero-panel {
    background: linear-gradient(135deg, rgba(7,68,54,.95), rgba(10,92,72,.92));
    border-radius: 22px;
    padding: 34px 28px;
    color: #fff;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
    position: relative;
    overflow: hidden;
}

    .cbim-hero-panel:before {
        content: "";
        position: absolute;
        inset: -60px -60px auto auto;
        width: 220px;
        height: 220px;
        background: radial-gradient(circle, rgba(255,193,7,.22), transparent 60%);
        transform: rotate(12deg);
    }

.cbim-hero-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cbim-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: .03em;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
}

.cbim-badge--soft {
    background: rgba(255,255,255,.10);
}

.cbim-hero-title {
    font-size: 44px;
    line-height: 1.05;
    font-weight: 800;
}

.cbim-hero-subtitle {
    color: rgba(255,255,255,.82);
    max-width: 44ch;
}

.cbim-quote {
    border-left: 4px solid rgba(255,193,7,.9);
    padding-left: 14px;
}

.cbim-quote-kicker {
    font-size: 12px;
    opacity: .85;
    font-weight: 700;
    letter-spacing: .08em;
}

.cbim-quote-text {
    font-size: 18px;
    font-weight: 800;
}

.cbim-btn-pill {
    border-radius: 999px;
    padding: 10px 16px;
}

.cbim-hero-footnote {
    font-size: 13px;
    color: rgba(255,255,255,.78);
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: 14px;
}

.cbim-hero-media {
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
    background: #0a2f26;
}

    .cbim-hero-media img {
        width: 100%;
        height: 100%;
        min-height: 360px;
        object-fit: cover;
        transform: scale(1.02);
    }

    .cbim-hero-media:after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55));
    }

.cbim-hero-media-caption {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    z-index: 2;
    color: rgba(255,255,255,.92);
    font-size: 12px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.12);
    padding: 10px 12px;
    border-radius: 14px;
    backdrop-filter: blur(6px);
}

.cbim-breadcrumbs {
    color: rgba(255,255,255,.75);
    font-size: 13px;
    padding: 12px 2px 0;
}

    .cbim-breadcrumbs a {
        color: rgba(255,255,255,.92);
        text-decoration: none;
    }

    .cbim-breadcrumbs span {
        margin: 0 6px;
        opacity: .7;
    }

.cbim-section-head .cbim-section-title {
    font-weight: 800;
    font-size: 28px;
    margin: 0;
}

.cbim-section-head .cbim-section-lead {
    color: #667085;
}

.cbim-card {
    background: #fff;
    border: 1px solid rgba(16,24,40,.08);
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(16,24,40,.06);
}

.cbim-card--soft {
    background: linear-gradient(180deg, rgba(16,185,129,.07), rgba(16,185,129,.03));
}

.cbim-metric-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid rgba(16,24,40,.08);
    border-radius: 18px;
    padding: 16px 16px;
    box-shadow: 0 12px 28px rgba(16,24,40,.06);
}

.cbim-metric-ico {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16,185,129,.10);
    color: #0b6b52;
    font-size: 18px;
}

.cbim-metric-title {
    font-size: 12px;
    letter-spacing: .08em;
    font-weight: 800;
    color: #667085;
    text-transform: uppercase;
}

.cbim-metric-value {
    font-size: 16px;
    font-weight: 800;
    color: #101828;
}

.cbim-metric-muted {
    font-size: 13px;
    color: #667085;
}

.cbim-surface {
    background: #f6f8fb;
}

.cbim-acta {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(16,24,40,.08);
    box-shadow: 0 18px 40px rgba(16,24,40,.08);
    background: #fff;
}

.cbim-acta-ribbon {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: linear-gradient(90deg, rgba(7,68,54,.95), rgba(10,92,72,.92));
    color: #fff;
    font-weight: 800;
}

.cbim-acta-body {
    padding: 18px 22px 22px;
}

.cbim-acta-highlight {
    margin: 16px 0;
    border-radius: 16px;
    border: 1px solid rgba(255,193,7,.45);
    background: rgba(255,193,7,.10);
    padding: 14px 14px;
}

.cbim-acta-highlight-title {
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cbim-acta-highlight-text {
    font-weight: 700;
}

.cbim-pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cbim-pill {
    display: inline-flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(16,185,129,.10);
    border: 1px solid rgba(16,185,129,.18);
    color: #0b6b52;
    font-weight: 700;
    font-size: 13px;
}

.cbim-gallery-surface {
    background: linear-gradient(180deg, #ffffff, #f6f8fb);
}

.cbim-gallery-item {
    display: block;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 16px 36px rgba(16,24,40,.10);
    transform: translateZ(0);
    text-decoration: none;
}

    .cbim-gallery-item img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        transition: transform .35s ease;
    }

    .cbim-gallery-item:hover img {
        transform: scale(1.05);
    }

.cbim-gallery-cap {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    color: #fff;
    background: rgba(0,0,0,.40);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(6px);
    font-weight: 800;
    font-size: 12px;
}

/* Responsive */
@media (max-width: 991px) {
    .cbim-hero-title {
        font-size: 36px;
    }

    .cbim-hero-media img {
        min-height: 280px;
    }
}
/* ===== Page Head (full width, simple) ===== */
.cbim-pagehead {
    background-size: cover;
    background-position: center;
    min-height: 230px;
    border-radius: 18px;
    overflow: hidden;
    margin-top: 14px;
}

.cbim-pagehead__overlay {
    min-height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.50);
    text-align: center;
    padding: 28px 0;
}

.cbim-pagehead__title {
    color: #fff;
    font-weight: 800;
    letter-spacing: .2px;
    margin: 0 0 8px;
    font-size: 44px;
}

.cbim-pagehead__crumbs {
    color: rgba(255,255,255,.85);
    font-size: 14px;
}

    .cbim-pagehead__crumbs a {
        color: rgba(255,255,255,.95);
        text-decoration: none;
    }

        .cbim-pagehead__crumbs a:hover {
            text-decoration: underline;
        }

/* ===== Section Head / Typography ===== */
.cbim-h2 {
    font-weight: 850;
    font-size: 34px;
}

.cbim-lead {
    color: #667085;
    font-size: 15px;
}

.cbim-prose p {
    color: #101828;
    line-height: 1.7;
}

/* ===== Quote ===== */
.cbim-quote {
    border-left: 4px solid rgba(255,193,7,.95);
    padding-left: 14px;
}

.cbim-quote__kicker {
    font-size: 12px;
    letter-spacing: .08em;
    font-weight: 900;
    color: #667085;
}

.cbim-quote__text {
    font-size: 18px;
    font-weight: 900;
    color: #101828;
}

/* ===== Media Card ===== */
.cbim-media-card {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 36px rgba(16,24,40,.10);
    border: 1px solid rgba(16,24,40,.08);
    background: #fff;
}

    .cbim-media-card img {
        width: 100%;
        height: 420px;
        object-fit: cover;
    }

/* ===== Banner intermedio ===== */
.cbim-banner {
    background-size: cover;
    background-position: center;
    border-radius: 18px;
    overflow: hidden;
    margin: 0 0;
}

.cbim-banner__overlay {
    background: linear-gradient(90deg, rgba(7,68,54,.92), rgba(7,68,54,.75));
    padding: 48px 0;
}

.cbim-banner__kicker {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.92);
    font-weight: 800;
    letter-spacing: .08em;
    font-size: 12px;
    margin-bottom: 10px;
}

.cbim-banner__title {
    color: #fff;
    font-weight: 900;
    font-size: 28px;
}

.cbim-banner__text {
    color: rgba(255,255,255,.86);
    line-height: 1.7;
}

.cbim-banner__cards {
    display: grid;
    gap: 10px;
}

.cbim-mini-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.92);
}

    .cbim-mini-card i {
        font-size: 18px;
    }

    .cbim-mini-card .t {
        font-weight: 900;
        font-size: 13px;
    }

    .cbim-mini-card .s {
        font-size: 12px;
        opacity: .85;
    }

/* ===== Mensajes Director/Capitán ===== */
.cbim-photo-frame {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 36px rgba(16,24,40,.10);
    border: 1px solid rgba(16,24,40,.08);
    background: #fff;
}

    .cbim-photo-frame img {
        width: 100%;
        height: 420px;
        object-fit: cover;
    }

.cbim-message {
    padding: 12px 4px;
}

.cbim-message__role {
    font-weight: 900;
    letter-spacing: .10em;
    font-size: 12px;
    color: #667085;
}

.cbim-message__name {
    font-weight: 900;
    font-size: 34px;
    margin: 0;
}

.cbim-message p {
    line-height: 1.7;
    color: #101828;
}

/* ===== Surface + Carousel ===== */
.cbim-surface {
    background: #f6f8fb;
}

.cbim-carousel .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.cbim-carousel__frame {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 36px rgba(16,24,40,.10);
    border: 1px solid rgba(16,24,40,.08);
    position: relative;
}

    .cbim-carousel__frame img {
        height: 520px;
        object-fit: cover;
    }

.cbim-carousel__caption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    background: rgba(0,0,0,.40);
    border: 1px solid rgba(255,255,255,.16);
    color: #fff;
    border-radius: 16px;
    padding: 12px 14px;
    backdrop-filter: blur(6px);
}

    .cbim-carousel__caption .t {
        font-weight: 900;
    }

    .cbim-carousel__caption .s {
        opacity: .9;
        font-size: 13px;
    }

/* Responsive tweaks */
@media (max-width: 991px) {
    .cbim-pagehead__title {
        font-size: 34px;
    }

    .cbim-media-card img,
    .cbim-photo-frame img {
        height: 320px;


    }

    .cbim-carousel__frame img {
        height: 360px;
    }

    .cbim-h2 {
        font-size: 28px;
    }
}
.cbim-banner {
    border-radius: 0 !important;
    margin: 0;
}

.cbim-banner__overlay {
    padding: 120px 0; /* duplica altura actual */
}

.cbim-banner__title {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.2;
}

.cbim-banner__text {
    font-size: 18px;
    line-height: 1.8;
    max-width: 900px;
}

.cbim-media-card,
.cbim-photo-frame {
    border-radius: 0 !important;
}
/* ===== CTA Postulación (institucional, serio) ===== */
.cbim-cta {
    background-size: cover;
    background-position: center;
    border-radius: 0;
    overflow: hidden;
}

.cbim-cta__overlay {
    background: linear-gradient(90deg, rgba(7,68,54,.96), rgba(7,68,54,.78));
    padding: 90px 0;
}

.cbim-cta__kicker {
    display: inline-block;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.92);
    font-weight: 900;
    letter-spacing: .10em;
    font-size: 12px;
    margin-bottom: 10px;
}

.cbim-cta__title {
    color: #fff;
    font-weight: 950;
    font-size: 40px;
    line-height: 1.15;
}

.cbim-cta__text {
    color: rgba(255,255,255,.88);
    font-size: 16px;
    line-height: 1.85;
    max-width: 55ch;
}

.cbim-cta__note {
    margin-top: 18px;
    color: rgba(255,255,255,.86);
    font-size: 13px;
    line-height: 1.7;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.12);
}

/* Cards */
.cbim-cta-card {
    border-radius: 0;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 16px 36px rgba(0,0,0,.18);
    overflow: hidden;
}

.cbim-cta-card--accent {
    background: rgba(255,193,7,.10);
    border-color: rgba(255,193,7,.35);
}

.cbim-cta-card__head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 18px 12px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.cbim-cta-card__ico {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.92);
    font-size: 18px;
    border-radius: 0;
}

.cbim-cta-card__title {
    color: #fff;
    font-weight: 900;
    font-size: 18px;
    margin-top: 2px;
}

.cbim-cta-card__sub {
    color: rgba(255,255,255,.78);
    font-size: 13px;
    line-height: 1.5;
}

.cbim-cta-card__body {
    padding: 14px 18px 18px;
}

.cbim-cta-list {
    margin: 0 0 14px;
    padding-left: 18px;
    color: rgba(255,255,255,.86);
    line-height: 1.75;
    font-size: 14px;
}

    .cbim-cta-list li {
        margin-bottom: 8px;
    }

    .cbim-cta-list strong {
        color: #fff;
        font-weight: 900;
    }

.cbim-cta-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Botones sin redondeo */
.cbim-btn-flat {
    border-radius: 0 !important;
    padding: 10px 14px;
    font-weight: 800;
}

/* Responsive */
@media (max-width: 991px) {
    .cbim-cta__overlay {
        padding: 70px 0;
    }

    .cbim-cta__title {
        font-size: 30px;
    }
}
/* ================================
   PAGE HEADER - QUIÉNES SOMOS
   ================================ */

.cbim-pagehead {
    min-height: 460px; /* ⬅️ el doble aprox */
    background-size: cover;
    background-position: center;
    border-radius: 0 !important; /* ⬅️ sin bordes redondeados */
    margin-top: 0;
    overflow: hidden;
}

.cbim-pagehead__overlay {
    min-height: 460px; /* ⬅️ asegura altura completa */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55); /* overlay institucional */
    text-align: center;
    padding: 40px 0;
}

/* Título */
.cbim-pagehead__title,
.cbim-pagehead h1 {
    color: #ffffff;
    font-weight: 900;
    font-size: 48px; /* ⬅️ más jerarquía */
    letter-spacing: .3px;
    margin-bottom: 10px;
}

/* Breadcrumb */
.cbim-pagehead__crumbs,
.cbim-pagehead nav,
.cbim-pagehead .breadcrumb {
    color: rgba(255,255,255,.9);
    font-size: 14px;
}

.cbim-pagehead a {
    color: rgba(255,255,255,.95);
    text-decoration: none;
}

    .cbim-pagehead a:hover {
        text-decoration: underline;
    }

/* Responsive */
@media (max-width: 991px) {
    .cbim-pagehead,
    .cbim-pagehead__overlay {
        min-height: 320px;
    }

        .cbim-pagehead__title,
        .cbim-pagehead h1 {
            font-size: 34px;
        }
}
/* ===== Banner "Nuestra labor hoy" versión armónica (no invasiva) ===== */
.cbim-banner--soft {
    background-size: cover;
    background-position: center;
    border-radius: 0 !important; /* según tu línea de diseño */
    overflow: hidden;
}

    /* Overlay más sobrio y menos “duro” */
    .cbim-banner--soft .cbim-banner__overlay {
        background: linear-gradient(90deg, rgba(7,68,54,.88), rgba(7,68,54,.62));
        padding: 70px 0; /* menos invasivo que 120px, pero amplio */
    }

/* Contenedor visual: da “marco” sin parecer card agresivo */
.cbim-banner__wrap {
    max-width: 980px; /* limita el ancho para lectura elegante */
    margin: 0 auto;
}

/* Header del bloque */
.cbim-banner__kicker {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.92);
    font-weight: 900;
    letter-spacing: .10em;
    font-size: 12px;
    margin-bottom: 14px;
}

.cbim-banner__head {
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,.14);
}

.cbim-banner__title {
    color: #fff;
    font-weight: 950;
    font-size: 34px;
    line-height: 1.2;
    margin: 0 0 10px;
}

.cbim-banner__lead {
    color: rgba(255,255,255,.86);
    font-size: 16px;
    line-height: 1.7;
}

/* Cuerpo */
.cbim-banner__body {
    color: rgba(255,255,255,.86);
    font-size: 15px;
    line-height: 1.85;
}

    .cbim-banner__body p {
        margin-bottom: 14px;
    }

    .cbim-banner__body strong {
        color: #fff;
        font-weight: 900;
    }

/* Motto final: sobrio, institucional */
.cbim-banner__motto {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cbim-banner__mottoLine {
    height: 1px;
    flex: 1;
    background: rgba(255,193,7,.85); /* acento institucional (amarillo) */
    opacity: .9;
}

.cbim-banner__mottoText {
    color: #fff;
    font-weight: 950;
    letter-spacing: .02em;
    font-size: 18px;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 991px) {
    .cbim-banner--soft .cbim-banner__overlay {
        padding: 55px 0;
    }

    .cbim-banner__title {
        font-size: 28px;
    }

    .cbim-banner__wrap {
        max-width: 100%;
    }
}
/* =========================================
   FIX CONTRASTE - BANNER "SERVICIO BOMBERIL HOY"
   ========================================= */

.cbim-banner--soft .cbim-banner__overlay {
    /* Overlay más oscuro y “limpio” para lectura */
    background: linear-gradient( 90deg, rgba(5, 45, 36, 0.96), rgba(5, 45, 36, 0.86) ) !important;
}

/* Título: blanco sólido y más legible */
.cbim-banner--soft .cbim-banner__title {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* Lead y cuerpo: blanco con opacidad alta (no gris) */
.cbim-banner--soft .cbim-banner__lead,
.cbim-banner--soft .cbim-banner__body {
    color: rgba(255,255,255,.92) !important;
    text-shadow: 0 1px 8px rgba(0,0,0,.28);
}

/* Párrafos: un poco más grandes para lectura real */
.cbim-banner--soft .cbim-banner__body {
    font-size: 16px !important;
    line-height: 1.9 !important;
}

    /* Párrafos y listas: asegurar color */
    .cbim-banner--soft .cbim-banner__body p,
    .cbim-banner--soft .cbim-banner__body li {
        color: rgba(255,255,255,.92) !important;
    }

    /* Negritas realmente destacadas */
    .cbim-banner--soft .cbim-banner__body strong {
        color: #ffffff !important;
        font-weight: 900 !important;
    }

/* Kicker: mejor contraste */
.cbim-banner--soft .cbim-banner__kicker {
    color: rgba(255,255,255,.95) !important;
    background: rgba(255,255,255,.14) !important;
    border-color: rgba(255,255,255,.20) !important;
}

/* Motto final: más “institucional”, sin perder legibilidad */
.cbim-banner--soft .cbim-banner__mottoText {
    color: #ffffff !important;
    text-shadow: 0 1px 8px rgba(0,0,0,.28);
}
/* =========================================
   AJUSTE DE ANCHO / RESPIRACIÓN (sin tocar contraste)
   ========================================= */

/* 1) Asegura que el contenedor del banner use el ancho estándar del sitio */
.cbim-banner--soft .container {
    max-width: 1320px; /* equivalente al container-xxl de Bootstrap */
}

/* 2) Si tu overlay o wrapper tenía padding excesivo, lo normalizamos */
.cbim-banner--soft .cbim-banner__overlay {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 3) Control de padding interno real del contenido (armonía con bloque superior) */
.cbim-banner--soft .cbim-banner__wrap {
    max-width: 1200px; /* texto ancho, pero aún editorial */
    margin: 0; /* evita centrado “encajonado” si no lo quieres */
    padding: 0 24px; /* respiración lateral pareja */
}

/* 4) En pantallas muy grandes, estira un poco más */
@media (min-width: 1400px) {
    .cbim-banner--soft .cbim-banner__wrap {
        max-width: 1320px;
        padding: 0 32px;
    }
}

/* 5) En móvil, que no quede apretado */
@media (max-width: 575px) {
    .cbim-banner--soft .cbim-banner__wrap {
        padding: 0 16px;
    }
}
.cbim-banner--soft .cbim-banner__wrap {
    max-width: none;
    margin: 0;
    padding: 0; /* deja que el container mande */
}

.cbim-banner--soft .cbim-banner__overlay {
    padding: 70px 0 !important;
}
/* ================================
   ESPECIALIDADES - ESTILOS
   ================================ */

.cbim-pagehead--tall,
.cbim-pagehead--tall .cbim-pagehead__overlay {
    min-height: 460px;
    border-radius: 0 !important;
}

/* Fondo “surface” suave (ya lo usas en Quiénes Somos) */
.cbim-surface {
    background: #f7f8f9;
}

/* Imagen estilo “slab” (recta, limpia, profesional) */
.cbim-media-slab {
    border-radius: 0 !important;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0,0,0,.08);
}

    .cbim-media-slab img {
        width: 100%;
        height: auto;
        display: block;
    }

/* Chips resumen */
.cbim-spec-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    border-radius: 0;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.08);
    text-decoration: none;
    color: inherit;
    box-shadow: 0 10px 26px rgba(0,0,0,.05);
    transition: transform .15s ease, box-shadow .15s ease;
}

    .cbim-spec-chip:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 34px rgba(0,0,0,.08);
    }

.cbim-spec-chip__ico {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(7,68,54,.10);
    border: 1px solid rgba(7,68,54,.18);
    color: rgba(7,68,54,1);
    font-size: 18px;
}

.cbim-spec-chip__title {
    display: block;
    font-weight: 900;
    font-size: 14px;
}

.cbim-spec-chip__sub {
    display: block;
    font-size: 12px;
    color: rgba(0,0,0,.60);
}

.cbim-spec-chip__go {
    margin-left: auto;
    color: rgba(0,0,0,.50);
}

/* Encabezado de especialidad */
.cbim-spec-head {
    border-left: 4px solid rgba(7,68,54,1);
    padding-left: 14px;
}

.cbim-spec-kicker {
    font-weight: 900;
    letter-spacing: .10em;
    font-size: 12px;
    color: rgba(7,68,54,1);
    margin-bottom: 6px;
}

.cbim-spec-title {
    font-weight: 950;
    font-size: 30px;
    line-height: 1.2;
    margin: 0 0 10px;
}

.cbim-spec-ico {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    background: rgba(7,68,54,.10);
    border: 1px solid rgba(7,68,54,.18);
    margin-right: 10px;
    border-radius: 0;
}

.cbim-spec-lead {
    color: rgba(0,0,0,.70);
    line-height: 1.75;
}

/* Cajas de detalle */
.cbim-spec-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 992px) {
    .cbim-spec-grid {
        grid-template-columns: 1fr;
    }
}

.cbim-spec-box {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 0;
    padding: 14px 14px;
}

.cbim-spec-box__t {
    font-weight: 900;
    margin-bottom: 8px;
    color: rgba(0,0,0,.85);
}

.cbim-spec-list {
    margin: 0;
    padding-left: 18px;
    color: rgba(0,0,0,.72);
    line-height: 1.75;
}

    .cbim-spec-list li {
        margin-bottom: 6px;
    }

/* Objetivo */
.cbim-spec-goal {
    background: rgba(7,68,54,.06);
    border: 1px solid rgba(7,68,54,.16);
    border-left: 4px solid rgba(7,68,54,1);
    border-radius: 0;
    padding: 14px;
}

.cbim-spec-goal__t {
    font-weight: 950;
    color: rgba(7,68,54,1);
    margin-bottom: 6px;
}

.cbim-spec-goal__p {
    color: rgba(0,0,0,.78);
    line-height: 1.75;
}

/* CTA especialidades (mismo estándar que el CTA serio que ya trabajamos) */
.cbim-cta--spec {
    border-radius: 0 !important;
    background-size: cover;
    background-position: center;
}

    .cbim-cta--spec .cbim-cta__overlay {
        background: linear-gradient(90deg, rgba(5,45,36,.96), rgba(5,45,36,.80));
        padding: 70px 0;
    }
/* ================================
   Font Awesome alignment (fa fa-)
   ================================ */

.cbim-spec-chip__ico .fa,
.cbim-spec-ico .fa,
.cbim-spec-chip__go .fa,
.cbim-cta .fa {
    display: inline-block;
    line-height: 1;
}

/* tamaño de los íconos en chips */
.cbim-spec-chip__ico .fa {
    font-size: 18px;
}

/* tamaño ícono en título de especialidad */
.cbim-spec-ico .fa {
    font-size: 16px;
}

/* arrow right del chip */
.cbim-spec-chip__go .fa {
    font-size: 14px;
    opacity: .85;
}
/* ================================
   Font Awesome alignment (fa fa-)
   ================================ */

.cbim-spec-chip__ico .fa,
.cbim-spec-ico .fa,
.cbim-spec-chip__go .fa,
.cbim-cta .fa {
    display: inline-block;
    line-height: 1;
}

/* tamaño de los íconos en chips */
.cbim-spec-chip__ico .fa {
    font-size: 18px;
}

/* tamaño ícono en título de especialidad */
.cbim-spec-ico .fa {
    font-size: 16px;
}

/* arrow right del chip */
.cbim-spec-chip__go .fa {
    font-size: 14px;
    opacity: .85;
}