/*
 * Frogmi LP — componentes compartidos de las landings.
 *
 * Se apoya en frogmi-base.css (tokens, reset acotado y base de .frogmi-boton).
 * Todo queda bajo .frogmi-site.
 *
 * Woodmart y el CSS del Customizer se siguen cargando en estas plantillas y
 * aplican estilos globales a h1-h6, p, a e img. Por eso cada componente fija
 * de forma explicita margenes, colores y tipografia en lugar de heredarlos.
 *
 * Puntos de corte, los mismos del original: movil hasta 767 px y header de
 * escritorio desde 1025 px.
 */

/* ------------------------------------------------------------ Landing */

/*
 * Envoltorio de la pagina: deja sitio al header, que va superpuesto, y admite
 * una imagen de fondo en linea (background-image).
 */
.frogmi-site .frogmi-landing {
	overflow: hidden;
	padding-top: var(--frogmi-landing-inicio, 140px);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.frogmi-site .frogmi-landing__contenedor {
	width: var(--frogmi-landing-contenido, min(1192px, calc(100% - 30px)));
	margin-inline: auto;
}

/* Variante ancha: contenido al 90 % de la ventana y header al 90 % en escritorio. */
.frogmi-site--ancha {
	--frogmi-landing-contenido: calc(90% - 16px);
}

@media (min-width: 1025px) {

	.frogmi-site--ancha {
		--frogmi-landing-ancho: 90%;
	}
}

/* -------------------------------------------------------------- Tonos */

/*
 * Color del texto segun el fondo. Oscuro (texto blanco) es el de partida; se
 * puede fijar en cualquier envoltorio o en el propio encabezado.
 */
.frogmi-site .frogmi-tono-oscuro,
.frogmi-site .frogmi-encabezado--oscuro {
	--frogmi-tinta-titulo: var(--frogmi-blanco);
	--frogmi-tinta-texto: var(--frogmi-blanco);
}

.frogmi-site .frogmi-tono-claro,
.frogmi-site .frogmi-encabezado--claro {
	--frogmi-tinta-titulo: var(--frogmi-texto);
	--frogmi-tinta-texto: var(--frogmi-texto);
}

/* ------------------------------------------------ Espacio entre secciones */

.frogmi-site .frogmi-seccion {
	margin-top: var(--frogmi-seccion-m);
}

.frogmi-site .frogmi-seccion--s {
	margin-top: var(--frogmi-seccion-s);
}

.frogmi-site .frogmi-seccion--l {
	margin-top: var(--frogmi-seccion-l);
}

.frogmi-site .frogmi-seccion--xl {
	margin-top: var(--frogmi-seccion-xl);
}

.frogmi-site .frogmi-seccion--0 {
	margin-top: 0;
}

/* ------------------------------------------------------------- Columnas */

.frogmi-site .frogmi-dos-columnas {
	display: flex;
	flex-wrap: wrap;
	margin-inline: -15px;
}

.frogmi-site .frogmi-dos-columnas--centradas {
	align-items: center;
}

.frogmi-site .frogmi-dos-columnas__columna {
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-inline: 15px;
}

@media (min-width: 768px) {

	.frogmi-site .frogmi-dos-columnas__columna {
		width: 50%;
	}

	/* 10 % del ancho de la columna; el % se resuelve contra la fila, el doble. */
	.frogmi-site .frogmi-dos-columnas__columna--holgura {
		padding-left: 5%;
	}
}

/* --------------------------------------------------------------- Grilla */

/*
 * Las celdas de una fila se estiran a la mas alta y la tarjeta ocupa la celda.
 * El espacio inferior es padding para que no colapse con el margen de la
 * seccion siguiente.
 */
.frogmi-site .frogmi-grilla {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 30px;
	padding-bottom: 30px;
}

.frogmi-site .frogmi-grilla__celda {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.frogmi-site .frogmi-grilla__celda > * {
	flex-grow: 1;
}

@media (min-width: 768px) {

	.frogmi-site .frogmi-grilla--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 768px) and (max-width: 1024px) {

	.frogmi-site .frogmi-grilla--tablet-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------ Boton con brillo */

.frogmi-site .frogmi-boton--brillo {
	z-index: 1;
	overflow: hidden;
	min-height: 42px;
	padding: 5px 35px;
	border-radius: 35px;
	background-color: var(--frogmi-verde);
	box-shadow: 0 0 15px var(--frogmi-sombra-verde);
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	transition: color .25s ease, transform .25s ease;
}

/* Barrido de izquierda a derecha al pasar el cursor. */
.frogmi-site .frogmi-boton--brillo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--frogmi-verde-oscuro);
	transform: translateX(-100%);
	transition: transform .35s ease;
}

.frogmi-site .frogmi-boton--brillo:hover,
.frogmi-site .frogmi-boton--brillo:focus-visible {
	color: #fff;
	box-shadow: 0 10px 22px rgba(0, 0, 0, .12);
	transform: translateY(-2px);
}

.frogmi-site .frogmi-boton--brillo:hover::before,
.frogmi-site .frogmi-boton--brillo:focus-visible::before {
	transform: translateX(0);
}

/* ------------------------------------------------------------ Encabezado */

.frogmi-site .frogmi-encabezado__cabeza {
	margin-bottom: 30px;
}

.frogmi-site .frogmi-encabezado__antetitulo {
	width: fit-content;
	max-width: 100%;
	margin: 0 0 10px;
	color: var(--frogmi-verde);
	font-size: 16px;
	font-weight: 700;
	line-height: 26px;
}

.frogmi-site .frogmi-encabezado__icono {
	display: inline;
	width: 13px;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.frogmi-site .frogmi-encabezado__titulo {
	margin: 0;
	color: var(--frogmi-tinta-titulo, var(--frogmi-blanco));
	font-family: var(--frogmi-fuente);
	font-size: 36px;
	font-weight: 600;
	line-height: 46px;
}

.frogmi-site .frogmi-encabezado__bajada {
	margin: 0 0 30px;
	color: var(--frogmi-tinta-texto, var(--frogmi-blanco));
	font-size: 22px;
	font-weight: 400;
	line-height: 33px;
}

.frogmi-site .frogmi-encabezado__accion {
	display: flex;
	margin-bottom: 10px;
}

/* Portada: primer bloque de la landing, con h1. */
.frogmi-site .frogmi-encabezado--portada .frogmi-encabezado__antetitulo {
	width: auto;
	margin-bottom: 30px;
	font-size: 15px;
	font-weight: 600;
	line-height: 25px;
}

.frogmi-site .frogmi-encabezado--portada .frogmi-encabezado__titulo {
	font-size: 50px;
	font-weight: 700;
	line-height: 57px;
}

/* Cierre: texto que acompaña al formulario. */
.frogmi-site .frogmi-encabezado--cierre .frogmi-encabezado__antetitulo {
	width: auto;
	margin-bottom: 30px;
	font-size: 12px;
	font-weight: 600;
	line-height: 22px;
}

.frogmi-site .frogmi-encabezado--cierre .frogmi-encabezado__titulo {
	font-size: 46px;
	line-height: 55px;
}

.frogmi-site .frogmi-encabezado--centro {
	text-align: center;
}

.frogmi-site .frogmi-encabezado--centro .frogmi-encabezado__antetitulo,
.frogmi-site .frogmi-encabezado--centro .frogmi-encabezado__titulo {
	margin-inline: auto;
}

@media (min-width: 1025px) {

	.frogmi-site .frogmi-encabezado--centro .frogmi-encabezado__titulo {
		max-width: 80%;
	}
}

@media (max-width: 767px) {

	.frogmi-site .frogmi-encabezado__titulo {
		font-size: 30px;
		line-height: 40px;
	}

	.frogmi-site .frogmi-encabezado__bajada {
		font-size: 18px;
		line-height: 26px;
	}

	.frogmi-site .frogmi-encabezado--portada .frogmi-encabezado__titulo {
		font-size: 40px;
		line-height: 48px;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {

	.frogmi-site .frogmi-encabezado--cierre .frogmi-encabezado__titulo {
		font-size: 36px;
		line-height: 46px;
	}
}

@media (max-width: 767px) {

	.frogmi-site .frogmi-encabezado--cierre .frogmi-encabezado__titulo {
		font-size: 30px;
		line-height: 40px;
	}
}

/* --------------------------------------------------------------- Tarjeta */

.frogmi-site .frogmi-tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px;
	border-radius: 20px;
	background-color: #fff;
	box-shadow: 0 0 6px rgba(0, 0, 0, .16);
	color: var(--frogmi-texto);
	transition: transform .25s ease, box-shadow .25s ease;
}

.frogmi-site .frogmi-tarjeta:hover {
	box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
	transform: translateY(-6px);
}

.frogmi-site .frogmi-tarjeta__icono {
	margin: 10px 0 15px;
	line-height: 0;
}

.frogmi-site .frogmi-tarjeta__icono img {
	display: block;
	max-width: 100%;
}

.frogmi-site .frogmi-tarjeta__etiqueta {
	align-self: flex-start;
	margin: 0;
	padding: 6px 10px 6px 0;
	border-radius: 8px;
	color: var(--frogmi-verde);
	font-size: 13px;
	font-weight: 700;
	line-height: 23px;
}

.frogmi-site .frogmi-tarjeta__titulo {
	margin: 0;
	color: var(--frogmi-texto);
	font-family: var(--frogmi-fuente);
	font-size: 23px;
	font-weight: 600;
	line-height: 28px;
}

.frogmi-site .frogmi-tarjeta__etiqueta + .frogmi-tarjeta__titulo {
	margin-top: 10px;
}

.frogmi-site .frogmi-tarjeta__texto {
	margin: 10px 0 0;
	color: var(--frogmi-texto);
	font-size: 18px;
	line-height: 28px;
}

/* La tarjeta entera es clicable sin anidar contenido dentro del enlace. */
.frogmi-site .frogmi-tarjeta__enlace {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
}

.frogmi-site .frogmi-tarjeta--paso .frogmi-tarjeta__texto {
	line-height: 26px;
}

/* ------------------------------------------------------ Caja destacada */

.frogmi-site .frogmi-caja-destacada {
	margin-inline: -15px;
	padding: 60px 75px;
	border-radius: 20px;
	box-shadow: 0 0 22px rgba(0, 84, 163, .52);
}

.frogmi-site .frogmi-caja-destacada .frogmi-encabezado__cabeza {
	margin-bottom: 12px;
}

/* El titulo se alinea a la izquierda desde 768 px; la bajada, desde 767. */
@media (max-width: 768px) {

	.frogmi-site .frogmi-caja-destacada .frogmi-encabezado__cabeza {
		text-align: left;
	}

	.frogmi-site .frogmi-caja-destacada .frogmi-encabezado__antetitulo {
		margin-inline: 0;
	}
}

@media (max-width: 767px) {

	.frogmi-site .frogmi-caja-destacada {
		padding: 15px 30px;
	}

	.frogmi-site .frogmi-caja-destacada .frogmi-encabezado__bajada {
		text-align: left;
	}
}

/* ----------------------------------------------------- Imagen de contenido */

.frogmi-site .frogmi-imagen {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin-bottom: 30px;
	border-radius: 12px;
}

/* ------------------------------------------------------ Header de landing */

.frogmi-site .frogmi-header-landing {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 390;
	width: 100%;
	overflow-x: clip;
}

.frogmi-site .frogmi-header-landing__barra {
	height: 60px;
	transition: height .2s ease, background-color .2s ease;
}

.frogmi-site .frogmi-header-landing--fijo .frogmi-header-landing__barra {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: var(--frogmi-fondo-barra);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
	transition-duration: .3s;
}

.admin-bar .frogmi-site .frogmi-header-landing--fijo .frogmi-header-landing__barra {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.frogmi-site .frogmi-header-landing__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: var(--frogmi-landing-ancho, 1222px);
	height: 100%;
	margin-inline: auto;
	padding-inline: 5px;
}

.frogmi-site .frogmi-header-landing__marca,
.frogmi-site .frogmi-header-landing__nav,
.frogmi-site .frogmi-header-landing__accion {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	padding-inline: 10px;
}

.frogmi-site .frogmi-header-landing__accion {
	justify-content: flex-end;
}

.frogmi-site .frogmi-header-landing__logo {
	display: block;
	line-height: 0;
}

.frogmi-site .frogmi-header-landing__logo img {
	display: block;
	width: 150px;
	max-width: 100%;
	height: auto;
	padding-block: 5px;
}

.frogmi-site .frogmi-header-landing__nav {
	display: none;
}

.frogmi-site .frogmi-header-landing__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 1px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.frogmi-site .frogmi-header-landing__menu > li {
	margin: 0;
}

.frogmi-site .frogmi-header-landing__enlace {
	display: flex;
	align-items: center;
	height: 40px;
	color: #fff;
	font-family: var(--frogmi-fuente);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: .25s;
}

.frogmi-site .frogmi-header-landing__enlace:hover,
.frogmi-site .frogmi-header-landing__enlace:focus-visible,
.frogmi-site .frogmi-header-landing__enlace.is-activo {
	color: rgba(255, 255, 255, .8);
}

/* Bajo 1025 px el CTA del original no tiene barrido ni desplazamiento. */
@media (max-width: 1024px) {

	/* Cede espacio el logo; el CTA conserva su ancho y nunca se recorta. */
	.frogmi-site .frogmi-header-landing__marca {
		flex-shrink: 1;
		min-width: 0;
	}

	.frogmi-site .frogmi-header-landing__logo {
		min-width: 0;
	}

	.frogmi-site .frogmi-header-landing .frogmi-boton--brillo {
		overflow: visible;
		white-space: nowrap;
		transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, opacity .25s ease;
	}

	.frogmi-site .frogmi-header-landing .frogmi-boton--brillo::before {
		content: none;
	}

	.frogmi-site .frogmi-header-landing .frogmi-boton--brillo:hover,
	.frogmi-site .frogmi-header-landing .frogmi-boton--brillo:focus-visible {
		box-shadow: 0 0 15px var(--frogmi-sombra-verde);
		transform: none;
	}
}

@media (max-width: 767px) {

	.frogmi-site .frogmi-header-landing .frogmi-boton--brillo {
		min-height: 38px;
		padding-inline: 20px;
		font-size: 15px;
	}
}

@media (min-width: 1025px) {

	.frogmi-site .frogmi-header-landing__barra {
		height: 90px;
	}

	.frogmi-site .frogmi-header-landing--fijo .frogmi-header-landing__barra {
		height: 60px;
	}

	/* Columnas laterales iguales: el menu queda centrado en la ventana. */
	.frogmi-site .frogmi-header-landing__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
	}

	.frogmi-site .frogmi-header-landing__nav {
		display: flex;
	}

	/* Sin menu, el CTA sigue en la columna derecha. */
	.frogmi-site .frogmi-header-landing__accion {
		grid-column: 3;
	}
}

/* Variante clara: barra blanca desde el inicio, logo a color y menu oscuro. */
.frogmi-site .frogmi-header-landing--claro .frogmi-header-landing__barra {
	background-color: #fff;
}

.frogmi-site .frogmi-header-landing--claro.frogmi-header-landing--fijo .frogmi-header-landing__barra {
	background-color: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

.frogmi-site .frogmi-header-landing--claro .frogmi-header-landing__enlace {
	color: var(--frogmi-texto);
}

.frogmi-site .frogmi-header-landing--claro .frogmi-header-landing__enlace:hover,
.frogmi-site .frogmi-header-landing--claro .frogmi-header-landing__enlace:focus-visible,
.frogmi-site .frogmi-header-landing--claro .frogmi-header-landing__enlace.is-activo {
	color: var(--frogmi-verde-oscuro);
}

/* Selector de idioma (WPML) junto al CTA. */
.frogmi-site .frogmi-header-landing__accion {
	gap: 18px;
}

.frogmi-site .frogmi-idioma {
	position: relative;
	color: #fff;
	font-family: var(--frogmi-fuente);
	font-size: 13px;
	font-weight: 600;
}

.frogmi-site .frogmi-header-landing--claro .frogmi-idioma {
	color: var(--frogmi-texto);
}

.frogmi-site .frogmi-idioma__actual {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	list-style: none;
}

.frogmi-site .frogmi-idioma__actual::-webkit-details-marker {
	display: none;
}

/* Chevron dibujado con bordes. */
.frogmi-site .frogmi-idioma__actual::after {
	content: "";
	width: 6px;
	height: 6px;
	margin: -3px 0 0 2px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.frogmi-site .frogmi-idioma[open] .frogmi-idioma__actual::after {
	margin-top: 3px;
	transform: rotate(-135deg);
}

.frogmi-site .frogmi-idioma__lista {
	position: absolute;
	top: calc(100% + 10px);
	right: -10px;
	min-width: 76px;
	margin: 0;
	padding: 6px 0;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	list-style: none;
}

.frogmi-site .frogmi-idioma__lista a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	color: var(--frogmi-texto);
	text-decoration: none;
}

.frogmi-site .frogmi-idioma__lista a:hover,
.frogmi-site .frogmi-idioma__lista a:focus-visible {
	color: var(--frogmi-verde-oscuro);
}

/* -------------------------------------------------------- Pie de landing */

.frogmi-site .frogmi-footer-landing {
	padding-block: 20px;
	background-color: var(--frogmi-fondo-oscuro);
}

.frogmi-site .frogmi-footer-landing__inner {
	width: var(--frogmi-landing-contenido, min(1192px, calc(100% - 30px)));
	max-width: 100%;
	margin-inline: auto;
	padding-top: 35px;
	text-align: center;
}

.frogmi-site .frogmi-footer-landing__marca {
	margin-bottom: 30px;
	line-height: 0;
}

.frogmi-site .frogmi-footer-landing__marca img {
	display: inline-block;
	width: 184px;
	max-width: 100%;
	height: auto;
}

.frogmi-site .frogmi-footer-landing__enlaces {
	margin: 0;
	padding: 0;
	list-style: none;
}

.frogmi-site .frogmi-footer-landing__enlaces li {
	margin: 0 0 30px;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 25px;
}

.frogmi-site .frogmi-footer-landing__enlaces a {
	color: #fff;
	text-decoration: none;
}

/* Movil: el original deja el alto de su columna vacia bajo los enlaces. */
@media (max-width: 767px) {

	.frogmi-site .frogmi-footer-landing {
		padding-bottom: 55px;
	}
}

@media (min-width: 768px) {

	.frogmi-site .frogmi-footer-landing__inner {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		text-align: left;
	}

	/* Columnas de 4/12 y 8/12 con 15 px de medianil a cada lado. */
	.frogmi-site .frogmi-footer-landing__marca {
		flex: 0 0 calc(33.33333333% - 20px);
		max-width: calc(33.33333333% - 20px);
	}

	/* En linea y separados por el espacio del texto, como en el original. */
	.frogmi-site .frogmi-footer-landing__enlaces {
		flex: 0 0 calc(66.66666667% - 10px);
		max-width: calc(66.66666667% - 10px);
		text-align: right;
	}

	.frogmi-site .frogmi-footer-landing__enlaces li {
		display: inline-block;
	}

	.frogmi-site .frogmi-footer-landing__enlaces li + li {
		margin-left: 15px;
	}
}

/* ---------------------------------------------------- Bloque formulario */

.frogmi-site .frogmi-bloque-formulario__caja {
	display: flow-root;
	margin-inline: -15px;
	padding: 20px 35px;
	border-radius: 20px;
	background-color: #fff;
	color: var(--frogmi-texto);
}

.frogmi-site .frogmi-bloque-formulario__titulo {
	margin: 0 0 30px;
	color: var(--frogmi-texto);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}

@media (max-width: 767px) {

	.frogmi-site .frogmi-bloque-formulario__columna-caja {
		padding: 32px 30px 0;
	}
}

@media (min-width: 768px) {

	/* 5 % del ancho de la columna. */
	.frogmi-site .frogmi-bloque-formulario__columna-caja {
		padding-left: 2.5%;
	}
}

/* ------------------------------------------------------ Formulario CF7 */

/*
 * La definicion del formulario usa la rejilla de Bootstrap que trae Woodmart;
 * se reproduce aqui, acotada, para no depender de ella.
 */
.frogmi-site .frogmi-formulario .row {
	display: flex;
	flex-wrap: wrap;
	margin-inline: -15px;
}

.frogmi-site .frogmi-formulario .col-md-6 {
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-inline: 15px;
}

/* La rejilla que usa el formulario CF7 pasa a dos columnas desde 769 px. */
@media (min-width: 769px) {

	.frogmi-site .frogmi-formulario .col-md-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

.frogmi-site .frogmi-formulario form p {
	margin: 0 0 20px;
}

.frogmi-site .frogmi-formulario .text-center {
	text-align: center;
}

.frogmi-site .frogmi-formulario .hidden-fields-container {
	display: none;
}

.frogmi-site .frogmi-formulario input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="url"]),
.frogmi-site .frogmi-formulario textarea,
.frogmi-site .frogmi-formulario select {
	width: 100%;
	max-width: 100%;
	height: 42px;
	padding: 0 15px;
	border: 2px solid rgba(0, 0, 0, .1);
	border-radius: 10px;
	background-color: transparent;
	box-shadow: none;
	color: var(--frogmi-texto);
	font-family: var(--frogmi-fuente);
	font-size: 14px;
	line-height: 1.6;
	vertical-align: middle;
	transition: border-color .5s ease;
}

.frogmi-site .frogmi-formulario :is(input, textarea, select):focus {
	border-color: rgba(0, 0, 0, .15);
	outline: none;
}

.frogmi-site .frogmi-formulario ::placeholder {
	color: var(--frogmi-texto);
}

.frogmi-site .frogmi-formulario .wpcf7-submit {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-height: 42px;
	margin-top: 30px;
	padding: 5px 45px;
	border: 0;
	border-radius: 50px;
	background-color: var(--frogmi-verde);
	box-shadow: 0 0 15px var(--frogmi-sombra-verde);
	color: #fff;
	font-family: var(--frogmi-fuente);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	vertical-align: middle;
	cursor: pointer;
	transition: color .25s ease, transform .25s ease;
}

.frogmi-site .frogmi-formulario .wpcf7-submit:hover,
.frogmi-site .frogmi-formulario .wpcf7-submit:focus-visible {
	color: #fff;
	box-shadow: 0 10px 22px rgba(0, 0, 0, .12);
	transform: translateY(-2px);
}

.frogmi-site .frogmi-formulario .wpcf7-spinner {
	position: relative;
	visibility: hidden;
	margin-left: -5px;
}

.frogmi-site .frogmi-formulario .wpcf7-spinner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 20px;
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	border: 1px solid transparent;
	border-left-color: #242424;
	border-radius: 50%;
	vertical-align: middle;
	animation: frogmi-girar 450ms infinite linear paused;
}

.frogmi-site .frogmi-formulario form.submitting .wpcf7-spinner {
	visibility: visible;
}

.frogmi-site .frogmi-formulario form.submitting .wpcf7-spinner::before {
	animation-play-state: running;
}

@keyframes frogmi-girar {
	to {
		transform: rotate(360deg);
	}
}

.frogmi-site .frogmi-formulario .wpcf7-not-valid-tip {
	display: block;
	color: var(--frogmi-error);
}

/*
 * Mensaje de respuesta. CF7 trae su propio borde y margenes; se sustituyen por
 * el aviso de color de Woodmart. Los iconos son SVG propios en mascara y toman
 * el color del texto.
 */
.frogmi-site .frogmi-formulario form .wpcf7-response-output {
	position: relative;
	display: none;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px 7px;
	min-height: 60px;
	margin: 0 0 20px;
	padding: 10px 30px 10px 65px;
	border: 0;
	border-radius: 12px;
	background-color: var(--frogmi-aviso);
	color: #fff;
	text-align: start;
}

.frogmi-site .frogmi-formulario form:is(.sent, .invalid, .unaccepted, .spam, .failed, .aborted) .wpcf7-response-output {
	display: flex;
}

.frogmi-site .frogmi-formulario form.sent .wpcf7-response-output {
	background-color: var(--frogmi-exito);
}

.frogmi-site .frogmi-formulario form .wpcf7-response-output::before {
	--frogmi-icono-respuesta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000'%3E%3Ccircle cx='9' cy='9' r='8.1' stroke-width='1.4'/%3E%3Cpath d='M9 4.6v6' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='13.4' r='1' fill='%23000' stroke='none'/%3E%3C/svg%3E");
	content: "";
	position: absolute;
	top: calc(50% - 9px);
	left: 24px;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--frogmi-icono-respuesta) center / contain no-repeat;
	mask: var(--frogmi-icono-respuesta) center / contain no-repeat;
}

.frogmi-site .frogmi-formulario form.sent .wpcf7-response-output::before {
	--frogmi-icono-respuesta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M.6 10.4l5.2 5 11.4-11.2'/%3E%3C/svg%3E");
}

/* ------------------------------------------------ Plugins (shortcodes) */

/*
 * Base que los plugins de diagramas dan por supuesta y hasta ahora heredaban
 * de Woodmart. :where() deja la especificidad en la de un selector de
 * elemento para que cualquier regla propia del plugin siga ganando.
 */
:where(.frogmi-site .frogmi-plugin) :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--frogmi-fuente);
	line-height: 1.4;
}

:where(.frogmi-site .frogmi-plugin) img {
	max-width: 100%;
	vertical-align: middle;
}

.frogmi-site .frogmi-landing .frogmi-plugin {
	margin-bottom: 35px;
}

/* Linea de iconos_timeline: fina, verde claro y al 90 % del ancho. */
.frogmi-site .frogmi-plugin .ait-items::before {
	top: var(--ait-line-top, 118px);
	width: 90%;
	height: 1px;
	margin: auto;
	background-color: var(--frogmi-verde-claro);
}

/* --------------------------------------------------- Revelado con scroll */

/*
 * El estado oculto solo existe mientras <html> tiene .frogmi-revelar, que la
 * plantilla pone en el <head> y retira si este JS no llega a ejecutarse.
 */
.frogmi-revelar .frogmi-site [data-frogmi-revelar] {
	opacity: 0;
	transition: opacity .55s ease-out, transform .55s ease-out;
	will-change: opacity, transform;
}

.frogmi-revelar .frogmi-site [data-frogmi-revelar="izquierda"] {
	transform: translateX(-40px);
}

.frogmi-revelar .frogmi-site [data-frogmi-revelar="derecha"] {
	transform: translateX(40px);
}

.frogmi-revelar .frogmi-site [data-frogmi-revelar="abajo"] {
	transform: translateY(50px);
}

.frogmi-revelar .frogmi-site [data-frogmi-revelar].is-visible {
	opacity: 1;
	transform: none;
}