/* Demo guiada: seis pasos, uno por bloque del guion maestro.
   Todo lo de vidrio, color y tipografía viene de sitio.css. */
.demo-head{padding-block:clamp(36px, 7vw, 72px) clamp(20px, 4vw, 36px); display:grid; gap:18px}
.demo-head .display{font-size:clamp(2.3rem, 5.6vw, 4.2rem)}

.pasos-demo{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:2px; padding:4px; border-radius:22px; background:var(--fill); margin-bottom:12px}
.pasos-demo button{border:0; background:none; padding:10px 6px; border-radius:18px; display:grid; gap:2px; justify-items:center; color:var(--ink2); font-family:var(--sf); font-size:.8rem; font-weight:600; min-width:0}
.pasos-demo button small{font-family:var(--label); font-weight:400; font-size:.62rem; letter-spacing:.12em; color:var(--muted)}
.pasos-demo button span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.pasos-demo button[aria-current="step"]{background:var(--lens); color:var(--ink); box-shadow:inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px var(--glass-edge), 0 3px 10px rgba(0,0,0,.06)}
.pasos-demo button[aria-current="step"] small{color:var(--accent)}
.pasos-demo button.visto small{color:var(--ink2)}

.instruccion{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:14px 18px; border-radius:22px; margin-bottom:clamp(18px, 3vw, 28px)}
.instruccion p{margin:0; flex:1 1 300px; font-family:var(--sf); font-size:.95rem; line-height:1.45; color:var(--ink)}
.instruccion p b{font-family:var(--label); font-weight:400; font-size:.7rem; letter-spacing:.12em; color:var(--accent); margin-right:8px}
.instruccion .links{display:flex; flex-wrap:wrap; gap:4px 14px}
.barra-avance{flex-basis:100%; height:3px; border-radius:99px; background:var(--fill); overflow:hidden}
.barra-avance span{display:block; height:100%; width:0; background:var(--accent); transition:width .5s var(--spring)}

.escena{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 420px); gap:clamp(24px, 5vw, 64px); align-items:start}
.voz{display:grid; gap:16px; padding-top:8px; position:sticky; top:96px}
.voz h2{margin:0; font-family:var(--display); font-weight:var(--display-w); font-size:clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing:var(--display-track); line-height:1.08; text-wrap:balance}
.voz h2 em{font-style:var(--display-em); color:var(--accent)}
.voz .dolor{margin:0; padding-left:16px; border-left:2px solid var(--sep); font-style:italic; font-size:1.12rem; line-height:1.55; color:var(--ink2)}
.voz .beneficio{margin:0; font-size:1.05rem; line-height:1.6; color:var(--ink2); max-width:32em}

/* ── El teléfono ── */
.tel{border-radius:38px; padding:20px 18px 18px; height:min(780px, calc(100dvh - 40px)); min-height:620px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden}
.tel-top{display:grid; gap:2px; padding:0 4px}
.tel-top b{font-family:var(--display); font-weight:400; font-size:1.25rem; letter-spacing:-.01em}
.tel-top small{font-family:var(--label); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
#vista{flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:12px; margin:0 -4px; padding:0 4px; scrollbar-width:none}
#vista::-webkit-scrollbar{display:none}
.entro{padding:14px 18px; border-radius:22px; background:var(--fill)}
.entro small{display:block; font-family:var(--sf); font-size:.78rem; font-weight:600; color:var(--muted); margin-bottom:4px}
.entro b{font-family:var(--num); font-weight:var(--num-w); font-size:2.1rem; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}
.entro span{display:block; margin-top:6px; font-family:var(--sf); font-size:.82rem; color:var(--ink2); min-height:1.2em}

.cubetas{border-radius:22px; overflow:hidden; border:1px solid var(--glass-edge); background:var(--glass)}
.cubeta{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; padding:10px 16px; align-items:baseline; transition:background-color .4s}
.cubeta + .cubeta{border-top:1px solid var(--sep)}
.cubeta b{font-family:var(--sf); font-size:.95rem; font-weight:600}
.cubeta .monto{font-family:var(--num); font-size:.95rem; font-variant-numeric:tabular-nums; text-align:right}
.cubeta .nota{grid-column:1 / -1; font-family:var(--sf); font-size:.78rem; color:var(--muted); min-height:0}
.cubeta .delta{grid-column:2; font-family:var(--num); font-size:.78rem; color:var(--accent); text-align:right; opacity:0; transform:translateY(4px); transition:opacity .35s, transform .45s var(--spring)}
.cubeta.llego{background:color-mix(in srgb, var(--accent) 9%, transparent)}
.cubeta.llego .delta{opacity:1; transform:none}
.cubeta .bar{grid-column:1 / -1; height:5px; border-radius:99px; background:var(--fill); overflow:hidden; margin-top:4px}
.cubeta .bar span{display:block; height:100%; border-radius:99px; background:var(--accent); transition:width .7s var(--spring)}
.cubeta.toca{cursor:pointer}
.cubeta.toca:hover{background:var(--fill)}
.cubeta.foco{box-shadow:inset 0 0 0 2px var(--accent)}
.cubeta .primero{white-space:nowrap; font-family:var(--label); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-left:8px; font-weight:400}

.tel .accion{display:grid; gap:10px}
.tel .accion .pill{width:100%}
.tel .accion .pill[disabled]{opacity:.45; cursor:default}

.mensaje{padding:14px 16px; border-radius:20px; background:color-mix(in srgb, var(--accent) 10%, var(--glass)); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); font-family:var(--sf); font-size:.9rem; line-height:1.45; color:var(--ink)}
.mensaje strong{font-weight:700}

/* Hoja que sube dentro del teléfono */
.hoja-tel{position:absolute; left:10px; right:10px; bottom:10px; padding:22px 20px 20px; border-radius:30px; background:var(--sheet); border:1px solid var(--glass-edge); box-shadow:0 -10px 40px rgba(0,0,0,.14); transform:translateY(110%); transition:transform .55s var(--spring); display:grid; gap:12px; z-index:3}
.hoja-tel.abierta{transform:none}
/* La hoja tapa lo de atrás: fondo opaco y esconde el botón mientras está abierta */
.hoja-tel{background:linear-gradient(var(--sheet), var(--sheet)), var(--paper)}
.tel .accion{transition:opacity .25s}
.tel:has(.hoja-tel.abierta) .accion{opacity:0; pointer-events:none}
.hoja-tel h3{margin:0; font-family:var(--display); font-weight:400; font-size:1.35rem; letter-spacing:-.01em; line-height:1.2}
.hoja-tel p{margin:0; font-family:var(--sf); font-size:.92rem; line-height:1.5; color:var(--ink2)}
.hoja-tel .renglones-mini{display:grid; gap:0; border-radius:16px; background:var(--fill); padding:4px 14px}
.renglones-mini div{display:flex; justify-content:space-between; gap:12px; padding:9px 0; font-family:var(--sf); font-size:.88rem}
.renglones-mini div + div{border-top:1px solid var(--sep)}
.renglones-mini div span:last-child{font-family:var(--num); font-variant-numeric:tabular-nums}
.renglones-mini div.total{font-weight:700}

/* Mi mes */
.mes{display:grid; gap:14px}
.mes .grande{padding:18px; border-radius:22px; background:var(--fill)}
.mes .grande small{display:block; font-family:var(--sf); font-size:.78rem; font-weight:600; color:var(--muted); margin-bottom:6px}
.mes .grande b{display:block; font-family:var(--display); font-weight:300; font-size:1.9rem; letter-spacing:-.02em; line-height:1.1}
.mes .grande b em{font-style:italic; color:var(--accent)}
.equilibrio{display:grid; gap:6px}
.equilibrio .riel{position:relative; height:12px; border-radius:99px; background:var(--fill); overflow:visible}
.equilibrio .riel span{display:block; height:100%; border-radius:99px; background:var(--accent); width:0; transition:width 1.1s var(--spring)}
.equilibrio .marca{position:absolute; top:-5px; bottom:-5px; width:2px; background:var(--ink); border-radius:2px}
.equilibrio .pie-riel{display:flex; justify-content:space-between; font-family:var(--num); font-size:.72rem; color:var(--muted)}

/* Chat */
.chat{display:grid; gap:10px; align-content:start}
.burbuja{max-width:85%; padding:10px 14px; border-radius:20px; font-family:var(--sf); font-size:.92rem; line-height:1.45}
.burbuja.el{background:var(--fill); border-bottom-left-radius:6px}
.burbuja.tu{justify-self:end; background:var(--accent); color:var(--accent-ink); border-bottom-right-radius:6px}
.escribe{display:flex; gap:8px; padding:5px; border-radius:999px; border:1px solid var(--glass-edge); background:var(--fill)}
.escribe input{flex:1; min-width:0; border:0; background:transparent; padding:0 14px; font-family:var(--sf); font-size:.95rem; outline:none}
.escribe button{border:0; border-radius:999px; padding:0 16px; min-height:40px; background:var(--accent); color:var(--accent-ink); font-family:var(--sf); font-weight:700; font-size:.85rem}
.sugerencia{border:0; background:none; padding:2px 4px; justify-self:start; font-family:var(--sf); font-size:.85rem; font-weight:600; color:var(--ink2); text-decoration:underline; text-decoration-color:var(--sep); text-underline-offset:3px}

.aviso-ejemplo{margin:clamp(20px, 4vw, 32px) 0 0; font-family:var(--label); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:center}

@media (max-width: 860px){
  .escena{grid-template-columns:minmax(0,1fr)}
  .voz{position:static}
  .tel{height:auto; min-height:600px}
  #vista{overflow:visible}
}
@media (max-width: 560px){
  .pasos-demo{grid-template-columns:repeat(3, minmax(0,1fr))}
  .tel{border-radius:32px; padding:16px 12px 12px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}

/* ── Sección de Enterprise en Inicio: texto a la izquierda, demo corriendo sola a la derecha ── */
.ent-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(24px,5vw,56px);align-items:center;padding:clamp(22px,4vw,44px);border-radius:32px}
.ent-texto{display:grid;gap:18px;align-content:center;min-width:0}
.ent-texto .display{font-size:clamp(2rem,4.4vw,3.2rem)}
.ent-texto .eyebrow{color:var(--accent)}
.ent-demo{display:grid;gap:10px;min-width:0}
.ent-inicio .tel{height:620px;min-height:0}
.ent-inicio #vista{overflow-y:auto}
.ent-inicio .aviso-ejemplo{margin:0}
@media (max-width: 860px){
  .ent-grid{grid-template-columns:minmax(0,1fr)}
  .ent-inicio .tel{height:600px}
  .ent-inicio #vista{overflow-y:auto}
}

/* ── Video de ventas (VSL) en la landing ── */
.vsl{border-radius:28px;overflow:hidden;padding:0;line-height:0;background:#0E0D0B}
.vsl video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#0E0D0B}
#video .aviso-ejemplo{margin-top:12px}