/* =========================================================================
   buttons.css — Botones .button / .button-primary / .button-outline / link.
   Replican exactamente los estilos del Starter Project.
   ========================================================================= */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-sans);
	font-weight: var(--fw-heading);
	font-size: 1rem;
	line-height: 1;
	padding: 14px 22px;
	border-radius: var(--radius-btn);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.button:hover,
.button:focus-visible {
	transform: translateY(-1px);
}

/* Primario: gradiente azul→azul claro, texto blanco. */
.button-primary {
	background: var(--grad-button);
	border-color: var(--blue);
	color: var(--white);
	box-shadow: var(--shadow-sm);
}
.button-primary:hover,
.button-primary:focus-visible {
	color: var(--white);
	box-shadow: 0 12px 28px rgba(8, 124, 167, 0.28);
}

/* Outline: fondo blanco, borde y texto azul. */
.button-outline {
	background: var(--white);
	border-color: var(--blue);
	color: var(--blue);
}
.button-outline:hover,
.button-outline:focus-visible {
	background: var(--sky);
	color: var(--blue-700);
}

/* Variante compacta (header). */
.button-sm {
	padding: 10px 15px;
	font-size: 0.94rem;
	border-radius: var(--radius-btn);
}

/* Enlace de texto fuerte (p.ej. "Conocer la colaboración", "Contar mi caso"). */
.link-strong {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-sans);
	font-weight: var(--fw-strong);
	color: var(--blue);
}
.link-strong::after {
	content: "\2192"; /* flecha → */
	transition: transform 0.18s ease;
}
.link-strong:hover::after { transform: translateX(4px); }

/* Botones sobre fondo oscuro. */
.abogalis-section--dark .button-outline {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--white);
}
.abogalis-section--dark .button-outline:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--white);
}

/* CTA final (sección con gradiente azul): botón blanco. */
.final-cta .button-primary {
	background: var(--white);
	color: var(--blue);
	border-color: var(--white);
}
.final-cta .button-primary:hover {
	background: var(--sky);
	color: var(--blue-700);
}
.final-cta .button-outline {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--white);
}
.final-cta .button-outline:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* Grupo de botones. */
.button-group {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 26px;
}