/* =============================================================================
   Botones — Aspaldiko
   ========================================================================== */

.btn,
.button,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-family: inherit;
  font-size: var(--fs-p-m);
  font-weight: var(--fw-medium);
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--t-base), color var(--t-base),
              border-color var(--t-base), transform var(--t-fast);
  white-space: nowrap;
}

.btn:hover,
.button:hover { transform: translateY(-1px); }
.btn:active,
.button:active { transform: translateY(0); }

/* Primario: burgundy sólido */
.btn--primary {
  background: var(--color-burgundy);
  color: #fff;
  border-color: var(--color-burgundy);
}
.btn--primary:hover {
  background: var(--color-burgundy-dark);
  color: #fff;
  border-color: var(--color-burgundy-dark);
}

/* Secundario: outline blanco (top bar) */
.btn--outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}
.btn--outline-light:hover {
  background: #fff;
  color: var(--color-burgundy);
  border-color: #fff;
}

/* Botón Intranet (top bar): fondo blanco, texto burgundy oscuro */
.btn--intranet {
  background: #fff;
  color: var(--color-footer);
  border-color: #fff;
}
.btn--intranet:hover {
  background: var(--color-pink-soft);
  color: var(--color-footer);
  border-color: var(--color-pink-soft);
}

/* Botón oscuro (CTAs interiores como "Conoce el equipo", "Conoce los servicios") */
.btn--dark {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}
.btn--dark:hover {
  background: var(--color-burgundy);
  color: #fff;
  border-color: var(--color-burgundy);
}

/* Outline burgundy */
.btn--outline {
  background: transparent;
  color: var(--color-burgundy);
  border-color: var(--color-burgundy);
}
.btn--outline:hover {
  background: var(--color-burgundy);
  color: #fff;
}

/* Tamaños */
.btn--sm {
  padding: 0.5rem 1rem;
  font-size: var(--fs-p-s);
}
.btn--lg {
  padding: 1.125rem 2.25rem;
  font-size: var(--fs-p-l);
}

/* Link estilo "Leer más" */
.link-readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-burgundy);
  font-weight: var(--fw-medium);
  font-size: var(--fs-p-s);
  text-decoration: none;
  transition: color var(--t-fast);
}
.link-readmore:hover { color: var(--color-burgundy-dark); }
.link-readmore::after {
  content: '→';
  transition: transform var(--t-fast);
}
.link-readmore:hover::after { transform: translateX(2px); }