/* ==========================================================================
   QUIÉNES SOMOS — texto + escena animada de una llamada en vivo
   La escena (tarjeta de la agente, órbitas y avisos flotantes) se escala con
   --qs-scale. La onda de audio (.qs-wave i) y el cronómetro los genera
   modules/nosotros.js. La onda usa transform: scaleY (no height) para no
   recalcular el diseño de toda la página en cada cuadro.
   ========================================================================== */

.qs { position: relative; overflow: hidden; padding: 70px 0 80px; background: #F5F5F5; --qs-ok: #16A36B; --qs-sky: #E4EFFC; --qs-line: #DCE7F4; --qs-muted: #6A6A6A; --qs-blue-2: #3B8EF5; }

/* Fondo vivo */
.qs-grid-bg { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 30%, transparent 75%);  }
.qs-grid-bg::before { content: ''; position: absolute; top: -130px; left: -260px; right: 0; bottom: 0; background-image: radial-gradient(#C9DAF0 1.2px, transparent 1.2px); background-size: 26px 26px; animation: qs-drift 30s linear infinite; }
/* El patrón se repite cada 26 px: desplazarlo 260×130 px vuelve al mismo dibujo, sin saltos */
@keyframes qs-drift { to { transform: translate(260px, 130px); } }
/* Manchas de color difuminadas: degradado radial (equivale a blur(70px) sin su costo) */
.qs-blob { position: absolute; z-index: 1; border-radius: 50%; opacity: .55; margin: -70px; padding: 70px; box-sizing: content-box; background: radial-gradient(closest-side, var(--blob) 45%, transparent 100%); }
.qs-b1 { width: 520px; height: 520px; --blob: #BCD6FA; right: -80px; top: -60px; animation: qs-float 14s ease-in-out infinite; }
.qs-b2 { width: 340px; height: 340px; --blob: #D8E8FD; left: -120px; bottom: 40px; animation: qs-float 18s ease-in-out infinite reverse; }
@keyframes qs-float { 50% { transform: translate(-40px, 50px) scale(1.08); } }

.qs-top { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

/* Texto */
.qs-eyebrow { display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.qs-eyebrow i { display: block; height: 2px; width: 34px; background: var(--accent); transform-origin: left; }
.qs-title { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 4.1vw, 60px); line-height: 1; white-space: nowrap; letter-spacing: -.035em; margin: 22px 0 26px; color: var(--navy); }
.qs-l { display: block; overflow: hidden; padding-bottom: .06em; }
.qs-l:nth-child(2) { overflow: visible; }
.qs-l > span { display: inline-block; }
.qs-hl { color: var(--accent); position: relative; }
.qs-hl svg { position: absolute; left: 0; bottom: -14px; width: 100%; height: 18px; overflow: visible; }
.qs-hl path { stroke: var(--qs-blue-2); stroke-width: 5; fill: none; stroke-linecap: round; stroke-dasharray: 420; opacity: .5; }
.qs-lead { font-size: 19px; line-height: 1.65; color: #3A3A3A; max-width: 520px; }
.qs-lead b { color: var(--navy); }
.qs-since { margin-top: 28px; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border: 1px solid var(--qs-line); background: #FFFFFF; border-radius: 999px; font-size: 13px; color: var(--qs-muted); }
.qs-since b { color: var(--navy); font-weight: 600; }
.qs-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--qs-ok); position: relative; flex: none; }
.qs-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--qs-ok); animation: qs-ping 1.8s ease-out infinite; }
@keyframes qs-ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* Escena */
.qs-stage-wrap { position: relative; height: 560px; }
.qs-stage { position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; transform: translate(-50%, -50%) scale(var(--qs-scale, 1)); }
.qs-ring { position: absolute; left: 50%; top: 50%; border: 1.5px dashed #BFD3EE; border-radius: 50%; transform: translate(-50%, -50%); }
.qs-r1 { width: 520px; height: 520px; animation: qs-spin 40s linear infinite; }
.qs-r2 { width: 360px; height: 360px; border-style: solid; border-color: #D6E4F6; animation: qs-spin 28s linear infinite reverse; }
@keyframes qs-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.qs-orb { position: absolute; width: 56px; height: 56px; border-radius: 16px; background: #FFFFFF; display: grid; place-items: center; box-shadow: 0 10px 24px -10px rgba(10,121,232,.45); border: 1px solid var(--qs-line); animation: qs-spin-back 40s linear infinite; }
@keyframes qs-spin-back { to { transform: rotate(-360deg); } }
.qs-orb svg { width: 24px; height: 24px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qs-o1 { left: 232px; top: -28px; } .qs-o2 { right: -28px; top: 232px; } .qs-o3 { left: 232px; bottom: -28px; } .qs-o4 { left: -28px; top: 232px; }

.qs-agent { position: absolute; left: 50%; top: 50%; z-index: 3; width: 300px; padding: 22px; transform: translate(-50%, -50%); background: #FFFFFF; border-radius: 26px; border: 1px solid var(--qs-line); box-shadow: 0 40px 80px -30px rgba(7,30,58,.35); }
.qs-photo { position: relative; height: 190px; border-radius: 18px; overflow: hidden; background: linear-gradient(160deg, #DCEBFD, #AFCDF6); }
.qs-photo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.qs-live { position: absolute; top: 12px; left: 12px; display: flex; gap: 7px; align-items: center; padding: 6px 10px; border-radius: 999px; background: rgba(7,30,58,.82); color: #FFFFFF; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.qs-live .qs-dot { width: 7px; height: 7px; background: #FF5A5F; }
.qs-live .qs-dot::after { border-color: #FF5A5F; }
.qs-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.qs-meta b { font-size: 15px; }
.qs-meta small { display: block; margin-top: 3px; color: var(--qs-muted); font-size: 12px; }
.qs-timer { padding: 6px 10px; border-radius: 8px; background: var(--qs-sky); color: var(--accent); font: 600 13px var(--body); font-variant-numeric: tabular-nums; }
.qs-wave { display: flex; gap: 4px; align-items: center; height: 34px; margin-top: 14px; }
.qs-wave i { flex: 1; height: 100%; border-radius: 3px; background: var(--accent); opacity: .85; transform: scaleY(.3); animation: qs-eq 1.1s ease-in-out infinite; }
@keyframes qs-eq { 50% { transform: scaleY(1); } }   /* scale en vez de height: no recalcula el diseño de la página */

.qs-toast { position: absolute; z-index: 4; display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--qs-line); box-shadow: 0 20px 40px -20px rgba(7,30,58,.35); font-size: 13px; animation: qs-bob 6s ease-in-out infinite; }
.qs-toast b { display: block; font-size: 13px; }
.qs-toast small { color: var(--qs-muted); font-size: 11.5px; }
.qs-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; }
.qs-ic svg { width: 18px; height: 18px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.qs-t1 { left: -40px; top: 24px; }
.qs-t2 { right: -60px; top: 120px; animation-delay: -2s; }
.qs-t3 { right: -40px; bottom: 30px; animation-delay: -4s; }
.qs-t4 { left: -50px; bottom: 10px; animation-delay: -3s; }
@keyframes qs-bob { 50% { transform: translateY(-12px); } }
.qs-g { background: #E3F6EE; } .qs-g svg { stroke: var(--qs-ok); }
.qs-bl { background: var(--qs-sky); } .qs-bl svg { stroke: var(--accent); }
.qs-nv { background: var(--navy); } .qs-nv svg { stroke: #FFFFFF; }
.qs-csat { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.qs-csat span { font-size: 13px; color: var(--qs-muted); }
.qs-stars { color: #F5B301; letter-spacing: 2px; font-size: 12px; }

/* ---------- Entrada al hacer scroll (se repite cada vez) ---------- */
.js .qs-eyebrow i { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.js .qs-l > span { transform: translateY(calc(105% + 24px)); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.js .qs-l:nth-child(2) { overflow: hidden; padding-bottom: 22px; margin-bottom: -22px; }
.js .qs-l:nth-child(2) > span { transition-delay: .12s; }
.js .qs-hl path { stroke-dashoffset: 420; transition: stroke-dashoffset 1.4s ease .9s; }
.js .qs-lead, .js .qs-since { opacity: 0; translate: 0 24px; transition: opacity .8s var(--ease), translate .9s var(--ease); }
.js .qs-lead { transition-delay: .3s; }
.js .qs-since { transition-delay: .45s; }
.js .qs-ring, .js .qs-agent, .js .qs-toast { opacity: 0; scale: .85; transition: opacity .7s var(--ease), scale .9s cubic-bezier(.2,1.2,.3,1); }
.js .qs-r1 { transition-delay: .1s; }
.js .qs-r2 { transition-delay: .2s; }
.js .qs-agent { transition-delay: .25s; }
.js .qs-t1 { transition-delay: .55s; }
.js .qs-t2 { transition-delay: .7s; }
.js .qs-t3 { transition-delay: .85s; }
.js .qs-t4 { transition-delay: 1s; }
.qs.is-in .qs-eyebrow i { transform: scaleX(1); }
.qs.is-in .qs-l > span { transform: none; }
.qs.is-in .qs-hl path { stroke-dashoffset: 0; }
.qs.is-in .qs-lead, .qs.is-in .qs-since { opacity: 1; translate: 0 0; }
.qs.is-in .qs-ring, .qs.is-in .qs-agent, .qs.is-in .qs-toast { opacity: 1; scale: 1; }

/* Responsive */
/* Responsive */
@media (max-width: 1200px) {
  .qs-top { gap: 32px; }
  .qs-stage-wrap { height: 500px; --qs-scale: .86; }
}
@media (max-width: 960px) {
  .qs-top { grid-template-columns: 1fr; gap: 20px; }
  .qs-title { font-size: clamp(34px, 7vw, 56px); }
  .qs-stage-wrap { height: 470px; --qs-scale: .8; }
}
@media (max-width: 640px) {
  .qs { padding: 44px 0 36px; }
  .qs-eyebrow { font-size: 9px; letter-spacing: .18em; gap: 10px; }
  .qs-eyebrow i { width: 26px; }
  .qs-title { font-size: clamp(30px, 9vw, 38px); margin: 16px 0 20px; }
  .qs-hl svg { bottom: -10px; height: 12px; }
  .qs-lead { font-size: 14px; }
  .qs-since { margin-top: 18px; font-size: 12px; }
  .qs-stage-wrap { height: 350px; --qs-scale: .58; }
  .qs-b1 { width: 320px; height: 320px; }
}