@font-face {
  font-family: 'Bricolage';
  src: url('/fonts/bricolage.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #EFF3F1;
  --surface: #FFFFFF;
  --surface2: #F6FAF8;
  --ink: #132B2A;
  --muted: #5D7371;
  --line: #D8E2DE;
  --accent: #F55B1F;
  --accent-deep: #D94A12;
  --accent-soft: #FDE7DC;
  --ok: #128A5E;
  --ok-soft: #DFF3EA;
  --warn: #B45309;
  --warn-soft: #FEF3C7;
  --bubble-user: #16322F;
  --bubble-user-ink: #F2F7F5;
  --band: #14302D;
  --band-ink: #E9F2EF;
  --shadow: 0 10px 30px rgba(19, 43, 42, .10);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0C1615;
    --surface: #132220;
    --surface2: #182B28;
    --ink: #E7F0ED;
    --muted: #93AAA5;
    --line: #24403B;
    --accent: #FF7A3C;
    --accent-deep: #F55B1F;
    --accent-soft: #3A2315;
    --ok: #31C08A;
    --ok-soft: #123528;
    --warn: #F59E0B;
    --warn-soft: #3A2E15;
    --bubble-user: #24443F;
    --bubble-user-ink: #EDF5F2;
    --band: #182B28;
    --band-ink: #E7F0ED;
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

h1, h2, .display { font-family: 'Bricolage', 'Segoe UI', sans-serif; text-wrap: balance; }
a { color: var(--accent-deep); }

/* ---------- header ---------- */
header.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 22px 0 8px;
}
.wordmark {
  font-family: 'Bricolage', sans-serif; font-weight: 800; font-size: 26px;
  letter-spacing: -.02em; text-decoration: none; color: var(--ink);
}
.wordmark em { font-style: normal; color: var(--accent); }
.topnav { display: flex; align-items: center; gap: 10px; }
.navlink {
  font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none;
  padding: 8px 12px; border-radius: 10px;
}
.navlink:hover { color: var(--ink); background: var(--surface); }
.userchip {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; color: var(--ink); text-decoration: none;
}
.userchip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }

/* ---------- hero ---------- */
/* Una sola columna centrada: el chat es lo que hay que mirar, no una ilustración al lado. */
.hero {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 30px 0 18px; text-align: center;
}
.hero-txt { max-width: 44ch; }
.hero .chat { width: min(760px, 100%); text-align: left; }
.hero-pie {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding-top: 4px;
}
.enlace {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--muted);
  background: none; border: 0; padding: 6px 4px; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.enlace:hover { color: var(--accent-deep); }
.eyebrow {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-deep); font-weight: 600; margin: 0 0 14px;
}
@media (prefers-color-scheme: dark) { .eyebrow { color: var(--accent); } }
.hero h1 {
  font-size: clamp(34px, 4.6vw, 52px); font-weight: 800;
  line-height: 1.06; letter-spacing: -.025em; margin: 0 0 18px;
}
.hero h1 .hl { color: var(--accent); }
.hero .sub {
  color: var(--muted); font-size: 17px; max-width: 46ch; margin: 0 auto;
}
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; }
.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  border-radius: 12px; padding: 13px 22px; border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  text-decoration: none; display: inline-block;
}
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: var(--accent-deep); color: #fff; }
.btn-primary:hover { background: var(--accent); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--muted); transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.stats { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; }
.stat { max-width: 22ch; }
.stat b {
  display: block; font-family: 'Bricolage', sans-serif; font-weight: 800;
  font-size: 26px; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.stat span { color: var(--muted); font-size: 13.5px; }

/* Escritorio (11-oct): el texto a la izquierda y el chat a la derecha, como el prototipo, para que
   Provi se vea —y se le vea escribir— sin bajar. Con el titular de compras, en una sola columna el
   chat quedaba bajo el pliegue. En móvil sigue en una columna. */
@media (min-width: 1000px) {
  .hero {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-areas: "txt chat" "pie chat"; column-gap: 48px; row-gap: 26px;
    align-items: start; text-align: left; padding-top: 34px;
  }
  .hero-txt { grid-area: txt; max-width: none; align-self: end; }
  .hero .chat { grid-area: chat; width: 100%; }
  .hero-pie { grid-area: pie; align-items: flex-start; padding-top: 0; }
  .hero .sub { margin: 0; }
  .hero h1 { font-size: clamp(38px, 4vw, 50px); }
  .hero .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; justify-content: start; }
  .hero .msgs { height: clamp(380px, 52vh, 500px); }
}

/* ---------- chat ---------- */
.chat {
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column;
}
.chat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--surface2);
}
.avatar {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: var(--accent-deep); color: #fff;
  display: grid; place-items: center;
}
.avatar svg { width: 22px; height: 22px; }
.chat-head .who b { display: block; font-family: 'Bricolage', sans-serif; font-weight: 700; font-size: 16px; }
.chat-head .who span { font-size: 12.5px; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; margin-right: 5px; }
.demo-tag {
  margin-left: auto; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); border: 1px dashed var(--line); border-radius: 8px; padding: 4px 8px;
}
.callbtn {
  margin-left: auto; /* al extremo derecho de la cabecera del chat (antes lo empujaba la etiqueta «Beta») */
  width: 38px; height: 38px; border-radius: 50%; border: 0; flex: none;
  background: var(--ok); color: #fff; cursor: pointer;
  display: grid; place-items: center; transition: filter .12s, transform .12s;
}
.callbtn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.callbtn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.callbtn svg { width: 18px; height: 18px; }
.msgs {
  height: clamp(400px, 56vh, 540px); overflow-y: auto;
  padding: 20px 18px 10px; display: flex; flex-direction: column; gap: 12px;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { .msgs { scroll-behavior: auto; } }
.msg { max-width: 86%; padding: 11px 15px; font-size: 15px; animation: pop .18s ease; }
@media (prefers-reduced-motion: reduce) { .msg { animation: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg.bot {
  align-self: flex-start; background: var(--surface2);
  border: 1px solid var(--line); border-radius: 4px 16px 16px 16px;
}
.msg.user {
  align-self: flex-end; background: var(--bubble-user); color: var(--bubble-user-ink);
  border-radius: 16px 4px 16px 16px;
}
.msg .step {
  display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.msg.wide { max-width: 96%; align-self: stretch; background: transparent; border: 0; padding: 0; }

.typing { display: inline-flex; gap: 5px; padding: 14px 16px; }
.typing i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
  animation: blink 1s infinite;
}
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 70%, 100% { opacity: .25; } 35% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .typing i { animation: none; opacity: .6; } }

/* tarjetas de proveedor */
.pcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 10px; box-shadow: 0 3px 10px rgba(19,43,42,.06);
}
.pcard .row1 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pcard .name { font-family: 'Bricolage', sans-serif; font-weight: 700; font-size: 16.5px; }
.match {
  margin-left: auto; font-weight: 700; font-size: 14px; color: var(--ok);
  background: var(--ok-soft); border-radius: 8px; padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}
.pcard .tag { color: var(--muted); font-size: 13.5px; margin: 2px 0 8px; }
.feat { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.feat i {
  font-style: normal; font-size: 12px; padding: 3px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-deep); font-weight: 600;
}
@media (prefers-color-scheme: dark) { .feat i { color: var(--accent); } }
.pcard .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-sm { padding: 8px 14px; border-radius: 9px; font-size: 13.5px; }
.contact-reveal {
  margin-top: 10px; padding: 10px 12px; background: var(--surface2);
  border: 1px dashed var(--line); border-radius: 10px; font-size: 13.5px;
  overflow-wrap: anywhere;
}

/* chips + input */
.chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 18px 12px; }
.chip {
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 999px; padding: 8px 15px; transition: border-color .12s, background .12s;
}
.chip:hover { border-color: var(--accent); }
.chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
@media (prefers-color-scheme: dark) { .chip.on { color: var(--accent); } }
.chip.go { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.inbar {
  display: flex; gap: 10px; padding: 12px 18px 16px; border-top: 1px solid var(--line);
}
.inbar input {
  /* 16px mínimo: evita el auto-zoom de iOS al enfocar el campo */
  flex: 1; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface2); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 11px 16px;
}
.inbar input:focus { outline: none; border-color: var(--accent); }
.inbar input::placeholder { color: var(--muted); }
.send {
  font: inherit; font-weight: 700; cursor: pointer; border: 0; border-radius: 12px;
  background: var(--accent-deep); color: #fff; padding: 0 20px;
}
.send:hover { background: var(--accent); }
.send:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.send:disabled { opacity: .45; cursor: default; }

/* ---------- cómo funciona ---------- */
.how { padding: 54px 0 10px; }
.how h2 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 26px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stepcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px;
}
.stepcard .ic {
  width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft);
  display: grid; place-items: center; margin-bottom: 14px;
}
.stepcard .ic svg { width: 22px; height: 22px; stroke: var(--accent-deep); }
@media (prefers-color-scheme: dark) { .stepcard .ic svg { stroke: var(--accent); } }
.stepcard b { font-family: 'Bricolage', sans-serif; font-size: 17px; display: block; margin-bottom: 6px; }
.stepcard p { color: var(--muted); font-size: 14.5px; margin: 0; }

/* ---------- banda proveedores ---------- */
.band {
  margin: 44px 0 0; background: var(--band); color: var(--band-ink);
  border-radius: 20px; padding: 36px 34px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.band h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.band p { margin: 0; opacity: .75; font-size: 15px; max-width: 52ch; }

/* ---------- portada para compras (11-oct): problema, dos lados ---------- */
.kicker {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-deep); font-weight: 600; margin: 0 0 10px;
}
@media (prefers-color-scheme: dark) { .kicker { color: var(--accent); } }
.problema, .dual { padding: 54px 0 0; }
.problema h2, .dual h2 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; }
.problema .intro { color: var(--muted); font-size: 15.5px; max-width: 60ch; margin: 0 0 26px; }
.dual h2 { margin-bottom: 26px; }
.compare, .dual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compare-card, .dual-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 26px;
}
.compare-card h3, .dual-card h3 {
  font-family: 'Bricolage', sans-serif; font-size: 19px; font-weight: 700; line-height: 1.3; margin: 0 0 10px;
}
.compare-card p, .dual-card p { color: var(--muted); font-size: 14.5px; margin: 0; }
.dual-card { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 30px 26px; }
.dual-card p { flex: 1; }
.compare-card .tag {
  display: inline-block; font-size: 12.5px; font-weight: 700; border-radius: 999px;
  padding: 4px 11px; margin-bottom: 14px; background: var(--accent-soft); color: var(--accent-deep);
}
/* La tarjeta oscura es la de Provi / la del proveedor: mismo tono que la banda de siempre. */
.oscura { background: var(--band); color: var(--band-ink); border-color: var(--band); }
.oscura p { color: var(--band-ink); opacity: .78; }
.oscura .tag { background: rgba(245, 91, 31, .22); color: #FF9A66; }
@media (prefers-color-scheme: dark) { .oscura { border-color: rgba(255, 122, 60, .45); } }

/* ---------- modal auth ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 70; background: rgba(7, 16, 15, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  animation: fadein .18s ease;
}
/* display:flex le ganaría al atributo hidden; esta regla restaura el cierre */
.modal-backdrop[hidden] { display: none; }
#google-btn { display: flex; justify-content: center; margin-bottom: 4px; }
.or-sep {
  display: flex; align-items: center; gap: 12px; margin: 14px 0;
  color: var(--muted); font-size: 12.5px;
}
.or-sep::before, .or-sep::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .modal-backdrop { animation: none; } }
.modal {
  width: min(400px, 100%); background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 26px; box-shadow: var(--shadow);
}
.modal h2 { margin: 0 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.modal .hint { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.tabs { display: flex; gap: 6px; margin-bottom: 18px; background: var(--surface2); border-radius: 12px; padding: 4px; }
.tab {
  flex: 1; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  border: 0; border-radius: 9px; padding: 9px 0; background: transparent; color: var(--muted);
}
.tab.on { background: var(--surface); color: var(--ink); box-shadow: 0 2px 6px rgba(19,43,42,.08); }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.field input {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface2); border: 1.5px solid var(--line); border-radius: 11px;
  padding: 11px 14px;
}
.field input:focus { outline: none; border-color: var(--accent); }
.form-error {
  display: none; background: var(--warn-soft); color: var(--warn);
  font-size: 13.5px; border-radius: 9px; padding: 9px 12px; margin-bottom: 12px;
}
.form-error.show { display: block; }
.modal .btn { width: 100%; text-align: center; }
.modal .close {
  float: right; border: 0; background: none; font-size: 22px; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 8px;
}
.modal .close:hover { color: var(--ink); background: var(--surface2); }

/* ---------- páginas internas (cuenta / admin) ---------- */
.pagehead { padding: 30px 0 10px; }
.pagehead h1 { font-size: clamp(26px, 4vw, 34px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.pagehead p { color: var(--muted); margin: 0; }
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px; margin: 16px 0;
}
.cards-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.kpi b { display: block; font-family: 'Bricolage', sans-serif; font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi span { color: var(--muted); font-size: 13px; }
.tblwrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line);
}
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.badge {
  display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px;
}
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.mut { background: var(--surface2); color: var(--muted); border: 1px solid var(--line); }
.empty { color: var(--muted); text-align: center; padding: 30px 0; }

footer {
  padding: 34px 0 40px; color: var(--muted); font-size: 13px;
  border-top: 1px solid var(--line); margin-top: 46px;
}

/* ---------- llamada simulada (demo del agente de voz) ---------- */
.callov {
  position: fixed; inset: 0; z-index: 60; padding: 18px;
  background: rgba(7, 16, 15, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  animation: fadein .18s ease;
}
@media (prefers-reduced-motion: reduce) { .callov { animation: none; } }
.callcard {
  width: min(420px, 100%); background: var(--band); color: var(--band-ink);
  border-radius: 26px; padding: 28px 24px 26px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
.calldemo {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .6;
  border: 1px dashed rgba(255, 255, 255, .35); border-radius: 8px; padding: 3px 9px; margin-bottom: 20px;
}
.callavatar {
  position: relative; width: 92px; height: 92px; border-radius: 28px;
  background: var(--accent-deep); color: #fff; display: grid; place-items: center;
}
.callavatar svg { width: 44px; height: 44px; }
.ring {
  position: absolute; inset: -8px; border-radius: 34px; border: 2px solid var(--accent);
  opacity: 0; animation: ring 2.2s ease-out infinite;
}
.ring + .ring { animation-delay: 1.1s; }
.callov.live .ring { animation: none; opacity: 0; }
@keyframes ring { from { transform: scale(.92); opacity: .7; } to { transform: scale(1.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ring { animation: none; } }
.callname { font-family: 'Bricolage', sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -.02em; margin-top: 16px; }
.callsub { opacity: .7; font-size: 13.5px; }
.callstatus { margin-top: 6px; font-size: 14px; font-weight: 600; color: #58D3A5; font-variant-numeric: tabular-nums; }
.wave { display: flex; gap: 4px; height: 28px; align-items: center; margin-top: 14px; opacity: .3; transition: opacity .2s; }
.wave.speaking { opacity: 1; }
.wave i { width: 4px; height: 20%; border-radius: 2px; background: var(--accent); }
.wave.speaking i { animation: wv .8s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: .12s; }
.wave i:nth-child(3) { animation-delay: .24s; }
.wave i:nth-child(4) { animation-delay: .36s; }
.wave i:nth-child(5) { animation-delay: .48s; }
.wave i:nth-child(6) { animation-delay: .6s; }
.wave i:nth-child(7) { animation-delay: .72s; }
@keyframes wv { 0%, 100% { height: 18%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .wave.speaking i { animation: none; height: 60%; } }
.captions {
  width: 100%; margin-top: 16px; min-height: 96px; max-height: 170px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px; text-align: left;
}
.cap {
  font-size: 13.5px; line-height: 1.45; background: rgba(255, 255, 255, .08);
  border-radius: 10px; padding: 8px 11px; animation: pop .18s ease;
}
@media (prefers-reduced-motion: reduce) { .cap { animation: none; } }
.cap b { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-bottom: 2px; }
.cap.user { background: rgba(245, 91, 31, .2); }
.callctl { display: flex; gap: 20px; margin-top: 20px; }
.cbtn {
  width: 58px; height: 58px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #fff;
  display: grid; place-items: center; transition: background .15s;
}
.cbtn:hover { background: rgba(255, 255, 255, .16); }
.cbtn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cbtn svg { width: 24px; height: 24px; }
.cbtn.muted { background: #fff; color: #14302D; }
.cbtn.end { background: #E5484D; border-color: transparent; }
.cbtn.end:hover { background: #F2555A; }
.cbtn.end svg { transform: rotate(135deg); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .hero { gap: 20px; padding-top: 16px; }
  .stats { gap: 18px; }
  .steps, .compare, .dual-grid { grid-template-columns: 1fr; }
  .msgs { height: clamp(380px, 52vh, 480px); }
  .band { padding: 28px 22px; }
}
@media (max-width: 520px) {
  .callov { padding: 0; align-items: stretch; }
  .callcard { width: 100%; border-radius: 0; justify-content: center; min-height: 100vh; min-height: 100dvh; }
  .demo-tag { display: none; }
  .callbtn { margin-left: auto; }
  .navlink { padding: 8px 8px; }
}

/* ===== Modo en vivo (rumbo.js): Markdown mínimo del modelo dentro de la burbuja ===== */
.msg.bot p { margin: 0 0 7px; }
.msg.bot p:last-child { margin-bottom: 0; }
.msg.bot ul, .msg.bot ol { margin: 4px 0 8px 18px; padding: 0; }
.msg.bot ul:last-child, .msg.bot ol:last-child { margin-bottom: 0; }
.msg.bot li { margin: 3px 0; }
.msg.bot code { font-size: .92em; background: rgba(0, 0, 0, .06); padding: 1px 5px; border-radius: 5px; }

/* ===== Voz en tiempo real (voz.js): sobre el overlay de la demo ===== */
.callov.voz .calldemo.vivo { border-style: solid; border-color: rgba(88, 211, 165, .6); color: #58D3A5; opacity: 1; }
.callov.voz .listen { margin-top: 14px; }
/* `.btn` fija display y anulaba el atributo `hidden`: «Toca para escuchar» salía en todas las
   llamadas aunque el audio sonara bien (01-oct). Solo debe verse si el navegador bloqueó el audio. */
.callov .listen[hidden] { display: none; }
.callov.voz .captions:empty { min-height: 0; margin-top: 0; }
.callov.voz.agente-habla .callavatar { box-shadow: 0 0 0 6px rgba(245, 91, 31, .25); }

.callov.voz .micstate { margin-top: 8px; font-size: 12.5px; color: #58D3A5; opacity: .85; min-height: 18px; }
.callov.voz.tu-voz .micstate { opacity: 1; font-weight: 600; }
.callov.voz .callhint { margin-top: 8px; font-size: 12.5px; color: #FFD27A; background: rgba(255, 210, 122, .12); border-radius: 8px; padding: 6px 10px; }

/* Llamada con resultados (01-oct). La ventana de la llamada tapa el chat (en el móvil, la
   pantalla entera), así que las fichas que se pintaban detrás no se veían. Con resultados, la
   tarjeta se compacta en una barra arriba (nombre, estado, silenciar, colgar, el último subtítulo)
   y la lista queda debajo, en la propia ventana. */
.lista-llamada { display: none; }
.callov.con-lista .callcard {
  width: min(560px, 100%); height: min(780px, calc(100dvh - 36px));
  padding: 14px 14px 12px; align-items: stretch; text-align: left; position: relative;
}
.callov.con-lista .calldemo, .callov.con-lista .callsub, .callov.con-lista .wave, .callov.con-lista .ring { display: none; }
.callov.con-lista .callavatar { position: absolute; top: 14px; left: 14px; width: 44px; height: 44px; border-radius: 14px; }
.callov.con-lista .callavatar svg { width: 22px; height: 22px; }
.callov.con-lista .callname { margin: 0 104px 0 56px; font-size: 18px; min-height: 24px; }
.callov.con-lista .callstatus, .callov.con-lista .micstate { margin: 0 104px 0 56px; font-size: 12.5px; }
.callov.con-lista .callctl { position: absolute; top: 12px; right: 12px; margin: 0; gap: 8px; }
.callov.con-lista .cbtn { width: 44px; height: 44px; }
.callov.con-lista .cbtn svg { width: 20px; height: 20px; }
.callov.con-lista .captions { min-height: 0; max-height: 66px; margin-top: 10px; }
.callov.con-lista .listen { align-self: center; margin-top: 8px; }
.callov.con-lista .lista-llamada {
  display: block; flex: 1; min-height: 0; overflow-y: auto; margin-top: 10px;
  background: var(--ground); color: var(--ink); border-radius: 18px; padding: 10px;
}
.lista-llamada .pista-llamada { margin: 2px 4px 8px; font-size: 13px; color: var(--muted); }
@media (max-width: 520px) {
  .callov.con-lista .callcard { height: 100vh; height: 100dvh; min-height: 0; justify-content: flex-start; }
}

/* Pulso mientras suena el timbre de llamada (voz.js). Mismo gesto que en /app. */
.callbtn.llamando { animation: callpulse 1.4s ease-in-out infinite; }
@keyframes callpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  50%      { box-shadow: 0 0 0 6px rgba(0,0,0,.06); }
}
@media (prefers-reduced-motion: reduce) { .callbtn.llamando { animation: none; } }