/* =====================================================================
   BioMantenimiento · sistema visual del sitio publico
   ---------------------------------------------------------------------
   Idea: el sitio se lee como la documentacion de un equipo bien llevado.
   Los colores corporativos (azul de marca y azul marino, los mismos de la
   plataforma) llevan todo; verde, ambar y rojo solo se usan con el
   significado que tienen en el software (al dia, proximo, vencido).
   Los codigos de equipo van en monoespaciada.
   Va sobre bootstrap.min.css (rejilla, collapse, dropdown); nada del tema
   viejo (main.css / custom.css) se carga en las paginas publicas.
   Prefijo bm- para todo lo propio.
   ===================================================================== */

:root {
    /* Color corporativo */
    --bm-marino: #06175A;          /* superficies oscuras: orden de trabajo, pie */
    --bm-marino-2: #0A2FB5;        /* azul medio de las franjas de marca */
    --bm-azul: #0540F2;            /* azul de marca: accion principal y enlaces */
    --bm-azul-700: #0433C2;
    --bm-azul-300: #9DB6FF;        /* enlaces sobre marino */
    --bm-celeste: #E8F1FF;         /* rellenos suaves, estados activos */
    --bm-franja: linear-gradient(135deg, #06175A 0%, #0A2FB5 52%, #0540F2 100%); /* franja de marca */
    /* Neutros con el mismo tinte azul */
    --bm-niebla: #F5F8FE;          /* fondo alterno */
    --bm-blanco: #FFFFFF;
    --bm-texto: #0B1739;
    --bm-gris: #55607A;
    --bm-gris-claro: #8C96AE;
    --bm-linea: #E1E7F3;
    --bm-linea-fuerte: #C5D0E6;
    --bm-sobre-marino: #B9C5E6;    /* texto secundario sobre marino */
    /* Estados, con el significado que tienen en la plataforma */
    --bm-etiqueta: #F5A524;        /* proximo */
    --bm-etiqueta-suave: #FEF3DC;
    --bm-etiqueta-tinta: #8A5A08;
    --bm-vencido: #D23F2C;         /* vencido */
    --bm-vencido-suave: #FBE6E1;
    --bm-ok: #0E9F77;              /* al dia, firmado */
    --bm-ok-tinta: #08765A;
    --bm-ok-suave: #E2F5EE;

    /* Tipografia */
    --bm-font: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
    --bm-display: "Barlow Semi Condensed", "Barlow", "Arial Narrow", sans-serif;
    --bm-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* Forma: los documentos casi rectos, los dispositivos y fotos mas redondos */
    --bm-radio-doc: 4px;
    --bm-radio: 8px;
    --bm-radio-foto: 14px;
    --bm-sombra-doc: 0 1px 0 rgba(6,23,90, .06), 0 18px 40px -26px rgba(6,23,90, .45);
    --bm-sombra-foto: 0 30px 60px -36px rgba(6,23,90, .55);

    /* Ritmo */
    --bm-section: clamp(72px, 9vw, 128px);
    --bm-header-h: 68px;
    --bm-ease: cubic-bezier(.22, .8, .26, 1);
    --bm-max: 1240px;

    /* Puente con Bootstrap */
    --bs-body-font-family: var(--bm-font);
    --bs-body-color: var(--bm-texto);
    --bs-body-bg: var(--bm-blanco);
    --bs-primary: #0540F2;
    --bs-primary-rgb: 5, 64, 242;
    --bs-link-color: #0540F2;
    --bs-link-hover-color: #0433C2;
    --bs-border-color: #E1E7F3;
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
html { scroll-padding-top: calc(var(--bm-header-h) + 20px); }
body {
    font-family: var(--bm-font);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--bm-texto);
    background: var(--bm-blanco);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--bm-display);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.005em;
    color: var(--bm-texto);
    text-wrap: balance;
}
p { text-wrap: pretty; }
a { color: var(--bm-azul); text-underline-offset: .18em; }
a:hover { color: var(--bm-azul-700); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--bm-azul); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--bm-celeste); color: var(--bm-texto); }

.container { max-width: var(--bm-max); padding-inline: clamp(16px, 4vw, 40px); }
@media (min-width: 1600px) { :root { --bm-max: 1440px; } }

.bm-skip {
    position: absolute; left: 12px; top: -60px; z-index: 2000;
    background: var(--bm-marino); color: #fff; padding: 10px 14px; border-radius: var(--bm-radio);
}
.bm-skip:focus { top: 12px; color: #fff; }

.bm-mono { font-family: var(--bm-mono); font-weight: 500; letter-spacing: 0; }
.visually-hidden-focusable:not(:focus) { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; }

/* ---------------------------------------------------------------------
   Tipografia
   --------------------------------------------------------------------- */
.bm-h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); font-weight: 600; line-height: 1; letter-spacing: -0.015em; margin: 0 0 .4em; }
.bm-h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 600; line-height: 1.04; margin: 0 0 .45em; }
.bm-h3 { font-size: clamp(1.35rem, 1.8vw, 1.6rem); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }
.bm-lead { font-size: clamp(1.1rem, 1.35vw, 1.25rem); line-height: 1.55; color: var(--bm-gris); max-width: 62ch; margin: 0 0 1.2em; }
.bm-text { color: var(--bm-gris); max-width: 68ch; }
.bm-micro { font-size: .9rem; color: var(--bm-gris); }

/* Antetitulo: solo cuando nombra algo real (el modulo, la seccion de un manual), no decoracion */
.bm-eyebrow {
    display: inline-block; font-family: var(--bm-font); font-size: .95rem; font-weight: 600;
    color: var(--bm-azul); margin-bottom: .6rem;
}

/* ---------------------------------------------------------------------
   Botones y enlaces
   --------------------------------------------------------------------- */
.bm-btn {
    --bm-btn-bg: var(--bm-azul); --bm-btn-fg: #fff; --bm-btn-bd: var(--bm-azul);
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    min-height: 50px; padding: .7rem 1.4rem;
    font-family: var(--bm-font); font-size: 1.02rem; font-weight: 600; line-height: 1.1;
    color: var(--bm-btn-fg); background: var(--bm-btn-bg);
    border: 1.5px solid var(--bm-btn-bd); border-radius: var(--bm-radio);
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s var(--bm-ease);
}
.bm-btn:hover { --bm-btn-bg: var(--bm-azul-700); --bm-btn-bd: var(--bm-azul-700); color: var(--bm-btn-fg); }
.bm-btn:active { transform: translateY(1px); }
.bm-btn--secondary { --bm-btn-bg: transparent; --bm-btn-fg: var(--bm-texto); --bm-btn-bd: var(--bm-linea-fuerte); }
.bm-btn--secondary:hover { --bm-btn-bg: var(--bm-niebla); --bm-btn-fg: var(--bm-texto); --bm-btn-bd: var(--bm-texto); }
.bm-btn--claro { --bm-btn-bg: #fff; --bm-btn-fg: var(--bm-marino); --bm-btn-bd: #fff; }
.bm-btn--claro:hover { --bm-btn-bg: var(--bm-celeste); --bm-btn-bd: var(--bm-celeste); --bm-btn-fg: var(--bm-marino); }
.bm-btn--contorno-claro { --bm-btn-bg: transparent; --bm-btn-fg: #fff; --bm-btn-bd: rgba(255,255,255,.45); }
.bm-btn--contorno-claro:hover { --bm-btn-bg: rgba(255,255,255,.08); --bm-btn-fg: #fff; --bm-btn-bd: #fff; }
.bm-btn--sm { min-height: 42px; padding: .5rem 1rem; font-size: .96rem; }
.bm-btn .bi { font-size: 1.05em; }
.btn-glass-shine { display: none; }

.bm-link {
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 600; color: var(--bm-azul); text-decoration: underline; text-decoration-thickness: 1.5px;
    text-decoration-color: color-mix(in srgb, var(--bm-azul) 35%, transparent);
}
.bm-link:hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------------
   Estados (los mismos colores que usa el software)
   --------------------------------------------------------------------- */
.bm-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .55rem; border-radius: 3px;
    font-size: .8rem; font-weight: 600; line-height: 1.3; white-space: nowrap;
    background: var(--bm-niebla); color: var(--bm-gris);
}
.bm-pill--ok { background: var(--bm-ok-suave); color: var(--bm-ok-tinta); }
.bm-pill--info { background: var(--bm-etiqueta-suave); color: var(--bm-etiqueta-tinta); }
.bm-pill--late { background: var(--bm-vencido-suave); color: var(--bm-vencido); }

.bm-checks { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .55rem; }
.bm-checks li { display: grid; grid-template-columns: 1.3rem 1fr; gap: .5rem; color: var(--bm-gris); line-height: 1.45; }
.bm-checks li .bi { color: var(--bm-ok); margin-top: .1rem; }
.bm-checks li.is-plus { color: var(--bm-texto); font-weight: 600; }

/* ---------------------------------------------------------------------
   Secciones
   --------------------------------------------------------------------- */
.bm-section { padding-block: var(--bm-section); }
.bm-section--white { background: var(--bm-blanco); }
.bm-section--mist, .bm-section--paper { background: var(--bm-niebla); }
.bm-section + .bm-section.bm-section--white,
.bm-section--white + .bm-section--white { border-top: 1px solid var(--bm-linea); }

/* Cabeza de seccion: titulo a la izquierda y su explicacion al lado, no centrados */
.bm-section-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1rem clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.bm-section-head > * { margin-bottom: 0; }
.bm-section-head .bm-eyebrow { grid-column: 1 / -1; margin-bottom: -.5rem; }
.bm-section-head .bm-lead { max-width: 48ch; }
.bm-section-head--solo { grid-template-columns: minmax(0, 1fr); }
.bm-section-head--center { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 860px) {
    .bm-section-head, .bm-section-head--center { grid-template-columns: 1fr; align-items: start; }
}

/* ---------------------------------------------------------------------
   Encabezado del sitio
   --------------------------------------------------------------------- */
.bm-header {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease;
}
.bm-header.is-scrolled { border-bottom-color: var(--bm-linea); }
.bm-header { transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.bm-header.is-scrolled { box-shadow: 0 6px 20px -16px rgba(6, 23, 90, .35); }
/* Sobre la portada azul: transparente y en blanco hasta hacer scroll (lo activa site.js) */
.bm-header--sobre { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: rgba(255, 255, 255, .1); }
.bm-header--sobre .bm-brand, .bm-header--sobre .bm-brand:hover,
.bm-header--sobre .bm-nav .nav-link, .bm-header--sobre .bm-lang > button { color: #fff; }
.bm-header--sobre .bm-nav .nav-link { opacity: .86; }
.bm-header--sobre .bm-nav .nav-link:hover, .bm-header--sobre .bm-nav .nav-link[aria-current="page"] { color: #fff; opacity: 1; }
.bm-header--sobre .bm-nav .nav-link[aria-current="page"]::after { background: #fff; }
.bm-header--sobre .bm-header__cta .bm-btn { --bm-btn-bg: #fff; --bm-btn-fg: var(--bm-marino); --bm-btn-bd: #fff; }
.bm-header--sobre .bm-header__cta .bm-btn:hover { --bm-btn-bg: var(--bm-celeste); --bm-btn-bd: var(--bm-celeste); }
.bm-header--sobre .bm-toggler { color: #fff; border-color: rgba(255, 255, 255, .4); }
.bm-header .navbar { min-height: var(--bm-header-h); padding-block: .55rem; }
.bm-brand {
    display: inline-flex; align-items: center; gap: .6rem; margin-right: 1.5rem;
    font-family: var(--bm-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em;
    color: var(--bm-texto); text-decoration: none;
}
.bm-brand:hover { color: var(--bm-texto); }
.bm-marca {
    display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none;
    background: var(--bm-azul); border-radius: 7px; position: relative; overflow: hidden;
}
.bm-marca img { width: 26px; height: auto; }

.bm-nav { gap: .15rem; }
.bm-nav .nav-link {
    font-size: 1.02rem; font-weight: 500; color: var(--bm-texto);
    padding: .5rem .8rem !important; border-radius: 6px; position: relative;
}
.bm-nav .nav-link:hover { color: var(--bm-azul); }
.bm-nav .nav-link[aria-current="page"] { color: var(--bm-azul); font-weight: 600; }
.bm-nav .nav-link[aria-current="page"]::after {
    content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .1rem; height: 2px; background: var(--bm-azul);
}
@media (min-width: 992px) { .bm-nav { margin-left: .25rem; } }

/* Boton del menu en celular: hamburguesa que pasa a X; el boton flotante de WhatsApp se aparta */
.bm-toggler[aria-expanded="true"] .bi-list::before { content: "\f659"; }
.bm-header:has(.navbar-collapse.show) ~ .bm-wa, .bm-header:has(.navbar-collapse.collapsing) ~ .bm-wa { display: none; }
.bm-header__actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.bm-lang > button {
    display: inline-flex; align-items: center; gap: .3rem; background: none; border: 0;
    font-weight: 600; font-size: .95rem; color: var(--bm-gris); padding: .5rem .4rem;
}
.bm-lang > button:hover { color: var(--bm-texto); }
.bm-lang .dropdown-menu { border: 1px solid var(--bm-linea); border-radius: var(--bm-radio); box-shadow: var(--bm-sombra-doc); padding: .35rem; min-width: 10rem; }
.bm-lang .dropdown-item { border-radius: 5px; font-weight: 500; padding: .45rem .7rem; }
.bm-lang .dropdown-item.active, .bm-lang .dropdown-item:active { background: var(--bm-celeste); color: var(--bm-azul-700); }
.bm-toggler {
    display: inline-grid; place-items: center; width: 44px; height: 44px;
    background: none; border: 1.5px solid var(--bm-linea-fuerte); border-radius: var(--bm-radio);
    font-size: 1.4rem; color: var(--bm-texto);
}
.bm-nav-lang { display: flex; gap: .5rem; padding: .75rem 0 .25rem; border-top: 1px solid var(--bm-linea); margin-top: .5rem; }
.bm-nav-lang a { flex: 1; text-align: center; padding: .6rem; border: 1px solid var(--bm-linea); border-radius: var(--bm-radio); color: var(--bm-texto); text-decoration: none; font-weight: 500; }
.bm-nav-lang a[aria-current="true"] { background: var(--bm-celeste); border-color: var(--bm-azul); color: var(--bm-azul-700); font-weight: 600; }
@media (max-width: 991.98px) {
    .bm-header .navbar > .container { flex-wrap: wrap; }
    .bm-header .navbar-collapse { flex-basis: 100%; }
    .bm-nav { padding-top: .75rem; }
    .bm-header .navbar-collapse { max-height: calc(100vh - var(--bm-header-h)); overflow-y: auto; }
    .bm-nav .nav-link { padding: .8rem .25rem !important; border-bottom: 1px solid var(--bm-linea); border-radius: 0; font-size: 1.1rem; }
    .bm-nav .nav-link[aria-current="page"]::after { display: none; }
}
.bm-nav-cta { display: none; }
@media (max-width: 575.98px) {
    .bm-header__cta { display: none; }
    .bm-nav-cta { display: block; padding-top: 1rem; }
    .bm-nav-cta .bm-btn { width: 100%; }
}
@media (max-width: 380px) { .bm-brand { font-size: 1.15rem; margin-right: .5rem; } }

/* Boton flotante de WhatsApp */
.bm-wa {
    position: fixed; right: 18px; bottom: 18px; z-index: 1020;
    display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
    background: #1FA855; color: #fff; font-size: 1.6rem; text-decoration: none;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45);
    transition: transform .2s var(--bm-ease);
}
.bm-wa:hover { color: #fff; transform: translateY(-2px); }

/* ---------------------------------------------------------------------
   Encabezado de pagina interna
   --------------------------------------------------------------------- */
.bm-page-head { padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 64px); background: var(--bm-blanco); border-bottom: 1px solid var(--bm-linea); }
.bm-page-head__inner { max-width: 860px; }
.bm-page-head .bm-h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
.bm-page-head .bm-lead { margin-bottom: 0; }
.bm-page-head--center .bm-page-head__inner { max-width: 860px; }
.bm-page-head--compacta { padding-bottom: clamp(28px, 4vw, 40px); }
.bm-page-head__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.bm-migas { display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: .92rem; color: var(--bm-gris); margin-bottom: 1.25rem; }
.bm-migas a { color: var(--bm-gris); text-decoration: none; }
.bm-migas a:hover { color: var(--bm-azul); text-decoration: underline; }
.bm-migas > * + *::before { content: "/"; margin-right: .5rem; color: var(--bm-linea-fuerte); }
.bm-migas [aria-current] { color: var(--bm-texto); }

/* La primera seccion despues del encabezado no repite todo el aire de arriba */
.bm-page-head + .bm-section, .bm-page-head + section > .bm-section:first-child { padding-top: clamp(48px, 6vw, 80px); }

/* Botones de Bootstrap que quedan en piezas heredadas (recorrido, configurador) */
.btn-primary { --bs-btn-bg: var(--bm-azul); --bs-btn-border-color: var(--bm-azul); --bs-btn-hover-bg: var(--bm-azul-700); --bs-btn-hover-border-color: var(--bm-azul-700); --bs-btn-active-bg: var(--bm-azul-700); --bs-btn-active-border-color: var(--bm-azul-700); font-weight: 600; border-radius: var(--bm-radio); }
.btn-light { font-weight: 600; border-radius: var(--bm-radio); }

/* ---------------------------------------------------------------------
   Preguntas frecuentes
   --------------------------------------------------------------------- */
.bm-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.bm-faq__aside { position: sticky; top: calc(var(--bm-header-h) + 28px); }
.bm-faq__aside .bm-eyebrow { color: var(--bm-gris); }
.bm-faq__list { border-top: 1.5px solid var(--bm-texto); }
.bm-faq__item { border-bottom: 1px solid var(--bm-linea); }
.bm-faq__q {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1.25rem;
    padding: 1.25rem 0; background: none; border: 0; text-align: left;
    font-family: var(--bm-font); font-size: 1.12rem; font-weight: 600; color: var(--bm-texto); line-height: 1.35;
}
.bm-faq__q .bi { flex: none; font-size: 1.1rem; color: var(--bm-azul); transition: transform .25s var(--bm-ease); }
.bm-faq__q[aria-expanded="true"] .bi { transform: rotate(45deg); }
.bm-faq__q:hover span { color: var(--bm-azul); }
.bm-faq__a { padding: 0 2.5rem 1.4rem 0; color: var(--bm-gris); max-width: 68ch; }
.bm-faq__a p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
    .bm-faq { grid-template-columns: 1fr; }
    .bm-faq__aside { position: static; }
}

/* ---------------------------------------------------------------------
   Cierre de cada pagina
   --------------------------------------------------------------------- */
.bm-close { background: var(--bm-marino); color: #fff; padding-block: clamp(72px, 9vw, 120px); position: relative; overflow: hidden; }
.bm-close__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.bm-close .bm-h2 { color: #fff; font-size: clamp(2.2rem, 4.4vw, 3.8rem); max-width: 16ch; }
.bm-close .bm-lead { color: var(--bm-sobre-marino); margin-bottom: 0; }
.bm-close__actions { display: grid; gap: .9rem; justify-items: start; }
.bm-close__actions .bm-btn { width: 100%; }
.bm-close__enlaces { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.bm-close__enlaces a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: .2em; display: inline-flex; gap: .4rem; align-items: center; }
.bm-close__enlaces a:hover { text-decoration-color: #fff; color: #fff; }
.bm-close__micro { font-size: .9rem; color: var(--bm-sobre-marino); margin: 0; }
/* La franja de marca: el mismo degradado corporativo de la plataforma */
.bm-close { background: var(--bm-franja); }
@media (max-width: 860px) { .bm-close__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   Pie de pagina
   --------------------------------------------------------------------- */
/* Pie: el mismo lenguaje de la portada. Degradado corporativo, entrada en diagonal,
   cuna mas oscura y la marca como palabra de fondo. */
.bm-footer {
    position: relative; overflow: hidden; isolation: isolate; color: var(--bm-sobre-marino); font-size: .97rem;
    padding: calc(clamp(56px, 7vw, 88px) + 3vw) 0 28px;
    background: linear-gradient(135deg, #040F3D 0%, #06175A 50%, #0A2FB5 100%);
    clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%);
}
.bm-footer::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(160deg, rgba(4, 15, 61, .1) 0%, rgba(4, 15, 61, .6) 100%);
    clip-path: polygon(0 55%, 100% 25%, 100% 100%, 0 100%);
}
.bm-footer::after {
    content: "BioMantenimiento"; position: absolute; z-index: -1; left: 50%; bottom: 3.2rem; transform: translateX(-50%); pointer-events: none;
    font-family: var(--bm-display); font-weight: 700; font-size: clamp(4rem, 13vw, 13rem); line-height: .8; letter-spacing: -.02em;
    color: rgba(255, 255, 255, .035); white-space: nowrap;
}
.bm-footer a { color: var(--bm-sobre-marino); text-decoration: none; transition: color .15s ease; }
.bm-footer a:hover { color: #fff; }
.bm-footer__main { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 40px 32px; padding-bottom: clamp(48px, 7vw, 120px); }
.bm-footer__logo { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--bm-display); font-size: 1.4rem; font-weight: 700; color: #fff !important; margin-bottom: 1rem; }
.bm-footer__logo .bm-marca { background: var(--bm-azul); }
.bm-footer__brand p { max-width: 34ch; margin-bottom: 1.25rem; }
.bm-footer__contacto { display: flex; flex-wrap: wrap; gap: .5rem; }
.bm-footer__boton {
    display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #fff !important; font-size: .92rem; font-weight: 500;
}
.bm-footer__boton:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); }
.bm-footer__boton .bi { color: var(--bm-azul-300); }
.bm-footer__badges { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-top: 1.25rem; }
.bm-footer__badges img { height: 36px; width: auto; }
.bm-footer__title { display: flex; align-items: center; gap: .5rem; font-family: var(--bm-font); font-size: .98rem; font-weight: 600; color: #fff; margin: 0 0 1.1rem; }
.bm-footer__title::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bm-azul-300); }
.bm-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.bm-footer__list li { display: flex; gap: .55rem; align-items: baseline; line-height: 1.4; }
.bm-footer__list .bi { color: var(--bm-azul-300); }
.bm-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .9rem; }
.bm-footer__bottom p { margin: 0; }
.bm-footer__bottom a { color: #fff; }
.bm-footer__dev { display: inline-flex; gap: .4rem; align-items: center; }
.bm-footer__dev span { color: var(--bm-gris-claro); }
@media (max-width: 991.98px) { .bm-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bm-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 575.98px) {
    .bm-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; padding-bottom: 40px; }
    .bm-footer__main > div:last-child { grid-column: 1 / -1; }
    .bm-footer__list { font-size: .92rem; }
    .bm-footer::after { bottom: auto; top: 3vw; font-size: 22vw; }
    .bm-footer__bottom { flex-direction: column; gap: .5rem; }
}

/* ---------------------------------------------------------------------
   Aviso de cookies
   --------------------------------------------------------------------- */
.bm-cookies {
    position: fixed; left: 16px; bottom: 16px; z-index: 1040; max-width: 360px;
    display: flex; gap: 1rem; align-items: center;
    padding: .85rem .9rem .85rem 1.1rem; background: var(--bm-blanco); color: var(--bm-texto);
    border: 1px solid var(--bm-linea); border-radius: var(--bm-radio); box-shadow: var(--bm-sombra-doc);
    font-size: .9rem; line-height: 1.4;
}
.bm-cookies[hidden] { display: none; }
.bm-cookies a { color: var(--bm-azul); }
.bm-cookies .bm-btn { min-height: 38px; padding: .4rem .9rem; font-size: .9rem; }
@media (max-width: 575.98px) { .bm-cookies { left: 12px; right: 84px; bottom: 12px; max-width: none; } }

/* ---------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------- */
.form-label { font-weight: 600; font-size: .95rem; color: var(--bm-texto); margin-bottom: .35rem; }
.form-control, .form-select {
    min-height: 48px; padding: .65rem .85rem; font-size: 1rem; color: var(--bm-texto);
    background-color: var(--bm-blanco); border: 1.5px solid var(--bm-linea-fuerte); border-radius: var(--bm-radio-doc);
}
.form-control::placeholder { color: var(--bm-gris-claro); }
.form-control:focus, .form-select:focus { border-color: var(--bm-azul); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bm-azul) 18%, transparent); }
textarea.form-control { min-height: 140px; }
.bm-form__nota { display: flex; gap: .45rem; align-items: center; font-size: .88rem; color: var(--bm-gris); margin: .75rem 0 0; }

/* ---------------------------------------------------------------------
   Contacto
   --------------------------------------------------------------------- */
.bm-contacto { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.bm-contacto__form { background: var(--bm-blanco); border: 1px solid var(--bm-linea); border-top: 4px solid var(--bm-azul); border-radius: var(--bm-radio-doc); padding: clamp(24px, 4vw, 44px); box-shadow: var(--bm-sombra-doc); }
.bm-canales { margin: 0; border-top: 1.5px solid var(--bm-texto); }
.bm-canal { display: grid; grid-template-columns: 9rem 1fr; gap: .25rem 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--bm-linea); }
.bm-canal dt { font-weight: 600; color: var(--bm-gris); font-size: .95rem; }
.bm-canal dd { margin: 0; display: grid; gap: .15rem; }
.bm-canal dd > a, .bm-canal dd > span { font-weight: 600; font-size: 1.05rem; color: var(--bm-texto); }
.bm-canal dd > a:hover { color: var(--bm-azul); }
.bm-canal small { color: var(--bm-gris); font-size: .9rem; }
@media (max-width: 860px) { .bm-contacto { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .bm-canal { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   Agendar demo
   --------------------------------------------------------------------- */
.bm-aviso-plan { display: inline-flex; gap: .5rem; align-items: center; margin: 1.5rem 0 0; padding: .6rem .9rem; background: var(--bm-celeste); border-left: 3px solid var(--bm-azul); border-radius: var(--bm-radio-doc); font-weight: 500; }
.bm-aviso-plan .bi { color: var(--bm-azul); }
.bm-demo { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.bm-demo__calendario { background: var(--bm-blanco); border: 1px solid var(--bm-linea); border-radius: var(--bm-radio-doc); overflow: hidden; box-shadow: var(--bm-sombra-doc); }
/* Cabecera del calendario: icono de marca, titulo y los datos de la cita en pildoras */
.bm-demo__cabeza { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--bm-linea); }
.bm-demo__icono { flex: none; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 14px; background: var(--bm-azul); color: #fff; font-size: 1.3rem; }
.bm-demo__cabeza-titulo { font-size: 1.35rem; margin: 0 0 .45rem; }
.bm-demo__datos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.bm-demo__datos li { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .75rem; border-radius: 999px; background: var(--bm-celeste); color: var(--bm-azul-700); font-size: .85rem; font-weight: 600; }
/* Alto suficiente para ver la lista de horarios sin que quede cortada */
.bm-demo__iframe { position: relative; z-index: 1; display: block; width: 100%; height: 860px; border: 0; }
/* Aviso de carga detras del iframe; site.js agrega .is-listo cuando Google termina de cargar */
.bm-demo__marco { position: relative; }
.bm-demo__marco.is-listo .bm-demo__cargando { display: none; }
.bm-demo__cargando { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding-bottom: 20%; color: var(--bm-gris); font-weight: 500; }
.bm-demo__spinner { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 3px solid var(--bm-celeste); border-top-color: var(--bm-azul); animation: bm-gira .8s linear infinite; }
@keyframes bm-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bm-demo__spinner { animation-duration: 2.4s; } }
.bm-demo__pie { margin: 0; padding: .8rem 1.5rem; border-top: 1px solid var(--bm-linea); background: var(--bm-niebla); color: var(--bm-gris); font-size: .9rem; }
.bm-demo__pie a { color: var(--bm-azul); font-weight: 600; }
.bm-demo__aside { display: grid; gap: 16px; }
/* Cada bloque de la columna como tarjeta, igual que la del calendario */
.bm-demo__bloque { padding: 1.4rem 1.5rem; background: var(--bm-blanco); border: 1px solid var(--bm-linea); border-radius: 20px; box-shadow: var(--bm-sombra-tarjeta); }
.bm-demo__bloque .bm-link { display: flex; margin-top: .4rem; }
.bm-demo__titulo { font-size: 1.3rem; margin: 0 0 .9rem; }
.bm-demo__pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; gap: .9rem; }
.bm-demo__pasos li { counter-increment: paso; display: grid; grid-template-columns: 2rem 1fr; gap: .1rem .6rem; }
.bm-demo__pasos li::before { content: counter(paso); grid-row: span 2; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--bm-celeste); color: var(--bm-azul-700); font-weight: 700; font-size: .9rem; }
.bm-demo__pasos strong { font-weight: 600; }
.bm-demo__pasos span { color: var(--bm-gris); font-size: .95rem; }
@media (max-width: 991.98px) { .bm-demo { grid-template-columns: 1fr; } .bm-demo__iframe { height: 820px; } .bm-demo__cabeza { padding: 1rem 1.1rem; } }

/* ---------------------------------------------------------------------
   Planes
   --------------------------------------------------------------------- */
.bm-pricing-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.bm-billing { display: inline-flex; padding: 4px; background: var(--bm-niebla); border: 1px solid var(--bm-linea); border-radius: 10px; }
.bm-billing button { display: inline-flex; gap: .45rem; align-items: center; border: 0; background: none; padding: .55rem 1rem; border-radius: 7px; font-weight: 600; color: var(--bm-gris); }
.bm-billing button[aria-pressed="true"] { background: var(--bm-blanco); color: var(--bm-texto); box-shadow: 0 1px 3px rgba(6,23,90,.15); }
.bm-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--bm-linea); border-radius: var(--bm-radio-doc); background: var(--bm-blanco); }
.bm-plan { position: relative; display: flex; flex-direction: column; gap: 1.1rem; padding: clamp(24px, 3vw, 36px); }
.bm-plan + .bm-plan { border-left: 1px solid var(--bm-linea); }
.bm-plan--featured { background: var(--bm-marino); color: #fff; margin: -1px; border-radius: var(--bm-radio-doc); box-shadow: inset 0 6px 0 var(--bm-azul); }
.bm-plan--featured + .bm-plan { border-left-color: transparent; }
.bm-plan__name { font-size: 1.7rem; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.bm-plan--featured .bm-plan__name { color: #fff; }
.bm-plan--featured .bm-pill--info { background: var(--bm-etiqueta); color: var(--bm-texto); }
.bm-plan__for { margin: .35rem 0 0; color: var(--bm-gris); }
.bm-plan--featured .bm-plan__for, .bm-plan--featured .bm-plan__billed, .bm-plan--featured .bm-micro, .bm-plan--featured .bm-checks li { color: var(--bm-sobre-marino); }
.bm-plan--featured .bm-checks li.is-plus { color: #fff; }
.bm-plan--featured .bm-checks .bi { color: var(--bm-azul-300); }
.bm-plan__amount { font-family: var(--bm-display); font-size: clamp(2.4rem, 3.6vw, 3rem); font-weight: 600; line-height: 1; }
.bm-plan__amount small { font-family: var(--bm-font); font-size: 1rem; font-weight: 500; color: var(--bm-gris); }
.bm-plan--featured .bm-plan__amount small { color: var(--bm-sobre-marino); }
.bm-plan__billed { margin: .4rem 0 0; font-size: .92rem; color: var(--bm-gris); }
.bm-plan__limits { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--bm-linea); }
.bm-plan--featured .bm-plan__limits { border-color: rgba(255,255,255,.16); }
.bm-plan__limit { padding: .8rem 0; display: grid; }
.bm-plan__limit + .bm-plan__limit { padding-left: 1rem; border-left: 1px solid var(--bm-linea); }
.bm-plan--featured .bm-plan__limit + .bm-plan__limit { border-left-color: rgba(255,255,255,.16); }
.bm-plan__limit strong { font-family: var(--bm-display); font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.bm-plan__limit span { font-size: .88rem; color: var(--bm-gris); }
.bm-plan--featured .bm-plan__limit span { color: var(--bm-sobre-marino); }
.bm-plan .bm-checks { flex: 1; align-content: start; }
.bm-plan > .bm-btn { width: 100%; }
.bm-plan--featured > .bm-btn { --bm-btn-bg: #fff; --bm-btn-fg: var(--bm-marino); --bm-btn-bd: #fff; }
.bm-plan--featured > .bm-btn:hover { --bm-btn-bg: var(--bm-celeste); --bm-btn-bd: var(--bm-celeste); }
.bm-plan__recommend { position: absolute; top: 14px; right: 14px; }
.bm-plan.is-recommended { outline: 2px solid var(--bm-azul); outline-offset: -2px; }
@media (max-width: 991.98px) {
    .bm-plans { grid-template-columns: 1fr; }
    .bm-plan + .bm-plan { border-left: 0; border-top: 1px solid var(--bm-linea); }
}

.bm-compare-wrap { overflow-x: auto; border-top: 1.5px solid var(--bm-texto); }
.bm-compare { width: 100%; min-width: 640px; border-collapse: collapse; }
.bm-compare th, .bm-compare td { padding: .95rem 1rem; border-bottom: 1px solid var(--bm-linea); text-align: center; }
.bm-compare th:first-child, .bm-compare td:first-child { text-align: left; padding-left: 0; }
.bm-compare thead th { font-family: var(--bm-display); font-size: 1.25rem; font-weight: 600; }
.bm-compare .is-featured { background: var(--bm-celeste); }
.bm-compare .bi-check-circle-fill { color: var(--bm-azul); font-size: 1.1rem; }
.bm-no { color: var(--bm-gris-claro); }

/* Terminos y su descripcion (lo que trae un modulo o un plan) */
.bm-terminos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); margin: 0; }
.bm-terminos > div { padding: 1.1rem 0; border-top: 1px solid var(--bm-linea); }
.bm-terminos dt { font-weight: 600; font-size: 1.05rem; margin-bottom: .25rem; }
.bm-terminos dd { margin: 0; color: var(--bm-gris); }
.bm-terminos--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bm-terminos--extras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991.98px) { .bm-terminos--cuatro, .bm-terminos--extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .bm-terminos, .bm-terminos--cuatro, .bm-terminos--extras { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   Funcionalidades: indice fijo + modulos como un manual
   --------------------------------------------------------------------- */
.bm-manual { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.bm-indice { position: sticky; top: calc(var(--bm-header-h) + 24px); display: grid; gap: 1.2rem; }
.bm-indice__cabeza { font-weight: 600; color: var(--bm-gris); margin: 0; font-size: .95rem; }
.bm-indice__titulo { font-family: var(--bm-display); font-size: 1.1rem; font-weight: 600; margin: 0 0 .35rem; }
.bm-indice__grupo ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--bm-linea); }
.bm-indice__grupo a { display: block; padding: .3rem 0 .3rem .9rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--bm-gris); text-decoration: none; font-size: .97rem; }
.bm-indice__grupo a:hover { color: var(--bm-texto); }
.bm-indice__grupo a[aria-current] { color: var(--bm-azul-700); border-left-color: var(--bm-azul); font-weight: 600; }
.bm-indice__cta { margin-top: .5rem; }
.bm-manual__modulos { display: grid; gap: clamp(64px, 8vw, 112px); min-width: 0; }
.bm-modulo { scroll-margin-top: calc(var(--bm-header-h) + 24px); }
.bm-modulo__nombre { display: inline-block; font-family: var(--bm-mono); font-size: .85rem; font-weight: 500; color: var(--bm-azul-700); background: var(--bm-celeste); padding: .2rem .5rem; border-radius: 3px; margin: 0 0 .9rem; }
.bm-modulo__titulo { font-size: clamp(1.9rem, 3vw, 2.6rem); margin: 0 0 .6rem; max-width: 22ch; }
.bm-modulo__entrada { color: var(--bm-gris); font-size: 1.12rem; max-width: 62ch; margin-bottom: 1.6rem; }
.bm-modulo__captura { margin: 0 0 1.5rem; border-radius: var(--bm-radio-foto); overflow: hidden; border: 1px solid var(--bm-linea); box-shadow: var(--bm-sombra-foto); background: var(--bm-niebla); }
.bm-modulo__captura img { display: block; width: 100%; }
@media (max-width: 991.98px) {
    .bm-manual { grid-template-columns: 1fr; }
    .bm-indice { position: sticky; top: var(--bm-header-h); z-index: 5; display: flex; gap: .5rem; overflow-x: auto; padding: .75rem 0; margin-inline: calc(-1 * clamp(16px, 4vw, 40px)); padding-inline: clamp(16px, 4vw, 40px); background: rgba(255,255,255,.96); border-bottom: 1px solid var(--bm-linea); scrollbar-width: none; }
    .bm-indice__cabeza, .bm-indice__titulo, .bm-indice__cta { display: none; }
    .bm-indice__grupo ul { display: flex; gap: .4rem; border: 0; }
    .bm-indice__grupo a { white-space: nowrap; border: 1px solid var(--bm-linea); border-radius: 999px; padding: .35rem .8rem; margin: 0; font-size: .9rem; }
    .bm-indice__grupo a[aria-current] { background: var(--bm-celeste); border-color: var(--bm-azul); }
}

/* ---------------------------------------------------------------------
   Roles
   --------------------------------------------------------------------- */
.bm-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); }
.bm-role { border-top: 1.5px solid var(--bm-texto); padding-top: 1.1rem; }
.bm-role__tag { display: flex; gap: .5rem; align-items: center; font-weight: 600; color: var(--bm-azul); margin-bottom: .6rem; }
.bm-role .bm-h3 { font-size: 1.35rem; }
.bm-role .bm-text { font-size: .98rem; margin: 0; }
@media (max-width: 991.98px) { .bm-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
@media (max-width: 575.98px) { .bm-roles { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   Video (se inserta al hacer clic)
   --------------------------------------------------------------------- */
.bm-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--bm-radio-foto); overflow: hidden; background: var(--bm-marino); box-shadow: var(--bm-sombra-foto); }
.bm-video img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .3s ease, transform .6s var(--bm-ease); }
.bm-video:hover img { opacity: 1; transform: scale(1.015); }
.bm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bm-video__play { position: absolute; left: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.2rem .7rem .8rem; border-radius: 999px; background: #fff; color: var(--bm-marino); font-weight: 600; }
.bm-video__play .bi { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bm-azul); color: #fff; font-size: 1.3rem; }

/* ---------------------------------------------------------------------
   Logos de clientes: una cinta que corre sola
   --------------------------------------------------------------------- */
.bm-logos { padding-block: clamp(36px, 5vw, 56px); border-block: 1px solid var(--bm-linea); background: var(--bm-blanco); }
.bm-logos__inner { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 2rem; align-items: center; }
.bm-logos__label { margin: 0; color: var(--bm-gris); font-size: .98rem; line-height: 1.4; }
.bm-logos__label strong { display: block; font-family: var(--bm-display); font-size: 1.35rem; font-weight: 600; color: var(--bm-texto); }
.bm-logos__cinta { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.bm-logos__pista { display: flex; width: max-content; gap: clamp(36px, 5vw, 64px); list-style: none; margin: 0; padding: 0; animation: bm-cinta 48s linear infinite; }
.bm-logos__cinta:hover .bm-logos__pista { animation-play-state: paused; }
.bm-logos__item { flex: none; display: grid; place-items: center; height: 64px; }
.bm-logos__item img { max-height: 56px; max-width: 150px; width: auto; filter: grayscale(1) contrast(1.1); opacity: .7; mix-blend-mode: multiply; transition: filter .25s ease, opacity .25s ease; }
.bm-logos__item img:hover { filter: none; opacity: 1; }
@keyframes bm-cinta { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bm-logos__pista { animation: none; flex-wrap: wrap; width: auto; } }
@media (max-width: 767.98px) { .bm-logos__inner { grid-template-columns: 1fr; gap: 1rem; } }

/* ---------------------------------------------------------------------
   Blog
   --------------------------------------------------------------------- */
.bm-articulos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 40px); }
.bm-articulo__enlace { display: grid; gap: 1rem; color: inherit; text-decoration: none; }
.bm-articulo__img { aspect-ratio: 16 / 10; border-radius: var(--bm-radio); overflow: hidden; background: var(--bm-niebla); }
.bm-articulo__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--bm-ease); }
.bm-articulo__enlace:hover .bm-articulo__img img { transform: scale(1.03); }
.bm-articulo__fecha { font-size: .88rem; color: var(--bm-gris); }
.bm-articulo__titulo { font-size: 1.45rem; margin: .25rem 0 .5rem; }
.bm-articulo__enlace:hover .bm-articulo__titulo { color: var(--bm-azul); }
.bm-articulo__resumen { color: var(--bm-gris); font-size: .98rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 991.98px) { .bm-articulos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .bm-articulos { grid-template-columns: 1fr; } }

.bm-lectura__cabeza { padding: clamp(48px, 7vw, 88px) 0 clamp(28px, 4vw, 40px); }
.bm-lectura__cabeza > .container, .bm-lectura > .container { max-width: 860px; }
.bm-lectura__titulo { font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: 1.04; margin: 0 0 1rem; }
.bm-lectura__meta { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; color: var(--bm-gris); font-size: .95rem; margin: 0; }
.bm-lectura__portada { margin: 0 0 clamp(32px, 5vw, 56px); border-radius: var(--bm-radio-foto); overflow: hidden; }
.bm-lectura__portada img { display: block; width: 100%; height: auto; }
.bm-lectura__compartir { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: 1.25rem 0; margin-top: 2.5rem; border-top: 1px solid var(--bm-linea); font-weight: 600; }
.bm-lectura__compartir a { display: inline-flex; gap: .35rem; align-items: center; color: var(--bm-texto); text-decoration: none; font-weight: 500; }
.bm-lectura__compartir a:hover { color: var(--bm-azul); }

/* Texto largo: articulos y guias */
.bm-prosa { font-size: 1.12rem; line-height: 1.7; color: #26304A; max-width: 70ch; }
.bm-prosa h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin: 2.4em 0 .6em; }
.bm-prosa h3 { font-size: 1.4rem; margin: 2em 0 .5em; }
.bm-prosa p, .bm-prosa ul, .bm-prosa ol { margin-bottom: 1.15em; }
.bm-prosa li { margin-bottom: .4em; }
.bm-prosa ul li::marker { color: var(--bm-azul); }
.bm-prosa a { color: var(--bm-azul); font-weight: 500; }
.bm-prosa img { border-radius: var(--bm-radio); margin-block: 1em; }
.bm-prosa blockquote { margin: 1.5em 0; padding: .25em 0 .25em 1.25em; border-left: 3px solid var(--bm-azul); color: var(--bm-texto); font-size: 1.2rem; }
.bm-prosa table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 1rem; }
.bm-prosa th, .bm-prosa td { border-bottom: 1px solid var(--bm-linea); padding: .7rem .75rem .7rem 0; text-align: left; vertical-align: top; }
.bm-prosa thead th { border-bottom: 1.5px solid var(--bm-texto); font-weight: 600; }
.bm-prosa > :first-child { margin-top: 0; }
.bm-prosa .bm-tabla { overflow-x: auto; }

.bm-entrada { font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.5; color: var(--bm-texto); padding-left: 1.1rem; border-left: 4px solid var(--bm-azul); margin: 0 0 1rem; max-width: 62ch; }
.bm-firma { font-size: .92rem; color: var(--bm-gris); margin: 0 0 clamp(32px, 5vw, 56px); }

.bm-blog-mas { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 88px); }
.bm-recientes { list-style: none; margin: 0 0 1.25rem; padding: 0; border-top: 1.5px solid var(--bm-texto); }
.bm-recientes li { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--bm-linea); }
.bm-recientes a { font-weight: 600; color: var(--bm-texto); text-decoration: none; }
.bm-recientes a:hover { color: var(--bm-azul); }
.bm-recientes time { flex: none; font-size: .88rem; color: var(--bm-gris); }
.bm-boletin { background: var(--bm-celeste); border-radius: var(--bm-radio-doc); padding: clamp(24px, 3vw, 36px); align-self: start; }
.bm-boletin__form { display: flex; gap: .5rem; flex-wrap: wrap; }
.bm-boletin__form .form-control { flex: 1 1 14rem; }
@media (max-width: 860px) { .bm-blog-mas { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   Paginas de sector y guias
   --------------------------------------------------------------------- */
.bm-ficha-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.bm-ficha-lista li { display: grid; grid-template-columns: 2.4rem 1fr; grid-template-rows: min-content 1fr; gap: .3rem .9rem; padding: 1.4rem 0; border-top: 1px solid var(--bm-linea); }
.bm-ficha-lista .bi { grid-row: span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 6px; background: var(--bm-celeste); color: var(--bm-azul-700); font-size: 1.15rem; }
.bm-ficha-lista h3 { font-family: var(--bm-font); font-size: 1.1rem; font-weight: 600; margin: 0; line-height: 1.3; align-self: center; min-height: 2.4rem; display: flex; align-items: center; }
.bm-ficha-lista p { margin: 0; color: var(--bm-gris); font-size: .98rem; }
@media (max-width: 991.98px) { .bm-ficha-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .bm-ficha-lista { grid-template-columns: 1fr; } }

.bm-relacionados { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.bm-relacionados a { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border: 1.5px solid var(--bm-linea-fuerte); border-radius: var(--bm-radio); color: var(--bm-texto); font-weight: 600; text-decoration: none; transition: border-color .18s ease, background-color .18s ease; }
.bm-relacionados a:hover { border-color: var(--bm-azul); background: var(--bm-celeste); color: var(--bm-azul-700); }
.bm-relacionados .bi { color: var(--bm-azul); }

/* Dos columnas: texto a la izquierda, contexto a la derecha */
.bm-dos { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
@media (max-width: 860px) { .bm-dos { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   Movimiento: nada se mueve si la persona lo pidio asi
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   Lenguaje comun de las secciones, el mismo de la portada: titulos
   centrados, tarjetas redondeadas con sombra suave (una destacada en azul
   de marca), botones en pildora, encabezados de pagina sobre el degradado
   corporativo y el cierre como una tarjeta con ese mismo degradado.
   ===================================================================== */
:root {
    --bm-radio-tarjeta: 20px;
    --bm-sombra-tarjeta: 0 1px 2px rgba(6, 23, 90, .04), 0 20px 44px -30px rgba(6, 23, 90, .35);
    --bm-sombra-tarjeta-alta: 0 1px 2px rgba(6, 23, 90, .05), 0 30px 56px -30px rgba(6, 23, 90, .5);
}

/* Botones en pildora */
.bm-btn, .bm-billing, .bm-billing button, .bm-relacionados a { border-radius: 999px; }

/* Titulos de seccion centrados, con su texto debajo */
.bm-section-head, .bm-section-head--center { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: .9rem; }
/* Mas ancho y balanceado: el titulo queda en lineas parejas, sin una linea corta en medio */
.bm-section-head .bm-h2 { max-width: 34ch; text-wrap: balance; }
.bm-section-head .bm-lead { max-width: 62ch; margin-inline: auto; }

/* Tarjetas */
.bm-role, .bm-ficha-lista li, .bm-terminos > div {
    padding: 1.5rem; background: #fff; border: 1px solid var(--bm-linea); border-radius: var(--bm-radio-tarjeta);
    box-shadow: var(--bm-sombra-tarjeta); transition: transform .25s var(--bm-ease), box-shadow .25s ease;
}
.bm-role:hover, .bm-ficha-lista li:hover, .bm-terminos > div:hover { transform: translateY(-3px); box-shadow: var(--bm-sombra-tarjeta-alta); }
.bm-roles, .bm-ficha-lista { gap: 20px; }
.bm-terminos, .bm-terminos--cuatro, .bm-terminos--extras { gap: 16px; }
.bm-role__tag .bi { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 10px; background: var(--bm-celeste); }
/* La tarjeta destacada del grupo de roles: el tecnico, que es quien usa la app en campo */
.bm-role:nth-child(2) { background: var(--bm-azul); border-color: transparent; color: #fff; }
.bm-role:nth-child(2) .bm-h3 { color: #fff; }
.bm-role:nth-child(2) .bm-text { color: #DCE5FA; }
.bm-role:nth-child(2) .bm-role__tag { color: #fff; }
.bm-role:nth-child(2) .bm-role__tag .bi { background: rgba(255, 255, 255, .16); }

/* Preguntas frecuentes en tarjetas */
.bm-faq__list { display: grid; gap: 12px; border-top: 0; }
.bm-faq__item { padding: 0 1.4rem; background: #fff; border: 1px solid var(--bm-linea); border-radius: 16px; box-shadow: var(--bm-sombra-tarjeta); }
.bm-faq__a { padding-right: 0; }

/* Medios y bloques con las mismas esquinas */
.bm-video, .bm-modulo__captura, .bm-demo__calendario, .bm-contacto__form, .bm-boletin, .bm-lectura__portada { border-radius: 24px; }
.bm-articulo__img { border-radius: 16px; }
.bm-plans { border-radius: 24px; }
.bm-plan--featured { border-radius: 24px; }
.bm-compare-wrap { border-top: 0; background: #fff; border: 1px solid var(--bm-linea); border-radius: 20px; padding: 0 1.25rem; box-shadow: var(--bm-sombra-tarjeta); max-width: 960px; margin-inline: auto; }
.bm-compare th, .bm-compare td { padding: .7rem .9rem; font-size: .95rem; }
.bm-compare thead th { font-size: 1.1rem; }
.bm-compare th:last-child, .bm-compare td:last-child { padding-right: 0; }
.bm-canales { padding: .25rem 1.4rem; border-top: 0; background: #fff; border: 1px solid var(--bm-linea); border-radius: 20px; box-shadow: var(--bm-sombra-tarjeta); }
.bm-canal:last-child { border-bottom: 0; }

/* Encabezado de las paginas internas: el mismo fondo de la portada (degradado y cuna diagonal) */
.bm-page-head {
    position: relative; overflow: hidden; isolation: isolate; color: #fff; border-bottom: 0;
    margin-top: calc(-1 * var(--bm-header-h) - 1px);
    padding: calc(var(--bm-header-h) + clamp(48px, 6vw, 88px)) 0 clamp(48px, 6vw, 80px);
    background:
        radial-gradient(45% 70% at 80% 30%, rgba(120, 160, 255, .3), transparent 70%),
        linear-gradient(135deg, #040F3D 0%, #0A2FB5 60%, #0540F2 100%);
}
.bm-page-head::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(160deg, rgba(4, 15, 61, .25) 0%, rgba(4, 15, 61, .7) 100%);
    clip-path: polygon(0 72%, 100% 30%, 100% 100%, 0 100%);
}
.bm-page-head .bm-h1 { color: #fff; }
.bm-page-head .bm-lead { color: #C9D5F5; }
.bm-page-head .bm-eyebrow { color: var(--bm-azul-300); }
.bm-page-head .bm-migas, .bm-page-head .bm-migas a { color: var(--bm-sobre-marino); }
.bm-page-head .bm-migas [aria-current] { color: #fff; }
.bm-page-head .bm-migas > * + *::before { color: rgba(255, 255, 255, .35); }
.bm-page-head .bm-btn--secondary { --bm-btn-bg: transparent; --bm-btn-fg: #fff; --bm-btn-bd: rgba(255, 255, 255, .45); }
.bm-page-head .bm-btn--secondary:hover { --bm-btn-bg: rgba(255, 255, 255, .08); --bm-btn-fg: #fff; --bm-btn-bd: #fff; }
.bm-page-head .bm-page-head__acciones .bm-btn:not(.bm-btn--secondary) { --bm-btn-bg: #fff; --bm-btn-fg: var(--bm-marino); --bm-btn-bd: #fff; }
.bm-page-head .bm-aviso-plan { color: var(--bm-texto); }

/* Cierre: una tarjeta con el degradado corporativo, la cuna diagonal y una palabra de fondo */
.bm-close { background: transparent; color: var(--bm-texto); padding-block: clamp(56px, 7vw, 104px); overflow: visible; }
.bm-close__grid {
    position: relative; overflow: hidden; isolation: isolate; color: #fff;
    padding: clamp(36px, 5vw, 72px); border-radius: 28px; background: var(--bm-franja);
    box-shadow: 0 40px 80px -40px rgba(6, 23, 90, .6);
}
.bm-close__grid::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(160deg, rgba(4, 15, 61, .2) 0%, rgba(4, 15, 61, .65) 100%);
    clip-path: polygon(0 70%, 100% 25%, 100% 100%, 0 100%);
}
.bm-close__grid::after {
    content: "DEMO"; position: absolute; z-index: -1; right: -1.5rem; bottom: -2.5rem; pointer-events: none;
    font-family: var(--bm-display); font-weight: 700; font-size: clamp(7rem, 16vw, 14rem); line-height: .8;
    color: rgba(255, 255, 255, .06); white-space: nowrap;
}

/* =====================================================================
   ESTANDAR DE SECCIONES: como cambia el fondo de una seccion a otra
   ---------------------------------------------------------------------
   1. Cada seccion responde una pregunta del cliente (que es, que problema
      resuelve, como funciona, que incluye, para quien es, dudas, como
      empiezo). Cuando cambia la pregunta, cambia el fondo.
   2. Tres tonos:
        .bm-fondo-blanco  contenido principal
        .bm-fondo-claro   contenido de apoyo (azul muy suave)
        .bm-fondo-marino  solo momentos de demostracion; entra en diagonal
   3. Dos secciones que responden la misma pregunta comparten fondo y la
      segunda lleva .bm-mismo-tema (menos aire arriba, sin etiqueta).
   4. Cada tema nuevo abre con su etiqueta: <span class="bm-tema">El problema</span>
   5. Nunca dos fondos iguales seguidos si cambia el tema. El cierre va
      siempre antes del pie; si la seccion anterior es blanca, el cierre
      usa .bm-close--claro.
   ===================================================================== */
.bm-fondo-blanco { background: #fff; }
.bm-fondo-claro, .bm-section--mist, .bm-section--paper { background: var(--bm-niebla); }
.bm-fondo-marino {
    position: relative; isolation: isolate; color: #fff;
    background: linear-gradient(135deg, #040F3D 0%, #06175A 45%, #0A2FB5 100%);
    clip-path: polygon(0 0, 100% 4vw, 100% 100%, 0 100%); padding-top: calc(var(--bm-section) + 4vw);
}
.bm-fondo-marino .bm-h2, .bm-fondo-marino .bm-h3 { color: #fff; }
.bm-fondo-marino .bm-lead, .bm-fondo-marino .bm-text { color: var(--bm-sobre-marino); }
.bm-section.bm-mismo-tema { padding-top: clamp(8px, 1.5vw, 24px); }

/* Etiqueta de tema: dice en que punto de la explicacion esta el visitante */
.bm-tema {
    display: inline-flex; align-items: center; gap: .45rem; width: max-content;
    padding: .35rem .9rem; border-radius: 999px; background: var(--bm-celeste); color: var(--bm-azul-700);
    font-size: .88rem; font-weight: 600; line-height: 1.2;
}
.bm-tema::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bm-fondo-claro .bm-tema { background: #fff; box-shadow: 0 1px 2px rgba(6, 23, 90, .06); }
.bm-fondo-marino .bm-tema, .journey9.bm-ot .bm-tema { background: rgba(255, 255, 255, .1); color: var(--bm-azul-300); }
.bm-section-head .bm-tema { margin-bottom: -.1rem; }

/* El cierre sobre fondo claro, cuando la seccion anterior es blanca */
.bm-close--claro { background: var(--bm-niebla); }

/* =====================================================================
   Funcionalidades con el estandar: encabezado (marino), recorrido
   (marino, en diagonal), manual (claro, cada modulo
   en su tarjeta blanca) y cierre (blanco).
   ===================================================================== */

/* Manual: el indice y cada modulo como tarjetas sobre el fondo claro */
.bm-manual { gap: clamp(24px, 3vw, 40px); }
.bm-manual__modulos { gap: 24px; }
.bm-modulo {
    padding: clamp(24px, 3.5vw, 48px); background: #fff; border: 1px solid var(--bm-linea);
    border-radius: 28px; box-shadow: var(--bm-sombra-tarjeta);
}
.bm-modulo__nombre {
    display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .9rem; border-radius: 999px;
    background: var(--bm-celeste); color: var(--bm-azul-700); font-family: var(--bm-font); font-size: .88rem; font-weight: 600;
}
.bm-modulo__nombre::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bm-modulo__captura { border-radius: 18px; }
.bm-modulo .bm-terminos > div { box-shadow: none; background: var(--bm-niebla); border-color: transparent; }
.bm-modulo .bm-terminos > div:hover { transform: none; box-shadow: none; }
@media (min-width: 992px) {
    .bm-indice { padding: 1.4rem; background: #fff; border: 1px solid var(--bm-linea); border-radius: 24px; box-shadow: var(--bm-sombra-tarjeta); }
}
.bm-modulo .bm-modulo__titulo { max-width: 30ch; }
@media (max-width: 575.98px) {
    .bm-modulo { padding: 20px 16px; border-radius: 22px; }
    .bm-modulo .bm-terminos > div { padding: 1rem; }
}

/* ---------------------------------------------------------------------
   Funcionalidades: un bloque por modulo. Texto y captura en dos columnas,
   alternando el lado y el fondo (blanco / claro) de un modulo a otro.
   --------------------------------------------------------------------- */
.bm-bloque { scroll-margin-top: var(--bm-header-h); }
.bm-bloque__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.bm-bloque--inverso .bm-bloque__texto { order: 2; }
.bm-bloque--sin-captura .bm-bloque__grid { grid-template-columns: minmax(0, 1fr); }
.bm-bloque--sin-captura .bm-terminos--checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.5rem; }
.bm-bloque__texto .bm-h2 { margin: 1rem 0 .6rem; max-width: 22ch; font-size: clamp(1.9rem, 2.8vw, 2.6rem); text-wrap: balance; }
.bm-bloque__texto .bm-lead { margin-bottom: 1.5rem; }
.bm-bloque__captura {
    margin: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--bm-linea); background: var(--bm-niebla);
    box-shadow: 0 40px 80px -44px rgba(6, 23, 90, .5);
}
.bm-bloque__captura img { display: block; width: 100%; height: auto; }
/* Entrada de la captura al llegar a ella */
.bm-bloque__captura.aparece { opacity: 0; transform: translateY(28px) scale(.98); transition: opacity .7s ease, transform .9s var(--bm-ease); }
.bm-bloque--inverso .bm-bloque__captura.aparece { transform: translateY(28px) scale(.98); }
.bm-bloque__captura.aparece.is-visible { opacity: 1; transform: none; }

/* Puntos del modulo como lista con check, sin tarjetas */
.bm-terminos--checks { display: grid; grid-template-columns: 1fr; gap: .9rem; margin: 0; }
.bm-terminos--checks > div,
.bm-terminos--checks > div:hover { position: relative; padding: 0 0 0 2.1rem; background: none; border: 0; border-radius: 0; box-shadow: none; transform: none; }
.bm-terminos--checks > div::before {
    content: "\f272"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: .1rem;
    display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%;
    background: var(--bm-celeste); color: var(--bm-azul); font-size: .8rem;
}
.bm-fondo-claro .bm-terminos--checks > div::before { background: #fff; }
.bm-terminos--checks dt { font-size: 1.02rem; margin-bottom: .1rem; }
.bm-terminos--checks dd { font-size: .97rem; }

/* Bloque final "Y ademas": tarjetas en tres columnas */
#y-ademas .bm-terminos--extras > div { background: #fff; }
#y-ademas.bm-fondo-blanco .bm-terminos--extras > div { background: var(--bm-niebla); box-shadow: none; }

@media (max-width: 991.98px) {
    .bm-bloque__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .bm-bloque--inverso .bm-bloque__texto { order: 0; }
    .bm-bloque--sin-captura .bm-terminos--checks { grid-template-columns: 1fr; }
}
.bm-bloque--inverso .bm-bloque__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 991.98px) { .bm-bloque--inverso .bm-bloque__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------
   Riel de modulos (Funcionalidades): puntos fijos al borde derecho que
   marcan el modulo que se lee. Solo aparece en la zona de modulos.
   --------------------------------------------------------------------- */
.bm-riel { position: fixed; z-index: 1010; opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s var(--bm-ease); }
.bm-riel.is-visible { opacity: 1; pointer-events: auto; }
.bm-riel__movil { display: none; }
.bm-riel__puntos { list-style: none; margin: 0; padding: 10px 8px; display: grid; gap: 6px; border-radius: 999px; background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--bm-linea); box-shadow: var(--bm-sombra-tarjeta); }
.bm-riel__puntos a { position: relative; display: grid; place-items: center; width: 16px; height: 16px; text-decoration: none; }
.bm-riel__puntos a i { display: block; width: 7px; height: 7px; border-radius: 999px; background: var(--bm-linea-fuerte); transition: height .3s var(--bm-ease), background-color .2s; }
.bm-riel__puntos a:hover i { background: var(--bm-azul-300); }
.bm-riel__puntos a[aria-current] i { height: 18px; background: var(--bm-azul); }
.bm-riel__puntos a[aria-current] { height: 22px; }
/* Nombre del modulo: siempre en el actual, al pasar el mouse en los demas */
.bm-riel__nombre {
    position: absolute; right: calc(100% + 14px); top: 50%; transform: translate(6px, -50%); white-space: nowrap;
    padding: .3rem .75rem; border-radius: 999px; background: var(--bm-marino); color: #fff; font-size: .82rem; font-weight: 600;
    opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .25s var(--bm-ease);
    box-shadow: 0 10px 24px -12px rgba(6, 23, 90, .6);
}
.bm-riel__puntos a:hover .bm-riel__nombre { opacity: 1; transform: translate(0, -50%); }
.bm-riel__puntos a[aria-current] .bm-riel__nombre { background: var(--bm-azul); }
.bm-riel.is-cambio a[aria-current] .bm-riel__nombre, .bm-riel__puntos:hover a[aria-current]:hover .bm-riel__nombre { opacity: 1; transform: translate(0, -50%); }
.bm-riel__puntos:hover a[aria-current]:not(:hover) .bm-riel__nombre { opacity: 0; }

@media (min-width: 992px) {
    .bm-riel { right: 18px; top: 50%; transform: translate(8px, -50%); }
    .bm-riel.is-visible { transform: translate(0, -50%); }
}
/* Celular y tablet: una pildora abajo con el modulo actual y la barra de avance */
@media (max-width: 991.98px) {
    .bm-riel { left: 12px; right: 84px; bottom: 16px; transform: translateY(12px); }
    .bm-riel.is-visible { transform: none; }
    .bm-riel__puntos { display: none; }
    .bm-riel__movil {
        position: relative; display: flex; align-items: center; gap: .6rem; overflow: hidden;
        padding: .7rem 1rem; border-radius: 999px; background: var(--bm-marino); color: #fff; text-decoration: none;
        box-shadow: 0 14px 30px -14px rgba(6, 23, 90, .7);
    }
    .bm-riel__movil:hover { color: #fff; }
    .bm-riel__pos { flex: none; font-size: .8rem; color: var(--bm-azul-300); font-weight: 600; }
    .bm-riel__actual { flex: 1; min-width: 0; font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bm-riel__movil > .bi { flex: none; font-size: 1.2rem; }
    .bm-riel__barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .12); }
    .bm-riel__barra i { display: block; height: 100%; width: 0; background: var(--bm-azul-300); transition: width .4s var(--bm-ease); }
}
@media (prefers-reduced-motion: reduce) { .bm-riel, .bm-riel__nombre { transition: none; } }

/* ---------------------------------------------------------------------
   Planes con el estandar: la tarjeta destacada en azul de marca (como en
   el resto del sitio), cada plan como tarjeta y la insignia en pildora.
   --------------------------------------------------------------------- */
.bm-pricing-toolbar { margin-top: -8px; }
/* Tarjetas mas compactas y centradas, no a todo el ancho del contenedor */
.bm-pricing-toolbar, .bm-plans { max-width: 1040px; margin-inline: auto; }
.bm-plans { gap: 20px; border: 0; background: none; align-items: stretch; }
.bm-plan { gap: .9rem; padding: clamp(22px, 2.4vw, 30px); }
.bm-plan__name { font-size: 1.5rem; }
.bm-plan__amount { font-size: clamp(2.1rem, 2.8vw, 2.5rem); }
.bm-plan__limit strong { font-size: 1.4rem; }
.bm-plan, .bm-plan + .bm-plan {
    border: 1px solid var(--bm-linea); border-radius: 24px; background: #fff; box-shadow: var(--bm-sombra-tarjeta);
    transition: transform .25s var(--bm-ease), box-shadow .25s ease;
}
.bm-plan:hover { transform: translateY(-4px); box-shadow: var(--bm-sombra-tarjeta-alta); }
.bm-plan--featured, .bm-plan--featured + .bm-plan { margin: 0; }
.bm-plan.bm-plan--featured {
    position: relative; overflow: hidden; isolation: isolate; border-color: transparent;
    background: var(--bm-franja); box-shadow: 0 40px 70px -36px rgba(5, 64, 242, .65);
}
.bm-plan--featured::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(160deg, rgba(4, 15, 61, .1) 0%, rgba(4, 15, 61, .55) 100%);
    clip-path: polygon(0 62%, 100% 34%, 100% 100%, 0 100%);
}
.bm-plan--featured .bm-pill--info { background: #fff; color: var(--bm-azul-700); border-radius: 999px; padding: .25rem .7rem; }
.bm-plan--featured .bm-plan__limits, .bm-plan--featured .bm-plan__limit + .bm-plan__limit { border-color: rgba(255, 255, 255, .22); }
.bm-plan--featured .bm-checks .bi { color: #fff; }
.bm-plan .bm-checks .bi { color: var(--bm-azul); }
.bm-plan__recommend { border-radius: 999px; }
.bm-plan.is-recommended { outline: 3px solid var(--bm-ok); outline-offset: 3px; }
@media (max-width: 991.98px) {
    .bm-plans { grid-template-columns: 1fr; }
    .bm-plan + .bm-plan { border-top: 1px solid var(--bm-linea); }
}

.bm-plan.bm-plan--featured .bm-checks .bi { color: #fff; }

/* ---------------------------------------------------------------------
   Blog: tarjetas con el estandar, el articulo mas reciente destacado
   en la primera pagina y el paginador en pildoras.
   --------------------------------------------------------------------- */
.bm-blog-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 28px; }
.bm-blog-resumen { margin: 0; color: var(--bm-gris); font-weight: 600; }
.bm-articulos { gap: 24px; }
.bm-articulo { background: #fff; border: 1px solid var(--bm-linea); border-radius: 20px; overflow: hidden; box-shadow: var(--bm-sombra-tarjeta); transition: transform .25s var(--bm-ease), box-shadow .25s ease; }
.bm-articulo:hover { transform: translateY(-4px); box-shadow: var(--bm-sombra-tarjeta-alta); }
.bm-articulo__enlace { height: 100%; gap: 0; }
.bm-articulo__img { border-radius: 0; }
.bm-articulo__texto { padding: 1.25rem 1.4rem 1.5rem; }
.bm-articulo__fecha { display: inline-flex; padding: .2rem .6rem; border-radius: 999px; background: var(--bm-celeste); color: var(--bm-azul-700); font-size: .8rem; font-weight: 600; }
.bm-articulo__titulo { font-size: 1.35rem; margin: .6rem 0 .45rem; }

/* Articulo mas reciente: ocupa todo el ancho, imagen a la izquierda */
.bm-articulo--destacado { grid-column: 1 / -1; }
.bm-articulo--destacado .bm-articulo__enlace { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.bm-articulo--destacado .bm-articulo__img { aspect-ratio: auto; min-height: 320px; }
.bm-articulo--destacado .bm-articulo__texto { align-self: center; padding: clamp(24px, 3vw, 44px); }
.bm-articulo--destacado .bm-articulo__titulo { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.bm-articulo--destacado .bm-articulo__resumen { -webkit-line-clamp: 4; font-size: 1.02rem; }

/* Paginador */
.bm-paginador { margin-top: 40px; }
.bm-paginador ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bm-paginador__num, .bm-paginador__flecha {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 44px; height: 44px; padding: 0 .9rem;
    border-radius: 999px; border: 1px solid var(--bm-linea); background: #fff; color: var(--bm-texto); font-weight: 600; text-decoration: none;
    transition: border-color .2s, color .2s, background-color .2s;
}
a.bm-paginador__num:hover, a.bm-paginador__flecha:hover { border-color: var(--bm-azul); color: var(--bm-azul); }
.bm-paginador__num.is-actual { background: var(--bm-azul); border-color: var(--bm-azul); color: #fff; }
.bm-paginador__flecha.is-off { opacity: .4; }
.bm-paginador__puntos { padding: 0 .25rem; color: var(--bm-gris); }
@media (max-width: 767.98px) {
    .bm-articulo--destacado .bm-articulo__enlace { grid-template-columns: 1fr; }
    .bm-articulo--destacado .bm-articulo__img { min-height: 0; aspect-ratio: 16 / 10; }
    .bm-paginador__flecha span { display: none; }
}

/* Enlaces relacionados (enlazado interno) en el costado de las preguntas frecuentes */
.bm-relacionados-bloque { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--bm-linea); }
.bm-relacionados__titulo { margin: 0 0 .75rem; font-weight: 600; color: var(--bm-texto); }
.bm-relacionados-bloque .bm-relacionados { display: grid; gap: .5rem; }
.bm-relacionados-bloque .bm-relacionados a { width: 100%; background: #fff; font-size: .95rem; }

/* ---------------------------------------------------------------------
   Fondos oscuros: un solo degradado continuo, sin la franja diagonal que
   lo partia en dos tonos. Luces suaves de color sobre el azul corporativo.
   --------------------------------------------------------------------- */
:root {
    --bm-fondo-artistico:
        radial-gradient(60% 80% at 85% 10%, rgba(64, 120, 255, .45), transparent 60%),
        radial-gradient(50% 70% at 10% 100%, rgba(5, 64, 242, .35), transparent 65%),
        radial-gradient(35% 45% at 60% 55%, rgba(157, 182, 255, .14), transparent 70%),
        linear-gradient(135deg, #040F3D 0%, #06175A 40%, #0A2FB5 80%, #0540F2 100%);
}
.bm-page-head::before, .bm-close__grid::before, .bm-footer::before, .bm-plan--featured::before { content: none; }
.bm-page-head, .bm-footer { background: var(--bm-fondo-artistico); }
.bm-close__grid, .bm-plan.bm-plan--featured { background: var(--bm-fondo-artistico); }