/* ---------------------------------------------------------------------
 * Hoja exclusiva de /nosotros/ — página institucional principal de APIS
 * ("Distintas perspectivas. Una misma visión."). 6 secciones, ver
 * template-parts/plantillas/cuerpo-nosotros.php para el orden.
 *
 * Ritmo de fondo: hero marfil → filosofía blanco → visión carbón →
 * proceso marfil → capacidades blanco → cierre carbón.
 * ------------------------------------------------------------------- */


/* === 1. HERO ========================================================= */

/* Mismo mecanismo que CUALQUIER hero de landing (fondo-panal-hero.png,
 * ver .landing-hero::before en components.css) — fondo marfil, así que
 * se reutiliza tal cual, sin recolorear nada (a diferencia del hero de
 * /agencia-de-influencers/, que sí lo necesitó por su fondo ámbar). */
.nosotros-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--color-crema);
	padding-top: 28px;
	padding-bottom: var(--espacio-4);
}

.nosotros-hero__panal {
	position: absolute;
	inset: 0;
	background-image: url("../img/elementos-graficos/fondo-panal-hero.png");
	background-repeat: no-repeat;
	background-position: top right;
	background-size: auto;
	pointer-events: none;
	z-index: 0;
	/* Ajuste 2026-10-23 (pedido explícito: "muy sutil, elegante y bien
	 * integrado"): el PNG a opacidad completa competía demasiado con el
	 * H1 — se atenúa un poco en escritorio, sin tocar el archivo. */
	opacity: 0.55;
}

@media (max-width: 700px) {
	/* Pedido explícito: "evitar que el patrón invada el H1" en móvil —
	 * el PNG ya es tenue (ver docblock de hero-influencers.php para la
	 * medición de alpha), esto es un margen de seguridad extra. */
	.nosotros-hero__panal {
		opacity: 0.4;
	}
}

.nosotros-hero__contenido {
	position: relative;
	z-index: 1;
	text-align: left;
}

.nosotros-hero__etiqueta {
	display: block;
	font-family: var(--font-cuerpo);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-miel-oscura);
	margin-bottom: var(--espacio-1);
}

.nosotros-hero__contenido h1 {
	margin-bottom: var(--espacio-2);
	text-align: left;
	max-width: 820px;
}

.nosotros-hero__resaltado {
	color: var(--color-ambar);
	/* Ajuste 2026-10-23 (pedido explícito: "mantener 'Una misma visión.'
	 * en el mismo renglón como bloque visual coherente"): sin esto, el
	 * salto de línea podía partir la frase resaltada a la mitad ("Una" en
	 * un renglón, "misma visión." en el siguiente) — ahora se mueve como
	 * una sola unidad. La frase es corta (3 palabras), cabe completa
	 * incluso en el ancho de móvil más angosto que soporta el sitio. */
	display: inline-block;
	white-space: nowrap;
}

.nosotros-hero__rayas {
	margin-top: var(--espacio-2);
	margin-bottom: var(--espacio-2);
}

.nosotros-hero__subtitulo {
	font-family: var(--font-titulos);
	font-weight: 500;
	font-size: var(--tamano-subtitulo);
	line-height: 1.6;
	color: var(--color-gris-calido);
	/* Ajuste 2026-10-23: de 680px a 640px — líneas algo más cortas, mejor
	 * ritmo de lectura (evita renglones casi completos que se sentían
	 * largos para el tamaño de letra del subtítulo). */
	max-width: 640px;
	margin-bottom: 0;
}


/* === 2. FILOSOFÍA ====================================================== */

.nosotros-filosofia {
	background-color: var(--color-blanco);
	padding-block: var(--espacio-6);
}

/* Corrección 2026-10-30: 2 columnas (etiqueta+H2 / intro) para usar el
 * ancho completo del contenedor — antes era un bloque único de 860px
 * centrado con ~340px sin aprovechar a la derecha en escritorio.
 *
 * Corrección 2026-10-23 (pedido explícito: "alinea verticalmente el
 * cuadro con el título de la izquierda"): de align-items:start a
 * center — ahora que la intro es una tarjeta (.cuadro-editorial, con su
 * propio padding/sombra) en vez de texto suelto, centrarla respecto a la
 * columna de etiqueta+H2 se lee mejor que alinear por arriba. */
.nosotros-filosofia__encabezado {
	display: grid;
	/* Ajuste 2026-10-23 (pedido explícito: "más anchura útil al texto para
	 * reducir saltos de línea"): de 0.9fr/1.1fr a 0.8fr/1.2fr. */
	grid-template-columns: 0.8fr 1.2fr;
	gap: var(--espacio-6);
	align-items: center;
	margin-bottom: var(--espacio-4);
}

.nosotros-filosofia__intro {
	/* El margen manual que bajaba el texto (usado cuando era texto suelto
	 * sin tarjeta) ya no hace falta: align-items:center en el grid padre
	 * resuelve el equilibrio visual ahora que este bloque es una tarjeta
	 * con su propio peso (padding/sombra/línea ámbar). max-width ya lo
	 * trae .cuadro-editorial (64ch) — no se duplica aquí. */
}

/* Corrección 2026-10-30 (pedido explícito: "la fotografía se ve
 * excesivamente grande... reduce altura, mejora encuadre"): de 16:9
 * nativo a un recorte panorámico 21:9 — mismo archivo, object-position
 * ajustada para que el racimo de abejas (lado derecho de la foto real)
 * siga completo dentro del encuadre más corto. */
.nosotros-filosofia__banner {
	aspect-ratio: 21 / 9;
	border-radius: var(--radio-tarjeta);
	overflow: hidden;
	margin-bottom: var(--espacio-6);
}

.nosotros-filosofia__banner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 64% 48%;
}

.nosotros-filosofia__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--espacio-4);
}

/* Rediseño 2026-10-23 (pedido explícito: "estas tarjetas NO deben verse
 * como las tarjetas negras actuales... toma como referencia visual la
 * sección 'Qué nos hace diferentes' [.home-diferenciadores, Inicio]...
 * sensación más ligera, más refinada, más editorial y premium"):
 * se abandona la receta de tarjeta carbón sólida (la de .home-proceso__
 * etapa, que SÍ se sigue usando tal cual en 'Cómo trabajamos' de esta
 * misma página) a favor de la familia editorial de .home-diferenciadores
 * __item — regla vertical ámbar a la izquierda, número "fantasma" de
 * fondo en vez de nodo circular relleno, sin tarjeta/sombra de base. Se
 * suma una interacción algo más presente que la de Inicio (pedido
 * explícito: "ligera elevación, cambio de sombra, acento ámbar o énfasis
 * del nodo") porque aquí son solo 4 ítems grandes, no 6 pequeños — la
 * elevación se nota más y conviene. Esto también resuelve por completo
 * el artefacto tipo "cuadro" reportado: venía de la combinación de
 * fondo sólido + box-shadow + border-radius de la tarjeta anterior:
 * al quitar las 3 cosas (ahora fondo transparente, sin sombra de base,
 * sin esquina redondeada) no hay superficie que pueda mostrar ese borde
 * extraño. */
.nosotros-filosofia__item {
	position: relative;
	padding: var(--espacio-3) var(--espacio-3) var(--espacio-3) var(--espacio-4);
	background-color: transparent;
	border: none;
	border-left: 2px solid rgba(242, 169, 0, 0.4);
	border-radius: 2px;
	box-shadow: none;
	overflow: visible;
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

/* Punto ámbar sólido sobre la regla vertical — mismo microdetalle que
 * .home-diferenciadores__item::before, para que se lea como la misma
 * familia de componente. */
.nosotros-filosofia__item::before {
	content: "";
	position: absolute;
	top: -7px;
	left: -4px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--color-ambar);
}

@media (hover: hover) {
	.nosotros-filosofia__item:hover {
		border-left-color: var(--color-ambar);
		background-color: rgba(242, 169, 0, 0.035);
		transform: translateY(-4px);
		box-shadow: 0 18px 32px rgba(20, 20, 20, 0.08);
	}

	.nosotros-filosofia__item:hover .nosotros-filosofia__numero {
		color: rgba(242, 169, 0, 0.55);
	}
}

/* Número "fantasma" de fondo (como .home-diferenciadores__numero), no un
 * nodo circular relleno — encaja con el fondo blanco de esta sección sin
 * necesitar ninguna animación de aparición propia (el fade/translateY de
 * [data-aparecer] en el <li> completo ya es suficiente). */
.nosotros-filosofia__numero {
	display: block;
	font-family: var(--font-titulos);
	font-weight: 700;
	font-size: 3.25rem;
	letter-spacing: -0.02em;
	line-height: 1;
	color: rgba(20, 20, 20, 0.22);
	margin-bottom: var(--espacio-2);
	transition: color 0.3s ease;
}

.nosotros-filosofia__item-titulo {
	color: var(--color-carbon);
	font-weight: 600;
	font-size: 1.125rem;
	margin: 0 0 8px;
}

.nosotros-filosofia__item-descripcion {
	color: var(--color-gris-calido);
	font-size: 1rem;
	line-height: 1.5;
	margin: 0;
}

.nosotros-filosofia__item-descripcion strong {
	color: var(--color-carbon);
}

@media (max-width: 860px) {
	.nosotros-filosofia__encabezado {
		grid-template-columns: 1fr;
		gap: var(--espacio-3);
	}
}

@media (max-width: 760px) {
	.nosotros-filosofia__grid {
		grid-template-columns: 1fr;
		gap: var(--espacio-3);
	}
}


/* === 3. VISIÓN COMPARTIDA ============================================== */

/* Ajuste 2026-10-23 (pedido explícito: "no quiero que se vea como un
 * simple bloque oscuro con elementos puestos encima... revisa
 * profundidad visual"): degradado sutil de 2 tonos de carbón (mismo
 * recurso que .home-proceso en Inicio) en vez de un color plano, más una
 * textura de panal a muy baja opacidad a pantalla completa — nunca
 * tapa el texto ni compite con el cluster, solo le da grano/profundidad
 * al fondo. */
.nosotros-vision {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #141414 0%, #1a1a1a 100%);
	padding-block: var(--espacio-6);
}

.nosotros-vision::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--color-crema);
	opacity: 0.03;
	mask-image: url("../img/elementos-graficos/panal-patron.svg");
	-webkit-mask-image: url("../img/elementos-graficos/panal-patron.svg");
	mask-repeat: repeat;
	-webkit-mask-repeat: repeat;
	mask-size: 88px 76px;
	-webkit-mask-size: 88px 76px;
	pointer-events: none;
}

/* Composición de 2 columnas en desktop (pedido explícito): texto con
 * ancho de lectura amplio a la izquierda, cluster geométrico a la
 * derecha — reemplaza el encabezado-arriba/fila-abajo de la ronda
 * anterior, que dejaba demasiado vacío vertical. */
.nosotros-vision__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--espacio-6);
	align-items: center;
}

.nosotros-vision .encabezado-seccion__etiqueta {
	color: var(--color-ambar);
}

.nosotros-vision .encabezado-seccion__titulo {
	color: var(--color-blanco);
}

.nosotros-vision__intro {
	color: rgba(255, 255, 255, 0.8);
	max-width: 56ch;
	margin: var(--espacio-3) 0 0;
}

.nosotros-vision__intro strong {
	color: var(--color-blanco);
}

.nosotros-vision__concepto {
	display: block;
	margin-top: var(--espacio-4);
	color: var(--color-ambar);
	font-family: var(--font-cuerpo);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.8rem;
}

/* Cluster de 3 hexágonos (pedido explícito: "partes de una misma
 * estructura conectada, NO tres empresas subordinadas a otra") — cada
 * uno a distinta escala/opacidad (profundidad), unidos por un triángulo
 * de líneas ámbar (cada nodo conectado con los otros 2, ningún "padre"). */
/* Corrección 2026-10-30 (pedido explícito: "mayor sofisticación"): un
 * resplandor radial suave detrás del cluster, más presencia de
 * profundidad en el hexágono sólido vía drop-shadow — ningún elemento
 * nuevo, solo terminado. */
/* Ajuste 2026-10-23 (pedido explícito: "mejor integración entre texto,
 * diagrama y leyenda... no como un simple bloque oscuro con elementos
 * puestos encima"): diagrama + leyenda ahora viven dentro de un panel
 * propio (borde sutil + sombra + fondo apenas más claro que el carbón de
 * la sección) para que se lean como UNA composición diseñada, no 2
 * piezas sueltas flotando una debajo de la otra. */
.nosotros-vision__diagrama {
	position: relative;
	padding: var(--espacio-4) var(--espacio-4) var(--espacio-3);
	border-radius: var(--radio-tarjeta);
	background-color: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
}

.nosotros-vision__diagrama::before {
	content: "";
	position: absolute;
	inset: -10%;
	background: radial-gradient(circle at 40% 35%, rgba(242, 169, 0, 0.14) 0%, transparent 60%);
	pointer-events: none;
	z-index: 0;
}

.nosotros-vision__svg {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	max-width: 420px;
	margin-inline: auto;
}

.nosotros-vision__triangulo {
	fill: none;
	stroke: var(--color-ambar);
	stroke-width: 1.5;
	stroke-linejoin: round;
	opacity: 0.45;
}

.nosotros-vision__hex-nodo {
	stroke-width: 2;
}

/* Marketing digital — el más grande, relleno ámbar sólido, con una
 * sombra propia (profundidad) frente a los otros 2 nodos. */
.nosotros-vision__hex-nodo--uno {
	fill: var(--color-ambar);
	stroke: var(--color-ambar);
	filter: drop-shadow(0 8px 16px rgba(242, 169, 0, 0.25));
}

/* Influencer marketing — relleno traslúcido blanco, otra profundidad. */
.nosotros-vision__hex-nodo--dos {
	fill: rgba(255, 255, 255, 0.08);
	stroke: rgba(255, 255, 255, 0.55);
}

/* Consultoría comercial — solo contorno ámbar, la capa más "ligera". */
.nosotros-vision__hex-nodo--tres {
	fill: rgba(242, 169, 0, 0.06);
	stroke: rgba(242, 169, 0, 0.55);
}

.nosotros-vision__leyenda {
	position: relative;
	z-index: 1;
	list-style: none;
	margin: var(--espacio-3) 0 0;
	padding-top: var(--espacio-3);
	padding-inline: 0;
	display: flex;
	flex-direction: column;
	gap: var(--espacio-2);
	max-width: 420px;
	margin-inline: auto;
	/* Línea divisoria tenue entre el diagrama y la leyenda — ahora que
	 * ambos viven dentro del mismo panel, esto los separa con intención
	 * en vez de solo espacio en blanco. */
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nosotros-vision__leyenda-item {
	display: flex;
	align-items: center;
	gap: var(--espacio-2);
}

.nosotros-vision__leyenda-punto {
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	display: inline-block;
}

.nosotros-vision__leyenda-punto.nosotros-vision__hex-nodo--uno {
	background-color: var(--color-ambar);
}

.nosotros-vision__leyenda-punto.nosotros-vision__hex-nodo--dos {
	background-color: rgba(255, 255, 255, 0.55);
}

.nosotros-vision__leyenda-punto.nosotros-vision__hex-nodo--tres {
	background-color: transparent;
	border: 1.5px solid rgba(242, 169, 0, 0.8);
}

.nosotros-vision__leyenda-titulo {
	color: var(--color-blanco);
	font-size: 1.0625rem;
	margin: 0;
}

/* Entrada animada (pedido explícito: "animación sutil de conexión al
 * entrar en viewport") — reutiliza [data-aparecer] (ya existente en
 * .nosotros-vision__diagrama), con una segunda transición de opacidad
 * propia en el triángulo/hexágonos para que el cluster se sienta
 * "armarse" al aparecer, no solo deslizarse. Sin JS nuevo. */
.nosotros-vision__triangulo,
.nosotros-vision__hex-nodo {
	transition: opacity 0.6s ease;
}

[data-aparecer]:not(.aparecer--visible) .nosotros-vision__triangulo,
[data-aparecer]:not(.aparecer--visible) .nosotros-vision__hex-nodo {
	opacity: 0;
}

/* Mismo respaldo que .sin-animacion [data-aparecer] en variables.css:
 * sin JS (o con prefers-reduced-motion) .aparecer--visible nunca se
 * agrega al padre — sin esto, el cluster se quedaría invisible para
 * siempre en vez de solo "sin animación". */
.sin-animacion .nosotros-vision__triangulo,
.sin-animacion .nosotros-vision__hex-nodo {
	opacity: 1;
}

@media (max-width: 860px) {
	/* Pedido explícito: "en móvil, texto primero y composición debajo" —
	 * ya es el orden real del HTML, solo se apila la cuadrícula. */
	.nosotros-vision__grid {
		grid-template-columns: 1fr;
		gap: var(--espacio-4);
	}

	.nosotros-vision__diagrama {
		margin-top: var(--espacio-3);
		padding: var(--espacio-3) var(--espacio-3) var(--espacio-2);
	}
}


/* === 4. NUESTRA FORMA DE TRABAJAR ======================================= */

.nosotros-proceso {
	background-color: var(--color-crema);
	padding-block: var(--espacio-6);
}

/* Ajuste 2026-10-23: antes 96px de margen inferior (--espacio-6) dejaban
 * un vacío enorme y sin motivo entre el párrafo y la fila de tarjetas —
 * pedido explícito "el texto debajo del título está mal distribuido".
 *
 * 2º ajuste 2026-10-23, mismo día (mismo pedido repetido): 640px dejaba
 * el párrafo angosto y pegado a la izquierda del contenedor, sin usar el
 * ancho disponible — sube a 56ch (~720px) y gana el tamaño de subtítulo
 * en vez del cuerpo base, para que acompañe mejor al título ahora más
 * grande/con rayas. */
.nosotros-proceso__intro {
	max-width: 56ch;
	color: var(--color-gris-calido);
	font-size: var(--tamano-subtitulo);
	line-height: 1.6;
	margin: var(--espacio-3) 0 var(--espacio-4);
}

/* Rediseño 2026-10-23 (pedido explícito: "toma como referencia visual
 * Cómo empezamos del Inicio... mejor sombreado, profundidad, nodos mejor
 * integrados, no quiero una línea de tiempo simple o tiesa"): se
 * abandona el recurso de "número flotando sobre una línea fina" a favor
 * de tarjetas con sombra y un nodo circular ámbar con el mismo pop-in
 * que .home-proceso__nodo — misma mecánica, en versión clara (tarjeta
 * blanca) para no romper la alternancia de fondos de la página (esta
 * sección sigue marfil; la de Visión, justo antes, ya es carbón —
 * repetir fondo oscuro aquí habría dejado 2 secciones oscuras seguidas). */
.nosotros-proceso__fila {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 1fr;
	gap: var(--espacio-4);
}

/* Sin conector entre tarjetas — mismo criterio que .home-proceso__linea
 * (su propio código ya documenta por qué: "no debe haber conectores
 * visuales entre ellas"). Los elementos siguen en el HTML (no se tocó la
 * plantilla), solo se ocultan. */
.nosotros-proceso__linea,
.nosotros-proceso__punto {
	display: none;
}

.nosotros-proceso__etapa {
	position: relative;
	height: 100%;
	padding: var(--espacio-4) var(--espacio-4) var(--espacio-3);
	border-radius: var(--radio-tarjeta);
	background-color: var(--color-blanco);
	border: 1px solid rgba(20, 20, 20, 0.07);
	/* Ajuste 2026-10-23 (pedido explícito: "deben sentirse más sólidas
	 * visualmente... revisa sombra, profundidad"): sombra base más
	 * presente (antes 12px/0.08, se sentía casi plana en reposo). */
	box-shadow: 0 16px 34px rgba(20, 20, 20, 0.1);
	transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

@media (hover: hover) {
	.nosotros-proceso__etapa:hover {
		box-shadow: 0 22px 44px rgba(20, 20, 20, 0.14);
		border-color: rgba(242, 169, 0, 0.3);
		transform: translateY(-3px);
	}

	.nosotros-proceso__etapa:hover .nosotros-proceso__numero {
		transform: scale(1) translateY(-2px);
		box-shadow: 0 12px 24px rgba(242, 169, 0, 0.4);
	}
}

/* Nodo HEXAGONAL ámbar con pop-in (scale+opacity) al entrar en vista —
 * mismo clip-path que .home-proceso__nodo ("Cómo empezamos", Inicio),
 * pedido explícito 2026-10-27: "las tarjetas tienen que cambiar el
 * círculo amarillo por el hexágono, como referencia la sección de 'Cómo
 * empezamos'". Antes era un círculo (border-radius:50%) — mismo tamaño,
 * posición y mecánica de pop-in de siempre, solo cambia la forma y, con
 * ella, el borde/sombra que ya traía el hexágono de referencia. */
.nosotros-proceso__numero {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
	background-color: var(--color-ambar);
	color: var(--color-carbon);
	font-family: var(--font-titulos);
	font-weight: 700;
	font-size: 1.0625rem;
	margin-bottom: var(--espacio-3);
	position: relative;
	z-index: 1;
	border: 2px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 8px 18px rgba(242, 169, 0, 0.3);
	transform: scale(0.7);
	opacity: 0;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.1s, opacity 0.45s ease 0.1s, box-shadow 0.2s ease;
}

.nosotros-proceso__etapa.aparecer--visible .nosotros-proceso__numero {
	transform: scale(1);
	opacity: 1;
}

.sin-animacion .nosotros-proceso__numero {
	transform: scale(1);
	opacity: 1;
}

.nosotros-proceso__titulo {
	font-size: 1.125rem;
	color: var(--color-carbon);
	margin: 0 0 8px;
}

.nosotros-proceso__descripcion {
	color: var(--color-gris-calido);
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0;
}

@media (max-width: 860px) {
	.nosotros-proceso__fila {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		gap: var(--espacio-3);
	}

	.nosotros-proceso__etapa {
		height: auto;
	}
}


/* === 5. UNA FILOSOFÍA, DISTINTAS CAPACIDADES ============================ */

.nosotros-capacidades {
	background-color: var(--color-blanco);
	padding-block: var(--espacio-6);
}

.nosotros-capacidades__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--espacio-6);
	align-items: center;
}

.nosotros-capacidades__texto p {
	color: var(--color-gris-calido);
	max-width: 58ch;
	line-height: 1.7;
}

.nosotros-capacidades__enlaces a {
	color: var(--color-miel-oscura);
	text-decoration: underline;
}

/* Fotografía real (pedido explícito: "sin marcos gruesos, sombras
 * exageradas ni decoraciones adicionales") — esquina discreta, object-
 * position centrada ligeramente a la derecha donde está la abeja y la
 * gota, sin recortarlas. */
.nosotros-capacidades__foto {
	aspect-ratio: 1672 / 941;
	border-radius: var(--radio-tarjeta);
	overflow: hidden;
}

.nosotros-capacidades__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 78% 55%;
}

@media (max-width: 860px) {
	.nosotros-capacidades__grid {
		grid-template-columns: 1fr;
		gap: var(--espacio-4);
	}
}


/* === 6. CONSULTORES APIS (bloque nuevo) ================================= */

.nosotros-consultores {
	background-color: var(--color-crema);
	padding-block: var(--espacio-6);
}

.nosotros-consultores__bloque {
	position: relative;
	overflow: hidden;
	background-color: var(--color-carbon);
	border-radius: var(--radio-tarjeta);
	padding: var(--espacio-6);
}

/* Ajuste 2026-10-23 (pedido explícito: "la sección se siente muy vacía
 * del lado derecho... integrar la foto vertical"): 2 columnas cuando hay
 * foto — contenido a la izquierda, foto a la derecha, separadas con aire
 * real (--espacio-6) para que ninguna invada a la otra. Sin foto, el
 * bloque se queda exactamente como antes (1 columna). */
.nosotros-consultores__bloque--con-foto {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
	gap: var(--espacio-6);
	/* El padding derecho se reduce: la foto ya trae su propio aire por ser
	 * más angosta que el bloque de texto, un padding completo a los 4
	 * lados la dejaba con demasiado margen muerto alrededor. */
	padding: var(--espacio-6) var(--espacio-4) var(--espacio-6) var(--espacio-6);
}

/* Mismo mecanismo que .nosotros-cierre__panal (panal-patron.svg
 * enmascarado en tinte crema sobre carbón), pero en una esquina en vez
 * de centrado — para que no se lea como la misma pieza que el cierre. */
.nosotros-consultores__panal {
	position: absolute;
	inset: 0;
	background-color: var(--color-crema);
	opacity: 0.18;
	-webkit-mask-image:
		url("../img/elementos-graficos/panal-patron.svg"),
		radial-gradient(circle at 100% 0%, #000 0%, transparent 75%);
	mask-image:
		url("../img/elementos-graficos/panal-patron.svg"),
		radial-gradient(circle at 100% 0%, #000 0%, transparent 75%);
	-webkit-mask-repeat: repeat, no-repeat;
	mask-repeat: repeat, no-repeat;
	-webkit-mask-size: 88px 76px, 100% 100%;
	mask-size: 88px 76px, 100% 100%;
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
	pointer-events: none;
}

.nosotros-consultores__contenido {
	position: relative;
	z-index: 1;
	max-width: 640px;
}

/* Foto vertical "APIs abeja retrato" — protagonista pero sin dominar:
 * ancho topado (380px) dentro de su columna, proporción 3:4 real de la
 * fotografía (nunca deformada), esquinas un poco menos redondeadas que
 * la tarjeta exterior (se lee como una pieza propia adentro) y sombra
 * propia para que no se sienta pegada al fondo carbón. */
.nosotros-consultores__foto {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 380px;
	aspect-ratio: 3 / 4;
	margin-inline: auto;
	border-radius: calc(var(--radio-tarjeta) - 6px);
	overflow: hidden;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

.nosotros-consultores__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 32%;
}

@media (max-width: 760px) {
	.nosotros-consultores__foto {
		max-width: 280px;
		margin-top: var(--espacio-4);
	}
}

.nosotros-consultores__etiqueta {
	display: block;
	font-family: var(--font-cuerpo);
	font-weight: 700;
	font-size: var(--tamano-etiqueta);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-ambar);
	margin-bottom: var(--espacio-2);
}

.nosotros-consultores__titulo {
	color: var(--color-blanco);
	font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem);
	line-height: 1.3;
	margin-bottom: var(--espacio-3);
}

.nosotros-consultores__texto {
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.0625rem;
	line-height: 1.65;
	margin-bottom: var(--espacio-4);
}

.nosotros-consultores__texto strong {
	color: var(--color-blanco);
}

/* CTA propio (no el .btn pastilla de siempre, pedido explícito: "no
 * hacer una tarjeta pequeña ni un banner publicitario genérico") — un
 * enlace grande con flecha diagonal que se desplaza al hover. */
.nosotros-consultores__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--espacio-1);
	color: var(--color-ambar);
	font-family: var(--font-titulos);
	font-weight: 700;
	font-size: 1.125rem;
	text-decoration: none;
	border-bottom: 2px solid rgba(242, 169, 0, 0.4);
	padding-bottom: 4px;
	transition: border-color 0.2s ease;
}

.nosotros-consultores__cta:hover {
	border-color: var(--color-ambar);
}

.nosotros-consultores__flecha {
	display: inline-block;
	transition: transform 0.2s ease;
}

@media (hover: hover) {
	.nosotros-consultores__cta:hover .nosotros-consultores__flecha {
		transform: translate(3px, -3px);
	}
}

@media (max-width: 760px) {
	.nosotros-consultores__bloque {
		padding: var(--espacio-4);
	}

	.nosotros-consultores__bloque--con-foto {
		grid-template-columns: 1fr;
		padding: var(--espacio-4);
	}
}


/* === 7. CIERRE ========================================================== */

/* Rediseño 2026-10-23 (pedido explícito: "estandarización de banners
 * fotográficos de cierre" — "utiliza EXACTAMENTE el mismo archivo
 * fotográfico que ya está en el cierre de Servicios... abeja a la
 * izquierda, tal como en Servicios... texto a la derecha"): mismo
 * mecanismo y mismos valores reales que .servicios-cierre en
 * servicios-cierre.css (foto de fondo + degradado + columna de texto
 * empujada a la derecha) — no se copia la hoja completa para no crear
 * una dependencia entre páginas, pero las reglas de abajo son el mismo
 * recorte/posición/degradado 1:1, sobre la misma fotografía real. */
.nosotros-cierre {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: clamp(380px, 46vh, 520px);
	padding-block: var(--espacio-4);
	background-color: var(--color-carbon);
}

.nosotros-cierre__foto-caja {
	position: absolute;
	inset: 0;
}

.nosotros-cierre__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Mismo encuadre que .servicios-cierre__foto — misma fotografía,
	 * mismo recorte: la abeja completa, sin cielo vacío de sobra. */
	object-position: center 82%;
}

.nosotros-cierre__degradado {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse 55% 75% at 84% 50%,
		rgba(20, 20, 20, 0.42) 0%,
		rgba(20, 20, 20, 0.22) 45%,
		rgba(20, 20, 20, 0.06) 70%,
		rgba(20, 20, 20, 0) 85%
	);
}

/* Respaldo si el archivo llegara a faltar (ver cierre-nosotros.php) —
 * vuelve al patrón de panal que tenía esta sección antes de esta ronda. */
.nosotros-cierre__panal {
	position: absolute;
	inset: 0;
	background-color: var(--color-crema);
	opacity: 0.08;
	-webkit-mask-image:
		url("../img/elementos-graficos/panal-patron.svg"),
		radial-gradient(ellipse 70% 90% at 50% 50%, #000 0%, transparent 78%);
	mask-image:
		url("../img/elementos-graficos/panal-patron.svg"),
		radial-gradient(ellipse 70% 90% at 50% 50%, #000 0%, transparent 78%);
	-webkit-mask-repeat: repeat, no-repeat;
	mask-repeat: repeat, no-repeat;
	-webkit-mask-size: 88px 76px, 100% 100%;
	mask-size: 88px 76px, 100% 100%;
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
	pointer-events: none;
}

/* Corrección 2026-10-23 (misma ronda): el texto pasa de la izquierda
 * (ronda anterior, cuando el fondo era un bloque plano sin foto) a la
 * derecha — con fotografía de fondo, la abeja vive a la izquierda y el
 * texto necesita el lado opuesto para no taparla, mismo criterio que
 * .servicios-cierre__texto. */
.nosotros-cierre__contenido {
	position: relative;
	z-index: 1;
	width: 100%;
}

.nosotros-cierre__texto-columna {
	max-width: clamp(420px, 38vw, 480px);
	margin-inline-start: auto;
}

.nosotros-cierre__etiqueta {
	display: block;
	font-family: var(--font-cuerpo);
	font-weight: 700;
	font-size: var(--tamano-etiqueta);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-ambar);
	margin-bottom: var(--espacio-2);
}

.nosotros-cierre__titulo {
	color: var(--color-blanco);
	font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem);
	line-height: 1.3;
	margin-bottom: var(--espacio-3);
}

.nosotros-cierre__resaltado {
	color: var(--color-ambar);
}

.nosotros-cierre__descripcion {
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.0625rem;
	line-height: 1.6;
	margin-bottom: var(--espacio-4);
}

/* Responsive — mismo criterio que .servicios-cierre en móvil (ver
 * servicios-cierre.css): la foto pasa a su propia caja con alto fijo por
 * aspect-ratio (ya no de borde a borde) y el texto va debajo, sobre
 * fondo carbón sólido — la abeja nunca queda tapada por el texto. */
@media (max-width: 760px) {
	.nosotros-cierre {
		display: block;
		min-height: 0;
		padding-block: 0 var(--espacio-4);
	}

	.nosotros-cierre__foto-caja {
		position: relative;
		inset: auto;
		aspect-ratio: 4 / 3;
		width: 100%;
	}

	.nosotros-cierre__foto {
		object-position: 28% center;
	}

	.nosotros-cierre__degradado {
		background: linear-gradient(
			0deg,
			rgba(20, 20, 20, 0.5) 0%,
			rgba(20, 20, 20, 0) 18%
		);
	}

	.nosotros-cierre__contenido {
		padding-top: var(--espacio-4);
	}

	.nosotros-cierre__texto-columna {
		max-width: none;
		margin-inline-start: 0;
	}
}

#filosofia {
	scroll-margin-top: 90px;
}