/* Botones de la web (aprobados 28/10): píldora con brillo arriba, aro fino por dentro y resplandor del mismo color.
   Se carga después del tema activo para que los botones se vean igual con cualquier tema. Animaciones en /botones.js. */
:root{--navy1:#f2d283;--navy2:#a87c20;--navy:#a5802a;--navy-glow:rgba(206,161,53,.85);--spring:cubic-bezier(.34,1.56,.64,1)}

.btn{--c1:#38342d;--c2:#1f1d19;--gl:rgba(0,0,0,.6);--tx:var(--fg);--ring:rgba(255,255,255,.22);
  --sh:inset 0 0 0 3px var(--c2),inset 0 0 0 4.5px var(--ring),inset 0 -6px 12px rgba(0,0,0,.22),0 10px 24px -10px var(--gl),0 2px 0 rgba(0,0,0,.35);
  position:relative;isolation:isolate;overflow:hidden;border-radius:999px;border:1px solid rgba(255,255,255,.16);color:var(--tx)!important;
  /* !important: el tema trae fondos y sombras por variante (y al pasar el ratón) que aquí se reemplazan por variables */
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.05) 48%,rgba(255,255,255,0) 52%),linear-gradient(180deg,var(--c1),var(--c2))!important;
  box-shadow:var(--sh)!important;
  font-weight:700;letter-spacing:.1em;text-shadow:0 1px 1px rgba(0,0,0,.25);-webkit-tap-highlight-color:transparent;
  transition:transform .18s var(--spring),box-shadow .25s ease,filter .2s ease,opacity .2s ease}
.btn:active{transform:scale(.95) translateY(2px);transition-duration:.08s;
  --sh:inset 0 0 0 3px var(--c2),inset 0 0 0 4.5px var(--ring),inset 0 4px 12px rgba(0,0,0,.35),0 4px 12px -6px var(--gl)}
.btn:disabled{transform:none;filter:saturate(.4)}
.btn.sm{padding:0 14px;--sh:inset 0 0 0 2px var(--c2),inset 0 0 0 3px var(--ring),0 6px 16px -8px var(--gl),0 2px 0 rgba(0,0,0,.35)}
.btn.sm:active{--sh:inset 0 0 0 2px var(--c2),inset 0 0 0 3px var(--ring),inset 0 3px 8px rgba(0,0,0,.35)}
/* principal: dorado con un brillo que cruza al pasar o tocar */
.btn.pri,.btn.blue{text-shadow:none}
.btn.pri{--c1:var(--navy1);--c2:var(--navy2);--gl:var(--navy-glow);--tx:#1a1306;--ring:rgba(255,246,220,.6);border-color:#e4b956}
.btn.pri::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);transform:translateX(-120%)}
.btn.pri.brilla::before{animation:btn-brillo .75s cubic-bezier(.23,1,.32,1)}
@keyframes btn-brillo{to{transform:translateX(120%)}}
.btn.blue{--c1:#2a2620;--c2:#0b0a08;--gl:rgba(226,180,72,.55);--tx:#f2d283;--ring:rgba(249,236,206,.55);border-color:#eeca75}
.btn.ghost{--c1:rgba(45,42,37,.55);--c2:rgba(23,21,18,.55);--ring:rgba(255,255,255,.1);--gl:rgba(0,0,0,.4)}
.btn.danger{--tx:var(--bad);--ring:rgba(255,123,114,.25);border-color:rgba(255,123,114,.45)}
.btn.mayor{--c1:#48433a;--c2:#0a0a09;--gl:rgba(0,0,0,.9);--tx:var(--cream);--ring:rgba(216,169,74,.45);border-color:rgba(216,169,74,.5)}
.btn[href*="wa.me"],.btn.wa{--c1:#3ff08a;--c2:#13923f;--gl:rgba(37,211,102,.8);--tx:#fff;--ring:rgba(220,255,232,.55);border-color:#3be884}
@media (hover:hover) and (pointer:fine){
  .btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.1) saturate(1.1)}
  .btn.pri:hover:not(:disabled)::before{animation:btn-brillo .75s cubic-bezier(.23,1,.32,1)}
}
.cookie .btn,.nav .btn{letter-spacing:.06em;padding:0 12px}
/* botones altos de varias líneas: esquinas redondeadas en vez de píldora */
.extra .btn,.may-nav .btn,.choices .btn{border-radius:18px}
.may-nav .btn[aria-pressed="true"]{--c1:var(--navy1);--c2:var(--navy2);--gl:var(--navy-glow);--tx:#1a1306;--ring:rgba(255,246,220,.6);border-color:#e4b956}

/* onda de luz desde el dedo */
.btn-onda{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);background:radial-gradient(circle,rgba(255,255,255,.45),rgba(255,255,255,0) 70%);animation:btn-onda .6s cubic-bezier(.23,1,.32,1) forwards}
@keyframes btn-onda{to{transform:scale(1);opacity:0}}

/* opción elegida, contador del carrito y copiar */
.opt-card{transition:transform .18s var(--spring),border-color .2s,background .3s,box-shadow .3s}
.opt-card:active{transform:scale(.97)}
.opt-card[aria-checked="true"]{border-color:#d9ae4a;background:linear-gradient(180deg,rgba(206,161,53,.18),rgba(206,161,53,.03));box-shadow:0 0 0 3px rgba(206,161,53,.18)}
.opt-card[aria-checked="true"] .ic svg{color:#f3d89b}
.badge{background:var(--navy);color:#1a1306;box-shadow:0 0 10px var(--navy-glow)}
.badge.salta,.cart-btn.salta{animation:btn-salta .5s var(--spring)}
@keyframes btn-salta{35%{transform:scale(1.25)}}
.copy{border-radius:999px;padding:5px 10px;transition:transform .15s var(--spring),color .2s,border-color .2s,background-color .2s}
.copy:active{transform:scale(.92)}
.copy.hecho{color:var(--ok);border-color:rgba(74,222,128,.5);background:rgba(74,222,128,.08);animation:btn-pop .35s var(--spring)}
@keyframes btn-pop{40%{transform:scale(1.08)}}

@media (prefers-reduced-motion:reduce){.btn,.btn::before,.btn-onda,.opt-card,.copy,.badge{animation:none!important;transition:none!important}}
/* botón del catálogo en PDF (Maikol Mayoreo) */
.catpdf{margin-top:16px;display:grid;gap:8px}.catpdf .btn{width:100%}.catpdf .hint{margin:0}