/* ==========================================================================
   Componentes compartidos del sitio publico — CEMER
   --------------------------------------------------------------------------
   Alcance de la fase P0: sistema de botones.

   Motivo: la auditoria de diseno (2026-07-27) encontro 53 clases distintas
   de tipo boton en el CSS publico, con cinco implementaciones separadas del
   mismo boton primario (lib-btn--primary, exp-btn--primary,
   eventos-btn--primary, experiences-btn--primary, library-btn--primary) y
   tres implementaciones byte a byte identicas del mismo CTA terminal.

   Este archivo existe en vez de sumar las reglas a styles.css (2.815 lineas
   de CSS legacy) o a typography.css (que declara no definir layout ni color).
   En P2, cuando se consoliden las 7 hojas del Home en 3, este archivo es el
   destino natural del resto de componentes compartidos.

   Consume los tokens de typography.css. No define familias ni escala.
   ========================================================================== */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 28px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    transform 200ms ease;
}

.c-btn__icon,
.c-btn [data-lucide],
.c-btn svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  transition: transform 200ms ease;
}

/* Flecha diagonal: se desplaza en el sentido en que apunta */
.c-btn:hover .c-btn__icon,
.c-btn:focus-visible .c-btn__icon,
.c-btn:hover [data-lucide],
.c-btn:focus-visible [data-lucide] {
  transform: translate(2px, -2px);
}

/* ---- Primario: accion principal, fondo solido ---- */
.c-btn--primary {
  background-color: var(--home-green-900, #00563f);
  border-color: var(--home-green-900, #00563f);
  color: #ffffff;
}

.c-btn--primary:hover,
.c-btn--primary:focus-visible {
  background-color: var(--home-green-700, #0f6b49);
  border-color: var(--home-green-700, #0f6b49);
  color: #ffffff;
  transform: translateY(-2px);
}

/* ---- Ghost: accion secundaria y CTA de cierre de seccion ---- */
.c-btn--ghost {
  background-color: transparent;
  border-color: var(--home-green-900, #00563f);
  color: var(--home-green-900, #00563f);
}

.c-btn--ghost:hover,
.c-btn--ghost:focus-visible {
  background-color: var(--home-green-900, #00563f);
  color: #ffffff;
}

/* ---- Link: accion terciaria, sin caja ---- */
.c-btn--link {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--home-green-700, #0f6b49);
}

.c-btn--link:hover,
.c-btn--link:focus-visible {
  color: var(--home-green-950, #003f2f);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Modificador de tamanio compacto (dentro de tarjetas) ---- */
.c-btn--sm {
  padding: 10px 20px;
  font-size: var(--fs-caption);
}

/* En movil los botones de accion principal ocupan el ancho disponible para
   ser objetivos tactiles claros. */
@media (max-width: 480px) {
  .c-btn--block-sm {
    width: 100%;
  }
}