/* qp.css — /que-hacemos REHECHA, en estructura (6-oct-2026). Los visuales van como HUECOS a propósito:
   primero se aprueba el orden, el texto y el movimiento con el scroll; luego se produce lo que va en cada hueco. */
.qp{ padding-inline:var(--borde) }
.qp h1, .qp h2, .qp h3{ font-weight:400; margin:0; color:var(--tx-1) }
.qp p{ margin:0 }

/* el hueco: dice qué va y en qué proporción */
.hueco{ position:relative; width:100%; border-radius:1.1rem; border:1px dashed rgba(237,239,243,.22);
  background:repeating-linear-gradient(135deg, rgba(237,239,243,.025) 0 14px, transparent 14px 28px), #0D0F13;
  display:grid; place-content:center; text-align:center; gap:.45rem; padding:2rem }
.hueco b{ font-weight:400; font-size:var(--t4); color:var(--tx-1) }
.hueco span{ font-size:var(--t6); color:var(--tx-3); max-width:30ch; margin-inline:auto; line-height:1.5; text-transform:none; letter-spacing:normal }
.hueco b{ text-transform:none; letter-spacing:normal }

/* ── APERTURA ── */
.qp-abre{ min-height:100svh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center;
  gap:clamp(2rem,5vw,5rem); padding-block:clamp(7rem,14vh,9rem) clamp(3rem,8vh,5rem) }
.qp-abre h1{ font-size:clamp(3.5rem,7vw,7rem); line-height:.94; letter-spacing:-.045em }
.qp-abre__tesis{ margin-top:clamp(1.5rem,4vh,2.5rem) !important; max-width:38ch; font-size:var(--t4); line-height:1.5; color:var(--tx-2) }
.qp-abre__ir{ display:flex; gap:1.75rem; margin-top:2rem !important; font-size:var(--t5) }
.qp-abre__ir a{ color:var(--tx-1); text-decoration:none; border-bottom:1px solid rgba(237,239,243,.3); padding-bottom:2px }
.qp-abre .hueco{ aspect-ratio:4/5; max-height:72svh; justify-self:end }

/* ── LAS TRES FAMILIAS: el texto pasa a la izquierda, el visual se queda fijo a la derecha ── */
.qp-fam{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(2rem,5vw,5rem) }
.qp-fam__escena{ position:sticky; top:0; height:100svh; display:grid; align-items:center }
.qp-fam__escena .marco{ position:relative; aspect-ratio:16/11; transition:opacity .7s ease }
.qp-fam__escena .hueco{ position:absolute; inset:0; opacity:0; transform:scale(.97); transition:opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1) }
.qp-fam__escena[data-activa="0"] .hueco:nth-child(1), .qp-fam__escena[data-activa="1"] .hueco:nth-child(2),
.qp-fam__escena[data-activa="2"] .hueco:nth-child(3){ opacity:1; transform:none }
/* la regla de Immersive Garden: cuando entra la lista, el visual baja para que el texto mande */
.qp-fam__escena.-tenue .marco{ opacity:.32 }
.qp-fam__paso{ position:absolute; left:0; bottom:clamp(2rem,8vh,4rem); display:flex; gap:.5rem }
.qp-fam__paso i{ width:2.6rem; height:2px; background:rgba(237,239,243,.2); transition:background .5s ease }
.qp-fam__escena[data-activa="0"] .qp-fam__paso i:nth-child(1), .qp-fam__escena[data-activa="1"] .qp-fam__paso i:nth-child(2),
.qp-fam__escena[data-activa="2"] .qp-fam__paso i:nth-child(3){ background:#EDEFF3 }

.qp-art{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-block:clamp(5rem,12vh,8rem) }
.qp-art h2{ font-size:clamp(3.25rem,6vw,6rem); line-height:.95; letter-spacing:-.045em }
.qp-art__prom{ margin-top:1rem !important; max-width:22ch; font-size:var(--t3); line-height:1.3; color:var(--tx-2) }
.qp-art__prosa{ margin-top:1.6rem !important; max-width:44ch; font-size:var(--t4); line-height:1.55; color:var(--tx-2) }
.qp-serv{ list-style:none; margin:2.2rem 0 0; padding:0; border-top:1px solid var(--tx-linea) }
.qp-serv li{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.95rem 0; border-bottom:1px solid var(--tx-linea);
  font-size:var(--t4); color:var(--tx-1) }
.qp-serv li small{ font-size:var(--t6); color:var(--tx-3) }
.qp-gar{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.55rem 1.5rem }
.qp-gar li{ font-size:var(--t5); line-height:1.45; color:var(--tx-2); padding-left:1.1rem; position:relative }
.qp-gar li::before{ content:''; position:absolute; left:0; top:.6em; width:.45rem; height:1px; background:var(--tx-2) }
.qp-art__ir{ margin-top:2rem !important; font-size:var(--t5) } .qp-art__ir a{ color:var(--tx-1); text-decoration:none }
.qp-art .hueco.-movil{ display:none }

@media (max-width:900px){
  .qp-abre{ grid-template-columns:1fr; min-height:0 } .qp-abre .hueco{ aspect-ratio:4/3; justify-self:stretch; order:-1 }
  .qp-fam{ grid-template-columns:1fr } .qp-fam__escena{ display:none }
  .qp-art{ min-height:0; padding-block:4rem } .qp-art .hueco.-movil{ display:grid; aspect-ratio:4/3; margin-bottom:2rem; order:-1 }
  .qp-gar{ grid-template-columns:1fr }
}

/* ── CAPA DE MOVIMIENTO (GSAP + ScrollTrigger + SplitText) ─────────────────────────────── */
.qp-linea{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em }   /* máscara de cada renglón */
.qp-fam__escena .hueco{ clip-path:inset(0 0 0 0 round 1.1rem) }
/* la franja que corre: los oficios, a la velocidad del scroll */
.qp-franja{ overflow:hidden; padding-block:clamp(3rem,9vh,6rem); border-block:1px solid var(--tx-linea); margin-inline:calc(var(--borde) * -1) }
.qp-franja__pista{ display:flex; width:max-content; will-change:transform }
.qp-franja__pista span{ font-size:clamp(3rem,7.5vw,7.5rem); line-height:1; letter-spacing:-.045em; white-space:nowrap; padding-right:.45em; color:var(--tx-1) }
.qp-franja__pista span:nth-child(even){ color:transparent; -webkit-text-stroke:1px rgba(237,239,243,.45) }
/* la frase que se enciende palabra por palabra */
.pu-respiro__frase .qp-p{ display:inline-block; opacity:.14; transition:none }
/* la línea que se dibuja encima de cada fila de servicios */
.qp-serv li{ position:relative; border-bottom-color:transparent }
.qp-serv li::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--tx-linea); transform-origin:0 50%; transform:scaleX(var(--l,1)) }
@media (prefers-reduced-motion:reduce){ .pu-respiro__frase .qp-p{ opacity:1 } }

/* ── EL MONITOR (v2, 6-oct): la escena fija enseña TRABAJO REAL. Cada familia trae su pieza y cada servicio
   de la lista cambia lo que se ve al pasar el cursor: un campo del color de la marca del cliente y su sitio,
   su panel o su marca corriendo encima. La única mancha de color de la página es el trabajo. */
.monitor{ position:relative; aspect-ratio:16/11; border-radius:1.25rem; overflow:hidden; background:#0D0F13;
  box-shadow:0 0 0 1px rgba(237,239,243,.08), 0 60px 120px -40px rgba(0,0,0,.9) }
.monitor__capa{ position:absolute; inset:0; display:grid; place-items:center; background:var(--fondo,#0D0F13);
  clip-path:inset(0 0 0 0); will-change:clip-path }
.monitor__capa video, .monitor__capa img{ display:block; max-width:86%; max-height:84%; width:auto; height:auto; border-radius:.7rem;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.45) }
.monitor__capa.-alto video, .monitor__capa.-alto img{ height:100%; max-height:100%; max-width:none; border-radius:0; box-shadow:none }   /* los clips verticales traen su propio campo de color: se funden con el del monitor */
.monitor__capa.-pleno video, .monitor__capa.-pleno img{ max-width:100%; max-height:100%; width:100%; height:100%; object-fit:cover; border-radius:0; box-shadow:none }
.monitor__pie{ position:absolute; left:1.1rem; bottom:1rem; z-index:3; display:flex; gap:.5rem; align-items:center; margin:0;
  padding:.45rem .8rem; border-radius:999px; background:rgba(8,9,12,.72); backdrop-filter:blur(8px); font-size:13px; color:#EDEFF3 }
.monitor__pie:empty, .monitor__pie:has(.monitor__cliente:empty){ display:none }
.monitor__que{ color:rgba(237,239,243,.6) }
.qp-fam__escena .marco{ display:none }
.qp-fam__escena.-tenue .monitor{ opacity:1 }   /* con trabajo real no se apaga: ahora es lo que se mira */
/* la lista se vuelve el control del monitor */
.qp-serv li{ cursor:default; transition:color .35s ease, padding .5s cubic-bezier(.16,1,.3,1) }
@media (hover:hover) and (pointer:fine){
  .qp-serv:hover li{ color:rgba(237,239,243,.38) }
  .qp-serv li:hover, .qp-serv li:focus-visible{ color:var(--tx-1); padding-left:.9rem }
  .qp-serv li::before{ content:''; position:absolute; left:0; top:50%; width:.45rem; height:.45rem; margin-top:-.22rem; border-radius:50%;
    background:var(--tx-1); transform:scale(0); transition:transform .45s cubic-bezier(.16,1,.3,1) }
  .qp-serv li:hover::before, .qp-serv li:focus-visible::before{ transform:scale(1) }
}
.qp-serv li:focus-visible{ outline:none }
.monitor.-movil{ display:none }
@media (max-width:900px){ .qp-art .monitor.-movil{ display:block; margin-bottom:2rem; order:-1 } }

/* la frase rodeada de piezas de un sistema: lo que antes era a mano, ya construido */
.pu-respiro{ position:relative; overflow:hidden }
.qp-frags{ position:absolute; inset:0; pointer-events:none; perspective:1400px }
.qp-frags img{ position:absolute; border-radius:.8rem; box-shadow:0 0 0 1px rgba(237,239,243,.08), 0 40px 80px -30px rgba(0,0,0,.9); opacity:.9 }
.qp-frags .f1{ width:min(22rem,24vw); right:3%; top:9% }
.qp-frags .f2{ width:min(19rem,21vw); right:5%; bottom:7% }
.qp-frags .f3{ width:min(24rem,26vw); right:25%; top:38% }
.qp-frags .f4{ width:min(20rem,22vw); right:27%; top:4% }
.pu-respiro__frase{ position:relative; z-index:1; max-width:min(13.5ch, 52%) }
@media (max-width:900px){ .qp-frags{ display:none } }

/* ── MOTION del monitor (qp-motion.js): escenas vivas para lo que no es 3D ───────
   Todo se mide en cqw del monitor: la escena escala entera, sin saltos de layout. */
.monitor__capa.-motion{ display:block; background:#08090C }
.qpm{ position:absolute; inset:0; container-type:size; overflow:hidden; color:#EDEFF3; font-size:1.85cqw; line-height:1.3;
  background:
    radial-gradient(60% 70% at 50% 45%, rgba(237,239,243,.05), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(237,239,243,.07) 1px, transparent 1.2px) 0 0 / 3.2cqw 3.2cqw, #08090C }
.qpm__lineas{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.qpm__via{ fill:none; stroke:rgba(237,239,243,.13); stroke-width:2.2; stroke-linecap:round }
.qpm__luz{ fill:none; stroke:#F4F5F7; stroke-width:3; stroke-linecap:round }
.qpm__halo{ fill:none; stroke:rgba(237,239,243,.22); stroke-width:14; stroke-linecap:round }
.qpm__nodo{ --on:0; position:absolute; width:7.4cqw; height:7.4cqw; translate:-50% -50%; border-radius:50%;
  display:grid; place-items:center; background:#14171D;
  box-shadow: inset 0 0 0 1px rgba(237,239,243,calc(.12 + .5 * var(--on))), 0 0 calc(3cqw * var(--on)) rgba(237,239,243,calc(.16 * var(--on))) }
.qpm__ico{ width:3.3cqw; height:3.3cqw; color:rgba(237,239,243,calc(.55 + .45 * var(--on))) }
.qpm__ico svg, .qpm__ok svg{ width:100%; height:100%; display:block }
.qpm__aro{ position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 1px rgba(237,239,243,.7); opacity:0 }
.qpm__ok{ position:absolute; right:-.5cqw; top:-.5cqw; width:2.5cqw; height:2.5cqw; border-radius:50%; background:#EDEFF3; color:#0B0D11; padding:.35cqw; opacity:0 }
.qpm__nom{ position:absolute; top:calc(100% + 1cqw); left:50%; translate:-50% 0; white-space:nowrap; font-size:1.55cqw; color:rgba(237,239,243,.55) }
.qpm__tarjeta{ position:absolute; background:rgba(20,23,29,.92); border-radius:1cqw; padding:1.3cqw 1.6cqw; display:grid; gap:.35cqw;
  box-shadow: inset 0 0 0 1px rgba(237,239,243,.1), 0 2cqw 4cqw rgba(0,0,0,.35) }
.qpm__tarjeta b{ font-weight:500; font-size:1.85cqw; line-height:1.3; letter-spacing:0; font-family:inherit; color:#EDEFF3 }
.qpm__chico{ font-size:1.5cqw; color:rgba(237,239,243,.55) }
.qpm-auto__pedido{ left:4%; top:6%; width:23cqw }
.qpm-auto__wa{ left:3.5%; top:57%; width:27cqw }
.qpm-auto__wa p{ margin:0; font-size:1.7cqw }
.qpm__visto{ display:flex; justify-content:flex-end; color:rgba(237,239,243,.7) }
.qpm__visto svg{ width:1.7cqw; height:1.7cqw; margin-left:-.9cqw }
.qpm-auto__hoja{ left:41%; top:6%; width:32cqw; padding:1cqw 1.2cqw; gap:0; font-size:1.5cqw }
.qpm__fila{ display:grid; grid-template-columns:.8fr 1.2fr .9fr 1fr; gap:.8cqw; padding:.65cqw .4cqw; border-top:1px solid rgba(237,239,243,.07) }
.qpm__fila.-cab{ border-top:0; color:rgba(237,239,243,.45) }
.qpm__fila.-nueva{ border-radius:.5cqw }
.qpm-auto__mail{ left:69%; top:77%; width:25cqw }
.qpm-auto__cuenta{ --hecho:0; position:absolute; right:4.5%; top:7%; text-align:right; display:grid; gap:.2cqw }
.qpm-auto__cuenta .qpm__num{ font-size:8cqw; line-height:.95; font-weight:400; letter-spacing:-.04em; font-variant-numeric:tabular-nums }

/* ── Automatización v2: las apps de verdad, en miniatura, y una cámara que las recorre ── */
.qpa__cam{ position:absolute; inset:0; will-change:transform }
.qpa .qpm__via{ stroke:rgba(237,239,243,.12); stroke-width:2.4 }
.qpa__luz{ fill:none; stroke-width:3.4; stroke-linecap:round }
.qpa__halo{ fill:none; stroke-width:18; stroke-linecap:round; opacity:.25; filter:blur(4px) }
.qpa__cabeza{ filter:drop-shadow(0 0 10px currentColor) }
.qpa__app{ --on:0; --glow:rgba(237,239,243,.3); position:absolute; border-radius:1.2cqw; overflow:hidden;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size:1.45cqw; line-height:1.35;
  box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 3cqw 6cqw rgba(0,0,0,.5), 0 0 calc(8cqw * var(--on)) calc(.8cqw * var(--on)) var(--glow) }
.qpa__app b{ font-weight:600; font-size:inherit; letter-spacing:0; color:inherit }
.qpa__barra{ display:flex; align-items:center; gap:.9cqw; padding:1cqw 1.3cqw }
.qpa__barra > span:last-child:not(.qpa__logo){ margin-left:auto }
.qpa__logo{ width:2.2cqw; height:2.2cqw; display:block; flex:none }
.qpa__logo svg{ width:100%; height:100%; display:block }
.qpa__suave{ opacity:.6; font-size:.92em }
/* Shopify: el admin claro, insignias de Polaris */
.qpa__app.-shop{ --glow:rgba(149,191,71,.5); left:3cqw; top:4cqw; width:34cqw; background:#F1F1F1; color:#303030 }
.-shop .qpa__barra{ background:#fff; box-shadow:0 1px 0 #E3E3E3 }
.qpa__logo.-shop{ color:#95BF47 }
.qpa__cuerpo{ padding:1.2cqw 1.3cqw 1.4cqw; display:grid; gap:.6cqw; background:#fff; margin:1cqw; border-radius:.9cqw; box-shadow:0 0 0 1px #E3E3E3 }
.qpa__fila1{ display:flex; align-items:center; gap:.7cqw }
.qpa__fila1 b{ font-size:1.25em }
.qpa__badge{ font-size:.85em; padding:.2cqw .8cqw; border-radius:.6cqw; font-weight:500 }
.qpa__badge.-pagado{ background:#E3E3E3; color:#303030 }
.qpa__badge.-prep{ background:#FFEB78; color:#4F4700 }
.qpa__item{ display:grid; grid-template-columns:5.6cqw 1fr auto; gap:1cqw; align-items:center; padding-top:.6cqw; border-top:1px solid #EBEBEB }
.qpa__item img{ width:5.6cqw; height:5.6cqw; object-fit:cover; border-radius:.6cqw; display:block }
.qpa__item div{ display:grid; gap:.15cqw }
.qpa__toast{ position:absolute; left:50%; bottom:1.2cqw; translate:-50% 0; white-space:nowrap; background:#303030; color:#fff; border-radius:.8cqw; padding:.7cqw 1.2cqw; display:flex; align-items:center; gap:.7cqw; font-size:.95em; box-shadow:0 1cqw 2cqw rgba(0,0,0,.3) }
.qpa__punto{ width:.8cqw; height:.8cqw; border-radius:50%; background:#95BF47; box-shadow:0 0 0 .35cqw rgba(149,191,71,.3) }
/* WhatsApp: modo oscuro de verdad */
.qpa__app.-wa{ --glow:rgba(37,211,102,.45); left:4cqw; top:38cqw; width:31cqw; background:#0B141A; color:#E9EDEF }
.-wa .qpa__barra{ background:#202C33 }
.-wa .qpa__barra div{ display:grid }
.qpa__avatar{ width:2.8cqw; height:2.8cqw; border-radius:50%; display:grid; place-items:center; background:#6A7175; color:#fff; font-weight:600 }
.qpa__estado{ font-size:.85em; color:#8696A0 }
.qpa__logo.-wa{ color:#25D366; margin-left:auto }
.qpa__chat{ min-height:13cqw; padding:1.4cqw; display:flex; align-items:flex-end; justify-content:flex-end;
  background:radial-gradient(circle at 1px 1px, rgba(233,237,239,.05) 1px, transparent 1.3px) 0 0 / 1.6cqw 1.6cqw, #0B141A }
.qpa__burbuja{ max-width:88%; background:#005C4B; border-radius:.9cqw .2cqw .9cqw .9cqw; padding:.8cqw 1cqw .5cqw; display:grid; gap:.2cqw; position:relative }
.qpa__burbuja::after{ content:""; position:absolute; right:-.8cqw; top:0; border:.5cqw solid transparent; border-left-color:#005C4B; border-top-color:#005C4B }
.qpa__msg{ margin:0; min-height:2.6em }
.qpa__hora{ justify-self:end; font-size:.78em; color:rgba(233,237,239,.6); display:flex; gap:.3cqw; align-items:center }
.qpa__vistos{ display:flex; color:#8696A0 } .qpa__vistos svg{ width:1.4cqw; height:1.4cqw } .qpa__vistos svg + svg{ margin-left:-.75cqw }
/* Google Sheets */
.qpa__app.-gs{ --glow:rgba(52,168,83,.45); left:56cqw; top:2.5cqw; width:40.5cqw; background:#fff; color:#202124 }
.qpa__logo.-gs{ color:#34A853 }
.qpa__fx{ display:flex; gap:1cqw; align-items:center; padding:.5cqw 1.3cqw; border-top:1px solid #E1E3E1; border-bottom:1px solid #E1E3E1; color:#3C4043; min-height:2.6cqw }
.qpa__fx i{ font-style:italic; color:#80868B }
.qpa__grid{ display:grid; grid-template-columns:2.8cqw .8fr 1.1fr .9fr 1.1fr; font-size:.95em }
.qpa__grid span{ border-right:1px solid #E1E3E1; border-bottom:1px solid #E1E3E1; padding:.45cqw .6cqw; min-height:2.9cqw; display:flex; align-items:center; white-space:nowrap; overflow:hidden }
.qpa__grid .-c, .qpa__grid .-n{ background:#F8F9FA; color:#5F6368; justify-content:center; font-size:.85em; min-height:2.2cqw }
.qpa__grid .-h{ font-weight:600 }
.qpa__chip{ font-style:normal; font-size:.85em; padding:.15cqw .7cqw; border-radius:2cqw }
.qpa__chip.-env{ background:#C6DBFA; color:#0B57D0 }
.qpa__chip.-pag{ background:#D4EDBC; color:#11734B }
.qpa__sel{ position:absolute; left:0; top:0; width:0; height:0; box-shadow:inset 0 0 0 2px #1A73E8; pointer-events:none }
/* Gmail: redactar */
.qpa__app.-gm{ --glow:rgba(234,67,53,.45); left:57.5cqw; top:37cqw; width:38.5cqw; background:#fff; color:#1F1F1F }
.-gm .qpa__barra{ background:#F2F6FC; color:#041E49 }
.qpa__logo.-gm{ color:#EA4335 }
.qpa__campo{ display:flex; gap:1cqw; padding:.7cqw 1.3cqw; border-bottom:1px solid #EDEDED }
.qpa__texto{ display:grid; gap:.7cqw; padding:1.1cqw 1.3cqw }
.qpa__texto i{ display:block; height:.7cqw; border-radius:.4cqw; background:#ECEDEF }
.qpa__adj{ margin:0 1.3cqw; display:flex; gap:.8cqw; align-items:center; border:1px solid #DADCE0; border-radius:.6cqw; padding:.6cqw .8cqw; width:max-content }
.qpa__pdf{ background:#EA4335; color:#fff; font-weight:700; font-size:.7em; padding:.25cqw .45cqw; border-radius:.25cqw }
.qpa__pie{ padding:1.1cqw 1.3cqw }
.qpa__enviar{ display:inline-block; background:#0B57D0; color:#fff; border-radius:2cqw; padding:.6cqw 1.9cqw; font-weight:500 }
.qpa__snack{ position:absolute; left:1.3cqw; right:1.3cqw; bottom:1.1cqw; background:#202124; color:#E8EAED; border-radius:.5cqw; padding:.8cqw 1.1cqw; display:flex; gap:1.5cqw; align-items:center; box-shadow:0 1cqw 2cqw rgba(0,0,0,.3) }
.qpa__snack span{ color:#8AB4F8; font-weight:500 } .qpa__snack span:first-of-type{ margin-left:auto }
/* el motor del centro */
.qpa__motor{ --on:0; position:absolute; left:42.5cqw; top:26.9cqw; width:15cqw; height:15cqw; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle, #171B22, #0E1116 70%);
  box-shadow:0 0 0 1px rgba(237,239,243,.1), 0 0 calc(6cqw * var(--on)) rgba(237,239,243,calc(.25 * var(--on))) }
.qpa__giro{ position:absolute; inset:-.5cqw; border-radius:50%; opacity:.25;
  background:conic-gradient(from 0deg, transparent, #95BF47, #25D366, #34A853, #EA4335, transparent 80%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - .35cqw), #000 calc(100% - .3cqw)); mask:radial-gradient(farthest-side, transparent calc(100% - .35cqw), #000 calc(100% - .3cqw)) }
.qpa__motor.-gira .qpa__giro{ opacity:1; animation:qpa-gira 1.1s linear infinite }
@keyframes qpa-gira{ to{ rotate:1turn } }
.qpa__nucleo{ display:grid; justify-items:center; gap:.2cqw; color:#EDEFF3 }
.qpa__num{ font-size:5.2cqw; line-height:1; font-weight:400 !important; letter-spacing:-.04em; font-variant-numeric:tabular-nums }
.qpa__nucleo span{ font-size:1.2cqw; color:rgba(237,239,243,.6) }
@media (prefers-reduced-motion:reduce){ .qpa__motor.-gira .qpa__giro{ animation:none } }
.qpa__app.-shop{ padding-bottom:4.6cqw } .qpa__app.-shop .qpa__toast{ bottom:1cqw }

/* el motor es el ECLIPSE de Caliber (el de la «o» del blog y el menú) */
.qpa__motor{ background:none; box-shadow:none; overflow:visible }
.qpa__sol, .qpa__luna{ position:absolute; inset:2.2cqw; border-radius:50% }
.qpa__sol{ background:radial-gradient(circle at 38% 34%, #FFFFFF, #EDEFF3 55%, #C9CED6);
  box-shadow:0 0 1.6cqw rgba(237,239,243,.45), 0 0 5cqw rgba(237,239,243,.18) }
.qpa__luna{ background:#08090C; display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px rgba(237,239,243,calc(.14 + .3 * var(--on))), 0 0 calc(4cqw * var(--on)) rgba(237,239,243,calc(.35 * var(--on))) }
.qpa__giro{ inset:.9cqw }
.qpa__rayos{ position:absolute; inset:-3.5cqw; border-radius:50%;
  background:repeating-conic-gradient(from 0deg, transparent 0deg 2.1deg, rgba(237,239,243,.55) 2.4deg, transparent 2.7deg 5.6deg);
  -webkit-mask:radial-gradient(closest-side, transparent 48%, #000 54%, transparent 98%); mask:radial-gradient(closest-side, transparent 48%, #000 54%, transparent 98%);
  animation:qpa-gira 90s linear infinite }
.qpa__nucleo{ font-family:'Switzer', -apple-system, sans-serif }
.qpa__num{ font-size:4.4cqw }
.qpa__nucleo span{ font-size:1.05cqw }
.qpa__motor.-gira .qpa__giro{ opacity:.9 }
@media (prefers-reduced-motion:reduce){ .qpa__rayos{ animation:none } }

/* ── Sitio con sistema · reservas (qpr) ── */
.qpa__toque{ position:absolute; left:50%; top:50%; width:5cqw; height:5cqw; margin:-2.5cqw 0 0 -2.5cqw; border-radius:50%; background:rgba(47,107,255,.35); pointer-events:none }
.qpr__tel{ position:absolute; left:6.5cqw; top:8cqw; width:24cqw; aspect-ratio:9/18.6; border-radius:3.6cqw; padding:.75cqw; background:linear-gradient(145deg,#3A3D44,#16181C);
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 3cqw 6cqw rgba(0,0,0,.55) }
.qpr__pant{ position:relative; height:100%; border-radius:2.9cqw; overflow:hidden; background:#FBFAF8; color:#1C1D21; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size:1.3cqw;
  padding:1.2cqw 1.4cqw; display:flex; flex-direction:column; gap:1cqw }
.qpr__pant b{ font-weight:600; font-size:inherit; color:inherit }
.qpr__hud{ display:flex; justify-content:space-between; align-items:center; font-size:1.1cqw }
.qpr__hud span{ width:6cqw; height:1.6cqw; border-radius:1cqw; background:#111; margin:0 auto; translate:-1.3cqw 0 }
.qpr__neg{ display:flex; gap:.8cqw; align-items:center } .qpr__neg div{ display:grid }
.qpr__marca{ width:2.6cqw; height:2.6cqw; border-radius:.7cqw; display:grid; place-items:center; background:#1C1D21; color:#FBFAF8; font-weight:600; font-size:1.2cqw; flex:none }
.qpr__serv{ display:flex; justify-content:space-between; align-items:center; padding:.9cqw 1cqw; border-radius:.9cqw; background:#fff; box-shadow:0 0 0 1px #ECEAE6 }
.qpr__serv div{ display:grid }
.qpr__tit{ font-weight:600; font-size:1.2cqw }
.qpr__dias{ display:grid; grid-template-columns:repeat(5,1fr); gap:.5cqw }
.qpr__dias span{ display:grid; justify-items:center; padding:.6cqw 0; border-radius:.8cqw; background:#fff; box-shadow:0 0 0 1px #ECEAE6; font-weight:600 }
.qpr__dias em{ font-style:normal; font-weight:400; font-size:.85em; opacity:.6 }
.qpr__dias .-sel{ background:#1C1D21; color:#fff; box-shadow:none } .qpr__dias .-off{ opacity:.35 }
.qpr__horas{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6cqw }
.qpr__horas span{ position:relative; text-align:center; padding:.75cqw 0; border-radius:.8cqw; box-shadow:inset 0 0 0 1px #DCD9D3; transition:background .25s, color .25s }
.qpr__horas .-off{ opacity:.3; text-decoration:line-through }
.qpr__horas .-sel{ background:#2F6BFF; color:#fff; box-shadow:none }
.qpr__btn{ position:relative; margin-top:auto; text-align:center; padding:1cqw; border-radius:2cqw; background:#D9D7D2; color:#fff; font-weight:600; transition:background .3s }
.qpr__btn.-on{ background:#1C1D21 }
.qpr__listo{ position:absolute; left:.8cqw; right:.8cqw; bottom:.8cqw; background:#fff; border-radius:1.6cqw; padding:1.6cqw 1.4cqw; display:grid; gap:.5cqw; justify-items:start;
  box-shadow:0 -1cqw 3cqw rgba(0,0,0,.12) }
.qpr__ok{ width:2.8cqw; height:2.8cqw; border-radius:50%; background:#17A34A; color:#fff; padding:.5cqw } .qpr__ok svg{ width:100%; height:100%; display:block }
.qpr__ecl{ left:37.2cqw; top:27.5cqw; width:12.5cqw; height:12.5cqw }
.qpr__ecl .qpa__sol, .qpr__ecl .qpa__luna{ inset:1.8cqw }
.qpr__panel{ --glow:rgba(127,167,255,.45); left:52cqw; top:7cqw; width:44cqw; background:#FBFAF8; color:#1C1D21; display:grid; grid-template-columns:4.2cqw 1fr; font-size:1.3cqw }
.qpr__lado{ background:#16181D; display:grid; align-content:start; justify-items:center; gap:1.4cqw; padding:1.2cqw 0 }
.qpr__lado .qpr__marca{ background:#FBFAF8; color:#16181D; width:2.4cqw; height:2.4cqw }
.qpr__lado i{ width:1.8cqw; height:.35cqw; border-radius:1cqw; background:rgba(255,255,255,.22) } .qpr__lado i.-on{ background:#7FA7FF }
.qpr__main{ padding:1.3cqw 1.5cqw; display:grid; gap:1.1cqw }
.qpr__cab{ display:flex; justify-content:space-between; align-items:center } .qpr__cab div{ display:grid } .qpr__cab b{ font-size:1.5cqw }
.qpr__campana{ position:relative; width:2.4cqw; height:2.4cqw; color:#1C1D21 } .qpr__campana svg{ width:100%; height:100%; display:block }
.qpr__campana i{ position:absolute; right:.1cqw; top:.1cqw; width:.8cqw; height:.8cqw; border-radius:50%; background:#E5484D; opacity:0; transition:opacity .2s } .qpr__campana.-hay i{ opacity:1 }
.qpr__kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8cqw }
.qpr__kpis > div{ background:#fff; border-radius:.9cqw; padding:.9cqw 1cqw; display:grid; gap:.3cqw; box-shadow:0 0 0 1px #ECEAE6 }
.qpr__kpis b{ font-size:2.2cqw; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.qpr__barra{ display:block; height:.4cqw; border-radius:1cqw; background:#ECEAE6; overflow:hidden } .qpr__barra i{ display:block; height:100%; background:#2F6BFF }
.qpr__dia{ display:grid; grid-template-columns:4cqw 1fr; gap:.6cqw .8cqw; align-items:stretch }
.qpr__h{ font-size:1.1cqw; opacity:.5; padding-top:.5cqw }
.qpr__cita{ border-radius:.8cqw; padding:.7cqw 1cqw; display:grid; gap:.1cqw; min-height:4.2cqw }
.qpr__cita span{ opacity:.7; font-size:.92em }
.qpr__cita.-a{ background:#F1ECFF } .qpr__cita.-b{ background:#E7F4EE } .qpr__cita.-c{ background:#FFF1E6 }
.qpr__hueco{ border-radius:.8cqw; box-shadow:inset 0 0 0 1px #E3E0DA; min-height:4.2cqw }
.qpr__cita.-nueva{ position:relative; background:#2F6BFF; color:#fff; height:100%; box-shadow:0 1cqw 2.4cqw rgba(47,107,255,.35) }
.qpr__cita.-nueva span{ opacity:.85 }
.qpr__cita.-nueva em{ position:absolute; right:1cqw; top:.8cqw; font-style:normal; font-size:.85em; background:rgba(255,255,255,.22); padding:.15cqw .7cqw; border-radius:1cqw }
.qpr__toast{ position:absolute; right:4.4cqw; top:1.5cqw; background:#16181D; color:#fff; border-radius:.9cqw; padding:.7cqw 1.1cqw; display:flex; gap:.7cqw; align-items:center; font-size:1.15cqw; box-shadow:0 1cqw 2cqw rgba(0,0,0,.25) }
.qpr__toast .qpa__punto{ background:#7FA7FF; box-shadow:0 0 0 .35cqw rgba(127,167,255,.3) }

/* ── Sistema para tu empresa · cotizador (qpc) ── */
.qpc__cfg{ --glow:rgba(245,185,65,.45); left:4cqw; top:11.5cqw; width:38cqw; background:#14161B; color:#EDEFF3 }
.qpc__cfg .qpa__barra{ background:#1B1E25; box-shadow:0 1px 0 rgba(255,255,255,.06) }
.qpc__marca{ width:2.4cqw; height:2.4cqw; border-radius:.6cqw; display:grid; place-items:center; background:#F5B941; color:#14161B; font-weight:700; font-size:1.2cqw; flex:none }
.qpc__marca.-g{ background:#14161B; color:#F5B941 }
.qpc__cuerpo{ padding:1.3cqw 1.5cqw 1.5cqw; display:grid; gap:1.05cqw }
.qpc__campo{ display:grid; gap:.4cqw }
.qpc__fila{ display:flex; justify-content:space-between; align-items:baseline }
.qpc__pers{ font-size:1.9cqw; font-variant-numeric:tabular-nums }
.qpc__slider{ position:relative; height:.5cqw; border-radius:1cqw; background:rgba(255,255,255,.1); margin:.6cqw 0 .2cqw }
.qpc__fill{ position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg,#F5B941,#FFD27A) }
.qpc__thumb{ position:absolute; top:50%; width:1.9cqw; height:1.9cqw; margin:-.95cqw 0 0 -.95cqw; border-radius:50%; background:#fff; box-shadow:0 0 0 .4cqw rgba(245,185,65,.35), 0 .4cqw 1cqw rgba(0,0,0,.4) }
.qpc__op{ position:relative; display:flex; justify-content:space-between; align-items:center; padding:.8cqw 1cqw; border-radius:.8cqw; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06) }
.qpc__sw{ position:relative; width:3.4cqw; height:1.9cqw; border-radius:2cqw; background:rgba(255,255,255,.16); transition:background .3s }
.qpc__sw::after{ content:""; position:absolute; left:.25cqw; top:.25cqw; width:1.4cqw; height:1.4cqw; border-radius:50%; background:#fff; transition:translate .35s cubic-bezier(.23,1,.32,1) }
.qpc__sw.-on{ background:#F5B941 } .qpc__sw.-on::after{ translate:1.5cqw 0 }
.qpc__total{ display:flex; justify-content:space-between; align-items:baseline; padding-top:.9cqw; border-top:1px solid rgba(255,255,255,.08) }
.qpc__tot{ font-size:2.6cqw; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:#FFD27A }
.qpc__btn{ position:relative; text-align:center; padding:1cqw; border-radius:.9cqw; background:#F5B941; color:#14161B; font-weight:600; transition:background .3s }
.qpc__btn.-on{ background:#FFD27A }
.qpc__ecl{ left:44.5cqw; top:28.5cqw; width:12.5cqw; height:12.5cqw }
.qpc__ecl .qpa__sol, .qpc__ecl .qpa__luna{ inset:1.8cqw }
.qpc__ecl .qpa__num{ font-size:3.4cqw } .qpc__ecl .qpa__nucleo span{ font-size:.85cqw; text-align:center; max-width:6cqw }
.qpc__pdf{ --on:0; position:absolute; left:61cqw; top:10cqw; width:34cqw }
.qpc__hoja{ position:relative; background:#fff; color:#1C1D21; border-radius:.6cqw; padding:2.4cqw 2.4cqw 2.2cqw; display:grid; gap:1.9cqw; font-family:-apple-system, "Segoe UI", Roboto, sans-serif; font-size:1.3cqw;
  box-shadow:0 3cqw 6cqw rgba(0,0,0,.5), 0 0 calc(8cqw * var(--on)) calc(.8cqw * var(--on)) rgba(61,214,140,.4) }
.qpc__hoja b{ font-weight:600; font-size:inherit; color:inherit }
.qpc__enc{ display:flex; gap:.9cqw; align-items:center } .qpc__enc div{ display:grid } .qpc__enc div span{ opacity:.55; font-size:.9em }
.qpc__fecha{ margin-left:auto; opacity:.55; font-size:.9em }
.qpc__para{ display:grid; gap:.15cqw } .qpc__para span{ opacity:.55; font-size:.9em }
.qpc__tabla{ display:grid }
.qpc__tabla > div{ display:grid; grid-template-columns:1fr 3.5cqw 6cqw; gap:.6cqw; padding:.65cqw 0; border-bottom:1px solid #EEE }
.qpc__tabla > div span:not(:first-child){ text-align:right; font-variant-numeric:tabular-nums }
.qpc__tabla .-h{ font-size:.85em; opacity:.5; border-bottom:1px solid #DDD }
.qpc__l.-t{ border-bottom:0; font-weight:600; font-size:1.1em }
.qpc__firma{ display:flex; justify-content:space-between; align-items:end; opacity:.55; font-size:.9em } .qpc__firma i{ width:9cqw; height:1px; background:#1C1D21 }
.qpc__hoja.-ok::after{ content:"APROBADA"; position:absolute; left:2.2cqw; bottom:1.4cqw; rotate:-8deg; border:.25cqw solid #12A160; color:#12A160; font-weight:700; letter-spacing:.12em; font-size:1.4cqw; padding:.3cqw 1cqw; border-radius:.4cqw; opacity:.9 }
.qpc__estados{ display:flex; gap:.6cqw; margin-top:1.4cqw; justify-content:center }
.qpc__estados span{ font-size:1.15cqw; padding:.45cqw 1.2cqw; border-radius:2cqw; background:rgba(255,255,255,.06); color:rgba(237,239,243,.75); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); transition:background .3s, color .3s }
.qpc__estados span.-on{ background:#EDEFF3; color:#08090C }
.qpc__estados .-e3.-on{ background:#3DD68C; color:#05261A }

/* ── Mejorar · auditoría / puesta a punto (qps) ── */
.qps__nav{ --glow:rgba(255,93,93,.4); left:4cqw; top:7cqw; width:53cqw; background:#fff; color:#1C1D21; overflow:visible }
.qpa.-antes .qps__nav, .qps__nav{ border-radius:1.2cqw }
.qps__chrome{ display:flex; align-items:center; gap:.6cqw; padding:.9cqw 1.2cqw; background:#EEEEF0; border-radius:1.2cqw 1.2cqw 0 0 }
.qps__chrome i{ width:1cqw; height:1cqw; border-radius:50%; background:#D3D3D7 } .qps__chrome i:first-child{ background:#FF5F57 } .qps__chrome i:nth-child(2){ background:#FEBC2E } .qps__chrome i:nth-child(3){ background:#28C840 }
.qps__url{ margin-left:1.4cqw; flex:1; display:flex; gap:.6cqw; align-items:center; background:#fff; border-radius:2cqw; padding:.4cqw 1.2cqw; font-size:1.2cqw; color:#55575E }
.qps__candado{ width:1.4cqw; height:1.4cqw; display:block; color:#16A34A } .qps__candado svg{ width:100%; height:100%; display:block }
.qps__pag{ position:relative; padding:1.4cqw 1.8cqw 1.8cqw; display:grid; gap:1.6cqw; overflow:hidden; border-radius:0 0 1.2cqw 1.2cqw }
.qps__menu{ display:flex; gap:1.6cqw; align-items:center; font-size:1.3cqw } .qps__menu span{ width:4cqw; height:.6cqw; border-radius:1cqw; background:#E4E4E7 } .qps__menu span:first-of-type{ margin-left:auto }
.qps__hero{ display:grid; grid-template-columns:1fr 1fr; gap:1.8cqw; align-items:center }
.qps__hero > div:first-child{ display:grid; gap:.8cqw }
.qps__hero i{ display:block; height:1.4cqw; border-radius:.4cqw; background:#1C1D21 } .qps__hero .-t2{ width:80% } .qps__hero .-t3{ height:.7cqw; width:90%; background:#D4D4D8; margin-top:.4cqw }
.qps__btn{ justify-self:start; margin-top:.6cqw; padding:.8cqw 1.6cqw; border-radius:2cqw; background:#16181D; color:#fff; font-size:1.2cqw; font-weight:600; transition:background .5s, color .5s }
.qps__img{ aspect-ratio:4/3; border-radius:.9cqw; background:linear-gradient(135deg,#C7D2FE,#FBCFE8 60%,#FDE68A) }
.qps__prods{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2cqw } .qps__prods i{ aspect-ratio:1; border-radius:.8cqw; background:#F1F1F4 }
.qpa.-antes .qps__btn{ background:#E9E9EC; color:#C3C3C8 }
.qpa.-antes .qps__img{ filter:blur(2px) saturate(.7) }
.qps__scan{ position:absolute; left:0; right:0; top:0; height:4cqw; translate:0 -50%; background:linear-gradient(180deg, transparent, rgba(255,93,93,.18) 45%, rgba(255,93,93,.9) 50%, rgba(255,93,93,.18) 55%, transparent); pointer-events:none }
.qps__marca{ position:absolute; display:flex; align-items:center; gap:.6cqw; z-index:2 }
.qps__pin{ width:2.4cqw; height:2.4cqw; border-radius:50%; display:grid; place-items:center; background:#FF5D5D; color:#fff; font-style:normal; font-weight:700; font-size:1.3cqw; box-shadow:0 0 0 .5cqw rgba(255,93,93,.25); padding:.45cqw; transition:background .3s, box-shadow .3s }
.qps__pin svg{ width:100%; height:100%; display:block }
.qps__marca em{ font-style:normal; white-space:nowrap; background:#16181D; color:#fff; font-size:1.15cqw; padding:.45cqw .9cqw; border-radius:.6cqw; box-shadow:0 .8cqw 1.6cqw rgba(0,0,0,.25) }
.qps__marca.-ok .qps__pin{ background:#22C55E; box-shadow:0 0 0 .5cqw rgba(34,197,94,.25) }
.qps__marca.m1{ left:24cqw; top:-1.2cqw } .qps__marca.m2{ left:34cqw; top:13cqw } .qps__marca.m3{ left:15.5cqw; top:21.2cqw } .qps__marca.m4{ left:9cqw; top:4.6cqw }
.qps__nota{ --glow:rgba(255,93,93,.4); left:62.5cqw; top:7cqw; width:33.5cqw; background:#14161B; color:#EDEFF3 }
.qpa.-antes .qps__nota, .qps__nota{ }
.qps__nota .qpa__barra{ background:#1B1E25 }
.qps__anillos{ display:grid; grid-template-columns:repeat(3,1fr); gap:1cqw; padding:1.6cqw 1.4cqw .6cqw }
.qps__an{ position:relative; display:grid; justify-items:center; gap:.5cqw }
.qps__an svg{ width:8.4cqw; height:8.4cqw; rotate:-90deg }
.qps__an circle{ fill:none; stroke-width:3.6; stroke-linecap:round } .qps__an .-f{ stroke:rgba(255,255,255,.08) }
.qps__an b{ position:absolute; top:2.6cqw; font-size:2.3cqw; font-weight:500; font-variant-numeric:tabular-nums }
.qps__an span{ font-size:1.05cqw; color:rgba(237,239,243,.6) }
.qps__res{ display:flex; gap:1cqw; align-items:baseline; padding:1cqw 1.6cqw 1.6cqw; border-top:1px solid rgba(255,255,255,.06) }
.qps__cuenta{ font-size:3cqw; font-weight:500 } .qps__res span{ color:rgba(237,239,243,.7) }
.qps__ecl{ left:73cqw; top:45cqw; width:12cqw; height:12cqw }
.qps__ecl .qpa__sol, .qps__ecl .qpa__luna{ inset:1.7cqw }

/* ── Mejorar · diagnóstico de operación (qpd) ── */
.qpd__pieza{ position:absolute; display:flex; gap:1cqw; align-items:center; padding:1.2cqw 1.4cqw; border-radius:1.1cqw; background:#14161B; color:#EDEFF3; font-size:1.35cqw;
  box-shadow:0 0 0 1px rgba(255,93,93,.25), 0 2cqw 4cqw rgba(0,0,0,.45) }
.qpd__pieza div{ display:grid } .qpd__pieza b{ font-weight:600 } .qpd__pieza div span{ color:rgba(237,239,243,.6); font-size:.92em }
.qpd__pieza .qpa__logo{ width:2.6cqw; height:2.6cqw }
.qpd__ic{ width:2.6cqw; height:2.6cqw; display:grid; place-items:center; border-radius:.6cqw; background:rgba(255,255,255,.08); font-size:1.5cqw }
.qpd__pieza.d1{ left:4cqw; top:7cqw } .qpd__pieza.d2{ left:27cqw; top:20cqw } .qpd__pieza.d3{ left:5cqw; top:37cqw } .qpd__pieza.d4{ left:24cqw; top:51cqw }
.qpm__via.-roja{ stroke-dasharray:6 8 }
.qpd__fuga{ position:absolute; display:flex; gap:.6cqw; align-items:center; font-size:1.1cqw; color:#FFB4B4; background:rgba(255,93,93,.12); border-radius:2cqw; padding:.35cqw .9cqw; box-shadow:inset 0 0 0 1px rgba(255,93,93,.35) }
.qpd__fuga i{ width:.8cqw; height:.8cqw; border-radius:50%; background:#FF5D5D }
.qpd__fuga.f1{ left:15cqw; top:16.5cqw } .qpd__fuga.f2{ left:28cqw; top:34cqw } .qpd__fuga.f3{ left:3cqw; top:48.5cqw }
.qpd__ecl{ left:45cqw; top:28cqw; width:12cqw; height:12cqw } .qpd__ecl .qpa__sol, .qpd__ecl .qpa__luna{ inset:1.7cqw }
.qpd__inf{ --glow:rgba(255,138,91,.45); left:61cqw; top:13cqw; width:35cqw; background:#FBFAF8; color:#1C1D21 }
.qpd__inf .qpa__barra{ box-shadow:0 1px 0 #ECEAE6 }
.qpd__cuerpo{ padding:1.4cqw 1.6cqw 1.8cqw; display:grid; gap:1cqw }
.qpd__big{ display:flex; gap:1.2cqw; align-items:center; padding-bottom:1cqw; border-bottom:1px solid #ECEAE6 }
.qpd__horas{ font-size:5.4cqw !important; font-weight:400 !important; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; color:#E8603C !important }
.qpd__big span{ font-size:1.25cqw; opacity:.7 }
.qpd__l{ display:grid; grid-template-columns:auto 1fr auto; gap:.9cqw; align-items:center; font-size:1.25cqw }
.qpd__l em{ font-style:normal; font-size:.85em; padding:.15cqw .7cqw; border-radius:1cqw }
.qpd__l .-p1{ background:#FFE4DA; color:#B23B12 } .qpd__l .-p2{ background:#EEF0F3; color:#4A5160 }

/* ── Operar · hosting (qph) ── */
.qph__dom{ --glow:rgba(61,214,140,.4); left:4cqw; top:9cqw; width:44cqw; background:#14161B; color:#EDEFF3; padding:1.6cqw 1.8cqw; display:grid; gap:1.1cqw }
.qph__url{ display:flex; gap:.8cqw; align-items:center; font-size:1.7cqw } .qph__url .qps__candado{ width:2cqw; height:2cqw; color:#3DD68C }
.qph__vivo{ margin-left:auto; display:flex; gap:.6cqw; align-items:center; font-size:1.1cqw; color:#3DD68C } .qph__vivo i{ width:.9cqw; height:.9cqw; border-radius:50%; background:#3DD68C; box-shadow:0 0 0 .4cqw rgba(61,214,140,.25) }
.qph__f{ display:flex; justify-content:space-between; gap:1cqw; font-size:1.2cqw; padding:.7cqw 0; border-top:1px solid rgba(255,255,255,.06) } .qph__f span{ color:rgba(237,239,243,.6) }
.qph__upd{ color:#F5B941 } .qph__upd.-ok{ color:#3DD68C }
.qph__barras{ display:grid; grid-template-columns:repeat(30,1fr); gap:.3cqw; height:5cqw; align-items:end; margin-top:.6cqw }
.qph__barras i{ height:100%; border-radius:.2cqw; background:#3DD68C } .qph__barras i:nth-child(18){ background:#F5B941 }
.qph__pie{ display:flex; gap:1cqw; align-items:baseline } .qph__pct{ font-size:2.6cqw; font-weight:500; font-variant-numeric:tabular-nums } .qph__pie span{ font-size:1.15cqw; color:rgba(237,239,243,.6) }
.qph__ecl{ left:50.5cqw; top:28cqw; width:11cqw; height:11cqw } .qph__ecl .qpa__sol, .qph__ecl .qpa__luna{ inset:1.5cqw }
.qph__res{ --glow:rgba(61,214,140,.4); left:64cqw; top:9cqw; width:32cqw; background:#FBFAF8; color:#1C1D21 }
.qph__res .qpa__barra{ box-shadow:0 1px 0 #ECEAE6 }
.qph__lista{ padding:1cqw 1.4cqw 6cqw; display:grid; gap:.7cqw }
.qph__r{ display:grid; grid-template-columns:auto 1fr auto; gap:.8cqw; align-items:center; font-size:1.2cqw } .qph__r span:nth-child(2){ opacity:.6 }
.qph__ok{ width:1.9cqw; height:1.9cqw; border-radius:50%; background:#22C55E; color:#fff; padding:.35cqw } .qph__ok svg{ width:100%; height:100%; display:block }
.qph__toast{ position:absolute; left:1.4cqw; right:1.4cqw; bottom:1.2cqw; background:#16181D; color:#fff; border-radius:.9cqw; padding:.8cqw 1.1cqw; display:flex; gap:.7cqw; align-items:center; font-size:1.15cqw }
.qph__toast .qpa__punto{ background:#3DD68C; box-shadow:0 0 0 .35cqw rgba(61,214,140,.3) }

/* ── Operar · monitoreo (qpo) ── */
.qpo__g{ --glow:rgba(127,167,255,.35); left:4cqw; top:6cqw; width:62cqw; background:#14161B; color:#EDEFF3; transition:box-shadow .4s }
.qpo__g.-alerta{ --glow:rgba(255,93,93,.55); --on:1 }
.qpo__g .qpa__barra{ background:#1B1E25 }
.qpo__area{ position:relative; height:24cqw; margin:1.4cqw 1.6cqw .4cqw 4.6cqw }
.qpo__area svg{ width:100%; height:100%; display:block; overflow:visible }
.qpo__rej{ stroke:rgba(255,255,255,.06); stroke-width:1; fill:none }
.qpo__lin{ fill:none; stroke:#7FA7FF; stroke-width:2.6; stroke-linejoin:round; vector-effect:non-scaling-stroke }
.qpo__g.-alerta .qpo__lin{ stroke:#FF5D5D }
.qpo__rel{ display:none }
.qpo__eje{ position:absolute; left:-4cqw; font-size:1cqw; color:rgba(237,239,243,.45) } .qpo__eje.-a{ top:1cqw } .qpo__eje.-b{ bottom:2cqw }
.qpo__pie{ display:grid; grid-template-columns:repeat(3,1fr); gap:1cqw; padding:1.2cqw 1.6cqw 1.6cqw; border-top:1px solid rgba(255,255,255,.06) }
.qpo__pie div{ display:grid; gap:.2cqw } .qpo__pie b{ font-size:2cqw; font-weight:500; font-variant-numeric:tabular-nums }
.qpo__g.-alerta .qpo__ms{ color:#FF5D5D }
.qpo__alerta{ position:absolute; left:69cqw; top:9cqw; width:27cqw; display:flex; gap:1cqw; align-items:flex-start; padding:1.3cqw 1.4cqw; border-radius:1.1cqw; background:#2A1416; color:#FFE1E1; font-size:1.25cqw;
  box-shadow:0 0 0 1px rgba(255,93,93,.4), 0 2cqw 4cqw rgba(0,0,0,.45), 0 0 5cqw rgba(255,93,93,.25) }
.qpo__alerta div{ display:grid; gap:.3cqw } .qpo__alerta b{ font-weight:600 } .qpo__alerta span{ opacity:.7; font-size:.92em }
.qpo__dot{ flex:none; width:1.2cqw; height:1.2cqw; margin-top:.3cqw; border-radius:50%; background:#FF5D5D; box-shadow:0 0 0 .45cqw rgba(255,93,93,.25) }
.qpo__alerta.-ok{ top:42cqw; background:#10241A; color:#D6F7E5; box-shadow:0 0 0 1px rgba(61,214,140,.4), 0 2cqw 4cqw rgba(0,0,0,.45), 0 0 5cqw rgba(61,214,140,.25) }
.qpo__alerta.-ok .qpo__dot{ background:#3DD68C; box-shadow:0 0 0 .45cqw rgba(61,214,140,.25) }
.qpo__ecl{ left:76cqw; top:24cqw; width:12cqw; height:12cqw } .qpo__ecl .qpa__sol, .qpo__ecl .qpa__luna{ inset:1.7cqw }

/* ── Operar · campañas (qpk) ── */
.qpk__ig{ --glow:rgba(199,125,255,.45); left:4cqw; top:4cqw; width:21cqw; background:#fff; color:#1C1D21 }
.qpk__cab{ display:flex; gap:.7cqw; align-items:center; padding:.8cqw 1cqw; font-size:1.15cqw } .qpk__cab div{ display:grid } .qpk__cab div span{ font-size:.85em; opacity:.6 }
.qpk__av{ width:2.2cqw; height:2.2cqw; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF); color:#fff; font-weight:700; font-size:1cqw }
.qpa__logo.-meta{ margin-left:auto; color:#0866FF; width:2cqw; height:2cqw }
.qpk__ig img{ display:block; width:100%; aspect-ratio:1; object-fit:cover }
.qpk__cta{ display:flex; justify-content:space-between; padding:.8cqw 1cqw; font-size:1.15cqw; font-weight:600; color:#0866FF; border-top:1px solid #EEE }
.qpk__go{ --glow:rgba(76,139,245,.45); left:4cqw; top:46cqw; width:33cqw; background:#fff; color:#202124 }
.qpk__gcab{ display:flex; gap:.8cqw; align-items:center; padding:.8cqw 1.1cqw; border-bottom:1px solid #EEE } .qpa__logo.-go{ color:#4285F4; width:1.9cqw; height:1.9cqw }
.qpk__busca{ flex:1; font-size:1.15cqw; padding:.35cqw 1cqw; border-radius:2cqw; box-shadow:inset 0 0 0 1px #DFE1E5 }
.qpk__ad{ display:grid; gap:.2cqw; padding:1cqw 1.2cqw 1.2cqw; font-size:1.15cqw }
.qpk__pat{ font-weight:700; font-size:.9em } .qpk__dom{ color:#4D5156; font-size:.92em } .qpk__ad b{ color:#1A0DAB; font-size:1.35em; font-weight:400 } .qpk__ad span:last-child{ color:#4D5156 }
.qpk__ecl{ left:42cqw; top:26cqw; width:12cqw; height:12cqw } .qpk__ecl .qpa__sol, .qpk__ecl .qpa__luna{ inset:1.7cqw }
.qpk__p{ opacity:0; filter:drop-shadow(0 0 6px currentColor) }
.qpk__res{ --glow:rgba(61,214,140,.4); left:60cqw; top:12cqw; width:36cqw; background:#14161B; color:#EDEFF3 }
.qpk__res .qpa__barra{ background:#1B1E25 }
.qpk__kpis{ display:grid; grid-template-columns:1.3fr 1fr .8fr; gap:.8cqw; padding:1.4cqw 1.5cqw .4cqw }
.qpk__kpis div{ display:grid; gap:.25cqw } .qpk__kpis b{ font-size:2.2cqw; font-weight:500; font-variant-numeric:tabular-nums } .qpk__v{ color:#3DD68C }
.qpk__bars{ display:grid; grid-template-columns:repeat(7,1fr); gap:.8cqw; align-items:end; height:16cqw; padding:1.2cqw 1.5cqw 1.6cqw }
.qpk__bars i{ display:block; height:var(--h); border-radius:.4cqw .4cqw .1cqw .1cqw; background:linear-gradient(180deg,#3DD68C,rgba(61,214,140,.25)) }

/* ── Operar · reporte mensual (qpt) ── */
.qpt__doc{ --on:0; position:absolute; left:20cqw; top:4cqw; width:60cqw; padding:2cqw 2.4cqw 2.2cqw; border-radius:1cqw; background:#FBFAF8; color:#1C1D21; display:grid; gap:1.5cqw; font-size:1.25cqw;
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 3cqw 6cqw rgba(0,0,0,.5), 0 0 calc(8cqw * var(--on)) calc(.6cqw * var(--on)) rgba(237,239,243,.25) }
.qpt__doc b{ font-weight:600; font-size:inherit; color:inherit }
.qpt__enc{ display:flex; gap:1cqw; align-items:center } .qpt__enc div{ display:grid } .qpt__enc div b{ font-size:1.6cqw } .qpt__enc div span{ opacity:.55; font-size:.92em }
.qpt__mes{ margin-left:auto; font-size:1.05cqw; padding:.3cqw .9cqw; border-radius:2cqw; background:#08090C; color:#EDEFF3 }
.qpt__ecl{ position:relative; width:3cqw; height:3cqw; border-radius:50%; background:#08090C; flex:none }
.qpt__ecl i{ position:absolute; inset:.45cqw; border-radius:50%; background:#EDEFF3 } .qpt__ecl::after{ content:""; position:absolute; inset:.45cqw; border-radius:50%; background:#08090C; translate:-.45cqw -.2cqw }
.qpt__kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:1cqw }
.qpt__kpis div{ background:#fff; border-radius:.8cqw; padding:1cqw 1.2cqw; display:grid; gap:.2cqw; box-shadow:0 0 0 1px #ECEAE6 }
.qpt__kpis span{ opacity:.6; font-size:.92em } .qpt__kpis b{ font-size:2.3cqw !important; font-weight:500 !important; letter-spacing:-.02em; font-variant-numeric:tabular-nums } .qpt__kpis em{ font-style:normal; color:#16A34A; font-size:.92em }
.qpt__graf{ display:grid; gap:.6cqw } .qpt__graf svg{ width:100%; height:9cqw; display:block; overflow:visible }
.qpt__tit{ font-weight:600; font-size:1.15cqw }
.qpt__lin{ fill:none; stroke:#2F6BFF; stroke-width:2.4; vector-effect:non-scaling-stroke } .qpt__area{ fill:rgba(47,107,255,.10) }
.qpt__dos{ display:grid; grid-template-columns:1fr 1fr; gap:2cqw }
.qpt__col{ display:grid; gap:.7cqw; align-content:start } .qpt__col p{ margin:0; padding-left:1.2cqw; position:relative } .qpt__col p::before{ content:""; position:absolute; left:0; top:.55em; width:.5cqw; height:.5cqw; border-radius:50%; background:#2F6BFF }
.qpt__b{ display:grid; grid-template-columns:6.5cqw 1fr 3cqw; gap:.8cqw; align-items:center; font-size:1.1cqw }
.qpt__b i{ display:block; height:.9cqw; width:var(--w); border-radius:1cqw; background:linear-gradient(90deg,#2F6BFF,#7FA7FF) } .qpt__b b{ text-align:right }
.qpt__mail{ position:absolute; left:28cqw; top:2cqw; width:44cqw; display:flex; gap:1.1cqw; align-items:center; padding:1.2cqw 1.5cqw; border-radius:1.4cqw; background:rgba(28,30,36,.92); color:#EDEFF3; font-size:1.3cqw; z-index:3;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 2cqw 4cqw rgba(0,0,0,.5) }
.qpt__mail div{ display:grid } .qpt__mail b{ font-weight:600 } .qpt__mail span{ opacity:.6; font-size:.92em } .qpt__mail .qpa__logo{ width:2.6cqw; height:2.6cqw }

/* ── EL CAPÍTULO (prototipo · Construir): el scroll cuenta la historia ── */
@media (min-width:901px){
  .qp-art[data-capitulo]{ min-height:calc(6 * 62vh + 100vh); justify-content:flex-start }   /* 🔴 .qp-art centra en vertical: en un capítulo alto el texto quedaba a la mitad */
  .qp-art[data-capitulo] .qp-art__fijo{ position:sticky; top:14vh }
  .qp-art.-vivo .qp-art__prosa, .qp-art.-vivo .qp-gar, .qp-art.-vivo .qp-art__prom{ opacity:.28; transition:opacity .6s ease }
  .qp-art[data-capitulo] .qp-art__prosa, .qp-art[data-capitulo] .qp-gar, .qp-art[data-capitulo] .qp-art__prom{ transition:opacity .6s ease }
  .qp-art.-vivo .qp-serv li{ color:rgba(237,239,243,.32); transition:color .4s ease, padding .5s cubic-bezier(.16,1,.3,1) }
  .qp-art.-vivo .qp-serv li.-activo{ color:var(--tx-1); padding-left:.9rem }
  .qp-art.-vivo .qp-serv li::before{ content:''; position:absolute; left:0; top:50%; width:.45rem; height:.45rem; margin-top:-.22rem; border-radius:50%;
    background:var(--tx-1); transform:scale(0); transition:transform .45s cubic-bezier(.16,1,.3,1) }
  .qp-art.-vivo .qp-serv li.-activo::before{ transform:scale(1) }
  /* la barrita que se llena con el tramo de cada servicio */
  .qp-art.-vivo .qp-serv li.-activo::after{ background:linear-gradient(90deg, var(--tx-1) calc(var(--p,0) * 100%), var(--tx-linea) 0) }
  .qp-fam__escena .monitor{ transition:scale .9s cubic-bezier(.16,1,.3,1) }
  .qp-fam__escena.-capitulo .monitor{ scale:1.08 }
}