/* Mack Hero — v3. Estilos compartidos (variables, reset) + Hero/CTAs.
   El header/nav vive aparte en mhv-nav.css (HTML plano, shortcode [mack_nav]).
   Esto de acá SÍ se arma con widgets nativos de Elementor, por eso los selectores
   de botones usan :is(.mhv-btn, .mhv-btn .elementor-button) — ver nota más abajo. */

/* Si a un contenedor de Elementor le queda "Ancho del contenido: Caja" en vez de
   "Completo", mete un <div class="e-con-inner"> extra adentro y los widgets dejan
   de ser hijos directos (rompe grids/gaps). display:contents lo "borra" del árbol
   de layout sin tocar el HTML. Sumar acá cualquier clase raíz nueva del Hero. */
.mhv-scope .mhv-hero-copy>.e-con-inner,
.mhv-scope .mhv-stage>.e-con-inner,
.mhv-scope .mhv-ctas>.e-con-inner,
:is(.mhv-scope.mhv-strip,.mhv-scope .mhv-strip)>.e-con-inner,
.mhv-scope .mhv-strip-inner>.e-con-inner{display:contents!important}

.mhv-scope{
  --mhv-paper:#FFFFFF;
  --mhv-ground:#F1F2F4;
  --mhv-ground-2:#E7E9EC;
  --mhv-ink:#111418;
  --mhv-ink-2:#3C434B;
  --mhv-mute:#6D747D;
  --mhv-hair:#DCDFE4;
  --mhv-hair-2:#EBEDF0;
  --mhv-red:var(--e-global-color-primary,#FF3131);
  --mhv-red-brand:var(--e-global-color-primary,#FF3131);
  /* rojo en contacto con texto (tipografía roja, fondo bajo texto blanco) —
     distinto del red-brand decorativo (filetes/bordes), por contraste. Solo
     se usa en la franja de financiamiento por ahora, ver mhv-fband* abajo. */
  --mhv-red-ink:#E01F1F;
  --mhv-wa:#1FA855;
  /* Montserrat es una decisión deliberada, aprobada por el cliente (no es la fuente del kit
     global) para titulares/mega-menú.
     Ya está cargada como Custom Font en Elementor (post 3510), no hace falta @font-face propio. */
  --mhv-display:'Montserrat',var(--e-global-typography-primary-font-family,'Helvética'),Helvetica,Arial,sans-serif;
  --mhv-body:var(--e-global-typography-text-font-family,'Cerebri'),system-ui,sans-serif;
  --mhv-label:'Montserrat','Cerebri',system-ui,sans-serif;
  --mhv-helv:'Helvética','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mhv-nav-h:78px;
  --mhv-util-h:30px;
  --mhv-gutter:clamp(20px,4.6vw,80px);
  --mhv-maxw:1340px;
  --mhv-copy-w:480px;

  background:var(--mhv-paper);color:var(--mhv-ink);font-family:var(--mhv-body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
.mhv-scope *{box-sizing:border-box}
.mhv-scope img{display:block;max-width:100%}
.mhv-scope a{color:inherit;text-decoration:none}
.mhv-scope button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mhv-scope :focus-visible{outline:2px solid var(--mhv-red);outline-offset:3px}
.mhv-scope h1,.mhv-scope h2,.mhv-scope h3,.mhv-scope h4{margin:0;font-family:var(--mhv-display);letter-spacing:-.022em;text-wrap:balance}
.mhv-scope p{margin:0}
.mhv-scope .mhv-lab{font-family:var(--mhv-label);font-size:13px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mhv-mute)}

/* ---------- botones (compartidos: nav plano + widgets de Elementor en el Hero) ---------- */
/* :is(.mhv-btn, .mhv-btn .elementor-button) cubre los dos casos: la clase puesta
   directo en un <a> (bloques HTML) o puesta en el widget Button de Elementor,
   donde cae en el <div> que envuelve al <a class="elementor-button"> real. */
/* los CTA usan la fuente de texto del sitio (Cerebri), no Montserrat — así el
   botón sostiene su peso frente al titular sin sumar una tercera fuente visible */
.mhv-scope :is(.mhv-btn,.mhv-btn .elementor-button){display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 24px;
  border:0;border-radius:999px!important;font-family:var(--mhv-body);font-size:13px;font-weight:700;letter-spacing:.06em;
  line-height:1;text-transform:uppercase;transition:.2s;white-space:nowrap}
.mhv-scope .mhv-btn svg{flex:0 0 auto;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;display:block;align-self:center}
.mhv-scope :is(.mhv-btn-primary,.mhv-btn-primary .elementor-button){background:var(--mhv-red-brand)!important;color:#fff!important}
.mhv-scope :is(.mhv-btn-primary,.mhv-btn-primary .elementor-button):hover{background:var(--mhv-ink)!important;color:#fff!important}
.mhv-scope :is(.mhv-btn-ghost,.mhv-btn-ghost .elementor-button){background:none!important;border:1px solid var(--mhv-hair)!important;color:var(--mhv-ink)!important}
.mhv-scope :is(.mhv-btn-ghost,.mhv-btn-ghost .elementor-button):hover{border-color:var(--mhv-ink)!important}
/* el secundario del hero puede caer sobre el video: fondo blanco translúcido */
:is(.mhv-scope.mhv-hero,.mhv-scope .mhv-hero) :is(.mhv-btn-ghost,.mhv-btn-ghost .elementor-button){background:rgba(255,255,255,.88)!important;border-color:rgba(17,20,24,.16)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:is(.mhv-scope.mhv-hero,.mhv-scope .mhv-hero) :is(.mhv-btn-ghost,.mhv-btn-ghost .elementor-button):hover{background:#fff!important;border-color:var(--mhv-ink)!important}
.mhv-scope :is(.mhv-btn-wa,.mhv-btn-wa .elementor-button){background:var(--mhv-wa)!important;color:#fff!important}
.mhv-scope .mhv-btn-wa svg{width:20px;height:20px;fill:currentColor;stroke:none}
.mhv-scope :is(.mhv-btn-wa,.mhv-btn-wa .elementor-button):hover{background:#188544!important}
.mhv-scope :is(.mhv-btn-lg,.mhv-btn-lg .elementor-button){height:50px!important;padding:0 30px!important;font-size:16px}
/* reset genérico para un widget Button usado como link de texto plano (ver mhv-linklike en nav) */
.mhv-scope .mhv-linklike .elementor-button{display:inline-flex;align-items:center;gap:7px;background:none!important;
  border:0!important;padding:0!important;margin:0;border-radius:0!important;height:auto!important;
  min-height:0!important;box-shadow:none!important;font-family:var(--mhv-label);font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mhv-mute)!important;transition:color .2s}
.mhv-scope .mhv-linklike .elementor-button:hover{color:var(--mhv-ink)!important;background:none!important}
.mhv-scope .mhv-linklike svg,.mhv-scope .mhv-linklike i{width:14px!important;height:14px!important;font-size:14px!important;fill:currentColor!important;color:inherit!important}
.mhv-scope .mhv-linklike.mhv-wa svg,.mhv-scope .mhv-linklike.mhv-wa i{color:var(--mhv-wa)}

/* ---------- hero claro, full-bleed ---------- */
:is(.mhv-scope.mhv-hero,.mhv-scope .mhv-hero){position:relative;display:flex;align-items:center;overflow:hidden;
  height:calc(100dvh - var(--mhv-nav-h) - var(--mhv-util-h));
  min-height:min(520px,calc(100dvh - var(--mhv-nav-h) - var(--mhv-util-h)));background:var(--mhv-paper)}

.mhv-scope .mhv-stage{position:absolute;inset:0;overflow:hidden}
.mhv-scope .mhv-stage::before{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 70% at 62% 24%,#FFFFFF,transparent 72%),
             linear-gradient(160deg,#F6F7F8 0%,#E8EBEE 58%,#DCE0E5 100%)}
/* el velo se ancla a la columna de texto (--mhv-copy-w), no a un % del viewport */
.mhv-scope .mhv-stage::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,
    rgba(255,255,255,.12) 0,
    rgba(255,255,255,.04) calc(var(--mhv-gutter) + var(--mhv-copy-w)*.35),
    rgba(255,255,255,0)   calc(var(--mhv-gutter) + var(--mhv-copy-w)*.55))}
.mhv-scope .mhv-frame{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}
.mhv-scope .mhv-frame.mhv-on{opacity:1;visibility:visible}
.mhv-scope .mhv-frame img{position:absolute;right:0;left:auto;top:50%;transform:translateY(-50%);
  width:min(62vw,1080px);filter:drop-shadow(0 30px 40px rgba(17,20,24,.14))}
.mhv-scope .mhv-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* foto/video de escena a pantalla completa: se comporta como el video, no como recorte de producto */
.mhv-scope .mhv-frame img.mhv-full{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  transform:none;object-fit:cover;object-position:64% 72%;filter:none}
/* Escritorio: el medio se ancla a la derecha y su borde se funde con el fondo. Los 8 pasos
   de la máscara siguen una curva suave para que no se vea una línea vertical. */
@media (min-width:901px){
  .mhv-scope .mhv-frame img.mhv-full,.mhv-scope .mhv-frame video.mhv-full{left:auto;right:0;width:76%;
    -webkit-mask-image:linear-gradient(90deg,
      transparent 0,rgba(0,0,0,.06) 2.5%,rgba(0,0,0,.2) 5%,
      rgba(0,0,0,.42) 7.5%,rgba(0,0,0,.65) 10%,rgba(0,0,0,.84) 12.5%,
      rgba(0,0,0,.95) 14.5%,#000 16.5%);
    mask-image:linear-gradient(90deg,
      transparent 0,rgba(0,0,0,.06) 2.5%,rgba(0,0,0,.2) 5%,
      rgba(0,0,0,.42) 7.5%,rgba(0,0,0,.65) 10%,rgba(0,0,0,.84) 12.5%,
      rgba(0,0,0,.95) 14.5%,#000 16.5%)}
}
.mhv-scope .mhv-stage:has(.mhv-frame.mhv-on img.mhv-full) .mhv-stage-foot::before,
.mhv-scope .mhv-stage:has(.mhv-frame.mhv-on video.mhv-full) .mhv-stage-foot::before{content:"";position:absolute;left:0;right:0;top:-28px;bottom:0;
  z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.12) 28%,rgba(255,255,255,.35) 52%,rgba(255,255,255,.62) 76%,rgba(255,255,255,.85) 100%)}
.mhv-scope .mhv-stage:has(.mhv-frame.mhv-on img.mhv-full) .mhv-tab .mhv-rail,.mhv-scope .mhv-stage:has(.mhv-frame.mhv-on video.mhv-full) .mhv-tab .mhv-rail{background:rgba(17,20,24,.28)}
.mhv-scope .mhv-stage:has(.mhv-frame.mhv-on img.mhv-full) .mhv-tab .mhv-name,.mhv-scope .mhv-stage:has(.mhv-frame.mhv-on video.mhv-full) .mhv-tab .mhv-name{color:rgba(17,20,24,.62)}
.mhv-scope .mhv-stage:has(.mhv-frame.mhv-on img.mhv-full) .mhv-tab[aria-selected="true"] .mhv-name,
.mhv-scope .mhv-stage:has(.mhv-frame.mhv-on video.mhv-full) .mhv-tab[aria-selected="true"] .mhv-name{color:var(--mhv-ink)}
.mhv-scope .mhv-stage:has(.mhv-frame.mhv-on img.mhv-full) .mhv-icon-btn,.mhv-scope .mhv-stage:has(.mhv-frame.mhv-on video.mhv-full) .mhv-icon-btn{color:var(--mhv-ink)}
.mhv-scope .mhv-tab[aria-selected="true"] .mhv-name{color:var(--mhv-ink)}
.mhv-scope .mhv-frame:has(video.mhv-full) .mhv-marque,.mhv-scope .mhv-frame:has(img.mhv-full) .mhv-marque{top:24px;display:flex;gap:8px;color:var(--mhv-ink);
  font-size:12.5px;letter-spacing:.22em}
.mhv-scope .mhv-frame:has(video.mhv-full) .mhv-marque b,.mhv-scope .mhv-frame:has(img.mhv-full) .mhv-marque b{padding:8px 15px;border-radius:999px;font-weight:800;
  background:rgba(255,255,255,.9);border:1px solid var(--mhv-hair);backdrop-filter:blur(6px)}
.mhv-scope .mhv-marque{position:absolute;right:var(--mhv-gutter);top:26px;z-index:3;font-family:var(--mhv-display);
  font-weight:800;font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:rgba(17,20,24,.4)}
.mhv-scope .mhv-vlabel{position:absolute;right:var(--mhv-gutter);top:24px;left:auto;z-index:3;
  display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:999px;
  background:rgba(255,255,255,.9);border:1px solid var(--mhv-hair);
  font-family:var(--mhv-label);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mhv-ink-2)}
.mhv-scope .mhv-vlabel b{width:7px;height:7px;border-radius:50%;background:var(--mhv-red-brand);animation:mhv-pulse 1.8s ease-in-out infinite}
@keyframes mhv-pulse{50%{opacity:.25}}

.mhv-scope .mhv-hero-copy{position:relative;z-index:5;width:100%;
  padding:clamp(26px,4vw,54px) var(--mhv-gutter) clamp(58px,7vw,78px)}
.mhv-scope .mhv-slide-copy{display:none;max-width:var(--mhv-copy-w)}
.mhv-scope .mhv-slide-copy.mhv-on{display:block;animation:mhv-rise .5s cubic-bezier(.2,.7,.3,1) both}
/* el texto se monta sobre el video/foto: halo blanco para no perder legibilidad */
.mhv-scope .mhv-slide-copy .mhv-eyebrow,
.mhv-scope .mhv-slide-copy .mhv-pricebar,.mhv-scope .mhv-slide-copy .mhv-trust{
  text-shadow:0 1px 16px rgba(255,255,255,.9),0 0 3px rgba(255,255,255,.7)}
@media (min-width:901px){
  .mhv-scope .mhv-hero-copy h1,.mhv-scope .mhv-hero-copy h2,.mhv-scope .mhv-hero-copy p{
    text-shadow:0 1px 18px rgba(255,255,255,.55),0 0 36px rgba(255,255,255,.35)}
}
@keyframes mhv-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.mhv-scope .mhv-eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:16px;
  font-family:var(--mhv-label);font-size:12.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mhv-ink-2)}
.mhv-scope .mhv-eyebrow s{width:32px;height:2px;background:var(--mhv-red-brand);text-decoration:none}
.mhv-scope .mhv-hero-copy h1{font-weight:700;font-size:clamp(25px,2.8vw,39px);line-height:1.06;width:max-content;max-width:min(100%,calc(var(--mhv-copy-w) + 40px))}
.mhv-scope .mhv-hero-copy h1 em{font-style:normal;color:var(--mhv-red)}
.mhv-scope .mhv-lede{margin-top:16px;max-width:42ch;font-size:clamp(15px,1.1vw,16.5px);color:var(--mhv-ink-2)}
.mhv-scope .mhv-pricebar{display:flex;align-items:flex-end;gap:13px;margin-top:22px;padding-top:18px;
  border-top:1px solid rgba(17,20,24,.16)}
.mhv-scope .mhv-pricebar .mhv-from,.mhv-scope .mhv-pricebar .mhv-tax{font-family:var(--mhv-label);font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mhv-mute);padding-bottom:7px}
.mhv-scope .mhv-pricebar .mhv-amount{font-family:var(--mhv-display);font-weight:700;font-size:clamp(28px,3vw,40px);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mhv-scope .mhv-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,26px);margin-top:24px}
/* secundario del hero, como enlace subrayado en línea junto al botón primario (no confundir con .mhv-also, que es independiente y lleva margin-top propio) */
.mhv-scope .mhv-link-2{font-family:var(--mhv-body);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mhv-ink);border-bottom:1px solid rgba(17,20,24,.3);padding-bottom:3px;transition:.2s}
.mhv-scope .mhv-link-2:hover{color:var(--mhv-red);border-bottom-color:var(--mhv-red)}
.mhv-scope .mhv-also{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-family:var(--mhv-label);font-size:13.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mhv-ink-2);border-bottom:1px solid rgba(17,20,24,.22);
  padding-bottom:2px;transition:.2s}
.mhv-scope .mhv-also:hover{color:var(--mhv-red);border-bottom-color:var(--mhv-red)}
.mhv-scope .mhv-also svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7}
.mhv-scope .mhv-trust{margin-top:clamp(18px,3.4vh,34px);display:flex;flex-direction:column;gap:2px;
  font-family:var(--mhv-helv);font-size:13px;color:var(--mhv-mute);line-height:1.35}
.mhv-scope .mhv-trust b{font-family:var(--mhv-helv);font-weight:700;letter-spacing:.01em;color:var(--mhv-ink)}
.mhv-scope .mhv-trust span{font-weight:400;color:var(--mhv-mute)}

.mhv-scope .mhv-stage-foot{position:absolute;left:0;right:0;bottom:0;z-index:6;isolation:isolate;padding:0 var(--mhv-gutter) 24px;
  display:flex;align-items:flex-end;gap:14px}
/* min-width:0 es obligatorio: sin esto, un flex item que a su vez es flex
   container (.mhv-tabs adentro de .mhv-stage-foot) no se achica más allá de
   su min-content automático y empuja a prevBtn/nextBtn fuera de la pantalla
   en mobile — no es un truncado de texto nomás, es overflow real del layout. */
.mhv-scope .mhv-tabs{display:flex;gap:14px;flex:1;min-width:0}
/* el tema (Hello Elementor) le pone a cualquier <button type="button"> un borde/relleno #CC3366 en :hover/:focus
   (su reset base de formularios) — nuestros tabs del carrusel SON <button type="button"> (los crea mhv-carousel.js),
   así que hay que blindar fondo/borde en estado normal Y en :hover/:focus por separado, mismo patrón que .mhv-acc/.mhv-menu button. */
.mhv-scope .mhv-tab,.mhv-scope .mhv-tab:hover,.mhv-scope .mhv-tab:focus{background:none!important;border:0!important;color:inherit!important}
.mhv-scope .mhv-tab{position:relative;flex:1 1 0;min-width:0;max-width:170px;text-align:left;padding-top:9px}
.mhv-scope .mhv-tab .mhv-rail{position:absolute;top:0;left:0;right:0;height:1px;background:rgba(17,20,24,.14);overflow:hidden}
.mhv-scope .mhv-tab .mhv-rail b{position:absolute;inset:0 100% 0 0;background:var(--mhv-red-brand);transition:right .1s linear}
.mhv-scope .mhv-tab .mhv-num{display:none}
.mhv-scope .mhv-tab .mhv-name{display:block;font-family:var(--mhv-helv);font-size:11.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(17,20,24,.34);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mhv-scope .mhv-tab[aria-selected="true"] .mhv-name{color:var(--mhv-ink)}
.mhv-scope .mhv-icon-btn,.mhv-scope .mhv-icon-btn:hover,.mhv-scope .mhv-icon-btn:focus{background:none!important;border:0!important}
.mhv-scope .mhv-icon-btn{width:auto;height:20px;margin-bottom:1px;border-radius:0;
  display:flex;align-items:center;justify-content:center;color:rgba(17,20,24,.35);transition:.2s}
.mhv-scope .mhv-icon-btn:hover{color:var(--mhv-ink)}
.mhv-scope .mhv-icon-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.mhv-scope .mhv-stage-foot .mhv-icon-btn+.mhv-icon-btn{margin-left:14px}

:is(.mhv-scope.mhv-strip,.mhv-scope .mhv-strip){background:var(--mhv-ground);border-top:1px solid var(--mhv-hair);border-bottom:1px solid var(--mhv-hair)}
.mhv-scope .mhv-strip-inner{padding:16px var(--mhv-gutter);display:flex;flex-wrap:wrap;
  align-items:center;gap:clamp(16px,3vw,34px)}
:is(.mhv-scope.mhv-strip,.mhv-scope .mhv-strip) .mhv-lab{flex:0 0 auto}
.mhv-scope .mhv-brands{flex:1 1 340px;display:flex;flex-wrap:wrap;gap:clamp(10px,1.6vw,24px)}
.mhv-scope .mhv-logo-slot{flex:1 1 auto;min-width:max-content;display:flex;align-items:center;justify-content:center;
  height:52px;padding:0 clamp(6px,.8vw,12px)}

/* rotador para móvil: no entran los 5 logos en una fila, así que rotan de a uno
   (mismo comportamiento que la franja de marcas original, que en angosto usaba un carrusel) */
.mhv-scope .mhv-logo-rotator{display:none}
.mhv-scope .mhv-logo-rotator .mhv-logo-slot{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .5s ease,visibility .5s}
.mhv-scope .mhv-logo-rotator .mhv-logo-slot.mhv-on{position:relative;opacity:1;visibility:visible}
@media (max-width:1350px){
  .mhv-scope .mhv-brands{display:none}
  .mhv-scope .mhv-logo-rotator{display:block;position:relative;flex:1 1 auto;height:52px}
}
.mhv-scope .mhv-logo-slot img{max-width:100%;max-height:24px;width:auto;height:auto;object-fit:contain}
:is(.mhv-scope.mhv-strip,.mhv-scope .mhv-strip) .mhv-logo-slot[data-brand="MACK"] img{max-height:32px}
.mhv-scope .mhv-logo-slot span{font-family:var(--mhv-display);font-weight:700;letter-spacing:.12em;font-size:clamp(11px,.95vw,14px);
  color:var(--mhv-ink-2);white-space:nowrap}

.mhv-scope .mhv-wrap{max-width:var(--mhv-maxw);margin:0 auto;padding:0 var(--mhv-gutter)}

@media (max-height:620px) and (min-width:901px){
  .mhv-scope .mhv-lede{margin-top:10px}
  .mhv-scope .mhv-ctas{margin-top:14px}
  .mhv-scope .mhv-trust{margin-top:12px}
  .mhv-scope :is(.mhv-btn-lg,.mhv-btn-lg .elementor-button){height:44px!important}
}
@media (max-width:1200px){.mhv-scope{--mhv-copy-w:410px}}
@media (max-width:900px){
  /* En móvil el medio va arriba y el texto debajo, para no tapar la imagen. */
  :is(.mhv-scope.mhv-hero,.mhv-scope .mhv-hero){flex-direction:column;align-items:stretch;height:auto;min-height:0;background:#fff;touch-action:pan-y}
  /* svh y no dvh: reserva el botón con la barra del navegador visible y la altura no
     cambia al hacer scroll. La base se funde con el blanco del bloque de texto. */
  .mhv-scope .mhv-stage{position:relative;inset:auto;order:-1;flex:none;width:100%;height:clamp(240px,42svh,380px);
    -webkit-mask-image:linear-gradient(#000 calc(100% - 40px),rgba(0,0,0,.84) calc(100% - 30px),
      rgba(0,0,0,.55) calc(100% - 21px),rgba(0,0,0,.2) calc(100% - 10px),transparent 100%);
    mask-image:linear-gradient(#000 calc(100% - 40px),rgba(0,0,0,.84) calc(100% - 30px),
      rgba(0,0,0,.55) calc(100% - 21px),rgba(0,0,0,.2) calc(100% - 10px),transparent 100%)}
  /* Fondo oscuro fijo tras las pestañas, para que su contraste no dependa de la foto.
     Las pestañas van por encima del fundido; si no, quedarían sobre una banda gris. */
  .mhv-scope .mhv-stage::after{background:linear-gradient(0deg,rgba(0,0,0,.62) 0,rgba(0,0,0,.62) 78px,rgba(0,0,0,.38) 94px,rgba(0,0,0,.13) 108px,rgba(0,0,0,0) 118px)}
  .mhv-scope .mhv-stage-foot{padding-bottom:40px}
  .mhv-scope .mhv-stage-foot::before{display:none!important}
  .mhv-scope .mhv-tab .mhv-rail{background:rgba(255,255,255,.42)!important}
  .mhv-scope .mhv-tab .mhv-name{color:rgba(255,255,255,.78)!important}
  .mhv-scope .mhv-tab[aria-selected="true"] .mhv-name{color:#fff!important}
  /* Todas las diapositivas ocupan la misma celda: el alto lo fija la de más texto
     y la página no salta al cambiar de pestaña. */
  .mhv-scope .mhv-hero-copy{display:grid;grid-template-columns:minmax(0,1fr);padding:20px var(--mhv-gutter) 26px}
  /* Misma transición que .mhv-frame, para que imagen y texto cambien juntos. */
  .mhv-scope .mhv-slide-copy{display:block;grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}
  .mhv-scope .mhv-hero-copy h1{width:auto;max-width:100%}
  .mhv-scope .mhv-slide-copy.mhv-on{opacity:1;visibility:visible;animation:none}
  .mhv-scope .mhv-slide-copy .mhv-eyebrow,.mhv-scope .mhv-slide-copy h1,.mhv-scope .mhv-slide-copy .mhv-lede,
  .mhv-scope .mhv-slide-copy .mhv-pricebar,.mhv-scope .mhv-slide-copy .mhv-trust{text-shadow:none}
  .mhv-scope .mhv-eyebrow{margin-bottom:10px}
  .mhv-scope .mhv-lede{margin-top:10px}
  .mhv-scope .mhv-frame img{width:140vw;right:-18%;top:auto;bottom:2%;transform:none}
  .mhv-scope .mhv-frame img.mhv-full,.mhv-scope .mhv-frame video.mhv-full{width:100%;right:0;bottom:0;object-position:60% 62%}
  .mhv-scope .mhv-marque,.mhv-scope .mhv-vlabel{right:auto;left:var(--mhv-gutter);top:auto;bottom:104px}
  .mhv-scope .mhv-logo-slot{flex:0 1 auto}
  .mhv-scope .mhv-slide-copy{max-width:none;text-align:center}
  /* Texto y botones centrados bajo la imagen; el rótulo lleva una raya a cada lado
     para que no se vea cargado hacia la izquierda. */
  .mhv-scope .mhv-eyebrow::after{content:"";width:32px;height:2px;background:var(--mhv-red-brand)}
  .mhv-scope .mhv-lede{margin-left:auto;margin-right:auto}
  .mhv-scope .mhv-ctas{justify-content:center}
  .mhv-scope .mhv-trust{align-items:center}
}
@media (max-width:767px){
  .mhv-scope .mhv-tab{padding:9px 0 0!important}
  .mhv-scope .mhv-tab .mhv-name{font-size:10.5px;letter-spacing:.04em}
  /* con 4 pestañas + prev/next no entra nada legible en un celular angosto;
     los prev/next se sacan (cada pestaña ya es tappable) para darle todo
     el ancho a los nombres. */
  .mhv-scope .mhv-stage-foot .mhv-icon-btn{display:none}
  .mhv-scope .mhv-tabs{gap:8px}
  /* franja de marcas en mobile: "Marcas que representamos" arriba centrado,
     el logo (rotador) abajo — en vez de las dos cosas en fila apretadas. */
  .mhv-scope .mhv-strip-inner{flex-direction:column;align-items:stretch;text-align:center}
}
/* ============ Franja de financiamiento (shortcode [mack_financing]) ============ */
:is(.mhv-scope.mhv-fband,.mhv-scope .mhv-fband){background:var(--mhv-ground);border-top:1px solid var(--mhv-hair);border-bottom:1px solid var(--mhv-hair)}
.mhv-scope .mhv-fband-in{max-width:var(--mhv-maxw);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;column-gap:clamp(26px,4vw,72px);row-gap:16px;
  padding:clamp(30px,3.6vw,46px) var(--mhv-gutter);flex-wrap:wrap}
.mhv-scope .mhv-fband-l{flex:1 1 460px;min-width:0}
.mhv-scope .mhv-fband-rule{width:44px;height:3px;background:var(--mhv-red-brand);margin-bottom:18px}
/* mismo tamaño que .mhv-blk-hd h2 / .mhv-why p de la sección "razones" de al
   lado, para que las dos franjas se vean con la misma escala tipográfica */
:is(.mhv-scope.mhv-fband,.mhv-scope .mhv-fband) h2{font-size:clamp(25px,2.8vw,39px);line-height:1.05;max-width:19ch}
:is(.mhv-scope.mhv-fband,.mhv-scope .mhv-fband) h2 em{font-style:normal;color:var(--mhv-red-ink)}
.mhv-scope .mhv-fband-lede{margin-top:14px;max-width:44ch;color:var(--mhv-ink-2);font-size:clamp(15px,1.05vw,17.5px)}
.mhv-scope .mhv-fband-r{flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:10px}
/* en esta franja el botón primario usa red-ink (más contraste con blanco encima)
   en vez del red-brand global de .mhv-btn-primary, y el de WhatsApp va invertido
   (blanco con glifo verde) para no competir con el rojo del CTA principal —
   las dos cosas son un criterio de ESTA sección nomás, no tocan el botón global. */
:is(.mhv-scope.mhv-fband,.mhv-scope .mhv-fband) :is(.mhv-btn-primary,.mhv-btn-primary .elementor-button){background:var(--mhv-red-ink)!important}
:is(.mhv-scope.mhv-fband,.mhv-scope .mhv-fband) :is(.mhv-btn-primary,.mhv-btn-primary .elementor-button):hover{background:var(--mhv-ink)!important}
:is(.mhv-scope.mhv-fband,.mhv-scope .mhv-fband) :is(.mhv-btn-wa,.mhv-btn-wa .elementor-button){background:var(--mhv-paper)!important;border:1px solid var(--mhv-hair)!important;color:var(--mhv-ink)!important}
/* el ícono hereda stroke:currentColor del .mhv-btn base (pensado para íconos
   de solo trazo, como la flecha) — en el botón verde sólido no se nota porque
   ahí currentColor es blanco igual que el fill, pero acá currentColor es
   negro y se ve como un borde negro no deseado sobre el glifo verde. */
:is(.mhv-scope.mhv-fband,.mhv-scope .mhv-fband) .mhv-btn-wa svg{fill:var(--mhv-wa)!important;stroke:none!important}
:is(.mhv-scope.mhv-fband,.mhv-scope .mhv-fband) :is(.mhv-btn-wa,.mhv-btn-wa .elementor-button):hover{border-color:var(--mhv-ink)!important;background:var(--mhv-paper)!important}
@media (max-width:980px){
  .mhv-scope .mhv-fband-in{flex-direction:column;align-items:flex-start;padding:26px var(--mhv-gutter)}
  .mhv-scope .mhv-fband-l{flex:0 0 auto;width:100%}
  .mhv-scope .mhv-fband-r{width:auto}
}
@media (max-width:620px){
  .mhv-scope .mhv-fband-r{width:100%;align-self:stretch}
  /* texto centrado en mobile, en vez de heredar el alineado a la derecha
     que tenía sentido cuando el bloque de texto compartía fila con los botones */
  .mhv-scope .mhv-fband-l{text-align:center}
  .mhv-scope .mhv-fband-rule{margin-left:auto;margin-right:auto}
  /* "Escríbenos y conoce los planes" no entraba en una sola línea con el
     tamaño de escritorio — se achica la tipografía (no se envuelve a 2
     líneas) para que quepa en una pastilla de una sola línea en celular. */
  :is(.mhv-scope.mhv-fband,.mhv-scope .mhv-fband) :is(.mhv-btn,.mhv-btn .elementor-button){padding:0 16px!important;font-size:12px!important;gap:6px}
}

/* ============ Cuatro razones (shortcode [mack_why]) ============ */
:is(.mhv-scope.mhv-sec,.mhv-scope .mhv-sec){padding:clamp(52px,6.4vw,92px) 0}
/* esta sección usa un contenedor más ancho que el .mhv-wrap genérico (1340px)
   para que las tarjetas aprovechen más el ancho en pantallas grandes */
:is(.mhv-scope.mhv-sec,.mhv-scope .mhv-sec) .mhv-wrap{max-width:1600px}
.mhv-scope .mhv-blk-hd{max-width:60ch;margin-bottom:clamp(26px,3vw,40px)}
.mhv-scope .mhv-blk-hd h2{font-size:clamp(25px,2.8vw,39px);line-height:1.06;margin-top:14px;letter-spacing:-.022em}
.mhv-scope .mhv-why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--mhv-hair);border-top:1px solid var(--mhv-hair);border-bottom:1px solid var(--mhv-hair)}
.mhv-scope .mhv-why article{position:relative;background:var(--mhv-paper);display:flex;flex-direction:column;
  gap:16px;padding:38px clamp(22px,2.2vw,34px) 42px}
.mhv-scope .mhv-why article::before{content:"";position:absolute;top:-2px;left:clamp(22px,2.2vw,34px);
  width:34px;height:3px;background:var(--mhv-red-brand)}
.mhv-scope .mhv-why-n{font-family:var(--mhv-helv);font-size:12.5px;font-weight:400;letter-spacing:.13em;color:var(--mhv-mute)}
.mhv-scope .mhv-why-ic{width:52px;height:52px;flex:0 0 auto;border:1.5px solid var(--mhv-red-brand);
  display:flex;align-items:center;justify-content:center}
.mhv-scope .mhv-why-ic svg{width:26px;height:26px;fill:none;stroke:var(--mhv-red-ink);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.mhv-scope .mhv-why h3{font-size:clamp(19px,1.7vw,24px);line-height:1.16;letter-spacing:-.008em}
.mhv-scope .mhv-why p{font-size:clamp(15px,1.05vw,17.5px);line-height:1.55;color:var(--mhv-ink-2)}
@media (max-width:980px){.mhv-scope .mhv-why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.mhv-scope .mhv-why{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){.mhv-scope *{animation-duration:.001ms!important;transition-duration:.001ms!important}}