/* ==========================================================================
   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-group-archivo,
.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;
}

/* Adjuntar archivo */
.mtq-form .elementor-field-type-upload .elementor-field{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border:1px dashed var(--mtq-line-strong);border-radius:14px;
  padding:14px 16px;background:rgba(255,255,255,.02);
  color:var(--mtq-dim);font-size:.875rem;
}

/* 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:-200px;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:-260px;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:-300px;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:-220px;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" ----------------------------
   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-pasos{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  padding:0!important;margin-top:clamp(38px,4.5vw,54px);position:relative;
}
.e-con.mtq-pasos::before{
  content:"";position:absolute;left:0;right:0;top:18px;height:1px;
  background:var(--mtq-line);
}
.e-con.mtq-paso{
  padding:0 34px 0 0!important;position:relative;
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;
}
.e-con.mtq-paso + .e-con.mtq-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-paso > .mtq-paso-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-paso > .mtq-paso-n .elementor-heading-title{color:var(--mtq-accent)!important}
.mtq-paso-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-paso-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-paso > .mtq-paso-t{margin-top:22px}
.mtq-paso-p p,.mtq-paso-p{margin-top:9px;color:var(--mtq-lead);font-size:.9375rem;line-height:1.6}
@media (max-width:860px){
  .e-con.mtq-pasos{grid-template-columns:minmax(0,1fr)!important;gap:30px}
  .e-con.mtq-pasos::before{display:none}
  .e-con.mtq-paso,.e-con.mtq-paso + .e-con.mtq-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}
}