/* 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:#2c46c8;--navy2:#08124f;--navy:#1f34b0;--navy-glow:rgba(40,70,220,.85);--spring:cubic-bezier(.34,1.56,.64,1)}

.btn{--c1:#26303f;--c2:#141a24;--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: azul profundo con un brillo que cruza al pasar o tocar */
.btn.pri{--c1:var(--navy1);--c2:var(--navy2);--gl:var(--navy-glow);--tx:#fff;--ring:rgba(190,205,255,.55);border-color:#4a63f0}
.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:#6c79ff;--c2:#2630c4;--gl:rgba(58,70,240,.95);--tx:#fff;--ring:rgba(200,210,255,.55);border-color:#6470ff}
.btn.ghost{--c1:rgba(30,38,52,.55);--c2:rgba(14,19,27,.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:#3a3f48;--c2:#07090c;--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:#fff;--ring:rgba(190,205,255,.55);border-color:#4a63f0}

/* 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:#3d55e6;background:linear-gradient(180deg,rgba(40,70,220,.18),rgba(40,70,220,.03));box-shadow:0 0 0 3px rgba(40,70,220,.18)}
.opt-card[aria-checked="true"] .ic svg{color:#8fa2ff}
.badge{background:var(--navy);color:#fff;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}}