body.dark{
  --cream:#130a10;

  --card:#1c1118;
  --border:#2d1a28;

  --g1:#1c1118;
  --g3:#2d1a28;

  --dark:#f0daea;

  --text:#f0daea;
  --text2:#b08aa0;
  --text3:#7a5568;

  --sh:
    0 2px 12px rgba(0,0,0,.45),
    0 12px 30px rgba(0,0,0,.35);

  --sh2:
    0 12px 26px rgba(0,0,0,.5),
    0 32px 70px rgba(208,26,125,.16);

  color-scheme:dark
}

body.dark .tabs-bar{
  background:#1c1118
}



/* Tabs: ícono más grande en modo 3D */
body.mode-3d .tb img {
  width: 22px !important; height: 22px !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.2));
}
body.mode-3d .tb.on { box-shadow: 0 2px 12px rgba(0,0,0,.28); }

/* slabel: ícono "Ofertas generales" */
body.mode-3d .slabel h2 img {
  width: 22px !important; height: 22px !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.18));
}


*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
*:focus{outline:none}
/* Solo inputs/textareas reciben focus-visible, no botones ni imágenes */
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
::selection{background:rgba(208,26,125,.18);color:inherit}
*{user-select:none;-webkit-user-select:none}
img{-webkit-user-drag:none;user-drag:none;pointer-events:auto}
button,a{user-select:none;-webkit-user-select:none}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
     background:var(--cream);color:var(--text);overflow-x:hidden;min-height:100vh;
     display:flex;flex-direction:column}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--g3);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--g6)}

/* ══════════════════════════════════════════
   OFFLINE
══════════════════════════════════════════ */
#offlineBanner{position:fixed;top:0;left:0;right:0;z-index:9999;
  background:#111;color:#fff;font-size:.73rem;font-weight:600;
  padding:5px 16px;text-align:center;align-items:center;justify-content:center;gap:6px;
  border-bottom:2px solid var(--pink);
  transform:translateY(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex}
#offlineBanner.show{transform:translateY(0)}
#offlineBanner.restored{background:#16a34a}

/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */
header{
  position:sticky;top:0;z-index:100;height:var(--hh);
  background:linear-gradient(100deg,#C0176A 0%,#E91E8C 100%);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;
  box-shadow:0 4px 24px rgba(192,23,106,.35),0 1px 0 rgba(255,255,255,.12) inset
}
header::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  pointer-events:none
}
.h-left{display:flex;align-items:center;gap:8px;flex-shrink:0}
.h-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.h-pedidos-btn{display:none;text-decoration:none;align-items:center;gap:6px;
  height:34px;padding:0 12px;border-radius:10px;
  background:rgba(255,255,255,.12);color:#fff;
  font-size:12px;font-weight:700;white-space:nowrap;
  transition:all var(--ease);
  border:1px solid rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)
}
.h-pedidos-btn:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.25);transform:translateY(-1px)}
.h-pedidos-btn svg{width:15px;height:15px;flex-shrink:0}
@media(min-width:600px){.h-pedidos-btn{display:flex}}
.ib{
  width:36px;height:36px;border:none;cursor:pointer;
  background:rgba(255,255,255,.1);border-radius:10px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:all var(--ease);
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)
}
.ib:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.22);transform:scale(1.07)}
.ib:active{transform:scale(.93)}
.ib svg{width:18px;height:18px}
/* Logo */
.logo-wrap{display:flex;align-items:center;text-decoration:none;position:absolute;left:50%;transform:translateX(-50%)}
.logo-img{height:34px;width:auto;max-width:190px;object-fit:contain}
.logo-fallback{
  display:none;color:#fff;font-weight:900;font-size:15px;letter-spacing:-.3px;
  display:flex;align-items:center;gap:8px
}
.logo-fallback .lf-badge{
  background:var(--yellow);color:var(--pink-d);
  font-size:9px;font-weight:900;padding:2px 7px;border-radius:20px;letter-spacing:.5px;text-transform:uppercase
}
/* Nav desktop */
.dnav{display:none;gap:6px;align-items:center;margin-left:auto}
@media(min-width:768px){.dnav{display:flex}}
.nav-link{
  color:rgba(255,255,255,.85);text-decoration:none;font-size:12px;font-weight:700;
  padding:6px 11px;border-radius:8px;transition:background var(--ease),color var(--ease);
  cursor:pointer;border:none;background:none
}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.16)}

/* ══════════════════════════════════════════
   PROMO CAROUSEL — banners + promos tarjeta
   Mismo comportamiento para todos los slides
══════════════════════════════════════════ */
.promo-section{display:none;background:var(--g1);border-bottom:1px solid var(--border)}
.promo-section.visible{display:block;max-height:400px;opacity:1;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .28s ease,padding .28s ease}
body.search-open .promo-section.visible{max-height:0;opacity:0;padding-top:0;padding-bottom:0;border-bottom-color:transparent}
/* Layout con historia: flex row */
.promo-inner{display:flex;gap:8px;padding:10px 8px 8px;align-items:stretch}
/* Historia slot (9:16) */
.historia-slot{
  flex-shrink:0;border-radius:14px;overflow:hidden;cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.18);position:relative;
  background:#1a1a1a;
}
.historia-slot img{width:100%;height:100%;object-fit:cover;display:block}
.historia-slot-tag{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,.65));
  padding:20px 6px 6px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.historia-slot-tag span{font-size:9px;font-weight:800;color:rgba(255,255,255,.85);text-transform:uppercase;letter-spacing:.5px;text-align:center}
.historia-slot-bar{
  position:absolute;top:0;left:0;right:0;height:3px;
  background:rgba(255,255,255,.3);border-radius:0 0 0 0;overflow:hidden;
}
.historia-slot-bar-fill{height:100%;background:#fff;border-radius:2px;transition:width 1s linear}
/* El carousel recorta el peek */
.promo-carousel{position:relative;overflow:hidden;flex:1;min-width:0}
/* En modo historia: sin padding en el track (el promo-inner ya da el spacing) */
.promo-section.has-historia .promo-track{padding:0}
/* Sin historia: layout original */
.promo-section:not(.has-historia) .promo-inner{padding:0}
.promo-section:not(.has-historia) .promo-carousel{flex:none;width:100%}
/* Pista: gap + padding lateral dan el efecto de peek */
.promo-track{
  display:flex;gap:12px;
  padding:10px 20px;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
  will-change:transform
}
/* ── HISTORIA MODAL ── */
.historia-modal{
  position:fixed;inset:0;z-index:3000;background:#000;
  display:none;align-items:center;justify-content:center;
  flex-direction:column;
}
.historia-modal.on{display:flex}
.historia-modal-img{
  max-width:100%;max-height:100dvh;max-height:100vh;
  object-fit:contain;display:block;
}
.historia-modal-top{
  position:absolute;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px;
  background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent);
  pointer-events:none;
}
.historia-modal-top>*{pointer-events:auto}
.historia-modal-countdown{
  font-size:12px;font-weight:800;color:rgba(255,255,255,.85);
  display:flex;align-items:center;gap:5px;
}
.historia-modal-countdown svg{width:13px;height:13px;flex-shrink:0}
.historia-modal-close{
  width:36px;height:36px;border-radius:9px;
  background:rgba(255,255,255,.18);border:none;color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.historia-modal-close svg{width:16px;height:16px}
/* Cada slide ES la card: border-radius, shadow, overflow */
.promo-slide{
  flex-shrink:0;width:100%;
  border-radius:14px;overflow:hidden;cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.15);
  transition:transform .2s;
  position:relative
}
.promo-slide:active{transform:scale(.98)}
/* Desktop: 3 slides por vista */
@media(min-width:768px){
  .promo-slide{width:calc(33.333% - 8px)}
}
/* Imagen de banner */
.promo-slide>img{
  width:100%;aspect-ratio:2/1;object-fit:cover;display:block
}
@media(min-width:768px){.promo-slide>img{aspect-ratio:2/1}}
/* Banner más vertical que el recuadro: paneo lento "pin-pon" arriba↔abajo
   en vez de recorte fijo al centro. Solo corre mientras el slide está a la vista. */
.promo-slide>img.promo-img-pan{
  animation:promoPanY var(--pan-dur,5s) ease-in-out infinite alternate;
  animation-play-state:paused;
}
.promo-slide>img.promo-img-pan.in-view{
  animation-play-state:running;
}
@keyframes promoPanY{
  0%,6%{object-position:50% 0%}
  94%,100%{object-position:50% 100%}
}
@media(prefers-reduced-motion:reduce){
  .promo-slide>img.promo-img-pan{animation:none}
}
/* ── BANNER LIGHTBOX ── */
.banner-lb{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,0);display:none;
  align-items:center;justify-content:center;padding:20px;cursor:zoom-out;
  transition:background .28s ease}
.banner-lb.on{display:flex;background:rgba(0,0,0,.88)}
.banner-lb-img{max-width:100%;max-height:82vh;max-height:82dvh;border-radius:14px;
  object-fit:contain;box-shadow:0 24px 64px rgba(0,0,0,.5);
  transform:scale(.88);opacity:0;
  transition:transform .3s cubic-bezier(.2,0,.2,1),opacity .28s ease;
  pointer-events:none}
.banner-lb.on .banner-lb-img{transform:scale(1);opacity:1}
.banner-lb-share{position:absolute;top:16px;right:60px;width:36px;height:36px;
  border-radius:8px;border:none;background:rgba(255,255,255,.18);cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s}
.banner-lb-share:hover{background:rgba(255,255,255,.32)}
.banner-lb-share svg{width:16px;height:16px}
.banner-lb-dl{position:absolute;top:16px;right:104px;width:36px;height:36px;
  border-radius:8px;border:none;background:rgba(255,255,255,.18);cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(4px);transition:background .2s;text-decoration:none}
.banner-lb-dl:hover{background:rgba(255,255,255,.32)}
.banner-lb-dl svg{width:16px;height:16px}
.banner-lb-close{position:absolute;top:16px;right:16px;width:36px;height:36px;
  border-radius:9px;background:rgba(255,255,255,.15);border:none;color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .15s}
.banner-lb-close:hover{background:rgba(255,255,255,.28)}
.banner-lb-close svg{width:16px;height:16px}
/* Placeholder banner (cuando no hay imagen) */
.promo-slide-ph{
  width:100%;aspect-ratio:2/1;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(.85rem,2vw,1.35rem);font-weight:900;
  color:rgba(255,255,255,.55);letter-spacing:1px;text-transform:uppercase
}
@media(min-width:768px){.promo-slide-ph{aspect-ratio:2/1}}
/* Card de tarjeta de pago */
.promo-tarj{
  width:100%;aspect-ratio:2/1;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  padding:16px 24px;position:relative;overflow:hidden
}
@media(min-width:768px){.promo-tarj{aspect-ratio:2/1}}
.promo-tarj::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,#1e1b4b 0%,#3730a3 100%)
}
.promo-tarj.visa::before      {background:linear-gradient(135deg,#1a365d,#2563eb)}
.promo-tarj.mastercard::before{background:linear-gradient(135deg,#7f1d1d,#dc2626)}
.promo-tarj.naranja::before   {background:linear-gradient(135deg,#7c2d12,#ea580c)}
.promo-tarj.cabal::before     {background:linear-gradient(135deg,#14532d,#16a34a)}
.promo-tarj .tc-logo  {position:absolute;top:10px;left:12px;z-index:2;opacity:.85}
.promo-tarj .tc-brand {
  position:relative;z-index:1;font-size:9px;font-weight:800;
  color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:1px;margin-bottom:3px
}
.promo-tarj .tc-title {
  position:relative;z-index:1;font-size:13px;font-weight:900;
  color:#fff;line-height:1.25;text-shadow:0 1px 4px rgba(0,0,0,.3)
}
.promo-tarj .tc-sub   {
  position:relative;z-index:1;font-size:10px;
  font-weight:600;color:rgba(255,255,255,.7);margin-top:3px
}
.promo-tarj .tc-badge {
  position:absolute;top:10px;right:10px;z-index:2;
  background:var(--yellow);color:#111;
  font-size:11px;font-weight:900;padding:4px 9px;border-radius:20px;letter-spacing:-.3px
}
/* Flechas (ocultas en móvil pequeño) */
.promo-prev,.promo-next{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  border:none;color:#fff;cursor:pointer;
  width:34px;height:34px;border-radius:9px;z-index:3;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--ease)
}
.promo-prev{left:6px} .promo-next{right:6px}
.promo-prev:hover,.promo-next:hover{background:rgba(0,0,0,.5)}
@media(max-width:500px){.promo-prev,.promo-next{display:none}}
/* Dots debajo */
.promo-dots{
  display:flex;justify-content:center;gap:5px;padding:8px 0 10px
}
.promo-dot{
  width:18px;height:4px;border-radius:2px;border:none;padding:0;cursor:pointer;
  background:var(--g3);transition:all .25s
}
.promo-dot.on{background:var(--pink);width:26px}

/* ══════════════════════════════════════════
   FILTER TABS (scrollable, same pill style)
══════════════════════════════════════════ */
/* ── BARRA DE BÚSQUEDA — desliza desde el header ── */
.search-bar{
  position:sticky;top:var(--hh);z-index:95;
  background:transparent;border-bottom:1px solid transparent;
  max-height:0;overflow:hidden;
  transition:max-height .24s cubic-bezier(.4,0,.2,1),border-color .24s,background .24s;
  box-shadow:none
}
body.search-open .search-bar{background:var(--card);box-shadow:0 2px 8px rgba(0,0,0,.05)}
body.search-open .search-bar{max-height:54px;border-bottom-color:var(--border)}
.search-bar-inner{display:flex;align-items:center;gap:8px;padding:8px 14px}
.tabs-search-inp{
  flex:1;border:1.5px solid var(--border);border-radius:12px;
  padding:8px 14px;font-size:13px;background:var(--card);
  color:var(--text);outline:none;-webkit-tap-highlight-color:transparent;
  transition:border-color .15s,box-shadow .15s,background .15s;
  -webkit-appearance:none;appearance:none
}
.tabs-search-inp:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(208,26,125,.1);background:#fff}
.tabs-search-inp:focus-visible{outline:none}
body.dark .tabs-search-inp:focus{background:var(--g1)}
/* Evitar ring de focus nativo en iOS/Safari */
@supports (-webkit-touch-callout:none){
  .tabs-search-inp:focus{box-shadow:none;border-color:var(--pink)}
}
.tabs-search-cancel{
  flex-shrink:0;font-size:13px;font-weight:700;
  color:var(--pink);background:none;border:none;cursor:pointer;padding:4px 6px;
  opacity:.85;transition:opacity .15s
}
.tabs-search-cancel:hover{opacity:1}
/* Tabs se desplazan debajo de la barra de búsqueda cuando está abierta */
.tabs-bar{
  background:var(--g1);position:sticky;top:var(--hh);z-index:90;
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:top .24s cubic-bezier(.4,0,.2,1),max-height .35s cubic-bezier(.4,0,.2,1),opacity .28s ease,padding .28s ease,border-color .28s ease;
  max-height:80px;opacity:1;overflow:hidden
}
body.search-open .tabs-bar{
  max-height:0;opacity:0;padding-top:0;padding-bottom:0;border-bottom-color:transparent;box-shadow:none
}
.tabs-bar-row{display:flex;align-items:center;position:relative}
/* Grid de resultados de búsqueda — no estira las cards */
.p-grid-search{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,160px));
  gap:10px;justify-content:start
}
@media(min-width:480px){.p-grid-search{grid-template-columns:repeat(auto-fill,minmax(140px,170px))}}
/* Fondo con patrón sutil cuando hay espacio vacío (búsqueda) */
.search-results-bg{
  min-height:60vh;
  background-image:radial-gradient(circle,var(--border) 1px,transparent 1px);
  background-size:22px 22px;
  background-position:0 0;
  padding:16px;border-radius:0 0 var(--r) var(--r)
}

.tabs-inner{
  overflow-x:auto;scrollbar-width:none;
  padding:10px 14px;
  display:flex;align-items:center;
  flex:1;min-width:0
}
.tb-search-btn{
  flex-shrink:0;margin-left:0;margin-right:8px;
  width:34px;height:34px;border-radius:10px;
  border:none;background:none;color:var(--text2);
  display:none;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s,color .15s
}
.tb-search-btn:hover{
  background:var(--g3);color:var(--text)
}
@media(min-width:768px){
  .tabs-inner{justify-content:center}
}
.tabs-inner::-webkit-scrollbar{display:none}
.tab-sw{
  display:flex;gap:4px;width:max-content;
  background:var(--card);border-radius:var(--r);padding:4px;
  box-shadow:0 1px 4px rgba(0,0,0,.07)
}
@media(max-width:767px){
  .tabs-inner{overflow-x:hidden;padding:8px 10px}
  .tab-sw{width:100%}
  .tb{
    flex:1 1 0;justify-content:center;min-width:0;overflow:hidden;
    transition:flex-grow .42s cubic-bezier(.4,0,.2,1),background var(--ease),color var(--ease),box-shadow var(--ease)
  }
  .tb.on{flex-grow:3}
}
.tb{
  flex-shrink:0;padding:8px 10px;border:none;background:transparent;cursor:pointer;
  font-size:12.5px;font-weight:700;color:var(--text2);
  border-radius:calc(var(--r) - 2px);
  transition:background var(--ease),color var(--ease),transform var(--ease),box-shadow var(--ease),gap .28s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;display:flex;align-items:center;gap:5px
}
/* Label: base siempre visible (desktop lo hereda) */
.tb-label{display:inline-block;white-space:nowrap;vertical-align:middle}
/* Mobile: max-width:0 saca el texto del layout (ícono centrado),
   snap instantáneo al activar, solo opacity transiciona */
@media(max-width:767px){
  .tb{gap:0;background:var(--g2,rgba(0,0,0,.04))}
  .tb.on{gap:5px}
  .tb-label{opacity:0;max-width:0;overflow:hidden;transition:opacity .2s ease-in-out}
  .tb.on .tb-label{opacity:1;max-width:120px;transition:opacity .2s ease-in-out .18s}
}
@media(min-width:768px){
  .tb-label{display:inline;opacity:1;transition:none}
  .tb{padding:8px 14px}
}
.tb:hover:not(.on){color:var(--pink);background:var(--pink-l);transform:translateY(-2px);box-shadow:0 3px 10px rgba(0,0,0,.08)}
.tb:active:not(.on){transform:scale(.95) translateY(0)}
.tb.on{background:var(--cat-grad,linear-gradient(120deg,var(--pink-d),var(--pink)));color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.tb svg{width:14px;height:14px;flex-shrink:0}


/* Icon bounce */
@keyframes ico-bounce{
  0%,100%{transform:translateY(0)}
  35%{transform:translateY(-6px)}
  65%{transform:translateY(-2px)}
}
.cat-banner:hover .cat-banner-ico{animation:ico-bounce .5s ease}
@media(pointer:coarse){
  .cat-banner:active .cat-banner-ico{animation:ico-bounce .45s ease}
}

.cat-carne{background:linear-gradient(120deg,#b91c1c,#ef4444)}
.cat-verdura{background:linear-gradient(120deg,#15803d,#22c55e)}
.cat-fruta{background:linear-gradient(120deg,#b45309,#f59e0b)}
.cat-lacteos{background:linear-gradient(120deg,#1d4ed8,#60a5fa)}
.cat-limpieza{background:linear-gradient(120deg,#6d28d9,#a78bfa)}
.cat-pan{background:linear-gradient(120deg,#9a3412,#f97316)}
.cat-descartables{background:linear-gradient(120deg,#0e7490,#22d3ee)}

/* ══════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════ */
/* ── Skeletons ── */
@keyframes sk-sh{0%{background-position:-200% center}100%{background-position:200% center}}
.sk{
  background:linear-gradient(90deg,#e4e4e4 25%,#f0f0f0 50%,#e4e4e4 75%);
  background-size:200% 100%;
  animation:sk-sh 1.4s ease-in-out infinite;
  border-radius:8px
}
body.dark .sk{
  background:linear-gradient(90deg,#251828 25%,#33203a 50%,#251828 75%);
  background-size:200% 100%
}
.sk-card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.sk-card-img{aspect-ratio:1;width:100%}
.sk-card-body{padding:8px 9px 10px;display:flex;flex-direction:column;gap:6px}
.sk-line{height:11px;border-radius:6px}
.sk-pill{height:23px;border-radius:999px;margin-top:2px}

.empty{
  text-align:center;padding:60px 20px;color:var(--text2);
  grid-column:1/-1
}
.empty svg{opacity:.12;margin-bottom:14px}
.empty h3{font-size:1rem;font-weight:700;margin-bottom:5px}
.empty p{font-size:.84rem;color:var(--text3)}

/* ══════════════════════════════════════════
   DOWNLOAD BUTTON
══════════════════════════════════════════ */
.dl-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:22px auto 0;padding:11px 32px;
  background:var(--g1);border:1.5px solid var(--border);color:var(--text2);
  border-radius:var(--r);font-size:13px;font-weight:700;cursor:pointer;
  transition:all var(--ease)
}
.dl-btn svg{width:15px;height:15px}
.dl-btn:hover{background:var(--pink);color:#fff;border-color:var(--pink)}
.dl-btn:active{transform:scale(.96)}
.dl-btn:disabled{opacity:.5;pointer-events:none}

/* ══════════════════════════════════════════
   SHARE SHEET
══════════════════════════════════════════ */
.sh-ov{position:fixed;inset:0;z-index:2100;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.sh-ov.on{opacity:1;visibility:visible}
.sh-sheet{
  position:fixed;bottom:0;left:0;right:0;z-index:2101;
  background:var(--card);border-radius:24px 24px 0 0;
  box-shadow:0 -8px 40px rgba(0,0,0,.18);
  transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  padding-bottom:env(safe-area-inset-bottom,0);
  border-top:1px solid rgba(255,255,255,.5)
}
body.dark .sh-sheet{border-top-color:rgba(255,255,255,.06)}
@media(min-width:768px){
  .sh-sheet{left:50%;right:auto;width:380px;border-radius:20px;transform:translateX(-50%) translateY(calc(100% + 20px));box-shadow:0 12px 48px rgba(0,0,0,.2)}
}
.sh-sheet.on{transform:translateY(0)}
@media(min-width:768px){.sh-sheet.on{transform:translateX(-50%) translateY(0)}}
.sh-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px}
.sh-hd span{font-size:15px;font-weight:800;color:var(--text)}
.sh-x{width:32px;height:32px;background:var(--g1);border:none;cursor:pointer;color:var(--text2);border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.sh-x:hover{background:var(--border);color:var(--text)}
.sh-x svg{width:16px;height:16px}
.sh-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px 18px 20px}
.sh-opt{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;background:var(--g1);border:none;border-radius:14px;cursor:pointer;transition:all var(--ease)}
.sh-opt:hover{background:var(--border);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.sh-opt:active{transform:scale(.96)}
.sh-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.sh-ico svg{width:20px;height:20px}
.sh-ico.wa{background:#25D366;color:#fff}
/* Antes usaba --g3 (gris de fondo, no de marca): en light --g3 es un gris
   MUY claro (#E5E7EB) con el ícono blanco encima, así que quedaba casi
   invisible — "el botón gris, el ícono blanco, en light queda feo" (usuario
   MV, 2026-09-15). Magenta de marca (--pink) en vez de gris: consistente
   con el resto de los íconos de esta fila, que ya usan su color real
   (WhatsApp verde, Facebook azul) en vez de un gris neutro. */
.sh-ico.cp{background:var(--pink);color:#fff}
.sh-ico.fb{background:#1877F2;color:#fff}
.sh-ico.ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff}
.sh-name{font-size:11px;font-weight:700;color:var(--text)}

/* ══════════════════════════════════════════
   SETTINGS MODAL
══════════════════════════════════════════ */
.stg-ov{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.stg-ov.on{opacity:1;visibility:visible}
.stg-box{background:var(--card);border-radius:20px;width:calc(100% - 32px);max-width:350px;box-shadow:var(--sh2);transform:scale(.9);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow:hidden}
.stg-ov.on .stg-box{transform:scale(1)}
.stg-hd{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border)}
.stg-hd h3{font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px}
.stg-hd h3 svg{width:18px;height:18px;color:var(--text2)}
.stg-close{background:none;border:none;cursor:pointer;color:var(--text2);padding:4px;border-radius:6px}
.stg-close svg{width:18px;height:18px}
.stg-item{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;transition:background .15s}
.stg-item:hover{background:var(--g1)}
.stg-item-l{display:flex;align-items:center;gap:12px}
.stg-item-l svg{width:18px;height:18px;color:var(--text2);flex-shrink:0}
.stg-item-l div{font-size:13.5px;font-weight:600;color:var(--text)}
.stg-item-l small{font-size:11px;color:var(--text2);display:block;margin-top:1px}
.tgl{position:relative;width:46px;height:26px;flex-shrink:0}
.tgl input{opacity:0;width:0;height:0}
.tgl-sl{position:absolute;inset:0;background:var(--border);border-radius:26px;cursor:pointer;transition:background .25s}
.tgl-sl:before{content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;background:var(--card);border-radius:50%;transition:transform .25s;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.tgl input:checked+.tgl-sl{background:var(--pink)}
.tgl input:checked+.tgl-sl:before{transform:translateX(20px)}

/* ══════════════════════════════════════════
   BACK TO TOP
══════════════════════════════════════════ */
.btt{
  position:fixed;bottom:calc(var(--bnav-h,58px) + 16px);right:16px;z-index:80;
  width:36px;height:36px;background:rgba(0,0,0,.32);color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.15);border-radius:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:none;
  opacity:0;transform:translateY(12px);
  transition:opacity var(--ease),transform var(--ease),bottom .3s ease,background .15s;pointer-events:none
}
.btt.on{opacity:1;transform:translateY(0);pointer-events:all}
.btt:hover{background:rgba(0,0,0,.5);color:#fff}
.btt:active{transform:scale(.93)}
.btt svg{width:15px;height:15px}
/* no-bnav overrides */
body.no-bnav .bnav{display:none!important}
body.no-bnav .btt{bottom:16px}
body.no-bnav .chat-btn-float{display:flex!important;bottom:16px}
body.no-bnav .toast{bottom:26px}
body.no-bnav .tb-search-btn{display:flex}
@media(min-width:768px){
  .btt{bottom:24px;right:24px}
  .chat-btn-float{display:flex!important;right:24px;bottom:24px}
  .tb-search-btn{display:flex}
}

/* ══════════════════════════════════════════
   BOTTOM NAV
══════════════════════════════════════════ */
.bnav{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--card);border-top:1px solid var(--border);
  display:flex;align-items:center;z-index:200;padding:4px 6px 6px;
  box-shadow:0 -4px 20px rgba(0,0,0,.08),0 -1px 0 rgba(255,255,255,.5) inset;
  overflow:visible
}
body.dark .bnav{
  background:var(--card);border-top-color:var(--border);
  box-shadow:0 -4px 20px rgba(0,0,0,.25),0 -1px 0 rgba(255,255,255,.03) inset
}
@media(min-width:768px){.bnav{display:none}}
.bnb{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:6px 0;border:none;background:transparent;color:var(--text2);
  font-size:9px;font-weight:700;cursor:pointer;border-radius:12px;
  transition:all var(--ease);letter-spacing:.3px;text-decoration:none;
  position:relative
}
.bnb:hover,.bnb:focus-visible{color:var(--pink);background:rgba(208,26,125,.08)}
.bnb:active{transform:scale(.95)}
.bnb svg{width:20px;height:20px;transition:transform .2s}
.bnb:hover svg{transform:translateY(-1px)}
.bnb.on{color:var(--pink)}
.bnb.on svg{stroke-width:2.5}
/* FAB chat en el centro del bottom nav */
.bnav-fab-wrap{
  flex:1;display:flex;justify-content:center;align-items:center
}
.bnav-fab-btn{
  width:54px;height:54px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#C0176A,#E91E8C);
  border:3px solid rgba(255,255,255,.5);
  cursor:pointer;color:#fff;
  box-shadow:0 6px 22px rgba(192,23,106,.45),0 0 0 4px rgba(192,23,106,.1);
  display:flex;align-items:center;justify-content:center;
  transition:.22s;position:relative;
  transform:translateY(-16px)
}
.bnav-fab-btn:hover{transform:translateY(-16px) scale(1.09);box-shadow:0 8px 28px rgba(192,23,106,.55),0 0 0 6px rgba(192,23,106,.12)}
.bnav-fab-btn:active{transform:translateY(-16px) scale(.93)}
.bnav-fab-btn svg{width:22px;height:22px;transition:.2s}
.bnav-fab-btn.open .ico-chat{display:none}
.bnav-fab-btn.open .ico-x{display:block}
.bnav-fab-btn .ico-x{display:none}

/* ══════════════════════════════════════════
   TOAST
══════════════════════════════════════════ */
.toast{
  position:fixed;bottom:calc(var(--bnav-h,58px) + 26px);left:50%;transform:translateX(-50%) translateY(16px);
  background:#111;color:#fff;font-size:13px;font-weight:600;
  padding:9px 20px;border-radius:10px;z-index:2000;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
  box-shadow:0 3px 16px rgba(0,0,0,.3);white-space:nowrap;max-width:90vw;
  display:flex;align-items:center;gap:7px
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.t-ok{background:#16a34a}
.toast.t-err{background:#dc2626}
.toast.t-info{background:#2563eb}

/* ══════════════════════════════════════════
   PROGRESS MODAL
══════════════════════════════════════════ */
.prog-ov{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.prog-ov.on{display:flex}
.prog-box{background:var(--card);border-radius:16px;padding:26px 30px;text-align:center;box-shadow:var(--sh2);min-width:220px}
.prog-box h4{font-size:14px;margin-bottom:13px;color:var(--text)}
.prog-bar{height:6px;background:var(--g1);border-radius:3px;overflow:hidden}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--pink),var(--yellow));border-radius:3px;width:0%;transition:width .3s}
.prog-pct{font-size:11.5px;color:var(--text2);margin-top:8px;font-weight:700}


/* ══════════════════════════════════════════
   PRODUCT DETAIL MODAL
══════════════════════════════════════════ */
.pdm-ov{
  position:fixed;inset:0;z-index:700;
  background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s
}
.pdm-ov.on{opacity:1;visibility:visible}
.pdm-nav{position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;
  background:var(--card);border:1.5px solid var(--border);
  color:var(--text2);box-shadow:0 2px 10px rgba(0,0,0,.12);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s,color .15s,opacity .2s;z-index:10}
.pdm-nav:hover{background:var(--pink-l);color:var(--pink)}
.pdm-nav:disabled{opacity:.25;pointer-events:none}
.pdm-nav.prev{left:10px}.pdm-nav.next{right:10px}
.pdm-nav svg{width:16px;height:16px;flex-shrink:0}
.pdm{
  background:var(--card);border-radius:22px;width:100%;max-width:420px;
  box-shadow:0 24px 64px rgba(0,0,0,.3);
  transform:scale(.93) translateY(24px);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1);
  overflow:hidden;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
  display:flex;flex-direction:column
}
.pdm-ov.on .pdm{transform:scale(1) translateY(0)}
/* ══════════════════════════════════════════
   PRODUCT DETAIL MODAL — rediseñado acorde a cards
══════════════════════════════════════════ */
.pdm-img-wrap{
  position:relative;aspect-ratio:1;flex-shrink:0;overflow:hidden;
  background:radial-gradient(circle at top,#ffffff 0%,#f5f5f6 100%);
  padding:10px;border-radius:22px 22px 0 0
}
body.dark .pdm-img-wrap{
  background:radial-gradient(circle at top,#2a1823 0%,#1b1018 100%)
}
.pdm-img-wrap::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.28) 0%,transparent 48%);
  pointer-events:none;z-index:2;border-radius:inherit
}
.pdm-car-wrap{
  position:relative;flex-shrink:0;overflow:hidden;
  background:radial-gradient(circle at top,#ffffff 0%,#f5f5f6 100%);
  padding:10px;border-radius:22px 22px 0 0
}
body.dark .pdm-car-wrap{
  background:radial-gradient(circle at top,#2a1823 0%,#1b1018 100%)
}
.pdm-car-wrap::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.28) 0%,transparent 48%);
  pointer-events:none;z-index:2;border-radius:inherit
}
.pdm-img-frame{
  position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:calc(var(--r) - 2px);background:#fff
}
.pdm-img{
  width:100%;height:100%;object-fit:contain;display:block
}
.pdm-img-ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text3)
}
.pdm-img-ph svg{width:56px;height:56px;opacity:.15}
.pdm-close{
  position:absolute;top:14px;right:14px;z-index:20;
  width:36px;height:36px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(0,0,0,.08);border-radius:9px;color:#333;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s,transform .15s
}
.pdm-close:hover{background:#fff;transform:scale(1.06)}
.pdm-close svg{width:16px;height:16px}
.pdm-cat-badge{
  position:absolute;bottom:14px;left:14px;z-index:10;
  display:inline-flex;align-items:center;gap:5px;
  font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  padding:4px 10px;border-radius:20px;color:#fff;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(0,0,0,.2)
}
.pdm-body{
  position:relative;padding:14px 16px 6px;overflow-y:auto;flex:1;
  background:linear-gradient(to bottom,#fcfcfc 0%,#ffffff 100%);
  border-top:3px solid var(--cat-color,var(--pink))
}
body.dark .pdm-body{
  background:linear-gradient(to bottom,var(--g1) 0%,var(--card) 100%)
}
/* Flechita bajo barra rosa */
.pdm-body::before{
  content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;
  border-top:6px solid var(--cat-color,var(--pink))
}
.pdm-main-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px}
.pdm-sub-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.pdm-badge{
  display:inline-block;font-size:.6rem;font-weight:900;padding:3px 8px;
  border-radius:5px;color:#fff;letter-spacing:.4px;text-transform:uppercase;margin-bottom:6px
}
.pdm-badge.oferta{background:var(--pink)}
.pdm-badge.nuevo{background:#16a34a}
.pdm-badge.promo{background:var(--yellow);color:#111}
.pdm-name{font-size:1.1rem;font-weight:900;color:var(--text);line-height:1.25;flex:1;margin:0}
.pdm-price-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.pdm-pill{
  display:inline-flex;align-items:stretch;justify-content:center;
  overflow:hidden;margin-top:auto;min-height:34px;border-radius:10px;
  box-shadow:0 8px 18px rgba(208,26,125,.20),inset 0 1px 0 rgba(255,255,255,.15)
}
.pdm-pill-unit{
  position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:linear-gradient(135deg,#FFD800,#FCEE21);
  padding:0 12px;border-radius:10px 0 0 10px;
  font-size:.7rem;font-weight:800;color:#cc0055
}
.pdm-pill-unit::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent);
  pointer-events:none
}
.pdm-pill-price{
  position:relative;display:flex;align-items:center;gap:5px;
  background:linear-gradient(135deg,#FF0088,#D01A7D);
  padding:0 16px;font-size:1.1rem;font-weight:900;color:#fff;white-space:nowrap
}
.pdm-pill-price::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent);
  pointer-events:none
}
.pdm-pill-price.full{border-radius:10px}
.pdm-pill-price:not(.full){border-radius:0 10px 10px 0}
.pdm-old{font-size:.78rem;color:var(--text3);text-decoration:line-through}
.pdm-saving{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.72rem;font-weight:800;color:#16a34a;
  background:#dcfce7;padding:3px 9px;border-radius:20px
}
body.dark .pdm-saving{background:#14532d;color:#86efac}
.pdm-info{
  font-size:.75rem;color:var(--text2);font-weight:600;
  padding:7px 10px;background:var(--g1);border-radius:9px;
  display:flex;align-items:center;gap:6px;margin-top:10px
}
.pdm-info svg{flex-shrink:0;opacity:.6}
.pdm-footer{padding:12px 18px 20px;display:flex;gap:8px;flex-shrink:0}
.pdm-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 14px;border-radius:calc(var(--r) + 2px);
  border:none;cursor:pointer;font-size:13px;font-weight:800;
  transition:all var(--ease);text-decoration:none
}
.pdm-btn.share{background:var(--g1);border:1.5px solid var(--border);color:var(--text2)}
.pdm-btn.share:hover{background:var(--border);color:var(--text)}
.pdm-btn.wa{background:#25D366;color:#fff;box-shadow:0 4px 14px rgba(37,211,102,.38)}
.pdm-btn.wa:hover{background:#1da851;transform:translateY(-2px);box-shadow:0 6px 18px rgba(37,211,102,.45)}
.pdm-btn:active{transform:scale(.96) !important}
.pdm-btn svg{width:16px;height:16px;flex-shrink:0}
/* ── OG SHARE CARD (oculta, solo para html2canvas) ── */
#og-card{
  position:fixed;left:-9999px;top:0;
  width:600px;height:600px;overflow:hidden;
  background:#111;font-family:system-ui,-apple-system,sans-serif;
  border-radius:0;flex-shrink:0;display:flex;flex-direction:column
}
#og-card .ogc-topbar{
  width:600px;flex-shrink:0;display:block;object-fit:cover
}
#og-card .ogc-mid{
  position:relative;flex:1;min-height:0;overflow:hidden
}
#og-card .ogc-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff
}
#og-card .ogc-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 30%,rgba(0,0,0,.75) 100%)
}
#og-card .ogc-body{
  position:absolute;bottom:0;left:0;right:0;
  padding:14px 20px 18px;
  display:flex;flex-direction:column;align-items:center;gap:8px
}
#og-card .ogc-name{
  color:#fff;font-size:20px;font-weight:900;text-align:center;line-height:1.2;
  text-shadow:0 2px 8px rgba(0,0,0,.6);max-width:100%
}
#og-card .ogc-chips{
  display:flex;align-items:stretch;border-radius:999px;overflow:hidden;
  box-shadow:0 4px 18px rgba(0,0,0,.35)
}
#og-card .ogc-price{
  background:linear-gradient(120deg,#A8125F,#D01A7D);
  color:#fff;padding:9px 22px;
  font-size:30px;font-weight:900;letter-spacing:-.5px;line-height:1
}
#og-card .ogc-pres{
  background:#facc15;
  color:#111;padding:9px 18px;
  font-size:15px;font-weight:800;letter-spacing:.01em;line-height:1;
  display:flex;align-items:center
}
#og-card .ogc-tag{
  color:rgba(255,255,255,.7);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase
}
#og-card .ogc-bg-solid{
  position:absolute;inset:0;
  background:linear-gradient(135deg,#D01A7D 0%,#7C3AED 100%)
}
/* ── INSTALL BANNER ── */
.inst-banner{
  position:fixed;bottom:var(--bnav-h,0px);left:0;right:0;z-index:195;
  background:linear-gradient(135deg,var(--pink) 0%,var(--pink-d) 100%);
  color:#fff;padding:13px 16px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 -4px 24px rgba(208,26,125,.28);
  transform:translateY(calc(100% + 4px));
  transition:transform .35s cubic-bezier(.4,0,.2,1)
}
.inst-banner.show{transform:translateY(0)}
body.no-bnav .inst-banner{bottom:0}
@media(min-width:768px){
  .inst-banner{bottom:0;max-width:480px;left:50%;right:auto;
    border-radius:16px 16px 0 0;transform:translate(-50%,calc(100% + 4px))}
  .inst-banner.show{transform:translate(-50%,0)}
}
.inst-ico{
  flex-shrink:0;width:40px;height:40px;
  background:rgba(255,255,255,.2);border-radius:10px;
  display:flex;align-items:center;justify-content:center;overflow:hidden
}
.inst-ico img{width:100%;height:100%;object-fit:cover}
.inst-txt{flex:1;min-width:0}
.inst-title{font-weight:800;font-size:13.5px;margin-bottom:1px}
.inst-desc{font-size:11px;opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inst-actions{display:flex;gap:6px;flex-shrink:0}
.inst-btn{
  background:#fff;color:var(--pink);border:none;
  padding:8px 15px;border-radius:8px;font-weight:700;font-size:12px;
  cursor:pointer;transition:all .18s;white-space:nowrap
}
.inst-btn:hover{transform:scale(1.05);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.inst-btn:active{transform:scale(.97)}
.inst-close{
  background:transparent;color:#fff;
  border:1.5px solid rgba(255,255,255,.4);
  padding:8px 11px;border-radius:8px;font-weight:600;font-size:12px;
  cursor:pointer;transition:all .18s;white-space:nowrap
}
.inst-close:hover{background:rgba(255,255,255,.15);border-color:#fff}

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
.sb-ov{position:fixed;inset:0;z-index:590;background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:var(--ease)}
.sb-ov.on{opacity:1;visibility:visible}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:min(300px,82vw);z-index:600;
  background:var(--card);display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow:8px 0 40px rgba(0,0,0,.2);
  border-radius:0 20px 20px 0}
.sidebar.on{transform:translateX(0)}
.sb-head{background:linear-gradient(120deg,#C0176A 0%,#E91E8C 100%);
  display:flex;align-items:center;justify-content:space-between;
  height:var(--hh);padding:0 14px;flex-shrink:0;
  box-shadow:0 2px 12px rgba(192,23,106,.2)
}
.sb-close{background:rgba(255,255,255,.92);border:none;color:#333;
  width:32px;height:32px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
  box-shadow:0 2px 6px rgba(0,0,0,.12)
}
.sb-close:hover{background:#fff;transform:scale(1.06)}
.sb-close svg{width:16px;height:16px}
.sb-scroll{flex:1;overflow-y:auto;padding:14px 10px;display:flex;flex-direction:column;gap:2px}
.sb-ttl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text3);padding:10px 6px 5px;margin-top:4px}
.sb-ttl:first-child{margin-top:0}
.sb-link{display:flex;align-items:center;gap:11px;padding:10px 12px;
  border:none;background:none;color:var(--text);font-size:13px;font-weight:600;
  border-radius:12px;cursor:pointer;text-align:left;width:100%;
  text-decoration:none;transition:all .15s}
.sb-link:hover{background:var(--g1);transform:translateX(3px);color:var(--pink)}
.sb-link svg{width:20px;height:20px;color:var(--text2);flex-shrink:0;transition:color .15s}
.sb-link:hover svg{color:var(--pink)}
.sb-div{height:1px;background:var(--border);margin:8px 6px}
.sb-foot{padding:14px 12px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);flex-shrink:0}
.sb-soc{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sb-soc a{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;transition:all .15s;flex-shrink:0;border:1.5px solid var(--border);
  text-decoration:none;color:var(--text2);background:var(--g1)}
.sb-soc a:hover{transform:scale(1.1) translateY(-2px);background:var(--card);box-shadow:0 4px 10px rgba(0,0,0,.1)}
.sb-soc a.ig:hover{color:#E1306C;border-color:#E1306C}
.sb-soc a.fb:hover{color:#1877F2;border-color:#1877F2}
.sb-soc a.wa:hover{color:#25D366;border-color:#25D366}
.sb-soc svg{width:18px;height:18px}
.sb-access{display:flex;align-items:center;gap:8px;padding:8px 12px;
  border-radius:10px;text-decoration:none;font-size:11px;font-weight:700;
  color:var(--text3);border:1.5px solid var(--border);transition:all .15s;
  background:var(--g1)}
.sb-access:hover{color:var(--pink);border-color:var(--pink);background:var(--card);transform:translateY(-1px)}
.sb-access svg{width:14px;height:14px;flex-shrink:0}

/* ── hrs table in sidebar ── */
.hrs-row{display:flex;justify-content:space-between;align-items:center;
  padding:9px 12px;border-radius:10px;font-size:12px;transition:background .15s}
.hrs-row:hover{background:var(--g1)}
.hrs-row.today{background:linear-gradient(135deg,var(--pink-l),#f8e0f2);font-weight:800;box-shadow:0 1px 4px rgba(208,26,125,.1)}
body.dark .hrs-row.today{background:rgba(208,26,125,.16)}
.hrs-row.off{opacity:.45}
.hrs-day{font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px}
.hrs-day .today-badge{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;color:var(--pink);background:rgba(208,26,125,.1);padding:2px 6px;border-radius:99px}
.hrs-time{color:var(--text2);font-size:11px;font-weight:600}
.hrs-row.today .hrs-time{color:var(--pink);font-weight:800}

/* ══════════════════════════════════════════
   HORARIO — STATUS CHIP
══════════════════════════════════════════ */
.sb-head .chip{background:rgba(255,255,255,.18)!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.35)}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;
  border-radius:99px;font-size:11px;font-weight:700;cursor:pointer;
  transition:var(--ease)}
.chip.open{background:rgba(22,163,74,.15);color:#16a34a}
.chip.closed{background:rgba(239,68,68,.12);color:#ef4444}
body.dark .chip.open{background:rgba(22,163,74,.22)}
body.dark .chip.closed{background:rgba(239,68,68,.2)}
.chip svg{width:13px;height:13px;flex-shrink:0}
/* Compact status in header */
.h-status{position:relative;width:36px;height:36px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.15s;border:none;
  background:rgba(255,255,255,.15);color:#fff;flex-shrink:0}
.h-status:hover{background:rgba(255,255,255,.28)}
.h-status-clock{width:20px;height:20px}
.h-status-lock{position:absolute;bottom:-4px;right:-4px;
  width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--header-bg,#C0176A)}
.h-status-lock svg{width:8px;height:8px}

/* ── Hrs modal ── */
.hrs-ov{position:fixed;inset:0;z-index:620;background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;
  opacity:0;visibility:hidden;transition:var(--ease);padding:0}
@media(min-width:480px){.hrs-ov{align-items:center}}
.hrs-ov.on{opacity:1;visibility:visible}
.hrs-modal{background:var(--card);width:100%;max-width:380px;
  border-radius:24px 24px 0 0;padding-bottom:env(safe-area-inset-bottom,0);
  transform:translateY(20px);transition:transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow:0 -8px 40px rgba(0,0,0,.18);overflow:hidden}
@media(min-width:480px){.hrs-modal{border-radius:20px;transform:scale(.95);box-shadow:0 12px 48px rgba(0,0,0,.22)}}
.hrs-ov.on .hrs-modal{transform:none}
/* ── HOURS STATUS BANNER ── */
.hrs-status-banner{padding:18px 18px 14px;display:flex;flex-direction:column;align-items:center;text-align:center}
.hrs-status-row{display:flex;align-items:center;gap:14px;margin-bottom:12px;justify-content:center}
.hrs-status-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 4px 12px rgba(0,0,0,.15)}
.hrs-status-icon svg{width:22px;height:22px;color:#fff}
.hrs-status-icon.open{background:linear-gradient(135deg,#4ade80,#22c55e)}
.hrs-status-icon.closed{background:linear-gradient(135deg,#f87171,#ef4444)}
.hrs-status-label{font-size:16px;font-weight:900;letter-spacing:-.3px}
.hrs-status-label.open{color:#16a34a}
.hrs-status-label.closed{color:#dc2626}
body.dark .hrs-status-label.open{color:#4ade80}
body.dark .hrs-status-label.closed{color:#f87171}
.hrs-status-sub{font-size:12px;color:var(--text2);margin-top:4px;font-weight:600}
.hrs-countdown{font-size:13px;font-weight:900;color:var(--pink);font-variant-numeric:tabular-nums;letter-spacing:.5px}
.hrs-notify-btn{width:100%;padding:11px 16px;border-radius:12px;
  background:linear-gradient(135deg,var(--pink-l),#f8e0f2);
  border:1.5px solid rgba(208,26,125,.2);color:var(--pink);font-size:13px;font-weight:800;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .15s}
.hrs-notify-btn:hover{background:var(--pink);color:#fff;border-color:var(--pink);transform:translateY(-1px);box-shadow:0 4px 14px rgba(208,26,125,.3)}
.hrs-notify-btn:active{transform:scale(.97)}
.hrs-notify-btn:disabled{opacity:.55;cursor:default;transform:none}
.hrs-modal-hd{background:linear-gradient(120deg,#C0176A,#E91E8C);
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;box-shadow:0 2px 12px rgba(192,23,106,.2)}
.hrs-modal-hd h3{font-size:15px;font-weight:800;color:#fff;display:flex;align-items:center;gap:8px;white-space:nowrap}
.hrs-modal-hd h3 svg{flex-shrink:0;width:18px;height:18px}
.hrs-modal-hd button{background:rgba(255,255,255,.92);border:none;cursor:pointer;
  color:#333;width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all .15s;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.hrs-modal-hd button:hover{background:#fff;transform:scale(1.06)}
.hrs-modal-hd button svg{width:15px;height:15px}
.hrs-grid{padding:10px 14px 20px}

/* ══════════════════════════════════════════
   CHAT
══════════════════════════════════════════ */
/* Botón flotante de chat (fallback: desktop y no-bnav) */
.chat-btn-float{
  position:fixed;right:16px;bottom:calc(var(--bnav-h, 58px) + 14px);z-index:490;
  width:50px;height:50px;border-radius:50%;
  background:linear-gradient(135deg,#C0176A,#E91E8C);
  border:none;cursor:pointer;color:#fff;
  box-shadow:0 4px 16px rgba(192,23,106,.45);
  display:none;align-items:center;justify-content:center;
  transition:.2s;position:fixed;
}
.chat-btn-float:hover{transform:scale(1.1);box-shadow:0 6px 22px rgba(192,23,106,.55)}
.chat-btn-float:active{transform:scale(.94)}
.chat-btn-float svg{width:22px;height:22px;transition:.2s}
.chat-btn-float.open .ico-chat{display:none}
.chat-btn-float.open .ico-x{display:block}
.chat-btn-float .ico-x{display:none}
.chat-notif{position:absolute;top:0;right:0;width:11px;height:11px;
  background:#f59e0b;border-radius:50%;border:2px solid var(--cream)}

/* ── FAB Admin ─────────────────────────── */
.admin-fab-wrap{position:fixed;right:16px;bottom:calc(var(--bnav-h, 58px) + 14px);z-index:495;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.admin-fab-btn{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;cursor:pointer;color:#fff;box-shadow:0 4px 16px rgba(124,58,237,.45);display:flex;align-items:center;justify-content:center;transition:.2s}
.admin-fab-btn:hover{transform:scale(1.1);box-shadow:0 6px 22px rgba(124,58,237,.55)}
.admin-fab-btn:active{transform:scale(.94)}
.admin-fab-btn svg{width:22px;height:22px;transition:.2s}
.admin-fab-btn .ico-x{display:none}
.admin-fab-wrap.open .admin-fab-btn .ico-plus{display:none}
.admin-fab-wrap.open .admin-fab-btn .ico-x{display:block}
.admin-fab-menu{display:flex;flex-direction:column;align-items:flex-end;gap:8px;opacity:0;transform:translateY(10px);pointer-events:none;transition:all .25s cubic-bezier(.4,0,.2,1)}
.admin-fab-wrap.open .admin-fab-menu{opacity:1;transform:translateY(0);pointer-events:auto}
.admin-fab-opt{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--card);border:1.5px solid var(--border);box-shadow:0 4px 14px rgba(0,0,0,.1);cursor:pointer;font-size:13px;font-weight:700;color:var(--text);transition:.15s;white-space:nowrap}
.admin-fab-opt:hover{border-color:var(--pink);color:var(--pink);transform:translateX(-4px)}
.admin-fab-opt svg{width:16px;height:16px;flex-shrink:0}
body.no-bnav .admin-fab-wrap{bottom:16px}
@media(min-width:768px){.admin-fab-wrap{right:24px;bottom:24px}}
.chat-ov{position:fixed;inset:0;z-index:491;background:rgba(0,0,0,.38);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;display:block}
.chat-ov.on{opacity:1;visibility:visible}
/* Mobile: bottom sheet */
.chat-modal{
  position:fixed;
  bottom:0;left:0;right:0;z-index:492;
  width:100%;background:var(--card);
  border-radius:20px 20px 0 0;
  box-shadow:0 -6px 32px rgba(0,0,0,.18);overflow:hidden;
  transform:translateY(100%);
  visibility:hidden;transition:transform .32s cubic-bezier(.4,0,.2,1),visibility .32s;
  pointer-events:none;
  padding-bottom:env(safe-area-inset-bottom,0)
}
.chat-modal.on{transform:translateY(0);visibility:visible;pointer-events:auto}
/* Desktop: burbuja flotante */
@media(min-width:768px){
  .chat-ov{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  .chat-modal{
    position:fixed;bottom:84px;right:24px;left:auto;width:340px;
    border-radius:16px;transform:scale(.92) translateY(12px);opacity:0;
    padding-bottom:0;box-shadow:0 8px 36px rgba(0,0,0,.22)
  }
  .chat-modal.on{transform:none;opacity:1}
}
.chat-hd{background:linear-gradient(120deg,#C0176A,#E91E8C);
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  box-shadow:0 2px 12px rgba(192,23,106,.25)
}
.chat-av{width:36px;height:36px;border-radius:50%;overflow:hidden;
  background:rgba(255,255,255,.2);flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border:2px solid rgba(255,255,255,.3);box-shadow:0 2px 8px rgba(0,0,0,.15)
}
.chat-av img{width:100%;height:100%;object-fit:cover}
.chat-hd-info .ct{font-size:13px;font-weight:800;color:#fff}
.chat-hd-info .cs{font-size:10px;color:rgba(255,255,255,.75)}
.chat-x{background:rgba(255,255,255,.92);border:none;color:#333;width:30px;height:30px;
  border-radius:8px;cursor:pointer;margin-left:auto;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
  box-shadow:0 2px 6px rgba(0,0,0,.12)
}
.chat-x:hover{background:#fff;transform:scale(1.08)}
.chat-x svg{width:14px;height:14px}
.chat-body{max-height:42vh;overflow-y:auto;padding:12px 12px 8px;
  display:flex;flex-direction:column;gap:8px}
@media(min-width:768px){.chat-body{max-height:300px}}
.chat-msg{padding:9px 13px;border-radius:14px;font-size:12px;line-height:1.5;
  max-width:85%;animation:msgIn .18s ease;
  box-shadow:0 1px 4px rgba(0,0,0,.04)}
@keyframes msgIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.chat-msg.bot{background:linear-gradient(135deg,var(--pink-l),#f8e0f2);
  color:var(--text);align-self:flex-start;border-bottom-left-radius:4px}
body.dark .chat-msg.bot{background:rgba(208,26,125,.15)}
.chat-msg.usr{background:linear-gradient(135deg,#FF0088,#D01A7D);color:#fff;
  align-self:flex-end;border-bottom-right-radius:4px}
.chat-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 8px}
.cc{padding:6px 12px;border-radius:99px;border:1.5px solid var(--pink);
  background:none;color:var(--pink);font-size:11px;font-weight:700;
  cursor:pointer;transition:all .15s}
.cc:hover{background:var(--pink);color:#fff;transform:translateY(-1px);box-shadow:0 3px 10px rgba(208,26,125,.25)}
.cc:active{transform:scale(.95)}
.cc:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.chat-foot{padding:8px 10px 10px;border-top:1px solid var(--border);background:var(--card)}
/* Chat typing dots */
.chat-typing{display:flex;align-items:center;gap:4px;padding:10px 14px;
  align-self:flex-start}
.chat-typing span{width:7px;height:7px;border-radius:50%;background:var(--pink);
  opacity:.4;animation:typingDot 1.2s infinite}
.chat-typing span:nth-child(2){animation-delay:.2s}
.chat-typing span:nth-child(3){animation-delay:.4s}
@keyframes typingDot{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-5px);opacity:1}}
.chat-inp-row{display:flex;gap:6px;align-items:center}
.chat-inp{flex:1;border:1.5px solid var(--border);border-radius:99px;
  padding:8px 14px;font-size:12px;background:var(--g1);color:var(--text);
  outline:none;-webkit-tap-highlight-color:transparent;
  transition:border-color .15s,box-shadow .15s;
  -webkit-appearance:none;appearance:none
}
.chat-inp:focus{border-color:var(--pink);box-shadow:0 0 0 2px rgba(208,26,125,.12)}
.chat-inp:focus-visible{outline:none}
@supports (-webkit-touch-callout:none){
  .chat-inp:focus{box-shadow:none;border-color:var(--pink)}
}
.chat-send{width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#FF0088,#D01A7D);
  border:none;color:#fff;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
  box-shadow:0 3px 10px rgba(208,26,125,.35)
}
.chat-send:hover{transform:scale(1.08);box-shadow:0 4px 14px rgba(208,26,125,.45)}
.chat-send:active{transform:scale(.93)}
.chat-send svg{width:14px;height:14px}
.chat-hint{font-size:10px;color:var(--text3);margin-top:5px;padding:0 4px}
.cc-action{background:linear-gradient(135deg,#FF0088,#D01A7D)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 3px 10px rgba(208,26,125,.25)!important}
.cc-action:hover{background:linear-gradient(135deg,#D01A7D,#A8125F)!important;box-shadow:0 4px 14px rgba(208,26,125,.35)!important}

/* ══════════════════════════════════════════
   PRODUCT CAROUSEL (fotos del producto)
══════════════════════════════════════════ */
.pdm-carousel{position:relative;width:100%;overflow:hidden;cursor:zoom-in}
.pdm-car-track{display:flex;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.pdm-car-slide{flex:0 0 100%;display:flex;align-items:center;justify:center;
  aspect-ratio:1;min-height:260px}
.pdm-car-slide img{width:100%;height:100%;object-fit:contain;display:block}
/* Dots estilo banner (líneas) */
.pdm-car-dots{position:absolute;bottom:12px;left:0;right:0;
  display:flex;justify-content:center;gap:5px;z-index:10;padding:0 20px}
.pdm-car-dot{width:18px;height:4px;border-radius:2px;background:rgba(0,0,0,.2);
  cursor:pointer;transition:all .25s}
body.dark .pdm-car-dot{background:rgba(255,255,255,.25)}
.pdm-car-dot.on{background:var(--pink);width:26px}
/* ── PRODUCT PHOTO LIGHTBOX ── */
.pdm-lb{position:fixed;inset:0;z-index:800;background:rgba(0,0,0,0);display:none;
  align-items:center;justify-content:center;padding:20px;cursor:zoom-out;
  transition:background .28s ease}
.pdm-lb.on{display:flex;background:rgba(0,0,0,.9)}
.pdm-lb-track{display:flex;transition:transform .35s cubic-bezier(.4,0,.2,1);height:100%}
.pdm-lb-slide{flex:0 0 100%;display:flex;align-items:center;justify-content:center}
.pdm-lb-slide img{max-width:100%;max-height:82vh;max-height:82dvh;object-fit:contain;border-radius:14px}
/* Botón X igual al pdm-close del modal */
.pdm-lb-close{
  position:absolute;top:16px;right:16px;z-index:20;
  width:36px;height:36px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(0,0,0,.08);border-radius:9px;color:#333;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s,transform .15s
}
.pdm-lb-close:hover{background:#fff;transform:scale(1.06)}
.pdm-lb-close svg{width:16px;height:16px}
/* Flechas prev/next igual al pdm-nav del modal */
.pdm-lb-nav{position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;
  background:var(--card);border:1.5px solid var(--border);
  color:var(--text2);box-shadow:0 2px 10px rgba(0,0,0,.12);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s,color .15s,opacity .2s;z-index:20}
.pdm-lb-nav:hover{background:var(--pink-l);color:var(--pink)}
.pdm-lb-nav:disabled{opacity:.25;pointer-events:none}
.pdm-lb-nav.prev{left:10px}.pdm-lb-nav.next{right:10px}
.pdm-lb-nav svg{width:16px;height:16px;flex-shrink:0}
.pdm-lb-dots{position:absolute;bottom:20px;left:0;right:0;
  display:flex;justify-content:center;gap:6px;z-index:10}
.pdm-lb-dot{width:20px;height:4px;border-radius:2px;background:rgba(255,255,255,.35);
  cursor:pointer;transition:all .25s}
.pdm-lb-dot.on{background:#fff;width:28px}

/* ── SITE FOOTER ─────────────────────────────────────── */
#dlBtn{display:none!important}
/* FOOTER LIGHT (default): antes era negro (#1a0a14) SIEMPRE, sin importar el
   tema del sitio — el resto de la página tenía modo claro/oscuro pero el
   footer quedaba fijo en oscuro (usuario MV, 2026-09-15: "este footer en
   modo light sigue siendo negro, no debería tener una versión light?").
   Ahora usa la misma paleta clara que el resto del sitio (--cream rosado muy
   claro, texto oscuro) y el filtro del logo se invierte para que el blanco
   del PNG se vea oscuro sobre fondo claro; body.dark restaura el negro de
   siempre con el logo blanco tal cual sale el archivo. */
.site-footer{background:var(--cream);padding:20px 20px calc(var(--bnav-h,58px) + 20px);transition:background .2s}
body.dark .site-footer{background:#1a0a14}
body.no-bnav .site-footer{padding-bottom:20px}
@media(min-width:768px){.site-footer{padding:20px 40px 20px}}
.footer-inner{max-width:860px;margin:0 auto;display:flex;flex-direction:column}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:16px}
/* invert(1) da blanco; sobre fondo claro hace falta el negro real del PNG,
   así que en light NO se invierte (el archivo ya es blanco puro, por eso
   brightness(0) solo lo llevaría a negro real, que es lo que se busca). */
.footer-brand img{height:auto;max-height:26px;max-width:38vw;width:auto;opacity:.85;filter:brightness(0)}
body.dark .footer-brand img{opacity:.9;filter:brightness(0) invert(1)}
.footer-socials{display:flex;gap:8px;align-items:center}
.footer-soc-a{width:34px;height:34px;border-radius:9px;background:rgba(17,24,39,.06);display:flex;align-items:center;justify-content:center;color:rgba(17,24,39,.5);transition:.15s;text-decoration:none;flex-shrink:0}
.footer-soc-a:hover{background:rgba(17,24,39,.12);color:#111827}
body.dark .footer-soc-a{background:rgba(255,255,255,.07);color:rgba(255,255,255,.45)}
body.dark .footer-soc-a:hover{background:rgba(255,255,255,.14);color:#fff}
.footer-soc-a svg{width:15px;height:15px}
.footer-soc-a.ig:hover{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff}
.footer-soc-a.fb:hover{background:#1877f2;color:#fff}
.footer-soc-a.wa:hover{background:#25d366;color:#fff}
.footer-hr{border:none;height:1px;background:rgba(17,24,39,.08);margin:0}
body.dark .footer-hr{background:rgba(255,255,255,.07)}
/* Texto legal: de .69rem a .78rem y sin achicar el line-height — el tamaño
   viejo, sumado a que el nowrap sólo se activaba desde 768px, hacía que en
   móvil el texto envolviera justo antes de la última palabra y "compra."
   quedara solo en su propia línea (usuario MV, 2026-09-15: "queda todo el
   texto arriba y la última palabra 'compra' queda debajo y queda poco
   profesional"). Con más tamaño Y el punto medio (·) como separador natural
   de quiebre, el corte cae en un lugar prolijo si hace falta partir en dos
   líneas, en vez de partir la frase a la mitad de una oración. */
.footer-legal{font-size:.78rem;color:rgba(17,24,39,.42);line-height:1.6;font-style:italic;padding:16px 0;margin:0;text-align:center;max-width:520px;margin-inline:auto}
body.dark .footer-legal{color:rgba(255,255,255,.22)}
.footer-bottom{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:16px;border-top:1px solid rgba(17,24,39,.08);text-align:center}
body.dark .footer-bottom{border-top-color:rgba(255,255,255,.07)}
.footer-copy{font-size:.69rem;color:rgba(17,24,39,.42)}
body.dark .footer-copy{color:rgba(255,255,255,.22)}
.footer-made{display:flex;align-items:center;gap:7px;font-size:.69rem;color:rgba(17,24,39,.5);text-decoration:none;transition:.15s}
.footer-made:hover{color:#111827}
body.dark .footer-made{color:rgba(255,255,255,.28)}
body.dark .footer-made:hover{color:rgba(255,255,255,.55)}
.footer-creator-logo{height:14px;opacity:.6;filter:brightness(0);transition:opacity .15s}
body.dark .footer-creator-logo{opacity:.5;filter:brightness(0) invert(1)}
.footer-made:hover .footer-creator-logo{opacity:1}
body.dark .footer-made:hover .footer-creator-logo{opacity:.85}
@media(min-width:768px){.footer-top{flex-wrap:nowrap;align-items:center}}

/* ── SORTEO TICKER ── */
.sorteo-ticker{
  display:none;
  background:linear-gradient(135deg,#C0176A 0%,#E91E8C 50%,#F5C400 100%);
  color:#fff;font-size:13px;font-weight:800;letter-spacing:.6px;
  padding:0;text-align:center;cursor:pointer;
  text-decoration:none;overflow:hidden;
  transition:filter var(--ease);
  position:relative;
  box-shadow:0 2px 12px rgba(192,23,106,.25)
}
.sorteo-ticker::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.12) 50%,transparent 100%);
  pointer-events:none
}
.sorteo-ticker:hover{filter:brightness(1.08)}
.sorteo-ticker.visible{display:block}
.sorteo-ticker.sk{display:block;color:transparent;pointer-events:none;border-radius:0}
.sorteo-ticker-inner{display:flex;width:max-content;animation:tickerScroll 12s linear infinite;align-items:center;padding:9px 0}
.sorteo-ticker-inner span{padding:0 60px;white-space:nowrap;display:flex;align-items:center;gap:10px}
.sorteo-ticker-inner span::before{
  content:'';display:inline-block;width:18px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink:0
}
@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── SORTEO MODAL ── */
.sorteo-ov{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.6);
  display:none;align-items:flex-start;justify-content:center;
  padding:16px;overflow-y:auto
}
.sorteo-ov.show{display:flex}
.sorteo-modal{
  background:#fff;border-radius:20px;
  max-width:420px;width:100%;
  margin:auto;
  display:flex;flex-direction:column;
  overflow:hidden;
  animation:sorteoModalBounce .45s cubic-bezier(.34,1.56,.64,1)
}
body.dark .sorteo-modal{background:#1E1E1E}
@keyframes sorteoModalBounce{from{opacity:0;transform:scale(.75) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.sm-img{
  width:100%;aspect-ratio:1/1;
  flex-shrink:0;
  background:linear-gradient(135deg,var(--pink-d),var(--pink));
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative
}
.sm-body{overflow-y:auto}
.sm-img img{width:100%;height:100%;object-fit:contain}
.sm-img-placeholder{text-align:center;color:rgba(255,255,255,.7)}
.sm-img-placeholder svg{width:60px;height:60px;stroke:rgba(255,255,255,.5);fill:none;stroke-width:1.5}
.sm-img-placeholder span{display:block;font-size:13px;margin-top:6px}
.sm-body{padding:22px 22px 20px;text-align:center}
.sm-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--pink-l);color:var(--pink-d);border-radius:20px;
  padding:3px 10px;font-size:11px;font-weight:700;letter-spacing:.5px;
  margin-bottom:10px
}
.sm-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--pink);animation:smPulse 1.8s infinite}
@keyframes smPulse{0%,100%{opacity:1}50%{opacity:.3}}
.sm-title{font-size:20px;font-weight:800;color:#160808;margin-bottom:4px}
body.dark .sm-title{color:#E8E8E8}
.sm-sub{font-size:14px;color:#6B6B6B;margin-bottom:14px;line-height:1.4}
.sm-fecha{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:13px;font-weight:700;color:#6B6B6B;margin-bottom:18px
}
.sm-fecha svg{width:15px;height:15px;stroke:var(--pink);fill:none;stroke-width:2}
.sm-btn{
  display:block;width:100%;padding:14px;
  background:var(--pink);color:#fff;
  border:none;border-radius:10px;
  font-size:15px;font-weight:700;cursor:pointer;
  text-decoration:none;text-align:center;
  transition:background var(--ease),transform .15s
}
.sm-btn:hover{background:var(--pink-d)}
.sm-btn:active{transform:scale(.98)}
.sm-close{
  position:absolute;top:10px;right:10px;
  width:32px;height:32px;
  background:rgba(0,0,0,.4);border:none;border-radius:50%;
  color:#fff;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--ease)
}
.sm-close:hover{background:rgba(0,0,0,.65)}
.sm-countdown{display:flex;justify-content:center;gap:6px;margin-bottom:14px}
.sm-cd-unit{text-align:center}
.sm-cd-num{
  display:block;font-size:20px;font-weight:800;line-height:1.1;
  background:var(--pink);color:#fff;border-radius:6px;padding:4px 8px;min-width:36px
}
.sm-cd-lbl{display:block;font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#6B6B6B;margin-top:3px}
.sm-cd-sep{font-size:18px;font-weight:800;color:#6B6B6B;align-self:flex-end;padding-bottom:14px}