/* ============================================================
   SISTEMA DE BOTONES (2026-10-18). Un solo lenguaje para toda la web:
     - Principal: pastilla marfil llena (oscura en el tema claro), con un
       brillo que la cruza de vez en cuando, imán suave en ordenador, onda
       al tocar y estado "trabajando → hecho" (aria-busy / .is-hecho).
     - Secundario: la misma pastilla con borde; el borde se ilumina donde
       está el dedo o el ratón.
     - Enlace: texto con flecha que avanza y línea que se dibuja.
   Se carga la ÚLTIMA en cada página. Los selectores llevan :is(…, #b#b)
   a propósito: eso les da peso de dos ids y así mandan sobre los estilos
   propios de cada página (el metalizado de Pro, el gris de la Mesa…) sin
   tener que tocarlos uno a uno. Comportamiento: js/core/botones.js.
   ============================================================ */
:root{
  --bp-bg:#EDEDEB;--bp-tx:#08080c;--bp-sombra:rgba(237,237,235,.14);--bp-brillo:rgba(255,255,255,.9);
  --bs-bd:rgba(237,237,235,.3);--bs-tx:#EDEDEB;--bs-bg:rgba(237,237,235,.03);--bs-luz:rgba(237,237,235,.95);
}
html[data-theme="alba"]{
  --bp-bg:#1E1B17;--bp-tx:#FAF1E3;--bp-sombra:rgba(30,27,23,.18);--bp-brillo:rgba(255,248,235,.35);
  --bs-bd:rgba(30,27,23,.3);--bs-tx:#1E1B17;--bs-bg:rgba(30,27,23,.02);--bs-luz:rgba(30,27,23,.85);
}

/* ---------- Base común ---------- */
:is(.action-btn,.btn-ritual,.btn-enter,.config-btn,#b#b){
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:46px;padding:0 26px;border-radius:999px;
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;line-height:1.2;
  text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transform:translate(var(--imx,0px),var(--imy,0px)) scale(var(--esc,1));
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,background-color .25s ease,border-color .25s ease,color .25s ease,opacity .2s ease;
}
:is(.action-btn,.btn-ritual,.btn-enter,.config-btn,#b#b):active{--esc:.965}
:is(.action-btn,.btn-ritual,.btn-enter,.config-btn,#b#b):focus-visible{outline:2px solid var(--bs-luz);outline-offset:3px}
:is(.action-btn,.btn-ritual,.btn-enter,.config-btn,#b#b):disabled,
:is(.action-btn,.btn-ritual,.btn-enter,.config-btn,#b#b)[aria-disabled="true"]{opacity:.45;cursor:default;--esc:1;box-shadow:none}

/* ---------- Principal ---------- */
:is(.action-btn.primary,.action-btn.dark,.btn-ritual,#b#b){
  min-height:48px;background:var(--bp-bg);color:var(--bp-tx);border:0;
  box-shadow:0 10px 28px var(--bp-sombra),inset 0 -2px 0 rgba(0,0,0,.08);
}
:is(.action-btn.primary,.action-btn.dark,.btn-ritual,#b#b):hover{background:var(--bp-bg);color:var(--bp-tx);box-shadow:0 14px 36px var(--bp-sombra),inset 0 -2px 0 rgba(0,0,0,.08)}
/* Brillo que cruza (js/core/botones.js pone .b-brilla a los visibles). */
:is(.action-btn.primary,.action-btn.dark,.btn-ritual,#b#b)::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,var(--bp-brillo) 50%,transparent 65%);transform:translateX(-130%);
}
:is(.action-btn.primary,.action-btn.dark,.btn-ritual,#b#b).b-brilla::before{animation:b-brillo 7s var(--b-retraso,1.2s) ease-in-out infinite}
@keyframes b-brillo{0%{transform:translateX(-130%)}14%,100%{transform:translateX(130%)}}

/* Trabajando → hecho (sin cambiar de tamaño). */
:is(.action-btn,.btn-ritual,.btn-enter,.config-btn,#b#b)[aria-busy="true"]{color:transparent !important;pointer-events:none;opacity:1}
:is(.action-btn,.btn-ritual,.btn-enter,.config-btn,#b#b)[aria-busy="true"]::after{
  content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:currentColor;color:var(--bp-tx);box-shadow:-12px 0 0 0 var(--bp-tx),12px 0 0 0 var(--bp-tx);animation:b-puntos 1s ease-in-out infinite;
}
:is(.action-btn:not(.primary):not(.dark),.btn-enter,.config-btn,#b#b)[aria-busy="true"]::after{color:var(--bs-tx);background:var(--bs-tx);box-shadow:-12px 0 0 0 var(--bs-tx),12px 0 0 0 var(--bs-tx)}
@keyframes b-puntos{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.b-check{display:inline-block;width:16px;height:16px;flex:none}
.b-check path{stroke-dasharray:24;stroke-dashoffset:24;animation:b-check .45s .05s ease forwards}
@keyframes b-check{to{stroke-dashoffset:0}}

/* Onda al tocar (js/core/botones.js añade .b-onda en el punto del dedo). */
.b-onda{position:absolute;z-index:-1;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,currentColor 0,transparent 62%);opacity:.18;transform:scale(.1);animation:b-onda .6s ease-out forwards}
@keyframes b-onda{to{transform:scale(1);opacity:0}}

/* ---------- Secundario ---------- */
:is(.action-btn:not(.primary):not(.dark),.btn-enter,.config-btn,#b#b){
  min-height:46px;background:var(--bs-bg);color:var(--bs-tx);border:1px solid var(--bs-bd);box-shadow:none;margin-top:0;
}
:is(.action-btn:not(.primary):not(.dark),.btn-enter,.config-btn,#b#b):hover{background:color-mix(in srgb,var(--bs-tx) 7%,transparent);color:var(--bs-tx);border-color:var(--bs-bd)}
:is(.action-btn:not(.primary):not(.dark),.btn-enter,.config-btn,#b#b)::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .25s ease;
  background:radial-gradient(110px circle at var(--bx,50%) var(--by,50%),var(--bs-luz),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
}
:is(.action-btn:not(.primary):not(.dark),.btn-enter,.config-btn,#b#b).b-luz::before{opacity:1}

/* ---------- Enlaces con flecha ---------- */
#hero .hero-cta-ghost{position:relative}
#hero .hero-cta-ghost::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;opacity:.4;transform-origin:left;transform:scaleX(.0);transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s}
#hero .hero-cta-ghost:hover::after,#hero .hero-cta-ghost:focus-visible::after{transform:scaleX(1);opacity:.7}
.b-flecha{display:inline-block;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
a:hover > .b-flecha,button:hover > .b-flecha,a:focus-visible > .b-flecha{transform:translateX(5px)}

/* Mi Universo: los secundarios ahí son enlaces subrayados a propósito. */
#universo-principal .action-btn:not(.primary)::before{display:none}

@media (prefers-reduced-motion:reduce){
  :is(.action-btn,.btn-ritual,.btn-enter,.config-btn,#b#b){transition:none;--imx:0px;--imy:0px}
  :is(.action-btn.primary,.action-btn.dark,.btn-ritual,#b#b).b-brilla::before{animation:none}
  .b-onda{display:none}
}
.pro-plan .action-btn{width:100%}

/* Cambio de página fundido en toda la web (2026-10-18): la navegación
   entre páginas se funde en vez de cortar; el isotipo del menú se queda
   en su sitio. Navegadores sin soporte cambian de página como siempre. */
@view-transition{navigation:auto}
#nav-star-btn{view-transition-name:veloris-iso}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Menos efectos a la vez (2026-10-28): el destello que cruza los botones
   destacados (.brillo-cta) pasa una sola vez al aparecer, no cada pocos
   segundos. El movimiento de firma que se queda es la luz que recorre el
   borde de los bloques importantes. */
.brillo-cta::after{animation-iteration-count:1 !important;}