/* Demo de Laura (/demo/). Se carga solo en esa página, después de site.css.
   Clases con prefijo d- para no chocar con site.css. Origen: web-src/herramientas/demo.css (build.py la copia a /assets/). */

.d-hero{padding:clamp(28px,4vw,56px) 0 clamp(30px,4vw,48px)}
.d-hero .d-cab{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin-bottom:14px}
.d-hero .d-cab .eyebrow{margin:0}
.d-hero h1{font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.1;max-width:30ch;margin-bottom:14px}
.d-aviso{font-size:.95rem;line-height:1.55;color:var(--gris-claro);max-width:72ch;margin:0}
.d-aviso strong{color:var(--marfil)}
.d-aviso a{color:var(--aurora);text-underline-offset:3px}
.d-lang{display:inline-flex;border:1px solid var(--linea-osc);border-radius:999px;padding:3px}
.d-lang button{border:0;background:transparent;color:var(--gris-claro);font-family:var(--f-titulo);font-weight:700;font-size:.82rem;padding:6px 12px;border-radius:999px;cursor:pointer;min-height:34px}
.d-lang button[aria-pressed="true"]{background:var(--marfil);color:var(--tinta)}

.d-zona{padding:28px 0 72px}
.d-grid{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}

/* Teléfono */
.d-phone{padding:0;background:#fff;border:1px solid var(--linea);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;
  height:min(660px,calc(100dvh - 68px - 32px));min-height:440px;box-shadow:0 1px 2px rgba(21,12,18,.04),0 10px 28px rgba(21,12,18,.08);scroll-margin-top:84px;font-size:16px;line-height:1.45}
.d-bar{background:var(--tinta);color:var(--marfil);display:flex;align-items:center;gap:10px;padding:10px 12px}
.d-avatar{width:38px;height:38px;border-radius:50%;background:var(--vino);display:grid;place-items:center;font-family:var(--f-titulo);font-weight:700;flex:none}
.d-who{flex:1;min-width:0}
.d-who b{display:block;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-who span{display:block;font-size:.78rem;color:var(--gris-claro)}
.d-reset{border:1px solid var(--linea-osc);background:transparent;color:var(--marfil);font:inherit;font-size:.82rem;padding:0 12px;min-height:36px;border-radius:999px;cursor:pointer;flex:none}
.d-reset:hover{background:var(--tinta-3)}

.d-log{flex:1;overflow-y:auto;background:var(--marfil);padding:14px 10px 8px;display:flex;flex-direction:column;gap:6px;scroll-behavior:smooth}
.d-msg{max-width:82%;padding:7px 10px 5px;border-radius:14px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;font-size:.95rem;box-shadow:0 1px 1px rgba(21,12,18,.06);animation:d-entra .18s ease-out}
.d-msg time{display:block;text-align:right;font-family:var(--f-mono);font-size:.62rem;color:var(--gris);margin-top:2px}
.d-laura{align-self:flex-start;background:#fff;border-top-left-radius:4px}
.d-yo{align-self:flex-end;background:#EFD9E2;border-top-right-radius:4px}
.d-sys{align-self:center;max-width:92%;text-align:center;font-size:.82rem;padding:6px 10px;border-radius:8px;background:#fff8e6;color:#5b4a12;border:1px solid #f0e2b8;animation:d-entra .18s ease-out}
.d-sys.ok{background:#E9F3EC;color:#1F4B33;border-color:#C9E1D1}
.d-sys.err{background:#FBEFE3;color:#6E3F0C;border-color:#F0D5B6}
.d-typing{align-self:flex-start;background:#fff;border-radius:14px;border-top-left-radius:4px;padding:10px 12px;display:inline-flex;gap:4px}
.d-typing i{width:7px;height:7px;border-radius:50%;background:var(--gris);opacity:.5;animation:d-punto 1.2s infinite ease-in-out}
.d-typing i:nth-child(2){animation-delay:.15s}.d-typing i:nth-child(3){animation-delay:.3s}
@keyframes d-punto{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
@keyframes d-entra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.d-msg,.d-sys{animation:none}.d-typing i{animation:none;opacity:.8}.d-log{scroll-behavior:auto}}

.d-chips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 10px 0;background:var(--marfil)}
.d-chips[hidden]{display:none}
.d-chips button{border:1px solid var(--linea);background:#fff;color:var(--tinta);font:inherit;font-size:.82rem;padding:0 12px;min-height:34px;border-radius:999px;cursor:pointer}
.d-chips button:hover{border-color:var(--vino)}

.d-form{display:flex;gap:8px;align-items:flex-end;padding:8px;background:var(--marfil);border-top:1px solid var(--linea)}
.d-form textarea{flex:1;resize:none;border:1px solid rgba(21,12,18,.22);border-radius:22px;padding:10px 14px;font:inherit;font-size:16px;background:#fff;color:var(--tinta);max-height:120px;min-height:44px;line-height:1.35}
.d-form textarea:focus{outline:2px solid var(--vino);outline-offset:0;border-color:transparent}
.d-form textarea::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--gris)}
.d-send{width:44px;height:44px;border-radius:50%;border:0;background:var(--vino);color:var(--marfil);cursor:pointer;display:grid;place-items:center;flex:none}
.d-send:hover{background:var(--ciruela)}
.d-send:disabled,.d-form textarea:disabled{opacity:.5;cursor:not-allowed}
.d-send svg{width:20px;height:20px}
.d-pie{display:flex;justify-content:space-between;gap:12px;font-size:.74rem;color:var(--gris);padding:8px 12px 10px;background:var(--marfil);border-top:1px solid var(--linea)}

/* Lateral */
.d-lateral h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:14px}
.d-lateral .lista-check li{font-size:.98rem;color:#3E3339}
.d-lateral .mas{margin:22px 0 22px}

@media (max-width:900px){
  .d-grid{grid-template-columns:minmax(0,1fr)}
  .d-zona{padding:16px 0 56px}
}
@media (max-width:560px){
  .d-zona .wrap{padding:0 10px}
  .d-lateral{padding:0 6px}
  .d-phone{height:calc(100dvh - 68px - 20px);min-height:420px}
}