/* =====================================================================
   Botón "origen": al pasar el cursor, un círculo crece desde el punto
   exacto donde entró el puntero y rellena el botón, invirtiendo el
   color del texto.

   Cómo funciona el apilado: el pseudo-elemento lleva z-index:-1, que
   lo pinta POR ENCIMA del fondo del botón pero POR DEBAJO de su texto.
   Por eso el botón necesita isolation:isolate, para que ese -1 no se
   escape a la capa de la página.
   ===================================================================== */

.btn-origen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* En Safari e iOS, overflow:hidden NO recorta hijos con transform, y
     el círculo del efecto se escapaba tapando la tarjeta siguiente.
     Esta máscara fuerza el recorte respetando el borde redondeado. */
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  transition: color .32s cubic-bezier(.16, 1, .3, 1),
              border-color .32s cubic-bezier(.16, 1, .3, 1);
}

.btn-origen::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--ox, 50%);
  top: var(--oy, 50%);
  width: var(--diam, 200%);
  height: var(--diam, 200%);
  border-radius: 50%;
  background: var(--relleno, #12100f);
  transform: translate(-50%, -50%) scale(0);
  transform-origin: center;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

.btn-origen:hover::before,
.btn-origen:focus-visible::before,
.btn-origen[data-pulsado="si"]::before {
  transform: translate(-50%, -50%) scale(1);
}

/* El texto se invierte cuando el relleno lo cubre */
.btn-origen:hover,
.btn-origen:focus-visible,
.btn-origen[data-pulsado="si"] {
  color: var(--relleno-texto, #f7f3ec);
}

/* Ligero hundido al pulsar, como en las apps nativas */
.btn-origen[data-pulsado="si"] { transform: scale(.985); }
.btn-origen { transition-property: color, border-color, transform; }

/* Los deshabilitados no reaccionan */
.btn-origen:disabled,
.btn-origen[aria-disabled="true"] { pointer-events: none; opacity: .5; }
.btn-origen:disabled::before { transform: translate(-50%, -50%) scale(0); }

/* ---------- Variantes por color de relleno ----------
   El relleno siempre debe contrastar con el texto que lo cubre. */
.btn-origen[data-tono="oscuro"] { --relleno: #12100f; --relleno-texto: #f7f3ec; }
.btn-origen[data-tono="rojo"]   { --relleno: #8f2a22; --relleno-texto: #fff; }
.btn-origen[data-tono="verde"]  { --relleno: #185f3b; --relleno-texto: #fff; }
.btn-origen[data-tono="azul"]   { --relleno: #162c52; --relleno-texto: #fff; }
.btn-origen[data-tono="oro"]    { --relleno: #12100f; --relleno-texto: #e8c98d; }
.btn-origen[data-tono="claro"]  { --relleno: #f7f3ec; --relleno-texto: #12100f; }

/* Quien haya pedido menos movimiento, no lo tiene */
@media (prefers-reduced-motion: reduce) {
  .btn-origen::before { transition: none; }
  .btn-origen { transition: color .01s; }
  .btn-origen[data-pulsado="si"] { transform: none; }
}