/*
 * conocenos.css
 * Página pública /conocenos/ — misma línea visual del resto del sitio
 * (hero degradado oscuro→cian de marca, tarjetas redondeadas con sombra,
 * kicker+título). Ver page-conocenos.php.
 */

.saes-conocenos { overflow-x: hidden; }

/*
 * .saes-seccion-kicker / .saes-seccion-header / .saes-seccion-titulo son la
 * "sección genérica" del sistema de diseño (mismo patrón que usa
 * front-page.php), pero solo están definidas en inicio.css, que no se carga
 * en esta página (ver inc/enqueue.php: inicio.css es exclusivo de
 * is_front_page()). Se redefinen aquí, idénticas, para que se vean igual sin
 * depender de que inicio.css esté cargado.
 */
.saes-seccion-kicker {
	display: block;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .75rem;
	font-weight: 700;
	color: var(--color-primario);
	margin-bottom: .5rem;
}
.saes-seccion-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--espacio-xs);
	margin-bottom: var(--espacio-md);
	padding-bottom: var(--espacio-sm);
	border-bottom: 1px solid var(--color-borde);
}
.saes-seccion-titulo {
	font-size: clamp(1.6rem, 3vw + 1rem, 2.5rem);
	text-transform: uppercase;
	letter-spacing: -.01em;
	margin-bottom: 0;
}

/* ─── Hero ─── */
.saes-conocenos-hero {
	background: linear-gradient(160deg, var(--color-secundario), var(--color-primario));
	color: #fff;
	padding-block: var(--espacio-2xl);
	text-align: center;
}
.saes-conocenos-hero__inner { max-width: 680px; margin-inline: auto; }
.saes-conocenos-hero__kicker {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .75rem;
	font-weight: 700;
	color: var(--color-dorado);
	margin-bottom: .6rem;
}
.saes-conocenos-hero h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 var(--espacio-sm); }
.saes-conocenos-hero p { color: rgba(255,255,255,.8); font-size: 1.05rem; margin: 0; }

/* ─── Qué hacemos ─── */
.saes-conocenos-que-hacemos { padding-block: var(--espacio-2xl); }
.saes-conocenos-que-hacemos__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--espacio-lg);
	margin-top: var(--espacio-lg);
}
.saes-conocenos-que-hacemos__col {
	background: var(--color-fondo-alterno);
	border-radius: var(--radio-lg);
	padding: var(--espacio-lg);
	text-align: center;
}
.saes-conocenos-que-hacemos__icono { font-size: 1.8rem; display: block; margin-bottom: .5rem; }
.saes-conocenos-que-hacemos__col h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.saes-conocenos-que-hacemos__col p { color: var(--color-texto-suave); font-size: .9rem; line-height: 1.6; margin: 0; }

.saes-conocenos-marcas {
	margin-top: var(--espacio-xl);
	padding-top: var(--espacio-xl);
	border-top: 1px solid var(--color-borde);
	text-align: center;
}
.saes-conocenos-marcas__etiqueta {
	display: block;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .75rem;
	font-weight: 700;
	color: var(--color-texto-suave);
	margin-bottom: var(--espacio-sm);
}
.saes-conocenos-marcas__lista {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: .6rem;
	margin-bottom: var(--espacio-sm);
}
.saes-conocenos-marca {
	display: inline-block;
	background: #fff;
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-full);
	padding: .5rem 1.25rem;
	font-family: var(--fuente-titulos);
	font-weight: 700;
	font-size: .85rem;
	color: var(--color-primario);
	box-shadow: var(--sombra-sutil);
}
.saes-conocenos-marcas p { max-width: 560px; margin-inline: auto; }

/* ─── Nuestra experiencia ─── */
.saes-conocenos-experiencia { padding-block: var(--espacio-2xl); background: var(--color-fondo-alterno); }
.saes-conocenos-experiencia__texto { max-width: 760px; }
.saes-conocenos-experiencia__texto p { font-size: 1.05rem; line-height: 1.75; }

/* ─── Para quién ─── */
.saes-conocenos-para-quien { padding-block: var(--espacio-2xl); }
.saes-conocenos-comparacion {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--espacio-md);
	margin-top: var(--espacio-lg);
}
.saes-conocenos-comparacion__col {
	background: #fff;
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-lg);
	padding: var(--espacio-lg);
	box-shadow: var(--sombra-tarjeta);
}
.saes-conocenos-comparacion__col h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.saes-conocenos-comparacion__col p { color: var(--color-texto-suave); font-size: .9rem; margin: 0 0 var(--espacio-sm); }
.saes-conocenos-comparacion__col--destacada {
	background: var(--color-primario);
	border-color: var(--color-primario);
}
.saes-conocenos-comparacion__col--destacada h3,
.saes-conocenos-comparacion__col--destacada p { color: #fff; }
.saes-conocenos-comparacion__col--destacada .boton-texto { color: #fff; text-decoration-color: rgba(255,255,255,.6); }

/* ─── CTA final ─── */
.saes-conocenos-cta { background: var(--color-secundario); padding-block: var(--espacio-2xl); text-align: center; }
.saes-conocenos-cta__inner { max-width: 560px; margin-inline: auto; }
.saes-conocenos-cta h2 { color: #fff; margin: 0 0 .6rem; }
.saes-conocenos-cta p { color: rgba(255,255,255,.75); margin: 0 0 var(--espacio-md); }

@media (min-width: 640px) {
	.saes-conocenos-que-hacemos__grid { grid-template-columns: repeat(2, 1fr); }
	.saes-conocenos-comparacion { grid-template-columns: repeat(2, 1fr); }
}