/* ============================================================
   vana pay chat: widget del personal shopper (prototipo).
   Solo se inyecta cuando VP.AGENT_URL resuelve (ver chat.js).
   Paleta y tipografía heredadas de styles.css (tokens :root).
   Mobile-first: panel a pantalla completa; en desktop, 380x620
   anclado abajo a la derecha.
   ============================================================ */

/* Identidad de vana pay chat: negro (--ink) y verde (--wa #25D366) como la card "Por chat" de la
   landing. El teal de vana pay se reserva para las acciones de pago. */
.vpc-fab{
  position:fixed; right:18px; bottom:18px; z-index:900;
  width:64px; height:64px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; color:var(--wa,#25D366);
  background:var(--ink,#0B1F24);
  box-shadow:0 12px 32px rgba(11,31,36,.35), 0 0 18px rgba(37,211,102,.35);
  transition:transform .18s ease, box-shadow .18s ease;
}
.vpc-fab:hover{transform:translateY(-2px) scale(1.04); box-shadow:0 16px 40px rgba(11,31,36,.4), 0 0 26px rgba(37,211,102,.5)}
.vpc-fab .ico{width:30px;height:30px;fill:currentColor; grid-area:1/1}
.vpc-fab .vpc-shopi{width:40px; height:40px; grid-area:1/1; display:block}
.vpc-fab .vpc-fab-txt,.vpc-fab .vpc-fab-go{display:none}
.vpc-fab .vpc-fab-ring{
  grid-area:1/1; width:100%; height:100%; border-radius:50%;
  border:2px solid rgba(37,211,102,.9); animation:vpc-ring 2.2s ease-out infinite;
}
.vpc-fab .vpc-fab-dot{
  position:absolute; top:6px; right:6px; width:14px; height:14px; border-radius:50%;
  background:var(--wa,#25D366); border:2px solid var(--ink,#0B1F24); animation:vpc-pulse 1.6s ease-in-out infinite;
}
@keyframes vpc-ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.75);opacity:0}}
@keyframes vpc-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@keyframes vpc-glow{0%,100%{box-shadow:0 12px 30px rgba(11,31,36,.35), 0 0 18px rgba(37,211,102,.35)}50%{box-shadow:0 12px 30px rgba(11,31,36,.35), 0 0 34px rgba(37,211,102,.7)}}
@keyframes vpc-nudge{0%,86%,100%{transform:translateY(0)}90%{transform:translateY(-7px)}94%{transform:translateY(0)}97%{transform:translateY(-3px)}}
@keyframes vpc-point{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.no-anim .vpc-fab .vpc-fab-ring,.no-anim .vpc-fab .vpc-fab-dot{animation:none}
.vpc-open .vpc-fab,.vpc-open .vpc-teasers{display:none}

/* Burbujas de invitación que salen del bubble */
.vpc-teasers{position:fixed; right:18px; bottom:96px; z-index:899; display:flex; flex-direction:column; align-items:flex-end; gap:8px; max-width:min(300px, calc(100vw - 36px))}
.vpc-teasers[hidden]{display:none}
.vpc-teasers-list{display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.vpc-teasers-close{
  width:26px; height:26px; border-radius:50%; border:0; background:rgba(11,31,36,.55); color:#fff;
  font-size:1rem; line-height:1; cursor:pointer; opacity:.85;
}
.vpc-teasers-close:hover{opacity:1}
.vpc-teaser{
  display:flex; align-items:flex-start; gap:10px; padding:10px 14px 10px 10px; cursor:pointer;
  background:#fff; color:var(--n90,#1B1F22); border-radius:18px 18px 4px 18px;
  box-shadow:0 10px 30px rgba(8,107,125,.22), 0 1px 3px rgba(0,0,0,.08);
  font-size:.92rem; line-height:1.35; max-width:100%;
  transform-origin:100% 100%; animation:vpc-pop .42s cubic-bezier(.2,1.4,.4,1) both;
}
.vpc-teaser:hover{background:#E9FBF0}
.vpc-teaser-avatar{width:30px; height:30px; flex:0 0 auto}
.vpc-teaser-body{min-width:44px; min-height:1.35em; display:inline-block; padding-top:2px}
.vpc-teaser-typing{display:inline-flex; gap:5px; align-items:center; height:1.35em}
.vpc-teaser-typing i{width:7px;height:7px;border-radius:50%;background:var(--wa,#25D366);animation:vpc-blink 1s infinite}
.vpc-teaser-typing i:nth-child(2){animation-delay:.15s}.vpc-teaser-typing i:nth-child(3){animation-delay:.3s}
.vpc-teaser.is-text .vpc-teaser-body{animation:vpc-fadein .25s ease both}
@keyframes vpc-pop{0%{transform:scale(.6) translateY(12px);opacity:0}100%{transform:none;opacity:1}}
@keyframes vpc-fadein{from{opacity:0}to{opacity:1}}
.no-anim .vpc-teaser,.no-anim .vpc-teaser.is-text .vpc-teaser-body{animation:none}
/* Bloqueo del scroll de la página con el chat abierto (iOS incluido) */
html.vpc-lock, html.vpc-lock body{overflow:hidden; height:100%}
html.vpc-lock body{position:fixed; left:0; right:0; width:100%}
html.vpc-lock body > :not(.vpc-panel){visibility:hidden}

@media (max-width:719px){
  /* Píldora flotante separada de los bordes (si tocara el borde, Safari tiñe su barra con el
     mismo negro y se funde). Borde neón verde animado como el "Comprar por chat" de la landing,
     brillo que respira y un rebote corto cada 6 s para llamar la atención. */
  .vpc-fab{
    left:14px; right:14px; bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    width:auto; height:auto; border-radius:999px; text-align:left;
    display:flex; align-items:center; gap:12px;
    padding:11px 16px 11px 12px;
    border:2px solid transparent;
    background:
      linear-gradient(var(--ink,#0B1F24), var(--ink,#0B1F24)) padding-box,
      conic-gradient(from var(--ssang), #A9F5C9, #5EE39A, #EFFFF5, #0FB3CE, #5EE39A, #A9F5C9) border-box;
    box-shadow:0 12px 30px rgba(11,31,36,.35), 0 0 22px rgba(37,211,102,.45);
    animation:ss-spin 2.8s linear infinite, vpc-glow 2.8s ease-in-out infinite, vpc-nudge 6s ease-in-out infinite;
  }
  .vpc-fab:hover{transform:none}
  .vpc-fab .vpc-shopi{width:44px; height:44px; flex:0 0 auto; animation:vpc-pulse 1.6s ease-in-out infinite}
  .vpc-fab .vpc-fab-txt{color:#fff}
  .vpc-fab .vpc-fab-ring,.vpc-fab .vpc-fab-dot{display:none}
  .vpc-fab .vpc-fab-txt{display:flex; flex-direction:column; flex:1; min-width:0; line-height:1.15}
  .vpc-fab .vpc-fab-txt b{font-size:.98rem; font-weight:900}
  .vpc-fab .vpc-fab-txt small{font-size:.76rem; font-weight:400; opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .vpc-fab .vpc-fab-go{display:block; font-size:1.8rem; line-height:1; color:var(--wa,#25D366); animation:vpc-point 1.4s ease-in-out infinite}
  .no-anim .vpc-fab,.no-anim .vpc-fab .vpc-shopi,.no-anim .vpc-fab .vpc-fab-go{animation:none}
  .vpc-teasers{right:14px; left:14px; bottom:calc(92px + env(safe-area-inset-bottom, 0px)); max-width:none; align-items:flex-end}
  .vpc-teasers-list{align-items:flex-end}
  .vpc-teaser{font-size:.9rem; max-width:88%}

  /* Ventana a pantalla completa: altura real del viewport (chat.js la ajusta con el teclado) */
  .vpc-panel{inset:0; bottom:auto; height:100dvh; border-radius:0; overscroll-behavior:contain}
  .vpc-panel.vpc-kb .vpc-chips,.vpc-panel.vpc-kb .vpc-paybar{display:none}  /* con teclado, espacio para el campo */
  .vpc-foot{display:none}  /* con teclado abierto cada píxel cuenta */
  .vpc-head{padding-top:calc(12px + env(safe-area-inset-top, 0px))}
  .vpc-log{overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
  .vpc-cards{overscroll-behavior-x:contain}
  .vpc-form{padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px))}
  .vpc-chips{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:10px}
  .vpc-chips::-webkit-scrollbar{display:none}
  .vpc-chip{flex:0 0 auto; white-space:nowrap}
  .vpc-panel .vpc-form input,.vpc-panel .vpc-phone input{font-size:16px}  /* evita el zoom de iOS al enfocar (más específico que la regla base) */
}

/* Barra de pago fija sobre el cajón de texto mientras hay un checkout */
.vpc-paybar{display:flex; align-items:center; gap:12px; padding:10px 16px; border-top:1px solid rgba(8,107,125,.12); background:var(--aqua,#CFF0F5)}
.vpc-paybar[hidden]{display:none}
.vpc-paybar-sum{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.vpc-paybar-sum b{font-size:1.05rem; color:var(--heading,#22809E)}
.vpc-paybar-pagui{font-size:.74rem; color:var(--brand-deep,#086B7D)}
.vpc-paybar-pagui b{font-size:.8rem; font-weight:900}
.vpc-paybar .vpc-pay{margin-left:auto; flex:0 0 auto; width:auto; padding:11px 18px; border:0; cursor:pointer; font:inherit; font-weight:700; color:#fff; background:var(--brand,#0FB3CE); border-radius:999px}

.vpc-panel{
  position:fixed; inset:0; z-index:950;
  display:flex; flex-direction:column;
  background:#fff; color:var(--n90,#1B1F22);
  box-shadow:0 20px 60px rgba(8,107,125,.25);
}
.vpc-panel[hidden]{display:none}
@media (min-width:720px){
  .vpc-panel{
    inset:auto 20px 20px auto; width:390px; height:min(640px, calc(100vh - 40px));
    border-radius:20px; overflow:hidden;
  }
}

.vpc-head{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:var(--ink,#0B1F24); color:#fff; position:relative; overflow:hidden;
}
.vpc-head::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(360px 200px at 92% 0%, rgba(37,211,102,.28), transparent 60%)}
.vpc-head > *{position:relative}
.vpc-head .vpc-shopi{width:40px; height:40px; flex:0 0 auto}
.vpc-head-by{font-weight:400; font-size:.8rem; opacity:.85; margin-left:4px}
.vpc-head b{display:block;font-size:1rem;line-height:1.1}
.vpc-head small{display:block;font-size:.78rem;color:#5EE39A}
.vpc-head .vpc-close{
  margin-left:auto; width:36px; height:36px; border-radius:50%; border:0;
  background:rgba(255,255,255,.2); color:#fff; font-size:1.3rem; line-height:1; cursor:pointer;
}
.vpc-note{display:none}  /* la frase "compras en el comercio, vana pay es tu forma de pago" vive en el pie del checkout */

.vpc-log{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth}
/* El texto del chat y los campos se pueden seleccionar y copiar (iOS incluido). */
.vpc-msg,.vpc-checkout,.vpc-card .vpc-body,.vpc-form input,.vpc-phone input,.vpc-quick-idbox input{-webkit-user-select:text; user-select:text; -webkit-touch-callout:default}
/* Hijos de una columna flex con scroll: los que tienen overflow propio (la fila
   de tarjetas) tienen min-height 0 y se aplastan cuando el log se llena. */
.vpc-log > *{flex-shrink:0}
.vpc-msg{max-width:88%; padding:10px 14px; border-radius:16px; font-size:.95rem; line-height:1.4; white-space:pre-wrap; word-break:break-word}
.vpc-msg.bot{align-self:flex-start; background:#F2F5F7; border-bottom-left-radius:6px}
.vpc-msg.me{align-self:flex-end; background:var(--ink,#0B1F24); color:#fff; border-bottom-right-radius:6px}
.vpc-msg .vpc-link{color:var(--brand-strong,#0C93AB); font-weight:700; text-decoration:underline}
.vpc-msg .vpc-link-cta{display:inline-block; margin-top:6px; padding:9px 14px; border-radius:999px; background:var(--brand,#0FB3CE); color:#fff; text-decoration:none}
.vpc-msg .vpc-link-cta:hover{background:var(--brand-strong,#0C93AB)}
.vpc-msg.sys{align-self:center; background:transparent; color:var(--n70,#5B6770); font-size:.8rem; padding:2px 8px}
.vpc-msg.err{align-self:center; background:#FDECEC; color:#9B1C1C; font-size:.85rem; display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.vpc-retry{background:#fff; border-color:#9B1C1C; color:#9B1C1C}
.vpc-typing{align-self:flex-start; display:inline-flex; gap:6px; align-items:center; color:var(--n70,#5B6770); font-size:.82rem; padding:4px 6px}
.vpc-typing i{width:7px;height:7px;border-radius:50%;background:var(--wa,#25D366);animation:vpc-blink 1s infinite}
.vpc-typing i:nth-child(2){animation-delay:.15s}.vpc-typing i:nth-child(3){animation-delay:.3s}
@keyframes vpc-blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

.vpc-cards{display:flex; gap:10px; overflow-x:auto; padding:2px 0 6px; scroll-snap-type:x mandatory; max-width:100%; min-height:270px}
.vpc-cards-list{min-height:0; overflow:visible}
.vpc-card{
  flex:0 0 168px; scroll-snap-align:start; border:1px solid rgba(8,107,125,.12); border-radius:14px;
  overflow:hidden; background:#fff; display:flex; flex-direction:column;
}
.vpc-card .vpc-img{aspect-ratio:4/5; background:var(--aqua,#CFF0F5); display:grid; place-items:center; overflow:hidden}
.vpc-cards-list{flex-direction:column}
.vpc-cards-list .vpc-card{flex:0 0 auto; flex-direction:row; width:100%}
.vpc-cards-list .vpc-card .vpc-img{width:120px; flex:0 0 120px; aspect-ratio:4/5; min-height:150px}
.vpc-cards-list .vpc-card .vpc-body{justify-content:center}
.vpc-card .vpc-img img{width:100%;height:100%;object-fit:cover}
.vpc-card .vpc-body{padding:8px 10px 10px; display:flex; flex-direction:column; gap:4px; flex:1}
.vpc-card .vpc-store{font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--brand-strong,#0C93AB)}
.vpc-card .vpc-title{font-size:.84rem; font-weight:700; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.vpc-card .vpc-price{font-weight:900; color:var(--heading,#22809E)}
.vpc-card .vpc-price-pagui b{font-weight:900; color:var(--heading,#22809E); font-size:1.02rem}
.vpc-card .vpc-price-pagui small{font-weight:700; font-size:.7rem; color:var(--brand-strong,#0C93AB); text-transform:lowercase}
.vpc-card .vpc-fullprice{font-size:.72rem; color:var(--n70,#5B6770)}
.vpc-cart-pagui{display:block; font-size:.78rem; color:var(--brand-deep,#086B7D)}
.vpc-cart-pagui b{font-weight:900}
.vpc-checkout .vpc-total-pagui{display:flex; justify-content:space-between; align-items:baseline; margin:-6px 0 12px; padding:8px 10px; border-radius:10px; background:var(--aqua,#CFF0F5); color:var(--brand-deep,#086B7D); font-size:.85rem}
.vpc-checkout .vpc-total-pagui b{font-weight:900; font-size:1rem}
.vpc-checkout .vpc-total-pagui small{font-weight:700; font-size:.72rem}
.vpc-card .vpc-opts{font-size:.72rem; color:var(--n70,#5B6770)}
.vpc-card .vpc-reason{font-size:.74rem; color:var(--n70,#5B6770); line-height:1.3}
.vpc-card button{
  margin-top:auto; border:1.5px solid var(--ink,#0B1F24); background:#fff; color:var(--ink,#0B1F24);
  border-radius:999px; padding:6px 10px; font:inherit; font-size:.8rem; font-weight:700; cursor:pointer;
}
.vpc-card button:hover{background:#E9FBF0; border-color:var(--wa,#25D366)}
.vpc-cards .vpc-card{cursor:pointer}
.vpc-cards .vpc-card:hover{box-shadow:0 8px 24px rgba(8,107,125,.16)}
.vpc-card.out .vpc-price{color:var(--n70,#5B6770)}

.vpc-merchants .vpc-card{flex:0 0 172px; text-decoration:none; color:inherit; display:flex; flex-direction:column}
.vpc-merchants .vpc-card:hover{box-shadow:0 8px 24px rgba(8,107,125,.16)}
.vpc-merchant-logo{
  flex:0 0 auto; height:78px; padding:12px 16px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:#fff; border-bottom:1px solid rgba(8,107,125,.08);
}
.vpc-merchant-logo img{display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
.vpc-merchants .vpc-body{padding:10px 12px 12px; gap:6px}
.vpc-merchants .vpc-title{font-size:.9rem}
.vpc-mods{display:flex; flex-wrap:wrap; gap:4px}
.vpc-mods span{font-size:.66rem; padding:2px 7px; border-radius:999px; background:#F2F5F7; color:var(--n70,#5B6770); white-space:nowrap}
.vpc-mods span.is-chat{background:#E6F7EC; color:#1E7B45; font-weight:700}
.vpc-merchant-cta{margin-top:auto; padding-top:6px; font-size:.8rem; font-weight:700; color:var(--brand-strong,#0C93AB)}
.vpc-merchant-cta::after{content:" \2192"}

.vpc-cart{align-self:stretch; display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:12px; background:var(--brand-10,#E7F7FA); font-size:.85rem}
.vpc-cart b{margin-left:auto}
.vpc-cart .vpc-thumbs{display:flex; gap:4px}
.vpc-cart .vpc-thumbs img{width:34px; height:34px; border-radius:8px; object-fit:cover; background:#fff}
.vpc-cart .vpc-thumbs .ico{width:20px; height:20px; fill:var(--brand-deep,#086B7D)}

.vpc-checkout{align-self:stretch; border:1.5px dashed var(--brand,#0FB3CE); border-radius:16px; padding:14px; background:#fff}
.vpc-checkout h4{margin:0 0 6px; font-size:.9rem}
.vpc-checkout .vpc-checkout-foot{margin-top:6px}
.vpc-checkout ul{list-style:none; margin:0 0 10px; padding:0; font-size:.85rem}
.vpc-checkout li{display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid rgba(8,107,125,.08)}
.vpc-checkout li img{width:36px; height:42px; border-radius:6px; object-fit:cover; background:var(--aqua,#CFF0F5); flex:0 0 auto}
.vpc-checkout li .vpc-line-title{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vpc-checkout li .vpc-line-price{margin-left:auto; font-weight:700; white-space:nowrap}
.vpc-checkout .vpc-total{display:flex; justify-content:space-between; font-weight:900; margin:6px 0 12px}
.vpc-checkout .vpc-pay{
  display:flex; justify-content:center; align-items:center; gap:8px; width:100%; padding:12px 16px;
  border-radius:999px; background:var(--brand,#0FB3CE); color:#fff; font-weight:700; text-decoration:none;
}
.vpc-checkout .vpc-pay:hover{background:var(--brand-strong,#0C93AB)}
.vpc-checkout .vpc-seller{padding:10px 0 12px; border-top:1px solid rgba(8,107,125,.12)}
.vpc-checkout .vpc-seller:first-of-type{border-top:0; padding-top:0}
.vpc-checkout .vpc-seller-name{font-weight:900; text-transform:uppercase; letter-spacing:.04em; font-size:.8rem; color:var(--brand-deep,#086B7D); margin-bottom:4px}
.vpc-phone{display:flex; flex-direction:column; gap:6px; margin:4px 0 10px; padding:12px; border-radius:12px; background:var(--brand-10,#E7F7FA)}
.vpc-phone label{font-size:.85rem; font-weight:700}
.vpc-phone label span{font-weight:400; color:var(--n70,#5B6770)}
.vpc-phone-row{display:flex; align-items:center; gap:6px}
.vpc-phone-cc{font-weight:700; color:var(--brand-deep,#086B7D)}
.vpc-phone input{flex:1; min-width:0; border:1.5px solid rgba(8,107,125,.2); border-radius:10px; padding:10px 12px; font:inherit; font-size:1rem; letter-spacing:.04em; background:#fff}
.vpc-phone input:focus{outline:none; border-color:var(--brand,#0FB3CE)}
.vpc-phone small{font-size:.72rem; color:var(--n70,#5B6770); line-height:1.35}
.vpc-phone .vpc-pay{margin-top:4px}
.vpc-phone-err{font-size:.8rem; color:#9B1C1C}
.vpc-paybtns{display:flex; flex-direction:column; gap:8px; margin-bottom:8px}
/* Los display propios ganan al [hidden] del navegador: se hace explícito. */
.vpc-phone[hidden],.vpc-paybtns[hidden],.vpc-phone-err[hidden],.vpc-teasers[hidden],.vpc-panel[hidden]{display:none}
.vpc-checkout small{display:block; margin-top:8px; font-size:.74rem; color:var(--n70,#5B6770); line-height:1.35}

.vpc-quick{align-self:stretch; border:1px solid rgba(37,211,102,.35); background:#F4FDF7; border-radius:14px; padding:10px 12px; display:flex; flex-direction:column; gap:8px}
.vpc-quick-row{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.82rem; color:#1E7B45; font-weight:700}
.vpc-quick-id{border:0; background:var(--ink,#0B1F24); color:#fff; border-radius:999px; padding:7px 12px; font:inherit; font-size:.8rem; font-weight:700; cursor:pointer}
.vpc-quick-q{font-size:1rem; font-weight:900; color:var(--ink,#0B1F24)}
.vpc-quick-yn{display:flex; gap:8px}
.vpc-quick-yn button{flex:1; border:0; border-radius:999px; padding:11px 12px; font:inherit; font-size:.9rem; font-weight:700; cursor:pointer}
.vpc-quick-yes{background:var(--ink,#0B1F24); color:#fff}
.vpc-quick-no{background:#fff; color:var(--ink,#0B1F24); box-shadow:inset 0 0 0 1.5px rgba(11,31,36,.25)}
.vpc-quick-skip{border:0; background:none; color:var(--n70,#5B6770); font:inherit; font-size:.8rem; cursor:pointer; text-decoration:underline; align-self:flex-start; padding:0}
.vpc-quick-idbox label{font-size:.85rem; font-weight:700}
[hidden].vpc-quick-yn,[hidden].vpc-quick-skip{display:none}
.vpc-quick-opts{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.vpc-quick-opts .vpc-chip{padding:5px 10px}
.vpc-quick-known{font-size:.82rem; color:var(--n70,#5B6770)}
.vpc-quick-edit{border:0; background:none; color:var(--brand-strong,#0C93AB); font:inherit; font-size:.8rem; font-weight:700; cursor:pointer; text-decoration:underline}
.vpc-quick-idbox{display:flex; flex-direction:column; gap:6px}
.vpc-quick-idbox[hidden]{display:none}
.vpc-quick-idbox input{flex:1; min-width:0; border:1.5px solid rgba(8,107,125,.2); border-radius:10px; padding:9px 12px; font:inherit; font-size:1rem; background:#fff}
.vpc-quick-idbox small{font-size:.72rem; color:var(--n70,#5B6770)}
.vpc-quick-idbox .vpc-pay{width:auto; align-self:flex-start; padding:9px 16px; border:0; cursor:pointer; font:inherit; font-weight:700; color:#fff; background:var(--brand,#0FB3CE); border-radius:999px}
.vpc-chips{display:flex; gap:8px; flex-wrap:wrap; padding:0 16px 8px}
.vpc-chips:empty{display:none}
.vpc-chip{border:1px solid rgba(11,31,36,.22); background:#fff; border-radius:999px; padding:6px 12px; font:inherit; font-size:.8rem; cursor:pointer; color:var(--ink,#0B1F24)}
.vpc-chip:hover{background:#E9FBF0; border-color:var(--wa,#25D366)}

.vpc-form{display:flex; gap:8px; padding:12px 16px 16px; border-top:1px solid rgba(8,107,125,.08); background:#fff}
.vpc-form input{
  flex:1; min-width:0; border:1.5px solid rgba(8,107,125,.18); border-radius:999px; padding:11px 16px;
  font:inherit; font-size:.95rem; outline:none;
}
.vpc-form input:focus{border-color:var(--wa,#25D366); box-shadow:0 0 0 3px rgba(37,211,102,.18)}
.vpc-form button{
  border:0; border-radius:999px; padding:0 18px; background:var(--ink,#0B1F24); color:#fff;
  font:inherit; font-weight:700; cursor:pointer;
}
.vpc-form button:hover{background:#163038}
.vpc-form button:disabled{opacity:.5; cursor:default}
.vpc-foot{margin:0; padding:0 16px 10px; font-size:.7rem; color:var(--n70,#5B6770); text-align:center}


/* ---- hoja de producto (se abre dentro del panel al tocar una tarjeta) ---- */
.vpc-sheet{position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; background:#fff; color:var(--n90,#1B1F22);
  animation:vpc-sheet-in .22s ease-out; -webkit-user-select:text; user-select:text}
.vpc-sheet.vpc-sheet-out{animation:vpc-sheet-out .2s ease-in forwards}
@keyframes vpc-sheet-in{from{transform:translateY(24px); opacity:0} to{transform:none; opacity:1}}
@keyframes vpc-sheet-out{to{transform:translateY(24px); opacity:0}}
.vpc-sheet-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid rgba(8,107,125,.1); background:#fff}
@media (max-width:719px){ .vpc-sheet-head{padding-top:calc(10px + env(safe-area-inset-top, 0px))} }
.vpc-sheet-back{border:0; background:none; font:inherit; font-weight:700; color:var(--ink,#0B1F24); padding:8px 6px; cursor:pointer; -webkit-tap-highlight-color:transparent}
.vpc-sheet-store{font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--brand-strong,#0C93AB)}
.vpc-sheet-body{flex:1; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
.vpc-gallery{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; aspect-ratio:1/1; background:var(--aqua,#CFF0F5); scrollbar-width:none; -webkit-overflow-scrolling:touch}
.vpc-gallery::-webkit-scrollbar{display:none}
.vpc-gallery img{flex:0 0 100%; width:100%; height:100%; object-fit:cover; scroll-snap-align:start; scroll-snap-stop:always}
.vpc-dots{display:flex; justify-content:center; gap:6px; min-height:14px; padding-top:8px}
.vpc-dots i{width:6px; height:6px; border-radius:50%; background:rgba(11,31,36,.2)}
.vpc-dots i.on{background:var(--ink,#0B1F24)}
.vpc-sheet-info{padding:6px 16px 20px; display:flex; flex-direction:column; gap:10px}
.vpc-sheet-title{margin:0; font-size:1.05rem; line-height:1.3}
.vpc-sheet-price .vpc-price{font-weight:900; color:var(--heading,#22809E); font-size:1.15rem}
.vpc-sheet-price .vpc-price-pagui b{font-weight:900; color:var(--heading,#22809E); font-size:1.25rem}
.vpc-sheet-price .vpc-price-pagui small{font-weight:700; font-size:.78rem; color:var(--brand-strong,#0C93AB)}
.vpc-sheet-price .vpc-fullprice{font-size:.8rem; color:var(--n70,#5B6770)}
.vpc-sheet-price .vpc-from{font-weight:400; font-size:.75rem; color:var(--n70,#5B6770)}
.vpc-sheet-price .vpc-out{font-weight:700; color:#B4232C}
.vpc-optgroup{display:flex; flex-direction:column; gap:6px}
.vpc-optname{font-size:.78rem; color:var(--n70,#5B6770)}
.vpc-optname b{color:var(--n90,#1B1F22)}
.vpc-optvals{display:flex; flex-wrap:wrap; gap:8px}
.vpc-optchip{border:1.5px solid rgba(11,31,36,.25); background:#fff; color:var(--ink,#0B1F24); border-radius:999px; padding:7px 13px; font:inherit; font-size:.84rem; cursor:pointer; -webkit-tap-highlight-color:transparent}
.vpc-optchip.sel{background:var(--ink,#0B1F24); color:#fff; border-color:var(--ink,#0B1F24)}
.vpc-optchip.off{opacity:.42; text-decoration:line-through}
.vpc-sheet-desc{font-size:.88rem; line-height:1.5; color:var(--n80,#3A444B); white-space:pre-line}
.vpc-sheet-desc.clamp{display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.vpc-sheet-toggle{align-self:flex-start; border:0; background:none; padding:0; font:inherit; font-size:.84rem; font-weight:700; color:var(--brand-strong,#0C93AB); cursor:pointer; margin-top:-6px}
.vpc-sheet-more{display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--n70,#5B6770)}
.vpc-sheet-more[hidden]{display:none}
.vpc-sheet-more i{width:6px; height:6px; border-radius:50%; background:var(--wa,#25D366); animation:vpc-blink 1s infinite}
.vpc-sheet-err{font-size:.84rem; color:#B4232C; background:#FDECEE; border-radius:10px; padding:8px 10px}
.vpc-sheet-err[hidden]{display:none}
.vpc-sheet-foot{display:flex; gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top:1px solid rgba(8,107,125,.1); background:#fff}
.vpc-sheet-foot button{flex:1; border-radius:999px; padding:12px 14px; font:inherit; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent}
.vpc-sheet-ask{flex:0 0 auto !important; border:1.5px solid var(--ink,#0B1F24); background:#fff; color:var(--ink,#0B1F24)}
.vpc-sheet-add{border:0; background:var(--ink,#0B1F24); color:#fff}
.vpc-sheet-add:disabled{background:rgba(11,31,36,.35); cursor:default}


/* ---- Shopi animado ---- */
/* Color por etapa de compra: verde mientras acompaña, cyan de vana con algo en el carrito,
   teal (color de pago) al llegar al checkout. */
html[data-vpc-stage="cart"]{--vpc-sh:#18CAE7}
html[data-vpc-stage="pay"]{--vpc-sh:#0FB3CE}
.vpc-shopi{--sh:var(--vpc-sh, #25D366); display:block; overflow:visible}
.vpc-shopi .sh-bag{fill:var(--sh); transition:fill .7s ease}
.vpc-shopi .sh-handle{stroke:var(--sh); transition:stroke .7s ease}
.vpc-shopi .sh-eye{fill:#0B1F24}
.vpc-shopi .sh-eyes,.vpc-shopi .sh-look,.vpc-shopi .sh-eye{transform-box:fill-box; transform-origin:center}
/* Reposo: parpadeo cada ~4 s y una mirada de reojo cada ~7 s (desfasados para que no coincidan) */
.vpc-shopi .sh-eyes{animation:sh-blink 4.2s ease-in-out infinite}
.vpc-shopi .sh-look{animation:sh-glance 7s ease-in-out infinite 1.3s}
@keyframes sh-blink{0%,92%,100%{transform:scaleY(1)} 95%{transform:scaleY(.08)}}
@keyframes sh-glance{0%,72%,100%{transform:translateX(0)} 78%,86%{transform:translateX(3px)} 90%,96%{transform:translateX(-2px)}}
/* Pensando: los ojitos van de lado a lado */
.vpc-shopi.thinking .sh-look{animation:sh-think 1.4s ease-in-out infinite}
@keyframes sh-think{0%,100%{transform:translateX(-3px)} 50%{transform:translateX(3px)}}
/* Feliz (agregar, abrir, checkout): brinco con ojitos entrecerrados */
.vpc-shopi.happy{animation:sh-bounce .9s cubic-bezier(.34,1.56,.64,1) 2}
.vpc-shopi.happy .sh-eye{animation:sh-squint .9s ease-in-out 2}
@keyframes sh-bounce{0%,100%{transform:translateY(0) rotate(0)} 30%{transform:translateY(-4px) rotate(-6deg)} 60%{transform:translateY(-2px) rotate(5deg)}}
@keyframes sh-squint{0%,100%{transform:scaleY(1)} 40%,70%{transform:scaleY(.45) translateY(3px)}}
.no-anim .vpc-shopi *{animation:none !important}
.no-anim .vpc-shopi{animation:none !important}