/* Seix Partner · Card v2 — plantilla de tarjeta digital de UNA SOLA PANTALLA.
   La tarjeta es la puerta: la persona, su mundo y las acciones viven en el
   primer vistazo; los productos se tocan en chips y se viven en el Mundo.
   Nada de listas largas hacia abajo. */
:root{
  --acento:#b91c4a; --acento-osc:#8f1238; --acento-claro:#fdeef3;
  --fondo:#fff9f5; --tinta:#2b1420; --suave:#6d5560; --borde:#f0d9c8;
  --verde:#1e9e4a; --wa:#22b358;
}
body[data-color="verde"]{--acento:#1e8b3d;--acento-osc:#146c2d;--acento-claro:#e9f9ee}
body[data-color="azul"]{--acento:#1f6fd6;--acento-osc:#1756ab;--acento-claro:#e9f2fd}
body[data-color="naranja"]{--acento:#d95d0e;--acento-osc:#b04a08;--acento-claro:#fdf0e6}
body[data-color="violeta"]{--acento:#6d28c9;--acento-osc:#551da3;--acento-claro:#f2eafd}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--fondo);color:var(--tinta);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  min-height:100dvh;display:flex;flex-direction:column;align-items:center}
/* Barra superior: salida a la principal */
.topbar{width:100%;max-width:520px;display:flex;align-items:center;gap:10px;
  padding:9px 16px;position:sticky;top:0;background:color-mix(in srgb,var(--fondo) 88%,transparent);
  backdrop-filter:blur(8px);z-index:20}
.brand{font-size:1.25rem;font-weight:800;color:var(--tinta);text-decoration:none;letter-spacing:.3px}
.brand b{color:var(--acento)}
.demo-tag{flex:1;text-align:center;font-size:.64rem;font-weight:800;letter-spacing:.5px;
  color:#7c2d12;background:#fdf3d7;border:1px solid #dfa83e;border-radius:999px;padding:4px 7px}
.top-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.langbtn,.volver{font:inherit;font-size:.8rem;font-weight:700;border-radius:999px;
  padding:6px 12px;cursor:pointer;text-decoration:none}
.langbtn{background:transparent;border:1.5px solid var(--acento);color:var(--acento)}
.volver{background:var(--acento);color:#fff;border:1.5px solid var(--acento)}
/* Tarjeta: el escenario completo en el primer vistazo */
.card{width:100%;max-width:520px;flex:1;display:flex;flex-direction:column;
  padding:8px 14px 4px;min-height:0}
.stage,.hero,.chips-zone,.dock{scroll-margin-top:64px}
/* Dentro de un marco (vista previa del editor) la barra no flota:
   así nunca tapa el contenido al desplazar dentro del marco */
body.embed .topbar{position:static}
.cargando{text-align:center;color:var(--suave);padding:40px 0}
.stage{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}
/* Héroe compacto: foto + identidad en una fila */
.hero{display:flex;gap:13px;align-items:center;padding:8px 2px 0}
.foto{width:74px;height:74px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--acento-claro);
  border:3px solid var(--acento);box-shadow:0 8px 20px rgba(0,0,0,.16)}
.iniciales{width:74px;height:74px;border-radius:50%;flex:none;display:flex;
  align-items:center;justify-content:center;font-size:1.65rem;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--acento),var(--acento-osc));border:3px solid #fff;
  box-shadow:0 8px 20px rgba(0,0,0,.16)}
.hero .id{min-width:0}
.hero h1{font-size:1.28rem;line-height:1.15}
.negocio{color:var(--acento);font-weight:800;font-size:.92rem;margin-top:2px}
.lema{color:var(--suave);font-size:.83rem;line-height:1.35;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{color:var(--suave);font-size:.76rem;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* EL MUNDO: el centro del escenario */
.mundo{display:block;position:relative;border-radius:22px;overflow:hidden;flex:1;min-height:238px;
  text-decoration:none;color:#fff;box-shadow:0 18px 38px rgba(60,10,30,.28);
  isolation:isolate}
.mundo img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.04);animation:mundoRespira 9s ease-in-out infinite alternate}
@keyframes mundoRespira{from{transform:scale(1.04)}to{transform:scale(1.13)}}
.mundo .velo{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,4,12,.16) 0%,transparent 34%,rgba(20,4,12,.82) 88%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:16px}
.mundo .k{align-self:flex-start;font-size:.66rem;font-weight:800;letter-spacing:1.8px;color:#2b1420;
  background:#ffd9a8;padding:5px 10px;border-radius:999px}
.mundo h2{font-size:1.34rem;line-height:1.22;margin-top:auto;padding-top:26px;max-width:20ch}
.mundo .entra{align-self:flex-start;margin-top:10px;background:#fff;color:var(--acento-osc);
  font-weight:900;font-size:.92rem;padding:11px 19px;border-radius:999px;
  box-shadow:0 8px 22px rgba(0,0,0,.28);animation:entraPulso 2.2s ease-in-out infinite}
@keyframes entraPulso{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.mundo .anillo{position:absolute;z-index:1;right:16px;top:14px;width:44px;height:44px;border-radius:50%;
  border:2px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;background:rgba(20,4,12,.28);backdrop-filter:blur(3px)}
.mundo .anillo::after{content:"";position:absolute;inset:-2px;border-radius:50%;
  border:2px solid rgba(255,217,168,.9);animation:anilloOnda 2.2s ease-out infinite}
@keyframes anilloOnda{from{transform:scale(.8);opacity:1}to{transform:scale(1.55);opacity:0}}
/* Productos: chips de un toque, en fila viva (sin lista hacia abajo) */
.chips-zone{flex:none}
.chips-lab{display:flex;align-items:baseline;gap:8px;margin:0 2px 7px}
.chips-lab h2{font-size:.8rem;letter-spacing:1.3px;text-transform:uppercase;color:var(--acento)}
.chips-lab span{font-size:.72rem;color:var(--suave)}
.chips{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{scroll-snap-align:start;flex:0 0 auto;display:flex;align-items:center;gap:9px;
  background:#fff;border:1.5px solid var(--borde);border-radius:999px;padding:7px 8px 7px 12px;
  box-shadow:0 4px 12px rgba(90,40,10,.06);max-width:78vw}
.chip .cem{font-size:1.5rem;flex:none}
.chip .cinf{min-width:0}
.chip .cnm{font-size:.82rem;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
.chip .cpr{color:var(--acento);font-weight:800;font-size:.82rem}
.chip .mini{flex:none;background:var(--verde);color:#fff;font-weight:800;font-size:.74rem;
  border:0;border-radius:999px;padding:8px 12px;cursor:pointer;font-family:inherit}
.chip:active{transform:scale(.97)}
.mini:active,.pagar:active{transform:scale(.95)}
.chip .tapzone{cursor:pointer;display:flex;align-items:center;gap:9px;background:none;border:0;font:inherit;color:inherit;text-align:left;padding:0}
/* Redes: una fila de iconos, a un toque */
.soc-row{display:flex;gap:8px;justify-content:center;flex:none}
.soc{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-size:1.15rem;background:#fff;border:1.5px solid var(--borde);
  box-shadow:0 3px 9px rgba(90,40,10,.06)}
.soc:active{transform:scale(.92)}
/* Muelle de acciones: siempre al pie del escenario */
.dock{display:flex;gap:8px;flex:none;padding-top:2px}
.dock .btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 6px;border-radius:999px;font-weight:800;font-size:.82rem;text-decoration:none;
  border:0;cursor:pointer;font-family:inherit;white-space:nowrap}
.dock .btn:active{transform:scale(.96)}
.btn-wa{background:var(--wa);color:#fff}
.btn-call{background:var(--tinta);color:#fff}
.btn-save{background:#fff;color:var(--acento);border:1.5px solid var(--acento)!important}
.btn-share{background:var(--acento);color:#fff}
/* Hojas (producto y compartir): superficies de un toque, sin bajar */
.sheet{position:fixed;inset:0;z-index:65;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet-bg{position:absolute;inset:0;background:rgba(24,6,14,.6)}
.sheet-box{position:relative;background:#fff;border-radius:22px 22px 0 0;width:100%;max-width:520px;
  padding:22px 20px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -18px 50px rgba(0,0,0,.35);
  animation:hojaSube .28s cubic-bezier(.2,.9,.3,1.1)}
@keyframes hojaSube{from{transform:translateY(46px);opacity:.4}to{transform:translateY(0);opacity:1}}
.sheet-box .sx{position:absolute;top:10px;right:12px;background:transparent;border:0;font-size:1.05rem;
  cursor:pointer;color:var(--suave);padding:6px}
.sheet-box h3{font-size:1.12rem;line-height:1.3;padding-right:26px}
.sheet-box.center{text-align:center}
.sheet-box.center h3{padding-right:0}
.ps-em{font-size:2.6rem;line-height:1}
.ps-desc{color:var(--suave);font-size:.9rem;line-height:1.5;margin-top:7px}
.ps-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.ps-price{font-size:1.45rem;font-weight:800;color:var(--acento)}
.pagar{background:var(--verde);color:#fff;font-weight:800;font-size:.85rem;border:0;
  border-radius:999px;padding:11px 17px;cursor:pointer;font-family:inherit}
.pagar.big{font-size:.98rem;padding:13px 26px}
.ps-hint{margin-top:13px;font-size:.78rem;color:var(--suave)}
.qr{width:172px;height:172px;border-radius:12px;background:#fff;padding:8px;border:1px solid var(--borde);margin-top:10px}
.url{font-weight:700;font-size:.92rem;margin:10px 0 2px;word-break:break-all}
.copybtn{margin-top:12px;background:var(--acento);color:#fff;border:0;font-weight:800;
  padding:12px 22px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:.9rem}
/* Modal de pago */
.modal{position:fixed;inset:0;background:rgba(24,6,14,.66);display:flex;align-items:center;
  justify-content:center;z-index:60;padding:18px}
.modal[hidden]{display:none}
.mbox{background:#fff;border-radius:20px;max-width:360px;width:100%;padding:26px 22px;
  text-align:center;position:relative;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.mx{position:absolute;top:10px;right:12px;background:transparent;border:0;font-size:1.05rem;
  cursor:pointer;color:var(--suave);padding:6px}
.mbox h3{color:var(--acento);font-size:1.2rem}
.pay-prod{font-weight:700;margin-top:8px}
.pay-total{font-size:1.7rem;font-weight:800;margin:6px 0 16px}
.rails{display:grid;gap:9px}
.rail{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 16px;
  border-radius:13px;border:1.5px solid var(--borde);background:#fff;font:inherit;
  font-weight:800;cursor:pointer;text-decoration:none;color:var(--tinta);text-align:left}
.rail small{color:var(--suave);font-weight:600;font-size:.75rem;text-align:right}
.rail-main{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.rail-main small{color:#ffd9a8}
.pay-note{margin-top:14px;font-size:.78rem;color:var(--suave);line-height:1.5}
/* Pie: una sola línea */
.foot{width:100%;max-width:520px;text-align:center;padding:8px 16px calc(10px + env(safe-area-inset-bottom));
  color:var(--suave);font-size:.7rem;line-height:1.5}
.foot a{color:var(--acento);font-weight:700;text-decoration:none}
@media (max-height:700px){ .mundo{min-height:196px} .foto,.iniciales{width:62px;height:62px} .lema{display:none} }
@media (min-width:560px){ .mundo{min-height:300px} }
@media (prefers-reduced-motion:reduce){ .mundo img.bg,.mundo .entra,.mundo .anillo::after{animation:none} }
/* ===== v3: idioma (10), sonido, categorías, carrito, edición ===== */
.langsel{font:inherit;font-size:.78rem;font-weight:700;border-radius:999px;padding:6px 8px;
  cursor:pointer;background:transparent;border:1.5px solid var(--acento);color:var(--acento);max-width:118px}
.sndbtn{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--acento);
  background:transparent;font-size:1rem;cursor:pointer;line-height:1;flex:none}
.sndbtn.off{opacity:.45;border-color:var(--suave)}
.editlink{margin-left:auto;background:none;border:0;color:var(--acento);font:inherit;
  font-size:.76rem;font-weight:800;cursor:pointer;padding:4px 2px}
.catrow{display:flex;gap:6px;overflow-x:auto;padding:0 2px 7px;scrollbar-width:none}
.catrow::-webkit-scrollbar{display:none}
.catchip{flex:0 0 auto;font:inherit;font-size:.74rem;font-weight:800;border-radius:999px;
  padding:6px 12px;border:1.5px solid var(--borde);background:#fff;color:var(--suave);cursor:pointer}
.catchip.on{background:var(--acento);border-color:var(--acento);color:#fff}
.chip .cimg{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.cnuevo{background:#1e9e4a;color:#fff;font-size:.58rem;font-weight:900;border-radius:999px;
  padding:2px 6px;letter-spacing:.4px;vertical-align:2px}
.chip.addchip{border-style:dashed;border-color:var(--acento);color:var(--acento);
  font:inherit;font-weight:800;font-size:.8rem;cursor:pointer;background:var(--acento-claro);
  align-items:center;padding:7px 14px}
.psimg{width:74px;height:74px;border-radius:16px;object-fit:cover}
.ps-qty{display:flex;align-items:center;gap:7px}
.ps-qtyl{font-size:.74rem;font-weight:800;color:var(--suave)}
.ps-qty button{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--borde);
  background:#fff;font-weight:900;cursor:pointer;font-size:16px;font-family:inherit}
.ps-qty b{min-width:20px;text-align:center;font-size:1.05rem}
.ps-actions{display:flex;gap:9px;margin-top:14px}
.ps-actions .pagar{flex:1}
.pagar.alt{background:#fff;color:var(--verde);border:2px solid var(--verde)}
.pc-pulso{animation:pcPulso .65s ease}
@keyframes pcPulso{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}