/* BOTÓN: tres variantes y nada más. El hover es el aprobado, no se cambia. */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:var(--r-pill);border:0;cursor:pointer;
  background:var(--grad);color:var(--button-ink);font-family:var(--sans);
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;text-decoration:none;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--button-shadow)}

.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--hair)}
.btn--ghost:hover{border-color:var(--hair-strong);background:var(--ghost-hover);box-shadow:none}

.btn[disabled],.btn--off{
  background:var(--raised-2);color:var(--faint);cursor:not-allowed;
  border:1px dashed var(--hair);
}
.btn[disabled]:hover,.btn--off:hover{transform:none;box-shadow:none}

/* SUPERFICIE FLOTANTE */
.card{
  background:var(--raised);border:1px solid var(--hair);
  border-radius:var(--r-card);box-shadow:var(--float);
  transition:transform var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.card--link:hover{transform:translateY(-3px);border-color:var(--hair-strong)}
.card--featured{border-color:var(--featured-line)}

/* ENLACE CON FLECHA */
.lnk{
  display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--hair);padding-bottom:4px;
  transition:border-color var(--fast) var(--ease),gap var(--fast) var(--ease);
}
.lnk:hover{border-color:var(--ember);gap:12px}

/* FOCO */
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* metadatos, números de orden, eyebrows, créditos */
.micro{font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.micro--hot{color:var(--ember)}
.micro--val{color:var(--ink);font-weight:700;letter-spacing:.12em}

/* unidad pegada a un número grande */
.micro--unit{font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.08em;text-transform:none;color:var(--muted)}

/* total anual, duración, MSI y equivalente mensual */
.terms{font-family:var(--sans);font-size:13px;font-weight:400;
  line-height:1.5;letter-spacing:0;text-transform:none;color:var(--muted)}
.btn{line-height:1.4;justify-content:center;min-height:48px}.btn:visited{color:var(--button-ink)}.btn--ghost:visited{color:var(--ink)}.btn--off:visited{color:var(--faint)}
.chip{display:inline-flex;align-items:center;border:1px solid var(--hair-strong);border-radius:var(--r-pill);padding:8px 14px;background:var(--raised);color:var(--ink);font:600 13px var(--sans)}
.chip[aria-pressed=true]{border-color:var(--ember)}.chip:hover{background:var(--raised-2)}
.nav-toggle{border:1px solid var(--hair-strong);border-radius:var(--r-pill);background:var(--raised);color:var(--ink);padding:9px 14px;min-height:44px;font:600 14px var(--sans)}
.btn--off,.btn[disabled]{transition:background var(--fast) var(--ease),color var(--fast) var(--ease),transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
@media(prefers-reduced-motion:reduce){.btn:hover,.card--link:hover{transform:none}.btn,.card,.lnk{transition:none}}
.ui-arrow{width:1em;height:1em;flex:none;vertical-align:-.15em}