/* ============================================================
   KBC — RESPONSIVE MOBILE (HOME)
   Una sola media query. Reutiliza las clases existentes de
   style.css / pages.css; !important solo donde hay que ganarle
   a reglas previas o a estados iniciales pensados para GSAP.
   En mobile los efectos GSAP de scroll estan apagados
   (ver guard en customgsap_v2.js).
   ============================================================ */
@media (max-width: 767.98px) {
    /* Escala de titulares kbc--font (mobile) */
    .kbc--font    { font-size: 44px; }
    .kbc--font-xl { font-size: 56px; }
    .kbc--font-lg { font-size: 50px; }
    .kbc--font-md { font-size: 36px; }
    .kbc--font-sm { font-size: 26px; }
    .kbc--font-xs { font-size: 20px; }

    body .about-hero__bg {
            background-size: 360%;
            background-position: 63% 8%; 
            background-repeat: no-repeat;
        }
    /* ---- GSAP OFF: los estados iniciales ocultos pasan a visibles ---- */
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        will-change: auto;
    }
    .odessa-link {
        margin-bottom: 10px;
        display: block;
    }
    /* ---- Textos SIEMPRE a la izquierda en mobile ---- */
    .text-center { text-align: left !important; }
    .hero-title { text-align: left; font-size: clamp(40px, 11vw, 72px);
        line-height: 1.1;}

    /* ---- HEADER: barra fija blanca con logo oscuro siempre ---- */
    .kbc-header {
        background: var(--kbc-white);
        border-bottom: 1px solid var(--kbc-mist);
        color: var(--kbc-ink);
        --logo-color: #1D2327 !important;
    }
    .kbc-nav__inner {
        height: 64px;
        padding: 0 16px !important;
    }
    .kbc-nav__cross { width: 38px; height: 38px; }
    /* Lockup mini visible junto a la cruz (sin morph de scroll) */
    .kbc-nav__lockup-stack {
        opacity: 1 !important;
        pointer-events: auto;
    }
    /* Boton Menu: entra al flujo, visible y clickeable siempre */
    .kbc-nav__menu-btn {
        position: static !important;
        margin-top: 0 !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        padding: 12px 18px;
        font-size: 15px;
        background: var(--kbc-bone);
        border-color: var(--kbc-mist);
        color: var(--kbc-ink);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* ---- MEGA MENU drill-down: nivel 1 (cats) -> nivel 2 (subs + Back) ---- */
    .kbc-mega {
        padding: 76px 12px 24px;
        overflow-y: auto;
    }
    .kbc-mega__inner { min-height: 0; }
    .kbc-mega__cat { padding: 12px 20px; }
    .kbc-mega__mid {
        display: none;              /* oculto hasta entrar a un submenu */
        margin: 10px;
        padding: 20px;
    }
    .kbc-mega.is-sub-open .kbc-mega__cats { display: none; }
    .kbc-mega.is-sub-open .kbc-mega__mid { display: block; }
    .kbc-mega__back {
        display: block;
        width: 100%;
        text-align: left;
        background: transparent;
        border: 0;
        padding: 0 0 16px;
        font-family: var(--kbc-font-sans);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: var(--kbc-accent);
        cursor: pointer;
    }

    /* ---- HERO MOBILE (include propio; el hero desktop va d-none) ----
       Video 100svh, statement centrado, bar New Here pegada abajo */
    .kbc-hero-m {
        position: relative;
        height: 100vh;
        height: 100svh;
        min-height: 540px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--kbc-black);
        padding-top: 64px;          /* alto del header fijo */
    }
    .kbc-hero-m__video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .kbc-hero-m__veil {
        position: absolute;
        inset: 0;
        background: rgba(11, 11, 11, 0.42);
    }
    .kbc-hero-m__statement {
        position: relative;
        z-index: 2;
        flex: 1 1 auto;             /* centra el texto en la zona de video */
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0 22px;
        text-align: left;
        color: var(--kbc-white);
        font-family: var(--kbc-font-sans);
        font-weight: 500;
        font-size: 22px;
        line-height: 1.35;
    }
    /* Bar reusada del hero desktop: estatica, New Here izq / boton der */
    .kbc-hero-m .kbc-hero__bar {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: none;
        height: auto;
        margin: 0;
        padding: 18px 16px;
    }
    .kbc-hero__newhere { font-size: 26px; }

    /* ---- Curvas superiores mas chicas en pantallas angostas ---- */
    .topc:before, .topcw:before, .topcb:before, .topck:before {
        border-radius: 60px 60px 0 0;
        top: -28px;
        height: 34px;
    }

    /* ---- ONE MISSION ---- */
    .kbc-one-mission { padding: 56px 0 32px; }

    /* ---- LOCATIONS: cards apiladas, overlay siempre visible (touch) ---- */
    .kbc-locations { padding: 40px 0 56px; }
    .floating-svg1 { display: none; }
    .kbc-locations .d-flex {
        flex-direction: column;
        gap: 16px !important;
    }
    .kbc-loc-card { aspect-ratio: 4 / 5; }
    /* En touch no hay hover: se anulan los efectos de escala/blur */
    .kbc-loc-card:hover { transform: none !important; box-shadow: none; }
    .kbc-locations .d-flex:has(.kbc-loc-card:hover) .kbc-loc-card:not(:hover) {
        transform: none !important;
        filter: none;
    }
    .kbc-loc-card__overlay {
        transform: none !important;
        padding: 24px 16px;
    }
    /* Sin blur en touch: el gradiente basta y evita jank de render */
    .kbc-loc-card__overlay::before {
        opacity: 1;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .kbc-loc-card__overlay ul { margin-top: 16px; }

    /* ---- GATHER: Swiper (.3 | 1 | .3) con autoplay y loop infinito.
       Swiper controla anchos/translate; aqui solo se neutraliza el layout
       de desktop (width max-content + gap) ---- */
    .kbc-gather { padding: 48px 0 56px; }
    .height-100 { height: auto !important; }
    .kbc-gather .mb-60 { margin-bottom: 28px !important; }
    .kbc-gather-swiper { overflow: hidden; }
    .kbc-gather-carousel {
        width: 100%;
        gap: 0;
    }
    /* Card simetrica: titulo / descripcion / imagen / boton (nunca roto).
       display:contents saca h3 y boton del d-flex para poder ordenarlos */
    .kbc-gather-card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .kbc-gather-card > .d-flex { display: contents !important; }
    .kbc-gather-card__title {
        order: 1;
        max-width: none;
        font-size: 20px;
        margin-bottom: 0;
    }
    .kbc-gather-card__desc {
        order: 2;
        min-height: 96px;           /* iguala la altura de todas las cards */
        margin: 10px 0 16px;
    }
    .kbc-gather-card__media {
        order: 3;
        aspect-ratio: 16 / 10;      /* misma altura de imagen en todas */
        overflow: hidden;
    }
    .kbc-gather-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .kbc-gather-card .btn-beige {
        order: 4;
        align-self: flex-start;
        margin-top: 16px;
        white-space: nowrap;
    }
    .kbc-gather .mt-5 { margin-top: 8px !important; }
    /* Titulos SVG consistentes en toda la home */
    .kbc-one-mission__title,
    .kbc-gather__title-svg,
    .kbc-gather__tagline-svg { width: 100%; }
    .kbc-ky-row__title-svg {
        height: 60px;
        width: auto;
        max-width: 100%;
        margin-bottom: 18px;
    }

    /* ---- EVENTS ---- */
    .kbc-events { padding: 0 0 8px; }
    .kbc-events__inner { border-radius: 0; }

    /* ---- KIDS / YOUTH: siempre texto primero, foto despues ---- */
    .kbc-kidsyouth { padding: 48px 0; }
    .kbc-kidsyouth .mb-80 { margin-bottom: 64px !important; }
    .kbc-kidsyouth .col-md-6 { order: 1; }
    .kbc-kidsyouth .col-md-5 { order: 2; }
    /* Restaura el gutter lateral que style.css anula con padding: 24px 0
       y da aire entre texto/boton y la imagen que sigue */
    .kbc-ky-row__text { padding: 0 12px 28px; }
    .kbc-ky-row__text p { margin-bottom: 22px; }

    /* ---- BOTONES: tamano tactil compacto ---- */
    .btn-black, .btn-transparent-black, .btn-white,
    .btn-transparent-white, .btn-beige {
        padding: 13px 22px;
        font-size: 15px;
    }

    /* ============================================================
       GOSPEL (los colores rojo->blanco los sigue animando GSAP;
       aqui solo layout)
       ============================================================ */
    .kbc-hero-std {
        height: 100vh;
        height: 100svh;
        min-height: 520px;
        padding-bottom: 80px;
    }
    .section-mod { padding: 64px 0; }
    .gospel-shift .mb-80 { margin-bottom: 48px !important; }
    .gospel-shift .mb-40 { margin-bottom: 24px !important; }
    /* Grid God/Man/Christ/Response a una columna */
    .d-flex.x2 { gap: 28px; }
    .d-flex.x2 li { width: 100%; }
    /* Cruz decorativa fuera en pantallas angostas */
    img.absolute--cross { display: none !important; }
    /* Grid de videos a una columna y play visible (no hay hover en touch) */
    .video-grid { gap: 16px; }
    .video-card { width: 100%; }
    .play-btn { opacity: 1; }

    /* ============================================================
       ABOUT (sin pin: estado A = hero, estado B = bloque azul estatico;
       los parallax de fondos siguen con GSAP)
       ============================================================ */
    .about-hero {
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        padding-top: 64px;
    }
    /* Estado A ocupa una pantalla completa de foto con el bar al fondo */
    .about-hero__a {
        position: static;
        flex: 0 0 auto;
        min-height: calc(100vh - 64px);
        min-height: calc(100svh - 64px);
        display: flex;
        align-items: flex-end;
    }
    .about-hero__foot {
        position: static;
        width: 100%;
    }
    body .g-5,
    .gy-5 {
        --bs-gutter-y: 6rem;
    }
    .about-hero__bar { padding: 20px 16px; }
    .about-hero__title { font-size: 44px; }
    /* Estado B pasa a bloque estatico azul (sin morph) */
    .about-hero__b {
        position: static;
        opacity: 1 !important;
        transform: none !important;
        display: block;
        overflow: visible;
        background: #0f0f12;
        padding: 56px 0;
    }
    .about-hero__mission { margin: 0 0 20px; }
    .about-hero__statement { margin: 0; }
    .about-hero__divider { width: 100%; margin: 24px 0; }
    .about-hero__lead { margin: 0 0 12px; }
    .about-hero__cards .col-md-4 { margin-top: 28px; }
    .about-hero__cards h3 { margin-bottom: 10px; }

    /* Beliefs: card rosa compacta */
    .about-beliefs { padding: 48px 0; }
    .about-beliefs__card { padding: 24px 16px; }

    /* Staff: texto primero, foto despues */
    .about-staff { padding: 8px 0 48px; }
    .about-staff .col-md-6 { order: 2; }
    .about-staff .col-md-6.about-staff__text { order: 1; }

    /* Titulos SVG consistentes */
    .about-plan__title { margin-bottom: 28px; }

    /* Locations (parallax GSAP se mantiene) */
    .about-locations { padding: 72px 0; }
    .about-locations__title { margin: 0 0 20px; }
    .about-locations__text { margin: 0 0 26px; }

    /* Symbol: sin cruz decorativa en pantallas angostas */
    .about-symbol { padding: 56px 0; }
    .about-symbol__cross { display: none; }

    /* Pillars */
    .about-pillars { padding: 64px 0; }
    .about-pillars__grid { gap: 52px 0; }
    .about-pillars__lead { margin-bottom: 8px; }
.g-4,
.gy-4 {
    --bs-gutter-y: 3rem;
}
    /* Plan + Four Rooms */
    .about-plan { padding: 56px 0 0; }
    .about-rooms { margin-top: 48px; padding: 64px 0; }
    .about-rooms__note { text-align: left; margin-top: 24px; }

    /* ============================================================
       STAFF (masonry y parallax siguen; filtro ya va en fila <992)
       ============================================================ */
    .staff-hero {
        height: 62vh;
        height: 62svh;
        min-height: 400px;
        padding-bottom: 40px;
    }
    .staff-team { padding: 56px 0 64px; }
    /* Pills del filtro compactas */
    .staff-filter { gap: 10px; }
    .staff-filter__btn,
    .staff-filter__clean {
        padding: 10px 16px;
        font-size: 14px;
    }
    /* Grid a 2 columnas SIN masonry (flex wrap; el JS lo salta en mobile) */
    .staff-grid {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -8px;
    }
    .staff-grid__sizer { display: none; }
    .staff-card { width: 50%; }
    .staff-card { padding: 0 8px 16px; }
    .staff-card__info { padding: 0 12px 12px; }
    .staff-card__name { font-size: 20px; }
    .staff-card__role { font-size: 13px; }

    /* Modal de bio en columna */
    .staff-modal__dialog {
        flex-direction: column;
        gap: 22px;
        width: 100vw;
        max-height: 92vh;
        max-height: 92svh;
        padding: 24px 16px 32px;
    }
    .staff-modal__media { flex: 0 0 auto; max-width: none; }
    .staff-modal__media img { height: auto; aspect-ratio: 4 / 5; }
    .staff-modal__social { margin-bottom: 20px; }
    /* deja aire para el boton cerrar (40px + 18px) */
    .staff-modal__dialog { padding-top: 70px; }
    .wwb-modal__lead,
    .events-modal__title { padding-right: 4px; }
    .staff-modal__head { flex-wrap: wrap; }
    .staff-modal__name { font-size: 26px; }
    .staff-modal__bio { margin-bottom: 24px; }

    /* ============================================================
       WHAT WE BELIEVE (el melt rojo->blanco y el parallax siguen con GSAP)
       ============================================================ */
    .wwb-hero__sub { font-size: 20px; }
    .wwb-statement { padding: 56px 0; }
    /* La cruz y el texto SVG del statement dejan de ir centrados */
    .wwb-statement .wwb-svg { margin-inline: 0; }
    .wwb-statement__actions {
        align-items: flex-start;
        margin-top: 26px;
    }
    .wwb-foundation { padding: 24px 0 32px; }
    .wwb-foundation__card { padding: 24px 16px; }
    .wwb-faith,
    .wwb-distinctives { padding: 48px 0 24px; }
    .wwb-faqs { padding: 48px 0 64px; }
    /* Cards del statement of faith mas compactas */
    .give-ways__grid { --bs-gutter-y: 16px; }
    .give-card {
        min-height: 0;
        padding: 20px;
    }
    .give-card__desc { margin-top: 24px; }
    /* Distinctives: texto primero, imagen despues */
    .wwb-distinctives .col-md-5:first-child { order: 2; }
    .wwb-distinctives .col-md-5:last-child { order: 1; }
    .wwb-distinctives .mb-40 { margin-bottom: 24px !important; }
    /* FAQs: acordeon compacto */
    .lig-faq { margin-bottom: 32px; }
    .lig-faq__q {
        font-size: 16px;
        padding: 16px 36px 16px 0;
    }

    /* ============================================================
       WORSHIP MUSIC & PHILOSOPHY (parallax del hero sigue con GSAP)
       ============================================================ */
    /* Statement: cruz y texto a la izquierda */
    .give-statement { padding: 48px 0 24px; }
    .give-statement__icon,
    .give-statement__text-img { margin-inline: 0; }
    /* Playlist: card apilada (texto arriba, cantante abajo) */
    .wmp-playlist { padding: 16px 0 40px; }
    /* El beige cubre toda la card (en desktop es solo el 80% inferior) */
    .wmp-playlist__card { padding: 28px 20px 0; }
    .wmp-playlist__card:before {
        min-height: 0;
        height: 100%;
        top: 0;
    }
    .wmp-playlist__card br { display: none; }
    .wmp-playlist__card .mb-40 { margin-bottom: 22px !important; }
    .wmp-playlist__singer { margin: 24px auto 0; }
    /* Principles: pill/titulo a la izquierda, cards en columna */
    .wmp-principles { padding: 48px 0 24px; }
    .wmp-principles__title { margin: 14px 0 24px; }
    .wmp-card__desc { margin-top: 16px; }
    .wmp-card__ref { padding-top: 16px; text-align: left; }
    /* Bottom line: sin cruz watermark, items compactos */
    .wmp-songs { padding: 40px 0 56px; }
    .wmp-songs__cross { display: none; }
    .wmp-songs__title { margin-bottom: 28px; }
    .wmp-songs__item { margin-bottom: 28px; }
    .wmp-songs__label { font-size: 19px; }
    /* Finally: card oscuro compacto */
    .wmp-finally { padding: 16px 0 64px; }

    /* ============================================================
       PARTNERSHIP (parallax de hero y banner siguen con GSAP)
       ============================================================ */
    .partnership-statement { padding: 56px 0 40px; }
    .partnership-statement__icon { margin-inline: 0; }
    /* El SVG trae max-width: 920px y se desbordaba del viewport */
    .partnership-statement__text {
        margin-inline: 0;
        max-width: 100%;
        width: 100%;
    }
    .partnership__title { margin-bottom: 24px; }
    /* Grids a 2 columnas (pages.css los baja a 1 en <576) */
    .partnership-partners { padding: 0 0 48px; }
    .partner-grid,
    .partnership-vintage__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .partner-card__media { aspect-ratio: 4 / 5; }
    .partner-card__info { padding: 0 12px 12px; }
    .partner-card__info h3 { font-size: 15px; }
    .partner-card--initials .partner-card__info h3 { font-size: 30px; }
    .partnership-vintage { padding: 8px 0 48px; }
    .partnership-vintage__lead { margin: -10px 0 24px; }
    /* Outreach: titulo arriba y marquee debajo (en desktop van en fila) */
    .partnership-outreach { padding: 8px 0 48px; }
    .partnership-outreach__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    .partnership-outreach__marquee { width: 100%; }
    .partnership-outreach__track { gap: 32px; }
    .partnership-outreach__logo img { height: 40px; max-width: 130px; }
    /* Banner: mas alto (16/7 es muy plano en mobile) */
    .partnership-banner { padding: 0 0 56px; }
    .partnership-banner__inner {
        aspect-ratio: 4 / 5;
        min-height: 0;
    }
    .partnership-banner__content { padding: 24px 20px; }
    .partnership-banner__logo { max-width: 78%; }

    /* ============================================================
       FACILITY RESERVATIONS (parallax y pill scrub siguen con GSAP;
       los modales ya traen su propio responsive en pages.css)
       ============================================================ */
    .fac-values { padding: 48px 0 24px; }
    .fac-values__head { margin-bottom: 28px; }
    .fac-values__card { padding: 24px 20px; }
    .fac-values__list { gap: 18px; }
    .fac-note {
        text-align: left;
        margin-top: 32px;
        font-size: 17px;
    }
    /* Tipos de reserva: 2 columnas (ya vienen col-6) */
    .fac-types { padding: 24px 0 40px; }
    .fac-type__label { left: 14px; bottom: 14px; font-size: 22px; }
    /* CTA rojo compacto; el boton ya pasa a static por pages.css */
    .fac-cta { padding: 0 0 56px; }
    .fac-cta__box { padding: 32px 20px; }
    .fac-cta__title { font-size: 38px; }
    .fac-cta__sub { margin-bottom: 22px; }
    .fac-cta__btn { width: 100%; }
    /* Form drawer a pantalla completa y titulo bajo la X (se solapaban) */
    .fac-modal--right .fac-modal__dialog--form { width: 100vw; }
    .fac-modal__dialog--form { padding-top: 64px; }

    /* ============================================================
       ODESSA (parallax del hero y la rueda siguen con GSAP)
       ============================================================ */
    .odessa-hero__title { font-size: 46px; margin-bottom: 18px; }
    .odessa-hero__bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px 16px;
    }
    /* Los horarios se apilan (el separador rojo pasa a linea inferior) */
    .odessa-hero__times {
        flex-direction: column;
        align-items: flex-start;
        font-size: 20px;
    }
    .odessa-hero__sep {
        width: 40px;
        height: 2px;
        margin: 8px 0;
    }
    .odessa-hero__actions { width: 100%; }
    .odessa-hero__actions .btn { flex: 1 1 0; text-align: center; }
    /* Seccion roja */
    .odessa-red { padding-bottom: 8px; }
    .odessa-pastor { margin-bottom: 32px; background: transparent;
        border-radius: 10px;
        padding: 0px;}
        .col-md-6.events-item__info{
            margin-top: 20px;
        }
                .events-hero__bg{background-position: 70% 50%;}
    .odessa-about-card,
    .odessa-info { padding: 24px 20px; }
    .odessa-statement { padding: 8px 0 24px; }
    .odessa-statement.text-center img { margin: 0; }
    /* Rueda -> tira horizontal con swipe (el arco GSAP queda apagado).
       Aplica a Odessa, Wesley Chapel y Plan a Visit */
    .visit-wheel {
        height: auto;
        min-height: 0;
        display: flex;
        gap: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 0 16px 24px;
    }
    .visit-wheel .visit-polaroid {
        position: static;
        flex: 0 0 auto;
        width: 60vw;
        max-width: 240px;
        height: auto;
        aspect-ratio: 4 / 5;
        margin: 0;
        opacity: 1;
        scroll-snap-align: center;
    }
    .visit-wheel .visit-polaroid img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* Last sermon: player compacto */
    .odessa-sermon { padding: 40px 0; }
    .odessa-sermon__heading { font-size: 19px; }
    .odessa-sermon__player { flex-wrap: wrap; gap: 10px; }
    .odessa-sermon__track { flex: 1 1 100%; order: 5; }
    /* Ministries: cruz decorativa fuera, cards compactas */
    .odessa-ministries { padding: 0 0 56px; }
    .odessa-disc__head { flex-wrap: wrap; gap: 8px; }
    .odessa-aside__cross { display: none; }
    .odessa-aside__card { padding: 24px 20px; }

        .serve-hero__bg { 
            background-position: 57% 56%;
        }
    /* ============================================================
       EVENTS (Odessa y Wesley Chapel — misma plantilla).
       El parallax del hero sigue con GSAP; el modal ya trae su
       responsive en pages.css
       ============================================================ */
    .events-current { padding: 48px 0 56px; }
    .events-current__title { margin-bottom: 28px; }
    .events-list { gap: 60px; }
    .events-item__title { margin-bottom: 12px; }
    /* En desktop el desc lleva 60px para alinear con la foto */
    .events-item__desc { margin-bottom: 22px; }
    .events-item__more { width: 100%; }
    .events-modal__title { margin-right: 56px; margin-bottom: 18px; }

    /* ============================================================
       KIDS (parallax del hero sigue con GSAP)
       ============================================================ */
    .kids-statement { padding: 48px 0 56px; }
    .kids-statement__text { max-width: 100%; }
    /* Collage: en desktop son circulos absolutos con px fijos (se salian
       del viewport). En mobile pasa a grid de 3 columnas en flujo. */
    .kids-collage {
        position: static;
        min-height: 0;
        margin-top: 32px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    .kids-collage__item,
    .kids-collage__item--1,
    .kids-collage__item--2,
    .kids-collage__item--3,
    .kids-collage__item--4,
    .kids-collage__item--5,
    .kids-collage__item--6 {
        position: relative;
        left: auto;
        top: auto;
        width: calc(33.333% - 8px);
        height: auto;
        aspect-ratio: 1;
    }
    /* sin hover en touch: el trazo amarillo no aporta */
    .kids-collage__ring { display: none; }
    /* Sundays */
    .kids-block { padding: 48px 0; }
    .kids-block__lead { margin-bottom: 24px; }
    .kids-group__title { font-size: 18px; }
    .kids-group__sub { font-size: 13px; }
    .kids-group__body { padding: 14px 10px; }
    /* CTA Awana: el min-height 110vh dejaba un hueco enorme */
    .kids-awana-cta {
        min-height: 0;
        padding: 56px 0 40px;
    }
    .kids-awana-cta__logo { max-width: 100%; }
    .kids-awana-cta__text { text-align: left; }

    /* ============================================================
       YOUTH / KEYSTONE STUDENTS (parallax de los videos sigue con GSAP)
       ============================================================ */
    /* text-align: center vive en la seccion, no en .text-center */
    .youth-statement,
    .youth-mission { text-align: left; }
    .youth-statement { padding: 48px 0; }
    .youth-statement__text-svg { max-width: 100%; margin-inline: 0; }
    .youth-collage { padding: 4px 0 32px; }
    .youth-mission { padding: 16px 0 48px; }
    .youth-mission__text { margin: 0; }
    /* Video central: mas bajo para no comerse la pantalla */
    .youth-parallax { height: 48vh; min-height: 280px; }
    /* Bio: texto primero, foto despues */
    .youth-bio { padding: 48px 0; }
    .youth-bio__title-svg { max-width: 100%; margin-bottom: 18px; }
    .youth-bio .col-md-7 { order: 1; }
    .youth-bio .col-md-5 { order: 2; }
    /* Current events */
    .youth-events { padding: 8px 0 48px; }
    .youth-events__title-svg { max-width: 100%; margin-bottom: 22px; }
    .youth-event__desc.mb-40 { margin-bottom: 22px !important; }
    .youth-event__btn { display: block; text-align: center; }
    /* Drop us a line: el padding-bottom de 250px dejaba un hueco enorme */
    .youth-drop { padding: 8px 0 56px; }
    .youth-drop__card { padding: 28px 20px; }
    .youth-drop__sub { max-width: none; }
    .youth-form__submit { width: 100%; }

    /* ============================================================
       SERVE ON TEAMS (parallax del hero sigue con GSAP)
       ============================================================ */
    .serve-main { padding: 48px 0; }
    .serve-main__title { max-width: 100%; margin-bottom: 20px; }
    .serve-main__lead { max-width: none; margin-bottom: 24px; }
    .serve-main .btn-black { display: block; text-align: center; }

    /* ============================================================
       LIVE IN GROUPS (parallax del hero sigue con GSAP;
       el statement y el acordeon reusan give-statement / lig-faq)
       ============================================================ */
    .lig-groups { padding: 48px 0 56px; }
    .lig-groups__title-img { margin-bottom: 24px; }
    .lig-statement__body { margin-top: 22px; }
    .lig-statement__body p { margin-bottom: 16px; }
    /* Bloques: siempre texto primero y foto despues (incluye el reverse) */
    .lig-block { margin-bottom: 40px; }
    .lig-block .col-md-6:first-child { order: 2; }
    .lig-block .col-md-6.kids-block__text { order: 1; }
    .lig-block__title-img { margin-bottom: 12px; }
    .lig-block .kids-block__text p { max-width: none; margin-bottom: 14px; }
    .lig-block .btn-beige { display: block; text-align: center; margin-top: 18px; }
    /* Card beige del FAQ */
    .lig-faq-row { margin-bottom: 40px; }
    .lig-faq-card { padding: 4px 20px; }

    /* ============================================================
       STUDIES (parallax del hero sigue con GSAP; el carrusel de
       archived reusa el Swiper del Home)
       ============================================================ */
    /* text-align: center vive en .studies-intro__head */
    .studies-intro { padding: 48px 0 24px; }
    .studies-intro__head { text-align: left; }
    .studies-intro__lead { margin-bottom: 24px; }
    .studies-current { padding: 70px 0 40px; }
    /* los SVG traen max-width fijo (760/470px) y se salian del viewport */
    .studies-current__title {
        max-width: 100%;
        margin-bottom: 42px;
    }
    .studies-current__subtitle {
        max-width: 100%;
        margin-bottom: 18px;
    }
    body .sermon-card__media{
        aspect-ratio: 1;
    }
        .sermons-list .col-6 {
            flex: 0 0 auto;
            width: 100%;
            margin: 0;
        }
        .sermons-list .g-4 {
            gap: 10px;
        }
    /* el padding-left de 24px rompia el gutter de Bootstrap */
    .studies-current__info { padding-left: calc(var(--bs-gutter-x) * .5); }
    /* Card destacada: texto primero, foto despues */
    .studies-current__card .col-md-6:first-child { order: 1; }
    .studies-current__card .studies-current__info { order: 2; margin-bottom: 22px; }
    .studies-current__meta { margin-bottom: 20px; }
    .studies-current__info .btn-beige { display: block; text-align: center; }
    /* Cabecera del archivo: titulo y badge apilados */
    .studies-archive { padding: 8px 0 40px; }
    .studies-archive__head {
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 20px;
    }
    /* La card del archivo no lleva descripcion: sin min-height del Home */
    .studies-archive-card .kbc-gather-card__desc { min-height: 0; }
    .studies-archive-card__media { order: 3; }

    /* ============================================================
       SERMONS (parallax del hero sigue con GSAP)
       ============================================================ */
    .sermons-list { padding: 8px 0 56px; }
    .sermons-list .mb-80 { margin-bottom: 80px !important; }

    /* ============================================================
       NEXT STEPS (parallax del hero sigue con GSAP;
       el statement reusa give-statement)
       ============================================================ */
    /* Barra Connection Card del hero: label y boton apilados */
    .ns-hero__bar { margin-top: 18px; padding-top: 16px; }
    .ns-hero__bar .col-8,
    .ns-hero__bar .col-4 {
        width: 100%;
        text-align: left !important;
    }
    .ns-hero__bar .btn { display: block; text-align: center; margin-top: 12px; }
    /* Statement */
    .ns-statement__text.mb-40 { margin-bottom: 20px !important; }
    .ns-statement__sub { margin: 0 0 20px; }
    .ns-statement__gallery { margin-top: 32px; }
    /* Bloques Serve / Groups: texto primero, foto despues */
    .ns-block { padding: 40px 0; }
    .ns-block .col-md-6:last-child { order: 2; }
    .ns-block .kids-block__text { order: 1; }
    .ns-block__title { margin-bottom: 16px; }
    .ns-block .kids-block__text p { max-width: none; margin-bottom: 14px; }
    /* Studies */
    .ns-studies { padding: 40px 0; }
    .ns-studies .text-center p { margin-bottom: 20px; }
    .ns-studies__title { margin: 0 0 16px; }
    .ns-studies__media { aspect-ratio: 16 / 10; margin-top: 32px; }
    /* Botones a ancho completo en toda la pagina */
    .ns-block .btn-black,
    .ns-studies .btn-black,
    #connection .btn-black { display: block; text-align: center; }

    /* ============================================================
       PLAN A VISIT (slider del hero, parallax de kids y acordeon
       siguen con GSAP/Swiper; la rueda usa la tira horizontal)
       ============================================================ */
    .visit-intro { padding-bottom: 32px; }
    /* el blade trae margin-top: -100px inline para solapar con la rueda */
    .visit-intro .container-xxl { margin-top: 0 !important; }
    .visit-intro .text-center { text-align: left !important; }
    .visit-intro__cross { margin: 0 0 16px; }
    .visit-intro__title { margin: 0 0 18px; }
    .visit-intro__lead { margin: 0 0 10px; }
    /* Your first visit: texto primero, foto despues */
    .visit-first { padding: 40px 0; }
    .visit-first .col-md-6:first-child { order: 2; }
    .visit-first .col-md-6:last-child { order: 1; }
    .visit-first__title { margin-bottom: 16px; }
    .visit-specs { margin: 20px 0; }
    /* Find a location: el mapa deja de ser fondo y pasa a imagen suelta
       arriba, con la info debajo (sobre el fondo no se leia) */
    .visit-locations {
        padding: 0 0 48px;
        background-image: none !important;
        background-color: var(--kbc-white);
    }
    .visit-locations::before,
    .visit-locations::after { display: none; }
    .visit-locations__grid { display: block; }
    .visit-locations__map-img {
        display: block;
        margin-bottom: 28px;
    }
    .visit-locations__map-img img {
        width: 100%;
        height: auto;
        display: block;
    }
    .visit-locations__text {
        padding-left: 24px;
        padding-right: 24px;
    }
    .visit-locations__intro { max-width: none; }
    .visit-loc { margin-bottom: 32px; }
    .visit-loc .btn-black { display: block; text-align: center; }
    /* What about my kids */
    .visit-kids { padding: 72px 0; }
    .visit-kids__sub { font-size: 18px; }
    /* FAQ */
    .visit-faq { padding: 40px 0 56px; }
    .visit-faq__title { margin-bottom: 16px; }
    .faq-item > summary { font-size: 16px; padding: 16px 4px; }

    /* ============================================================
       GIVE (parallax del hero sigue con GSAP; el statement y las
       cards reusan give-statement / give-card)
       ============================================================ */
    .give-statement__ref { margin-top: 18px; }
    .give-statement__line { margin: 18px 0 0; }
    /* Portal: texto arriba, foto abajo (ya es el orden del DOM) */
    .give-portal { padding: 24px 0 40px; }
    .give-portal__title-img { margin-bottom: 18px; }
    .give-portal__text p { max-width: none; }
    .give-portal__cta {
        display: block;
        text-align: center;
        margin-top: 18px;
    }
    /* Other ways to give */
    .give-ways { padding: 8px 0 56px; }
    .give-ways__title-img { margin-bottom: 14px; }
    .give-ways__intro { margin-bottom: 24px; }

    /* ============================================================
       EMPLOYMENT (parallax del hero sigue con GSAP; la lista y el
       modal reusan events-item / events-modal)
       ============================================================ */
    .employment-intro { padding: 48px 0 8px; }
    /* el blade trae .mb-140 en la seccion */
    .employment-intro.mb-140 { margin-bottom: 40px !important; }
    .employment-intro__icon { margin-bottom: 16px; }
    .employment-intro__statement-img { margin-bottom: 18px; }
    .employment-intro__text p { max-width: none; }
    .employment-jobs { padding: 8px 0 56px; }
    .employment-jobs__title { margin-bottom: 22px; }
    /* Read more + Apply: misma fila, mitad y mitad, alineados a la izquierda */
    .employment-jobs .justify-content-end { justify-content: flex-start !important; }
    .employment-jobs .events-item__more,
    .employment-jobs .btn-beige {
        flex: 1 1 0;
        width: auto;
        text-align: center;
    }

    /* ============================================================
       SERMON DETAIL (parallax del hero sigue con GSAP)
       ============================================================ */
    /* El hero es solo el banner de la serie: cuadrado a todo el ancho
       (el arte de las series es 1:1, asi no quedan bandas negras) */
    [data-page="sermons-detail"] .kbc-hero-std {
        height: auto;
        min-height: 0;
        aspect-ratio: 1 / 1;
        padding-bottom: 0;
    }
    [data-page="sermons-detail"] .events-hero__bg {
        top: 0;
        height: 100%;
    }
    /* El padding inferior deja sitio al reproductor fijo */
    .sermon-detail { padding: 32px 0 120px; }
    /* El hero ya muestra el arte de la serie a todo el ancho:
       la portada chica repetiria la misma imagen */
    .sermon-detail .col-md-4 { display: none; }
    .sermon-detail .row { --bs-gutter-y: 0; }
    /* Filas: numero + titulo arriba, fecha debajo alineada con el titulo */
    .sermon-row {
        flex-wrap: wrap;
        gap: 0 14px;
        padding: 16px 4px;
    }
    .sermon-row__num { min-width: 28px; }
    .sermon-row__info { flex: 1 1 60%; }
    .sermon-row__title { font-size: 16px; }
    .sermon-row__date {
        width: 100%;
        padding-left: 42px;
        padding-top: 6px;
    }
    /* Reproductor fijo: compacto, sin pip ni fullscreen (no aplican en movil) */
    .sermon-player__inner {
        gap: 10px;
        padding: 10px 14px;
        flex-wrap: wrap;
    }
    .sermon-player__cover { width: 46px; height: 46px; }
    .sermon-player__icon { width: 30px; height: 30px; }
    .sermon-player__time { font-size: 13px; }
    #spPip,
    #spFull { display: none; }
    .sermon-player__progress { flex: 1 1 100%; order: 5; padding: 6px 0; }
    /* El mini queda a lo ancho para no tapar contenido */
    .sermon-player.is-mini { right: 12px; left: 12px; max-width: none; }

    /* ---- FOOTER ---- */
    /* Sin el scrub GSAP el degradado deja la zona alta clara con links
       blancos: fondo oscuro solido y closing invertido a blanco */
    .kbc-footer {
        border-radius: 0px 0px 0 0 !important;
        padding: 56px 0 24px;
        background: #0F0F0F;
    }
    .kbc-footer .kbc-footer__closing .cross-mark {
        filter: brightness(0) invert(1);
    }
    /* el titular ya es texto: se colorea, no se invierte con filter */
    .kbc-footer .kbc-footer__closing .svgtext { color: #FFFFFF; }
    .kbc-footer .kbc-footer__closing .svgicon { display: none; }
    .kbc-footer__title { color: var(--kbc-white); }
    /* Mayor especificidad: el <style> inline del footer carga despues */
    
    .kbc-footer .kbc-footer__closing .svgicon { width: 64%; }
    .kbc-footer .kbc-footer__closing .cross-mark {
        width: 54px;
        transform: none;
        margin-top: 20px;
    }
    .kbc-footer .btn {
        width: 100%;
        text-align: center;
    }
    .kbc-footer__legal { text-align: left; }
}

@media (max-width: 767.98px) {
    /* EVENT DETAIL */
    .evd-back { margin-bottom: 16px; font-size: 13px; }
    .evd-title { max-width: none; margin-bottom: 26px; }
    .evd-main { padding: 28px 0 24px; }
    .evd-meta { margin-top: 32px; }
    .evd-body__media { aspect-ratio: 4 / 3; margin-bottom: 24px; }
    .evd-more { padding: 0 0 56px; }
    .evd-more .text-md-end { margin-top: 18px; }
    .evd-card__media { aspect-ratio: 16 / 10; }
}

@media (max-width: 767.98px) {
    /* OUR STORY — sin pin ni scroll horizontal: los capitulos se apilan */
    .story-stage { height: auto; overflow: visible; }
    .story-bg { position: relative; height: 62vh; opacity: 1 !important; transform: none !important; }
    .story-bg__veil { display: none; }
    .story-strip { display: none; }
    .story-logo {
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 62vh;
        opacity: 1 !important;
        transform: none !important;
        gap: 14px;
    }
    .story-logo__cross { width: 74px; height: 74px; }
    .story-logo__type b { font-size: 32px; }
    .story-logo__type i { font-size: 16px; letter-spacing: .2em; }
    .story-track {
        position: relative;
        display: block;
        height: auto;
        opacity: 1 !important;
        transform: none !important;
    }
    .story-panel { display: block; width: 100% !important; height: auto; border-right: 0; }
    .story-panel--intro { padding: 40px 20px; }
    .story-panel--intro .story-panel__inner { max-width: none; }
    .story-intro__lead { font-size: 26px; }
    .story-chapter__col { width: 100% !important; height: auto; padding: 32px 20px; border-right: 0; }
    .story-chapter__num { font-size: 110px; }
    .story-chapter__media { max-height: 300px; }
    .story-pager { display: none; }
}