/* Generado por Font Web Packager */
@font-face {
    font-family: 'kbc--font';
    src: url('../fonts/font-package/fonts/svly7-700.eot');
    src: url('../fonts/font-package/fonts/svly7-700.eot?#iefix') format('embedded-opentype'),
        url('../fonts/font-package/fonts/svly7-700.woff2') format('woff2'),
        url('../fonts/font-package/fonts/svly7-700.woff') format('woff'),
        url('../fonts/font-package/fonts/svly7-700.ttf') format('truetype'),
        url('../fonts/font-package/fonts/svly7-700.svg#svly7-700') format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


.kbc--font{
    font-family: 'kbc--font';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    font-size: 120px;
    line-height: .9;
    color: #161616;
    text-transform: uppercase;
}
/* Escala de titulares — reutilizar SIEMPRE estos modificadores, no crear nuevos */
.kbc--font-xl{ font-size: 160px; }
.kbc--font-lg{ font-size: 140px; }
.kbc--font-md{ font-size: 90px;  }
.kbc--font-sm{ font-size: 80px;  }
.kbc--font-xs{ font-size: 40px;  }

/* Colores de titular */
.kbc--red{
    color: #D84545;
}
.kbc--white{
    color: #FFFFFF;
}
/* rosa: solo para titulares sobre fondo rojo (odessa / wesley) */
.kbc--pink{
    color: #FFB9B9;
}

.kbc-hero-std {
    position: relative;
    height: calc(100vh + 50px);
    min-height: 560px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 100px;
    overflow: hidden;
}

/* ============================================================
   KBC — ESTILOS DE PAGINAS (Home, Gospel, Plan a Visit)
   Consolidado de los <style> inline de los 3 blades del front.
   Reutiliza las variables kbc-* de style.css. Sin duplicidad.
   ============================================================ */

/* ===== UTILIDADES / COMUNES (antes duplicadas entre paginas) ===== */

/* estaba repetida en index y gospel */
.height-100 {
    height: calc(100vh + 50px);
}

/* imagen "cover" — antes repetida en plan-a-visit (x4) y en gospel (.video-thumb img) */
.visit-polaroid img,
.visit-first__media img,
.visit-faq__media img,
.visit-map img,
.video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ============================================================
   HOME (index)
   ============================================================ */
.floating-svg1 {
    position: absolute;
    left: 0;
    width: 33%;
}







/* ============================================================
   GOSPEL
   ============================================================ */

.hero--section__bg {
    position: absolute;
    left: 0;
    top: -8%;
    width: 100%;
    height: 120%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    will-change: transform;
}

.hero--section .container {
    position: relative;
    z-index: 2;
}

.bg--red {
    background-color: var(--kbc-accent);
}

.section-mod {
    padding: 120px 0;
}

/* Fondos de seccion reutilizables. OJO: data-bg NO pinta, solo le dice al
   header si el logo va claro u oscuro (ver customgsap_v2.js). */
.kbc-bg-mist  { background-color: #EDEDED; }
.kbc-bg-bone  { background-color: var(--kbc-bone); }
.kbc-bg-white { background-color: var(--kbc-white); }

p.lead {
    font-size: 24px !important;
}

p.lead b {
    font-weight: 700;
}

.bg-w {
    border-color: var(--kbc-white);
}

.kbc--list {
    list-style: decimal;
    padding: 0 0 0 25px; 
}

.kbc--list li {
    font-size: 20px;
    color: var(--kbc-white);
    margin-bottom: 15px;
    font-weight: 300 !important;
}

.kbc--list li b {
    font-weight: 600;
}

.d-flex.x2 {
    flex-wrap: wrap;
    gap: 70px 40px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.d-flex.x2 li {
    width: calc(50% - 20px);
}
.d-flex.x2 li hr{
    margin-top: 10px !important;
    border-top: var(--kbc-accent) solid;
    border-width: 1px;
    opacity: .8;

}
.d-flex.x2 li h4 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 0px;
}

.d-flex.x2 li p {
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

.absolute--cross {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    width: 35%;
}

/* grid de videos */
.video-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.video-card {
    width: calc(25% - 23px);
    text-decoration: none;
    display: block;
    background: #fff;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #dedede;
}

.video-thumb {
    position: relative;
    aspect-ratio: 16/9;
}

.video-duration {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
}

.play-btn {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    transition: .3s;
}

.video-card:hover .play-btn {
    transform: translate(-50%, -50%) scale(1.08);
}

.video-content {
    padding: 18px 20px 32px 20px;
}

.video-content h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
}


/* ============================================================
   PLAN A VISIT
   ============================================================ */

/* ----- base ----- */
.kbc-visit {
    font-family: var(--kbc-font-sans);
    color: #141B34;
    background: var(--kbc-white);
}

.kbc-visit .container-xxl {
    max-width: 1366px;
}

.kbc-visit .svg-title {
    display: block;
    height: auto;
    max-width: 100%;
}

.kbc-visit .display-title {
    font-family: var(--kbc-font-display);
    text-transform: uppercase;
    line-height: .9;
    letter-spacing: .5px;
}

.text-red {
    color: var(--kbc-accent);
}

/* color de cuerpo unificado (#141B34) — antes en 6 reglas distintas */
.visit-intro__lead,
.visit-first p,
.visit-locations__intro,
.visit-loc p,
.visit-faq__intro,
.faq-item__body {
    color: #141B34;
}

/* contenedor de foto con esquinas redondeadas — antes en 2 reglas */
.visit-first__media,
.visit-faq__media {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

/* ----- 1) HERO ----- */

/* mayor especificidad que el `.swiper { position:relative }` del CSS de Swiper,
   que carga despues y si no lo colapsaria a height 0 */
.visit-hero .visit-hero__slider {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.visit-hero__slider .swiper-slide {
    background-size: cover;
    background-position: center;
}

.visit-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(11, 11, 11, .38);
    pointer-events: none;
}

.visit-hero .container-xxl {
    position: relative;
    z-index: 2;
}

/* ----- 2) PLAN YOUR VISIT — rueda de imagenes (arco) + intro ----- */
.visit-intro {
    padding: 0 0 100px;
}

.visit-wheel {
    position: relative;
    width: 100%;
    height: 62vh;
    min-height: 440px;
    overflow: hidden;
    margin-bottom: 0;
}

.visit-polaroid {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 280px;
    height: 350px;
    margin: -175px 0 0 -140px;
    border-radius: 14px;
    overflow: hidden;
    opacity: 0;
    will-change: transform;
}

.visit-intro__cross {
    width: 60px;
    margin: 0 auto 24px;
    display: block;
}

.visit-intro__title {
    margin: 0 auto 28px;
}

.visit-intro__lead {
    font-size: 16px;
    max-width: 620px;
    margin: 0 auto 14px;
}

.visit-intro__hint {
    font-size: 20px;
    font-weight: 700;
    color: var(--kbc-accent);
}

/* ----- 3) YOUR FIRST VISIT ----- */
.visit-first {
    padding: 100px 0;
}

.visit-first__title {
    font-size: clamp(40px, 5vw, 72px);
    margin-bottom: 24px;
}

.visit-first p {
    margin-bottom: 18px;
}

.visit-specs {
    list-style: none;
    padding: 0;
    margin: 28px 0;
}

.visit-specs li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
    color: #000;
}

.visit-specs li>i {
    width: 20px;
    flex-shrink: 0;
    text-align: center;
    color: #000;
}

.visit-specs b {
    font-weight: 700;
}

.visit-specs .arrow {
    color: #000;
}

/* ----- 4) FIND A LOCATION ----- */
.visit-locations {
    position: relative;
    padding: 100px 0;
}

.visit-locations::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 25%, rgba(255, 255, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
}

.visit-locations__grid {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.visit-locations__text {
    position: relative;
    z-index: 2;
    flex: 1 1 420px;
    padding-left: max(24px, calc((100vw - 1320px) / 2));
    padding-right: 48px;
}

.visit-locations__map {
    flex: 1 1 560px;
}

/* mapa como imagen suelta: en desktop el mapa va de fondo en la seccion,
   asi que esta imagen solo se usa en mobile (ver responsive-mobile.css) */
.visit-locations__map-img {
    display: none;
}

.visit-locations__title {
    margin-bottom: 24px;
}

.visit-locations__intro {
    margin-bottom: 36px;
    max-width: 440px;
}

.visit-loc {
    margin-bottom: 48px;
}

.visit-loc h6 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

.visit-loc p {
    margin-bottom: 14px;
}

.visit-map {
    width: 100%;
}

.visit-map img {
    min-height: 520px;
}

/* ----- 5) WHAT ABOUT MY KIDS (parallax) ----- */
.visit-kids {
    position: relative;
    overflow: hidden;
    padding: 180px 0;
    text-align: center;
}

.visit-kids__bg {
    position: absolute;
    top: -12%;
    left: 0;
    width: 100%;
    height: 124%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    will-change: transform;
}

.visit-kids__overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 11, 11, .55);
    z-index: 1;
}

.visit-kids .container-xxl {
    position: relative;
    z-index: 2;
}

.visit-kids__title {
    margin: 0 auto 18px;
}

.visit-kids__sub {
    color: var(--kbc-white);
    font-size: 22px;
    margin-bottom: 22px;
}

.visit-kids__text {
    color: rgba(255, 255, 255, .86);
    max-width: 760px;
    margin: 0 auto;
}

/* ----- 6) THINKING ABOUT VISITING (FAQ acordeon + foto) ----- */
.visit-faq {
    padding: 100px 0;
}

.visit-faq__title {
    margin-bottom: 22px;
}

.visit-faq__intro {
    margin-bottom: 32px;
}

.faq-item {
    border-top: 1px solid var(--kbc-mist);
}

.faq-item:last-child {
    border-bottom: 1px solid var(--kbc-mist);
}

.faq-item>summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 4px;
    font-weight: 700;
    font-size: 18px;
    transition: color .25s var(--kbc-ease);
}

.faq-item>summary::-webkit-details-marker {
    display: none;
}

.faq-item>summary .faq-sign {
    color: #141B34;
    font-size: 26px;
    line-height: 1;
    transition: transform .25s var(--kbc-ease), color .25s var(--kbc-ease);
}

/* item abierto: pregunta y signo en rojo de marca */
.faq-item[open]>summary {
    color: var(--kbc-accent);
}

.faq-item[open]>summary .faq-sign {
    transform: rotate(45deg);
    color: var(--kbc-accent);
}

.faq-item__body {
    padding: 0 4px 22px;
    overflow: hidden;
}

/* ----- responsive (Plan a Visit) ----- */
@media (max-width: 767px) {
    .visit-polaroid {
        width: 150px;
        height: 190px;
    }

    .visit-intro__title,
    .visit-locations__title,
    .visit-faq__title {
        width: 100%;
    }

    .visit-first__media,
    .visit-faq__media {
        margin-bottom: 28px;
    }

    .visit-locations::before {
        display: none;
    }
}


/* ============================================================
   STAFF (Leadership and Staff)
   ============================================================ */
.kbc-staff {
    font-family: var(--kbc-font-sans);
    color: #141B34;
    background: var(--kbc-white);
}

.kbc-staff .container-xxl {
    max-width: 1366px;
}

/* ----- 1) HERO corto con parallax ----- */

.staff-hero {
    position: relative;
    height: 72vh;
    min-height: 440px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 56px;
    overflow: hidden;
}

/* el fondo es mas alto que el hero para tener recorrido de parallax */
.staff-hero__bg {
    position: absolute;
    top: -15%;
    left: 0;
    width: 100%;
    height: 130%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    will-change: transform;
}

.staff-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(11, 11, 11, .42);
    pointer-events: none;
}

.staff-hero .container-xxl {
    position: relative;
    z-index: 2;
}

/* titulo de hero unificado (heroes internos "tirados" abajo-izquierda) */
.hero-title {
    color: var(--kbc-white);
    font-family: "kbc--font";
    font-size: clamp(48px, 9vw, 150px);
    line-height: .9;
    margin: 0;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
}
.fz-100{
    font-size: 100px !important;
}
.leadp{
    color: var(--kbc-white);
    font-size: clamp(20px, 2.1vw, 24px);
    font-weight: 600;
    line-height: 1.25;
    max-width: 760px;
    margin: 0 auto;
}

/* titulo SVG de sermons (dentro del section, col-md-12): sin width/height */
.sermons-title-svg { display: block; max-width: 100%; }

/* ----- 2) TEAM: filtro (pills) + grid masonry ----- */
.staff-team {
    padding: 90px 0 110px;
}

.staff-team__layout {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

/* filtro vertical de pills (sticky para acompañar el grid largo) */
/* columna de ancho fijo: contiene el pin-spacer del filtro */
.staff-filter-col {
    flex: 0 0 280px;
    align-self: stretch;
}

.staff-filter {
    width: 280px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

/* pills: capsula como el diseno, tono plano, sin sombra ni gradiente */
.staff-filter__btn,
.staff-filter__clean {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border: 1px solid #141B34;
    border-radius: 999px;
    background: transparent;
    color: #141B34;
    font-family: var(--kbc-font-sans);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .2s var(--kbc-ease), color .2s var(--kbc-ease);
}

.staff-filter__btn:hover {
    background: #141B34;
    color: var(--kbc-white);
}

.staff-filter__btn.is-active {
    background: #141B34;
    color: var(--kbc-white);
}

.staff-filter__clean {
    margin-top: 6px;
    border-color: var(--kbc-mist);
    color: var(--kbc-accent);
}

.staff-filter__clean:hover {
    background: var(--kbc-accent);
    border-color: var(--kbc-accent);
    color: var(--kbc-white);
}

/* grid masonry: el sizer define el ancho de columna (1/3 en desktop) */
.staff-grid {
    flex: 1 1 auto;
    width: auto;
    margin: 0 -14px;
}

.staff-grid__sizer {
    width: 33.333%;
}

.staff-card {
    width: 33.333%;
    box-sizing: border-box;
    padding: 0 14px 34px;
}

.staff-card__media {
    position: relative;
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

.staff-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s var(--kbc-ease);
}

/* hover: zoom suave a la imagen */
.staff-card__media:hover img {
    transform: scale(1.06);
}

/* hover: marco de lineas en gradiente (inset). Si el navegador no soporta
   border-image cae al borde blanco solido de respaldo */
.staff-card__media::before {
    content: "";
    position: absolute;
    inset: 16px;
    z-index: 3;
    border: 1.5px solid rgba(255, 255, 255, .7);
    border-image: linear-gradient(140deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .12)) 1;
    opacity: 0;
    transition: opacity .35s var(--kbc-ease);
    pointer-events: none;
}

.staff-card__media:hover::before {
    opacity: 1;
}

/* nombre + rol SOBRE la foto, abajo-izquierda (como el Figma) */
.staff-card__info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 0 22px 18px;
    transition: transform .4s var(--kbc-ease);
}

/* hover: el nombre y rol suben un poco (mas dinamico) */
.staff-card__media:hover .staff-card__info {
    transform: translateY(-10px);
}

.staff-card__name {
    font-family: var(--kbc-font-sans);
    font-weight: 800;
    color: var(--kbc-white);
    font-size: clamp(32px, 3vw, 48px);
    line-height: .98;
    margin: 0 0 8px;
}

.staff-card__role {
    color: var(--kbc-white);
    font-size: 16px;
    line-height: 1.25;
    margin: 0;
}

/* "Learn more": pill rojo, oculto, aparece en hover (solo fade) */
.staff-card__more {
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    background: var(--kbc-accent);
    color: var(--kbc-white);
    padding: 9px 20px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .25s var(--kbc-ease);
    pointer-events: none;
}

.staff-card__media:hover .staff-card__more {
    opacity: 1;
}

/* ----- MODAL de bio (se abre al hacer click en una card) ----- */
.staff-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    visibility: hidden;
    pointer-events: none;
    /* al cerrar espera a que el dialog termine su salida antes de ocultarse */
    transition: visibility 0s linear .55s;
}

.staff-modal.is-open {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.staff-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 10, .6);
    opacity: 0;
    transition: opacity .4s var(--kbc-ease);
}

.staff-modal.is-open .staff-modal__overlay {
    opacity: 1;
}

/* dialog: entra desde abajo con translateY + fade (suave) */
.staff-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(1180px, 94vw);
    max-height: 92vh;
    overflow-y: auto;
    background: #0B0B0C;
    color: var(--kbc-white);
    border-radius: 10px 10px 0 0;
    display: flex;
    gap: 44px;
    padding: 40px 44px 44px;
    transform: translateY(70px);
    opacity: 0;
    transition: transform .55s var(--kbc-ease), opacity .55s var(--kbc-ease);
}

.staff-modal.is-open .staff-modal__dialog {
    transform: translateY(0);
    opacity: 1;
}

.staff-modal__media {
    flex: 0 0 38%;
    max-width: 440px;
}

.staff-modal__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}

.staff-modal__body {
    flex: 1 1 auto;
    position: relative;
    padding-top: 4px;
}

.staff-modal__social {
    display: flex;
    gap: 18px;
    margin-bottom: 40px;
}

.staff-modal__social a {
    color: var(--kbc-white);
    font-size: 18px;
    opacity: .85;
}

.staff-modal__social a:hover {
    opacity: 1;
}

.staff-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.staff-modal__name {
    font-family: var(--kbc-font-sans);
    font-weight: 800;
    font-size: 34px;
    line-height: 1;
    margin: 0 0 6px;
}

.staff-modal__role {
    font-style: italic;
    font-size: 16px;
    margin: 0;
    color: rgba(255, 255, 255, .9);
}

.staff-modal__badge {
    flex-shrink: 0;
    align-self: flex-start;
    background: rgba(255, 255, 255, .16);
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--kbc-white);
}

.staff-modal__bio {
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .85);
    margin: 0 0 40px;
    max-width: 680px;
}

.staff-modal__email {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--kbc-white);
    color: #0B0B0C;
    border-radius: 999px;
    padding: 11px 22px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

/* Boton cerrar: fondo solido para que se lea siempre sobre el contenido
   (antes era transparente y se perdia encima de las fotos). */
.staff-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: var(--kbc-white);
    color: #0B0B0C;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    transition: background-color .2s var(--kbc-ease), color .2s var(--kbc-ease);
}

.staff-modal__close:hover,
.staff-modal__close:focus {
    background: var(--kbc-accent);
    color: var(--kbc-white);
}

/* ----- responsive (Staff) ----- */
@media (max-width: 991px) {
    .staff-team__layout {
        flex-direction: column;
        gap: 28px;
    }

    .staff-filter {
        position: static;
        flex: 0 0 auto;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

    .staff-grid__sizer,
    .staff-card {
        width: 50%;
    }
}

@media (max-width: 575px) {

    .staff-grid__sizer,
    .staff-card {
        width: 100%;
    }

    .hero-title {
        font-size: clamp(40px, 12vw, 72px);
    }
}


/* ============================================================
   SERVE (Serve on Teams)
   ============================================================ */
.kbc-serve {
    font-family: var(--kbc-font-sans);
    color: #141B34;
    background: var(--kbc-white);
}

.kbc-serve .container-xxl {
    max-width: 1366px;
}

/* ----- 1) HERO corto, titulo centrado, parallax ----- */

.serve-hero__bg {
    position: absolute;
    top: -15%;
    left: 0;
    width: 100%;
    height: 130%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    will-change: transform;
}

.serve-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(11, 11, 11, .42);
    pointer-events: none;
}

.serve-hero .container-xxl {
    position: relative;
    z-index: 2;
}

/* ----- 2) SECCION 2 columnas (texto + boton / foto) ----- */
.serve-main {
    padding: 110px 0;
}

.serve-main__icon {
    width: 54px;
    margin-bottom: 26px;
    display: block;
}

.serve-main__title {
    margin-bottom: 30px;
    display: block;
}

.serve-main__lead {
    font-size: 16px;
    line-height: 1.6;
    color: #141B34;
    max-width: 560px;
    margin-bottom: 34px;
}

.serve-main__btn {
    display: inline-block;
    background: #111;
    color: var(--kbc-white);
    padding: 16px 30px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .2s var(--kbc-ease);
}

.serve-main__btn:hover {
    background: var(--kbc-accent);
}

.serve-main__media {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.serve-main__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 767px) {
    .serve-main {
        padding: 70px 0;
    }

    .serve-main__media {
        margin-top: 28px;
    }
}


/* ============================================================
   STUDIES (Grow in Studies)
   ============================================================ */
.kbc-studies {
    font-family: var(--kbc-font-sans);
    color: #141B34;
    background: var(--kbc-white);
}

.kbc-studies .container-xxl {
    max-width: 1366px;
}

/* ----- 1) HERO (estandar, igual a Staff/Serve) ----- */

.studies-hero__bg {
    position: absolute;
    top: -15%;
    left: 0;
    width: 100%;
    height: 130%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    will-change: transform;
}

.studies-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(11, 11, 11, .42);
    pointer-events: none;
}

.studies-hero .container-xxl {
    position: relative;
    z-index: 2;
}

/* ----- 2) INTRO ----- */
.studies-intro {
    padding: 100px 0 70px;
}

.studies-intro__head {
    max-width: 900px;
    margin: 0 auto 50px;
}

.studies-intro__icon {
    width: 54px;
    margin: 0 auto 26px;
    display: block;
}

.studies-intro__title {
    font-family: var(--kbc-font-display);
    text-transform: uppercase;
    font-size: clamp(30px, 3.6vw, 54px);
    line-height: 1.02;
    color: #141B34;
    margin: 0 0 26px;
}

.studies-intro__lead {
    font-size: 16px;
    line-height: 1.6;
    color: #141B34;
    max-width: 760px;
    margin: 0 auto;
}

.studies-intro__cols p {
    font-size: 16px;
    line-height: 1.6;
    color: #141B34;
    margin: 0;
}

/* ----- 3) CURRENT STUDIES OFFERED ----- */
.studies-current {
    padding: 30px 0 100px;
}

.studies-current__title {
    display: block;
    margin-bottom: 44px;
}

.studies-current__media {
    border-radius: 8px;
    overflow: hidden;
}

.studies-current__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.studies-current__info {
    padding-left: 24px;
}

.studies-current__subtitle {
    display: block;
    margin-bottom: 24px;
}

.studies-current__meta {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
}

.studies-current__meta li {
    font-size: 16px;
    line-height: 1.45;
    color: #141B34;
    margin-bottom: 10px;
}

.studies-current__meta b {
    font-weight: 700;
}

.studies-current__btn {
    display: inline-block;
    background: var(--kbc-bone);
    color: var(--kbc-ink);
    border: 1px solid var(--kbc-accent);
    border-radius: 4px;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .3s var(--kbc-ease), color .3s var(--kbc-ease);
}

.studies-current__btn:hover {
    background: var(--kbc-accent);
    color: var(--kbc-white);
}

/* ----- 4) ARCHIVED — carousel reutiliza .kbc-gather-carousel ----- */
.studies-archive {
    padding: 50px 0 120px;
    overflow: hidden;
}

.studies-archive__head {
    margin-bottom: 40px;
}

.studies-archive__title {
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 700;
    color: #141B34;
    margin: 0;
}

.studies-archive__badge {
    background: #111;
    color: var(--kbc-white);
    border: 0;
    border-radius: 6px;
    padding: 11px 22px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

/* alinea el primer card con el container; el carousel sigue full-width hacia la derecha */
.studies-archive__track {
    padding-left: max(24px, calc((100vw - 1366px) / 2));
}

/* card del archive: titulo + boton + imagen 16:9 (sin descripcion) */
.studies-archive-card__media {
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.studies-archive-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 767px) {
    .studies-intro {
        padding: 70px 0 40px;
    }

    .studies-current__info {
        padding-left: 0;
        margin-top: 28px;
    }
}


/* ============================================================
   PARTNERSHIP (Meet our Partners)
   ============================================================ */
.kbc-partnership {
    font-family: var(--kbc-font-sans);
    color: #141B34;
    background: var(--kbc-white);
}

.kbc-partnership .container-xxl {
    max-width: 1366px;
}

/* ----- 1) HERO 100vh ----- */

.partnership-hero__bg {
    position: absolute;
    top: -15%;
    left: 0;
    width: 100%;
    height: 130%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    will-change: transform;
}

.partnership-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(11, 11, 11, .42);
    pointer-events: none;
}

.partnership-hero .container-xxl {
    position: relative;
    z-index: 2;
}

/* ----- 2) STATEMENT ----- */
.partnership-statement {
    padding: 110px 0 80px;
}

.partnership-statement__icon {
    width: 56px;
    margin: 0 auto 30px;
    display: block;
}

.partnership-statement__text {
    display: block;
    height: auto; 
    margin: 0 auto;
}

/* titulo de seccion display (con parte en rojo) */
.partnership__title {
    font-family: var(--kbc-font-display);
    text-transform: uppercase;
    font-size: clamp(34px, 4.2vw, 64px);
    line-height: 1;
    color: #141B34;
    margin: 0 0 40px;
}

/* ----- 3) GOSPEL PARTNERS — grid (nombre sobre la foto) ----- */
.partnership-partners {
    padding: 10px 0 100px;
}

.partner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.partner-card__media {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    
}

.partner-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s var(--kbc-ease);
}

.partner-card:hover .partner-card__media img {
    transform: scale(1.06);
}

/* hover igual que las cards de Staff: marco de lineas en gradiente */
.partner-card__media::before {
    content: "";
    position: absolute;
    inset: 16px;
    z-index: 3;
    border: 1.5px solid rgba(255, 255, 255, .7);
    border-image: linear-gradient(140deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .12)) 1;
    opacity: 0;
    transition: opacity .35s var(--kbc-ease);
    pointer-events: none;
}

.partner-card:hover .partner-card__media::before {
    opacity: 1;
}

.partner-card__info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 0 22px 18px;
    transition: transform .4s var(--kbc-ease);
}

.partner-card:hover .partner-card__info {
    transform: translateY(-10px);
}

.partner-card__info h3 {
    color: var(--kbc-white);
    font-size: clamp(19px, 1.6vw, 25px);
    font-weight: 700;
    margin: 0;
}

/* ----- 4) VINTAGE MISSION (3 cards de iniciales) ----- */
.partnership-vintage {
    padding: 50px 0 100px;
}

.partnership-vintage__lead {
    font-size: 16px;
    font-weight: 700;
    color: #141B34;
    max-width: 720px;
    margin: -18px 0 40px;
}

.partnership-vintage__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.partner-card--initials .partner-card__media {
    aspect-ratio: 4 / 5;
}

.partner-card--initials .partner-card__info h3 {
    font-family: var(--kbc-font-display);
    font-size: clamp(34px, 3vw, 54px);
}

/* ----- 5) OUTREACH PARTNERS — titulo + carrusel de logos al lado ----- */
.partnership-outreach {
    padding: 40px 0 90px;
    overflow: hidden;
}

.partnership-outreach__row {
    display: flex;
    align-items: center;
    gap: 48px;
}

.partnership-outreach__title {
    flex-shrink: 0;
    margin: 0;
    white-space: nowrap;
}

.partnership-outreach__marquee {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.partnership-outreach__track {
    display: flex;
    align-items: center;
    gap: 48px;
    width: max-content;
    animation: outreachScroll 32s linear infinite;
}

.partnership-outreach__logo img {
    height: 56px;
    width: auto;
    max-width: 170px;
    display: block;
    object-fit: contain;
}

.partnership-outreach__sep {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    opacity: .4;
}

@keyframes outreachScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ----- 6) VINTAGE MISSION — banner DENTRO de contenedor + parallax ----- */
.partnership-banner {
    padding: 10px 0 110px;
}

.partnership-banner__inner {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16 / 7;
    min-height: 360px;
}

.partnership-banner__bg {
    position: absolute;
    top: -12%;
    left: 0;
    width: 100%;
    height: 124%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    will-change: transform;
}

.partnership-banner__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(11, 18, 40, .1);
}

.partnership-banner__content {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    padding: 44px;
}

.partnership-banner__logo { 
    max-width: 60%;
    margin: 0 0 14px;
    display: block;
}

.partnership-banner__text {
    color: var(--kbc-white);
    font-size: 16px;
    margin: 0;
}

@media (max-width: 991px) {

    .partner-grid,
    .partnership-vintage__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {

    .partner-grid,
    .partnership-vintage__grid {
        grid-template-columns: 1fr;
    }

    .partnership-outreach__logos {
        gap: 28px;
    }
}


/* ============================================================
   ABOUT (hero pin tipo Home + secciones)
   ============================================================ */
.kbc-about {
    font-family: var(--kbc-font-sans);
    color: #141B34;
    background: var(--kbc-white);
}

.kbc-about .container-xxl {
    max-width: 1366px;
}

/* ----- HERO PIN — estado A (About) -> estado B (Our Mission) ----- */
.about-hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
}

.about-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    will-change: transform, filter;
}

.about-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(11, 11, 11, .32);
    pointer-events: none;
}

/* velo azul del estado B (aparece con el pin) */
.about-hero__veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(7, 16, 42, .86);
    opacity: 0;
    pointer-events: none;
}

/* ESTADO A */
.about-hero__a {
    position: absolute;
    inset: 0;
    z-index: 99999;
}

/* pie del hero: titulo + caja con blur, ambos dentro del container (como Odessa) */
.about-hero__foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 44px;
    z-index: 4;
}

.about-hero__title {
    color: var(--kbc-white);
    font-weight: 800;
    font-size: clamp(56px, 9vw, 80px);
    line-height: .9;
    margin: 0;
    text-transform: uppercase;
}

/* caja con blur dentro del container, separada del borde; recta + linea arriba.
   En About, el titulo va DENTRO de la caja junto al boton (space-between). */
.about-hero__bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 0px 35px;
    border-radius: 0;   
}

.about-hero__cta {
    display: inline-block;
    background: var(--kbc-white);
    color: #111;
    padding: 14px 28px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
}

/* ESTADO B — TODO Our Mission (titulo + statement + linea + texto + 3 cards) */
.about-hero__b {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    padding: 40px 0;
    overflow-y: auto;
}

.about-hero__b-inner {
    max-width: 980px;
    margin: 0 auto;
}

.about-hero__mission {
    display: block;
    margin: 0 auto 22px;
}

.about-hero__statement {
    color: var(--kbc-white);
    font-size: clamp(20px, 2.1vw, 24px);
    font-weight: 600;
    line-height: 1.25;
    max-width: 760px;
    margin: 0 auto;
}

.about-hero__divider {
    width: min(560px, 80%);
    height: 1px;
    background: rgba(255, 255, 255, .45);
    border: 0;
    margin: 30px auto 26px;
    opacity: 1;
}

.about-hero__lead {
    color: rgba(255, 255, 255, .82);
    font-size: 16px;
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto 44px;
}

.about-hero__cards {
    --bs-gutter-x: 48px;
}

.about-hero__cards h3 {
    color: var(--kbc-white);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 14px;
}

.about-hero__cards p {
    color: rgba(255, 255, 255, .72);
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

/* ----- Boton About (negro plano, uppercase) ----- */
.about-btn {
    display: inline-block;
    background: #111;
    color: var(--kbc-white);
    padding: 15px 28px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .2s var(--kbc-ease);
}

.about-btn:hover {
    background: var(--kbc-accent);
}

.about-btn--light {
    background: var(--kbc-white);
    color: #111;
}

.about-btn--light:hover {
    background: var(--kbc-accent);
    color: var(--kbc-white);
}

/* titulo display en texto (Symbol y cierre — sin SVG exportado) */
.about-display-title {
    font-weight: 800;
    font-size: clamp(40px, 6vw, 84px);
    line-height: .95;
    letter-spacing: -.02em;
    text-transform: uppercase;
    margin: 0;
    color: #141B34;
}

/* ----- 2) OUR BELIEFS (card rosa dentro del container) ----- */
.about-beliefs {
    padding: 90px 0;
}

.about-beliefs__card {
    background: #EDEDED;
    border-radius: 10px;
    padding: clamp(28px, 4vw, 64px);
}

.about-beliefs__title {
    margin-bottom: 22px;
}

.about-beliefs__text p {
    font-size: 16px;
    line-height: 1.65;
    color: #141B34;
    margin-bottom: 26px;
}

.about-beliefs__media {
    border-radius: 10px;
    overflow: hidden;
}

.about-beliefs__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ----- 3) MEET OUR STAFF (card foto izq, texto der) ----- */
.about-staff {
    padding: 70px 0;
}

.about-staff__media {
    border-radius: 10px;
    overflow: hidden;
}

.about-staff__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-staff__title {
    margin-bottom: 22px;
}

.about-staff__text p {
    font-size: 16px;
    line-height: 1.65;
    color: #141B34;
    margin-bottom: 26px;
}

/* ----- 4) OUR LOCATIONS (parallax full-bleed, texto centrado) ----- */
.about-locations {
    position: relative;
    padding: 130px 0;
    overflow: hidden;
}

.about-locations__bg {
    position: absolute;
    left: 0;
    top: -10%;
    width: 100%;
    height: 130%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    will-change: transform;
}

.about-locations::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(11, 16, 30, .55);
}

.about-locations__inner {
    position: relative;
    z-index: 2;
}

.about-locations__title {
    margin: 0 auto 22px;
}

.about-locations__text {
    color: var(--kbc-white);
    font-size: 16px;
    line-height: 1.65;
    max-width: 620px;
    margin: 0 auto 30px;
}

/* ----- 5) OUR SYMBOL (cruz de Jerusalen decorativa a la derecha) ----- */
.about-symbol {
    position: relative;
    padding: 90px 0;
    overflow: hidden;
}

.about-symbol__cross {
    position: absolute;
    right: -2%;
    top: 50%;
    transform: translateY(-50%);
    width: min(540px, 46%);
    height: auto;
    opacity: 1;
    z-index: 0;
    pointer-events: none;
}

.about-symbol__inner {
    position: relative;
    z-index: 1;
}

.about-symbol__copy {
    margin-top: 26px;
}

.about-symbol__copy p {
    font-size: 16px;
    line-height: 1.7;
    color: #141B34;
    margin-bottom: 18px;
}

.about-pillars__grid {
    gap: 50px 0px;
}

/* ----- 6) OUR FIVE PILLARS (parallax full-bleed oscuro, 5 columnas) ----- */
.about-pillars {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
}

.about-pillars__bg {
    position: absolute;
    left: 0;
    top: -10%;
    width: 100%;
    height: 130%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    will-change: transform;
}

/* Velo oscuro sobre la foto: mantiene legible el texto blanco de punta a punta.
   Va entre el bg (z-index 0) y el contenido (z-index 2). */
.about-pillars::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .7;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(8, 12, 24, .88) 0%,
        rgba(8, 12, 24, .70) 45%,
        rgba(8, 12, 24, .90) 100%);
}

.about-pillars__inner {
    position: relative;
    z-index: 2;
}

.about-pillars__title {
    margin-bottom: 18px;
}

.about-pillars__lead {
    color: rgba(255, 255, 255, .85);
    font-size: 16px;
    line-height: 1.5;
    max-width: 620px;
    margin-bottom: 54px;
}

/* pillars: grid Bootstrap (row/col) */
.about-pillar__num { 
    color: var(--kbc-white);
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 12px;
    border: 2px solid;
    display: inline-block;
    width: 45px;
    height: 45px;
    border-radius: 200px;
    line-height: 2;
}

.about-pillar__name {
    color: var(--kbc-white);
    font-size: 22px;
    font-weight: 700; 
    text-transform: uppercase;
    margin: 0 0 10px;
}

.about-pillar__desc {
    color: rgba(255, 255, 255, .82);
    font-size: 18px;
    line-height: 1.5;
    margin: 0 0 14px;
}

.about-pillar__ref {
    color: var(--kbc-white);
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

/* ----- 7) OUR PLAN (titulo SVG + 2 cols + banner Four Rooms) ----- */
.about-plan {
    padding: 100px 0;
}

.about-plan__title {
    display: block;
    margin-bottom: 42px;
}

.about-plan__col p {
    font-size: 16px;
    line-height: 1.7;
    color: #141B34;
    margin-bottom: 18px;
}

.about-plan__question {
    font-size: 20px;
    font-weight: 800;
    color: #141B34;
    margin: 0 0 18px;
}

.about-rooms {
    position: relative;
    overflow: hidden;
    margin-top: 60px;
    padding: 140px 0px;
}

.about-rooms__bg {
    position: absolute;
    left: 0;
    top: -10%;
    width: 100%;
    height: 130%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    will-change: transform;
}

/* .about-rooms::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(40,10,10,.62); } */
.about-rooms__content {
    position: relative;
    z-index: 2;
}

/* four rooms: grid Bootstrap (row/col) */
.about-room__title {
    color: var(--kbc-white);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.about-room__desc {
    color: rgba(255, 255, 255, .82);
    font-size: 18px;
    line-height: 1.5;
    margin: 0;
}

.about-rooms__note {
    color: var(--kbc-white);
    text-align: center;
    font-size: 18px;
    line-height: 1.6;
    max-width: 760px;
    margin: 40px auto 0;
}

/* ----- 8) CIERRE — Historic Faith. Modern Context. ----- */
.about-closing {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
}

.about-closing__cross {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(360px, 60%);
    height: auto;
    opacity: .08;
    z-index: 0;
    pointer-events: none;
}

.about-closing__title {
    position: relative;
    z-index: 1;
}

@media (max-width: 991px) {
    .about-symbol__cross {
        opacity: .25;
    }
}

@media (max-width: 767px) {
    .about-hero__bar {
        right: 24px;
        bottom: 40px;
    }

    .about-hero__cards {
        row-gap: 26px;
    }
}

/* ============================================================
   ODESSA (campus) — hero parallax (como Home, sin pin) + seccion roja
   ============================================================ */
.kbc-odessa {
    font-family: var(--kbc-font-sans);
    color: #141B34;
    background: var(--kbc-white);
}

.kbc-odessa .container-xxl {
    max-width: 1366px;
}

/* ----- 1) HERO (estilo Home, solo parallax) ----- */

.odessa-hero__bg {
    position: absolute;
    left: 0;
    top: -8%;
    width: 100%;
    height: 120%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    will-change: transform;
}

.odessa-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(11, 11, 11, .30);
    pointer-events: none;
}

.odessa-hero__foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 80px;
    z-index: 3;
}

.odessa-hero__title {
    color: var(--kbc-white);
    font-weight: 800;
    font-size: clamp(56px, 9vw, 80px);
    line-height: .9;
    margin: 0 0 26px;
    text-transform: uppercase;
}

/* caja con blur dentro del container, separada del borde; recta + linea arriba */
.odessa-hero__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 40px 35px;
    border-radius: 0;
    border-top: 1px solid rgba(255, 255, 255, .28);
    background: rgba(15, 17, 25, .40);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.odessa-hero__times {
    color: var(--kbc-white);
    font-size: clamp(27px, 1.2vw, 40px);
    font-weight: 300;
    margin: 0;
    display: flex;
    align-items: center;
    text-transform: uppercase;
}

.odessa-hero__times b {
    font-weight: 800;
}

.odessa-hero__sep {
    display: inline-block;
    width: 2px;
    height: 34px;
    background: var(--kbc-accent);
    margin: 0 18px;
}

.odessa-hero__actions {
    display: flex;
    gap: 12px;
}

.odessa-hero__btn {
    display: inline-block;
    padding: 13px 30px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    background: rgba(255, 255, 255, .16);
    color: var(--kbc-white);
    border: 1px solid rgba(255, 255, 255, .4);
    transition: background-color .2s var(--kbc-ease);
}

.odessa-hero__btn:hover {
    background: rgba(255, 255, 255, .28);
}

.odessa-hero__btn--light {
    background: var(--kbc-white);
    color: #111;
    border-color: var(--kbc-white);
}

.odessa-hero__btn--light:hover {
    background: var(--kbc-accent);
    color: var(--kbc-white);
    border-color: var(--kbc-accent);
}

/* ----- 2) SECCION ROJA ----- */
.odessa-red {
    background: var(--kbc-accent);
    padding: 90px 0 100px;
    color: var(--kbc-white);
}

.odessa-pastor {
    background: rgba(255, 255, 255, .10);
    border-radius: 10px;
    padding: 48px;
    margin-bottom: 70px;
}

.odessa-pastor__title {
    margin-bottom: 16px;
}

.odessa-pastor__role {
    font-style: italic;
    font-size: 16px;
    margin: 0 0 20px;
    color: rgba(255, 255, 255, .9);
}

.odessa-pastor__bio {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .92);
    margin: 0;
}

.odessa-pastor__media {
    border-radius: 10px;
    overflow: hidden;
}

.odessa-pastor__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.odessa-about {
    margin-bottom: 80px;
}

.odessa-about-card {
    background: rgba(255, 255, 255, .12);
    border-radius: 10px;
    padding: clamp(28px, 3.5vw, 48px);
}

.odessa-about__title { 
    margin-bottom: 26px;
}

.odessa-about__main>p {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .92);
    margin-bottom: 18px;
}

.odessa-about__main h3 {
    font-size: 17px;
    font-weight: 800;
    margin: 26px 0 8px;
    color: var(--kbc-white);
}

.odessa-link {
    color: var(--kbc-white);
    font-weight: 700;
    text-decoration: underline;
}

.odessa-info {
    background: var(--kbc-white);
    color: #141B34;
    border-radius: 10px;
    padding: 36px;
}

.odessa-info__h {
    font-size: 22px;
    font-weight: 800;
    margin: 26px 0 8px;
    color: #141B34;
}

.odessa-info__h:first-child {
    margin-top: 0;
}

.odessa-info p {
    font-size: 16px;
    line-height: 1.7;
    color: #41485C;
    margin: 0;
}

.odessa-info .odessa-link {
    color: var(--kbc-accent);
}

.odessa-statement {
    padding: 30px 0 70px;
}

.odessa-statement img {  
    display: block;
    margin: 0 auto;
}

.odessa-wheel {
    height: 56vh;
    min-height: 420px;
}

/* ----- 3) LAST SERMON ----- */
.odessa-sermon {
    padding: 90px 0;
}

.odessa-sermon__title {
    margin-bottom: 34px;
}

/* sermon card: grid Bootstrap (row/col) */
.odessa-sermon__media {
    border-radius: 10px;
    overflow: hidden;
}

.odessa-sermon__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.odessa-sermon__heading {
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 12px;
    color: #141B34;
}

.odessa-sermon__by {
    font-size: 16px;
    color: #41485C;
    margin: 0 0 26px;
}

.odessa-sermon__player {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 640px;
}

.odessa-sermon__play,
.odessa-sermon__vol,
.odessa-sermon__rate {
    border: 0;
    background: transparent;
    color: #141B34;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
}

.odessa-sermon__play svg,
.odessa-sermon__vol svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    display: block;
}

.odessa-sermon__vol svg {
    width: 20px;
    height: 20px;
}

.odessa-sermon__play .ico-pause,
.odessa-sermon__player.is-playing .ico-play {
    display: none;
}

.odessa-sermon__player.is-playing .ico-pause {
    display: block;
}

.odessa-sermon__vol .ico-muted,
.odessa-sermon__player.is-muted .ico-vol {
    display: none;
}

.odessa-sermon__player.is-muted .ico-muted {
    display: block;
}

.odessa-sermon__track {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: #E2E4EA;
    position: relative;
    cursor: pointer;
}

.odessa-sermon__progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 62%;
    border-radius: 2px;
    background: var(--kbc-accent);
}

.odessa-sermon__time {
    font-size: 13px;
    color: #41485C;
    white-space: nowrap;
}

.odessa-sermon__rate {
    font-size: 13px;
    color: #41485C;
    font-weight: 700;
    white-space: nowrap;
}

/* ----- 4) MINISTRIES (Discipleship + sidebar) ----- */
.odessa-ministries {
    padding: 0 0 100px;
}

.odessa-disc {
    background: #EFEDE8;
    border-radius: 10px;
    padding: clamp(28px, 3.5vw, 48px);
}

.odessa-disc__title {
    margin-bottom: 30px;
}

.odessa-disc__item {
    padding: 22px 0;
    border-top: 1px solid #E6E8EE;
}

.odessa-disc__item:first-of-type {
    border-top: 0;
}

.odessa-disc__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.odessa-disc__head h3 {
    font-size: 19px;
    font-weight: 800;
    margin: 0;
    color: #141B34;
}

.odessa-disc__more {
    color: #141B34;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.odessa-disc__more:hover {
    color: var(--kbc-accent);
}

.odessa-disc__item p {
    font-size: 16px;
    line-height: 1.6;
    color: #41485C;
    margin: 0;
}

.odessa-aside {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.odessa-aside__cross {
    position: relative;
    height: 300px;
    border-radius: 10px;
    background: var(--kbc-accent);
    overflow: hidden;
}

.odessa-aside__cross::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .16);
    -webkit-mask: url('../images/cross-mark.svg') 0 0 / 80px 80px;
    mask: url('../images/cross-mark.svg') 0 0 / 80px 80px;
}

.odessa-aside__card {
    background: #EDEDED;
    border-radius: 10px;
    padding: 30px;
}

.odessa-aside__card--beige {
    background: #EFEDE8;
}

.odessa-aside__h {
    margin-bottom: 12px;
    display: block;
}

.odessa-aside__card p {
    font-size: 16px;
    line-height: 1.7;
    color: #41485C;
    margin: 0 0 14px;
}

.odessa-aside__card p:last-child {
    margin-bottom: 0;
}

.odessa-aside__card .odessa-link {
    color: var(--kbc-accent);
}

@media (max-width: 991px) {}

@media (max-width: 767px) {
    .odessa-hero__foot {
        bottom: 28px;
    }

    .odessa-hero__bar {
        gap: 14px;
    }
}

/* ============================================================
   MEGA MENU (dropdown del boton Menu) — abre de arriba a abajo
   ============================================================ */
/* el mega es el overlay a pantalla completa: lleva el blur del fondo.
   el header va por encima (z mayor) y queda nitido */
.kbc-mega {
    position: fixed;
    inset: 0;
    z-index: 9990;
    padding: 92px max(24px, calc((100vw - 1366px) / 2)) 0;
    background: rgba(20, 27, 52, .04);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--kbc-ease), visibility 0s linear .35s;
    pointer-events: none;
}

.kbc-mega.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .35s var(--kbc-ease);
    pointer-events: initial !important;
}

/* el card es el que baja con translateY (animacion de apertura) */
.kbc-mega__inner {
    position: relative;
    z-index: 1;
    transform: translateY(-24px);
    transition: transform .35s var(--kbc-ease);
    display: grid;
    grid-template-columns: 252px 1fr 340px;
    background: #D6D6D6;
    border: 1px solid #CFCFCF;
    border-radius: 10px;
    overflow: hidden;
    min-height: 330px;
}

.kbc-mega.is-open .kbc-mega__inner {
    transform: translateY(0);
}

/* categorias (sobre el gris del contenedor, pegadas a la izquierda) */
.kbc-mega__cats {
    padding: 14px 0;
}

.kbc-mega__cat {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 13px 30px;
    border-left: 3px solid transparent;
    font-family: var(--kbc-font-sans);
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #141B34;
    cursor: pointer;
    transition: color .2s var(--kbc-ease), background-color .2s var(--kbc-ease);
}

.kbc-mega__cat:hover {
    color: var(--kbc-accent);
}

.kbc-mega__cat.is-active {
    background: #E6E3DD;
    border-left-color: var(--kbc-accent);
    font-weight: 700;
    color: #141B34;
}

/* card central (sub-items) — card separada con gap sobre el gris */
.kbc-mega__mid {
    background: #E6E3DD;
    margin: 14px;
    border-radius: 8px;
    padding: 30px 36px;
}

.kbc-mega__panel {
    display: none;
}

.kbc-mega__panel.is-active {
    display: block;
    animation: kbcMegaFade .28s var(--kbc-ease);
}

.kbc-mega__subgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 24px 40px;
    align-content: start;
}

.kbc-mega__sub {
    display: block;
    text-decoration: none;
}

.kbc-mega__sub-title {
    display: block;
    font-size: 19px;
    font-weight: 700;
    color: #141B34;
    transition: color .2s var(--kbc-ease);
}

.kbc-mega__sub.is-accent .kbc-mega__sub-title,
.kbc-mega__sub:hover .kbc-mega__sub-title {
    color: var(--kbc-accent);
}

.kbc-mega__sub-desc {
    display: block;
    font-size: 15px;
    line-height: 1.4;
    color: #8A8A8A;
    margin-top: 4px;
}

/* aside: imagen (default) o 3er nivel — card separada con gap */
.kbc-mega__aside {
    position: relative;
    background: #E6E3DD;
    margin: 14px 14px 14px 0;
    border-radius: 8px;
    overflow: hidden;
}

.kbc-mega__media {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s var(--kbc-ease);
}

.kbc-mega__media.is-active {
    opacity: 1;
    visibility: visible;
}

.kbc-mega__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kbc-mega__level3 {
    display: none;
    padding: 30px 34px;
}

.kbc-mega__level3.is-active {
    display: block;
    animation: kbcMegaFade .28s var(--kbc-ease);
}

.kbc-mega__l3 {
    display: block;
    font-size: 19px;
    font-weight: 700;
    color: #141B34;
    margin-bottom: 18px;
    text-decoration: none;
    transition: color .2s var(--kbc-ease);
}

.kbc-mega__l3.is-accent,
.kbc-mega__l3:hover {
    color: var(--kbc-accent);
}

@keyframes kbcMegaFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 991px) {
    .kbc-mega__inner {
        grid-template-columns: 1fr;
    }

    .kbc-mega__aside {
        display: none;
    }

    .kbc-mega__subgrid {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        grid-template-rows: none;
    }
}
/* ============================================================
   GOSPEL — secciones 2 (The Gospel) y 3 (Good News) arrancan rojas
   con el contenido en blanco; al entrar a la 3 ambas pasan a blanco
   con el contenido en su color original (GSAP scrub anima las dos).
   ============================================================ */
.gospel-svg { max-width: 100%; height: auto; }

/* ============================================================
   CURVA SUPERIOR EN SECCIONES QUE HACEN MELT ROJO -> BLANCO
   El .topc:before es un pseudo-elemento: GSAP anima el fondo de
   la seccion pero no lo alcanza y la curva se quedaba roja.
   Con background: inherit la curva sigue el color animado del padre.
   (No aplica a .odessa-red, que es rojo fijo.)
   ============================================================ */
.gospel-shift.topc:before,
.wwb-statement.topc:before {
    background: inherit;
}

/* estado inicial: fondo rojo, contenido en blanco */
.gospel-shift { background-color: var(--kbc-accent); }
.gospel-shift .gt-ink,
.gospel-shift .gt-sub,
.gospel-shift .gn-ink,
.gospel-shift .gn-red { color: #FFFFFF; }
.gospel-shift .lead,
.gospel-shift .lead b,
.gospel-shift .kbc--list li,
.gospel-shift .kbc--list li b,
.gospel-shift h4,
.gospel-shift p { color: #FFFFFF; }

/* ============================================================
   EVENTS (Odessa) — header (kbc-hero-std) + lista CURRENT EVENTS.
   El detalle reutiliza la base del modal de staff (.staff-modal).
   ============================================================ */
.kbc-events { font-family: var(--kbc-font-sans); color: #141B34; background: var(--kbc-white); }
.kbc-events .container-xxl { max-width: 1366px; }

/* header: pantalla completa (kbc-hero-std) con el titulo abajo-izquierda */
.events-hero__bg { position: absolute; top: -8%; left: 0; width: 100%; height: 116%; background-size: cover; background-position: center; z-index: 0; will-change: transform; }
.events-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(11, 11, 11, .42); pointer-events: none; }
.events-hero .container-xxl { position: relative; z-index: 2; }

/* CURRENT EVENTS — titulo display (misma fuente que el resto del sitio) */
.events-current { padding: 90px 0 110px; }
.events-current__title { margin: 0 0 46px; }

/* lista: solo separacion, sin linea divisoria */
.events-list { display: flex; flex-direction: column; gap: 64px; }
.events-item__media { width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #E6E3DD; }
.events-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.events-item__title { margin: 0 0 20px; }
.events-item__date { font-size: 15px; color: #6A6A72; font-weight: 600; margin: 0 0 14px; }
.events-item__desc { font-size: 16px; line-height: 1.55; color: #4A4A55; margin: 0 0 60px;  }
.events-empty { font-size: 16px; color: #6A6A72; padding: 24px 0 40px; margin: 0; }

/* DETALLE DE EVENTO — titulo full width arriba + (cover | contenido) debajo */
.events-modal__dialog { display: block; }
.events-modal__title { margin: 0 44px 28px 0; }
.events-modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.events-modal__media { border-radius: 10px; overflow: hidden;  background: #1A1A1D; }
.events-modal__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.events-modal__date { font-size: 15px; color: #B9B9C1; margin: 0 0 14px; }
.events-modal__desc { font-size: 16px; line-height: 1.6; color: #D9D9DF; margin: 0 0 28px; max-width: 560px; }
@media (max-width: 767px) { .events-modal__grid { grid-template-columns: 1fr; gap: 24px; } }

/* ============================================================
   EMPLOYMENT (Work With Us) — intro + jobs.
   Reutiliza la base .kbc-events, las clases .events-* y el modal.
   ============================================================ */
.employment-intro { padding: 90px 0 30px; }
.employment-intro__icon { width: 46px; height: auto; display: block; margin: 0 0 22px; }
.employment-intro__statement { font-family: var(--kbc-font-display); text-transform: uppercase; color: var(--kbc-accent); font-size: clamp(24px, 2.8vw, 38px); line-height: 1.03; letter-spacing: .01em; margin: 0 0 26px; }
/* statement y titulo como SVG (fuente real Tungsten vectorizada) */
.employment-intro__statement-img { display: block;  margin: 0 0 26px; }
.employment-jobs__title { display: block;  margin: 0 0 34px; }
.employment-intro__text p { font-size: 16px; line-height: 1.55; color: #4A4A55; margin: 0 0 14px; max-width: 520px; }
.employment-intro__media { width: 100%; border-radius: 10px; overflow: hidden;  background: #E6E3DD; }
.employment-intro__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.employment-jobs { padding: 40px 0 110px; }

/* ============================================================
   GIVE — statement bicolor + portal + other ways to give.
   Reutiliza .kbc-events, .events-hero, .hero-title y botones.
   ============================================================ */
/* statement centrado: icono + frase display bicolor + cita + linea */
.give-statement { padding: 90px 0 46px; }
.give-statement__icon { display: block; margin: 0 auto 26px; }
.give-statement__text { font-family: var(--kbc-font-display); text-transform: uppercase; font-weight: 400; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.06; letter-spacing: .01em; color: #141B34; margin: 0 auto; max-width: 980px; }
.give-statement__text-img { display: block; max-width: 100%; margin: 0 auto; }
.give-statement__ref { font-size: 15px; color: #4A4A55; margin: 28px 0 0; }
.give-statement__line { width: 100%; max-width: 720px; height: 0; border: 0; border-top: 1px solid #CFCFCF; margin: 22px auto 0; opacity: 1; }

/* secure online giving portal — texto + imagen */
.give-portal { padding: 40px 0 80px; }
.give-portal__title { font-family: var(--kbc-font-display); text-transform: uppercase; font-weight: 400; font-size: clamp(30px, 3.6vw, 54px); line-height: 1; letter-spacing: .01em; color: #141B34; margin: 0 0 24px; }
.give-portal__title-img { display: block; max-width: 100%; margin: 0 0 24px; }
.give-portal__text p { font-size: 16px; line-height: 1.6; color: #4A4A55; margin: 0 0 16px; max-width: 560px; }
.give-portal__cta { margin-top: 10px; }
.give-portal__media { width: 100%; border-radius: 10px; overflow: hidden;  background: #E6E3DD; }
.give-portal__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* other ways to give — intro + cajas rojas (negras en hover, tonos planos)
   layout: 3 arriba + 1 abajo (col-md-4 x4) */
.give-ways { padding: 20px 0 110px; }
.give-ways__title { font-family: var(--kbc-font-display); text-transform: uppercase; font-weight: 400; font-size: clamp(30px, 3.6vw, 54px); line-height: 1; letter-spacing: .01em; color: #141B34; margin: 0 0 18px; }
.give-ways__title-img { display: block; max-width: 100%; margin: 0 0 18px; }
.give-ways__intro { font-size: 16px; line-height: 1.6; color: #4A4A55; margin: 0 0 40px; max-width: 900px; }
.give-ways__grid { --bs-gutter-x: 40px; --bs-gutter-y: 40px; }
.give-card { display: flex; flex-direction: column; align-items: flex-start; height: 100%; min-height: 250px; background: var(--kbc-accent); color: var(--kbc-white); border-radius: 10px; padding: 28px; text-decoration: none; transition: background-color .25s ease; }
.give-card:hover, .give-card:focus { background: #0B0B0C; }
.give-card__head { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.give-card__label { font-family: var(--kbc-font-display); text-transform: uppercase; font-weight: 400; font-size: clamp(26px, 2.2vw, 34px); line-height: 1; letter-spacing: .01em; color: var(--kbc-white); margin: 0; }
/* icono: blanco translucido (30%) sin hover; blanco pleno en hover */
/* icono de card: SVG propio (default) que cambia por su version hover */
.give-card__icon { flex: 0 0 auto; width: 40px; height: 40px; background: url('../images/KBC-Give-OnlinePayment-Cards-SVG-Icon.svg') center / contain no-repeat; }
.give-card:hover .give-card__icon, .give-card:focus .give-card__icon { background: url('../images/KBC-Give-OnlinePayment-Cards-SVG-IconHover.svg') center / contain no-repeat; }
/* gap fijo (60px) entre header y parrafo, igual en todas las cajas */
.give-card__desc { font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .92); margin: 60px 0 0; }

/* ============================================================
   KIDS — hero + statement azul + fotos + Sundays/Wednesdays + Awana
   ============================================================ */
.kids-hero__title { width: 100%; text-align: center; }
.kids-statement { background: linear-gradient(180deg, #1F79BE 0%, #1F79BE 40%, #FFFFFF 100%); padding: 90px 0 120px; text-align: center; }
.kids-statement__icon { display: inline-block; margin: 0 0 26px; }
.kids-statement__text { display: block; max-width: 920px; margin: 0 auto; }
/* collage de circulos dispersos (statement) + garabatos decorativos */
.kids-collage { position: relative;  min-height: 510px; margin: 56px auto 0; }
.kids-collage__item { position: absolute; }
/* foto: circulo recortado, escala en hover */
.kids-collage__photo { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, .15); }
.kids-collage__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* trazo: por fuera del circulo, oculto hasta el hover */
.kids-collage__ring { display: none; position: absolute; top: 50%; left: 50%; width: 148%; height: 148%; max-width: none; opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(.82); transform-origin: center; transition: opacity .3s var(--kbc-ease), transform .4s var(--kbc-ease); pointer-events: none; }
/* Cada bola deriva describiendo una elipse, no un sube-y-baja: cambia el
   sentido de giro (cw/ccw), el tamano de la elipse, la duracion y el desfase.
   Con eso ningun par de bolas repite el mismo gesto. */
.kids-collage__item--1 { width: 250px; height: 250px; left: 2%;  top: 150px; --fx:  14px; --fy: -18px; --float-dur: 5.2s; --float-delay: -.4s;  }
.kids-collage__item--2 { width: 275px; height: 275px; left: 20%; top: 10px;  --fx: -22px; --fy: -11px; --float-dur: 7.4s; --float-delay: -2.9s; animation-direction: reverse; }
.kids-collage__item--3 { width: 240px; height: 240px; left: 33%; top: 250px; --fx:   9px; --fy: -26px; --float-dur: 6.1s; --float-delay: -1.2s; }
.kids-collage__item--4 { width: 290px; height: 290px; left: 56%; top: 120px; --fx: -16px; --fy: -14px; --float-dur: 8.3s; --float-delay: -4.1s; animation-direction: reverse; }
.kids-collage__item--5 { width: 265px; height: 265px; left: 78%; top: 10px;  --fx:  24px; --fy:  -9px; --float-dur: 5.8s; --float-delay: -3.3s; }
.kids-collage__item--6 { width: 240px; height: 240px; left: 82%; top: 255px; --fx: -11px; --fy: -22px; --float-dur: 6.9s; --float-delay: -.7s;  animation-direction: reverse; }

/* flotacion suave: cada bolita sube y baja con su propio desfase */
/* recorrido eliptico: los cuatro pasos mueven la bola en X y en Y a la vez.
   Con animation-direction: reverse la elipse se recorre al reves. */
@keyframes kids-float {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(var(--fx, 14px), calc(var(--fy, -16px) * .45)); }
    50%  { transform: translate(0, var(--fy, -16px)); }
    75%  { transform: translate(calc(var(--fx, 14px) * -1), calc(var(--fy, -16px) * .45)); }
    100% { transform: translate(0, 0); }
}
.kids-collage__item {
    animation: kids-float var(--float-dur, 6s) linear infinite;
    animation-delay: var(--float-delay, 0s);
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .kids-collage__item { animation: none; }
}
.kids-collage__scribble { position: absolute; pointer-events: none; }
.kids-collage__scribble--1 { width: 190px; left: 30%; top: 155px; }
.kids-collage__scribble--2 { width: 205px; left: 54%; top: 55px; }
.kids-block { padding: 90px 0; }
.kids-block__title { font-family: var(--kbc-font-display); text-transform: uppercase; font-weight: 400; font-size: clamp(34px, 4.6vw, 68px); line-height: 1; letter-spacing: .01em; color: #141B34; margin: 0 0 18px; }
.kids-block__text p { font-size: 16px; line-height: 1.6; color: #4A4A55; margin: 0; max-width: 560px; }
.kids-block__media { width: 100%; border-radius: 10px; overflow: hidden;  background: #E6E3DD; }
.kids-block__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kids-block__lead { font-size: 16px; line-height: 1.6; color: #4A4A55; margin: 0 0 40px; max-width: 900px; }
/* cards de age groups (foto + overlay rojo plano + titulo) */
.kids-groups { margin-top: 6px; }
.kids-group { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 3 / 4; }
.kids-group__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kids-group::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--kbc-accent) 0%, rgba(216, 69, 69, 0) 65%); }
.kids-group__body { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 22px 16px; }
.kids-group__title { text-transform: uppercase; font-weight: 400; font-size: clamp(20px, 2.8vw, 42px); line-height: 1; color: #FFFFFF; margin: 0; position: relative;
top: 10px;}
.kids-group__sub { font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .92); margin-top: 8px; }
/* wednesdays: card vertical Awana (azul + label + foto) */
.kids-awana-card { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 3 / 4; }
.kids-awana-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* overlay azul -> transparente (mismo patron que las cards rojas) */
.kids-awana-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #1F79BE 0%, #1F79BE 15%, rgba(31, 121, 190, 0) 58%); }
.kids-awana-card__label { position: absolute; top: 10%; left: 0; right: 0; z-index: 2; text-align: center; padding: 0 20px; font-family: var(--kbc-font-display); text-transform: uppercase; font-weight: 400; font-size: clamp(24px, 5.4vw, 90px); line-height: 1; letter-spacing: .01em; color: #FFFFFF; }
/* cta awana: banda azul centrada (eyebrow + logo + texto + boton) */
/* azul que baja a beige del footer para conectar sin corte */
.kids-awana-cta { background: linear-gradient(180deg, #1F79BE 40%,  #fff 100%); padding: 134px 0 0px; text-align: center; color: #FFFFFF; min-height: 110vh;}
.kids-awana-cta__eyebrow { display: inline-block; font-family: var(--kbc-font-display); text-transform: uppercase; font-weight: 400; font-size: clamp(18px, 1.6vw, 24px); letter-spacing: .02em; color: #FFD54A; margin-bottom: 14px; }
.kids-awana-cta__logo { display: block; max-width: 420px; width: 60%; margin: 0 auto 26px; }
.kids-awana-cta__text { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .92); max-width: 760px; margin: 0 auto 30px; }
.kids-awana-cta__btn { display: inline-block; }
@media (max-width: 767px) {
    .kids-collage { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; min-height: 0; }
    .kids-collage__item { position: relative; width: 84px; height: 84px; }
    .kids-collage__ring { display: none; }
    .kids-collage__scribble { display: none; }
}

/* ============================================================
   YOUTH (Keystone Students) — statement negro bicolor + contact
   ============================================================ */
/* ---- YOUTH (Keystone Students): tema oscuro + gradientes ---- */
/* .youth-page { background: #0B0B0C; } */
/* hero: video + logo centrado + overlay suave con fade a negro abajo */
.youth-hero { background: #0B0B0C; align-items: center; padding-bottom: 0; }
.youth-hero__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.youth-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(11, 11, 12, .45) 0%, rgba(11, 11, 12, .18) 50%, rgba(11, 11, 12, .45) 100%); }
.youth-hero .container-xxl { position: relative; z-index: 2; }
.youth-hero__logo { display: block; max-width: 620px; width: 70%; margin: 0 auto; }
.youth-hero__title { color: #FFFFFF; text-align: center; margin: 0; }
.youth-bio__title-svg { display: block; margin: 0 0 22px; }
/* statement negro con highlights rojos */
.youth-statement { background: #0B0B0C; padding: 96px 0; text-align: center; }
.youth-statement__icon { display: inline-block; width: 54px; height: 54px; background: #FFFFFF; -webkit-mask: url('../images/cross-mark.svg') center / contain no-repeat; mask: url('../images/cross-mark.svg') center / contain no-repeat; margin: 0 0 26px; }
.youth-statement__text { font-family: var(--kbc-font-display); text-transform: uppercase; font-weight: 400; font-size: clamp(28px, 3.4vw, 50px); line-height: 1.06; letter-spacing: .01em; color: #FFFFFF; max-width: 1100px; margin: 0 auto; }
.youth-statement__text .text-red { color: var(--kbc-accent); }
.youth-statement__text-svg { display: block; max-width: 1000px; margin: 0 auto; }
.youth-events__title-svg { display: block; margin: 0 0 32px; }
/* collage 4 fotos */
.youth-collage { background: #0B0B0C; padding: 10px 0 46px; }
.youth-collage__item { border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 5; background: #1A1A1C; }
.youth-collage__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* mission statement */
.youth-mission { background: #0B0B0C; padding: 30px 0 80px; text-align: center; }
.youth-mission__pill { display: inline-block; background: var(--kbc-accent); color: #FFFFFF; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 8px 18px; border-radius: 10px; margin-bottom: 22px; }
.youth-mission__text { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5; color: #E6E3DD; margin: 0 auto; }
/* parallax: video full-width */
.youth-parallax { position: relative; height: 70vh; min-height: 420px; overflow: hidden; background: #0B0B0C; }
.youth-parallax__vid { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; }
/* bio: titulo rojo + texto + foto */
.youth-bio { background: #0B0B0C; padding: 84px 0; }
.youth-bio__title { font-family: var(--kbc-font-display); text-transform: uppercase; font-weight: 400; font-size: clamp(34px, 4vw, 60px); line-height: 1; color: var(--kbc-accent); margin: 0; }
.youth-bio__sub { display: inline-block; color: var(--kbc-accent); font-weight: 700; font-size: 16px; margin: 4px 0 20px; }
.youth-bio p { font-size: 16px; line-height: 1.6; color: #C7C7CC; margin: 0 0 16px; max-width: 620px; }
.youth-bio__media { border-radius: 10px; overflow: hidden;  background: #1A1A1C; }
.youth-bio__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* current events */
.youth-events { background: #0B0B0C; padding: 20px 0 90px; }
.youth-events__title { font-family: var(--kbc-font-display); text-transform: uppercase; font-weight: 400; font-size: clamp(30px, 3.6vw, 56px); line-height: 1; color: #FFFFFF; margin: 0 0 32px; }
.youth-event__media { border-radius: 10px; overflow: hidden;  background: #1A1A1C; }
.youth-event__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.youth-event__name { font-family: var(--kbc-font-display); text-transform: uppercase; font-weight: 400; font-size: clamp(22px, 2vw, 30px); color: #FFFFFF; margin: 0 0 8px; }
.youth-event__date { color: var(--kbc-accent); font-weight: 700; font-size: 16px; margin: 0 0 12px; }
.youth-event__desc { font-size: 16px; line-height: 1.6; color: #C7C7CC; margin: 0 0 22px; max-width: 560px; }
/* drop us a line: gradiente amarillo -> rojo + form */
/* fondo negro que baja a blanco para conectar con el footer sin corte */
.youth-drop { background: linear-gradient(180deg, #0B0B0C 6%, #222222 20%, #FFFFFF 100%); padding: 20px 0 250px; }
.youth-drop__card { background: linear-gradient(105deg, rgba(244, 180, 26, .90) 0%, rgba(232, 106, 44, .90) 55%, rgba(211, 64, 63, .92) 100%), url('../images/KBC-Young-Contact-Pic-Bg.webp') center / cover no-repeat; border-radius: 10px; padding: 56px 52px; }
.youth-drop__title { font-family: var(--kbc-font-display); text-transform: uppercase; font-weight: 400; font-size: clamp(40px, 4.6vw, 68px); line-height: .95; color: #FFFFFF; margin: 0 0 16px; }
.youth-drop__sub { color: rgba(255, 255, 255, .92); font-size: 16px; line-height: 1.5; max-width: 320px; margin: 0 0 30px; }
.youth-drop__contact p { color: #FFFFFF; font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.youth-form input, .youth-form select, .youth-form textarea { width: 100%; background: rgba(255, 255, 255, .94); border: 0; border-radius: 8px; padding: 13px 16px; font-family: var(--kbc-font-sans); font-size: 15px; color: #141B34; }
.youth-form input::placeholder, .youth-form textarea::placeholder { color: #6A6A72; }
.youth-form select { color: #6A6A72; appearance: none; }
.youth-form textarea { resize: vertical; }
.youth-form__submit { background: #0B0B0C; color: #FFFFFF; border: 0; border-radius: 8px; padding: 13px 34px; font-size: 15px; font-weight: 600; cursor: pointer; }

/* ============================================================
   LIVE IN GROUPS — bloques alternados + FAQ acordeon
   ============================================================ */
.lig-groups { padding: 130px 0 110px; }
.lig-groups__title { margin-bottom: 40px; }
.lig-groups__title-img { display: block; max-width: 100%; margin: 0 0 40px; }
.lig-block__title-img { display: block; max-width: 100%; margin: 0 0 16px; }
/* statement: cuerpo de texto + linea gris */
.lig-statement__body { margin-top: 34px; }
.lig-statement__body p { font-size: 16px; line-height: 1.6; color: #141B34; margin: 0 0 22px; }
.lig-statement__body p:last-child { margin-bottom: 0; }
.lig-statement__muted { color: #9A9AA2; }
/* espacio entre parrafos y antes del boton dentro de los bloques */
.kids-block__text p + p { margin-top: 18px; }
.kids-block__text .btn { margin-top: 24px; }
.lig-block { margin-bottom: 64px; }
.lig-block__title { font-family: var(--kbc-font-display); text-transform: uppercase; font-weight: 400; font-size: clamp(28px, 3vw, 42px); line-height: 1; letter-spacing: .01em; color: #141B34; margin: 0 0 16px; }
.lig-faq { max-width: 1000px; margin: 0 auto 64px; border-top: 1px solid #E0E0E0; }
.lig-faq__item { border-bottom: 1px solid #E0E0E0; }
.lig-faq__q { list-style: none; cursor: pointer; font-family: var(--kbc-font-sans); font-weight: 600; font-size: 18px; color: #141B34; padding: 20px 44px 20px 0; position: relative; }
.lig-faq__q::-webkit-details-marker { display: none; }
.lig-faq__q::after { content: "+"; position: absolute; right: 4px; top: 15px; font-size: 26px; line-height: 1; color: #141B34; }
.lig-faq__item[open] .lig-faq__q::after { content: "\2013"; }
.lig-faq__a { font-size: 16px; line-height: 1.6; color: #4A4A55; margin: 0; padding-bottom: 22px; overflow: hidden; max-width: 820px; }
/* FAQ dentro del card beige (Live in Groups) */
.lig-faq-row { margin-bottom: 64px; }
.lig-faq-card { background: #E6E3DD; border-radius: 10px; padding: 8px 40px; }
.lig-faq-card .lig-faq { max-width: none; margin: 0; border-top: 0; }
.lig-faq-card .lig-faq__item { border-bottom: 1px solid rgba(20, 27, 52, .14); }
.lig-faq-card .lig-faq__item:last-child { border-bottom: 0; }

/* ============================================================
   FACILITY RESERVATIONS — galeria + banda CTA roja
   ============================================================ */
/* core values: pill + titulo + (lista | imagen) */
.fac-values { padding: 80px 0 40px; }
.fac-values__head { margin-bottom: 44px; }
.fac-values__pill { display: inline-block; background: hsla(0, 65%, 56%, 0.3); color: #000; font-size: 14px; font-weight: 700; letter-spacing: .04em; padding: 12px 38px; border-radius: 30px; margin-bottom: 20px; }
.fac-values__title { font-family: var(--kbc-font-sans); font-weight: 700; font-size: clamp(26px, 3vw, 40px); line-height: 1.15; color: #141B34; margin: 0 auto; }
.fac-values__card { background: #E6E3DD; border-radius: 10px; padding: 40px 44px; }
.fac-values__list { display: flex; flex-direction: column; gap: 24px; }
.fac-values__item-title { font-family: var(--kbc-font-sans); font-weight: 700; font-size: 19px; color: #141B34; margin: 0 0 6px; }
.fac-values__item-desc { font-size: 15px; line-height: 1.55; color: #4A4A55; margin: 0; max-width: 520px; }
.fac-values__media { width: 100%; border-radius: 10px; overflow: hidden;  background: #E6E3DD; }
.fac-values__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fac-note { text-align: center; font-family: var(--kbc-font-sans); font-weight: 700; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; color: #141B34; max-width: 900px; margin: 56px auto 0; }

/* tipos de reserva: 4 cards (foto 4:5 + label + overlay plano) */
.fac-types { padding: 50px 0 70px; }
.fac-type { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 5; }
.fac-type__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s var(--kbc-ease); }
.fac-type:hover .fac-type__img { transform: scale(1.06); }
.fac-type::after { content: ""; position: absolute; inset: 0; background: rgba(11, 11, 12, .28); transition: background-color .35s var(--kbc-ease); }
.fac-type:hover::after { background: rgba(11, 11, 12, .48); }
.fac-type__label { position: absolute; left: 22px; bottom: 20px; z-index: 2; margin: 0; font-family: var(--kbc-font-display); text-transform: uppercase; font-weight: 400; font-size: clamp(24px, 2.2vw, 34px); line-height: 1; color: #FFFFFF; }
/* hover: aparece "Learn more" (mismo patron que staff) */
.fac-type__more { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; background: var(--kbc-accent); color: #FFFFFF; padding: 9px 20px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity .25s var(--kbc-ease); pointer-events: none; }
.fac-type:hover .fac-type__more { opacity: 1; }

/* drop us a line: banda roja + contacto + boton */
.fac-cta { padding: 10px 0 110px; }
.fac-cta__box { position: relative; background: var(--kbc-accent); border-radius: 10px; padding: 60px 56px; color: #FFFFFF; }
.fac-cta__title { font-family: var(--kbc-font-display); text-transform: uppercase; font-weight: 400; font-size: clamp(40px, 5vw, 76px); line-height: 1; color: #FFFFFF; margin: 0 0 8px; }
.fac-cta__sub { font-size: 16px; color: rgba(255, 255, 255, .92); margin: 0 0 30px; }
.fac-cta__contact { display: flex; flex-direction: column; gap: 14px; }
.fac-cta__row { margin: 0; font-size: 15px; line-height: 1.5; color: #FFFFFF; }
.fac-cta__row a { color: #FFFFFF; text-decoration: none; }
.fac-cta__label { display: block; font-weight: 700; }
.fac-cta__btn { position: absolute; right: 56px; bottom: 60px; }
@media (max-width: 767px) { .fac-cta__btn { position: static; margin-top: 26px; } }

/* ============================================================
   FACILITY — MODALES (detalle por tipo + formulario)
   Plano: sin sombras ni gradientes, radius 10px, tonos planos.
   ============================================================ */
/* card ahora es <button>: reset a apariencia plana */
.fac-type { cursor: pointer; display: block; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; }

/* fade por clase (sin GSAP): mantiene el panel 100% opaco al terminar */
.fac-modal { position: fixed; inset: 0; z-index: 10000; display: flex; overflow-y: auto; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .4s var(--kbc-ease), visibility 0s linear .4s; }
.fac-modal.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .4s var(--kbc-ease); }
.fac-modal__overlay { position: fixed; inset: 0; background: rgba(11, 11, 12, .62); }
.fac-modal__dialog { position: relative; z-index: 1; transition: transform .45s var(--kbc-ease); }
.fac-modal__dialog--detail { background: #0B0B0C; color: #FFFFFF; padding: 44px 44px 46px; }
.fac-modal__dialog--form { background: #FFFFFF; color: #141B34; padding: 56px 48px; }

/* DETALLE (negro) = bottom sheet pegado abajo, mismo patron que el modal de eventos/staff */
.fac-modal--sheet { align-items: flex-end; justify-content: center; }
.fac-modal--sheet .fac-modal__dialog--detail { width: min(1180px, 94vw); max-height: 92vh; overflow-y: auto; border-radius: 10px 10px 0 0; transform: translateY(80px); }
.fac-modal--sheet.is-open .fac-modal__dialog--detail { transform: translateY(0); }

/* FORM = drawer pegado a la derecha, entra deslizando desde la derecha */
.fac-modal--right { align-items: stretch; justify-content: flex-end; }
.fac-modal--right .fac-modal__dialog--form { width: min(560px, 94vw); min-height: 100%; overflow-y: auto; border-radius: 0; transform: translateX(80px); }
.fac-modal--right.is-open .fac-modal__dialog--form { transform: translateX(0); }
/* mismo criterio que staff: fondo solido para que se lea sobre el contenido */
.fac-modal__close { position: absolute; top: 18px; right: 18px; z-index: 10; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: var(--kbc-white); color: #0B0B0C; font-size: 24px; line-height: 1; cursor: pointer; transition: background-color .2s var(--kbc-ease), color .2s var(--kbc-ease); }
.fac-modal__close:hover, .fac-modal__close:focus { background: var(--kbc-accent); color: var(--kbc-white); }
/* el drawer del form es blanco: se invierte para tener contraste */
.fac-modal__dialog--form .fac-modal__close { left: auto; right: 18px; background: #141B34; color: var(--kbc-white); }
.fac-modal__title { font-family: var(--kbc-font-display); text-transform: uppercase; font-weight: 400; font-size: clamp(30px, 3.4vw, 46px); line-height: 1; margin: 0 0 26px; color: #FFFFFF; }
.fac-modal__media { border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 5; }
.fac-modal__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fac-modal__specs { display: flex; flex-direction: column; gap: 18px; }
.fac-modal__spec { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.fac-modal__spec strong { color: #FFFFFF; font-weight: 700; }
.fac-modal__actions { margin-top: 30px; text-align: right; }

/* formulario */
.fac-form__title { font-family: var(--kbc-font-sans); font-weight: 700; font-size: 24px; color: #141B34; margin: 0 0 6px; }
.fac-form__sub { font-size: 14px; color: #4A4A55; margin: 0 0 24px; }
.fac-form__group { margin-bottom: 20px; }
.fac-form__label { display: block; font-size: 14px; font-weight: 700; color: #141B34; margin-bottom: 8px; }
.fac-form__label span { color: var(--kbc-accent); }
.fac-form__input { width: 100%; border: 1px solid #D8D5CF; border-radius: 10px; padding: 11px 14px; font-size: 15px; color: #141B34; background: #FFFFFF; }
.fac-form__input:focus { outline: none; border-color: #141B34; }
.fac-form__textarea { resize: vertical; min-height: 110px; }
.fac-form__checks { display: flex; flex-direction: column; gap: 12px; }
.fac-form__check { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #141B34; cursor: pointer; }
.fac-form__check input { width: 16px; height: 16px; }
.fac-form__actions { margin-top: 26px; }
.fac-form__submit { background: var(--kbc-accent); color: #FFFFFF; border: 0; }
.fac-form__legal { font-size: 12px; color: #9A9AA2; margin: 18px 0 0; }
body.fac-modal-open { overflow: hidden; }

@media (max-width: 767px) {
    .fac-modal__dialog--detail { padding: 40px 22px 30px; }
    .fac-modal__dialog--form { padding: 40px 22px; }
    .fac-modal__actions { text-align: left; }
}

/* ============================================================
   SERMONS — grid de series (placeholder; conectar DB luego)
   ============================================================ */
.sermons-list { padding: 20px 0 110px; }
.sermon-card { display: block; text-decoration: none; }
.sermon-card__media { border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; background: #E6E3DD; transition: opacity .2s ease; }
.sermon-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sermon-card:hover .sermon-card__media { opacity: .92; }

/* ============================================================
   WORSHIP MUSIC & PHILOSOPHY — cards de principios (rojas, sin hover negro)
   ============================================================ */
.give-card--static:hover, .give-card--static:focus { background: var(--kbc-accent); }
.wmp-principles { padding: 90px 0 40px; }
.wmp-faq-wrap { padding: 20px 0 110px; }

/* ============================================================
   WHAT WE BELIEVE — statement banda roja + cards + doctrina
   ============================================================ */
.wwb-statement { background: var(--kbc-accent); padding: 96px 0; text-align: center; }
.wwb-statement__icon { display: inline-block; width: 54px; height: 54px; background: #FFFFFF; -webkit-mask: url('../images/cross-mark.svg') center / contain no-repeat; mask: url('../images/cross-mark.svg') center / contain no-repeat; margin: 0 0 26px; }
.wwb-statement__text { font-family: var(--kbc-font-display); text-transform: uppercase; font-weight: 400; font-size: clamp(28px, 3.4vw, 50px); line-height: 1.06; letter-spacing: .01em; color: #FFFFFF; max-width: 1100px; margin: 0 auto; }
.wwb-cards { padding: 70px 0 40px; }

/* ============================================================
   SERMON DETAIL — hero rojo + lista de episodios (audios) + player
   Plano: tonos planos, radius 10px, sin sombras ni gradientes.
   ============================================================ */
/* HERO rojo de la serie */
.sermon-hero { position: relative; overflow: hidden; background: #9E1B2C; padding: 160px 0 96px; }
.sermon-hero__eyebrow { position: relative; margin: 0; padding-bottom: 20px; color: #FFFFFF; font-family: var(--kbc-font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.1; }
.sermon-hero__eyebrow::after { content: ""; position: absolute; left: 0; bottom: 0; width: 132px; height: 3px; background: rgba(255, 255, 255, .55); }
.sermon-hero__art { max-width: 540px; margin: 0 auto; }
.sermon-hero__art img { display: block; width: 100%; border-radius: 10px; }

/* solo en sermon-detail: hero sin la capa oscura (::after) para ver el arte a color pleno */
[data-page="sermons-detail"] .events-hero::after { display: none; }

/* LISTA de episodios */
.sermon-detail { padding: 72px 0 170px; }
.sermon-detail__cover { max-width: 360px; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #E6E3DD; }
.sermon-detail__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sermon-list li + li { margin-top: 0; }
.sermon-row { display: flex; align-items: flex-start; gap: 20px; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid #E6E3DD; padding: 22px 4px; cursor: pointer; }
.sermon-row__num { flex: 0 0 auto; min-width: 34px; font-weight: 700; font-size: 16px; color: #141B34; line-height: 1.45; }
.sermon-row__info { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.sermon-row__title { font-weight: 700; font-size: 17px; line-height: 1.35; color: #141B34; }
.sermon-row__speaker { font-size: 14px; color: #6A6A72; }
.sermon-row__date { flex: 0 0 auto; white-space: nowrap; padding-left: 20px; padding-top: 2px; font-size: 14px; color: #6A6A72; }
.sermon-row:hover .sermon-row__title { color: var(--kbc-accent); }
.sermon-row.is-active .sermon-row__num,
.sermon-row.is-active .sermon-row__title { color: var(--kbc-accent); }

/* PLAYER fijo abajo */
.sermon-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; background: #1E2536; transform: translateY(100%); transition: transform .4s var(--kbc-ease); }
.sermon-player.is-open { transform: translateY(0); }
.sermon-player__inner { display: flex; align-items: center; gap: 22px; padding: 16px max(24px, calc((100vw - 1366px) / 2)); }
.sermon-player__cover { flex: 0 0 auto; width: 88px; height: 88px; border-radius: 10px; overflow: hidden; background: #9E1B2C; }
.sermon-player__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sermon-player__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; color: #FFFFFF; cursor: pointer; }
.sermon-player__ic-pause { display: none; }
.sermon-player.is-playing .sermon-player__ic-play { display: none; }
.sermon-player.is-playing .sermon-player__ic-pause { display: inline; }
.sermon-player__icon.is-muted { color: rgba(255, 255, 255, .45); }
.sermon-player__progress { flex: 1 1 auto; padding: 12px 0; cursor: pointer; }
.sermon-player__track { position: relative; height: 3px; border-radius: 10px; background: rgba(255, 255, 255, .25); }
.sermon-player__fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 10px; background: #FFFFFF; }
.sermon-player__handle { position: absolute; left: 0; top: 50%; width: 10px; height: 10px; border-radius: 10px; background: #FFFFFF; transform: translate(-50%, -50%); }
.sermon-player__time { flex: 0 0 auto; font-size: 14px; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.sermon-player__speed { flex: 0 0 auto; border: 0; background: transparent; color: #FFFFFF; font-size: 15px; font-weight: 600; cursor: pointer; padding: 0 4px; }
/* volumen: swap icono normal / muteado (feedback claro) */
.sermon-player__ic-mute { display: none; }
.sermon-player__icon.is-muted .sermon-player__ic-vol { display: none; }
.sermon-player__icon.is-muted .sermon-player__ic-mute { display: inline; }
/* pip: modo mini pegado abajo-derecha */
.sermon-player.is-mini { left: auto; right: 16px; bottom: 16px; width: auto; max-width: 340px; border-radius: 10px; }
.sermon-player.is-mini .sermon-player__inner { padding: 12px 16px; gap: 14px; }
.sermon-player.is-mini .sermon-player__cover { width: 52px; height: 52px; }
.sermon-player.is-mini .sermon-player__progress,
.sermon-player.is-mini .sermon-player__time,
.sermon-player.is-mini .sermon-player__speed,
.sermon-player.is-mini #spVol { display: none; }
/* fullscreen: now playing centrado */
.sermon-player:fullscreen { transform: none; background: #1E2536; }
.sermon-player:fullscreen .sermon-player__inner { flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 30px; padding: 40px; }
.sermon-player:fullscreen .sermon-player__cover { width: 300px; height: 300px; }
.sermon-player:fullscreen .sermon-player__progress { flex: 0 0 auto; width: min(640px, 80vw); }

/* ============================================================
   WHAT WE BELIEVE — reutiliza give-card, lig-faq y btn-black.
   Clases compartidas: .wwb-svg (titulos/iconos), .wwb-media (imagenes), .wwb-text.
   ============================================================ */
.wwb-hero { align-items: center; padding-bottom: 0; }
.wwb-hero__sub { color: rgba(255, 255, 255, .92); font-size: clamp(16px, 2.3vw, 25px); margin: 16px 0 0; font-weight: 200; }

/* titulos/iconos display-font en SVG (sin width/height) */
.wwb-svg { display: block; max-width: 100%; margin-bottom: 22px; }
.wwb-statement .wwb-svg { margin-inline: auto; }
.wwb-statement__text-svg { margin-bottom: 0; }

/* imagenes de seccion (foundation, distinctives, faqs) */
.wwb-media { border-radius: 10px; overflow: hidden;  }
.wwb-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* statement (banda roja) */
.wwb-statement__actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 36px; }
.wwb-statement__pdf { color: #FFFFFF; font-size: 16px; text-decoration: underline; }

/* our foundation (card rosa) */
.wwb-foundation__card { background: #F7E7E7; border-radius: 10px; padding: 48px 52px; }

/* faqs */
.wwb-faqs__sub { font-size: 16px; color: #6A6A72; margin: 0 0 26px; }
.wwb-faqs__list.lig-faq { max-width: none; margin: 0; }

/* espaciado de secciones */
.wwb-foundation { padding: 30px 0 40px; }
.wwb-faith, .wwb-distinctives { padding: 70px 0 30px; }
.wwb-faqs { padding: 70px 0 120px; }

/* MODAL Statement of Faith — reutiliza staff-modal (bottom-sheet oscuro) + tab lateral */
.wwb-modal { z-index: 10000; }                 /* sobre el header fijo */
/* altura fija: el dialog no cambia de tamano al cambiar de tab */
.wwb-modal__dialog { display: flex; flex-direction: column; gap: 0; height: 92vh; max-height: 92vh; overflow: hidden; }
.wwb-modal__intro { max-width: 900px; margin: 0 0 34px; flex: 0 0 auto; }
.wwb-modal__lead { font-weight: 700; font-size: clamp(18px, 2vw, 22px); line-height: 1.35; color: #FFFFFF; margin: 0 0 18px; }
.wwb-modal__mission { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .8); margin: 0; }
.wwb-modal__tabs { display: flex; gap: 44px; align-items: flex-start; flex: 1 1 auto; min-height: 0; }
.wwb-modal__nav { flex: 0 0 auto; width: 210px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; }
.wwb-tab { text-align: left; background: transparent; border: 0; border-left: 3px solid transparent; color: rgba(255, 255, 255, .78); padding: 12px 16px; font-size: 16px; font-weight: 600; cursor: pointer; border-radius: 0 8px 8px 0; }
.wwb-tab.is-active { background: rgba(255, 255, 255, .1); color: #FFFFFF; border-left-color: var(--kbc-accent); }
/* el scroll vive aqui, no en el dialog: la altura total no salta */
.wwb-modal__panels { flex: 1 1 auto; min-width: 0; height: 100%; overflow-y: auto; padding-right: 8px; }
.wwb-panel { display: none; }
.wwb-panel.is-active { display: block; }
.wwb-panel__title { font-family: var(--kbc-font-sans); font-weight: 700; font-size: 20px; line-height: 1.25; color: #FFFFFF; margin: 0 0 18px; }
.wwb-panel p { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .85); margin: 0 0 16px; }
.wwb-panel p strong { color: #FFFFFF; }
.wwb-panel__sub { font-size: 16px; font-weight: 700; color: #FFFFFF; margin: 24px 0 8px; }
.wwb-panel__sub .wwb-panel__ref-in { font-weight: 400; color: rgba(255, 255, 255, .5); }
.wwb-panel__ref { font-size: 16px; color: rgba(255, 255, 255, .5); margin: 0 0 4px; }
body.wwb-modal-open { overflow: hidden; }
@media (max-width: 767px) {
    .wwb-modal__tabs { flex-direction: column; gap: 20px; }
    .wwb-modal__nav { flex-direction: row; flex-wrap: wrap; width: auto; position: static; }
    .wwb-modal__panels { height: auto; }
}

/* ============================================================
   WORSHIP MUSIC & PHILOSOPHY — reutiliza give-statement, give-card, fac-values, btn-black.
   Solo layout (fuentes vienen de las clases base). SVG sin width/height.
   ============================================================ */
/* MUSIC PLAYLIST — card beige + cantante */
.wmp-playlist { padding: 30px 0 60px; }
.wmp-playlist__card {   padding: 0px 52px; overflow: hidden;position:relative }
.wmp-playlist__card:before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80%;
    min-height: 400px;
    border-radius: 10px;
    z-index: 0;
    background: #E6E3DD;
}
.wmp-playlist__title { display: block; max-width: 100%; margin: 0 0 18px; }
.wmp-playlist__text { max-width: 520px; }
.wmp-playlist__singer { display: block; max-width: 100%; margin-left: auto; }

/* PRINCIPLES — pill + heading centrados + cards con titulo SVG + refs */
.wmp-principles { padding: 90px 0 40px; }
.wmp-principles__title { margin: 18px auto 40px; }
.wmp-card__title { display: block; max-width: 100%; }
.wmp-card__desc { font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .92); margin: 22px 0 0; }
.wmp-card__ref { width: 100%; margin-top: auto; padding-top: 24px; text-align: right; font-size: 16px; font-weight: 700; color: #FFFFFF; }
[data-page="worship-music"] .give-card__icon,
[data-page="worship-music"] .give-card:hover .give-card__icon { background: url('../images/KBC-WorshipMusicPhilosophy-PrinciplesCard-SVG-Icon.svg') center / contain no-repeat; }

/* BOTTOM LINE — titulo SVG + 5 cualidades (2 columnas) + cruz watermark */
.wmp-songs { position: relative; overflow: hidden; padding: 70px 0 120px; }
.wmp-songs__cross { position: absolute; top: 50%; right: -60px; transform: translateY(-50%); width: 620px; height: 620px; background: #EDEBE7; -webkit-mask: url('../images/cross-mark.svg') center / contain no-repeat; mask: url('../images/cross-mark.svg') center / contain no-repeat; z-index: 0; }
.wmp-songs .container-xxl { z-index: 1; }
.wmp-songs__eyebrow {font-size: 18px; 
    margin: 0 0 8px;
    font-weight: 600;}
.wmp-songs__title { display: block; max-width: 100%; margin: 0 0 50px; }
.wmp-songs__item { margin-bottom: 48px; }
.wmp-songs__label { font-family: var(--kbc-font-sans); font-weight: 700; text-transform: uppercase; font-size: 22px; letter-spacing: .01em; color: #141B34; margin: 0 0 10px; }
.wmp-songs__item p{font-size: 17px;}
/* FINALLY — card oscuro (imagen) + titulo SVG + 2 columnas blancas */
.wmp-finally { padding: 30px 0 120px; }
.wmp-finally__card { position: relative; overflow: hidden; border-radius: 10px; background-size: cover; background-position: center; padding: 200px 60px 70px; }
.wmp-finally__card::before { content: ""; position: absolute; inset: 0; background: rgba(11, 11, 12, .3); z-index: 0; }
.wmp-finally__card > * { position: relative; z-index: 1; }
.wmp-finally__title { display: block; max-width: 100%; margin: 0 0 32px; }
.wmp-finally p { color: #FFFFFF; font-weight: 300; font-size: 17px;}
.wmp-finally a { color: #FFFFFF; text-decoration: underline; }
@media (max-width: 767px) { .wmp-finally__card { padding: 120px 24px 40px; } }

/* ============================================================
   NEXT STEPS — reutiliza events-hero, give-statement, kids-block, btn-*.
   Solo layout (fuentes desde las clases base). SVG sin width/height.
   ============================================================ */
.ns-hero__title { text-align: left; }
.ns-hero__bar { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .35); }
.ns-hero__bar-label { color: #FFFFFF; font-family: var(--kbc-font-display); text-transform: uppercase; font-weight: 400; font-size: clamp(20px, 2vw, 28px); letter-spacing: .01em; }
/* statement / connection card */
.ns-statement__sub { font-size: 16px; line-height: 1.6; color: #4A4A55; max-width: 640px; margin: 0 auto 26px; }
.ns-statement__gallery { margin-top: 60px; }
.ns-gallery__media { border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 5; }
.ns-gallery__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* titulos SVG de los bloques */
.ns-block__title { display: block; max-width: 100%; margin: 0 0 22px; }
/* studies: centrado + imagen full-width */
.ns-studies { padding: 60px 0; }
.ns-studies__title { margin: 0 auto 22px; }
.ns-studies__media { border-radius: 10px; overflow: hidden; aspect-ratio: 21 / 9; margin-top: 50px; }
.ns-studies__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   EVENT DETAIL — maqueta placeholder previa a la integracion PCO.
   Sin hero: la vista arranca directo en el contenido, por eso lleva
   padding-top del alto del header fijo. Tonos planos, sin sombras.
   ============================================================ */
.event-detail { padding-top: var(--kbc-nav-h); }

.evd-main { padding: 60px 0 70px; background: var(--kbc-white); }

.evd-back {
    display: inline-block;
    font-family: var(--kbc-font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kbc-graphite);
    text-decoration: none;
    margin-bottom: 26px;
}
.evd-back:hover { color: var(--kbc-accent); }

.evd-eyebrow {
    font-family: var(--kbc-font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kbc-graphite);
    margin: 0 0 12px;
}
.evd-eyebrow span { color: var(--kbc-accent); margin: 0 6px; }

.evd-title { margin: 0 0 44px; max-width: 20ch; }

/* ---- Cuerpo (izq) ---- */
.evd-body__media {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #E6E3DD;
    margin-bottom: 34px;
}
.evd-body__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evd-body__heading { margin: 0 0 18px; }
.evd-body p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--kbc-graphite);
    margin: 0 0 20px;
    max-width: 68ch;
}

/* ---- Datos (der) ---- */
.evd-meta {
    border-top: 2px solid var(--kbc-ink);
    padding-top: 26px;
}
.evd-meta__item { margin-bottom: 26px; }
.evd-meta__label { margin: 0 0 6px; }
.evd-meta__item p {
    font-size: 16px;
    line-height: 1.55;
    color: var(--kbc-graphite);
    margin: 0;
}
.evd-cta { display: inline-block; margin: 8px 0 18px; }
.evd-link {
    display: block;
    font-family: var(--kbc-font-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--kbc-ink);
    text-decoration: underline;
}
.evd-link:hover { color: var(--kbc-accent); }

/* ---- More events ---- */
.evd-more { padding: 20px 0 110px; background: var(--kbc-white); }
.evd-more__title { margin: 0; }

.evd-card { display: block; text-decoration: none; color: inherit; }
.evd-card__media {
    position: relative;
    width: 100%; 
    border-radius: 10px;
    overflow: hidden;
    background: #E6E3DD;
    margin-bottom: 16px;
}
.evd-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evd-card__date {
    position: absolute;
    left: 14px;
    bottom: 14px;
    background: var(--kbc-white);
    border-radius: 10px;
    padding: 8px 14px;
    text-align: center;
    line-height: 1;
}
.evd-card__date b { display: block; color: var(--kbc-ink); }
.evd-card__date i {
    display: block;
    font-family: var(--kbc-font-sans);
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kbc-accent);
    margin-top: 4px;
}
.evd-card__title { margin: 0; }
.evd-card:hover .evd-card__title { color: var(--kbc-accent); }

/* ============================================================
   OUR STORY — timeline en scroll horizontal.
   .story-stage se pinnea (GSAP) y ocupa el viewport; dentro
   conviven el bg, la tira del intro, el logo y el track de
   capitulos. Tonos planos, sin sombras ni degradados.
   ============================================================ */
.kbc-story { font-family: var(--kbc-font-sans); color: #141B34; background: var(--kbc-white); }

.story-stage {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: var(--kbc-white);
}

/* ---- INTRO: tira de fotos ---- */
.story-strip {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.story-strip__track {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 40px;
    will-change: transform;
}
.story-strip__item {
    flex: 0 0 auto;
    width: 340px;
    height: 300px;
    margin: 0;
    overflow: hidden;
    background: #E6E3DD;
}
.story-strip__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* la que hace el zoom: crece desde su centro y pasa por encima de las demas
   hasta quedarse como fondo de pantalla completa */
.story-strip__item--hero {
    position: relative;
    z-index: 2;
    transform-origin: center center;
    will-change: transform;
}

/* ---- INTRO: logo centrado ---- */
.story-logo {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    will-change: transform, opacity;
}
/* lockup oficial (SVG blanco) */
.story-logo img {
    width: min(48vw, 620px);
    height: auto;
    display: block;
}

/* ---- TRACK: capitulos en fila ---- */
.story-track {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    height: 100%;
    display: flex;
    align-items: stretch;
    will-change: transform;
}
.story-panel {
    flex: 0 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    background: var(--kbc-white);
    border-right: 1px solid var(--kbc-mist);
}

/* panel de apertura (texto de entrada) */
.story-panel--intro { width: 460px; padding: 0 46px; }
.story-panel--intro .story-panel__inner { max-width: 340px; }
.story-intro__lead {
    font-family: 'kbc--font';
    font-size: 34px;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 0 0 26px;
}
.story-intro__text { font-size: 16px; line-height: 1.6; color: var(--kbc-graphite); margin: 0; }

/* capitulo: columna de texto + columna de imagen */
.story-chapter { width: 1180px; }
.story-chapter__col { height: 100%; }
.story-chapter__col--num {
    width: 420px;
    padding: 70px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid var(--kbc-mist);
}
.story-chapter__col--media {
    width: 760px;
    padding: 70px 46px;
    display: flex;
    align-items: center;
}
.story-chapter__eyebrow {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px;
}
.story-chapter__num {
    display: block;
    font-size: 190px;
    line-height: .82;
    color: var(--kbc-ink);
    margin-bottom: 22px;
}
.story-chapter__body {
    font-size: 15px;
    line-height: 1.55;
    color: var(--kbc-graphite);
    margin: 0 0 14px;
}
.story-chapter__title { margin: 18px 0 0; }
.story-chapter__media {
    width: 100%;
    height: 90%; 
    overflow: hidden;
    background: #E6E3DD;
}
/* la imagen se monta mas ancha que su marco: asi el parallax la puede
   correr a los lados sin descubrir el fondo */
.story-chapter__media img {
    /* holgura de 70px por lado: el desplazamiento del parallax es de +-45px,
       asi nunca se descubre el fondo del marco en ninguno de los extremos */
    width: calc(100% + 140px);
    /* hay un max-width:100% global para <img> que anulaba la holgura */
    max-width: none;
    height: 100%;
    margin-left: -70px;
    object-fit: cover;
    display: block;
    will-change: transform;
}

/* ---- Paginacion ---- */
.story-pager {
    position: absolute;
    left: 50%;
    bottom: 34px;
    /* el centrado va por xPercent en GSAP: si se deja aqui, el tween del
       eje Y sobrescribiria el transform y el pager se descentraria */
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 2px;
    background: #E8E8E8;
    border-radius: 10px;
    padding: 5px;
}
/* numeros con la tipografia de la marca, como en el diseno */
.story-pager__dot {
    border: 0;
    background: transparent;
    font-family: 'kbc--font';
    font-weight: 700;
    font-size: 19px;
    line-height: 1;
    color: #161616;
    padding: 7px 9px 5px;
    border-radius: 8px;
    cursor: pointer;
}
.story-pager__dot.is-active { background: var(--kbc-accent); color: var(--kbc-white); }

/* Story — eyebrow con anio en segunda linea + pie de imagen */
.story-chapter__eyebrow span { display: block; }
.story-chapter__caption {
    font-size: 13px;
    line-height: 1.5;
    color: var(--kbc-graphite);
    margin: 14px 0 0;
}
.story-chapter__col--media { flex-direction: column; justify-content: center; gap: 18px; }
/* capitulo 05: dos imagenes apiladas en la misma columna */
.story-chapter__media--stack { max-height: 320px; }

/* ---- Story: separadores horizontales dentro de la columna de texto ----
   En el diseno cada bloque (numero / parrafos / titulo) va dividido por una
   linea que cruza la columna completa. Se resuelve con hermanos adyacentes
   para que funcione igual en los capitulos con el orden invertido
   (titulo arriba, numero abajo), sin tocar el HTML.
   El margin negativo + padding hace que la linea llegue a los dos bordes. */
.story-chapter__col--num > * {
    margin-left: -40px;
    margin-right: -40px;
    padding-left: 25px;
    padding-right: 25px;
}
.story-chapter__num + .story-chapter__body,
.story-chapter__body + .story-chapter__title,
.story-chapter__title + .story-chapter__body,
.story-chapter__body + .story-chapter__eyebrow {
    border-top: 1px solid var(--kbc-mist);
    padding-top: 26px;
    margin-top: 26px;
}
/* el eyebrow y su numero son un solo bloque: sin linea entre ellos */
.story-chapter__eyebrow + .story-chapter__num { border-top: 0; margin-top: 0; padding-top: 0; }

/* ---- Gospel partners: la card ahora es un boton que abre el modal ---- */
button.partner-card__media {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}
/* pais / rol bajo el nombre, dentro del overlay */
.partner-card__info span {
    display: block;
    font-family: var(--kbc-font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kbc-accent);
    margin-top: 4px;
}

/* ============================================================
   SLIDER HORIZONTAL — "We intentionally gather to..." (home)
   Scroll nativo, sin pin de GSAP. Cards verticales con la foto
   de fondo, un velo oscuro para que se lea el texto, y el texto
   + boton dentro de la propia card.
   ============================================================ */
.kbc-slider__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;                 /* Firefox */
    -ms-overflow-style: none;
    padding-bottom: 8px;
}
.kbc-slider__viewport::-webkit-scrollbar { display: none; }

.kbc-slider__row {
    display: flex;
    gap: 20px;
    /* el padding izquierdo lo calcula el JS midiendo el container real:
       con 100vw la scrollbar desalineaba la primera card unos 7px */
    padding: 0 24px;
    width: max-content;
}

/* ---- Card ----
   El wrapper es el flex item (y el que hace snap); dentro va el enlace que
   ocupa toda la card, asi todo el bloque es clickeable. */
.kbc-slide-wrap {
    position: relative;
    flex: 0 0 auto;
    width: var(--card-w, 380px);
    scroll-snap-align: start;
}
.kbc-slide {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    aspect-ratio: 3 / 4;                   /* formato vertical */
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #E6E3DD;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.kbc-slide__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--kbc-ease);
}
/* velo: transparente arriba, oscuro abajo, para que el texto se lea */
.kbc-slide__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
                rgba(10, 10, 10, .92) 0%,
                rgba(10, 10, 10, .78) 28%,
                rgba(10, 10, 10, .30) 58%,
                rgba(10, 10, 10, 0)   85%);
    pointer-events: none;
}
/* texto a la izquierda + cubo con flecha a la derecha */
.kbc-slide__body {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 28px 35px 35px;
    color: var(--kbc-white);
}
.kbc-slide__text { flex: 0 1 80%; }
.kbc-slide__title { 
    font-weight: 700;
    font-size: 20px;
    line-height: .95;
    text-transform: uppercase;
    color: var(--kbc-white);
    margin: 0 0 12px;
}
.kbc-slide__desc {
    font-family: var(--kbc-font-sans);
    font-size: 18px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .88);
    margin: 0 0 0px; 
}
/* el cubo con la flecha: mismo lenguaje que las flechas del slider */
.kbc-slide__go {
    flex: 0 0 auto;
    margin-left: auto;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--kbc-white);
    transition: background-color .3s var(--kbc-ease), border-color .3s var(--kbc-ease);
}
.kbc-slide__go svg { width: 22px; height: 22px; }

/* hover: zoom a la foto y el cubo en rojo de marca */
.kbc-slide:hover .kbc-slide__img,
.kbc-slide:focus-visible .kbc-slide__img { transform: scale(1.06); }
.kbc-slide:hover .kbc-slide__go,
.kbc-slide:focus-visible .kbc-slide__go {
    background: var(--kbc-accent);
    border-color: var(--kbc-accent);
    color: var(--kbc-white);
}
@media (prefers-reduced-motion: reduce) {
    .kbc-slide__img { transition: none; }
    .kbc-slide:hover .kbc-slide__img { transform: none; }
}

/* el menu de campus se ancla al wrapper de la card, justo encima del cubo.
   El estilo base usa width:100% y aqui el wrapper es la card entera, por eso
   el menu se estiraba y tapaba el texto. */
.kbc-slide-wrap.custom-dropdown-wrapper .custom-dropdown-menu {
    left: auto;
    right: 26px;
    bottom: 94px;
    top: auto;
    width: auto;
    min-width: 190px;
    margin-top: 0;
    border-radius: 10px;
    box-shadow: none;
    overflow: hidden;
}
/* separador legible sobre el rojo */
.kbc-slide-wrap.custom-dropdown-wrapper .custom-dropdown-menu a {
    border-bottom-color: rgba(255, 255, 255, .28);
}

/* ---- Controles: barra de avance + flechas ---- */
.kbc-slider__controls {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 34px;
}
.kbc-slider__track {
    position: relative;
    flex: 1 1 auto;
    height: 2px;
    background: var(--kbc-mist);
}
.kbc-slider__fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: var(--kbc-accent);   /* rojo de marca */
}
.kbc-slider__nav { display: flex; gap: 8px; }
.kbc-arrow {
    width: 46px;
    height: 46px;
    border: 1px solid var(--kbc-mist);
    border-radius: 10px;
    background: transparent;
    color: var(--kbc-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.kbc-arrow svg { width: 20px; height: 20px; }
.kbc-arrow:hover { background: var(--kbc-bone); }
.kbc-arrow[disabled] { opacity: .35; cursor: default; }
.kbc-arrow[disabled]:hover { background: transparent; }

/* ============================================================
   GOSPEL — modal de video (movido desde gospel.blade.php)
   ============================================================ */
.custom-video-modal {
    display: none;              /* oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

/* lo abre el JS agregando la clase */
.custom-video-modal.is-active {
    display: flex;
}

/* velo oscuro */
.cv-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    cursor: pointer;
}

/* contenedor del reproductor */
.cv-modal-content {
    position: relative;
    width: 90%;
    max-width: 1000px;
    z-index: 100000;
}

/* boton de cerrar */
.cv-close-btn {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s ease;
}

.cv-close-btn:hover {
    color: #cccccc;
}

/* mantiene la proporcion 16:9 del iframe */
.cv-iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000;
    border-radius: 8px;
}

.cv-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* El CTA de Gospel lo colorea GSAP con estilos inline, asi que el hover
   necesita !important para poder ganarles. */
.gospel-cta:hover,
.gospel-cta:focus {
    background-color: var(--kbc-accent) !important;
    border-color: var(--kbc-accent) !important;
    color: #fff !important;
}