/* style_lic_cards.css — capa de mejora visual de fichas de licenciaturas/cursos (innobach).
   No cambia estructura ni markup: solo mejora interacción, jerarquía, rendimiento y accesibilidad.
   Se carga DESPUÉS de los estilos inline para ganar por orden de origen. */
:root{
  --lic-accent:#f28c28;
  --lic-ink:#0f172a;
  --lic-radius:1.25rem;
  --lic-ring:rgba(242,140,40,.40);
}

/* Ritmo del listado */
.plans-list{ gap:clamp(1rem,2.2vw,1.6rem); }

/* Tarjeta: profundidad más limpia + interacción + rendimiento (content-visibility rinde en listas largas) */
.plans-card{
  border-radius:var(--lic-radius);
  box-shadow:0 6px 20px rgba(15,23,42,.08);
  transition:transform .22s ease, box-shadow .22s ease;
  content-visibility:auto;
  contain-intrinsic-size:auto 320px;
}
.plans-card:hover{ transform:translateY(-4px); box-shadow:0 18px 44px rgba(15,23,42,.16); }
.plans-card:focus-within{ outline:3px solid var(--lic-ring); outline-offset:2px; }

/* Zoom sutil de la imagen de fondo al hover (solo transform, va en GPU) */
.plans-card::before{ transition:transform .5s ease; }
.plans-card:hover::before{ transform:scale(1.06); }

/* Título: jerarquía más marcada */
.plans-card-title{ letter-spacing:-.01em; }

/* Badges: pastilla más fina y legible */
.plans-badge{ border-radius:999px; padding:.34rem .8rem; font-size:.7rem; letter-spacing:.02em; }

/* Chips de datos: más redondeo y números tabulares */
.plans-main-stat{ border-radius:.9rem; }
.plans-main-stat-value{ font-variant-numeric:tabular-nums; }

/* Precio: protagonista claro y estable */
.plans-price{ font-size:clamp(1.5rem,2.4vw,1.9rem); letter-spacing:-.01em; font-variant-numeric:tabular-nums; }

/* Panel derecho: separación más limpia */
.plans-card-panel{ border-left-color:rgba(15,23,42,.06); }

/* CTA del panel: micro-interacción + foco accesible */
.plans-card-panel .btn{ border-radius:.8rem; font-weight:700; transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.plans-card-panel .btn:hover{ transform:translateY(-1px); }
.plans-card a:focus-visible, .plans-card .btn:focus-visible{ outline:3px solid var(--lic-ring); outline-offset:2px; }

/* Accesibilidad: respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .plans-card, .plans-card::before, .plans-card-panel .btn{ transition:none; }
  .plans-card:hover{ transform:none; }
  .plans-card:hover::before{ transform:none; }
}