/* ==========================================================================
   MTQ Solutions — Sistema de diseño para WordPress + Elementor
   Deriva de DESIGN.md v5.0 §10 (lenguaje visual del prototipo aprobado).
   Se carga desde wp-content/novamira-sandbox/mtq-design-system.php
   ========================================================================== */

:root{
  --mtq-bg:#06070D;
  --mtq-surface:#0A0C15;
  --mtq-heading:#FFFFFF;
  --mtq-body:#D6DCE8;
  --mtq-lead:#C3CAD8;
  --mtq-dim:#8B93A6;
  --mtq-accent:#6F9CF5;
  --mtq-accent-solid:#2C5BE8;
  --mtq-accent-hover:#2247BE;
  --mtq-zona:#45C489;

  --mtq-atm-azul:#2C5BE8;
  --mtq-atm-indigo:#1A38A8;
  --mtq-atm-cian:#1A8ECE;
  --mtq-atm-rosa:#C84C9C;

  --mtq-line:rgba(255,255,255,.085);
  --mtq-line-mid:rgba(255,255,255,.16);
  --mtq-line-strong:rgba(255,255,255,.42);

  --mtq-ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- base ---------- */
html{scrollbar-color:rgba(111,156,245,.45) #0A0C15;scrollbar-width:thin}
/* Astra deja el cuerpo en la pila de fuentes del sistema. El sistema la
   reemplaza por Inter, que es lo que declara el DESIGN.md. */
body,
body button,
body input,
body select,
body textarea,
body .ast-button,
body .ast-custom-button{
  font-family:Inter,system-ui,sans-serif;
}
body{
  background:var(--mtq-bg);
  color:var(--mtq-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body h1,body h2,body h3,body h4{font-family:Manrope,system-ui,sans-serif}
body ::selection{background:rgba(44,91,232,.55);color:#fff}
body ::-webkit-scrollbar{width:11px;height:11px}
body ::-webkit-scrollbar-track{background:#0A0C15}
body ::-webkit-scrollbar-thumb{background:rgba(111,156,245,.32);border-radius:99px;border:3px solid #0A0C15}
body ::-webkit-scrollbar-thumb:hover{background:rgba(111,156,245,.55)}
body :focus-visible{outline:2px solid var(--mtq-accent);outline-offset:3px;border-radius:6px}

/* El grano va sobre todo el sitio. Evita el bandeado de los degradados. */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.042;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   VIDRIO LÍQUIDO — el material del sitio (DESIGN.md §10.1)
   ========================================================================== */
.mtq-glass{
  position:relative;
  background:rgba(255,255,255,.03);
  -webkit-backdrop-filter:blur(16px) saturate(135%);
          backdrop-filter:blur(16px) saturate(135%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.10);
  overflow:hidden;
}
.mtq-glass::before{
  content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1.4px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 22%,
    rgba(255,255,255,.10) 42%, rgba(255,255,255,.10) 58%,
    rgba(255,255,255,.18) 78%, rgba(255,255,255,.55) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}
.mtq-glass-strong{
  -webkit-backdrop-filter:blur(42px) saturate(140%);
          backdrop-filter:blur(42px) saturate(140%);
  box-shadow:0 4px 18px -6px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.16);
}
.mtq-glass-strong::before{
  background:linear-gradient(180deg,
    rgba(255,255,255,.62) 0%, rgba(255,255,255,.24) 20%,
    rgba(255,255,255,.10) 40%, rgba(255,255,255,.10) 60%,
    rgba(255,255,255,.24) 80%, rgba(255,255,255,.62) 100%);
}

/* ==========================================================================
   ATMÓSFERA (DESIGN.md §10.2)
   Se aplica a un container de Elementor; los blooms son pseudo-elementos.
   ========================================================================== */
.mtq-atm{position:relative;overflow:hidden;isolation:isolate}
.mtq-atm > .e-con-inner,
.mtq-atm > .elementor-widget-wrap,
.mtq-atm > .elementor-element{position:relative;z-index:2}
/* Elementor pinta el fondo del container en el propio elemento, así que los
   blooms van por encima de ese fondo pero por debajo del contenido. */
.mtq-atm > .e-con-inner > *{position:relative;z-index:2}

.mtq-atm::before,
.mtq-atm::after{content:"";position:absolute;z-index:0;pointer-events:none;border-radius:50%;filter:blur(84px)}

/* Home — azul dominante con acompañante rosa, intensidad alta */
.mtq-atm-home::before{
  width:1180px;height:760px;top:-330px;left:50%;margin-left:-590px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(62,110,255,.72), rgba(44,91,232,0) 70%);
}
.mtq-atm-home::after{
  width:760px;height:560px;top:-90px;left:-200px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(196,72,152,.42), rgba(196,72,152,0) 68%);
}

/* Router — misma familia, media potencia */
.mtq-atm-router::before{
  width:1240px;height:700px;top:-180px;left:50%;margin-left:-620px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(44,91,232,.34), rgba(44,91,232,0) 70%);
}
.mtq-atm-router::after{
  width:680px;height:460px;bottom:-160px;left:6%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(196,72,152,.26), rgba(196,72,152,0) 70%);
}

/* Cierre */
.mtq-atm-cierre::before{
  width:1140px;height:640px;bottom:-320px;left:50%;margin-left:-570px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(62,110,255,.46), rgba(44,91,232,0) 70%);
}
.mtq-atm-cierre::after{
  width:640px;height:420px;top:-140px;right:4%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(196,72,152,.26), rgba(196,72,152,0) 70%);
}
/* El velo. NO es decorativo: sin él el H1 cae a 2.16:1 sobre el bloom.
   Vive en el ::before del inner y no en el de la sección: en la sección chocaba
   con .mtq-atm, que ya ocupa los dos pseudo-elementos del container con los
   blooms. Cuando los dos coincidían, el velo se comía el bloom dominante y
   además heredaba su blur y su borde redondo. */
.mtq-velo,
.mtq-velo-izq{position:relative}
/* El inner va sin posicionar a propósito: así el velo se ancla a la sección
   entera y no al inner, que está metido por dentro del padding. Sigue creando
   contexto de apilamiento porque es un ítem flex con z-index. */
.mtq-velo > .e-con-inner,
.mtq-velo-izq > .e-con-inner{position:static;z-index:2}
.mtq-velo > .e-con-inner::before,
.mtq-velo-izq > .e-con-inner::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
}
.mtq-velo > .e-con-inner::before{
  background:radial-gradient(58% 48% at 50% 38%,
    rgba(6,7,13,.60), rgba(6,7,13,.30) 60%, rgba(6,7,13,0) 88%);
}
/* Velo direccional: en las páginas de servicio el texto vive a la izquierda y
   la ilustración a la derecha, así que el fondo se oscurece de lado a lado. */
.mtq-velo-izq > .e-con-inner::before{
  background:linear-gradient(94deg,
    rgba(6,7,13,.94) 0%, rgba(6,7,13,.82) 34%, rgba(6,7,13,.34) 62%, rgba(6,7,13,.10) 100%);
}
@media (max-width:1080px){
  .mtq-velo-izq > .e-con-inner::before{
    background:linear-gradient(180deg,
      rgba(6,7,13,.62) 0%, rgba(6,7,13,.82) 46%, rgba(6,7,13,.60) 100%);
  }
}
@media (max-width:860px){
  .mtq-velo > .e-con-inner::before{
    background:radial-gradient(76% 46% at 50% 36%,
      rgba(6,7,13,.86), rgba(6,7,13,.46) 62%, rgba(6,7,13,0) 92%);
  }
}

/* ==========================================================================
   TIPOGRAFÍA
   ========================================================================== */
/* Astra y el kit de Elementor pintan los titulares con el color de acento.
   El sistema los devuelve a blanco: el azul es solo capa de acción. */
body .elementor-widget-heading .elementor-heading-title{color:var(--mtq-heading)}
body .elementor-widget-text-editor{color:var(--mtq-body)}
body .elementor-widget-text-editor p{color:inherit}

/* Los tamaños de display viven acá, no en Elementor: fluidos con clamp(). */
.mtq-h1 .elementor-heading-title{
  font-family:Manrope,sans-serif;font-weight:800;
  font-size:clamp(2.75rem,8.2vw,6.5rem);
  letter-spacing:-.045em;line-height:.96;
  color:var(--mtq-heading);
}
.mtq-h2 .elementor-heading-title{
  font-family:Manrope,sans-serif;font-weight:800;
  font-size:clamp(1.75rem,3.4vw,2.75rem);
  letter-spacing:-.03em;line-height:1.12;
}
.mtq-h2-cierre .elementor-heading-title{
  font-family:Manrope,sans-serif;font-weight:800;
  font-size:clamp(1.875rem,4.4vw,3.25rem);
  letter-spacing:-.035em;line-height:1.08;max-width:16ch;
}
.mtq-h3 .elementor-heading-title{
  font-family:Manrope,sans-serif;font-weight:600;
  font-size:1.1875rem;letter-spacing:-.02em;line-height:1.25;
}
.mtq-h1-fade .elementor-heading-title{
  background:linear-gradient(178deg,#FFFFFF 26%,#8E94A6 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  padding-bottom:.08em;
}
body .mtq-eyebrow .elementor-heading-title,
.mtq-eyebrow{
  font-family:Inter,sans-serif;font-size:.75rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mtq-lead);
}
/* Rejillas del prototipo. Elementor genera reglas propias por elemento con
   alta especificidad, así que estas se imponen explícitamente. */
.e-con.mtq-stats-row,
.e-con.mtq-cards{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:stretch;
}
@media (max-width:1080px){
  .e-con.mtq-stats-row,
  .e-con.mtq-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:620px){
  .e-con.mtq-stats-row,
  .e-con.mtq-cards{grid-template-columns:minmax(0,1fr)!important}
}
/* Las píldoras del hero se reparten en fila y solo se apilan en móvil */
.mtq-btn .elementor-button{white-space:nowrap}
body .mtq-microlabel .elementor-heading-title,
.mtq-microlabel{
  font-family:Inter,sans-serif;font-size:.6875rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mtq-dim);
}
.mtq-lead p,.mtq-lead{color:var(--mtq-lead);font-size:1.0625rem;line-height:1.7}
@media (max-width:620px){
  .mtq-eyebrow .elementor-heading-title,.mtq-eyebrow{letter-spacing:.1em;font-size:.6875rem}
}

/* ==========================================================================
   BOTONES — dos formas, nada más (DESIGN.md §10.3)
   ========================================================================== */
.mtq-btn .elementor-button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:99px;
  font-family:Inter,sans-serif;font-size:.9375rem;font-weight:600;letter-spacing:-.005em;
  border:1px solid transparent;
  transition:background-color .25s var(--mtq-ease),border-color .25s var(--mtq-ease),transform .25s var(--mtq-ease);
}
.mtq-btn-primary .elementor-button{
  background-color:var(--mtq-accent-solid);color:#fff;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.22);
}
.mtq-btn-primary .elementor-button:hover{background-color:var(--mtq-accent-hover);color:#fff}
.mtq-btn-ghost .elementor-button{
  background-color:rgba(255,255,255,.02);color:#fff;border-color:var(--mtq-line-strong);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.14);
}
.mtq-btn-ghost .elementor-button:hover{background-color:rgba(255,255,255,.08);border-color:#fff;color:#fff}
.mtq-btn .elementor-button:active{transform:translateY(1px)}
@media (max-width:620px){
  .mtq-btn-full .elementor-button{width:100%}
}

/* ==========================================================================
   HEADER (plantilla de Theme Builder)
   ========================================================================== */
.e-con.mtq-header{
  position:sticky;top:0;z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--mtq-ease),background-color .3s var(--mtq-ease);
}
/* Velo del header: accesibilidad, no decoracion. En reposo el bloom del hero pasa
   justo detras del menu y el texto de nav cae a 2.9:1; este degradado lo devuelve
   a 8.9:1 sin dibujar barra. Con is-stuck baja a 0, porque ahi ya hay fondo. */
.e-con.mtq-header::before{
  content:'';position:absolute;inset:0 0 auto;height:180%;z-index:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(6,7,13,.74) 0%, rgba(6,7,13,.42) 48%, rgba(6,7,13,0) 100%);
  transition:opacity .3s var(--mtq-ease);
}
.e-con.mtq-header > .e-con-inner{position:relative;z-index:2}
.e-con.mtq-header.is-stuck{
  border-bottom-color:var(--mtq-line);
  background:rgba(6,7,13,.88);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
          backdrop-filter:blur(22px) saturate(140%);
}
.e-con.mtq-header.is-stuck::before{opacity:0}
/* Con el menu movil abierto vuelve a ser superficie: el desplegable necesita fondo. */
.e-con.mtq-header:has(.elementor-menu-toggle.elementor-active){
  background:rgba(6,7,13,.88);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
          backdrop-filter:blur(22px) saturate(140%);
}
.mtq-header > .e-con-inner{
  display:flex!important;flex-direction:row;align-items:center;gap:32px;width:100%;
}

/* marca tipográfica provisional — se sustituye por el logo real */
.mtq-logo .elementor-heading-title{
  font-family:Manrope,sans-serif!important;font-weight:800;font-size:1.375rem;
  letter-spacing:-.03em;color:#fff!important;line-height:1;
}
.mtq-logo .elementor-heading-title a{color:#fff;text-decoration:none}
.mtq-logo i{color:var(--mtq-accent);font-style:normal}
/* Isotipo blanco sobre transparente. Se dimensiona por altura para que el
   header no dependa de la relación de aspecto del archivo. */
.mtq-logo-img{flex:none}
.mtq-logo-img img{height:48px;width:auto;display:block;max-width:none}
.mtq-logo-img .elementor-widget-container,
.mtq-logo-img a{display:block;line-height:0}
@media (max-width:620px){
  .mtq-logo-img img{height:40px}
}

/* navegación */
.mtq-nav{margin-left:auto}
.mtq-nav .elementor-nav-menu > li > a.elementor-item{
  font-family:Inter,sans-serif;font-size:1rem;font-weight:500;
  color:var(--mtq-body);padding:12px 18px;border-radius:99px;
  transition:color .2s,background-color .2s;
}
.mtq-nav .elementor-nav-menu > li > a.elementor-item:hover,
.mtq-nav .elementor-nav-menu > li > a.elementor-item.highlighted,
.mtq-nav .elementor-nav-menu > li > a.elementor-item.elementor-item-active{
  color:#fff;background:rgba(255,255,255,.06);
}
.mtq-nav .elementor-item:before,.mtq-nav .elementor-item:after{display:none!important}

/* CUIDADO: Elementor pone la clase `elementor-nav-menu--dropdown` en DOS
   elementos distintos — el panel móvil (un <nav>) y el submenú de escritorio
   (un <ul class="sub-menu">). Tratarlos igual rompe uno de los dos, así que
   cada uno se ataca por su etiqueta. */

/* fondo de vidrio, común a los dos */
.mtq-nav nav.elementor-nav-menu--dropdown,
.mtq-nav ul.sub-menu{
  background:rgba(12,14,25,.92)!important;
  -webkit-backdrop-filter:blur(42px) saturate(140%);
          backdrop-filter:blur(42px) saturate(140%);
  border:1px solid var(--mtq-line-mid)!important;
  box-shadow:0 24px 48px -12px rgba(0,0,0,.7);
}

/* panel móvil: hoja a todo el ancho, anclada bajo el header.
   Si se deja en flujo suma su margen a la altura del header aunque esté cerrado.
   El widget del menú mide lo que la hamburguesa (52px), así que si quedara como
   ancla el panel saldría de 52px de ancho: se neutraliza para que el ancla sea
   el propio header, que es sticky y por tanto bloque contenedor. */
@media (max-width:860px){
  .mtq-nav{position:static!important}
}
.mtq-nav nav.elementor-nav-menu--dropdown{
  position:absolute!important;
  top:100%!important;left:0!important;right:0!important;
  width:auto!important;margin:0!important;
  border-radius:0 0 20px 20px!important;
  border-left:0!important;border-right:0!important;
  padding:12px 20px 20px!important;
}
/* Elementor cierra el panel con max-height:0 y scaleY(0), pero su regla de
   apertura no llega hasta acá. Se reengancha al estado que sí marca: la clase
   `elementor-active` de la hamburguesa. */
.mtq-nav .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown{
  max-height:calc(100vh - 88px)!important;
  transform:none!important;
  overflow-y:auto!important;
}
.mtq-nav nav.elementor-nav-menu--dropdown a{
  color:var(--mtq-body)!important;font-family:Inter,sans-serif;font-size:1rem;
  padding:14px 16px!important;border-radius:12px!important;
}
.mtq-nav nav.elementor-nav-menu--dropdown a:hover{
  color:#fff!important;background:rgba(111,156,245,.14)!important;
}

/* submenú de escritorio: tarjeta flotante */
.mtq-nav ul.sub-menu{
  border-radius:18px!important;padding:8px!important;
}
.mtq-nav ul.sub-menu a.elementor-sub-item{
  color:var(--mtq-body)!important;font-family:Inter,sans-serif;font-size:1rem;
  padding:13px 16px!important;border-radius:12px!important;
}
.mtq-nav ul.sub-menu a.elementor-sub-item:hover{
  color:#fff!important;background:rgba(111,156,245,.14)!important;
}

/* botón del header: separado del menú */
.mtq-header-cta{flex:none}
.mtq-btn-sm .elementor-button{min-height:48px;padding:0 24px;font-size:.9375rem}

/* hamburguesa */
.mtq-nav .elementor-menu-toggle{
  color:#fff;background:rgba(255,255,255,.05);
  border:1px solid var(--mtq-line-strong);border-radius:14px;
  width:52px;height:52px;
}
.mtq-nav .elementor-menu-toggle i,
.mtq-nav .elementor-menu-toggle svg{font-size:24px;width:24px;height:24px}
.mtq-nav .elementor-menu-toggle:hover{border-color:#fff}
@media (max-width:860px){
  .mtq-header-cta{display:none}
  .mtq-nav{margin-left:auto}
}

/* Chip */
.mtq-chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:99px;
  font-family:Inter,sans-serif;font-size:.75rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mtq-lead);
}

/* ==========================================================================
   PLACAS DE DATOS DEL HERO
   ========================================================================== */
.mtq-stat{border-radius:22px}
.mtq-stat .mtq-stat-ico{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.mtq-stat .mtq-stat-valor{
  font-family:Manrope,sans-serif;font-weight:600;font-size:1.125rem;
  color:#fff;letter-spacing:-.018em;line-height:1.3;
  font-variant-numeric:tabular-nums;margin:0;
}

/* ==========================================================================
   MARCADORES DE DATO PENDIENTE (DESIGN.md §10.5)
   ========================================================================== */
.mtq-pendiente{
  display:inline-flex;flex-direction:column;gap:3px;
  border:1px dashed rgba(111,156,245,.55);border-radius:10px;padding:8px 13px;
  background:rgba(111,156,245,.06);
}
.mtq-pendiente b{
  font-family:Inter,sans-serif;font-weight:600;font-size:.9375rem;
  color:var(--mtq-lead);line-height:1.35;
}
.mtq-pendiente small{
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mtq-accent);font-weight:600;
}
.mtq-hueco{
  display:inline-block;padding:1px 9px;border-radius:7px;
  border:1px dashed rgba(111,156,245,.55);background:rgba(111,156,245,.07);
  color:var(--mtq-accent);font-style:normal;
}
.mtq-logo-slot{
  height:52px;min-width:150px;border:1px dashed rgba(111,156,245,.42);border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-family:Inter,sans-serif;font-size:.6875rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mtq-dim);
}

/* ==========================================================================
   TARJETAS DEL ENRUTADOR — momento firma
   ========================================================================== */
.mtq-card{
  position:relative;border-radius:20px;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--mtq-ease), box-shadow .35s var(--mtq-ease);
}
/* El lavado va por debajo del contenido con z-index negativo, para que el
   número pueda posicionarse contra la tarjeta y no contra el inner. */
.mtq-card::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.72;
  transition:opacity .35s var(--mtq-ease);pointer-events:none;
}
.mtq-card-1::after{background:radial-gradient(128% 84% at 10% 100%, rgba(112,84,255,.60), transparent 70%)}
.mtq-card-2::after{background:radial-gradient(128% 84% at 10% 100%, rgba(24,142,206,.58), transparent 70%)}
.mtq-card-3::after{background:radial-gradient(128% 84% at 10% 100%, rgba(200,76,156,.52), transparent 70%)}
.mtq-card-4::after{background:radial-gradient(128% 84% at 10% 100%, rgba(32,60,190,.62), transparent 70%)}
.mtq-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 50px -22px rgba(0,0,0,.85), inset 0 1px 1px rgba(255,255,255,.18);
}
.mtq-card:hover::after{opacity:1}
/* OBSOLETO 2026-08-27: el numero volvio a ser filigrana absoluta, como el
   prototipo. Ponerlo en fila partia el destino en dos lineas. Ver mtq-paginas.css. */
.mtq-card-foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;width:100%;
}
.mtq-card-num{
  font-family:Manrope,sans-serif;font-weight:800;font-size:3.25rem;line-height:.85;
  color:rgba(255,255,255,.10);font-variant-numeric:tabular-nums;flex:none;
}
.mtq-card-go{
  display:inline-flex;align-items:center;gap:9px;
  font-family:Inter,sans-serif;font-size:.8125rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mtq-accent);
}
.mtq-card-go svg{transition:transform .3s var(--mtq-ease)}
.mtq-card:hover .mtq-card-go svg{transform:translateX(4px)}
.mtq-card .elementor-widget:last-child{margin-top:auto;padding-top:24px}

/* ==========================================================================
   CINTA CORRIDA
   ========================================================================== */
.mtq-ticker{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.mtq-ticker-track{display:flex;width:max-content;animation:mtq-slide 42s linear infinite}
.mtq-ticker:hover .mtq-ticker-track{animation-play-state:paused}
.mtq-ticker ul{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.mtq-ticker li{
  display:flex;align-items:center;gap:22px;padding-right:22px;
  font-family:Inter,sans-serif;font-size:.8125rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mtq-lead);white-space:nowrap;
}
.mtq-ticker li svg{flex:none;opacity:.9}
@keyframes mtq-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   NÚCLEO MTQ Y DIAGRAMAS SVG
   ========================================================================== */
/* El widget HTML de Elementor no acota su ancho: si no se fuerza, el SVG
   se dibuja más ancho que su panel y el overflow del vidrio lo recorta. */
.mtq-glass .elementor-widget-html,
.mtq-glass .elementor-widget-html > .elementor-widget-container,
.mtq-svg{width:100%;max-width:100%}
.mtq-svg svg{width:100%;height:auto;display:block}
.mtq-2col .mtq-glass{padding:24px 20px!important;align-self:center}
.mtq-core-dot{fill:#D6E4FF;offset-rotate:0deg;offset-distance:100%;
  animation:mtq-travel 5.4s cubic-bezier(.45,0,.55,1) infinite}
@keyframes mtq-travel{
  from{offset-distance:100%;opacity:0}
  14%{opacity:1} 86%{opacity:1}
  to{offset-distance:3%;opacity:0}
}
.mtq-core-dot.d1{offset-path:path("M380,150 C290,178 172,205 78,272");animation-delay:0s}
.mtq-core-dot.d2{offset-path:path("M380,150 C338,215 310,285 255,344");animation-delay:1.35s}
.mtq-core-dot.d3{offset-path:path("M380,150 C422,215 450,285 505,344");animation-delay:2.7s}
.mtq-core-dot.d4{offset-path:path("M380,150 C470,178 588,205 682,272");animation-delay:4.05s}
.mtq-core-halo{animation:mtq-pulse 5.4s ease-in-out infinite}
@keyframes mtq-pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ==========================================================================
   PANEL DE DECLARACIÓN — filete de acento a la izquierda
   ========================================================================== */
.mtq-panel{position:relative;border-radius:24px;overflow:hidden}
.mtq-panel::after{
  content:"";position:absolute;left:0;top:8%;bottom:8%;width:4px;z-index:4;
  background:linear-gradient(180deg,transparent,var(--mtq-accent) 12%,var(--mtq-accent) 88%,transparent);
  box-shadow:0 0 22px 2px rgba(111,156,245,.55);pointer-events:none;
}

/* ==========================================================================
   TESTIMONIO Y CASOS
   ========================================================================== */
.mtq-quote,
.mtq-quote-w .elementor-heading-title{
  font-family:Manrope,sans-serif;font-weight:600;color:#fff;
  font-size:clamp(1.5rem,3.4vw,2.625rem);
  line-height:1.3;letter-spacing:-.03em;max-width:34ch;
}
/* Dos y tres columnas del prototipo.
   OJO: en un container "boxed" de Elementor los hijos NO cuelgan del propio
   .e-con sino de un .e-con-inner que lleva el max-width y el centrado. Si la
   rejilla se pone en el exterior, el inner ocupa la primera columna y el resto
   del ancho queda vacío. Por eso cada caso se ataca en su elemento correcto. */
.e-con-boxed.mtq-2col > .e-con-inner{
  display:grid!important;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;
  align-items:center;
  width:100%;
}
.e-con-full.mtq-2col{
  display:grid!important;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;
  align-items:center;
}
.e-con.mtq-casos{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media (max-width:1080px){
  .e-con-boxed.mtq-2col > .e-con-inner,
  .e-con-full.mtq-2col{grid-template-columns:minmax(0,1fr)!important}
  .e-con.mtq-casos{grid-template-columns:minmax(0,1fr)!important}
}
.mtq-avatar{
  width:64px;height:64px;border-radius:50%;flex:none;
  border:1px dashed rgba(111,156,245,.55);background:rgba(111,156,245,.07);
  display:flex;align-items:center;justify-content:center;color:var(--mtq-accent);
}

/* ==========================================================================
   FOOTER (plantilla de Theme Builder)
   ========================================================================== */
.e-con.mtq-footer{
  border-top:1px solid var(--mtq-line);
  background:#04050A;
}
.e-con.mtq-foot-grid{
  display:grid!important;
  grid-template-columns:1.4fr 1fr 1fr 1.3fr!important;
  align-items:start;
}
.mtq-foot-logo img{height:44px;width:auto;display:block;max-width:none}
.mtq-foot-logo .elementor-widget-container,
.mtq-foot-logo a{display:block;line-height:0}
.mtq-foot-brand p{
  color:var(--mtq-lead);font-size:.9375rem;line-height:1.7;max-width:30ch;margin:0;
}
/* Las columnas de enlaces son listas dentro de un editor de texto: Elementor
   les deja viñeta y sangría de tema, y acá no van. */
.mtq-foot-links ul,
.mtq-foot-contact ul{list-style:none;margin:0;padding:0}
.mtq-foot-links li+li,
.mtq-foot-contact li+li{margin-top:11px}
.mtq-foot-links a,
.mtq-foot-contact a{
  color:var(--mtq-body);text-decoration:none;font-size:.9375rem;
  transition:color .25s var(--mtq-ease);
}
.mtq-foot-links a:hover,
.mtq-foot-contact a:hover{
  color:#fff;text-decoration:underline;text-decoration-color:var(--mtq-line-strong);
}
.mtq-foot-contact li{color:var(--mtq-body);font-size:.9375rem;line-height:1.5}
.e-con.mtq-foot-bottom{
  border-top:1px solid var(--mtq-line);
}
.mtq-foot-bottom .elementor-widget-text-editor,
.mtq-foot-bottom p{font-size:.8125rem;color:var(--mtq-dim);margin:0}
@media (max-width:1080px){
  .e-con.mtq-foot-grid{grid-template-columns:1fr 1fr!important;}
}
@media (max-width:620px){
  .e-con.mtq-foot-grid{grid-template-columns:minmax(0,1fr)!important;}
}

/* ==========================================================================
   WHATSAPP FLOTANTE — persistente en todas las páginas
   ========================================================================== */
.mtq-wa-slot .elementor-widget-container{line-height:0}
.mtq-wa{
  position:fixed;right:22px;bottom:22px;z-index:55;
  display:inline-flex;align-items:center;gap:11px;
  height:54px;padding:0 22px 0 18px;border-radius:99px;
  border:1px solid var(--mtq-line-strong);color:#fff;background:rgba(10,12,21,.62);
  -webkit-backdrop-filter:blur(26px) saturate(140%);
          backdrop-filter:blur(26px) saturate(140%);
  font:600 .875rem/1 Inter,sans-serif;text-decoration:none;
  box-shadow:0 16px 34px -14px rgba(0,0,0,.85), inset 0 1px 1px rgba(255,255,255,.16);
  transition:border-color .25s var(--mtq-ease),background-color .25s var(--mtq-ease),transform .25s var(--mtq-ease);
}
.mtq-wa:hover,
.mtq-wa:focus-visible{background:rgba(20,23,40,.8);border-color:#fff;color:#fff;transform:translateY(-2px)}
.mtq-wa svg{flex:none}
@media (max-width:620px){
  .mtq-wa{right:16px;bottom:16px;height:50px;padding:0 18px 0 15px}
}

/* ==========================================================================
   RITMO DE SECCIÓN — páginas de servicio
   El padding vive acá y no en Elementor para que sea fluido de verdad.
   ========================================================================== */
.e-con.mtq-sec{padding:clamp(76px,9vw,120px) 24px!important}
.e-con.mtq-sec-hero{padding:clamp(56px,7vw,104px) 24px clamp(64px,8vw,110px)!important}
.e-con.mtq-sec-cierre{padding:clamp(88px,11vw,150px) 24px!important}
@media (max-width:620px){
  .e-con.mtq-sec,
  .e-con.mtq-sec-hero,
  .e-con.mtq-sec-cierre{padding-left:20px!important;padding-right:20px!important}
}
/* El panel de portabilidad cuelga de la sección anterior: sin aire arriba. */
.e-con.mtq-sec-sin-top{padding-top:0!important}
/* Filete a lo ancho del container, no a sangre: separa sin cortar la página. */
.mtq-filete > .e-con-inner{
  border-top:1px solid var(--mtq-line);
  padding-top:clamp(48px,6vw,76px);
}
.mtq-copy p,
.mtq-copy{color:var(--mtq-body);line-height:1.75;max-width:56ch}
.mtq-nota-dim p,
.mtq-nota-dim{color:var(--mtq-dim);font-size:.875rem;max-width:52ch}
body .mtq-eyebrow-accent .elementor-heading-title{color:var(--mtq-accent)}

/* ==========================================================================
   DESARROLLO WEB · atmósfera — media potencia, extremo cálido
   El rosa va por delante del azul. Es la nota que distingue esta página.
   ========================================================================== */
.mtq-atm-dweb::before{
  width:1100px;height:720px;top:-260px;right:-160px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(214,74,152,.5), rgba(200,76,156,0) 70%);
}
.mtq-atm-dweb::after{
  width:960px;height:640px;top:60px;right:-80px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(44,91,232,.46), rgba(44,91,232,0) 70%);
}
/* El tercer bloom del prototipo —violeta, abajo a la izquierda— va como lavado
   de fondo: los dos pseudo-elementos del container ya están ocupados. */
.mtq-atm-dweb{
  background-image:radial-gradient(44% 54% at 0% 106%, rgba(150,60,190,.30), rgba(150,60,190,0) 70%);
}
.mtq-atm-dweb-cierre::before{
  width:900px;height:520px;bottom:-240px;left:50%;margin-left:-450px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(44,91,232,.42), rgba(44,91,232,0) 70%);
}
.mtq-atm-dweb-cierre::after{
  width:640px;height:420px;top:-120px;left:22%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(200,76,156,.24), rgba(200,76,156,0) 70%);
}

/* ==========================================================================
   DESARROLLO WEB · hero — dispositivos dibujados que sangran por la derecha
   ========================================================================== */
.e-con-boxed.mtq-hero-2col > .e-con-inner{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(32px,4vw,64px);align-items:center;width:100%;
}
@media (max-width:1080px){
  .e-con-boxed.mtq-hero-2col > .e-con-inner{grid-template-columns:minmax(0,1fr)!important}
}
.mtq-h1-svc .elementor-heading-title{
  font-family:Manrope,sans-serif;font-weight:800;
  font-size:clamp(2.25rem,5vw,3.75rem);
  letter-spacing:-.042em;line-height:1.02;color:var(--mtq-heading);
}
.mtq-devices{margin-right:calc(-1 * clamp(24px,8vw,150px))}
.mtq-devices svg{width:100%;height:auto;display:block}
@media (max-width:1080px){
  .mtq-devices{margin-right:calc(-1 * clamp(24px,6vw,60px))}
}
.mtq-hero-nota{
  display:flex;align-items:center;gap:9px;margin-top:18px;
  font-size:.75rem;font-weight:500;color:var(--mtq-dim);line-height:1.5;
  padding-right:clamp(24px,8vw,150px);
}
.mtq-hero-nota svg{flex:none;color:var(--mtq-accent)}
/* Medidas de lectura del prototipo: la bajada del hero corta antes que el resto. */
.mtq-hero-2col .mtq-lead p,
.mtq-hero-2col .mtq-lead{max-width:42ch;color:var(--mtq-body)}
.mtq-lead-centro p,
.mtq-lead-centro{max-width:46ch;margin-left:auto;margin-right:auto;text-align:center}

/* ==========================================================================
   DESARROLLO WEB · qué construimos
   ========================================================================== */
.e-con.mtq-build{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:stretch;
}
@media (max-width:1080px){
  .e-con.mtq-build{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:620px){
  .e-con.mtq-build{grid-template-columns:minmax(0,1fr)!important}
}
.mtq-build-item{border-radius:18px;padding:26px 24px 28px!important}
.mtq-build-item .elementor-widget-heading .elementor-heading-title{
  font-family:Manrope,sans-serif;font-size:1.0625rem;font-weight:600;letter-spacing:-.018em;line-height:1.25;
}
.mtq-build-item .elementor-widget-text-editor{
  color:var(--mtq-lead);font-size:.9375rem;line-height:1.6;
}
.mtq-build-ico{
  width:46px;height:46px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  color:var(--mtq-accent);
}

/* ==========================================================================
   DESARROLLO WEB · momento firma — el deslizador antes / después
   ========================================================================== */
.mtq-ba{
  position:relative;border-radius:22px;overflow:hidden;
  aspect-ratio:1200/675;background:#0A0C13;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95);
}
.mtq-ba-panel{position:absolute;inset:0}
.mtq-ba-panel svg{width:100%;height:100%;display:block}
.mtq-ba-despues{clip-path:inset(0 0 0 var(--pos,50%))}
.mtq-ba-label{
  position:absolute;top:16px;z-index:4;padding:7px 14px;border-radius:99px;
  font-family:Inter,sans-serif;font-size:.6875rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:rgba(6,7,13,.66);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.16);
}
.mtq-ba-label-a{left:16px}
.mtq-ba-label-d{right:16px}
.mtq-ba-handle{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;z-index:5;
  background:#fff;transform:translateX(-1px);pointer-events:none;
  box-shadow:0 0 20px 2px rgba(255,255,255,.4);
}
.mtq-ba-handle span{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%;
  background:rgba(10,12,20,.7);border:1.5px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.8);
}
.mtq-ba-range{
  position:absolute;inset:0;z-index:6;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent;
}
.mtq-ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:56px;height:100%;cursor:ew-resize}
.mtq-ba-range::-moz-range-thumb{width:56px;height:100%;border:0;background:transparent;cursor:ew-resize}
.mtq-ba:focus-within .mtq-ba-handle span{outline:2px solid var(--mtq-accent);outline-offset:3px}
.e-con.mtq-ba-thumbs{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
@media (max-width:620px){
  .mtq-ba{aspect-ratio:4/3}
  .mtq-ba-handle span{width:42px;height:42px}
  .e-con.mtq-ba-thumbs{grid-template-columns:minmax(0,1fr)!important}
}
.mtq-ba-thumb{
  border-radius:14px;padding:18px;min-height:104px;
  border:1px dashed rgba(111,156,245,.4);background:rgba(111,156,245,.05);
  display:flex;flex-direction:column;justify-content:space-between;gap:12px;
}
.mtq-ba-thumb b{font-family:Inter,sans-serif;font-weight:600;font-size:.9375rem;color:var(--mtq-lead)}
.mtq-ba-thumb small{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mtq-accent);font-weight:600}

/* ==========================================================================
   DESARROLLO WEB · qué incluye y qué no
   ========================================================================== */
.e-con.mtq-inc-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;
  align-items:start;
}
@media (max-width:1080px){
  .e-con.mtq-inc-grid{grid-template-columns:minmax(0,1fr)!important}
}
.mtq-inc-col{border-radius:22px;padding:clamp(28px,3vw,40px)!important}
.mtq-inc-si{background:rgba(111,156,245,.07)}
.mtq-inc-col .elementor-widget-heading .elementor-heading-title{
  font-family:Manrope,sans-serif;font-size:1.25rem;font-weight:600;letter-spacing:-.02em;
}
.mtq-inc-list ul{list-style:none;margin:0;padding:0}
.mtq-inc-list li{
  display:flex;gap:14px;padding:13px 0;border-top:1px solid var(--mtq-line);
  color:var(--mtq-body);font-size:.9375rem;line-height:1.55;
}
.mtq-inc-list li:first-child{border-top:0;padding-top:0}
.mtq-inc-list li svg{flex:none;margin-top:3px}
.mtq-inc-si .mtq-inc-list li svg{color:var(--mtq-accent)}
.mtq-inc-no .mtq-inc-list li{color:var(--mtq-lead)}
.mtq-inc-no .mtq-inc-list li svg{color:var(--mtq-dim)}
.mtq-inc-nota p,
.mtq-inc-nota{color:var(--mtq-dim);font-size:.9375rem}

/* ==========================================================================
   DESARROLLO WEB · panel de portabilidad y sección posterior
   ========================================================================== */
.e-con.mtq-porta{
  display:grid!important;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important;
  align-items:start;
}
@media (max-width:1080px){
  .e-con.mtq-porta{grid-template-columns:minmax(0,1fr)!important}
}
.mtq-porta .elementor-widget-heading .elementor-heading-title{
  font-family:Manrope,sans-serif;font-weight:800;
  font-size:clamp(1.5rem,2.8vw,2.25rem);letter-spacing:-.03em;line-height:1.14;
}
.e-con-boxed.mtq-2col-igual > .e-con-inner{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,5vw,72px);align-items:start;width:100%;
}
@media (max-width:1080px){
  .e-con-boxed.mtq-2col-igual > .e-con-inner{grid-template-columns:minmax(0,1fr)!important}
}

/* ==========================================================================
   ACORDEÓN — details nativo (DESIGN.md §10.4)
   ========================================================================== */
.mtq-faq{max-width:860px}
.mtq-faq details{border-top:1px solid var(--mtq-line)}
.mtq-faq details:last-child{border-bottom:1px solid var(--mtq-line)}
.mtq-faq summary{
  list-style:none;cursor:pointer;padding:26px 48px 26px 0;position:relative;
  font-family:Manrope,sans-serif;font-weight:600;
  font-size:clamp(1.0625rem,1.7vw,1.25rem);
  color:#fff;letter-spacing:-.018em;transition:color .2s var(--mtq-ease);
}
.mtq-faq summary::-webkit-details-marker{display:none}
.mtq-faq summary:hover{color:var(--mtq-accent)}
.mtq-faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;margin-top:-7px;
  border-right:1.75px solid currentColor;border-bottom:1.75px solid currentColor;
  transform:rotate(45deg) translateY(-3px);
  transition:transform .3s var(--mtq-ease);color:var(--mtq-accent);
}
.mtq-faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.mtq-faq-r{padding:0 60px 28px 0;color:var(--mtq-lead);max-width:60ch;margin:0}
@media (max-width:620px){
  .mtq-faq summary{padding-right:40px}
  .mtq-faq-r{padding-right:0}
}

/* ==========================================================================
   RESPLANDOR DETRÁS DEL CTA DE CIERRE
   ========================================================================== */
.mtq-cta-glow{position:relative}
.mtq-cta-glow::before{
  content:"";position:absolute;inset:-28px -34px;z-index:-1;border-radius:99px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(44,91,232,.55), rgba(44,91,232,0) 70%);
  filter:blur(22px);pointer-events:none;
}

/* ==========================================================================
   ATMÓSFERA EN CAPA — para secciones con más de dos blooms
   Los pseudo-elementos de .mtq-atm solo dan dos. Cuando la sección necesita
   más, o necesita haces, la atmósfera viaja en un widget HTML que se saca del
   flujo. El inner va estático a propósito: así la capa se ancla a la sección
   completa y no al bloque de contenido, que está metido dentro del padding.
   ========================================================================== */
.mtq-atm-host{position:relative;overflow:hidden;isolation:isolate}
.mtq-atm-host > .e-con-inner{position:static;z-index:2}
.mtq-atm-capa{position:absolute;inset:0;z-index:-1;pointer-events:none}
.mtq-atm-blooms{position:absolute;inset:0;overflow:hidden}
.mtq-atm-blooms > *{position:absolute}
.mtq-bloom{border-radius:50%;filter:blur(80px)}
.mtq-beam{
  width:460px;height:150%;top:-34%;
  background:linear-gradient(180deg, rgba(150,196,255,.32), rgba(111,156,245,0) 58%);
  filter:blur(40px);
}
.mtq-scrim{inset:0}

/* ==========================================================================
   MTQ CLOUD · atmósfera — alta potencia, extremo frío
   Hero y panel de datos comparten un solo fondo continuo, así que la capa
   cubre las dos cosas de una vez.
   ========================================================================== */
.e-con.mtq-sec-cloudtop{padding:clamp(56px,7vw,96px) 24px clamp(80px,10vw,124px)!important}
@media (max-width:620px){
  .e-con.mtq-sec-cloudtop{padding-left:20px!important;padding-right:20px!important}
}
.mtq-cl-b1{width:1240px;height:820px;top:-380px;left:56%;margin-left:-620px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(40,88,236,.7), rgba(44,91,232,0) 70%)}
.mtq-cl-b2{width:820px;height:600px;top:120px;left:-240px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(26,142,206,.42), rgba(26,142,206,0) 70%)}
.mtq-cl-b3{width:900px;height:700px;top:380px;right:-280px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(26,56,168,.62), rgba(26,56,168,0) 72%)}
.mtq-cl-b4{width:1100px;height:620px;bottom:-200px;left:50%;margin-left:-550px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(40,88,236,.4), rgba(44,91,232,0) 72%)}
.mtq-cl-b5{width:640px;height:440px;bottom:-90px;left:-160px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(26,142,206,.3), rgba(26,142,206,0) 70%)}
.mtq-cl-m1{left:22%;transform:rotate(14deg)}
.mtq-cl-m2{right:18%;transform:rotate(-11deg)}
.mtq-scrim-cloud{background:radial-gradient(62% 50% at 38% 40%,
  rgba(6,7,13,.62), rgba(6,7,13,.3) 62%, rgba(6,7,13,0) 90%)}
.mtq-cl-cierre-b1{width:1140px;height:640px;bottom:-320px;left:50%;margin-left:-570px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(40,88,236,.48), rgba(44,91,232,0) 70%)}
.mtq-cl-cierre-b2{width:640px;height:420px;top:-140px;right:6%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(26,142,206,.28), rgba(26,142,206,0) 70%)}
.mtq-cl-cierre-m1{left:30%;transform:rotate(12deg)}
.mtq-scrim-cierre{background:radial-gradient(58% 48% at 50% 44%,
  rgba(6,7,13,.6), rgba(6,7,13,.3) 60%, rgba(6,7,13,0) 88%)}
@media (max-width:860px){
  .mtq-scrim-cloud,
  .mtq-scrim-cierre{background:radial-gradient(76% 46% at 50% 30%,
    rgba(6,7,13,.84), rgba(6,7,13,.46) 62%, rgba(6,7,13,0) 92%)}
}

/* ==========================================================================
   MTQ CLOUD · hero partido — texto y diagrama, sin foto
   ========================================================================== */
.e-con.mtq-hero-cloud{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)!important;
  align-items:center;
}
@media (max-width:1080px){
  /* Apilado, el canal de 72 px se siente un hueco: el prototipo lo baja a 44. */
  .e-con.mtq-hero-cloud{grid-template-columns:minmax(0,1fr)!important;gap:44px!important}
}
.mtq-h1-cloud .elementor-heading-title{
  font-family:Manrope,sans-serif;font-weight:800;
  font-size:clamp(2.25rem,5.4vw,4rem);
  letter-spacing:-.04em;line-height:1.02;color:var(--mtq-heading);
}
.mtq-hero-cloud .mtq-lead p,
.mtq-hero-cloud .mtq-lead{
  max-width:44ch;color:var(--mtq-body);font-size:clamp(1rem,1.4vw,1.125rem);
}
.mtq-infra{border-radius:26px;padding:18px 14px 10px!important}
.mtq-infra svg{width:100%;height:auto;display:block}
@media (max-width:620px){
  .mtq-infra{padding:14px 8px 8px!important;margin-inline:-12px}
}
/* El dato viaja por el cable: es el argumento del servicio hecho movimiento. */
.mtq-flow-dot{fill:#D6E4FF;offset-rotate:0deg;animation:mtq-flow 4.6s cubic-bezier(.45,0,.55,1) infinite}
/* Trayectoria y escalonado por punto. Sin esto los tres animan la opacidad
   pero se quedan quietos: offset-path queda en none. Vienen del prototipo. */
.mtq-flow-dot.f1{offset-path:path("M260,52 V92");animation-delay:0s;animation-duration:1.6s}
.mtq-flow-dot.f2{offset-path:path("M260,336 V376 H130 V396");animation-delay:1.6s}
.mtq-flow-dot.f3{offset-path:path("M260,336 V376 H390 V396");animation-delay:3s}
@keyframes mtq-flow{
  from{offset-distance:0%;opacity:0}
  15%{opacity:1} 85%{opacity:1}
  to{offset-distance:100%;opacity:0}
}
.mtq-flow-1{offset-path:path("M260,52 V92");animation-delay:0s;animation-duration:1.6s}
.mtq-flow-2{offset-path:path("M260,336 V376 H130 V396");animation-delay:1.6s}
.mtq-flow-3{offset-path:path("M260,336 V376 H390 V396");animation-delay:3s}
@keyframes mtq-plate{0%,100%{opacity:.5} 50%{opacity:.95}}
.mtq-plate-halo{animation:mtq-plate 6s ease-in-out infinite}

/* ==========================================================================
   MTQ CLOUD · momento firma — el panel de datos públicos
   ========================================================================== */
.mtq-panel-datos{margin:0}
.mtq-panel-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;
}
@media (max-width:1080px){
  .mtq-panel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .mtq-panel-grid{grid-template-columns:minmax(0,1fr);gap:14px}
}
.mtq-dato{
  border-radius:22px;padding:26px 26px 28px;min-height:186px;
  display:flex;flex-direction:column;gap:18px;
}
.mtq-dato dt{color:var(--mtq-dim)}
.mtq-dato dd{margin:auto 0 0}
.mtq-dato .mtq-pendiente{width:100%}
.mtq-dato .mtq-pendiente b{
  font-family:Manrope,sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:-.02em;
}
.mtq-valor{
  font-family:Manrope,sans-serif;font-weight:600;
  font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.05;letter-spacing:-.035em;
  color:var(--mtq-accent);font-variant-numeric:tabular-nums;
}
@media (max-width:620px){
  .mtq-dato{min-height:0;padding:22px}
}
.mtq-panel-nota p,
.mtq-panel-nota{color:var(--mtq-dim);font-size:.9375rem}.mtq-tld{font-weight:600;color:#fff;white-space:nowrap}
@media (max-width:860px){}
.mtq-copy-48 p,
.mtq-copy-48{max-width:48ch}

/* ==========================================================================
   MOVIMIENTO — se detiene siempre
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .mtq-ticker-track{animation:none;transform:none}
  .mtq-core-dot{animation:none;opacity:.9;offset-distance:24%}
  .mtq-core-halo{animation:none}
  .mtq-flow-dot{animation:none;offset-distance:50%;opacity:.9}
  .mtq-plate-halo{animation:none;opacity:.72}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}