/* Presentación al cliente (web/presentacion.js) y cotización (web/cotizar.js).
   La presentación reúsa el visor y el panel de Explicar (.exp-panel, .fn-*): aquí solo va lo que se esconde,
   la barra grande de la presentación y los diálogos de precios con el patrón .dlg-head de siempre. */

/* En la barra más angosta no caben nueve botones: «Pantalla completa» cede su lugar (en iPhone no existe; la
   presentación ya es la pantalla completa para mostrar). */
@container (max-width:420px){#full{display:none}}

/* ---- Modo presentación: nada interno a la vista ---- */
.app.presenting,.app.presenting.navc{grid-template-columns:minmax(0,1fr)}
.app.presenting .nav,.app.presenting .side,.app.presenting .bar,.app.presenting .verbar,.app.presenting .mtop,
.app.presenting #navScrim,.app.presenting #scrim,.app.presenting #fnPanel,.app.presenting #expPanel,
.app.presenting #expCap,.app.presenting .exp-pins,.app.presenting .veil>div,.app.presenting .veil .btn{display:none!important}
.app.presenting .vit,.app.presenting .vit.noside{grid-template-columns:minmax(0,1fr)}
.stage.presentando .view{position:relative;padding-right:calc(var(--expw) + 22px)}

/* Barra: marca · Sitio/Apps/Marca · ver como · anterior/siguiente · Precios, Compartir, En vivo · salir. Cada control lleva
   su emoji 3D del set del mando (.i3d; el SVG queda de respaldo); el texto solo donde cabe y dice algo. */
.pres-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.08);color:#fff}
.pres-marca{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 0}
.pres-logo{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:14px;overflow:hidden;background:var(--accent);color:var(--accent-ink);font:800 1.375rem/1 var(--display)}
.pres-logo img{width:100%;height:100%;object-fit:contain;background:#fff;padding:4px}
.pres-nombre{min-width:0}
.pres-nombre b{display:block;font-family:var(--display);font-size:1.5rem;line-height:1.15;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pres-nombre small{display:block;font-size:.875rem;color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pres-tabs{display:flex;gap:4px;padding:4px;border-radius:16px;background:rgba(255,255,255,.08)}
.pres-tabs button{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 20px;border:0;border-radius:12px;background:transparent;color:rgba(255,255,255,.85);font-weight:700;font-size:1.0625rem}
.pres-tabs button small{font-size:.875rem;font-weight:700;opacity:.8}
.pres-tabs button:hover:not(:disabled){background:rgba(255,255,255,.08);color:#fff}
.pres-tabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
.pres-tabs button:disabled{opacity:.45;cursor:default}
.pres-tabs button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pres-nav{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex:1 1 0}
.pres-bar .i3d{width:26px;height:26px}
.stage .pres-paso{width:48px;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.22);color:#fff}
.stage .pres-paso:disabled{opacity:.35;cursor:default}
.stage .pres-salir{width:48px;height:48px}
.pres-dev{display:flex;gap:2px;padding:3px;margin-right:6px;border-radius:14px;background:rgba(255,255,255,.08)}
.pres-dev button{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:11px;background:transparent;color:rgba(255,255,255,.8)}
.pres-dev button:has(> .i3d) > svg{display:none}
.pres-dev button:hover{background:rgba(255,255,255,.1);color:#fff}
.pres-dev button:hover > .i3d{transform:scale(1.1)}
.pres-dev button[aria-checked="true"]{background:#fff;color:#111}
.pres-dev button[aria-checked="true"] > .i3d{transform:scale(1.12)}
.pres-cuenta{min-width:64px;text-align:center;font-weight:800;font-size:1.0625rem;font-variant-numeric:tabular-nums}
.pres-acc{display:flex;align-items:center;gap:6px;margin-left:6px}
.stage .pres-accion{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;min-width:48px;height:48px;padding:0 14px 0 11px;border:1px solid rgba(255,255,255,.22);border-radius:14px;color:#fff}
.pres-accion-t{font-size:.9375rem;font-weight:700;white-space:nowrap}
.pres-bar :focus-visible{outline:2px solid #fff;outline-offset:2px}
/* En vivo: el emoji dice qué es; encendido, un punto rojo que late y «En vivo · N» donde cabe. */
.pres-vivo:not(.on) .pres-accion-t{display:none}
.stage .pres-vivo:not(.on){padding:0}
.pres-vivo .vivo-punto{position:absolute;top:5px;right:5px;width:9px;height:9px;display:none}
.pres-vivo.on .vivo-punto{display:block}
.pres-cajon-btn{display:none}

/* ---- Sidebar de pantallas (patrón del sidebar del mando: .item, .itemrow, .chev, .submenu, .sub de mando.css) ----
   Lo ocupa la columna izquierda bajo la barra; compacto = solo íconos (nombre en title y en texto oculto a la vista). */
.stage.presentando{display:grid;grid-template-columns:var(--ladow) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);--ladow:300px;transition:grid-template-columns .25s cubic-bezier(.2,.8,.2,1)}
.stage.presentando>.pres-bar{grid-column:1/-1;grid-row:1}
.stage.presentando>.pres-sel{grid-column:1;grid-row:2}
.stage.presentando>.view{grid-column:2;grid-row:2;min-width:0;min-height:0}
.app.presenting :is(.cod-stage,.dat-stage,.map-stage){display:none!important}
.pres-sel{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:rgba(0,0,0,.2);border-right:1px solid rgba(255,255,255,.08);color:#fff}
.pres-lado-head{display:flex;align-items:center;gap:8px;min-height:60px;padding:8px 10px 6px 20px}
.pres-lado-t{flex:1;min-width:0;font-size:.875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage .pres-lado-btn{width:44px;height:44px;border-radius:12px}
.pres-lista{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;display:grid;gap:4px;align-content:start;padding:0 12px calc(16px + env(safe-area-inset-bottom));scrollbar-width:thin}
.pres-lista .item .pc-t{display:grid;min-width:0}
.pres-lista .item[aria-current="true"]{background:rgba(255,255,255,.1)}
.pres-lista .pc-precio{display:block;font-size:.875rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.pres-lista .item[aria-current="page"] .pc-precio{color:inherit;opacity:.8}
.pres-lista .submenu{margin-left:26px}
.pres-lista .item:focus-visible,.pres-lista .sub:focus-visible,.pres-lista .chev:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.pres-scrim{position:fixed;inset:0;z-index:29;background:rgba(3,6,10,.6)}
@media (min-width:701px){
  .stage.presentando.lado-compacto{--ladow:76px}
  .lado-compacto .pres-lado-head{justify-content:center;padding:8px 0 6px}
  .lado-compacto .pres-lado-t{display:none}
  .lado-compacto .pres-lista{padding-inline:12px}
  .lado-compacto .pres-lista .itemrow{grid-template-columns:minmax(0,1fr)}
  .lado-compacto .pres-lista :is(.chev,.submenu){display:none}
  .lado-compacto .pres-lista .item{grid-template-columns:40px;justify-content:center;padding:6px 0}
  .lado-compacto .pres-lista .item .pc-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* Panel de descripción plegado: una pestaña delgada con el botón para volver a abrirlo; el mockup gana el espacio. */
  .stage.presentando.panel-plegado{--expw:68px}
  .panel-plegado .pres-panel{bottom:auto;border-radius:18px}
  .panel-plegado .pres-panel .exp-top{justify-content:center;padding:8px;border-bottom:0}
  .panel-plegado .pres-panel :is(.exp-titulo,.pres-paso-txt,.exp-cuerpo,.pp-total){display:none}
}
.stage .pres-plegar{flex:none;width:44px;height:44px;border-radius:12px;color:#fff}
.pres-plegar .pp-flecha{transform-origin:9.25px 12px;transition:transform .2s}
.pres-plegar[aria-expanded="false"] .pp-flecha{transform:rotate(180deg)}
.pres-panel .exp-top .pres-paso-txt+.pres-plegar{margin-left:4px}

/* Panel: el de Explicar, con la lista de lo que hay en la pantalla */
.pres-panel .exp-top{min-height:52px}
.pres-paso-txt{margin-left:auto;font-size:.875rem;font-weight:700;color:rgba(255,255,255,.75);white-space:nowrap}
.pres-panel .exp-pag h2{font-size:1.5rem}
.pres-panel :is(.exp-kicker,.exp-sub){font-size:.875rem}
.pres-secs{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:ps}
.pres-secs li{counter-increment:ps;display:grid;grid-template-columns:28px 1fr;gap:2px 10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05)}
.pres-secs li::before{content:counter(ps);grid-row:span 2;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:.875rem;font-weight:800}
.pres-secs b{font-size:.9375rem}
.pres-secs span{font-size:.875rem;line-height:1.45;color:rgba(255,255,255,.85)}
.pres-panel .fn-btn{cursor:pointer}
@media (min-width:1500px){.stage.presentando{--expw:400px}}

/* ---- Modo precios: botón activo, etiqueta sobre el dispositivo, desglose en el panel y botón «Cotizar» ---- */
.stage .pres-precios[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.pres-etiqueta{position:absolute;top:-8px;right:14px;z-index:6;display:grid;gap:2px;max-width:220px;padding:10px 16px 10px 14px;border-radius:14px;background:#fff;color:#111;box-shadow:0 18px 40px -18px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.06);pointer-events:none;transform-origin:100% 0}
.pres-etiqueta::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--accent)}
.pres-etiqueta small{font-size:.875rem;font-weight:600;color:#4B4852;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pres-etiqueta b{font:800 1.5rem/1.1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pres-etiqueta.texto b{font-size:1.0625rem}
.pres-etiqueta.fuera{left:auto;right:calc(100% + 22px);top:calc(var(--st,0px) + 36px);border-radius:14px;transform-origin:100% 50%}
.pres-etiqueta.fuera::after{content:"";position:absolute;top:50%;right:-22px;width:22px;border-top:2px dashed rgba(255,255,255,.55)}
.pres-tabs .pt-precio{font-variant-numeric:tabular-nums}
.stage.precios .pres-tabs .pt-n{display:none}
.pp-movil{display:none}
.pres-etiqueta.entra{animation:etqEntra .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes etqEntra{from{opacity:0;transform:translateY(6px) scale(.92)}to{opacity:1;transform:none}}
.pp-monto{margin:.25rem 0 0;font:800 2rem/1.1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#fff}
.pp-lineas{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px}
.pp-linea{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06)}
.pp-linea span{display:grid;gap:2px;min-width:0}
.pp-linea b{font-size:.9375rem}
.pp-linea small{font-size:.875rem;line-height:1.4;color:rgba(255,255,255,.78)}
.pp-linea em{font-style:normal;font-weight:800;font-size:.9375rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.pp-inv{margin-top:18px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14)}
.pp-inv .exp-sub{margin-top:12px}
.pp-opc em{font-weight:700}
.pp-chip-opc{display:inline-block;margin-right:6px;padding:1px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.4);font-size:.875rem;font-weight:600;font-style:normal}
.pp-linea.cero em{font-weight:600;color:rgba(255,255,255,.78)}
/* Precio ofrecido contra valor, plan de pagos, preguntas frecuentes y cotización vencida (#183). */
.pp-oferta{display:grid;gap:4px;margin:0 0 6px;padding:16px;border-radius:16px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font-variant-numeric:tabular-nums}
.pp-oferta p{margin:0}
.pp-valor{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:.9375rem;color:rgba(255,255,255,.78)}
.pp-valor s{text-decoration-thickness:2px}
.pp-tuprecio{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.pp-tuprecio span{flex-basis:100%;font-size:.875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.pp-tuprecio b{font:800 2.25rem/1.05 var(--display);letter-spacing:-.02em;color:#fff}
.pp-tuprecio small{font-size:.9375rem;font-weight:700;color:rgba(255,255,255,.85)}
.pp-ahorro{justify-self:start;margin-top:4px!important;padding:3px 12px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:.9375rem}
.exp-sub span{font-weight:600}
.pp-reco{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.pp-opc.reco{box-shadow:inset 0 0 0 2px var(--accent)}
.pp-plan{margin-top:10px;padding:10px 12px 12px;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.pp-plan.on{box-shadow:inset 0 0 0 2px var(--accent)}
.pp-plan .pp-lineas{margin-top:8px}
.pp-plan-t{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;margin:0;font-size:.9375rem}
.pp-plan .pp-chip-opc{margin:0}
.pp-cond{margin:10px 0 0;font-size:.875rem;line-height:1.45;color:rgba(255,255,255,.82)}
.pp-faq{display:grid;gap:6px;margin-top:10px}
.pp-faq details{border-radius:14px;background:rgba(255,255,255,.06)}
.pp-faq summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 14px;font-weight:700;font-size:.9375rem;cursor:pointer;list-style:none}
.pp-faq summary::-webkit-details-marker{display:none}
.pp-faq summary::after{content:"+";margin-left:auto;font-size:1.25rem;line-height:1;color:rgba(255,255,255,.8)}
.pp-faq details[open] summary::after{content:"−"}
.exp-cuerpo>.pp-oferta{margin-bottom:14px}
.pp-faq details p{margin:0;padding:0 14px 12px;font-size:.9375rem;line-height:1.5;color:rgba(255,255,255,.85)}
.pp-vencida h2{margin:.2rem 0 .5rem;font:800 1.5rem/1.15 var(--display)}
.pp-vencida p{font-size:.9375rem;line-height:1.5;color:rgba(255,255,255,.85)}
.pp-vencida .btn{min-height:48px;margin-top:8px}
.pp-total strong{color:#fff}
.pp-total{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;padding:12px 16px;border-top:1px solid rgba(255,255,255,.1);font-variant-numeric:tabular-nums}
.pp-total span{font-size:.875rem;color:rgba(255,255,255,.75)}
.pp-total b{font:800 1.125rem/1.2 var(--display)}
.pp-total small{font-size:.875rem;color:rgba(255,255,255,.75)}
.pres-fab{position:absolute;right:calc(var(--expw) + 34px);bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px));z-index:20;display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 24px 0 18px;border:0;border-radius:18px;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:1.0625rem;box-shadow:0 18px 40px -14px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.18) inset;cursor:pointer;animation:etqEntra .3s ease-out}
.pres-fab:hover{filter:brightness(1.06)}
.pres-fab:focus-visible{outline:3px solid #fff;outline-offset:3px}
.stage.presentando{position:relative}
.stage:not(.presentando) .pres-fab{display:none}
/* En vivo el control del vivo (abajo, a la izquierda, ancho) tapaba «Cotizar»: el botón sube sobre él (--vivo-alto lo pone vivo.js). */
.vivo-ctl:not([hidden])~.pres-fab{bottom:calc(max(14px,calc(env(safe-area-inset-bottom) + 10px)) + var(--vivo-alto,64px) + 12px)}
@media (max-width:700px){
  .pres-etiqueta{display:none}
  .pp-movil{display:inline}.pp-compu{display:none}
  .pres-fab{right:max(16px,calc(env(safe-area-inset-right) + 12px));bottom:calc(env(safe-area-inset-bottom) + 80px);min-height:52px;padding:0 20px 0 16px}
  .stage.precios:has(.pres-panel.abierto) .pres-fab{display:none}
  .vivo-ctl:not([hidden])~.pres-fab{bottom:calc(env(safe-area-inset-bottom) + 80px + var(--vivo-alto,64px) + 10px)}
  .pres-panel .pp-total{display:none}
  .pres-panel.abierto .pp-total{display:flex}
}
/* El texto de los botones cede primero; luego el contador. */
@media (max-width:1499px){:is(.pres-compartir,.pres-enfoque) .pres-accion-t{display:none}.stage :is(.pres-compartir,.pres-enfoque){padding:0}}
@media (max-width:1279px){.pres-accion-t{display:none}.stage .pres-accion{padding:0}}
@media (max-width:1100px){
  .stage.presentando{--expw:320px}
  .pres-tabs button{padding:0 14px}
  .pres-cuenta{display:none}
}
/* Tableta y celular: dos renglones (marca y acciones · pestañas, ver como y pasos). */
@media (max-width:860px){
  .stage.precios .pres-tabs .pt-n{display:inline}
  .pres-tabs .pt-precio{display:none}
  .pres-bar{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .pres-bar::before{content:"";order:45;flex-basis:100%;height:0}
  .pres-nav{display:contents}
  .pres-marca{order:20}
  .pres-acc{order:30;margin:0}
  #presSalir{order:40}
  .pres-cajon-btn{order:50}
  .pres-tabs{order:60;flex:1 1 0;min-width:0}
  .pres-tabs button{flex:1 1 0;min-width:0;padding:0 8px;justify-content:center}
  .pres-dev{order:70;margin:0}
  #presPrev{order:80}
  .pres-cuenta{order:85}
  #presNext{order:90}
  .pres-nombre b{font-size:1.25rem}
}
/* Celular: el sidebar es un cajón que abre «Pantallas»; el panel sigue siendo la hoja inferior de Explicar. */
@media (max-width:700px){
  .stage.presentando{grid-template-columns:minmax(0,1fr)}
  .stage.presentando>.view{grid-column:1;padding-right:10px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .stage.presentando .pres-cajon-btn{display:inline-grid;width:48px;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.22);color:#fff}
  .pres-sel{position:fixed;top:0;bottom:0;left:0;z-index:30;width:min(300px,86vw);padding:env(safe-area-inset-top) 0 0 env(safe-area-inset-left);background:var(--side,#0B1220);border-right:0;box-shadow:none;transform:translateX(-105%);visibility:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1),visibility 0s .25s}
  .pres-plegar{display:none!important}
  .stage.cajon .pres-sel{transform:none;visibility:visible;box-shadow:20px 0 40px -10px rgba(0,0,0,.6);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
  .pres-logo{width:44px;height:44px}
}
@media (max-width:560px){
  .pres-dev{display:none}
  .pres-tabs button small{display:none}
  .stage .pres-accion,.stage .pres-salir,.stage .pres-paso,.stage.presentando .pres-cajon-btn{min-width:44px;width:44px;height:44px;border-radius:12px}
  .pres-acc{gap:4px}
}

/* ---- Precios (diálogo dentro de la presentación) ---- */
dialog.cz-dlg{width:min(1120px,calc(100vw - 24px))}
.cz-dlg .chk,#dlgPrecios .chk,#dlgProspecto .chk{display:flex;align-items:center;gap:10px;min-height:44px;margin:4px 0;font-size:1rem;font-weight:500;color:var(--tinta)}
.cz-dlg .chk input,#dlgPrecios .chk input,#dlgProspecto .chk input{width:20px;height:20px;min-height:0;margin:0;flex:none}
.cz-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.cz-resumen{position:sticky;top:88px;display:grid;gap:12px}
.cz-grupo h3{margin:20px 0 4px;font-size:1.0625rem}
.cz-grupo:first-child h3{margin-top:0}
.cz-fila{display:grid;grid-template-columns:minmax(0,1fr) auto 132px;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--linea)}
.cz-chk{display:flex;align-items:flex-start;gap:12px;min-height:44px;margin:0;padding-top:2px;font-size:1rem;font-weight:400;color:var(--tinta);cursor:pointer}
.cz-chk input{width:22px;height:22px;min-height:0;margin:1px 0 0;flex:none;accent-color:var(--tinta)}
.cz-chk span{min-width:0}
.cz-chk b{display:block;font-weight:700}
.cz-chk small{display:block;font-size:.875rem;line-height:1.4;color:var(--tinta-2)}
.cz-fila.off .cz-chk b,.cz-fila.off .cz-monto b{color:var(--tinta-2)}
.cz-cant{display:flex;align-items:center;gap:4px}
.cz-cant .ibtn{font-size:1.25rem;font-weight:700}
.cz-cant .ibtn:disabled{opacity:.4;cursor:default}
.cz-cant input{width:60px;min-height:44px;padding:8px 4px;text-align:center;font-variant-numeric:tabular-nums}
.cz-monto{text-align:right}
/* Etapas, mensualidad y opcionales (#161) */
.cz-lugar span{white-space:nowrap}
.cz-monto b small{display:inline;font-weight:500}
.cz-lugar{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:0 0 0 34px;font-size:.875rem;font-weight:500;color:var(--tinta-2)}
.cz-lugar select{min-height:44px;max-width:100%;padding:8px 10px;font-size:1rem;border:1px solid var(--linea);border-radius:10px;background:var(--tarjeta);color:var(--tinta)}
.cz-fila.off .cz-lugar{display:none}
.cz-opcional{display:inline-block;margin-right:4px;padding:1px 8px;border-radius:999px;background:var(--papel);border:1px solid var(--linea);font-size:.875rem;font-weight:600;color:var(--tinta)}
.cz-ayuda{margin:2px 0 8px;font-size:.875rem;line-height:1.45;color:var(--tinta-2)}
.cz-etapas ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cz-etapas li{display:flex;align-items:center;gap:10px}
.cz-etapas input{flex:1 1 auto;min-width:0;min-height:44px;font-size:1rem}
.cz-et-n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--tinta);color:var(--sobre-tinta);font-weight:700;font-size:.875rem}
.cz-mas-etapa{margin-top:8px}
.cz-tot .cz-et dt,.cz-tot .cz-et dd{font-size:.9375rem;font-weight:500}
.cz-opcs{padding:12px 16px;border:1px dashed var(--linea);border-radius:16px}
.cz-opcs p{margin:0 0 6px;font-size:.9375rem;color:var(--tinta-2)}
.cz-opcs ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cz-opcs li{display:flex;justify-content:space-between;gap:10px;font-size:.9375rem}
.cz-opcs li small{font-size:.875rem;color:var(--tinta-2)}
.cz-opcs em{font-style:normal;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.cz-monto b{display:block;font-variant-numeric:tabular-nums}
.cz-monto small{display:block;font-size:.875rem;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.cz-planes{display:grid;gap:8px;padding-top:6px}
.cz-plan{display:flex;align-items:center;gap:12px;margin:0;padding:12px 14px;border:1px solid var(--linea);border-radius:14px;font-size:1rem;font-weight:400;color:var(--tinta);cursor:pointer}
.cz-plan.on{border-color:var(--tinta);box-shadow:0 0 0 1px var(--tinta)}
.cz-plan:has(input:focus-visible){outline:2px solid var(--tinta);outline-offset:2px}
.cz-plan input{width:20px;height:20px;min-height:0;margin:0;flex:none;accent-color:var(--tinta)}
.cz-plan span{flex:1;min-width:0}
.cz-plan b{display:block}
.cz-plan small{display:block;font-size:.875rem;line-height:1.4;color:var(--tinta-2)}
.cz-plan em{font-style:normal;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.cz-plan em small{display:inline;font-weight:500}
.cz-tot{margin:0;padding:14px 16px;border-radius:16px;background:var(--papel)}
.cz-tot div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0}
.cz-tot dt{color:var(--tinta-2)}
.cz-tot dd{margin:0;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.cz-tot dd small{font-size:.875rem;font-weight:500;color:var(--tinta-2)}
.cz-tot .cz-total{margin-top:4px;padding-top:10px;border-top:1px solid var(--linea)}
.cz-tot .cz-total dt,.cz-tot .cz-total dd{font-family:var(--display);font-size:1.375rem;font-weight:800;color:var(--tinta)}
.cz-tot .cz-mes{margin-top:6px;padding-top:10px;border-top:1px dashed var(--linea)}
.cz-opc{margin:0}
.cz-opc label:not(.chk){margin-top:10px}
.cz-acciones{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cz-acciones .btn{padding:0 12px}
.cz-versiones summary{display:flex;align-items:center;min-height:44px;font-weight:700;cursor:pointer}
.cz-versiones ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cz-ver{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--linea);border-radius:12px;background:var(--tarjeta);text-align:left}
.cz-ver:hover,.cz-ver[aria-current="true"]{border-color:var(--tinta)}
.cz-ver span{font-size:.875rem;color:var(--tinta-2)}
.cz-ver em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .cz-grid{grid-template-columns:minmax(0,1fr)}
  .cz-resumen{position:static}
}
@media (max-width:560px){
  .cz-fila{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"chk chk" "cant monto" "lugar lugar";row-gap:6px}
  .cz-chk{grid-area:chk}.cz-cant{grid-area:cant}.cz-monto{grid-area:monto}.cz-lugar{grid-area:lugar;margin-left:0}
  .cz-opcs li{flex-wrap:wrap}
  .cz-plan{flex-wrap:wrap}
  .cz-plan em{margin-left:32px}
  .cz-ver{grid-template-columns:minmax(0,1fr) auto}
  .cz-ver span{grid-column:1;grid-row:2}
}

/* ---- Ajustes de precios ---- */
.pr-grupo h3{margin-top:18px}
.pr-fila{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:14px;padding:12px 0;border-top:1px solid var(--linea)}
.pr-txt{display:grid;gap:6px;align-content:start}
.pr-nombre{font-weight:700}
.pr-que{font-size:.9375rem;line-height:1.4}
.pr-monto label:not(.chk){margin-top:0}
.pr-pesos{font-variant-numeric:tabular-nums}
.pr-tag{display:inline-flex;margin-top:8px;padding:4px 10px;border-radius:999px;background:var(--warn-suave);color:var(--warn-tinta);font-size:.875rem;font-weight:700}
.pr-quien{display:block;margin-top:8px;font-size:.875rem;color:var(--tinta-2)}
@media (max-width:640px){.pr-fila{grid-template-columns:minmax(0,1fr)}}

/* ---- Prospecto ---- */
.ps-checks{display:flex;flex-direction:column;justify-content:flex-end}
.ps-app{display:grid;grid-template-columns:minmax(0,1fr) auto auto 44px;gap:8px;align-items:center;margin-bottom:8px}
.ps-pant{display:flex;align-items:center;gap:8px;margin:0;font-size:.875rem;color:var(--tinta-2)}
.ps-pant input{width:76px;text-align:center}
.ps-app .chk{margin:0}
.ps-botones{display:flex;flex-wrap:wrap;gap:8px}
.ps-mods{max-width:none}
@media (max-width:640px){
  .ps-app{grid-template-columns:minmax(0,1fr) 44px;grid-template-areas:"n x" "p a";padding-bottom:8px;border-bottom:1px solid var(--linea)}
  .ps-nom{grid-area:n}.ps-app [data-ps-quitar]{grid-area:x}.ps-pant{grid-area:p}.ps-app .chk{grid-area:a;justify-self:end}
}

/* ---- Documento de la cotización (solo al imprimir o guardar como PDF) ---- */
.cz-doc{display:none}
@media print{
  body.cz-imprimiendo{background:#fff;height:auto}
  body.cz-imprimiendo>:not(#czDoc){display:none!important}
  body.cz-imprimiendo #czDoc{display:block!important}
  @page{margin:14mm 14mm 16mm}
}
.cz-doc{font:400 10.5pt/1.45 var(--sans);color:#16151A;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.cz-doc h1,.cz-doc h2{font-family:var(--display);letter-spacing:-.02em}
.czd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:18px 20px;border-radius:12px;background:var(--czd-side);color:var(--czd-ink);border-bottom:6px solid var(--czd-accent)}
.czd-marca{display:flex;align-items:center;gap:14px;min-width:0}
.czd-marca img{width:56px;height:56px;object-fit:contain;border-radius:12px;background:#fff;padding:4px}
.czd-kicker{margin:0;font-size:9pt;font-weight:700;text-transform:uppercase;letter-spacing:.12em;opacity:.85}
.czd-head h1{margin:2px 0 0;font-size:20pt;line-height:1.1}
.czd-sub{margin:2px 0 0;font-size:9.5pt;opacity:.85}
.czd-meta{margin:0;display:grid;gap:2px;text-align:right;font-size:9.5pt}
.czd-meta div{display:flex;gap:8px;justify-content:flex-end}
.czd-meta dt{opacity:.8}.czd-meta dd{margin:0;font-weight:700}
.czd-partes{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin:16px 0 8px}
.czd-partes h2{margin:0 0 6px;font-size:10pt;text-transform:uppercase;letter-spacing:.1em;color:var(--czd-texto)}
.czd-partes dl{margin:0;display:grid;gap:2px}
.czd-partes dl div{display:grid;grid-template-columns:90px 1fr;gap:8px}
.czd-partes dt{color:#5B5862}.czd-partes dd{margin:0}
.czd-vacio{color:#8A8792;font-style:italic}
.czd-para{margin:0;font-size:13pt;font-weight:700}
.czd-tabla{width:100%;border-collapse:collapse;margin-top:10px}
.czd-tabla th,.czd-tabla td{padding:7px 8px;text-align:left;vertical-align:top;border-bottom:1px solid #E2DCD0}
.czd-tabla thead th{font-size:9pt;text-transform:uppercase;letter-spacing:.06em;color:#5B5862;border-bottom:2px solid var(--czd-accent)}
.czd-tabla th:nth-child(n+2),.czd-tabla td:nth-child(n+2){text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.czd-tabla td small{display:block;font-size:9pt;color:#5B5862}
.czd-g th{padding-top:12px;font-size:10pt;color:var(--czd-texto);border-bottom:0}
.czd-tabla tr{break-inside:avoid}
.czd-tot{width:300px;margin:12px 0 0 auto;display:grid;gap:3px;break-inside:avoid}
.czd-tot div{display:flex;justify-content:space-between;gap:12px}
.czd-tot dt{color:#5B5862}.czd-tot dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.czd-tot .czd-total{margin:4px 0;padding:8px 10px;border-radius:8px;background:var(--czd-side);color:var(--czd-ink)}
.czd-tot .czd-total dt{color:inherit;font-weight:700}
.czd-tot .czd-total dd{font-size:13pt}
.czd-mensual{margin-top:16px;padding:12px 14px;border:1px solid #E2DCD0;border-left:5px solid var(--czd-accent);border-radius:8px;break-inside:avoid}
.czd-mensual h2{margin:0 0 4px;font-size:11pt}
.czd-mensual p{margin:0}
.czd-mensual ul{margin:4px 0;padding-left:18px}
.czd-mensual li small{display:block;color:#4A463F}
.czd-mes{margin-top:4px!important;font-weight:700}
.czd-cond{margin-top:14px}
.czd-cond p{margin:0 0 4px}
.czd-notas{white-space:pre-line}
.czd-pie{margin-top:22px;padding-top:8px;border-top:1px solid #E2DCD0;font-size:9pt;color:#5B5862}
/* #183: precio ofrecido contra valor, plan de pagos y preguntas frecuentes en lo impreso. */
.czd-oferta{margin:14px 0 0 auto;width:300px;padding:12px 14px;border-radius:10px;border:2px solid var(--czd-accent);break-inside:avoid;font-variant-numeric:tabular-nums}
.czd-oferta p{margin:0}
.czd-valor{color:#5B5862}.czd-valor s{margin-left:6px}
.czd-tuprecio{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.czd-tuprecio span{flex-basis:100%;font-size:9pt;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--czd-texto)}
.czd-tuprecio b{font-size:20pt;line-height:1.1}
.czd-ahorro{margin-top:4px!important;font-weight:700;color:var(--czd-texto)}
.czd-plan{margin-top:6px}
.czd-plan h3{margin:0;font-size:10pt}
.czd-plan h3 small{font-weight:600;color:#5B5862}
.czd-plan.on h3 small{color:var(--czd-texto)}
.czd-faq{margin-top:16px;break-inside:avoid}
.czd-faq h2{margin:0 0 6px;font-size:11pt}
.czd-faq dl{margin:0;display:grid;gap:6px}
.czd-faq dt{font-weight:700}.czd-faq dd{margin:0;color:#3A3741}

/* ---- Compartir (web/compartir.js): botón de la barra y diálogo con la lista de enlaces (patrón de Archivos: .ar-qr, .ar-links) ---- */
.cz-compartir{grid-column:1/-1}
#coForm{padding:0;overflow:visible;max-height:none}   /* el relleno y el scroll ya los pone .dlg-body */
.co-incluye{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.co-incluye legend{grid-column:1/-1}
.co-incluye .chk{margin:0}
@media (max-width:560px){.co-incluye{grid-template-columns:minmax(0,1fr)}}
:is(.co-incluye,.co-precios) small{color:var(--tinta-2);font-size:.875rem;font-weight:400}
.co-precios .chk{margin:0}
.co-precios small{display:block}
.co-nota{display:block;margin:6px 0 0;font-size:.875rem;line-height:1.4;color:var(--tinta-2)}
#coPend{color:#8A4A06;font-weight:600}
.co-pinrow{display:flex;gap:8px}
.co-pinrow input{flex:1;min-width:0;letter-spacing:.2em;font-variant-numeric:tabular-nums}
.co-pin{margin:10px 0 0;font-size:.9375rem;line-height:1.4}
.co-links li{align-items:start}
.co-links b{display:block;font-size:.9375rem;overflow-wrap:anywhere}
.co-links small+small{margin-top:2px}
.co-acc{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.co-links .co-acc button,.co-prol summary{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--linea);background:#fff;font-weight:600;font-size:.9375rem;color:var(--tinta);cursor:pointer}
.co-links .co-acc .co-rev{color:var(--err)}
.co-prol{position:relative}
.co-prol summary{list-style:none;display:inline-flex;align-items:center}
.co-prol summary::-webkit-details-marker{display:none}
.co-prol[open]>div{position:absolute;right:0;top:calc(100% + 4px);z-index:3;display:grid;gap:4px;min-width:140px;padding:6px;border:1px solid var(--linea);border-radius:14px;background:#fff;box-shadow:0 18px 40px -18px rgba(22,21,26,.4)}
.co-prol[open]>div button{width:100%}
@media (max-width:560px){.co-links li{grid-template-columns:minmax(0,1fr)}.co-acc{justify-content:flex-start}.co-prol[open]>div{left:0;right:auto}}
@media (prefers-reduced-motion:reduce){.pres-panel,.pres-etiqueta.entra,.pres-fab{animation:none}.stage.presentando,.pres-sel,.pres-plegar .pp-flecha{transition:none!important}}
.home-acc{display:flex;align-items:center;gap:4px}
@media (max-width:560px){.home-acc{width:100%}.home-acc .btn{flex:1}}
@container (max-width:420px){.bar-r .i3d{width:22px;height:22px}}

/* ---- Presentación en vivo (web/vivo.js del dueño; el visor, web/compartido.js): botón, control, puntero y pasos ---- */
.vivo-punto{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:#9CA3AF}
.pres-vivo.on .vivo-punto,.vivo-estado .vivo-punto{background:#F43F5E;box-shadow:0 0 0 0 rgba(244,63,94,.6);animation:vivoLate 1.6s ease-out infinite}
@keyframes vivoLate{0%{box-shadow:0 0 0 0 rgba(244,63,94,.55)}70%{box-shadow:0 0 0 8px rgba(244,63,94,0)}100%{box-shadow:0 0 0 0 rgba(244,63,94,0)}}
.stage .pres-vivo.on{border-color:rgba(244,63,94,.6);background:rgba(244,63,94,.12)}
.vivo-ctl{position:absolute;left:max(calc(var(--ladow,0px) + 14px),env(safe-area-inset-left));bottom:max(14px,calc(env(safe-area-inset-bottom) + 10px));z-index:21;display:flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:calc(100% - var(--expw) - var(--ladow,0px) - 60px);padding:6px;border-radius:18px;background:rgba(10,14,24,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 18px 40px -18px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.12) inset;color:#fff}
.vivo-ctl[hidden]{display:none}
.vivo-estado{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;font-size:.9375rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.vivo-estado b{font-weight:800}
.vivo-b{min-height:44px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;font-weight:700;font-size:.9375rem;cursor:pointer}
.vivo-b:hover{background:rgba(255,255,255,.1)}
.vivo-b[aria-pressed="true"]{background:#fff;color:#111;border-color:#fff}
/* Quién mueve la presentación: segmentado «Yo controlo | Libre» (radiogroup); con el mando cedido queda apagado y
   aparece «X tiene el mando · Recuperar el mando». */
.vivo-modo{display:inline-flex;gap:2px;padding:3px;border-radius:14px;background:rgba(255,255,255,.1);box-shadow:0 0 0 1px rgba(255,255,255,.16) inset}
.vivo-modo button{min-height:40px;padding:0 14px;border:0;border-radius:11px;background:transparent;color:#fff;font-weight:700;font-size:.9375rem;cursor:pointer}
.vivo-modo button[aria-checked="true"]{background:#fff;color:#111}
.vivo-modo button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vivo-modo button:disabled{cursor:default;opacity:.45}
.vivo-mando{flex:1 0 100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0;padding:4px 6px 2px 10px;font-size:.9375rem;font-weight:700;color:#BBF7D0}
.vivo-mando[hidden]{display:none}
.vivo-b:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vivo-b.vivo-fin{border-color:rgba(244,63,94,.7);color:#FECDD3}
.vivo-b.vivo-fin:hover{background:rgba(244,63,94,.18)}
.vivo-aviso{flex:1 0 100%;margin:0;padding:4px 10px 6px;font-size:.875rem;line-height:1.4;color:#FDE68A}
@media (max-width:700px){.vivo-ctl{left:8px;right:8px;max-width:none;bottom:calc(env(safe-area-inset-bottom) + 80px)}.vivo-b{padding:0 10px}}
/* Puntero: la capa toma el cursor sobre la pantalla (el iframe se lo quedaría); el punto se dibuja igual en los dos lados. */
.vivo-capa{position:absolute;inset:0;z-index:5;cursor:none;touch-action:none}
.vivo-capa[hidden]{display:none}
/* Tamaño y color (lista cerrada, la misma que valida el servidor): clases lz-<t> y lz-<color> en los dos lados. El borde
   oscuro y el halo del mismo color lo hacen visible sobre fondos claros y oscuros; el blanco lleva el borde más marcado. */
.vivo-laser{--lz-d:16px;position:absolute;left:calc(var(--lz-d) / -2);top:calc(var(--lz-d) / -2);z-index:6;width:var(--lz-d);height:var(--lz-d);border-radius:50%;background:var(--lz,#FF3B5C);box-shadow:0 0 0 2px var(--lz-b,rgba(8,10,18,.55)),0 0 calc(var(--lz-d) * .9) calc(var(--lz-d) * .3) var(--lz-g,rgba(255,59,92,.55));pointer-events:none;transition:transform .07s linear;will-change:transform}
.vivo-laser[hidden]{display:none}
.lz-s{--lz-d:10px;--lz-m:8px}.lz-m{--lz-d:16px;--lz-m:12px}.lz-l{--lz-d:26px;--lz-m:18px}
.lz-rojo{--lz:#FF3B5C;--lz-g:rgba(255,59,92,.55)}
.lz-amarillo{--lz:#FFD60A;--lz-g:rgba(255,214,10,.55)}
.lz-verde{--lz:#22E36B;--lz-g:rgba(34,227,107,.55)}
.lz-cielo{--lz:#38BDF8;--lz-g:rgba(56,189,248,.6)}
.lz-blanco{--lz:#FFFFFF;--lz-g:rgba(255,255,255,.6);--lz-b:rgba(8,10,18,.85)}
.lz-magenta{--lz:#FF2BD6;--lz-g:rgba(255,43,214,.55)}
.lz-muestra{display:inline-block;flex:none;width:var(--lz-m,12px);height:var(--lz-m,12px);border-radius:50%;background:var(--lz,#fff);box-shadow:0 0 0 2px rgba(8,10,18,.6)}
/* «Puntero» y su flecha van juntos; la flecha (o mantener «Puntero») abre el selector encima del control. */
.vivo-par{display:inline-flex;gap:2px}
.vivo-par #vivoPuntero{border-radius:12px 4px 4px 12px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.vivo-lzb{display:inline-flex;align-items:center;gap:6px;min-width:44px;padding:0 10px;border-radius:4px 12px 12px 4px}
.vivo-lzb[aria-expanded="true"]{background:rgba(255,255,255,.16)}
.vivo-lzsel{position:absolute;left:0;bottom:calc(100% + 8px);z-index:1;display:grid;gap:12px;padding:12px 14px 14px;border-radius:18px;background:rgba(10,14,24,.96);box-shadow:0 18px 40px -18px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.14) inset}
.vivo-lzsel[hidden]{display:none}
.vivo-lzsel fieldset{min-width:0;margin:0;padding:0;border:0}
.vivo-lzsel legend{padding:0 0 8px;font-size:.875rem;font-weight:800;color:rgba(255,255,255,.88)}
.lz-fila{display:flex;flex-wrap:wrap;gap:8px}
.lz-op,.lz-chip{position:relative;display:grid;place-items:center;width:44px;height:44px;margin:0;cursor:pointer}
.lz-op input,.lz-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.lz-op>i{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.2)}
.lz-op>i::before{content:"";width:var(--lz-m);height:var(--lz-m);border-radius:50%;background:#fff}
.lz-op input:checked+i{background:#fff;border-color:#fff}
.lz-op input:checked+i::before{background:#111}
.lz-chip>i{width:36px;height:36px;border-radius:50%;background:var(--lz);box-shadow:0 0 0 2px var(--lz-b,rgba(8,10,18,.55))}
.lz-chip input:checked+i{box-shadow:0 0 0 3px #0A0E18,0 0 0 6px #fff}
.lz-op input:focus-visible+i,.lz-chip input:focus-visible+i{outline:2px solid #fff;outline-offset:4px}
/* Explicar sección por sección (presentador): cada sección del panel se toca; la activa se resalta en los dos lados. */
.pres-secs.pasos li{cursor:pointer;transition:background .15s}
.pres-secs.pasos li:hover{background:rgba(255,255,255,.1)}
.pres-secs.pasos li:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pres-secs li.on{background:rgba(255,255,255,.16);box-shadow:0 0 0 2px var(--accent) inset}
/* Diálogo «Presentación en vivo» (patrón .dlg-head, QR y botones de Archivos) */
#viForm{padding:0;overflow:visible;max-height:none}
.vi-que{margin:0 0 6px;font-size:.9375rem}
.vi-pie{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--linea)}
.vi-pie .vivo-estado{flex:1;color:var(--tinta);padding:0}
.vi-pie .vi-terminar{color:var(--err);border-color:var(--err)}
.vi-retomar{margin-top:12px;padding:14px;border-radius:16px;background:var(--papel)}
.vi-retomar p{margin:0 0 10px}
@media (prefers-reduced-motion:reduce){.pres-vivo.on .vivo-punto,.vivo-estado .vivo-punto{animation:none}.vivo-laser{transition:none}}
/* Celular: la descripción cerrada es un botón redondo solo con emoji, abajo a la IZQUIERDA (a la derecha suele estar el
   WhatsApp del sitio dentro del equipo). No le quita alto al equipo; al tocarlo se abre la hoja de siempre, encima. */
@media (max-width:700px){
  .stage.presentando .pres-panel:not(.abierto){left:max(12px,calc(env(safe-area-inset-left) + 10px));right:auto;bottom:calc(env(safe-area-inset-bottom) + 12px);width:56px;height:56px;max-height:56px;padding:0;border-radius:50%;overflow:hidden;animation:none}
  .stage.presentando .pres-panel:not(.abierto)>:not(.exp-top),.stage.presentando .pres-panel:not(.abierto) .exp-top>*{display:none}
  .stage.presentando .pres-panel:not(.abierto) .exp-top{width:56px;height:56px;padding:0;border:0;background:url(/emoji/explicar.webp) center/30px no-repeat}
  .stage.presentando .pres-panel:not(.abierto) .exp-top::before{display:none}
}

/* ---- Enfoque (Vitrina.enfoque en vitrina-nucleo.js, tecla M; la Presentación del mando y el visor del cliente) ----
   Sin barra, sidebar ni panel: el equipo a todo el espacio (encajar lee el marco del CSS: el de la computadora adelgaza).
   El sidebar queda como cajón que abre «Pantallas» de los controles flotantes; en celular sigue el botón redondo de la
   descripción. Escondidos, los controles solo se desvanecen: siguen en el orden de Tab y reaparecen con el foco. */
.stage.presentando.enfoque{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);--ladow:0px;--expw:0px}
.stage.enfoque>.pres-bar{display:none}
.stage.presentando.enfoque>.view{grid-column:1;grid-row:1;padding:max(6px,env(safe-area-inset-top)) 6px 6px}
.stage.enfoque>.pres-sel{position:fixed;top:0;bottom:0;left:0;z-index:30;width:min(320px,86vw);padding:env(safe-area-inset-top) 0 0 env(safe-area-inset-left);background:var(--side,#0B1220);border-right:0;box-shadow:none;transform:translateX(-105%);visibility:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1),visibility 0s .25s}
.stage.enfoque.cajon>.pres-sel{transform:none;visibility:visible;box-shadow:20px 0 40px -10px rgba(0,0,0,.6);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
@media (min-width:701px){.stage.enfoque .pres-panel{display:none}}
/* Las pestañas de la barra, copiadas arriba del cajón (solo en el enfoque). */
.enf-tabs{display:none}
.stage.enfoque .enf-tabs{display:flex;flex:none;margin:0 12px 10px}
.stage.enfoque .enf-tabs button{flex:1 1 0;min-width:0;justify-content:center;padding:0 8px}
/* La computadora: la barra del navegador del mockup, lo más delgada posible (los tres puntos siguen). */
.stage.enfoque .device.frame.desktop{padding:16px 4px 4px;border-radius:10px}
.stage.enfoque .device.frame.desktop::before{top:4px;left:8px;transform:scale(.8);transform-origin:0 0}
/* Controles flotantes: pantallas, anterior, contador, siguiente y «Salir del enfoque». */
.enf-ctl{position:absolute;top:max(8px,calc(env(safe-area-inset-top) + 4px));left:50%;z-index:32;display:flex;align-items:center;gap:4px;max-width:calc(100% - 16px);padding:5px;border-radius:18px;background:rgba(10,14,24,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 40px -18px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.14) inset;color:#fff;opacity:0;transform:translate(-50%,-10px);pointer-events:none;transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1)}
.enf-ctl[hidden]{display:none}
.enf-ctl.visible{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.stage .enf-b,.stage .enf-b[aria-expanded="false"]{width:44px;height:44px;border-radius:12px;color:#fff}
.stage .enf-b:disabled{opacity:.35;cursor:default}
.stage .enf-b[aria-disabled="true"]:not(:disabled){opacity:.55}
.enf-cuenta{min-width:52px;text-align:center;font-weight:800;font-size:.9375rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.enf-cuenta:empty{display:none}
.stage .enf-salir{display:inline-flex;align-items:center;gap:8px;width:auto;margin-left:4px;padding:0 14px 0 10px;border:1px solid rgba(255,255,255,.24)}
.enf-salir span{font-size:.9375rem;font-weight:700;white-space:nowrap}
.enf-ctl :focus-visible,.enf-asa:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:420px){.enf-salir span{display:none}.stage .enf-salir{width:44px;justify-content:center;padding:0}}
/* Equipo (celular · tableta · computadora): la copia del «Ver como» de la barra, con su mismo aspecto. En la fila, sin el
   fondo de la barra; donde no cabe (≤ 440 px), arriba del cajón, bajo las pestañas. */
.stage .enf-ctl .enf-devs{display:flex;order:0;margin:0 4px;padding:0;background:none}
.enf-devs-cajon{display:none}
.enf-devs[hidden],.enf-devs [hidden]{display:none!important}
@media (max-width:440px){
  .stage .enf-ctl .enf-devs{display:none}
  .stage.enfoque .enf-devs-cajon{display:flex;flex:none;margin:0 12px 10px}
  .stage.enfoque .enf-devs-cajon button{flex:1 1 0}
}
/* La asa: en pantallas táctiles, una pestaña de 44 px arriba al centro (sobre la isla o la barra del mockup, nunca sobre
   la app en celular); con mouse, una franja delgada en todo el borde superior. */
.enf-asa{position:absolute;top:0;left:50%;z-index:28;display:grid;justify-items:center;align-content:start;width:88px;height:calc(44px + env(safe-area-inset-top));margin:0 0 0 -44px;padding:calc(env(safe-area-inset-top) + 7px) 0 0;border:0;border-radius:0 0 14px 14px;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.enf-asa::before{content:"";width:40px;height:5px;border-radius:5px;background:rgba(255,255,255,.62);box-shadow:0 0 0 1px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.4)}
.enf-asa[hidden]{display:none}
@media (pointer:fine){
  .enf-asa{left:0;right:0;width:auto;height:14px;margin:0;padding-top:4px}
  .enf-asa::before{width:36px;height:4px;opacity:.55}
}
/* En vivo, el control del dueño se compacta a una píldora (quién ve, puntero y «Más»); lo urgente sigue a la vista:
   el mando cedido, «Volver a …» y un aviso. «Más» (web/vivo.js) lo despliega completo. */
.vivo-mas{display:none}
.stage.enfoque .vivo-ctl{left:max(10px,calc(env(safe-area-inset-left) + 6px));right:auto;bottom:max(10px,calc(env(safe-area-inset-bottom) + 6px));max-width:calc(100% - 20px);gap:4px;padding:4px;border-radius:16px}
.stage.enfoque .vivo-ctl .vivo-mas{display:inline-grid;place-items:center;min-width:44px;padding:0}
.stage.enfoque .vivo-ctl:not(.expandido)>:not(.vivo-estado,.vivo-par,.vivo-mas,.vivo-mando,.vivo-volver,.vivo-aviso,.vivo-lzsel){display:none}
.stage.enfoque .vivo-ctl:not(.expandido) .vivo-estado{padding:0 6px 0 8px}
.stage.enfoque .vivo-ctl:not(.expandido) .vivo-estado b{display:none}
.stage.enfoque .vivo-mas[aria-expanded="true"]{background:rgba(255,255,255,.16)}
@media (max-width:700px){.stage.enfoque .vivo-ctl{bottom:calc(env(safe-area-inset-bottom) + 76px)}}
@media (prefers-reduced-motion:reduce){.enf-ctl,.stage.enfoque>.pres-sel{transition:none}}

/* ---- Recorrido guiado (web/tour.js, Vitrina.tour): el mismo en el visor del cliente y en la Presentación del dueño ----
   Velo que bloquea toques, un foco con halo alrededor de lo señalado y un globo claro con flechita. En celular
   (≤ 700 px) el globo es una tarjeta pegada abajo (o arriba si taparía lo señalado) con las zonas seguras. Sin
   movimiento con «reducir movimiento». Posiciones por CSSOM desde tour.js: aquí nada en línea. */
.tour{position:fixed;inset:0;z-index:90;pointer-events:none;font-family:var(--sans,'Figtree',system-ui,sans-serif)}
.tour-velo{position:absolute;inset:0;pointer-events:auto;background:transparent}
.tour-foco{position:fixed;border-radius:16px;pointer-events:none;box-shadow:0 0 0 3px #fff,0 0 0 100vmax rgba(5,10,20,.66);transition:left .26s cubic-bezier(.2,.8,.2,1),top .26s cubic-bezier(.2,.8,.2,1),width .26s cubic-bezier(.2,.8,.2,1),height .26s cubic-bezier(.2,.8,.2,1)}
.tour-sin-ancla .tour-velo{background:rgba(5,10,20,.66)}
.tour-seguro{position:fixed;left:0;top:0;width:0;height:0;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.tour-tarjeta{position:fixed;display:grid;gap:6px;box-sizing:border-box;padding:16px 16px 14px;border-radius:18px;pointer-events:auto;background:#FFFDF8;color:#16151A;box-shadow:0 24px 60px -18px rgba(0,0,0,.7),0 0 0 1px rgba(22,21,26,.1);animation:tourEntra .22s ease-out}
.tour-tarjeta:focus{outline:none}
.tour-paso{margin:0;font-size:.875rem;font-weight:700;letter-spacing:.02em;color:#5B5862}
.tour-titulo{margin:0;font:800 1.25rem/1.2 var(--display,'Bricolage Grotesque',system-ui,sans-serif);letter-spacing:-.01em}
.tour-texto{margin:2px 0 0;font-size:1rem;line-height:1.45;color:#2C2A33}
.tour-acc{display:flex;align-items:center;gap:8px;margin-top:10px}
.tour-b{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #D9D2C3;background:transparent;color:#16151A;font-weight:700;font-size:.9375rem;cursor:pointer}
.tour-b:hover:not(:disabled){border-color:#16151A}
.tour-b:focus-visible{outline:3px solid #2563EB;outline-offset:2px}
.tour-b:disabled{opacity:.4;cursor:default}
.tour-saltar{margin-right:auto;border-color:transparent;color:#5B5862;padding:0 10px;text-decoration:underline;text-underline-offset:3px}
.tour-sig{background:#16151A;border-color:#16151A;color:#fff;min-width:96px}
.tour-sig:hover{background:#2C2A33!important;border-color:#2C2A33!important}
.tour-flecha{position:absolute;width:14px;height:14px;background:#FFFDF8;transform:rotate(45deg);box-shadow:-1px -1px 0 0 rgba(22,21,26,.1)}
.tour-flecha[hidden]{display:none}
.tour-f-abajo{top:-7px;left:calc(var(--tour-pos,50%) - 7px)}
.tour-f-arriba{bottom:-7px;left:calc(var(--tour-pos,50%) - 7px);transform:rotate(225deg)}
.tour-f-derecha{left:-7px;top:calc(var(--tour-pos,50%) - 7px);transform:rotate(-45deg)}
.tour-f-izquierda{right:-7px;top:calc(var(--tour-pos,50%) - 7px);transform:rotate(135deg)}
.tour-centro{left:50%;top:50%;width:min(344px,calc(100vw - 24px));transform:translate(-50%,-50%)}
.tour-abajo,.tour-arriba{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));width:auto}
.tour-abajo{bottom:max(12px,env(safe-area-inset-bottom))}
.tour-arriba{top:max(12px,env(safe-area-inset-top))}
.tour-abajo .tour-flecha,.tour-arriba .tour-flecha{display:none}
@keyframes tourEntra{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.tour-foco{transition:none}.tour-tarjeta{animation:none}}
/* El botón «Cómo usar» de las barras: discreto (solo el emoji hasta que haya sitio para su texto). */
.pres-tour .pres-accion-t{display:none}
@media (min-width:1500px){.pres-tour .pres-accion-t{display:inline}}