/* ====== Botones tipo “card” (usa --brand / --brand-rgb del Brand Core) ====== */

/* Contenedor vertical */
.btn-card-container.btn-card-vertical{
  display:flex;
  flex-direction:column;
  gap:22px;
  justify-content:center;
  align-items:center;
  max-width:340px;
  margin:28px auto 10px auto;
}

/* Ajuste para móviles */
@media (max-width:600px){
  .btn-card-container.btn-card-vertical{
    max-width:96vw;
    gap:18px;
    margin:22px auto 8px auto;
  }
}

/* -------------------------------------------------------------------------- */
/* Botón con gradiente "brand-safe" (se adapta a cualquier color de marca)   */
/* -------------------------------------------------------------------------- */

:root{ --btn-darken: 18%; } /* cuánto oscurecer el extremo (para color-mix) */

.btn-card,
.btn-card:link,
.btn-card:visited{
  /* Capas:
     1) brillo diagonal sutil
     2) velo oscuro suave
     3) base: brand plano (fallback) o gradiente con color-mix si hay soporte */
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.16)),
    linear-gradient(100deg, var(--brand) 0%, var(--brand) 100%) !important; /* fallback sólido */
  border: 1px solid rgba(var(--brand-rgb), .42) !important;
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(var(--brand-rgb), .18), inset 0 0 0 1px rgba(255,255,255,.05);
  color:#fff !important;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:1.05rem;
  font-weight:800;
  min-width:160px; max-width:320px; width:90%;
  min-height:110px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  text-decoration:none !important;
  position:relative; overflow:hidden; cursor:pointer;
  transition: transform .13s, box-shadow .16s, filter .14s, background .21s;
  outline: none; -webkit-tap-highlight-color: transparent;
}

/* Gradiente real si el navegador soporta color-mix */
@supports (background: color-mix(in srgb, red, black 10%)) {
  .btn-card,
  .btn-card:link,
  .btn-card:visited{
    background:
      radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 45%),
      linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.16)),
      linear-gradient(100deg,
        var(--brand) 0%,
        color-mix(in srgb, var(--brand), black var(--btn-darken)) 100%
      ) !important;
  }
}

.btn-card span{ display:inline-block; padding:0 8px; }

.btn-card:hover,
.btn-card:focus-visible{
  box-shadow: 0 10px 32px rgba(var(--brand-rgb), .25), inset 0 0 0 1px rgba(255,255,255,.06);
  transform: translateY(-3px) scale(1.02);
  filter: saturate(1.03) brightness(1.02);
}

.btn-card:active{
  transform: translateY(0) scale(.98);
  filter: saturate(1.06) brightness(.98);
}

/* Mobile sizes */
@media (max-width:600px){
  .btn-card,
  .btn-card:link,
  .btn-card:visited{
    min-width:68vw;
    max-width:96vw;
    font-size:1.05rem;
    border-radius:14px;
    min-height:86px;
    padding:0 3vw;
  }
}