/* ============================================================
   RESPONSIVE MOBILE - CENTRAL WESLEYAN
   Todo el responsive mobile del sitio vive aqui, centralizado.
   Se carga DESPUES de custom.css para poder sobrescribir.

   - UN SOLO breakpoint: max-width 767.98px (Bootstrap md- / todos los
     telefonos, sin dejar fuera pantallas angostas <320px).
   - Adentro se agrupa por componente con comentarios.
   - Preferir clases utilitarias reutilizables (.m-*).
   - Tonos planos, sin sombras/gradientes, radios max 10px.
   ============================================================ */

@media (max-width: 767.98px) {
    .cwc-team-card.cwc-parallax .cwc-team-card__img {
            object-position: 12% 17%;
        }
        .cwc-team-card.cwc-parallax .cwc-team-card__img.editedxs{
        object-position: 12% 70%;
    }
    body h2{display: block !important; font-size: 32px !important;}
    body h2 span,
    body h2 em {
            display: inline !important;
        }
    /* ========================================================
       UTILIDADES REUTILIZABLES
       ======================================================== */
    .m-stack>[class*="col-"] {
        /* apila columnas de una fila */
        flex: 0 0 100%;
        max-width: 100%;
    }

    .m-full {
        /* bloque/boton a ancho completo */
        display: flex;
        width: 100%;
        justify-content: center;
    }

    .m-center {
        /* texto centrado */
        text-align: center;
    }

    /* Botones CTA que son el ultimo elemento de una columna: al apilarse
       en mobile no deben quedar pegados a la columna/seccion siguiente.
       Se les da aire debajo. (No afecta botones de formulario, que van
       dentro de un wrapper .text-end/.text-center, no como hijo del col). */
    [class*="col-"]>.btn:last-child {
        margin-bottom: 32px;
    }


    /* ========================================================
       TITULOS (global) - en mobile todos maximo 32px
       Los titulos de seccion (dark) bajan al tamano del hero (italic
       32 / bold 30) Y fluyen como parrafo natural: el <em> (italic) y
       el <span> (bold) pasan de bloque a EN LINEA, sin tocar el HTML.
       ======================================================== */
    .cwc-section-dark__title {
        line-height: 1.2;
    }
    
    .cwc-section-dark__title>.cwc-serif {
        display: inline !important;
        font-size: clamp(26px, 8vw, 32px);
        line-height: 1.2;
    }

    .cwc-section-dark__title>span {
        display: inline !important;
        font-size: clamp(24px, 7.5vw, 30px);
        line-height: 1.2;
        margin: 0;
    }

    /* Foto de secciones dark: al apilarse en mobile no debe quedar pegada
       al texto (kicker/titulo/bio). Aire debajo. Aplica a team (foto
       arriba del texto), connect, prayer, give, etc. */
    .cwc-section-dark__figure {
        margin-bottom: 28px;
    }


    /* ========================================================
       NAVBAR / HEADER - compacto y profesional
       Full-width, altura reducida, logo chico a la izquierda y
       boton de menu centrado verticalmente a la derecha.
       ======================================================== */
    .cwc-navbar {
        width: 100% !important;
        margin: 0 !important;
        padding: 9px 0 !important;
        border-radius: 0px;
    }

    .cwc-navbar__inner {
        padding: 0 16px;
        min-height: 40px;
        align-items: center;
    }

    body .container-fluid {
        padding: 0 15px !important;
    }

    .cwc-navbar__brand {
        margin-right: auto;
    }

    .cwc-navbar__brand .cwc-logo {
        height: 45px;
    }

    body .text-right {
        text-align: left !important;
    }

    body .cwc-navbar>.container-fluid {
        padding: 0 15px !important;
    }

    .cwc-navbar__grid {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 0 0 0 auto;
        align-self: center;
    }

    /* Clearance del navbar fijo en vistas SIN hero */
    .cwc-main>.cwc-page-title:first-child {
        padding-top: 84px;
    }

    /* Navbar encoge al hacer scroll hacia abajo (.is-shrink lo pone el JS) */
    .cwc-navbar {
        transition: padding 0.3s ease;
    }

    .cwc-navbar.is-shrink {
        padding: 3px 0 !important;
    }

    .cwc-navbar.is-shrink .cwc-navbar__brand .cwc-logo {
        height: 32px;
    }

    .cwc-navbar__brand .cwc-logo {
        transition: height 0.3s ease;
    }

    /* Evita el scroll horizontal minimo en mobile */
    html,
    body {
        overflow-x: clip;
    }


    /* ========================================================
       CURVA INFERIOR (.cwc-curve-bottom) - plana en mobile
       El JS ya no la anima en mobile (guard matchMedia); esto
       cubre cualquier valor residual.
       ======================================================== */
    .cwc-curve-bottom {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }


    /* ========================================================
       MENU FULLSCREEN - texto a la izquierda, sin rollup
       ======================================================== */

    /* Cabecera: logo a la izquierda, X arriba a la derecha, Sundays debajo */
    .cwc-fullmenu__header {
        flex-wrap: wrap;
        align-items: center;
    }

    /* Boton cerrar visible y a la derecha (antes iba centrado y no se veia) */
    .cwc-fullmenu__close {
        position: absolute;
        left: auto !important;
        right: 16px;
        top: 16px;
        transform: none !important;
        width: 44px;
        height: 44px;
        background-color: rgba(255, 255, 255, 0.12);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        z-index: 3;
    }

    .cwc-fullmenu__sundays {
        text-align: left;
        width: 100%;
        margin-top: 16px;
    }

    .cwc-fullmenu__link .cwc-rollup__text--clone {
        display: none;
    }

    .cwc-fullmenu__link .cwc-rollup__text {
        transform: none !important;
        transition: none !important;
    }

    .cwc-fullmenu__decor {
        opacity: 0.1;
    }


    /* ========================================================
       FOOTER - flujo normal (sin reveal), todo a la izquierda
       ======================================================== */
    .cwc-footer {
        position: static;
        padding-top: 56px;
    }

    #cwcPage {
        margin-bottom: 0 !important;
        /* neutraliza el margen que setea el JS */
    }

    .cwc-footer__title,
    .cwc-footer__subscribe,
    .cwc-footer .text-lg-end {
        text-align: left !important;
    }

    .cwc-footer__form {
        max-width: 420px;
    }

    .cwc-footer__form .text-lg-end .btn {
        margin-left: 0;
    }

    .cwc-footer__bigLogo {
        height: 64px;
        margin-top: 16px;
    }

    /* --- Footer en acordeones: cada grupo se colapsa/expande al tocar el titulo.
           Solo aplica a las columnas con lista de links (la marca el JS con
           .cwc-footer__acc); "Stay in touch" queda como esta. --- */
    .cwc-footer__acc {
        flex: 0 0 100%;
        /* full width apilado */
        max-width: 100%;
        margin-bottom: 0 !important;
        border-top: 1px solid rgba(26, 26, 26, 0.14);
    }

    .cwc-footer__acc .cwc-footer__title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        margin: 0 !important;
        padding: 15px 0;
        user-select: none;
    }

    .cwc-footer__acc .cwc-footer__title::after {
        /* chevron */
        content: "";
        width: 9px;
        height: 9px;
        margin-left: 12px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.3s ease;
    }

    .cwc-footer__acc.is-open .cwc-footer__title::after {
        transform: rotate(-135deg);
    }

    .cwc-footer__acc ul {
        /* colapsada por defecto */
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.35s ease;
    }

    .cwc-footer__acc.is-open ul {
        max-height: 320px;
        padding-bottom: 14px;
    }

    /* Separador tambien arriba de "Stay in touch" (ultima col de la 1ra fila) */
    .cwc-footer .container-fluid>.row:first-child>[class*="col-"]:last-child {
        border-top: 1px solid rgba(26, 26, 26, 0.14);
        padding-top: 20px;
        margin-top: 4px;
    }


    /* ========================================================
       CONTACT (/contact)
       ======================================================== */
    /* Titulo mixto (global): era inline-flex y no hacia wrap -> bloque
       con wrap natural y tamano acorde para que palabras largas no
       desborden (ej: "Powerfull" en /prayer). */
    .cwc-page-title__heading--mixed {
        display: block;
        font-size: clamp(38px, 12vw, 60px);
        line-height: 1.02;
        overflow-wrap: break-word;
    }

    .cwc-page-title__heading--mixed em,
    .cwc-page-title__heading--mixed span {
        display: inline;
    }

    .cwc-page-title__heading--mixed span {
        margin-left: 0;
    }

    .cwc-contact-info {
        margin-top: 28px;
        --bs-gutter-x: 1rem;
    }

    .cwc-contact-info__label {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .cwc-contact-info__value {
        font-size: 15px;
    }

    .cwc-contact-info__social {
        gap: 18px;
    }

    .cwc-contact-info__social svg {
        width: 24px;
        height: 24px;
    }

    /* Formulario */
    .cwc-contact-form {
        padding-top: 56px;
        padding-bottom: 72px;
    }

    .cwc-contact-form .row {
        row-gap: 24px;
    }

    .cwc-display-md {
        /* global: aplica a contact, prayer, etc. */
        font-size: clamp(26px, 7vw, 34px);
        line-height: 1.15;
    }

    .cwc-contact-form__intro {
        margin-top: 8px;
        margin-bottom: 20px;
        text-align: left;
        /* venia a la derecha */
    }

    .cwc-form__input {
        font-size: 16px;
        /* evita zoom automatico en iOS */
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .cwc-form .row {
        row-gap: 12px;
    }

    .cwc-form .text-end {
        text-align: center !important;
    }

    .cwc-form .text-end .btn {
        display: inline-flex;
        width: 100%;
        justify-content: center;
    }

    body .cwc-cr-freedom__link {
        padding: 20px 15px;
        gap: 10px;
        align-items: start
    }

    body .cwc-cr-note__text {
        text-align: left;
    }

    body .cwc-filter-pill {
        font-size: 13px;
        padding: 10px 14px;
    }

    .cwc-form {
        margin-top: 40px;
    }

    .cwc-section-dark__figure {
        margin-top: 40px;
    }

    body .cwc-filter-panel--skills {
        min-width: 100% !important;
        right: 0px !important;
    }
    .mb-xs-30{
        margin-bottom: 30px;
    }
        .cwc-cr-celebration{
            height: auto !important;
        }
                                 .cwc-cr-celebration .vertical-align {
                    position: relative;
                    top: 0%;
                    transform: translateY(0%);
                }
    body .cwc-cr-mondays__title em,
    body .cwc-cr-mondays__title span {
        font-size: clamp(32px, 7vw, 96px);
    }

    body .cwc-cr-mondays__title {
        font-family: var(--font-display);
        line-height: 1;
        margin: 0 0 24px 0;
        display: flex;
        flex-direction: row;
        gap: 0px 20px;
        flex-wrap: wrap;
    }

    .btn span {
        text-align: left;
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 0px;
    }

    /* Botones con texto largo (ej: "SUBSCRIBE TO OUR WEEKLY PRAYER EMAIL")
       no desbordan: permiten salto de linea y no exceden el ancho */
    .btn-rounded {
        white-space: normal;
        max-width: 100%;
    }


    /* ========================================================
       PRAYER (/prayer)
       ======================================================== */
    /* Nota "DO NOT SHARE THIS" venia alineada a la derecha */
    .cwc-section-dark .text-right {
        text-align: left;
    }

    /* Lista de prayers: el grid ya se apila (custom.css). Aca se pule
       cada item como card, con el boton "I Prayed" full-bleed abajo. */
    .cwc-prayer-item {
        padding: 18px 18px 0 18px !important;
    }

    .cwc-prayer-item__desc p {
        font-size: 15px;
        line-height: 1.5;
    }

    .cwc-prayer-item__by p,
    .cwc-prayer-item__count p {
        opacity: 0.7;
        font-size: 13px;
    }

    .cwc-prayer-item__action {
        margin: 14px -18px 0 -18px;
        /* boton a lo ancho de la card */
    }

    .cwc-prayer-item__btn {
        padding: 15px 16px;
    }


    /* ========================================================
       MISSIONS (/missions)
       Cards de "Serve" una debajo de otra (1 columna). El aspecto
       pasa a horizontal para que full-width no queden gigantes.
       ======================================================== */
    .cwc-global-missions__group .row>[class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .cwc-global-missions .cwc-team-card {
        aspect-ratio: 3 / 2;
    }

    .cwc-global-missions .cwc-team-card__img {
        object-position: center 28%;
        /* mantiene las caras al recortar */
    }


    /* ========================================================
       TEAM (/team)
       Cards 2 columnas (directorio de staff): es lo correcto,
       se escanean varias personas de un vistazo. Solo se
       compactan los filtros para que no roben tanto alto.
       Se mantiene el wrap (mejor que scroll horizontal con
       labels largos como "SENIOR LEADERSHIP TEAM").
       ======================================================== */
    .cwc-team .cwc-filter-tabs--main {
        gap: 10px 18px;
        padding-bottom: 16px;
        margin-bottom: 16px;
    }

    .cwc-team .cwc-filter-tabs--sub {
        gap: 10px 16px;
        margin-top: 0;
        padding-top: 12px;
        margin-bottom: 20px;
    }

    /* Sub-tabs son secundarios: un punto mas chicos que el main */
    .cwc-team .cwc-filter-tabs--sub .cwc-filter-tab {
        font-size: 13px;
    }

    /* Seccion pastor: la imagen de worship (col-md-2) quedaba pegada
       entre la bio y los filtros. Aire arriba y abajo + radios planos. */
    .heropic-wrap {
        margin-top: 10px;
        margin-bottom: 44px;
        border-radius: 10px;
        overflow: hidden;
    }


    /* ========================================================
       GROUPS (/groups)
       ======================================================== */

    /* --- BELIEVE HERO ---
       El scene GSAP pinned (collage de 6 imagenes + caption oculto)
       se desactiva en mobile via JS. Aqui se arma el layout estatico:
       caption + parrafo + foto, apilado. Las 6 imagenes decorativas
       (aria-hidden) y el icono central se ocultan: el collage
       absoluto no reflowea en un ancho de telefono. */
    .cwc-believe-hero {
        min-height: auto;
        overflow: visible;
        padding: 56px 0 8px 0;
        background-color: #f5f0e0 !important;
        /* el JS ya no la pinta lima */
    }

    .cwc-believe-hero__caption-wrap {
        position: static;
        transform: none;
        max-width: 100%;
        padding: 0 16px;
        pointer-events: auto;
        margin-bottom: 28px;
    }

    .cwc-believe-hero__caption {
        font-size: clamp(32px, 9vw, 46px);
    }

    /* Fuerza el texto visible aunque el JS lo hubiera bajado (yPercent) */
    .cwc-believe-hero .cwc-line,
    .cwc-believe-hero .cwc-line>span {
        overflow: visible;
        transform: none !important;
    }

    .cwc-believe-hero__caption-sub {
        margin-top: 18px;
    }

    .cwc-believe-hero__caption-sub>span {
        font-size: 15px;
    }

    /* Imagenes decorativas dispersas + icono central: fuera en mobile */
    .cwc-believe-hero>img[class^="image--believe-hero"],
    .iconlogo-believe {
        display: none;
    }

    /* Foto media a ancho completo, radios planos */
    .cwc-believe-hero .container-fluid.rem--2 {
        padding: 0 16px;
    }

    .cwc-believe-hero__media {
        aspect-ratio: 16 / 10;
        border-radius: 0 !important;
    }


    /* --- FLIP CARDS de grupos ---
       En touch no hay hover: el panel de info se muestra por defecto y
       define el alto de la card. Cada card queda como ficha limpia con
       titulo + leader/audience/day/place, que es lo que importa en un
       buscador de grupos. El front de color queda detras (no se ve).
       Cards a 1 columna (col-md-6 -> full width en mobile). */
    .cwc-group-card {
        aspect-ratio: auto;
        min-height: 180px;
        border-radius: 10px;
        overflow: hidden;
    }

    .cwc-group-card__hover {
        position: relative;
        inset: auto;
        transform: none !important;
        pointer-events: auto;
        padding: 22px 20px;
    }


    /* ========================================================
       GIVE (/give)
       ======================================================== */

    /* Espaciados de 220px (pensados para desktop) reducidos en mobile
       para no dejar huecos enormes. Solo se usan en /give. */
    .pt-220 {
        padding-top: 88px;
    }

    .mb-220 {
        margin-bottom: 64px;
    }

    /* Sun deco decorativo (aria-hidden): por su posicion absoluta se
       solapa sobre el texto en mobile -> se oculta. */
    .cwc-give-sun {
        display: none;
    }

    /* GIVE ONLINE (card clickable): el CTA "GIVE NOW" es hover-only.
       En touch no hay hover -> pasa a flujo normal, fijo al final de
       la card, como affordance clara de que es clickable. */
    .cwc-give-way--clickable .cwc-give-way__cta {
        position: static;
        margin-top: 18px;
        pointer-events: auto;
    }

    /* --- STATS 74c / 26c ---
       El SVG de billetes iba absoluto (left:-39%, bottom:120px) y se
       montaba ENCIMA del texto de los stats. En mobile pasa a flujo
       normal, arriba y a tamano razonable, con los stats debajo. */
    .cwc-give-where__visual {
        justify-content: flex-start;
    }

    .cwc-give-where__bills {
        position: static;
        left: auto;
        bottom: auto;
        width: 55%;
        max-width: 190px;
        margin: 0 0 16px 0;
    }

    /* --- CARDS "Ways to give" ---
       Se simplifican para verse limpias y planas: radio 10px (no 80px),
       padding uniforme (se quita el hueco de 120px arriba) y el icono
       en flujo normal arriba, sin la caja crema que rompia el borde. */
    .cwc-give-way {
        padding: 28px;
        border-radius: 10px;
    }

    .cwc-give-way__icon {
        position: static;
        background: transparent;
        padding: 0;
        margin-bottom: 4px;
    }

    .cwc-give-way__icon img {
        width: 42px;
        height: 42px;
    }


    /* ========================================================
       CONNECT (/connect)
       ======================================================== */

    /* HERO: el <style> inline del blade deja el slider absoluto al 30%
       y la imagen accent flotando, con el titulo montado sobre las
       fotos (ilegible). En mobile se rearma apilado: titulo arriba
       legible + slider como banner full-width + accent oculta.
       Se usa !important porque el <style> inline carga despues del head. */
    .cwc-connect-hero {
        height: auto;
        padding: 96px 0 44px 0;
    }

    .cwc-connect-hero .vertical-align {
        top: auto;
        transform: none;
    }

    .cwc-connect-hero .row {
        flex-direction: column;
    }

    /* Titulo primero (el headline lidera) */
    .cwc-connect-hero .col-md-8 {
        order: 1;
    }

    /* Titulo del hero: max 32px (italic) / 30px (bold), consistente con
       el resto de titulos del sitio (ver bloque TITULOS global). */
    .cwc-connect-hero__title {
        gap: 6px;
        /* separacion pareja entre los 2 grupos de linea */
    }

    .cwc-connect-hero__line {
        column-gap: 8px;
        row-gap: 6px;
        /* mismo aire cuando una linea envuelve -> line-height parejo */
    }
    body body .cwc-kicker,
    body p.cwc-kicker{
        margin-bottom: 20px !important;
    }
        .cwc-section-dark__title>span{line-height: 1.4;}
        h2 *{
                    display: inline !important;
                }
    .cwc-connect-hero__word {
        font-size: clamp(24px, 7.5vw, 30px);
        line-height: 1.05;
    }

    .cwc-connect-hero__word--italic {
        font-size: clamp(26px, 8vw, 32px);
        line-height: 1.05;
    }

    /* Slider principal: banner full-width. aspect-ratio 3/4 = el mismo de
       las fotos (749x1002) -> se ven completas, sin recorte. */
    .cwc-connect-hero .cwc-connect-hero__figure--main {
        position: relative !important;
        width: 100% !important;
        min-height: 0 !important;
        z-index: auto !important;
        order: 2;
        aspect-ratio: 3 / 4;
        margin-top: 24px;
        border-radius: 10px;
        overflow: hidden;
    }

    /* Quita el degradado lateral (fundia el borde con el titulo al lado) */
    .cwc-connect-hero__figure--main::after {
        display: none;
    }

    /* Imagen accent decorativa + columna espaciadora vacia: fuera */
    .cwc-connect-hero__figure--accent,
    .cwc-connect-hero .col-md-3 {
        display: none !important;
    }

    /* "You're welcome": de absoluto a flujo normal debajo del banner */
    .cwc-connect-hero__welcome {
        position: static;
        margin-top: 12px;
        padding: 0 15px;
    }


    /* ========================================================
       HOME (/)
       ======================================================== */

    /* --- HERO ---
       Los 3 scrubs pinned del home (hero, nextgen, belong) se
       desactivan en mobile via JS. Hero estatico: caption + video +
       card apilados. Las 6 imagenes dispersas y el icono se ocultan
       (collage absoluto que no reflowea). */
    .cwc-hero {
        min-height: 0;
        height: auto;
        overflow: visible;
        padding: 92px 0 32px 0;
    }

    .cwc-hero>img[class^="image--hero"],
    .cwc-hero .iconlogo {
        display: none;
    }

    /* Caption: de absoluto centrado a flujo normal, tamano mas contenido
       (antes se veia desproporcionado de grande). */
    .cwc-hero__caption {
        position: static;
        transform: none;
        max-width: 100%;
        padding: 0 16px;
        font-size: clamp(30px, 8vw, 40px);
        line-height: 1.05;
        margin-bottom: 20px;
    }

    /* Fuerza el texto visible (el JS ya no lo anima en mobile) */
    .cwc-hero .cwc-line,
    .cwc-hero .cwc-line>span {
        overflow: visible;
        transform: none !important;
    }

    /* Video como banner; la card debajo en flujo (el JS ya no la mueve) */
    .cwc-hero__media {
        border-radius: 10px !important;
        transform: none !important;
    }

    .cwc-hero__card {
        transform: none !important;
    }

    /* --- CARDS (Sent With Purpose / Plan Your Visit) ---
       Se apilan (col-md-5 -> full). Se quita el offset ty-50 y el
       logo flotante decorativo. */
    .ty-50 {
        transform: none !important;
    }

    .floating--logo {
        display: none;
    }

    /* --- SCROLLERS (Next Gen / A place to belong) ---
       Sin pin en mobile: swipe horizontal nativo. El contenedor pasa
       de 219% a 100% y cada tile ~78% -> se ve una y algo, swipeable. */
    /* .cwc-belong era display:grid + min-height:100vh (centra vertical en
       desktop). En mobile pasa a flujo block normal: heading arriba,
       scroller debajo, sin alturas forzadas. */
    .cwc-belong {
        display: block;
        min-height: 0;
        height: auto;
        padding: 56px 0;
    }

    /* Heading de seccion: asegura wrap y aire respecto al slider (iba pegado) */
    .cwc-section__hero {
        overflow-wrap: break-word;
        margin-bottom: 32px;
    }

    /* Mismo aire para el titulo de "A place to Belong" sobre su slider */
    .cwc-belong .cwc-section__title {
        margin-bottom: 32px;
    }

    /* Scroller: 100% (no 219%). Marquee infinito por JS (auto-scroll +
       drag): se quita el snap para que el avance sea continuo y suave.
       Cada tile ~72% -> se ve una y algo mientras corre. */
    .cwc-scroller {
        width: 100% !important;
        scroll-snap-type: none !important;
        scroll-behavior: auto !important;
    }

    .cwc-scroller>li {
        flex: 0 0 72%;
        scroll-snap-align: none;
    }

    /* Arrastre manual por JS (mueve scrollLeft). touch-action pan-y deja
       el gesto horizontal para el drag y el vertical para el scroll de
       pagina. Se evita el "drag" nativo de imagen/enlace que interfiere. */
    .cwc-scroller,
    .cwc-hero__strip {
        touch-action: pan-y;
    }

    .cwc-scroller a,
    .cwc-scroller img,
    .cwc-hero__strip img {
        -webkit-user-drag: none;
        user-select: none;
    }

    /* --- HERO STRIP ---
       Las 6 fotos del hero (antes ocultas) se muestran en un strip que
       corre solo en loop (mismo marquee que los sliders) y se arrastra. */
    .cwc-hero__strip {
        display: flex;
        gap: 10px;
        /* hidden (no auto): el drag manual mueve scrollLeft; con auto el
           navegador intercepta el touch horizontal y rompe el arrastre.
           Igual que .cwc-scroller, que por esto si se arrastra. */
        overflow-x: hidden;
        overflow-y: hidden;
        scroll-behavior: auto;
        margin: 0 0 24px 0;
        padding: 0 16px;
    }

    .cwc-hero__strip::-webkit-scrollbar {
        display: none;
    }

    .cwc-hero__strip img {
        position: static !important;
        flex: 0 0 auto;
        width: auto !important;
        height: 150px !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        border-radius: 10px;
        object-fit: cover;
    }

    /* --- PARALLAX desactivado en mobile (JS guard 5.7) ---
       La imagen cubre estatica: sin el 140% de alto ni movimiento, para
       que no se corte ni tape el contenido de las cajas. */
    .cwc-parallax>img {
        top: 0 !important;
        height: 100% !important;
        transform: none !important;
    }

    /* Bigcards (Sent With Purpose / Plan Your Visit): mas altas para que
       la foto no quede tapada por el texto. */
    .cwc-bigcard {
        min-height: 520px;
    }

    /* --- APP: celulares ---
       Sin parallax (JS guard 5.4). Se separan de los badges y se les da
       aire; quedan estaticos y con mejor proporcion. */
       body .cwc-app{
        padding: 90px 0 90px 0 !important;
        min-height: 0px !important;
       }
    .cwc-app__phones {
        margin-top: 36px;
        gap: 10px;
        align-items: flex-start;
    }

    /* --- FOOTER ---
       "Stay in touch" no debe quedar pegado a los acordeones: mas aire. */
    .cwc-footer .container-fluid>.row:first-child>[class*="col-"]:last-child {
        margin-top: 28px;
        padding-top: 24px;
    }

    /* ========================================================
       NEXTGEN (/nextgen)
       ========================================================
       Criterio igual al resto de internas: el hero y el titulo
       ya los resuelven las reglas globales (.cwc-page-hero y
       .cwc-page-title__heading--mixed). Aqui solo lo propio de
       esta vista: intro, nav de anclas y bloques de ministerio. */

    /* --- INTRO ---
       Las 2 fotos laterales son absolutas y decorativas: en mobile
       se ocultan (igual que el collage del hero del home y el
       floating--logo). El alto del diseno tampoco aplica. */
    .cwc-nextgen-intro {
        padding: 48px 0;
        min-height: 0;
        display: block;
    }

    .cwc-nextgen-intro__figure {
        display: none;
    }

    .cwc-nextgen-intro__title {
        font-size: clamp(30px, 9vw, 40px);
        line-height: 1.08;
    }

    /* El titulo va en 2 spans block: en mobile fluyen como texto
       normal para que el wrap sea natural */
    .cwc-nextgen-intro__title span {
        display: inline;
    }

    .cwc-nextgen-intro__text {
        font-size: 16px;
        line-height: 1.55;
    }

    /* --- NAV DE ANCLAS ---
       La pastilla no cabe en 4 segmentos: se desplaza en horizontal
       con el mismo patron de los scrollers (sin scrollbar visible).
       Se alinea a la izquierda para que se note que hay mas. */
    .cwc-anchor-nav {
        top: 56px;
        padding: 12px 16px;
        text-align: left;
    }

    .cwc-anchor-nav__list {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        max-width: 100%;
    }

    .cwc-anchor-nav__list::-webkit-scrollbar {
        display: none;
    }

    /* Sin bold y mas compacto: en 430px los 4 segmentos no caben y
       "HIGH SCHOOL" quedaba cortado. Peso 600 en vez de 700, menos
       padding y tracking casi cero para ganar ancho. */
    .cwc-anchor-nav__link {
        padding: 10px 12px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.2px;
    }

    /* --- SECCIONES DE MINISTERIO ---
       Se apilan: foto arriba (el orden del CSS de escritorio se
       anula) y contenido debajo, con aire entre ambos como en las
       secciones dark del resto del sitio. */
    .cwc-ministry {
        padding: 48px 0;
        scroll-margin-top: 110px;
    }

    .cwc-ministry--photo-left .cwc-ministry__media-col,
    .cwc-ministry--photo-right .cwc-ministry__media-col {
        order: -1;
        margin-bottom: 28px;
    }

    .cwc-ministry__figure {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }

    .cwc-ministry__badge {
        font-size: 12px;
        padding: 7px 14px;
        margin-bottom: 14px;
    }

    .cwc-ministry__title {
        font-size: clamp(32px, 10vw, 44px);
        line-height: 1.1;
    }

    .cwc-ministry__schedule {
        font-size: 19px;
        margin-bottom: 18px;
    }

    .cwc-ministry__text {
        font-size: 16px;
        line-height: 1.55;
    }

    .cwc-ministry__social {
        margin-top: 24px;
    }

    /* =============================================================
       FLOURISH TRAINING (/flourish)
       El hero pierde el aire vertical del desktop, la marca chica
       pasa a acompanar al claim (en el sitio original chocaba con
       el subtitulo) y las cards van una debajo de otra.
       ============================================================= */
    .cwc-flourish-hero {
        padding: 60px 0 70px 0;
    }

    /* La marca de fondo crece en % para que se siga leyendo como
       textura: 42vw en mobile serian ~160px y se perdia. */
    .cwc-flourish-hero__mark {
        width: 88vw;
        left: -24vw;
        top: 40%;
        opacity: 0.07;
    }

    .cwc-flourish-hero__head {
        margin-bottom: 70px;
    }

    .cwc-flourish-hero__title {
        font-size: calc(38px * var(--cwc-title-scale));
        letter-spacing: -1px;
        margin-bottom: 18px;
    }

    .cwc-flourish-hero__claim {
        font-size: 15px;
    }

    /* Excepcion al global `body h2 {display:block !important}` de
       arriba: aca la cursiva y la bold deben quedar en dos renglones
       como en el diseno, no seguidas en el mismo parrafo. */
    body h2.cwc-flourish-hero__subtitle {
        display: flex !important;
        flex-direction: column;
        font-size: calc(28px * var(--cwc-title-scale)) !important;
        letter-spacing: -0.5px;
        margin-bottom: 22px;
    }

    body h2.cwc-flourish-hero__subtitle em,
    body h2.cwc-flourish-hero__subtitle span {
        display: block !important;
    }

    .cwc-flourish-hero__text {
        font-size: 15px;
    }

    /* Absoluta a la derecha se montaba sobre el titulo: pasa a flujo
       normal debajo del parrafo. */
    .cwc-flourish-hero__mark-sm {
        position: static;
        display: block;
        width: 54px;
        margin: 34px 0 0 0;
    }

    .cwc-flourish-tracks {
        padding: 60px 0 80px 0;
    }

    .cwc-flourish-tracks__intro {
        font-size: 15px;
        margin-bottom: 40px;
    }

    .cwc-flourish-card__body {
        padding: 28px 24px 30px 24px;
    }

    .cwc-flourish-card__eyebrow {
        margin-bottom: 18px;
    }

    .cwc-flourish-card__eyebrow strong {
        font-size: 18px;
    }

    .cwc-flourish-card__schedule {
        margin-bottom: 18px;
    }

    /* En mobile la card no necesita empujar el CTA al fondo: cada
       una tiene su propio alto. */
    .cwc-flourish-card__cta {
        padding-top: 26px;
    }

}