/* ============================================================
   ElêvaVisión — Big Machines "Réplicas digitales"
   Estilo adaptado al sistema visual de elevavision.com
   (Inter · azul #3c63ff · degradados azul-cyan · radios amplios)

   NOTA: Las variables de marca de este bloque van prefijadas con
   --bm- (Big Machines) para NO colisionar con las de styles_02.css.
   ============================================================ */
   :root {
       /* Paleta de marca ElêvaVisión (prefijo bm- para evitar colisiones) */
       --bm-primary: #3c63ff;
       --bm-primary-dark: #2851cc;
       --bm-ink: #0d0f12;
       --bm-paper: #ffffff;
       --bm-paper-2: #f8f9fa;
       --bm-paper-3: #eef1f6;
       --bm-steel: #06090d;
       --bm-steel-2: #10161c;
       --bm-steel-card: #141b24;
       --bm-amber: #3c63ff;
       /* acento -> azul de marca */
       --bm-amber-soft: #5b9bff;
       --bm-cyan: #00a1c8;
       --bm-line: #e3e6ec;
       --bm-line-dark: #23303f;
       --bm-muted: #5b5b5b;
       --bm-muted-light: #9aa3b2;
       --bm-gold: #edbb43;
       /* dorado de marca (footer / CTA) */
       --bm-grid: rgba(60, 99, 255, .045);
       /* Radios de marca */
       --bm-r-sm: 14px;
       --bm-r-md: 24px;
       --bm-r-lg: 30px;
       --bm-r-xl: 40px;
       --bm-shadow-base: 0 4px 20px rgba(0, 0, 0, .08);
       --bm-shadow-hover: 0 12px 40px rgba(60, 99, 255, .15);
   }

   /* El cuerpo de la landing Big vive dentro de #bm-main para aislar estilos */
   #bm-main * {
       margin: 0;
       padding: 0;
       box-sizing: border-box
   }

   #bm-main {
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       background: var(--bm-paper);
       color: var(--bm-ink);
       line-height: 1.6;
       -webkit-font-smoothing: antialiased;
   }

   #bm-main ::selection {
       background: var(--bm-primary);
       color: #fff
   }

   #bm-main h1,
   #bm-main h2,
   #bm-main h3,
   #bm-main h4,
   #bm-main .dispo {
       font-family: 'Inter', sans-serif;
       letter-spacing: -.01em
   }

   #bm-main .mono {
       font-family: 'Inter', sans-serif
   }

   /* ---- degradado de texto de marca ---- */
   #bm-main .sec-head h2 em,
   #bm-main .prox-grid h2 em,
   #bm-main .finalcta h2 em {
       font-style: normal;
       font-weight: 700;
       display: inline-block;
       background-image: linear-gradient(90deg, #545cf0 0%, #0a7fd7 55%, #00a1c8 100%);
       -webkit-background-clip: text;
       background-clip: text;
       -webkit-text-fill-color: transparent;
       color: transparent;
   }

   @supports not (background-clip:text) {

       #bm-main .sec-head h2 em,
       #bm-main .prox-grid h2 em,
       #bm-main .finalcta h2 em {
           color: #2e8ae6;
           -webkit-text-fill-color: #2e8ae6;
       }
   }

   /* ---------- layout helpers ---------- */
   #bm-main .wrap {
       max-width: 1240px;
       margin: 0 auto;
       padding: 0 40px
   }

   #bm-main .eyebrow {
       font-family: 'Inter', sans-serif;
       font-size: .78rem;
       letter-spacing: .18em;
       text-transform: uppercase;
       color: var(--bm-primary);
       font-weight: 600;
       display: flex;
       align-items: center;
       gap: 12px;
   }

   #bm-main .eyebrow::before {
       content: "";
       width: 36px;
       height: 2px;
       border-radius: 2px;
       background: var(--bm-primary);
       display: inline-block;
   }

   #bm-main .eyebrow.light {
       color: var(--bm-amber-soft)
   }

   #bm-main .eyebrow.light::before {
       background: var(--bm-amber-soft)
   }

   /* ---------- intro (sustituye al hero con machine card) ---------- */
   #bm-main .bm-intro {
       position: relative;
       padding: 170px 0 130px;
       background:
           linear-gradient(var(--bm-grid) 1px, transparent 1px),
           linear-gradient(90deg, var(--bm-grid) 1px, transparent 1px);
       background-size: 54px 54px;
       overflow: hidden;
   }

   #bm-main .bm-intro::after {
       content: "";
       position: absolute;
       inset: 0;
       background: radial-gradient(ellipse 70% 60% at 75% 30%, rgba(60, 99, 255, .09), transparent 70%);
       pointer-events: none;
   }

   #bm-main .bm-intro-inner {
       position: relative;
       z-index: 2;
       max-width: 900px;
   }

   #bm-main .bm-intro h1 {
       font-size: clamp(2.7rem, 5.4vw, 4.4rem);
       line-height: 1.04;
       font-weight: 700;
       letter-spacing: -.025em;
       margin: 26px 0 0;
       color: var(--bm-ink);
   }

   #bm-main .bm-intro h1 em {
       font-style: normal;
       font-weight: 700;
       display: inline-block;
       background-image: linear-gradient(90deg, #545cf0 0%, #0a7fd7 55%, #00a1c8 100%);
       -webkit-background-clip: text;
       background-clip: text;
       -webkit-text-fill-color: transparent;
       color: transparent;
   }

   @supports not (background-clip:text) {
       #bm-main .bm-intro h1 em {
           color: #2e8ae6;
           -webkit-text-fill-color: #2e8ae6;
       }
   }

   #bm-main .hero-lead {
       font-size: 1.2rem;
       color: var(--bm-muted);
       margin: 26px 0 34px;
       max-width: 680px;
   }

   #bm-main .hero-lead strong {
       color: var(--bm-ink);
       font-weight: 600
   }

   #bm-main .hero-actions {
       display: flex;
       gap: 16px;
       flex-wrap: wrap;
       align-items: center
   }

   #bm-main .btn {
       font-family: 'Inter', sans-serif;
       font-weight: 600;
       font-size: .95rem;
       letter-spacing: .01em;
       padding: 15px 30px;
       border-radius: 100px;
       text-decoration: none;
       cursor: pointer;
       display: inline-flex;
       align-items: center;
       gap: 10px;
       transition: transform .18s ease, background .2s ease, box-shadow .2s, color .2s, border-color .2s;
   }

   #bm-main .btn-primary {
       background: var(--bm-primary);
       color: #fff;
       border: 2px solid var(--bm-primary);
   }

   #bm-main .btn-primary:hover {
       background: var(--bm-primary-dark);
       border-color: var(--bm-primary-dark);
       transform: translateY(-2px);
       box-shadow: 0 10px 28px rgba(60, 99, 255, .32);
   }

   #bm-main .btn-ghost {
       background: #fff;
       color: var(--bm-primary);
       border: 2px solid var(--bm-primary);
   }

   #bm-main .btn-ghost:hover {
       background: var(--bm-primary);
       color: #fff;
       box-shadow: 0 8px 25px rgba(60, 99, 255, .2);
   }

   #bm-main .btn .arr {
       transition: transform .2s
   }

   #bm-main .btn:hover .arr {
       transform: translateX(4px)
   }

   #bm-main .hero-meta {
       margin-top: 46px;
       display: flex;
       gap: 34px;
       flex-wrap: wrap;
       border-top: 1px solid var(--bm-line);
       padding-top: 26px;
   }

   #bm-main .hero-meta div .num {
       font-family: 'Inter', sans-serif;
       font-weight: 700;
       font-size: 1.6rem;
       letter-spacing: -.02em;
       display: block;
       color: var(--bm-ink);
   }

   #bm-main .hero-meta div .lbl {
       font-family: 'Inter', sans-serif;
       font-size: .78rem;
       font-weight: 500;
       letter-spacing: .04em;
       color: var(--bm-muted);
   }

   /* ---------- marquee ---------- */
   #bm-main .marquee {
       background: var(--bm-steel);
       color: #fff;
       padding: 18px 0;
       overflow: hidden;
       white-space: nowrap;
   }

   #bm-main .marquee-track {
       display: inline-flex;
       animation: bm-marq 70s linear infinite
   }

   #bm-main .marquee-track span {
       font-family: 'Inter', sans-serif;
       font-size: .84rem;
       font-weight: 500;
       letter-spacing: .1em;
       text-transform: uppercase;
       padding: 0 30px;
       display: inline-flex;
       align-items: center;
       gap: 30px;
       color: rgba(255, 255, 255, .85);
   }

   #bm-main .marquee-track span::after {
       content: "◆";
       color: var(--bm-cyan);
       font-size: .6rem
   }

   @keyframes bm-marq {
       0% {
           transform: translateX(0)
       }

       100% {
           transform: translateX(-50%)
       }
   }

   /* ---------- section base ---------- */
   #bm-main section {
       position: relative
   }

   #bm-main .sec {
       padding: 110px 0
   }

   #bm-main .sec-head {
       max-width: 760px;
       margin-bottom: 64px
   }

   #bm-main .sec-head h2 {
       font-size: clamp(2rem, 3.6vw, 3.1rem);
       font-weight: 600;
       letter-spacing: -.025em;
       line-height: 1.08;
       margin: 20px 0 18px;
       color: var(--bm-ink);
   }

   #bm-main .sec-head p {
       font-size: 1.12rem;
       color: var(--bm-muted)
   }

   /* ---------- problem section ---------- */
   #bm-main .problem {
       background: var(--bm-paper-2);
       border-top: 1px solid var(--bm-line);
       border-bottom: 1px solid var(--bm-line);
   }

   #bm-main .prob-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 24px
   }

   #bm-main .prob-card {
       background: #fff;
       padding: 34px 30px;
       border: 1px solid var(--bm-line);
       border-radius: var(--bm-r-md);
       transition: transform .25s, box-shadow .25s;
       position: relative;
   }

   #bm-main .prob-card:hover {
       transform: translateY(-5px);
       box-shadow: var(--bm-shadow-hover);
       border-color: rgba(60, 99, 255, .25);
   }

   #bm-main .prob-card .pn {
       font-family: 'Inter', sans-serif;
       font-size: .76rem;
       font-weight: 600;
       color: var(--bm-primary);
       letter-spacing: .08em;
   }

   #bm-main .prob-card h3 {
       font-size: 1.22rem;
       font-weight: 600;
       margin: 14px 0 10px;
       letter-spacing: -.01em;
       color: var(--bm-ink);
   }

   #bm-main .prob-card p {
       font-size: .98rem;
       color: var(--bm-muted)
   }

   #bm-main .prob-quote {
       margin-top: 54px;
       padding: 48px 52px;
       background: var(--bm-steel);
       color: #fff;
       border-radius: var(--bm-r-lg);
       position: relative;
       overflow: hidden;
   }

   #bm-main .prob-quote::before {
       content: "\201C";
       position: absolute;
       top: -26px;
       left: 28px;
       font-family: Georgia, serif;
       font-size: 11rem;
       color: rgba(60, 99, 255, .22);
   }

   #bm-main .prob-quote p {
       font-family: 'Inter', sans-serif;
       font-size: 1.45rem;
       font-weight: 500;
       line-height: 1.4;
       position: relative;
       z-index: 2;
       max-width: 880px;
       color: #fff;
   }

   #bm-main .prob-quote .src {
       font-family: 'Inter', sans-serif;
       font-size: .78rem;
       font-weight: 500;
       color: var(--bm-amber-soft);
       letter-spacing: .08em;
       text-transform: uppercase;
       margin-top: 20px;
   }

   /* ---------- solution ---------- */
   #bm-main .solution {
       background: var(--bm-steel);
       color: #fff;
       overflow: hidden
   }

   #bm-main .solution .sec-head h2 {
       color: #fff
   }

   #bm-main .solution .sec-head p {
       color: var(--bm-muted-light)
   }

   #bm-main .sol-steps {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 30px;
       margin-top: 10px
   }

   #bm-main .sol-step {
       border: 1px solid var(--bm-line-dark);
       border-radius: var(--bm-r-md);
       padding: 34px 30px;
       background: var(--bm-steel-card);
       position: relative;
       transition: transform .25s, border-color .25s;
   }

   #bm-main .sol-step:hover {
       transform: translateY(-6px);
       border-color: var(--bm-primary)
   }

   #bm-main .sol-step .sicon {
       width: 54px;
       height: 54px;
       border: 1px solid var(--bm-primary);
       border-radius: var(--bm-r-sm);
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 22px;
       background: rgba(60, 99, 255, .08);
   }

   #bm-main .sol-step .snum {
       position: absolute;
       top: 22px;
       right: 26px;
       font-family: 'Inter', sans-serif;
       font-weight: 800;
       font-size: 2.4rem;
       color: rgba(255, 255, 255, .07);
   }

   #bm-main .sol-step h3 {
       font-size: 1.25rem;
       font-weight: 600;
       margin-bottom: 10px;
       color: #fff
   }

   #bm-main .sol-step p {
       font-size: .96rem;
       color: var(--bm-muted-light)
   }

   #bm-main .sol-tech {
       margin-top: 46px;
       display: flex;
       flex-wrap: wrap;
       gap: 12px;
       align-items: center;
       border-top: 1px solid var(--bm-line-dark);
       padding-top: 30px;
   }

   #bm-main .sol-tech .lab {
       font-family: 'Inter', sans-serif;
       font-size: .74rem;
       font-weight: 500;
       letter-spacing: .1em;
       text-transform: uppercase;
       color: var(--bm-muted-light);
   }

   #bm-main .chip {
       font-family: 'Inter', sans-serif;
       font-size: .78rem;
       font-weight: 500;
       border: 1px solid var(--bm-line-dark);
       padding: 8px 15px;
       border-radius: 100px;
       color: #fff;
       letter-spacing: .02em;
       background: rgba(255, 255, 255, .03);
   }

   #bm-main .chip strong {
       color: var(--bm-cyan);
       font-weight: 600
   }

   /* ---------- formats / modules ---------- */
   #bm-main .formats-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 20px;
   }

   #bm-main .fmt {
       background: #fff;
       padding: 36px 34px;
       border: 1px solid var(--bm-line);
       border-radius: var(--bm-r-md);
       display: flex;
       gap: 22px;
       transition: transform .22s, box-shadow .22s, border-color .22s;
   }

   #bm-main .fmt:hover {
       transform: translateY(-5px);
       box-shadow: var(--bm-shadow-hover);
       border-color: rgba(60, 99, 255, .25);
   }

   #bm-main .fmt-num {
       font-family: 'Inter', sans-serif;
       font-size: .85rem;
       font-weight: 700;
       color: var(--bm-primary);
       flex-shrink: 0;
       padding-top: 4px;
   }

   #bm-main .fmt h3 {
       font-size: 1.28rem;
       font-weight: 600;
       letter-spacing: -.01em;
       margin-bottom: 8px;
       color: var(--bm-ink)
   }

   #bm-main .fmt p {
       font-size: .99rem;
       color: var(--bm-muted);
       margin-bottom: 14px
   }

   #bm-main .fmt .fmt-tag {
       font-family: 'Inter', sans-serif;
       font-size: .72rem;
       font-weight: 500;
       letter-spacing: .04em;
       text-transform: uppercase;
       color: var(--bm-primary);
       background: rgba(60, 99, 255, .08);
       border: 1px solid rgba(60, 99, 255, .2);
       padding: 6px 13px;
       border-radius: 100px;
       display: inline-block;
   }

   /* ---------- advantages ---------- */
   #bm-main .adv {
       background: var(--bm-paper-2);
       border-top: 1px solid var(--bm-line);
       border-bottom: 1px solid var(--bm-line);
   }

   #bm-main .adv-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 24px
   }

   #bm-main .adv-card {
       background: #fff;
       border: 1px solid var(--bm-line);
       padding: 32px 30px;
       border-radius: var(--bm-r-md);
       display: flex;
       gap: 20px;
       transition: transform .2s, box-shadow .2s, border-color .2s;
   }

   #bm-main .adv-card:hover {
       transform: translateY(-4px);
       box-shadow: var(--bm-shadow-hover);
       border-color: rgba(60, 99, 255, .25);
   }

   #bm-main .adv-ic {
       width: 50px;
       height: 50px;
       flex-shrink: 0;
       background: linear-gradient(135deg, #3c63ff, #00a1c8);
       border-radius: var(--bm-r-sm);
       display: flex;
       align-items: center;
       justify-content: center;
   }

   #bm-main .adv-ic svg path,
   #bm-main .adv-ic svg circle {
       stroke: #fff !important
   }

   #bm-main .adv-card h3 {
       font-size: 1.14rem;
       font-weight: 600;
       margin-bottom: 7px;
       color: var(--bm-ink)
   }

   #bm-main .adv-card p {
       font-size: .95rem;
       color: var(--bm-muted)
   }

   /* ---------- comparison ---------- */
   #bm-main .compare {
       background: var(--bm-steel);
       color: #fff
   }

   #bm-main .compare .sec-head h2 {
       color: #fff
   }

   #bm-main .compare .sec-head p {
       color: var(--bm-muted-light)
   }

   #bm-main .cmp-table {
       display: grid;
       grid-template-columns: 1.4fr 1fr 1fr;
       border: 1px solid var(--bm-line-dark);
       border-radius: var(--bm-r-md);
       overflow: hidden;
   }

   #bm-main .cmp-cell {
       padding: 20px 24px;
       border-bottom: 1px solid var(--bm-line-dark);
       font-size: .96rem
   }

   #bm-main .cmp-head {
       font-family: 'Inter', sans-serif;
       font-weight: 600;
       font-size: .92rem;
       background: var(--bm-steel-card);
       letter-spacing: .02em;
   }

   #bm-main .cmp-head.them {
       color: var(--bm-muted-light)
   }

   #bm-main .cmp-head.us {
       color: var(--bm-amber-soft);
       background: rgba(60, 99, 255, .14)
   }

   #bm-main .cmp-row-label {
       font-family: 'Inter', sans-serif;
       font-weight: 600;
       color: #fff
   }

   #bm-main .cmp-them {
       color: var(--bm-muted-light)
   }

   #bm-main .cmp-us {
       color: #fff;
       background: rgba(60, 99, 255, .07)
   }

   #bm-main .cmp-us::before {
       content: "\2192 ";
       color: var(--bm-primary);
       font-weight: 600
   }

   #bm-main .cmp-table>div:nth-last-child(-n+3) {
       border-bottom: none
   }

   /* ---------- sectors ---------- */
   #bm-main .sectors-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 24px
   }

   #bm-main .sector {
       border: 1px solid var(--bm-line);
       border-radius: var(--bm-r-md);
       padding: 30px 26px;
       background: #fff;
       transition: .25s;
       position: relative;
       overflow: hidden;
   }

   #bm-main .sector::after {
       content: "";
       position: absolute;
       left: 0;
       bottom: 0;
       height: 3px;
       width: 0;
       background: linear-gradient(90deg, #3c63ff, #00a1c8);
       transition: width .3s ease;
   }

   #bm-main .sector:hover {
       transform: translateY(-5px);
       box-shadow: var(--bm-shadow-hover);
       border-color: rgba(60, 99, 255, .25)
   }

   #bm-main .sector:hover::after {
       width: 100%
   }

   #bm-main .sector .scode {
       font-family: 'Inter', sans-serif;
       font-size: .74rem;
       font-weight: 600;
       color: var(--bm-primary);
       letter-spacing: .08em;
   }

   #bm-main .sector h3 {
       font-size: 1.2rem;
       font-weight: 600;
       margin: 12px 0 8px;
       color: var(--bm-ink)
   }

   #bm-main .sector p {
       font-size: .9rem;
       color: var(--bm-muted)
   }

   #bm-main .sector .stype {
       font-family: 'Inter', sans-serif;
       font-size: .72rem;
       font-weight: 500;
       color: var(--bm-muted-light);
       text-transform: uppercase;
       letter-spacing: .05em;
       margin-top: 14px;
       display: block;
   }

   /* ---------- plans ---------- */
   #bm-main .plans {
       background: var(--bm-paper-3);
       border-top: 1px solid var(--bm-line);
       border-bottom: 1px solid var(--bm-line);
   }

   #bm-main .plans-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 24px;
       align-items: stretch
   }

   #bm-main .plan {
       background: #fff;
       border: 1px solid var(--bm-line);
       border-radius: var(--bm-r-lg);
       padding: 38px 32px;
       display: flex;
       flex-direction: column;
       transition: .25s;
   }

   #bm-main .plan:hover {
       transform: translateY(-6px);
       box-shadow: var(--bm-shadow-hover)
   }

   #bm-main .plan.featured {
       background: linear-gradient(135deg, #3c63ff 0%, #2851cc 100%);
       color: #fff;
       border-color: var(--bm-primary);
       position: relative;
       box-shadow: 0 18px 50px rgba(60, 99, 255, .28);
   }

   #bm-main .plan.featured .plan-name {
       color: #fff
   }

   #bm-main .plan.featured .plan-desc {
       color: rgba(255, 255, 255, .82)
   }

   #bm-main .plan.featured .plan-price {
       color: #fff
   }

   #bm-main .plan.featured li {
       color: #fff
   }

   #bm-main .plan-badge {
       position: absolute;
       top: -13px;
       left: 32px;
       background: var(--bm-gold);
       color: #000;
       font-family: 'Inter', sans-serif;
       font-size: .68rem;
       font-weight: 600;
       letter-spacing: .06em;
       text-transform: uppercase;
       padding: 7px 14px;
       border-radius: 100px;
   }

   #bm-main .plan-name {
       font-family: 'Inter', sans-serif;
       font-weight: 700;
       font-size: 1.4rem;
       letter-spacing: -.01em;
       color: var(--bm-ink);
   }

   #bm-main .plan-desc {
       font-size: .92rem;
       color: var(--bm-muted);
       margin: 8px 0 20px
   }

   #bm-main .plan-price {
       font-family: 'Inter', sans-serif;
       font-weight: 800;
       font-size: 2rem;
       letter-spacing: -.03em;
       line-height: 1.1;
       color: var(--bm-ink);
   }

   #bm-main .plan-price small {
       font-family: 'Inter', sans-serif;
       font-size: .74rem;
       font-weight: 500;
       color: var(--bm-muted);
       display: block;
       margin-top: 8px;
       letter-spacing: .02em;
   }

   #bm-main .plan.featured .plan-price small {
       color: rgba(255, 255, 255, .78)
   }

   #bm-main .plan ul {
       list-style: none;
       margin: 24px 0;
       flex-grow: 1
   }

   #bm-main .plan li {
       font-size: .94rem;
       padding: 10px 0 10px 28px;
       position: relative;
       border-bottom: 1px solid var(--bm-line);
       color: var(--bm-ink);
   }

   #bm-main .plan.featured li {
       border-color: rgba(255, 255, 255, .18)
   }

   #bm-main .plan li:last-child {
       border-bottom: none
   }

   #bm-main .plan li::before {
       content: "\2713";
       position: absolute;
       left: 0;
       top: 9px;
       color: #28a745;
       font-size: 1rem;
       font-weight: 700;
   }

   #bm-main .plan.featured li::before {
       color: #90ee90
   }

   #bm-main .plan-note {
       font-family: 'Inter', sans-serif;
       font-size: .82rem;
       color: var(--bm-muted);
       text-align: center;
       margin-top: 30px;
       letter-spacing: .02em;
   }

   /* ---------- timeline ---------- */
   #bm-main .timeline-wrap {
       position: relative;
       margin-top: 20px
   }

   #bm-main .tl-line {
       position: absolute;
       left: 0;
       right: 0;
       top: 34px;
       height: 2px;
       background: linear-gradient(90deg, #3c63ff, #00a1c8);
       border-radius: 2px;
   }

   #bm-main .tl-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 30px;
       position: relative
   }

   #bm-main .tl-item .tl-dot {
       width: 18px;
       height: 18px;
       border-radius: 50%;
       background: #fff;
       border: 3px solid var(--bm-primary);
       margin-bottom: 24px;
       position: relative;
       z-index: 2;
   }

   #bm-main .tl-item .tl-when {
       font-family: 'Inter', sans-serif;
       font-size: .76rem;
       font-weight: 600;
       color: var(--bm-primary);
       letter-spacing: .06em;
       text-transform: uppercase;
   }

   #bm-main .tl-item h3 {
       font-size: 1.1rem;
       font-weight: 600;
       margin: 8px 0 8px;
       color: var(--bm-ink)
   }

   #bm-main .tl-item p {
       font-size: .92rem;
       color: var(--bm-muted)
   }

   /* ---------- trust / faq ---------- */
   #bm-main .trust {
       background: var(--bm-steel);
       color: #fff
   }

   #bm-main .trust .sec-head h2 {
       color: #fff
   }

   #bm-main .trust .sec-head p {
       color: var(--bm-muted-light)
   }

   #bm-main .faq-list {
       max-width: 880px
   }

   #bm-main .faq {
       border-bottom: 1px solid var(--bm-line-dark)
   }

   #bm-main .faq summary {
       list-style: none;
       cursor: pointer;
       padding: 24px 0;
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 20px;
   }

   #bm-main .faq summary::-webkit-details-marker {
       display: none
   }

   #bm-main .faq summary h3 {
       font-family: 'Inter', sans-serif;
       font-weight: 500;
       font-size: 1.12rem;
       letter-spacing: -.01em;
       color: #fff;
   }

   #bm-main .faq .ico {
       width: 30px;
       height: 30px;
       flex-shrink: 0;
       border: 1px solid var(--bm-line-dark);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: .25s;
       position: relative;
   }

   #bm-main .faq .ico::before,
   #bm-main .faq .ico::after {
       content: "";
       position: absolute;
       background: var(--bm-primary);
   }

   #bm-main .faq .ico::before {
       width: 11px;
       height: 2px;
       border-radius: 2px
   }

   #bm-main .faq .ico::after {
       width: 2px;
       height: 11px;
       border-radius: 2px;
       transition: transform .25s
   }

   #bm-main .faq[open] .ico {
       background: var(--bm-primary);
       border-color: var(--bm-primary)
   }

   #bm-main .faq[open] .ico::before,
   #bm-main .faq[open] .ico::after {
       background: #fff
   }

   #bm-main .faq[open] .ico::after {
       transform: rotate(90deg);
       opacity: 0
   }

   #bm-main .faq-body {
       padding: 0 0 26px;
       font-size: 1rem;
       color: var(--bm-muted-light);
       max-width: 760px;
   }

   /* ---------- proximity ---------- */
   #bm-main .proximity {
       background: linear-gradient(135deg, #3c63ff 0%, #2851cc 100%);
       color: #fff;
   }

   #bm-main .prox-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 50px;
       align-items: center
   }

   #bm-main .prox-grid h2 {
       font-family: 'Inter', sans-serif;
       font-weight: 700;
       font-size: clamp(1.9rem, 3.2vw, 2.7rem);
       letter-spacing: -.025em;
       line-height: 1.1;
       color: #fff;
   }

   #bm-main .prox-grid h2 em {
       -webkit-text-fill-color: #fff;
       color: #fff;
       background: none;
       font-weight: 700;
   }

   #bm-main .prox-grid p {
       font-size: 1.08rem;
       margin-top: 18px;
       color: rgba(255, 255, 255, .9)
   }

   #bm-main .prox-points {
       display: flex;
       flex-direction: column;
       gap: 14px
   }

   #bm-main .prox-pt {
       background: rgba(255, 255, 255, .1);
       border: 1px solid rgba(255, 255, 255, .22);
       padding: 22px 24px;
       border-radius: var(--bm-r-sm);
       display: flex;
       align-items: center;
       gap: 18px;
   }

   #bm-main .prox-pt .pdot {
       font-family: 'Inter', sans-serif;
       font-weight: 800;
       font-size: 1.5rem;
       width: 54px;
       flex-shrink: 0;
       color: #fff;
   }

   #bm-main .prox-pt .ptxt strong {
       font-family: 'Inter', sans-serif;
       font-weight: 600;
       font-size: 1.02rem;
       display: block;
       color: #fff;
   }

   #bm-main .prox-pt .ptxt span {
       font-size: .9rem;
       color: rgba(255, 255, 255, .82)
   }

   /* ---------- final cta ---------- */
   #bm-main .finalcta {
       background: var(--bm-steel);
       color: #fff;
       text-align: center;
       padding: 120px 0;
       position: relative;
       overflow: hidden;
   }

   #bm-main .finalcta::before {
       content: "";
       position: absolute;
       inset: 0;
       background-image:
           linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
           linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
       background-size: 54px 54px;
   }

   #bm-main .finalcta::after {
       content: "";
       position: absolute;
       width: 560px;
       height: 560px;
       border-radius: 50%;
       background: radial-gradient(circle, rgba(60, 99, 255, .22), transparent 70%);
       top: -200px;
       left: 50%;
       transform: translateX(-50%);
   }

   #bm-main .finalcta-inner {
       position: relative;
       z-index: 2;
       max-width: 780px;
       margin: 0 auto
   }

   #bm-main .finalcta h2 {
       font-size: clamp(2.3rem, 4.6vw, 3.6rem);
       font-weight: 700;
       letter-spacing: -.03em;
       line-height: 1.08;
       margin: 24px 0 20px;
       color: #fff;
   }

   #bm-main .finalcta p {
       font-size: 1.16rem;
       color: var(--bm-muted-light);
       margin-bottom: 38px
   }

   #bm-main .finalcta .hero-actions {
       justify-content: center
   }

   #bm-main .finalcta-contact {
       margin-top: 46px;
       display: flex;
       gap: 38px;
       justify-content: center;
       flex-wrap: wrap;
       border-top: 1px solid var(--bm-line-dark);
       padding-top: 34px;
   }

   #bm-main .finalcta-contact a {
       color: #fff;
       text-decoration: none;
       font-family: 'Inter', sans-serif;
       font-size: .9rem;
       font-weight: 500;
       letter-spacing: .02em;
       display: flex;
       align-items: center;
       gap: 9px;
       transition: color .2s;
   }

   #bm-main .finalcta-contact a:hover {
       color: var(--bm-amber-soft)
   }

   /* reveal */
   #bm-main .reveal {
       opacity: 0;
       transform: translateY(28px);
       transition: opacity .7s ease, transform .7s ease
   }

   #bm-main .reveal.in {
       opacity: 1;
       transform: none
   }

   @media(prefers-reduced-motion:reduce) {
       #bm-main .reveal {
           opacity: 1;
           transform: none;
           transition: none
       }

       #bm-main .marquee-track {
           animation: none
       }
   }

   /* ---------- responsive ---------- */
   @media(max-width:980px) {
       #bm-main .wrap {
           padding: 0 26px
       }

       #bm-main .bm-intro {
           padding: 130px 0 80px
       }

       #bm-main .prob-grid,
       #bm-main .sol-steps,
       #bm-main .formats-grid,
       #bm-main .adv-grid,
       #bm-main .sectors-grid,
       #bm-main .plans-grid,
       #bm-main .tl-grid,
       #bm-main .prox-grid,
       #bm-main .cmp-table {
           grid-template-columns: 1fr
       }

       #bm-main .tl-line {
           display: none
       }

       #bm-main .cmp-table {
           border: none
       }

       #bm-main .cmp-head.them,
       #bm-main .cmp-head.us {
           display: none
       }

       #bm-main .cmp-cell {
           border: 1px solid var(--bm-line-dark);
           border-radius: var(--bm-r-sm);
           margin-bottom: 8px
       }

       #bm-main .cmp-row-label {
           background: var(--bm-steel-card)
       }

       #bm-main .sec {
           padding: 78px 0
       }

       #bm-main .prob-quote {
           padding: 34px 30px
       }

       #bm-main .prob-quote p {
           font-size: 1.2rem
       }
   }

   @media(max-width:560px) {
       #bm-main .wrap {
           padding: 0 18px
       }

       #bm-main .hero-meta {
           gap: 22px
       }

       #bm-main .fmt {
           flex-direction: column;
           gap: 12px
       }
   }

   /* ---- cabecera de escritorio (hero-section) de la landing Big Machines ----
   Reutilizamos la misma hero-section de la web ElêvaVisión (definida en
   styles_02.css: 100vh con imagen de fondo), pero sustituimos la imagen por
   la versión Big Machines. styles_big_01.css se carga después de styles_02.css,
   por lo que estas reglas prevalecen únicamente en las páginas index. */
   .hero-section::before {
       background-image: url('assetselevavision/imagen_cabecera_Big_machines.jpg');
   }

   html[lang="en"] .hero-section::before {
       background-image: url('assetselevavision/imagen_cabecera_Big_machines_en.jpg');
   }

   /* Tras la hero (100vh) arranca la intro Big. Mantenemos un margen superior
   coherente con el resto de la web (150px, igual que --section-margin-presentation). */
   #bm-main .bm-intro {
       padding-top: 150px
   }

   /* ---------- leyenda bajo la imagen de cabecera (marca ficticia de demostración) ---------- */
   .cabecera-leyenda {
       font-size: 0.8rem;
       line-height: 1.45;
       font-style: italic;
       color: #a0a0a0;
       text-align: center;
       max-width: 720px;
       margin: 0 auto;
       padding: 18px 22px 4px;
   }

   @media(max-width:1024px) {

       /* En tablet/móvil el menú lateral de la web se oculta (styles_02.css),
     así que reducimos el padding superior de la intro Big. */
       #bm-main .bm-intro {
           padding-top: 110px
       }
   }

   /* Estilos para alinear texto e imagen de fondo/lado a lado */
   .bm-intro .wrap {
       display: flex;
       align-items: center;
       /* Centra verticalmente el texto y la imagen */
       justify-content: space-between;
       /* Distribuye el espacio entre ambos */
       gap: 3rem;
       /* Espacio de separación entre texto e imagen */
   }

   .bm-intro-inner {
       flex: 1;
       max-width: 55%;
       /* Controla el ancho máximo del texto */
   }

   .bm-intro-image {
       flex: 1;
       max-width: 60%;
       /* Controla el ancho máximo del contenedor de la imagen */
       display: flex;
       justify-content: center;
   }

   .bm-intro-image img {
       width: 100%;
       height: auto;
       position: relative;
       top: -45px;
       /* Mantiene la proporción de la imagen */

       /* --- CAMBIOS SOLICITADOS --- */
       max-width: 720px;
       /* AUMENTADO UN 10%: De 500px a 550px */
       border-radius: 1.5rem;
       /* AÑADIDO: Radios redondeados (puedes usar px también) */
       /* -------------------------- */

       display: block;
   }

   /* Adaptación para pantallas móviles (Responsivo) */
   @media (max-width: 992px) {
       .bm-intro .wrap {
           flex-direction: column;
           /* Apila el texto arriba y la imagen abajo en móviles */
           text-align: center;
           /* Opcional: centra el texto en móviles */
       }

       .bm-intro-inner,
       .bm-intro-image {
           max-width: 100%;
           /* Ocupan todo el ancho disponible en pantallas pequeñas */
       }

       .bm-intro-image {
           margin-top: 2rem;
           /* Separación superior para la imagen en móvil */
       }
   }

   /* ---------- imagen sección solution ---------- */

   #bm-main .solution-image {
       margin-top: 34px;
       display: flex;
       justify-content: flex-start;
   }

   #bm-main .solution-image img {
       width: 100%;
       max-width: 920px;
       border-radius: 28px;
       display: block;
   }

   /* ---------- ajustes móviles solicitados ---------- */
   @media (max-width: 992px) {

       /* 1. Oculta el texto "Réplicas digitales..." justo debajo del hero móvil
         y reduce la distancia hasta el titular "Vuestra máquina..." */
       #bm-main .bm-intro {
           padding-top: 36px;
           padding-bottom: 56px;
       }

       #bm-main .bm-intro .eyebrow {
           display: none;
       }

       #bm-main .bm-intro h1 {
           margin: 26px 0 0;
       }

       /* 2. Botones centrados en móvil */
       #bm-main .hero-actions {
           justify-content: center;
           width: 100%;
       }

       #bm-main .hero-actions .btn {
           justify-content: center;
       }

       /* 3. Métricas centradas y con la imagen inferior más separada */
       #bm-main .hero-meta {
           justify-content: center;
           text-align: center;
           gap: 22px;
           margin-top: 34px;
       }

       #bm-main .hero-meta>div {
           flex: 1 1 100%;
       }

       #bm-main .bm-intro-image {
           margin-top: 3.2rem;
       }

       #bm-main .bm-intro-image img {
           top: 0;
       }

       /* 4. Menor radio en las imágenes tipo iPad / Big Machines */
       #bm-main .bm-intro-image img,
       #bm-main .solution-image img {
           border-radius: 12px;
       }

       #bm-main .solution-image {
           margin-top: 42px;
           justify-content: center;
       }
   }


   /* --- Bloque educativo (ciclo comercial real) --- */
   #bm-main .cycle {
       background: var(--bm-paper-2);
       border-top: 1px solid var(--bm-line);
       border-bottom: 1px solid var(--bm-line);
   }

   #bm-main .cycle-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 20px;
   }

   #bm-main .cycle-phase {
       background: #fff;
       border: 1px solid var(--bm-line);
       border-radius: var(--bm-r-md);
       padding: 28px 24px;
       position: relative;
       transition: transform .25s, box-shadow .25s, border-color .25s;
   }

   #bm-main .cycle-phase:hover {
       transform: translateY(-4px);
       box-shadow: var(--bm-shadow-hover);
       border-color: rgba(60, 99, 255, .25);
   }

   #bm-main .cycle-phase .cp-num {
       font-weight: 700;
       font-size: .72rem;
       letter-spacing: .14em;
       color: var(--bm-primary);
       text-transform: uppercase;
   }

   #bm-main .cycle-phase .cp-when {
       display: block;
       margin-top: 4px;
       font-size: .78rem;
       color: var(--bm-muted-light);
       font-weight: 500;
   }

   #bm-main .cycle-phase h3 {
       font-size: 1.08rem;
       font-weight: 600;
       margin: 14px 0 8px;
       color: var(--bm-ink);
   }

   #bm-main .cycle-phase p {
       font-size: .92rem;
       color: var(--bm-muted);
   }

   #bm-main .cycle-phase .cp-eleva {
       margin-top: 14px;
       padding-top: 14px;
       border-top: 1px dashed var(--bm-line);
       font-size: .82rem;
       color: var(--bm-primary);
       font-weight: 500;
   }

   #bm-main .cycle-insight {
       margin-top: 50px;
       padding: 32px 36px;
       background: #fff;
       border-left: 4px solid var(--bm-primary);
       border-radius: var(--bm-r-sm);
       font-size: 1.08rem;
       color: var(--bm-ink);
       line-height: 1.55;
       box-shadow: var(--bm-shadow-base);
   }

   #bm-main .cycle-insight strong {
       color: var(--bm-primary);
       font-weight: 600;
   }

   @media(max-width:980px) {
       #bm-main .cycle-grid {
           grid-template-columns: 1fr;
       }
   }

   /* --- Sección stats / cifras del sector --- */
   #bm-main .stats {
       background: var(--bm-steel);
       color: #fff;
   }

   #bm-main .stats .sec-head h2 {
       color: #fff;
   }

   #bm-main .stats .sec-head p {
       color: var(--bm-muted-light);
   }

   #bm-main .stats-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 24px;
   }

   #bm-main .stat-card {
       padding: 32px 28px;
       background: var(--bm-steel-card);
       border: 1px solid var(--bm-line-dark);
       border-radius: var(--bm-r-md);
       transition: border-color .25s, transform .25s;
   }

   #bm-main .stat-card:hover {
       border-color: var(--bm-primary);
       transform: translateY(-4px);
   }

   #bm-main .stat-num {
       font-size: 2.4rem;
       font-weight: 700;
       letter-spacing: -.02em;
       line-height: 1.05;
       background-image: linear-gradient(90deg, #5b9bff 0%, #00a1c8 100%);
       -webkit-background-clip: text;
       background-clip: text;
       -webkit-text-fill-color: transparent;
       color: transparent;
   }

   #bm-main .stat-label {
       font-size: .92rem;
       color: #fff;
       font-weight: 500;
       margin: 8px 0 12px;
   }

   #bm-main .stat-detail {
       font-size: .86rem;
       color: var(--bm-muted-light);
       line-height: 1.55;
   }

   #bm-main .stats-footnote {
       margin-top: 40px;
       font-size: .82rem;
       color: var(--bm-muted-light);
       max-width: 880px;
       line-height: 1.6;
   }

   @media(max-width:980px) {
       #bm-main .stats-grid {
           grid-template-columns: 1fr;
       }
   }

   /* --- Stakeholders / perfiles de OEM --- */
   #bm-main .roles-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 22px;
   }

   #bm-main .role-card {
       background: #fff;
       border: 1px solid var(--bm-line);
       border-radius: var(--bm-r-md);
       padding: 30px 28px;
       transition: transform .25s, box-shadow .25s, border-color .25s;
   }

   #bm-main .role-card:hover {
       transform: translateY(-4px);
       box-shadow: var(--bm-shadow-hover);
       border-color: rgba(60, 99, 255, .25);
   }

   #bm-main .role-card .role-tag {
       font-size: .72rem;
       letter-spacing: .1em;
       text-transform: uppercase;
       color: var(--bm-primary);
       font-weight: 600;
   }

   #bm-main .role-card h3 {
       font-size: 1.14rem;
       font-weight: 600;
       margin: 8px 0 10px;
       color: var(--bm-ink);
   }

   #bm-main .role-card p {
       font-size: .94rem;
       color: var(--bm-muted);
       margin-bottom: 12px;
   }

   #bm-main .role-card .role-gain {
       font-size: .88rem;
       color: var(--bm-ink);
       font-weight: 500;
       padding-top: 12px;
       border-top: 1px dashed var(--bm-line);
   }

   #bm-main .role-card .role-gain strong {
       color: var(--bm-primary);
       font-weight: 600;
   }

   @media(max-width:980px) {
       #bm-main .roles-grid {
           grid-template-columns: 1fr;
       }
   }

   /* --- Casos paradigmáticos / referencia sectorial --- */
   #bm-main .cases-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 24px;
   }

   #bm-main .case-card {
       background: #fff;
       border: 1px solid var(--bm-line);
       border-radius: var(--bm-r-md);
       padding: 34px 30px;
       transition: transform .25s, box-shadow .25s, border-color .25s;
   }

   #bm-main .case-card:hover {
       transform: translateY(-5px);
       box-shadow: var(--bm-shadow-hover);
       border-color: rgba(60, 99, 255, .25);
   }

   #bm-main .case-card .case-code {
       font-size: .74rem;
       letter-spacing: .12em;
       text-transform: uppercase;
       color: var(--bm-primary);
       font-weight: 700;
   }

   #bm-main .case-card h3 {
       font-size: 1.24rem;
       font-weight: 600;
       margin: 10px 0 10px;
       letter-spacing: -.01em;
       color: var(--bm-ink);
   }

   #bm-main .case-card .case-lead {
       font-size: .96rem;
       color: var(--bm-muted);
       margin-bottom: 16px;
   }

   #bm-main .case-card .case-details {
       list-style: none;
       padding: 0;
       margin: 14px 0 0;
       border-top: 1px solid var(--bm-line);
       padding-top: 14px;
   }

   #bm-main .case-card .case-details li {
       font-size: .9rem;
       color: var(--bm-ink);
       padding: 6px 0 6px 22px;
       position: relative;
   }

   #bm-main .case-card .case-details li::before {
       content: "→";
       color: var(--bm-primary);
       position: absolute;
       left: 0;
       top: 6px;
       font-weight: 600;
   }

   @media(max-width:980px) {
       #bm-main .cases-grid {
           grid-template-columns: 1fr;
       }
   }

   /* --- ROI / 3 niveles de medición --- */
   #bm-main .roi {
       background: var(--bm-paper-3);
       border-top: 1px solid var(--bm-line);
       border-bottom: 1px solid var(--bm-line);
   }

   #bm-main .roi-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 24px;
       position: relative;
   }

   #bm-main .roi-card {
       background: #fff;
       border: 1px solid var(--bm-line);
       border-radius: var(--bm-r-md);
       padding: 36px 30px;
       position: relative;
       transition: transform .25s, box-shadow .25s;
   }

   #bm-main .roi-card:hover {
       transform: translateY(-5px);
       box-shadow: var(--bm-shadow-hover);
   }

   #bm-main .roi-card .roi-level {
       font-size: .76rem;
       letter-spacing: .12em;
       text-transform: uppercase;
       color: var(--bm-primary);
       font-weight: 700;
   }

   #bm-main .roi-card h3 {
       font-size: 1.22rem;
       font-weight: 600;
       margin: 10px 0 8px;
       color: var(--bm-ink);
   }

   #bm-main .roi-card .roi-when {
       font-size: .82rem;
       color: var(--bm-muted-light);
       font-weight: 500;
       margin-bottom: 14px;
   }

   #bm-main .roi-card ul {
       list-style: none;
       padding: 0;
       margin-top: 14px;
   }

   #bm-main .roi-card li {
       font-size: .92rem;
       color: var(--bm-ink);
       padding: 8px 0 8px 22px;
       position: relative;
       border-bottom: 1px solid var(--bm-line);
   }

   #bm-main .roi-card li:last-child {
       border-bottom: none;
   }

   #bm-main .roi-card li::before {
       content: "■";
       color: var(--bm-primary);
       position: absolute;
       left: 0;
       top: 8px;
       font-size: .6rem;
   }

   @media(max-width:980px) {
       #bm-main .roi-grid {
           grid-template-columns: 1fr;
       }
   }

   /* --- Trade show calendar --- */
   #bm-main .fairs-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 20px;
   }

   #bm-main .fair-card {
       background: #fff;
       border: 1px solid var(--bm-line);
       border-radius: var(--bm-r-md);
       padding: 26px 24px;
       transition: transform .25s, box-shadow .25s, border-color .25s;
       position: relative;
       overflow: hidden;
   }

   #bm-main .fair-card::after {
       content: "";
       position: absolute;
       left: 0;
       top: 0;
       width: 4px;
       height: 100%;
       background: linear-gradient(180deg, #3c63ff, #00a1c8);
       transform: scaleY(0);
       transform-origin: top;
       transition: transform .3s;
   }

   #bm-main .fair-card:hover {
       transform: translateY(-4px);
       box-shadow: var(--bm-shadow-hover);
       border-color: rgba(60, 99, 255, .25);
   }

   #bm-main .fair-card:hover::after {
       transform: scaleY(1);
   }

   #bm-main .fair-card .fair-name {
       font-size: 1.06rem;
       font-weight: 700;
       color: var(--bm-ink);
       letter-spacing: -.01em;
   }

   #bm-main .fair-card .fair-where {
       font-size: .82rem;
       color: var(--bm-muted);
       margin: 4px 0 12px;
   }

   #bm-main .fair-card .fair-when {
       display: inline-block;
       font-size: .74rem;
       font-weight: 600;
       letter-spacing: .04em;
       text-transform: uppercase;
       color: var(--bm-primary);
       background: rgba(60, 99, 255, .08);
       border: 1px solid rgba(60, 99, 255, .2);
       padding: 5px 11px;
       border-radius: 100px;
   }

   @media(max-width:980px) {
       #bm-main .fairs-grid {
           grid-template-columns: 1fr;
       }
   }

   /* --- Trends grid --- */
   #bm-main .trends-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 20px;
   }

   #bm-main .trend-card {
       background: #fff;
       border: 1px solid var(--bm-line);
       border-radius: var(--bm-r-md);
       padding: 28px 28px;
       transition: transform .25s, box-shadow .25s, border-color .25s;
       display: flex;
       gap: 18px;
   }

   #bm-main .trend-card:hover {
       transform: translateY(-4px);
       box-shadow: var(--bm-shadow-hover);
       border-color: rgba(60, 99, 255, .25);
   }

   #bm-main .trend-num {
       font-size: 1.5rem;
       font-weight: 700;
       letter-spacing: -.02em;
       background-image: linear-gradient(135deg, #3c63ff, #00a1c8);
       -webkit-background-clip: text;
       background-clip: text;
       -webkit-text-fill-color: transparent;
       color: transparent;
       flex-shrink: 0;
       width: 40px;
   }

   #bm-main .trend-card h3 {
       font-size: 1.1rem;
       font-weight: 600;
       margin-bottom: 8px;
       color: var(--bm-ink);
   }

   #bm-main .trend-card p {
       font-size: .92rem;
       color: var(--bm-muted);
   }

   @media(max-width:980px) {
       #bm-main .trends-grid {
           grid-template-columns: 1fr;
       }
   }

   /* --- Glosario / vocabulary --- */
   #bm-main .glossary {
       background: var(--bm-steel);
       color: #fff;
   }

   #bm-main .glossary .sec-head h2 {
       color: #fff;
   }

   #bm-main .glossary .sec-head p {
       color: var(--bm-muted-light);
   }

   #bm-main .gloss-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 16px;
   }

   #bm-main .gloss-item {
       background: var(--bm-steel-card);
       border: 1px solid var(--bm-line-dark);
       border-radius: var(--bm-r-sm);
       padding: 20px 22px;
       transition: border-color .25s, transform .25s;
   }

   #bm-main .gloss-item:hover {
       border-color: var(--bm-primary);
       transform: translateY(-3px);
   }

   #bm-main .gloss-term {
       font-weight: 700;
       font-size: 1rem;
       color: var(--bm-cyan);
       letter-spacing: .02em;
       margin-bottom: 6px;
   }

   #bm-main .gloss-def {
       font-size: .86rem;
       color: var(--bm-muted-light);
       line-height: 1.55;
   }

   #bm-main .gloss-note {
       margin-top: 36px;
       font-size: .92rem;
       color: var(--bm-muted-light);
       max-width: 720px;
       line-height: 1.6;
   }

   #bm-main .gloss-note strong {
       color: #fff;
       font-weight: 600;
   }

   @media(max-width:980px) {
       #bm-main .gloss-grid {
           grid-template-columns: 1fr;
       }
   }

   /* --- Guarantees / reversión del riesgo --- */
   #bm-main .guarantees-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 20px;
   }

   #bm-main .gtee-card {
       background: #fff;
       border: 1px solid var(--bm-line);
       border-radius: var(--bm-r-md);
       padding: 28px 26px;
       transition: transform .25s, box-shadow .25s, border-color .25s;
   }

   #bm-main .gtee-card:hover {
       transform: translateY(-4px);
       box-shadow: var(--bm-shadow-hover);
       border-color: rgba(60, 99, 255, .25);
   }

   #bm-main .gtee-icon {
       width: 44px;
       height: 44px;
       background: linear-gradient(135deg, #3c63ff, #00a1c8);
       border-radius: var(--bm-r-sm);
       display: flex;
       align-items: center;
       justify-content: center;
       color: #fff;
       font-weight: 700;
       margin-bottom: 16px;
   }

   #bm-main .gtee-card h3 {
       font-size: 1.08rem;
       font-weight: 600;
       margin-bottom: 8px;
       color: var(--bm-ink);
   }

   #bm-main .gtee-card p {
       font-size: .92rem;
       color: var(--bm-muted);
   }

   @media(max-width:980px) {
       #bm-main .guarantees-grid {
           grid-template-columns: 1fr;
       }
   }

   /* --- Solution key insight callout --- */
   #bm-main .sol-key {
       margin-top: 36px;
       padding: 28px 32px;
       background: rgba(60, 99, 255, .12);
       border: 1px solid rgba(91, 155, 255, .35);
       border-radius: var(--bm-r-md);
       font-size: 1.08rem;
       line-height: 1.55;
       color: #fff;
   }

   #bm-main .sol-key strong {
       color: var(--bm-cyan);
       font-weight: 600;
   }

   /* ============================================================
      AMPLIACIÓN 2026 — vende · forma · cumple (Reglamento 2023/1230)
      Clases nuevas: tarjeta de perfil destacada (Calidad/Regulatory),
      sección "documentación viva" (oscura), tira de capturas reales y
      sección "cumplimiento" (clara). Todo aislado bajo #bm-main.
      ============================================================ */

   /* ---------- perfil nuevo destacado ---------- */
   #bm-main .role-card.role-new {
       border-color: rgba(60, 99, 255, .45);
       box-shadow: 0 0 0 1px rgba(60, 99, 255, .12), var(--bm-shadow-base);
       background: linear-gradient(180deg, rgba(60, 99, 255, .045), #fff 62%);
   }

   #bm-main .role-card .role-flag {
       display: inline-block;
       margin-left: 8px;
       font-size: .6rem;
       font-weight: 700;
       letter-spacing: .07em;
       text-transform: uppercase;
       color: #fff;
       background: var(--bm-primary);
       padding: 3px 9px;
       border-radius: 100px;
       vertical-align: middle;
       white-space: nowrap;
   }

   /* ---------- sección documentación viva (oscura) ---------- */
   #bm-main .docviva {
       background: var(--bm-steel);
       color: #fff;
   }

   #bm-main .docviva .sec-head h2 {
       color: #fff;
   }

   #bm-main .docviva .sec-head p {
       color: var(--bm-muted-light);
   }

   #bm-main .docv-split {
       display: grid;
       grid-template-columns: 1.05fr .95fr;
       gap: 50px;
       align-items: center;
   }

   #bm-main .docv-feats {
       display: flex;
       flex-direction: column;
       gap: 14px;
   }

   #bm-main .docv-feat {
       display: flex;
       gap: 18px;
       align-items: flex-start;
       background: var(--bm-steel-card);
       border: 1px solid var(--bm-line-dark);
       border-radius: var(--bm-r-sm);
       padding: 20px 22px;
       transition: border-color .25s, transform .25s;
   }

   #bm-main .docv-feat:hover {
       border-color: var(--bm-primary);
       transform: translateX(3px);
   }

   #bm-main .docv-feat .docv-ic {
       flex-shrink: 0;
       width: 42px;
       height: 42px;
       border: 1px solid var(--bm-primary);
       border-radius: var(--bm-r-sm);
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(60, 99, 255, .1);
       font-weight: 800;
       font-size: .9rem;
       color: var(--bm-amber-soft);
   }

   #bm-main .docv-feat .docv-txt strong {
       display: block;
       font-size: 1.02rem;
       font-weight: 600;
       color: #fff;
       margin-bottom: 4px;
   }

   #bm-main .docv-feat .docv-txt span {
       font-size: .92rem;
       color: var(--bm-muted-light);
   }

   #bm-main .docv-media {
       display: flex;
       flex-direction: column;
       gap: 14px;
       align-items: center;
   }

   /* ---------- marco de captura (device shot) ---------- */
   #bm-main .shot {
       border-radius: var(--bm-r-sm);
       overflow: hidden;
       border: 1px solid var(--bm-line-dark);
       background: #0b0e12;
       box-shadow: var(--bm-shadow-base);
       line-height: 0;
       width: 100%;
   }

   #bm-main .shot img {
       width: 100%;
       height: auto;
       display: block;
   }

   #bm-main .shot-lg {
       max-width: 380px;
       border: none;
   }

   #bm-main .shot-cap {
       display: block;
       font-size: .82rem;
       line-height: 1.4;
       color: var(--bm-muted-light);
       max-width: 380px;
   }

   #bm-main .shots-head {
       margin: 58px 0 20px;
       font-size: .8rem;
       font-weight: 600;
       letter-spacing: .1em;
       text-transform: uppercase;
       color: var(--bm-amber-soft);
       border-top: 1px solid var(--bm-line-dark);
       padding-top: 30px;
   }

   #bm-main .shots {
       display: grid;
       grid-template-columns: repeat(5, 1fr);
       gap: 16px;
       align-items: start;
   }

   #bm-main .shots .shot-cap {
       margin-top: 10px;
       text-align: center;
       font-size: .78rem;
       max-width: 100%;
   }

   #bm-main .shots-note {
       margin-top: 22px;
       font-size: .82rem;
       color: var(--bm-muted-light);
       font-style: italic;
   }

   /* ---------- sección cumplimiento (clara) ---------- */
   #bm-main .comp-split {
       display: grid;
       grid-template-columns: 1.4fr 1fr;
       gap: 36px;
       align-items: center;
       margin-top: 36px;
   }

   #bm-main .comp-split .cycle-insight {
       margin-top: 0;
   }

   #bm-main .comp-media {
       display: flex;
       flex-direction: column;
       gap: 12px;
   }

   #bm-main .shot.shot-light {
       border: none;
       background: var(--bm-paper-3);
       max-width: 320px;
       margin: 0 auto;
   }

   #bm-main .comp-media .shot-cap {
       color: var(--bm-muted);
       text-align: center;
       max-width: 320px;
       margin: 0 auto;
   }

   /* ---------- responsive de la ampliación ---------- */
   @media (max-width: 980px) {
       #bm-main .docv-split {
           grid-template-columns: 1fr;
           gap: 32px;
       }

       #bm-main .docv-media {
           align-items: flex-start;
       }

       #bm-main .shots {
           grid-template-columns: repeat(2, 1fr);
       }

       #bm-main .comp-split {
           grid-template-columns: 1fr;
           gap: 28px;
       }

       #bm-main .shot.shot-light,
       #bm-main .comp-media .shot-cap {
           margin: 0;
       }
   }

   @media (max-width: 560px) {
       #bm-main .shots {
           grid-template-columns: 1fr;
           max-width: 360px;
       }

       #bm-main .shot-lg,
       #bm-main .docv-media .shot-cap {
           max-width: 100%;
       }
   }


   /* ---------- resaltado especial inline (Reglamento 2023/1230) ---------- */
   #bm-main .hl-reg {
       color: var(--bm-primary);
       text-decoration: none;
       white-space: nowrap;
       transition: color .15s ease;
   }

   #bm-main .hl-reg:hover {
       color: var(--bm-primary-dark);
   }