/* Botones pill. El relleno "brota" desde el punto por el que entra el puntero (--hx/--hy). */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 999px;
  font: var(--w-semibold) 12px/1 var(--font-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.5s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.btn__inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.btn__label,
.btn__arrow {
  display: inline-block;
  transition: transform 0.5s var(--ease-out);
}

.btn__fill {
  position: absolute;
  z-index: -1;
  left: var(--hx, 50%);
  top: var(--hy, 50%);
  width: 230%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.75s var(--ease-out);
  pointer-events: none;
}

/* Contorno (hero) */
.btn--ghost {
  padding: 21px 35px;
  color: var(--cream);
  box-shadow: inset 0 0 0 1px rgb(238 227 211 / 0.4);
  background: rgb(10 2 3 / 0.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn--ghost .btn__fill { background: var(--cream); }

/* Sólido (cierre): respira una luz roja cuando el cursor se acerca */
.btn--solid {
  padding: 22px 38px;
  color: var(--ink-dark);
  background: var(--cream);
  box-shadow: 0 0 calc(46px * var(--li, 0)) calc(2px * var(--li, 0)) rgb(196 32 46 / calc(0.55 * var(--li, 0)));
}
.btn--solid .btn__fill { background: var(--blood); }

.btn:active .btn__label { transform: scale(0.96); transition-duration: 0.12s; }

/* Foco por teclado: mismo gesto que el hover, tambien sin puntero fino */
.btn:focus-visible .btn__fill { transform: translate(-50%, -50%) scale(1); }
.btn--ghost:focus-visible { color: var(--ink-dark); }
.btn--solid:focus-visible { color: var(--cream); }
.btn:focus-visible .btn__arrow { transform: translate(4px, -4px); }

/* Tactil: sin hover, el relleno responde a la pulsacion */
@media (hover: none) {
  .btn:active .btn__fill { transform: translate(-50%, -50%) scale(1); }
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__fill { transform: translate(-50%, -50%) scale(1); }
  .btn--ghost:hover { color: var(--ink-dark); }
  .btn--solid:hover { color: var(--cream); }
  .btn:hover .btn__arrow { transform: translate(4px, -4px); }
}

@media (max-width: 560px) {
  .btn { font-size: 11px; letter-spacing: 0.16em; }
  .btn--ghost { padding: 19px 27px; }
  .btn--solid { padding: 20px 28px; }
}