/* LA VENTANA DEL HERO DE CADA SERVICIO (maquetas-hero.js, 2026-11-10).
   Una maqueta propia por servicio. Paleta del manual: crema, tinta, naranja, arena;
   el verde solo en estados. Todo con prefijo mqh- (las páginas de producto usan .b, .c…). */
.mqh{flex:1;gap:12px;container-type:inline-size;position:relative}
.mqh *{box-sizing:border-box}
.mqh p{margin:0}
.mqh ol{margin:0;padding:0;list-style:none}
.mqh-ic{display:inline-grid;place-items:center;flex:none}
.mqh-img{display:block;width:100%;height:100%;object-fit:cover}
.mqh-av{width:32px;height:32px;border-radius:99px;object-fit:cover;flex:none;background:var(--arena);display:block}
.mqh-card{background:var(--papel);border:1px solid var(--linea);border-radius:18px;padding:14px 16px;min-width:0;position:relative}
.mqh-lab{display:block;font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:10px}
.mqh-tit{display:block;font:700 15px/1.3 var(--sans);color:var(--tinta)}
.mqh-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
.mqh-top small{display:block;font:400 12px var(--sans);color:var(--muted);margin-top:3px}
.mqh-num{font:700 30px/1 var(--sans);letter-spacing:-.03em;color:var(--tinta)}
.mqh-num span{font:500 13px var(--sans);color:var(--muted);margin-left:6px;letter-spacing:0}
.mqh-btn{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 18px;border-radius:99px;background:var(--naranja);color:var(--papel);font:700 13px var(--sans);white-space:nowrap}
.mqh-btn.chico{height:30px;padding:0 13px;font-size:11.5px}
.mqh-btn.claro{background:var(--naranja-suave);color:var(--naranja-hondo)}
.mqh-pill{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 8px;border-radius:99px;background:var(--papel);border:1px solid var(--linea);box-shadow:0 6px 18px rgba(60,40,20,.10);font:600 11.5px var(--sans);color:var(--tinta);white-space:nowrap}
.mqh-pill .mqh-ic{width:20px;height:20px;border-radius:99px;background:#fff0e6;color:var(--naranja-hondo)}
.mqh-pill > i{width:8px;height:8px;border-radius:99px;background:var(--naranja);margin-left:4px}
.mqh-pill.verde{border-color:rgba(22,163,74,.4);color:#15803d;box-shadow:none}
.mqh-pill.verde > i{background:none;border:1.5px solid #16a34a}
.mqh-pill.verde .mqh-ic{background:rgba(22,163,74,.1);color:#15803d}
.mqh-flota{position:absolute;z-index:2}
.mqh-sk{display:block;height:7px;border-radius:9px;background:#efe9e3}
.mqh-lineas{display:grid;gap:7px}
.mqh-barra{height:8px;border-radius:9px;background:#efe9e3;overflow:hidden}
.mqh-barra i{display:block;height:100%;border-radius:9px;background:var(--naranja)}
.mqh-barra.suave i{background:#323232;opacity:.75}
.mqh-dos{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px}
.mqh-logo{width:30px;height:30px;border-radius:99px;background:var(--tinta);color:var(--papel);display:grid;place-items:center;font:700 13px var(--sans);flex:none}
.mqh-logo.o{background:var(--naranja)}
.mqh-quien{display:flex;align-items:center;gap:9px}
.mqh-quien b{display:block;font:700 13px var(--sans)}
.mqh-quien small{display:block;font:400 11.5px var(--sans);color:var(--muted)}

/* navegador (landing) */
.mqh-pag{background:var(--papel);border:1px solid var(--linea);border-radius:18px;overflow:hidden}
.mqh-nav{height:34px;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid var(--linea-2);background:var(--crema)}
.mqh-nav i{width:8px;height:8px;border-radius:99px;background:#e2dad1}
.mqh-nav span{margin-left:10px;flex:1;max-width:220px;height:20px;border-radius:99px;background:var(--papel);border:1px solid var(--linea-2);font:500 10.5px/18px var(--sans);color:var(--muted);padding:0 10px}

/* video (lanzamiento, avance de obra) */
.mqh-video{position:relative;border-radius:18px;overflow:hidden;background:var(--tinta);min-height:230px;flex:1}
.mqh-video .mqh-img{position:absolute;inset:0}
.mqh-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(50,50,50,.15),rgba(50,50,50,0) 35%,rgba(50,50,50,.55))}
.mqh-vivo{position:absolute;z-index:1;left:12px;top:12px;height:28px;padding:0 12px;border-radius:99px;background:var(--naranja);color:var(--papel);font:700 11px var(--sans);text-transform:uppercase;letter-spacing:.04em;display:inline-flex;align-items:center;gap:7px}
.mqh-vivo i{width:7px;height:7px;border-radius:99px;background:var(--papel);animation:mqh-late 1.4s ease-in-out infinite}
@keyframes mqh-late{50%{opacity:.25}}
.mqh-conect{position:absolute;z-index:1;right:12px;top:12px;height:28px;padding:0 12px;border-radius:99px;background:rgba(255,250,245,.92);color:var(--tinta);font:600 11.5px var(--sans);display:inline-flex;align-items:center;gap:6px}
.mqh-tercio{position:absolute;z-index:1;left:12px;bottom:12px;background:var(--papel);border-radius:14px;padding:9px 14px}
.mqh-tercio b{display:block;font:700 13.5px var(--sans)}
.mqh-tercio small{display:block;font:400 11.5px var(--sans);color:var(--muted)}
.mqh-play{position:absolute;z-index:1;left:50%;top:44%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:99px;background:rgba(255,250,245,.95);box-shadow:var(--sombra)}
.mqh-play::before{content:"";position:absolute;left:23px;top:18px;border-left:16px solid var(--naranja);border-top:11px solid transparent;border-bottom:11px solid transparent}

/* lanzamiento */
.mqh-chat{display:grid;gap:9px;align-content:start}
.mqh-chat .mqh-lab{margin-bottom:0}
.mqh-msj{display:flex;gap:8px;align-items:flex-start}
.mqh-msj .mqh-av{width:26px;height:26px}
.mqh-msj p{background:var(--crema);border-radius:4px 12px 12px 12px;padding:6px 10px;font:400 12px/1.35 var(--sans);color:var(--tinta)}
.mqh-msj p b{display:block;font:700 11px var(--sans);color:var(--naranja-hondo)}
.mqh-meta{display:flex;flex-direction:column;gap:10px}
.mqh-meta .mqh-lab{margin-bottom:0}
.mqh-meta .mqh-btn{margin-top:auto}

/* expectativa */
.mqh-portada{position:relative;height:200px}
.mqh-portada .mqh-img{position:absolute;inset:0}
.mqh-portada::after{content:"";position:absolute;inset:0;background:rgba(50,50,50,.45)}
.mqh-sobre{position:absolute;z-index:1;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--papel);text-align:center}
.mqh-sobre > small{font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.12em;color:#ffd2b8}
.mqh-sobre > b{font:700 28px/1.1 var(--sans);letter-spacing:-.02em}
.mqh-cuenta{display:flex;gap:8px;margin-top:10px}
.mqh-cuenta span{width:56px;padding:7px 0;border-radius:12px;background:rgba(255,250,245,.14);border:1px solid rgba(255,250,245,.25);font:500 10px var(--sans);text-transform:uppercase;letter-spacing:.04em}
.mqh-cuenta b{display:block;font:700 20px/1.1 var(--sans);letter-spacing:0}
.mqh-form .mqh-tit{margin-bottom:12px}
.mqh-campos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.mqh-campos.col{grid-template-columns:1fr}
.mqh-campo{border:1px solid var(--linea);border-radius:12px;padding:6px 12px;background:var(--crema);min-width:0}
.mqh-campo small{display:block;font:500 10.5px var(--sans);color:var(--muted)}
.mqh-campo span{display:block;font:600 13px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mqh-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mqh-espera{display:inline-flex;align-items:center;gap:8px;font:500 12px var(--sans);color:var(--muted)}
.mqh-espera b{color:var(--tinta)}
.mqh-pila{display:flex}
.mqh-pila .mqh-av{width:26px;height:26px;border:2px solid var(--papel);margin-left:-8px}
.mqh-pila .mqh-av:first-child{margin-left:0}

/* fake door */
.mqh-cuerpo{padding:16px}
.mqh-cuerpo .mqh-tit{text-align:center;margin-bottom:12px}
.mqh-opciones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mqh-op{position:relative;border:1px solid var(--linea);border-radius:14px;padding:12px 8px;text-align:center;display:grid;gap:2px;justify-items:center;background:var(--crema)}
.mqh-op b{font:700 15px var(--sans)}
.mqh-op small{font:400 11.5px var(--sans);color:var(--muted);margin-bottom:8px}
.mqh-op.on{border-color:var(--naranja);background:var(--papel)}
.mqh-cursor{position:absolute;right:14px;bottom:2px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:18px solid var(--tinta);transform:rotate(-30deg);filter:drop-shadow(0 0 1.5px var(--papel))}
.mqh-barras-h{display:grid;gap:10px}
.mqh-barras-h > div{display:grid;grid-template-columns:44px 1fr 40px;gap:10px;align-items:center;font:600 12px var(--sans)}
.mqh-barras-h b{text-align:right;font:700 12.5px var(--sans)}

/* generación de leads */
.mqh-dos.alto{flex:1}
.mqh-anuncio{display:flex;flex-direction:column;gap:10px;padding:12px}
.mqh-anuncio .mqh-img.cuadro{flex:1;min-height:150px;max-height:220px;border-radius:12px}
.mqh-cta-ad{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--crema);border-radius:10px;padding:9px 12px;font:500 12px var(--sans)}
.mqh-cta-ad b{font:700 11.5px var(--sans);color:var(--naranja-hondo);white-space:nowrap}
.mqh-form{display:flex;flex-direction:column}
.mqh-form > .mqh-btn{margin-top:auto}
.mqh-aviso{display:flex;align-items:center;gap:10px;background:var(--papel);border:1px solid var(--linea);border-radius:99px;padding:7px 8px 7px 8px;box-shadow:0 10px 26px rgba(60,40,20,.10)}
.mqh-aviso p{flex:1;min-width:0}
.mqh-aviso b{display:block;font:700 13px var(--sans)}
.mqh-aviso small{display:block;font:400 11.5px var(--sans);color:var(--muted)}

/* email */
.mqh-pasos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.mqh-pasos li{position:relative;padding-top:16px;font:600 11px/1.25 var(--sans);color:var(--muted)}
.mqh-pasos li::before{content:"";position:absolute;left:0;right:0;top:4px;height:4px;border-radius:9px;background:#efe9e3}
.mqh-pasos li.ok::before{background:var(--tinta)}
.mqh-pasos li.on{color:var(--naranja-hondo)}
.mqh-pasos li.on::before{background:var(--naranja)}
.mqh-pasos.chico{margin-top:14px}
.mqh-correo{flex:1;display:flex;flex-direction:column;gap:12px}
.mqh-correo .mqh-quien{padding-bottom:10px;border-bottom:1px solid var(--linea-2)}
.mqh-hora{margin-left:auto;font:400 11.5px var(--sans);color:var(--muted)}
.mqh-asunto{font:700 17px/1.25 var(--sans);letter-spacing:-.01em}
.mqh-img.franja{height:120px;border-radius:12px;flex:none}
.mqh-correo .mqh-btn{align-self:flex-start}
.mqh-flota.uno{right:14px;top:62px}
.mqh-flota.dos{right:-6px;bottom:22px}

/* referidos */
.mqh-invita{display:flex;flex-direction:column;gap:10px;padding:12px}
.mqh-invita .mqh-img.franja{height:auto;flex:1;min-height:110px}
.mqh-codigo{display:flex;justify-content:space-between;align-items:center;border:1px dashed rgba(252,111,32,.5);border-radius:12px;padding:8px 12px;background:#fff7f1}
.mqh-codigo small{font:500 11px var(--sans);color:var(--muted)}
.mqh-codigo b{font:700 13px var(--mono);color:var(--naranja-hondo)}
.mqh-invita .mqh-btn{margin-top:auto}
.mqh-raiz,.mqh-ramas > div{display:flex;align-items:center;gap:9px}
.mqh-raiz{padding-bottom:12px}
.mqh-raiz b,.mqh-ramas b{display:block;font:700 13px var(--sans)}
.mqh-raiz small,.mqh-ramas small{display:block;font:400 11.5px var(--sans);color:var(--muted)}
.mqh-ramas{display:grid;gap:12px;margin-left:15px;padding-left:18px;border-left:2px solid #efe9e3}
.mqh-ramas > div{position:relative}
.mqh-ramas > div::before{content:"";position:absolute;left:-18px;top:50%;width:14px;height:2px;background:#efe9e3}
.mqh-ramas .mqh-pill{margin-left:auto;height:26px}

/* piezas */
.mqh-piezas{flex:1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);grid-template-rows:minmax(0,1fr) auto;gap:12px}
.mqh-pieza{position:relative;border-radius:16px;overflow:hidden;background:var(--tinta);min-height:110px}
.mqh-pieza .mqh-img{position:absolute;inset:0}
.mqh-pieza::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(50,50,50,0) 35%,rgba(50,50,50,.7))}
.mqh-pieza .mqh-texto{position:absolute;z-index:1;left:14px;right:14px;bottom:14px;color:var(--papel);display:grid;gap:4px;justify-items:start}
.mqh-pieza .mqh-texto small{font:600 10.5px var(--sans);text-transform:uppercase;letter-spacing:.08em;color:#ffd2b8}
.mqh-pieza .mqh-texto b{font:700 19px/1.15 var(--sans);letter-spacing:-.01em}
.mqh-pieza .mqh-texto .mqh-btn{margin-top:6px}
.mqh-pieza.feed{aspect-ratio:1}
.mqh-pieza.historia{grid-row:span 1}
.mqh-pieza.historia .mqh-texto b{font-size:17px}
.mqh-pieza.historia .mqh-texto small{text-transform:none;letter-spacing:0;color:var(--papel);opacity:.85}
.mqh-pieza.banner{grid-column:1 / -1;height:88px;min-height:0}
.mqh-pieza.banner::after{background:linear-gradient(90deg,rgba(50,50,50,.7),rgba(50,50,50,.1))}
.mqh-texto.fila{top:0;bottom:0;right:92px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.mqh-texto.fila b{font-size:16px}
.mqh-barritas{position:absolute;z-index:1;left:10px;right:10px;top:10px;display:flex;gap:4px}
.mqh-barritas i{flex:1;height:3px;border-radius:3px;background:rgba(255,250,245,.45)}
.mqh-barritas i.on{background:var(--papel)}
.mqh-formato{position:absolute;z-index:1;right:10px;top:10px;height:24px;padding:0 10px;border-radius:99px;background:rgba(255,250,245,.94);font:700 10.5px/24px var(--sans);color:var(--tinta)}
.mqh-pieza.historia .mqh-formato{top:22px}

/* ERP */
.mqh-sinc{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);gap:9px 6px;align-items:center;flex:1;align-content:center}
.mqh-cabcol{display:flex;align-items:center;gap:9px;font:700 14px var(--sans);padding-bottom:4px}
.mqh-logo.t{background:var(--arena);color:var(--tinta)}
.mqh-celda{background:var(--papel);border:1px solid var(--linea);border-radius:14px;padding:9px 13px;min-width:0}
.mqh-celda b{display:block;font:700 13px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mqh-celda small{display:block;font:400 11.5px var(--sans);color:var(--muted)}
.mqh-flecha{width:30px;height:30px;border-radius:99px;background:#fff0e6;color:var(--naranja-hondo);display:grid;place-items:center;font:700 14px var(--sans);justify-self:center}
.mqh-erp-aviso,.mqh-integracion-erp .mqh-aviso{border-radius:16px;box-shadow:none;padding:10px 12px}

/* cotizador */
.mqh-doc{flex:1;position:relative;background:var(--papel);border:1px solid var(--linea);border-radius:16px;padding:0 0 16px;display:flex;flex-direction:column;gap:12px;overflow:visible}
.mqh-doc-cab{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding:14px 18px;border-top:5px solid var(--naranja);border-radius:16px 16px 0 0;border-bottom:1px solid var(--linea-2)}
.mqh-doc-cab small{display:block;font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--naranja-hondo)}
.mqh-doc-cab b{display:block;font:700 16px var(--sans)}
.mqh-doc-cuerpo{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;padding:0 18px}
.mqh-img.mini{height:100%;min-height:110px;border-radius:12px}
.mqh-tabla > div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--linea-2);font:400 12px var(--sans)}
.mqh-tabla > div:last-child{border:0}
.mqh-tabla small{font:400 12px var(--sans);color:var(--muted)}
.mqh-tabla b{font:700 12.5px var(--sans);white-space:nowrap}
.mqh-tabla b.verde{color:#15803d}
.mqh-doc > .mqh-lab{padding:0 18px;margin:0}
.mqh-cols{display:flex;align-items:flex-end;gap:5px;height:56px;padding:0 18px}
.mqh-cols i{flex:1;border-radius:5px 5px 2px 2px;background:#efe9e3;position:relative}
.mqh-cols i.on{background:var(--naranja)}
.mqh-doc .mqh-pie{padding:0 18px;justify-content:flex-start;margin-top:auto}
.mqh-flota.tres{right:-8px;bottom:62px}

/* reportes */
.mqh-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mqh-kpis .mqh-card{padding:11px 14px}
.mqh-kpis small{display:block;font:500 11.5px var(--sans);color:var(--muted)}
.mqh-kpis b{display:block;font:700 24px/1.15 var(--sans);letter-spacing:-.02em}
.mqh-sube{font:700 10.5px var(--sans);color:#15803d}
.mqh-cols.alto{height:96px;padding:0 0 18px;gap:10px}
.mqh-cols em{position:absolute;left:0;right:0;bottom:-18px;text-align:center;font:500 10.5px var(--sans);font-style:normal;color:var(--muted)}
.mqh-embudo{display:grid;gap:6px;align-content:start}
.mqh-embudo .mqh-lab{margin-bottom:2px}
.mqh-embudo > div{height:22px;border-radius:7px;background:#efe9e3;font:600 11px/22px var(--sans);padding:0 9px;white-space:nowrap}
.mqh-embudo > div.on{background:var(--naranja);color:var(--papel)}
.mqh-rank{display:grid;gap:7px;align-content:start}
.mqh-rank .mqh-lab{margin-bottom:2px}
.mqh-rank > div{display:flex;align-items:center;gap:8px;font:600 12px var(--sans)}
.mqh-rank .mqh-av{width:24px;height:24px}
.mqh-rank span{margin-left:auto;font:700 12px var(--sans);color:var(--naranja-hondo)}

/* angosta (celular) */
@container (max-width:470px){
  .mqh-dos{grid-template-columns:minmax(0,1fr)}
  .mqh-campos{grid-template-columns:1fr}
  .mqh-cuenta span{width:48px}
  .mqh-sobre > b{font-size:22px}
  .mqh-piezas{grid-template-columns:minmax(0,1fr) minmax(0,.75fr)}
  .mqh-pieza .mqh-texto b{font-size:15px}
  .mqh-pieza.historia .mqh-texto b{font-size:14px}
  .mqh-pieza .mqh-texto .mqh-btn{display:none}
  .mqh-doc-cuerpo{grid-template-columns:minmax(0,1fr)}
  .mqh-img.mini{height:90px;min-height:0}
  .mqh-flota.dos,.mqh-flota.tres{right:6px}
  .mqh-flota.uno{display:none}
  .mqh-op .mqh-btn{padding:0 8px;font-size:10.5px}
  .mqh-sinc{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)}
  .mqh-celda{padding:8px 10px}
  .mqh-celda b{font-size:12px}
  .mqh-flecha{width:26px;height:26px}
  .mqh-video{min-height:200px}
  .mqh-anuncio .mqh-img.cuadro{min-height:170px}
}
@media (prefers-reduced-motion:reduce){.mqh-vivo i{animation:none}}
.mqh-pill b{font:inherit}

.mqh-wab{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;margin-right:.45em}