/* =============================================================================
   Section Bento Specialties — Luxury Bento Grid + Mobile Carousel
   Prefijo: .bs-   Ancla: #bs-section
   Grid explícito de 4 columnas × 4 filas (0 celdas vacías):

     [MedGeneral 2×2][Cardiología][Ginecología 1×2]
     [MedGeneral 2×2][Pediatría  ][Ginecología 1×2]
     [Traumatología 2×1][Oftalmología][Dermatología]
     [Neurología ——————— 4×1 ————————————————————]
   ============================================================================= */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
#bs-section {
    --bs-blue:        #002FD9;
    --bs-blue-dark:   #001DB0;
    --bs-blue-light:  #1A55FF;
    --bs-blue-06:     rgba(0, 47, 217, 0.06);
    --bs-blue-10:     rgba(0, 47, 217, 0.10);
    --bs-blue-16:     rgba(0, 47, 217, 0.16);
    --bs-blue-25:     rgba(0, 47, 217, 0.25);
    --bs-black:       #08090F;
    --bs-gray:        #64748B;
    --bs-font:        -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    --bs-radius:      32px;
    --bs-gap:         1.25rem;
    --bs-row-h:       200px;
    --bs-transition:  0.32s cubic-bezier(0.4, 0, 0.2, 1);

    /* Mobile carousel */
    --bs-card-w:      280px;
    --bs-card-h:      260px;
}

/* =============================================================================
   SECCIÓN
   ============================================================================= */
#bs-section {
    position: relative;
    width: 100%;
    padding: clamp(5rem, 9vw, 8rem) 0 clamp(5rem, 8vw, 7rem);
    overflow: hidden;
    background: linear-gradient(170deg, #F5F7FF 0%, #FFFFFF 50%, #F0F4FF 100%);
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Orbe fondo — arriba derecha */
#bs-section::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -8%;
    width: 48vmax;
    height: 48vmax;
    border-radius: 50%;
    background: radial-gradient(circle at 65% 35%, rgba(0, 47, 217, 0.07), transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* Orbe fondo — abajo izquierda */
#bs-section::after {
    content: '';
    position: absolute;
    bottom: -12%;
    left: -6%;
    width: 36vmax;
    height: 36vmax;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 65%, rgba(56, 190, 255, 0.06), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* =============================================================================
   ENCABEZADO — título principal
   ============================================================================= */
#bs-section .bs-section__header {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    margin: 0 auto clamp(2.5rem, 5vw, 4rem);
    padding: 0 2rem;
}

#bs-section .bs-section__title {
    font-family: var(--bs-font) !important;
    font-size: clamp(2.2rem, 5.5vw, 3.6rem) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.035em !important;
    color: var(--bs-black) !important;
    margin: 0 !important;
    padding: 0 !important;
}

#bs-section .bs-section__title em {
    font-style: normal !important;
    background: linear-gradient(135deg, #002FD9 0%, #38BEFF 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* =============================================================================
   WRAP
   ============================================================================= */
#bs-section .bs-section__wrap {
    position: relative;
    z-index: 2;
}

/* =============================================================================
   BENTO GRID — 4 columnas, 4 filas explícitas
   ============================================================================= */
#bs-section .bs-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: var(--bs-row-h) !important;
    gap: var(--bs-gap) !important;
    padding: 0.25rem clamp(1.5rem, 4vw, 3rem) 0.5rem !important;
    max-width: 1380px !important;
    margin: 0 auto !important;
    list-style: none !important;
}

/* ── Posicionamiento explícito por nth-child ─────────────────────────────── */

/* 1 — Medicina General: 2 col × 2 row */
#bs-section .bs-card:nth-child(1) {
    grid-column: 1 / 3 !important;
    grid-row:    1 / 3 !important;
}

/* 2 — Cardiología: 1×1 */
#bs-section .bs-card:nth-child(2) {
    grid-column: 3 / 4 !important;
    grid-row:    1 / 2 !important;
}

/* 3 — Ginecología: 1 col × 2 row */
#bs-section .bs-card:nth-child(3) {
    grid-column: 4 / 5 !important;
    grid-row:    1 / 3 !important;
}

/* 4 — Pediatría: 1×1 */
#bs-section .bs-card:nth-child(4) {
    grid-column: 3 / 4 !important;
    grid-row:    2 / 3 !important;
}

/* 5 — Traumatología: 2×1 */
#bs-section .bs-card:nth-child(5) {
    grid-column: 1 / 3 !important;
    grid-row:    3 / 4 !important;
}

/* 6 — Oftalmología: 1×1 */
#bs-section .bs-card:nth-child(6) {
    grid-column: 3 / 4 !important;
    grid-row:    3 / 4 !important;
}

/* 7 — Dermatología: 1×1 */
#bs-section .bs-card:nth-child(7) {
    grid-column: 4 / 5 !important;
    grid-row:    3 / 4 !important;
}

/* 8 — Neurología: 4×1 full-width accent */
#bs-section .bs-card:nth-child(8) {
    grid-column: 1 / 5 !important;
    grid-row:    4 / 5 !important;
}

/* =============================================================================
   TARJETA BASE — Liquid Glass
   ============================================================================= */
#bs-section .bs-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--bs-radius) !important;

    /* Glassmorphism */
    background: rgba(255, 255, 255, 0.70) !important;
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.40) !important;
    box-shadow:
        0 4px 24px var(--bs-blue-06),
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 -1px 0 rgba(0, 47, 217, 0.04) inset !important;

    transition:
        transform var(--bs-transition),
        box-shadow var(--bs-transition),
        background var(--bs-transition) !important;
    cursor: default;
    will-change: transform;
}

/* Hover — elevación suave */
#bs-section .bs-card:hover {
    transform: scale(1.02) !important;
    background: rgba(255, 255, 255, 0.86) !important;
    box-shadow:
        0 12px 48px var(--bs-blue-16),
        0 1px 0 rgba(255, 255, 255, 0.95) inset !important;
}

/* ── Inner ───────────────────────────────────────────────────────────────── */
#bs-section .bs-card__inner {
    position: relative;
    z-index: 2;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 0 !important;
    height: 100% !important;
    padding: 1.75rem !important;
    box-sizing: border-box !important;
}

/* Hero card (1ª) — safe-zone más amplia */
#bs-section .bs-card:nth-child(1) .bs-card__inner {
    padding: 2.5rem !important;
    justify-content: flex-end !important;   /* contenido pegado al fondo de la card grande */
}

/* Neurología (8ª) — banda horizontal: título y desc a la izquierda, CTA pill a la derecha */
#bs-section .bs-card:nth-child(8) .bs-card__inner {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2rem !important;
    padding: 1.75rem 2.5rem !important;
}

#bs-section .bs-card:nth-child(8) .bs-card__body {
    flex: 1 1 auto !important;
    max-width: 720px !important;
}

#bs-section .bs-card:nth-child(8) .bs-card__title {
    margin-bottom: 0.5rem !important;
}

#bs-section .bs-card:nth-child(8) .bs-card__desc {
    margin: 0 !important;
    -webkit-line-clamp: 2;
}

/* CTA de Neurología — eliminado por petición del cliente */
#bs-section .bs-card:nth-child(8) .bs-card__cta { display: none !important; }

/* Orbe decorativo interior de la tarjeta */
#bs-section .bs-card__orb {
    position: absolute !important;
    top: -25% !important;
    right: -15% !important;
    width: 55% !important;
    height: 55% !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, var(--bs-blue-06), transparent 70%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    transition: opacity var(--bs-transition) !important;
    opacity: 0.6;
}

#bs-section .bs-card:hover .bs-card__orb {
    opacity: 1 !important;
}

/* =============================================================================
   ICONO — DESACTIVADO (markup removido del PHP; este rule es defensivo)
   ============================================================================= */
#bs-section .bs-card__icon-wrap { display: none !important; }

/* =============================================================================
   CUERPO DE TEXTO
   ============================================================================= */
#bs-section .bs-card__body {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;          /* controlado con margin en hijos */
    width: 100% !important;
}

/* Título — azul vibrante */
#bs-section .bs-card__title {
    font-family: var(--bs-font) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    color: #002FD9 !important;
    margin: 0 0 0.6rem !important;
    padding: 0 !important;
}

/* Hero card: título mucho más grande */
#bs-section .bs-card:nth-child(1) .bs-card__title {
    font-size: clamp(1.6rem, 2.4vw, 2rem) !important;
    margin-bottom: 0.9rem !important;
    line-height: 1.12 !important;
}

/* Descripción */
#bs-section .bs-card__desc {
    font-family: var(--bs-font) !important;
    font-size: 0.88rem !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: #64748B !important;
    margin: 0 !important;
    padding: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#bs-section .bs-card:nth-child(1) .bs-card__desc {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    -webkit-line-clamp: 5;
}

/* =============================================================================
   MICRO-CTA — siempre anclado al fondo de la tarjeta
   ============================================================================= */
#bs-section .bs-card__cta,
#bs-section .bs-card__cta:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    align-self: flex-start !important;

    /* Empujar al fondo sin importar la altura del contenido */
    margin-top: auto !important;
    padding-top: 1.25rem !important;

    font-family: var(--bs-font) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    color: #002FD9 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    transition:
        gap var(--bs-transition),
        opacity var(--bs-transition) !important;
}

#bs-section .bs-card__cta:hover {
    gap: 0.65rem !important;
    opacity: 0.70 !important;
    color: #002FD9 !important;
    text-decoration: none !important;
}

#bs-section .bs-card__cta svg {
    flex-shrink: 0 !important;
    transition: transform 0.3s ease !important;
}

/* Flecha desplazada 5px en hover */
#bs-section .bs-card__cta:hover svg {
    transform: translateX(5px) !important;
}

/* =============================================================================
   ACCENT CARD — fondo azul sólido
   ============================================================================= */
#bs-section .bs-card--accent {
    background: linear-gradient(
        145deg,
        #002FD9 0%,
        #0038F0 55%,
        #1A55FF 100%
    ) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow:
        0 8px 40px rgba(0, 47, 217, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.18) inset !important;
}

#bs-section .bs-card--accent:hover {
    background: linear-gradient(
        145deg,
        #0037FF 0%,
        #0044FF 55%,
        #2260FF 100%
    ) !important;
    transform: scale(1.02) !important;
    box-shadow:
        0 16px 56px rgba(0, 47, 217, 0.48),
        0 1px 0 rgba(255, 255, 255, 0.22) inset !important;
}

/* Orbe interior — claro en accent */
#bs-section .bs-card--accent .bs-card__orb {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 70%) !important;
    opacity: 0.8;
}

/* Icono en accent */
#bs-section .bs-card--accent .bs-card__icon-wrap {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

#bs-section .bs-card--accent:hover .bs-card__icon-wrap {
    background: rgba(255, 255, 255, 0.22) !important;
}

#bs-section .bs-card--accent .bs-card__icon-wrap svg {
    color: #fff !important;
    stroke: #fff !important;
}

/* Texto en accent — blanco puro */
#bs-section .bs-card--accent .bs-card__title {
    color: #FFFFFF !important;
}

#bs-section .bs-card--accent .bs-card__desc {
    color: rgba(255, 255, 255, 0.80) !important;
}

/* CTA en accent — blanco */
#bs-section .bs-card--accent .bs-card__cta,
#bs-section .bs-card--accent .bs-card__cta:visited {
    color: rgba(255, 255, 255, 0.92) !important;
    padding-top: 1.25rem !important;
}

#bs-section .bs-card--accent .bs-card__cta:hover {
    color: #fff !important;
    opacity: 0.85 !important;
    gap: 0.65rem !important;
}

/* =============================================================================
   DOTS
   ============================================================================= */
#bs-section .bs-section__dots {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding-top: 1.75rem;
}

#bs-section .bs-dot {
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--bs-blue-16) !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition:
        background var(--bs-transition),
        width var(--bs-transition),
        border-radius var(--bs-transition) !important;
    flex-shrink: 0 !important;
}

#bs-section .bs-dot.is-active {
    background: var(--bs-blue) !important;
    width: 22px !important;
    border-radius: 4px !important;
}

/* =============================================================================
   ANIMACIÓN DE ENTRADA — Pop-up con stagger
   Cards comienzan invisibles; cuando la sección entra al viewport
   (data-reveal → is-visible), cada card hace un "pop-in" elástico con delay.
   ============================================================================= */
#bs-section[data-reveal] .bs-card {
    opacity: 0;
    transform: scale(0.82) translateY(28px);
    transform-origin: center center;
    will-change: opacity, transform;
}

@keyframes bs-pop-in {
    0% {
        opacity: 0;
        transform: scale(0.82) translateY(28px);
    }
    60% {
        opacity: 1;
        transform: scale(1.04) translateY(-4px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

#bs-section[data-reveal].is-visible .bs-card {
    animation: bs-pop-in 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Stagger: cada tarjeta entra 90ms después de la anterior */
#bs-section[data-reveal].is-visible .bs-card:nth-child(1) { animation-delay: 0.00s; }
#bs-section[data-reveal].is-visible .bs-card:nth-child(2) { animation-delay: 0.09s; }
#bs-section[data-reveal].is-visible .bs-card:nth-child(3) { animation-delay: 0.18s; }
#bs-section[data-reveal].is-visible .bs-card:nth-child(4) { animation-delay: 0.27s; }
#bs-section[data-reveal].is-visible .bs-card:nth-child(5) { animation-delay: 0.36s; }
#bs-section[data-reveal].is-visible .bs-card:nth-child(6) { animation-delay: 0.45s; }
#bs-section[data-reveal].is-visible .bs-card:nth-child(7) { animation-delay: 0.54s; }
#bs-section[data-reveal].is-visible .bs-card:nth-child(8) { animation-delay: 0.63s; }

/* Título de la sección también entra con fade-up suave */
#bs-section[data-reveal] .bs-section__header {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
#bs-section[data-reveal].is-visible .bs-section__header {
    opacity: 1;
    transform: translateY(0);
}

/* Reduce motion: animación off, todo visible */
@media (prefers-reduced-motion: reduce) {
    #bs-section[data-reveal] .bs-card,
    #bs-section[data-reveal] .bs-section__header {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* =============================================================================
   RESPONSIVE — 3 columnas (≤ 1180px)
   Reposicionar tarjetas para 3 cols:
   [MedGen 2×2][Cardiología][Ginecología 1×2]
   [MedGen 2×2][Pediatría  ][Ginecología 1×2]
   [Traumatología 2×1][Oftalmología]
   [Dermatología][Neurología 2×1  ]
   ============================================================================= */
@media (max-width: 1180px) {
    #bs-section .bs-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        --bs-row-h: 190px;
        max-width: 900px !important;
    }

    #bs-section .bs-card:nth-child(1) { grid-column: 1/3 !important; grid-row: 1/3 !important; }
    #bs-section .bs-card:nth-child(2) { grid-column: 3/4 !important; grid-row: 1/2 !important; }
    #bs-section .bs-card:nth-child(3) { grid-column: 1/2 !important; grid-row: 3/5 !important; }
    #bs-section .bs-card:nth-child(4) { grid-column: 3/4 !important; grid-row: 2/3 !important; }
    #bs-section .bs-card:nth-child(5) { grid-column: 2/4 !important; grid-row: 3/4 !important; }
    #bs-section .bs-card:nth-child(6) { grid-column: 2/3 !important; grid-row: 4/5 !important; }
    #bs-section .bs-card:nth-child(7) { grid-column: 3/4 !important; grid-row: 4/5 !important; }
    #bs-section .bs-card:nth-child(8) { grid-column: 1/4 !important; grid-row: 5/6 !important; }

    /* Neurología sigue horizontal en 3 cols — ajuste de padding */
    #bs-section .bs-card:nth-child(8) .bs-card__inner {
        padding: 1.5rem 2rem !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
}

/* =============================================================================
   RESPONSIVE — 2 columnas (≤ 760px)
   ============================================================================= */
@media (max-width: 760px) {
    #bs-section .bs-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        --bs-row-h: 180px;
        max-width: 100% !important;
    }

    #bs-section .bs-card:nth-child(1) { grid-column: 1/3 !important; grid-row: 1/3 !important; }
    #bs-section .bs-card:nth-child(2) { grid-column: 1/2 !important; grid-row: 3/4 !important; }
    #bs-section .bs-card:nth-child(3) { grid-column: 2/3 !important; grid-row: 3/5 !important; }
    #bs-section .bs-card:nth-child(4) { grid-column: 1/2 !important; grid-row: 4/5 !important; }
    #bs-section .bs-card:nth-child(5) { grid-column: 1/3 !important; grid-row: 5/6 !important; }
    #bs-section .bs-card:nth-child(6) { grid-column: 1/2 !important; grid-row: 6/7 !important; }
    #bs-section .bs-card:nth-child(7) { grid-column: 2/3 !important; grid-row: 6/7 !important; }
    #bs-section .bs-card:nth-child(8) { grid-column: 1/3 !important; grid-row: 7/8 !important; }

    /* Neurología: vuelve a columna en 2 cols */
    #bs-section .bs-card:nth-child(8) .bs-card__inner {
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        padding: 1.75rem !important;
    }

    #bs-section .bs-card:nth-child(8) .bs-card__body {
        max-width: 100% !important;
    }

    /* CTA vuelve a ser link simple */
    #bs-section .bs-card:nth-child(8) .bs-card__cta {
        align-self: flex-start !important;
        margin: auto 0 0 0 !important;
        padding: 1.25rem 0 0 !important;
        background: transparent !important;
        border: none !important;
    }
}

/* =============================================================================
   MOBILE CAROUSEL (≤ 640px) — tarjetas altas que ocupan casi todo el viewport
   ============================================================================= */
@media (max-width: 640px) {

    #bs-section {
        padding: clamp(3rem, 7vw, 4.5rem) 0 clamp(2.5rem, 6vw, 4rem);
        /* Card width/height: la tarjeta cubre prácticamente toda la pantalla */
        --bs-card-w: calc(100vw - 3rem);
        --bs-card-h: min(43vh, 335px);
    }

    #bs-section .bs-section__header {
        margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
        padding: 0 1.5rem;
    }

    /* Grid → flex carrusel horizontal */
    #bs-section .bs-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        grid-template-columns: unset !important;
        grid-auto-rows: unset !important;
        gap: 1rem !important;
        padding: 0.5rem 1.5rem 1rem !important;
        margin: 0 !important;
        max-width: 100% !important;

        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    #bs-section .bs-grid::-webkit-scrollbar {
        display: none !important;
    }

    /* Todas las tarjetas: ocupan casi todo el ancho/alto, SIN sombras */
    #bs-section .bs-card {
        flex: 0 0 var(--bs-card-w) !important;
        min-width: var(--bs-card-w) !important;
        max-width: var(--bs-card-w) !important;
        height: var(--bs-card-h) !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
        grid-column: unset !important;
        grid-row: unset !important;
        box-shadow: none !important;
        filter: none !important;
    }

    /* Sin sombras en ningún estado en mobile */
    #bs-section .bs-card:hover,
    #bs-section .bs-card:active,
    #bs-section .bs-card:focus,
    #bs-section .bs-card--accent,
    #bs-section .bs-card--accent:hover,
    #bs-section .bs-card--accent:active,
    #bs-section .bs-card--accent:focus {
        box-shadow: none !important;
        transform: none !important;
    }

    /* Quitar orbes radiales del contenedor en mobile — generaban halos extraños */
    #bs-section::before,
    #bs-section::after {
        display: none !important;
    }

    /* Reset de cualquier sombra que Astra pueda inyectar al wrap/grid */
    #bs-section .bs-section__wrap,
    #bs-section .bs-grid {
        box-shadow: none !important;
        filter: none !important;
    }

    /* Padding interno más generoso en mobile */
    #bs-section .bs-card__inner {
        padding: 2rem !important;
        justify-content: flex-end !important;   /* contenido al pie de la card alta */
    }

    /* Hero card en mobile = igual estilo que las demás (justify-content: flex-end) */
    #bs-section .bs-card:nth-child(1) .bs-card__inner {
        padding: 2rem !important;
        justify-content: flex-end !important;
    }

    /* Tipografía más grande en mobile (cards mucho más altas) */
    #bs-section .bs-card__title {
        font-size: 1.55rem !important;
        margin-bottom: 0.85rem !important;
    }
    #bs-section .bs-card:nth-child(1) .bs-card__title {
        font-size: 1.85rem !important;
    }
    #bs-section .bs-card__desc {
        font-size: 1rem !important;
        line-height: 1.55 !important;
        -webkit-line-clamp: 5 !important;
    }
    #bs-section .bs-card__cta {
        font-size: 0.95rem !important;
        padding-top: 1.5rem !important;
    }

    /* Neurología en mobile — columna vertical estándar */
    #bs-section .bs-card:nth-child(8) .bs-card__inner {
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        padding: 2rem !important;
    }
    #bs-section .bs-card:nth-child(8) .bs-card__body {
        max-width: 100% !important;
    }
    #bs-section .bs-card:nth-child(8) .bs-card__cta {
        align-self: flex-start !important;
        margin: 1.25rem 0 0 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        font-size: 0.95rem !important;
    }
    #bs-section .bs-card:nth-child(8) .bs-card__desc {
        -webkit-line-clamp: 4 !important;
    }

    /* Sin hover lift en táctil */
    #bs-section .bs-card:hover {
        transform: none !important;
    }

    /* Última tarjeta: aire derecho para que el snap final centre bien */
    #bs-section .bs-card:last-child {
        margin-right: 1.5rem !important;
    }

    /* Mostrar dots */
    #bs-section .bs-section__dots {
        display: flex !important;
        padding-top: 1.25rem;
    }
}

/* Mobile pequeño */
@media (max-width: 400px) {
    #bs-section {
        --bs-card-w: calc(100vw - 2.5rem);
        --bs-card-h: min(41vh, 300px);
    }
    #bs-section .bs-card__title { font-size: 1.4rem !important; }
    #bs-section .bs-card:nth-child(1) .bs-card__title { font-size: 1.65rem !important; }
}

/* =============================================================================
   REDUCE MOTION
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    #bs-section .bs-card,
    #bs-section .bs-card__cta,
    #bs-section .bs-card__icon-wrap,
    #bs-section .bs-card__orb,
    #bs-section .bs-dot {
        transition: none !important;
        animation: none !important;
    }

    #bs-section .bs-card:hover {
        transform: none !important;
    }
}