/* Marca blanca v3 — página completa.
   Consume tokens.css + base.css + components.css.
   Fuente visual: Marca blanca.dc.html:200-806 (+ helmet 48-61 para los keyframes).

   Dos notas de traducción del template a CSS:

   1. Los anchos del template salen de ternarios sobre `window.innerWidth` (Marca blanca.dc.html:
      1004-1005): `mob = w < 760` y `desk = w >= 1000`. Aquí eso son dos cortes — la base es el
      caso móvil y las dos media queries del final abren tableta (>=760) y escritorio (>=1000).
      No es el corte de 960 px del chrome (components.css), que solo afecta al menú.
   2. El template declara catorce keyframes `mb*` en el helmet pero solo usa nueve. Aquí van
      únicamente los nueve que alguna regla referencia; los cinco muertos (mbBar, mbBarLoop,
      mbRowLoop, mbTick, mbPulse) se omiten a propósito.
      `dcRise` del template es idéntico a `dcFadeUp` de base.css, así que se reutiliza ese. */

/* ---------- keyframes de página (helmet del template: Marca blanca.dc.html:48-61) ---------- */
@keyframes mbRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes mbPop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
@keyframes mbSlide{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:translateX(0)}}
@keyframes mbBarUp{0%{transform:scaleY(.12);opacity:.45}16%{transform:scaleY(1);opacity:1}90%{transform:scaleY(1);opacity:1}97%,100%{transform:scaleY(.12);opacity:.45}}
@keyframes mbNewRow{0%,6%{opacity:0;transform:translateY(16px) scale(.97)}18%{opacity:1;transform:translateY(0) scale(1)}82%{opacity:1;transform:translateY(0) scale(1)}94%,100%{opacity:0;transform:translateY(-8px) scale(.98)}}
@keyframes mbChipIn{0%,10%{opacity:0;transform:scale(.6)}22%{opacity:1;transform:scale(1.12)}30%,86%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.9)}}
@keyframes mbFill{0%{transform:scaleX(0)}22%{transform:scaleX(1)}92%{transform:scaleX(1)}98%,100%{transform:scaleX(0)}}
@keyframes mbSheenX{0%{transform:translateX(-130%)}55%,100%{transform:translateX(240%)}}
@keyframes mbPulseSoft{0%,100%{transform:scale(1);box-shadow:0 5px 14px rgba(46,139,87,.26)}50%{transform:scale(1.04);box-shadow:0 9px 22px rgba(46,139,87,.36)}}

/* ---------- estructura de sección ----------
   Mismos nombres que pages/home.css para que las dos páginas se lean igual, con los valores de
   ESTE template: el hueco vertical del contenido es 34 px (en la Home eran 42) y todos los h2
   llevan `text-wrap:balance`. Los dos ficheros de página nunca se cargan a la vez. */
.sec{padding:clamp(64px,9vw,110px) 0}
.sec__inner{display:flex;flex-direction:column;gap:34px}
.sec__head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.sec__eyebrow{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-brand)}
.sec__title{margin:0;font-size:clamp(26px,4vw,34px);font-weight:700;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.sec__title-accent{color:var(--c-brand)}
.sec__text{margin:0;font-size:16px;line-height:1.55;color:var(--c-secondary);max-width:620px;text-wrap:pretty}
.sec__text--520{max-width:520px}
.sec__text--narrow{max-width:460px}
.sec__text--full{max-width:none}

/* ---------- piezas compartidas por varias secciones ---------- */

/* barras grises de los mocks: el template las repite con la misma receta y solo cambia el ancho */
.mb-line{height:5px;border-radius:3px;background:var(--c-border-chip);display:block}
.mb-line--soft{background:var(--c-divider)}
.mb-line--strong{background:#dfe7e1}
.mb-line--fill{flex:1}
.mb-line--36{width:36%}
.mb-line--44{width:44%}
.mb-line--48{width:48%}
.mb-line--56{width:56%}
.mb-line--58{width:58%}
.mb-line--62{width:62%}
.mb-line--70{width:70%}
.mb-line--78{width:78%}
.mb-line--80{width:80%}
.mb-line--88{width:88%}
.mb-line--92{width:92%}
.mb-line--96{width:96%}

/* hueco discontinuo donde iría el logotipo del revendedor */
.mb-logo-slot{width:38px;height:24px;border-radius:var(--r-check);background:var(--c-tint-badge);border:1px dashed #9dc9ad;display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:700;color:var(--c-green-text);flex:none}
.mb-logo-slot--sm{width:34px;height:20px;border-radius:5px;font-size:8px}
.mb-logo-slot--lg{width:40px;height:26px;font-size:9px;animation:mbPop .5s cubic-bezier(.22,.9,.24,1) .2s both}
.mb-logo-slot--wide{width:38px;height:22px;border-radius:5px;font-size:8px}

/* CTA grande (hero y «Ver planes y precios»): el hover del template solo mueve, no cambia la
   sombra, así que se devuelve la de reposo sobre la receta de .btn-cta */
.mb-cta-lg{gap:9px;border-radius:var(--r-sub);padding:14px 26px;font-size:15px;transition:transform .15s}
.mb-cta-lg:hover{box-shadow:var(--sh-cta)}
.mb-cta-lg i{font-size:14px}

/* enlace subrayado de cierre de sección */
.mb-link{align-self:center;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--c-brand);border-bottom:1px solid var(--c-border-success);padding-bottom:2px;transition:all .15s}
.mb-link:hover{color:var(--c-green-text);border-color:var(--c-brand)}
.mb-link--sm{font-size:13px}
.mb-link i{font-size:12px;line-height:1}

/* rejilla de dos columnas de las secciones partidas (rentabilidad, informes, confidencialidad) */
.mb-split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,54px);align-items:center}
.mb-split__copy{display:flex;flex-direction:column;gap:15px}

/* tarjeta con ilustración (razones del bloque 3 y kit de reventa) */
.mb-card{background:var(--c-white);border:1px solid var(--c-border-card);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.mb-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(23,49,31,.12)}
.mb-card__body{padding:26px 26px 0;display:flex;flex-direction:column;gap:10px}
.mb-card__title{margin:0;font-family:var(--font-heading);font-size:20px;font-weight:700;line-height:1.28;color:var(--c-ink)}
.mb-card__text{margin:0;font-size:14px;color:var(--c-secondary);line-height:1.6;text-wrap:pretty}
.mb-card__art{position:relative;height:190px;margin-top:16px;overflow:hidden;flex-shrink:0}
.mb-card__art--kit{height:186px}

/* ---------- 1 · hero (Marca blanca.dc.html:203-229) ---------- */
.mb-hero{
  /* Recorta la baraja: sus láminas laterales van giradas y desplazadas fuera del ancho útil, y
     sin esto ensanchan el documento entero —en móvil salía barra horizontal y un hueco blanco a
     la derecha en toda la página, no solo aquí—. Al ir en la sección, y no en el contenedor del
     hero, el corte cae en el borde de la pantalla y las láminas se desvanecen ahí. */
  overflow:hidden;
  background:#f7faf8;
  background-image:
    radial-gradient(700px 420px at 12% -60px,rgba(127,214,163,.35),rgba(127,214,163,0) 65%),
    radial-gradient(760px 460px at 88% -80px,rgba(46,139,87,.22),rgba(46,139,87,0) 65%),
    radial-gradient(1100px 520px at 50% -120px,#e7f0e9,rgba(231,240,233,0) 60%);
  background-repeat:no-repeat;
}
.mb-hero__inner{max-width:1180px;margin:0 auto;padding:36px clamp(18px,4vw,28px) 40px;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,52px);align-items:center}
.mb-hero__copy{display:flex;flex-direction:column;gap:18px;animation:dcFadeUp .5s ease .06s backwards}
.mb-hero__eyebrow{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-brand)}
.mb-hero__title{margin:0;font-size:clamp(30px,4.8vw,46px);font-weight:700;line-height:1.12;letter-spacing:-.025em;max-width:520px;text-wrap:balance}
.mb-hero__grad{background:linear-gradient(92deg,#1e5c3a,#2e8b57 55%,#7fd6a3);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em;margin-right:-.06em}
.mb-hero__lead{margin:0;font-size:clamp(15px,1.6vw,18px);line-height:1.55;color:var(--c-body);max-width:470px;text-wrap:pretty}
.mb-hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.mb-hero__note{margin:2px 0 0;display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--c-secondary)}
.mb-hero__note i{font-size:14px;line-height:1;color:var(--c-green-text)}
.mb-hero__visual{position:relative;animation:dcFadeUp .5s ease .14s backwards}
/* Baraja 3D de recortes (Marca blanca.dc.html:214-221). El sitio de cada lámina —posición en el
   giro, opacidad, sombra y z-index— lo calcula modules/deck.js, que es quien sabe a qué
   distancia del frente está; aquí queda lo que no depende de eso. */
.mb-hero__deck{position:relative;width:100%;height:clamp(300px,36vw,430px);perspective:1100px;touch-action:pan-y;cursor:grab;user-select:none}
.mb-hero__deck.is-dragging{cursor:grabbing}
.mb-hero__slide{position:absolute;left:50%;top:50%;width:min(46%,240px);aspect-ratio:1040/1300;background-size:cover;background-position:center;border-radius:16px;box-shadow:0 12px 30px rgba(23,49,31,.16);opacity:0;transition:transform .65s cubic-bezier(.22,.9,.3,1),opacity .65s ease,box-shadow .65s ease}
.mb-hero__slide.is-front{box-shadow:0 24px 54px rgba(23,49,31,.28)}

/* ---------- 2 · marcas (Marca blanca.dc.html:231-240) ---------- */
.mb-brands{padding:clamp(32px,4.5vw,55px) 0 clamp(20px,3vw,30px)}
.mb-brands__inner{display:flex;flex-direction:column;gap:34px;align-items:center}
.mb-brands__title{margin:0;font-size:11.5px;font-weight:600;color:var(--c-muted);text-align:center;letter-spacing:.04em;text-transform:uppercase}
/* marquesina de logos legacy (SVG monocromos de alto 40, ver _v3_marcas()) con fundido a los
   lados y pausa en hover, el mismo efecto que la tira legacy (assets/css/style.css:204-214) */
@keyframes mbMarcas{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mb-brands__marquee{width:100%;max-width:720px;margin:0 auto;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mb-brands__marquee:hover .mb-brands__track{animation-play-state:paused}
.mb-brands__track{display:flex;width:max-content;animation:mbMarcas 26s linear infinite}
.mb-brands__list{display:flex;align-items:center;gap:38px;padding-right:38px}
.mb-brands__item{opacity:.75;white-space:nowrap;cursor:default;transition:opacity .15s}
.mb-brands__item img{display:block;height:30px;width:auto}
.mb-brands__item:hover{opacity:1}
.mb-brands__list--clone .mb-brands__item{transition:none}
.mb-brands__list--clone .mb-brands__item:hover{opacity:.75}

/* ---------- 3 · cuatro razones (Marca blanca.dc.html:242-338) ---------- */
.mb-feat{padding:clamp(32px,4.5vw,55px) 0}
.mb-feat__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:stretch}

/* 3a · recortes «publicidad» vs «noticia» */
.mb-art-news__card{position:absolute;background:var(--c-white);border-radius:var(--r-btn);overflow:hidden}
.mb-art-news__card--ad{left:6%;bottom:-26px;width:52%;max-width:150px;transform:rotate(-10deg);border:1px solid #e9ede9;box-shadow:0 8px 20px rgba(23,49,31,.1);opacity:.5}
.mb-art-news__card--news{left:40%;bottom:10px;width:56%;max-width:158px;transform:rotate(6deg);border:1px solid var(--c-border-card);box-shadow:0 12px 26px rgba(23,49,31,.16)}
.mb-art-news__tag{color:var(--c-white);font-size:9px;font-weight:700;letter-spacing:.05em;padding:5px 10px;text-transform:uppercase;white-space:nowrap}
.mb-art-news__card--ad .mb-art-news__tag{background:#c3ccc6}
.mb-art-news__card--news .mb-art-news__tag{background:var(--c-green-text)}
.mb-art-news__lines{padding:9px;display:flex;flex-direction:column;gap:5px}
.mb-art-news__thumb{height:42px;border-radius:var(--r-check);background:repeating-linear-gradient(45deg,#e8ede9,#e8ede9 5px,#f4f6f4 5px,#f4f6f4 10px)}

/* 3b · conversación con el equipo asignado */
.mb-art-chat__stack{position:absolute;left:22px;right:22px;top:6px;display:flex;flex-direction:column;gap:9px}
.mb-art-chat__bubble{font-size:11.5px;line-height:1.45;padding:9px 13px}
.mb-art-chat__bubble--out{align-self:flex-end;max-width:88%;background:var(--c-green-ink);color:var(--c-tint-badge);border-radius:14px 14px 3px 14px;box-shadow:0 8px 18px rgba(23,49,31,.16)}
.mb-art-chat__bubble--in{align-self:flex-start;max-width:92%;background:var(--c-white);border:1px solid var(--c-border-card);border-radius:14px 14px 14px 3px;color:var(--c-body);box-shadow:0 10px 22px rgba(23,49,31,.12);display:flex;align-items:center;gap:8px}
.mb-art-chat__mark{width:19px;height:19px;border-radius:50%;background:var(--g-cta);color:var(--c-white);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;flex:none}
.mb-art-chat__team{align-self:flex-start;display:flex;align-items:center;gap:8px;background:var(--c-page);border-radius:var(--r-pill);padding:6px 11px;margin-top:2px}
.mb-art-chat__avatars{display:flex}
.mb-art-chat__avatar{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--c-white);display:block}
.mb-art-chat__avatar--1{background:var(--c-green-text)}
.mb-art-chat__avatar--2{background:var(--c-brand);margin-left:-6px}
.mb-art-chat__avatar--3{background:var(--c-dark-check);margin-left:-6px}
.mb-art-chat__team-text{font-size:10.5px;font-weight:700;color:var(--c-green-text);white-space:nowrap}

/* 3c · borrador pendiente de aprobación */
.mb-art-draft__panel{position:absolute;left:22px;right:22px;top:8px;background:var(--c-white);border:1px solid var(--c-border-card);border-radius:14px;box-shadow:0 12px 28px rgba(23,49,31,.12);padding:13px;display:flex;flex-direction:column;gap:9px}
.mb-art-draft__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mb-art-draft__label{font-size:10.5px;font-weight:700;color:var(--c-ink)}
.mb-art-draft__state{font-size:9px;font-weight:700;color:#8a6d1e;background:#fdf3d8;border-radius:var(--r-pill);padding:3px 8px;white-space:nowrap}
.mb-art-draft__actions{display:flex;gap:7px;margin-top:3px}
.mb-art-draft__ok{flex:1;background:var(--g-cta);color:var(--c-white);border-radius:9px;padding:8px 6px;font-size:10.5px;font-weight:700;text-align:center;box-shadow:var(--sh-cta)}
.mb-art-draft__ko{flex:1;background:var(--c-white);border:1px solid var(--c-border-input);color:var(--c-secondary);border-radius:9px;padding:8px 6px;font-size:10.5px;font-weight:600;text-align:center}

/* 3d · informe en perspectiva (lo reusa la tarjeta «Informes con tu logo» del kit) */
.mb-art-report__sheet,.mb-art-clip__sheet{position:absolute;left:50%;top:10px;background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-sub);box-shadow:0 16px 32px rgba(23,49,31,.18);overflow:hidden}
.mb-art-report__sheet{transform:translateX(-50%) perspective(900px) rotateX(16deg) rotateZ(-3deg);width:84%;max-width:230px}
.mb-art-clip__sheet{transform:translateX(-50%) perspective(900px) rotateX(14deg) rotateZ(-3deg);width:80%;max-width:220px}
.mb-art-report__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--c-divider)}
.mb-art-report__title{font-size:9.5px;font-weight:700;color:var(--c-ink)}
.mb-art-clip__title{font-size:9px;font-weight:700;color:var(--c-ink)}
.mb-art-report__rows{padding:10px 12px;display:flex;flex-direction:column;gap:7px}
.mb-art-report__row{display:flex;align-items:center;gap:8px}
.mb-art-report__tick{width:15px;height:15px;border-radius:50%;background:var(--c-tint-badge);color:var(--c-green-text);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;flex:none}
.mb-art-report__chip{position:absolute;right:14px;bottom:16px;background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-pill);box-shadow:0 10px 22px rgba(23,49,31,.14);padding:6px 12px;font-size:10.5px;font-weight:700;color:var(--c-green-text);white-space:nowrap}

/* ---------- 4 · dispara la rentabilidad (Marca blanca.dc.html:340-414) ---------- */
.mb-profit{padding:clamp(32px,4.5vw,55px) 0}
.mb-profit__stage{background:linear-gradient(160deg,#f2f9f5,#e2eee7);border:1px solid #dfe7e1;border-radius:20px;padding:clamp(24px,3.2vw,38px);display:flex;align-items:center;justify-content:center}
.mb-profit__panel{background:var(--c-white);border-radius:18px;box-shadow:0 16px 36px rgba(23,49,31,.14);padding:clamp(22px,2.8vw,28px);display:flex;flex-direction:column;gap:16px;width:100%;max-width:380px}
.mb-profit__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mb-profit__brand{display:flex;align-items:center;gap:10px}
.mb-profit__brand-text{font-size:13px;font-weight:700;color:var(--c-ink)}
.mb-profit__chip{font-size:10.5px;font-weight:700;color:var(--c-green-text);background:var(--c-tint-badge);border:1px solid #d8ecdf;border-radius:var(--r-pill);padding:4px 9px;white-space:nowrap;animation:mbChipIn 6.4s 1.5s ease infinite}
.mb-profit__bars{display:flex;align-items:flex-end;gap:7px;height:78px;padding-top:4px}
.mb-profit__bar{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#5cbb85,#1e5c3a);transform-origin:bottom;animation:mbBarUp 6.4s cubic-bezier(.22,.9,.24,1) infinite;display:block}
.mb-profit__divider{height:1px;background:var(--c-divider)}
.mb-profit__clients{display:flex;flex-direction:column;gap:9px}
.mb-profit__client{background:var(--c-white);border:1px solid var(--c-divider);border-radius:var(--r-sub);padding:11px 13px;display:flex;align-items:center;gap:10px;animation:mbRise .55s cubic-bezier(.22,.9,.24,1) both}
.mb-profit__mark{width:26px;height:26px;border-radius:var(--r-input);color:var(--c-white);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex:none}
.mb-profit__mark--1{background:var(--c-green-text)}
.mb-profit__mark--2{background:var(--c-brand)}
.mb-profit__mark--3{background:#35a065}
.mb-profit__client-text{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.mb-profit__client-name{font-size:12.5px;font-weight:600;color:var(--c-ink)}
.mb-profit__tick{width:20px;height:20px;border-radius:50%;background:var(--c-brand);color:var(--c-white);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex:none;animation:mbPop .45s cubic-bezier(.34,1.56,.64,1) both}
.mb-profit__new{background:var(--c-tint-selected);border:1px dashed var(--c-border-success);border-radius:var(--r-sub);padding:11px 13px;display:flex;align-items:center;gap:10px;animation:mbNewRow 6.4s 1.5s ease infinite}
.mb-profit__plus{width:26px;height:26px;border-radius:var(--r-input);background:var(--c-dark-check);color:var(--c-green-ink);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:none}
.mb-profit__new-text{font-size:12.5px;font-weight:600;color:var(--c-green-text);flex:1}
.mb-profit__new-rate{font-size:10.5px;font-weight:700;color:var(--c-green-text);white-space:nowrap}

.mb-checks{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.mb-checks__item{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.6;color:var(--c-secondary);text-wrap:pretty}
.mb-checks__item b{color:var(--c-ink)}
.mb-checks__mark{width:22px;height:22px;border-radius:50%;background:var(--c-tint-badge);display:inline-flex;align-items:center;justify-content:center;flex:none;margin-top:1px}

/* ---------- 5 · informes con tu logotipo (Marca blanca.dc.html:416-456) ---------- */
.mb-report{padding:clamp(32px,4.5vw,55px) 0}
.mb-report__stage{background:linear-gradient(150deg,#eaf4ed,#dcece2);border:1px solid #dfe7e1;border-radius:20px;padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:14px}
.mb-report__hero{position:relative;overflow:hidden;background:var(--c-white);border-radius:14px;box-shadow:0 12px 26px rgba(23,49,31,.12);padding:16px 18px;display:flex;align-items:center;gap:13px;animation:mbSlide .55s cubic-bezier(.22,.9,.24,1) both}
.mb-report__sheen{position:absolute;top:0;bottom:0;left:0;width:38%;background:linear-gradient(90deg,rgba(46,139,87,0),rgba(46,139,87,.13),rgba(46,139,87,0));animation:mbSheenX 6.4s .4s ease-in-out infinite;pointer-events:none}
.mb-report__hero-lines{display:flex;flex-direction:column;gap:6px;flex:1}
.mb-report__fill{height:7px;background:#dfe7e1;border-radius:4px;transform-origin:left;animation:mbFill 6.4s .5s cubic-bezier(.22,.9,.24,1) infinite;display:block}
.mb-report__rest{height:7px;background:var(--c-divider);border-radius:4px;width:62%;display:block}
.mb-report__tick{width:26px;height:26px;border-radius:50%;background:var(--c-brand);color:var(--c-white);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:none;animation:mbPop .5s cubic-bezier(.34,1.56,.64,1) .75s both}
.mb-report__row{background:rgba(255,255,255,.7);border-radius:var(--r-sub);padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;animation:mbRise .5s cubic-bezier(.22,.9,.24,1) both}
.mb-report__medio{font-size:13px;font-weight:600;color:var(--c-ink)}
.mb-report__estado{font-size:11.5px;color:var(--c-green-text);font-weight:600;background:var(--c-tint-badge);border-radius:var(--r-pill);padding:4px 10px;animation:mbPop .4s cubic-bezier(.34,1.56,.64,1) both}
.mb-report__file{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--c-white);border:1px solid var(--c-divider);border-radius:var(--r-sub);padding:12px 14px;animation:mbRise .5s ease 1.1s both}
.mb-report__file-left{display:flex;align-items:center;gap:11px;min-width:0}
.mb-report__pdf{position:relative;overflow:hidden;width:32px;height:38px;border-radius:5px;background:var(--c-white);border:1px solid var(--c-border-card);box-shadow:0 4px 10px rgba(23,49,31,.1);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:5px;flex:none}
.mb-report__pdf-fold{position:absolute;top:0;right:0;width:10px;height:10px;background:linear-gradient(225deg,#e7f3ec 50%,#fff 50%);border-left:1px solid var(--c-border-card);border-bottom:1px solid var(--c-border-card)}
.mb-report__pdf-text{font-size:7.5px;font-weight:800;letter-spacing:.04em;color:var(--c-error)}
.mb-report__file-text{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.mb-report__file-name{font-size:12.5px;font-weight:700;color:var(--c-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-report__file-sub{font-size:11px;color:var(--c-muted)}
.mb-report__download{display:flex;align-items:center;gap:7px;background:var(--g-cta);color:var(--c-white);border-radius:9px;padding:8px 13px;font-size:11.5px;font-weight:700;white-space:nowrap;box-shadow:var(--sh-cta);animation:mbPulseSoft 3.4s ease-in-out infinite}
.mb-report__download i{font-size:12px;line-height:1}

/* ---------- 6 · expande tu portfolio (Marca blanca.dc.html:458-512) ---------- */
.mb-flow{background:#f7faf8}
.mb-flow__tabs{background:var(--c-white);border:1px solid var(--c-border-card);border-radius:14px;padding:6px;display:grid;grid-template-columns:minmax(0,1fr);gap:4px;box-shadow:0 1px 3px rgba(23,36,28,.04)}
.mb-flow__tab{background:transparent;color:var(--c-secondary);border-radius:var(--r-btn);padding:11px 14px;font-size:13.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:9px;transition:all .16s}
.mb-flow__tab-num{width:21px;height:21px;border-radius:50%;background:var(--c-divider);color:var(--c-muted);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none}
.mb-flow__tab.is-active{background:var(--c-tint-badge);color:var(--c-green-text)}
.mb-flow__tab.is-active .mb-flow__tab-num{background:var(--c-brand);color:var(--c-white)}
/* el hover del template gana también sobre la pestaña activa, y con este verde propio (#f4f8f5),
   que no es el --c-tint-selected del catálogo: por eso va después de la regla .is-active */
.mb-flow__tab:hover{background:#f4f8f5;color:var(--c-green-text)}
.mb-flow__panel{background:var(--c-white);border:1px solid var(--c-border-card);border-radius:20px;box-shadow:0 2px 10px rgba(23,36,28,.05);overflow:hidden}
.mb-flow__progress{height:3px;background:var(--c-divider);display:block}
.mb-flow__progress-bar{display:block;height:100%;background:linear-gradient(90deg,#35a065,#1e5c3a);transition:width .3s ease}
.mb-flow__body{padding:clamp(26px,3.4vw,42px);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,3.5vw,44px);align-items:center}
.mb-flow__body[hidden]{display:none}
.mb-flow__copy{display:flex;flex-direction:column;gap:13px}
.mb-flow__topline{display:flex;align-items:center;gap:10px}
.mb-flow__count{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-green-text);background:var(--c-tint-badge);border:1px solid #d8ecdf;border-radius:var(--r-pill);padding:5px 11px;white-space:nowrap}
.mb-flow__nav{display:flex;align-items:center;gap:7px;margin-left:auto}
.mb-flow__arrow{width:32px;height:32px;border-radius:50%;background:var(--c-white);border:1px solid var(--c-border-input);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--c-body);transition:all .15s}
.mb-flow__arrow:hover{border-color:var(--c-brand);color:var(--c-green-text)}
.mb-flow__arrow.is-disabled{opacity:.35;pointer-events:none}
.mb-flow__arrow i{font-size:13px;line-height:1}
.mb-flow__title{margin:0;font-family:var(--font-heading);font-size:clamp(20px,2.5vw,28px);font-weight:700;line-height:1.28;color:var(--c-ink);letter-spacing:-.02em;text-wrap:pretty}
.mb-flow__text{margin:0;font-size:15px;line-height:1.55;color:var(--c-secondary);max-width:430px;text-wrap:pretty}
.mb-flow__chips{display:flex;flex-direction:column;gap:9px}
.mb-flow__chip{background:var(--c-inset);border:1px solid var(--c-divider);border-radius:var(--r-sub);padding:13px 15px;display:flex;align-items:center;gap:11px}
.mb-flow__chip-icon{width:26px;height:26px;border-radius:var(--r-input);background:var(--c-tint-badge);display:flex;align-items:center;justify-content:center;flex:none}
.mb-flow__chip-icon i{font-size:13px;line-height:1;color:var(--c-green-text)}
.mb-flow__chip-text{font-size:13px;font-weight:600;color:var(--c-ink)}
.mb-flow__duo{display:grid;grid-template-columns:minmax(0,1fr);gap:26px 32px;margin-top:8px}
.mb-flow__duo-item{display:flex;flex-direction:column;gap:11px}
.mb-flow__duo-icon{width:42px;height:42px;border-radius:var(--r-sub);background:var(--c-tint-badge);display:flex;align-items:center;justify-content:center;flex:none}
.mb-flow__duo-icon i{font-size:19px;line-height:1;color:var(--c-green-text)}
.mb-flow__duo-title{margin:0;font-family:var(--font-heading);font-size:16.5px;font-weight:700;color:var(--c-ink);line-height:1.3}
.mb-flow__duo-text{font-size:14px;color:var(--c-secondary);line-height:1.6;text-wrap:pretty}

/* ---------- 7 · comparativa (Marca blanca.dc.html:514-565) ---------- */
.mb-comp__table{background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-card);box-shadow:0 1px 3px rgba(23,36,28,.05);overflow:hidden}
.mb-comp__row{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.mb-comp__row + .mb-comp__row{border-top:1px solid var(--c-divider)}
.mb-comp__cell{padding:14px 18px}
.mb-comp__cell--own,.mb-comp__cell--setroi{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.mb-comp__cell--own{color:var(--c-muted);background:var(--c-inset)}
.mb-comp__cell--setroi{color:var(--c-green-text);background:var(--c-tint-selected)}
.mb-comp__cell--label{padding:15px 18px;font-size:13.5px;font-weight:600;color:var(--c-ink);display:flex;align-items:center}
.mb-comp__cell--no{padding:15px 18px;font-size:13px;color:var(--c-muted);display:flex;align-items:center;gap:8px;background:var(--c-inset)}
.mb-comp__cell--no i{font-size:14px;line-height:1;color:var(--c-error);flex:none}
.mb-comp__cell--yes{padding:15px 18px;font-size:13px;color:var(--c-body);font-weight:500;display:flex;align-items:center;gap:8px;background:var(--c-tint-selected)}
.mb-comp__cell--yes i{font-size:15px;line-height:1;color:var(--c-brand);flex:none}
/* la última celda verde redondea la esquina inferior de la tabla (línea 559) */
.mb-comp__cell--yes-last{border-radius:0 0 var(--r-sub) var(--r-sub)}

/* ---------- 8 · kit de reventa (Marca blanca.dc.html:567-641) ---------- */
.mb-kit__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}

/* 8a · calendario de publicaciones programadas (antes era el catálogo de tarifas: la revisión de
   textos de agosto cambió la tarjeta de «Catálogo en blanco» a «Publicaciones programadas» y el
   dibujo de una hoja de precios ya no decía nada).

   Las celdas van con `aspect-ratio`, no con altura fija: la tarjeta es fluida y a ancho completo
   una celda de alto fijo se estira hasta parecer una barra en vez de un día. Tres semanas y no
   cuatro para que la hoja acabe bastante antes que el chip — un calendario recortado se lee igual
   de bien al tamaño de un mock, y es lo mismo que hace la hoja del informe de la tercera. */
.mb-art-cal__sheet{position:absolute;left:24px;right:24px;top:16px;background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-sub);box-shadow:0 14px 30px rgba(23,49,31,.14);overflow:hidden}
.mb-art-cal__head{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid var(--c-divider)}
.mb-art-cal__head .mb-line{height:5px}
.mb-art-cal__grid{padding:10px 11px;display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mb-art-cal__day{aspect-ratio:1/.62;border-radius:2.5px;background:var(--c-divider);display:block}
/* el día programado va macizo: a este tamaño un punto dentro de la celda no se distingue */
.mb-art-cal__day--on{background:var(--c-brand)}
.mb-art-cal__chip{position:absolute;right:18px;bottom:16px;background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-pill);box-shadow:0 8px 18px rgba(23,49,31,.14);padding:6px 12px;font-size:10.5px;font-weight:700;color:var(--c-green-text);white-space:nowrap;animation:mbPop .5s cubic-bezier(.22,.9,.24,1) .25s both}

/* 8b · hoja de condiciones con candado (antes era el mazo de propuestas comerciales, que la
   revisión de agosto retiró del kit).

   Se probó primero como etiqueta de precio girada, con otra etiqueta detrás: sin un fondo que se
   viera de verdad el giro no se lee como profundidad, se lee como torcido. Así que hoja recta,
   con la misma cabecera de hueco de logo que el calendario y el informe — las tres tarjetas son
   hermanas y tienen que parecerlo. Las dos ideas del título salen del dibujo: el precio va
   sellado en verde y la fila de datos del cliente sale enmascarada en cuadraditos. */
.mb-art-lock__sheet{position:absolute;left:24px;right:24px;top:16px;background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-sub);box-shadow:0 14px 30px rgba(23,49,31,.14);overflow:hidden}
.mb-art-lock__head{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid var(--c-divider)}
.mb-art-lock__head .mb-line{height:5px}
.mb-art-lock__rows{padding:13px 12px 15px;display:flex;flex-direction:column;gap:12px}
.mb-art-lock__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mb-art-lock__row .mb-line{height:6px}
/* el precio, sellado */
.mb-art-lock__price{height:17px;width:54px;border-radius:4px;background:var(--c-tint-badge);border:1px solid var(--c-border-success);display:flex;align-items:center;justify-content:center;gap:3px;flex:none}
.mb-art-lock__price span{width:5px;height:5px;border-radius:1.5px;background:var(--c-brand);display:block}
/* los datos del cliente, enmascarados: cuadraditos y no una barra, que se leería como texto */
.mb-art-lock__mask{display:flex;align-items:center;gap:4px}
.mb-art-lock__mask span{width:7px;height:7px;border-radius:2px;background:var(--c-border-control);display:block}
.mb-art-lock__badge{position:absolute;right:20px;bottom:34px;width:42px;height:42px;border-radius:50%;background:var(--c-brand);box-shadow:0 10px 22px rgba(46,139,87,.34);display:flex;flex-direction:column;align-items:center;justify-content:center;animation:mbPop .5s cubic-bezier(.22,.9,.24,1) .2s both}
.mb-art-lock__shackle{width:12px;height:7px;border:2px solid var(--c-white);border-bottom:0;border-radius:6px 6px 0 0;display:block}
.mb-art-lock__body{width:17px;height:12px;border-radius:2.5px;background:var(--c-white);display:block}
.mb-art-lock__chip{position:absolute;left:18px;bottom:16px;background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-pill);box-shadow:0 8px 18px rgba(23,49,31,.14);padding:6px 12px;font-size:10.5px;font-weight:700;color:var(--c-green-text);white-space:nowrap}

/* 8c · clipping en PDF */
.mb-art-clip__file{position:absolute;left:18px;bottom:16px;display:flex;align-items:center;gap:9px;background:var(--c-white);border:1px solid var(--c-border-card);border-radius:11px;box-shadow:0 10px 22px rgba(23,49,31,.14);padding:8px 11px}
.mb-art-clip__pdf{width:22px;height:26px;border-radius:4px;background:var(--c-white);border:1px solid var(--c-border-card);display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;flex:none}
.mb-art-clip__pdf-text{font-size:6.5px;font-weight:800;color:var(--c-error)}
.mb-art-clip__name{font-size:10.5px;font-weight:700;color:var(--c-ink);white-space:nowrap}

/* ---------- 9 · compras tu plan (Marca blanca.dc.html:643-678) ---------- */
.mb-start{background:#f7faf8}
.mb-start__grid{display:flex;flex-wrap:wrap;gap:18px}
.mb-start__card{flex:1;min-width:220px;background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-card);box-shadow:0 1px 3px rgba(23,36,28,.05);padding:22px;display:flex;flex-direction:column;gap:10px}
.mb-start__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mb-start__num{width:28px;height:28px;border-radius:50%;background:var(--c-green-ink);color:var(--c-white);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;flex:none}
.mb-start__chip{font-size:11px;font-weight:700;color:var(--c-green-text);background:var(--c-tint-badge);border:1px solid #d8ecdf;border-radius:var(--r-pill);padding:4px 10px;white-space:nowrap}
.mb-start__title{margin:0;font-family:var(--font-heading);font-size:16.5px;font-weight:700;color:var(--c-ink);line-height:1.3}
.mb-start__text{font-size:14px;color:var(--c-secondary);line-height:1.6;text-wrap:pretty}
.mb-start__cta{align-self:center}

/* ---------- 10 · tu cliente es tuyo (Marca blanca.dc.html:680-696) ---------- */
.mb-confid__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.mb-confid__item{background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-sub);box-shadow:0 1px 3px rgba(23,36,28,.05);padding:15px 17px;display:flex;align-items:center;gap:12px}
.mb-confid__mark{width:26px;height:26px;border-radius:50%;background:var(--c-tint-badge);display:flex;align-items:center;justify-content:center;flex:none}
.mb-confid__mark i{font-size:14px;line-height:1;color:var(--c-green-text)}
.mb-confid__text{font-size:14px;color:var(--c-body);line-height:1.5;text-wrap:pretty}

/* ---------- 11 · agencias que ya lo revenden (Marca blanca.dc.html:698-747) ---------- */
.mb-ops__wrap{display:flex;flex-direction:column;gap:14px}
/* los márgenes negativos compensan el padding del scroller: la sombra al pasar el ratón cabe
   dentro sin que el carrusel recorte la tarjeta (Marca blanca.dc.html:705-706) */
.mb-ops__scroller{position:relative;margin:-16px -14px -22px}
.mb-ops__track{gap:18px;padding:16px 14px 30px}
.mb-ops__card{background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;flex:0 0 342px;transition:transform .15s,box-shadow .15s}
.mb-ops__card:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(23,49,31,.14)}
/* cuadrada 1:1 en todas las tarjetas de reseña (petición 2026-08-19; antes 3:4 del 2026-08-17) */
.mb-ops__media{position:relative;aspect-ratio:3/3;overflow:hidden;background:var(--c-page)}
.mb-ops__ph{position:absolute;inset:0}
.mb-ops__photo{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.mb-ops__play{position:absolute;right:14px;bottom:14px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;color:var(--c-green-text);box-shadow:var(--sh-cta);pointer-events:none;transition:transform .15s;z-index:1}
/* Hover como en la Home: pasar por cualquier punto de la tarjeta agranda el chip (solo con vídeo). */
.mb-ops__play.setroi-video-popup:hover,
.mb-ops__media:hover .mb-ops__play.setroi-video-popup{transform:scale(1.08)}
/* Velo inferior (30% de alto) para que el chip de play no se pierda sobre fotos claras. */
.mb-ops__media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0));pointer-events:none}
.mb-ops__play i{font-size:18px;line-height:1}
.mb-ops__play.setroi-video-popup{pointer-events:auto;cursor:pointer}
/* El cuerpo de la tarjeta es el general del sitio: .rc__* en components.css
   (views/v3/blocks/review-card-body.php). */
.mb-ops__veil{position:absolute;top:0;bottom:0;width:46px;pointer-events:none}
.mb-ops__veil--left{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.mb-ops__veil--right{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}

/* ---------- 12 · dudas sobre el servicio (Marca blanca.dc.html:749-781) ---------- */
.mb-faq{background:#f7faf8}
/* el template estrecha esta sección a 900 px en vez de los 1180 del resto (línea 750) */
.mb-faq__inner{max-width:900px}
.mb-faq__search-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.mb-faq__search{position:relative;width:min(480px,100%)}
.mb-faq__search i{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--c-muted);line-height:1}
.mb-faq__input{width:100%;box-sizing:border-box;background:var(--c-white);border:1px solid var(--c-border-input);border-radius:var(--r-sub);padding:13px 16px 13px 42px;font-size:14px;font-family:inherit;color:var(--c-ink);outline:none;transition:border-color .15s,box-shadow .15s}
.mb-faq__input:focus{border-color:var(--c-brand);box-shadow:var(--sh-focus)}
.mb-faq__note{font-size:12px;color:var(--c-muted);min-height:16px}
.mb-faq__box{background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-card);box-shadow:0 1px 3px rgba(23,36,28,.05);padding:6px 26px;display:flex;flex-direction:column}
.mb-faq__list{display:flex;flex-direction:column}
.mb-faq__item{border-top:1px solid var(--c-divider)}
/* el separador lo pierde la primera pregunta VISIBLE, no la primera del HTML: al filtrar,
   faqfilter.js mueve la clase (Marca blanca.dc.html:1132) */
.mb-faq__item.is-first{border-top:0}
.mb-faq__item[hidden]{display:none}
.mb-faq__q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:19px 0;background:none;border:0;font-family:inherit;color:inherit;text-align:left;cursor:pointer}
.mb-faq__q-text{font-size:15px;font-weight:600;color:var(--c-ink);transition:color .15s}
.mb-faq__q:hover .mb-faq__q-text{color:var(--c-green-text)}
.mb-faq__sign{width:27px;height:27px;border-radius:50%;border:1px solid var(--c-border-input);background:var(--c-white);color:var(--c-ink);display:flex;align-items:center;justify-content:center;font-size:16px;flex:none;line-height:1;transition:all .2s ease}
.mb-faq__q[aria-expanded="true"] .mb-faq__sign{border-color:var(--c-brand);background:var(--c-brand);color:var(--c-white);transform:rotate(45deg)}
.mb-faq__a{padding:0 44px 20px 0;font-size:14px;color:var(--c-secondary);line-height:1.7;text-wrap:pretty}
.mb-faq__a[hidden]{display:none}
/* la respuesta del template es un único <p> con margin:0 (línea 771); las nuestras llegan de BD
   y pueden traer varios, así que el segundo y siguientes se separan a mano. Sus enlaces llevan
   la clase legacy .stri-a, que aquí no existe: se les da el mismo peso que al enlace del estado
   vacío de esta misma caja (línea 776), el único enlace de FAQ que el template sí define. */
.mb-faq__a p{margin:0}
.mb-faq__a p + p{margin-top:10px}
.mb-faq__a a{font-weight:600}
.mb-faq__empty{padding:26px 0;text-align:center;font-size:13.5px;color:var(--c-muted)}
.mb-faq__empty[hidden]{display:none}
.mb-faq__empty-link{color:var(--c-brand);font-weight:600}

/* ---------- 13 · cierre oscuro (Marca blanca.dc.html:783-806) ---------- */
.mb-cta{position:relative;background:radial-gradient(120% 160% at 78% 100%,#245c3d 0%,#1b3f2a 44%,#152b1d 100%);overflow:hidden}
.mb-cta__dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px;pointer-events:none}
.mb-cta__halo{position:absolute;right:8%;bottom:-18%;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(95,201,142,.16),rgba(95,201,142,0) 62%);pointer-events:none}
.mb-cta__grid{position:relative;padding-top:clamp(56px,8vw,96px);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,54px);align-items:end}
.mb-cta__copy{display:flex;flex-direction:column;gap:16px;padding-bottom:clamp(56px,8vw,96px)}
.mb-cta__eyebrow{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5fc98e}
.mb-cta__title{margin:0;font-size:clamp(26px,4vw,36px);font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--c-white);text-wrap:balance}
.mb-cta__lead{margin:0;font-size:16px;line-height:1.6;color:#b7cdbf;max-width:440px;text-wrap:pretty}
.mb-cta__list{display:flex;flex-direction:column;gap:0;margin-top:8px;max-width:440px}
.mb-cta__item{display:flex;align-items:center;gap:12px;font-size:15px;color:#e8f3ec;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.mb-cta__item:last-child{border-bottom:0}
.mb-cta__check{width:22px;height:22px;border-radius:50%;background:rgba(95,201,142,.16);display:inline-flex;align-items:center;justify-content:center;flex:none}
.mb-cta__actions{display:flex;align-items:center;gap:18px;margin-top:12px;flex-wrap:wrap}
.mb-cta__btn{gap:8px;border-radius:var(--r-sub);padding:15px 28px;font-size:15px;box-shadow:0 5px 16px rgba(20,60,38,.5)}
.mb-cta__btn:hover{box-shadow:0 7px 20px rgba(20,60,38,.6)}
.mb-cta__btn i{font-size:14px;line-height:1}
.mb-cta__note{font-size:13px;color:#8fae9a}
.mb-cta__visual{position:relative;width:100%;height:clamp(300px,34vw,430px);display:flex;align-items:flex-end;justify-content:center}
.mb-cta__glow{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:88%;height:74%;border-radius:50% 50% 0 0/100% 100% 0 0;background:linear-gradient(180deg,rgba(95,201,142,.14),rgba(95,201,142,.03) 70%,transparent);pointer-events:none}
.mb-cta__img{position:relative;max-width:100%;max-height:100%;object-fit:contain;object-position:bottom;display:block;margin-bottom:-1px;filter:drop-shadow(0 24px 40px rgba(0,0,0,.4))}

/* ---------- responsive ----------
   >=760: deja de aplicar el caso `mob` del template (Marca blanca.dc.html:1004). */
@media (min-width:760px){
  .mb-hero__inner{padding:clamp(54px,8vw,90px) clamp(18px,4vw,28px) clamp(40px,6vw,64px)}
  .mb-feat__grid,.mb-kit__grid,.mb-flow__tabs,.mb-flow__duo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mb-comp__row{grid-template-columns:1.2fr 1fr 1fr}
}
/* >=1000: caso `desk` (Marca blanca.dc.html:1005). */
@media (min-width:1000px){
  .mb-hero__inner{grid-template-columns:1.05fr 1fr}
  .mb-split,.mb-cta__grid{grid-template-columns:1fr 1fr}
  .mb-feat__grid,.mb-flow__tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mb-kit__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mb-flow__body{grid-template-columns:1.15fr 1fr}
}

/* El template no consulta prefers-reduced-motion en los mocks; aquí sí, igual que hace la Home
   v3 con la máquina de escribir: los bucles infinitos se paran en su fotograma final y las
   entradas de una sola pasada dejan el contenido colocado. */
@media (prefers-reduced-motion:reduce){
  .mb-hero__copy,.mb-hero__visual,
  .mb-profit__chip,.mb-profit__bar,.mb-profit__client,.mb-profit__tick,.mb-profit__new,
  .mb-report__hero,.mb-report__sheen,.mb-report__fill,.mb-report__tick,.mb-report__row,
  .mb-report__estado,.mb-report__file,.mb-report__download,.mb-logo-slot--lg,
  .mb-art-cal__chip,.mb-art-lock__badge{animation:none}
  .mb-hero__slide{transition:none}
  .mb-report__sheen{opacity:0}
  /* la marquesina de marcas vuelve a fila estática que se envuelve */
  .mb-brands__marquee{mask-image:none;-webkit-mask-image:none}
  .mb-brands__track{width:100%;animation:none}
  .mb-brands__list{flex-wrap:wrap;justify-content:center;gap:18px 38px;width:100%;padding-right:0}
  .mb-brands__list--clone{display:none}
}

/* Opiniones en móvil: dos tarjetas a la vista (mitad del carril, gap 18px = 9px por lado);
   carousel.js avanza por grupo visible, así el carrusel va de 2 en 2 (petición 2026-08-19). */
@media (max-width:640px){
  .mb-ops__card{flex-basis:calc(50% - 9px)}
  .mb-ops__play{width:36px;height:36px;right:8px;bottom:8px}
  .mb-ops__play i{font-size:14px}
  /* Cuerpo compactado a media anchura: mismas medidas que .op-grid en móvil
     (customer-reviews.css). */
  .mb-ops__card .rc__body{padding:14px 14px 16px;gap:12px}
  .mb-ops__card .rc__meta{flex-direction:column;align-items:flex-start;gap:8px}
  .mb-ops__card .rc__stars{font-size:12px}
  .mb-ops__card .rc__tag{font-size:10.5px;padding:3px 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mb-ops__card .rc__quote{font-size:12.5px;line-height:1.55}
  .mb-ops__card .rc__author{gap:9px;padding-top:12px}
  .mb-ops__card .rc__avatar{width:28px;height:28px;font-size:10.5px}
  .mb-ops__card .rc__name{font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mb-ops__card .rc__role{font-size:10.5px}
}