/**
 * MOS · Botón, réplica del tema de Shopify
 *
 * Valores resueltos desde theme.scss.liquid + config/settings_data.json
 * del respaldo del tema (10SEP2026). No son aproximaciones: son los
 * mismos números con las variables ya sustituidas.
 *
 *   button_style = round        ->  border-radius 50px
 *   color_button = #111111      ->  fondo
 *   color_button_text = #fff    ->  texto
 *   type_base_size = 16         ->  max(16-4, 13px) = 13px
 *   accentFontStack             ->  uppercase + letter-spacing 0.3em
 *   hover: lighten(#111111,10%) ->  #2b2b2b
 */

:root {
	--mos-btn-fondo: #111111;
	--mos-btn-texto: #ffffff;
	--mos-btn-fondo-hover: #2b2b2b;
	--mos-btn-radio: 50px;
	--mos-btn-borde: #e8e8e1;
	--mos-btn-cuerpo: #000000;
	--mos-btn-espaciado: 0.3em;
}

.mos-btn {
	display: inline-block;
	vertical-align: middle;
	width: auto;
	min-width: 90px;
	margin: 0;
	padding: 11px 20px;

	font-size: 13px;
	font-weight: bold;
	line-height: 1.42;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	text-align: center;
	text-decoration: none;
	white-space: normal;

	color: var(--mos-btn-texto);
	background: var(--mos-btn-fondo);
	border: 1px solid transparent;
	border-radius: var(--mos-btn-radio);

	cursor: pointer;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	position: relative;
	overflow: hidden;
	transition: background 0.2s ease 0s;
}

.mos-btn:visited {
	color: var(--mos-btn-texto);
}

/* Un botón no se subraya nunca, en ningún estado.
 *
 * Blocksy y Brizy traen reglas tipo `a:hover { text-decoration: underline }`,
 * y un selector con pseudoclase le gana a una clase suelta. La clase va
 * repetida para subir especificidad sin recurrir a !important, y el
 * !important del final se limita a esta única propiedad en los estados
 * interactivos, donde hay temas que la fuerzan con selectores aún más
 * específicos. Es una decisión de una línea, no una puerta abierta. */
.mos-btn.mos-btn,
.mos-btn.mos-btn:link,
.mos-btn.mos-btn:visited {
	text-decoration: none;
}

.mos-btn.mos-btn:hover,
.mos-btn.mos-btn:focus,
.mos-btn.mos-btn:active,
.mos-btn.mos-btn:focus-visible {
	text-decoration: none !important;
}

/* Brizy envuelve el texto del botón en un <span> hijo, y Blocksy a veces
 * finge el subrayado con un degradado de fondo en ese mismo hijo. El
 * text-decoration de un descendiente no lo anula el padre, así que hay
 * que alcanzarlo aquí. */
.mos-btn.mos-btn *,
.mos-btn.mos-btn:hover *,
.mos-btn.mos-btn:focus * {
	text-decoration: none !important;
	background-image: none !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

/* El color del texto, por la misma razón que el subrayado.
 *
 * Dentro del texto enriquecido de Brizy los enlaces se pintan con
 * `.brz .brz-rich-text__custom a[href]` y con un atributo style en línea,
 * usando `--brz-global-color2`. En esta paleta eso es #191919, así que un
 * botón insertado en el contenido queda con texto negro sobre fondo negro.
 *
 * El !important va acotado a `color`, y el botón secundario lo redefine
 * más abajo con el mismo peso para no heredar el blanco del primario. */
.mos-btn.mos-btn,
.mos-btn.mos-btn:link,
.mos-btn.mos-btn:visited,
.mos-btn.mos-btn:hover,
.mos-btn.mos-btn:focus,
.mos-btn.mos-btn:active,
.mos-btn.mos-btn * {
	color: var(--mos-btn-texto) !important;
}

.mos-btn.mos-btn--secundario,
.mos-btn.mos-btn--secundario:link,
.mos-btn.mos-btn--secundario:visited,
.mos-btn.mos-btn--secundario:hover,
.mos-btn.mos-btn--secundario:focus,
.mos-btn.mos-btn--secundario:active,
.mos-btn.mos-btn--secundario * {
	color: var(--mos-btn-cuerpo) !important;
}

/* El destello que cruza el botón al pasar el cursor. */
.mos-btn::after {
	content: '';
	position: absolute;
	top: 0;
	left: 150%;
	width: 200%;
	height: 100%;
	transform: skewX(-20deg);
	background-image: linear-gradient(
		to right,
		transparent,
		rgba(255, 255, 255, 0.25),
		transparent
	);
}

.mos-btn:hover,
.mos-btn:focus {
	color: var(--mos-btn-texto);
	background: var(--mos-btn-fondo-hover);
	transition-delay: 0.25s;
}

.mos-btn:hover::after {
	animation: mos-btn-destello 0.75s cubic-bezier(0.01, 0.56, 1, 1);
}

.mos-btn:active {
	background: var(--mos-btn-fondo);
	transition-delay: 0s;
}

@keyframes mos-btn-destello {
	100% {
		left: -200%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mos-btn,
	.mos-btn::after {
		transition: none;
		animation: none;
	}
}

/* ---- Alineación ----
 *
 * El botón es inline-block, así que quien lo mueve es el text-align del
 * padre. El contenedor que Brizy le pone al elemento Shortcode ya ocupa el
 * ancho completo de la columna, por eso su control de alineación no hace
 * nada: no hay nada que mover. Estas clases son ese padre.
 *
 * Se aplican con [mos_cta alinear="centro"], o poniéndole la clase
 * mos-cta-caja--centro a cualquier contenedor de Brizy que envuelva un
 * botón con clase mos-btn.
 */

.mos-cta-caja {
	display: block;
	width: 100%;
}

.mos-cta-caja--izquierda {
	text-align: left;
}

.mos-cta-caja--centro {
	text-align: center;
}

.mos-cta-caja--derecha {
	text-align: right;
}

/* ---- Variantes ---- */

/* btn--secondary del tema: contorno sobre fondo transparente. */
.mos-btn--secundario {
	color: var(--mos-btn-cuerpo);
	background: transparent;
	border: 1px solid var(--mos-btn-borde);
}

.mos-btn--secundario:visited {
	color: var(--mos-btn-cuerpo);
}

.mos-btn--secundario:hover,
.mos-btn--secundario:focus {
	color: var(--mos-btn-cuerpo);
	background: transparent;
	border-color: var(--mos-btn-borde);
}

/* El secundario no lleva destello: en el tema el efecto excluye .btn--secondary. */
.mos-btn--secundario::after {
	content: none;
}

/* btn--small */
.mos-btn--pequeno {
	padding: 8px 14px;
	font-size: 12px;
}

/* btn--full */
.mos-btn--completo {
	display: block;
	width: 100%;
	padding: 13px 20px;
	transition: none;
}

/* ---- Móvil ---- */
/* $small del tema: hasta 749px. */
@media (max-width: 749px) {
	.mos-btn {
		padding: 9px 17px;
		font-size: 11px;
	}

	.mos-btn--pequeno {
		padding: 8px 14px;
		font-size: 11px;
	}

	.mos-btn--completo {
		padding: 13px 20px;
	}
}

/* =========================================================================
 * La tipografía del botón, con la misma defensa que el color
 *
 * Brizy fija la tipografía del párrafo con `!important`:
 *   .brz .brz-css-XXXX { font-size: var(--brz-paragraphfontsize);
 *                        letter-spacing: var(--brz-paragraphletterspacing);
 *                        text-transform: var(--brz-paragraphtexttransform) !important; }
 * Un botón insertado en el contenido queda entonces en 16px, redonda y en
 * caja baja: pierde las versalitas y el tracking de 0.3em que le dan su
 * carácter en el tema de Shopify.
 *
 * El tamaño va por variable para que las variantes y el móvil sigan
 * mandando sin tener que repetir !important en cada una.
 * ====================================================================== */

.mos-btn { --mos-btn-tam: 13px; }
.mos-btn--pequeno { --mos-btn-tam: 12px; }

@media (max-width: 749px) {
	.mos-btn { --mos-btn-tam: 11px; }
	.mos-btn--pequeno { --mos-btn-tam: 11px; }
}

/* Tres veces la clase, no dos.
 *
 * Brizy declara `text-transform` con !important y su selector
 * (`.brz .brz-css-XXXX`) pesa exactamente lo mismo que `.mos-btn.mos-btn`:
 * dos clases. Cuando dos reglas con !important empatan en especificidad
 * gana la que se carga después, y la hoja de Brizy se imprime después que
 * la nuestra. Con tres clases el empate se rompe y el orden deja de
 * importar. `letter-spacing` no lo declara con !important, por eso ese sí
 * ganaba con dos. */
.mos-btn.mos-btn.mos-btn,
.mos-btn.mos-btn.mos-btn * {
	font-size: var(--mos-btn-tam) !important;
	font-weight: bold !important;
	line-height: 1.42 !important;
	letter-spacing: var(--mos-btn-espaciado) !important;
	text-transform: uppercase !important;
	text-align: center !important;
}