/* ---- mtq-fuentes.css ---- */
/* ==========================================================================
   MTQ Solutions - Fuentes alojadas por nosotros  (2026-09-02)

   Antes se pedian a fonts.googleapis.com. Lighthouse medio que esa peticion
   bloqueaba el renderizado 903 ms: no por su peso -1 KB- sino por el viaje a
   otro dominio, con su DNS y su TLS.

   Son las MISMAS fuentes de Google Fonts, variables y con sus unicode-range,
   asi que el navegador sigue bajando solo el subconjunto que la pagina usa.

   URLS RELATIVAS a proposito: esta hoja vive en uploads/mtq/ y las caras en
   uploads/mtq/fuentes/, asi que se resuelven contra la propia hoja. Si el
   dominio cambia -staging, clonado, promocion de dev-, siguen al sitio. Con el
   dominio escrito a mano, un staging serviria las fuentes de produccion en
   cross-origin, o caeria a la fuente del sistema, y callando.

   ?v= es filemtime. Las caras se cachean UN ANO, asi que sin version una cara
   reemplazada en su misma URL se quedaria vieja hasta un ano en los visitantes
   recurrentes. La precarga de plugin-mtq emite la MISMA version.
   ========================================================================== */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(fuentes/inter-latin-ext.woff2?v=1788329002) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(fuentes/inter-latin.woff2?v=1788329002) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(fuentes/manrope-latin-ext.woff2?v=1788329002) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(fuentes/manrope-latin.woff2?v=1788329002) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* La unica cursiva del sitio es la nota bajo el mapa de cobertura, en Soporte.
   Sin esta cara el navegador inclinaba la Regular por software: oblicua, no
   cursiva. Manrope no la lleva porque en Google no tiene italica. */
@font-face{
  font-family:'Inter';
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url(fuentes/inter-italic-latin-ext.woff2?v=1788331131) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url(fuentes/inter-italic-latin.woff2?v=1788331131) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- mtq-design-system.css ---- */
/* ==========================================================================
   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:-69px;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:-96px;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:-78px;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:180px;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;
  }
}

/* ==========================================================================
   COSTURAS DE LA ATMOSFERA  (2026-08-31)

   Cada seccion recorta su atmosfera con overflow:hidden. Cuando el bloom
   todavia tiene alfa al llegar al borde, el recorte deja una linea recta
   horizontal: la costura que se ve al cambiar de seccion.
   Medido sobre produccion: la peor era .mtq-atm-cierre::before, con alfa .46
   justo en el borde, porque el recorte caia en el centro del bloom.

   Se arregla en dos pasos, y hacen falta los dos:
     1. El bloom se reubica para que sobresalga como mucho un 15% de su alto,
        asi su centro -lo mas brillante- queda DENTRO de la seccion.
     2. Una mascara lo apaga en el ultimo 45% de lo visible (tope 240px),
        de modo que llega al recorte en cero.
   Con solo la mascara la seccion perdia su resplandor; con solo la mudanza
   la linea seguia ahi. Juntos conservan 92-100% del brillo del bloom.

   Los heroes (-home, -dweb, -soft, -casos y el hero de Cloud por arriba) NO
   llevan mascara superior: no hay seccion encima, no hay costura que suavizar.
   Los px son absolutos porque ningun bloom cambia de tamano por breakpoint.
   La mascara solo QUITA luz, asi que no puede empeorar ningun contraste.
   ========================================================================== */
.mtq-atm::before,.mtq-atm::after,
.mtq-atm-blooms > *{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}

/* Recorte ABAJO: opaco hasta A, transparente en B (B = borde de la seccion) */
.mtq-atm-router::after{-webkit-mask-image:linear-gradient(to bottom,#000 215px,transparent 391px);mask-image:linear-gradient(to bottom,#000 215px,transparent 391px)}
.mtq-atm-cierre::before{-webkit-mask-image:linear-gradient(to bottom,#000 304px,transparent 544px);mask-image:linear-gradient(to bottom,#000 304px,transparent 544px)}
.mtq-atm-dweb-cierre::before{-webkit-mask-image:linear-gradient(to bottom,#000 243px,transparent 442px);mask-image:linear-gradient(to bottom,#000 243px,transparent 442px)}
.mtq-atm-soft::after{-webkit-mask-image:linear-gradient(to bottom,#000 215px,transparent 391px);mask-image:linear-gradient(to bottom,#000 215px,transparent 391px)}
.mtq-atm-soft-cierre::before{-webkit-mask-image:linear-gradient(to bottom,#000 262px,transparent 476px);mask-image:linear-gradient(to bottom,#000 262px,transparent 476px)}
.mtq-atm-infra-cierre::before{-webkit-mask-image:linear-gradient(to bottom,#000 262px,transparent 476px);mask-image:linear-gradient(to bottom,#000 262px,transparent 476px)}
.mtq-atm-areas::after{-webkit-mask-image:linear-gradient(to bottom,#000 243px,transparent 442px);mask-image:linear-gradient(to bottom,#000 243px,transparent 442px)}
.mtq-cl-b3{-webkit-mask-image:linear-gradient(to bottom,#000 262px,transparent 476px);mask-image:linear-gradient(to bottom,#000 262px,transparent 476px)}
.mtq-cl-cierre-b1{-webkit-mask-image:linear-gradient(to bottom,transparent 169px,#000 381px);mask-image:linear-gradient(to bottom,transparent 169px,#000 381px)}

/* Recorte ARRIBA: transparente en A (borde de la seccion), opaco desde B */
.mtq-atm-router::before{-webkit-mask-image:linear-gradient(to bottom,transparent 180px,#000 414px);mask-image:linear-gradient(to bottom,transparent 180px,#000 414px)}
.mtq-atm-cierre::after{-webkit-mask-image:linear-gradient(to bottom,transparent 140px,#000 266px);mask-image:linear-gradient(to bottom,transparent 140px,#000 266px)}
.mtq-atm-dweb-cierre::after{-webkit-mask-image:linear-gradient(to bottom,transparent 120px,#000 255px);mask-image:linear-gradient(to bottom,transparent 120px,#000 255px)}
.mtq-atm-soft-comp::before{-webkit-mask-image:linear-gradient(to bottom,transparent 200px,#000 425px);mask-image:linear-gradient(to bottom,transparent 200px,#000 425px)}
.mtq-atm-consol::before{-webkit-mask-image:linear-gradient(to bottom,transparent 160px,#000 367px);mask-image:linear-gradient(to bottom,transparent 160px,#000 367px)}
.mtq-atm-areas::before{-webkit-mask-image:linear-gradient(to bottom,transparent 220px,#000 418px);mask-image:linear-gradient(to bottom,transparent 220px,#000 418px)}
.mtq-atm-propio::before{-webkit-mask-image:linear-gradient(to bottom,transparent 140px,#000 338px);mask-image:linear-gradient(to bottom,transparent 140px,#000 338px)}


/* ==========================================================================
   ENTRADA DE PAGINA - RETIRADA (2026-09-01)

   La secuencia "la pagina se enfoca" (atmosfera + resolve desde desenfoque
   en el hero) se retiro por decision de direccion, junto con las 82
   animaciones de entrada nativas de Elementor de las ocho paginas.

   Lo que NO se toco, y sigue vivo mas arriba en este archivo: el nucleo MTQ
   (mtq-travel, mtq-pulse), los puntos de flujo (mtq-flow), las placas
   (mtq-plate) y la cinta de logos (mtq-slide). En mtq-paginas.css siguen la
   nube de Cloud (mtq-nb-fluye) y su latido (mtq-nb-late). Son ilustracion
   de autor en widget HTML, no entradas.

   Respaldo del bloque original:
   uploads/mtq/respaldo/mtq-design-system-antes-quitar-entradas-2026-09-01.css
   ========================================================================== */

/* ---- mtq-paginas.css ---- */
/* ==========================================================================
   MTQ · Piezas por página
   Complemento de mtq-design-system.css. Acá viven los componentes que la
   prueba de construcción anterior no llegó a traducir, portados desde el CSS
   de los prototipos aprobados de /prototipo/ a los selectores de Elementor.
   Los valores salen de DESIGN.md — cero colores ni fuentes nuevos.
   ========================================================================== */

/* ==========================================================================
   CONTACTO
   Fondo plano, sin atmósfera (spec §3). El formulario es el hero.
   ========================================================================== */

.e-con.mtq-contacto{
  padding:clamp(56px,7vw,96px) 24px clamp(76px,9vw,120px)!important;
}
.e-con.mtq-contacto-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)!important;
  align-items:start;
}
@media (max-width:1080px){
  .e-con.mtq-contacto-grid{grid-template-columns:minmax(0,1fr)!important}
}

/* --- El formulario ------------------------------------------------------ */

.mtq-form .elementor-form-fields-wrapper{
  display:grid;grid-template-columns:1fr 1fr;gap:22px;
}
.mtq-form .elementor-field-group{
  display:flex;flex-direction:column;align-items:stretch;gap:9px;
  padding:0;width:auto!important;max-width:none;
}
.mtq-form .elementor-field-group.elementor-field-group-necesidad,
.mtq-form .elementor-field-group.elementor-field-group-mensaje,
.mtq-form .elementor-field-group.elementor-field-type-submit{
  grid-column:1 / -1;
}
@media (max-width:620px){
  .mtq-form .elementor-form-fields-wrapper{grid-template-columns:minmax(0,1fr)}
}

/* Etiquetas visibles — nunca placeholder como etiqueta (spec §3) */
.mtq-form .elementor-field-label{
  font-family:Inter,sans-serif;font-size:.8125rem;font-weight:600;
  color:var(--mtq-lead);letter-spacing:.01em;line-height:1.3;
  margin:0;padding:0;
}
.mtq-form .elementor-field-label .mtq-opcional{color:var(--mtq-dim);font-weight:400}

.mtq-form .elementor-field-textual{
  width:100%;background:rgba(255,255,255,.03);
  border:1px solid var(--mtq-line-strong);border-radius:14px;
  padding:14px 16px;color:#fff;
  font-family:Inter,sans-serif;font-size:1rem;line-height:1.5;
  transition:border-color .25s var(--mtq-ease),background-color .25s var(--mtq-ease);
}
.mtq-form textarea.elementor-field-textual{min-height:150px;resize:vertical}
.mtq-form .elementor-field-textual::placeholder{color:var(--mtq-dim);opacity:1}
.mtq-form .elementor-field-textual:hover{border-color:#fff}
.mtq-form .elementor-field-textual:focus,
.mtq-form .elementor-field-textual:focus-visible{
  outline:2px solid var(--mtq-accent);outline-offset:3px;
  border-color:var(--mtq-accent);background:rgba(255,255,255,.05);
}

/* El selector de necesidad: radios como chips (momento firma) */
.mtq-form .elementor-field-type-radio .elementor-field-subgroup{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:7px;
}
.mtq-form .elementor-field-type-radio .elementor-field-option{position:relative}
.mtq-form .elementor-field-type-radio input[type="radio"]{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;
}
.mtq-form .elementor-field-type-radio label{
  display:flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 18px;border-radius:99px;
  border:1px solid var(--mtq-line-strong);background:rgba(255,255,255,.02);
  color:var(--mtq-lead);font-family:Inter,sans-serif;font-size:.875rem;font-weight:500;
  cursor:pointer;transition:border-color .25s var(--mtq-ease),color .25s var(--mtq-ease),background-color .25s var(--mtq-ease);
}
.mtq-form .elementor-field-type-radio label:hover{border-color:#fff;color:#fff}
.mtq-form .elementor-field-type-radio input[type="radio"]:checked + label{
  border-color:var(--mtq-accent);color:#fff;background:rgba(111,156,245,.14);
}
.mtq-form .elementor-field-type-radio input[type="radio"]:focus-visible + label{
  outline:2px solid var(--mtq-accent);outline-offset:3px;
}

/* Botón y microcopy */
.mtq-form .elementor-field-type-submit{margin-top:10px}
.mtq-form .elementor-field-type-submit .elementor-button{min-width:180px}
.mtq-privacidad p,.mtq-privacidad{
  color:var(--mtq-dim);font-size:.8125rem;line-height:1.5;margin:0;
}

/* Mensajes del sistema — ícono + texto, nunca solo color.
   No hay color de error accesible sobre fondo oscuro todavía (DESIGN.md §9). */
.mtq-form .elementor-message{
  display:flex;align-items:flex-start;gap:12px;
  margin-top:18px;padding:16px 18px;border-radius:16px;
  border:1px solid var(--mtq-line-strong);background:rgba(255,255,255,.04);
  color:var(--mtq-body);font-size:.9375rem;line-height:1.55;
}
.mtq-form .elementor-message:before{
  font-family:inherit;flex:none;color:#fff;
}

/* --- Otras vías --------------------------------------------------------- */

.mtq-vias .elementor-icon-box-wrapper{
  display:flex;gap:16px;align-items:flex-start;text-align:left;
}
.mtq-vias .elementor-icon-box-icon{margin:3px 0 0;flex:none}
.mtq-vias .elementor-icon svg{width:20px;height:20px;color:var(--mtq-accent)}
.mtq-vias .elementor-icon-box-title{
  margin:0;font-family:Inter,sans-serif;font-size:.75rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mtq-dim);
}
.mtq-vias .elementor-icon-box-description{
  margin:7px 0 0;color:var(--mtq-body);font-size:.9375rem;line-height:1.6;
}
.mtq-vias .elementor-icon-box-description a{
  color:#fff;text-decoration:none;font-weight:500;
}
.mtq-vias .elementor-icon-box-description a:hover{
  text-decoration:underline;text-decoration-color:var(--mtq-accent);
  text-underline-offset:.22em;
}

/* --- Qué pasa después --------------------------------------------------- */

.e-con.mtq-despues{
  border-top:1px solid var(--mtq-line);
  padding:clamp(76px,9vw,120px) 24px!important;
}
.e-con.mtq-secuencia{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:start;
}
@media (max-width:1080px){
  .e-con.mtq-secuencia{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:620px){
  .e-con.mtq-secuencia{grid-template-columns:minmax(0,1fr)!important}
}
.mtq-paso{padding-top:22px;border-top:1px solid var(--mtq-line)}
.mtq-paso-num .elementor-heading-title{
  font-family:Manrope,sans-serif;font-weight:800;font-size:1.5rem;
  letter-spacing:-.02em;color:var(--mtq-accent);
  font-variant-numeric:tabular-nums;
}
.mtq-paso-txt p,.mtq-paso-txt{
  margin:12px 0 0;color:var(--mtq-body);font-size:.9375rem;line-height:1.65;
}

/* Honeypot: fuera de la vista y fuera del flujo, pero presente en el DOM. */
.mtq-form .elementor-field-group-hp{
  position:absolute!important;left:-9999px!important;
  width:1px!important;height:1px!important;overflow:hidden!important;
}

/* ==========================================================================
   SOFTWARE A LA MEDIDA
   Atmósfera media, índigo denso (atm-indigo #1A38A8). Sin movimiento:
   el diagrama es estático a propósito (spec §3).
   ========================================================================== */

.mtq-atm-soft::before{
  width:1080px;height:700px;top:-280px;right:-140px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(58,70,216,.60), rgba(58,70,216,0) 70%);
}
.mtq-atm-soft::after{
  width:640px;height:460px;bottom:-69px;left:-180px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(48,44,168,.36), rgba(48,44,168,0) 70%);
}
.mtq-atm-soft{
  background-image:radial-gradient(38% 44% at 100% 42%, rgba(44,91,232,.30), rgba(44,91,232,0) 70%);
}
.mtq-atm-soft-comp::before{
  width:1240px;height:700px;top:-200px;left:50%;margin-left:-620px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(58,70,216,.30), rgba(58,70,216,0) 70%);
}
.mtq-atm-soft-cierre::before{
  width:1000px;height:560px;bottom:-84px;left:50%;margin-left:-500px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(58,70,216,.40), rgba(58,70,216,0) 70%);
}

/* --- Comparador (momento firma) ---------------------------------------- */

.e-con.mtq-comp-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  align-items:stretch!important;
}
@media (max-width:1080px){
  .e-con.mtq-comp-grid{grid-template-columns:minmax(0,1fr)!important}
  .mtq-comp-flecha{transform:rotate(90deg)}
}
.e-con.mtq-comp-col{
  border-radius:22px;
  padding:clamp(26px,3vw,36px)!important;
}
.e-con.mtq-comp-col-auto{background-color:rgba(111,156,245,.07)}
.mtq-comp-caso p,.mtq-comp-caso{margin:6px 0 0;color:var(--mtq-dim);font-size:.875rem}
.mtq-comp-flecha{display:flex;align-items:center;justify-content:center;color:var(--mtq-accent)}
.mtq-comp-flecha svg{width:34px;height:auto}
.mtq-comp-nota p,.mtq-comp-nota{
  margin:24px 0 0;color:var(--mtq-dim);font-size:.875rem;max-width:60ch;
}

/* Los pasos. Van como lista dentro de un editor de texto: es la única forma
   de conservar la semántica <ol> con widgets nativos. */
.mtq-pasos ol{list-style:none;margin:26px 0 0;padding:0}
.mtq-pasos li{
  display:grid;grid-template-columns:26px 1fr auto;gap:14px;align-items:baseline;
  padding:14px 0;border-top:1px solid var(--mtq-line);
  font-size:.9375rem;line-height:1.5;color:var(--mtq-body);
}
.mtq-pasos li:first-child{border-top:0;padding-top:0}
.mtq-pasos .n{
  font-family:Manrope,sans-serif;font-weight:600;font-size:.8125rem;
  color:var(--mtq-dim);font-variant-numeric:tabular-nums;
}
.mtq-pasos .t{
  font-family:Manrope,sans-serif;font-weight:600;font-size:.875rem;
  color:var(--mtq-lead);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.mtq-comp-col-auto .mtq-pasos .t{color:var(--mtq-accent)}
/* Los pasos propensos a error NO llevan color propio: el color de error
   accesible sobre fondo oscuro sigue pendiente (DESIGN.md §9). Ícono + texto. */
.mtq-pasos .falla{
  display:flex;align-items:center;gap:7px;margin-top:7px;
  font-size:.75rem;font-weight:600;letter-spacing:.04em;color:var(--mtq-dim);
}
.mtq-pasos .falla svg{flex:none}

.mtq-total{margin-top:26px;padding-top:22px;border-top:1px solid var(--mtq-line-strong)}
.mtq-total .elementor-heading-title{display:block}
.mtq-total-valor .elementor-heading-title{
  margin-top:8px;font-family:Manrope,sans-serif;font-weight:800;
  font-size:clamp(2rem,4vw,3rem);line-height:1;letter-spacing:-.04em;
  color:var(--mtq-lead);font-variant-numeric:tabular-nums;
}
.mtq-comp-col-auto .mtq-total-valor .elementor-heading-title{color:var(--mtq-accent)}

/* --- Hacienda ----------------------------------------------------------- */

.e-con.mtq-hac{padding:clamp(96px,12vw,160px) 24px!important;border-top:1px solid var(--mtq-line)}
.e-con.mtq-hac-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important;
  align-items:start!important;
}
@media (max-width:1080px){
  .e-con.mtq-hac-grid{grid-template-columns:minmax(0,1fr)!important}
}
.mtq-hac h2 .elementor-heading-title,
.mtq-hac .mtq-h2-hac .elementor-heading-title{font-size:clamp(2rem,4vw,3.25rem)}
.mtq-resolvemos ul{list-style:none;margin:20px 0 0;padding:0}
.mtq-resolvemos li{
  display:flex;gap:14px;padding:15px 0;border-top:1px solid var(--mtq-line);
  color:var(--mtq-body);font-size:.9375rem;line-height:1.55;
}
.mtq-resolvemos li svg{flex:none;margin-top:3px;color:var(--mtq-accent);width:18px;height:18px}
.e-con.mtq-hac-diagrama{
  border-radius:22px;padding:clamp(24px,3vw,34px)!important;
  position:sticky;top:100px;
}
@media (max-width:1080px){ .e-con.mtq-hac-diagrama{position:static} }
.mtq-hac-diagrama .mtq-nota-dim p{margin-top:18px;font-size:.8125rem;line-height:1.6}

/* --- El código es tuyo (panel de declaración) --------------------------- */

.e-con.mtq-panel-decl{
  display:grid!important;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important;
  padding:clamp(32px,4vw,52px) clamp(32px,4vw,52px) clamp(32px,4vw,52px) clamp(40px,5vw,68px)!important;
}
@media (max-width:1080px){
  .e-con.mtq-panel-decl{grid-template-columns:minmax(0,1fr)!important}
}
.mtq-panel-decl .mtq-h2 .elementor-heading-title{
  font-size:clamp(1.5rem,2.8vw,2.25rem);line-height:1.14;
}

/* --- Cómo empieza ------------------------------------------------------- */

.e-con.mtq-empieza{
  padding:clamp(84px,10vw,140px) 24px!important;
  border-top:1px solid var(--mtq-line);
}
.e-con.mtq-empieza-in{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  align-items:center!important;
}
@media (max-width:1080px){
  .e-con.mtq-empieza-in{grid-template-columns:minmax(0,1fr)!important}
}

/* ==========================================================================
   DESARROLLO WEB — lo que el sistema de diseño aún no cubría
   ========================================================================== */

.e-con.mtq-ba-pie{
  display:flex!important;flex-direction:row;justify-content:space-between;
  gap:24px;flex-wrap:wrap;align-items:flex-start;
}
.mtq-ba-pie p{color:var(--mtq-dim);font-size:.875rem;max-width:52ch;margin:0}

/* Cierre centrado de las páginas de servicio */
.e-con.mtq-cierre-in{
  display:flex!important;flex-direction:column;align-items:center;text-align:center;
}
.mtq-cierre-in .mtq-h2-cierre .elementor-heading-title{
  max-width:20ch;text-align:center;
}
.mtq-cierre-in .mtq-lead p,
.mtq-cierre-in .mtq-lead{max-width:46ch;text-align:center;margin-left:auto;margin-right:auto}

/* Enlace de texto dentro de un párrafo — la flecha del prototipo */
.mtq-enlace a{
  color:var(--mtq-accent);font-weight:600;text-decoration:none;
  text-underline-offset:.22em;
}
.mtq-enlace a:hover{text-decoration:underline}

/* ==========================================================================
   INFRAESTRUCTURA TI
   La unica pagina con verde: el mapa de cobertura, y solo ahi (DESIGN.md §1).
   El marcador de foto es un componente, no un hueco: dice que fotografiar.
   ========================================================================== */

/* --- El marcador de foto ------------------------------------------------ */

.mtq-foto{
  position:relative;overflow:hidden;border-radius:18px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px;isolation:isolate;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 46px),
    linear-gradient(152deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 62%);
  border:1px dashed rgba(111,156,245,.4);
}
.mtq-foto-marco{
  position:absolute;inset:15px;z-index:1;pointer-events:none;opacity:.7;
  background:
    linear-gradient(var(--mtq-accent),var(--mtq-accent)) 0 0/20px 1.5px no-repeat,
    linear-gradient(var(--mtq-accent),var(--mtq-accent)) 0 0/1.5px 20px no-repeat,
    linear-gradient(var(--mtq-accent),var(--mtq-accent)) 100% 0/20px 1.5px no-repeat,
    linear-gradient(var(--mtq-accent),var(--mtq-accent)) 100% 0/1.5px 20px no-repeat,
    linear-gradient(var(--mtq-accent),var(--mtq-accent)) 0 100%/20px 1.5px no-repeat,
    linear-gradient(var(--mtq-accent),var(--mtq-accent)) 0 100%/1.5px 20px no-repeat,
    linear-gradient(var(--mtq-accent),var(--mtq-accent)) 100% 100%/20px 1.5px no-repeat,
    linear-gradient(var(--mtq-accent),var(--mtq-accent)) 100% 100%/1.5px 20px no-repeat;
}
.mtq-foto-ficha{position:relative;z-index:2;max-width:44ch}
.mtq-foto-ficha .mtq-microlabel{color:var(--mtq-accent);display:flex;align-items:center;gap:8px}
.mtq-foto-ficha .mtq-microlabel svg{flex:none}
.mtq-foto-ficha p{margin-top:10px;color:var(--mtq-lead);font-size:.9375rem;line-height:1.55}
.mtq-foto-ficha .dir{margin-top:8px;color:var(--mtq-dim);font-size:.8125rem}

/* --- Hero con foto ------------------------------------------------------ */

.mtq-hero-foto{
  position:relative;border-radius:26px;overflow:hidden;
  min-height:clamp(440px,58vh,600px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;
  gap:clamp(24px,3vw,40px);padding:clamp(28px,4vw,56px);
}
.mtq-hero-foto > .velo{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,rgba(6,7,13,.92) 0%,rgba(6,7,13,.78) 38%,rgba(6,7,13,.24) 74%,rgba(6,7,13,.12) 100%);
}
.mtq-hero-in{position:relative;z-index:3;grid-column:1;max-width:32rem}
.mtq-hero-in h1{
  margin:20px 0 0;font-family:Manrope,sans-serif;font-weight:800;
  letter-spacing:-.04em;line-height:1;font-size:clamp(2.5rem,6.4vw,4.75rem);color:#fff;
}
.mtq-hero-in .lead{margin-top:24px;max-width:38ch;color:var(--mtq-body);font-size:1.0625rem;line-height:1.7}
.mtq-hero-in .mtq-btn-inline{
  margin-top:32px;display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 26px;border-radius:99px;
  background-color:var(--mtq-accent-solid);color:#fff;text-decoration:none;
  font-family:Inter,sans-serif;font-size:.9375rem;font-weight:600;letter-spacing:-.005em;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.22);
  transition:background-color .25s var(--mtq-ease);
}
.mtq-hero-in .mtq-btn-inline:hover{background-color:var(--mtq-accent-hover);color:#fff}
.mtq-hero-ficha{
  position:relative;z-index:3;grid-column:2;align-self:end;
  width:min(23rem,34vw);border-radius:16px;padding:20px 22px;
}
.mtq-hero-ficha .mtq-microlabel{color:var(--mtq-accent);display:flex;align-items:center;gap:8px}
.mtq-hero-ficha p{margin-top:10px;color:var(--mtq-lead);font-size:.875rem;line-height:1.55}
.mtq-hero-ficha .dir{margin-top:8px;color:var(--mtq-dim);font-size:.8125rem}
@media (max-width:860px){
  .mtq-hero-foto{grid-template-columns:minmax(0,1fr);align-items:start}
  .mtq-hero-ficha{grid-column:1;width:auto;margin-top:28px}
}

/* --- Que hacemos: rejilla de tres con filetes --------------------------- */

.mtq-hace{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--mtq-line)}
.mtq-hace > div{display:flex;gap:20px;padding:32px 34px 32px 0;border-bottom:1px solid var(--mtq-line)}
.mtq-hace > div:not(:nth-child(3n+1)){padding-left:34px;border-left:1px solid var(--mtq-line)}
.mtq-hace svg{flex:none;color:var(--mtq-accent);margin-top:2px;width:24px;height:24px}
.mtq-hace h3{font-family:Manrope,sans-serif;font-size:1.0625rem;font-weight:600;letter-spacing:-.018em;color:#fff}
.mtq-hace p{margin-top:9px;color:var(--mtq-lead);font-size:.9375rem;line-height:1.6}
@media (max-width:1080px){
  .mtq-hace{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mtq-hace > div{padding-right:28px}
  .mtq-hace > div:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .mtq-hace > div:nth-child(even){padding-left:28px;border-left:1px solid var(--mtq-line)}
}
@media (max-width:620px){
  .mtq-hace{grid-template-columns:minmax(0,1fr)}
  .mtq-hace > div,
  .mtq-hace > div:nth-child(even){padding:26px 0;border-left:0;padding-left:0}
}

/* --- Cobertura (momento firma) ------------------------------------------ */

.e-con.mtq-cob-grid{
  display:grid!important;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)!important;
  align-items:center!important;
}
@media (max-width:1080px){
  .e-con.mtq-cob-grid{grid-template-columns:minmax(0,1fr)!important}
}
.mtq-mapa svg{width:100%;max-width:400px;height:auto;margin-inline:auto;display:block}
.mtq-zonas .zona{padding:26px 0}
.mtq-zonas .zona + .zona{border-top:1px solid var(--mtq-line)}
.mtq-zonas h3{font-family:Manrope,sans-serif;font-size:1.1875rem;font-weight:600;letter-spacing:-.02em;color:#fff}
.mtq-zonas h3 .punto{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:11px;vertical-align:middle}
/* El verde vive SOLO aca: es el punto del mapa de cobertura. */
.mtq-zonas .sur{background:var(--mtq-zona);box-shadow:0 0 12px 1px rgba(69,196,137,.7)}
.mtq-zonas .resto{background:rgba(255,255,255,.34)}
.mtq-zonas p{margin-top:12px;color:var(--mtq-lead);font-size:.9375rem;line-height:1.7;max-width:46ch}
.mtq-zonas .resp{margin-top:14px}
.mtq-cob-nota p,.mtq-cob-nota{
  margin-top:34px;padding-top:26px;border-top:1px solid var(--mtq-line);
  font-style:italic;color:var(--mtq-dim);max-width:60ch;
}

/* --- Galeria de obra ---------------------------------------------------- */

.mtq-galeria{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.mtq-galeria .mtq-foto{min-height:250px}
.mtq-galeria .mtq-foto:nth-child(1){grid-column:span 4;min-height:330px}
.mtq-galeria .mtq-foto:nth-child(2){grid-column:span 2;min-height:330px}
.mtq-galeria .mtq-foto:nth-child(3),
.mtq-galeria .mtq-foto:nth-child(4),
.mtq-galeria .mtq-foto:nth-child(5){grid-column:span 2}
@media (max-width:1080px){
  .mtq-galeria{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mtq-galeria .mtq-foto:nth-child(1),
  .mtq-galeria .mtq-foto:nth-child(2){grid-column:span 4}
  .mtq-galeria .mtq-foto:nth-child(2){min-height:250px}
}
@media (max-width:620px){
  .mtq-galeria{grid-template-columns:minmax(0,1fr)}
  .mtq-galeria .mtq-foto{grid-column:span 1}
}

/* --- Verticales --------------------------------------------------------- */

.mtq-verts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.mtq-vert{border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.mtq-vert .mtq-foto{border:0;border-bottom:1px dashed rgba(111,156,245,.34);border-radius:0;min-height:158px;padding:16px}
.mtq-vert .mtq-foto-marco{inset:11px}
.mtq-vert-txt{padding:22px 22px 24px}
.mtq-vert h3{font-family:Manrope,sans-serif;font-size:1.0625rem;font-weight:600;letter-spacing:-.018em;color:#fff}
.mtq-vert p{margin-top:9px;color:var(--mtq-lead);font-size:.9375rem;line-height:1.6}
.mtq-vert .mtq-microlabel{margin-top:14px;color:var(--mtq-accent)}
@media (max-width:1080px){ .mtq-verts{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .mtq-verts{grid-template-columns:minmax(0,1fr)} }

/* --- Cierre de infraestructura: atmosfera a un tercio -------------------- */

.mtq-atm-infra-cierre::before{
  width:1040px;height:560px;bottom:-84px;left:50%;margin-left:-520px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(40,88,236,.17), rgba(44,91,232,0) 70%);
}

/* Elementor pinta flex en todo container: las rejillas propias se imponen. */
.e-con.mtq-hero-foto{display:grid!important}.e-con.mtq-vert{display:flex!important;flex-direction:column}

/* ==========================================================================
   CASOS
   Estructura identica en los tres. El numero domina la composicion.
   Hoy los tres numeros son huecos: sin cifra, la pagina no hace su trabajo.
   ========================================================================== */

.mtq-atm-casos::before{
  width:1020px;height:600px;top:-260px;left:50%;margin-left:-510px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(44,91,232,.40), rgba(44,91,232,0) 70%);
}
.mtq-atm-casos::after{
  width:680px;height:440px;top:-60px;right:-120px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(58,70,216,.26), rgba(58,70,216,0) 70%);
}

.e-con.mtq-caso{padding:clamp(64px,8vw,104px) 24px!important;border-top:1px solid var(--mtq-line)}
.e-con.mtq-caso-alt{background-color:rgba(255,255,255,.018)}
@media (max-width:620px){
  .e-con.mtq-caso{padding-left:20px!important;padding-right:20px!important}
}

.e-con.mtq-caso-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr)!important;
  align-items:center!important;
}
@media (max-width:1080px){
  .e-con.mtq-caso-grid{grid-template-columns:minmax(0,1fr)!important}
}

.mtq-caso-nombre .elementor-heading-title{
  font-family:Manrope,sans-serif;font-size:clamp(1.5rem,2.6vw,2rem);
  font-weight:800;letter-spacing:-.035em;line-height:1.1;color:#fff;
}
.mtq-caso-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:14px}
.mtq-caso-meta .datos{color:var(--mtq-dim);font-size:.875rem}
.mtq-chip-permiso{
  display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:99px;
  border:1px dashed rgba(255,255,255,.26);background:rgba(255,255,255,.025);
  font-family:Inter,sans-serif;font-size:.6875rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mtq-dim);
}
.mtq-chip-permiso svg{flex:none;width:13px;height:13px}

.mtq-caso-txt dl{margin:0}
.mtq-caso-txt dt{
  font-family:Inter,sans-serif;font-weight:600;font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mtq-dim);
}
.mtq-caso-txt dd{margin:10px 0 0;color:var(--mtq-body);line-height:1.7;max-width:46ch}
.mtq-caso-txt dd + dt{margin-top:26px}

/* La placa: el numero es el protagonista. */
.e-con.mtq-placa{
  border-radius:22px;padding:clamp(30px,3.4vw,44px)!important;
  display:flex!important;flex-direction:column;justify-content:center;
  min-height:clamp(250px,26vw,320px);
}
.mtq-placa .mtq-microlabel{color:var(--mtq-dim)}
.mtq-cifra{
  display:block;font-family:Manrope,sans-serif;font-weight:800;
  font-size:clamp(2rem,4.4vw,3.25rem);line-height:.92;letter-spacing:-.05em;
  color:var(--mtq-accent);font-variant-numeric:tabular-nums;
}
.mtq-cifra-hueco{
  display:block;margin-top:14px;border:1px dashed rgba(111,156,245,.5);border-radius:16px;
  padding:20px 22px 22px;background:rgba(111,156,245,.05);
}
.mtq-cifra-hueco .que{display:block;margin-top:16px;color:var(--mtq-lead);font-size:.875rem;line-height:1.6;max-width:34ch}
.mtq-placa-ctx p,.mtq-placa-ctx{margin-top:20px;color:var(--mtq-body);max-width:28ch;line-height:1.6}

/* Testimonio del caso, a lo ancho. */
.e-con.mtq-caso-testimonio{
  margin-top:clamp(36px,4vw,56px);padding-top:clamp(30px,3.5vw,44px)!important;
  border-top:1px solid var(--mtq-line);
  display:flex!important;flex-direction:row;gap:22px;align-items:flex-start;
}
.mtq-caso-testimonio .cita{color:var(--mtq-lead);font-size:1.0625rem;line-height:1.7;max-width:62ch;margin:0}
.mtq-caso-testimonio .quien{margin-top:12px;color:var(--mtq-dim);font-size:.875rem}
.mtq-caso-testimonio .mtq-avatar{flex:none}

/* Los demas: logos autorizados y celdas de texto, con el mismo peso. */
.mtq-demas-nota p,.mtq-demas-nota{margin-top:16px;color:var(--mtq-dim);font-size:.9375rem;max-width:60ch}
.mtq-rejilla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.mtq-celda{
  min-height:96px;border-radius:14px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;padding:18px;text-align:center;
  border:1px dashed rgba(255,255,255,.22);background:rgba(255,255,255,.02);
}
.mtq-celda .mtq-microlabel{color:var(--mtq-dim)}
.mtq-celda.texto{border-style:solid;border-color:var(--mtq-line);background:transparent}
.mtq-celda.texto b{font-family:Inter,sans-serif;font-weight:600;font-size:.9375rem;color:var(--mtq-lead)}
.mtq-celda.texto span{font-size:.75rem;color:var(--mtq-dim)}
@media (max-width:1080px){ .mtq-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .mtq-rejilla{grid-template-columns:minmax(0,1fr)} }

/* Cierre de Casos: dos columnas, no centrado. */
.e-con.mtq-cierre-2col{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  align-items:center!important;
}
@media (max-width:1080px){
  .e-con.mtq-cierre-2col{grid-template-columns:minmax(0,1fr)!important}
}

/* ==========================================================================
   NOSOTROS
   Dos momentos firma: la linea de tiempo y la tabla de consolidacion.
   La pagina no se publica sin las 3 fotos de equipo ni el ano de fundacion.
   ========================================================================== */

/* --- Hero con foto (variante propia: bloom rosa dentro del marco) -------- */

.mtq-hero-foto .mtq-atm-interna{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.mtq-hero-foto .mtq-atm-interna .mtq-bloom{
  position:absolute;width:760px;height:520px;top:-180px;right:-140px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(200,76,156,.20), rgba(200,76,156,0) 70%);
}
.mtq-hero-nos > .velo{
  background:linear-gradient(98deg,rgba(6,7,13,.90) 0%,rgba(6,7,13,.74) 40%,rgba(6,7,13,.22) 76%,rgba(6,7,13,.10) 100%);
}
.mtq-hero-nos{min-height:clamp(420px,54vh,560px)}
.mtq-hero-nos .mtq-hero-in h1{font-size:clamp(2.125rem,4.8vw,3.5rem);line-height:1.04}
.mtq-hero-nos .mtq-hero-in .mtq-lead{max-width:40ch}

/* --- El equipo ---------------------------------------------------------- */

.mtq-personas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mtq-persona{border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.mtq-persona .mtq-foto{border:0;border-radius:0;min-height:220px;padding:16px}
.mtq-persona .mtq-foto-marco{inset:11px}
.mtq-persona .txt{padding:24px}
.mtq-persona h3{font-family:Manrope,sans-serif;font-size:1.125rem;font-weight:600;letter-spacing:-.018em;color:#fff}
.mtq-persona .cargo{margin-top:5px;color:var(--mtq-accent);font-size:.875rem;font-weight:600}
.mtq-persona p{margin-top:12px;color:var(--mtq-lead);font-size:.9375rem;line-height:1.6}
.mtq-persona .nota{
  margin-top:14px;font-size:.6875rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mtq-accent);
}
.mtq-persona.vacante{
  border:1px dashed rgba(111,156,245,.4);border-radius:20px;
  align-items:center;justify-content:center;text-align:center;padding:36px 26px;gap:12px;
}
.mtq-persona.vacante p{color:var(--mtq-dim);font-size:.875rem;max-width:26ch}
.mtq-equipo-cierre p,.mtq-equipo-cierre{color:var(--mtq-body);font-size:1.0625rem;max-width:54ch}
@media (max-width:1080px){ .mtq-personas{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .mtq-personas{grid-template-columns:minmax(0,1fr)} }

/* --- Linea de tiempo (momento firma 1) ---------------------------------- */

.mtq-hitos{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;position:relative;
  list-style:none;margin:0;padding:0;
}
.mtq-hitos::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--mtq-line)}
.mtq-hitos .hito{position:relative;padding-top:38px}
.mtq-hitos .hito::before{
  content:"";position:absolute;top:3px;left:0;width:13px;height:13px;border-radius:50%;
  background:#0A0C15;border:1.5px solid var(--mtq-line-strong);
}
.mtq-hitos .hito.hoy::before{
  background:var(--mtq-accent);border-color:var(--mtq-accent);
  box-shadow:0 0 16px 2px rgba(111,156,245,.6);
}
.mtq-hitos .anio{
  font-family:Manrope,sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:-.03em;
  color:var(--mtq-lead);font-variant-numeric:tabular-nums;
}
.mtq-hitos .hito.hoy .anio{color:var(--mtq-accent)}
.mtq-hitos .hito p{margin-top:10px;color:var(--mtq-lead);font-size:.9375rem;line-height:1.6;max-width:26ch}
@media (max-width:860px){
  .mtq-hitos{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  .mtq-hitos::before{display:none}
}
@media (max-width:620px){ .mtq-hitos{grid-template-columns:minmax(0,1fr)} }

/* --- La consolidacion (momento firma 2) --------------------------------- */

.mtq-atm-consol::before{
  width:1100px;height:620px;top:-160px;left:50%;margin-left:-550px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(44,91,232,.20), rgba(44,91,232,0) 70%);
}
.mtq-tabla{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr) minmax(0,1fr);
  gap:0 clamp(16px,2vw,26px);
}
.mtq-tabla > *{padding:22px 0;border-bottom:1px solid var(--mtq-line);display:flex;align-items:center}
.mtq-tabla .th{padding-bottom:16px;border-bottom:1px solid var(--mtq-line-strong)}
.mtq-tabla .th h3{font-family:Manrope,sans-serif;font-size:1.0625rem;font-weight:600;letter-spacing:-.018em;color:#fff}
.mtq-tabla .criterio{color:var(--mtq-dim);font-size:.9375rem;line-height:1.5}
.mtq-tabla .tres{color:var(--mtq-lead);font-size:.9375rem;line-height:1.6}
.mtq-tabla .mtq{color:#fff;font-size:.9375rem;line-height:1.6;font-weight:500}
.mtq-tabla .col-mtq{
  position:relative;background:rgba(111,156,245,.06);
  padding-left:clamp(16px,2vw,26px);padding-right:clamp(16px,2vw,26px);
}
.mtq-tabla .col-mtq::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--mtq-accent)}
.mtq-tabla .th.col-mtq{border-radius:16px 16px 0 0;padding-top:20px}
.mtq-tabla .mtq:last-of-type{border-radius:0 0 16px 16px;border-bottom:0}
.mtq-remate p,.mtq-remate{margin-top:36px;color:var(--mtq-body);font-size:1.0625rem;line-height:1.7;max-width:60ch}
@media (max-width:860px){
  .mtq-tabla{grid-template-columns:minmax(0,1fr)}
  .mtq-tabla .th:first-child{display:none}
  .mtq-tabla .criterio{padding-top:26px;border-bottom:0;color:var(--mtq-dim);font-weight:600}
  .mtq-tabla .th.col-mtq,.mtq-tabla .mtq:last-of-type{border-radius:0}
}

/* --- Como trabajamos: cinco pasos con filetes verticales ---------------- */

.mtq-proceso{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:1px solid var(--mtq-line);list-style:none;margin:0;padding:0;
}
.mtq-proceso > li{padding:30px 24px 30px 0;border-right:1px solid var(--mtq-line)}
.mtq-proceso > li:last-child{border-right:0;padding-right:0}
.mtq-proceso > li:not(:first-child){padding-left:24px}
.mtq-proceso .n{display:flex;align-items:center;gap:12px;color:var(--mtq-accent)}
.mtq-proceso .n svg{flex:none;width:20px;height:20px}
.mtq-proceso .n b{
  font-family:Manrope,sans-serif;font-weight:800;font-size:.8125rem;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
.mtq-proceso h3{margin-top:16px;font-family:Manrope,sans-serif;font-size:1.0625rem;font-weight:600;letter-spacing:-.018em;color:#fff}
.mtq-proceso p{margin-top:9px;color:var(--mtq-lead);font-size:.9375rem;line-height:1.6}
@media (max-width:1080px){
  .mtq-proceso{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mtq-proceso > li{border-right:0;border-bottom:1px solid var(--mtq-line);padding:26px 0}
  .mtq-proceso > li:not(:first-child){padding-left:0}
}
@media (max-width:620px){ .mtq-proceso{grid-template-columns:minmax(0,1fr)} }

/* --- Los datos: la cedula juridica visible es senal de confianza --------- */

.e-con.mtq-datos{
  padding:26px 24px!important;
  border-top:1px solid var(--mtq-line);border-bottom:1px solid var(--mtq-line);
  background-color:rgba(255,255,255,.018);
}
.mtq-datos p{color:var(--mtq-dim);font-size:.8125rem;line-height:1.8;margin:0}
.mtq-datos b{color:var(--mtq-lead);font-weight:600}

.e-con.mtq-personas,.e-con.mtq-hitos,.e-con.mtq-tabla,.e-con.mtq-proceso,.e-con.mtq-rejilla{display:grid!important}

/* ==========================================================================
   HOME
   Intensidad de atmosfera ALTA (DESIGN.md §5): bloom a plena opacidad mas dos
   haces. Los dos pseudo-elementos de .mtq-atm solo dan dos blooms, asi que el
   resto viaja en capa, como documenta wordpress/LEEME.md.
   ========================================================================== */

.mtq-hm-b3{
  width:880px;height:600px;top:60px;right:-260px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(28,68,196,.50), rgba(26,56,168,0) 70%);
}
.mtq-hm-b4{
  width:700px;height:420px;top:250px;left:50%;margin-left:-350px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(44,91,232,.34), rgba(44,91,232,0) 72%);
}
.mtq-hm-m1{left:13%;transform:rotate(16deg)}
.mtq-hm-m2{right:11%;transform:rotate(-14deg)}
.mtq-hm-cierre-m1{left:28%;transform:rotate(13deg)}

/* Hero centrado */
.e-con.mtq-hero-home{display:flex!important;flex-direction:column;align-items:center;text-align:center}
.mtq-hero-home .mtq-h1 .elementor-heading-title{text-align:center}
.mtq-hero-home .mtq-lead p,
.mtq-hero-home .mtq-lead{max-width:52ch;margin-left:auto;margin-right:auto;text-align:center}
.e-con.mtq-hero-acciones{
  display:flex!important;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;
}
@media (max-width:620px){
  .e-con.mtq-hero-acciones{flex-direction:column;align-items:stretch;width:100%}
}

/* Franja de datos */
.e-con.mtq-stats-row{text-align:left}
.e-con.mtq-stat{
  padding:22px 22px 24px!important;min-height:172px;
  display:flex!important;flex-direction:column;
}
.mtq-stat .mtq-stat-et{margin-top:auto}
.mtq-stat .mtq-pendiente{width:100%}
.mtq-stat .mtq-pendiente b{font-family:Manrope,sans-serif;font-weight:800;font-size:1rem;letter-spacing:-.02em}

/* Cinta corrida: filetes arriba y abajo, como en el prototipo */
.e-con.mtq-ticker{
  border-top:1px solid var(--mtq-line);border-bottom:1px solid var(--mtq-line);
  background-color:rgba(255,255,255,.022);
  padding:16px 0!important;
}

/* Por que un solo proveedor */
.e-con.mtq-porque-grid{
  display:grid!important;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)!important;
  align-items:center!important;
}
@media (max-width:1080px){
  .e-con.mtq-porque-grid{grid-template-columns:minmax(0,1fr)!important}
}
.mtq-porque-grid .mtq-copy p{max-width:46ch;line-height:1.75}
.e-con.mtq-nucleo{border-radius:26px;padding:20px 16px 8px!important}

/* Prueba: tres casos con su numero */
.e-con.mtq-prueba-head{
  display:flex!important;flex-direction:row;align-items:flex-end;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
}
.e-con.mtq-caso-card{
  border-radius:20px;padding:28px!important;
  display:flex!important;flex-direction:column;
}
.mtq-caso-card .elementor-widget-heading .elementor-heading-title{
  font-family:Manrope,sans-serif;font-size:1.0625rem;font-weight:600;letter-spacing:-.015em;color:#fff;
}
/* 2026-08-27: la tarjeta ya no lleva un numero grande sino lo entregado.
   Chips con lo verificable y un marcador chico para lo que falta. */
.e-con.mtq-caso-entrega{
  margin-top:auto;padding:26px 0 0 0!important;
  display:flex!important;flex-direction:row!important;flex-wrap:wrap;align-items:center;gap:8px;
}
.mtq-caso-chip .elementor-heading-title{
  display:inline-block;font-family:Inter,sans-serif;font-size:.75rem!important;font-weight:500!important;
  letter-spacing:.02em;color:var(--mtq-lead)!important;
  padding:6px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.16);
}
.mtq-caso-card .e-con.mtq-pendiente-chico{width:auto!important;padding:7px 12px!important;align-items:flex-start!important}
.mtq-pendiente-chico .mtq-pendiente-dato .elementor-heading-title{
  font-family:Inter,sans-serif!important;font-weight:500!important;font-size:.75rem!important;letter-spacing:0!important;
}
.e-con.mtq-logos{
  display:flex!important;flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap;
  padding-top:32px!important;border-top:1px solid var(--mtq-line);
}
.mtq-logos .mtq-microlabel{margin-right:12px}

/* Testimonio */
.e-con.mtq-testimonio{text-align:left}
.mtq-testimonio blockquote{margin:0}
.e-con.mtq-autor{display:flex!important;flex-direction:row;align-items:center;gap:18px}
.mtq-autor b{display:block;font-family:Inter,sans-serif;font-weight:600;font-size:1rem;color:#fff}
.mtq-autor span{display:block;margin-top:3px;color:var(--mtq-dim);font-size:.875rem}
.mtq-autor .nota{
  margin-top:6px;font-size:.6875rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mtq-accent);
}
.mtq-comillas{color:var(--mtq-accent);opacity:.5}
.mtq-comillas svg{width:38px;height:auto}

/* El H1 de la Home va en dos lineas; la segunda se desvanece. */
.mtq-h1 .elementor-heading-title span{display:block}
.mtq-h1 .elementor-heading-title .fade{
  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;
}

/* ==========================================================================
   CORRECCION 1 — el selector de necesidad no envolvia en movil
   Elementor estiliza la etiqueta del radio con un selector de cuatro clases,
   asi que la regla corta perdia y la etiqueta quedaba en display:inline: los
   chips no formaban caja y la fila desbordaba 195px a 375px de ancho.
   ========================================================================== */

.mtq-form .elementor-field-type-radio .elementor-field-subgroup{
  display:flex!important;flex-wrap:wrap!important;
  gap:10px;margin-top:7px;width:100%;max-width:100%;
}
.mtq-form .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option{
  display:block;position:relative;flex:0 1 auto;max-width:100%;min-width:0;
}
.mtq-form .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option input[type="radio"]{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;
}
.mtq-form .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option label{
  display:flex!important;align-items:center;justify-content:center;
  min-height:44px;padding:10px 18px;border-radius:99px;margin:0;max-width:100%;
  border:1px solid var(--mtq-line-strong);background:rgba(255,255,255,.02);
  color:var(--mtq-lead);font-family:Inter,sans-serif;font-size:.875rem;font-weight:500;
  line-height:1.35;text-align:center;overflow-wrap:anywhere;cursor:pointer;
  transition:border-color .25s var(--mtq-ease),color .25s var(--mtq-ease),background-color .25s var(--mtq-ease);
}
.mtq-form .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option label:hover{
  border-color:#fff;color:#fff;
}
.mtq-form .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option input[type="radio"]:checked + label{
  border-color:var(--mtq-accent);color:#fff;background:rgba(111,156,245,.14);
}
.mtq-form .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option input[type="radio"]:focus-visible + label{
  outline:2px solid var(--mtq-accent);outline-offset:3px;
}
@media (max-width:620px){
  /* A un ancho de telefono, cuatro chips en fila no caben nunca: cada uno
     ocupa la linea completa y conserva su area tactil de 44px. */
  .mtq-form .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option{flex:1 1 100%}
}

/* ==========================================================================
   CORRECCION 2 — el grupo de campo seguia siendo fila
   Elementor deja .elementor-field-group en fila con wrap, asi que la etiqueta
   y el subgrupo de radios compartian linea y el subgrupo arrancaba a 263px.
   La etiqueta va arriba y el control debajo, siempre, en los seis campos.
   ========================================================================== */

.mtq-form .elementor-form-fields-wrapper .elementor-field-group{
  display:flex!important;flex-direction:column!important;
  align-items:stretch!important;flex-wrap:nowrap!important;
  gap:9px;padding:0;width:auto!important;max-width:100%;min-width:0;
}
.mtq-form .elementor-form-fields-wrapper .elementor-field-group > .elementor-field-label,
.mtq-form .elementor-form-fields-wrapper .elementor-field-group > .elementor-field-subgroup,
.mtq-form .elementor-form-fields-wrapper .elementor-field-group > .elementor-field,
.mtq-form .elementor-form-fields-wrapper .elementor-field-group > .elementor-field-textual{
  width:100%!important;max-width:100%;flex:0 0 auto;margin:0;
}
.mtq-form .elementor-form-fields-wrapper .elementor-field-group > .elementor-field-label{
  flex-basis:auto!important;
}

/* ==========================================================================
   NATIVO EN LUGAR DE HTML
   Los iconos pasaron a widget de icono de Elementor tirando de los SVG de la
   biblioteca, y los bloques de texto a containers con encabezados
   (regla 10 del CLAUDE.md: nativo primero; el widget HTML queda solo para los
   SVG dibujados a mano y para la cinta corrida, que no tiene equivalente).

   El widget de icono mete tres capas propias y escala el SVG a 1em.
   Aca se anulan para que la caja siga siendo la del sistema de diseno.
   ========================================================================== */

.mtq-icono > .elementor-widget-container,
.mtq-icono .elementor-icon-wrapper{display:contents}
.mtq-icono .elementor-icon{
  display:flex;align-items:center;justify-content:center;
  padding:0;font-size:inherit;color:inherit;background:none;border:0;
}
.mtq-icono .elementor-icon svg{width:auto;height:auto;fill:none;flex:none}
.mtq-icono .elementor-icon{flex:none;width:auto}

/* Tamanos por ranura, los del prototipo */
.mtq-stat-ico .elementor-icon svg{width:22px!important;height:22px!important}
.mtq-build-ico .elementor-icon svg{width:24px!important;height:24px!important}
.mtq-avatar .elementor-icon svg{width:26px!important;height:26px!important}
.mtq-comillas .elementor-icon svg{width:34px!important;height:27px!important}
.mtq-comp-flecha .elementor-icon svg{width:34px!important;height:22px!important}
/* La flecha la dimensiona el control de tamano del widget (15px), no el CSS. */
.mtq-card-go .elementor-icon svg{width:1em!important;height:auto!important}
.mtq-vias .elementor-icon svg{width:20px!important;height:20px!important}

/* El color lo pone la ranura: los SVG usan currentColor. */
.mtq-stat-ico{color:#fff}
.mtq-build-ico{color:var(--mtq-accent)}
.mtq-avatar{color:var(--mtq-accent)}
.mtq-comillas{color:var(--mtq-accent);opacity:.5}
.mtq-comp-flecha{color:var(--mtq-accent)}

/* --- El pie de tarjeta del enrutador ------------------------------------ */
/* Antes era un widget HTML con dos spans. Ahora: un container en fila con el
   destino (encabezado + icono) a la izquierda y el numero a la derecha. */

/* El numero vuelve a ser filigrana de fondo, como en el prototipo aprobado:
   fuera de flujo, detras del contenido. Como item de flex competia por el ancho
   con el destino y a 1280px partia en dos lineas 3 de las 4 etiquetas. La
   tarjeta mide 290px: el numero se comia 68 y dejaba 150 para una de 190. */
.e-con.mtq-card-foot{position:static!important;display:block!important;margin-top:auto;padding-top:24px}
.mtq-card > .e-con-inner{position:static!important}
.mtq-card > .e-con-inner > *{position:relative;z-index:2}
.e-con.mtq-card-num{
  position:absolute!important;right:20px;bottom:12px;z-index:0!important;
  width:auto!important;padding:0!important;margin:0!important;
}
.e-con.mtq-card-go{
  display:inline-flex!important;flex-direction:row;align-items:center;gap:9px;
  width:auto!important;white-space:nowrap;color:var(--mtq-accent);
}
.mtq-card-go .elementor-heading-title{
  font-family:Inter,sans-serif;font-size:.8125rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mtq-accent);
}
.mtq-card-go .elementor-icon svg{transition:transform .3s var(--mtq-ease)}
.mtq-card:hover .mtq-card-go .elementor-icon svg{transform:translateX(4px)}
.mtq-card-num .elementor-heading-title{
  font-family:Manrope,sans-serif;font-weight:800;font-size:3.5rem;line-height:1;
  color:rgba(255,255,255,.10);font-variant-numeric:tabular-nums;
}
/* Desde 1081px el numero sube a la esquina superior derecha y el titulo le
   reserva sitio, igual que el prototipo. */
@media (min-width:1081px){
  .e-con.mtq-card-num{top:18px;bottom:auto}
  .mtq-card-num .elementor-heading-title{font-size:2.75rem}
  .mtq-card > .e-con-inner > .elementor-widget-heading:first-of-type{padding-right:52px}
}

/* --- El marcador de dato pendiente, en nativo --------------------------- */
/* Antes: <span class="mtq-pendiente"><b>..</b><small>..</small></span>.
   Ahora: un container con dos encabezados. El aspecto no cambia. */

.e-con.mtq-pendiente{
  display:inline-flex!important;flex-direction:column;gap:3px;
  border:1px dashed rgba(111,156,245,.55);border-radius:10px;
  padding:8px 13px!important;background-color:rgba(111,156,245,.06);
  width:auto;align-items:flex-start;
}
.mtq-pendiente-dato .elementor-heading-title{
  font-family:Inter,sans-serif;font-weight:600;font-size:.9375rem;
  color:var(--mtq-lead);line-height:1.35;
}
.mtq-pendiente-nota .elementor-heading-title{
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mtq-accent);font-weight:600;
}
/* En la placa de datos de Cloud y en las tarjetas de caso ocupa todo el ancho */
.mtq-dato .e-con.mtq-pendiente,
.mtq-stat .e-con.mtq-pendiente{width:100%;align-items:stretch}
.mtq-dato .mtq-pendiente-dato .elementor-heading-title{
  font-family:Manrope,sans-serif;font-weight:800;letter-spacing:-.02em;font-size:1.25rem;
}

/* --- Valor de la franja de datos ---------------------------------------- */
.mtq-stat-valor .elementor-heading-title{
  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;
}

/* --- Celdas de logo por autorizar --------------------------------------- */
.mtq-logo-slot .elementor-heading-title{
  display:flex;align-items:center;justify-content:center;
  height:52px;min-width:150px;padding:0 18px;
  border:1px dashed rgba(111,156,245,.42);border-radius:12px;
  font-family:Inter,sans-serif;font-size:.6875rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mtq-dim);
}

/* --- Autor del testimonio ----------------------------------------------- */
.mtq-autor-nombre .elementor-heading-title{
  font-family:Inter,sans-serif;font-weight:600;font-size:1rem;color:#fff;
}
.mtq-autor-cargo .elementor-heading-title{
  color:var(--mtq-dim);font-size:.875rem;font-weight:400;
}
.mtq-autor-nota .elementor-heading-title{
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mtq-accent);font-weight:600;
}
.e-con.mtq-autor-txt{display:flex!important;flex-direction:column;gap:3px}

/* El avatar es una placa redonda con el icono dentro */
.mtq-avatar{
  width:64px;height:64px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1px dashed rgba(111,156,245,.55);background-color:rgba(111,156,245,.07);
}.mtq-hace .elementor-icon-box-wrapper{gap:20px}.mtq-hace .elementor-icon-box-description{margin-top:9px}


/* ####################################################################
   Casos — post ID 3004 (slug casos)
   #################################################################### */
/* ==========================================================================
   CASOS — NATIVO EN LUGAR DE HTML
   Los 13 bloques HTML de la pagina pasaron a container + heading/text-editor
   /icon. Ninguno entraba en las excepciones: no hay capa de atmosfera, ni SVG
   dibujado a mano, ni cinta, ni deslizador, ni div decorativo vacio.
   Cambia el DOM; el texto y las clases del sistema no.
   ========================================================================== */

/* Elementor da margin-block-end:20px (--kit-widget-spacing) a todo widget que
   no sea el ultimo de su caja. Dentro de estas cajas el ritmo lo ponen el gap
   y los margenes propios, asi que ahi se anula. */
.e-con.mtq-caso-meta > .elementor-widget,
.e-con.mtq-chip-permiso > .elementor-widget,
.e-con.mtq-caso-txt > .elementor-widget,
.e-con.mtq-cifra-hueco > .elementor-widget,
.e-con.mtq-celda > .elementor-widget{margin-block-end:0}

/* Y al reves: ese margen SI hacia falta debajo de los dos bloques que antes
   eran widgets intermedios y ahora son containers. Un container no lo recibe,
   asi que se le devuelve para no perder 20px de aire. */
.e-con.mtq-caso-meta,
.e-con.mtq-cifra-hueco{margin-bottom:20px}

/* --- La linea de datos y el chip de permiso ------------------------------ */
/* Antes: <span class="datos"> + <span class="mtq-chip-permiso"> dentro de un
   widget HTML. Ahora: container en fila con un encabezado y un container. */

.e-con.mtq-caso-meta{
  display:flex!important;flex-direction:row;flex-wrap:wrap;
  align-items:center;gap:10px 14px;width:100%;
}
/* En fila Elementor estira a los hijos (--container-widget-flex-grow:1 y
   width calculado a 0). Aca cada pieza vuelve a medir su contenido. */
.e-con.mtq-caso-meta > .elementor-element{
  width:auto!important;max-width:100%;flex:0 1 auto!important;
}
.mtq-caso-meta .datos .elementor-heading-title{
  font-family:Inter,sans-serif;font-size:.875rem;font-weight:400;
  line-height:1.5;color:var(--mtq-dim);
}

.e-con.mtq-chip-permiso{
  display:inline-flex!important;flex-direction:row;align-items:center;
  gap:7px;width:auto;
}
.e-con.mtq-chip-permiso > .elementor-element{width:auto!important;flex:0 0 auto!important}
.mtq-chip-txt .elementor-heading-title{
  font-family:Inter,sans-serif;font-size:.6875rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mtq-dim);line-height:1;
}
/* El candado ya no es SVG pegado: es widget de icono tirando del adjunto 3017.
   El neutralizador de .mtq-icono deja el SVG en auto; la ranura le devuelve
   los 13px que le daba .mtq-chip-permiso svg. */
.mtq-chip-ico .elementor-icon svg{width:13px!important;height:13px!important}

/* --- El problema / Que hicimos ------------------------------------------- */
/* Antes: <dl> con dos pares dt/dd. Ahora: rotulo (heading div) + respuesta
   (text-editor), que es como el resto del sitio resuelve los rotulos. */

.e-con.mtq-caso-txt{display:flex!important;flex-direction:column;gap:0}
.mtq-caso-rot .elementor-heading-title{
  font-family:Inter,sans-serif;font-weight:600;font-size:.75rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mtq-dim);line-height:1.4;
}
.mtq-caso-txt .mtq-caso-val{margin-top:10px;color:var(--mtq-body);line-height:1.7;max-width:46ch}
.mtq-caso-txt .mtq-caso-val p{margin:0}
/* lo que antes era dd + dt */
.mtq-caso-txt .mtq-caso-val + .mtq-caso-rot{margin-top:26px}

/* --- La cifra de la placa ------------------------------------------------ */
/* Antes: <span class="mtq-cifra-hueco"> con dos spans. Ahora: container con la
   cifra en encabezado y la explicacion en text-editor. El borde punteado, el
   radio, el fondo y el padding siguen viniendo de .mtq-cifra-hueco. */

.e-con.mtq-cifra-hueco{display:flex!important;flex-direction:column;align-items:stretch}
.mtq-cifra .elementor-heading-title{
  font-family:Manrope,sans-serif;font-weight:800;
  font-size:clamp(2rem,4.4vw,3.25rem);line-height:.92;letter-spacing:-.05em;
  color:var(--mtq-accent);font-variant-numeric:tabular-nums;
}
.mtq-cifra-hueco .que p{margin:0}

/* --- La rejilla de los demas --------------------------------------------- */
/* .e-con.mtq-rejilla ya esta en display:grid mas arriba en esta hoja, junto a
   .mtq-personas y .mtq-hitos: no se repite. Las celdas si son nuevas. */

.e-con.mtq-celda{
  display:flex!important;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;
}
/* Antes eran <b> y <span> dentro de .mtq-celda.texto; esos dos selectores ya
   no encuentran nada, asi que el estilo se muda a las dos ranuras nuevas. */
.mtq-celda-sector .elementor-heading-title{
  font-family:Inter,sans-serif;font-weight:600;font-size:.9375rem;
  color:var(--mtq-lead);line-height:1.4;
}
.mtq-celda-zona .elementor-heading-title{
  font-family:Inter,sans-serif;font-weight:400;font-size:.75rem;
  color:var(--mtq-dim);line-height:1.4;
}


/* ####################################################################
   Nosotros — post ID 1463 (slug nosotros)
   #################################################################### */
/* ==========================================================================
   NOSOTROS (1463) — conversión de HTML a nativo
   Los cinco bloques pasaron a containers y widgets. Estas reglas reponen solo
   lo que dependía del marcado viejo: los selectores de hijo directo `> li`,
   los <b> y los <span> que ahora son headings, y el line-height:1 que
   Elementor impone sobre .elementor-heading-title.
   ========================================================================== */

/* --- Ficha de foto del hero --------------------------------------------- */
/* Era un widget; ahora es container, así que .e-con le disputa ancho y caja. */
.e-con.mtq-hero-ficha{
  grid-column:2;align-self:end;width:min(23rem,34vw);
  padding:20px 22px!important;
}
@media (max-width:860px){
  .e-con.mtq-hero-ficha{grid-column:1;width:auto;margin-top:28px}
}
/* El rótulo con ícono era un <p> en fila: el container nace en columna. */
.e-con.mtq-microlabel{
  display:flex!important;flex-direction:row;align-items:center;justify-content:flex-start;
}
/* body .mtq-microlabel .elementor-heading-title fija dim; acá manda el acento. */
.mtq-hero-ficha .mtq-microlabel .elementor-heading-title{
  color:var(--mtq-accent);line-height:1.35;
}
.mtq-ficha-ico .elementor-icon svg{width:15px!important;height:14px!important}

/* --- Tarjetas de persona ------------------------------------------------- */
.mtq-persona h3.elementor-heading-title{
  font-family:Manrope,sans-serif;font-size:1.125rem;font-weight:600;
  letter-spacing:-.018em;color:#fff;line-height:1.3;
}

/* --- Línea de tiempo ----------------------------------------------------- */
/* El año era <span class="anio">; como heading hereda line-height:1. */
.mtq-hitos .anio .elementor-heading-title{
  font-family:Manrope,sans-serif;font-weight:800;font-size:1.25rem;
  letter-spacing:-.03em;color:var(--mtq-lead);line-height:1.25;
  font-variant-numeric:tabular-nums;
}
.mtq-hitos .hito.hoy .anio .elementor-heading-title{color:var(--mtq-accent)}
@media (max-width:860px){ .e-con.mtq-hitos{gap:32px 24px} }

/* --- Tabla de consolidación ---------------------------------------------- */
.e-con.mtq-tabla{gap:0 clamp(16px,2vw,26px)}
/* La primera celda quedó vacía: es container, no widget, y .e-con le pone caja. */
.e-con.mtq-tabla > .e-con.th{padding:22px 0 16px}
.mtq-tabla .th h3.elementor-heading-title{
  font-family:Manrope,sans-serif;font-size:1.0625rem;font-weight:600;
  letter-spacing:-.018em;color:#fff;line-height:1.3;
}
.mtq-tabla .criterio .elementor-heading-title{
  font-family:Inter,sans-serif;font-size:.9375rem;font-weight:400;
  line-height:1.5;color:var(--mtq-dim);
}
.mtq-tabla .tres .elementor-heading-title{
  font-family:Inter,sans-serif;font-size:.9375rem;font-weight:400;
  line-height:1.6;color:var(--mtq-lead);
}
.mtq-tabla .mtq .elementor-heading-title{
  font-family:Inter,sans-serif;font-size:.9375rem;font-weight:500;
  line-height:1.6;color:#fff;
}

/* --- Los cinco pasos ------------------------------------------------------ */
/* Eran <li>: los selectores de hijo directo se reescriben a `> *`. */
.e-con.mtq-proceso > *{padding:30px 24px 30px 0;border-right:1px solid var(--mtq-line)}
.e-con.mtq-proceso > *:not(:first-child){padding-left:24px}
.e-con.mtq-proceso > *:last-child{border-right:0;padding-right:0}
.mtq-proceso .e-con.n{
  display:flex!important;flex-direction:row;align-items:center;justify-content:flex-start;
}
.mtq-proceso-ico .elementor-icon svg{width:20px!important;height:20px!important}
/* Era <b>01</b> dentro del rótulo. */
.mtq-proceso-num .elementor-heading-title{
  font-family:Manrope,sans-serif;font-weight:800;font-size:.8125rem;
  letter-spacing:.06em;line-height:1.2;color:var(--mtq-accent);
  font-variant-numeric:tabular-nums;
}
.mtq-proceso h3.elementor-heading-title{
  margin-top:16px;font-family:Manrope,sans-serif;font-size:1.0625rem;
  font-weight:600;letter-spacing:-.018em;color:#fff;line-height:1.3;
}
@media (max-width:1080px){
  .e-con.mtq-proceso > *,
  .e-con.mtq-proceso > *:not(:first-child),
  .e-con.mtq-proceso > *:last-child{
    border-right:0;border-bottom:1px solid var(--mtq-line);padding:26px 0;
  }
}


/* ####################################################################
   Desarrollo Web — post ID 3000 (slug desarrollo-web)
   #################################################################### */
/* ==========================================================================
   DESARROLLO WEB (3000) · lo que dejo de ser widget HTML
   Miniaturas de proyecto: container nativo + dos encabezados 'div'.
   FAQ: widget nativo toggle en lugar de <details>/<summary>.
   ========================================================================== */

/* --- Miniaturas antes/despues -------------------------------------------
   .mtq-ba-thumb ahora es un .e-con, asi que hay que ganarle a las variables
   de Elementor (border-radius, min-height, justify-content), que se declaran
   con un solo nivel de clase. El borde punteado, el fondo, el display flex y
   la direccion columna del bloque .mtq-ba-thumb ya existente siguen valiendo;
   el padding (18px) y el gap (12px) van en los ajustes del container. ----- */
.e-con.mtq-ba-thumb{
  border-radius:14px;
  min-height:104px;
  justify-content:space-between;
}
.mtq-ba-thumb-t .elementor-heading-title{
  font-family:Inter,sans-serif;font-weight:600;font-size:.9375rem;
  line-height:1.5;color:var(--mtq-lead);
}
.mtq-ba-thumb-s .elementor-heading-title{
  font-family:Inter,sans-serif;font-weight:600;font-size:.6875rem;
  line-height:1.5;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mtq-accent);
}

/* --- FAQ: el toggle nativo con el aspecto del bloque .mtq-faq -------------
   Todas las reglas van prefijadas con .mtq-faq para ganarle por especificidad
   a widget-toggle.css sin depender del orden de carga de las hojas.
   El widget se guardo sin icono, asi que no entra Font Awesome: el chevron es
   el mismo ::after de siempre y rota con .elementor-active.
   .mtq-faq (max-width:860px) y .mtq-faq-r (padding y color de la respuesta)
   ya estan en el sistema de diseno y se siguen aplicando tal cual. --------- */
.mtq-faq .elementor-toggle .elementor-toggle-item{border-top:1px solid var(--mtq-line)}
.mtq-faq .elementor-toggle .elementor-toggle-item:last-child{border-bottom:1px solid var(--mtq-line)}
.mtq-faq .elementor-toggle .elementor-tab-title{
  position:relative;margin:0;padding:26px 48px 26px 0;
  border:0;background:none;cursor:pointer;line-height:1.5;font-weight:600;
}
.mtq-faq .elementor-toggle .elementor-toggle-title{
  font-family:Manrope,sans-serif;font-weight:600;
  font-size:clamp(1.0625rem,1.7vw,1.25rem);
  letter-spacing:-.018em;color:var(--mtq-heading);text-decoration:none;
  transition:color .2s var(--mtq-ease);
}
.mtq-faq .elementor-toggle .elementor-tab-title:hover .elementor-toggle-title{color:var(--mtq-accent)}
.mtq-faq .elementor-toggle .elementor-toggle-title:focus-visible{
  outline:2px solid var(--mtq-accent);outline-offset:3px;
}
.mtq-faq .elementor-toggle .elementor-tab-title::after{
  content:"";position:absolute;right:6px;top:50%;
  width:13px;height:13px;margin-top:-7px;
  border-right:1.75px solid var(--mtq-accent);
  border-bottom:1.75px solid var(--mtq-accent);
  transform:rotate(45deg) translateY(-3px);
  transition:transform .3s var(--mtq-ease);
}
.mtq-faq .elementor-toggle .elementor-tab-title.elementor-active::after{
  transform:rotate(225deg) translateY(-3px);
}
.mtq-faq .elementor-toggle .elementor-tab-content{padding:0;border:0;background:none}

@media (max-width:620px){
  .mtq-faq .elementor-toggle .elementor-tab-title{padding-right:40px}
}


/* ####################################################################
   MTQ Cloud — post ID 3001 (slug mtq-cloud)
   #################################################################### */
/* ==========================================================================
   MTQ CLOUD (post 3001) · CSS de la conversión a nativo
   ========================================================================== */

/* --- Panel de datos públicos: de <dl> a containers ----------------------- */
/* Antes: dl.mtq-panel-datos.mtq-panel-grid > div.mtq-dato.mtq-glass
          > dt.mtq-microlabel + dd > span.mtq-pendiente (b + small) | span.mtq-valor
   Ahora: container de rejilla > container de celda > heading + marcador.
   El marcador reusa tal cual el bloque .e-con.mtq-pendiente que ya está en la
   hoja (mtq-pendiente-dato / mtq-pendiente-nota), incluidas sus reglas
   .mtq-dato .e-con.mtq-pendiente y .mtq-dato .mtq-pendiente-dato ... */

.e-con.mtq-panel-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  /* El titulo pegaba a las celdas: aire entre el H2 y la rejilla (2026-08-27). */
  margin-top:clamp(36px,4vw,52px)!important;
}
.e-con.mtq-dato{
  border-radius:22px;
  min-height:186px;
  padding:26px 26px 28px!important;
}
/* El valor se apoya en el borde inferior, como hacía dd{margin:auto 0 0} */
.e-con.mtq-dato > .e-con.mtq-pendiente,
.e-con.mtq-dato > .mtq-valor{margin-top:auto}

.mtq-valor .elementor-heading-title{
  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:1080px){
  .e-con.mtq-panel-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:620px){
  .e-con.mtq-panel-grid{
    grid-template-columns:minmax(0,1fr)!important;
    row-gap:14px!important;column-gap:14px!important;
  }
  .e-con.mtq-dato{min-height:0;padding:22px!important}
}

/* --- Preguntas frecuentes: acordeón nativo ------------------------------- */
/* El widget nested-accordion dibuja <details>/<summary>, la misma estructura
   del prototipo, así que las reglas .mtq-faq de mtq-design-system.css siguen
   sirviendo —incluida la flecha de .mtq-faq summary::after y su giro en
   details[open]—. Solo hay que apagar el borde, el relleno y el color que
   el widget trae por defecto (--n-accordion-*). El wrapper del widget es
   .elementor-widget-n-accordion, no .elementor-widget-nested-accordion. */

.elementor-widget-n-accordion.mtq-faq{
  --n-accordion-padding:0px;
  --n-accordion-border-width:0px;
  --n-accordion-border-style:none;
  --n-accordion-border-color:transparent;
  --n-accordion-border-radius:0px;
  --n-accordion-icon-gap:0px;
  --n-accordion-title-normal-color:#fff;
  --n-accordion-title-hover-color:var(--mtq-accent);
  --n-accordion-title-active-color:#fff;
  max-width:860px;
}
.elementor-widget-n-accordion.mtq-faq .e-n-accordion-item-title{
  position:relative;border:0;
  padding:26px 48px 26px 0;
  transition:color .2s var(--mtq-ease);
}
.elementor-widget-n-accordion.mtq-faq .e-n-accordion-item-title:hover{
  color:var(--mtq-accent);
}
/* El tamaño del título vive en --n-accordion-title-font-size, que Elementor
   fija a 1rem en el CSS del post: hay que ganarle sobre la propiedad. */
.elementor-widget-n-accordion.mtq-faq .e-n-accordion-item-title-text{
  display:block;
  font-family:Manrope,sans-serif;font-weight:600;
  font-size:clamp(1.0625rem,1.7vw,1.25rem);
  letter-spacing:-.018em;
}
.elementor-widget-n-accordion.mtq-faq .e-n-accordion-item > .e-con{border:0}
.mtq-faq .mtq-faq-r p{margin:0}
@media (max-width:620px){
  .elementor-widget-n-accordion.mtq-faq .e-n-accordion-item-title{padding-right:40px}
}


/* ####################################################################
   Infraestructura TI — post ID 3003 (slug infraestructura-ti)
   #################################################################### */
/* ==========================================================================
   INFRAESTRUCTURA TI — lo que paso de HTML a nativo
   Ficha del hero, zonas de cobertura, galeria de obra y verticales.
   En HTML se quedan solo el mapa dibujado a mano y el velo del hero.
   ========================================================================== */

/* El marco del marcador de foto es ahora un container vacio: reusa el
   .mtq-foto-marco de la hoja. Elementor le pone width:100%, que rompe el
   posicionamiento por inset y lo desborda 15px a la derecha. */
.e-con.mtq-foto-marco{width:auto}

/* La caja del marcador: Elementor pinta flex sin justificar. Se acota a la
   galeria y a los verticales para no tocar el hero, que es rejilla. */
.mtq-galeria > .e-con.mtq-foto,
.mtq-vert > .e-con.mtq-foto{
  display:flex!important;flex-direction:column;justify-content:flex-end;
}

/* El microrrotulo con camara es un container en fila: icono + rotulo. */
.e-con.mtq-microlabel{flex-direction:row;align-items:center;gap:8px}

/* El rotulo iba en azul dentro de la ficha. El encabezado nativo hereda el
   gris de body .mtq-microlabel .elementor-heading-title y hay que devolverle
   el acento en las tres ranuras donde el prototipo lo pinta azul. */
.mtq-hero-ficha .mtq-microlabel .elementor-heading-title,
.mtq-foto-ficha .mtq-microlabel .elementor-heading-title,
.mtq-vert .mtq-microlabel .elementor-heading-title{color:var(--mtq-accent)}

/* La camara, al tamano del prototipo (convencion de "Tamanos por ranura") */
.mtq-foto-ico .elementor-icon svg{width:15px!important;height:14px!important}

/* El dato pendiente de cobertura se encoge, no se estira a lo ancho */
.mtq-zonas .e-con.resp{align-items:flex-start}

/* --- La nota del hero de Desarrollo Web, ya en nativo ------------------- */
/* Antes: widget HTML con svg + span. Ahora: container en fila con widget de
   icono y encabezado. La regla vieja .mtq-hero-nota svg deja de aplicar. */
.e-con.mtq-hero-nota{
  display:flex!important;flex-direction:row;align-items:center;
  gap:9px;margin-top:18px;width:100%;
  padding-right:clamp(24px,8vw,150px)!important;
}
.e-con.mtq-hero-nota > .elementor-element{
  width:auto!important;flex:0 1 auto!important;margin-block-end:0;
}
.mtq-hero-nota-ico{color:var(--mtq-accent);flex:none!important}
.mtq-hero-nota-txt .elementor-heading-title{
  font-family:Inter,sans-serif;font-size:.75rem;font-weight:500;
  color:var(--mtq-dim);line-height:1.5;
}

/* ==========================================================================
   CORRECCIONES DE LA AUDITORÍA POST-CONVERSIÓN
   Van al final a propósito: cierran por orden de cascada los conflictos que
   la conversión a nativo destapó. Cada bloque dice qué defecto arregla.
   ========================================================================== */

/* --- 1. El espaciado fantasma de 20px ----------------------------------- */
/* Elementor da margin-block-end:var(--kit-widget-spacing,20px) a todo widget
   que no sea el último de su caja. Con un widget HTML por bloque eso no se
   notaba; ahora que cada bloque son varios widgets, los 20px se cuelan entre
   pieza y pieza y rompen la tabla de Nosotros, las tarjetas de persona, la
   línea de tiempo, los pasos y los marcadores.
   En nuestros containers anidados el ritmo lo pone el gap, no ese margen. */
.e-con.e-child[class*="mtq-"]{--kit-widget-spacing:0px}

/* --- 2. El color de los encabezados ------------------------------------- */
/* mtq-design-system.css declara «body .elementor-widget-heading
   .elementor-heading-title{color:var(--mtq-heading)}» con especificidad 0-2-1.
   Las ranuras nuevas usaban 0-2-0 y perdían, así que textos que debían ir en
   dim o lead salían en blanco. Se les devuelve el peso con el prefijo body. */
body .mtq-hero-nota-txt .elementor-heading-title,
body .mtq-foto-ficha .elementor-heading-title,
body .mtq-hero-ficha .elementor-heading-title,
body .mtq-caso-rot .elementor-heading-title,
body .mtq-chip-txt .elementor-heading-title,
body .mtq-celda-zona .elementor-heading-title,
body .mtq-autor-cargo .elementor-heading-title,
body .mtq-pendiente-nota .elementor-heading-title,
body .mtq-stat-et .elementor-heading-title{color:var(--mtq-dim)}

body .mtq-pendiente-dato .elementor-heading-title,
body .mtq-celda-sector .elementor-heading-title,
body .mtq-area-rol .elementor-heading-title,
body .mtq-caso-val .elementor-heading-title{color:var(--mtq-lead)}

body .mtq-card-go .elementor-heading-title,
body .mtq-autor-nota .elementor-heading-title,
body .mtq-persona-nota .elementor-heading-title{color:var(--mtq-accent)}

body .mtq-logo-slot .elementor-heading-title{color:var(--mtq-dim)}

/* --- 3. El marcador pendiente del hero de la Home ----------------------- */
/* Antes tenía un override propio (.mtq-stat .mtq-pendiente b: Manrope 800,
   1rem). Al convertirlo a container el override quedó sin sujeto y el dato
   bajó a Inter 600 .9375rem. Se le devuelve su tipografía. */
body .mtq-stat .mtq-pendiente-dato .elementor-heading-title{
  font-family:Manrope,sans-serif;font-weight:800;font-size:1rem;letter-spacing:-.02em;
}

/* --- 4. La etiqueta del selector de necesidad --------------------------- */
/* «.mtq-form .elementor-field-type-radio label» (0-2-1) le ganaba a
   «.mtq-form .elementor-field-label» (0-2-0) y pintaba como chip el rótulo
   del grupo, no solo las opciones. La regla ancha se anula: los chips los
   estiliza la regla larga de CORRECCION 1, que apunta a .elementor-field-option. */
.mtq-form .elementor-field-type-radio > label.elementor-field-label,
.mtq-form .elementor-field-type-radio > .elementor-field-label{
  display:block!important;min-height:0!important;padding:0!important;
  border:0!important;border-radius:0!important;background:none!important;
  font-family:Inter,sans-serif!important;font-size:.8125rem!important;font-weight:600!important;
  color:var(--mtq-lead)!important;letter-spacing:.01em!important;line-height:1.3!important;
  text-align:left!important;cursor:default!important;
}

/* --- 5. El asterisco de campo obligatorio ------------------------------- */
/* Elementor lo pinta en rojo puro, que no está en la paleta y no tiene
   contraste verificado sobre el fondo oscuro. Va en acento. */
.mtq-form .elementor-mark-required .elementor-field-label:after{
  color:var(--mtq-accent);
}

/* --- 6. Los íconos de «Qué hacemos» ------------------------------------- */
/* El prototipo los pide a 24px; la regla genérica de icon-box los subía a 26. */
.mtq-hace .elementor-icon svg{width:24px!important;height:24px!important}

/* --- 7. La nota del hero de Desarrollo Web ------------------------------ */
/* .mtq-devices svg{width:100%} estaba escrita para el mockup y alcanzaba
   también al ícono de la nota, que vive dentro. Se acota al mockup. */
.mtq-devices .mtq-hero-nota .elementor-icon svg{width:15px!important;height:auto!important}

/* --- 8. El honeypot, esta vez apuntando a lo que Elementor emite -------- */
/* Elementor NO envuelve este campo en .elementor-field-group ni le pone la
   clase del id: sale como <div class="elementor-field-type-text"> con el
   input llevando display:none en línea. La regla vieja
   .mtq-form .elementor-field-group-hp nunca encontró nada.
   Se apunta al envoltorio por su hijo, y se saca de la rejilla para que no
   ocupe una celda vacía. */
.mtq-form .elementor-form-fields-wrapper > div:has(> #form-field-hp){
  position:absolute!important;left:-9999px!important;
  width:1px!important;height:1px!important;overflow:hidden!important;
  padding:0!important;margin:0!important;
}
/* Respaldo para navegadores sin :has() — el campo en sí sigue fuera de vista. */
.mtq-form #form-field-hp{
  position:absolute!important;left:-9999px!important;
  width:1px!important;height:1px!important;
}

/* ==========================================================================
   LAS CUATRO AREAS + PRODUCTO PROPIO  (agregado 2026-08-26)
   Home 5b y 5c, Software 4b. Prototipos: prototipo/home-areas.html y
   prototipo/software-a-la-medida-productos.html
   ========================================================================== */

/* Atmosfera de las dos secciones nuevas */
.mtq-atm-areas::before{
  width:1240px;height:660px;top:-220px;left:50%;margin-left:-620px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(44,91,232,.30), rgba(44,91,232,0) 70%);
}
.mtq-atm-areas::after{
  width:760px;height:520px;bottom:-78px;right:-160px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(26,56,168,.36), rgba(26,56,168,0) 70%);
}
.mtq-atm-propio::before{
  width:900px;height:580px;top:-140px;left:-200px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(44,91,232,.24), rgba(44,91,232,0) 70%);
}

/* --- Home 5b: panel de areas 2x2 ---------------------------------------- */
.e-con.mtq-areas-panel{
  border-radius:26px;padding:0!important;
  display:grid!important;grid-template-columns:repeat(2,1fr)!important;
}
.e-con.mtq-area{
  position:relative;overflow:hidden;
  display:flex!important;flex-direction:row!important;align-items:flex-start;
  gap:24px;padding:38px 34px 34px!important;
}
/* La division de los cuatro cuadrantes tiene que leerse: --mtq-line (.085)
   desaparecia contra el resplandor de cada celda. */
.mtq-area:nth-child(even){border-left:1px solid rgba(255,255,255,.20)}
.mtq-area:nth-child(n+3){border-top:1px solid rgba(255,255,255,.20)}
.mtq-area > *{position:relative;z-index:2}
.mtq-area::after{content:'';position:absolute;inset:0;z-index:0;opacity:.6;
  pointer-events:none;transition:opacity .4s var(--mtq-ease)}
.mtq-area:nth-child(1)::after{background:radial-gradient(96% 84% at 10% 100%,rgba(62,110,255,.44),transparent 72%)}
.mtq-area:nth-child(2)::after{background:radial-gradient(96% 84% at 10% 100%,rgba(32,60,190,.46),transparent 72%)}
.mtq-area:nth-child(3)::after{background:radial-gradient(96% 84% at 10% 100%,rgba(24,142,206,.40),transparent 72%)}
.mtq-area:nth-child(4)::after{background:radial-gradient(96% 84% at 10% 100%,rgba(200,76,156,.30),transparent 72%)}
.mtq-area:hover::after{opacity:1}

.mtq-area-ico{width:52px;height:52px;border-radius:14px;flex:0 0 auto;
  display:flex!important;align-items:center;justify-content:center;color:var(--mtq-accent)}
/* Icono nativo: .mtq-icono pone display:contents en el envoltorio, asi que la placa
   de vidrio centra directamente al .elementor-icon. No tocar el envoltorio aca. */
.mtq-area-ico .elementor-icon svg{width:24px!important;height:24px!important}

.e-con.mtq-area-cuerpo{
  display:flex!important;flex-direction:column!important;
  flex:1 1 auto;min-width:0;padding:0!important;
}
.mtq-area-tit .elementor-heading-title{
  font-family:Manrope,sans-serif;font-size:1.75rem;font-weight:800;
  letter-spacing:-.035em;line-height:1.06;color:var(--mtq-heading);
}
/* La marca cede el paso al nombre del area: MTQ en gris, el nombre en blanco. */
.mtq-area-tit .mtq-marca{color:var(--mtq-accent);font-weight:700}
/* Sin el rotulo ÁREA nn, el titulo es el primer elemento del cuerpo. */
.e-con.mtq-area-cuerpo > .elementor-widget:first-child{margin-top:0}
/* El marcador de hardware subio un nivel al quitarse el bloque De aqui sale. */
.e-con.mtq-area-cuerpo > .e-con.mtq-pendiente{margin-top:18px;align-self:flex-start}
/* El subtitulo pasa a gris: con MTQ en azul, dos azules seguidos compiten. */
.mtq-area-rol .elementor-heading-title{
  font-family:Inter,sans-serif;font-size:.8125rem;font-weight:600;
  color:var(--mtq-lead);line-height:1.45;
}
.mtq-area-txt p,.mtq-area-txt{color:var(--mtq-lead);font-size:.9375rem;line-height:1.62;max-width:46ch}
@media (max-width:860px){
  .e-con.mtq-areas-panel{grid-template-columns:1fr!important}
  .mtq-area:nth-child(even){border-left:0}
  .mtq-area + .mtq-area{border-top:1px solid rgba(255,255,255,.20)}
}
@media (max-width:620px){
  .e-con.mtq-area{flex-direction:column!important;gap:20px;padding:30px 24px 28px!important}
  .mtq-area-tit .elementor-heading-title{font-size:1.5rem}
}

/* --- Home 5c: producto propio ------------------------------------------- */
.e-con.mtq-propio-grid{
  display:grid!important;align-items:center!important;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;
}
@media (max-width:1080px){.e-con.mtq-propio-grid{grid-template-columns:minmax(0,1fr)!important}}
.e-con.mtq-propio-lista{display:flex!important;flex-direction:column!important;gap:16px;padding:0!important}
.e-con.mtq-pieza{
  position:relative;overflow:hidden;border-radius:20px;
  display:flex!important;flex-direction:row!important;align-items:flex-start;
  gap:20px;padding:26px 28px!important;
}
.mtq-pieza > *{position:relative;z-index:2}
.mtq-pieza::after{content:'';position:absolute;inset:0;z-index:0;opacity:.6;
  pointer-events:none;transition:opacity .4s var(--mtq-ease)}
.mtq-pieza:nth-child(1)::after{background:radial-gradient(90% 130% at 6% 100%,rgba(32,60,190,.44),transparent 72%)}
.mtq-pieza:nth-child(2)::after{background:radial-gradient(90% 130% at 6% 100%,rgba(24,142,206,.34),transparent 72%)}
.mtq-pieza:hover::after{opacity:1}
.mtq-pieza-ico{width:48px;height:48px;border-radius:14px;flex:0 0 auto;
  display:flex!important;align-items:center;justify-content:center;color:var(--mtq-accent)}
.mtq-pieza-ico .elementor-icon svg{width:24px!important;height:24px!important}
.e-con.mtq-pieza-cuerpo{display:flex!important;flex-direction:column!important;
  flex:1 1 auto;min-width:0;padding:0!important}
.e-con.mtq-pieza-top{display:flex!important;flex-direction:row!important;align-items:center;
  gap:12px;flex-wrap:wrap;padding:0!important}
.mtq-pieza-top > .elementor-widget{width:auto!important;flex:0 0 auto}
.mtq-pieza-tit .elementor-heading-title{
  font-family:Manrope,sans-serif;font-size:1.25rem;font-weight:800;
  letter-spacing:-.028em;line-height:1.1;color:var(--mtq-heading);
}
.mtq-pieza-estado .elementor-heading-title{
  display:inline-block;font-family:Inter,sans-serif;font-size:.6875rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  padding:6px 13px;border-radius:99px;color:#FFFFFF;background:var(--mtq-accent-solid);
}
.mtq-pieza-txt p,.mtq-pieza-txt{color:var(--mtq-lead);font-size:.9375rem;line-height:1.62;margin-top:12px}
@media (max-width:620px){
  .e-con.mtq-pieza{flex-direction:column!important;gap:18px;padding:24px!important}
}

/* --- Software 4b: producto propio --------------------------------------- */
.mtq-prod-nota p,.mtq-prod-nota{
  color:var(--mtq-body);font-size:1.0625rem;line-height:1.7;max-width:60ch;
  padding-left:18px;border-left:2px solid var(--mtq-accent);
}
.e-con.mtq-prod-grid{display:grid!important;grid-template-columns:repeat(2,1fr)!important}
@media (max-width:860px){.e-con.mtq-prod-grid{grid-template-columns:1fr!important}}
.e-con.mtq-prod{border-radius:20px;padding:30px 28px 28px!important;
  display:flex!important;flex-direction:column!important;gap:18px}
.e-con.mtq-prod-ficha{margin-top:auto;padding:18px 0 0 0!important;
  border-top:1px solid var(--mtq-line);
  display:flex!important;flex-direction:column!important;gap:9px}
.mtq-prod-ficha ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.mtq-prod-ficha li{font-size:.75rem;letter-spacing:.02em;color:var(--mtq-lead);
  padding:5px 11px;border-radius:99px;border:1px solid var(--mtq-line-mid)}
/* La marca pesa mas en la pagina de Software que en la tarjeta de la Home. */
.mtq-prod .mtq-pieza-tit .elementor-heading-title{font-size:1.5rem;letter-spacing:-.03em}
.mtq-prod .mtq-pieza-txt p,.mtq-prod .mtq-pieza-txt{margin-top:0}

/* --- CORRECCION: ancho del icono dentro del container -------------------
   Elementor le da a los widgets hijos de un container
   width:var(--container-widget-width,100%), que gana contra una regla de una
   sola clase. Sin esto la placa del icono se estira a todo el ancho y la celda
   se dispara de alto. */
.e-con.mtq-area > .mtq-area-ico{width:52px!important;height:52px!important;flex:0 0 auto!important}
.e-con.mtq-pieza > .mtq-pieza-ico{width:48px!important;height:48px!important;flex:0 0 auto!important}
.e-con.mtq-area > .mtq-area-cuerpo{flex:1 1 auto!important;min-width:0}
.e-con.mtq-pieza > .mtq-pieza-cuerpo{flex:1 1 auto!important;min-width:0}
@media (max-width:620px){
  .e-con.mtq-area > .mtq-area-cuerpo,
  .e-con.mtq-pieza > .mtq-pieza-cuerpo{width:100%!important}
}

/* ==========================================================================
   ATMOSFERA - marcador del editor
   El widget de atmosfera es position:absolute con z-index:-1, asi que no tiene
   altura propia y Elementor le dibuja una barra de marcador para poder
   seleccionarlo. En el sitio publicado esa barra no existe. Se oculta SOLO
   dentro del editor: se sigue seleccionando desde el Navigator.
   ========================================================================== */
body.elementor-editor-active .mtq-atm-widget,
body.elementor-editor-active .mtq-atm-widget > .elementor-widget-container{
  min-height:0!important;background:none!important;border:0!important;box-shadow:none!important;
}
body.elementor-editor-active .mtq-atm-widget::before,
body.elementor-editor-active .mtq-atm-widget::after,
body.elementor-editor-active .mtq-atm-widget .elementor-widget-empty-icon,
body.elementor-editor-active .mtq-atm-widget .eicon-code{
  content:none!important;display:none!important;
}


/* ==========================================================================
   CARRUSEL DE RESENAS  (Home, seccion 7)  — 2026-08-27
   nested-carousel de PRO Elements. Se eligio ese y no testimonial-carousel
   porque no impone maqueta: cada diapositiva conserva la del testimonio
   aprobado. SIN autoplay — la regla del proyecto prohibe carruseles
   automaticos, asi que solo avanza con flecha o punto.
   ========================================================================== */
.e-con.mtq-resena{padding:0!important;gap:0!important;text-align:left}
.mtq-resenas .elementor-swiper-button{color:var(--mtq-accent)}
.mtq-resenas .elementor-swiper-button svg{fill:currentColor;width:26px;height:26px}
.mtq-resenas .swiper-pagination-bullet{background:rgba(255,255,255,.28);opacity:1;width:8px;height:8px}
.mtq-resenas .swiper-pagination-bullet-active{background:var(--mtq-accent)}
.mtq-resenas .e-con.mtq-pendiente{margin-top:22px}

/* El chip de antiguedad se lee distinto de los de entrega: los neutros dicen
   que se hizo, este dice desde cuando. */
.mtq-caso-desde .elementor-heading-title{color:var(--mtq-accent)!important;border-color:rgba(111,156,245,.42)}

/* --- Franja de logos de clientes (Home) -------------------------------- */
/* Los logos son PNG blancos sobre transparencia. Se normalizan por caja, no
   solo por alto: hay marcas apaisadas y una vertical (Muebles del Sur), y
   ajustar solo el alto las deja de anchos disparejos. */
.mtq-logo{flex:0 0 auto}
.mtq-logo .elementor-widget-container{
  height:76px;min-width:120px;display:flex;align-items:center;justify-content:center;
}
.mtq-logo img{
  max-height:68px;max-width:150px;width:auto;height:auto;object-fit:contain;
  opacity:.82;transition:opacity .3s var(--mtq-ease);
}
.mtq-logo:hover img{opacity:1}

/* ==========================================================================
   CUANDO NECESITAS SOFTWARE A LA MEDIDA  (Software, seccion 3) — 2026-08-27
   Reemplaza a la seccion de Hacienda, retirada porque MTQ no presta hoy ese
   servicio. Tratamiento quieto a proposito: la pagina ya tiene cuatro
   tarjetas de vidrio en "Que mas construimos" y dos en "Producto propio".
   ========================================================================== */
.e-con.mtq-cuando-lista{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0 clamp(32px,4vw,64px);margin-top:48px;padding:0!important;
}
.e-con.mtq-cuando-item{
  position:relative;padding:26px 0 24px!important;border-top:1px solid var(--mtq-line);
}
.mtq-cuando-item::before{
  content:"";position:absolute;top:-1px;left:0;width:30px;height:1px;background:var(--mtq-accent);
}
.mtq-cuando-tit .elementor-heading-title{
  font-family:Manrope,sans-serif;font-size:1.0625rem;font-weight:600;
  line-height:1.35;letter-spacing:-.015em;color:var(--mtq-heading);
}
.mtq-cuando-txt p,.mtq-cuando-txt{margin-top:8px;color:var(--mtq-lead);font-size:.9375rem;line-height:1.6}
/* El reverso honesto: mismo recurso que la nota de Producto propio. */
.mtq-cuando-no{
  margin-top:clamp(40px,5vw,56px);padding-left:18px;border-left:2px solid var(--mtq-accent);
  color:var(--mtq-body);font-size:1.0625rem;line-height:1.7;max-width:64ch;
}
.mtq-cuando-no b{color:var(--mtq-heading);font-weight:600}
@media (max-width:860px){.e-con.mtq-cuando-lista{grid-template-columns:minmax(0,1fr)!important}}

/* --- Casos: la placa pasa de una cifra grande a lo entregado (2026-08-27) --- */
.e-con.mtq-placa-chips{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:8px;margin-top:16px;padding:0!important}
.mtq-placa .mtq-caso-chip .elementor-heading-title{
  display:inline-block;font-family:Inter,sans-serif;font-size:.75rem!important;font-weight:500!important;
  letter-spacing:.02em;color:var(--mtq-lead)!important;
  padding:6px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.16);
}

/* --- Ilustracion de nube (MTQ Cloud, "Por que MTQ Cloud") 2026-08-27 -----
   La columna del titulo quedaba con ~200px de aire muerto debajo. La nube la
   equilibra sin competir con el diagrama del rack del hero: es quieta, sin
   movimiento, porque el momento autoral de esta pagina son los pulsos del rack. */
.mtq-nube-ilu{margin-top:clamp(28px,4vw,44px);color:var(--mtq-accent)}
.mtq-nube-ilu .elementor-icon{justify-content:flex-start}
.mtq-nube-ilu .elementor-icon svg{
  width:clamp(150px,16vw,214px)!important;height:auto!important;
  opacity:.55;filter:drop-shadow(0 0 34px rgba(111,156,245,.32));
}
@media (max-width:1080px){.mtq-nube-ilu{display:none}}/* --- Ilustracion de nube (MTQ Cloud) 2026-08-27 --------------------------
   Va como SVG dibujado a mano, no como icono: necesita degradados de vidrio y
   resplandor, que un widget Icon con currentColor no puede dar. Es la misma
   excepcion del nucleo MTQ, el rack y el mapa de cobertura. Quieta a proposito:
   el momento de movimiento de esta pagina son los pulsos del rack del hero. */
.mtq-nube-svg{margin-top:clamp(20px,3vw,34px)}
.mtq-nube-svg svg{width:clamp(300px,38vw,470px);height:auto;display:block}
/* Con la nube, la columna del titulo pasa a ser la alta. El texto de la derecha
   se centra contra ella en vez de quedar pegado arriba. */
.e-con.mtq-2col-igual > .e-con-inner{align-items:center!important}
@media (max-width:1080px){.mtq-nube-svg{display:none}}


/* Ilustracion de MTQ Cloud: los equipos del cliente, conectados a la nube.
   Direccion pedida por direccion el 2026-08-27 sobre una referencia isometrica.
   Se conserva la composicion -equipos, cables, puntos que viajan, cubos de nodo,
   la nube arriba con sus tres puntos- y se traduce a la paleta de la casa: azul
   y blanco sobre #06070D. La referencia usaba verde y azules brillantes; el
   verde #45C489 existe en este sitio solo en el mapa de cobertura.
   Las reglas por punto (.p1/.p2/.p3) NO son opcionales: sin ellas offset-path
   queda en none y los puntos animan la opacidad sin moverse de sitio. */
@keyframes mtq-nb-fluye{0%{offset-distance:0%;opacity:0}10%{opacity:1}86%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes mtq-nb-late{0%,100%{opacity:.26}45%{opacity:1}}
.mtq-nb-flujo{offset-rotate:0deg;animation:mtq-nb-fluye 4.6s cubic-bezier(.45,0,.55,1) infinite}
.mtq-nb-flujo.p1{offset-path:path("M248 272 L317 232 L317 180 L369 150 L369 124");animation-delay:0s}
.mtq-nb-flujo.p2{offset-path:path("M318 105 L252 143 L252 175 L186 213 L120 175");animation-delay:2.3s}
.mtq-nb-flujo.p3{offset-path:path("M430 250 L430 138");animation-delay:1.2s;animation-duration:3.4s}
.mtq-nb-eco{animation:mtq-nb-late 1.9s ease-in-out infinite}
.mtq-nb-eco.e2{animation-delay:.24s}
.mtq-nb-eco.e3{animation-delay:.48s}
@media (prefers-reduced-motion:reduce){
  .mtq-nb-flujo{animation:none;offset-distance:52%;opacity:.95}
  .mtq-nb-eco{animation:none;opacity:.85}
}
/* La escena pide mas lienzo que la nube sola. */
.mtq-nube-svg svg{width:clamp(320px,42vw,520px)}


/* ==========================================================================
   MTQ CLOUD 2 - "Que resolvemos": cuatro tarjetas de vidrio  (2026-08-27)
   La seccion se reconstruyo con clases nuevas (mtq-r2*) para descartar CSS
   heredado, y sus reglas se perdieron en el camino: las tarjetas salian
   apiladas a todo el ancho y sin relleno. Estas son.
   El contenedor de la rejilla es content_width:full, asi que NO tiene
   .e-con-inner y la rejilla va en el propio .e-con. La variante con inner
   queda escrita por si alguna vez se pasa a boxed.
   ========================================================================== */
.mtq-r2 > .e-con-inner{
  border-top:1px solid var(--mtq-line);
  padding-top:clamp(48px,6vw,76px);
}
.e-con.mtq-r2-grid,
.e-con.mtq-r2-grid > .e-con-inner{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px!important;
  align-items:stretch!important;
  width:100%;padding:0!important;
  margin-top:clamp(30px,3.6vw,48px);
}
/* La tarjeta es el widget icon-box; .mtq-glass ya le pone material y anillo. */
.mtq-r2-card{
  border-radius:20px;
  padding:30px 28px!important;
  min-width:0;
}
.mtq-r2-card > .elementor-widget-container{height:100%}
/* post-3001.css deja el wrapper con gap:0 - hay que devolverle el aire. */
.mtq-r2-card .elementor-icon-box-wrapper{
  display:flex;flex-direction:row;align-items:flex-start;gap:18px!important;
}
.mtq-r2-card .elementor-icon-box-icon{flex:0 0 auto;margin:2px 0 0}
.mtq-r2-card .elementor-icon{color:var(--mtq-accent)}
.mtq-r2-card .elementor-icon svg{width:26px!important;height:26px!important;display:block}
.mtq-r2-card .elementor-icon-box-content{min-width:0}
.mtq-r2-card .elementor-icon-box-title{
  margin:0;font-family:Manrope,sans-serif;font-weight:700;
  font-size:1.1875rem;letter-spacing:-.012em;line-height:1.25;
  color:var(--mtq-heading);
}
.mtq-r2-card .elementor-icon-box-description{
  margin-top:10px;font-family:Inter,sans-serif;
  font-size:.9375rem;line-height:1.65;color:var(--mtq-body);
}
@media (max-width:860px){
  .e-con.mtq-r2-grid,
  .e-con.mtq-r2-grid > .e-con-inner{grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
  .mtq-r2-card{padding:26px 22px!important}
  .mtq-r2-card .elementor-icon-box-title{font-size:1.0625rem}
}


/* --- Soporte TI (antes Infraestructura TI) -------------------------------
   "Que hacemos": OCHO lineas de servicio en una pista de seis.
   2+2+2 arriba (la relacion) · 2+2+2 en medio (la obra) · 3+3 abajo (el resto).
   Ninguna fila queda coja.
   Ademas el container de Elementor mete 10px de padding lateral, y por eso los
   filetes de fila iban de 42 a 1228 mientras el titulo va de 32 a 1238.
   Los filetes izquierdos NO hay que tocarlos: con tres por fila los arranques
   son 1, 4 y 7, y :not(:nth-child(3n+1)) da exactamente {2,3,5,6,8}. */
.e-con.mtq-hace{
  padding-left:0!important;padding-right:0!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
}
.mtq-hace > div:nth-child(-n+6){grid-column:span 2}
.mtq-hace > div:nth-child(n+7){grid-column:span 3}
@media (max-width:1080px){
  .e-con.mtq-hace{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  /* Dos por fila: cuatro filas llenas. El filete izquierdo va en los pares,
     que es lo que la regla de 1080 ya hacia. */
  .mtq-hace > div:nth-child(n){grid-column:span 3}
}
@media (max-width:620px){
  .e-con.mtq-hace{grid-template-columns:minmax(0,1fr)!important}
  .mtq-hace > div:nth-child(n){grid-column:auto!important}
}

/* --- Soporte TI: "Que pasa cuando algo se cae" ---
   OJO: las clases van con prefijo mtq-sop-. .mtq-paso y .mtq-pasos YA EXISTEN
   -.mtq-paso es del componente .mtq-secuencia de Contacto (1466), y .mtq-pasos
   es la lista <ol> de Software (3002)-. Usarlas aqui le metia a Contacto un
   display:flex y un padding que no eran suyos. ----------------------------
   Tres pasos atravesados por una linea: es la que los vuelve una secuencia y
   no tres tarjetas sueltas. Las insignias la tapan con el fondo de la pagina. */
.e-con.mtq-sop-flujo{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  padding:0!important;margin-top:clamp(38px,4.5vw,54px);position:relative;
}
/* El conector que atravesaba los tres pasos se retiro el 2026-08-27: a 18px
   del borde competia con el filete de la seccion y se leian como dos lineas
   paralelas. Los numeros ya ordenan la secuencia sin ayuda. */
.e-con.mtq-sop-paso{
  padding:0 34px 0 0!important;position:relative;
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;
}
.e-con.mtq-sop-paso + .e-con.mtq-sop-paso{padding-left:34px!important}
/* Elementor le da width:var(--container-widget-width,100%) a todo widget hijo:
   hay que apuntar al widget COMO HIJO DIRECTO o la insignia sale a todo ancho. */
.e-con.mtq-sop-paso > .mtq-sop-n{width:37px!important;flex:0 0 auto!important;margin:0!important}
/* El color del numero necesita ganarle al color global de titulos del kit, que
   entra con mas especificidad. Apuntar al widget como hijo directo alcanza. */
.e-con.mtq-sop-paso > .mtq-sop-n .elementor-heading-title{color:var(--mtq-accent)!important}
.mtq-sop-n .elementor-heading-title{
  display:grid;place-items:center;width:37px;height:37px;border-radius:50%;
  background:var(--mtq-bg);border:1px solid var(--mtq-line-mid);color:var(--mtq-accent);
  font-family:Manrope,sans-serif;font-weight:700;font-size:.875rem;line-height:1;
}
.mtq-sop-t .elementor-heading-title{
  font-family:Manrope,sans-serif;font-size:1.0625rem;font-weight:600;
  letter-spacing:-.018em;color:var(--mtq-heading);
}
.e-con.mtq-sop-paso > .mtq-sop-t{margin-top:22px}
.mtq-sop-p p,.mtq-sop-p{margin-top:9px;color:var(--mtq-lead);font-size:.9375rem;line-height:1.6}
@media (max-width:860px){
  .e-con.mtq-sop-flujo{grid-template-columns:minmax(0,1fr)!important;gap:30px}
  .e-con.mtq-sop-paso,.e-con.mtq-sop-paso + .e-con.mtq-sop-paso{padding:0!important}
}

/* --- Galeria de obra (Infraestructura TI): el reset a una columna perdia por
   especificidad  (2026-08-27) ----------------------------------------------
   .mtq-galeria .mtq-foto  (0,2,0)  NO le gana a
   .mtq-galeria .mtq-foto:nth-child(3)  (0,3,0)
   asi que a 375px las fotos 3, 4 y 5 conservaban su span 2 dentro de una
   rejilla de UNA sola columna. Grid creaba columnas implicitas y tres de las
   cinco fotos salian de 54px de ancho. No habia desborde horizontal -por eso
   la verificacion anterior lo dio por bueno-, pero el layout estaba roto justo
   en el ancho por el que llega este mercado.
   :nth-child(n) iguala la especificidad y, al ir despues en la hoja, gana. */
@media (max-width:620px){
  .mtq-galeria{grid-template-columns:minmax(0,1fr)!important}
  .mtq-galeria .mtq-foto:nth-child(n){grid-column:auto!important}
}


/* --- Que hacemos: de rejilla con filetes a tarjetas de vidrio (2026-08-27) --
   Mismo criterio que dirección aplicó en MTQ Cloud: con tarjetas el encuadre
   deja de depender de que dos filetes coincidan, y el vidrio es el material
   del sitio. Se conserva el reparto 2+2+2 / 2+2+2 / 3+3 y su lectura:
   la relación arriba, la obra en medio, el resto abajo. */
.e-con.mtq-hace{border-top:0!important;gap:18px!important}
.mtq-hace > div{
  padding:28px 26px!important;border:0!important;border-radius:20px;
}
.mtq-hace > div:not(:nth-child(3n+1)){padding-left:26px!important;border-left:0!important}
.mtq-hace .elementor-icon-box-wrapper{gap:16px!important}
.mtq-hace .elementor-icon-box-description{margin-top:10px}
@media (max-width:1080px){
  .mtq-hace > div:nth-child(even){padding-left:26px!important;border-left:0!important}
}
@media (max-width:620px){
  .mtq-hace > div,
  .mtq-hace > div:nth-child(even){padding:24px 20px!important;border-left:0!important}
}


/* --- Deslizador antes/despues: el envoltorio de Elementor rompia el anclaje
   (2026-08-28) --------------------------------------------------------------
   Los paneles son position:absolute con inset:0 y deben anclarse a .mtq-ba,
   que es quien tiene el aspect-ratio 1200/675. Pero entre el container y el
   HTML, Elementor mete .elementor-widget-html y .elementor-widget-container,
   y le da position:relative al primero. Los paneles se anclaban a ESE
   envoltorio, que mide 0 de alto porque todos sus hijos son absolutos.
   Consecuencia: paneles de alto 0, los dos SVG invisibles -el marco se veia
   vacio- y la manija circular a -21px, cortada por arriba.
   En el prototipo no ocurre porque alli .mtq-ba contiene los paneles
   directamente, sin envoltorios de por medio.
   Basta con que el envoltorio deje de ser el ancla. */
.e-con.mtq-ba > .elementor-widget-html{position:static!important}
.e-con.mtq-ba > .elementor-widget-html,
.e-con.mtq-ba > .elementor-widget-html > .elementor-widget-container{
  width:100%!important;height:100%!important;
}


/* --- Nosotros · "Cómo trabajamos": de filetes verticales a tarjetas de vidrio
   (2026-08-28) --------------------------------------------------------------
   Medido antes de tocar: cinco columnas de 244px obligaban a que las cinco
   descripciones rompieran en 3 lineas -unos 30 caracteres por linea, la mitad
   del maximo de 58 que fija el sistema-, y los filetes verticales corrian 44px
   por debajo de donde termina el texto. Esa cola es lo que se leia sin terminar.
   Reparto 2+2+2 / 3+3 sobre pista de seis: arriba las tres fases de obra
   -diagnostico, propuesta, construccion-, abajo las dos que ocurren despues de
   entregar. La agrupacion no es solo estetica, dice algo.
   Mismo criterio que direccion ya eligio en MTQ Cloud y en Soporte TI. */
.e-con.mtq-proceso{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:18px!important;border-top:0!important;
  /* El filete que separaba el titulo de la rejilla se fue con los filetes
     verticales, y las tarjetas quedaban pegadas al H2. Mismo aire que usan
     .mtq-r2-grid en Cloud (48) y .mtq-sop-flujo en Soporte (54). */
  margin-top:clamp(34px,4vw,52px);
}
.e-con.mtq-proceso > *{
  padding:28px 26px!important;border:0!important;border-radius:20px;
}
.e-con.mtq-proceso > *:nth-child(-n+3){grid-column:span 2}
.e-con.mtq-proceso > *:nth-child(n+4){grid-column:span 3}
@media (max-width:1080px){
  /* Dos por fila y el quinto a lo ancho: sin hueco en la ultima fila. */
  .e-con.mtq-proceso > *:nth-child(-n+4){grid-column:span 3}
  .e-con.mtq-proceso > *:nth-child(5){grid-column:span 6}
  .e-con.mtq-proceso > *,
  .e-con.mtq-proceso > *:not(:first-child),
  .e-con.mtq-proceso > *:last-child{border:0!important;padding:28px 26px!important}
}
@media (max-width:620px){
  .e-con.mtq-proceso{grid-template-columns:minmax(0,1fr)!important}
  .e-con.mtq-proceso > *:nth-child(n){grid-column:auto}
  .e-con.mtq-proceso > *{padding:24px 20px!important}
}


/* --- Nosotros: mismo aire bajo el titulo en los bloques que abren con un borde
   (2026-08-28) --------------------------------------------------------------
   La pagina venia con los bloques pegados al H2: el respiro se lo daba el padding
   interno del primer hijo. Eso funciona cuando el bloque no tiene borde, pero
   las tarjetas y la linea de tiempo abren con una arista -el canto de la tarjeta,
   el filete con sus puntos- que queda tocando el titulo.
   Un solo valor para los tres, para que la pagina no tenga tres criterios. */
.e-con.mtq-personas,
.e-con.mtq-hitos{margin-top:clamp(34px,4vw,52px)}


/* --- Contacto · "Otras vías": el gap del widget le ganaba al del sistema
   (2026-08-28) --------------------------------------------------------------
   .mtq-vias .elementor-icon-box-wrapper pide gap:16px, pero Elementor emite
   desde el ajuste icon_space de cada widget una regla con MAS especificidad:
   .elementor-1466 .elementor-element.elementor-element-mtqcvN
   .elementor-icon-box-wrapper{gap:0px}
   Resultado: el icono pegado al rotulo, sin un pixel de aire, en los cuatro.
   Mismo caso que la insignia de los pasos de Soporte TI. */
.elementor-widget.mtq-vias .elementor-icon-box-wrapper{
  gap:16px!important;
  /* Y en movil Elementor apila el icono sobre el rotulo con su clase
     elementor-mobile-position-block-start. El prototipo los mantiene en fila,
     asi que se fuerza. No hace falta media query: en escritorio ya es row. */
  flex-direction:row!important;align-items:flex-start!important;text-align:left!important;
}


/* --- Contacto · los numeros de la secuencia de Contacto salian en blanco
   (2026-08-28) --------------------------------------------------------------
   .mtq-paso-num .elementor-heading-title  (0,2,0)  pide el azul de acento, pero
   el color global de titulos del kit entra con mas especificidad y ganaba: los
   01-04 se veian blancos. Apuntar al widget como hijo directo de su container
   alcanza. Es el tercer sitio donde aparece el mismo choque -la insignia de
   Soporte TI y esta-, asi que conviene recordarlo: en este sitio, un color
   puesto sobre .elementor-heading-title con una sola clase NO gana. */
.e-con.mtq-paso > .mtq-paso-num .elementor-heading-title{color:var(--mtq-accent)!important}


/* --- Heroes sin fotografia: version publicable mientras no existan las tomas
   (2026-08-28) --------------------------------------------------------------
   El arquetipo de estos dos heroes es "foto documental a sangre", asi que al
   quitar la foto el bloque quedaba como un contorno vacio. En vez de cambiar la
   composicion -que es la aprobada, y la que vuelve el dia que lleguen las tomas-
   se cambia SOLO el relleno: el mismo bloque pasa a ser panel de vidrio con
   atmosfera propia. Cuando exista la foto se le devuelve la clase .mtq-foto y la
   imagen entra en el mismo hueco, sin rehacer la seccion.
   La lista de tomas quedo en paginas/infraestructura-ti.md y paginas/nosotros.md
   El estado con fotos esta en uploads/mtq/respaldo/*-CON-FOTOS-2026-08-28.json */
.e-con.mtq-hero-sinfoto{
  border:0!important;
  background:
    radial-gradient(78% 100% at 8% 100%, rgba(44,91,232,.34), rgba(44,91,232,0) 66%),
    radial-gradient(66% 86% at 92% 4%, rgba(26,56,168,.40), rgba(26,56,168,0) 70%),
    linear-gradient(152deg, rgba(255,255,255,.055), rgba(255,255,255,.014) 60%);
}
/* Sin foto debajo, el velo no tiene nada que atenuar: solo apagaria la
   atmosfera. El contraste del texto lo da el degradado de arriba. */
.mtq-hero-sinfoto > .velo{display:none}

/* --- Retratos pendientes: la silueta de "sin foto de perfil" (2026-08-28)
   Ocupa el mismo hueco de 220px que ocupaba el retrato, para que el dia que
   existan las tomas la foto entre sin mover la tarjeta. */
.mtq-persona-sinfoto{
  min-height:220px;display:flex!important;align-items:center;justify-content:center;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  border-bottom:1px solid var(--mtq-line);color:rgba(255,255,255,.20);
}
.mtq-persona-sinfoto svg{width:86px;height:86px;display:block}

/* --- El equipo queda en dos tarjetas mientras no haya un tercero (2026-08-28)
   La tarjeta vacante con [[Resto del equipo]] se retiro para poder lanzar: era
   el ultimo marcador visible de la pagina. Su propia nota decia que si son solo
   dos, 'las otras dos se reparten el ancho', asi que la rejilla baja de 3 a 2.
   El reset de movil se repone con !important porque esta regla va despues. */
.e-con.mtq-personas{grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media (max-width:620px){
  .e-con.mtq-personas{grid-template-columns:minmax(0,1fr)!important}
}

/* --- Cobertura: los dos compromisos dejaron de ser marcador (2026-08-28)
   Direccion confirmo 'menos de 24 horas' en las dos zonas. Se retira el
   recuadro punteado y el chip 'Dato por confirmar': ahora es un dato publicado,
   no un hueco. Conserva la tipografia que tenia dentro del marcador. */
.e-con.mtq-zona-resp{display:block!important;padding:0!important;border:0!important;background:none!important}
.mtq-zona-resp-dato .elementor-heading-title{
  font-family:Inter,sans-serif;font-weight:600;font-size:.9375rem;
  color:var(--mtq-lead);line-height:1.35;}

/* --- Casos sin testimonio: resumen en voz de MTQ, no cita del cliente
   (2026-08-28) --------------------------------------------------------------
   Tres de los cuatro casos no tienen todavia las palabras del cliente. En vez
   de inventarlas y firmarlas con su nombre -que es lo unico que este proyecto
   no puede hacer- el bloque lleva una linea en voz de MTQ que dice lo que la
   propia pagina ya afirma que se entrego, SIN comillas y sin tipografia de
   cita, para que no se lea como un testimonio. La firma se conserva como
   autoria del caso. Cuando lleguen las palabras, vuelven al <p class=cita>. */
.mtq-caso-resumen .resumen{
  font-family:Inter,sans-serif;font-style:normal;font-weight:400;
  font-size:.9375rem;line-height:1.7;color:var(--mtq-body);letter-spacing:0;
}
/* .mtq-caso-resumen .quien retirada el 2026-08-31: la firma con nombre y cargo hacia que una linea escrita por MTQ se leyera como testimonio de una persona real. La ranura ya no existe en la pagina. */


/* --- El equipo: tarjetas mas angostas y silueta centrada (2026-08-31) -----
   Con dos personas, dos tarjetas de 593px dejaban la ficha medio vacia. Se acotan
   a 400px y la pareja queda alineada a la izquierda, como el resto de la seccion.
   minmax(0,400px) deja que encojan solas cuando el ancho no da.
   La silueta NO se centraba aunque .mtq-persona-sinfoto ya era flex con
   align-items/justify-content en center: esa clase esta en el WIDGET, y su
   .elementor-widget-container se estira a 593x219 en display:block, asi que el SVG
   de 86px caia arriba a la izquierda. El centrado tiene que ir en el contenedor
   interno, no en el widget. Mismo patron que la placa de icono: al portar algo del
   prototipo hay que mirar contra que se esta anclando en produccion. ----- */
.e-con.mtq-personas{grid-template-columns:repeat(2,minmax(0,400px))!important;justify-content:start}
.mtq-persona-sinfoto > .elementor-widget-container{width:100%!important;height:100%!important;display:flex!important;align-items:center;justify-content:center}
@media (max-width:620px){.e-con.mtq-personas{grid-template-columns:minmax(0,1fr)!important}}


/* ####################################################################
   PAGINA 404 - plantilla 3122 (tipo error-404, condicion todo el sitio)
   Reusa la seccion de cierre y su atmosfera; lo unico propio es el
   centrado, la pildora del buscador y la fila de enlaces.
   #################################################################### */
.e-con.mtq-404{text-align:center}
.e-con.mtq-404 > .e-con-inner{align-items:center}
.mtq-404 .mtq-lead .elementor-widget-container{max-width:54ch;margin-inline:auto}
.mtq-404 .mtq-eyebrow{margin-bottom:10px}

/* Buscador: pildora de vidrio, como el resto del sistema */
/* el container es boxed: Elementor mete .e-con-inner, asi que el widget NO es hijo directo */
.mtq-404 .mtq-404-buscador{width:min(420px,100%)!important;flex:0 0 auto!important;margin-top:30px}
.mtq-404-buscador .elementor-search-form__container{background:rgba(255,255,255,.04);border:1px solid var(--mtq-line-mid);overflow:hidden}
.mtq-404-buscador .elementor-search-form__container:focus-within{border-color:var(--mtq-accent);background:rgba(255,255,255,.06)}
.mtq-404-buscador input[type=search].elementor-search-form__input{background:transparent!important;color:var(--mtq-heading)!important;font-family:Inter,sans-serif;font-size:.9375rem;padding-inline:22px!important}
.mtq-404-buscador input[type=search].elementor-search-form__input::placeholder{color:var(--mtq-dim);opacity:1}
.mtq-404-buscador .elementor-search-form__submit,.mtq-404-buscador button[type=submit]{background:transparent!important;color:var(--mtq-accent)!important;padding-inline:18px!important;min-width:auto!important}

/* Enlaces a las paginas principales */
.mtq-404-enlaces{margin-top:26px}
.mtq-404-enlaces p{font-family:Inter,sans-serif;font-size:.9375rem;line-height:2;color:var(--mtq-dim);margin:0}
.mtq-404-enlaces a{color:var(--mtq-accent);text-decoration:none}
.mtq-404-enlaces a:hover{text-decoration:underline}
.mtq-404 .mtq-btn{margin-top:30px}

@media (max-width:620px){.mtq-404-enlaces p{line-height:2.2}}

/* El radio y el alto los pone el CONTROL NATIVO del widget (border_radius es un
   slider, no dimensiones: guardarlo como top/right/bottom/left se ignora en
   silencio y queda el valor por defecto de 3px). Aqui solo va el ancho. */
.mtq-404-buscador .elementor-search-form,
.mtq-404-buscador .elementor-search-form__container{width:100%!important;max-width:none!important}
.mtq-404-buscador .elementor-search-form__container{background:rgba(255,255,255,.04)!important;border:1px solid var(--mtq-line-mid)!important}
.mtq-404-buscador .elementor-search-form__container:focus-within{border-color:var(--mtq-accent)!important;background:rgba(255,255,255,.06)!important}

/* ---- fadeIn.min.css ---- */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}.fadeIn{animation-name:fadeIn}
/* ---- fadeInUp.min.css ---- */
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}.fadeInUp{animation-name:fadeInUp}
/* ---- fadeInLeft.min.css ---- */
@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}.fadeInLeft{animation-name:fadeInLeft}
/* ---- fadeInRight.min.css ---- */
@keyframes fadeInRight{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}.fadeInRight{animation-name:fadeInRight}