/* ══════════════════════════════════════
   S4 — MARCAS ALIADAS
   Fondo: void azul profundo con atmósfera
   Cards: liquid glass con brand glow
══════════════════════════════════════ */

.lt-s4 {
    --bm-green-rgb: 57, 181, 74;
    --bm-blue-rgb:  8, 22, 58;
}

/* ── Inner — fondo base + dot matrix en una sola declaración ── */
.lt-s4 .lt-section__inner {
    /* background y background-image NO pueden coexistir — background shorthand
       resetea background-image. Todo va en background con color al final. */
    background:
        radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px),
        var(--color-navy);
    background-size: 28px 28px, auto;
    overflow: hidden;
}

/* Aurora — capa 1: focos de luz principales */
.lt-s4 .lt-section__inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Centro-derecha: halo verde intenso detrás de los logos */
        radial-gradient(ellipse 60% 70% at 76% 50%,
            rgba(var(--bm-green-rgb), .17) 0%,
            transparent 68%),
        /* Suelo centro: aurora azul profunda — el "piso luminoso" */
        radial-gradient(ellipse 110% 60% at 50% 112%,
            rgba(var(--bm-blue-rgb), .42) 0%,
            transparent 62%),
        /* Suelo izq: acento verde cálido */
        radial-gradient(ellipse 50% 40% at 15% 108%,
            rgba(var(--bm-green-rgb), .18) 0%,
            transparent 58%),
        /* Techo centro: azul frío descendente */
        radial-gradient(ellipse 90% 50% at 50% -10%,
            rgba(var(--bm-blue-rgb), .26) 0%,
            transparent 68%),
        /* Techo der: verde eléctrico — "estrella" esquina */
        radial-gradient(ellipse 42% 32% at 82% -6%,
            rgba(var(--bm-green-rgb), .13) 0%,
            transparent 58%);
    pointer-events: none;
    z-index: 0;
}

/* Segunda capa de atmósfera — nebulosa lateral y profundidad */
.lt-s4 .lt-section__inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Nebulosa izquierda — profundidad panel texto */
        radial-gradient(ellipse 45% 60% at 6% 48%,
            rgba(var(--bm-blue-rgb), .20) 0%,
            transparent 68%),
        /* Corazón central — unión visual de los dos paneles */
        radial-gradient(ellipse 65% 45% at 50% 58%,
            rgba(var(--bm-blue-rgb), .10) 0%,
            transparent 78%),
        /* Esquina inferior derecha — contrapeso verde */
        radial-gradient(ellipse 38% 45% at 97% 95%,
            rgba(var(--bm-green-rgb), .13) 0%,
            transparent 62%),
        /* Punto de luz superior izquierda — balance frío */
        radial-gradient(ellipse 30% 30% at 4% 5%,
            rgba(var(--bm-blue-rgb), .10) 0%,
            transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* ── Borde superior luminoso de la sección ── */
.lt-s4::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--bm-blue-rgb), .35) 30%,
        rgba(var(--bm-green-rgb), .25) 50%,
        rgba(var(--bm-blue-rgb), .35) 70%,
        transparent);
    z-index: 10;
    pointer-events: none;
}

/* ══════════════════════════════════════
   LAYOUT — MOBILE FIRST
   Base:   mobile  (< 768px CSS width)
   ≥ 768px: tablet landscape + desktop
   
   Tipografía: clamp() con fórmula lineal
   Anclas: 375px → 1920px
   Spacing: clamp() puro, sin breakpoints de dispositivo
══════════════════════════════════════ */

/* ── Contenedor principal — mobile base: 1 columna ── */
.bm-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    /* padding: top | inline | bottom
       375px → 5rem top / 1.25rem inline / 2.5rem bottom
       768px → 5.5rem top / 2rem inline / 3rem bottom  (fluye con vw) */
    gap: clamp(1.5rem, 3.2vw, 2.5rem);
    padding:
        clamp(5rem, 11vw, 5.5rem)
        clamp(1.25rem, 4vw, 2rem)
        clamp(2.5rem, 5vw, 3rem);
    overflow: hidden;
    z-index: 2;
    align-items: start;
}

/* ── Columna izquierda — mobile: izquierda ── */
.bm-left {
    position: relative;
    z-index: 3;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding-right: 0;
}

/* Línea divisoria — oculta en mobile, visible en desktop */
.bm-left::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background: linear-gradient(to bottom,
        transparent,
        rgba(255,255,255,.06) 20%,
        rgba(var(--bm-green-rgb), .15) 50%,
        rgba(255,255,255,.06) 80%,
        transparent);
    display: none; /* mobile: oculta */
}

.bm-title {
    width: 100%;
    margin-bottom: clamp(1rem, 2.8vw, 2rem);
}

.bm-title h2 {
    font-family: var(--font-display);
    /* 375px → 2.8rem | 1920px → 10rem
       slope: (10 - 2.8) / (1920 - 375) * 100 = 0.4659vw
       intercept: 2.8rem - 0.4659 * 3.75 = 1.053rem */
    font-size: clamp(2.8rem, 1.05rem + 4.66vw, 10rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.0;
    letter-spacing: 0;
    clip-path: inset(-0.25em 0 100% 0);
    will-change: clip-path;
}

.bm-title .accent {
    color: var(--color-green);
}

.bm-copy {
    width: min(100%, 34rem);
    margin-bottom: clamp(1rem, 2.8vw, 2rem);
    overflow: hidden;
}

.bm-copy p {
    font-family: var(--font-body);
    /* 375px → 0.95rem | 1920px → 1.3rem
       slope: (1.3 - 0.95) / (1920 - 375) * 100 = 0.2265vw
       intercept: 0.95rem - 0.2265 * 3.75 = 0.101rem */
    font-size: clamp(.95rem, 0.10rem + 0.23vw, 1.3rem);
    font-weight: 400;
    color: rgba(255,255,255,.5);
    line-height: 1.7;
    clip-path: inset(0 0 100% 0);
    will-change: clip-path;
    max-width: 52ch;
}

/* ── Stat / counter ── */
.bm-stat {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
    opacity: 0;
    padding-top: clamp(.8rem, 2vw, 1.2rem);
    border-top: 1px solid rgba(255,255,255,.08);
    width: 100%;
}

.bm-stat-line {
    position: relative;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg,
        var(--color-green),
        rgba(var(--bm-green-rgb), .08));
    margin-bottom: 1.2rem;
    will-change: width;
    border-radius: 2px;
    min-width: 0;
    max-width: 200px;
    overflow: hidden;
    display: none;
}

.bm-stat-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,.55) 50%,
        transparent 100%);
    transform: translateX(-100%);
    animation: bm-shimmer 2.6s ease-in-out infinite;
    animation-delay: 1.4s;
}

@keyframes bm-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

@keyframes bm-badge-pulse {
    0%, 70%, 100% { transform: scale(1);   opacity: .5; }
    35%            { transform: scale(2.6); opacity: 0;  }
}

.bm-stat-num {
    font-family: var(--font-display);
    /* 375px → 3.5rem | 1920px → 16rem
       slope: (16 - 3.5) / (1920 - 375) * 100 = 0.8091vw
       intercept: 3.5rem - 0.8091 * 3.75 = 0.466rem */
    font-size: clamp(3.5rem, 0.47rem + 8.09vw, 16rem);
    line-height: .85;
    color: var(--color-green);
    letter-spacing: -.02em;
    display: block;
}

.bm-stat-label {
    font-family: var(--font-body);
    /* 375px → 0.65rem | 1920px → 0.85rem — casi estático, pequeño ajuste */
    font-size: clamp(.75rem, 0.71rem + 0.13vw, .9rem);
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255,255,255,.28);
    margin-top: 0;
    display: block;
    text-align: left;
}

/* ── Columna derecha — carruseles ── */
.bm-right {
    position: relative;
    z-index: 2;
    /* mobile: ventana fija — corta el track infinito */
    height: clamp(260px, 55svh, 700px);
    display: flex;
    align-items: stretch;
    justify-content: center;
    opacity: 0;
    clip-path: inset(12% -2px 12% -2px round 0px);
    will-change: opacity, clip-path;
}

/* Halo verde — solo desktop */
.bm-right::before {
    content: '';
    position: absolute;
    inset: -20% -10%;
    background: radial-gradient(ellipse 70% 70% at 50% 50%,
        rgba(var(--bm-green-rgb), .05) 0%,
        transparent 70%);
    pointer-events: none;
    z-index: 0;
    display: none;
}

.bm-right::after { display: none; }

.bm-cols-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(.6rem, 1.5vw, 1.4rem);
    align-items: stretch;
}

/* ── Glows eliminados — fondo y atmósfera en CSS ── */
.bm-glow { display: none; }

/* ── Elementos exclusivos de mobile — ocultos en desktop ── */
.bm-badge        { display: none; }
.bm-ticker-label { display: none; }

/* ── Columnas carrusel ── */
.bm-col {
    position: relative;
    z-index: 1;
    height: 100%;          /* ventana — track absolute desborda aquí */
    overflow: hidden;
    border-radius: clamp(14px, 1.5vw, 22px);
    mask-image: linear-gradient(to bottom,
        transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.bm-col-2 {
    /* offset vertical — col 2 más abajo para ritmo visual */
    margin-top: clamp(1rem, 3vw, 1.8rem);
}

.bm-track {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(.6rem, 1.2vw, 1.1rem);
    will-change: transform;
    user-select: none;
    touch-action: pan-y;
    cursor: grab;
}

.bm-track:active { cursor: grabbing; }

/* Sin hover durante drag */
.bm-track.is-dragging .bm-card:hover {
    transform: none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 4px 24px rgba(0,0,0,.5);
    border-color: rgba(var(--brand-rgb, 255,255,255), .18);
}

.bm-track.is-dragging .bm-card:hover img {
    filter: grayscale(1) brightness(2.2);
    opacity: .7;
}

/* ── Cards — liquid glass con brand color border ── */
.bm-card {
    --brand-rgb: 255, 255, 255;       /* fallback — override en JS */

    width: 100%;
    aspect-ratio: 1.65 / 1;

    /* Glass base */
    background:
        linear-gradient(145deg,
            rgba(255,255,255,.065) 0%,
            rgba(255,255,255,.015) 60%,
            rgba(255,255,255,.035) 100%);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);

    /* Borde: tenue tinte del color de la marca siempre visible */
    border: 1px solid rgba(var(--brand-rgb), .22);
    border-top-color: rgba(var(--brand-rgb), .38);
    border-left-color: rgba(var(--brand-rgb), .28);

    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;

    transition:
        background .32s ease,
        border-color .32s ease,
        border-top-color .32s ease,
        border-left-color .32s ease,
        transform .28s cubic-bezier(.2,.8,.2,1),
        box-shadow .32s ease;

    /* Glow exterior sutil del brand color en reposo */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 1px 0 0 rgba(255,255,255,.05),
        0 0 0 1px rgba(var(--brand-rgb), .08),
        0 4px 20px rgba(0,0,0,.45);
}

/* Reflejo superior glass */
.bm-card::before {
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255,255,255,.20),
        transparent);
    pointer-events: none;
}

/* Fresnel inferior — reflejo de borde inferior tipo cristal */
.bm-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--brand-rgb), .12),
        transparent);
    pointer-events: none;
    transition: background .32s ease;
}

/* Hover — relleno sólido del color de la marca, logo a color completo */
.bm-card:hover {
    background: rgb(var(--brand-rgb));
    border-color: rgb(var(--brand-rgb));
    border-top-color: rgb(var(--brand-rgb));
    border-left-color: rgb(var(--brand-rgb));
    transform: scale(1.025) translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        0 0 0 1px rgba(var(--brand-rgb), .5),
        0 0 36px rgba(var(--brand-rgb), .35),
        0 8px 32px rgba(0,0,0,.5);
}

.bm-card:hover::after {
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--brand-rgb), .35),
        transparent);
}

/* ── Imágenes ── */
.bm-card img {
    width: 65%;
    height: 65%;
    object-fit: contain;
    pointer-events: none;
    display: block;
    filter: grayscale(1) brightness(2.2);
    opacity: .72;
    transition: filter .32s ease, opacity .32s ease;
    position: relative;
    z-index: 1;
}

.bm-card:hover img {
    filter: grayscale(0) brightness(1);
    opacity: 1;
}

/* Ajustes de tamaño por logo */
.bm-card[data-brand="jabra"] img,
.bm-card[data-brand="lenovo"] img,
.bm-card[data-brand="microsoft"] img,
.bm-card[data-brand="samsung"] img,
.bm-card[data-brand="intel"] img,
.bm-card[data-brand="lg"] img,
.bm-card[data-brand="logitech"] img,
.bm-card[data-brand="epson"] img   { width: 48%; height: 48%; }

.bm-card[data-brand="dell"] img,
.bm-card[data-brand="hp"] img      { width: 78%; height: 78%; }

.bm-card[data-brand="brother"] img,
.bm-card[data-brand="xerox"] img   { width: 52%; height: 52%; }

.bm-card[data-brand="quinyx"] img,
.bm-card[data-brand="ricoh"] img {
    filter: brightness(0) invert(1);
    opacity: .72;
    width: 78%; height: 78%;
}

.bm-card[data-brand="screenbeam"] img,
.bm-card[data-brand="kodak-alaris"] img {
    filter: brightness(0) invert(1);
    opacity: .72;
    width: 88%; height: 88%;
}

.bm-card[data-brand="quinyx"]:hover img,
.bm-card[data-brand="ricoh"]:hover img,
.bm-card[data-brand="screenbeam"]:hover img,
.bm-card[data-brand="kodak-alaris"]:hover img {
    filter: brightness(0) invert(1);
    opacity: 1;
}

.bm-card-label { display: none; }

.bm-card--placeholder {
    pointer-events: none;
    opacity: .12;
    border-color: rgba(255,255,255,.08);
    border-top-color: rgba(255,255,255,.08);
    border-left-color: rgba(255,255,255,.08);
    box-shadow: none;
}

/* ══════════════════════════════════════
   RESPONSIVE — 2 BREAKPOINTS
   
   Base (mobile-first): todo lo de arriba
   ≥ 768px: tablet landscape + desktop 2 col
   
   Tipografía: clamp() con fórmula lineal
   Sin max-height, sin rangos de dispositivo.
   El clamp() maneja todos los tamaños intermedios.
══════════════════════════════════════ */

/* ── Sin hover en dispositivos touch ── */
@media (hover: none) {
    .bm-card:hover {
        transform: none;
        background:
            linear-gradient(145deg,
                rgba(255,255,255,.065) 0%,
                rgba(255,255,255,.015) 60%,
                rgba(255,255,255,.035) 100%);
        border-color: rgba(var(--brand-rgb), .22);
        border-top-color: rgba(var(--brand-rgb), .38);
        border-left-color: rgba(var(--brand-rgb), .28);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.10),
            0 0 0 1px rgba(var(--brand-rgb), .12),
            0 4px 16px rgba(0,0,0,.35);
    }
    .bm-card:hover img {
        filter: grayscale(1) brightness(2.2);
        opacity: .72;
    }
    .bm-card[data-brand="quinyx"]:hover img,
    .bm-card[data-brand="ricoh"]:hover img,
    .bm-card[data-brand="screenbeam"]:hover img,
    .bm-card[data-brand="kodak-alaris"]:hover img {
        filter: brightness(0) invert(1);
        opacity: .72;
    }
    /* Logos a color completo en touch */
    .bm-card img {
        filter: grayscale(0) brightness(1) !important;
        opacity: 1 !important;
    }
    .bm-card[data-brand="quinyx"] img,
    .bm-card[data-brand="ricoh"] img,
    .bm-card[data-brand="screenbeam"] img,
    .bm-card[data-brand="kodak-alaris"] img {
        filter: brightness(0) invert(1) !important;
        opacity: 1 !important;
    }
}

/* ══════════════════════════════════════
   ≥ 768px landscape — Tablet landscape + Desktop
   Layout: 2 columnas
   Carruseles: verticales con pin scroll

   orientation:landscape excluye tablets portrait
   (iPad Mini 768x1024, iPad Air 820x1180, iPad Pro 1024x1366)
   — esos quedan en 1 columna del base mobile-first.

   core.css controla position/inset del __inner —
   NO sobreescribir aqui.
══════════════════════════════════════ */
@media (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) {

    /* ── Wrap: 2 columnas, padding fluido 768→1920 ── */
    .bm-wrap {
        grid-template-columns: minmax(0, 44%) minmax(0, 56%);
        grid-template-rows: 1fr;
        height: 100%;
        align-items: center;
        padding:
            clamp(2rem, 2.8vw, 3rem)
            clamp(3rem, 5.5vw, 6rem);
        gap: clamp(1.5rem, 3vw, 3rem);
        overflow: hidden;
    }

    /* ── Columna izq: alineada izquierda ── */
    .bm-left {
        height: 100%;
        align-items: flex-start;
        justify-content: center;
        text-align: left;
        padding-right: clamp(.5rem, 1vw, 1.5rem);
    }

    .bm-left::after {
        display: block;
    }

    /* ── Título: line-height comprimido desktop ── */
    .bm-title h2 {
        line-height: .9;
        letter-spacing: -.01em;
    }

    /* ── Stat: columna vertical desktop ── */
    .bm-stat {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
    }

    .bm-stat-line {
        display: block;
    }

    .bm-stat-label {
        margin-top: .5rem;
    }

    /* ── Columna derecha: full height ── */
    .bm-right {
        height: 100%;
        align-items: center;
    }

    .bm-right::before {
        display: block;
    }

    .bm-cols-wrap {
        align-items: center;
    }

    /* ── Col: % de altura — el inner tiene altura fija por pin ── */
    .bm-col {
        height: 88%;
        border-radius: 22px;
        margin-top: 0;
        mask-image: linear-gradient(to bottom,
            transparent 0%, #000 10%, #000 90%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom,
            transparent 0%, #000 10%, #000 90%, transparent 100%);
    }

    .bm-col-2 {
        margin-top: 0;
        transform: none;
    }

    /* ── Grupos: row — scrollbar como hermano del col ── */
    .bm-col-group {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        height: 100%;
        gap: 16px;
    }

    .bm-col-group:last-child {
        transform: translateY(clamp(1.5rem, 4vh, 3.5rem));
    }

    .bm-col-group .bm-col {
        flex: 1;
        min-width: 0;
        height: 100%;
    }

    /* ── Scrollbar glass — fuera del col, sin superposición ── */
    .bm-scrollbar {
        flex-shrink: 0;
        align-self: center;
        width: 10px;
        height: 80%;
        position: relative;
        background: rgba(255,255,255,.11);
        border: 1px solid rgba(255,255,255,.16);
        border-radius: 6px;
        cursor: pointer;
        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.04),
            0 0 10px rgba(0,0,0,.25);
    }

    .bm-scrollbar__thumb {
        position: absolute;
        left: 1px;
        right: 1px;
        height: 52px;
        background: linear-gradient(180deg,
            rgba(57, 181, 74, .70) 0%,
            rgba(57, 181, 74, .38) 100%);
        border: 1px solid rgba(57, 181, 74, .55);
        border-radius: 5px;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        box-shadow:
            0 0 10px rgba(57, 181, 74, .25),
            inset 0 1px 0 rgba(255, 255, 255, .22);
        cursor: grab;
        will-change: transform;
        transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
    }

    .bm-scrollbar__thumb:hover {
        background: linear-gradient(180deg,
            rgba(57, 181, 74, .88) 0%,
            rgba(57, 181, 74, .55) 100%);
        border-color: rgba(57, 181, 74, .75);
        box-shadow:
            0 0 16px rgba(57, 181, 74, .38),
            inset 0 1px 0 rgba(255, 255, 255, .28);
    }

    .bm-scrollbar__thumb.is-dragging {
        cursor: grabbing;
        background: linear-gradient(180deg,
            rgba(57, 181, 74, .95) 0%,
            rgba(57, 181, 74, .65) 100%);
        border-color: rgba(57, 181, 74, .90);
        box-shadow:
            0 0 22px rgba(57, 181, 74, .48),
            inset 0 1px 0 rgba(255, 255, 255, .32);
        transition: none;
    }

    .bm-track {
        gap: clamp(.85rem, 1.2vw, 1.1rem);
        cursor: grab;
    }

    /* ── Cards: vuelven a aspect-ratio ── */
    .bm-card {
        width: 100%;
        height: auto;
        aspect-ratio: 1.65 / 1;
        flex-shrink: 0;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.10),
            inset 1px 0 0 rgba(255,255,255,.05),
            0 0 0 1px rgba(var(--brand-rgb), .08),
            0 4px 20px rgba(0,0,0,.45);
    }
}

/* ══════════════════════════════════════
   NON-DESKTOP — SISTEMA DE TICKER HORIZONTAL
   Base: phone portrait. Dos filas de marquee
   infinito (fila 1 → izquierda, fila 2 → derecha).
   El JS llama setupHorizontalCarousel en mobile.
   Landscape tablets/phones: texto izq + tickers der.
══════════════════════════════════════ */
@media not all and (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) {
    /* ── flow fix — sin altura fija en mobile ── */
    .lt-s4 { height: auto; min-height: 0; }
    .lt-s4 .lt-section__inner {
        position: relative !important;
        inset: auto !important;
        height: auto !important;
        min-height: 0 !important;
        background: transparent;
    }
    /* Aurora apagada en mobile */
    .lt-s4 .lt-section__inner::before { opacity: 0; }
    .lt-s4 .lt-section__inner::after { display: none; }
    .lt-s4::before { display: none; }

    /* ── Wrap: 1 col portrait, sin padding lateral — lo da bm-left ── */
    .bm-wrap {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
        align-items: start;
        padding:
            clamp(4.5rem, 10vw, 5.5rem)
            0
            clamp(3rem, 6vw, 4.5rem);
        gap: clamp(1.8rem, 4.5vw, 3rem);
    }

    /* ── Texto: centrado en mobile, padding lateral para tickers ── */
    .bm-left {
        height: auto;
        padding: 0 clamp(1.25rem, 5vw, 2rem);
        padding-right: clamp(1.25rem, 5vw, 2rem);
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .bm-left::after { display: none; }

    /* ── Badge pill ── */
    .bm-badge {
        display: flex;
        align-self: center;
        align-items: center;
        gap: .45rem;
        font-family: var(--font-body);
        font-size: clamp(.75rem, 1.8vw, .82rem);
        font-weight: 600;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--color-green);
        margin-bottom: clamp(.65rem, 1.8vw, .9rem);
        opacity: 0;
        will-change: opacity;
    }
    .bm-badge__dot {
        width: 5px; height: 5px;
        background: var(--color-green);
        border-radius: 50%;
        flex-shrink: 0;
        position: relative;
    }
    .bm-badge__dot::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: var(--color-green);
        animation: bm-badge-pulse 2.4s ease-in-out infinite;
    }

    /* ── Tipografía ── */
    .bm-title h2   { font-size: clamp(3rem, 11vw, 5rem); line-height: 1.0; letter-spacing: -.01em; text-align: center; }
    .bm-copy       { width: 100%; }
    .bm-copy p     { font-size: clamp(.86rem, 2.6vw, 1rem); text-align: center; text-wrap: balance; max-width: 100%; margin-inline: auto; }

    /* ── Stat: glass card horizontal ── */
    .bm-stat {
        flex-direction: row;
        align-items: center;
        gap: 0;
        width: fit-content;
        align-self: center;
        margin-inline: auto;
        padding: .72rem 1.1rem;
        padding-top: .72rem;
        border-top: none;
        border: 1px solid rgba(57, 181, 74, .22);
        border-radius: 14px;
        background:
            linear-gradient(135deg,
                rgba(57, 181, 74, .07) 0%,
                rgba(255, 255, 255, .03) 100%);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .07),
            0 4px 20px rgba(0, 0, 0, .3);
    }
    .bm-stat-num {
        font-size: clamp(2.4rem, 8vw, 3.8rem);
        line-height: 1;
        text-shadow: none;
        padding-right: .9rem;
        border-right: 1px solid rgba(255, 255, 255, .1);
    }
    .bm-stat-label {
        font-size: clamp(.75rem, 1.8vw, .82rem);
        margin-top: 0;
        padding-left: .9rem;
        max-width: 9ch;
        line-height: 1.35;
        letter-spacing: .12em;
        color: rgba(255, 255, 255, .38);
    }

    /* ── Panel de logos: dos filas de ticker horizontal ── */
    .bm-right {
        height: auto;
        clip-path: none;
        opacity: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: clamp(.55rem, 1.5vw, .9rem);
        border-top: none;
        padding-top: 0;
    }

    /* ── Ticker label — divisor visual antes de los carruseles ── */
    .bm-ticker-label {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: 0 clamp(1.25rem, 5vw, 2rem);
        margin-bottom: clamp(.15rem, .8vw, .3rem);
    }
    .bm-ticker-label__line {
        flex: 1;
        height: 1px;
        background: rgba(57, 181, 74, .15);
    }
    .bm-ticker-label__text {
        font-family: var(--font-body);
        font-size: clamp(.75rem, 1.6vw, .8rem);
        font-weight: 600;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .18);
        white-space: nowrap;
    }

    /* ── Wrap de filas: columna vertical ── */
    .bm-cols-wrap {
        display: flex;
        flex-direction: column;
        gap: clamp(.55rem, 1.5vw, .9rem);
        width: 100%;
        align-items: stretch;
    }

    /* ── Cada grupo de fila ── */
    .bm-col-group { display: block; height: auto; }

    /* ── Ventana del ticker — mask horizontal ── */
    .bm-col {
        width: 100%;
        height: clamp(90px, 23vw, 126px);
        border-radius: clamp(10px, 1.8vw, 16px);
        margin-top: 0 !important;
        mask-image: linear-gradient(to right,
            transparent 0%, #000 7%, #000 93%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right,
            transparent 0%, #000 7%, #000 93%, transparent 100%);
    }

    /* ── Track: horizontal ── */
    .bm-track {
        position: absolute;
        top: 0; left: 0;
        flex-direction: row;
        height: 100%;
        gap: clamp(.55rem, 1.5vw, .9rem);
        width: max-content;
        cursor: grab;
    }
    .bm-track:active { cursor: grabbing; }

    /* ── Cards del ticker: width fija, fill height del col ── */
    .bm-card {
        height: 100%;
        width: auto;
        aspect-ratio: 1.65 / 1;
        flex-shrink: 0;
    }

    /* ── Scrollbars: no se crean en horizontal, por seguridad ocultar ── */
    .bm-scrollbar { display: none !important; }
}

/* ── Phone landscape: ≤499px alto ──
   Solo compresión — misma estructura que tablet landscape. */
@media (orientation: landscape) and (max-height: 499px) {
    .bm-wrap {
        padding: clamp(1.2rem, 3vw, 2rem) 0 clamp(1rem, 2.5vw, 1.5rem);
        gap: clamp(.8rem, 2vw, 1.4rem);
    }
    .bm-title h2   { font-size: clamp(2.2rem, 5.5vw, 4rem); }
    .bm-copy p     { font-size: clamp(.75rem, 1.8vw, .88rem); line-height: 1.4; }
    .bm-stat-num   { font-size: clamp(1.8rem, 4.5vw, 2.6rem); text-shadow: none; }
    .bm-stat-label { font-size: clamp(.75rem, 1.5vw, .88rem); }
    .bm-col        { height: clamp(90px, 22vh, 112px); }
}