/* demo.css — Tienda de ejemplo de Exhibe Pro (solo aplica con html.modo-demo, ver demo.js).
   Usa los colores de Exhibe Pro, no los de la tienda, para que se note que es la marca. */
.modo-demo{
  --ep-violeta:#5b3df5; --ep-tinta:#1b1446; --ep-etiqueta:#ffd23f; --ep-wa:#25d366;
}

/* Franja de arriba */
.demo-franja{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  padding:9px max(16px, env(safe-area-inset-right, 0px)) 9px max(16px, env(safe-area-inset-left, 0px));
  background:var(--ep-violeta); color:#fff; font-size:.9rem; line-height:1.35; text-align:center;
  position:relative; z-index:101;
}
.demo-franja p{margin:0}
.demo-franja b{font-weight:800}
.demo-sello{display:inline-block; padding:2px 10px; margin-right:6px; border-radius:99px; background:var(--ep-etiqueta); color:var(--ep-tinta); font-weight:800; font-size:.78rem; vertical-align:1px}
.demo-pista{opacity:.85}
.demo-btn-quiero{
  flex:none; display:inline-flex; align-items:center; min-height:32px; padding:0 14px; border-radius:99px;
  background:#fff; color:var(--ep-violeta); font-weight:800; font-size:.85rem; text-decoration:none;
}
.demo-btn-quiero:hover{background:var(--ep-etiqueta); color:var(--ep-tinta)}
@media (max-width:640px){
  .demo-franja{justify-content:space-between; text-align:left; gap:10px; font-size:.82rem}
  .demo-franja p{flex:1; min-width:0}
  .demo-pista{display:none}
}

/* Sección final */
.demo-cierre{padding:64px max(16px, env(safe-area-inset-right, 0px)) 64px max(16px, env(safe-area-inset-left, 0px)); background:var(--ep-tinta); color:#fff}
.demo-cierre-in{max-width:760px; margin:0 auto; display:grid; gap:18px}
.demo-cierre h2{margin:0; font-family:var(--font-titulo, inherit); font-weight:var(--font-titulo-peso, 800); text-transform:var(--titulo-transform, none); font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3rem); line-height:1.05; text-wrap:balance; color:#fff}
.demo-cierre-sub{margin:0; color:#c9c3ef; font-size:1.05rem; max-width:58ch}
.demo-lista{margin:4px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.demo-lista li{position:relative; padding-left:32px; font-weight:600}
.demo-lista li::before{content:""; position:absolute; left:0; top:.15em; width:20px; height:20px; border-radius:6px; background:var(--ep-etiqueta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-7' fill='none' stroke='%231b1446' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.demo-precio{margin:6px 0 0; display:inline-block; justify-self:start; padding:8px 16px; border-radius:12px; background:var(--ep-etiqueta); color:var(--ep-tinta); font-weight:700}
.demo-precio b{font-weight:900}
.demo-acciones{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
.demo-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 22px; border-radius:14px; font:inherit; font-weight:800; text-decoration:none; cursor:pointer; border:2px solid transparent}
.demo-btn svg{width:20px; height:20px; flex:none}
.demo-btn-wa{background:var(--ep-wa); color:#0b2a17}
.demo-btn-wa:hover{background:#3ee07b}
.demo-btn-linea{background:transparent; border-color:currentColor; color:inherit}
.demo-cierre .demo-btn-linea:hover{background:#fff; color:var(--ep-tinta)}
@media (max-width:520px){ .demo-acciones .demo-btn{width:100%} }

/* Ventana: así llega el pedido */
.demo-modal{position:fixed; inset:0; z-index:400; display:grid; place-items:center; padding:20px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px)); background:rgba(12,8,36,.72); backdrop-filter:blur(4px)}
.demo-modal[hidden]{display:none}
body.demo-modal-abierto{overflow:hidden}
.demo-modal-card{position:relative; width:min(460px, 100%); max-height:calc(100dvh - 40px); overflow:auto; border-radius:22px; background:#fff; color:#1b1446; padding:26px 22px 20px; display:grid; gap:14px; box-shadow:0 30px 80px -20px rgba(0,0,0,.6); outline:none; font-family:inherit; animation:demoEntra .28s ease}
@keyframes demoEntra{from{opacity:0; transform:translateY(16px) scale(.98)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .demo-modal-card{animation:none} }
.demo-modal-card h2{margin:0; padding-right:36px; font-size:1.35rem; line-height:1.15; font-weight:800; color:#1b1446; text-transform:none; font-family:inherit}
.demo-modal-sub{margin:0; color:#4a4470; font-size:.95rem}
.demo-cerrar{position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:50%; border:0; background:#f1eefc; color:#1b1446; font-size:1.5rem; line-height:1; cursor:pointer}
.demo-chat{border-radius:16px; overflow:hidden; background:#efeae2; border:1px solid #e2ddf5}
.demo-chat-cab{display:flex; align-items:center; gap:10px; padding:10px 14px; background:#075e54; color:#fff}
.demo-chat-cab b{display:block; font-size:.95rem}
.demo-chat-cab small{display:block; opacity:.8; font-size:.75rem}
.demo-chat-av{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#d7f7e3; color:#075e54; font-weight:800; font-size:.85rem; flex:none}
.demo-burbuja{margin:12px; padding:10px 12px 6px; border-radius:4px 12px 12px 12px; background:#fff; color:#111b21; font-size:.88rem; line-height:1.45; white-space:pre-wrap; word-break:break-word; max-height:42vh; overflow:auto}
.demo-hora{display:block; text-align:right; font-size:.7rem; color:#667781; margin-top:4px}
.demo-modal .demo-btn-linea{color:#1b1446}
.demo-modal .demo-btn-linea:hover{background:#1b1446; color:#fff}
.demo-modal .demo-acciones .demo-btn{flex:1 1 auto}
.demo-nota{margin:0; font-size:.8rem; color:#6b6690; text-align:center}
.demo-btn:focus-visible, .demo-btn-quiero:focus-visible, .demo-cerrar:focus-visible{outline:3px solid var(--ep-etiqueta); outline-offset:2px}