/* ===================================================================
   BQB Landing — Design System (restyle)
   Stack: Odoo 15 (QWeb + CSS vanilla). Principios high-end / anti-slop.
   - Colores dinamicos por productor via --primary-bqb* (inyectados aparte)
   - Tipografia: Space Grotesk (display) + Plus Jakarta Sans (texto)
   - GPU-safe (solo transform/opacity), backdrop-filter solo en fixed/sticky
   - Hooks preservados: .bqb-snippet-*, .slider-info-div, #choose-us, #us,
     #join-us, #services, #companies-logos, .bqb-floating-buttons, etc.
   =================================================================== */

:root {
    /* Base neutrales */
    --light1: #FFFFFF;
    --light2: #FAFAFA;
    --dark1: #1d2733;
    --danger-bqb: #e23744;
    --success-bqb: #1faa55;

    /* Tipografia */
    --bqb-font-display: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
    --bqb-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Escala tipografica fluida */
    --bqb-fs-display: clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem);
    --bqb-fs-h1: clamp(1.8rem, 1.2rem + 2.6vw, 2.9rem);
    --bqb-fs-h2: clamp(1.45rem, 1.05rem + 1.7vw, 2.15rem);
    --bqb-fs-h3: clamp(1.15rem, 0.98rem + 0.8vw, 1.4rem);
    --bqb-fs-lead: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
    --bqb-fs-body: 1rem;
    --bqb-fs-sm: 0.875rem;

    /* Espaciado / ritmo */
    --bqb-section-y: clamp(3rem, 2rem + 4vw, 6rem);
    --bqb-gap: clamp(1rem, 0.7rem + 1vw, 1.75rem);

    /* Radios concentricos (shape-lock) */
    --bqb-r-xs: 10px;
    --bqb-r-sm: 14px;
    --bqb-r-md: 20px;
    --bqb-r-lg: 28px;
    --bqb-r-xl: 36px;
    --bqb-r-pill: 999px;

    /* Superficies / bordes */
    --bqb-surface: #ffffff;
    --bqb-surface-2: #f4f7fb;
    --bqb-ink: #1d2733;
    --bqb-ink-soft: #54657a;
    --bqb-border: rgba(20, 45, 70, 0.10);
    --bqb-border-strong: rgba(20, 45, 70, 0.16);

    /* Sombras tintadas al fondo (azuladas, no negras puras) */
    --bqb-shadow-sm: 0 1px 2px rgba(15, 45, 68, 0.06), 0 2px 6px rgba(15, 45, 68, 0.06);
    --bqb-shadow-md: 0 6px 16px rgba(15, 45, 68, 0.10), 0 2px 6px rgba(15, 45, 68, 0.06);
    --bqb-shadow-lg: 0 18px 40px rgba(15, 45, 68, 0.14), 0 6px 14px rgba(15, 45, 68, 0.08);
    --bqb-shadow-cta: 0 8px 22px rgba(27, 136, 194, 0.30);

    /* Tokens heredados (compat formularios/claims) */
    --bqb-text-on-dark: rgba(255, 255, 255, 0.96);
    --bqb-scrim-strong: linear-gradient(
        100deg,
        rgba(8, 30, 48, 0.78) 0%,
        rgba(8, 30, 48, 0.46) 40%,
        rgba(8, 30, 48, 0.12) 70%,
        transparent 100%
    );
    --bqb-scrim-bottom: linear-gradient(
        to top,
        rgba(6, 26, 42, 0.82) 0%,
        rgba(6, 26, 42, 0.30) 38%,
        transparent 70%
    );
    --bqb-glass-bg: rgba(255, 255, 255, 0.14);
    --bqb-glass-border: rgba(255, 255, 255, 0.32);
    --bqb-glass-blur: blur(14px) saturate(140%);
    --bqb-shadow-float: 0 -6px 28px rgba(15, 45, 68, 0.20);
}

/* ============================================= */
/* GLOBAL                                        */
/* ============================================= */
.bqb-landing-main,
.bqb-producer-landing,
.bqb-producer-claims,
.bqb-claims-page {
    font-family: var(--bqb-font-body);
    color: var(--bqb-ink);
    word-wrap: break-word;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html:has(.bqb-landing-main),
html:has(.bqb-producer-landing),
html:has(.bqb-claims-hero) {
    overflow-x: clip;
    max-width: 100%;
}

body:has(.bqb-landing-main),
body:has(.bqb-producer-landing),
body:has(.bqb-claims-hero),
#wrapwrap:has(.bqb-landing-main),
#wrapwrap:has(.bqb-producer-landing),
#wrapwrap:has(.bqb-claims-hero) {
    overflow-x: clip;
    max-width: 100%;
}

.bqb-landing-main p,
.bqb-producer-landing p {
    font-size: var(--bqb-fs-body);
    line-height: 1.65;
    color: var(--bqb-ink-soft);
}

@media (max-width: 1199px) {
    .bqb-landing-main,
    .bqb-producer-landing {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    }
}

.bqb-landing-main h1,
.bqb-landing-main h2,
.bqb-landing-main h3,
.bqb-landing-main h4,
.bqb-landing-main h5,
.bqb-landing-main h6,
.bqb-producer-landing h1,
.bqb-producer-landing h2,
.bqb-producer-landing h3,
.bqb-producer-landing h4,
.bqb-producer-landing h5,
.bqb-producer-landing h6 {
    font-family: var(--bqb-font-display);
    color: var(--primary-bqb);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Eyebrow / kicker reutilizable */
.bqb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5ch;
    font-family: var(--bqb-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary-bqb);
    margin-bottom: 0.75rem;
}

.bqb-section-title {
    font-size: var(--bqb-fs-h2);
    margin-bottom: 0.5rem;
}

.bqb-section-lead {
    font-size: var(--bqb-fs-lead);
    color: var(--bqb-ink-soft);
    max-width: 60ch;
}

.bqb-header-logo {
    height: 40px;
    max-height: 40px;
}

.bqb-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ============================================= */
/* PRODUCTS (tabs + scrollable cards)            */
/* ============================================= */
/* ================================================================
   SECTION — fondo dinámico: gradiente neutro → imagen/color por categoría
   al hover de cualquier card, la capa de fondo se revela (opacity).
   Usa CSS :has() (Chrome 105+, Safari 15.4+, Firefox 121+).
   ================================================================ */
/* Banda multimedia: contenedor único con UN solo video de fondo
   que se extiende detrás de Productos + Redes (y el nav transparente). */
.bqb-media-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #061a2e;        /* fallback hasta que carga el video */
}

.bqb-snippet-products {
    position: relative;
    z-index: 1;                 /* contenido por encima del video de la banda */
    overflow: hidden;
    padding: 2.5rem 0 2.5rem;  /* altura compacta y fija — no usa --bqb-section-y */
    background: transparent;    /* el fondo lo aporta el video único de la banda */
}

/* Gradiente de categoría — siempre visible */
.bqb-prod-bg {
    position: absolute;
    inset: 0;
    background: var(--prod-bg,
        linear-gradient(140deg, #0b2e4d 0%, #061a2e 100%)
    );
    opacity: 0.48;              /* menos opaco — deja ver más el video de fondo */
    transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
                background 520ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 0;
}

/* Video de fondo — visible pero sin competir con el texto.
   Se usan DOS capas apiladas para hacer crossfade sin exponer el gradiente:
   la capa .bqb-prod-video--active es la visible, la otra queda en opacity 0
   precargando el próximo video. */
.bqb-prod-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;                 /* la capa visible se controla con --active */
    pointer-events: none;
    z-index: 0;
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity;
}
.bqb-prod-video.bqb-prod-video--active {
    opacity: 0.68;              /* más visible ahora que el gradiente es menos opaco */
}

/* Container sobre las capas de fondo */
.bqb-snippet-products .container {
    position: relative;
    z-index: 1;
}

/* ── Bloque de texto fijo: siempre la misma altura sin importar el texto ── */
.bqb-prod-header {
    /* Tamaño FIJO — nunca cambia entre categorías */
    height: 10.5rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(215, 228, 241, 0.65);
    border-radius: var(--bqb-r-md);
    padding: 0.75rem 1.25rem 0.75rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Texto — blanco con sombra para legibilidad sobre video */
.bqb-prod-section-title {
    font-family: var(--bqb-font-display);
    font-size: clamp(1.2rem, 1rem + 1.2vw, 1.7rem);
    font-weight: 800;
    text-align: center;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 auto 0.35rem;
    max-width: 600px;
    height: 2.4rem;
    line-height: 2.4rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: none;
    transition: opacity 200ms ease;
}

.bqb-prod-section-lead {
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(0.88rem, 0.82rem + 0.3vw, 1rem);
    margin: 0 auto 0;
    max-width: 520px;
    height: 3.4rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.65;
    transition: opacity 200ms ease;
}

.bqb-snippet-products .bqb-eyebrow {
    color: rgba(255, 255, 255, 0.72);
    border: none;               /* sin borde — queda más limpio sobre el fondo oscuro */
    background: rgba(255, 255, 255, 0.10);
    padding: 0.2rem 0.75rem;
    border-radius: var(--bqb-r-pill);
    text-shadow: none;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    margin-bottom: 0.4rem;
}

/* Transición animada del texto en cambios de tab (clase añadida via JS) */
.bqb-prod-section-title.bqb-prod-text--fade,
.bqb-prod-section-lead.bqb-prod-text--fade {
    opacity: 0;
}

/* --- Tabs --- */
.bqb-prod-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.bqb-prod-tab {
    font-family: var(--bqb-font-body);
    font-weight: 700;
    font-size: 0.88rem;
    padding: 0.5rem 1.25rem;
    border-radius: var(--bqb-r-pill);
    border: 2px solid rgba(255, 255, 255, 0.32);
    background: transparent;
    color: rgba(255, 255, 255, 0.80);    /* siempre sobre oscuro */
    cursor: pointer;
    transition:
        background     200ms cubic-bezier(0.2, 0, 0, 1),
        color          200ms cubic-bezier(0.2, 0, 0, 1),
        border-color   200ms cubic-bezier(0.2, 0, 0, 1),
        transform      160ms cubic-bezier(0.2, 0, 0, 1);
}
.bqb-prod-tab:hover {
    border-color: rgba(255, 255, 255, 0.60);
    color: #ffffff;
}

.bqb-prod-tab[aria-selected="true"],
.bqb-prod-tab.active {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.60) !important;
    color: #ffffff !important;
}

.bqb-prod-tab:hover:not([aria-selected="true"]):not(.active) {
    background: var(--primary-bqb-subtle, rgba(27, 136, 194, 0.1));
    transform: translateY(-1px);
}

/* --- Track: centrado por defecto, scroll cuando no alcanza el ancho --- */
.bqb-prod-track-wrap {
    position: relative;
    height: 152px;
    overflow: hidden;
    min-width: 0;               /* no expandirse al ancho de todas las cards */
    /* Máscara solo visible cuando hay overflow (clase .bqb-track-overflow añadida por JS) */
}
/* Con overflow: flex-start permite scroll desde el inicio — justify-content: center
   oculta el contenido a la izquierda del borde haciéndolo inaccesible.
   La máscara de fade se aplica al track (no al wrap) para no desvanecer las flechas. */
.bqb-prod-track-wrap.bqb-track-overflow .bqb-prod-track {
    justify-content: flex-start;
    /* Máscara más suave y con mayor zona opaca para no recortar cards */
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%, black 5%, black 95%, transparent 100%);
    mask-image: linear-gradient(to right,
        transparent 0%, black 5%, black 95%, transparent 100%);
}

.bqb-prod-panel { display: none; min-width: 0; }   /* min-width:0 = se ajusta a la columna del grid, el track scrollea adentro */
.bqb-prod-panel.active {
    display: block;
    perspective: 900px;
    perspective-origin: center center;
}

.bqb-prod-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;        /* centradas cuando hay pocas cards; con overflow se alinean a la izquierda (ver .bqb-track-overflow) */
    gap: 0.65rem;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* padding lateral: deja aire para el glow del hover sin alejar demasiado de los tabs */
    padding: 4px 1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bqb-prod-track::-webkit-scrollbar { display: none; }

/* --- Flechas de navegación del track (solo desktop con overflow) --- */
.bqb-prod-arrow {
    display: none;              /* visibles solo en desktop con overflow */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(8, 28, 48, 0.55);
    color: #ffffff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    transition:
        background   200ms cubic-bezier(0.2, 0, 0, 1),
        border-color 200ms cubic-bezier(0.2, 0, 0, 1),
        opacity      200ms cubic-bezier(0.2, 0, 0, 1),
        transform    160ms cubic-bezier(0.2, 0, 0, 1);
}
.bqb-prod-arrow--prev { left: 2px; }
.bqb-prod-arrow--next { right: 2px; }

.bqb-prod-arrow svg { display: block; }

.bqb-prod-arrow:hover {
    background: rgba(8, 28, 48, 0.78);
    border-color: rgba(255, 255, 255, 0.55);
    transform: translateY(-50%) scale(1.06);
}
.bqb-prod-arrow:active {
    transform: translateY(-50%) scale(0.94);
}
.bqb-prod-arrow:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.bqb-prod-arrow--disabled {
    opacity: 0;
    pointer-events: none;
}

/* Mostrar flechas solo en desktop y cuando el track desborda */
@media (min-width: 992px) {
    .bqb-prod-track-wrap.bqb-track-overflow .bqb-prod-arrow {
        display: inline-flex;
    }
}

/* En la landing del PAS el grid de 2 columnas arranca en 576px, así que
   mostramos las flechas desde ahí para que el scroll de Empresas/Profesionales
   sea descubrible también en tablet. */
@media (min-width: 576px) {
    .bqb-producer-band .bqb-prod-track-wrap.bqb-track-overflow .bqb-prod-arrow {
        display: inline-flex;
    }
}

/* ==========================================================
   PRODUCT CARDS — diseño premium de seguros
   Principios aplicados: Impeccable + UI/UX Pro Max
   - Sin border-stripe (absolute ban de Impeccable)
   - Sin glassmorphism decorativo (el fondo es sólido propositivo)
   - Grid variado: card featured distinta de las estándar
   - Acento expresado en badge, label y glow; nunca como franja
   - Easing: cubic-bezier(0.16,1,0.3,1) — ease-out expo para deals
   - Shimmer solo en hover (significa interactividad, no decoración)
   - cursor: pointer en todos los elementos clickeables (ui-ux check)
   ========================================================== */

/* Tono de sección — botones claros sobre fondo de página claro.
   Fondo = tinte muy suave del color de sección.
   Texto = versión oscura del mismo hue para contraste AA.
   Featured = fondo con el acento saturado + texto oscuro. */

/* ================================================================
   PALETA COHESIVA BQB — Familia azul profesional
   ----------------------------------------------------------------
   Principio: todos los acentos comparten L≈0.50, C≈0.16,
   variando solo el hue dentro del arco 185°-260° (frío-profesional).
   Las superficies son tintes muy sutiles del mismo hue (alta L, baja C).
   Así, aunque cada categoría tiene identidad propia, la sección
   completa luce como un sistema de diseño unificado.

   Primario BQB  →  oklch(0.50 0.17 222)  [Movilidad = base brand]
   Secundario BQB →  oklch(0.50 0.14 200)  [Hogar    = teal adjacent]
   Productores personalizan su acento dentro de este arco 185°-260°.
   ================================================================ */

/* Movilidad — Azul BQB primario (222°) */
#bqb-panel-movilidad .bqb-prod-card, #bqb-p-movilidad .bqb-prod-card {
    --card-surface-a: oklch(1 0 0 / 0.10);
    --card-surface-b: oklch(1 0 0 / 0.05);
    --card-border:    oklch(1 0 0 / 0.16);
    --card-text:      #ffffff;
    --card-accent:    oklch(0.55 0.18 222);
    --card-accent-soft: oklch(0.55 0.18 222 / 0.22);
    --card-glow:      oklch(0.55 0.18 222 / 0.28);
}
#bqb-tab-movilidad[aria-selected="true"], #bqb-tab-movilidad.active,
#bqb-t-movilidad[aria-selected="true"], #bqb-t-movilidad.active {
    background: oklch(0.50 0.17 222) !important;
    border-color: oklch(0.50 0.17 222) !important;
}

/* Hogar y Bienes — Teal cielo (200°) */
#bqb-panel-hogar .bqb-prod-card, #bqb-p-hogar .bqb-prod-card {
    --card-surface-a: oklch(1 0 0 / 0.10);
    --card-surface-b: oklch(1 0 0 / 0.05);
    --card-border:    oklch(1 0 0 / 0.16);
    --card-text:      #ffffff;
    --card-accent:    oklch(0.52 0.15 200);
    --card-accent-soft: oklch(0.52 0.15 200 / 0.22);
    --card-glow:      oklch(0.52 0.15 200 / 0.28);
}
#bqb-tab-hogar[aria-selected="true"], #bqb-tab-hogar.active,
#bqb-t-hogar[aria-selected="true"], #bqb-t-hogar.active {
    background: oklch(0.50 0.14 200) !important;
    border-color: oklch(0.50 0.14 200) !important;
}

/* Profesionales — Índigo slate (248°) */
#bqb-panel-profesionales .bqb-prod-card, #bqb-p-profesionales .bqb-prod-card {
    --card-surface-a: oklch(1 0 0 / 0.10);
    --card-surface-b: oklch(1 0 0 / 0.05);
    --card-border:    oklch(1 0 0 / 0.16);
    --card-text:      #ffffff;
    --card-accent:    oklch(0.53 0.17 248);
    --card-accent-soft: oklch(0.53 0.17 248 / 0.22);
    --card-glow:      oklch(0.53 0.17 248 / 0.28);
}
#bqb-tab-profesionales[aria-selected="true"], #bqb-tab-profesionales.active,
#bqb-t-profesionales[aria-selected="true"], #bqb-t-profesionales.active {
    background: oklch(0.50 0.16 248) !important;
    border-color: oklch(0.50 0.16 248) !important;
}

/* Empresas e Industrias — Marino corporativo (236°) */
#bqb-panel-empresas .bqb-prod-card, #bqb-p-empresas .bqb-prod-card {
    --card-surface-a: oklch(1 0 0 / 0.10);
    --card-surface-b: oklch(1 0 0 / 0.05);
    --card-border:    oklch(1 0 0 / 0.16);
    --card-text:      #ffffff;
    --card-accent:    oklch(0.53 0.18 236);
    --card-accent-soft: oklch(0.53 0.18 236 / 0.22);
    --card-glow:      oklch(0.53 0.18 236 / 0.28);
}
#bqb-tab-empresas[aria-selected="true"], #bqb-tab-empresas.active,
#bqb-t-empresas[aria-selected="true"], #bqb-t-empresas.active {
    background: oklch(0.50 0.17 236) !important;
    border-color: oklch(0.50 0.17 236) !important;
}

/* Especialidades — Teal profundo (185°) */
#bqb-panel-especialidades .bqb-prod-card, #bqb-p-especialidades .bqb-prod-card {
    --card-surface-a: oklch(1 0 0 / 0.10);
    --card-surface-b: oklch(1 0 0 / 0.05);
    --card-border:    oklch(1 0 0 / 0.16);
    --card-text:      #ffffff;
    --card-accent:    oklch(0.50 0.14 185);
    --card-accent-soft: oklch(0.50 0.14 185 / 0.22);
    --card-glow:      oklch(0.50 0.14 185 / 0.28);
}
#bqb-tab-especialidades[aria-selected="true"], #bqb-tab-especialidades.active,
#bqb-t-especialidades[aria-selected="true"], #bqb-t-especialidades.active {
    background: oklch(0.50 0.13 185) !important;
    border-color: oklch(0.50 0.13 185) !important;
}

/* --- Card como pill-button horizontal: icono + nombre, click directo a WhatsApp --- */

/* Label, benefit, chips y CTA desactivados en este layout */
.bqb-prod-label,
.bqb-prod-benefit,
.bqb-prod-chips,
.bqb-prod-cta { display: none !important; }

/* Button base — cuadrado tipo app-icon: icono arriba, nombre abajo */
.bqb-prod-card {
    flex: 0 0 108px;
    width: 108px;
    height: 108px;
    scroll-snap-align: center;   /* snap centrado = efecto selector */
    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.2rem;

    background: linear-gradient(
        145deg,
        var(--card-surface-a, oklch(1 0 0 / 0.10)) 0%,
        var(--card-surface-b, oklch(1 0 0 / 0.05)) 100%
    );
    border: 1px solid var(--card-border, oklch(1 0 0 / 0.16));
    border-radius: 16px;
    padding: 0.3rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    text-decoration: none !important;
    color: var(--card-text, #ffffff) !important;
    text-align: center;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 2px 10px rgba(0, 0, 0, 0.18);

    opacity: 0;
    transform: translateX(16px) scale(0.93);
    transition:
        opacity      300ms cubic-bezier(0.16, 1, 0.3, 1),
        transform    320ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow   200ms ease,
        background   200ms ease,
        color        200ms ease,
        border-color 200ms ease;
    transition-delay: calc(var(--bqb-card-idx, 0) * 40ms);
}

/* Visible */
.bqb-prod-card.bqb-prod-card--in {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* Seleccionada — tinte suave + borde acento (sin relleno sólido) */
.bqb-prod-card--selected {
    background: linear-gradient(
        145deg,
        var(--card-accent-soft, oklch(0.55 0.18 222 / 0.22)) 0%,
        var(--card-surface-b, oklch(1 0 0 / 0.05)) 100%
    ) !important;
    border-color: var(--card-accent, oklch(0.60 0.18 220)) !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 4px 14px rgba(0, 0, 0, 0.22),
        0 0 0 2px var(--card-glow, oklch(0.60 0.18 220 / 0.28));
    transition-delay: 0ms;
}
.bqb-prod-card--selected .bqb-prod-name { color: #ffffff !important; }

/* Hover — leve elevación + tinte acento (no relleno sólido) */
.bqb-prod-card.bqb-prod-card--in:hover {
    background: linear-gradient(
        145deg,
        var(--card-accent-soft, oklch(0.55 0.18 222 / 0.28)) 0%,
        var(--card-surface-b, oklch(1 0 0 / 0.06)) 100%
    );
    border-color: var(--card-accent, oklch(0.60 0.18 220));
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 6px 18px rgba(0, 0, 0, 0.24),
        0 0 0 2px var(--card-glow, oklch(0.60 0.18 220 / 0.22));
    text-decoration: none !important;
    transition-delay: 0ms;
}
.bqb-prod-card.bqb-prod-card--in:hover .bqb-prod-name {
    color: #ffffff !important;
}

/* Press */
.bqb-prod-card.bqb-prod-card--in:active {
    transform: scale(0.96);
    transition-duration: 80ms;
    transition-delay: 0ms;
}

/* --- Badge: sin relleno blanco; el GIF se funde con el vidrio de la card --- */
.bqb-prod-badge {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    border-radius: 10px;
    overflow: hidden;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    transition:
        transform  220ms cubic-bezier(0.16, 1, 0.3, 1),
        border-color 200ms ease;
}

/* Sheen desactivado: menos distracción sobre el video de fondo */
.bqb-prod-badge::after {
    display: none;
}

.bqb-prod-card--in:hover .bqb-prod-badge {
    transform: scale(1.02);
    border-color: rgba(255, 255, 255, 0.22);
}
.bqb-prod-card--selected .bqb-prod-badge {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.20);
}

/*
 * GIFs con fondo blanco opaco (baked-in): multiply hace que el blanco
 * adopte el color del vidrio detrás en lugar de verse como un recuadro.
 * Compensamos con brightness/saturate para que el ícono no quede apagado.
 * Solución perfecta = re-exportar assets con alpha (PNG/WebP/GIF transparente).
 */
.bqb-prod-icon {
    width: 88%;
    height: 88%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    mix-blend-mode: multiply;
    opacity: 0.95;
    filter: saturate(0.88) brightness(1.28);
    transition:
        transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
        filter 220ms ease,
        opacity 220ms ease;
    will-change: transform;
}
.bqb-prod-card--in:hover .bqb-prod-icon,
.bqb-prod-card--selected .bqb-prod-icon {
    transform: translateY(-1px) scale(1.03);
    filter: saturate(1) brightness(1.12);
    opacity: 1;
}

/* Flotas: GIF rectangular, proporción contenida dentro del badge */
.bqb-prod-card[data-bqb-product="Flotas"] .bqb-prod-icon {
    width: 84%;
    height: auto;
    max-height: 78%;
    object-fit: contain;
}

/* --- Nombre: altura fija para simetría entre cards --- */
.bqb-prod-name {
    font-family: var(--bqb-font-display);
    font-size: 0.68rem;
    font-weight: 700;
    color: #ffffff !important;
    margin: 0;
    line-height: 1.15;
    letter-spacing: 0;
    text-align: center;
    word-break: break-word;
    hyphens: auto;
    width: 100%;
    height: 2em;               /* altura fija = 2 líneas, siempre consistente */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.80),
        0 2px 8px rgba(0, 0, 0, 0.50);
}

/* ============================================= */
/* COMPANIES LOGOS (marquee compacto)            */
/* ============================================= */
.bqb-snippet-companies {
    background: var(--light1);
    overflow: hidden;
    max-width: 100%;
}

#companies-logos {
    border: 0;
    background: linear-gradient(180deg, var(--light1) 0%, var(--primary-bqb-subtle) 100%);
    position: relative;
    overflow: clip;
    contain: layout paint;
    height: 40px;
    padding: 0;
    max-width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

@keyframes bqbCompaniesMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.slider_companies {
    animation: bqbCompaniesMarquee 30s linear infinite;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: max-content;
    height: 100%;
    will-change: transform;
}

.slider_companies:hover { animation-play-state: paused; }

.slider_companies > div {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-left: 32px;
}

.image_companies {
    display: block;
    width: auto;
    height: 30px;
    max-width: 110px;
    object-fit: contain;
    /* Normaliza logos con distintos tonos en el SVG (#000, #666, color):
       brightness(0) los convierte a silueta negra uniforme; opacity baja
       los deja todos igual de tenues. Al hover se restaura el logo original. */
    opacity: 0.38;
    filter: grayscale(100%) brightness(0);
    transition: opacity 220ms ease, filter 220ms ease;
}

.image_companies:hover {
    opacity: 0.95;
    filter: grayscale(0%) brightness(1);
}

@media (min-width: 768px) {
    #companies-logos { height: 48px; }
    .slider_companies > div { margin-left: 40px; }
    .image_companies { height: 40px; max-width: 120px; }
}

@media (min-width: 1200px) {
    #companies-logos { height: 56px; }
    .slider_companies > div { margin-left: 64px; }
    .image_companies { height: 45px; max-width: 130px; }
}

@media (min-width: 1920px) {
    #companies-logos { height: 72px; }
    .slider_companies > div { margin-left: 88px; }
    .image_companies { height: 64px; max-width: 150px; }
}

/* ============================================= */
/* CHOOSE US — markup BQB (anti-seguro legacy)   */
/* ============================================= */
.bqb-landing-main .bqb-choose-us,
.bqb-producer-landing .bqb-choose-us,
.bqb-producer-landing .bqb-producer-why-me.bqb-choose-us {
    background: var(--light2, #fafafa) !important;
    color: var(--bqb-ink) !important;
    padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 !important;
    text-shadow: none !important;
}

.bqb-choose-us__inner {
    max-width: 1140px;
    margin: 0 auto;
}

.bqb-choose-us__eyebrow {
    display: block;
    text-align: center;
    margin-bottom: 0.75rem;
}

.bqb-landing-main .bqb-choose-us__title,
.bqb-producer-landing .bqb-choose-us__title {
    color: var(--bqb-ink) !important;
    font-family: var(--bqb-font-display);
    font-size: var(--bqb-fs-h2) !important;
    font-weight: 800 !important;
    text-align: center;
    margin: 0 0 clamp(1.5rem, 1rem + 1.5vw, 2.5rem) !important;
    padding: 0 !important;
    text-shadow: none !important;
}

.bqb-choose-us__grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}

.bqb-choose-us__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0 !important;
    padding: 1.1rem 1rem !important;
    border-radius: var(--bqb-r-md) !important;
    background: var(--bqb-surface, #fff) !important;
    border: 1px solid var(--bqb-border, rgba(20, 45, 70, 0.10));
    box-shadow: var(--bqb-shadow-sm);
    text-align: left;
    transition: transform 280ms cubic-bezier(0.2, 0, 0, 1), box-shadow 280ms ease;
}

.bqb-choose-us__item:hover {
    transform: translateY(-3px);
    box-shadow: var(--bqb-shadow-md);
}

.bqb-choose-us__icon {
    height: 24px;
    width: 24px;
    margin: 0 !important;
    padding: 8px;
    box-sizing: content-box;
    border-radius: var(--bqb-r-sm);
    background: var(--primary-bqb-subtle, rgba(27, 136, 194, 0.10));
    filter: none !important;
    opacity: 0.85;
}

.bqb-choose-us__item-title {
    font-family: var(--bqb-font-display);
    font-weight: 700 !important;
    font-size: 0.98rem !important;
    color: var(--bqb-ink) !important;
    margin: 0 0 0.2rem !important;
}

.bqb-choose-us__item-text,
.bqb-choose-us__copy p {
    color: var(--bqb-ink-soft) !important;
    margin-bottom: 0 !important;
    font-size: 0.84rem;
    line-height: 1.5;
}

@media (max-width: 991.98px) {
    .bqb-choose-us__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .bqb-choose-us__grid {
        grid-template-columns: 1fr;
    }
}

/* Variante custom del productor (fondo azul) */
.bqb-choose-us--custom {
    background: linear-gradient(
        135deg,
        var(--primary-bqb-dark, #1573a5) 0%,
        var(--primary-bqb, #1b88c2) 100%
    ) !important;
}

.bqb-choose-us__title--custom {
    color: #fff !important;
}

/* Legacy hooks (#choose-us) — compat nav anchor + overrides seguro */
#choose-us.bqb-choose-us {
    background: var(--light2, #fafafa) !important;
}

#choose-us h1,
#choose-us h2 {
    color: var(--bqb-ink) !important;
    text-shadow: none !important;
}

#why-choose-us .bg-bqb1 {
    background: transparent !important;
    color: inherit !important;
    text-shadow: none !important;
}

.choose-us-div {
    max-width: none !important;
    margin: 0 !important;
    border-radius: var(--bqb-r-md) !important;
    background: var(--bqb-surface, #fff);
    border: 1px solid var(--bqb-border, rgba(20, 45, 70, 0.10));
    padding: 1.1rem 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.6rem;
    text-align: left;
    box-shadow: var(--bqb-shadow-sm);
}

.choose-us-div > div { color: var(--bqb-ink-soft); }
.choose-us-div p { color: var(--bqb-ink-soft); margin-bottom: 0; font-size: 0.84rem; }

.choose-us-logo {
    height: 24px;
    width: 24px;
    margin: 0 !important;
    padding: 8px;
    box-sizing: content-box;
    border-radius: var(--bqb-r-sm);
    background: var(--primary-bqb-subtle, rgba(27, 136, 194, 0.10));
    filter: none;
    opacity: 0.85;
}

.choose-us-title {
    font-family: var(--bqb-font-display);
    font-weight: 700 !important;
    font-size: 0.98rem !important;
    color: var(--bqb-ink) !important;
    margin-bottom: 0.2rem;
}

/* Contenido custom "Por que elegirme" (productor) sobre fondo azul */
.bqb-choose-us--custom .bqb-why-me-custom {
    max-width: 1140px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.92);
    padding-bottom: 0.5rem;
}
.bqb-choose-us--custom .bqb-why-me-custom p,
.bqb-choose-us--custom .bqb-why-me-custom li,
.bqb-choose-us--custom .bqb-why-me-custom span { color: rgba(255, 255, 255, 0.90) !important; }
.bqb-choose-us--custom .bqb-why-me-custom h1,
.bqb-choose-us--custom .bqb-why-me-custom h2,
.bqb-choose-us--custom .bqb-why-me-custom h3,
.bqb-choose-us--custom .bqb-why-me-custom h4 { color: #fff !important; }

.bqb-why-me-custom {
    max-width: 1140px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.92);
}
.bqb-why-me-custom p,
.bqb-why-me-custom li,
.bqb-why-me-custom span { color: rgba(255, 255, 255, 0.90) !important; }
.bqb-why-me-custom h1,
.bqb-why-me-custom h2,
.bqb-why-me-custom h3,
.bqb-why-me-custom h4 { color: #fff !important; }

/* ============================================= */
/* TESTIMONIALS (solo si el productor los carga)  */
/* ============================================= */
.bqb-snippet-testimonials,
.bqb-producer-testimonials { padding: var(--bqb-section-y) 0; background: var(--light2); }

#clients {
    box-shadow: none;
    border-radius: 0;
    background: transparent !important;
}

.div-rounded-top { border-radius: 0; }

#clients h1,
#clients h2 {
    color: var(--bqb-ink) !important;
    font-size: var(--bqb-fs-h1);
    margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

.scrollable-div { flex-wrap: wrap; gap: var(--bqb-gap); }

.opinion {
    border-radius: var(--bqb-r-md);
    background: var(--bqb-surface);
    border: 1px solid var(--bqb-border);
    box-shadow: var(--bqb-shadow-md);
    margin: 0 !important;
    padding: 1.5rem !important;
    max-width: 360px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
}

.opinion p { color: var(--bqb-ink-soft); }
.opinion .font-weight-bold { color: var(--bqb-ink); }

.stars { display: inline-flex; gap: 3px; margin-bottom: 0.5rem; }
.star { height: 18px; width: 18px; }

.text-bqb-dark { color: var(--bqb-ink); }

/* Testimonios: las clases legacy de Bootstrap (mb-5 / py-5 / pt-5) sumaban
   ~9rem de espacio extra al padding de la sección, dejando mucho blanco
   arriba y abajo. Las colapsamos para que solo mande el padding de la sección. */
.bqb-snippet-testimonials .bg-bqb1,
.bqb-producer-testimonials .bg-bqb1 {
    margin-bottom: 0 !important;
    background: transparent !important;
}
.bqb-snippet-testimonials #clients,
.bqb-producer-testimonials #clients {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.bqb-snippet-testimonials .div-rounded-top,
.bqb-producer-testimonials .div-rounded-top {
    padding-top: 0 !important;
}

/* ============================================= */
/* ABOUT US                                      */
/* ============================================= */
#us {
    background:
        radial-gradient(60% 80% at 8% 0%, var(--primary-bqb-subtle) 0%, transparent 60%),
        var(--light2);
    padding: var(--bqb-section-y) 0;
}

#us h1,
#us h2 {
    font-size: var(--bqb-fs-h1);
    margin-bottom: 1.25rem;
}

.us-img {
    border-radius: var(--bqb-r-lg);
    box-shadow: var(--bqb-shadow-lg);
}

/* NOSOTROS: mensaje unico centrado (CRO / 3 segundos) */
.bqb-about-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

#us .bqb-about-title {
    font-family: var(--bqb-font-display);
    font-weight: 800;
    font-size: var(--bqb-fs-h1);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0.4rem auto 1rem;
    max-width: 18ch;
    color: var(--bqb-ink, #1d2733);
}

.bqb-about-lead {
    font-size: var(--bqb-fs-lead);
    line-height: 1.55;
    color: var(--bqb-ink-soft, #46566b);
    max-width: 60ch;
    margin: 0 auto 1.6rem;
}

.bqb-about-lead strong { color: var(--primary-bqb-dark, #1573a5); }

.bqb-about-trust {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 0.75rem;
}

.bqb-about-trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    border-radius: var(--bqb-r-pill);
    background: var(--bqb-surface, #fff);
    border: 1px solid var(--primary-bqb-subtle, rgba(27, 136, 194, 0.18));
    box-shadow: var(--bqb-shadow-sm, 0 2px 8px rgba(16, 24, 40, 0.06));
    font-size: 0.9rem;
    color: var(--bqb-ink, #1d2733);
}

.bqb-about-trust li strong { color: var(--primary-bqb-dark, #1573a5); }

@media (max-width: 575.98px) {
    #us .bqb-about-title { max-width: 100%; }
    .bqb-about-trust li { font-size: 0.84rem; padding: 0.45rem 0.8rem; }
}

.img-full-width { width: 100%; }

/* ============================================= */
/* SEGUINOS (orbes glossy flotantes)             */
/* ============================================= */
.bqb-follow {
    position: relative;
    z-index: 1;                 /* contenido por encima del video de la banda */
    overflow: hidden;
    padding: 2.25rem 1rem;      /* algo más de aire sobre el video de fondo */
    text-align: center;
    background: transparent;    /* comparte el video único de la banda */
}

/* Overlay que oscurece el video para legibilidad del texto */
.bqb-follow-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Arranca con la misma intensidad que el tinte de productos (~0.48) para que
       la unión con la sección de arriba sea continua, y se oscurece hacia abajo
       donde están el CTA y los botones flotantes. */
    background: linear-gradient(180deg,
        rgba(6, 26, 46, 0.45) 0%,
        rgba(6, 26, 46, 0.60) 45%,
        rgba(6, 26, 46, 0.85) 100%);
}

/* Contenido siempre por encima del video y el overlay */
.bqb-follow > *:not(.bqb-follow-video):not(.bqb-follow-overlay) {
    position: relative;
    z-index: 1;
}

.bqb-follow .bqb-eyebrow {
    justify-content: center;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.12);
    border: none;
    text-shadow: none;
}

.bqb-follow h2 {
    font-size: clamp(1.1rem, 1rem + 0.8vw, 1.4rem); /* más compacto que --bqb-fs-h2 */
    margin-bottom: 1rem;
    color: #ffffff;
}

.bqb-follow-links {
    display: flex;
    justify-content: center;
    align-items: center;        /* centrado vertical — orbes del mismo nivel */
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    padding-bottom: 0;          /* eliminado padding-bottom redundante */
}

.bqb-follow-cta-text {
    font-size: var(--bqb-fs-sm);
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-weight: 500;
}

/* Orbe base */
.bqb-follow-link {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: var(--bqb-r-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-bqb, #1B88C2);
    box-shadow: 0 8px 24px rgba(27, 136, 194, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
    text-decoration: none !important;
    overflow: hidden;
    animation: bqb-orb-float 3.5s ease-in-out infinite;
    transition:
        transform 240ms cubic-bezier(0.2, 0, 0, 1),
        box-shadow 240ms ease;
}

/* Stagger de animación flotante */
.bqb-follow-link:nth-child(2) { animation-delay: -1.17s; }
.bqb-follow-link:nth-child(3) { animation-delay: -2.33s; }
.bqb-follow-link:nth-child(4) { animation-delay: -0.6s; }
.bqb-follow-link:nth-child(5) { animation-delay: -2.9s; }

/* Brillo glossy (highlight superior) — capa primaria de “esfera” */
.bqb-follow-link::before {
    content: '';
    position: absolute;
    top: 8%;
    left: 14%;
    width: 48%;
    height: 28%;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.52) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

/* Rim inferior (secondary motion / profundidad) */
.bqb-follow-link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    pointer-events: none;
    z-index: 1;
}

/* Colores por red */
.bqb-follow-link--facebook {
    background: radial-gradient(ellipse at 35% 28%, #6aa9f7 0%, #1877f2 50%, #0c5dc4 100%);
    box-shadow: 0 8px 24px rgba(24, 119, 242, 0.38), 0 2px 6px rgba(0, 0, 0, 0.12);
}
.bqb-follow-link--instagram {
    background: radial-gradient(ellipse at 35% 28%, #f9ce55 0%, #e1306c 38%, #833ab4 72%, #405de6 100%);
    box-shadow: 0 8px 24px rgba(225, 48, 108, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
}
.bqb-follow-link--linkedin {
    background: radial-gradient(ellipse at 35% 28%, #82c3f5 0%, #0077b5 50%, #00557f 100%);
    box-shadow: 0 8px 24px rgba(0, 119, 181, 0.38), 0 2px 6px rgba(0, 0, 0, 0.12);
}
.bqb-follow-link--whatsapp {
    background: radial-gradient(ellipse at 35% 28%, #78e888 0%, #25d366 50%, #1aa44f 100%);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
}
/* Google: misma esfera + G multicolor (sin invert a blanco) */
.bqb-follow-link--google {
    background: radial-gradient(ellipse at 32% 26%, #ffffff 0%, #e8f0fe 42%, #4285F4 100%);
    box-shadow: 0 8px 24px rgba(66, 133, 244, 0.42), 0 2px 6px rgba(0, 0, 0, 0.14);
}

.bqb-follow-link img {
    width: 28px;
    height: 28px;
    filter: brightness(0) invert(1);
    position: relative;
    z-index: 2;
}

.bqb-follow-link--google img {
    filter: none;
    width: 26px;
    height: 26px;
}

/* Label que aparece en hover */
.bqb-follow-orb-label {
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
    z-index: 3;
}

/* Hover: lift + glow + label */
.bqb-follow-link:hover {
    animation-play-state: paused;
    transform: translateY(-6px) scale(1.08);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22), 0 4px 10px rgba(0, 0, 0, 0.14);
}

.bqb-follow-link--facebook:hover { box-shadow: 0 16px 40px rgba(24, 119, 242, 0.50), 0 4px 10px rgba(0,0,0,0.14); }
.bqb-follow-link--instagram:hover { box-shadow: 0 16px 40px rgba(225, 48, 108, 0.46), 0 4px 10px rgba(0,0,0,0.14); }
.bqb-follow-link--linkedin:hover { box-shadow: 0 16px 40px rgba(0, 119, 181, 0.50), 0 4px 10px rgba(0,0,0,0.14); }
.bqb-follow-link--whatsapp:hover { box-shadow: 0 16px 40px rgba(37, 211, 102, 0.46), 0 4px 10px rgba(0,0,0,0.14); }
.bqb-follow-link--google:hover { box-shadow: 0 16px 40px rgba(66, 133, 244, 0.48), 0 4px 10px rgba(0,0,0,0.14); }

.bqb-follow-link:hover .bqb-follow-orb-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.bqb-follow-link:focus-visible .bqb-follow-orb-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.bqb-follow-link:active { transform: translateY(-2px) scale(0.96); }

/* Animación de flotación ambient */
@keyframes bqb-orb-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

/* ============================================= */
/* FAQ                                           */
/* ============================================= */
.bqb-faq {
    background: var(--light2, #fafafa);
    padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0;
}
.bqb-faq__inner {
    max-width: 720px;
    margin: 0 auto;
}
.bqb-faq__eyebrow {
    display: block;
    text-align: center;
    margin-bottom: 0.65rem;
}
.bqb-faq__title {
    font-family: var(--bqb-font-display);
    font-size: var(--bqb-fs-h2);
    font-weight: 800;
    color: var(--bqb-ink);
    text-align: center;
    margin: 0 0 1.75rem;
}
.bqb-faq__list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.bqb-faq__item {
    background: #fff;
    border: 1px solid var(--bqb-border, rgba(20, 45, 70, 0.10));
    border-radius: var(--bqb-r-md, 16px);
    padding: 0.85rem 1.1rem;
    box-shadow: var(--bqb-shadow-sm);
}
.bqb-faq__question {
    font-family: var(--bqb-font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--bqb-ink);
    cursor: pointer;
    list-style: none;
}
.bqb-faq__question::-webkit-details-marker { display: none; }
.bqb-faq__answer {
    margin: 0.65rem 0 0.15rem;
    color: var(--bqb-ink-soft);
    font-size: 0.92rem;
    line-height: 1.55;
}
.bqb-faq__answer a {
    color: var(--primary-bqb, #1b88c2);
    font-weight: 600;
}

/* ============================================= */
/* JOIN US                                       */
/* ============================================= */
.bg-bqb-light2 { background-color: var(--light2); }

/* Hero "Sumate": la foto del equipo se ve COMPLETA (deja piso libre abajo)
   y el contenido va en una tarjeta glass (estilo .slider-info-div) sobre el piso. */
.bqb-join-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Mismo ratio que equipo.JPG (1024x683) -> se ve la imagen completa, sin recorte */
    aspect-ratio: 1024 / 683;
    width: 100%;
    border-radius: var(--bqb-r-xl) var(--bqb-r-xl) 0 0;
    box-shadow: var(--bqb-shadow-lg, 0 24px 60px rgba(16, 24, 40, 0.18));
}

.bqb-join-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: -2;
    transform: scale(1.02);
    transition: transform 1400ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.bqb-join-hero:hover .bqb-join-hero-bg { transform: scale(1.05); }

/* Velo azul al pie: el piso de la foto es claro, asi la tarjeta contrasta */
.bqb-join-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to top,
        rgba(7, 47, 79, 0.78) 0%,
        rgba(8, 51, 84, 0.42) 18%,
        rgba(8, 51, 84, 0.12) 32%,
        transparent 46%
    );
}

/* Tarjeta glass sobre el piso libre de la foto */
#join-us.bqb-join-hero-inner {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: clamp(44px, 9%, 80px);
    z-index: 1;
    width: min(92%, 560px);
    padding: clamp(1.15rem, 2.2vw, 1.7rem) clamp(1.4rem, 2.6vw, 2rem);
    border-radius: var(--bqb-r-md);
    color: #fff;
    text-align: center;
    /* Glass azul oscuro fijo: contrasta siempre, incluso sobre el piso claro */
    background: linear-gradient(165deg, rgba(10, 49, 80, 0.86) 0%, rgba(6, 31, 53, 0.90) 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 22px 50px rgba(4, 20, 36, 0.45);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#join-us.bqb-join-hero-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--secondary-bqb, #40B4F1);
}

.bqb-eyebrow--on-dark {
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 0.4rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.bqb-join-hero .bqb-join-title {
    font-family: var(--bqb-font-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.15rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.bqb-join-hero .bqb-join-lead {
    font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.95);
    max-width: 46ch;
    margin: 0 auto 1.35rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

.bqb-join-actions {
    display: flex;
    justify-content: center;
}

.bqb-join-cta {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 32px;
    border-radius: var(--bqb-r-pill);
    font-family: var(--bqb-font-display);
    font-weight: 700;
    font-size: 0.97rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    /* feedback: press <150ms, settle ~220ms (motion-design Corporate) */
    transition:
        transform 180ms cubic-bezier(0.2, 0, 0, 1),
        box-shadow 220ms ease,
        background 220ms ease;
}

.bqb-join-cta-label { position: relative; z-index: 1; }

.bqb-join-cta--primary {
    background: var(--primary-bqb);
    color: #fff;
    box-shadow: 0 10px 26px rgba(27, 136, 194, 0.45);
}

/* Ambient: destello que recorre el boton periodicamente (capa de vida) */
.bqb-join-cta--primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 55%;
    height: 100%;
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.40) 50%, transparent 100%);
    transform: skewX(-18deg);
    animation: bqb-join-sheen 4.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes bqb-join-sheen {
    0% { left: -150%; }
    32%, 100% { left: 150%; }
}

/* Primary: elevacion al hover; Secondary: la sombra crece */
.bqb-join-cta--primary:hover {
    background: var(--primary-bqb-dark, var(--primary-bqb));
    color: #fff;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 18px 40px rgba(27, 136, 194, 0.58);
}

.bqb-join-cta--primary:active { transform: translateY(-1px) scale(0.97); }

/* Tablet: la foto completa + tarjeta sobre el piso sigue funcionando bien.
   Mobile: foto completa arriba y tarjeta apilada debajo (solapando el piso). */
@media (max-width: 767.98px) {
    .bqb-join-hero {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        border-radius: var(--bqb-r-lg) var(--bqb-r-lg) 0 0;
    }
    .bqb-join-hero-bg {
        position: relative;
        inset: auto;
        height: auto;
        aspect-ratio: 1024 / 683;
        transform: none;
    }
    .bqb-join-hero:hover .bqb-join-hero-bg { transform: none; }
    .bqb-join-hero-overlay { display: none; }
    #join-us.bqb-join-hero-inner {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        width: 92%;
        margin: -34px auto 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bqb-join-hero-bg { transition: none; transform: none; }
    .bqb-join-hero:hover .bqb-join-hero-bg { transform: none; }
    .bqb-join-cta--primary::after { animation: none; display: none; }
    .bqb-join-cta--primary:hover { transform: none; }
}

/* Boton solido principal (sumate, etc.) */
.btn-bqb {
    min-width: 224px;
    height: 56px;
    padding: 0 28px;
    background: var(--primary-bqb);
    border-radius: var(--bqb-r-pill);
    border: none;
    color: var(--light1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-family: var(--bqb-font-display);
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: var(--bqb-shadow-cta);
    transition:
        background 220ms cubic-bezier(0.2, 0, 0, 1),
        transform 160ms cubic-bezier(0.2, 0, 0, 1),
        box-shadow 220ms ease;
}

.btn-bqb:hover {
    text-decoration: none;
    background: var(--primary-bqb-dark, var(--primary-bqb));
    color: var(--light1);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(27, 136, 194, 0.42);
}

.btn-bqb:active { transform: scale(0.97); }

/* ============================================= */
/* FLOATING BUTTONS                              */
/* ============================================= */
.bqb-floating-buttons.buttons-div,
.bqb-floating-buttons {
    position: fixed;
    bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
    left: 0.85rem;
    right: 0.85rem;
    width: auto;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 0.5rem;
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    /* el contenedor no captura clicks; los botones si */
    pointer-events: none;
}

.bqb-floating-buttons .main-button {
    pointer-events: auto;
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    padding: 0.5rem 0.6rem;
    color: var(--light1) !important;
    font-family: var(--bqb-font-body);
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: clamp(0.72rem, 2.4vw, 0.9375rem);
    line-height: 1.15;
    letter-spacing: 0.01em;
    border: 0;
    border-radius: var(--bqb-r-md);
    text-align: center;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(15, 45, 68, 0.22), 0 2px 6px rgba(15, 45, 68, 0.14);
    will-change: transform;
    transform: translateZ(0);
    transition:
        transform 150ms cubic-bezier(0.2, 0, 0, 1),
        box-shadow 220ms cubic-bezier(0.2, 0, 0, 1),
        filter 180ms ease;
    /* entrada: elevacion escalonada (motion personality: Premium/Corporate) */
    animation: bqb-fab-rise 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
    /* sheen: necesita contenedor relativo y overflow:hidden */
    position: relative;
    overflow: hidden;
}

/* Sheen animado (brillo recorre el botón) */
.bqb-floating-buttons .main-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 100%
    );
    transform: skewX(-18deg);
    animation: bqb-fab-sheen 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* Stagger del sheen por botón */
.bqb-floating-buttons .main-button:nth-child(1)::after { animation-delay: 0.3s; }
.bqb-floating-buttons .main-button:nth-child(2)::after { animation-delay: 1.6s; }
.bqb-floating-buttons .main-button:nth-child(3)::after { animation-delay: 2.9s; }

@keyframes bqb-fab-sheen {
    0%      { left: -150%; }
    20%, 100% { left: 160%; }
}

.bqb-floating-buttons .main-button:nth-child(1) { animation-delay: 90ms; }
.bqb-floating-buttons .main-button:nth-child(2) { animation-delay: 160ms; }
.bqb-floating-buttons .main-button:nth-child(3) { animation-delay: 230ms; }

.bqb-floating-buttons .main-button:hover {
    text-decoration: none;
    filter: brightness(1.06);
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(15, 45, 68, 0.28), 0 4px 10px rgba(15, 45, 68, 0.18);
}

.bqb-floating-buttons .main-button:active {
    transform: translateY(-1px) scale(0.97);
    filter: brightness(0.96);
    transition-duration: 90ms;
}

.bqb-floating-buttons .main-button:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

.bqb-floating-buttons .btn-danger { background-color: var(--danger-bqb) !important; }
.bqb-floating-buttons .btn-primary { background-color: var(--primary-bqb) !important; }
.bqb-floating-buttons .btn-success { background-color: var(--success-bqb) !important; }

.bqb-floating-buttons .main-button img,
.bqb-floating-buttons .logo-whastapp-size,
.bqb-floating-buttons .bqb-floating-btn-icon,
.bqb-floating-buttons .bqb-fab-label {
    position: relative;
    z-index: 1;
}

.bqb-floating-buttons .main-button img,
.bqb-floating-buttons .logo-whastapp-size,
.bqb-floating-buttons .bqb-floating-btn-icon {
    width: 18px;
    height: 18px;
    margin: 0 !important;
    flex-shrink: 0;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
}

.bqb-floating-buttons .main-button:hover img { transform: scale(1.15) rotate(-3deg); }

@keyframes bqb-fab-rise {
    from { opacity: 0; transform: translateY(140%); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bqb-fab-slide-right {
    from { opacity: 0; transform: translateX(120%); }
    to { opacity: 1; transform: translateX(0); }
}

/* ============================================= */
/* FOOTER BQB                                     */
/* ============================================= */
footer#bottom { background-color: transparent !important; }

.bqb-footer-main {
    background:
        radial-gradient(80% 140% at 100% 0%, var(--primary-bqb-dark, #1573a5) 0%, transparent 60%),
        var(--primary-bqb, #1B88C2);
    padding: 3.5rem 0 0;
    color: #fff;
}

.bqb-footer-logo { height: 36px; width: auto; filter: brightness(0) invert(1); }

.bqb-footer-desc {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.875rem;
    line-height: 1.65;
    max-width: 280px;
}

.bqb-footer-heading {
    color: #fff;
    font-family: var(--bqb-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.bqb-footer-contact-item { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
.bqb-footer-contact-item img { width: 18px; height: 18px; filter: brightness(0) invert(1); flex-shrink: 0; }
.bqb-footer-contact-item a { color: rgba(255, 255, 255, 0.86); text-decoration: none; font-size: 0.875rem; transition: color 160ms ease; }
.bqb-footer-contact-item a:hover { color: #fff; text-decoration: none; }

.bqb-footer-social { display: flex; gap: 0.75rem; }
.bqb-footer-social a {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--bqb-r-pill);
    background: rgba(255, 255, 255, 0.12);
    transition: background 200ms ease, transform 200ms cubic-bezier(0.2, 0, 0, 1);
}
.bqb-footer-social a:hover { background: rgba(255, 255, 255, 0.26); transform: translateY(-2px); }
.bqb-footer-social a img { width: 18px; height: 18px; filter: brightness(0) invert(1); }

.bqb-footer-copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    margin-top: 2.5rem;
    padding: 1rem 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.62);
}

.bqb-footer-legal { background: #f4f7fb; padding: 0.65rem 0; }
.bqb-footer-legal-inner {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 0.3rem 0.5rem; font-size: 0.72rem; color: #54657a;
}
.bqb-footer-legal-inner a { color: #2c3e50; text-decoration: underline; }
.bqb-footer-legal-sep { color: #c4cdd6; }
.bqb-footer-ssn-logo { height: 28px; width: auto; }

/* ============================================= */
/* HERO + PAGE HEADER (compartido con claims)    */
/* ============================================= */
.bqb-producer-hero,
.bqb-claims-hero { width: 100%; }

.bqb-hero-banner {
    width: 100%;
    aspect-ratio: 16 / 4.5;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.bqb-hero-banner--default-claims {
    background-image: url(/seguro/static/src/img/Denuncia.jpg);
    background-position: center 60%;
}

/* ============================================= */
/* IDENTIDAD DEL PAS — foto/marca + título + redes */
/* Forma una sola pieza con el explorador sobre    */
/* el video (foto a la izquierda, a toda altura).  */
/* ============================================= */

/* Foto / marca del PAS (columna izquierda) */
.bqb-producer-photo {
    position: relative;
    border-radius: var(--bqb-r-lg, 18px);
    overflow: hidden;
    background: linear-gradient(135deg,
        var(--primary-bqb-dark, #1573a5) 0%, var(--primary-bqb, #1b88c2) 100%);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42), 0 2px 8px rgba(0, 0, 0, 0.2);
    min-height: 0;
}
.bqb-producer-avatar {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: var(--bqb-profile-pos-desktop, 50% 35%);
}
@media (max-width: 575.98px) {
    .bqb-producer-band .bqb-producer-photo,
    .bqb-claims-band .bqb-producer-photo {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 156px;
        width: 100%;
        min-height: 0;
        margin: 0 auto 0.65rem;
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }
    .bqb-producer-band .bqb-producer-photo .bqb-producer-avatar,
    .bqb-claims-band .bqb-producer-photo .bqb-producer-avatar {
        width: 100%;
        aspect-ratio: 3 / 4;
        border-radius: var(--bqb-r-lg, 18px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38), 0 2px 8px rgba(0, 0, 0, 0.18);
        object-position: var(--bqb-profile-pos-mobile, 50% 30%);
    }
    /* Mobile: nombre y subtítulo debajo de la foto, no superpuestos */
    .bqb-producer-band .bqb-producer-photo .bqb-producer-id-text,
    .bqb-claims-band .bqb-producer-photo .bqb-producer-id-text {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        margin-top: 0.55rem;
        padding: 0;
        background: none;
        text-align: center;
    }
    .bqb-producer-landing .bqb-producer-id-name,
    .bqb-claims-page .bqb-producer-id-name {
        font-size: 1.1rem;
        line-height: 1.15;
    }
    .bqb-producer-landing .bqb-producer-id-sub,
    .bqb-claims-page .bqb-producer-id-sub {
        font-size: 0.8rem;
        margin-top: 0.15rem;
    }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .bqb-producer-avatar {
        object-position: var(--bqb-profile-pos-tablet, 50% 35%);
    }
}
@media (min-width: 992px) {
    .bqb-producer-avatar {
        object-position: var(--bqb-profile-pos-desktop, 50% 35%);
    }
}
.bqb-producer-avatar--default {
    object-fit: contain;
    padding: 2rem;              /* aire para el símbolo / logo */
}
/* Nombre + frase superpuestos abajo de la foto */
.bqb-producer-photo .bqb-producer-id-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.4rem 1.1rem 0.9rem;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.4) 55%, transparent 100%);
    text-align: left;
}
.bqb-producer-landing .bqb-producer-id-name {
    color: #fff;
    font-family: var(--bqb-font-display);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.12;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.bqb-producer-landing .bqb-producer-id-sub {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.92rem;
    font-weight: 500;
    margin-top: 2px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

/* Título directo (CTA) antes de las tabs */
.bqb-producer-landing .bqb-prod-direct-title,
.bqb-landing-main .bqb-prod-direct-title {
    color: #fff;
    font-family: var(--bqb-font-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 1rem + 2.8vw, 2.4rem);
    line-height: 1.1;
    margin: 0 0 1rem;
    text-align: center;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

/* Redes del PAS (debajo de las cards) */
.bqb-producer-id-social {
    margin: 0.75rem 0 0;
    gap: 0.9rem;
}

/* Redes en la landing principal: fila compacta centrada bajo las cards */
.bqb-landing-main .bqb-prod-social-eyebrow {
    margin-top: 1.6rem;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.bqb-landing-main .bqb-producer-id-social {
    justify-content: center;
    margin-top: 0.6rem;
}
.bqb-producer-id-social .bqb-follow-link {
    width: 46px;
    height: 46px;
    animation: none;            /* fijos, sin flotar */
}
.bqb-producer-id-social .bqb-follow-link img {
    width: 21px;
    height: 21px;
}

/* ── Tablet/desktop (≥576px): 2 columnas — foto izq | título+tabs+cards+redes der ── */
@media (min-width: 576px) {
    .bqb-producer-band .bqb-snippet-products .container {
        display: grid;
        grid-template-columns: minmax(170px, 0.36fr) 1fr;
        grid-template-rows: auto auto 1fr auto;
        column-gap: 1.75rem;
        row-gap: 0;
        align-items: start;
    }
    .bqb-producer-band .bqb-producer-photo {
        grid-column: 1;
        grid-row: 1 / span 4;
        align-self: start;
        height: auto;
        min-height: 0;
        aspect-ratio: 3 / 4;
        max-height: min(420px, 72vh);
        width: 100%;
        margin: 0;
    }
    .bqb-producer-band .bqb-prod-direct-title {
        grid-column: 2;
        grid-row: 1;
        text-align: left;
        margin-bottom: 0.6rem;
    }
    .bqb-producer-band .bqb-prod-tabs {
        grid-column: 2;
        grid-row: 2;
        justify-content: flex-start;
    }
    .bqb-producer-band .bqb-prod-panel {
        grid-column: 2;
        grid-row: 3;
    }
    .bqb-producer-band .bqb-producer-id-social {
        grid-column: 2;
        grid-row: 4;
        justify-content: flex-start;
        margin-top: 0.85rem;
    }
}

/* ── Tablet (576–991.98px): misma disposición que en mobile — una sola columna, */
/*    identidad arriba (foto → nombre → subtítulo) y las redes al final (abajo). */
/*    Desktop (≥992px) y mobile (<576px) no se tocan.                            */
@media (min-width: 576px) and (max-width: 991.98px) {
    /* Deshacer el grid de 2 columnas: todo fluye apilado como en mobile */
    .bqb-producer-band .bqb-snippet-products .container {
        display: block;
    }

    /* Foto compacta y centrada, con nombre/subtítulo debajo (no superpuestos) */
    .bqb-producer-band .bqb-producer-photo {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 200px;
        min-height: 0;
        margin: 0 auto 0.65rem;
        aspect-ratio: auto;
        max-height: none;
        height: auto;
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }
    .bqb-producer-band .bqb-producer-photo .bqb-producer-avatar {
        width: 100%;
        aspect-ratio: 3 / 4;
        border-radius: var(--bqb-r-lg, 18px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38), 0 2px 8px rgba(0, 0, 0, 0.18);
        object-position: var(--bqb-profile-pos-tablet, 50% 35%);
    }
    .bqb-producer-band .bqb-producer-photo .bqb-producer-id-text {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        margin-top: 0.55rem;
        padding: 0;
        background: none;
        text-align: center;
    }
    .bqb-producer-landing .bqb-producer-id-name {
        font-size: 1.25rem;
        line-height: 1.15;
    }
    .bqb-producer-landing .bqb-producer-id-sub {
        font-size: 0.9rem;
        margin-top: 0.15rem;
    }

    /* El explorador y las redes ya no van en celdas de grid: fluyen apilados */
    .bqb-producer-band .bqb-prod-direct-title,
    .bqb-producer-band .bqb-prod-tabs,
    .bqb-producer-band .bqb-prod-panel,
    .bqb-producer-band .bqb-producer-id-social {
        grid-column: auto;
        grid-row: auto;
    }
    .bqb-producer-band .bqb-prod-direct-title {
        text-align: center;
    }
    .bqb-producer-band .bqb-prod-tabs {
        justify-content: center;
    }
    /* Redes al final, centradas (como en mobile) */
    .bqb-producer-band .bqb-producer-id-social {
        justify-content: center;
        margin-top: 0.85rem;
    }
}

.bqb-page-header {
    background: #fff;
    box-shadow: var(--bqb-shadow-md);
    border-bottom: 3px solid var(--primary-bqb, #1b88c2);
    width: 100%;
}

.bqb-page-header--sticky {
    position: sticky;
    top: var(--bqb-site-nav-h, var(--bqb-nav-h, 66px));
    z-index: 50;
}

.bqb-page-header-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.bqb-page-header-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.bqb-page-header-logo { height: 50px; width: auto; flex-shrink: 0; }
.bqb-page-header-divider { border-left: 2px solid #e6ebf0; height: 45px; flex-shrink: 0; }
.bqb-page-header-title { min-width: 0; }

.bqb-page-header-title-main {
    font-family: var(--bqb-font-display);
    color: #2c3e50 !important;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.bqb-page-header-title-sub {
    color: var(--primary-bqb-dark, #1573a5) !important;
    margin: 2px 0 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

/* CTAs pills compartidos */
.bqb-page-header-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }

.bqb-cta {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; min-height: 52px;
    border-radius: var(--bqb-r-sm);
    border: 2px solid transparent;
    text-decoration: none !important;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.bqb-cta-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bqb-cta-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.2; }
.bqb-cta-title { font-size: 0.9rem; font-weight: 700; }
.bqb-cta-sub { font-size: 0.72rem; font-weight: 500; color: #5a6c7d; }

.bqb-cta--wa { background: #e8faf0; border-color: #25D366; color: #1a7a4a; }
.bqb-cta--wa .bqb-cta-icon { color: #25D366; }
.bqb-cta--wa:hover { background: #dcf5e6; border-color: #1da851; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25); transform: translateY(-1px); }

.bqb-cta--phone { background: var(--primary-bqb-subtle, #e8f4fc); border-color: var(--primary-bqb, #1b88c2); color: var(--primary-bqb-dark, #1573a5); }
.bqb-cta--phone .bqb-cta-icon { color: var(--primary-bqb, #1b88c2); }
.bqb-cta--phone:hover { background: #d2eaf5; border-color: var(--primary-bqb-dark, #1573a5); box-shadow: 0 4px 12px rgba(27, 136, 194, 0.2); transform: translateY(-1px); }

.bqb-page-header-help {
    margin: 0; padding: 10px 16px 12px; text-align: center;
    background: linear-gradient(180deg, #f4fafd 0%, var(--primary-bqb-subtle, #e8f4fc) 100%);
    border-top: 1px solid rgba(27, 136, 194, 0.08);
}

.bqb-page-header-help-text {
    font-size: 0.85rem; color: var(--primary-bqb-dark, #1573a5);
    font-weight: 500; line-height: 1.45; letter-spacing: 0.01em;
}

/* Boton generico (compat) */
.bqb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 24px; font-size: 15px; font-weight: 600;
    border-radius: var(--bqb-r-sm); border: none; cursor: pointer;
    transition: all 0.3s ease; text-decoration: none;
}
.bqb-btn-primary { background: var(--primary-bqb); color: #fff; }
.bqb-btn-primary:hover { background: var(--primary-bqb-hover, var(--primary-bqb)); color: #fff; transform: translateY(-2px); box-shadow: var(--bqb-shadow-md); text-decoration: none; }
.bqb-btn-sm { padding: 8px 16px; font-size: 14px; }
.bqb-btn-icon-img { height: 18px; width: auto; }

/* Tablet / desktop del page-header */
@media (min-width: 576px) {
    .bqb-page-header-content { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 16px; padding-top: 14px; padding-bottom: 14px; }
    .bqb-page-header-left { flex: 1 1 220px; }
    .bqb-page-header-actions { flex: 1 1 280px; max-width: 340px; margin-left: auto; }
    .bqb-cta { min-height: 48px; padding: 8px 14px; }
}

@media (min-width: 768px) {
    .bqb-page-header-content { flex-wrap: nowrap; }
    .bqb-page-header-actions { flex: 0 0 auto; width: auto; min-width: 300px; max-width: 360px; }
}

@media (min-width: 992px) {
    .bqb-page-header-title-main { font-size: 20px; }
    .bqb-page-header-title-sub { font-size: 14px; }
    .bqb-page-header-actions { gap: 12px; min-width: 320px; }
    .bqb-cta-title { font-size: 0.95rem; }
}

@media (max-width: 991px) {
    .bqb-hero-banner { aspect-ratio: 768 / 320; }
}

@media (max-width: 575px) {
    .bqb-hero-banner { aspect-ratio: 375 / 250; }
    .bqb-page-header-logo { height: 40px; }
    .bqb-page-header-divider { height: 38px; }
    .bqb-page-header-title-main { font-size: 16px; }
    .bqb-page-header-title-sub { font-size: 12px; }
    .bqb-page-header-actions { gap: 8px; }
    .bqb-cta { min-height: 50px; padding: 8px 10px; gap: 8px; }
    .bqb-cta-title { font-size: 0.82rem; }
    .bqb-cta-sub { font-size: 0.68rem; }
    .bqb-page-header-help { padding: 8px 12px 10px; }
    .bqb-page-header-help-text { font-size: 0.78rem; }
}

/* ============================================= */
/* HERO DE DENUNCIAS — banda de video + foto PAS  */
/* Mismo lenguaje visual que la landing (foto a    */
/* la izquierda con nombre, título a la derecha).  */
/* ============================================= */
.bqb-claims-band { isolation: isolate; }
.bqb-claims-band-inner {
    position: relative;
    z-index: 1;
    padding: 2rem 0;
}
/* Foto/marca del PAS: reusa .bqb-producer-photo de la landing */
.bqb-claims-band .bqb-producer-photo {
    min-height: 0;
}
/* Nombre + frase sobre la foto (mismo estilo que la landing, pero el
   body de denuncias es .bqb-claims-page, no .bqb-producer-landing) */
.bqb-claims-page .bqb-producer-id-name {
    color: #fff;
    font-family: var(--bqb-font-display);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.12;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.bqb-claims-page .bqb-producer-id-sub {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.92rem;
    font-weight: 500;
    margin-top: 2px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
/* Texto principal (derecha) */
.bqb-claims-band-text {
    margin-top: 1.25rem;
    text-align: center;
}
.bqb-claims-band-title {
    color: #fff !important;
    font-family: var(--bqb-font-display);
    font-weight: 800;
    font-size: clamp(1.7rem, 1rem + 3vw, 2.7rem);
    line-height: 1.08;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}
.bqb-claims-band-lead {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    font-size: 1.02rem;
    margin-top: 0.6rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* ≥576px: 2 columnas — foto izquierda | título derecha */
@media (min-width: 576px) {
    .bqb-claims-band-inner {
        display: grid;
        grid-template-columns: minmax(180px, 0.34fr) 1fr;
        column-gap: 1.9rem;
        align-items: center;
        padding: 2.5rem 0;
    }
    .bqb-claims-band .bqb-producer-photo {
        align-self: start;
        height: auto;
        min-height: 0;
        aspect-ratio: 3 / 4;
        max-height: min(320px, 60vh);
        width: 100%;
    }
    .bqb-claims-band-text {
        margin-top: 0;
        text-align: left;
    }
    .bqb-claims-band-lead { max-width: 48ch; }
}

/* /reclamos general (sin foto): solo el titulo centrado sobre el video,
   igual que la landing principal */
.bqb-claims-band-inner--no-photo {
    display: block;
    text-align: center;
}
.bqb-claims-band-inner--no-photo .bqb-claims-band-text {
    margin-top: 0;
    text-align: center;
}
.bqb-claims-band-inner--no-photo .bqb-claims-band-lead {
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 576px) {
    .bqb-claims-band-inner--no-photo {
        display: block;
        padding: 2.5rem 0;
    }
    .bqb-claims-band-inner--no-photo .bqb-claims-band-text {
        text-align: center;
    }
}

/* ============================================= */
/* CLAIMS (compat)                               */
/* ============================================= */
.bqb-claims-banner { margin-bottom: 2rem; }
.bqb-claims-banner-inner {
    background-image: url(/seguro/static/src/img/Denuncia.jpg);
    height: 250px; background-size: cover; background-position: center 60%;
    display: flex; align-items: flex-end;
}
.banner {
    background-image: url(/seguro/static/src/img/Denuncia.jpg);
    height: 400px; background-size: cover; background-position: center 60%;
    margin: 0 0 3rem 0;
}

/* ============================================= */
/* RESPONSIVE                                    */
/* ============================================= */
@media only screen and (min-width: 1200px) {
    .bqb-floating-buttons.buttons-div,
    .bqb-floating-buttons {
        left: auto;
        right: 1.5rem;
        top: auto;
        bottom: 1.5rem;
        width: auto;
        max-width: 280px;
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .bqb-floating-buttons .main-button {
        flex: none;
        width: 100%;
        min-height: 52px;
        padding: 0.6rem 1.4rem;
        border-radius: var(--bqb-r-pill);
        font-size: 0.9375rem;
        justify-content: flex-start;
        gap: 10px;
        animation-name: bqb-fab-slide-right;
    }

    .bqb-floating-buttons .main-button img,
    .bqb-floating-buttons .logo-whastapp-size,
    .bqb-floating-buttons .bqb-floating-btn-icon {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 991px) {
    .bqb-floating-buttons .mobile-hide { display: none !important; }
}

@media (max-width: 767px) {
    .bqb-prod-card { flex: 0 0 96px; width: 96px; height: 96px; }
    .bqb-prod-name { font-size: 0.68rem; }
    .bqb-follow-links { gap: 1.25rem; }

    .scrollable-div { overflow-x: auto; flex-wrap: nowrap; }
    .choose-us-logo { margin: 0 0 0.25rem !important; }
    #companies-logos { padding-bottom: 0; }
    .bqb-join-hero { border-radius: var(--bqb-r-lg) var(--bqb-r-lg) 0 0; }

    /* Botones flotantes: Denunciar con texto + telefono y WhatsApp solo icono (mas grandes) */
    .bqb-floating-buttons { gap: 0.45rem; }
    .bqb-floating-buttons .main-button { min-height: 58px; }
    .bqb-floating-buttons .btn-danger {
        flex: 1 1 auto;
        padding: 0.5rem 0.9rem;
        font-size: 0.95rem;
    }
    .bqb-floating-buttons .btn-primary,
    .bqb-floating-buttons .btn-success {
        flex: 0 0 auto;
        width: 58px;
        padding: 0;
    }
    .bqb-floating-buttons .btn-primary .bqb-fab-label,
    .bqb-floating-buttons .btn-success .bqb-fab-label { display: none; }
    .bqb-floating-buttons .main-button img,
    .bqb-floating-buttons .logo-whastapp-size,
    .bqb-floating-buttons .bqb-floating-btn-icon {
        width: 26px;
        height: 26px;
    }
}

@media (max-width: 450px) {
    .bqb-prod-card { flex: 0 0 88px; width: 88px; height: 88px; }
    .bqb-follow-link { width: 60px; height: 60px; }
    .bqb-follow-link img { width: 24px; height: 24px; }
}

/* ============================================= */
/* SECCIÓN PRODUCTOS — LAYOUT RESPONSIVO          */
/* ============================================= */

/* ── Mobile (< 768px): layout vertical compacto ── */
@media (max-width: 767.98px) {
    .bqb-snippet-products {
        padding: 1.5rem 0;
    }
    .bqb-prod-header {
        height: 10.5rem;         /* misma altura fija en mobile */
        margin-bottom: 0.75rem;
    }
    .bqb-prod-section-title {
        height: 2.4rem;
        line-height: 2.4rem;
        white-space: nowrap;
        font-size: clamp(1.1rem, 4.5vw, 1.4rem);
        margin-bottom: 0.25rem;
    }
    .bqb-prod-section-lead {
        height: 3.4rem;
        font-size: 0.85rem;
        margin-bottom: 0;
    }
    .bqb-prod-tabs {
        gap: 0.35rem;
        margin-bottom: 0.75rem;
    }
    .bqb-prod-tab {
        font-size: 0.78rem;
        padding: 0.35rem 0.85rem;
    }
}

/* ── Desktop (≥ 768px): layout horizontal 2 columnas ── */
@media (min-width: 768px) {
    .bqb-snippet-products {
        padding: 2rem 0;
    }

    /* Grid: header izquierda | tabs+cards derecha */
    .bqb-snippet-products .container {
        display: grid;
        grid-template-columns: minmax(160px, 0.32fr) 1fr;
        grid-template-rows: auto auto;
        column-gap: 2.5rem;
        align-items: start;
    }

    /* Header ocupa toda la columna izquierda, centrado verticalmente */
    .bqb-prod-header {
        grid-column: 1;
        grid-row: 1 / span 3;
        height: 10.5rem;         /* altura fija — nunca cambia entre categorías */
        align-items: flex-start;
        justify-content: center;
        align-self: center;
    }
    .bqb-prod-section-title {
        text-align: left;
        margin-left: 0;
        white-space: normal;
        height: 2.4rem;
        line-height: 1.2;
        font-size: clamp(1.1rem, 1.5vw, 1.55rem);
    }
    .bqb-prod-section-lead {
        text-align: left;
        margin-left: 0;
        height: 3.4rem;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        margin-bottom: 0;
        font-size: clamp(0.82rem, 0.9vw, 0.95rem);
    }
    .bqb-snippet-products .bqb-eyebrow {
        justify-content: flex-start;
    }

    /* Tabs y panels en columna derecha */
    .bqb-prod-tabs {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-start;
        margin-bottom: 0.75rem;
        /* Tabs más compactos en desktop para que quepan los 5 */
        flex-wrap: wrap;
        gap: 0.35rem;
    }
    .bqb-prod-tabs .bqb-prod-tab {
        font-size: 0.78rem;
        padding: 0.35rem 0.85rem;
    }
    .bqb-prod-panel {
        grid-column: 2;
        grid-row: 2;
    }
}

/* ── Wide desktop (≥ 992px): más espacio para el header ── */
@media (min-width: 992px) {
    .bqb-snippet-products .container {
        grid-template-columns: minmax(200px, 0.28fr) 1fr;
        column-gap: 3rem;
    }
    .bqb-prod-section-title {
        font-size: clamp(1.2rem, 1.6vw, 1.65rem);
    }
}

/* ── Landing principal: una sola columna (NO el layout de 2 columnas) ──
   El layout horizontal título/foto a la izquierda es exclusivo de la landing
   del productor (.bqb-producer-band). En la principal el título va siempre
   centrado arriba de las categorías y el bloque mantiene el mismo alto sin
   importar la categoría (el track de cards tiene alto fijo y scrollea). */
@media (min-width: 768px) {
    .bqb-landing-main .bqb-snippet-products .container {
        display: block;
    }
    .bqb-landing-main .bqb-prod-direct-title {
        text-align: center;
    }
    .bqb-landing-main .bqb-prod-tabs {
        justify-content: center;
    }
    .bqb-landing-main .bqb-prod-social-eyebrow,
    .bqb-landing-main .bqb-producer-id-social {
        justify-content: center;
        text-align: center;
    }
}

/* ============================================= */
/* MOTION SAFETY                                  */
/* ============================================= */
@media (prefers-reduced-motion: reduce) {
    .slider_companies { transition: none; animation: none; }

    .bqb-follow-link { animation: none !important; }

    /* Cards visibles desde el inicio, sin motion */
    .bqb-prod-card {
        opacity: 1 !important;
        transform: none !important;
        transition: border-color 150ms ease, box-shadow 150ms ease !important;
    }
    .bqb-prod-card--in:hover { transform: none !important; }
    .bqb-prod-badge { transition: none !important; }
    .bqb-prod-badge::after { display: none !important; }
    .bqb-prod-icon,
    .bqb-prod-card--in:hover .bqb-prod-icon { transition: none !important; transform: none !important; }

    .bqb-floating-buttons .main-button {
        animation: none !important;
        transition: none !important;
    }
    .bqb-floating-buttons .main-button::after { display: none !important; }
    .bqb-floating-buttons .main-button:hover { transform: none; }
}