/* Sincronía 2026 — estilos de marca */

:root {
	--sincro-auctoritas: #0F2537;
	--sincro-gold: #D4AF37;
	--sincro-salud: #E8F3EE;
	--sincro-calma: #F4F6F8;
	--sincro-texto: #2C3E50;
	--sincro-blanco: #FFFFFF;
	--sincro-radius: 12px;
	--sincro-shadow: 0 8px 28px rgba(15, 37, 55, 0.08);
}

/**
 * Sin esto, un campo con ancho 100% suma además su relleno y su borde, y se
 * desborda de la tarjeta que lo contiene. Se vio en el formulario de contacto.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	background: var(--sincro-calma);
	color: var(--sincro-texto);
	font-family: Inter, system-ui, sans-serif;
}

/* Header */
.sincro-header {
	background: var(--sincro-blanco);
	border-bottom: 1px solid rgba(15, 37, 55, 0.06);
	padding: 0.75rem 1.25rem;
	position: sticky;
	top: 0;
	z-index: 100;
}

.sincro-header__inner {
	max-width: 1120px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

/*
 * 46 px en escritorio y 40 en celular. A 40 el logo quedaba chico frente a los
 * 680 px que ocupa el menú y la marca perdía peso justo en el único lugar de la
 * página donde aparece siempre. En el teléfono se mantiene chico porque el
 * encabezado es pegajoso y cada píxel se lo saca al contenido.
 */
.sincro-header__logo img {
	height: 46px;
	width: auto;
	display: block;
}

@media (max-width: 1000px) {
	.sincro-header__logo img {
		height: 40px;
	}
}

/*
 * El menú no envuelve a una segunda fila. Con flex-wrap, al achicarse la
 * ventana el header pasaba de 64 a 130 px de alto y, al ser sticky, se comía
 * un cuarto de la pantalla del celular.
 *
 * El corte va en 1000 px y no en 900: a 901 px el menú entraba, pero con 56 px
 * de aire. Con ese margen, la primera palabra que se agregue a cualquier enlace
 * lo rompe. A 1024 px sobran 179 px, que es un colchón real.
 */
.sincro-header__nav {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
}

.sincro-header__nav a {
	text-decoration: none;
	color: var(--sincro-auctoritas);
}

.sincro-header__cta {
	background: var(--sincro-auctoritas);
	color: var(--sincro-blanco) !important;
	padding: 0.55rem 1rem;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
}

/* El botón de menú solo existe en celular; en escritorio el nav está siempre. */
.sincro-header__toggle {
	display: none;
}

@media (max-width: 1000px) {
	.sincro-header__toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		min-height: 44px;
		padding: 0.5rem 0.9rem;
		background: none;
		border: 1px solid rgba(15, 37, 55, 0.18);
		border-radius: 8px;
		font-family: "Plus Jakarta Sans", system-ui, sans-serif;
		font-weight: 600;
		font-size: 0.9rem;
		color: var(--sincro-auctoritas);
		cursor: pointer;
	}

	/* Tres trazos, no un icono tipográfico: escala sin depender de la fuente. */
	.sincro-header__barras {
		display: block;
		position: relative;
		width: 18px;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
	}

	.sincro-header__barras::before,
	.sincro-header__barras::after {
		content: "";
		position: absolute;
		left: 0;
		width: 18px;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
	}

	.sincro-header__barras::before {
		top: -6px;
	}

	.sincro-header__barras::after {
		top: 6px;
	}

	.sincro-header__nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.25rem 1.25rem 1rem;
		background: var(--sincro-blanco);
		border-bottom: 1px solid rgba(15, 37, 55, 0.08);
		box-shadow: 0 14px 28px rgba(15, 37, 55, 0.12);
	}

	.sincro-header[data-abierto="true"] .sincro-header__nav {
		display: flex;
	}

	/* 44 px de alto mínimo: es el objetivo táctil que no falla al primer toque. */
	.sincro-header__nav a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0.35rem 0;
		border-bottom: 1px solid rgba(15, 37, 55, 0.07);
	}

	.sincro-header__nav .sincro-header__cta {
		justify-content: center;
		margin-top: 0.9rem;
		border-bottom: 0;
	}
}

/* Sections */
.sincro-section {
	padding: 4.5rem 1.25rem;
}

/*
 * WordPress separa los bloques con un margen superior propio. En las páginas
 * que abren con una sección de color, ese margen dejaba una franja gris del
 * fondo entre el encabezado y la sección, como si la página no cargara bien.
 */
main > .wp-block-post-content,
main > .wp-block-post-content > *:first-child {
	margin-block-start: 0;
}

/* La sección que abre una página va más apretada arriba: ya la anuncia el encabezado. */
.sincro-portada-pagina {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.sincro-section--salud {
	background: var(--sincro-salud);
}

.sincro-section--navy {
	background: var(--sincro-auctoritas);
	color: var(--sincro-blanco);
}

/*
 * El h1 faltaba y el título de /empresas/ salía azul sobre azul: invisible.
 * Se listan todos los niveles para que no vuelva a depender de qué encabezado
 * use cada sección.
 */
.sincro-section--navy h1,
.sincro-section--navy h2,
.sincro-section--navy h3,
.sincro-section--navy h4 {
	color: var(--sincro-blanco);
}

.sincro-wrap {
	max-width: 1120px;
	margin: 0 auto;
}

/*
 * Páginas de puro texto (Empresas, Evidencia). El contenedor de 1120 px está
 * pensado para secciones con figura al costado; cuando dentro solo hay párrafos
 * limitados a su medida de lectura, el bloque queda pegado a la izquierda y
 * sobra media pantalla vacía a la derecha. Acá el contenedor mismo es la
 * medida, así que todo —títulos, barras, tarjetas— se alinea y queda centrado.
 */
/*
 * Se estrecha de 54 a 48 rem y a la vez se sube el cuerpo de 1,02 a 1,12 rem.
 * Las dos cosas juntas y no una sola: estrechar solamente habría devuelto la
 * sensación de página «acotada en los costados» que ya hubo que corregir una
 * vez. Subiendo el cuerpo, el bloque ocupa menos ancho pero pesa más, la línea
 * baja de 102 a unos 82 caracteres y el texto se lee más grande que antes.
 */
.sincro-wrap--medida {
	max-width: 48rem;
}

.sincro-wrap--medida p,
.sincro-wrap--medida li {
	font-size: 1.12rem;
	line-height: 1.65;
}

.sincro-grid-2 {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 2.5rem;
	align-items: center;
}

@media (max-width: 768px) {
	.sincro-grid-2 {
		grid-template-columns: 1fr;
	}
}

.sincro-kicker {
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sincro-auctoritas);
	margin-bottom: 0.75rem;
}

.sincro-section--navy .sincro-kicker {
	color: var(--sincro-gold);
}

/*
 * Sin esto los enlaces de texto sobre Azul Auctoritas quedaban con el azul por
 * defecto del navegador: ilegibles. Van en blanco, con el dorado solo como
 * subrayado — la pauta prohíbe el dorado para texto, no como acento.
 * El :not([class]) deja fuera a los botones, que ya traen su propio estilo.
 */
.sincro-section--navy p a:not([class]),
.sincro-section--navy li a:not([class]) {
	color: var(--sincro-blanco);
	text-decoration: underline;
	text-decoration-color: var(--sincro-gold);
	text-underline-offset: 0.2em;
}

/* Cards */
.sincro-card {
	background: var(--sincro-blanco);
	border-radius: var(--sincro-radius);
	box-shadow: var(--sincro-shadow);
	padding: 1.5rem;
}

.sincro-card h3 {
	margin-top: 0;
}

.sincro-card__titulo {
	margin: 0 0 0.5rem;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-weight: 600;
	color: var(--sincro-auctoritas);
}

/* ------------------------------------------------------------------
 * Avatar Sincro
 *
 * Los renders van sin fondo y apoyados directamente sobre el color de
 * la sección. El personaje es el Guía del relato: se lo trata como
 * figura, no como ilustración decorativa dentro de un recuadro.
 * ---------------------------------------------------------------- */
.sincro-avatar {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* Hero */
.sincro-hero {
	padding-bottom: 0;
	overflow: hidden;
}

.sincro-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 2.5rem;
	align-items: end;
}

.sincro-hero__texto {
	padding-bottom: 4.5rem;
}

.sincro-hero__acciones {
	margin-top: 1.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/**
 * El render está cortado a la altura del pecho, así que la base de la imagen es
 * un corte recto. Debe coincidir con el borde inferior de la sección para que
 * Sincro parezca emerger de ella; un solo píxel de separación lo convierte en
 * una foto recortada flotando. De ahí line-height 0 y el flex al final.
 */
.sincro-hero__figura {
	position: relative;
	align-self: end;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	line-height: 0;
}

/**
 * Halo en Verde Salud Mental detrás de Sincro: ancla la figura al color
 * calmante de la paleta sin encerrarla en una caja.
 */
.sincro-hero__figura::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 115%;
	height: 78%;
	background: radial-gradient(ellipse at center, var(--sincro-salud) 0%, rgba(232, 243, 238, 0) 70%);
	z-index: 0;
}

.sincro-hero__figura .sincro-avatar {
	position: relative;
	z-index: 1;
	max-width: 520px;
	margin: 0 auto;
}

/*
 * La tarjeta del Método va bajo los botones, no flotando sobre la figura.
 *
 * Flotaba encima mientras el render tenía una sola mano y dejaba libre medio
 * cuadro. La Pose 1 definitiva son dos manos abiertas y simétricas, que ocupan
 * todo el ancho inferior de la figura: la tarjeta tapaba una de las dos y el
 * gesto de escucha, que es la razón de ser de esa pose, dejaba de leerse.
 * Debajo del llamado a la acción no compite con nada y respeta el orden de
 * lectura: primero la promesa, después el paso a dar, después el método.
 */
.sincro-metodo {
	margin-top: 2rem;
	max-width: 26rem;
	background: var(--sincro-blanco);
	border-radius: var(--sincro-radius);
	box-shadow: var(--sincro-shadow);
	padding: 1.25rem 1.4rem;
}

.sincro-metodo__titulo {
	margin: 0;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-weight: 600;
	color: var(--sincro-auctoritas);
}

.sincro-metodo__pasos {
	margin: 0.75rem 0 0;
	padding-left: 1.2rem;
	color: var(--sincro-texto);
	font-size: 0.95rem;
	line-height: 1.5;
}

.sincro-metodo__pasos li + li {
	margin-top: 0.6rem;
}

.sincro-metodo__pasos strong {
	color: var(--sincro-auctoritas);
}

.sincro-metodo__mas {
	margin: 0.9rem 0 0;
	font-size: 0.95rem;
}

.sincro-metodo__mas a {
	color: var(--sincro-auctoritas);
	font-weight: 600;
	text-underline-offset: 0.2em;
}

@media (max-width: 900px) {
	.sincro-hero__grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.sincro-hero__texto {
		padding-bottom: 0;
	}

	.sincro-hero__figura {
		display: block;
		line-height: 1.6;
	}

	.sincro-metodo {
		max-width: none;
		margin-top: 1.5rem;
	}

	/*
	 * Ya no apoya en el borde de la sección, así que el corte recto necesita
	 * fundido. Empieza al 92 % y no antes: el render termina justo debajo de las
	 * manos abiertas, y un fundido más largo se comía el gesto.
	 */
	.sincro-hero__figura .sincro-avatar {
		display: block;
		max-width: 340px;
		-webkit-mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
	}
}

/* Escudo */
.sincro-escudo {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 2.5rem;
	align-items: center;
}

.sincro-escudo__figura .sincro-avatar {
	max-width: 360px;
	margin: 0 auto;
}

/*
 * Las figuras que quedan a media altura de su sección terminan en un corte
 * recto que se lee como recorte. El degradado las disuelve en el fondo.
 */
.sincro-escudo__figura .sincro-avatar,
.sincro-traductor__figura .sincro-avatar {
	-webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}

@media (max-width: 900px) {
	.sincro-escudo {
		grid-template-columns: 1fr;
	}

	/* El texto primero: la garantía pesa más que el retrato. */
	.sincro-escudo__figura {
		order: 2;
	}

	.sincro-escudo__figura .sincro-avatar {
		max-width: 260px;
	}
}

/* Traductor */
.sincro-traductor {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 2.5rem;
	align-items: center;
}

.sincro-traductor .sincro-card {
	margin-top: 1.75rem;
}

.sincro-card--dato {
	background: var(--sincro-salud, #E8F3EE);
	border: 1px solid rgba(15, 37, 55, 0.08);
}

.sincro-traductor__principio {
	margin: 1.5rem 0 0;
	max-width: 36rem;
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--sincro-navy, #0F2537);
	font-weight: 600;
}

.sincro-traductor__figura .sincro-avatar {
	max-width: 480px;
	margin: 0 auto;
}

@media (max-width: 900px) {
	.sincro-traductor {
		grid-template-columns: 1fr;
	}

	.sincro-traductor__figura .sincro-avatar {
		max-width: 340px;
	}
}

/*
 * Contacto
 *
 * Sincro saluda justo al lado del formulario, que es donde se decide la
 * conversión. Ahí el visitante duda si del otro lado hay una persona o un
 * sistema de cobranza, y un saludo responde eso antes de que lea una línea.
 * Va debajo del texto y no en una tercera columna: el formulario no se comparte
 * el protagonismo con nadie.
 */
.sincro-contacto__figura {
	margin: 2rem 0 0;
	line-height: 0;
}

.sincro-contacto__figura .sincro-avatar {
	max-width: 320px;
	-webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}

@media (max-width: 768px) {
	/* En celular el formulario queda inmediatamente debajo: la figura se achica
	   para no empujarlo fuera de la primera pantalla de la sección. */
	.sincro-contacto__figura {
		margin: 1.5rem auto 0;
		max-width: 220px;
	}

	.sincro-contacto__figura .sincro-avatar {
		max-width: 220px;
	}
}

.sincro-escudo-list {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 0;
	display: grid;
	gap: 1rem;
}

.sincro-escudo-list li {
	background: var(--sincro-blanco);
	border-left: 4px solid var(--sincro-gold);
	padding: 1rem 1.25rem;
	border-radius: 0 10px 10px 0;
	box-shadow: var(--sincro-shadow);
}

/* Diagnóstico */
.sincro-quiz {
	max-width: 640px;
	margin: 0 auto;
}

.sincro-quiz__step {
	display: none;
}

.sincro-quiz__step.is-active {
	display: block;
}

.sincro-quiz__options {
	display: grid;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.sincro-quiz__options button {
	background: var(--sincro-blanco);
	border: 2px solid rgba(15, 37, 55, 0.12);
	border-radius: 10px;
	padding: 1rem;
	text-align: left;
	font: inherit;
	color: var(--sincro-texto);
	cursor: pointer;
}

.sincro-quiz__options button:hover,
.sincro-quiz__options button:focus-visible {
	border-color: var(--sincro-auctoritas);
	outline: none;
}

/*
 * El resultado pasó de una frase suelta a varios párrafos con citas de normas.
 * Centrado a esa longitud se lee mal: los renglones no comparten margen y la
 * vista pierde el punto de retorno. Se centra solo el título y el botón.
 */
.sincro-quiz__result {
	display: none;
	text-align: left;
}

.sincro-quiz__result.is-active {
	display: block;
}

.sincro-quiz__result > p:first-child,
.sincro-quiz__result > p:last-child {
	text-align: center;
}

/* Testimonios */
/*
 * Tres columnas fijas dejaban renglones de unos 30 caracteres, la mitad de lo
 * que se lee cómodo. Con auto-fit la grilla baja sola a dos columnas cuando el
 * ancho no da, y a una en celular.
 */
.sincro-quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.25rem;
}

/* El navegador le da 40px de margen lateral a blockquote: comía 80px de columna. */
.sincro-quote {
	margin: 0;
	background: var(--sincro-blanco);
	border-radius: var(--sincro-radius);
	padding: 1.5rem;
	box-shadow: var(--sincro-shadow);
}

.sincro-quote p {
	margin: 0 0 1rem;
	font-style: italic;
}

/*
 * Las dos primeras tarjetas son hallazgos medidos y llevan su barra sobre una
 * escala de 0 a 100. Cada una es independiente: no son partes de un mismo
 * total y no se apilan, porque sumarlas afirmaría algo que la muestra no dice.
 * La tercera no es una métrica sino una garantía de proceso, y por eso se
 * distingue con el filete dorado en vez de una barra.
 */
.sincro-quote__medida {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
}

.sincro-quote__pista {
	flex: 1;
	height: 0.5rem;
	background: rgba(15, 37, 55, 0.08);
	border-radius: 999px;
	overflow: hidden;
}

.sincro-quote__barra {
	width: var(--valor);
	height: 100%;
	border-radius: 999px;
	background: var(--sincro-gold);
}

.sincro-quote__num {
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--sincro-auctoritas);
}

.sincro-quote--garantia {
	border-left: 4px solid var(--sincro-gold);
}

/*
 * Testimonios sin métrica.
 *
 * Con quince citas, repetir la tarjeta grande de las tres destacadas convertía
 * la sección en un muro de scroll y le sacaba peso justamente a las tres que
 * llevan dato. Estas van más chicas y agrupadas por tema: el volumen se lee de
 * un vistazo, que es lo que hace la prueba social, sin obligar a leerlas todas.
 */
.sincro-testi__lead {
	max-width: 42rem;
}

.sincro-testi__grupo {
	margin: 2.75rem 0 1rem;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--sincro-auctoritas);
}

.sincro-quotes--breve {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
}

.sincro-quote--breve {
	padding: 1.15rem 1.25rem;
	border-left: 3px solid rgba(212, 175, 55, 0.55);
}

.sincro-quote--breve p {
	margin: 0;
	font-size: 0.97rem;
	line-height: 1.55;
}

/*
 * El bloque del maltrato previo va sobre Verde Salud Mental y no sobre blanco:
 * el color de la sección avisa que se cambió de registro antes de que se lea la
 * primera palabra, y evita que las citas duras se confundan con las nuestras.
 */
.sincro-testi__antes {
	margin-top: 3rem;
	padding: 1.75rem;
	background: var(--sincro-salud);
	border-radius: var(--sincro-radius);
}

.sincro-testi__antes .sincro-testi__grupo {
	margin-top: 0;
}

.sincro-testi__aviso,
.sincro-testi__pie {
	max-width: 40rem;
	font-size: 0.95rem;
	line-height: 1.6;
}

.sincro-testi__pie {
	margin-bottom: 0;
}

.sincro-quote--antes {
	border-left-color: rgba(15, 37, 55, 0.25);
}

.sincro-quote--antes p {
	color: rgba(44, 62, 80, 0.9);
}

.sincro-quote cite {
	font-style: normal;
	font-weight: 600;
	color: var(--sincro-auctoritas);
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: 0.9rem;
}

/* Contenido solo para lectores de pantalla: equivalente textual de un gráfico. */
.sincro-visualmente-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * Comparativa B2B.
 *
 * Dos tarjetas del mismo tamaño para 78 % y 2,5 % anulaban la diferencia: el
 * ojo lee dos bloques iguales antes de leer los números. Con barras a escala
 * real la magnitud se procesa antes que el texto, que es donde está el
 * argumento. La escala corre de 0 a 100 y no se recorta.
 */
.sincro-barras {
	margin: 2.25rem 0 0;
}

.sincro-barras__fila + .sincro-barras__fila {
	margin-top: 1.75rem;
}

.sincro-barras__eti {
	margin: 0 0 0.6rem;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.85);
}

.sincro-barras__pista {
	position: relative;
	display: flex;
	align-items: center;
	height: 3.25rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
}

.sincro-barras__barra {
	width: var(--valor);
	height: 100%;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.18);
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.sincro-barras__barra--alta {
	background: linear-gradient(90deg, rgba(212, 175, 55, 0.55), var(--sincro-gold));
}

.sincro-barras__valor {
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: 1.6rem;
	font-weight: 700;
	padding: 0 1rem;
	color: var(--sincro-auctoritas);
}

/* En la barra corta el número no entra adentro: se apoya al lado. */
.sincro-barras__valor--fuera {
	color: var(--sincro-blanco);
}

.sincro-desafio {
	margin-top: 2.5rem;
	padding: 1.75rem 1.5rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(212, 175, 55, 0.35);
	border-radius: 12px;
}

.sincro-desafio__titulo {
	margin: 0.35rem 0 0.75rem;
	color: var(--sincro-gold, #D4AF37);
	font-size: 1.35rem;
}

.sincro-desafio__intro {
	margin: 0 0 1.25rem;
}

.sincro-desafio__pasos {
	margin: 0;
	padding: 0 0 0 1.25rem;
	display: grid;
	gap: 0.85rem;
}

.sincro-desafio__pasos li {
	line-height: 1.5;
}

.sincro-desafio__nota {
	margin: 1.25rem 0 0;
	font-size: 0.95rem;
	opacity: 0.92;
}

/* Página institucional /evidencia/ — fuera del recorrido B2C */
.sincro-evidencia {
	max-width: 44rem;
	margin: 0 auto;
}

.sincro-evidencia h2 {
	margin-top: 2.5rem;
}

.sincro-evidencia__aviso {
	background: var(--sincro-salud, #E8F3EE);
	border-left: 4px solid var(--sincro-gold, #D4AF37);
	padding: 1rem 1.25rem;
	border-radius: 0 10px 10px 0;
	margin: 1.5rem 0;
}

.sincro-evidencia__lista {
	display: grid;
	gap: 0.75rem;
	padding-left: 1.25rem;
}

.sincro-evidencia__descarga {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
}

.sincro-asignacion {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(212, 175, 55, 0.3);
}


.sincro-dato-fecha {
	font-size: 0.88rem;
	line-height: 1.55;
	opacity: 0.75;
	margin-top: 0.75rem;
	max-width: 38rem;
}

/* Centro de educación /aprender/ */
.sincro-aprender {
	max-width: 46rem;
	margin: 0 auto;
}

.sincro-aprender__lead {
	font-size: 1.1rem;
}

.sincro-aprender h2 {
	margin-top: 2.75rem;
}

.sincro-mitos {
	display: grid;
	gap: 1rem;
	margin-top: 1.25rem;
}

.sincro-mito {
	background: var(--sincro-blanco, #fff);
	border: 1px solid rgba(15, 37, 55, 0.1);
	border-radius: var(--sincro-radius, 12px);
	padding: 1.25rem 1.4rem;
}

.sincro-mito__etiqueta {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sincro-auctoritas, #0F2537);
}

.sincro-mito h3 {
	margin: 0 0 0.6rem;
	font-size: 1.1rem;
}

.sincro-mito__verdad {
	margin: 0;
}

.sincro-faq {
	display: grid;
	gap: 0.65rem;
	margin-top: 1.25rem;
}

.sincro-faq__item {
	background: var(--sincro-blanco, #fff);
	border: 1px solid rgba(15, 37, 55, 0.1);
	border-radius: var(--sincro-radius, 12px);
	padding: 0.85rem 1.15rem;
}

.sincro-faq__item summary {
	cursor: pointer;
	font-weight: 600;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	color: var(--sincro-auctoritas, #0F2537);
}

.sincro-faq__item[open] summary {
	margin-bottom: 0.65rem;
}

.sincro-herramientas {
	display: grid;
	gap: 0.85rem;
	padding-left: 1.15rem;
	margin-top: 1rem;
}

.sincro-aprender__cierre {
	margin-top: 2.5rem;
	padding: 1.25rem;
	background: var(--sincro-salud, #E8F3EE);
	border-radius: var(--sincro-radius, 12px);
}

/*
 * Recorrido paso a paso (/como-trabajamos/ y /canales/).
 *
 * La numeración es contenido, no decoración: la persona necesita poder decir
 * «estoy en el paso 4». Por eso se dibuja con contadores sobre un <ol> real y
 * no con viñetas de imagen.
 */
.sincro-recorrido {
	counter-reset: sincro-paso;
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 0;
	display: grid;
	gap: 1rem;
}

.sincro-recorrido > li {
	counter-increment: sincro-paso;
	position: relative;
	background: var(--sincro-blanco, #fff);
	border: 1px solid rgba(15, 37, 55, 0.1);
	border-left: 3px solid var(--sincro-gold, #D4AF37);
	border-radius: var(--sincro-radius, 12px);
	padding: 1.15rem 1.35rem 1.15rem 3.6rem;
}

.sincro-recorrido > li::before {
	content: counter(sincro-paso);
	position: absolute;
	left: 1.15rem;
	top: 1.15rem;
	width: 1.85rem;
	height: 1.85rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--sincro-auctoritas, #0F2537);
	color: #fff;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1;
}

.sincro-recorrido h3 {
	margin: 0 0 0.4rem;
	font-size: 1.08rem;
	color: var(--sincro-auctoritas, #0F2537);
}

.sincro-recorrido p {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.6;
}

.sincro-recorrido p + p {
	margin-top: 0.6rem;
}

.sincro-recorrido--simple > li {
	border-left-color: rgba(15, 37, 55, 0.12);
}

/* Canales oficiales */
.sincro-canales {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 0;
	display: grid;
	gap: 0.85rem;
}

.sincro-canales > li {
	background: var(--sincro-blanco, #fff);
	border: 1px solid rgba(15, 37, 55, 0.1);
	border-radius: var(--sincro-radius, 12px);
	padding: 1.1rem 1.35rem;
}

.sincro-canales__eti {
	display: block;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sincro-auctoritas, #0F2537);
	opacity: 0.7;
	margin-bottom: 0.2rem;
}

.sincro-canales > li > strong {
	display: block;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: 1.35rem;
	color: var(--sincro-auctoritas, #0F2537);
}

.sincro-canales__nota {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--sincro-texto, #2C3E50);
}

/*
 * Señales de alarma sobre Azul Auctoritas. Se marcan en dorado y no en rojo:
 * la marca no usa alarma cromática, y el punto es que la persona reconozca el
 * patrón con calma, no que se asuste más de lo que ya está.
 */
.sincro-nunca {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 0;
	display: grid;
	gap: 0.75rem;
}

/* Sin cuerpo propio: hereda el de la columna de medida y así respeta su renglón. */
.sincro-nunca > li {
	position: relative;
	padding: 0.9rem 1.2rem 0.9rem 2.9rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(212, 175, 55, 0.28);
	border-radius: var(--sincro-radius, 12px);
	line-height: 1.6;
}

.sincro-nunca > li::before {
	content: "";
	position: absolute;
	left: 1.15rem;
	top: 1.35rem;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 50%;
	border: 2px solid var(--sincro-gold, #D4AF37);
}

/* Reconocimiento e impacto en portada */
.sincro-reconocimiento,
.sincro-impacto {
	max-width: 44rem;
}

/*
 * Las dos tarjetas de Impacto se leen enfrentadas —lo que medimos contra lo que
 * no hacemos—, así que la comparación vale más que la economía de ancho. Dentro
 * de 44 rem cada columna dejaba renglones de 28 caracteres: una tira alta y
 * flaca donde el ojo salta de línea cada tres palabras. El contenedor se
 * ensancha solo para la grilla; el texto corrido de la sección conserva su
 * medida.
 */
.sincro-impacto {
	max-width: 54rem;
}

.sincro-impacto > p:not(.sincro-metric__note),
.sincro-impacto > h2 {
	max-width: 44rem;
}

.sincro-impacto__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin: 1.5rem 0;
}

@media (max-width: 640px) {
	.sincro-impacto__grid {
		grid-template-columns: 1fr;
	}
}

/*
 * Trayectoria.
 *
 * Las tres cifras se leen antes que el párrafo, así que cargan el argumento:
 * cuánto hace, cuántos reclamos, qué lugar. El «0» es el que más pesa y por eso
 * va al medio, que es donde el ojo cae después del primero.
 */
.sincro-trayectoria__lead {
	max-width: 44rem;
	font-size: 1.05rem;
	line-height: 1.65;
}

.sincro-trayectoria__cifras {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-top: 2.25rem;
}

/*
 * Va sobre Azul Auctoritas y no sobre el verde. Antes quedaba pegada al
 * diagnóstico, que ya es verde, y las dos secciones se leían como una sola
 * mancha. Además el azul es el color de la autoridad de la marca, que es
 * exactamente lo que afirma este bloque: cinco años y ningún reclamo.
 */
.sincro-trayectoria__cifra {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(212, 175, 55, 0.28);
	border-radius: var(--sincro-radius);
	padding: 1.5rem;
}

.sincro-trayectoria__cifra p {
	margin: 0.6rem 0 0;
	font-size: 0.95rem;
	line-height: 1.55;
}

.sincro-trayectoria__num {
	display: block;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-weight: 700;
	font-size: 2.6rem;
	line-height: 1;
	color: var(--sincro-gold);
}

@media (max-width: 780px) {
	.sincro-trayectoria__cifras {
		grid-template-columns: 1fr;
	}

	.sincro-trayectoria__num {
		font-size: 2.2rem;
	}
}

.sincro-transparencia {
	padding-top: 2rem;
	padding-bottom: 2rem;
	background: var(--sincro-calma, #F4F6F8);
}

.sincro-quiz__result [data-sincro-copy] p {
	margin: 0 0 0.85rem;
}

.sincro-barras__escala {
	margin: 1.1rem 0 0;
	font-size: 0.8rem;
	opacity: 0.7;
}

@media (max-width: 640px) {
	.sincro-barras__valor {
		font-size: 1.2rem;
		padding: 0 0.6rem;
	}
}

/* B2B métrica */
.sincro-metric {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin: 2rem 0;
}

@media (max-width: 640px) {
	.sincro-metric {
		grid-template-columns: 1fr;
	}
}

.sincro-metric__item {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(212, 175, 55, 0.35);
	border-radius: var(--sincro-radius);
	padding: 1.5rem;
	text-align: center;
}

.sincro-metric__num {
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: 2.75rem;
	font-weight: 700;
	color: var(--sincro-gold);
	line-height: 1.1;
}

/*
 * Medida de lectura.
 *
 * El ancho cómodo de una línea va de 45 a 85 caracteres, y depende del cuerpo
 * de la tipografía, no del ancho del contenedor. Esta nota se dejaba estirar
 * hasta el borde del contenedor de 1120 px con letra de 13,6 px: 158 caracteres
 * por línea, casi el doble del máximo. Al volver de una línea a la siguiente el
 * ojo pierde el renglón, y como acá viven las notas metodológicas —justo lo que
 * un comité de riesgo sí lee— era el peor lugar para tener ese defecto.
 * Se sube el cuerpo y se le pone tope propio.
 */
.sincro-metric__note {
	font-size: 0.92rem;
	line-height: 1.6;
	opacity: 0.85;
	margin-top: 1rem;
	max-width: 38rem;
}

/* Footer */
.sincro-footer {
	background: var(--sincro-auctoritas);
	color: rgba(255, 255, 255, 0.88);
	padding: 3rem 1.25rem 1.5rem;
}

.sincro-footer a {
	color: var(--sincro-blanco);
}

.sincro-footer__inner {
	max-width: 1120px;
	margin: 0 auto;
}

.sincro-footer__grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr 1fr;
	gap: 2rem;
	margin-bottom: 2rem;
}

@media (max-width: 1000px) and (min-width: 641px) {
	.sincro-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 768px) {
	.sincro-footer__grid {
		grid-template-columns: 1fr;
	}
}

.sincro-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: 1rem;
	font-size: 0.85rem;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Aclaración sobre el avatar: ocupa su propia línea, no compite con el ©. */
.sincro-footer__nota {
	flex-basis: 100%;
	opacity: 0.7;
}

/*
 * Ajustes de celular medidos con scripts/auditar-movil.js.
 *
 * En pantalla chica el texto por debajo de 14 px obliga a hacer zoom, y quien
 * llega acá suele estar leyendo apurado y con estrés: cada pellizco de zoom es
 * una excusa para irse. Los tamaños chicos existen para jerarquía visual en
 * escritorio; en el teléfono esa jerarquía la da el orden, no el tamaño.
 */
@media (max-width: 640px) {
	.sincro-kicker,
	.sincro-metric__note,
	.sincro-footer__legal,
	.sincro-footer__nota,
	.sincro-barras__escala,
	.sincro-quote cite {
		font-size: 0.9rem;
	}

	.sincro-recorrido > li {
		padding: 1rem 1.1rem 1rem 3.2rem;
	}

	.sincro-recorrido > li::before {
		left: 0.95rem;
		top: 1rem;
	}

	.sincro-canales > li > strong {
		font-size: 1.2rem;
	}

	.sincro-dato-fecha,
	.sincro-mito__etiqueta,
	.sincro-form .wpcf7-not-valid-tip {
		font-size: 0.875rem;
	}

	/* El logo también es un enlace: se le da la altura táctil mínima. */
	.sincro-header__logo {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
}

/* WhatsApp flotante — escritorio y móvil.
 *
 * El verde #25D366 no es color de marca: es la señal de canal reconocible.
 * El texto y el icono van en Azul Auctoritas (#0F2537) para cumplir WCAG AA
 * (aprox. 7,9:1). Blanco sobre ese verde queda en 1,98:1 y axe lo marca grave.
 * El enlace vive dentro de aside.sincro-wa-landmark (landmark).
 */
.sincro-wa-landmark {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 200;
}

.sincro-wa {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background: #25D366;
	color: var(--sincro-auctoritas) !important;
	text-decoration: none;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-weight: 600;
	padding: 0.85rem 1.1rem;
	border-radius: 999px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.sincro-wa:hover {
	filter: brightness(1.05);
}

.sincro-wa svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

@media (max-width: 480px) {
	.sincro-wa span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	.sincro-wa {
		padding: 1rem;
		border-radius: 50%;
	}
}

/**
 * Banner de consentimiento.
 *
 * Es una barra fina al pie, de ancho completo. Se probaron dos versiones peores:
 * centrada y ancha tapaba la casilla de consentimiento del formulario; anclada a
 * la izquierda tapaba el botón principal del hero. Como barra baja solo cubre una
 * franja delgada y ningún elemento de conversión queda escondido detrás.
 */
.sincro-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 300;
	margin: 0;
	background: var(--sincro-blanco);
	color: var(--sincro-texto);
	border-radius: 0;
	border-top: 1px solid rgba(15, 37, 55, 0.1);
	box-shadow: 0 -8px 28px rgba(15, 37, 55, 0.12);
	padding: 0.9rem 1.25rem;
	display: none;
}

.sincro-consent.is-visible {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.sincro-consent p {
	margin: 0;
	max-width: 46rem;
	font-size: 0.9rem;
}

.sincro-consent__actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin: 0;
	flex: 0 0 auto;
}

.sincro-consent__actions button,
.sincro-consent__accept,
.sincro-consent__reject {
	border: 0;
	border-radius: 8px;
	padding: 0.7rem 1.1rem;
	font-family: Inter, system-ui, sans-serif !important;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

.sincro-consent__accept {
	background: var(--sincro-auctoritas);
	color: #fff;
}

.sincro-consent__reject {
	background: var(--sincro-calma);
	color: var(--sincro-auctoritas);
}

/* Para que el aviso no oculte el final de la página mientras está abierto. */
body.sincro-con-aviso {
	padding-bottom: 7rem;
}

/* WhatsApp sube mientras la barra está visible, para no quedar tapado. */
body.sincro-con-aviso .sincro-wa-landmark {
	bottom: 6rem;
}

@media (max-width: 720px) {
	.sincro-consent.is-visible {
		justify-content: flex-start;
		gap: 0.75rem;
	}

	body.sincro-con-aviso {
		padding-bottom: 12rem;
	}

	body.sincro-con-aviso .sincro-wa-landmark {
		bottom: 10rem;
	}
}

/* Formulario */
.sincro-form label {
	display: block;
	margin-bottom: 1rem;
	font-weight: 500;
}

.sincro-form input[type="text"],
.sincro-form input[type="email"],
.sincro-form input[type="tel"],
.sincro-form textarea,
.sincro-form .wpcf7-form-control,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="submit"],
.wpcf7 textarea {
	width: 100%;
	margin-top: 0.35rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid rgba(15, 37, 55, 0.15);
	border-radius: 8px;
	/* Controles de formulario: sin familia explicita caen a Arial del UA. */
	font-family: Inter, system-ui, sans-serif !important;
	font-size: 1rem;
	line-height: 1.5;
	background: #fff;
	color: var(--sincro-texto);
}

.sincro-form input[type="submit"],
.wpcf7 input[type="submit"],
.sincro-btn {
	display: inline-block;
	width: auto;
	margin-top: 0;
	background: var(--sincro-auctoritas);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 0.85rem 1.4rem;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}

.sincro-form textarea {
	min-height: 120px;
	resize: vertical;
}

/* Contact Form 7: ajustes para que hable el idioma visual de la marca. */
.sincro-form .wpcf7-form-control-wrap {
	display: block;
}

.sincro-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.sincro-form .wpcf7-acceptance .wpcf7-list-item-label {
	font-size: 0.9rem;
	line-height: 1.5;
}

/*
 * La casilla de consentimiento medía 18 px y es la que habilita el envío: un
 * toque fallado ahí es un lead perdido, y en celular es donde llega la mayoría.
 * A 24 px entra al primer intento, y el texto de al lado también es tocable
 * porque Contact Form 7 lo envuelve en su <label>.
 */
.sincro-form input[type="checkbox"] {
	margin-top: 0.1rem;
	width: 1.5rem;
	height: 1.5rem;
	flex: 0 0 auto;
	accent-color: var(--sincro-auctoritas);
}

.sincro-form .wpcf7-acceptance .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-bottom: 0;
	cursor: pointer;
}

/* El aviso de error tiene que leerse, no esconderse. */
.sincro-form .wpcf7-not-valid-tip {
	color: #B3261E;
	font-size: 0.85rem;
	margin-top: 0.3rem;
}

.sincro-form .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.85rem 1rem;
	border-radius: 8px;
	border-width: 1px;
	font-size: 0.95rem;
}

.sincro-btn--ghost {
	background: transparent;
	color: var(--sincro-blanco);
	border: 2px solid var(--sincro-gold);
}

/* Botón secundario sobre fondos claros. */
.sincro-btn--linea {
	background: transparent;
	color: var(--sincro-auctoritas);
	border: 2px solid var(--sincro-auctoritas);
}

/* El dorado NUNCA se usa como color de texto de lectura */
.sincro-gold-text-forbidden {
	/* Intencionalmente vacío: recordatorio en código */
}