/**
 * Campagnoni Buttons
 *
 * Sistema de botones extraído del Figma.
 *
 * Estructura BEM:
 *   .btn                       → base (tipografía, 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--white                → blanco/oscuro        (sobre fondo dark/orange)
 *   .btn--inverted             → alias legacy de .btn--white (no usar en código nuevo)
 *
 * 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.
 */

body {
	/* Brand */
	--cg-brand-orange: var(--color-orange);
	--cg-brand-blue: var(--color-dark-blue);

	/* Neutrales */
	--cg-white: var(--color-white);
	--cg-black: var(--color-black);

	/* 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: tipografía */
	--cg-btn-font-family: var(--typo-body-bold-font-family);
	--cg-btn-font-weight: var(--typo-body-bold-font-weight);
	--cg-btn-font-size:   var(--typo-body-bold-font-size);
	--cg-btn-line-height: var(--typo-body-bold-line-height);
}

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

a.btn,
button.btn,
.btn .elementor-button {
	font-family: var(--cg-btn-font-family) !important;
	font-weight: var(--cg-btn-font-weight) !important;
	font-size: var(--cg-btn-font-size) !important;
	line-height: var(--cg-btn-line-height) !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	cursor: pointer !important;

	/* Borde base: obligatorio para que las variantes outline (secondary)
	   dibujen su contorno. Los primary (filled) lo llevan del color de su
	   fondo (invisible) para mantener exactamente la misma altura que los
	   secondary. Cada variante solo sobrescribe border-color. */
	border-style: solid !important;
	border-width: 1px !important;
	border-color: transparent !important;

	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !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;
}

/* =========================================================================
   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--white,
button.btn--primary.btn--white,
.btn--primary.btn--white .elementor-button,
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--white:hover,
button.btn--primary.btn--white:hover,
.btn--primary.btn--white .elementor-button:hover,
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--white,
button.btn--secondary.btn--white,
.btn--secondary.btn--white .elementor-button,
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--white:hover,
button.btn--secondary.btn--white:hover,
.btn--secondary.btn--white .elementor-button:hover,
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;
}