.button {
  background: var(--color-action-primary);
  color: var(--color-text-inverse);

  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-4);

  font-size: var(--text-body-m);
  font-weight: var(--font-semibold);
}

.button_secondary {
  color: var(--color-text-primary);

  padding: var(--space-2) var(--space-4);

  border: 1px solid var(--color-border-strong); /* Borde más fino y sutil (gris estructural) */
  border-radius: var(--radius-4);

  font-size: var(--text-body-m);
  font-weight: var(--font-semibold);
}

.button:hover {
  background: var(--color-action-primary-hover);
}

/* =========================
   MODIFICADOR: ANIMACIÓN DE ROLADO
   Uso: <a class="button button--roll" data-text="Texto"><span>Texto</span></a>
========================= */
.button--roll {
  font-size: var(--text-body-m); 
  border-radius: var(--radius-2);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  padding: 0 !important; /* Desactiva padding global, se asigna al span */
  text-decoration: none;
  font-weight: var(--font-semibold);
}

/* Contenedor visible del texto */
.button--roll span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
  width: 100%;
}

/* Texto fantasma preparado para subir */
.button--roll::before {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

/* Transición en Hover */
.button--roll:hover span,
.button--roll:hover::before {
  transform: translateY(-100%);
}

/* Clic táctil */
.button--roll:active span,
.button--roll:active::before {
  opacity: 0.6;
  transition: opacity 0.1s ease;
}

/* Correcciones sutiles para el botón secundario con rollover */
.button_secondary.button--roll {
  transition: border-color 0.4s ease, background-color 0.4s ease;
}

.button_secondary.button--roll:hover {
  border-color: var(--color-text-primary);
  background-color: rgba(0, 0, 0, 0.02);
}