/**
 * Campagnoni Buttons
 *
 * Sistema de botones extraído del Figma.
 *
 * Estructura BEM:
 *   .btn                       → base (tipografía, layout, transición, focus)
 *   .btn--primary              → variante filled
 *   .btn--secondary            → variante outline
 *   .btn--orange               → color brand naranja  (sobre fondo claro)
 *   .btn--blue                 → color brand azul     (sobre fondo claro)
 *   .btn--inverted             → blanco/oscuro        (sobre fondo dark/orange)
 *
 * NOTA TÉCNICA:
 * Elementor aplica las clases CSS al <div> envoltorio del widget, pero el
 * botón visible es el <a class="elementor-button"> que está dentro. Por eso
 * cada regla tiene tres selectores:
 *   - a.btn-...           → para <a> planos con la clase
 *   - button.btn-...      → para <button> planos
 *   - .btn-... .elementor-button → para el caso Elementor (descendant)
 *
 * El !important refuerza la especificidad para ganarle a los estilos por
 * defecto que mete Elementor y el tema Hello Elementor.
 */

:root {
	/* Brand */
	--cg-brand-orange: #fb912f;
	--cg-brand-blue: #134a85;

	/* Neutrales */
	--cg-white: #ffffff;
	--cg-black: #212121;

	/* Estados / Tints */
	--cg-orange-subtle: rgba(251, 145, 47, 0.08);
	--cg-white-secondary: rgba(255, 255, 255, 0.7);
	--cg-black-secondary: rgba(33, 33, 33, 0.7);

	/* Botón: dimensiones */
	--cg-btn-radius: 24px;
	--cg-btn-height-desktop: 48px;
	--cg-btn-height-mobile: 40px;
	--cg-btn-padding-x-desktop: 24px;
	--cg-btn-padding-x-mobile: 12px;
	--cg-btn-gap: 8px;
	--cg-btn-border-width: 1px;

	/* Botón: tipografía */
	--cg-btn-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
	--cg-btn-font-weight: 700;
	--cg-btn-font-size-desktop: 16px;
	--cg-btn-line-height-desktop: 1.75;
	--cg-btn-font-size-mobile: 15px;
	--cg-btn-line-height-mobile: 1.7;
}

/* =========================================================================
   BASE
   Aplica al elemento que realmente se ve (no al envoltorio del widget).
   ========================================================================= */

a.btn,
button.btn,
.btn .elementor-button {
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: var(--cg-btn-gap) !important;

	height: var(--cg-btn-height-desktop) !important;
	padding: 0 var(--cg-btn-padding-x-desktop) !important;
	border-radius: var(--cg-btn-radius) !important;
	border: var(--cg-btn-border-width) solid transparent !important;

	font-family: var(--cg-btn-font-family) !important;
	font-weight: var(--cg-btn-font-weight) !important;
	font-size: var(--cg-btn-font-size-desktop) !important;
	line-height: var(--cg-btn-line-height-desktop) !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;

	/* El envoltorio de Elementor no debe expandirse a full-width */
	width: auto !important;
}

@media (max-width: 767px) {
	a.btn,
	button.btn,
	.btn .elementor-button {
		height: var(--cg-btn-height-mobile) !important;
		padding: 0 var(--cg-btn-padding-x-mobile) !important;
		font-size: var(--cg-btn-font-size-mobile) !important;
		line-height: var(--cg-btn-line-height-mobile) !important;
	}
}

/* Foco accesible */
a.btn:focus-visible,
button.btn:focus-visible,
.btn .elementor-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Disabled */
.btn:disabled,
.btn.is-disabled,
.btn[aria-disabled='true'],
.btn .elementor-button:disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

/* Estructura interna del widget Button de Elementor */
.btn .elementor-button-content-wrapper,
.btn .elementor-button-text,
.btn .elementor-button-icon {
	display: inline-flex;
	align-items: center;
}

/* =========================================================================
   VARIANTE: PRIMARY (filled)
   ========================================================================= */

a.btn--primary.btn--orange,
button.btn--primary.btn--orange,
.btn--primary.btn--orange .elementor-button {
	background: var(--cg-brand-orange) !important;
	background-color: var(--cg-brand-orange) !important;
	color: var(--cg-white) !important;
	border-color: var(--cg-brand-orange) !important;
}
a.btn--primary.btn--orange:hover,
button.btn--primary.btn--orange:hover,
.btn--primary.btn--orange .elementor-button:hover {
	background: var(--cg-orange-subtle) !important;
	background-color: var(--cg-orange-subtle) !important;
	color: var(--cg-brand-orange) !important;
	border-color: var(--cg-brand-orange) !important;
}

a.btn--primary.btn--blue,
button.btn--primary.btn--blue,
.btn--primary.btn--blue .elementor-button {
	background: var(--cg-brand-blue) !important;
	background-color: var(--cg-brand-blue) !important;
	color: var(--cg-white) !important;
	border-color: var(--cg-brand-blue) !important;
}
a.btn--primary.btn--blue:hover,
button.btn--primary.btn--blue:hover,
.btn--primary.btn--blue .elementor-button:hover {
	background: var(--cg-white-secondary) !important;
	background-color: var(--cg-white-secondary) !important;
	color: var(--cg-brand-blue) !important;
	border-color: var(--cg-brand-blue) !important;
}

a.btn--primary.btn--inverted,
button.btn--primary.btn--inverted,
.btn--primary.btn--inverted .elementor-button {
	background: var(--cg-white) !important;
	background-color: var(--cg-white) !important;
	color: var(--cg-black) !important;
	border-color: var(--cg-white) !important;
}
a.btn--primary.btn--inverted:hover,
button.btn--primary.btn--inverted:hover,
.btn--primary.btn--inverted .elementor-button:hover {
	background: var(--cg-black-secondary) !important;
	background-color: var(--cg-black-secondary) !important;
	color: var(--cg-white) !important;
	border-color: var(--cg-black-secondary) !important;
}

/* =========================================================================
   VARIANTE: SECONDARY (outline)
   ========================================================================= */

a.btn--secondary.btn--orange,
button.btn--secondary.btn--orange,
.btn--secondary.btn--orange .elementor-button {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--cg-brand-orange) !important;
	border-color: var(--cg-brand-orange) !important;
}
a.btn--secondary.btn--orange:hover,
button.btn--secondary.btn--orange:hover,
.btn--secondary.btn--orange .elementor-button:hover {
	background: var(--cg-orange-subtle) !important;
	background-color: var(--cg-orange-subtle) !important;
	color: var(--cg-brand-orange) !important;
	border-color: var(--cg-brand-orange) !important;
}

a.btn--secondary.btn--blue,
button.btn--secondary.btn--blue,
.btn--secondary.btn--blue .elementor-button {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--cg-brand-blue) !important;
	border-color: var(--cg-brand-blue) !important;
}
a.btn--secondary.btn--blue:hover,
button.btn--secondary.btn--blue:hover,
.btn--secondary.btn--blue .elementor-button:hover {
	background: var(--cg-white-secondary) !important;
	background-color: var(--cg-white-secondary) !important;
	color: var(--cg-brand-blue) !important;
	border-color: var(--cg-brand-blue) !important;
}

a.btn--secondary.btn--inverted,
button.btn--secondary.btn--inverted,
.btn--secondary.btn--inverted .elementor-button {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--cg-white) !important;
	border-color: var(--cg-white-secondary) !important;
}
a.btn--secondary.btn--inverted:hover,
button.btn--secondary.btn--inverted:hover,
.btn--secondary.btn--inverted .elementor-button:hover {
	background: var(--cg-black-secondary) !important;
	background-color: var(--cg-black-secondary) !important;
	color: var(--cg-white) !important;
	border-color: var(--cg-black-secondary) !important;
}