/* Tienda — diseño estilo "trendhub" v2 (móvil primero). Solo aplica con <body class="store">.
   Estructura: aviso delgado → contenedor blanco → encabezado de UNA fila → portada arriba → chips → mosaico → productos. */
body.store { --shell-r:30px; --soft:#ECECEE; --soft-2:#F5F5F7; --head-h:64px; --nav-h:64px; }
@media not all { :root:not([data-theme="light"]) body.store { --soft:#1B2340; --soft-2:#1B2340; } }
body.store main:focus { outline:none; }
body.store .only-mobile { display:none !important; }

/* Aviso de demostración: delgado y descartable */
body.store .demo { display:flex; align-items:center; justify-content:center; gap:8px; min-height:30px; padding:4px 12px; font-size:12px; line-height:1.25; text-align:center; background:linear-gradient(90deg,#14181F,#1D3E7A,#14181F); color:#fff; }
body.store .demo[hidden] { display:none; }
body.store .demo button { border:0; background:rgba(255,255,255,.15); color:#fff; width:26px; height:26px; border-radius:50%; cursor:pointer; flex:none; font-size:12px; }

/* Contenedor blanco */
.shell { width:min(1240px,100% - 24px); margin:10px auto 32px; background:var(--card); border-radius:var(--shell-r); box-shadow:0 20px 60px rgba(20,24,31,.12); overflow:clip; position:relative; }
.shell > main { padding:0 clamp(12px,2.6vw,28px) 8px; }
.shell > .footer { margin:0; padding:26px clamp(14px,3vw,32px); }

/* Encabezado: una sola fila, pegajoso */
body.store .header { position:sticky; top:0; z-index:60; display:block; background:color-mix(in srgb,var(--card) 90%, transparent); backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px); border:0; border-bottom:1px solid var(--line); padding:8px clamp(12px,2.6vw,28px); transition:transform .35s var(--ease), box-shadow .3s; }
body.store .header.hide { transform:translateY(-110%); }
.head-row { display:flex; align-items:center; gap:14px; min-height:48px; }
.head-row .logo { font-size:19px; flex:none; white-space:nowrap; }
.head-search { flex:1 1 220px; max-width:520px; position:relative; }
.head-search input { width:100%; min-height:44px; padding:10px 52px 10px 18px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--soft-2); color:var(--fg); font:inherit; }
.head-search button { position:absolute; right:2px; top:2px; width:40px; height:40px; border:0; border-radius:50%; background:transparent; color:var(--btn); display:grid; place-items:center; cursor:pointer; }
.head-links { display:flex; gap:2px; flex:none; } .head-links a { padding:10px 12px; min-height:44px; display:inline-flex; align-items:center; text-decoration:none; font-size:14px; border-radius:var(--r-pill); position:relative; }
.head-links a::after { content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px; background:var(--btn); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); } .head-links a:hover::after { transform:scaleX(1); }
.head-tools { margin-left:auto; display:flex; align-items:center; gap:6px; flex:none; }

/* Portada arriba */
.hero2 { background:var(--soft); border-radius:24px; margin-top:12px; display:grid; grid-template-columns:1.05fr .95fr; overflow:hidden; position:relative; min-height:430px; }
.h2-left { padding:clamp(20px,3.4vw,44px); display:flex; flex-direction:column; gap:20px; justify-content:center; position:relative; z-index:2; min-width:0; }
.stack { display:grid; } .stack > * { grid-area:1/1; opacity:0; pointer-events:none; visibility:hidden; transition:opacity .8s ease, transform .8s var(--ease), visibility 0s .8s; transform:translateY(12px); } .stack > .on { opacity:1; pointer-events:auto; visibility:visible; transform:none; transition:opacity .8s ease, transform .8s var(--ease); }
.h2-t h1, .h2-t h2 { font-size:clamp(30px,4.6vw,54px); letter-spacing:-.03em; line-height:1.05; }
.h2-t .hl, .hl { font-style:normal; color:var(--btn); }
.h2-t p { font-size:clamp(15px,1.5vw,18px); color:var(--muted); margin:12px 0 18px; max-width:46ch; }
.h2-right { position:relative; min-height:280px; }
.h2-i { display:flex; align-items:flex-end; justify-content:center; }
.h2-i picture, .h2-i > img, .h2-i video { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.h2-i img { width:100%; height:100%; object-fit:cover; }
.h2-i.cutout img { object-fit:contain; object-position:bottom center; filter:drop-shadow(0 18px 24px rgba(20,24,31,.18)); }
.h2-i:not(.cutout)::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--soft),transparent 28%); pointer-events:none; }
.h2-dots { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); display:flex; gap:10px; z-index:4; background:rgba(255,255,255,.7); backdrop-filter:blur(6px); padding:6px 10px; border-radius:var(--r-pill); }
.h2-dots button { width:10px; height:10px; min-height:0; padding:0; border-radius:50%; border:0; background:rgba(20,24,31,.3); cursor:pointer; position:relative; transition:width .3s var(--spring), background .2s; } .h2-dots button::before { content:""; position:absolute; inset:-17px -7px; }
.h2-dots button[aria-current="true"] { background:var(--btn); width:26px; border-radius:6px; }
.hero2 .hero-pause { right:10px; bottom:6px; width:44px; height:44px; background:rgba(20,24,31,.6); color:#fff; z-index:5; font-size:12px; }

/* Tarjetas promocionales */
.promos { display:flex; gap:12px; }
.pcard2 { flex:1 1 0; max-width:260px; min-width:0; min-height:140px; border-radius:20px; padding:14px; display:flex; gap:8px; justify-content:space-between; background:#FFE600; color:#14181F; box-shadow:var(--shadow); transition:transform .3s var(--spring); overflow:hidden; text-decoration:none; }
.pcard2:hover { transform:translateY(-4px) rotate(-.6deg); text-decoration:none; } .pcard2:active { transform:scale(.97); } .pcard2.white { background:#fff; }
.pcard2 .pt { display:flex; flex-direction:column; gap:5px; align-items:flex-start; min-width:0; } .pcard2 b { font-size:19px; line-height:1.05; color:#1D63D8; letter-spacing:-.02em; } .pcard2 .sub { font-size:12px; }
.pcard2 .tagy { background:#FFE600; color:#14181F; font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; } .pcard2.white .tagy { box-shadow:0 0 0 1px rgba(20,24,31,.1); }
.pcard2 .btn { min-height:34px; padding:7px 14px; font-size:12px; margin-top:auto; color:#fff; }
.pcard2 img { width:70px; object-fit:cover; border-radius:14px; align-self:stretch; flex:none; }

/* Chips de categoría bajo la portada */
.cat-row { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:14px 2px 4px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.cat-row::-webkit-scrollbar { display:none; } .cat-row .chip { flex:none; scroll-snap-align:start; min-height:44px; }
.cat-row .chip.blue { background:var(--btn); color:var(--on-btn); border-color:transparent; }

/* Secciones */
.sec { padding-top:clamp(30px,4.6vw,60px); } .sec-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.sec-title h2 { font-size:clamp(23px,3.2vw,32px); letter-spacing:-.02em; position:relative; }
.viewall { font-size:13px; color:var(--btn); text-decoration:none; display:inline-flex; gap:6px; align-items:center; min-height:44px; font-weight:600; border:0; background:none; cursor:pointer; } .viewall:hover { text-decoration:underline; }

/* Mosaico de categorías */
.bento { display:grid; grid-template-columns:1fr 1.5fr 1fr; grid-template-rows:repeat(2,minmax(190px,1fr)); gap:14px; }
.bt { border:0; border-radius:24px; padding:18px; display:flex; flex-direction:column; justify-content:space-between; gap:10px; position:relative; overflow:hidden; text-align:left; font:inherit; cursor:pointer; color:var(--fg); background:var(--soft); transition:transform .35s var(--spring), box-shadow .3s; box-shadow:var(--shadow); text-decoration:none; -webkit-tap-highlight-color:transparent; }
.bt:hover { transform:translateY(-6px); box-shadow:0 20px 44px rgba(20,24,31,.2); } .bt:active { transform:scale(.98); }
.bt.k0 { grid-row:1/3; background:#202226; color:#fff; } .bt.k1, .bt.k2 { background:#fff; color:#14181F; } .bt.k3 { grid-row:1/3; grid-column:3; background:#FFE600; color:#14181F; } .bt.k4 { grid-column:1/-1; background:linear-gradient(120deg,#1D63D8,#5B9BFF); color:#fff; min-height:150px; }
.bt .pills { display:flex; gap:6px; flex-wrap:wrap; z-index:2; position:relative; } .bt .pills span { background:#fff; color:#14181F; padding:6px 12px; border-radius:var(--r-pill); font-size:12px; font-weight:600; }
.bt .bimg { position:absolute; inset:auto 0 0 0; height:62%; object-fit:cover; width:100%; -webkit-mask-image:linear-gradient(to top,#000 60%,transparent); mask-image:linear-gradient(to top,#000 60%,transparent); transition:transform .6s var(--ease); } .bt:hover .bimg { transform:scale(1.06); }
.bt.k1 .bimg, .bt.k2 .bimg { inset:12px 12px 12px auto; width:40%; height:auto; border-radius:16px; -webkit-mask-image:none; mask-image:none; }
.bt.k4 .bimg { inset:0 0 0 auto; width:45%; height:100%; -webkit-mask-image:linear-gradient(to left,#000 60%,transparent); mask-image:linear-gradient(to left,#000 60%,transparent); }
.bt h3 { font-size:clamp(18px,2vw,24px); position:relative; z-index:2; max-width:60%; } .bt small { opacity:.85; position:relative; z-index:2; display:block; font-weight:500; font-size:13px; margin-top:4px; }
.bt.k0 h3, .bt.k3 h3, .bt.k4 h3 { max-width:none; }
.go { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; background:var(--btn); color:#fff; padding:10px 18px; border-radius:var(--r-pill); font-size:13px; font-weight:600; position:relative; z-index:2; min-height:44px; }
.bt.k0 .go, .bt.k3 .go { background:#1D63D8; }
.bento.n3 { grid-template-columns:1fr 1.6fr; } .bento.n2 { grid-template-columns:1fr 1fr; grid-template-rows:minmax(240px,1fr); } .bento.n2 .k1 { grid-row:1/3; } .bento.n1 { grid-template-columns:1fr; grid-template-rows:none; } .bento.n1 .k0 { grid-row:auto; min-height:260px; }

/* Productos */
.pgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:18px; }
.pcard { background:var(--card); border-radius:22px; box-shadow:var(--shadow); border:1px solid color-mix(in srgb,var(--line) 55%, transparent); overflow:hidden; display:flex; flex-direction:column; transition:transform .3s var(--spring), box-shadow .3s; position:relative; }
.pcard:hover { transform:translateY(-6px); box-shadow:0 20px 44px rgba(20,24,31,.18); } .pcard:active { transform:scale(.985); }
.pimg { position:relative; aspect-ratio:4/3; background:linear-gradient(140deg,hsl(var(--h) 80% 86%),hsl(calc(var(--h) + 30) 75% 74%)); overflow:hidden; margin:10px; border-radius:16px; }
.pimg a { display:block; width:100%; height:100%; } .pimg img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .pcard:hover .pimg img { transform:scale(1.07); }
.ptag { position:absolute; left:8px; top:8px; background:#FFE600; color:#14181F; font-size:11px; font-weight:700; padding:3px 9px; border-radius:var(--r-pill); z-index:2; max-width:calc(100% - 64px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pact { position:absolute; right:6px; top:6px; display:flex; flex-direction:column; gap:2px; z-index:2; }
.roundbtn { width:44px; height:44px; border-radius:50%; border:0; background:transparent; color:#fff; display:grid; place-items:center; cursor:pointer; position:relative; isolation:isolate; -webkit-tap-highlight-color:transparent; }
.roundbtn::before { content:""; position:absolute; inset:4px; border-radius:50%; background:#202226; z-index:-1; transition:transform .25s var(--spring), background .2s; } .roundbtn:hover::before { transform:scale(1.14); background:#1D63D8; } .roundbtn:active::before { transform:scale(.9); }
.roundbtn[aria-pressed="true"]::before { background:#E5484D; } .roundbtn[aria-pressed="true"] svg { animation:pop .4s var(--spring); } .roundbtn[disabled] { opacity:.45; cursor:not-allowed; }
.pbody { padding:4px 14px 14px; display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.pprice { color:var(--btn); font-weight:700; font-size:18px; font-variant-numeric:tabular-nums; } .pbody h3 { font-size:16px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pstore { font-size:13px; color:var(--muted); text-decoration:none; display:flex; align-items:center; gap:6px; min-width:0; } .pstore img { width:20px; height:20px; border-radius:50%; object-fit:cover; flex:none; }
.buy { width:100%; margin-top:8px; } .linkbtn { border:0; background:none; color:var(--muted); font:inherit; font-size:13px; text-decoration:underline; cursor:pointer; min-height:44px; margin-top:0; }
.strip { display:flex; flex-direction:column; gap:16px; }

/* Carga: esqueletos */
.sk { background:linear-gradient(100deg,rgba(128,128,140,.12) 30%,rgba(128,128,140,.26) 50%,rgba(128,128,140,.12) 70%); background-size:200% 100%; animation:shimmer 1.3s linear infinite; border-radius:16px; } @keyframes shimmer { to { background-position:-200% 0; } }
.sk-hero { min-height:380px; border-radius:24px; margin-top:12px; } .sk-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:18px; margin-top:24px; } .sk-card { height:300px; }

/* Volar a la bolsa */
.fly { position:fixed; z-index:400; width:64px; height:64px; border-radius:50%; object-fit:cover; pointer-events:none; box-shadow:0 8px 24px rgba(0,0,0,.35); transition:transform .75s cubic-bezier(.5,-0.1,.7,.9), opacity .75s; border:3px solid #fff; background:#fff; }

/* Navegación inferior (solo móvil) */
.bottom-nav { display:none; }

/* ---------- Tableta y móvil ---------- */
@media (max-width:900px) {
  .hero2 { grid-template-columns:1fr; } .h2-right { min-height:260px; order:2; } .h2-left { order:1; }
  .bento { grid-template-columns:1fr 1fr; grid-template-rows:none; } .bt.k0, .bt.k3 { grid-row:auto; grid-column:auto; min-height:240px; } .bt.k1, .bt.k2 { grid-column:1/-1; min-height:150px; }
  .bento.n3, .bento.n2 { grid-template-columns:1fr 1fr; } .bento.n3 .k1, .bento.n3 .k2 { grid-column:1/-1; }
  .head-links { display:none; }
}
@media (max-width:700px) {
  body.store { --head-h:56px; padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom)); }
  body.store .only-mobile { display:inline-grid !important; } body.store .only-desktop { display:none !important; }
  .shell { width:100%; margin:0 0 16px; border-radius:0 0 26px 26px; }
  .shell > main { padding:0 12px 8px; }
  body.store .header { padding:6px 12px; border-radius:0; }
  .head-row { flex-wrap:wrap; gap:8px; min-height:44px; } .head-row .logo { font-size:17px; margin-right:auto; } .head-tools { margin-left:0; gap:2px; }
  .head-search { display:none; order:5; flex:1 1 100%; max-width:none; margin:2px 0 6px; } body.store .header.search-open .head-search { display:block; animation:rise .3s var(--ease); }
  /* Portada compacta: texto → imagen → promos en carrusel horizontal */
  .hero2 { display:flex; flex-direction:column; padding:20px 16px 16px; gap:14px; min-height:0; border-radius:22px; }
  .h2-left { display:contents; } .h2-left > .stack { order:1; } .h2-right { order:2; min-height:0; height:clamp(250px,74vw,330px); border-radius:18px; overflow:hidden; margin:0 -4px; } .promos { order:3; }
  .h2-t h1, .h2-t h2 { font-size:clamp(28px,8.4vw,34px); } .h2-t p { font-size:15px; margin:8px 0 14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .h2-i:not(.cutout)::after { background:none; }
  .h2-dots { bottom:8px; }
  .promos { overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -16px; padding:2px 16px 6px; scrollbar-width:none; } .promos::-webkit-scrollbar { display:none; }
  .pcard2 { flex:0 0 78%; max-width:none; min-height:128px; scroll-snap-align:center; }
  .trust { grid-template-columns:1fr 1fr; padding:14px; margin-top:16px !important; gap:10px; } .trust b { font-size:13px; } .trust span { font-size:12px; } .trust svg { width:22px; height:22px; }
  .bento, .bento.n3, .bento.n2 { grid-template-columns:1fr; gap:12px; } .bt.k0, .bt.k3 { min-height:200px; } .bt.k2, .bt.k1 { min-height:130px; } .bento.n2 .k1 { grid-row:auto; }
  .bt { padding:16px; border-radius:22px; }
  /* Productos en 2 columnas */
  .pgrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .pimg { aspect-ratio:1; margin:8px; } .pbody { padding:2px 10px 12px; } .pprice { font-size:16px; } .pbody h3 { font-size:14px; } .pstore { font-size:12px; }
  .buy { padding:10px 8px; font-size:13px; } .hide-sm { display:none; }
  .steps { grid-template-columns:1fr; }
  /* Cajones como hojas inferiores */
  .drawer { top:auto; left:0; right:0; bottom:0; width:100%; max-height:90dvh; border-radius:26px 26px 0 0; transform:translateY(105%); box-shadow:0 -20px 60px rgba(0,0,0,.35); }
  .drawer.open { transform:none; } .drawer > header { position:relative; padding-top:22px; } .drawer > header::before { content:""; position:absolute; top:8px; left:50%; width:44px; height:5px; margin-left:-22px; border-radius:3px; background:var(--line); }
  .drawer footer { padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
  #bellMenu { position:fixed; left:8px; right:8px; top:64px; min-width:0 !important; width:auto; } #userMenu { position:fixed; right:8px; top:64px; }
  .toasts { bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); }
  /* Barra inferior */
  .bottom-nav { display:grid; grid-template-columns:repeat(4,1fr); position:fixed; left:0; right:0; bottom:0; z-index:70; height:calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:color-mix(in srgb,var(--card) 92%, transparent); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); border-top:1px solid var(--line); transition:transform .35s var(--ease); }
  .bottom-nav a, .bottom-nav button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:var(--nav-h); border:0; background:none; color:var(--muted); font:600 11px inherit; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:color .2s, transform .2s var(--spring); }
  .bottom-nav svg { width:24px; height:24px; transition:transform .3s var(--spring); } .bottom-nav a:active svg, .bottom-nav button:active svg { transform:scale(.85); }
  .bottom-nav [aria-current="page"] { color:var(--btn); } .bottom-nav [aria-current="page"] svg { transform:translateY(-2px) scale(1.1); }
  .bottom-nav [aria-current="page"]::before { content:""; position:absolute; top:0; width:28px; height:3px; border-radius:0 0 4px 4px; background:var(--btn); animation:rise .3s var(--ease); }
  .bottom-nav .badge { position:absolute; top:6px; left:calc(50% + 6px); right:auto; }
  .bottom-nav.hide { transform:translateY(110%); }
}
@media (max-width:380px) { .pcard2 { flex-basis:86%; } .pgrid { gap:10px; } .h2-t h1, .h2-t h2 { font-size:27px; } }
@media (prefers-reduced-motion: reduce) { .stack > *, .stack > .on { transition:none; transform:none; } .pcard, .bt, .pcard2 { transform:none !important; } .sk { animation:none; } .fly { display:none; } }

/* ---------- Efectos y animaciones (móvil y escritorio) ---------- */
.hero2 .h2-t.on h1, .hero2 .h2-t.on h2 { animation:rise .7s var(--ease) both; } .hero2 .h2-t.on p { animation:rise .7s .1s var(--ease) both; } .hero2 .h2-t.on .btn { animation:rise .7s .2s var(--ease) both; }
.hero2 .h2-i.on img { animation:kenburns 9s ease-out forwards; } .hero2 .h2-i.cutout.on img { animation:float-in .9s var(--spring) both; }
@keyframes float-in { from { opacity:0; transform:translateY(24px) scale(.96); } to { opacity:1; transform:none; } }
.promos .pcard2 { animation:rise .6s var(--ease) both; } .promos .pcard2:nth-child(2) { animation-delay:.12s; }
.cat-row .chip { transition:transform .2s var(--spring), background .2s, color .2s; } .cat-row .chip:active { transform:scale(.94); }
.cat-row .chip[aria-pressed="true"] { background:linear-gradient(135deg,var(--btn),#6AA3FF); color:var(--on-btn); border-color:transparent; }
.sec-title h2::after { content:""; display:block; width:44px; height:4px; border-radius:3px; background:linear-gradient(90deg,var(--yellow),var(--btn)); margin-top:8px; transform:scaleX(.3); transform-origin:left; transition:transform .6s var(--ease); }
.sec.in-view .sec-title h2::after, .sec:hover .sec-title h2::after { transform:scaleX(1); }
.pcard.reveal, .bt.reveal { transform:translateY(34px) scale(.96); } .pcard.reveal.in, .bt.reveal.in { transform:none; }
.btn:active, .go:active { transform:scale(.95); }
.bump { animation:bump .5s var(--spring); }
.bottom-nav .badge { animation:pop .4s var(--spring); }
@media (max-width:700px) { .reveal { transition-duration:.55s; } .pcard.reveal, .bt.reveal { transform:translateY(24px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .hero2 .h2-t.on h1, .hero2 .h2-t.on h2, .hero2 .h2-t.on p, .hero2 .h2-t.on .btn, .promos .pcard2, .hero2 .h2-i.on img { animation:none !important; } .sec-title h2::after { transform:none; } }
.h2-imgs { position:absolute; inset:0; }
.h2-right .h2-dots { bottom:12px; } .h2-right .hero-pause { position:absolute; right:8px; bottom:8px; }

/* Ajustes de la auditoría */
.head-row .logo { min-height:44px; display:inline-flex; align-items:center; }
.pbody h3 { line-height:1.55; } .pbody h3 a, .pstore { min-height:26px; } .pstore { padding:2px 0; }
@media (min-width:901px) {
  .hero2 { min-height:0; } .h2-left { padding:clamp(22px,3vw,36px) clamp(22px,3.4vw,44px); gap:16px; } .h2-t h1, .h2-t h2 { font-size:clamp(30px,3.9vw,48px); } .h2-t p { margin:10px 0 14px; }
  .promos .pcard2 { min-height:118px; padding:12px; } .pcard2 b { font-size:18px; } .h2-right { min-height:400px; }
}
.buyrow { display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width:700px) { .buyrow { position:sticky; bottom:calc(var(--nav-h) + 10px + env(safe-area-inset-bottom)); z-index:30; background:color-mix(in srgb,var(--card) 92%, transparent); backdrop-filter:blur(12px); padding:10px; margin:12px -10px 0; border-radius:20px; box-shadow:0 -6px 24px rgba(20,24,31,.12); } .buyrow .btn { flex:1 1 0; } .detail { gap:16px; } }
.bt.k1 .go, .bt.k2 .go, .pcard2 .btn { background:#1D63D8; color:#fff; }

/* ---------- Compra exclusiva por tienda ---------- */
.shopbar { position:sticky; top:64px; z-index:55; display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; padding:10px clamp(12px,2.6vw,28px); background:linear-gradient(90deg,#FFE600,#FFF3A0); color:#14181F; border-bottom:1px solid rgba(20,24,31,.12); animation:rise .35s var(--ease); }
.shopbar[hidden] { display:none; }
.sb-text { display:flex; flex-direction:column; min-width:0; line-height:1.25; } .sb-text b { font-size:15px; } .sb-text span { font-size:12.5px; opacity:.85; }
.sb-actions { display:flex; gap:8px; flex-wrap:wrap; } .shopbar .btn.ghost { color:#14181F; border-color:#14181F; } .shopbar .btn { min-height:44px; }
.dlg-actions.col { flex-direction:column; align-items:stretch; } .dlg-actions.col .btn { width:100%; }
.btn.danger { color:#B3261E; border-color:#B3261E; } .linkbtn.danger-link { color:#B3261E; }
body.shop-mode .head-links { display:none; }
@media not all { :root:not([data-theme="light"]) .btn.danger, :root:not([data-theme="light"]) .linkbtn.danger-link { color:#FF8A80; border-color:#FF8A80; } }
@media (max-width:700px) {
  .shopbar { position:fixed; left:8px; right:8px; bottom:calc(var(--nav-h) + 8px + env(safe-area-inset-bottom)); top:auto; border-radius:18px; z-index:68; box-shadow:0 10px 30px rgba(20,24,31,.25); padding:10px 12px; border:0; }
  .sb-actions { width:100%; } .sb-actions .btn { flex:1 1 0; padding-inline:10px; font-size:13px; }
  body.shop-mode { padding-bottom:calc(var(--nav-h) + 130px + env(safe-area-inset-bottom)); }
  .buyrow { bottom:calc(var(--nav-h) + 126px + env(safe-area-inset-bottom)); }
}
@media (max-width:700px) { .toasts { top:64px; bottom:auto; } }

/* Pie de página */
.foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:24px 32px; } .foot-h { font-size:14px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:0 0 8px; font-weight:700; }
.footer nav { display:flex; flex-direction:column; align-items:flex-start; } .footer nav a { color:var(--fg); text-decoration:none; font-size:14px; padding:10px 0; min-height:44px; display:inline-flex; align-items:center; } .footer nav a:hover { color:var(--btn); text-decoration:underline; }
@media (max-width:700px) { .foot-grid { grid-template-columns:1fr; } .shell > .footer { padding-bottom:calc(26px + 0px); } }

/* Bolsa: todo el panel se desplaza (el formulario de envío vive en el pie) y no arrastra la página de fondo */
#bagDrawer { overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
#bagDrawer > header { position:sticky; top:0; z-index:2; background:var(--bg); flex:none; }
#bagDrawer .content { flex:none; overflow:visible; }
#bagDrawer > footer { flex:none; }
.drawer .content { overscroll-behavior:contain; }
html.drawer-lock, html.drawer-lock body { overflow:hidden; }


/* Línea de tiempo horizontal animada del pedido */
.tlh-wrap { overflow-x:auto; padding:10px 2px 14px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.tlh { list-style:none; margin:0; padding:0; display:flex; min-width:max(100%, calc(var(--n) * 90px)); }
.tlh li { position:relative; flex:1 1 0; min-width:88px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:0 4px; scroll-snap-align:center; color:var(--muted); animation:tlh-in .5s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i) * 70ms); }
.tlh li b { font-size:13.5px; font-weight:600; line-height:1.25; max-width:110px; }
.tlh li small { font-size:12px; color:var(--muted); }
.tlh-note { font-size:11px; opacity:.85; }
.tlh li::before { content:""; position:absolute; top:24px; right:50%; width:100%; height:4px; border-radius:4px; background:var(--line); z-index:0; }
.tlh li:first-child::before { display:none; }
.tlh li::after { content:""; position:absolute; top:24px; right:50%; width:100%; height:4px; border-radius:4px; background:linear-gradient(90deg,var(--btn),var(--yellow)); transform:scaleX(0); transform-origin:left; z-index:0; }
.tlh li:first-child::after { display:none; }
.tlh-done::after, .tlh-current::after { animation:tlh-fill .7s cubic-bezier(.4,0,.2,1) forwards; animation-delay:calc(var(--i) * 140ms + 150ms); }
.tlh-tile { position:relative; z-index:1; width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:var(--card); color:var(--muted); border:1px solid var(--line); box-shadow:0 4px 12px rgba(20,24,31,.06); transition:transform .3s, background .3s, color .3s; }
.tlh-done .tlh-tile { background:color-mix(in srgb, var(--btn) 14%, var(--card)); color:var(--btn); border-color:color-mix(in srgb, var(--btn) 45%, transparent); animation:tlh-pop .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay:calc(var(--i) * 140ms + 300ms); }
.tlh-done b, .tlh-current b { color:var(--fg); }
.tlh-current .tlh-tile { background:linear-gradient(135deg,var(--btn),#2f7bff); color:#fff; border-color:transparent; transform:scale(1.1); box-shadow:0 8px 22px color-mix(in srgb, var(--btn) 45%, transparent); animation:tlh-pop .55s cubic-bezier(.3,1.6,.5,1) both; animation-delay:calc(var(--i) * 140ms + 300ms); } /* sin brillo ni rebote continuos: causaban el "temblor" de la página */
.tlh-current .tlh-tile svg { animation:none; }
.tlh-current small { color:var(--btn); font-weight:600; }
.tlh-bad .tlh-tile { background:#fde8e8; color:#d33; border-color:#f3b4b4; } .tlh-bad b { color:#d33; }
.tlh-warn .tlh-tile { background:#fff6dc; color:#b7791f; border-color:#f0d58a; } .tlh-warn b { color:#b7791f; }
.tlh-bad::after, .tlh-warn::after { background:#d33; animation:tlh-fill .6s ease forwards; }
.tlh-next { display:flex; align-items:center; gap:10px; margin:2px 0 0; padding:12px 16px; border-radius:16px; background:color-mix(in srgb, var(--btn) 9%, var(--card)); color:var(--fg); font-weight:600; font-size:14.5px; }
.tlh-next.ok { background:color-mix(in srgb, #1a9b5b 12%, var(--card)); } .tlh-next.bad { background:#fde8e8; color:#b02a2a; }
.tlh-clock { flex:none; width:20px; height:20px; border-radius:50%; border:2px solid var(--btn); position:relative; }
.tlh-clock::before, .tlh-clock::after { content:""; position:absolute; left:50%; top:50%; width:2px; background:var(--btn); transform-origin:bottom; border-radius:2px; }
.tlh-clock::before { height:6px; margin:-6px 0 0 -1px; }
.tlh-clock::after { height:4px; margin:-4px 0 0 -1px; transform:rotate(90deg); }
.tlh-next.ok .tlh-clock, .tlh-next.bad .tlh-clock { display:none; }
@keyframes tlh-in { from { opacity:0; transform:translateY(12px); } }
@keyframes tlh-fill { to { transform:scaleX(1); } }
@keyframes tlh-pop { 0% { transform:scale(.6); } }
@keyframes tlh-glow { 50% { box-shadow:0 8px 30px color-mix(in srgb, var(--btn) 70%, transparent), 0 0 0 8px color-mix(in srgb, var(--btn) 14%, transparent); } }
@keyframes tlh-bob { 50% { transform:translateY(-2px) scale(1.06); } }
@keyframes tlh-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tlh li, .tlh-tile, .tlh-current .tlh-tile, .tlh-current .tlh-tile svg, .tlh-clock::before, .tlh-clock::after { animation:none !important; } .tlh-done::after, .tlh-current::after, .tlh-bad::after, .tlh-warn::after { animation:none; transform:scaleX(1); } }
@media (max-width: 600px) { .tlh li b { font-size:12.5px; } .tlh-tile { width:46px; height:46px; } .tlh li::before, .tlh li::after { top:21px; } }
.order details > summary { cursor:pointer; font-weight:600; min-height:36px; display:flex; align-items:center; }


/* ===== Etapa 1: inicio claro (zona, intención, portada compacta, tiendas) ===== */
.zone-btn { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:6px 12px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--card); color:var(--fg); font:inherit; cursor:pointer; text-align:left; max-width:230px; flex:none; transition:border-color .2s, transform .2s var(--spring); }
.zone-btn:hover { border-color:var(--btn); } .zone-btn:active { transform:scale(.97); }
.zone-btn > span { display:grid; line-height:1.15; min-width:0; } .zone-btn small { font-size:11px; color:var(--muted); } .zone-btn b { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zone-btn svg:first-child { color:var(--btn); flex:none; } .zchev { color:var(--muted); flex:none; }
.zone-list { display:grid; gap:6px; max-height:46vh; overflow:auto; padding:2px; }
.zone-opt { display:flex; align-items:center; gap:10px; min-height:48px; padding:8px 12px; border:1px solid var(--line); border-radius:14px; cursor:pointer; }
.zone-opt:has(input:checked) { border-color:var(--btn); background:color-mix(in srgb, var(--btn) 8%, var(--card)); }
.zone-opt input { width:20px; height:20px; accent-color:var(--btn); } .zone-opt span { flex:1; } .zone-opt b { font-size:14px; }

.intent { display:grid; gap:14px; padding-top:14px; }
.igroup h2 { font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 8px; font-weight:700; }
.irow { display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding:2px; scroll-snap-type:x proximity; } .irow::-webkit-scrollbar { display:none; }
.itile { flex:none; scroll-snap-align:start; min-height:56px; display:inline-flex; align-items:center; gap:10px; padding:10px 18px 10px 12px; border:1px solid var(--line); border-radius:18px; background:var(--card); color:var(--fg); font:600 15px inherit; cursor:pointer; transition:transform .2s var(--spring), border-color .2s, background .2s, box-shadow .2s; }
.itile svg { width:26px; height:26px; padding:5px; border-radius:10px; background:color-mix(in srgb, var(--btn) 12%, var(--card)); color:var(--btn); box-sizing:content-box; }
.itile:hover { border-color:var(--btn); transform:translateY(-2px); box-shadow:0 8px 20px rgba(20,24,31,.08); } .itile:active { transform:scale(.96); }
.itile[aria-pressed="true"] { background:linear-gradient(135deg,var(--btn),#4c8dff); color:var(--on-btn); border-color:transparent; } .itile[aria-pressed="true"] svg { background:rgba(255,255,255,.2); color:#fff; }
.igroup:first-child .itile svg { background:color-mix(in srgb, var(--yellow) 40%, var(--card)); color:#8a6a00; }
.again { display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px 16px; border-radius:16px; background:color-mix(in srgb, var(--btn) 9%, var(--card)); color:var(--fg); text-decoration:none; font-size:14px; } .again b { flex:1; } .again svg { color:var(--btn); }

/* Portada compacta: no ocupa toda la primera pantalla */
.hero2.compact { margin-top:14px; } .hero2.compact .h2-left { padding:clamp(18px,2.6vw,30px); gap:12px; } .hero2.compact .h2-t h1, .hero2.compact .h2-t h2 { font-size:clamp(24px,3.2vw,38px); }
.hero2.compact .h2-t p { margin:8px 0 12px; font-size:clamp(14px,1.3vw,16px); } .hero2.compact .h2-right { min-height:240px; }
@media (max-width:700px) { .hero2.compact { padding:16px 14px 12px; } .hero2.compact .h2-t h1, .hero2.compact .h2-t h2 { font-size:clamp(22px,6.6vw,28px); } .hero2.compact .h2-right { height:clamp(130px,38vw,170px); } }

/* Tiendas */
.bgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:16px; }
.bcard { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:22px; overflow:hidden; transition:transform .25s var(--spring), box-shadow .25s; }
.bcard:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(20,24,31,.1); }
.bcover { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; } .bcover > img:not(.avatar) { width:100%; height:100%; object-fit:cover; display:block; }
.bcover .avatar { position:absolute; left:14px; bottom:-0px; transform:translateY(0); width:52px; height:52px; border-radius:14px; border:3px solid var(--card); object-fit:cover; background:var(--card); }
.bbody { display:flex; flex-direction:column; gap:8px; padding:14px 16px 16px; flex:1; }
.brow { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; } .brow h3 { font-size:18px; margin:0; } .brow h3 a { color:inherit; text-decoration:none; }
.bdesc { margin:0; font-size:14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bmeta { list-style:none; margin:0; padding:0; display:grid; gap:3px; font-size:13.5px; color:var(--muted); } .bmeta li::before { content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--btn); margin-right:8px; vertical-align:middle; } .bmeta b { color:var(--fg); }
.bbody .btn { margin-top:auto; width:100%; justify-content:center; }
.res-h, .cat-block-h h3 { font-size:17px; margin:0 0 10px; } .cat-block { margin-top:18px; } .cat-block-h { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.help .trust { margin-top:18px; }

/* Cabecera: la búsqueda siempre visible y la zona a mano */
@media (max-width:700px) {
  .head-search, body.store .header .head-search { display:block !important; order:5; flex:1 1 100%; max-width:none; margin:2px 0 6px; }
  .zone-btn { order:4; flex:1 1 100%; max-width:none; min-height:44px; } .zone-btn > span { flex:1; }
  .head-row .logo { margin-right:auto; }
  .bottom-nav { grid-template-columns:repeat(5,1fr); }
  .bottom-nav a, .bottom-nav button { font-size:10.5px; }
  .itile { min-height:52px; padding:8px 14px 8px 10px; font-size:14px; }
}
@media (prefers-reduced-motion: reduce) { .bcard, .itile, .zone-btn { transition:none; } .bcard:hover, .itile:hover { transform:none; } }


/* ===== Etapa 2: opciones, carrito en 3 pasos y barra inferior ===== */
.opt-dlg { max-width:min(440px, calc(100vw - 24px)); }
.optgrp { border:1px solid var(--line); border-radius:16px; padding:8px 12px 10px; margin:0 0 10px; display:grid; gap:2px; } .optgrp legend { padding:0 6px; font-weight:600; }
.optgrp em { font-style:normal; font-weight:600; font-size:12px; padding:2px 8px; border-radius:99px; margin-left:6px; } .optgrp .req { background:color-mix(in srgb, var(--btn) 14%, var(--card)); color:var(--btn); } .optgrp .optl { background:var(--soft); color:var(--muted); }
.optgrp .opt { display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; } .optgrp .opt span { flex:1; } .optgrp input { width:20px; height:20px; accent-color:var(--btn); } .optgrp input:disabled + span { opacity:.5; text-decoration:line-through; }
.steps3 { list-style:none; display:flex; gap:6px; margin:0 0 14px; padding:0; counter-reset:s; }
.steps3 li { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; font-size:11.5px; color:var(--muted); position:relative; }
.steps3 li::before { content:""; position:absolute; top:13px; right:50%; width:100%; height:3px; background:var(--line); z-index:0; } .steps3 li:first-child::before { display:none; }
.steps3 li.done::before, .steps3 li.on::before { background:var(--btn); }
.steps3 em { position:relative; z-index:1; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-weight:700; font-size:13px; background:var(--card); border:2px solid var(--line); }
.steps3 .on em { background:var(--btn); color:var(--on-btn); border-color:var(--btn); box-shadow:0 0 0 4px color-mix(in srgb, var(--btn) 20%, transparent); } .steps3 .done em { background:color-mix(in srgb, var(--btn) 16%, var(--card)); color:var(--btn); border-color:var(--btn); } .steps3 .on { color:var(--fg); font-weight:600; }
.cartbar { display:none; }
@media (max-width:700px) {
  .cartbar:not([hidden]) { display:flex; align-items:center; justify-content:space-between; gap:10px; position:fixed; left:10px; right:10px; bottom:calc(var(--nav-h) + 8px + env(safe-area-inset-bottom)); z-index:69; padding:10px 12px 10px 16px; border-radius:18px; background:var(--btn); color:var(--on-btn); box-shadow:0 10px 30px rgba(20,24,31,.28); animation:rise .35s var(--ease); }
  .cartbar b { display:block; font-size:15px; } .cartbar small { font-size:12px; opacity:.9; }
  .cartbar .btn { background:#fff; color:#14181F; min-height:44px; flex:none; }
  body.has-cartbar .shell > main { padding-bottom:84px; } body.has-cartbar .buyrow { bottom:calc(var(--nav-h) + 82px + env(safe-area-inset-bottom)); }
  body.drawer-open .cartbar, html.drawer-lock .cartbar { display:none !important; }
}


/* ===== Etapa 3: detalles por categoría, cobertura, recompra, chat ===== */
.pdetails { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:10px 0; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--card); font-size:14px; }
.pdetails dt { font-weight:600; color:var(--muted); } .pdetails dd { margin:0; }
.conds { font-size:13.5px; color:var(--muted); margin:8px 0; padding:10px 12px; border-left:3px solid var(--btn); background:color-mix(in srgb, var(--btn) 6%, var(--card)); border-radius:0 12px 12px 0; }
.again.repeat { width:100%; border:0; font:inherit; text-align:left; cursor:pointer; }
.bref { display:block; font-style:normal; font-size:11.5px; opacity:.8; margin-bottom:2px; }
@media (max-width:520px) { .pdetails { grid-template-columns:1fr; gap:0; } .pdetails dd { margin-bottom:8px; } }
.pdetails dd, .conds { overflow-wrap:anywhere; }


/* Galería y descripción enriquecida de la ficha */
.gallery { display:grid; gap:10px; } .gthumbs { display:flex; gap:8px; overflow-x:auto; padding:2px; } .gthumb { flex:none; width:64px; height:64px; padding:0; border:2px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); cursor:pointer; } .gthumb[aria-pressed="true"] { border-color:var(--btn); } .gthumb img { width:100%; height:100%; object-fit:cover; display:block; }
.rich p { margin:0 0 8px; } .rich ul { margin:0 0 8px; padding-left:20px; }
.optgrp span[data-out] { opacity:.5; }

/* En teléfonos el fondo no se anima: el movimiento constante se percibía como temblor de la página. */
@media (max-width: 900px) { body::before, body::after { animation: none !important; } }

/* Defectos 1, 3 y 7: carruseles sin scroll lateral de la página; barras fijas apiladas sin encimarse */
.cfg-dlg, .cfg-dlg .cfg-body { overflow-x:hidden; max-width:100%; }
.cfg-grp, .cfg-fl, .cfg-acc { min-width:0; max-width:100%; }
.cfg-car, .cfg-scroll { max-width:100%; min-width:0; overscroll-behavior-x:contain; touch-action:pan-x pan-y; }
@media (max-width:700px) {
  /* Aviso de tienda: franja delgada arriba, en el flujo, una línea; el carrito vive en su barra azul */
  .shopbar { position:static; left:auto; right:auto; bottom:auto; border-radius:0; box-shadow:none; padding:6px 12px; gap:6px; z-index:auto; flex-wrap:nowrap; font-size:13px; }
  .shopbar .sb-text span, .shopbar [data-viewcart] { display:none; } .shopbar .sb-text b { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .shopbar .sb-actions { width:auto; flex:none; flex-wrap:nowrap; } .shopbar .btn { min-height:36px; padding:0 12px; font-size:12.5px; }
  .shopbar .sb-x { background:none; border:0; min-width:36px; min-height:36px; font-size:20px; line-height:1; cursor:pointer; color:#14181F; border-radius:50%; }
  body.shop-mode { padding-bottom:0; }
  /* Barras del fondo, de abajo hacia arriba: navegación → barra azul del carrito → botones del producto */
  .buyrow { position:fixed; left:0; right:0; bottom:calc(var(--nav-h) + env(safe-area-inset-bottom)); margin:0; border-radius:20px 20px 0 0; z-index:40; }
  body.has-cartbar .buyrow { bottom:calc(var(--nav-h) + 84px + env(safe-area-inset-bottom)); }
  main:has(.buyrow) { padding-bottom:calc(var(--nav-h) + 170px); }
  body.has-cartbar main:has(.buyrow) { padding-bottom:calc(var(--nav-h) + 250px); }
}

/* Defecto 10: menú de cuenta como hoja inferior en el celular, con la página de atrás bloqueada */
html.um-lock, html.um-lock body { overflow:hidden; }
.um-back { position:fixed; inset:0; background:rgba(14,27,51,.45); z-index:79; } .um-back[hidden] { display:none; }
@media (max-width:700px) {
  #userMenu { position:fixed; left:0; right:0; bottom:0; top:auto; margin:0; width:auto; max-width:none; max-height:calc(100dvh - 72px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; border-radius:22px 22px 0 0; padding-bottom:calc(16px + env(safe-area-inset-bottom)); z-index:80; box-shadow:0 -10px 40px rgba(14,27,51,.35); }
  #userMenu a, #userMenu button { min-height:48px; display:flex; align-items:center; }
}

/* Selectores de variante: color en círculos y talla/tamaño en píldoras */
.vpills { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 2px; } .vpill { position:relative; cursor:pointer; } .vpill input { position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.vp-in { display:inline-grid; place-items:center; min-width:48px; min-height:48px; padding:0 16px; border:1.5px solid var(--line,#D9DFEA); border-radius:999px; background:var(--card,#fff); color:var(--fg,#18212F); font:700 15px/1 inherit; transition:background .15s, border-color .15s, color .15s, box-shadow .15s; }
.vpill input:checked + .vp-in { background:var(--rv-blue,#2463D4); border-color:var(--rv-blue,#2463D4); color:#fff; }
.vpill.sw .vp-in { width:44px; min-width:44px; height:44px; min-height:44px; padding:0; border-radius:50%; background:var(--c); border:2px solid rgba(24,33,47,.25); } .vpill.sw input:checked + .vp-in { box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--rv-blue,#2463D4); border-color:rgba(24,33,47,.25); background:var(--c); }
.vpill.off { opacity:.45; cursor:not-allowed; } .vpill.off .vp-in, .vpill .vp-in[data-out] { text-decoration:line-through; } .vpill.sw.off .vp-in::after, .vpill.sw .vp-in[data-out]::after { content:''; position:absolute; width:2px; height:60%; background:#B3261E; transform:rotate(45deg); }
.vpill input:focus-visible + .vp-in { outline:3px solid var(--fg,#18212F); outline-offset:3px; }
.vp-sel { margin:2px 0 8px; font-size:13px; min-height:1em; }
@media (prefers-reduced-motion:reduce) { .vp-in { transition:none; } }
.vpill:has(input:disabled) { opacity:.45; cursor:not-allowed; }

.opt-hero { display:block; width:100%; max-height:220px; object-fit:cover; border-radius:14px; margin:0 0 10px; background:#e6ebf4; }

/* Frases de Mati dentro de la interfaz (tienda, carrito, seguimiento) */
.mv-line, .tlh-mati { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 14px; color: #3d4a5e; font-weight: 600; }
.mv-line img, .tlh-mati img { border-radius: 50%; flex: none; background: #DFF1F4; }
.tlh-mati { font-size: 13.5px; margin-top: 6px; }

/* Pedidos del cliente: la flecha deja claro que cada pedido se puede minimizar */
.acc-sum { position: relative; padding-right: 52px !important; cursor: pointer; list-style: none; }
.acc-sum::-webkit-details-marker { display: none; }
.acc-sum::after { content: ""; position: absolute; right: 10px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: #EAF1FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232463D4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 20px no-repeat; transition: transform .25s ease; }
.acc-det[open] > .acc-sum::after { transform: rotate(180deg); }
.acc-sum:focus-visible { outline: 3px solid #2463D4; outline-offset: 2px; border-radius: 12px; }
.acc-bar { margin: 0 0 12px; }
@media (prefers-reduced-motion: reduce) { .acc-sum::after { transition: none; } }

/* Botón de Google (cumple las pautas de marca: fondo blanco, logotipo a color) */
.g-box { margin: 12px 0 4px; } .g-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border: 1.5px solid #DADCE0; border-radius: 999px; background: #fff; color: #3C4043; font: 600 15px/1 Inter, system-ui, sans-serif; text-decoration: none; transition: box-shadow .2s, background .2s; } .g-btn:hover { background: #F8FAFF; box-shadow: 0 2px 8px rgba(60, 64, 67, .18); } .g-btn:focus-visible { outline: 3px solid #1A73E8; outline-offset: 2px; }
.g-note { margin: 8px 0 0; font-size: 12.5px; color: #586475; text-align: center; } .g-note a { color: #1953DA; }
.g-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 2px; color: #7B8798; font-size: 12.5px; } .g-or::before, .g-or::after { content: ""; flex: 1; height: 1px; background: #E3E9F5; }

/* Ficha de producto en el celular: la barra azul del carrito se minimiza (una línea, sin la nota de envío) y los botones del producto se colocan justo encima, según la altura REAL de la barra (--cartbar-h la mide app.js). */
@media (max-width: 700px) {
  body:has(.buyrow) .cartbar small { display: none; }
  body:has(.buyrow) .cartbar:not([hidden]) { padding-block: 6px; }
  body:has(.buyrow) .cartbar b { font-size: 14px; }
  body.has-cartbar .buyrow { bottom: calc(var(--nav-h) + var(--cartbar-h, 60px) + 14px + env(safe-area-inset-bottom)); }
  body.has-cartbar main:has(.buyrow) { padding-bottom: calc(var(--nav-h) + var(--cartbar-h, 60px) + 190px); }
}