/* =================================
   UTILITY CLASSES - MARGINS & PADDINGS
   ================================= */

/* Margin Bottom (0-200) */
.mb-0 { margin-bottom: 0px !important; }
.mb-5 { margin-bottom: 5px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-15 { margin-bottom: 15px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-25 { margin-bottom: 25px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-35 { margin-bottom: 35px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-45 { margin-bottom: 45px !important; }
.mb-50 { margin-bottom: 50px !important; }
.mb-55 { margin-bottom: 55px !important; }
.mb-60 { margin-bottom: 60px !important; }
.mb-65 { margin-bottom: 65px !important; }
.mb-70 { margin-bottom: 70px !important; }
.mb-75 { margin-bottom: 75px !important; }
.mb-80 { margin-bottom: 80px !important; }
.mb-85 { margin-bottom: 85px !important; }
.mb-90 { margin-bottom: 90px !important; }
.mb-95 { margin-bottom: 95px !important; }
.mb-100 { margin-bottom: 100px !important; }
.mb-110 { margin-bottom: 110px !important; }
.mb-120 { margin-bottom: 120px !important; }
.mb-130 { margin-bottom: 130px !important; }
.mb-140 { margin-bottom: 140px !important; }
.mb-150 { margin-bottom: 150px !important; }
.mb-160 { margin-bottom: 160px !important; }
.mb-170 { margin-bottom: 170px !important; }
.mb-180 { margin-bottom: 180px !important; }
.mb-190 { margin-bottom: 190px !important; }
.mb-200 { margin-bottom: 200px !important; }

/* Margin Top (0-200) */
.mt-0 { margin-top: 0px !important; }
.mt-5 { margin-top: 5px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-15 { margin-top: 15px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-25 { margin-top: 25px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-35 { margin-top: 35px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-45 { margin-top: 45px !important; }
.mt-50 { margin-top: 50px !important; }
.mt-55 { margin-top: 55px !important; }
.mt-60 { margin-top: 60px !important; }
.mt-65 { margin-top: 65px !important; }
.mt-70 { margin-top: 70px !important; }
.mt-75 { margin-top: 75px !important; }
.mt-80 { margin-top: 80px !important; }
.mt-85 { margin-top: 85px !important; }
.mt-90 { margin-top: 90px !important; }
.mt-95 { margin-top: 95px !important; }
.mt-100 { margin-top: 100px !important; }
.mt-110 { margin-top: 110px !important; }
.mt-120 { margin-top: 120px !important; }
.mt-130 { margin-top: 130px !important; }
.mt-140 { margin-top: 140px !important; }
.mt-150 { margin-top: 150px !important; }
.mt-160 { margin-top: 160px !important; }
.mt-170 { margin-top: 170px !important; }
.mt-180 { margin-top: 180px !important; }
.mt-190 { margin-top: 190px !important; }
.mt-200 { margin-top: 200px !important; }

/* Padding Bottom (0-200) */
.pb-0 { padding-bottom: 0px !important; }
.pb-5 { padding-bottom: 5px !important; }
.pb-10 { padding-bottom: 10px !important; }
.pb-15 { padding-bottom: 15px !important; }
.pb-20 { padding-bottom: 20px !important; }
.pb-25 { padding-bottom: 25px !important; }
.pb-30 { padding-bottom: 30px !important; }
.pb-35 { padding-bottom: 35px !important; }
.pb-40 { padding-bottom: 40px !important; }
.pb-45 { padding-bottom: 45px !important; }
.pb-50 { padding-bottom: 50px !important; }
.pb-55 { padding-bottom: 55px !important; }
.pb-60 { padding-bottom: 60px !important; }
.pb-65 { padding-bottom: 65px !important; }
.pb-70 { padding-bottom: 70px !important; }
.pb-75 { padding-bottom: 75px !important; }
.pb-80 { padding-bottom: 80px !important; }
.pb-85 { padding-bottom: 85px !important; }
.pb-90 { padding-bottom: 90px !important; }
.pb-95 { padding-bottom: 95px !important; }
.pb-100 { padding-bottom: 100px !important; }
.pb-110 { padding-bottom: 110px !important; }
.pb-120 { padding-bottom: 120px !important; }
.pb-130 { padding-bottom: 130px !important; }
.pb-140 { padding-bottom: 140px !important; }
.pb-150 { padding-bottom: 150px !important; }
.pb-160 { padding-bottom: 160px !important; }
.pb-170 { padding-bottom: 170px !important; }
.pb-180 { padding-bottom: 180px !important; }
.pb-190 { padding-bottom: 190px !important; }
.pb-200 { padding-bottom: 200px !important; }

/* Padding Top (0-200) */
.pt-0 { padding-top: 0px !important; }
.pt-5 { padding-top: 5px !important; }
.pt-10 { padding-top: 10px !important; }
.pt-15 { padding-top: 15px !important; }
.pt-20 { padding-top: 20px !important; }
.pt-25 { padding-top: 25px !important; }
.pt-30 { padding-top: 30px !important; }
.pt-35 { padding-top: 35px !important; }
.pt-40 { padding-top: 40px !important; }
.pt-45 { padding-top: 45px !important; }
.pt-50 { padding-top: 50px !important; }
.pt-55 { padding-top: 55px !important; }
.pt-60 { padding-top: 60px !important; }
.pt-65 { padding-top: 65px !important; }
.pt-70 { padding-top: 70px !important; }
.pt-75 { padding-top: 75px !important; }
.pt-80 { padding-top: 80px !important; }
.pt-85 { padding-top: 85px !important; }
.pt-90 { padding-top: 90px !important; }
.pt-95 { padding-top: 95px !important; }
.pt-100 { padding-top: 100px !important; }
.pt-110 { padding-top: 110px !important; }
.pt-120 { padding-top: 120px !important; }
.pt-130 { padding-top: 130px !important; }
.pt-140 { padding-top: 140px !important; }
.pt-150 { padding-top: 150px !important; }
.pt-160 { padding-top: 160px !important; }
.pt-170 { padding-top: 170px !important; }
.pt-180 { padding-top: 180px !important; }
.pt-190 { padding-top: 190px !important; }
.pt-200 { padding-top: 200px !important; }

.fz-20 { font-size: 20px !important; }
.fz-18 { font-size: 18px !important; }
.fz-24 { font-size: 24px !important; }

/* =================================
   GLOBAL STYLES
   ================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    /* scroll-behavior: smooth; */ /* Lo maneja Lenis — el smooth nativo peleaba con el scroller JS y causaba el delay de arranque */
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container-fluid {
    padding: 0 5%;
}
.fa-heart {
    animation: heartbeat 2s ease-in-out infinite;
    display: inline-block;
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.15);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.15);
    }

    70% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

/* =================================================================
   KEYSTONE BIBLE CHURCH — HOME (Bootstrap 5.3 + custom styling)
   Sin sombras, sin gradientes, border-radius max 10px, tonos planos.
   Bootstrap maneja containers/rows/cols. Aqui solo el styling visual
   y los layouts especiales (hero pinneado, locations decorativo).
   ================================================================= */
.font-weight-500 { font-weight: 500 !important; }
.font-weight-400 { font-weight: 400 !important; }
/* ---- Tokens de marca ---- */
:root {
    --kbc-black:    #0B0B0B;
    --kbc-ink:      #111111;
    --kbc-charcoal: #1F1F1F;
    --kbc-graphite: #444444;
    --kbc-stone:    #8A8A8A;
    --kbc-mist:     #D9D9D9;
    --kbc-bone:     #F4F1EC;
    --kbc-white:    #FFFFFF;
    --kbc-accent:   #D84545;          /* color exacto del Figma */
    --kbc-pink:     #F2D9D5;

    --kbc-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --kbc-font-display: 'Bebas Neue', 'Anton', 'Inter', sans-serif;

    --kbc-radius:    4px;
    --kbc-radius-sm: 6px;
    --kbc-nav-h:     88px;

    --kbc-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Override del max-width de Bootstrap container-xxl a 1340px en nuestro home */
.kbc-home .container-xxl,
.kbc-header .container-xxl,
.kbc-footer .container-xxl {
    max-width: 1340px;
}

/* Override del padding lateral del container-fluid del hero/nav (mas generoso) */
.kbc-hero .container-fluid,
.kbc-header .container-fluid {
    padding-left: clamp(20px, 4vw, 56px);
    padding-right: clamp(20px, 4vw, 56px);
}

.kbc-home {
    font-family: var(--kbc-font-sans);
    color: var(--kbc-ink);
    background: var(--kbc-white);
    line-height: 1.5;
    overflow-x: hidden;
}
.kbc-home img,
.kbc-home video { max-width: 100%; display: block; }

/* ---- Tipografia auxiliar (cuando no hay SVG) ---- */
.kbc-display {
    font-family: var(--kbc-font-display);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0;
    color: var(--kbc-ink);
}
.kbc-accent { color: var(--kbc-accent) !important; }
.kbc-display em { font-style: normal; color: var(--kbc-accent); }
.kbc-display--xl { font-size: clamp(72px, 10vw, 156px); }
.kbc-display--lg { font-size: clamp(56px, 8vw, 120px); }
.kbc-display--md { font-size: clamp(40px, 6vw, 88px); }
.kbc-display--sm { font-size: clamp(28px, 3.5vw, 48px); letter-spacing: 0.02em; }

/* ---- Botones ---- */
.kbc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 42px;
    border: 1px solid transparent;
    border-radius: var(--kbc-radius);
    font-family: var(--kbc-font-sans);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.08em; 
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.3s var(--kbc-ease), color 0.3s var(--kbc-ease), border-color 0.3s var(--kbc-ease);
    white-space: nowrap;
}
.kbc-btn--solid { background: var(--kbc-white); color: var(--kbc-ink); border-color: var(--kbc-white); }
.kbc-btn--solid:hover { background: var(--kbc-accent); border-color: var(--kbc-accent); color: var(--kbc-white); }

.kbc-btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--kbc-bone);
    color: var(--kbc-ink);
    border: 1px solid var(--kbc-mist);
    border-radius: var(--kbc-radius);
    padding: 14px 28px;
    font-family: var(--kbc-font-sans);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.04em;
    line-height: 1;
    text-decoration: none;
    transition: background 0.3s var(--kbc-ease), color 0.3s var(--kbc-ease);
    cursor: pointer;
}
.kbc-btn-pill:hover { background: #D84545; color: var(--kbc-white); }
.kbc-btn-pill--dark { background: var(--kbc-white); border-color: var(--kbc-mist); }
.kbc-btn-pill--dark:hover { background: #D84545; color: var(--kbc-white); border-color: #D84545; }

/* ============================================================
   BOTONES UNIFORMES — sobre Bootstrap .btn. Variantes:
   btn-black / btn-transparent-black (fondo claro)
   btn-white / btn-transparent-white (fondo oscuro). Todos: hover al rojo.
   ============================================================ */
.btn-black, .btn-transparent-black, .btn-white, .btn-transparent-white, .btn-beige {
    border-radius: 8px; padding: 14px 30px;
    text-transform: uppercase !important;
    font-family: var(--kbc-font-sans); font-weight: 600; font-size: 14px;
    letter-spacing: .02em; line-height: 1; text-transform: none; text-decoration: none;
    transition: background-color .25s var(--kbc-ease), color .25s var(--kbc-ease), border-color .25s var(--kbc-ease);
}
.btn-black { background: #111; color: #fff; border: 1px solid #111; }
.btn-black:hover, .btn-black:focus { background: var(--kbc-accent); border-color: var(--kbc-accent); color: #fff; }
.btn-transparent-black { background: transparent; color: #111; border: 1px solid #111; }
.btn-transparent-black:hover, .btn-transparent-black:focus { background: var(--kbc-accent); border-color: var(--kbc-accent); color: #fff; }
.btn-white { background: #fff; color: #111; border: 1px solid #E6E8EE; }
.btn-white:hover, .btn-white:focus { background: var(--kbc-accent); border-color: var(--kbc-accent); color: #fff; }
.btn-transparent-white { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.7); }
.btn-transparent-white:hover, .btn-transparent-white:focus { background: var(--kbc-accent); border-color: var(--kbc-accent); color: #fff; }
.btn-beige { background: #E6E3DD; color: #111; border: 1px solid #E6E3DD; }
.btn-beige:hover, .btn-beige:focus { background: var(--kbc-accent); border-color: var(--kbc-accent); color: #fff; }

/* ============================================================
   HEADER / NAV — dos layouts (hero / lockup) cross-fade via GSAP
   ============================================================ */
.kbc-header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 9995;
    color: var(--kbc-ink);
    transition: color 0.4s var(--kbc-ease);
}
.kbc-header[data-nav-state="dark"] { color: var(--kbc-ink); }

/* La barra: vidrio esmerilado sobre lo que haya debajo.
   El fondo va aqui y no en el header, porque backdrop-filter crea contexto
   de contencion y romperia el position:fixed del mega menu. */
.kbc-nav {
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
            backdrop-filter: saturate(180%) blur(20px);
    /* de punta a punta y pegada arriba: solo la linea de abajo */
    border-bottom: 1px solid #cdd2d6;
}

/* el contenido si respeta la caja de la pagina */
.kbc-nav__inner {
    position: relative;
    height: var(--kbc-nav-h);
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 12px !important;
}

/* ----- LOGO COLOR COMPARTIDO -----
   Variable que controla el color de la cruz Y los SVGs del titulo.
   GSAP la anima de blanco (hero) a negro (post-hero). El hover sincronizado
   pone rojo via la clase .logo-hover en <html> (con !important para ganarle
   al inline style que GSAP escribe durante el scrub). */
/* El color del logo lo decide el FONDO de la seccion que esta bajo el header.
   Cada <section data-bg="dark|light"> declara su fondo y un ScrollTrigger global
   (customgsap_v2.js) pone data-logo en el header: fondo oscuro => logo blanco,
   fondo claro => logo negro. Es independiente del menu (data-nav-state). El hover
   (clase .logo-hover en el header) lo pone rojo. */
:root { --logo-color: #FFFFFF; }
/* La barra siempre es clara, asi que el logo va oscuro pase lo que pase.
   El !important le gana al inline style que GSAP escribe en el scrub. */
.kbc-header,
.kbc-header[data-logo],
.kbc-header[data-logo="dark"] { --logo-color: #1D2327 !important; }
.kbc-header.logo-hover { --logo-color: #D84545 !important; }

.kbc-nav__cross-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
}

/* Cruz: mask-image con background controlado por la variable */
.kbc-nav__cross {
    width: 60px;
    height: 60px;
    display: block;
    background: var(--logo-color);
    -webkit-mask: url("../images/cross-mark.svg") no-repeat center / contain;
            mask: url("../images/cross-mark.svg") no-repeat center / contain;
    flex-shrink: 0;
}

/* Lockup mini: KEYSTONE arriba / BIBLE CHURCH abajo, apilados vertical.
   Comparte --logo-color con la cruz. GSAP controla opacity segun state. */
.kbc-nav__lockup-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    opacity: 0;                          /* GSAP la activa en estado lockup */
    pointer-events: none;
}
.kbc-nav__lockup-svg {
    display: block;
    background: var(--logo-color);
    transition: background 0.25s var(--kbc-ease);
}
.kbc-nav__lockup-svg--keystone {
    width: 110px;
    height: 14px;       /* aspect ratio 481:60 = 8.02 -> 110/8.02 = 13.7 */
    -webkit-mask: url("../images/KBC-Home-Hero-SVGText-TitleKEYSTONE.svg") no-repeat center / contain;
            mask: url("../images/KBC-Home-Hero-SVGText-TitleKEYSTONE.svg") no-repeat center / contain;
}
.kbc-nav__lockup-svg--bible {
    width: 110px;
    height: 8px;        /* aspect ratio 683:50 = 13.66 -> 110/13.66 = 8.05 */
    -webkit-mask: url("../images/KBC-Home-Hero-SVGText-TitleBIBLECHURCH.svg") no-repeat center / contain;
            mask: url("../images/KBC-Home-Hero-SVGText-TitleBIBLECHURCH.svg") no-repeat center / contain;
}

/* Los links van sueltos dentro de la barra: el vidrio ya lo pone .kbc-nav,
   una segunda capa encima se veria como un recuadro pegado. */
.kbc-nav__links {
    gap: 12px;
    overflow: hidden;
    padding: 20px 40px;   /* se conserva: el boton Menu se superpone aqui */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
}
.kbc-nav__links li a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--kbc-font-sans);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #000000;
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.3s var(--kbc-ease);
    text-wrap-mode: nowrap;
    white-space: nowrap;
}
/* Dot rojo a la izquierda, solo visible en hover/active */
.kbc-nav__links li a::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D84545;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.3s var(--kbc-ease), transform 0.3s var(--kbc-ease);
}
.kbc-nav__links li a:hover::before,
.kbc-nav__links li a.is-active::before {
    opacity: 1;
    transform: scale(1);
}

/* (eliminado: .kbc-nav__lockup-* — el lockup mini ahora son los SVGs del titulo) */

/* Wrapper derecho: contiene la ul (en flujo) y el boton Menu (absoluto encima) */
.kbc-nav__right {
    position: relative;
    display: flex;
    align-items: center;
}

/* Boton Menu — hamburguesa de 3 barras, sin caja.
   Sigue absoluto a la derecha del wrapper para no mover el layout durante
   el morph del hero (la ul se desvanece y el icono queda en su lugar). */
.kbc-nav__menu-btn {
    background: none;
    border: 0;
    padding: 0;

    /* caja del icono */
    width: 34px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -10px;      /* mitad del alto — evita translateY que choca con GSAP */
    z-index: 9999;

    cursor: pointer;
    color: #141B34;
}
/* cada barra. El relleno de 0 a 100% lo hace GSAP dentro del morph del hero
   (ver customgsap_v2.js), para que entre junto con el boton y no antes. */
.kbc-nav__menu-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    align-self: flex-end;
    /* el relleno crece desde la derecha hacia la izquierda */
    transform-origin: right center;
    transition: opacity 0.2s var(--kbc-ease);
}

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

/* abierto: las tres barras se arman en X.
   !important porque GSAP deja el scaleX del relleno como estilo inline. */
.kbc-nav__menu-btn[aria-expanded="true"] span {
    transition: transform 0.35s var(--kbc-ease), opacity 0.2s var(--kbc-ease);
    transform-origin: center !important;
}
.kbc-nav__menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg) !important; }
.kbc-nav__menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.kbc-nav__menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg) !important; }

/* ============================================================
   HERO — bg track + 3 layers absolutos
   ============================================================ */
.kbc-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 720px;
    overflow: hidden;
    background: var(--kbc-black);
    color: var(--kbc-white);
}

.kbc-hero__bgtrack { position: absolute; inset: 0; z-index: 1; }
.kbc-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kbc-hero__blur {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(50px);            /* alineado con el Figma (~30-50px) */
    -webkit-backdrop-filter: blur(50px);
    background: rgba(11, 11, 11, 0.35);     /* tinte oscuro plano para legibilidad */
    opacity: 0;
    /* sin will-change — rompia el stacking del backdrop-filter sobre el video */
}
.kbc-hero__veil {
    position: absolute;
    inset: 0;
    background: rgba(11,11,11,0.32);
}

.kbc-hero__layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    will-change: opacity, transform;
}
.kbc-hero__layer--statement { z-index: 4; opacity: 0; }

.container-xxl {
    max-width: 1340px !important;
}
/* ---- Estado 1: Titulo grande y bar inferior ---- */

/* Wrap del titulo (KEYSTONE + BIBLE CHURCH SVGs).
   GSAP lo escala y traslada al lockup top-left durante el scroll. */
.kbc-hero__title-wrap {
    position: absolute;
    z-index: 3;
    width: 100%;
    max-width: 1340px;
    bottom: 215px;                     /* deja espacio para el bar (144px) + 56px */
    display: flex;
    align-items: end; 
    gap: 60px;
    transform-origin: top left;
    will-change: transform, opacity;
    left: 0;
    right: 0;
    margin: auto;
}
/* SVGs del titulo como mask-image para poder colorearlos via background.
   Comparten la variable --logo-color con la cruz (white -> black -> red). */
.kbc-hero__title-svg {
    display: block;
    background: var(--logo-color);
    transition: background 0.25s var(--kbc-ease);
}
.kbc-hero__title-svg--keystone {
    /* aspect ratio del SVG original: 481x60 = 8.02 */
    height: clamp(56px, 9vw, 60px);
    width: clamp(449px, 72vw, 481px);
    -webkit-mask: url("../images/KBC-Home-Hero-SVGText-TitleKEYSTONE.svg") no-repeat center / contain;
            mask: url("../images/KBC-Home-Hero-SVGText-TitleKEYSTONE.svg") no-repeat center / contain;
}
.kbc-hero__title-svg--bible {
    /* aspect ratio del SVG original: 683x50 = 13.66 */
    height: clamp(40px, 6.5vw, 50px);
    width: 400px;
    -webkit-mask: url("../images/KBC-Home-Hero-SVGText-TitleBIBLECHURCH.svg") no-repeat center / contain;
            mask: url("../images/KBC-Home-Hero-SVGText-TitleBIBLECHURCH.svg") no-repeat center / contain;
}

/* (eliminado: .is-stacked — el lockup mini ahora vive en el header, no aqui) */

/* Glass bar inferior — valores tomados directo del Figma "Last Sermon" */
.kbc-hero__bar {
    position: absolute;
    z-index: 3;
    width: 100%;
    max-width: 1340px;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 56px;
    height: 144px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.10);   /* exacto del Figma */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid #FFFFFF;
    /* Sin will-change aqui — destruye el stacking del backdrop-filter sobre
       el video. El elemento se anima igual via GSAP sin esta hint. */
}
.kbc-hero__newhere {
    font-family: var(--kbc-font-display);
    font-size: clamp(28px, 2.8vw, 44px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kbc-white);
    line-height: 1;
    /* align-self: flex-end; */
}

/* Boton "PLAN YOUR VISIT" — valores del Figma "Button-congregation-up" */
.kbc-hero__cta {
    position: absolute;
    right: 20px;
    top: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 260px;
    height: 60px;
    background: #E6E3DD;              /* cream/beige del Figma */
    color: #000000;
    border: 0;
    border-radius: 4px;
    font-family: var(--kbc-font-sans);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s var(--kbc-ease), color 0.3s var(--kbc-ease);
}
.kbc-hero__cta:hover {
    background: var(--kbc-accent);
    color: #FFFFFF;
}

/* Estado 2 — Statement.
   El layer es un flex absolute que centra verticalmente el contenido.
   Lo alineamos a la izquierda (start), y el contenedor interior empuja
   el texto a un offset que coincide con el lockup top-left (~140px). */
.kbc-hero__layer--statement {
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 0;
    pointer-events: none !important;
}
.kbc-hero__layer--statement > .container-fluid { 
    width: 1340px;
    padding: 0px 15px;
}
/* Statement como parrafo real (Inter, no SVG).
   Wrap natural via max-width; el contenedor lo empuja al offset del lockup. */
.kbc-hero__statement-text {
    width: 100%;
    max-width: 760px;
    margin: 0;
    color: var(--kbc-white);
    font-family: var(--kbc-font-sans);
    font-weight: 500;
    font-size: clamp(28px, 2.6vw, 40px);
    line-height: 1.2;
    letter-spacing: -0.005em;
}
.topc:before {
    content: "";
    width: 100%;
    position: absolute;
    top: -42px;
    height: 50px;
    border-radius: 200px 200px 0px 0px;
    left: 0;
    background: var(--kbc-accent);
    z-index: 9;
}
.topcw:before {
    content: "";
    width: 100%;
    position: absolute;
    top: -42px;
    height: 50px;
    border-radius: 200px 200px 0px 0px;
    left: 0;
    background: white;
    z-index: 9;
}
/* variante azul de la curva (Kids statement) */
.topcb:before {
    content: "";
    width: 100%;
    position: absolute;
    top: -42px;
    height: 50px;
    border-radius: 200px 200px 0px 0px;
    left: 0;
    background: #1F79BE;
    z-index: 9;
}
/* variante negra de la curva (Youth statement) */
.topck:before {
    content: "";
    width: 100%;
    position: absolute;
    top: -42px;
    height: 50px;
    border-radius: 200px 200px 0px 0px;
    left: 0;
    background: #0B0B0C;
    z-index: 9;
}
/* ============================================================
   ONE MISSION — seccion separada (despues del hero)
   ============================================================ */
.kbc-one-mission {
    background: var(--kbc-white);
    padding: 100px 0px 80px 0;
}
.kbc-one-mission__title {
    width: 100%;
    max-width: 1100px;
    height: auto;
    display: block;
}

/* ============================================================
   SECCION 2 — LOCATIONS (cruz silueta + 2 photo cards)
   ============================================================ */
.kbc-locations {
    background: var(--kbc-white);
    padding: clamp(96px, 12vw, 180px) 0;
    overflow: hidden;
}
.kbc-locations__deco {
    position: absolute;
    top: 50%;
    left: -120px;
    transform: translateY(-50%);
    width: 620px;
    max-width: 60vw;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}
.kbc-locations__deco img { width: 100%; display: block; }

/* ---------------------------------------------------
   CARDS DE CONGREGACION (home)
   Mismo tratamiento que las cards del slider: foto de fondo,
   velo oscuro y el contenido dentro. El titulo lleva un
   stretched-link para que toda la card sea clickeable, y el
   boton de direcciones queda por encima con su propio destino.
--------------------------------------------------- */
.kbc-loc-card {
    position: relative;
    flex: 1 1 0;
    text-decoration: none;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 2 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: var(--kbc-mist);
}
.kbc-loc-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--kbc-ease);
}
/* el video vive encima de la foto y solo se revela al hover;
   la foto es su cover, asi que el corte entre ambos es invisible */
.kbc-loc-card__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s var(--kbc-ease), transform .5s var(--kbc-ease);
}
.kbc-loc-card:hover .kbc-loc-card__video,
.kbc-loc-card:focus-within .kbc-loc-card__video { opacity: 1; }

.kbc-loc-card__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
                rgba(10, 10, 10, 1) 0%,
                rgba(10, 10, 10, .78) 30%,
                rgba(10, 10, 10, .30) 62%,
                rgba(10, 10, 10, 0)   88%);
    pointer-events: none;
}
.kbc-loc-card__body {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 30px 28px 28px;
    color: var(--kbc-white);
}

/* titulo del campus */
.kbc-loc-card__name {
    font-size: 32px;
    line-height: .95;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--kbc-white);
    margin: 0 0 14px;
}
.kbc-loc-card__addr {
    font-family: var(--kbc-font-sans);
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .88);
    margin: 16px 0;
}

/* horarios */
.kbc-loc-card__times {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    font-family: var(--kbc-font-sans);
    font-size: 15px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .88);
}
.kbc-loc-card__times li {
    display: flex;
    gap: 12px;
    font-size: 15px;
    margin-bottom: 6px;
}
.kbc-loc-card__times li > span:first-child {
    flex: 0 0 auto;
    min-width: 112px;
    font-weight: 600;
}
.kbc-loc-card__times b { font-weight: 700; }

/* En reposo solo se ven el nombre y el horario. El resto (direccion y
   acciones) vive en un bloque que pasa de 0fr a 1fr: al crecer empuja el
   contenido hacia arriba, que es el desplazamiento que se busca. */
.kbc-loc-card__more {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .45s var(--kbc-ease), opacity .3s var(--kbc-ease);
}
.kbc-loc-card__more-inner { overflow: hidden; }
.kbc-loc-card:hover .kbc-loc-card__more,
.kbc-loc-card:focus-within .kbc-loc-card__more {
    grid-template-rows: 1fr;
    opacity: 1;
}
/* el bloque de texto acompana el movimiento */
.kbc-loc-card__body { transition: transform .45s var(--kbc-ease); }

/* acciones: el cubo del "mas" y, al lado, el enlace de direcciones */
.kbc-loc-card__actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* cubo con el signo de mas: esquina inferior derecha, siempre visible (igual al del slider) */
.kbc-loc-card__go {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 2;
    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-loc-card__go svg { width: 22px; height: 22px; }
.kbc-loc-card__go:hover,
.kbc-loc-card__go:focus-visible {
    background: var(--kbc-accent);
    border-color: var(--kbc-accent);
    color: var(--kbc-white);
}

/* "Get directions": enlace con linea abajo que se rellena de rojo al pasar */
.kbc-loc-card__link {
    position: relative;
    font-family: var(--kbc-font-sans);
    font-size: 15px; 
    letter-spacing: .04em; 
    color: var(--kbc-white);
    text-decoration: none;
    padding-bottom: 6px;
}
/* linea base siempre visible */
.kbc-loc-card__link::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, .45);
}
/* la roja crece de izquierda a derecha encima de la base */
.kbc-loc-card__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--kbc-accent);
    transition: width .35s var(--kbc-ease);
}
.kbc-loc-card__link:hover,
.kbc-loc-card__link:focus-visible { color: var(--kbc-white); }
.kbc-loc-card__link:hover::after,
.kbc-loc-card__link:focus-visible::after { width: 100%; }

/* hover: zoom a la foto, igual que en el slider */
.kbc-loc-card:hover .kbc-loc-card__img,
.kbc-loc-card:hover .kbc-loc-card__video { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
    .kbc-loc-card__img,
    .kbc-loc-card__video { transition: none; }
    .kbc-loc-card:hover .kbc-loc-card__img,
    .kbc-loc-card:hover .kbc-loc-card__video { transform: none; }
    /* sin movimiento: la card se queda en la foto */
    .kbc-loc-card:hover .kbc-loc-card__video,
    .kbc-loc-card:focus-within .kbc-loc-card__video { opacity: 0; }
}

/* ============================================================
   CARRUSEL HORIZONTAL (Preparación para GSAP)
   ============================================================ */
.kbc-gather-carousel {
    display: flex;
    flex-wrap: nowrap;
    /* Fuerza a que los items NO bajen a la siguiente línea */
    gap: clamp(20px, 3vw, 40px);
    /* Espacio responsivo entre las tarjetas */
    list-style: none;
    padding: 0;
    margin: 0;
    width: max-content;
    /* Permite que el contenedor crezca más allá del padre */
}

.kbc-gather-carousel >li {
    flex-shrink: 0;
    /* Evita que las tarjetas se compriman por falta de espacio */

    /* El ancho de la tarjeta: en móviles ocupa el 85% de la pantalla para 
       dejar asomar la siguiente, y en PC se topa a unos 500px */
    width: 85vw;
    max-width: 500px;
}
h3.kbc-gather-card__title{
    font-weight: 600; 
        font-size: 24px;
        max-width: 335px;
}
.kbc-gather-card__desc{
    min-height: 80px;
}
/* Estado Normal */
.kbc-gather-card__more {
    display: inline-block;
    font-family: var(--kbc-font-sans);
    font-size: 18px;
    font-weight: 500;
    color: var(--kbc-ink);
    background: var(--kbc-bone);
    border-radius: 4px;
    border: 1px solid var(--kbc-red, #bd4138); 
    padding: 12px 32px;
    text-decoration: none;
    transition: background 0.3s var(--kbc-ease), color 0.3s var(--kbc-ease);
    white-space: nowrap;
}

/* Estado Hover */
.kbc-gather-card__more:hover {
    background: var(--kbc-red, #bd4138);
    /* Fondo rojo sólido */
    color: var(--kbc-white);
    /* Letra blanca */
}
.custom-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.custom-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px;
    background-color: var(--kbc-accent);
    border: 1px solid var(--kbc-accent);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    width: 100%;
    color: white;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.25s ease-in-out;
    min-width: 140px;
}

.custom-dropdown-menu.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-dropdown-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.custom-dropdown-menu a:hover {
    background-color: #bf3d3d;
}

.custom-dropdown-menu a {
    display: block;
    padding: 12px 20px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s;
    border-bottom: 1px solid #f5f5f5;
    text-wrap: nowrap;
}

.custom-dropdown-menu a:last-child {
    border-bottom: none;
}
/* ============================================================
   SECCION 4 — EVENTS (full-bleed con border-radius)
   ============================================================ */
.kbc-events {
    background: var(--kbc-white);
    padding: 40px 0;
}
/* el bloque va a pantalla completa: rompemos el ancho del container */
.kbc-events > .container {
    max-width: none;
    width: 100%;
    padding: 0;
}
.kbc-events__inner {
    position: relative;
    width: calc(100% - 80px);
    height: calc(100vh - 80px);
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    background: var(--kbc-charcoal);
}
/* la foto es mas alta que el marco: ese sobrante es el recorrido del parallax */
.kbc-events__media {
    position: absolute;
    left: 0;
    right: 0;
    top: -15%;
    height: 130%;
    z-index: 1;
    will-change: transform;
}
.kbc-events__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* el menu de "View all" abre hacia arriba para no quedar recortado */
.kbc-events__overlay .custom-dropdown-menu {
    top: auto;
    bottom: 100%;
    margin: 0 0 10px;
    width: auto;
    box-shadow: none;
    border-radius: 10px;
    overflow: hidden;
}
@media (max-width: 767.98px) {
    .kbc-events { padding: 20px 0; }
    .kbc-events__inner {
        width: calc(100% - 40px);
        height: calc(100vh - 40px);
    }
}
.kbc-events__overlay {
    position: absolute;
        z-index: 2;
        bottom: 56px;
        left: 0px;
        right: 0px;
        color: var(--kbc-white);
        display: flex; 
        align-items: baseline; 
}
.kbc-events__cross {
    width: 60px;
    height: 60px;
    display: inline-flex;
}
.kbc-events__cross img {
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1);
}
.kbc-events__title-svg {
    height: clamp(48px, 7vw, 96px);
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
}
.kbc-events__cta {
    background: var(--kbc-white);
    color: var(--kbc-ink);
    border-color: var(--kbc-white);
}
.kbc-events__cta:hover {
    background: var(--kbc-bone);
    color: var(--kbc-ink);
    border-color: var(--kbc-bone);
}

/* ============================================================
   SECCION 5 — KIDS / YOUTH (Bootstrap row + order utilities)
   ============================================================ */
.kbc-kidsyouth {
    background: var(--kbc-white);
    padding: clamp(80px, 10vw, 160px) 0;
}
.kbc-ky-row__text { padding: 24px 0; max-width: 540px; }
.kbc-ky-row__title-svg { 
    display: block;
    margin-bottom: 24px;
}
.kbc-ky-row__text p {
    font-family: var(--kbc-font-sans);
    font-size: 18px;
    line-height: 1.55;
    color: var(--kbc-graphite);
    margin: 0 0 28px;
}
.kbc-ky-row__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--kbc-radius);
    background: var(--kbc-mist);
}
.kbc-ky-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ----- Card gris de Kids (mismo patron que "Our Beliefs" en About) ----- */
.kbc-ky-card {
    background: #EDEDED;
    border-radius: 10px;
    padding: clamp(28px, 4vw, 64px);
}
.kbc-ky-card .kbc-ky-row__text { max-width: none; padding: 0; }

/* ----- Slider de una imagen a la vez ----- */
.kbc-ky-slider {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: var(--kbc-mist);
    cursor: grab;
    touch-action: pan-y;
}
.kbc-ky-slider.is-dragging { cursor: grabbing; }
.kbc-ky-slider__track {
    display: flex;
    transition: transform .6s var(--kbc-ease);
    will-change: transform;
}
.kbc-ky-slider__slide {
    flex: 0 0 100%;
    aspect-ratio: 4 / 3;
}
.kbc-ky-slider__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* la imagen no se arrastra: el gesto es del slider */
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
/* puntos de control, planos y centrados */
.kbc-ky-slider__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 2;
}
.kbc-ky-slider__dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: width .3s var(--kbc-ease), background-color .3s var(--kbc-ease);
}
.kbc-ky-slider__dots button.is-active {
    width: 24px;
    background: var(--kbc-accent);
}
@media (prefers-reduced-motion: reduce) {
    .kbc-ky-slider__track { transition: none; }
}

/* ============================================================
   FOOTER COMBINADO — closing + cols + ctas + legal
   ============================================================ */

/* 1. Contenedor principal con recorte para los bordes curvos */
.kbc-footer {
    background: var(--kbc-bone);
    color: var(--kbc-ink);
    padding: clamp(96px, 12vw, 180px) 0 32px;
    border-radius: 200px 200px 0px 0px;
    position: relative;
    overflow: hidden;
}
.kbc-footer .row{
    position: relative;
    z-index: 9;
}
/* 2. La capa del degradado oscuro (Oculta al inicio para GSAP) */
.kbc-footer__bg-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Degradado idéntico al diseño: inicia transparente y termina en casi negro */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 15%, rgba(15, 15, 15, 0.85) 60%, rgba(10, 10, 10, 1) 100%);
    z-index: 0;
        pointer-events: none;
        transform: translateY(0);
}

/* 3. Enlaces y elementos de cierre generales */
.kbc-footer a.kbc-footer__email{
    color: white;
}
.kbc-footer a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s var(--kbc-ease), opacity 0.3s var(--kbc-ease);
}

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

.kbc-footer__title {
    color: var(--kbc-ink);
    margin: 0;
    line-height: 0.95;
}

.kbc-footer__title em {
    color: var(--kbc-accent);
}

.kbc-footer__cross {
    width: 56px;
    height: 56px;
}

.kbc-footer__cross img {
    width: 100%;
    height: 100%;
}


/* ============================================================
   COLORES ACTUALIZADOS PARA EL FONDO OSCURO
   (Todo esto pasa a blanco o tonos claros)
   ============================================================ */

.kbc-footer__col li,
.kbc-footer__addr-title,
.kbc-footer__email,
.kbc-footer__social a {
    font-family: var(--kbc-font-sans);
    color: white;
    /* Pasamos a texto blanco */
}

.kbc-footer__col li {
    font-size: 18px;
    margin-bottom: 8px;
}

.kbc-footer__addr-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* cruz de la primera columna del footer */
.kbc-footer__mark {
    width: 56px;
    height: auto;
    display: block;
    filter: brightness(0) invert(1);
}

.kbc-footer__addr-text {
    font-family: var(--kbc-font-sans);
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    /* Blanco semitransparente para el párrafo */
}

.kbc-footer__email {
    font-size: 15px;
}

.kbc-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 32px;
}

/* 4. Botones versión clara (CTAs) para que resalten sobre el oscuro */
.kbc-btn-pill--light {
    background: var(--kbc-white, #ffffff);
    color: var(--kbc-ink, #000000);
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-family: var(--kbc-font-sans);
    font-weight: 600;
    font-size: 18px;
    transition: opacity 0.3s;
    display: inline-block;
}

.kbc-btn-pill--light:hover {
    opacity: 0.8;
}

/* 5. Línea legal final */
.kbc-footer__legal {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    /* Línea sutil blanca */
    font-family: var(--kbc-font-sans);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    /* Texto legal muy sutil */
}

.kbc-footer__legal a {
    text-decoration: underline;
}

.kbc-footer__love {
    color: var(--kbc-accent);
}
/* ============================================================
   REVEAL initial states
   ============================================================ */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    will-change: transform, opacity;
}
[data-reveal="rail"] { transform: translateX(40px); }
[data-reveal="cross"] { opacity: 0; transform: scale(0.6); }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ============================================================
   Ajustes responsive minimos (Bootstrap maneja la mayoria)
   ============================================================ */
@media (max-width: 991.98px) {
    .kbc-locations__deco { width: 480px; opacity: 0.4; }
    .kbc-events__overlay { left: 24px; bottom: 24px; }
    .kbc-events__inner { aspect-ratio: 4 / 5; }
}
@media (max-width: 575.98px) {
    .kbc-locations__deco { display: none; }
    .kbc-hero__layer--hero { padding-bottom: 32px; }
}