/*
 * Frogmi LP — NRF 2027.
 */

.frogmi-site .frogmi-nrf {
	--frogmi-nrf-menta: #f1f5f2;
	--frogmi-nrf-verde: #296048;
	--frogmi-nrf-acento: #51ba5c;
	--frogmi-nrf-amarillo: #f2c94c;
	--frogmi-nrf-borde: #e6ece8;
	padding-top: 0;
	/* Clip en ambos ejes: con hidden en alguno, position: sticky deja de funcionar. */
	overflow: clip;
	background: var(--frogmi-nrf-menta);
}

.frogmi-site .frogmi-nrf__main {
	overflow-x: clip;
}

.frogmi-site .frogmi-nrf .frogmi-footer-landing {
	margin-top: 0;
	background: #1f2631;
}

.frogmi-site .frogmi-nrf .frogmi-boton--brillo,
.frogmi-site .frogmi-header-landing .frogmi-boton--brillo {
	background-color: var(--frogmi-nrf-acento, #51ba5c);
	font-weight: 700;
}

.frogmi-site .frogmi-nrf .frogmi-encabezado__titulo {
	font-size: clamp(25px, 2.4vw, 34px);
	font-weight: 800;
	line-height: 1.15;
}

.frogmi-site .frogmi-nrf .frogmi-encabezado__bajada {
	font-size: 18px;
	line-height: 1.4;
	color: #222;
}

.frogmi-site .frogmi-nrf .frogmi-encabezado--cierre .frogmi-encabezado__titulo {
	font-size: clamp(25px, 2.6vw, 34px);
	line-height: 1.2;
}

.frogmi-site .frogmi-nrf__boton-linea {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 5px 28px;
	border: 2px solid #fff;
	border-radius: 35px;
	background: transparent;
	color: #fff;
	font-family: var(--frogmi-fuente);
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease;
}

.frogmi-site .frogmi-nrf__boton-linea:hover,
.frogmi-site .frogmi-nrf__boton-linea:focus-visible {
	background: #fff;
	color: var(--frogmi-nrf-verde);
}

/* Hero: bajo la barra blanca del header; la ilustracion va en el fondo. */

.frogmi-site .frogmi-nrf-hero {
	position: relative;
	margin-top: 60px;
	padding: 60px 0 78%;
	background-color: var(--frogmi-nrf-verde);
	background-image: var(--frogmi-nrf-hero-m);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 100% auto;
	color: #fff;
}

.frogmi-site .frogmi-nrf-hero__inner {
	position: relative;
	z-index: 1;
}

.frogmi-site .frogmi-nrf-hero__copy {
	max-width: 570px;
}

.frogmi-site .frogmi-nrf-hero__ojo {
	margin: 0 0 8px;
	color: var(--frogmi-nrf-acento);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.45;
	text-transform: uppercase;
}

.frogmi-site .frogmi-nrf-hero__titulo {
	margin: 0 0 22px;
	color: #fff;
	font-size: clamp(28px, 2.9vw, 40px);
	font-weight: 800;
	line-height: 1.1;
}

.frogmi-site .frogmi-nrf-hero__bajada {
	margin: 0 0 26px;
	max-width: 560px;
	color: #fff;
	font-size: clamp(16px, 1.45vw, 20px);
	line-height: 1.25;
}

.frogmi-site .frogmi-nrf-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 30px;
	margin-bottom: 26px;
}

.frogmi-site .frogmi-nrf-hero__meta {
	margin: 0;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
}

.frogmi-site .frogmi-nrf-hero__meta strong {
	font-weight: 800;
}

/* Flujo */

.frogmi-site .frogmi-nrf-flujo {
	position: relative;
	padding: 72px 0 110px;
	background: var(--frogmi-nrf-menta);
}

.frogmi-site .frogmi-nrf-flujo::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 142px;
	background: url("../../img/nrf-difuminado.svg?v=2") center bottom / 100% 100% no-repeat;
	pointer-events: none;
}

.frogmi-site .frogmi-nrf-flujo .frogmi-encabezado {
	max-width: 900px;
	margin-inline: auto;
}

.frogmi-site .frogmi-nrf-flujo .frogmi-encabezado__bajada {
	max-width: 680px;
	margin-inline: auto;
}

.frogmi-site .frogmi-nrf-pasos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	margin: 40px 0 22px;
	padding: 0;
	list-style: none;
}

.frogmi-site .frogmi-nrf-pasos__item {
	position: relative;
	text-align: center;
}

.frogmi-site .frogmi-nrf-pasos__linea {
	display: none;
}

.frogmi-site .frogmi-nrf-pasos__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 82px;
	height: 82px;
	margin: 0 auto 30px;
	border: 2px solid var(--frogmi-nrf-acento);
	border-radius: 50%;
	background: #fff;
}

.frogmi-site .frogmi-nrf-pasos__icono img {
	width: 34px;
	height: auto;
}

.frogmi-site .frogmi-nrf-pasos__kicker {
	margin: 0 0 6px;
	color: var(--frogmi-nrf-acento);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
}

.frogmi-site .frogmi-nrf-pasos__titulo {
	margin: 0 0 10px;
	color: var(--frogmi-texto);
	font-size: clamp(16px, 1.3vw, 18px);
	font-weight: 800;
	line-height: 1.15;
}

.frogmi-site .frogmi-nrf-pasos__texto {
	margin: 0 auto;
	max-width: 270px;
	color: #222;
	font-size: 16px;
	line-height: 1.2;
}

.frogmi-site .frogmi-nrf-escena {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: stretch;
}

.frogmi-site .frogmi-nrf-escena__flecha {
	display: none;
}

.frogmi-site .frogmi-nrf-tarjeta {
	padding: 26px 24px;
	border-radius: 34px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(16, 40, 24, .06);
}

.frogmi-site .frogmi-nrf-tarjeta:first-child {
	text-align: center;
}

.frogmi-site .frogmi-nrf-tarjeta__titulo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
}

.frogmi-site .frogmi-nrf-tarjeta:first-child .frogmi-nrf-tarjeta__titulo {
	justify-content: center;
	margin: 6px 0 20px;
}

.frogmi-site .frogmi-nrf-tarjeta__titulo--centro {
	justify-content: center;
	text-align: center;
}

.frogmi-site .frogmi-nrf-tarjeta__spark {
	width: 24px;
	height: auto;
	flex-shrink: 0;
}

.frogmi-site .frogmi-nrf-tarjeta__chip-icono {
	width: 32px;
	height: auto;
	flex-shrink: 0;
}

.frogmi-site .frogmi-nrf-tarjeta__meta img {
	width: 24px;
	height: auto;
	flex-shrink: 0;
}

/* Audio y boton a un 80 % del ancho, centrados. */
.frogmi-site .frogmi-nrf-tarjeta__audio {
	display: block;
	width: 80%;
	height: auto;
	margin: 0 auto 18px;
	padding: 11px 12px;
	border-radius: 16px;
	background: #e7f2e6;
}

.frogmi-site .frogmi-nrf-tarjeta__enviar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 80%;
	min-height: 40px;
	margin: 0 auto;
	border-radius: 999px;
	background: var(--frogmi-nrf-acento);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}

.frogmi-site .frogmi-nrf-tarjeta__enviar-icono {
	width: 15px;
	height: auto;
}

.frogmi-site .frogmi-nrf-tarjeta__cita {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	color: #222;
	font-size: 13px;
	font-style: normal;
	line-height: 1.45;
}

.frogmi-site .frogmi-nrf-tarjeta__cita mark {
	display: inline;
	padding: 1px 5px;
	border-radius: 7px;
	background: #e3f1e1;
	color: inherit;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.frogmi-site .frogmi-nrf-tarjeta__cita mark.is-alerta {
	background: #fdf1c7;
}

.frogmi-site .frogmi-nrf-tarjeta__chip {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 16px;
	padding: 10px 12px;
	border-radius: 16px;
	background: var(--frogmi-nrf-menta);
	font-size: 12.5px;
	line-height: 1.2;
}

.frogmi-site .frogmi-nrf-tarjeta__chip strong,
.frogmi-site .frogmi-nrf-tarjeta__chip span {
	display: block;
}

.frogmi-site .frogmi-nrf-tarjeta__chip strong {
	margin-bottom: 4px;
	font-weight: 800;
}

.frogmi-site .frogmi-nrf-tarjeta__prio {
	text-align: center;
}

.frogmi-site .frogmi-nrf-tarjeta__barras {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 8px;
}

.frogmi-site .frogmi-nrf-tarjeta__barras i {
	width: 40px;
	height: 10px;
	border-radius: 8px;
	background: #e4e4e4;
}

.frogmi-site .frogmi-nrf-tarjeta__barras i.is-activa {
	background: var(--frogmi-nrf-amarillo);
}

.frogmi-site .frogmi-nrf-tarjeta__prio p {
	margin: 0;
	font-size: 12.5px;
}

.frogmi-site .frogmi-nrf-tarjeta__prio strong {
	font-weight: 800;
}

.frogmi-site .frogmi-nrf-tarjeta__titulo--aviso {
	margin-bottom: 12px;
	padding: 8px 12px;
	border-radius: 16px;
	background: var(--frogmi-nrf-menta);
}

.frogmi-site .frogmi-nrf-tarjeta__titulo--aviso .frogmi-nrf-tarjeta__spark {
	width: 24px;
}

.frogmi-site .frogmi-nrf-tarjeta__detalle-caja {
	margin-bottom: 12px;
	padding: 12px 14px;
	border-radius: 16px;
	background: var(--frogmi-nrf-menta);
}

.frogmi-site .frogmi-nrf-tarjeta__tarea {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 800;
}

.frogmi-site .frogmi-nrf-tarjeta__detalle {
	margin: 0 0 12px;
	color: #222;
	font-size: 12.5px;
	line-height: 1.2;
}

.frogmi-site .frogmi-nrf-tarjeta__meta {
	margin: 0;
	padding: 0;
	list-style: none;
}

.frogmi-site .frogmi-nrf-tarjeta__meta li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	font-size: 12px;
	line-height: 1.25;
}

.frogmi-site .frogmi-nrf-tarjeta__meta li:last-child {
	margin-bottom: 0;
}

.frogmi-site .frogmi-nrf-tarjeta__meta div {
	color: #333;
	font-size: 11px;
}

.frogmi-site .frogmi-nrf-tarjeta__meta strong {
	display: block;
	margin-top: 1px;
	color: var(--frogmi-texto);
	font-size: 13px;
	font-weight: 800;
}

.frogmi-site .frogmi-nrf-tarjeta__estado {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 5px 14px;
	border-radius: 999px;
	background: #fdf3d3;
	font-size: 12.5px;
	font-weight: 800;
}

.frogmi-site .frogmi-nrf-tarjeta__estado::before {
	content: "";
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--frogmi-nrf-amarillo);
}

/* Formatos */

.frogmi-site .frogmi-nrf-formatos {
	padding: 10px 0 100px;
	background: #fff;
}

.frogmi-site .frogmi-nrf-formatos__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: center;
	margin-bottom: 36px;
}

.frogmi-site .frogmi-nrf-formatos .frogmi-encabezado__bajada {
	max-width: 480px;
}

.frogmi-site .frogmi-nrf-formatos__media img {
	display: block;
	width: 100%;
	height: auto;
}

.frogmi-site .frogmi-nrf-formatos__cards {
	gap: 16px;
	margin-top: 8px;
}

.frogmi-site .frogmi-nrf-formato {
	padding: 30px 32px 34px;
	border: 1px solid var(--frogmi-nrf-borde);
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(16, 40, 24, .06);
}

/* Misma altura para los cuatro iconos, asi los titulos quedan alineados. */
.frogmi-site .frogmi-nrf-formato__icono {
	display: block;
	width: auto;
	max-width: 50px;
	height: 44px;
	margin-bottom: 24px;
	object-fit: contain;
	object-position: left center;
}

.frogmi-site .frogmi-nrf-formato h3 {
	margin: 0 0 14px;
	font-size: 19px;
	font-weight: 800;
}

.frogmi-site .frogmi-nrf-formato p {
	margin: 0;
	color: #222;
	font-size: 16px;
	line-height: 1.2;
}

.frogmi-site .frogmi-nrf-formatos__cta {
	margin: 32px 0 0;
	text-align: center;
}

/* Hub */

.frogmi-site .frogmi-nrf-hub {
	position: relative;
	padding: 90px 0;
	overflow: hidden;
	/* Brillo detras del diagrama, trama de puntos y degradado de profundidad. */
	background:
		radial-gradient(circle at 68% 52%, rgba(81, 186, 92, .3) 0, rgba(81, 186, 92, 0) 42%),
		radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px) 0 0 / 22px 22px,
		linear-gradient(160deg, #047451 0%, #036246 45%, #024a35 100%);
	color: #fff;
}

.frogmi-site .frogmi-nrf-hub__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
}

.frogmi-site .frogmi-nrf-hub__copy h2 {
	margin: 0 0 22px;
	color: #fff;
	font-size: clamp(25px, 2.1vw, 29px);
	font-weight: 800;
	line-height: 1.15;
}

.frogmi-site .frogmi-nrf-hub__copy p {
	margin: 0 0 34px;
	max-width: 360px;
	color: #fff;
	font-size: 18px;
	line-height: 1.4;
}

/* Movil y tablet: nodos en columna, sin conectores. */
.frogmi-site .frogmi-nrf-hub__diagrama {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.frogmi-site .frogmi-nrf-hub__rayos,
.frogmi-site .frogmi-nrf-hub__punto {
	display: none;
}

.frogmi-site .frogmi-nrf-hub__nodo,
.frogmi-site .frogmi-nrf-hub__centro {
	position: relative;
	z-index: 1;
}

.frogmi-site .frogmi-nrf-hub__nodo {
	display: flex;
	gap: 16px;
	align-items: center;
	min-height: 98px;
	padding: 14px 18px;
	border: 1px solid rgba(142, 211, 130, .45);
	border-radius: 20px;
	/* Vidrio: reflejo arriba a la izquierda sobre el verde de la tarjeta. */
	background:
		linear-gradient(145deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .03) 50%, rgba(0, 0, 0, .08) 100%),
		#015c41;
	box-shadow: 0 18px 40px rgba(0, 24, 14, .35), inset 0 1px 0 rgba(255, 255, 255, .2);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	animation: frogmi-nrf-flotar-nodo 6s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -1.2s);
	transition: border-color .45s ease, box-shadow .45s ease, scale .5s cubic-bezier(.22, 1, .36, 1), opacity .55s ease-out, transform .55s ease-out;
}

.frogmi-site .frogmi-nrf-hub__nodo:hover {
	border-color: #8ed382;
	box-shadow: 0 22px 48px rgba(0, 24, 14, .4), 0 0 30px rgba(81, 186, 92, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
	scale: 1.03;
}

/* Icono sobre un halo calido, con sombra propia. */
.frogmi-site .frogmi-nrf-hub__icono {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, rgba(242, 201, 76, .3) 0, rgba(242, 201, 76, 0) 68%);
}

.frogmi-site .frogmi-nrf-hub__foto {
	width: 68px;
	height: 68px;
	object-fit: contain;
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .3));
	transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.frogmi-site .frogmi-nrf-hub__nodo:hover .frogmi-nrf-hub__foto {
	transform: rotate(-6deg) scale(1.08);
}

.frogmi-site .frogmi-nrf-hub__nodo h3 {
	margin: 0 0 4px;
	color: #fff;
	font-size: 15px;
	font-weight: 800;
}

.frogmi-site .frogmi-nrf-hub__nodo p {
	margin: 0;
	color: #fff;
	font-size: 13px;
	line-height: 1.3;
}

.frogmi-site .frogmi-nrf-hub__centro {
	order: -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 110px;
	height: 110px;
	margin: 0 auto 8px;
	border: 2px solid rgba(142, 211, 130, .85);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #1f9465 0, #0b6e50 55%, #06533c 100%);
	box-shadow: 0 0 0 10px rgba(81, 186, 92, .1), 0 0 70px rgba(81, 186, 92, .5), inset 0 2px 12px rgba(255, 255, 255, .18);
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	text-align: center;
}

.frogmi-site .frogmi-nrf-hub__nombre {
	position: relative;
	z-index: 1;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* Estrellas sueltas alrededor del diagrama (solo escritorio). */
.frogmi-site .frogmi-nrf-hub__estrella {
	display: none;
}

/* Anillo orbital punteado con un satelite, y ondas que se expanden. */
.frogmi-site .frogmi-nrf-hub__orbita,
.frogmi-site .frogmi-nrf-hub__onda {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.frogmi-site .frogmi-nrf-hub__orbita {
	inset: -18px;
	border: 1.5px dashed rgba(242, 201, 76, .55);
	animation: frogmi-nrf-girar 18s linear infinite;
}

.frogmi-site .frogmi-nrf-hub__orbita::after {
	content: "";
	position: absolute;
	top: -5px;
	left: 50%;
	width: 9px;
	height: 9px;
	margin-left: -4.5px;
	border-radius: 50%;
	background: #ffe08a;
	box-shadow: 0 0 10px 2px rgba(242, 201, 76, .8);
}

.frogmi-site .frogmi-nrf-hub__onda {
	inset: -2px;
	border: 2px solid rgba(81, 186, 92, .55);
	animation: frogmi-nrf-onda 3.6s ease-out infinite;
}

.frogmi-site .frogmi-nrf-hub__onda--2 {
	animation-delay: 1.8s;
}

/* Demos */

.frogmi-site .frogmi-nrf-demos {
	padding: 100px 0 40px;
	background: var(--frogmi-nrf-menta);
}

.frogmi-site .frogmi-nrf-demos .frogmi-encabezado {
	max-width: 900px;
	margin-inline: auto;
}

.frogmi-site .frogmi-nrf-demos .frogmi-encabezado__bajada {
	max-width: 640px;
	margin-inline: auto;
}

.frogmi-site .frogmi-nrf-demos__lista {
	display: grid;
	gap: 40px;
	margin-top: 40px;
}

.frogmi-site .frogmi-nrf-demo {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
	align-items: center;
	padding: 30px 26px;
	border-radius: 36px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(16, 40, 24, .04);
}

.frogmi-site .frogmi-nrf-demo__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
}

.frogmi-site .frogmi-nrf-demo__copy h3 {
	margin: 0 0 18px;
	color: var(--frogmi-texto);
	font-size: clamp(21px, 1.9vw, 26px);
	font-weight: 700;
	line-height: 1.2;
}

.frogmi-site .frogmi-nrf-demo__spark {
	display: inline-block;
	width: 26px;
	height: auto;
	margin-left: 4px;
	vertical-align: top;
	animation: frogmi-nrf-destello 2.6s ease-in-out infinite;
}

.frogmi-site .frogmi-nrf-demo__copy p {
	margin: 0 0 22px;
	color: #222;
	font-size: 18px;
	line-height: 1.3;
}

/* Agente IA: copy a la izquierda, ilustracion (foto + tarjetas) a la derecha. */

.frogmi-site .frogmi-nrf-agente {
	padding: 90px 0;
	background: #fff;
}

.frogmi-site .frogmi-nrf-agente__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
}

.frogmi-site .frogmi-nrf-agente__ojo {
	margin: 0 0 14px;
	color: var(--frogmi-nrf-acento);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.frogmi-site .frogmi-nrf-agente__copy h2 {
	margin: 0 0 26px;
	color: var(--frogmi-texto);
	font-size: clamp(25px, 2.4vw, 34px);
	font-weight: 800;
	line-height: 1.15;
}

.frogmi-site .frogmi-nrf-agente__lista {
	display: grid;
	gap: 16px;
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
}

.frogmi-site .frogmi-nrf-agente__lista li {
	position: relative;
	margin: 0;
	padding-left: 30px;
	color: #222;
	font-size: 18px;
	line-height: 1.4;
}

.frogmi-site .frogmi-nrf-agente__lista li::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat,
		var(--frogmi-nrf-acento);
}

/* Ilustracion: foto base con tarjetas flotantes encima (como el hero del home). */

.frogmi-site .frogmi-nrf-agente__visual {
	position: relative;
	width: 100%;
	max-width: 680px;
	margin: 0 auto;
	padding: 10px 0 80px;
	color: var(--frogmi-texto);
}

/* Reflejada: el celular queda hacia la izquierda. */
.frogmi-site .frogmi-nrf-agente__foto {
	display: block;
	width: 80%;
	height: auto;
	margin-left: 9%;
	transform: scaleX(-1);
}

.frogmi-site .frogmi-nrf-agente__caja {
	position: absolute;
	padding: 13px 14px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 18px 44px rgba(16, 40, 24, .13);
}

.frogmi-site .frogmi-nrf-agente__caja p {
	margin: 0;
	color: #333;
}

.frogmi-site .frogmi-nrf-agente__caja h3 {
	margin: 0;
	color: var(--frogmi-texto);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.25;
}

/* Iconos de linea del diseno; la flecha trae su propio relleno. */
.frogmi-site .frogmi-nrf-agente__variable svg,
.frogmi-site .frogmi-nrf-agente__ojo-caja svg,
.frogmi-site .frogmi-nrf-agente__dato svg {
	flex-shrink: 0;
	fill: none;
	stroke: var(--frogmi-nrf-acento);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1;
}

.frogmi-site .frogmi-nrf-agente__caja--nps {
	top: 15%;
	left: -2%;
	width: 31%;
}

.frogmi-site .frogmi-nrf-agente__nps {
	display: flex;
	gap: 10px;
	align-items: center;
}

.frogmi-site .frogmi-nrf-agente__nps svg {
	width: 17px;
	height: auto;
}

.frogmi-site .frogmi-nrf-agente__nps strong {
	color: #e2314f;
	font-size: 21px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}

.frogmi-site .frogmi-nrf-agente__caja--nps p {
	margin-top: 5px;
	font-size: 10px;
	line-height: 1.35;
}

.frogmi-site .frogmi-nrf-agente__caja--causa {
	top: 6%;
	right: -4%;
	width: 44%;
	padding: 16px;
}

.frogmi-site .frogmi-nrf-agente__caja--causa p {
	margin: 5px 0 11px;
	font-size: 9.5px;
	line-height: 1.45;
}

.frogmi-site .frogmi-nrf-agente__variables {
	display: grid;
	gap: 10px;
}

.frogmi-site .frogmi-nrf-agente__variable {
	display: grid;
	grid-template-columns: 12px 1fr auto;
	gap: 4px 6px;
	align-items: center;
	font-size: 9.5px;
	font-weight: 700;
	line-height: 1.2;
}

.frogmi-site .frogmi-nrf-agente__variable svg {
	justify-self: center;
	width: auto;
	height: 12px;
}

.frogmi-site .frogmi-nrf-agente__variable-valor {
	color: #e2314f;
	font-size: 11px;
	font-weight: 800;
}

.frogmi-site .frogmi-nrf-agente__variable--amarillo .frogmi-nrf-agente__variable-valor {
	color: #e0a800;
}

.frogmi-site .frogmi-nrf-agente__barra {
	grid-column: 1 / -1;
	height: 6px;
	overflow: hidden;
	border-radius: 6px;
	background: #fbe1e6;
}

.frogmi-site .frogmi-nrf-agente__barra::after {
	content: "";
	display: block;
	width: var(--valor);
	height: 100%;
	border-radius: inherit;
	background: #e2314f;
	transform-origin: left center;
}

.frogmi-site .frogmi-nrf-agente__variable--amarillo .frogmi-nrf-agente__barra {
	background: #fdf3cc;
}

.frogmi-site .frogmi-nrf-agente__variable--amarillo .frogmi-nrf-agente__barra::after {
	background: #f5c400;
}

.frogmi-site .frogmi-nrf-agente__caja--accion {
	bottom: 0;
	left: -2%;
	width: 47%;
}

.frogmi-site .frogmi-nrf-agente__ojo-caja {
	display: flex;
	gap: 7px;
	align-items: center;
	color: var(--frogmi-nrf-acento);
	font-size: 8.5px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.frogmi-site .frogmi-nrf-agente__ojo-caja svg {
	width: auto;
	height: 12px;
}

.frogmi-site .frogmi-nrf-agente__caja--accion h3 {
	margin: 6px 0 10px;
}

.frogmi-site .frogmi-nrf-agente__datos {
	display: flex;
	gap: 16px;
	padding-top: 12px;
	border-top: 1px solid var(--frogmi-nrf-borde);
}

.frogmi-site .frogmi-nrf-agente__dato {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 9px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

.frogmi-site .frogmi-nrf-agente__dato svg {
	width: auto;
	height: 15px;
}

.frogmi-site .frogmi-nrf-agente__dato small {
	display: block;
	color: #6b7570;
	font-size: 8.5px;
	font-weight: 400;
}

/* Las tarjetas entran una tras otra y las barras se llenan cuando aparece la ilustracion. */
.frogmi-revelar .frogmi-site .frogmi-nrf-agente__caja {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .6s ease, transform .6s ease;
	transition-delay: calc(.35s + var(--i) * .2s);
}

.frogmi-revelar .frogmi-site .frogmi-nrf-agente__barra::after {
	transform: scaleX(0);
	transition: transform .9s cubic-bezier(.2, .7, .2, 1) 1s;
}

.frogmi-revelar .frogmi-site .frogmi-nrf-agente__visual.is-visible .frogmi-nrf-agente__caja {
	opacity: 1;
	transform: none;
}

.frogmi-revelar .frogmi-site .frogmi-nrf-agente__visual.is-visible .frogmi-nrf-agente__barra::after {
	transform: none;
}

@media (min-width: 1025px) {

	.frogmi-site .frogmi-nrf-agente {
		padding: 110px 0;
	}

	.frogmi-site .frogmi-nrf-agente__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 56px;
	}
}

/* En movil la foto va completa y las tarjetas se apilan, montadas sobre ella. */
@media (max-width: 600px) {

	.frogmi-site .frogmi-nrf-agente {
		padding: 64px 0;
	}

	.frogmi-site .frogmi-nrf-agente__visual {
		display: flex;
		flex-direction: column;
		padding: 0;
	}

	.frogmi-site .frogmi-nrf-agente__foto {
		width: 100%;
		margin: 0;
	}

	.frogmi-site .frogmi-nrf-agente__caja {
		position: relative;
		inset: auto;
		width: auto;
	}

	.frogmi-site .frogmi-nrf-agente__caja--nps {
		position: absolute;
		top: 4%;
		left: 0;
		width: 46%;
		padding: 12px 14px;
		border-radius: 16px;
	}

	.frogmi-site .frogmi-nrf-agente__nps svg {
		width: 16px;
	}

	.frogmi-site .frogmi-nrf-agente__nps strong {
		font-size: 18px;
	}

	.frogmi-site .frogmi-nrf-agente__caja--nps p {
		font-size: 10px;
	}

	.frogmi-site .frogmi-nrf-agente__caja--causa {
		margin: -40px 0 0 8%;
	}

	.frogmi-site .frogmi-nrf-agente__caja--accion {
		margin: 14px 8% 0 0;
	}
}

/* Cierre */

.frogmi-site .frogmi-nrf-cierre {
	min-height: 0;
	padding: 70px 0 70%;
	background-color: var(--frogmi-nrf-verde);
	background-image: var(--frogmi-nrf-cierre-m);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 100% auto;
	color: #fff;
}

/* Movil: la ilustracion ocupa ~55 % inferior de la imagen (alto = 178 % del
   ancho), asi que el texto termina justo encima de la rana. */
@media (max-width: 1024px) {

	.frogmi-site .frogmi-nrf-cierre {
		padding: 60px 0 100%;
	}
}

.frogmi-site .frogmi-nrf-cierre__inner {
	max-width: 520px;
}

.frogmi-site .frogmi-nrf-cierre h2 {
	margin: 0 0 14px;
	color: #fff;
	font-size: clamp(28px, 2.9vw, 40px);
	font-weight: 800;
	line-height: 1.1;
}

.frogmi-site .frogmi-nrf-cierre p {
	margin: 0 0 24px;
	color: #fff;
	font-size: 20px;
	line-height: 1.25;
}

.frogmi-site .frogmi-nrf .frogmi-formulario textarea {
	height: 96px;
	padding-top: 10px;
}

.frogmi-site .frogmi-nrf .frogmi-formulario .col-md-12 {
	width: 100%;
	padding-inline: 15px;
}

@media (max-width: 767px) {

	.frogmi-site .frogmi-nrf-hero__acciones {
		flex-direction: column;
		align-items: stretch;
	}

	.frogmi-site .frogmi-nrf-hero__acciones .frogmi-boton,
	.frogmi-site .frogmi-nrf-hero__acciones .frogmi-nrf__boton-linea {
		width: 100%;
	}

	.frogmi-site .frogmi-nrf-tarjeta__enviar {
		min-height: 48px;
		font-size: 18px;
	}
}

@media (min-width: 768px) {

	.frogmi-site .frogmi-nrf-pasos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}

	.frogmi-site .frogmi-nrf-pasos__linea {
		position: absolute;
		top: 40px;
		right: calc(50% + 41px);
		left: calc(-50% - 20px + 41px);
		display: block;
		height: 2px;
		background: var(--frogmi-nrf-acento);
		transform-origin: left center;
	}

	.frogmi-site .frogmi-nrf-escena {
		grid-template-columns: 1fr auto 1fr auto 1fr;
		gap: 10px;
		align-items: stretch;
	}

	.frogmi-site .frogmi-nrf-escena__flecha {
		display: flex;
		align-items: center;
		width: 26px;
	}

	.frogmi-site .frogmi-nrf-escena__flecha img {
		width: 100%;
		height: auto;
	}

	.frogmi-site .frogmi-nrf-formatos__grid {
		grid-template-columns: 1fr 1.05fr;
		gap: 40px;
	}

	.frogmi-site .frogmi-nrf-formatos__cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.frogmi-site .frogmi-nrf-demo {
		grid-template-columns: .82fr 1fr;
		gap: 48px;
		padding: 40px 48px;
	}
}

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

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

	.frogmi-site .frogmi-nrf-escena {
		grid-template-columns: 1fr;
		max-width: 560px;
		margin-inline: auto;
	}

	.frogmi-site .frogmi-nrf-escena__flecha {
		display: none;
	}
}

@media (min-width: 1025px) {

	/* Contenido al ancho del diseño (1366 → ~1136 px). */
	.frogmi-site .frogmi-nrf,
	.frogmi-site .frogmi-header-landing {
		--frogmi-landing-contenido: min(1136px, calc(100% - 60px));
		--frogmi-landing-ancho: 1136px;
	}

	.frogmi-site .frogmi-nrf-hero {
		display: flex;
		align-items: center;
		min-height: 0;
		margin-top: 90px;
		padding: 50px 0 7.5vw;
		background-image: var(--frogmi-nrf-hero);
		background-position: center bottom;
		background-size: cover;
		aspect-ratio: 1859 / 846;
	}

	.frogmi-site .frogmi-nrf-hero__inner {
		width: var(--frogmi-landing-contenido);
	}

	.frogmi-site .frogmi-nrf-demos .frogmi-encabezado__titulo,
	.frogmi-site .frogmi-nrf-flujo .frogmi-encabezado__titulo {
		max-width: none;
		white-space: nowrap;
	}

	/* Tarjetas apilables: cada una se queda fija un poco mas abajo que la
	   anterior y la que queda debajo se encoge (--cubierta, desde nrf.js). */
	.frogmi-site .frogmi-nrf-demos__lista {
		gap: 60px;
		padding-bottom: 40px;
	}

	.frogmi-site .frogmi-nrf-demo {
		position: sticky;
		top: calc(110px + var(--i, 0) * 22px);
		box-shadow: 0 -8px 30px rgba(16, 40, 24, .06);
		transform: scale(calc(1 - var(--cubierta, 0) * .05));
		transform-origin: center top;
		filter: brightness(calc(1 - var(--cubierta, 0) * .06));
		will-change: transform;
	}

	.frogmi-site .frogmi-nrf-hero__copy {
		max-width: 600px;
	}

	.frogmi-site .frogmi-nrf-hero__acciones {
		flex-wrap: nowrap;
		gap: 20px;
	}

	.frogmi-site .frogmi-nrf-hero__acciones a {
		white-space: nowrap;
	}

	/* Hub: diagrama radial con conectores y puntos. */
	.frogmi-site .frogmi-nrf-hub {
		padding: 90px 0;
	}

	.frogmi-site .frogmi-nrf-hub__grid {
		grid-template-columns: minmax(0, 370px) minmax(0, 1fr);
		gap: 10px;
	}

	.frogmi-site .frogmi-nrf-hub__diagrama {
		display: block;
		height: 540px;
	}

	.frogmi-site .frogmi-nrf-hub__rayos {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		overflow: visible;
	}

	.frogmi-site .frogmi-nrf-hub__rayo,
	.frogmi-site .frogmi-nrf-hub__pulso {
		fill: none;
		vector-effect: non-scaling-stroke;
	}

	.frogmi-site .frogmi-nrf-hub__rayo {
		stroke: rgba(242, 201, 76, .4);
		stroke-width: 2;
	}

	/* Destello que recorre cada conexion del centro hacia el nodo. */
	.frogmi-site .frogmi-nrf-hub__pulso {
		stroke: #ffe08a;
		stroke-width: 3.5;
		stroke-linecap: round;
		stroke-dasharray: 10 90;
		stroke-dashoffset: 10;
		filter: drop-shadow(0 0 4px rgba(242, 201, 76, .9));
		animation: frogmi-nrf-pulso-rayo 2.8s cubic-bezier(.45, 0, .55, 1) infinite;
	}

	/* Punto amarillo con halo en el extremo de cada linea, sobre el borde del nodo. */
	.frogmi-site .frogmi-nrf-hub__punto {
		position: absolute;
		z-index: 2;
		display: block;
		width: 12px;
		height: 12px;
		border: 2px solid #ffe9a8;
		border-radius: 50%;
		background: #f2c94c;
		box-shadow: 0 0 0 4px rgba(242, 201, 76, .25), 0 0 12px rgba(242, 201, 76, .8);
		transform: translate(-50%, -50%);
		animation: frogmi-nrf-punto 2.4s ease-in-out infinite;
	}

	.frogmi-site .frogmi-nrf-hub__punto--asigna { top: 23%; left: 50%; }
	.frogmi-site .frogmi-nrf-hub__punto--audita { top: 45%; left: 33%; }
	.frogmi-site .frogmi-nrf-hub__punto--ejecuta { top: 45%; left: 67%; }
	.frogmi-site .frogmi-nrf-hub__punto--colabora { top: 77%; left: 27.5%; }
	.frogmi-site .frogmi-nrf-hub__punto--resuelve { top: 77%; left: 72.5%; }

	.frogmi-site .frogmi-nrf-hub__estrella {
		position: absolute;
		z-index: 0;
		display: block;
		height: auto;
		fill: #f7d774;
		filter: drop-shadow(0 0 6px rgba(242, 201, 76, .75));
		transform: translate(-50%, -50%);
		animation: frogmi-nrf-titilar 3.4s ease-in-out infinite;
	}

	.frogmi-site .frogmi-nrf-hub__nodo {
		position: absolute;
		width: 29%;
		height: 23%;
		gap: 10px;
		padding: 12px 14px 12px 10px;
		min-height: 0;
	}

	.frogmi-site .frogmi-nrf-hub__icono {
		width: 62px;
		height: 62px;
	}

	.frogmi-site .frogmi-nrf-hub__foto {
		width: 58px;
		height: 58px;
	}

	.frogmi-site .frogmi-nrf-hub__nodo--asigna { top: 0; left: 35.5%; }
	.frogmi-site .frogmi-nrf-hub__nodo--audita { top: 33.5%; left: 4%; }
	.frogmi-site .frogmi-nrf-hub__nodo--ejecuta { top: 33.5%; right: 4%; }
	.frogmi-site .frogmi-nrf-hub__nodo--colabora { top: 77%; left: 13%; }
	.frogmi-site .frogmi-nrf-hub__nodo--resuelve { top: 77%; left: 58%; }

	.frogmi-site .frogmi-nrf-hub__centro {
		position: absolute;
		top: 55%;
		left: 50%;
		z-index: 1;
		width: 150px;
		height: 150px;
		margin: 0;
		transform: translate(-50%, -50%);
	}

	.frogmi-site .frogmi-nrf-cierre {
		display: flex;
		align-items: center;
		min-height: clamp(340px, 30vw, 440px);
		padding: 60px 0;
		/* Mismo verde del fondo de la imagen: la ilustracion se ajusta al alto
		   y el resto de la franja continua sin corte. */
		background-color: #006044;
		background-image: var(--frogmi-nrf-cierre);
		background-position: right center;
		background-size: auto 100%;
	}

	.frogmi-site .frogmi-nrf-cierre > .frogmi-landing__contenedor {
		width: var(--frogmi-landing-contenido);
	}
}

/* Popup del formulario */

.frogmi-nrf-modal-abierto,
.frogmi-nrf-modal-abierto body {
	overflow: hidden;
}

.frogmi-site .frogmi-nrf-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.frogmi-site .frogmi-nrf-modal[hidden] {
	display: none;
}

.frogmi-site .frogmi-nrf-modal__fondo {
	position: absolute;
	inset: 0;
	background: rgba(3, 40, 28, .62);
	opacity: 0;
	transition: opacity .25s ease;
	backdrop-filter: blur(3px);
}

.frogmi-site .frogmi-nrf-modal__caja {
	position: relative;
	width: min(640px, 100%);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 32px 34px 26px;
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
	color: var(--frogmi-texto);
	opacity: 0;
	transform: translateY(24px) scale(.97);
	transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
	outline: 0;
}

.frogmi-site .frogmi-nrf-modal.is-abierto .frogmi-nrf-modal__fondo,
.frogmi-site .frogmi-nrf-modal.is-abierto .frogmi-nrf-modal__caja {
	opacity: 1;
}

.frogmi-site .frogmi-nrf-modal.is-abierto .frogmi-nrf-modal__caja {
	transform: none;
}

.frogmi-site .frogmi-nrf-modal__cerrar {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--frogmi-nrf-menta);
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

/* Cruz dibujada con dos lineas. */
.frogmi-site .frogmi-nrf-modal__cerrar::before,
.frogmi-site .frogmi-nrf-modal__cerrar::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 2px;
	border-radius: 2px;
	background: var(--frogmi-texto);
	transform: translate(-50%, -50%) rotate(45deg);
}

.frogmi-site .frogmi-nrf-modal__cerrar::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.frogmi-site .frogmi-nrf-modal__cerrar:hover,
.frogmi-site .frogmi-nrf-modal__cerrar:focus-visible {
	background: #e3f1e1;
	transform: rotate(90deg);
}

.frogmi-site .frogmi-nrf-modal__ojo {
	margin: 0 0 6px;
	color: var(--frogmi-nrf-acento);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
}

.frogmi-site .frogmi-nrf-modal__titulo {
	margin: 0 0 8px;
	color: var(--frogmi-texto);
	font-size: clamp(24px, 3vw, 30px);
	font-weight: 800;
	line-height: 1.15;
}

.frogmi-site .frogmi-nrf-modal__bajada {
	margin: 0 0 18px;
	color: #444;
	font-size: 16px;
	line-height: 1.35;
}

/* Formulario compacto para que todo, boton incluido, quepa en una pantalla. */
.frogmi-site .frogmi-nrf-modal .frogmi-formulario form p {
	margin-bottom: 12px;
}

.frogmi-site .frogmi-nrf-modal .frogmi-formulario textarea {
	height: 84px;
	min-height: 84px;
	resize: vertical;
}

.frogmi-site .frogmi-nrf-modal .frogmi-formulario p.text-center {
	margin: 4px 0 0;
}

.frogmi-site .frogmi-nrf-modal .frogmi-formulario .wpcf7-submit {
	margin-top: 0;
}

@media (max-width: 767px) {

	.frogmi-site .frogmi-nrf-modal {
		align-items: flex-end;
		padding: 0;
	}

	.frogmi-site .frogmi-nrf-modal__caja {
		max-height: 92vh;
		padding: 34px 22px 24px;
		border-radius: 24px 24px 0 0;
	}
}

/* Movimiento */

@keyframes frogmi-nrf-pulso-rayo {
	0% { stroke-dashoffset: 10; opacity: 0; }
	15% { opacity: 1; }
	85% { opacity: 1; }
	100% { stroke-dashoffset: -90; opacity: 0; }
}

@keyframes frogmi-nrf-flotar-nodo {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -7px; }
}

@keyframes frogmi-nrf-titilar {
	0%, 100% { opacity: .95; scale: 1; rotate: 0deg; }
	50% { opacity: .35; scale: .6; rotate: 45deg; }
}

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

@keyframes frogmi-nrf-onda {
	0% { opacity: .7; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.9); }
}

@keyframes frogmi-nrf-punto {
	0%, 100% { box-shadow: 0 0 0 3px rgba(247, 215, 116, .3); }
	50% { box-shadow: 0 0 0 7px rgba(247, 215, 116, .12); }
}

@keyframes frogmi-nrf-destello {
	0%, 100% { opacity: 1; transform: scale(1) rotate(0); }
	50% { opacity: .75; transform: scale(.85) rotate(-8deg); }
}

@keyframes frogmi-nrf-flotar {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

/* La linea de los pasos se dibuja cuando aparece su paso. */
.frogmi-revelar .frogmi-site .frogmi-nrf-pasos__linea {
	transform: scaleX(0);
	transition: transform .7s ease .35s;
}

.frogmi-revelar .frogmi-site .frogmi-nrf-pasos__item.is-visible .frogmi-nrf-pasos__linea {
	transform: scaleX(1);
}

.frogmi-site .frogmi-nrf-pasos__icono {
	transition: transform .3s ease, box-shadow .3s ease;
}

.frogmi-site .frogmi-nrf-pasos__item:hover .frogmi-nrf-pasos__icono {
	box-shadow: 0 0 0 8px rgba(81, 186, 92, .12);
	transform: scale(1.06);
}

/* La barra de prioridad se llena al aparecer la tarjeta. */
.frogmi-site .frogmi-nrf-tarjeta__barras i.is-activa {
	background: linear-gradient(var(--frogmi-nrf-amarillo), var(--frogmi-nrf-amarillo)) left center / 100% 100% no-repeat #e4e4e4;
}

.frogmi-revelar .frogmi-site .frogmi-nrf-tarjeta .frogmi-nrf-tarjeta__barras i.is-activa {
	background-size: 0 100%;
	transition: background-size .8s ease .6s;
}

.frogmi-revelar .frogmi-site .frogmi-nrf-tarjeta.is-visible .frogmi-nrf-tarjeta__barras i.is-activa {
	background-size: 100% 100%;
}

.frogmi-site .frogmi-nrf-formatos__media img {
	animation: frogmi-nrf-flotar 5s ease-in-out infinite;
}

.frogmi-site .frogmi-nrf-formato,
.frogmi-site .frogmi-nrf-tarjeta {
	transition: opacity .55s ease-out, transform .55s ease-out, box-shadow .3s ease;
}

.frogmi-site .frogmi-nrf-formato.is-visible:hover,
.frogmi-site .frogmi-nrf-tarjeta.is-visible:hover {
	box-shadow: 0 16px 36px rgba(16, 40, 24, .1);
	transform: translateY(-6px);
}

/* Hover suave en ambos sentidos: la regla de revelado (mas especifica)
   anularia estas transiciones y el retraso escalonado de entrada (--d)
   tambien demoraria el hover. Aqui el retraso aplica solo a la entrada. */
.frogmi-revelar .frogmi-site .frogmi-nrf .frogmi-nrf-tarjeta,
.frogmi-revelar .frogmi-site .frogmi-nrf .frogmi-nrf-formato {
	transition:
		opacity .55s ease-out var(--d, 0s),
		transform .55s cubic-bezier(.22, 1, .36, 1) var(--d, 0s),
		box-shadow .45s ease;
}

.frogmi-revelar .frogmi-site .frogmi-nrf .frogmi-nrf-tarjeta.is-visible,
.frogmi-revelar .frogmi-site .frogmi-nrf .frogmi-nrf-formato.is-visible {
	transition:
		opacity .55s ease-out var(--d, 0s),
		transform .5s cubic-bezier(.22, 1, .36, 1),
		box-shadow .45s ease;
}

.frogmi-revelar .frogmi-site .frogmi-nrf .frogmi-nrf-hub__nodo {
	transition:
		opacity .55s ease-out var(--d, 0s),
		transform .55s ease-out var(--d, 0s),
		scale .5s cubic-bezier(.22, 1, .36, 1),
		border-color .45s ease,
		box-shadow .45s ease;
}

@media (prefers-reduced-motion: reduce) {

	.frogmi-site .frogmi-nrf *,
	.frogmi-site .frogmi-nrf *::before,
	.frogmi-site .frogmi-nrf *::after {
		animation: none !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}

	.frogmi-site .frogmi-nrf-demo {
		transform: none !important;
		filter: none !important;
	}
}

/* Header movil con selector de idioma: el logo no puede quedar aplastado. */
@media (max-width: 480px) {

	.frogmi-site .frogmi-header-landing--claro .frogmi-header-landing__marca,
	.frogmi-site .frogmi-header-landing--claro .frogmi-header-landing__logo {
		flex-shrink: 0;
	}

	.frogmi-site .frogmi-header-landing--claro .frogmi-header-landing__logo img {
		width: 96px;
	}

	.frogmi-site .frogmi-header-landing--claro .frogmi-header-landing__accion {
		gap: 10px;
		padding-inline: 8px;
	}

	.frogmi-site .frogmi-header-landing--claro .frogmi-header-landing__accion .frogmi-boton {
		min-height: 34px;
		padding-inline: 14px;
		font-size: 13px;
		white-space: nowrap;
	}

	.frogmi-site .frogmi-header-landing--claro .frogmi-idioma__actual img {
		display: none;
	}
}

/* En los telefonos mas angostos el CTA del header se oculta: el del hero
   esta justo debajo y el logo y el idioma tienen que caber. */
@media (max-width: 400px) {

	.frogmi-site .frogmi-header-landing--claro .frogmi-header-landing__accion .frogmi-boton {
		display: none;
	}

	.frogmi-site .frogmi-header-landing--claro .frogmi-idioma__actual img {
		display: block;
	}
}