.demo-section{background:var(--surface)}
.demo-note{margin:19px 0 0;color:var(--muted);font-size:13px}
.channel-logo{display:block;width:21px;height:21px}
.demo-channel-disabled{cursor:not-allowed;opacity:.55;pointer-events:none}

/* Comparador de canales: mismas pestañas que el resto de la demo, pero cada
   canal tiene su propia conversación de ejemplo, sus beneficios y su plan
   mínimo -- no son intercambiables, y la copy lo dice explícito en vez de
   tratarlos como dos botones iguales. */
.channel-demo-wrap{margin-top:34px}
.channel-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.channel-tab{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;
  padding:11px 20px;background:var(--surface);color:var(--muted);font:700 14px Inter,system-ui,sans-serif;
  cursor:pointer;transition:.18s ease}
.channel-tab .channel-logo{width:21px;height:21px;padding:3px;border-radius:50%;background:var(--teal);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.channel-tab[data-channel="whatsapp"] .channel-logo{background:#25b86f}
.channel-tab[data-channel="telegram"] .channel-logo{background:#229ed9}
.channel-tab[data-channel="web"] .channel-logo{background:#e2762b}
.channel-tab:hover{border-color:var(--teal);color:var(--teal-deep)}
.channel-tab.active{color:#fff;font-weight:800;box-shadow:0 0 0 2px color-mix(in srgb,var(--teal) 34%,transparent),0 10px 22px -10px rgba(3,23,40,.7)}
.channel-tab.active[data-channel="whatsapp"]{background:#168b59;border-color:#54e09b}
.channel-tab.active[data-channel="telegram"]{background:#1e86bd;border-color:#65c9f4}
.channel-tab.active[data-channel="web"]{background:#c85a22;border-color:#ffae72}

.channel-panel{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:start}
.channel-panel[hidden]{display:none}
.channel-phone{max-width:370px}
.channel-phone .hero-demo{box-shadow:14px 16px 0 color-mix(in srgb,var(--teal) 16%,transparent)}
.channel-panel{--channel:#0d9488;--channel-strong:#087a72;--channel-soft:#d9f4ef;--channel-wash:#f2fbf9}
.channel-panel[data-channel="whatsapp"]{--channel:#25d366;--channel-strong:#128c7e;--channel-soft:#d9f5e5;--channel-wash:#f1fbf5}
.channel-panel[data-channel="telegram"]{--channel:#29a9eb;--channel-strong:#1b7fb8;--channel-soft:#dff3fd;--channel-wash:#f1faff}
.channel-panel[data-channel="web"]{--channel:#f28a3d;--channel-strong:#c85a22;--channel-soft:#ffe7d3;--channel-wash:#fff8f2}
.channel-panel .hero-demo{border-color:var(--channel-strong);box-shadow:14px 16px 0 color-mix(in srgb,var(--channel) 25%,transparent)}
.channel-panel .phone-top{background:var(--channel-strong)}
.channel-panel .phone-top span{background:var(--channel)}
.channel-panel .chat{background:var(--channel-wash)}
.channel-panel .client{background:var(--channel-soft)}
.channel-panel .chat-status{border-top:1px solid color-mix(in srgb,var(--channel) 22%,#fff);background:#fff;color:var(--channel-strong)}
.channel-panel .chat-status i{background:var(--channel)}
.channel-info{padding-top:4px}
.channel-plan-badge{display:inline-block;margin-bottom:18px;padding:6px 14px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.03em;text-decoration:none;transition:transform .18s ease}
.channel-plan-badge:hover{transform:translateY(-1px)}
.channel-plan-badge--free{background:color-mix(in srgb,var(--teal) 16%,var(--surface));color:var(--teal-deep)}
.channel-plan-badge--paid{background:color-mix(in srgb,var(--coral) 14%,var(--surface));color:var(--coral)}
.channel-benefits{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:14px}
.channel-benefits li{display:flex;gap:11px;align-items:flex-start;color:var(--text);font-size:14.5px;line-height:1.5}
.channel-benefits i{flex:0 0 auto;display:inline-grid;place-items:center;width:19px;height:19px;margin-top:1px;
  border-radius:50%;background:color-mix(in srgb,var(--teal) 15%,var(--surface));color:var(--teal-deep);
  font-style:normal;font-size:12px}
.channel-info .demo-note{margin:0 0 14px;max-width:520px}
.channel-benefits code,.demo-note code{font-family:var(--font-mono);font-size:.92em;padding:1px 5px;
  border-radius:5px;background:var(--surface-2);color:var(--teal-deep)}
.channel-snippet{margin:0 0 22px;padding:13px 16px;border-radius:10px;background:var(--ink);
  overflow-x:auto}
.channel-snippet code{display:block;white-space:pre;font-family:var(--font-mono);font-size:12.5px;
  color:#bfe8e4;background:none;padding:0}
.demo-channel-cta{gap:8px}
.demo-channel-cta span{font-size:16px}
.demo-config{margin:26px 2px 0;color:var(--muted);font-size:12px}
@media(max-width:780px){.channel-panel{grid-template-columns:1fr;gap:28px}.channel-phone{max-width:340px;margin:0 auto}}
@media(max-width:430px){.channel-tabs{gap:8px}.channel-tab{padding:9px 15px;font-size:13px}}