/* Onboarding de Gu · negro, una pregunta por pantalla, tarjetas sutiles, píldora blanca, intro de haz cromático */
:root {
  --bg: var(--k0b0b0c); --panel: var(--k111113); --panel2: var(--k161618); --fg: var(--kededee); --fg2: var(--kb4b4b9); --muted: var(--k7d7d84); --dim: var(--k4c4c52);
  --line: var(--kffffff-07); --line2: var(--kffffff-12); --line3: var(--kffffff-22);
  --acc: var(--kb4a8ff); --acc-rgb: 180 168 255; --ok: var(--k62d39b);
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; }
[hidden] { display: none !important; }
button, textarea, input { font: inherit; color: inherit; }
:focus-visible { outline: 1.5px solid var(--fg); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: var(--muted); }
.dim { color: var(--dim); }

/* ---------- intro: Gu se desintegra → UNGGA (paleta Ungga morado) ---------- */
.intro { position: fixed; inset: 0; z-index: 50; background: var(--intro-bg, var(--k0e0a14)); display: grid; place-items: center; pointer-events: none; }
.intro canvas { position: absolute; inset: 0; }
.intro.fuera { animation: introOut .45s var(--ease) forwards; }
@keyframes introOut { to { opacity: 0; visibility: hidden; } }
.word { position: relative; font: 800 clamp(64px, 13vw, 168px)/1 var(--disp, "Inter Tight", sans-serif); letter-spacing: -.02em; opacity: 0;
  background: linear-gradient(100deg, var(--intro-a) 0%, var(--intro-m) 40%, var(--intro-b) 75%, var(--intro-c) 100%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro.on .word { animation: palabra .7s var(--ease) forwards, brillo 1.4s .1s ease-out forwards; }
@keyframes palabra { from { opacity: 0; filter: blur(14px); transform: scale(1.06); letter-spacing: .12em; } to { opacity: 1; filter: blur(0); transform: none; letter-spacing: -.02em; } }
@keyframes brillo { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- marco ---------- */
.top { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 56px; padding: 0 22px; background: var(--k0b0b0c-85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.top-logo { height: 15px; width: auto; filter: var(--logo-f); opacity: .62; }
.top-r { justify-self: end; display: flex; align-items: center; gap: 12px; }
.link-s { background: none; border: 0; padding: 4px 2px; color: var(--muted); font-size: 12.5px; font-weight: 500; text-decoration: none; cursor: pointer; transition: color .2s; }
.link-s:hover { color: var(--fg); }
.ico-btn { width: 26px; height: 26px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; border-radius: 6px; }
.ico-btn:hover { color: var(--fg); }
.ico-btn svg { width: 14px; height: 14px; }

.stage { flex: 1; display: grid; }
.step { padding: 7vh 20px 96px; }
.step-chat { padding-top: 4vh; padding-bottom: 56px; }
.step.entra .col > * { animation: up .6s var(--ease) both; }
.step.entra .col > *:nth-child(2) { animation-delay: .05s; }
.step.entra .col > *:nth-child(3) { animation-delay: .1s; }
.step.entra .col > *:nth-child(4) { animation-delay: .15s; }
.step.entra .col > *:nth-child(5) { animation-delay: .2s; }
@keyframes up { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }
.col { margin: 0 auto; }
.col-w { max-width: 940px; }
.col-chat { max-width: 720px; display: flex; flex-direction: column; min-height: calc(100vh - 56px - 4vh - 56px); }
h1 { margin: 0; font-size: 21px; font-weight: 500; letter-spacing: -.012em; }
.sub { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }

.actions { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 28px; }
.pill { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 99px; background: var(--fg); color: var(--k0b0b0c); padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; transition: transform .2s var(--ease), background .2s, opacity .2s; }
.pill:hover { background: var(--kffffff); transform: translateY(-1px); }
.pill span { transition: transform .2s var(--ease); }
.pill:hover span { transform: translateX(2px); }
.pill:disabled { opacity: .35; cursor: default; transform: none; }
/* «Es tu turno»: terminó el ejemplo y la raya de abajo marca cuánto falta para pasar solo (`demo` en onboarding.js, 2.2 s) */
.pill.turno { position: relative; overflow: hidden; }
.pill.turno::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--acc); transform-origin: left; animation: turno 2.2s linear forwards; }
@keyframes turno { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pill.cargando { background: var(--k8a8a90); }
.spin { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--k000000-25); border-top-color: var(--k0b0b0c); animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.dashes { position: fixed; left: 50%; bottom: 22px; translate: -50% 0; display: flex; gap: 5px; z-index: 5; }
.dashes button { width: 6px; height: 3px; padding: 0; border: 0; border-radius: 2px; background: var(--dim); cursor: pointer; transition: width .35s var(--ease), background .35s; }
.dashes button[aria-current="step"] { width: 18px; background: var(--fg); }

/* ---------- paso 0 · demo ---------- */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 22px; }
.pane { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; display: flex; flex-direction: column; }
.pane-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.pane-h > .mono:not(.dim) { flex: 1; }
.chat { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.chat-demo { height: 404px; padding: 14px; }
.msg { max-width: 84%; padding: 7px 11px; border-radius: 14px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; animation: msg .38s var(--ease) both; }
@keyframes msg { from { opacity: 0; transform: translateY(6px); } }
.msg.them { align-self: flex-start; background: var(--panel2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.gu { align-self: flex-end; background: rgb(var(--acc-rgb) / .14); border: 1px solid rgb(var(--acc-rgb) / .22); border-bottom-right-radius: 4px; }
.msg .pc { display: grid; gap: 4px; margin-top: 7px; }
.msg .pc span { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg2); }
.msg .pc i { width: 30px; height: 24px; border-radius: 4px; background: center / cover; flex: 0 0 auto; }
/* "qué hay cerca": una fila por lugar, con su distancia y para qué le sirve; la burbuja se ensancha para que quepa */
.chat-live .msg.ancha { max-width: 94%; }
/* las notas de Gu («Gu necesita de ti», «Qué está haciendo Gu») ocupan siempre todo el ancho, aunque lleven tarjetas: si no, unas quedaban más cortas que otras */
.chat-live .msg.rol.ancha { max-width: none; }
.lugares { display: grid; margin-top: 10px; border-top: 1px solid var(--line); }
.lug { display: grid; grid-template-columns: 28px 1fr auto; column-gap: 10px; row-gap: 2px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lug:last-child { border-bottom: 0; }
.lug i { grid-row: span 2; width: 28px; height: 28px; border-radius: 8px; background: var(--panel2); display: grid; place-items: center; font-style: normal; font-size: 14px; }
.lug b { font-weight: 500; font-size: 12.5px; line-height: 1.3; }
.lug b span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin-top: 1px; }
.lug em { font: 500 11px var(--mono); font-style: normal; color: var(--fg2); white-space: nowrap; padding-top: 2px; }
.lug small { grid-column: 2 / span 2; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.typing { align-self: flex-end; display: inline-flex; gap: 3px; padding: 9px 11px; border-radius: 14px; background: rgb(var(--acc-rgb) / .1); }
.typing.them { align-self: flex-start; background: var(--panel2); }
.typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--fg2); animation: blink 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }

.feed { list-style: none; margin: 0; padding: 6px 14px 14px; display: flex; flex-direction: column; height: 404px; overflow-y: auto; scrollbar-width: none; }
.feed::-webkit-scrollbar { display: none; }
.feed li { flex: 0 0 auto; display: grid; grid-template-columns: 16px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); animation: msg .45s var(--ease) both; }
.feed li:last-child { border-bottom: 0; }
.ck { width: 15px; height: 15px; margin-top: 2px; border-radius: 50%; border: 1px solid var(--line3); display: grid; place-items: center; }
.ck svg { width: 9px; height: 9px; }
.feed li.ok .ck { background: var(--fg); border-color: var(--fg); color: var(--k0b0b0c); }
.feed li.acc .ck { background: var(--acc); border-color: var(--acc); color: var(--k0b0b0c); }
.feed b { font-weight: 500; font-size: 13px; }
.feed p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.chip { font-family: var(--mono); font-size: 10.5px; color: var(--fg2); border: 1px solid var(--line2); border-radius: 5px; padding: 1px 6px; animation: msg .35s var(--ease) both; }
.bars { display: grid; gap: 5px; margin-top: 8px; }
.bar { display: grid; grid-template-columns: 1fr 34px; align-items: center; gap: 8px; font-size: 12px; color: var(--fg2); }
.bar s { text-decoration: none; display: block; height: 3px; border-radius: 2px; background: var(--line2); position: relative; overflow: hidden; margin-top: 4px; }
.bar s::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--fg2); border-radius: 2px; animation: crece .9s .2s var(--ease) both; }
.bar.best s::after { background: var(--ok); }
@keyframes crece { from { width: 0; } }
.bar em { font: 500 11px var(--mono); color: var(--muted); text-align: right; }
.bar.best em { color: var(--ok); }
.ahorro { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.ahorro b { color: var(--fg); font-weight: 500; }

/* ---------- paso 1 · tarjetas ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.card { position: relative; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 0; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: border-color .25s, transform .25s var(--ease), background .25s; }
.card:hover { border-color: var(--line3); }
.card[aria-checked="true"] { border-color: var(--kffffff-75); background: var(--k141416); }
.card-img { position: relative; height: 112px; background: center / cover; filter: grayscale(.55) brightness(.75); transition: filter .4s; }
.card:hover .card-img, .card[aria-checked="true"] .card-img { filter: none; }
.card-img::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--k000000-22) 0 1px, transparent 1px 4px), linear-gradient(180deg, transparent 40%, var(--k111113-9)); }
.badge { position: absolute; z-index: 1; left: 10px; top: 76px; width: 26px; height: 26px; border-radius: 7px; background: var(--k0b0b0c-7); border: 1px solid var(--line2); display: grid; place-items: center; color: var(--fg); backdrop-filter: blur(6px); }
.badge svg { width: 13px; height: 13px; }
.radio { position: absolute; z-index: 1; right: 10px; top: 82px; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--line3); background: var(--k0b0b0c-5); display: grid; place-items: center; color: transparent; transition: background .2s, border-color .2s; }
.radio svg { width: 9px; height: 9px; }
.card[aria-checked="true"] .radio { background: var(--fg); border-color: var(--fg); color: var(--k0b0b0c); }
.card-b { padding: 12px 13px 14px; display: flex; flex-direction: column; flex: 1; }
.card-b b { font-size: 13px; font-weight: 500; }
.card-b .pr { font-family: var(--mono); font-size: 11px; color: var(--fg2); margin-top: 1px; }
.card-b .inc { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.card-b ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: 12px; color: var(--fg2); }
.card-b li::before { content: "✓"; margin-right: 6px; color: var(--muted); font-size: 10px; }
.card-b li.no::before { content: "–"; }
.card-b li.no { color: var(--muted); }

/* ---------- paso 2 · chat ---------- */
.chat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.prop-chip { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 10px; padding: 5px 10px 5px 5px; background: var(--panel); }
.prop-chip i { width: 34px; height: 28px; border-radius: 6px; background: center / cover; }
.prop-chip b { display: block; font-size: 12px; font-weight: 500; line-height: 1.2; }
.prop-chip span { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
/* la barra de avance, `.progreso` (ver `pintaAvance`; `.avance` ya es la de la importación, más abajo): cuánto sabe Gu de ti y cuánto falta del proceso */
.progreso { margin-top: 14px; }
.avance-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; color: var(--fg2); }
.avance-pct { font-family: var(--mono); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.avance-barra { height: 5px; margin-top: 6px; border-radius: 99px; background: var(--line2); overflow: hidden; }
.avance-barra b { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--acc); transition: width .9s var(--ease); }
.progreso.en-demo .avance-etapas, .progreso.en-demo .avance-pct { display: none; }
.avance-etapas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; list-style: none; margin: 6px 0 0; padding: 0; font-family: var(--mono); font-size: 10px; line-height: 1.25; color: var(--dim); }
.avance-etapas li.hecho { color: var(--muted); }
.avance-etapas li.actual { color: var(--acc); }
/* el alto del chat sale del alto de la ventana (menos la barra de avance): antes (52vh) quedaba un hueco grande bajo el cuadro de texto en escritorio */
.chat-live { flex: 1; min-height: 300px; max-height: calc(100vh - 392px); margin-top: 14px; padding: 4px 2px 10px; }
.chat-live .msg { max-width: 78%; font-size: 13.5px; }
/* en el paso 3 el cliente eres tú: tus mensajes a la derecha, Gu a la izquierda */
.chat-live .msg.them { align-self: flex-end; background: var(--fg); color: var(--k0b0b0c); border-color: var(--fg); border-radius: 14px 14px 4px 14px; }
.chat-live .msg.gu { align-self: flex-start; background: var(--panel2); border-color: var(--line); border-radius: 14px 14px 14px 4px; }
.chat-live .typing { align-self: flex-start; background: var(--panel2); }
.msg.rol { align-self: stretch; max-width: none; background: transparent; border: 1px solid var(--line2); border-radius: 14px; padding: 12px 14px; }
.rol-k { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--acc); margin-bottom: 6px; }
.rol-k::before { content: ""; width: 14px; height: 1px; background: var(--acc); }
.sugs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.sug { background: none; border: 1px solid var(--line2); border-radius: 99px; padding: 5px 11px; font-size: 12px; color: var(--fg2); cursor: pointer; transition: border-color .2s, color .2s; animation: msg .35s var(--ease) both; }
.sug:hover { border-color: var(--line3); color: var(--fg); }
.composer { display: flex; align-items: flex-end; gap: 8px; border: 1px solid var(--line2); border-radius: 16px; background: var(--panel); padding: 8px 8px 8px 14px; transition: border-color .2s, box-shadow .2s; }
.composer:focus-within { border-color: var(--line3); box-shadow: 0 0 0 4px var(--kffffff-03); }
.composer textarea { flex: 1; resize: none; border: 0; background: none; outline: none; padding: 6px 0; font-size: 14px; max-height: 120px; }
.composer textarea::placeholder { color: var(--dim); }
.send { width: 32px; height: 32px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--fg); color: var(--k0b0b0c); display: grid; place-items: center; cursor: pointer; transition: opacity .2s, transform .2s; }
.send:hover { transform: translateY(-1px); }
.send:disabled { opacity: .25; transform: none; cursor: default; }
.send svg { width: 15px; height: 15px; }
.fine { margin: 10px 0 0; text-align: center; font-size: 11px; color: var(--dim); }

@media (max-width: 680px) {
  .top { padding: 0 14px; }
  .top .link-s[data-ir] { display: none; }
  .step { padding: 28px 16px 90px; }
  .demo { grid-template-columns: minmax(0, 1fr); }
  .chat-demo { height: 330px; }
  .feed { height: auto; min-height: 120px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .card { flex-direction: row; }
  .card-img { width: 104px; height: auto; flex: 0 0 auto; }
  .card-b ul { display: none; }
  .card-b .inc { display: none; }
  .badge { top: auto; bottom: 10px; }
  .radio { top: 12px; }
  .card-b { padding-right: 34px; }
  .dashes { position: static; translate: none; justify-content: center; margin: -60px 0 28px; }
  .top-l .link-s { font-size: 0; }
  .top-l .link-s::before { content: "←"; font-size: 16px; }
  .chat-live { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition: none !important; }
}

/* ================= Landing 24 · conserva el estilo de la 20 (Linear: negro puro, Inter Tight, lila var(--k7f77dd), píldora gris) ================= */
:root { --bg: var(--k08090a); --panel: var(--k101113); --panel2: var(--k16171a); --fg: var(--kf7f8f8); --fg2: var(--kc9ccd1); --muted: var(--k8a8f98); --dim: var(--k62666d);
  --line: var(--kffffff-08); --line2: var(--kffffff-13); --line3: var(--kffffff-24);
  --acc: var(--ka9a3ff); --acc-rgb: 127 119 221; --ok: var(--k4cc38a); --sans: "Inter", ui-sans-serif, system-ui, sans-serif; }
h1 { font-family: "Inter Tight", "Inter", sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -.03em; }
.top { border-bottom: 1px solid var(--line); background: var(--k08090a-8); }
.pill { background: var(--ke6e6e6); color: var(--k08090a); }
.pill:hover { background: var(--kffffff); }
.card[aria-checked="true"] { border-color: var(--k7f77dd); box-shadow: 0 0 0 3px var(--k7f77dd-2); background: var(--k101113); }
.card[aria-checked="true"] .radio { background: var(--k7f77dd); border-color: var(--k7f77dd); color: var(--kffffff); }
.feed li.ok .ck { background: var(--ok); border-color: var(--ok); }
.feed li.acc .ck { background: var(--k7f77dd); border-color: var(--k7f77dd); color: var(--kffffff); }
.msg.gu { background: var(--k7f77dd-16); border-color: var(--k7f77dd-28); }
.dashes button[aria-current="step"] { background: var(--ka9a3ff); }
:root { --disp: "Inter Tight", "Inter", sans-serif; }
/* intro con el estilo de la 20: negro puro y lilas sobrios */
:root { --intro-bg: var(--k08090a); --intro-a: var(--k7f77dd); --intro-m: var(--ka9a3ff); --intro-b: var(--kd9d6ff); --intro-c: var(--kf7f8f8); }
/* checks y barras con el degradado de la 20 */
:root { --grad: linear-gradient(135deg, var(--k7f77dd), var(--ka9a3ff) 60%, var(--kd9d6ff)); --grad-x: linear-gradient(90deg, var(--k7f77dd), var(--ka9a3ff) 60%, var(--kd9d6ff)); }
.feed li.ok .ck, .feed li.acc .ck { background: var(--grad); border: 0; color: var(--kffffff); }
.card[aria-checked="true"] .radio { background: var(--grad); border: 0; color: var(--kffffff); }
.bar s::after, .bar.best s::after { background: var(--grad-x); }
.bar:not(.best) s::after { opacity: .45; }
.bar.best em { background: var(--grad-x); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* borde animado (estilo de la 20): lila, blanco e índigo */
:root { --b1: var(--cta-b1); --b2: var(--cta-b2); --b3: var(--cta-b3); --b4: var(--cta-b4); --fill: var(--k0d0e10); }   /* --cta-* y --t1/--t2 por tema en ../paleta.css */

/* ================= bordes animados: degradado cónico que gira, con un tinte suave dentro ================= */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes giraBorde { to { --ang: 360deg; } }
.pill:not(:disabled), .card[aria-checked="true"], .composer:focus-within, .msg.rol {
  border: 1.5px solid transparent;
  background:
    conic-gradient(from var(--ang), rgb(var(--t1) / .16), transparent 28%, rgb(var(--t2) / .1) 55%, transparent 80%, rgb(var(--t1) / .16)) padding-box,
    linear-gradient(var(--fill), var(--fill)) padding-box,
    conic-gradient(from var(--ang), var(--b1), var(--b2) 22%, var(--b3) 40%, var(--b4) 55%, var(--b1) 75%, var(--b2) 90%, var(--b1)) border-box;
  animation: giraBorde 4s linear infinite;
}
.pill:not(:disabled) { --fill: var(--cta-fill); color: var(--cta-fg); box-shadow: none; padding: 10px 20px; }   /* botones en morado, como en la landing */
.pill:not(:disabled):hover { background:
    conic-gradient(from var(--ang), rgb(var(--t1) / .3), transparent 30%, rgb(var(--t2) / .2) 55%, transparent 80%, rgb(var(--t1) / .3)) padding-box,
    linear-gradient(var(--fill), var(--fill)) padding-box,
    conic-gradient(from var(--ang), var(--b1), var(--b2) 22%, var(--b3) 40%, var(--b4) 55%, var(--b1) 75%, var(--b2) 90%, var(--b1)) border-box;
  animation-duration: 2s; }
.pill.cargando { --fill: var(--cta-fill); color: var(--cta-fg); }
.pill.cargando .spin { border-color: rgb(255 255 255 / .25); border-top-color: #fff; }
.card[aria-checked="true"] { box-shadow: none; }
.composer:focus-within { box-shadow: none; }
.msg.rol { animation: msg .38s var(--ease) both, giraBorde 6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .pill, .card, .composer, .msg.rol { animation: none !important; } }
/* en recuadros grandes el tinte cónico hace rayos: solo borde, relleno liso */
.card[aria-checked="true"], .composer:focus-within, .msg.rol {
  background:
    linear-gradient(var(--fill), var(--fill)) padding-box,
    conic-gradient(from var(--ang), var(--b1), var(--b2) 22%, var(--b3) 40%, var(--b4) 55%, var(--b1) 75%, var(--b2) 90%, var(--b1)) border-box;
}

/* ================= la ubicación con mapa, dentro de la burbuja de Gu (alta en el chat) ================= */
.mapa { display: grid; gap: 8px; margin-top: 10px; }
.mapa-busca { width: 100%; background: var(--bg); border: 1px solid var(--line2); border-radius: 10px; padding: 8px 11px; font-size: 13px; outline: none; }
.mapa-busca:focus { border-color: var(--line3); }
.mapa-lienzo { height: 240px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--panel2); }
.mapa-dir { font-size: 12.5px; color: var(--fg2); line-height: 1.4; }
.mapa-acciones { display: flex; align-items: center; gap: 14px; }
/* los botones dentro de una burbuja: aire con el texto o los pasos de arriba y, si no caben, en otro renglón. Con wrap un
   botón solo parte su texto cuando ni en su propio renglón cabe (320 px: «Ya tengo WhatsApp Business, conectar →»); con
   nowrap se salía de la burbuja */
.msg > .mapa-acciones { margin-top: 14px; flex-wrap: wrap; row-gap: 8px; }
.msg > .mapa-acciones > * { max-width: 100%; }
.mapa .pill, .mapa .pill:not(:disabled) { padding: 7px 14px; font-size: 12.5px; }
.mapa.lista { opacity: .55; pointer-events: none; }
/* el desplegable de Places sale blanco por defecto; se viste como el chat */
.pac-container { background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 12px 32px var(--k000000-45); font-family: var(--sans); margin-top: 4px; }
.pac-container::after { display: none; }
.pac-item { padding: 7px 11px; border-color: var(--line); color: var(--muted); font-size: 12px; cursor: pointer; }
.pac-item:hover, .pac-item-selected { background: var(--panel2); }
.pac-item-query { color: var(--fg); font-size: 13px; }
.pac-icon { filter: invert(.8); }
@media (max-width: 680px) { .mapa-lienzo { height: 200px; } }

/* ================= el inventario desde el chat: CRMs, EasyBroker, avance y PDF ================= */
.crms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.crm { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--fg2); font-size: 11.5px; cursor: pointer; transition: border-color .2s, color .2s, transform .2s var(--ease); }
.crm:hover { border-color: var(--line3); color: var(--fg); transform: translateY(-1px); }
.crm img, .crm i { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; background: var(--kffffff); padding: 3px; }
.crm i { display: grid; place-items: center; font: 600 14px var(--sans); color: var(--k08090a); }
.crm span { line-height: 1.2; text-align: center; }
.crm-no { justify-content: center; color: var(--muted); }
.crms.lista { opacity: .5; pointer-events: none; }
.eb { display: grid; gap: 8px; margin-top: 10px; }
.eb-estado { font-size: 12.5px; color: var(--fg2); }
.eb-marco { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 12px; background: var(--kffffff); }
.eb.lista .eb-marco { display: none; }
.avance { display: grid; gap: 6px; margin-top: 10px; }
.avance-txt { font: 500 11.5px var(--mono); color: var(--fg2); }
.avance s { text-decoration: none; display: block; height: 4px; border-radius: 2px; background: var(--line2); overflow: hidden; }
.avance i { display: block; height: 100%; width: var(--w); background: var(--grad-x); border-radius: 2px; transition: width .6s var(--ease); }
.avance i { animation: latido 1.6s ease-in-out infinite; }
.fallo .avance i { background: var(--ke5484d); animation: none; }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
a.pill { color: var(--kffffff); }
@media (max-width: 680px) { .crms { grid-template-columns: repeat(3, minmax(0, 1fr)); } .eb-marco { height: 420px; } }
/* las tres formas de cargar propiedades, como tarjetas */
.modos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }   /* cuatro opciones: 2×2 */
.modo { display: grid; justify-items: start; gap: 3px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); text-align: left; cursor: pointer; transition: border-color .2s, transform .2s var(--ease); }
.modo:hover { border-color: var(--line3); transform: translateY(-1px); }
.modo i { font-style: normal; font-size: 18px; margin-bottom: 3px; }
.modo b { font-size: 12.5px; font-weight: 600; color: var(--fg); line-height: 1.25; }
.modo span { font-size: 11px; color: var(--muted); }
.modos.lista { opacity: .5; pointer-events: none; }
@media (max-width: 680px) { .modos { grid-template-columns: minmax(0, 1fr); } }
/* los pasos antes de irse a Meta: número, qué pasa y el detalle, dentro de la burbuja fuera del papel */
.pasos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.pasos li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.pasos li i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--acc); color: var(--kffffff); font-style: normal; font-family: var(--mono); font-size: 11px; }
.pasos li b { display: block; font-weight: 600; }
.pasos li span { display: block; margin-top: 2px; font-size: 13px; opacity: .8; }
/* las propiedades del owner, para elegir con cuál se prueba a Gu */
.propias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.propia { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; text-align: left; cursor: pointer; transition: border-color .2s, transform .2s var(--ease); }
.propia:hover { border-color: var(--line3); transform: translateY(-1px); }
.propia-img { height: 86px; background: center / cover; }
.propia-img.vacia { display: grid; place-items: center; font-size: 26px; background: var(--panel2); }
.propia-b { display: grid; gap: 1px; padding: 9px 10px 10px; }
.propia-b b { font-size: 12.5px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.propia-b .pr { font-family: var(--mono); font-size: 11px; color: var(--fg2); }
.propia-b small { font-size: 11px; color: var(--muted); }
.propias.lista { opacity: .5; pointer-events: none; }
@media (max-width: 680px) { .propias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* la tarjeta con la que Gu abre la prueba con una propiedad real: foto, datos y lo mejor que tiene */
.pitch { display: grid; grid-template-columns: 132px 1fr; gap: 12px; margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; }
.pitch-img { background: center / cover; min-height: 132px; }
.pitch-b { display: grid; align-content: start; gap: 4px; padding: 11px 12px 12px 0; }
.pitch-b b { font-size: 13px; font-weight: 600; line-height: 1.25; }
.pitch-b .pr { font-family: var(--mono); font-size: 11px; color: var(--fg2); }
.pitch-b .chips { margin-top: 4px; }
.pitch-b ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; color: var(--fg); }
.pitch-b li::before { content: "✓"; margin-right: 6px; color: var(--acc); font-size: 11px; }
@media (max-width: 680px) { .pitch { grid-template-columns: 1fr; } .pitch-img { height: 150px; } .pitch-b { padding: 0 12px 12px; } }
/* "Mensajes nuevos": aparece cuando llega algo y la persona está leyendo más arriba */
.nuevos { position: fixed; left: 50%; bottom: 96px; translate: -50% 0; z-index: 20; border: 1px solid var(--line3); border-radius: 99px; background: var(--panel); color: var(--fg); padding: 7px 14px; font-size: 12.5px; font-weight: 600; box-shadow: 0 10px 30px var(--k000000-45); cursor: pointer; animation: msg .3s var(--ease) both; }
/* EasyBroker en celular: el navegador remoto se abre con viewport de teléfono y se escribe en nuestro formulario */
.eb-marco.movil { height: 72vh; min-height: 460px; }  /* el alto real lo fija el JS a la proporción del viewport remoto */
.eb-vista { position: relative; }
/* la capa que recibe el toque en celular; el cuadro oculto es lo que abre el teclado */
.eb-tap { position: absolute; inset: 0; touch-action: none; }
.eb-oculto { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; font-size: 16px; }  /* 16px: iOS no hace zoom al enfocar; left/top los pone el JS en el punto tocado */
/* el teléfono con país elegido (bandera en imagen) y el código, dentro de la burbuja (13 oct 2026) */
.tel-form { display: grid; grid-template-columns: auto 1fr; gap: 6px; margin-top: 12px; }
.tel-envio { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.cod-form { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 12px; }
.tel-form input, .cod-form input { min-width: 0; background: var(--bg); border: 1px solid var(--line2); border-radius: 10px; padding: 9px 11px; font-size: 14px; outline: none; color: var(--fg); }
.tel-form input:focus, .cod-form input:focus { border-color: var(--line3); }
.tel-pais { position: relative; }
.tel-pais-btn { display: inline-flex; align-items: center; gap: 7px; height: 100%; background: var(--bg); border: 1px solid var(--line2); border-radius: 10px; padding: 0 10px; font-size: 14px; color: var(--fg); cursor: pointer; white-space: nowrap; }
.tel-pais-btn:hover, .tel-pais-btn[aria-expanded="true"] { border-color: var(--line3); }
.tel-pais-btn i { font-style: normal; font-size: 11px; color: var(--muted); }
.bandera { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; flex: 0 0 auto; }
.tel-lista { position: absolute; z-index: 30; left: 0; bottom: calc(100% + 6px); width: 240px; max-height: 260px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 14px 36px var(--k000000-5); padding: 4px; }
.tel-lista button { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 8px 9px; font-size: 13px; color: var(--fg); cursor: pointer; }
.tel-lista button:hover { background: var(--panel2); }
.tel-lista em { font: 500 11.5px var(--mono); font-style: normal; color: var(--muted); }
.cod-form input { letter-spacing: .25em; font-family: var(--mono); text-align: center; }
.tel-form .pill, .tel-form .pill:not(:disabled), .cod-form .pill, .cod-form .pill:not(:disabled) { padding: 8px 14px; font-size: 13px; }
.tel-form :disabled, .cod-form :disabled { opacity: .5; }
@media (max-width: 680px) { .tel-envio { grid-template-columns: 1fr; } .tel-envio .pill { justify-content: center; } }
/* lo que se repinta al volver (`repintar`) ya se dijo: aparece de una vez y sin el borde que gira, que en un hilo largo serían decenas de animaciones */
.msg.previo, .msg.rol.previo { animation: none; }
/* dentro de la app (ver el script del <head>): la app ya pone el menú, el fondo y la salida al panel */
html.en-app .intro, html.en-app .top { display: none !important; }
html.en-app, html.en-app body { background: transparent; }
html.con-cuenta .step-chat .fine, html.con-cuenta .dashes, html.sin-demo #propChip { display: none; }
/* dentro de la app no se pinta nada hasta saber dónde retomar: la demostración no debe asomarse (`cargando` lo quita onboarding.js) */
html.en-app.cargando main, html.en-app.cargando .dashes { visibility: hidden; }
/* mientras tanto, un indicador de carga */
html.en-app.cargando body::before { content: ""; position: fixed; left: 50%; top: 120px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; border: 2px solid var(--line2); border-top-color: var(--fg2); animation: girar .8s linear infinite; }
/* el historial que se repinta y lo primero que agrega Gu al volver salen sin animación: no le están llegando ahora */
.msg.previo { animation: none !important; }
html.en-app .step.entra .col > *, html.con-cuenta .step.entra .col > * { animation: none; }
/* el respaldo del head cuando onboarding.js no arrancó: un aviso con «Reintentar», nunca la demostración */
.aviso-carga { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 16px; }
.aviso-carga p { margin: 0; color: var(--fg2); }

/* ---------- arranque «requerimiento» (`?entrada=requerimiento`, 26–27 oct 2026) ----------
   La búsqueda en vivo, con el lenguaje de las secciones de búsqueda de la landing (islb.css, cercc.css): mapa en grises,
   radar de luz, pines morados que brotan, borde de luz que gira mientras busca. Las tarjetas de resultado van en una fila
   que se recorre de lado: en el teléfono caben una y media, así se nota que hay más. */
html.con-entrada .dashes, html.con-entrada .top-r { display: none; }
/* la burbuja se mide por su contenido y la fila de tarjetas, sin tope, la hacía tan ancha como todas juntas: la página
   se corría de lado en el teléfono. La burbuja toma el ancho de las anchas y la tarjeta no aporta el suyo (`contain`) */
.chat-live .msg:has(> .rq) { width: 94%; }
.rq { --rq: #8F7BBD; --rq-fuerte: #6b5fd6; margin-top: 10px; border-radius: 16px; overflow: hidden; contain: inline-size; border: 1px solid var(--line2); background: var(--bg); }
/* mientras busca, el borde de la tarjeta es la luz que gira de los botones */
.rq:has(.rq-estado.buscando) { border-color: transparent; animation: giraBorde 3s linear infinite;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, conic-gradient(from var(--ang), var(--b1), var(--b2) 22%, var(--b3) 40%, var(--b4) 55%, var(--b1) 75%, var(--b2) 90%, var(--b1)) border-box; }
.rq-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px 0; }
.rq-k { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rq-estado { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--ok); }
.rq-estado i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.rq-estado.buscando { color: var(--b1); }
.rq-estado.buscando i { animation: rqLatido 1s ease-in-out infinite; }
.rq-estado.ej { color: var(--muted); }
@keyframes rqLatido { 50% { transform: scale(1.5); opacity: .55; } }
.rq-que { display: grid; gap: 3px; padding: 8px 14px 0; }
.rq-que b { font-family: var(--disp); font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.rq-que span { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--fg2); }
.rq svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rq-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0; }
.rq-chips span { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel); font-size: 12px; font-weight: 500; color: var(--fg2); }

/* el mapa: grises (el estilo se convierte una vez en el JS), y encima el radar, el contador y la ficha */
.rq-mapa { position: relative; height: 300px; margin-top: 14px; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel2); }
/* `.maplibregl-map` le pone `position: relative` al contenedor y, como su CSS carga después, el mapa quedaba de 0px */
.rq-mapa > .rq-gl, .rq-mapa > .rq-gl.maplibregl-map { position: absolute; inset: 0; }
.rq-gl .maplibregl-ctrl-attrib { font-size: 9.5px; }
.rq-gl .maplibregl-ctrl-group { border-radius: 10px; overflow: hidden; }
.rq-gl .maplibregl-cooperative-gesture-screen { z-index: 6; font: 500 14px var(--sans); }
.rq-gl .maplibregl-marker { z-index: 3; }
@keyframes rqGira { to { transform: rotate(360deg); } }
.rq-radar { position: absolute; left: 0; top: 0; z-index: 2; border-radius: 50%; pointer-events: none; will-change: transform; }
.rq-radar i { position: absolute; inset: 0; border-radius: 50%; opacity: 0; transition: opacity .6s; will-change: transform;
  background: conic-gradient(from 0deg, rgb(var(--t1) / 0) 0deg, rgb(var(--t1) / 0) 280deg, rgb(var(--t1) / .1) 325deg, rgb(var(--t1) / .34) 356deg, rgb(var(--t2) / .75) 359.5deg, rgb(var(--t1) / 0) 360deg); }
.rq-radar.gira i { opacity: 1; animation: rqGira 2.3s linear infinite; }
.rq-cuenta { position: absolute; z-index: 4; left: 10px; top: 10px; display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--line2); box-shadow: 0 4px 16px rgb(0 0 0 / .12); pointer-events: none; }
.rq-cuenta i { align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--rq); animation: rqLatido 1s ease-in-out infinite; }
.rq-cuenta.listo i { animation: none; background: var(--ok); }
.rq-cuenta b { font-family: var(--disp); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rq-cuenta span { font-size: 12px; color: var(--fg2); }

/* los pines, como los de map-v2 (morado con borde blanco), que brotan al pasar el barrido */
@keyframes rqBrota { 0% { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes rqOnda { from { transform: scale(1); opacity: .55; } to { transform: scale(3.2); opacity: 0; } }
.rq-pin-w { display: grid; place-items: center; width: 34px; height: 34px; }
.rq-pin-w:has(.activo), .rq-pin-w:has(.mejor) { z-index: 2; }
.rq-pin { position: relative; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 2.5px solid #fff; background: var(--rq); cursor: pointer;
  box-shadow: 0 2px 6px rgb(30 20 80 / .35); animation: rqBrota .5s cubic-bezier(.3, 1.4, .5, 1) both; transition: transform .2s, background .2s; }
.rq-pin::after { content: ""; position: absolute; inset: -2.5px; border-radius: 50%; background: var(--rq); animation: rqOnda .9s ease-out both; pointer-events: none; }
.rq-pin.ej { border-style: dashed; background: color-mix(in srgb, var(--rq) 75%, #fff); }
.rq-pin.foco, .rq-pin:hover { transform: scale(1.3); background: var(--rq-fuerte); }
.rq-pin.activo { width: 26px; height: 26px; background: var(--rq-fuerte); z-index: 2; }
/* la más parecida: el anillo de luz de la landing alrededor de su pin */
.rq-pin.mejor { width: 24px; height: 24px; background: var(--rq-fuerte); }
.rq-pin.mejor::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; padding: 2px; animation: rqGira 3s linear infinite;
  background: conic-gradient(var(--b1), var(--b2) 22%, var(--b3) 40%, var(--b4) 55%, var(--b1) 75%, var(--b2) 90%, var(--b1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* la vista previa del pin, como la de map-v2: abajo del mapa, con foto */
.rq-ficha { position: absolute; z-index: 5; left: 10px; right: 10px; bottom: 10px; max-width: 440px; display: grid; grid-template-columns: 96px 1fr; gap: 11px; padding: 8px 32px 8px 8px;
  border-radius: 14px; background: #fff; color: #1d1b26; box-shadow: 0 10px 30px rgb(0 0 0 / .25); animation: msg .25s var(--ease) both; }
.rq-ficha-foto { display: grid; place-items: center; border-radius: 10px; min-height: 86px; background: center / cover no-repeat #eceaf4; color: #8b88a0; }
.rq-ficha-foto svg { width: 26px; height: 26px; }
.rq-ficha-b { display: grid; align-content: center; gap: 3px; min-width: 0; font-size: 12px; line-height: 1.35; }
.rq-ficha-b > b { font-family: var(--disp); font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.rq-ficha-b .rq-tit { color: #4a4757; }
.rq-ficha-b .rq-datos { color: #6f6c7c; }
.rq-ficha-b a { margin-top: 2px; color: #5b52c9; font-weight: 700; text-decoration: none; }
.rq-ficha-x { position: absolute; top: 4px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: #7a7788; font-size: 19px; line-height: 1; cursor: pointer; }
.rq-mapa:fullscreen .rq-ficha, .rq-mapa.maplibregl-pseudo-fullscreen .rq-ficha { left: 50%; right: auto; width: min(440px, calc(100% - 20px)); translate: -50% 0; }
.rq-mapa:fullscreen, .rq-mapa.maplibregl-pseudo-fullscreen { height: 100%; margin: 0; border: 0; }

/* las tarjetas: la foto manda, con el precio encima; entran una por una */
@keyframes rqEntra { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.rq-res { padding: 12px 0 14px; }
.rq-props { display: grid; grid-auto-flow: column; grid-auto-columns: 196px; gap: 10px; overflow-x: auto; padding: 0 14px 2px; scroll-snap-type: x mandatory; scroll-padding: 14px; scrollbar-width: none; }
.rq-props::-webkit-scrollbar { display: none; }
.rq-prop { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel);
  scroll-snap-align: start; animation: rqEntra .45s var(--ease) both; animation-delay: calc(var(--i) * 110ms); transition: border-color .2s, transform .25s var(--ease); }
.rq-prop:hover { border-color: color-mix(in srgb, var(--rq) 60%, var(--line2)); transform: translateY(-2px); }
div.rq-prop { cursor: pointer; }
.rq-foto { position: relative; display: grid; place-items: center; height: 122px; background: center / cover no-repeat var(--panel2); color: var(--muted); }
.rq-foto svg { width: 30px; height: 30px; }
.rq-foto::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgb(10 8 20 / .72)); }
.rq-foto > b { position: absolute; z-index: 1; left: 10px; bottom: 8px; right: 10px; color: #fff; font-family: var(--disp); font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; text-shadow: 0 1px 8px rgb(0 0 0 / .4); }
.rq-tag { position: absolute; z-index: 1; left: 8px; top: 8px; padding: 3px 8px; border-radius: 999px; background: #fff; color: #5b52c9; font: 700 10.5px var(--sans); font-style: normal; box-shadow: 0 2px 8px rgb(0 0 0 / .18); }
.rq-tag.ej { color: #6f6c7c; }
.rq-ficha .rq-tag { position: static; justify-self: start; margin-top: 3px; box-shadow: none; background: #f1f0f7; }
.rq-prop-b { display: grid; gap: 6px; padding: 9px 11px 11px; }
.rq-tit { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.35; color: var(--fg2); }
.rq-datos { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted); }
.rq-datos svg { width: 14px; height: 14px; margin-right: 3px; vertical-align: -2px; }
.rq-datos small { display: inline-flex; align-items: center; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rq-datos small svg { margin-right: 2px; }
.rq-todas { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 12px 14px 0; padding: 10px; border-radius: 12px; border: 1px solid var(--line2);
  color: var(--fg); font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color .2s, background .2s; }
.rq-todas:hover { border-color: color-mix(in srgb, var(--rq) 60%, var(--line2)); background: var(--panel); }

@media (max-width: 680px) {
  .rq-que b { font-size: 17.5px; }
  .rq-mapa { height: 270px; }
  .rq-props { grid-auto-columns: 172px; }
  .rq-foto { height: 108px; }
  .rq-ficha { grid-template-columns: 84px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .rq-radar.gira i, .rq-pin.mejor::before, .rq:has(.rq-estado.buscando) { animation: none; }
  .rq-pin, .rq-pin::after, .rq-prop { animation-duration: .01ms; }
}

/* las capas de la búsqueda (27 oct 2026): tus propiedades → tus asociaciones → toda la red, como «Lo que no tienes, Gu lo
   busca» de la landing (islb.css: cuadro, triángulo y círculo hueco; la línea de luz recorre la capa en curso) */
.rq-capas { list-style: none; margin: 12px 14px 0; padding: 0; border-top: 1px solid var(--line); }
.rq-capas li { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.rq-capas li > .luz-l { top: -1px; }
.rq-capas li.on > .luz-l { opacity: 1; animation: barre 2.8s linear infinite; }
.rq-capas b { display: block; font-size: 13px; font-weight: 600; color: var(--muted); transition: color .3s; }
.rq-capas small { display: block; font-size: 12px; color: var(--dim); line-height: 1.35; transition: color .3s; }
.rq-capas li.on b, .rq-capas li.hecha b { color: var(--fg); }
.rq-capas li.on small { color: var(--b1); }
.rq-capas li.hecha small { color: var(--muted); }
.rq-capas em { font: 800 16px var(--disp); font-style: normal; font-variant-numeric: tabular-nums; color: var(--fg); animation: msg .3s var(--ease) both; }
.rq-capas em:empty { display: none; }
.rq-capas li.cero em { color: var(--dim); }
.rq-capas li[data-k="2"].hecha:not(.cero) em { color: var(--b1); }
.rq-forma { display: block; width: 10px; height: 10px; justify-self: center; opacity: .45; transition: opacity .3s; }
.rq-capas li.on .rq-forma, .rq-capas li.hecha .rq-forma { opacity: 1; }
.rq-forma.f0 { background: var(--fg); border-radius: 2px; }
.rq-forma.f1 { width: 11px; background: var(--fg2); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.rq-forma.f2 { border-radius: 50%; border: 1.6px solid var(--rq); background: color-mix(in srgb, var(--rq) 25%, transparent); }

/* los anillos de cada capa sobre el mapa: crecen desde el centro con el borde de luz; al terminar quedan punteados */
.rq-anillo { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; will-change: transform; }
.rq-anillo > i { position: absolute; inset: 0; border-radius: 50%; opacity: 0; transform: scale(.12); transition: transform .9s var(--ease), opacity .4s;
  background: radial-gradient(closest-side, rgb(var(--t1) / 0) 55%, rgb(var(--t1) / .16) 100%); }
.rq-anillo > i::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 1.6px; animation: rqGira 6s linear infinite;
  background: conic-gradient(var(--b1), var(--b2) 22%, var(--b3) 40%, var(--b4) 55%, var(--b1) 75%, var(--b2) 90%, var(--b1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.rq-anillo.on > i { opacity: 1; transform: none; }
.rq-anillo.hecho > i { background: none; border: 1px dashed color-mix(in srgb, var(--fg) 30%, transparent); }
.rq-anillo.hecho > i::before { display: none; }
.rq-anillo > span { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--bg) 90%, transparent); font-size: 10.5px; font-weight: 600; color: var(--muted); opacity: 0; transition: opacity .4s, color .3s; }
.rq-anillo.on > span { opacity: 1; color: var(--fg); }
.rq-anillo.hecho > span { opacity: 0; }
/* la red es la última: su nombre baja para no encimarse con el del anillo de adentro */
.rq-anillo.a2 > span { top: auto; bottom: 0; transform: translate(-50%, 50%); }
@media (prefers-reduced-motion: reduce) { .rq-anillo > i::before, .rq-capas li.on > .luz-l { animation: none; } }

/* «cuéntame de esta» (27 oct 2026): las tarjetas son botones (tocarlas es «me interesa») y lo que cuenta Gu lleva sus
   amenidades y el enlace a la propiedad */
button.rq-prop { appearance: none; font: inherit; color: inherit; text-align: left; padding: 0; cursor: pointer; }
.rq-cuenta-de { justify-self: start; margin-top: 2px; padding: 0; border: 0; background: none; color: #5b52c9; font: 700 12px var(--sans); cursor: pointer; }
.rq-det { padding: 9px 0 0; }
.rq-ver { margin: 10px 0 0; }

/* la propiedad que le interesó (27 oct 2026): fotos que se recorren de lado, precio, lo que tiene con íconos y el anuncio */
.chat-live .msg:has(> .rq-det-card), .chat-live .msg:has(> .rq-ficha-t) { width: 94%; }
.rq-det-card { --rq: #8F7BBD; margin-top: 10px; border: 1px solid var(--line2); border-radius: 16px; overflow: hidden; background: var(--bg); contain: inline-size; white-space: normal; animation: rqEntra .45s var(--ease) both; }
.rq-det-fotos { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; height: 210px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--panel2); }
.rq-det-fotos::-webkit-scrollbar { display: none; }
.rq-det-fotos > span { scroll-snap-align: start; background: center / cover no-repeat; }
.rq-det-fotos > span.vacia { display: grid; place-items: center; color: var(--muted); }
.rq-det-fotos > span.vacia svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.rq-det-fotos .rq-tag { position: sticky; left: 8px; top: 8px; align-self: start; justify-self: start; grid-row: 1; grid-column: 1; margin: 8px; }
.rq-det-n { position: absolute; right: 10px; bottom: 10px; padding: 3px 9px; border-radius: 999px; background: rgb(10 8 20 / .6); color: #fff; font: 600 11px var(--sans); font-style: normal; pointer-events: none; }
.rq-det-b { display: grid; gap: 6px; padding: 12px 14px 14px; }
.rq-det-precio { font-family: var(--disp); font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.rq-det-b .rq-tit { -webkit-line-clamp: 3; font-size: 13.5px; color: var(--fg); }
.rq-det-lugar { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); }
.rq-det-card svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rq-det-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin-top: 4px; }
.rq-det-specs span { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-size: 12px; color: var(--fg2); }
.rq-det-specs b { font-family: var(--disp); font-size: 15px; font-weight: 800; color: var(--fg); }
.rq-det-card .rq-chips.rq-det { padding: 4px 0 0; }
.rq-det-desc { margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--fg2); }

/* la ficha técnica para el cliente: vista previa con su enlace y tres salidas (abrir, copiar, WhatsApp) */
.rq-ficha-t { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px 12px; margin-top: 10px; padding: 10px; border-radius: 14px; white-space: normal; contain: inline-size;
  border: 1px solid transparent; animation: giraBorde 6s linear infinite, rqEntra .45s var(--ease) both;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, conic-gradient(from var(--ang), var(--b1), var(--b2) 22%, var(--b3) 40%, var(--b4) 55%, var(--b1) 75%, var(--b2) 90%, var(--b1)) border-box; }
.rq-ficha-t-img { width: 64px; height: 64px; border-radius: 10px; background: center / cover no-repeat var(--panel2); }
.rq-ficha-t-b { display: grid; align-content: center; gap: 2px; min-width: 0; }
.rq-ficha-t-b small { font: 500 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--b1); }
.rq-ficha-t-b b { font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rq-ficha-t-url { font: 400 11px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rq-ficha-t-acc { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rq-ficha-t-acc > * { display: flex; justify-content: center; align-items: center; padding: 9px 6px; border-radius: 10px; border: 1px solid var(--line2); background: var(--panel); color: var(--fg);
  font: 600 12.5px var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: border-color .2s, background .2s; }
.rq-ficha-t-acc > *:hover { border-color: var(--line3); }
.rq-ficha-t-ir { background: var(--fg) !important; color: var(--bg) !important; border-color: var(--fg) !important; }

@media (max-width: 680px) { .rq-det-fotos { height: 190px; } }

/* ================================================================ arranque · reparto (27 oct 2026)
   La tarjeta usa el armazón del requerimiento (`.rq`: borde, cabecera, estado «En vivo» con su latido). Los colores de
   los asesores son los del mock de /nuevo-onboarding y van en `--c`; sobre ellos, texto oscuro en los dos temas. */
.rp-eq { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 0; }
.rp-eq-solo { padding: 10px 0 2px; }
.rp-as { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel); color: var(--fg); font: 500 12.5px var(--sans); }
button.rp-as { cursor: pointer; transition: border-color .2s, background .2s; }
button.rp-as:hover, .rp-as.on { border-color: var(--c, var(--line3)); }
.rp-as.on { background: color-mix(in srgb, var(--c, var(--fg)) 14%, var(--panel)); }
.rp-as i, .rp-dest i, .rp-av { display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #16161a; font: 700 9.5px var(--sans); font-style: normal; letter-spacing: .02em; }
.rp-as em { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--panel2); color: var(--fg2); font: 600 11px var(--mono); font-style: normal; text-align: center; }
.rp-tu i, .rp-dest.tu i { background: var(--fg); color: var(--bg); font-size: 8.5px; }
.rp-as.pulso em { animation: rpPulso .5s var(--ease); }
@keyframes rpPulso { 40% { transform: scale(1.35); background: var(--c, var(--fg)); color: #16161a; } }
.rp-mas { align-self: center; padding: 0 4px; color: var(--muted); font: 600 12px var(--mono); }
.rp-guardia { padding: 8px 14px 0; font-size: 12.5px; color: var(--fg2); }
.rp-guardia b { color: var(--fg); font-weight: 600; }
.rp-leads { list-style: none; margin: 12px 0 0; padding: 0 0 6px; border-top: 1px solid var(--line); }
.rp-lead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); animation: rqEntra .4s var(--ease) backwards; transition: opacity .25s; }
.rp-lead:last-child { border-bottom: 0; }
.rp.filtra .rp-lead:not(.foco) { opacity: .3; }
.rp-av { width: 30px; height: 30px; background: var(--panel2); color: var(--fg2); border: 1px solid var(--line2); font-size: 10.5px; }
.rp-txt { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; min-width: 0; }
.rp-txt b { font-size: 13px; font-weight: 600; }
.rp-txt small { align-self: center; color: var(--muted); font: 500 11px var(--mono); }
.rp-txt q { grid-column: 1 / -1; overflow: hidden; color: var(--fg2); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; quotes: none; }
.rp-dest { display: inline-flex; align-items: center; gap: 7px; min-width: 132px; animation: rqEntra .35s var(--ease) both; }
.rp-dest > span { display: grid; line-height: 1.25; }
.rp-dest b { font-size: 12.5px; font-weight: 600; }
.rp-dest small { color: var(--muted); font-size: 11px; }
.rp-dest.gu { color: var(--muted); font-size: 12px; font-style: italic; animation: rpEspera 1.2s ease-in-out infinite; }
@keyframes rpEspera { 50% { opacity: .4; } }
.rp-cita { grid-column: 2 / -1; display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; border-left: 3px solid var(--c); background: var(--panel2); animation: rqEntra .4s var(--ease) both; }
.rp-cita small { color: var(--muted); font: 500 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.rp-cita b { font-size: 12.5px; font-weight: 600; }
.rp-cita span { color: var(--fg2); font-size: 12px; }
/* la plantilla de las 9:00, con la forma de un mensaje de WhatsApp con botón */
.rp-plant { display: grid; min-width: min(280px, 70vw); margin-top: -2px; }
.rp-plant-h { margin-bottom: 6px; color: var(--muted); font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.rp-ver { margin: 10px -11px -7px; padding: 10px; border: 0; border-top: 1px solid var(--line2); border-radius: 0 0 14px 4px; background: none; color: var(--acc); font: 600 13.5px var(--sans); cursor: pointer; }
.rp-ver:not(:disabled):hover { background: color-mix(in srgb, var(--acc) 10%, transparent); }
.rp-ver:disabled { color: var(--muted); cursor: default; }
.rp-ver:not(:disabled) { animation: rpLlama 1.6s ease-in-out infinite; }
@keyframes rpLlama { 50% { background: color-mix(in srgb, var(--acc) 12%, transparent); } }
.rp-res { margin-top: -2px; font-size: 13px; line-height: 1.5; }
.rp-res b { font-weight: 700; }
@media (max-width: 680px) {
  .rp-lead { grid-template-columns: auto minmax(0, 1fr); }
  .rp-dest { grid-column: 2; min-width: 0; }
  .rp-txt q { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .rp-lead, .rp-dest, .rp-cita, .rp-as.pulso em, .rp-ver, .rp-dest.gu { animation: none !important; } }

/* 27 oct 2026: abajo del chat sobraba el aire reservado para los puntitos de pasos (fijos abajo en escritorio). En el
   chat (`html.en-chat`, lo pone `ir(2)` en onboarding.js) van al final de la página, debajo del texto chico, y el aire
   se va. Fuera de la app: dentro del iframe de /app/onboarding el chat sigue como estaba */
html.en-chat:not(.en-app) .step-chat { padding-bottom: 12px; }
html.en-chat:not(.en-app) .step-chat .fine { margin-bottom: 0; }
html.en-chat:not(.en-app) .dashes { position: static; translate: none; justify-content: center; margin: 14px 0 18px; }
/* la barra de arriba se encoge al bajar (`.top.chica`, ver onboarding.js): más chat a la vista, sobre todo en el teléfono */
.top { transition: height .25s var(--ease), background .25s; }
.top-logo, .top .link-s { transition: height .25s var(--ease), font-size .25s var(--ease), opacity .25s; }
.top.chica { height: 42px; }
.top.chica .top-logo { height: 13px; }
.top.chica .link-s { font-size: 11.5px; }
@media (max-width: 680px) { .top.chica .top-l .link-s { font-size: 0; } .top.chica .top-l .link-s::before { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .top, .top-logo, .top .link-s { transition: none; } }

/* 27 oct 2026: en escritorio el chat era una caja de alto fijo (`100vh - 392px`) que se desplazaba por dentro, y la
   tarjeta del requerimiento (capas, mapa, tarjetas) no cabía: se veía cortada. En las cuatro opciones el chat crece y
   baja la página entera, como ya pasaba en el teléfono; las burbujas y la caja de escribir quedan pegadas abajo */
html.en-chat:not(.en-app) .chat-live { max-height: none; overflow: visible; }
html.en-chat:not(.en-app) .sugs, html.en-chat:not(.en-app) .composer { position: sticky; z-index: 6; }
html.en-chat:not(.en-app) .composer { bottom: 10px; box-shadow: 0 -14px 24px 8px var(--bg); }
html.en-chat:not(.en-app) .sugs { bottom: 74px; margin-bottom: 0; padding: 8px 0 6px; background: var(--bg); }
html.en-chat:not(.en-app) .sugs:empty { padding: 0; }
/* ---------- arranque · ficha limpia (`?entrada=ficha-limpia`, ver `abrirFicha` en onboarding.js) ---------- */
/* el progreso real de ts-services, paso a paso: pendiente (número gris), en curso (gira), hecho (palomita), omitido (raya) */
.ficha-pasos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; counter-reset: fp; }
.ficha-pasos li { counter-increment: fp; display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); }
.ficha-pasos li i { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line2); display: grid; place-items: center; font: 500 9.5px var(--mono); font-style: normal; }
.ficha-pasos li i::before { content: counter(fp); }
.ficha-pasos li em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.ficha-pasos li.active { color: var(--fg); font-weight: 600; }
.ficha-pasos li.active i { border-color: var(--line); border-top-color: var(--acc); animation: girar .8s linear infinite; }
.ficha-pasos li.active i::before { content: none; }
.ficha-pasos li.done { color: var(--fg2); }
.ficha-pasos li.done i { border-color: var(--ok); background: var(--ok); color: var(--bg); }
.ficha-pasos li.done i::before { content: "✓"; font-size: 10px; }
.ficha-pasos li.skipped i::before { content: "–"; }
.ficha-pasos li.detenido { color: var(--fg2); }
.ficha-pasos li.detenido em::after { content: " · se detuvo"; color: var(--acc); }
/* la ficha lista, dentro de la burbuja de Gu: título, fotos y el link a la vista para copiarlo a mano si hace falta */
.ficha-res { display: grid; gap: 4px; margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: 12px 13px; }
.ficha-res b { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.ficha-res span { font-size: 12px; color: var(--fg2); }
.ficha-res code { margin-top: 6px; font: 12px var(--mono); color: var(--acc); border: 1px dashed var(--line2); border-radius: 8px; padding: 7px 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-res .mapa-acciones { margin-top: 10px; flex-wrap: wrap; row-gap: 8px; }
.ficha-res .pill { padding: 7px 14px; font-size: 12.5px; }