/* ===== Bloque Botones Blobs — Frontend ===== */

/* Autor: Matías Molina / https://estudioblobs.com.ar / Blobs Diseño Gráfico */

/* ------------------------------------------------------------------
 * REGLAS DE ESTILO HARDCODEADAS (editá acá los valores fijos)
 *
 * Los COLORES se controlan desde el editor y llegan como variables CSS
 * (--blobs-btn-text, --blobs-btn-bg, --blobs-btn-border, y sus -hover).
 *
 * Acá definís, para cada tipo de botón, lo que NO cambia por color:
 * padding, tipografía, border-radius, grosor del borde, letter-spacing,
 * text-transform, transiciones, etc.
 *
 * El estado hover se aplica también a :active (y :focus).
 * ------------------------------------------------------------------ */

/* ===== Wrapper de alineación (left / center / right desde el editor) ===== */
/* EDITAR ACA: si querés cambiar cómo se alinea el botón. */
.blobs-buttons-align--left {
	display: block;
	text-align: left;
}

.blobs-buttons-align--center {
	display: block;
	text-align: center;
}

.blobs-buttons-align--right {
	display: block;
	text-align: right;
}

/* ===== Base común a los 4 tipos ===== */
.blobs-button {
	
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	border: 0;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;

	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
}

/* ================================================================
 * TIPO: MINIMAL (solo texto)
 * ================================================================ */
.blobs-button--minimal {
	/* EDITAR ACA: padding, tipografía, etc. */
	padding: 0.25rem 0;
	background: transparent;
	border: 0;


	font-family: inherit;
	

	color: var(--blobs-btn-text, #111111);
}

.blobs-button--minimal:hover,
.blobs-button--minimal:focus,
.blobs-button--minimal:active {
	/* EDITAR ACA: color / subrayado del hover */
	color: var(--blobs-btn-text-hover, #555555);
}

/* ================================================================
 * TIPO: CLASSIC (con background)
 * ================================================================ */
.blobs-button--classic {
	/* EDITAR ACA: padding, tipografía, border-radius, etc. */
	padding: 0.75rem 1.5rem;
	border: 0;
	

	font-family: inherit;
	

	background-color: var(--blobs-btn-bg, #111111);
	color: var(--blobs-btn-text, #ffffff);
	border-radius: 999px;
}

.blobs-button--classic:hover,
.blobs-button--classic:focus,
.blobs-button--classic:active {
	/* EDITAR ACA: fondo / color del hover */
	background-color: var(--blobs-btn-bg-hover, #2b2b2b);
	color: var(--blobs-btn-text-hover, #ffffff);
}

/* ================================================================
 * TIPO: OUTLINE (solo borde)
 * ================================================================ */
.blobs-button--outline {
	/* EDITAR ACA: padding, tipografía, border-radius, grosor del borde, etc. */
	padding: calc(0.75rem - 2px) calc(1.5rem - 2px);
	border: 2px solid var(--blobs-btn-border, #111111);
	
	background: transparent;

	font-family: inherit;
	

	color: var(--blobs-btn-text, #111111);
}

.blobs-button--outline:hover,
.blobs-button--outline:focus,
.blobs-button--outline:active {
	/* EDITAR ACA: borde / color del hover (podés sumar background-color si querés relleno) */
	border-color: var(--blobs-btn-border-hover, #2b2b2b);
	color: var(--blobs-btn-text-hover, #2b2b2b);
}

/* ================================================================
 * TIPO: DISPLAY (pill grande del CTA de la home)
 * Fondo + borde grueso. El borde acepta opacidad (viene como rgba
 * desde el editor/render cuando bajás "Opacidad del borde").
 * ================================================================ */
.blobs-button--display {
	/* EDITAR ACA: padding, tipografía, border-radius, grosor del borde, etc. */
	padding: 1.3rem 2.4rem;
	border: 3px solid var(--blobs-btn-border, #ffffff);
	border-radius: 999px;

	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 800;
	text-transform: none;
	letter-spacing: 0.01em;
	line-height: 1.2;

	background-color: var(--blobs-btn-bg, #3aa1d5);
	color: var(--blobs-btn-text, #ffffff);

	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.blobs-button--display:hover,
.blobs-button--display:focus,
.blobs-button--display:active {
	/* EDITAR ACA: fondo / borde / color del hover */
	background-color: var(--blobs-btn-bg-hover, #2b86b5);
	border-color: var(--blobs-btn-border-hover, #ffffff);
	color: var(--blobs-btn-text-hover, #ffffff);
	box-shadow: none;
}