/* Estilos base de gu-demo.js. Cada landing los tematiza con estas variables. */
.gd {
  --gd-bg: var(--kffffff);
  --gd-fg: var(--k2d2a35);
  --gd-muted: var(--k6e6879);
  --gd-accent: var(--k7f77dd);
  --gd-accent-fg: var(--kffffff);
  --gd-accent-soft: var(--k7f77dd-12);
  --gd-in: var(--kf3f2f7);          /* burbuja de Gu */
  --gd-out: var(--k7f77dd);         /* burbuja del usuario */
  --gd-out-fg: var(--kffffff);
  --gd-card: var(--kffffff);
  --gd-border: var(--k14121c-1);
  --gd-ok: var(--k1f9d63);
  --gd-warn: var(--kc98a12);
  --gd-no: var(--kd0453d);
  --gd-radius: 16px;
  --gd-font: inherit;
  --gd-height: 560px;

  display: flex; flex-direction: column; height: var(--gd-height); min-height: 0;
  background: var(--gd-bg); color: var(--gd-fg); font-family: var(--gd-font);
  border-radius: var(--gd-radius); overflow: hidden; position: relative;
  font-size: 14.5px; line-height: 1.42;
}
.gd * { box-sizing: border-box; }
.gd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gd-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--gd-border); }
.gd-head b { display: block; font-size: 15px; }
.gd-head small { color: var(--gd-muted); font-size: 12px; }
.gd-av { width: 36px; height: 36px; border-radius: 50%; background: var(--gd-accent); display: grid; place-items: center; flex: none; overflow: hidden; }
.gd-av img { width: 70%; height: 70%; object-fit: contain; filter: brightness(0) invert(1); }

.gd-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; overscroll-behavior: contain; }
.gd-msg { max-width: 86%; padding: 9px 12px; border-radius: 14px; animation: gd-in .35s cubic-bezier(.22,1,.36,1) both; overflow-wrap: anywhere; }
.gd-msg--gu { align-self: flex-start; background: var(--gd-in); border-top-left-radius: 4px; }
.gd-msg--yo { align-self: flex-end; background: var(--gd-out); color: var(--gd-out-fg); border-top-right-radius: 4px; }
.gd-msg--card { background: none; padding: 0; max-width: 94%; width: 94%; }
.gd-msg--sys { align-self: stretch; max-width: none; background: none; padding: 4px 0; }
.gd-switch { display: flex; align-items: center; gap: 10px; color: var(--gd-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.gd-switch::before, .gd-switch::after { content: ""; flex: 1; height: 1px; background: var(--gd-border); }
@keyframes gd-in { from { opacity: 0; transform: translateY(6px); } }
.gd-typing { display: flex; gap: 4px; padding: 12px 14px; }
.gd-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--gd-muted); animation: gd-dot 1s infinite ease-in-out; }
.gd-typing i:nth-child(2) { animation-delay: .15s } .gd-typing i:nth-child(3) { animation-delay: .3s }
@keyframes gd-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0) } 40% { opacity: 1; transform: translateY(-3px) } }

.gd-card { background: var(--gd-card); border: 1px solid var(--gd-border); border-radius: 14px; padding: 12px; display: block; }
.gd-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.gd-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--gd-accent); }
.gd-temp { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--gd-accent-soft); color: var(--gd-accent); }
.gd-temp--caliente { background: var(--kd0453d-12); color: var(--gd-no); }
.gd-temp--frio { background: var(--k6e6879-12); color: var(--gd-muted); }
.gd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.gd-kv { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 9px; background: var(--gd-accent-soft); }
.gd-kv span { font-size: 10.5px; color: var(--gd-muted); }
.gd-kv b { font-size: 13px; font-weight: 600; }
.gd-kv--falta { background: transparent; border: 1px dashed var(--gd-border); }
.gd-kv--falta b { color: var(--gd-muted); font-weight: 500; }
.gd-pill { display: inline-block; font-size: 11px; padding: 2px 8px; margin: 0 4px 6px 0; border-radius: 99px; border: 1px solid var(--gd-border); }
.gd-bar { height: 5px; border-radius: 5px; background: var(--gd-accent-soft); overflow: hidden; margin: 2px 0 6px; }
.gd-bar i { display: block; height: 100%; background: var(--gd-accent); border-radius: 5px; transition: width .8s; }
.gd-note { display: block; color: var(--gd-muted); font-size: 12px; }
.gd-quote { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--gd-in); font-size: 14px; border-left: 3px solid var(--gd-accent); }
.gd-score { font-weight: 700; font-size: 18px; color: var(--gd-accent); }
.gd-reasons { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 5px; }
.gd-r { display: flex; gap: 7px; align-items: flex-start; font-size: 13px; }
.gd-r svg { width: 16px; height: 16px; flex: none; margin-top: 1px; padding: 1px; border-radius: 50%; }
.gd-r--ok svg { color: #fff; background: var(--gd-ok); }
.gd-r--warn svg { color: #fff; background: var(--gd-warn); }
.gd-r--no svg { color: #fff; background: var(--gd-no); }
.gd-ficha, .gd-card--prop { display: flex; gap: 10px; align-items: stretch; border: 1px solid var(--gd-border); border-radius: 12px; padding: 8px; background: var(--gd-card); }
.gd-card--prop { padding: 8px; }
.gd-ficha-img { --c: var(--kc9c3f2); width: 84px; min-height: 70px; border-radius: 9px; flex: none; position: relative; overflow: hidden;
  background: linear-gradient(180deg, transparent 50%, var(--k000000-28)), linear-gradient(160deg, color-mix(in oklab, var(--c) 70%, white) 0 45%, var(--c) 46% 100%); }
.gd-ficha-img span { position: absolute; left: 6px; bottom: 5px; font-size: 10.5px; font-weight: 700; color: #fff; }
.gd-ficha-img em { position: absolute; left: 6px; top: 5px; font-style: normal; font-size: 10px; font-weight: 700; color: var(--gd-accent); background: var(--kffffff); padding: 1px 6px; border-radius: 99px; }
.gd-ficha-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gd-ficha-body b { font-size: 13.5px; }
.gd-ficha-body small { color: var(--gd-muted); font-size: 12px; }
.gd-link { font-size: 11.5px; color: var(--gd-accent); }
.gd-loop { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 0; }
.gd-loop li { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 6px 0 6px 14px; font-size: 13px; animation: gd-in .4s both; animation-delay: calc(var(--i) * 140ms); }
.gd-loop li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--gd-accent); }
.gd-loop li:not(:last-child)::after { content: ""; position: absolute; left: 3px; top: 20px; bottom: -6px; width: 1px; background: var(--gd-border); }
.gd-when { font-weight: 600; color: var(--gd-accent); font-size: 12px; }
.gd-card--cita { margin: 8px 0; padding: 10px 12px; background: var(--gd-accent-soft); border: 0; }
.gd-card--cita b { display: block; }
.gd-card--cita small { color: var(--gd-muted); }

.gd-card--signup { display: grid; gap: 8px; }
.gd-card--signup label { display: grid; gap: 3px; font-size: 12px; color: var(--gd-muted); }
.gd-card--signup input { font: inherit; font-size: 14px; color: var(--gd-fg); background: var(--gd-bg); border: 1px solid var(--gd-border); border-radius: 10px; padding: 9px 11px; }
.gd-card--signup input:focus { outline: 2px solid var(--gd-accent); outline-offset: 0; border-color: transparent; }
.gd-cta { display: inline-flex; justify-content: center; align-items: center; font: inherit; font-weight: 600; font-size: 14.5px; color: var(--gd-accent-fg); background: var(--gd-accent); border: 0; border-radius: 11px; padding: 11px 14px; cursor: pointer; text-decoration: none; }
.gd-cta:disabled { opacity: .7; cursor: progress; }
.gd-wa { display: inline-flex; justify-content: center; align-items: center; gap: 6px; color: var(--gd-fg); font-size: 13.5px; text-decoration: none; padding: 8px; border: 1px solid var(--gd-border); border-radius: 11px; }
.gd-wa svg { width: 17px; height: 17px; color: var(--k25d366); }
.gd-card--done p { margin: 0 0 10px; }

.gd-chips { display: flex; gap: 6px; padding: 0 12px 8px; overflow-x: auto; scrollbar-width: none; }
.gd-chips:empty { display: none; }
.gd-chip { flex: none; font: inherit; font-size: 12.5px; color: var(--gd-fg); background: var(--gd-bg); border: 1px solid var(--gd-border); border-radius: 99px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.gd-chip:hover { border-color: var(--gd-accent); color: var(--gd-accent); }
.gd-composer { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px 12px; border-top: 1px solid var(--gd-border); }
.gd-composer textarea { flex: 1; resize: none; font: inherit; font-size: 14.5px; color: var(--gd-fg); background: var(--gd-in); border: 1px solid transparent; border-radius: 12px; padding: 10px 12px; max-height: 140px; }
.gd-composer textarea:focus { outline: none; border-color: var(--gd-accent); }
.gd-composer button { width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--gd-accent); color: var(--gd-accent-fg); display: grid; place-items: center; cursor: pointer; flex: none; }
.gd-composer button:disabled { opacity: .5; }
.gd-composer button svg { width: 18px; height: 18px; }
.gd--compacto { border-radius: 0; font-size: 13.5px; }
.gd--compacto .gd-msg--card { width: 100%; max-width: 100%; }
@media (prefers-reduced-motion: reduce) { .gd-msg, .gd-loop li { animation: none; } .gd-log { scroll-behavior: auto; } }

/* Variante sobria: sin etiquetas (nada de mayúsculas espaciadas, píldoras ni badges) y sin cursivas */
.gd--sobrio, .gd--sobrio * { font-style: normal !important; }
.gd--sobrio .gd-tag { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 800; color: var(--gd-fg); }
.gd--sobrio .gd-temp, .gd--sobrio .gd-pill { background: none; border: 0; padding: 0; border-radius: 0; font-size: 12.5px; font-weight: 600; color: var(--gd-muted); }
.gd--sobrio .gd-pill { margin: 0 10px 6px 0; }
.gd--sobrio .gd-pill::before { content: "+ "; }
.gd--sobrio .gd-ficha-img em { background: none; color: #fff; padding: 0; font-weight: 800; }
.gd--sobrio .gd-switch { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.gd--sobrio .gd-chip { border-radius: 10px; font-weight: 600; }
.gd--sobrio .gd-when { font-weight: 800; }
.gd--retomando .gd-msg { animation: none; }