/*-------------------------------------------------------------
# Restyling 2026
# Estilos nuevos del rediseño. Se carga después de custom.css.
# Detalle de cada cambio en CHANGELOG-restyling.md (raíz del repo).
--------------------------------------------------------------*/

/*-------------------------------------------------------------
# Home · sellos sobre la imagen del hero
--------------------------------------------------------------*/
/* Medidas de Figma (home escritorio 10594:5654 / móvil 10607:305):
   grupo alineado a la derecha de la imagen, empieza 60px por encima de su borde inferior;
   el sello lima va delante del azul. En móvil, la misma composición al 86,4%. */
body.home #whoweare .whoweare-img {
	position: relative;
	margin-bottom: 144px;
}

.hero-sellos {
	position: absolute;
	right: 0;
	bottom: -144px;
	width: 206px;
	height: 204px;
	pointer-events: none;
	z-index: 2;
}

.hero-sello {
	position: absolute;
	display: block;
	max-width: none;
}

.hero-sello-permanencia {
	top: 0;
	left: 87px;
	width: 119px;
	height: 119px;
}

.hero-sello-5min {
	top: 55px;
	left: 0;
	width: 149px;
	height: 149px;
	z-index: 1;
}

/* Imagen del hero (sustituye al vídeo best_search.mp4 con poster.png) */
body.home #whoweare .hero-imagen,
body.home #whoweare .hero-imagen img {
	display: block;
	width: 100%;
	height: auto;
}

/* clip en vez del overflow-x: hidden de theme-default.css, que convertía
   el hero en una caja con scroll vertical propio. */
body.home #whoweare {
	padding-bottom: 48px;
	overflow-x: clip;
}

@media (max-width: 991px) {
	body.home #whoweare .whoweare-img {
		margin-bottom: 136px;
	}
	.hero-sellos {
		bottom: -116px;
		width: 178px;
		height: 176px;
	}
	.hero-sello-permanencia {
		left: 75px;
		width: 102px;
		height: 102px;
	}
	.hero-sello-5min {
		top: 47.5px;
		width: 129px;
		height: 129px;
	}
}

/*-------------------------------------------------------------
# Home · franja de cifras bajo el hero
# Figma: escritorio 10594-5654 · móvil 10607:401
--------------------------------------------------------------*/
#home-cifras {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 60px;
	padding: 15px;
	background-color: #CDF11C;
}

.home-cifra {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	white-space: nowrap;
}

.home-cifra-valor,
.home-cifra-texto {
	color: #222222;
	line-height: 28px;
}

.home-cifra-valor {
	font-size: 30px;
	font-weight: 700;
}

.home-cifra-texto {
	font-size: 18px;
	font-weight: 300;
}

@media (max-width: 575px) {
	#home-cifras {
		justify-content: space-between;
		gap: 10px;
	}
	.home-cifra-valor {
		font-size: 26px;
	}
	.home-cifra-texto {
		font-size: 16px;
	}
}

/*-------------------------------------------------------------
# Home · Chatbot / Búsqueda inteligente / Vende y comunica
# Figma: escritorio 10594:6029 · móvil 10607:412, 10607:426, 10607:502
# SemiBold de Figma = font-weight 500 (así está declarado Fustat-SemiBold en el tema)
--------------------------------------------------------------*/
#home-funcionalidades {
	background-color: #F8F6F4;
}

#home-funcionalidades .hf-bloque {
	box-sizing: border-box;
	max-width: 1284px;
	margin: 0 auto;
	padding: 40px 20px;
}

#home-funcionalidades .hf-intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

#home-funcionalidades .hf-titulo {
	margin: 0;
	font-size: 60px;
	line-height: 66px;
	font-weight: 500;
	color: #000000;
}

#home-funcionalidades .hf-texto {
	margin: 0;
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	color: #000000;
}

#home-funcionalidades .hf-texto strong {
	font-weight: 700;
	color: #000000;
}

#home-funcionalidades .hf-saber-mas {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	line-height: 22px;
	font-weight: 700;
	color: #000000;
	text-decoration: underline;
}

#home-funcionalidades .hf-saber-mas img {
	width: 13px;
	height: 13px;
}

/* Chatbot: centrado, con el vídeo debajo */
#home-funcionalidades .hf-chatbot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

#home-funcionalidades .hf-chatbot .hf-intro {
	max-width: 634px;
	align-items: center;
	text-align: center;
}

#home-funcionalidades .hf-chatbot .hf-saber-mas {
	font-weight: 400;
}

#home-funcionalidades .hf-video {
	width: 100%;
	max-width: 882px;
	aspect-ratio: 882 / 496.125;
	background-color: #FFFFFF;
	border-radius: 20px;
	overflow: hidden;
}

#home-funcionalidades .hf-video picture,
#home-funcionalidades .hf-video img,
#home-funcionalidades .hf-video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Búsqueda inteligente / Vende y comunica: intro a la izquierda, lista a la derecha */
#home-funcionalidades .hf-columnas {
	display: flex;
	align-items: flex-start;
	gap: 33px;
}

#home-funcionalidades .hf-columnas .hf-intro {
	flex: 0 1 477px;
}

#home-funcionalidades .hf-lista {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#home-funcionalidades .hf-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

#home-funcionalidades .hf-item img {
	flex-shrink: 0;
	width: 96px;
	height: 96px;
}

#home-funcionalidades .hf-item-titulo {
	margin: 0 0 6px;
	font-size: 22px;
	line-height: 22px;
	font-weight: 500;
	color: #000000;
}

#home-funcionalidades .hf-item-texto {
	margin: 0;
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	color: #000000;
}

@media (max-width: 991px) {
	#home-funcionalidades .hf-columnas {
		flex-direction: column;
	}
	#home-funcionalidades .hf-columnas .hf-intro {
		flex-basis: auto;
	}
	#home-funcionalidades .hf-lista {
		width: 100%;
	}
}

@media (max-width: 767px) {
	#home-funcionalidades .hf-bloque {
		padding: 20px 15px;
	}
	#home-funcionalidades .hf-chatbot {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	#home-funcionalidades .hf-titulo {
		font-size: 40px;
		line-height: 46px;
	}
	#home-funcionalidades .hf-chatbot .hf-texto,
	#home-funcionalidades .hf-chatbot .hf-saber-mas {
		font-size: 14px;
	}
	#home-funcionalidades .hf-video {
		border-radius: 5px;
	}
	#home-funcionalidades .hf-item img {
		width: 60px;
		height: 60px;
	}
	#home-funcionalidades .hf-item-titulo {
		font-size: 18px;
	}
	#home-funcionalidades .hf-item-texto {
		font-size: 14px;
		line-height: 20px;
	}
}

/*-------------------------------------------------------------
# Home · Preguntas frecuentes (tras el banner lima)
# Figma: escritorio 10594:6056 · sin diseño móvil (se apila, imagen debajo)
--------------------------------------------------------------*/
#home-faq {
	background-color: #FFFFFF;
}

#home-faq .home-faq-inner {
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 38px;
	max-width: 1536px;
	margin: 0 auto;
	padding: 40px 20px;
}

#home-faq .home-faq-textos {
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex: 0 1 730px;
	min-width: 0;
}

#home-faq .home-faq-titulo {
	margin: 0;
	font-size: 40px;
	line-height: 46px;
	font-weight: 500;
	color: #111111;
}

#home-faq .home-faq-subtitulo {
	margin: 0;
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	color: #111111;
}

#home-faq .home-faq-item {
	border-bottom: 1px solid #222222;
	opacity: 0.5;
	transition: opacity 0.2s;
}

#home-faq .home-faq-item:hover {
	opacity: 0.8;
}

#home-faq .home-faq-item[open] {
	border-bottom: 2px solid #29394E;
	opacity: 1;
}

#home-faq .home-faq-pregunta {
	display: block;
	padding: 18px 0;
	cursor: pointer;
	list-style: none;
	font-size: 18px;
	line-height: 24px;
	font-weight: 500;
	color: #222222;
}

#home-faq .home-faq-pregunta::-webkit-details-marker {
	display: none;
}

#home-faq .home-faq-item[open] .home-faq-pregunta {
	padding-bottom: 10px;
}

#home-faq .home-faq-respuesta {
	margin: 0;
	padding-bottom: 18px;
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	color: #222222;
}

/* Respuestas con varios párrafos, listas y enlaces */
#home-faq .home-faq-respuesta p,
#home-faq .home-faq-respuesta li {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	color: inherit;
}

#home-faq .home-faq-respuesta p + p,
#home-faq .home-faq-respuesta p + ul,
#home-faq .home-faq-respuesta ul + p {
	margin-top: 10px;
}

#home-faq .home-faq-respuesta ul {
	margin: 0;
	padding-left: 20px;
	list-style: disc;
}

#home-faq .home-faq-respuesta li + li {
	margin-top: 4px;
}

#home-faq .home-faq-respuesta strong {
	font-weight: 700;
}

#home-faq .home-faq-respuesta a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

#home-faq .home-faq-respuesta a:hover,
#home-faq .home-faq-respuesta a:focus {
	text-decoration: none;
}

#home-faq .home-faq-imagen {
	flex: 0 1 728px;
	min-width: 0;
}

#home-faq .home-faq-imagen img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 21px;
}

@media (max-width: 991px) {
	#home-faq .home-faq-inner {
		flex-direction: column;
		padding: 30px 15px;
	}
	#home-faq .home-faq-textos,
	#home-faq .home-faq-imagen {
		flex-basis: auto;
		width: 100%;
	}
	#home-faq .home-faq-imagen {
		max-width: 500px;
		margin: 0 auto;
	}
	#home-faq .home-faq-titulo {
		font-size: 32px;
		line-height: 38px;
	}
}

/*-------------------------------------------------------------
# Home · Newsletter (formulario de Acumbamail) antes del footer
# Figma: 10594:5661 · sin diseño móvil (se reducen los tamaños)
--------------------------------------------------------------*/
#home-newsletter {
	background-color: #F8F6F4;
}

#home-newsletter .home-newsletter-inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 60px;
	max-width: 1528px;
	margin: 0 auto;
	padding: 90px 20px;
}

#home-newsletter .home-newsletter-titulo {
	max-width: 960px;
	margin: 0;
	font-size: 80px;
	line-height: 86px;
	font-weight: 500;
	color: #222222;
}

#home-newsletter .home-newsletter-form {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 13px;
	width: 100%;
	max-width: 516px;
}

#home-newsletter .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

#home-newsletter .home-newsletter-campo {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 3px solid #0B0B0B;
}

#home-newsletter .home-newsletter-campo input {
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	outline: none;
	font-family: 'Fustat', sans-serif;
	font-size: 24px;
	line-height: 33px;
	font-weight: 400;
	color: #222222;
}

#home-newsletter .home-newsletter-campo input::placeholder {
	color: #989898;
	opacity: 1;
}

#home-newsletter .home-newsletter-enviar {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: transform 0.2s;
}

#home-newsletter .home-newsletter-enviar:hover {
	transform: scale(1.1);
}

#home-newsletter .home-newsletter-enviar img {
	display: block;
	width: 30px;
	height: 30px;
}

#home-newsletter .home-newsletter-acepto {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

#home-newsletter .home-newsletter-acepto input {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	margin: 0;
	border: 1.5px solid #4E4E4E;
	border-radius: 4.5px;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

#home-newsletter .home-newsletter-acepto input:checked {
	border-color: #29394E;
	background: #29394E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 18px no-repeat;
}

#home-newsletter .home-newsletter-acepto span,
#home-newsletter .home-newsletter-acepto a {
	font-size: 21px;
	line-height: 30px;
	font-weight: 400;
	color: #4E4E4E;
}

#home-newsletter .home-newsletter-acepto a {
	font-weight: 500;
	text-decoration: underline;
}

/* Respuesta de Acumbamail: solo aparece al enviar */
#home-newsletter .home-newsletter-resultado {
	display: none;
	width: 100%;
	height: 72px;
	border: 0;
}

@media (max-width: 991px) {
	#home-newsletter .home-newsletter-inner {
		gap: 36px;
		padding: 50px 15px;
	}
	#home-newsletter .home-newsletter-titulo {
		font-size: 48px;
		line-height: 54px;
	}
}

@media (max-width: 575px) {
	#home-newsletter .home-newsletter-titulo {
		font-size: 34px;
		line-height: 40px;
	}
	#home-newsletter .home-newsletter-campo input {
		font-size: 18px;
		line-height: 26px;
	}
	#home-newsletter .home-newsletter-acepto span,
	#home-newsletter .home-newsletter-acepto a {
		font-size: 16px;
		line-height: 22px;
	}
	#home-newsletter .home-newsletter-acepto input {
		width: 22px;
		height: 22px;
	}
}

/*-------------------------------------------------------------
# Producto · "Pruébalo en vivo" (sustituye a "Descubre EcommFinder")
# Figma: 10551:5741 · sin diseño móvil (en ≤767px se apilan)
--------------------------------------------------------------*/
#producto-demo {
	margin-top: 80px;
	padding-bottom: 40px;
}

#producto-demo .producto-demo-titulo {
	margin: 0 0 40px;
	text-align: center;
	font-size: 24px;
	line-height: 30px;
	font-weight: 500;
	color: #FFFFFF;
}

#producto-demo .producto-demo-lista {
	display: flex;
	align-items: center;
	max-width: 1380px;
	margin: 0 auto;
	padding: 40px 13px 20px 0;
}

#producto-demo .producto-demo-item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	min-width: 0;
	margin-right: -13px;
	text-decoration: none;
}

#producto-demo .producto-demo-item:nth-child(1) { transform: rotate(-10deg); }
#producto-demo .producto-demo-item:nth-child(2) { transform: rotate(3deg); }
#producto-demo .producto-demo-item:nth-child(3) { transform: rotate(-5deg); }

/* En Figma el nombre de la primera queda más abajo, fuera de la tarjeta central */
#producto-demo .producto-demo-item:nth-child(1) .producto-demo-nombre {
	margin: 22px 34px 0 0;
}

#producto-demo .producto-demo-item picture {
	display: block;
	width: 100%;
}

#producto-demo .producto-demo-item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 468.67 / 372;
	object-fit: cover;
	object-position: top;
	border-radius: 24px;
	box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.25);
	background-color: #FFFFFF;
}

#producto-demo .producto-demo-nombre {
	font-size: 18px;
	line-height: 24px;
	font-weight: 500;
	color: #FFFFFF;
	white-space: nowrap;
}

#producto-demo a.producto-demo-item img {
	transition: transform 0.2s;
}

#producto-demo a.producto-demo-item:hover img {
	transform: scale(1.03);
}

@media (max-width: 991px) {
	#producto-demo {
		margin-top: 50px;
	}
	#producto-demo .producto-demo-item img {
		border-radius: 14px;
	}
	#producto-demo .producto-demo-nombre {
		font-size: 15px;
		white-space: normal;
		text-align: right;
	}
}

@media (max-width: 767px) {
	#producto-demo .producto-demo-lista {
		flex-direction: column;
		gap: 36px;
		padding: 10px 0 0;
	}
	#producto-demo .producto-demo-item {
		width: 100%;
		max-width: 420px;
		margin-right: 0;
	}
	#producto-demo .producto-demo-item:nth-child(1) { transform: rotate(-4deg); }
	#producto-demo .producto-demo-item:nth-child(2) { transform: rotate(2deg); }
	#producto-demo .producto-demo-item:nth-child(3) { transform: rotate(-3deg); }
	#producto-demo .producto-demo-nombre,
	#producto-demo .producto-demo-item:nth-child(1) .producto-demo-nombre {
		margin: 0;
		font-size: 16px;
	}
}

/*-------------------------------------------------------------
# Producto · "¿Qué es EcommFinder?" y "Conéctalo en 3 pasos"
# Figma: 10634:5924 y 10551:6055 · sin diseño móvil (se apila)
--------------------------------------------------------------*/
#producto-que-es {
	background-color: #F8F6F4;
}

#producto-que-es .pq-que-es,
#producto-que-es .pq-pasos {
	box-sizing: border-box;
	max-width: 1540px;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}

#producto-que-es .pq-titulo {
	max-width: 863px;
	margin: 0;
	font-size: 56px;
	line-height: 60px;
	font-weight: 500;
	color: #222222;
}

/* ¿Qué es EcommFinder? */
#producto-que-es .pq-que-es {
	display: flex;
	align-items: center;
	gap: 133px;
	padding-top: 40px;
	padding-bottom: 40px;
}

#producto-que-es .pq-textos {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

#producto-que-es .pq-texto,
#producto-que-es .pq-checks p {
	margin: 0;
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	color: #222222;
}

#producto-que-es .pq-texto-destacado,
#producto-que-es .pq-checks strong {
	font-weight: 700;
	color: #222222;
}

#producto-que-es .pq-checks {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#producto-que-es .pq-checks li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

#producto-que-es .pq-checks img {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

#producto-que-es .pq-checks strong {
	display: block;
	font-size: 16px;
	line-height: 24px;
}

#producto-que-es .pq-imagen {
	flex: 0 1 731px;
	min-width: 0;
}

#producto-que-es .pq-imagen img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
}

/* Conéctalo en 3 pasos */
#producto-que-es .pq-pasos {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-top: 60px;
	padding-bottom: 60px;
}

#producto-que-es .pq-pasos-lista {
	display: flex;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#producto-que-es .pq-paso {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	padding: 36px;
	border-radius: 24px;
	background-color: #FFFFFF;
}

#producto-que-es .pq-paso-numero {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 7.33px;
	background-color: #CDF11C;
	font-size: 40px;
	line-height: 1;
	font-weight: 500;
	color: #323232;
}

#producto-que-es .pq-paso-titulo {
	margin: 0;
	font-size: 24px;
	line-height: 30px;
	font-weight: 500;
	color: #323232;
}

#producto-que-es .pq-paso-texto {
	margin: 0;
	font-size: 18px;
	line-height: 24px;
	font-weight: 300;
	color: #222222;
}

@media (max-width: 1199px) {
	#producto-que-es .pq-que-es {
		gap: 50px;
	}
}

@media (max-width: 991px) {
	#producto-que-es .pq-que-es {
		flex-direction: column;
		align-items: stretch;
		gap: 36px;
		padding: 40px 15px;
	}
	#producto-que-es .pq-imagen {
		flex-basis: auto;
		max-width: 731px;
		width: 100%;
		margin: 0 auto;
	}
	#producto-que-es .pq-titulo {
		font-size: 40px;
		line-height: 46px;
	}
	#producto-que-es .pq-pasos {
		padding: 30px 15px 50px;
	}
	#producto-que-es .pq-pasos-lista {
		flex-direction: column;
		gap: 16px;
	}
	#producto-que-es .pq-paso {
		padding: 24px;
	}
}

@media (max-width: 575px) {
	#producto-que-es .pq-titulo {
		font-size: 34px;
		line-height: 40px;
	}
	#producto-que-es .pq-imagen img {
		border-radius: 12px;
	}
	#producto-que-es .pq-paso-texto {
		font-size: 16px;
		line-height: 22px;
	}
}

/*-------------------------------------------------------------
# Producto · "Plataformas compatibles" (tras la franja lima #confianza)
# Figma: 10634:6006 · sin diseño móvil (2 columnas y luego 1)
--------------------------------------------------------------*/
#producto-plataformas {
	background-color: #F8F6F4;
}

#producto-plataformas .pp-inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 1540px;
	margin: 0 auto;
	padding: 60px 20px;
}

#producto-plataformas .pp-titulo {
	max-width: 863px;
	margin: 0;
	font-size: 56px;
	line-height: 60px;
	font-weight: 500;
	color: #222222;
}

#producto-plataformas .pp-texto {
	max-width: 807px;
	margin: 0;
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	color: #222222;
}

#producto-plataformas .pp-lista {
	display: flex;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#producto-plataformas .pp-item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
	padding: 36px;
	border-radius: 24px;
	background-color: #FFFFFF;
}

#producto-plataformas .pp-nombre {
	margin: 0;
	font-size: 24px;
	line-height: 30px;
	font-weight: 500;
	color: #323232;
}

#producto-plataformas .pp-detalle {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#producto-plataformas .pp-detalle p,
#producto-plataformas .pp-detalle a {
	margin: 0;
	font-size: 16px;
	line-height: 22px;
	color: #222222;
}

#producto-plataformas .pp-detalle p {
	font-weight: 400;
}

#producto-plataformas .pp-detalle a {
	align-self: flex-start;
	font-weight: 700;
	text-decoration: underline;
}

#producto-plataformas .pp-detalle a:hover {
	text-decoration: none;
}

@media (max-width: 1199px) {
	#producto-plataformas .pp-lista {
		flex-wrap: wrap;
		gap: 16px;
	}
	#producto-plataformas .pp-item {
		flex: 1 1 calc(50% - 8px);
	}
}

@media (max-width: 991px) {
	#producto-plataformas .pp-inner {
		padding: 40px 15px;
	}
	#producto-plataformas .pp-titulo {
		font-size: 40px;
		line-height: 46px;
	}
	#producto-plataformas .pp-item {
		padding: 24px;
	}
}

@media (max-width: 575px) {
	#producto-plataformas .pp-titulo {
		font-size: 34px;
		line-height: 40px;
	}
	#producto-plataformas .pp-item {
		flex-basis: 100%;
		gap: 12px;
	}
}

/*-------------------------------------------------------------
# Producto · "¿Por qué usas EcommFinder?": espaciado de Figma en las dos listas e iconos de "Con EcommFinder"
# Figma: 10640:710 (iconos 10640:715, 848, 856, 850, 854) · antes, compare-ok.svg en los 5
--------------------------------------------------------------*/
#porque-ecommfinder .porque-ecommfinder-block .left ul,
#porque-ecommfinder .porque-ecommfinder-block .right ul {
	display: flex;
	flex-direction: column;
	gap: 24px;
	border-radius: 20px;
}

#porque-ecommfinder .porque-ecommfinder-block .left li,
#porque-ecommfinder .porque-ecommfinder-block .right li {
	align-items: center;
	gap: 13px;
	margin-left: 0;
	font-size: 18px;
	line-height: 22px;
	font-weight: 300;
	color: #222222;
}

/* "Sin EcommFinder" mantiene su X (compare-x.svg), centrada en una caja de 32px como en Figma */
#porque-ecommfinder .porque-ecommfinder-block .left li:before {
	position: static;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	min-width: 32px;
	margin: 0;
	background: url(../img/product/compare-x.svg) center / 14px no-repeat;
}

#porque-ecommfinder .porque-ecommfinder-block .right li:before {
	position: static;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	min-width: 32px;
	margin: 0;
	background: url(../img/product/con-analitica.svg) center / contain no-repeat;
}

#porque-ecommfinder .porque-ecommfinder-block .right li:nth-child(2):before { background-image: url(../img/product/con-usuario.svg); }
#porque-ecommfinder .porque-ecommfinder-block .right li:nth-child(3):before { background-image: url(../img/product/con-velocidad.svg); }
#porque-ecommfinder .porque-ecommfinder-block .right li:nth-child(4):before { background-image: url(../img/product/con-lenguaje.svg); }
#porque-ecommfinder .porque-ecommfinder-block .right li:nth-child(5):before { background-image: url(../img/product/con-filtros.svg); }

@media (max-width: 575px) {
	#porque-ecommfinder .porque-ecommfinder-block .left ul,
	#porque-ecommfinder .porque-ecommfinder-block .right ul {
		gap: 16px;
	}
	#porque-ecommfinder .porque-ecommfinder-block .left li,
	#porque-ecommfinder .porque-ecommfinder-block .right li {
		font-size: 16px;
	}
	#porque-ecommfinder .porque-ecommfinder-block .left li:before,
	#porque-ecommfinder .porque-ecommfinder-block .right li:before {
		width: 26px;
		height: 26px;
		min-width: 26px;
	}
}

/*-------------------------------------------------------------
# Páginas de funcionalidades (.fn-*) · primera: "Búsqueda inteligente"
# Figma: escritorio 10552:6198 · móvil 10607:540
# Bloques: template-parts/fn-seccion.php, fn-consejo.php · SemiBold de Figma = 500
--------------------------------------------------------------*/
.fn-pagina {
	background-color: #F8F6F4;
}

.fn-pagina strong {
	font-size: inherit;
	line-height: inherit;
	font-weight: 700;
	color: inherit;
}

/* Cabecera azul */
.fn-cabecera-pagina {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 21px;
	padding: 40px 20px;
	background-color: #29394E;
	text-align: center;
}

.fn-cabecera-pagina .fn-cabecera-titulo {
	max-width: 961px;
	margin: 0;
	font-size: 72px;
	line-height: 70px;
	font-weight: 500;
	color: #FFFFFF;
}

.fn-cabecera-pagina .fn-cabecera-texto {
	max-width: 863px;
	margin: 0;
	font-size: 24px;
	line-height: 30px;
	font-weight: 500;
	color: #FFFFFF;
}

.fn-cabecera-pagina .btn-section {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 0;
}

/* Piezas de texto comunes */
.fn-pagina .fn-etiqueta {
	display: inline-block;
	align-self: flex-start;
	padding: 8px;
	border-radius: 8px;
	background-color: #F2E8D8;
	font-size: 14px;
	line-height: 18px;
	font-weight: 500;
	color: #29394E;
}

.fn-pagina .fn-titulo {
	margin: 0;
	font-size: 40px;
	line-height: 46px;
	font-weight: 500;
	color: #111111;
}

.fn-pagina .fn-subtitulo {
	margin: 0;
	font-size: 24px;
	line-height: 30px;
	font-weight: 500;
	color: #111111;
}

.fn-pagina .fn-parrafo,
.fn-pagina .fn-puntos p {
	margin: 0;
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	color: #111111;
}

/* Bloque texto + esquema */
.fn-seccion-inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 133px;
	max-width: 1540px;
	margin: 0 auto;
	padding: 40px 20px;
}

.fn-seccion.fn-imagen-izq .fn-seccion-inner {
	flex-direction: row-reverse;
}

.fn-seccion.fn-fondo-azul {
	background-color: #29394E;
}

.fn-seccion.fn-fondo-azul .fn-titulo,
.fn-seccion.fn-fondo-azul .fn-subtitulo,
.fn-seccion.fn-fondo-azul .fn-parrafo,
.fn-seccion.fn-fondo-azul .fn-puntos p,
.fn-seccion.fn-fondo-azul .fn-punto-titulo {
	color: #FFFFFF;
}

.fn-texto {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.fn-cabecera,
.fn-grupo {
	display: flex;
	flex-direction: column;
}

.fn-cabecera {
	gap: 8px;
}

.fn-grupo {
	gap: 12px;
}

.fn-puntos {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fn-punto {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.fn-punto-icono {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

/* Flechas de boosting: cuadrado lima con la flecha (abajo = girada) */
span.fn-punto-icono {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	background-color: #CDF11C;
}

.fn-punto-abajo span.fn-punto-icono {
	transform: scaleY(-1);
}

.fn-pagina .fn-punto-titulo {
	display: block;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: #111111;
}

.fn-media {
	display: flex;
	flex: 0 1 683px;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.fn-esquema,
.fn-esquema img,
.fn-tarjeta-esquema,
.fn-tarjeta-esquema img {
	display: block;
	width: 100%;
	height: auto;
}

.fn-esquema img {
	border-radius: 20px;
}

.fn-aviso {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
	border-radius: 20px;
	background-color: #29394E;
}

.fn-pagina .fn-aviso .fn-subtitulo,
.fn-pagina .fn-aviso .fn-parrafo {
	color: #FFFFFF;
}

/* Desplegables (Consejo de uso / ¿Cómo se configuran?) */
.fn-pagina details > summary {
	list-style: none;
	cursor: pointer;
}

.fn-pagina details > summary::-webkit-details-marker {
	display: none;
}

.fn-consejo summary {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.fn-consejo summary span {
	font-size: 16px;
	line-height: 22px;
	font-weight: 700;
	color: #000000;
}

.fn-consejo.fn-consejo-claro summary span {
	color: #FFFFFF;
}

.fn-consejo-texto {
	margin-top: 10px;
	padding: 10px;
	border-radius: 10px;
	background-color: #F2E8D8;
}

.fn-consejo-blanco .fn-consejo-texto {
	background-color: #FFFFFF;
}

.fn-pagina .fn-consejo-texto p {
	margin: 0;
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	color: #222222;
}

/* Sinónimos y alias */
.fn-sinonimos {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 1030px;
	margin: 0 auto;
	padding: 40px 20px;
}

.fn-sinonimos-cabecera {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	max-width: 730px;
	margin: 0 auto;
	text-align: center;
}

.fn-sinonimos-cabecera .fn-etiqueta {
	align-self: center;
}

.fn-sinonimos-cabecera .fn-parrafo {
	margin-top: 16px;
}

.fn-sinonimos-tarjetas {
	display: flex;
	gap: 32px;
}

.fn-tarjeta,
.fn-configuracion {
	border-radius: 24px;
	background-color: #29394E;
}

.fn-tarjeta {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
	padding: 24px;
}

.fn-tarjeta-texto {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fn-tarjeta-texto .fn-parrafo {
	margin-top: 12px;
}

.fn-pagina .fn-tarjeta-etiqueta {
	font-size: 18px;
	line-height: 22px;
	font-weight: 700;
	color: #CDF11C;
}

.fn-pagina .fn-tarjeta .fn-subtitulo,
.fn-pagina .fn-tarjeta .fn-parrafo,
.fn-pagina .fn-configuracion .fn-subtitulo,
.fn-pagina .fn-chinchetas p {
	color: #FFFFFF;
}

.fn-configuracion {
	padding: 24px;
}

.fn-configuracion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.fn-chinchetas {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.fn-chinchetas li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.fn-chinchetas img {
	flex-shrink: 0;
	margin-top: 1px;
}

.fn-pagina .fn-chinchetas p {
	margin: 0;
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
}

/* Desdoblamiento: caja lima */
.fn-desdoblamiento {
	box-sizing: border-box;
	max-width: 1288px;
	margin: 0 auto;
	padding: 40px 20px;
}

.fn-desdoblamiento-caja {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 30px;
	border-radius: 20px;
	background-color: #CDF11C;
}

.fn-pagina .fn-desdoblamiento .fn-subtitulo,
.fn-pagina .fn-desdoblamiento .fn-parrafo {
	color: #222222;
}

/* Tablet: se apila (texto arriba, esquema debajo) */
@media (max-width: 991px) {
	.fn-seccion-inner,
	.fn-seccion.fn-imagen-izq .fn-seccion-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 30px;
	}
	.fn-media {
		flex-basis: auto;
		width: 100%;
		max-width: 683px;
		margin: 0 auto;
	}
	.fn-cabecera-pagina .fn-cabecera-titulo {
		font-size: 52px;
		line-height: 56px;
	}
}

/* Móvil: tamaños de Figma móvil */
@media (max-width: 767px) {
	.fn-cabecera-pagina {
		gap: 18px;
		padding: 40px 16px;
	}
	.fn-cabecera-pagina .fn-cabecera-titulo {
		font-size: 36px;
		line-height: 42px;
	}
	.fn-cabecera-pagina .fn-cabecera-texto {
		font-size: 20px;
		line-height: 26px;
	}
	.fn-cabecera-pagina .btn-section {
		flex-direction: column;
		width: 100%;
	}
	.fn-cabecera-pagina .btn-section .btn {
		width: 100%;
		text-align: center;
	}
	.fn-seccion-inner,
	.fn-seccion.fn-imagen-izq .fn-seccion-inner {
		gap: 15px;
		padding: 40px 15px;
	}
	.fn-texto {
		gap: 15px;
	}
	.fn-pagina .fn-titulo {
		font-size: 32px;
		line-height: 38px;
	}
	.fn-pagina .fn-subtitulo {
		font-size: 22px;
		line-height: 28px;
	}
	.fn-pagina .fn-parrafo,
	.fn-pagina .fn-puntos p,
	.fn-pagina .fn-punto-titulo,
	.fn-pagina .fn-consejo-texto p,
	.fn-pagina .fn-chinchetas p {
		font-size: 14px;
		line-height: 20px;
	}
	.fn-puntos {
		gap: 22px;
	}
	.fn-media {
		gap: 15px;
	}
	.fn-consejo summary {
		display: flex;
		justify-content: space-between;
	}
	.fn-consejo summary span {
		font-size: 14px;
		line-height: 20px;
	}
	.fn-sinonimos {
		gap: 15px;
		padding: 20px 15px;
	}
	.fn-sinonimos-cabecera {
		text-align: left;
		align-items: flex-start;
	}
	.fn-sinonimos-cabecera .fn-etiqueta {
		align-self: flex-start;
	}
	.fn-sinonimos-tarjetas {
		flex-direction: column;
		gap: 15px;
	}
	.fn-tarjeta,
	.fn-configuracion {
		border-radius: 14px;
	}
	.fn-pagina .fn-tarjeta-etiqueta {
		font-size: 16px;
	}
	.fn-desdoblamiento {
		padding: 40px 15px;
	}
	.fn-desdoblamiento-caja {
		padding: 15px;
	}
}

/*-------------------------------------------------------------
# Páginas de funcionalidades · piezas añadidas con "Vende y comunica"
# Figma: escritorio 10552:7004 · móvil 10608:6000
# Tarjetas con icono (template-parts/fn-tarjetas.php), bloques de fondo y desplegables con lista
--------------------------------------------------------------*/
.fn-bloque {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 1540px;
	margin: 0 auto;
	padding: 15px 20px 40px;
}

.fn-bloque.fn-fondo-lima {
	max-width: none;
	padding: 40px max(20px, calc((100% - 1500px) / 2));
	background-color: #CDF11C;
}

.fn-bloque-cabecera {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	max-width: 738px;
	margin: 0 auto;
	text-align: center;
}

.fn-bloque-cabecera .fn-etiqueta {
	align-self: center;
}

.fn-bloque-cabecera .fn-parrafo {
	margin-top: 16px;
}

.fn-pagina .fn-etiqueta.fn-etiqueta-azul {
	background-color: #29394E;
	color: #FFFFFF;
}

/* Rejilla de tarjetas */
.fn-tarjetas {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.fn-tarjetas-fila {
	display: flex;
	gap: 32px;
}

.fn-tarjeta-icono {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
	padding: 24px;
	border-radius: 24px;
	background-color: #FFFFFF;
}

.fn-tarjeta-icono > summary {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	cursor: default;
	pointer-events: none;
}

.fn-tarjeta-icono-img {
	width: 80px;
	height: 80px;
}

.fn-tarjeta-icono-flecha {
	display: none;
}

.fn-pagina .fn-tarjeta-icono .fn-subtitulo,
.fn-pagina .fn-tarjeta-icono .fn-parrafo {
	color: #222222;
}

.fn-tarjeta-icono .fn-parrafo {
	margin-top: 12px;
}

/* Desplegable con lista (ficha del banner, configuración avanzada) */
.fn-bloque > .fn-consejo {
	padding-top: 5px;
}

.fn-consejo-ninguno .fn-consejo-texto {
	padding: 0;
	background: none;
}

.fn-consejo-lista {
	margin: 0;
	padding-left: 24px;
	list-style: disc;
}

.fn-consejo-texto p + .fn-consejo-lista {
	margin-top: 0;
}

.fn-pagina .fn-consejo-lista li {
	display: list-item;
	list-style: disc outside;
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	color: #222222;
}

@media (max-width: 1199px) {
	.fn-tarjetas-fila {
		flex-wrap: wrap;
		gap: 16px;
	}
	.fn-tarjeta-icono {
		flex: 1 1 calc(50% - 8px);
	}
}

/* Móvil: las tarjetas son desplegables (icono pequeño + título + flecha) */
@media (max-width: 767px) {
	.fn-bloque,
	.fn-bloque.fn-fondo-lima {
		gap: 15px;
		padding: 20px 15px 40px;
	}
	.fn-bloque-cabecera {
		align-items: flex-start;
		text-align: left;
	}
	.fn-bloque-cabecera .fn-etiqueta {
		align-self: flex-start;
	}
	.fn-tarjetas,
	.fn-tarjetas-fila {
		gap: 15px;
	}
	.fn-tarjetas-fila {
		flex-direction: column;
	}
	.fn-tarjeta-icono {
		flex-basis: auto;
		padding: 20px 12px;
		border-radius: 14px;
	}
	.fn-tarjeta-icono > summary {
		flex-direction: row;
		align-items: center;
		gap: 8px;
		cursor: pointer;
		pointer-events: auto;
	}
	.fn-tarjeta-icono-img {
		width: 34px;
		height: 34px;
	}
	.fn-tarjeta-icono .fn-subtitulo {
		flex: 1;
	}
	.fn-tarjeta-icono-flecha {
		display: block;
		flex-shrink: 0;
	}
	.fn-tarjeta-icono .fn-parrafo {
		margin-top: 20px;
	}
	.fn-pagina .fn-consejo-lista li {
		font-size: 14px;
		line-height: 20px;
	}
}

/*-------------------------------------------------------------
# Páginas de funcionalidades · piezas añadidas con "Gestiona"
# Figma: escritorio 10553:8098 · móvil 10608:6619
--------------------------------------------------------------*/
.fn-pagina .fn-titulo.fn-titulo-mediano {
	font-size: 30px;
	line-height: 38px;
}

/* Nota azul centrada bajo la cabecera de un bloque */
.fn-pagina .fn-nota {
	margin: 16px 0 0;
	padding: 10px;
	border-radius: 10px;
	background-color: #29394E;
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	color: #FFFFFF;
	text-align: center;
}

/* Bloque sobre fondo azul (estadísticas) */
.fn-bloque.fn-fondo-azul {
	max-width: none;
	padding: 40px max(20px, calc((100% - 1500px) / 2));
	background-color: #29394E;
}

.fn-pagina .fn-fondo-azul .fn-bloque-cabecera .fn-titulo,
.fn-pagina .fn-fondo-azul .fn-bloque-cabecera .fn-parrafo,
.fn-pagina .fn-fondo-azul .fn-bloque-subtitulo {
	color: #FFFFFF;
}

.fn-bloque.fn-fondo-azul .fn-bloque-cabecera {
	margin-bottom: 20px;
}

.fn-pagina .fn-bloque-subtitulo {
	margin: 0;
	text-align: center;
}

/* Tarjetas lima e icono de 40px */
.fn-tarjetas-lima .fn-tarjeta-icono {
	background-color: #CDF11C;
}

.fn-tarjetas-icono-40 .fn-tarjeta-icono-img {
	width: 40px;
	height: 40px;
}

/* Botón dentro del texto */
.fn-texto .fn-boton {
	align-self: flex-start;
}

/* Texto con varios bloques (calidad de las búsquedas) */
.fn-texto.fn-texto-bloques {
	gap: 40px;
}

.fn-texto-bloque {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.fn-leyenda {
	gap: 16px;
}

.fn-leyenda-color {
	box-sizing: border-box;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border: 2px solid #222222;
	border-radius: 5px;
}

.fn-leyenda-verde { background-color: #3A9163; }
.fn-leyenda-lima { background-color: #CDF11C; }
.fn-leyenda-rojo { background-color: #CC484A; }

.fn-texto .fn-lista {
	margin: 0;
}

/* Acordeón (planes y facturación) */
.fn-acordeon-item {
	border-bottom: 1px solid #222222;
	opacity: 0.5;
	transition: opacity 0.2s;
}

.fn-acordeon-item:hover {
	opacity: 0.8;
}

.fn-acordeon-item[open] {
	border-bottom: 2px solid #29394E;
	opacity: 1;
}

.fn-pagina .fn-acordeon-item > summary {
	display: block;
	padding: 18px 0;
	font-size: 18px;
	line-height: 24px;
	font-weight: 500;
	color: #222222;
}

.fn-acordeon-item[open] > summary {
	padding-bottom: 10px;
}

.fn-acordeon-item .fn-parrafo {
	padding-bottom: 18px;
}

.fn-acordeon-item:first-child[open] > summary {
	padding-top: 0;
}

@media (max-width: 767px) {
	.fn-pagina .fn-titulo.fn-titulo-mediano {
		font-size: 28px;
		line-height: 34px;
	}
	.fn-pagina .fn-nota {
		font-size: 14px;
		line-height: 20px;
	}
	.fn-bloque.fn-fondo-azul {
		padding: 20px 15px 40px;
	}
	.fn-bloque.fn-fondo-azul .fn-bloque-cabecera {
		margin-bottom: 0;
	}
	.fn-pagina .fn-bloque-subtitulo {
		text-align: left;
	}
	.fn-texto.fn-texto-bloques {
		gap: 30px;
	}
	.fn-pagina .fn-acordeon-item > summary {
		font-size: 16px;
		line-height: 22px;
	}
	.fn-texto .fn-boton {
		width: auto;
		padding-left: 28px;
		padding-right: 28px;
	}
	/* Calidad: en Figma móvil el gráfico va entre los dos bloques de texto */
	.fn-texto.fn-texto-bloques {
		display: contents;
	}
	#calidad .fn-texto-bloque:first-child { order: 1; }
	#calidad .fn-media { order: 2; }
	#calidad .fn-texto-bloque:last-child { order: 3; margin-top: 15px; }
}

/*--------------------------------------------------------------
# Página "Tu buscador con IA integrada" (ia_integrada.php)
# Figma: escritorio 10565:204 · móvil 10610:7256
# Demo con vídeo, puntos con icono de pregunta y nube de funcionalidades del Manager
--------------------------------------------------------------*/
.fn-demo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: 40px 20px 60px;
	background-color: #29394E;
	text-align: center;
}

.fn-pagina .fn-demo .fn-titulo,
.fn-pagina .fn-demo .fn-subtitulo {
	color: #FFFFFF;
}

/* Caja del vídeo, como en la home: imagen fija hasta que se suba assets/videos/buscador-ia.mp4 */
.fn-video {
	width: 100%;
	max-width: 882px;
	aspect-ratio: 16 / 9;
	background-color: #FFFFFF;
	border-radius: 20px;
	overflow: hidden;
}

.fn-video picture,
.fn-video img,
.fn-video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fn-integraciones {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.fn-integraciones img {
	display: block;
	width: 484px;
	max-width: 100%;
	height: auto;
}

/* Puntos que en Figma solo salen en móvil */
.fn-punto.fn-solo-movil {
	display: none;
}

.fn-punto-icono.fn-punto-icono-pregunta {
	width: 26px;
	height: 26px;
}

/* Funcionalidades del Manager */
.fn-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	max-width: 1500px;
	margin: 20px auto 0;
	padding: 0;
	list-style: none;
}

.fn-pagina .fn-chips li {
	padding: 6px 13px;
	border-radius: 5px;
	background-color: #29394E;
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	color: #FFFFFF;
	list-style: none;
}

.fn-chips-ver {
	display: none;
}

@media (max-width: 767px) {
	.fn-demo {
		gap: 30px;
		padding: 20px 15px 40px;
	}
	.fn-pagina .fn-demo .fn-titulo {
		font-size: 28px;
		line-height: 34px;
	}
	.fn-video {
		border-radius: 5px;
	}
	.fn-punto.fn-solo-movil {
		display: flex;
	}
	.fn-chips {
		justify-content: flex-start;
		gap: 8px;
		margin-top: 10px;
	}
	.fn-pagina .fn-chips li {
		padding: 8px;
	}
	.fn-chips .fn-chip-extra {
		display: none;
	}
	.fn-chips-abierto .fn-chips .fn-chip-extra {
		display: block;
	}
	.fn-chips-ver {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}
	.fn-pagina .fn-chips-ver span {
		font-size: 16px;
		line-height: 22px;
		font-weight: 500;
		color: #111111;
	}
	.fn-chips-ver img {
		transition: transform .2s;
	}
	.fn-chips-abierto .fn-chips-ver img {
		transform: rotate(180deg);
	}
}

/*--------------------------------------------------------------
# Menú principal · submenús (shortcode_primary_menu en functions.php)
# Los elementos con hijos en el menú de WordPress se pintan como desplegable.
# Figma no tiene diseño de submenú: panel blanco en escritorio y lista sangrada en móvil.
--------------------------------------------------------------*/
#header .header-content #menu .menu-item-con-hijos .submenu-flecha {
	margin-left: 2px;
	font-size: 11px;
	color: inherit;
	vertical-align: 1px;
}

#header .header-content #menu .submenu-toggle {
	display: none;
}

#header .header-content #menu .submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: -16px;
	z-index: 10;
	min-width: 240px;
	padding: 8px 0;
	border-radius: 10px;
	background-color: #FFFFFF;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

#header .header-content #menu .menu-item-con-hijos:hover .submenu,
#header .header-content #menu .menu-item-con-hijos:focus-within .submenu {
	display: block;
}

#header .header-content #menu .menu-item-con-hijos .submenu a {
	display: block;
	padding: 10px 16px;
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
	color: #29394E;
	white-space: nowrap;
}

#header .header-content #menu .menu-item-con-hijos .submenu a:hover,
#header .header-content #menu .menu-item-con-hijos .submenu a:focus {
	background-color: #F2E8D8;
}

@media (max-width: 991px) {
	#header .header-content #menu .menu-item-con-hijos {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	#header .header-content #menu .menu-item-con-hijos > a {
		flex: 1 1 0;
	}
	#header .header-content #menu .menu-item-con-hijos .submenu-flecha {
		display: none;
	}
	#header .header-content #menu .submenu-toggle {
		display: block;
		padding: 5px 0 5px 10px;
		border: 0;
		background: none;
		cursor: pointer;
	}
	#header .header-content #menu .submenu-toggle i {
		display: block;
		font-size: 14px;
		color: #FFFFFF;
		transition: transform .2s;
	}
	#header .header-content #menu .submenu-abierto .submenu-toggle i {
		transform: rotate(180deg);
	}
	#header .header-content #menu .menu-item-con-hijos .submenu,
	#header .header-content #menu .menu-item-con-hijos:hover .submenu,
	#header .header-content #menu .menu-item-con-hijos:focus-within .submenu {
		display: none;
		position: static;
		flex-basis: 100%;
		min-width: 0;
		padding: 0 0 0 15px;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}
	#header .header-content #menu .menu-item-con-hijos.submenu-abierto .submenu {
		display: block;
	}
	#header .header-content #menu .menu-item-con-hijos .submenu a {
		padding: 5px 0;
		color: #FFFFFF;
		white-space: normal;
	}
	#header .header-content #menu .menu-item-con-hijos .submenu a:hover,
	#header .header-content #menu .menu-item-con-hijos .submenu a:focus {
		background: none;
	}
}

/*-------------------------------------------------------------
# Buscador PrestaShop · "Conéctalo en 3 pasos"
# Mismo diseño que el de Producto (#producto-que-es .pq-pasos)
--------------------------------------------------------------*/
.ps-pasos {
	display: flex;
	flex-direction: column;
	gap: 24px;
	box-sizing: border-box;
	max-width: 1540px;
	margin: 0 auto;
	padding: 60px 20px;
	text-align: left;
}

.ps-pasos .ps-pasos-titulo {
	margin: 0;
	padding: 0;
	font-size: 56px;
	line-height: 60px;
	font-weight: 500;
	color: #222222;
}

.ps-pasos-lista {
	display: flex;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ps-paso {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
	padding: 36px;
	border-radius: 24px;
	background-color: #FFFFFF;
}

.ps-paso-numero {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 7.33px;
	background-color: #CDF11C;
	font-size: 40px;
	line-height: 1;
	font-weight: 500;
	color: #323232;
}

.ps-pasos .ps-paso-titulo {
	margin: 0;
	padding: 0;
	font-size: 24px;
	line-height: 30px;
	font-weight: 500;
	color: #323232;
}

.ps-paso-texto {
	margin: 0;
	font-size: 18px;
	line-height: 24px;
	font-weight: 300;
	color: #222222;
}

@media (max-width: 991px) {
	.ps-pasos {
		padding: 30px 15px 50px;
	}
	.ps-pasos .ps-pasos-titulo {
		font-size: 40px;
		line-height: 46px;
	}
	.ps-pasos-lista {
		flex-direction: column;
		gap: 16px;
	}
	.ps-paso {
		padding: 24px;
	}
}

@media (max-width: 575px) {
	.ps-pasos .ps-pasos-titulo {
		font-size: 34px;
		line-height: 40px;
	}
	.ps-paso-texto {
		font-size: 16px;
		line-height: 22px;
	}
}

/* Buscador PrestaShop · puntos con check bajo "Mejora tus resultados de búsqueda gracias a la IA" */
.ps-checks {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.ps-checks li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

/* Más específico que ".text-image-block-left-right .left img/p" de theme-default.css
   (width: 80%; margin: 0 auto / margin-top: 15px) */
.text-image-block-left-right .left .ps-checks {
	align-self: stretch;
}

.text-image-block-left-right .left .ps-checks img {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	max-width: none;
	margin: 0;
}

.text-image-block-left-right .left .ps-checks div {
	flex: 1 1 auto;
	min-width: 0;
}

.ps-checks strong {
	display: block;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: #222222;
}

.text-image-block-left-right .left .ps-checks p {
	margin: 0;
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	color: #222222;
}

.ps-checks p strong {
	display: inline;
	line-height: inherit;
}

/* Buscador PrestaShop · imagen de "Búsqueda rápida y precisa", en tarjeta blanca redondeada */
.text-image-block-left-right .right .ps-imagen-busqueda {
	display: block;
	width: 80%;
	max-width: 514px;
	margin: 0 auto;
}

.text-image-block-left-right .right .ps-imagen-busqueda img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	border-radius: 20px;
	background-color: #FFFFFF;
}