/*
 * Frogmi LP — base de las landings nuevas.
 *
 * Tokens, reset acotado, tipografia base y botones base. La cargan todas las
 * plantillas templates/landing-*.php, antes de frogmi-componentes.css.
 *
 * Gracias y /nuevo/ no la usan: siguen con frogmi-new.css, congelado.
 *
 * Todo queda bajo .frogmi-site para no alcanzar nunca a las landings legacy
 * que sirve Woodmart ni al escritorio de WordPress.
 */

/*
 * Montserrat servida desde el theme (SIL Open Font License 1.1, ver
 * assets/fonts/LICENSE-Montserrat.txt). Lleva un nombre de familia propio para
 * que no se mezcle con las caras "Montserrat" que declaran Woodmart y los
 * plugins, que se cargan despues y ganarian a igualdad de nombre.
 */
@font-face {
	font-family: "Frogmi Montserrat";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/montserrat-400.woff2") format("woff2");
}

@font-face {
	font-family: "Frogmi Montserrat";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/montserrat-500.woff2") format("woff2");
}

@font-face {
	font-family: "Frogmi Montserrat";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/montserrat-600.woff2") format("woff2");
}

@font-face {
	font-family: "Frogmi Montserrat";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/montserrat-700.woff2") format("woff2");
}

@font-face {
	font-family: "Frogmi Montserrat";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/montserrat-800.woff2") format("woff2");
}

.frogmi-site {
	/* Color */
	--frogmi-verde: #51ba5c;
	--frogmi-verde-oscuro: #2aa337;
	--frogmi-verde-claro: #8ed382;
	--frogmi-sombra-verde: rgba(81, 186, 92, .53);
	--frogmi-texto: rgb(28, 28, 28);
	--frogmi-gris-800: #333;
	--frogmi-borde: rgba(129, 129, 129, .2);
	--frogmi-blanco: #fff;
	--frogmi-fondo-oscuro: #1d2632;
	--frogmi-fondo-barra: rgb(33, 33, 33);
	--frogmi-fondo-tarjeta: #eaf3f2;
	--frogmi-aviso: #e0b252;
	--frogmi-exito: #459647;
	--frogmi-error: #f00;

	/* Tipografia */
	--frogmi-fuente: "Frogmi Montserrat", "Montserrat", Arial, Helvetica, sans-serif;

	/* Medidas */
	--frogmi-ancho: 1222px;

	/* Espacio entre secciones: .frogmi-seccion y sus modificadores. */
	--frogmi-seccion-s: 30px;
	--frogmi-seccion-m: 70px;
	--frogmi-seccion-l: 120px;
	--frogmi-seccion-xl: 190px;

	font-family: var(--frogmi-fuente);
	font-size: 14px;
	line-height: 1.6;
	color: var(--frogmi-texto);
}

@media (max-width: 767px) {

	.frogmi-site {
		--frogmi-seccion-s: 20px;
		--frogmi-seccion-m: 30px;
		--frogmi-seccion-l: 70px;
		--frogmi-seccion-xl: 90px;
	}
}

/* Reset acotado: solo alcanza a los descendientes de .frogmi-site. */
.frogmi-site *,
.frogmi-site *::before,
.frogmi-site *::after {
	box-sizing: border-box;
}

.frogmi-container {
	width: 100%;
	max-width: var(--frogmi-ancho);
	margin-inline: auto;
	padding-inline: 15px;
}

/* ----------------------------------------------------------------- Botones */

.frogmi-site .frogmi-boton {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0 solid transparent;
	box-shadow: none;
	font-family: inherit;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	vertical-align: middle;
	cursor: pointer;
	transition: color .25s ease, background-color .25s ease, opacity .25s ease, box-shadow .25s ease;
}

/* Verde relleno con esquinas de pastilla. */
.frogmi-site .frogmi-boton--solido {
	min-height: 48px;
	padding: 5px 28px;
	border-radius: 35px;
	background-color: var(--frogmi-verde);
	color: var(--frogmi-blanco);
	font-size: 15px;
	font-weight: 700;
}

.frogmi-site .frogmi-boton--solido:hover,
.frogmi-site .frogmi-boton--solido:focus-visible {
	color: var(--frogmi-blanco);
	box-shadow: inset 0 0 200px rgba(0, 0, 0, .1);
}

.frogmi-site .frogmi-boton--compacto {
	min-height: 42px;
	padding: 5px 20px;
}

/* Enlace subrayado con icono. */
.frogmi-site .frogmi-boton--enlace {
	min-height: 0;
	padding: 0;
	border-bottom: 2px solid var(--frogmi-gris-800);
	border-radius: 0;
	background-color: transparent;
	color: var(--frogmi-gris-800);
	font-size: 16px;
	font-weight: 600;
}

.frogmi-site .frogmi-boton--enlace:hover,
.frogmi-site .frogmi-boton--enlace:focus-visible {
	background-color: transparent;
	color: var(--frogmi-gris-800);
	opacity: .6;
}

/* El icono va delante del texto sin reordenar el DOM. */
.frogmi-site .frogmi-boton--icono-izq {
	flex-direction: row-reverse;
}

.frogmi-site .frogmi-boton--icono-izq .frogmi-boton__icono {
	margin-right: 5px;
	margin-left: 0;
}

.frogmi-boton__icono {
	display: inline-flex;
	margin-left: 5px;
	line-height: 1;
}

.frogmi-boton__icono svg {
	display: block;
	width: .875em;
	height: .875em;
	fill: currentColor;
}