/* ============================================================
   MI NEGOCIO DIGITAL — «Pruébalo en vivo» (demostraciones interactivas)
   Colores de marca de mejoras.css (--mnd-teal, --mnd-dark, --mnd-lime).
   ============================================================ */
.demo-section {
    padding: 96px 0;
    background: radial-gradient(1200px 500px at 50% -10%, rgba(44, 183, 176, .14), transparent 70%), #f7fbfb;
}
.demo-head { text-align: center; max-width: 780px; margin: 0 auto 28px; }
.demo-eyebrow {
    display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--mnd-dark, #19292E); color: #fff;
    font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.demo-title { margin: 14px 0 12px; font-size: clamp(1.9rem, 4.2vw, 3.1rem); font-weight: 800; line-height: 1.12; color: var(--mnd-dark, #19292E); }
.demo-title span { color: var(--mnd-teal, #2CB7B0); }
.demo-sub { color: var(--mnd-muted, #5b6672); font-size: 1.1rem; line-height: 1.6; }

.demo-tabs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 auto 26px; }
.demo-tab {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; cursor: pointer;
    border: 1px solid #d5e3e5; background: #fff; color: var(--mnd-dark, #19292E); font-weight: 700; font-size: .98rem;
    transition: background .2s, color .2s, box-shadow .2s;
}
.demo-tab:hover { box-shadow: 0 6px 18px rgba(25, 41, 46, .1); }
.demo-tab.is-on { background: var(--mnd-dark, #19292E); color: #fff; border-color: var(--mnd-dark, #19292E); }
.demo-tab:focus-visible, .demo-sector:focus-visible, .demo-chip:focus-visible, .demo-nodo:focus-visible, .demo-btn:focus-visible { outline: 3px solid var(--mnd-lime, #8CC63F); outline-offset: 3px; }

.demo-panel {
    background: #fff; border-radius: 26px; border: 1px solid #e6eef0; box-shadow: 0 20px 60px rgba(25, 41, 46, .08);
    padding: clamp(20px, 4vw, 44px); animation: demoAparece .35s ease;
}
@keyframes demoAparece { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.demo-panel h3 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); font-weight: 800; color: var(--mnd-dark, #19292E); margin: 0 0 10px; line-height: 1.2; }
.demo-panel p { color: var(--mnd-muted, #5b6672); line-height: 1.6; }
.demo-nota { font-size: .85rem; margin-top: 14px; opacity: .85; }

/* ---------- 1) Chat ---------- */
.demo-chat-grid { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: center; }
.demo-sectores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.demo-sector {
    padding: 10px 16px; border-radius: 14px; border: 1px solid #d5e3e5; background: #f6fafa; cursor: pointer;
    font-weight: 600; color: var(--mnd-dark, #19292E); transition: all .2s;
}
.demo-sector.is-on { background: var(--mnd-teal, #2CB7B0); border-color: var(--mnd-teal, #2CB7B0); color: #fff; }
.demo-phone {
    border-radius: 34px; background: #0f1b1f; padding: 12px; box-shadow: 0 30px 60px rgba(25, 41, 46, .28);
    display: flex; flex-direction: column; height: 560px;
}
.demo-phone-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #075e54; color: #fff; border-radius: 24px 24px 0 0; }
.demo-phone-top b { display: block; font-size: .95rem; } .demo-phone-top small { opacity: .8; font-size: .78rem; }
.demo-avatar { width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #075e54; display: flex; align-items: center; justify-content: center; }
.demo-chat-body {
    flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px;
    background: #ece5dd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='2' cy='2' r='1.2' fill='%23d9cfc4'/%3E%3C/svg%3E");
}
.demo-msg { max-width: 82%; padding: 9px 12px; border-radius: 12px; font-size: .92rem; line-height: 1.45; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); animation: demoMsg .25s ease; white-space: pre-line; }
@keyframes demoMsg { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.demo-msg--in { align-self: flex-end; background: #dcf8c6; color: #1f2937; border-top-right-radius: 4px; }
.demo-msg--bot { align-self: flex-start; background: #fff; color: #1f2937; border-top-left-radius: 4px; }
.demo-msg--sis { align-self: center; background: #e7f6f5; color: #1f8f89; font-weight: 700; font-size: .8rem; border-radius: 999px; padding: 6px 12px; }
.demo-escribiendo { align-self: flex-start; background: #fff; border-radius: 12px; padding: 10px 14px; display: flex; gap: 4px; }
.demo-escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: #9aa5ab; animation: demoPunto 1s infinite; }
.demo-escribiendo i:nth-child(2) { animation-delay: .15s; } .demo-escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes demoPunto { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.demo-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; background: #f0f0f0; border-radius: 0 0 24px 24px; min-height: 58px; }
.demo-chip {
    padding: 8px 12px; border-radius: 999px; border: 1px solid #b9dcd9; background: #fff; color: #075e54;
    font-size: .85rem; font-weight: 600; cursor: pointer; transition: background .2s;
}
.demo-chip:hover { background: #e7f6f5; }
.demo-chip[disabled] { opacity: .45; cursor: default; }

/* ---------- 2) Flujo ---------- */
.demo-flujo-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 36px; align-items: center; }
.demo-pasos { list-style: none; padding: 0; margin: 18px 0 0; counter-reset: paso; }
.demo-pasos li {
    counter-increment: paso; position: relative; padding: 10px 12px 10px 46px; margin-bottom: 6px; border-radius: 12px;
    color: var(--mnd-muted, #5b6672); font-weight: 600; transition: background .3s, color .3s;
}
.demo-pasos li::before {
    content: counter(paso); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%;
    background: #eef3f4; color: var(--mnd-dark, #19292E); display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800;
}
.demo-pasos li.is-on { background: #e7f6f5; color: var(--mnd-dark, #19292E); }
.demo-pasos li.is-on::before { background: var(--mnd-teal, #2CB7B0); color: #fff; }
.demo-mapa {
    position: relative; height: 440px; border-radius: 22px; overflow: hidden;
    background: radial-gradient(circle at 50% 50%, rgba(44, 183, 176, .12), transparent 60%), #fbfdfd; border: 1px dashed #d5e3e5;
}
.demo-lineas { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo-lineas path { fill: none; stroke: #c5d7da; stroke-width: 2; stroke-dasharray: 4 6; }
.demo-lineas path.is-on { stroke: var(--mnd-teal, #2CB7B0); stroke-dasharray: none; }
.demo-lineas circle { fill: var(--mnd-lime, #8CC63F); filter: drop-shadow(0 0 6px rgba(140, 198, 63, .9)); }
.demo-centro {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 128px; height: 128px; border-radius: 50%;
    background: var(--mnd-dark, #19292E); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    text-align: center; font-weight: 800; font-size: .85rem; box-shadow: 0 0 0 10px rgba(44, 183, 176, .15), 0 18px 40px rgba(25, 41, 46, .3); z-index: 2;
}
.demo-centro i { font-size: 1.8rem; color: var(--mnd-lime, #8CC63F); }
.demo-centro.is-pulso { animation: demoPulso .9s ease; }
@keyframes demoPulso { 50% { box-shadow: 0 0 0 26px rgba(44, 183, 176, .05), 0 18px 40px rgba(25, 41, 46, .3); } }
.demo-nodo {
    position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 2;
    display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 16px; background: #fff; border: 1px solid #e0eaec;
    box-shadow: 0 8px 20px rgba(25, 41, 46, .1); font-weight: 700; font-size: .88rem; color: var(--mnd-dark, #19292E); white-space: nowrap;
}
.demo-nodo i { font-size: 1.15rem; color: var(--mnd-teal, #2CB7B0); }
.demo-in { cursor: pointer; transition: transform .2s, box-shadow .2s; }
.demo-in:hover { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 12px 26px rgba(44, 183, 176, .25); }
.demo-in.is-on { background: var(--mnd-teal, #2CB7B0); color: #fff; } .demo-in.is-on i { color: #fff; }
.demo-out em {
    position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px); font-style: normal; font-size: .72rem; font-weight: 700;
    background: var(--mnd-lime, #8CC63F); color: #fff; padding: 3px 8px; border-radius: 999px; opacity: 0; transition: opacity .3s; white-space: nowrap;
}
.demo-out.is-on { border-color: var(--mnd-lime, #8CC63F); } .demo-out.is-on em { opacity: 1; }
.demo-pista {
    position: absolute; left: 22%; bottom: 14px; transform: translateX(-50%); background: var(--mnd-dark, #19292E); color: #fff;
    padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; animation: demoFlota 1.6s ease-in-out infinite; z-index: 3;
}
@keyframes demoFlota { 50% { transform: translate(-50%, -5px); } }

/* ---------- 3) Calculadora ---------- */
.demo-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: stretch; }
.demo-calc-form label { display: block; font-weight: 700; color: var(--mnd-dark, #19292E); margin: 18px 0 0; font-size: .95rem; }
.demo-calc-form input[type=range] { width: calc(100% - 96px); vertical-align: middle; accent-color: var(--mnd-teal, #2CB7B0); margin-top: 10px; }
.demo-calc-form output { display: inline-block; width: 86px; text-align: right; font-weight: 800; color: var(--mnd-teal-dark, #1f8f89); vertical-align: middle; margin-top: 10px; }
.demo-calc-res { background: var(--mnd-dark, #19292E); border-radius: 22px; padding: 28px; color: #fff; display: flex; flex-direction: column; gap: 14px; }
.demo-kpi { background: rgba(255, 255, 255, .06); border-radius: 16px; padding: 16px 18px; }
.demo-kpi span { display: block; font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 800; color: var(--mnd-lime, #8CC63F); line-height: 1.1; }
.demo-kpi--plata span { color: #fff; }
.demo-kpi small { color: #c9d6d9; font-size: .9rem; }
.demo-calc-res .demo-nota { color: #c9d6d9; }
.demo-btn {
    margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; background: var(--mnd-teal, #2CB7B0);
    color: #fff; font-weight: 800; padding: 14px 24px; border-radius: 999px; text-decoration: none; transition: background .2s;
}
.demo-btn:hover { background: var(--mnd-teal-dark, #1f8f89); color: #fff; }

@media (max-width: 960px) {
    .demo-chat-grid, .demo-flujo-wrap, .demo-calc-grid { grid-template-columns: 1fr; }
    .demo-phone { max-width: 400px; width: 100%; margin: 0 auto; height: 520px; }
}
@media (max-width: 640px) {
    .demo-section { padding: 64px 0; }
    .demo-tab { padding: 10px 14px; font-size: .9rem; }
    .demo-mapa { height: 380px; }
    .demo-nodo { padding: 7px 9px; font-size: .74rem; gap: 5px; }
    .demo-nodo span { font-size: .7rem; }
    .demo-in { --x: 20% !important; }
    .demo-out { --x: 79% !important; }
    .demo-out em { font-size: .64rem; }
    .demo-mapa { height: 420px; }
    .demo-centro { width: 96px; height: 96px; font-size: .72rem; }
    .demo-calc-form input[type=range] { width: calc(100% - 80px); }
    .demo-calc-form output { width: 72px; }
}
@media (prefers-reduced-motion: reduce) {
    .demo-panel, .demo-msg, .demo-pista, .demo-centro.is-pulso { animation: none; }
}