/*
 * Sistema de componentes de marca — reutilizable en home, hubs y landings.
 * Ver docs/BRAND.md § "Componentes UI".
 */

/* --- Botón pastilla ------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--espacio-1);
	padding: 14px 28px;
	border-radius: var(--radio-pastilla);
	font-family: var(--font-cuerpo);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease;
}

.btn:hover {
	transform: translateY(-2px);
}

.btn--primario {
	background-color: var(--color-ambar);
	color: var(--color-carbon);
}

.btn--secundario {
	background-color: transparent;
	border-color: var(--color-carbon);
	color: var(--color-carbon);
}

/* Botón cuando cae sobre un fondo ámbar: pastilla carbón + texto blanco
 * (nunca ámbar sobre ámbar, ni blanco sobre ámbar — ver docs/BRAND.md). */
.btn--sobre-ambar {
	background-color: var(--color-carbon);
	color: var(--color-blanco);
}

/* --- Tarjeta ---------------------------------------------------------- */

.tarjeta {
	border-radius: var(--radio-tarjeta);
	padding: var(--espacio-3);
	background-color: var(--color-blanco);
}

.tarjeta--sobre-crema {
	background-color: var(--color-crema);
}

.tarjeta--sobre-blanco {
	background-color: var(--color-blanco);
}

.tarjeta__icono {
	margin-bottom: var(--espacio-1);
}

/* Negritas dentro de cualquier tarjeta, en miel-oscura — mismo criterio
 * de color ya usado en el resto del sitio para cualquier <strong> (pedido
 * explícito: negritas en toda la página para que el texto no se vea
 * plano), antes sin esta regla el bold se veía solo en peso, sin color
 * propio, poco perceptible sobre fondo crema/blanco. */
.tarjeta strong {
	color: var(--color-miel-oscura);
}

/*
 * Hexágono de encabezado de tarjeta: bloque propio arriba del título, no
 * viñeta de lista en línea. 16px de separación vertical (espacio entre
 * bloques), no los 8px de "ícono junto a texto corto" (eso es para
 * cosas como la lista de Servicios).
 */
.tarjeta__vineta {
	display: block;
	width: 22px;
	height: auto;
	margin-bottom: var(--espacio-2);
}

/* --- Íconos ------------------------------------------------------------- */

.icono-marca {
	width: 28px;
	height: auto;
	display: block;
}

/* --- Encabezado de sección --------------------------------------------- */

.encabezado-seccion {
	margin-bottom: var(--espacio-4);
}

/*
 * Solo en FAQ: 48px (--espacio-4) se siente grande contra filas de
 * acordeón cerradas y densas. En "El problema" (con rayas + grid de
 * tarjetas) y "Ejemplo aplicado" 48px sigue viéndose bien, así que el
 * ajuste queda acotado aquí en vez de bajar la clase global.
 */
.landing-faq .encabezado-seccion {
	margin-bottom: 32px;
}

.encabezado-seccion__etiqueta {
	display: block;
	font-family: var(--font-cuerpo);
	font-weight: 600;
	font-size: var(--tamano-etiqueta);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-miel-oscura);
	margin-bottom: var(--espacio-1);
}

.encabezado-seccion__titulo {
	margin: 0;
}

/* --- FAQ (acordeón con <details>/<summary> nativo) ----------------------- */

.faq-item {
	border-bottom: 1px solid rgba(20, 20, 20, 0.12);
}

/*
 * El encabezado de sección ya pone 48px (--espacio-4) de margen debajo del
 * título; sin esto, el padding-top del primer .faq-item sumaba otros 16px
 * encima, dejando 64px en vez de los 48px que pide el manual.
 */
.encabezado-seccion + .faq-item .faq-item__pregunta {
	padding-top: 0;
}

.faq-item__pregunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--espacio-2);
	margin: 0;
	padding: var(--espacio-2) 0;
	font-size: var(--tamano-subtitulo);
	cursor: pointer;
	list-style: none;
}

/* Quita el triángulo nativo de <summary> en Chrome/Safari y Firefox. */
.faq-item__pregunta::-webkit-details-marker {
	display: none;
}

.faq-item__pregunta::marker {
	content: "";
}

/* Ícono "+" que gira 45° y se lee como "×" al abrir — trazo carbón, corto. */
.faq-item__icono {
	position: relative;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	transition: transform 220ms ease;
}

.faq-item__icono::before,
.faq-item__icono::after {
	content: "";
	position: absolute;
	background-color: var(--color-carbon);
}

.faq-item__icono::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.75px;
	transform: translateY(-50%);
}

.faq-item__icono::after {
	top: 0;
	left: 50%;
	width: 1.75px;
	height: 100%;
	transform: translateX(-50%);
}

.faq-item[open] .faq-item__icono {
	transform: rotate(45deg);
}

/*
 * Truco de grid para animar abrir/cerrar sin JS: 0fr → 1fr en vez de
 * height:auto (que no se puede transicionar). Esta regla, al venir del
 * stylesheet del autor, gana sobre la regla nativa del navegador que
 * oculta con display:none el contenido de <details> cerrado.
 */
.faq-item__respuesta-envoltura {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 220ms ease;
}

.faq-item[open] .faq-item__respuesta-envoltura {
	grid-template-rows: 1fr;
}

.faq-item__respuesta {
	overflow: hidden;
	padding-bottom: var(--espacio-2);
}

.faq-item__respuesta,
.faq-item__respuesta * {
	/* !important: el wysiwyg de Meta Box permite estilos inline (ej. texto
	 * pegado desde Word/Google Docs con color gris claro) que si no, ganan
	 * por especificidad sobre esta clase y dejan la respuesta casi invisible
	 * sobre el fondo crema. */
	color: var(--color-gris-calido) !important;
}

/* Negritas de la respuesta en ámbar — pedido explícito: "quiero que las
 * negritas en las preguntas frecuentes sean amarillas como las que
 * estaban en influencers" (el mismo --color-ambar de
 * .influencers-faq__acento en agencia-influencers.css, no el miel-oscura
 * que se había usado en la 1ra vuelta). Selector más específico que la
 * regla de arriba para ganarle pese a que ambas usan !important. */
.faq-item__respuesta strong {
	color: var(--color-ambar) !important;
}

/* EXCEPCIÓN /agencia-de-influencers/ (pedido explícito, misma ronda: "ahí
 * como que se aplicó dos veces"): esta página ya tenía su propio sistema
 * de énfasis moderado para el FAQ — <strong> sin color (solo peso) para
 * conceptos clave, y .influencers-faq__acento en ámbar SOLO para la frase
 * diferenciadora de 2 de las 4 respuestas (ver docblock 2026-10-29 en
 * agencia-influencers.css: "ámbar con moderación, máximo una frase corta
 * destacada por respuesta"). La regla de arriba pintaba TODOS los
 * <strong> en ámbar también ahí, duplicando el acento en la misma
 * respuesta (uno por <strong>, otro por .influencers-faq__acento) — se
 * revierte el <strong> normal a su gris de siempre solo en esta página,
 * sin tocar el acento real, que sigue siendo el único ámbar de cada
 * respuesta. */
.page-id-30 .faq-item__respuesta strong {
	color: var(--color-gris-calido) !important;
}

.faq-item__respuesta p:last-child {
	margin-bottom: 0;
}

/* --- Campos de formulario ------------------------------------------------ */

.campo label {
	display: block;
	font-family: var(--font-cuerpo);
	font-weight: 600;
	font-size: var(--tamano-etiqueta);
	margin-bottom: var(--espacio-1);
}

.campo input,
.campo textarea {
	width: 100%;
	border-radius: var(--radio-campo);
	border: 1px solid rgba(20, 20, 20, 0.2);
	padding: 12px 16px;
	font-family: var(--font-cuerpo);
	font-size: var(--tamano-parrafo);
}

.campo input:focus,
.campo textarea:focus {
	outline: none;
	border-color: var(--color-ambar);
}

/* --- Elementos gráficos de marca ------------------------------------------ */

.grafica-rayas {
	display: block;
	width: 200px;
	max-width: 100%;
	height: auto;
}

.grafica-panal {
	width: 100%;
	height: auto;
}

.grafica-vuelo {
	display: block;
	width: 260px;
	max-width: 70vw;
	height: auto;
	margin-inline: auto;
}

/* --- Header y footer del sitio -------------------------------------------- */

.saltar-al-contenido {
	position: absolute;
	left: -9999px;
	top: 0;
	background-color: var(--color-carbon);
	color: var(--color-blanco);
	padding: var(--espacio-1) var(--espacio-2);
	z-index: 100;
}

.saltar-al-contenido:focus {
	left: var(--espacio-2);
	top: var(--espacio-2);
}

.encabezado-sitio {
	background-color: var(--color-blanco);
	padding-block: var(--espacio-2);
	/* Fijo al hacer scroll, sin tapar contenido: sticky no saca el header
	 * del flujo (a diferencia de fixed), así que no hace falta compensar
	 * con padding-top en <main>. */
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 1px 0 rgba(20, 20, 20, 0.08);
}

.encabezado-sitio__barra {
	display: flex;
	align-items: center;
	gap: var(--espacio-3);
	position: relative;
}

.encabezado-sitio__logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.logo-horizontal {
	width: 140px;
	max-width: 42vw;
	height: auto;
	display: block;
}

.simbolo-marca {
	width: 36px;
	height: auto;
	flex-shrink: 0;
}

.encabezado-sitio__nav {
	margin-left: auto;
}

.encabezado-sitio__menu {
	display: flex;
	align-items: center;
	/* 20px en vez de --espacio-3 (24px): con "Servicios" como 5º ítem de
	 * primer nivel (2026-10-22) el gap anterior apretaba el menú contra
	 * el botón del CTA en anchos de escritorio angostos (~900-1100px) —
	 * un poco menos de aire entre ítems evita esa saturación sin
	 * achicar logo, CTA ni el propio menú. */
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.encabezado-sitio__menu li {
	position: relative;
}

.encabezado-sitio__enlace {
	display: inline-block;
	padding-block: var(--espacio-1);
	text-decoration: none;
	font-weight: 500;
	color: var(--color-carbon);
	border-bottom: 2px solid transparent;
}

.encabezado-sitio__enlace:hover {
	border-bottom-color: var(--color-ambar);
}

/* Sección activa (WordPress agrega estas clases solo o en el <li> padre). */
.current-menu-item > .encabezado-sitio__enlace,
.current-menu-ancestor > .encabezado-sitio__enlace,
.current-menu-parent > .encabezado-sitio__enlace {
	border-bottom-color: var(--color-ambar);
	font-weight: 600;
}

.encabezado-sitio__submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-left: 2px;
	padding: 0;
	border: none;
	background: none;
	color: var(--color-carbon);
	font-size: 0.7rem;
	line-height: 1;
	cursor: pointer;
	transition: transform 0.15s ease;
}

.encabezado-sitio__submenu-toggle[aria-expanded="true"] {
	transform: rotate(180deg);
}

.sub-menu {
	list-style: none;
	margin: 0;
	padding: var(--espacio-1);
	display: none;
	flex-direction: column;
	gap: 2px;
	min-width: 240px;
	background-color: var(--color-blanco);
	border-radius: var(--radio-campo);
	box-shadow: 0 8px 24px rgba(20, 20, 20, 0.12);
}

.encabezado-sitio__submenu-toggle[aria-expanded="true"] + .sub-menu,
.sub-menu.submenu--abierto {
	display: flex;
}

.sub-menu .encabezado-sitio__enlace {
	display: block;
	padding: 8px 12px;
	border-radius: 6px;
	border-bottom: none;
}

.sub-menu .encabezado-sitio__enlace:hover {
	background-color: var(--color-crema);
}

@media (min-width: 861px) {
	.sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10;
	}
}

.encabezado-sitio__acciones {
	display: flex;
	align-items: center;
	gap: var(--espacio-2);
}

.encabezado-sitio__cta {
	/* Pastilla ámbar más compacta para caber en la barra del header. */
	padding: 10px 20px;
	font-size: 0.875rem;
}

.encabezado-sitio__hamburguesa {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}

.encabezado-sitio__hamburguesa span {
	display: block;
	width: 100%;
	height: 1.75px;
	background-color: var(--color-carbon);
}

@media (max-width: 860px) {
	/* <nav> siempre pesa 0px visualmente en este punto (su único hijo
	 * está en display:none o pasa a position:absolute al abrirse), pero
	 * el gap del flex se sigue aplicando a los dos lados de esa caja
	 * vacía — en pantallas angostas eso solo era espacio muerto que
	 * empujaba al botón del CTA a encogerse de más. Se reduce aquí, sin
	 * tocar logo, menú ni el botón en sí. */
	.encabezado-sitio__barra {
		gap: var(--espacio-1);
	}

	.encabezado-sitio__nav {
		margin-left: 0;
	}

	.encabezado-sitio__nav:not(.encabezado-sitio__nav--abierto) .encabezado-sitio__menu {
		display: none;
	}

	.encabezado-sitio__nav--abierto .encabezado-sitio__menu {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--espacio-1);
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - 100%);
		overflow-y: auto;
		background-color: var(--color-blanco);
		padding: var(--espacio-2);
		border-top: 1px solid rgba(20, 20, 20, 0.12);
	}

	/* En móvil el submenú vive dentro del mismo panel, no flotando. */
	.sub-menu {
		box-shadow: none;
		padding-left: var(--espacio-2);
		min-width: 0;
	}

	.encabezado-sitio__acciones {
		margin-left: auto;
		gap: var(--espacio-1);
	}

	/* Un paso más compacta solo en el rango donde ya no hay overflow pero
	 * el texto seguía partiéndose en 2 líneas — no cambia en escritorio,
	 * donde .encabezado-sitio__cta no lleva esta regla. */
	.encabezado-sitio__cta {
		padding: 8px 14px;
		font-size: 0.8125rem;
	}

	.encabezado-sitio__hamburguesa {
		display: flex;
	}
}

.pie-sitio {
	background-color: var(--color-carbon);
	color: var(--color-crema);
	padding-block: var(--espacio-4);
}

.pie-sitio__columnas {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--espacio-3);
	padding-bottom: var(--espacio-4);
}

.pie-sitio__columna-titulo {
	font-family: var(--font-cuerpo);
	font-size: var(--tamano-etiqueta);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-ambar);
	margin-bottom: var(--espacio-2);
}

.pie-sitio__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--espacio-1);
}

.pie-sitio__lista a {
	color: var(--color-crema);
	opacity: 0.85;
	text-decoration: none;
}

.pie-sitio__lista a:hover {
	opacity: 1;
	text-decoration: underline;
}

.pie-sitio__contacto {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--espacio-3);
	padding-block: var(--espacio-3);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--color-crema);
	font-size: var(--tamano-parrafo);
}

.pie-sitio__contacto p {
	margin: 0 0 4px;
}

.pie-sitio__contacto a {
	color: var(--color-crema);
	overflow-wrap: anywhere;
}

.pie-sitio__contacto .pie-sitio__columna-titulo {
	margin-bottom: var(--espacio-2);
}

.pie-sitio__contacto .btn {
	color: var(--color-carbon);
	max-width: 100%;
	text-align: center;
}

.pie-sitio__redes {
	display: flex;
	gap: var(--espacio-2);
	list-style: none;
	margin: var(--espacio-1) 0 0;
	padding: 0;
}

@media (max-width: 760px) {
	.pie-sitio__columnas {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--espacio-3) var(--espacio-2);
	}
}

.pie-sitio__barra {
	display: flex;
	flex-direction: column;
	gap: var(--espacio-2);
	padding-top: var(--espacio-3);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.pie-sitio__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espacio-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pie-sitio__menu a {
	color: var(--color-crema);
	text-decoration: none;
}

.pie-sitio__marca {
	display: flex;
	align-items: flex-end;
	gap: var(--espacio-2);
	flex-wrap: wrap;
}

.pie-sitio__logo {
	/* Vector vertical original, sin recolorear sus rayas ni deformarlo. */
	width: 88px;
	max-width: 50vw;
	height: auto;
	flex-shrink: 0;
}

.pie-sitio__copyright {
	/* Gris cálido solo está validado sobre crema (7:1) — sobre el fondo
	 * carbón del footer da ~2.5:1, ilegible. Usa crema atenuado en su
	 * lugar (ver INSTRUCCIONES-PARA-CLAUDE-CODE.md § 8). */
	color: var(--color-crema);
	opacity: 0.7;
	font-size: var(--tamano-pie-foto);
	/* Acompaña el wordmark APIS, no el centro de la abeja y todo el SVG. */
	margin: 0 0 4px;
}

/* --- Landing comercial ----------------------------------------------------- */

.landing-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--color-crema);
}

/*
 * Fondo del hero ya resuelto como imagen (ver
 * INSTRUCCIONES-PARA-CLAUDE-CODE.md § 2): fondo-panal-hero.png trae el
 * grid apretado sin huecos y el desvanecido hacia el centro ya horneados
 * en el archivo, a la medida real del hero (1200×420, con transparencia).
 * background-size: auto para que no se escale — nada de
 * background-repeat + mask-image a mano — ese método dejaba huecos.
 */
.landing-hero::before {
	content: "";
	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;
}

/*
 * Posición del panal alternable (campo "Hero · Posición del panal" del
 * meta box) — el manual solo exige que viva "desde un costado", no cuál.
 */
.landing-hero--panal-izquierda::before {
	background-image: url("../img/elementos-graficos/fondo-panal-hero-izquierda.png");
	background-position: top left;
}

.landing-hero__grid {
	position: relative;
	z-index: 1;
}

/*
 * 3 celdas sueltas de acento (máx. por pieza) — nunca parte del patrón,
 * flotan cerca del título. Ver INSTRUCCIONES-PARA-CLAUDE-CODE.md § 2 y § 7.
 */
.landing-hero__celdas {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.landing-hero__celda {
	position: absolute;
	width: 30px;
	height: auto;
}

.landing-hero__celda--uno {
	top: 12%;
	right: 32%;
}

.landing-hero__celda--dos {
	top: 48%;
	right: 10%;
}

.landing-hero__celda--tres {
	bottom: 10%;
	right: 22%;
}

/* Bug real, detectado 2026-10-12 comparando /consultor-seo/ y /agencia-
 * seo-mexico/ en 390px: las celdas están posicionadas en % sobre
 * .landing-hero__celdas (inset:0), así que en un hero angosto y bajo
 * caen directo sobre el H1/párrafo/botón — en escritorio hay espacio de
 * sobra a la derecha del texto, en celular no. Son decorativas
 * (aria-hidden) y el patrón de fondo ya se esconde en celular en el modo
 * ilustrado (ver .ilustrado-patron en ilustrado.css) — incluso el hero
 * normal se ve mejor sin ellas aquí que montadas sobre el texto. */
@media (max-width: 782px) {
	.landing-hero__celdas {
		display: none;
	}
}

/* Fila de 3 etiquetas de servicio bajo el botón del hero — viñeta ámbar
 * chica antes del texto, no ícono ilustrado (ver INSTRUCCIONES-PARA-CLAUDE-CODE.md § 7). */
.landing-hero__servicios {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espacio-1) var(--espacio-3);
	list-style: none;
	margin: var(--espacio-3) 0 0;
	padding: 0;
}

.landing-hero__servicios li {
	display: flex;
	align-items: center;
	gap: var(--espacio-1);
	font-size: var(--tamano-pie-foto);
	color: var(--color-gris-calido);
}

.landing-hero__servicio-vineta {
	width: 14px;
	height: auto;
	flex-shrink: 0;
}

/*
 * "El problema" (nuestras tarjetas de dolores): fondo blanco sólido, sin
 * panal — ver INSTRUCCIONES-PARA-CLAUDE-CODE.md § 2 y § 7. Las tarjetas
 * se quedan en crema (fondo="crema" en page-landing.php), el contraste
 * de fondo blanco/tarjeta crema es lo que separa la sección visualmente.
 */
.landing-dolores {
	background-color: var(--color-blanco);
}

.landing-hero {
	padding-block: var(--espacio-6) var(--espacio-4);
}

.landing-hero__subtitulo {
	font-family: var(--font-titulos);
	font-weight: 500;
	font-size: var(--tamano-subtitulo);
	color: var(--color-gris-calido);
	max-width: 560px;
}

/*
 * 96px (--espacio-6) entre secciones — ver docs/BRAND.md "96 entre
 * secciones". Repartido 48px (--espacio-4) abajo de una sección + 48px
 * arriba de la siguiente, no todo de un lado.
 */
.landing-dolores,
.landing-ejemplo,
.landing-contenido {
	padding-top: var(--espacio-4);
	padding-bottom: var(--espacio-4);
}

/* Última sección antes del footer: mantiene los 96px completos abajo.
 * Fondo blanco: secciones explicativas van en blanco (ritmo del manual). */
.landing-faq {
	padding-top: var(--espacio-4);
	padding-bottom: var(--espacio-6);
	background-color: var(--color-blanco);
}

.landing-dolores__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--espacio-3);
}

/* Entrada escalonada: 100ms de diferencia entre cada tarjeta en vez de
 * que las 3 aparezcan a la vez. */
.landing-dolores__grid .tarjeta:nth-child(1) {
	transition-delay: 0ms;
}

.landing-dolores__grid .tarjeta:nth-child(2) {
	transition-delay: 100ms;
}

.landing-dolores__grid .tarjeta:nth-child(3) {
	transition-delay: 200ms;
}

/*
 * Una vez visible, la tarjeta ya no necesita el delay ni la duración de
 * 0.4s de la entrada — se redefine la transición para el hover (200ms,
 * sin delay), independiente de la animación de aparecer.
 */
.landing-dolores__grid .tarjeta.aparecer--visible {
	transition: transform 200ms ease, box-shadow 200ms ease;
	transition-delay: 0ms;
}

.landing-dolores__grid .tarjeta:hover {
	transform: translateY(var(--tarjeta-hover-elevacion));
	box-shadow: var(--tarjeta-hover-sombra);
}


/* --- Migas de pan --------------------------------------------------------- */

.migas-pan {
	/* Mismo fondo que la primera sección de la página (el hero), para que
	 * no haya un corte de color entre las migas y el hero debajo — crema
	 * es el default del hero normal (variante v-a), las variantes abajo
	 * lo ajustan igual que ajustan su propio .landing-hero. */
	background-color: var(--color-crema);
	padding-block: var(--espacio-2);
}

.v-b .migas-pan,
.v-d .migas-pan {
	background-color: var(--color-blanco);
}

.v-c .migas-pan {
	background-color: var(--color-ambar);
}

/* Contacto: el hero es carbón (no una de las 4 variantes v-a/b/c/d), así
 * que sigue el mismo principio de continuidad visual de arriba — el fondo
 * de las migas iguala al de la sección que sigue — pero vía la clase
 * institucional-es-contacto (ver apis_body_class_variante en
 * functions.php), no una variante nueva. */
.institucional-es-contacto .migas-pan {
	background-color: var(--color-carbon);
}

.institucional-es-contacto .migas-pan__lista,
.institucional-es-contacto .migas-pan__item:not(:last-child)::after {
	color: rgba(255, 255, 255, 0.6);
}

.institucional-es-contacto .migas-pan__item a {
	color: rgba(255, 255, 255, 0.82);
}

.institucional-es-contacto .migas-pan__item span[aria-current] {
	color: var(--color-blanco);
}

.migas-pan__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espacio-1);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--tamano-pie-foto);
	color: var(--color-gris-calido);
}

.migas-pan__item {
	display: flex;
	align-items: center;
	gap: var(--espacio-1);
}

.migas-pan__item:not(:last-child)::after {
	content: "/";
	margin-left: var(--espacio-1);
	color: var(--color-gris-calido);
}

.migas-pan__item a {
	color: var(--color-gris-calido);
	text-decoration: underline;
}

.migas-pan__item span[aria-current] {
	color: var(--color-carbon);
}

/* --- Botón flotante de WhatsApp -------------------------------------------- */

.boton-whatsapp {
	position: fixed;
	right: var(--espacio-2);
	bottom: var(--espacio-2);
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: #25d366; /* Verde oficial de WhatsApp — no es color de marca Apis, es el ícono de un servicio externo, igual que un logo de red social. */
	color: var(--color-blanco);
	box-shadow: 0 4px 16px rgba(20, 20, 20, 0.25);
	transition: transform 0.15s ease;
}

.boton-whatsapp:hover {
	transform: translateY(-2px);
}

/* --- Formulario de contacto -------------------------------------------------- */

.institucional-contacto-directo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.institucional-contacto-directo__dato {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.institucional-contacto-directo__etiqueta {
	color: rgba(255, 248, 236, 0.7);
	font-family: var(--font-cuerpo);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.institucional-contacto-hero__texto .institucional-contacto-directo a {
	font-family: var(--font-cuerpo);
	font-size: 15px;
	line-height: 1.6;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.institucional-contacto-hero__texto .institucional-contacto-directo__valor {
	color: var(--color-crema);
	font-weight: 500;
}

.institucional-contacto-hero__texto .institucional-contacto-directo a.institucional-contacto-directo__whatsapp {
	color: var(--color-ambar);
	font-size: 13px;
}

.institucional-contacto-hero__texto .institucional-contacto-directo a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (max-width: 760px) {
	.institucional-contacto-directo {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.formulario-contacto__form {
	display: flex;
	flex-direction: column;
	gap: var(--espacio-2);
	max-width: 520px;
}

.formulario-contacto__trampa {
	position: absolute;
	left: -9999px;
}

.formulario-contacto__mensaje {
	padding: var(--espacio-2);
	border-radius: var(--radio-campo);
	max-width: 520px;
}

.formulario-contacto__mensaje--exito {
	background-color: var(--color-crema);
	border: 1px solid var(--color-ambar);
}

.formulario-contacto__mensaje--error {
	background-color: var(--color-crema);
	border: 1px solid #c0392b;
	color: #c0392b;
}

/* Bloque del Aviso de Privacidad Simplificado + checkbox de promociones —
 * misma tipografía pequeña (0.875rem, gris cálido) y mismo accent-color
 * ámbar que ya usa .diagnostico-servicios__consentimiento, para que ambos
 * formularios del sitio luzcan consistentes. */
.formulario-contacto__privacidad {
	font-size: 0.875rem;
	color: var(--color-gris-calido);
	border: 1px solid rgba(20, 20, 20, 0.12);
	border-radius: 8px;
	padding: var(--espacio-1) var(--espacio-2);
}

.formulario-contacto__privacidad p {
	margin: 0 0 var(--espacio-1);
}

.formulario-contacto__privacidad a {
	color: var(--color-carbon);
}

/* Resumen clicable — mismo mecanismo que .faq-item (ícono "+"→"×", sin
 * triángulo nativo de <summary>), en tamaño reducido para encajar en el
 * formulario en vez del tamaño de sección completa. */
.formulario-contacto__privacidad-resumen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--espacio-1);
	margin: 0;
	padding: var(--espacio-1) 0;
	font-weight: 600;
	color: var(--color-carbon);
	cursor: pointer;
	list-style: none;
}

.formulario-contacto__privacidad-resumen::-webkit-details-marker {
	display: none;
}

.formulario-contacto__privacidad-resumen::marker {
	content: "";
}

.formulario-contacto__privacidad-icono {
	position: relative;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	transition: transform 220ms ease;
}

.formulario-contacto__privacidad-icono::before,
.formulario-contacto__privacidad-icono::after {
	content: "";
	position: absolute;
	background-color: var(--color-carbon);
}

.formulario-contacto__privacidad-icono::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.5px;
	transform: translateY(-50%);
}

.formulario-contacto__privacidad-icono::after {
	top: 0;
	left: 50%;
	width: 1.5px;
	height: 100%;
	transform: translateX(-50%);
}

.formulario-contacto__privacidad[open] .formulario-contacto__privacidad-icono {
	transform: rotate(45deg);
}

/* Mismo truco de grid 0fr→1fr que .faq-item__respuesta-envoltura para
 * animar abrir/cerrar sin JS (height:auto no se puede transicionar). */
.formulario-contacto__privacidad-envoltura {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 220ms ease;
}

.formulario-contacto__privacidad[open] .formulario-contacto__privacidad-envoltura {
	grid-template-rows: 1fr;
}

.formulario-contacto__privacidad-contenido {
	overflow: hidden;
	padding-top: var(--espacio-1);
}

.formulario-contacto__privacidad-contenido p:last-child {
	margin-bottom: 0;
}

.formulario-contacto__promociones {
	display: flex;
	align-items: flex-start;
	gap: var(--espacio-1);
	font-size: 0.875rem;
	color: var(--color-gris-calido);
	cursor: pointer;
}

.formulario-contacto__promociones input {
	accent-color: var(--color-ambar);
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 2px;
}

.formulario-contacto__promociones strong {
	display: block;
	color: var(--color-carbon);
	font-weight: 600;
}

/* --- Variantes visuales A/B/C/D --------------------------------------------
 * Las 4 comparten tipografía, logo y comportamiento — solo cambian fondo,
 * acento y la composición del hero. Solo colores de la paleta de marca.
 * Se asignan con el campo "Presentación → Variante visual" del meta box,
 * que agrega la clase al <body> (ver apis_body_class_variante() en
 * functions.php).
 * ------------------------------------------------------------------------ */

/* v-a: Crema / ámbar — el default, ya usado en todo lo construido hasta
 * ahora. Sin reglas extra aquí a propósito: es el comportamiento base. */

/* v-b: Blanco / violeta — hero en blanco, el panal y las celdas sueltas
 * usan violeta en vez de ámbar como acento principal. */
.v-b .landing-hero {
	background-color: var(--color-blanco);
}

.v-b .landing-hero::before {
	opacity: 0.6; /* el panal carbón se nota menos sobre blanco que sobre crema */
}

.v-b .encabezado-seccion__etiqueta {
	color: var(--color-violeta);
}

/* v-c: Bloque ámbar de impacto — el hero completo es un bloque ámbar
 * (pieza de impacto puntual, ver docs/BRAND.md), texto y botón pasan a
 * las combinaciones válidas sobre ámbar (carbón). */
.v-c .landing-hero {
	background-color: var(--color-ambar);
}

.v-c .landing-hero::before {
	opacity: 0.18; /* panal carbón sutil sobre ámbar, nunca una celda ámbar ahí: se perdería */
}

.v-c .landing-hero h1,
.v-c .landing-hero__subtitulo,
.v-c .landing-hero__servicios li {
	color: var(--color-carbon);
}

.v-c .landing-hero .btn--primario {
	background-color: var(--color-carbon);
	color: var(--color-blanco);
}

/* v-d: Blanco con ámbar y violeta combinados — hero blanco, celdas
 * sueltas mitad ámbar mitad violeta (el violeta nunca va grande, solo
 * como detalle puntual, igual que en el resto del sitio). */
.v-d .landing-hero {
	background-color: var(--color-blanco);
}

.v-d .landing-hero__celda--dos polygon {
	/* La celda ámbar del medio pasa a violeta en esta variante. Antes
	 * usaba filter:hue-rotate(185deg), que en #F2A900 (ámbar) da un azul
	 * (~hue 227°), no el violeta de marca (#6C4CFF, ~hue 251°) — bug real
	 * visible en /agencia-seo-mexico/ (corregido 2026-10-12). Un fill
	 * directo sobre el <polygon> inline es exacto, sin depender de la
	 * aproximación de un filtro CSS. */
	fill: var(--color-violeta);
}

/* --- Guía pilar -------------------------------------------------------------- */

.guia-pilar__cabecera {
	padding-block: var(--espacio-4) var(--espacio-3);
}

.guia-pilar__respuesta-corta {
	font-size: var(--tamano-subtitulo);
	color: var(--color-gris-calido);
	max-width: 700px;
}

.guia-pilar__cuerpo {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: var(--espacio-4);
	align-items: start;
	padding-bottom: var(--espacio-4);
}

.guia-pilar__indice {
	position: sticky;
	top: calc(72px + var(--espacio-2));
	background-color: var(--color-crema);
	border-radius: var(--radio-tarjeta);
	padding: var(--espacio-2);
}

.guia-pilar__indice-titulo {
	font-size: var(--tamano-etiqueta);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: var(--espacio-1);
}

.guia-pilar__indice ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.guia-pilar__indice a {
	color: var(--color-gris-calido);
	text-decoration: none;
	font-size: 0.9rem;
}

.guia-pilar__indice a:hover {
	color: var(--color-carbon);
	text-decoration: underline;
}

.guia-pilar__indice-item--h3 {
	padding-left: var(--espacio-2);
}

.guia-pilar__contenido h2 {
	margin-top: var(--espacio-4);
}

.guia-pilar__contenido h3 {
	margin-top: var(--espacio-3);
}

.guia-pilar__cta {
	margin-top: var(--espacio-4);
}

@media (max-width: 860px) {
	.guia-pilar__cuerpo {
		grid-template-columns: 1fr;
	}

	.guia-pilar__indice {
		position: static;
	}
}

/* --- Hub ----------------------------------------------------------------- */

.hub-cabecera {
	padding-block: var(--espacio-4);
}

.hub-cabecera__intro {
	font-size: var(--tamano-subtitulo);
	color: var(--color-gris-calido);
	max-width: 700px;
}

.hub-grid {
	padding-bottom: var(--espacio-4);
}

.hub-grid__contenedor {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--espacio-3);
}

.tarjeta--enlace {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tarjeta--enlace:hover {
	transform: translateY(var(--tarjeta-hover-elevacion));
	box-shadow: var(--tarjeta-hover-sombra);
}

/* --- Institucional / Artículo ------------------------------------------- */

.institucional-cabecera,
.articulo__cabecera {
	padding-block: var(--espacio-4) var(--espacio-3);
}

.institucional-cabecera__subtitulo {
	font-size: var(--tamano-subtitulo);
	color: var(--color-gris-calido);
	max-width: 700px;
}

.institucional-contenido,
.articulo__contenido {
	padding-bottom: var(--espacio-3);
	max-width: 760px;
}

.institucional-cta {
	padding-bottom: var(--espacio-4);
}

.institucional-formulario {
	background-color: var(--color-blanco);
}

/* ==========================================================================
   Aviso de privacidad — acentos ámbar discretos, acotado a
   institucional-aviso-privacidad (ver apis_body_class_variante() en
   functions.php, por slug). No modifica .institucional-cabecera ni
   .institucional-contenido en sí — Casos/Nosotros/Contacto, que comparten
   la misma plantilla y las mismas clases, se quedan exactamente igual.
   ========================================================================== */

/* Fix 2026-10-27, tercera vuelta (pedido explícito: "haz el fondo
 * blanco... una estética más premium"): la ronda anterior unificó todo
 * en crema para resolver el "corte" de color. Ahora se pide blanco — se
 * aplica el MISMO principio de continuidad que ya evitó el corte la vez
 * pasada, pero con blanco en vez de crema: migas de pan, hero, contenido
 * e índice quedan los 4 en blanco, consistentes entre sí (el body sigue
 * crema por default del sitio, pero nunca se asoma porque esta sección
 * cubre todo el ancho). Nunca se repite el error de dejar una sola zona
 * en un tono distinto. */
/* Fix 2026-10-27, cuarta vuelta (pedido explícito: "el fondo se ve
 * arena en vez de blanco"): .institucional-aviso-privacidad__layout (el
 * grid de 2 columnas) es transparente, así que el hueco entre el texto
 * y el índice, y todo el alto de la columna del índice por debajo de su
 * caja pegajosa, dejaban ver el crema de var(--color-crema) en body
 * (variables.css) — ahí estaba el "arena". Blanco directo en el body de
 * esta página es la única forma de que no se asome crema en ningún
 * hueco del layout, sin tener que perseguir cada contenedor. */
body.institucional-aviso-privacidad {
	background-color: var(--color-blanco);
}

.institucional-aviso-privacidad .migas-pan,
.institucional-aviso-privacidad .institucional-cabecera,
.institucional-aviso-privacidad .institucional-contenido {
	background-color: var(--color-blanco);
}

/* Con las 3 secciones en el mismo blanco ya no hay color que las separe
 * visualmente — una línea muy fina hace ese trabajo sin reintroducir una
 * segunda zona de color. */
.institucional-aviso-privacidad .migas-pan,
.institucional-aviso-privacidad .institucional-cabecera {
	border-bottom: 1px solid rgba(20, 20, 20, 0.06);
}

/* Mismo patrón de barra que .institucional-contacto-hero__acento, antes del
   H1 — "acentos ámbar discretos" del diseño editorial de esta página. */
.institucional-cabecera__acento {
	display: block;
	width: 56px;
	height: 4px;
	background-color: var(--color-ambar);
	border-radius: 2px;
	margin-bottom: var(--espacio-2);
}

/* Jerarquía de encabezados dentro del texto legal (the_content) — fix
   2026-10-27, sexta vuelta (pedido explícito: "ya se veían bien sin ese
   subrayado, solo quiero que sean amarillos y ya sin el subrayado"). Se
   quita el chip/fondo y el efecto marcador de la ronda anterior — vuelve
   a ser texto plano en amarillo, sin fondo ni línea detrás. Esta vez con
   el ámbar de marca puro (--color-ambar, #F2A900) tal cual se pidió
   ("amarillos"), no el tono oscurecido de versiones previas. Nota de
   accesibilidad: este tono no pasa el contraste mínimo AA para texto
   sobre blanco (~2:1) — se usa así por ser la instrucción explícita y
   repetida del dueño del proyecto. Acotado a esta página. */
.institucional-aviso-privacidad .institucional-contenido h2 {
	margin-top: var(--espacio-4);
	color: var(--color-ambar);
	font-weight: 800;
	letter-spacing: -0.01em;
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
	/* Respiro al saltar desde un enlace del índice (#id) — sin esto el
	 * título queda pegado al borde superior del viewport. */
	scroll-margin-top: var(--espacio-3);
}

.institucional-aviso-privacidad .institucional-contenido h2:first-child {
	margin-top: 0;
}

.institucional-aviso-privacidad .institucional-contenido h3 {
	margin-top: var(--espacio-3);
	color: var(--color-ambar);
	font-weight: 700;
}

.institucional-aviso-privacidad .institucional-contenido strong {
	color: var(--color-ambar);
}

.institucional-aviso-privacidad .institucional-contenido ul,
.institucional-aviso-privacidad .institucional-contenido ol {
	margin: 0 0 var(--espacio-2);
	padding-left: 1.25em;
}

.institucional-aviso-privacidad .institucional-contenido li {
	margin-bottom: var(--espacio-1);
}

.institucional-aviso-privacidad .institucional-contenido a {
	color: var(--color-carbon);
	text-decoration-color: var(--color-ambar);
	text-decoration-thickness: 2px;
}

/* El ámbar de marca puro (#F2A900, --color-ambar) no pasa contraste AA en
 * texto sobre blanco (~2:1) — por eso headings/negritas de arriba usan
 * --color-miel-oscura (#8A5F00), el mismo tono "ámbar con contraste
 * suficiente" que ya usa el resto del sitio para negritas sobre blanco
 * (ver nota igual en paginas-seo-ilustrado.css). El ámbar puro se queda
 * para los acentos decorativos (la barrita, el subrayado de enlaces). */

/* Fix 2026-10-27, décima vuelta (confirmado explícito: el problema real
 * era la alineación, iba y venía entre "centrado" y "pegado a la
 * izquierda" porque en los dos casos la columna seguía siendo angosta
 * dentro de una página mucho más ancha — ninguna de las dos posiciones
 * se sentía bien con ese hueco. .institucional-contenido hereda
 * max-width:760px de la regla compartida de arriba (línea ~1294, la
 * usan también Casos/Nosotros) — acá se anula por completo: el texto
 * usa el mismo ancho que el título y las migas de pan (el de
 * .contenedor, variables.css), de izquierda a derecha por toda la
 * página, sin columna angosta que alinear de ninguna forma. */
.institucional-aviso-privacidad .institucional-contenido {
	max-width: none;
	/* Fix 2026-10-27, onceava vuelta (pedido explícito: "ahora está muy
	 * pegado a la izquierda, que quede un margen normal") — a ancho
	 * completo, el único margen lateral era el padding-inline de
	 * .contenedor (--espacio-2, 16px), muy poco para un bloque denso de
	 * texto en una pantalla ancha. Un margen propio, responsivo (crece en
	 * pantallas anchas, se queda en lo mismo de antes en móvil), sin
	 * volver a limitar el ancho con un max-width. */
	padding-inline: clamp(16px, 6vw, 96px);
}

/*
 * Bug encontrado en validación (2026-10-26): [data-aparecer] (ver main.js)
 * revela con un IntersectionObserver que exige threshold 0.2 (20% del ÁREA
 * del elemento visible) — funciona bien en el resto del sitio porque cada
 * sección [data-aparecer] mide poco. Aquí todo el aviso integral (16
 * apartados, ~1800 palabras) es UN SOLO contenedor .institucional-contenido
 * con ese atributo, de más de 10 000px de alto: el 20% de su área nunca
 * cabe en un viewport normal, así que el observer nunca dispara y el texto
 * se queda en opacity:0 para siempre. No se toca main.js (es compartido
 * por todo el sitio) ni el threshold global — se desactiva la animación
 * SOLO en esta página, acotado a institucional-aviso-privacidad, dejando
 * el contenido visible de inmediato (lectura de un documento legal largo
 * no necesita una animación de aparición por scroll de cualquier forma).
 */
.institucional-aviso-privacidad [data-aparecer] {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   Contacto — rediseño por franjas de color (solo /contacto/, acotado a
   institucional_es_contacto en page-institucional.php). Nada de esto toca
   .landing-faq, .tarjeta, .institucional-cabecera ni ninguna otra regla
   compartida: cada selector de aquí empieza con .institucional-contacto-*
   o combina con una clase propia (.landing-faq.institucional-contacto-faq),
   así que Nosotros/Casos/Aviso de privacidad no se ven afectadas.
   ========================================================================== */

/* --- 1. Hero: carbón, H1 blanco, acentos ámbar, formulario en tarjeta crema --- */

.institucional-contacto-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--color-carbon);
	padding-block: var(--espacio-4);
}

/* Corrección 2026-11-01 (pedido explícito: "patrón hexagonal que se
 * diluye... integrado al lado derecho/fondo, como textura visual"): de
 * una insignia chica (220px) pegada a la esquina a una textura más
 * grande que se diluye desde arriba-derecha hacia el centro — mismo
 * mecanismo (panal-patron.svg recoloreado a crema vía CSS, radial-
 * gradient como máscara), solo más presencia y más difuminado, para que
 * se lea como fondo y no como un adorno suelto. */
.institucional-contacto-hero__panal {
	position: absolute;
	top: -15%;
	right: -10%;
	width: 55%;
	max-width: 460px;
	z-index: 0;
	pointer-events: none;
	mask-image: radial-gradient(circle at top right, black 20%, transparent 70%);
	-webkit-mask-image: radial-gradient(circle at top right, black 20%, transparent 70%);
}

.institucional-contacto-hero__panal-svg {
	width: 100%;
	height: auto;
	display: block;
}

.institucional-contacto-hero__panal-svg g {
	stroke: var(--color-crema);
	stroke-opacity: 0.22;
}

.institucional-contacto-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 56px;
	/* Fix 2026-10-27: era align-items:center. El formulario es mucho más
	 * alto que el texto por el bloque legal de privacidad, así que
	 * centrar verticalmente empujaba el H1/intro muy por debajo del
	 * primer viewport (ver nota en page-institucional.php, donde además
	 * se quitó data-aparecer de esta columna). "start" alinea ambas
	 * columnas arriba, como cualquier hero normal del sitio. */
	align-items: start;
}

.institucional-contacto-hero__acento {
	display: block;
	width: 56px;
	height: 4px;
	background-color: var(--color-ambar);
	border-radius: 2px;
	margin-bottom: var(--espacio-2);
}

.institucional-contacto-hero__texto h1 {
	color: var(--color-blanco);
	/* Ajuste 2026-10-23 (pedido explícito, consistencia con el resto del
	 * sitio: "revisa que el lenguaje visual... esté alineado con el nivel
	 * premium del resto de páginas" — el mismo defecto de título angosto
	 * se corrigió en Servicios esta misma ronda): 20ch partía el título
	 * real ("Hablemos de lo que tu marca necesita") en 2-3 renglones muy
	 * cortos. Sube a 15ch→32ch para que respire sin perder el límite que
	 * evita que corra demasiado ancho en pantallas grandes.
	 *
	 * Refinamiento 2026-10-24 (pedido explícito: "aumenta el H1 aprox.
	 * 15-20% en desktop... interlineado compacto"): el clamp sitewide
	 * (--tamano-titulo-principal, variables.css) resuelve a ~54.4px en
	 * 1440px de ancho — NO se toca esa variable global (afectaría todos
	 * los H1 del sitio); en su lugar este clamp propio, acotado a esta
	 * página, escala la misma curva ×~1.17 (54.4px → ~63.5px en 1440px,
	 * la misma proporción en cualquier otro ancho) y cierra el
	 * line-height de 1.15 (heredado) a 1.08 para que el título más grande
	 * no se sienta suelto.
	 *
	 * Revertido 2026-10-25 (pedido explícito: "el título debe ir
	 * COMPLETAMENTE en blanco... mantén solo el acento/línea ámbar
	 * superior"): la ronda 2026-10-24 había coloreado la frase "tu marca
	 * necesita" en ámbar vía un <span> en page-institucional.php — ese
	 * <span> ya no se imprime, así que todo el H1 vuelve a heredar este
	 * mismo color blanco de siempre, sin excepción.
	 *
	 * Ajuste 2026-10-26 (pedido explícito: "se ve amontonado, textos
	 * demasiado grandes... reduce ligeramente su tamaño actual... dos
	 * líneas bien proporcionadas, sin invadir la columna del formulario"):
	 * el clamp de la ronda anterior resolvía ~63.5px en 1440px — baja a
	 * ~56px (+3% sobre los ~54.4px del clamp sitewide original, en vez del
	 * +17% de antes). max-width baja de 32ch a 26ch para que el título
	 * real ("Hablemos de lo que tu marca necesita") cierre en 2 líneas
	 * limpias en vez de 2-3 irregulares, y se agrega margin-bottom propio
	 * (antes solo heredaba 16px de la regla global h1) para separarlo
	 * mejor del subtítulo/intro de abajo. */
	font-size: clamp(2.15rem, 1.8rem + 1.9vw, 4rem);
	line-height: 1.12;
	max-width: 26ch;
	margin-bottom: var(--espacio-3);
}

.institucional-contacto-hero__subtitulo {
	font-size: var(--tamano-subtitulo);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.7);
	max-width: 48ch;
	margin-top: var(--espacio-2);
	margin-bottom: 0;
}

/* Corrección 2026-11-01 (pedido explícito: "mejor ritmo entre título,
 * subtítulo y texto de apoyo, que no se vea amontonado"): más separación
 * respecto al subtítulo de arriba y ancho de línea controlado, mismo
 * tono/tamaño que antes.
 *
 * Ajuste 2026-10-24 (pedido explícito: "mantén 'Cuéntanos sobre tu
 * proyecto' como subtítulo destacado, con mejor relación respecto al
 * H1"): 56px de margen quedaba un poco suelto frente al H1 ahora más
 * grande — se cierra a 40px y el tamaño sube un poco para sostener la
 * nueva escala del H1 sin competir con él.
 *
 * Ajuste 2026-10-26 (pedido explícito: "aumenta el espacio entre H1,
 * introducción y bloques posteriores... evita valores arbitrarios"): el
 * 40px fijo pasa a --espacio-4 (48px, token existente) — más aire, sin
 * inventar un valor nuevo. */
.institucional-contacto-hero__texto h2 {
	font-size: clamp(1.4375rem, 1.1rem + 1.2vw, 1.875rem);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--color-ambar);
	margin-top: var(--espacio-4);
	margin-bottom: var(--espacio-2);
	max-width: 24ch;
}

/* Separación generosa entre párrafos (pedido explícito: "ancho de
 * lectura controlado, interlineado cómodo y separación generosa") — el
 * margin-bottom heredado de variables.css (p{margin:0 0 16px}) se queda
 * corto entre los 2 párrafos reales de "Cuéntanos sobre tu proyecto". */
.institucional-contacto-hero__texto p {
	color: rgba(255, 255, 255, 0.82);
	max-width: 52ch;
	line-height: 1.65;
	margin-bottom: var(--espacio-3);
}

.institucional-contacto-hero__texto p:last-child {
	margin-bottom: 0;
}

/* Revertido 2026-10-26 (pedido explícito: "elimina el exceso de ámbar...
 * devuelve 'marketing digital', 'influencer marketing' y 'no sabes qué
 * servicio te conviene' al color blanco/gris claro y peso regular dentro
 * del texto corrido... conserva el ámbar únicamente en acentos
 * estratégicos, no en frases completas de los párrafos"). Los <strong>
 * reales se quedan en el HTML (contenido/semántica intactos, ver post 64)
 * pero visualmente ya no destacan en ámbar ni en negrita — se leen
 * exactamente como el resto del párrafo. El span
 * ".institucional-contacto-hero__concepto" de la ronda anterior se quitó
 * del contenido real (post 64) junto con esta regla, que ya no tiene
 * ningún uso. */
.institucional-contacto-hero__texto p strong {
	color: inherit;
	font-weight: 400;
}

.institucional-contacto-hero__texto a {
	color: var(--color-ambar);
}

/* Corrección 2026-11-01 (pedido explícito: "reduce visualmente el
 * tamaño del formulario... más premium: mejor proporción, mejor padding,
 * bordes más limpios, sombras muy sutiles"): de un borde superior grueso
 * (4px) + sombra pesada (0 20px 48px) a un acabado más discreto — borde
 * fino completo + una línea ámbar inset a la izquierda (mismo recurso ya
 * usado en .home-mosaico__texto, consistente con Servicios/Influencers/
 * Nosotros), sombra mucho más suave, padding reducido. */
/* Refinamiento 2026-10-24 (pedido explícito: "superficie blanco cálido de
 * alta calidad, con... borde casi imperceptible, sombra suave y una línea
 * ámbar editorial discreta"): borde aún más tenue (0.08→0.06) y sombra
 * más suave (0.08→0.06 en la capa larga) — la crema ya es el "blanco
 * cálido" pedido, el radio ya estaba bien resuelto de la ronda anterior.
 *
 * Simplificación 2026-10-26 (pedido explícito: "simplifica su diseño...
 * mejora la proporción de la tarjeta y el espaciado interior... conserva
 * una sola línea vertical ámbar muy fina y discreta"): más padding
 * (--espacio-3 → --espacio-4, tokens existentes) para que el contenido
 * respire, sombra aún más suave, y la línea pasa de 3px/0.55 a 2px/0.4 —
 * "muy fina" de verdad, no solo discreta. */
/* Refinamiento 2026-10-27 (pedido explícito: "elimina la línea vertical
 * ámbar larga del lado izquierdo y cualquier adorno redundante... esquinas
 * moderadas (10-12px)"): se quita el ::before por completo y el padding
 * vuelve a ser simétrico (ya no hace falta reservar el lado izquierdo
 * para la línea). 12px de radio — ni la esquina de tarjeta del sitio
 * (16px) ni la de campo (8px) caían en el rango pedido, único valor
 * literal de esta ronda. */
/* Fondo blanco puro (pedido explícito 2026-10-28: "en vez de arena,
 * blanco") — antes crema, ahora --color-blanco; el borde/sombra ya eran
 * casi imperceptibles así que el contraste con el carbón del hero sigue
 * siendo igual de sutil.
 *
 * justify-self:end (pedido explícito, mismo día: "ajústalo un poco más a
 * lado derecho") — la tarjeta (max-width 420px) es más angosta que su
 * columna de grid (0.8fr) y por default se queda pegada al borde
 * izquierdo de esa columna; esto la recorre hasta el borde derecho. Se
 * desactiva en el breakpoint de abajo (≤860px, grid a 1 columna) para que
 * no quede descentrada al apilarse en tablet/móvil. */
.institucional-contacto-hero__formulario {
	position: relative;
	justify-self: end;
	background-color: var(--color-blanco);
	border-radius: 12px;
	/* Bajado de --espacio-4 a --espacio-3 (fix 2026-10-27, pedido explícito
	 * "el formulario se extiende mucho hacia abajo"): el padding por sí
	 * solo sumaba 96px verticales a una tarjeta que ya acumula campos +
	 * aviso de privacidad + checkbox de promociones + botón. */
	padding: var(--espacio-3);
	border: 1px solid rgba(20, 20, 20, 0.05);
	box-shadow: 0 1px 2px rgba(20, 20, 20, 0.02), 0 6px 16px rgba(20, 20, 20, 0.04);
	max-width: 420px;
}

/* Etiqueta reducida (antes clamp 1.75-2.25rem/800): seguía siendo el
 * elemento con más peso de la tarjeta, pero no debe competir con el H1
 * de la izquierda ni hacer que el formulario domine la composición. */
/* Refinamiento 2026-10-25 (pedido explícito: "mejora SOLO el título del
 * formulario... más elegante y premium, editorial y sofisticado, sin
 * exagerar"): el componente base (encabezado-seccion__etiqueta,
 * ilustrado.css) es una etiqueta de categoría — mayúsculas, trazo grueso,
 * letter-spacing amplio, pensada para ir ARRIBA de un título grande, no
 * para ser ella misma el título. Aquí es la única pieza de texto que
 * presenta la tarjeta, así que pasa a minúscula/tipo-oración en la
 * familia de titulares (Poppins, igual que cualquier h2/h3 del sitio) en
 * vez de la mayúscula de "etiqueta de UI" — mismo peso y color de antes,
 * solo mejor tipografía y más aire debajo. No se toca nada más de la
 * tarjeta (estructura, campos, botón). */
/* Ajuste 2026-10-27 (pedido explícito: "mayor presencia editorial y
 * proporciones elegantes"): sube de 21px a 24px; margin-bottom baja
 * porque ahora separa del título a la microintroducción nueva, no
 * directo a los campos (ver __formulario-intro debajo). */
.institucional-contacto-hero__formulario-etiqueta {
	display: block;
	margin-bottom: var(--espacio-1);
	font-family: var(--font-titulos);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
	line-height: 1.25;
	color: var(--color-carbon);
}

/* Microintroducción (pedido explícito 2026-10-27: "Cuéntanos qué tienes
 * en mente.") — ver page-institucional.php, justo debajo del título.
 * Separa encabezado de campos con espacio (margin-bottom generoso), no
 * con una línea. */
.institucional-contacto-hero__formulario-intro {
	/* Bajado de --espacio-4 a --espacio-2 (fix 2026-10-27, misma razón que
	 * el padding de la tarjeta arriba). */
	margin: 0 0 var(--espacio-2);
	font-size: 0.9375rem;
	color: var(--color-gris-calido);
}

/* Vuelve a --espacio-2 (fix 2026-10-27: el --espacio-3 de la ronda
 * anterior, sumado a los demás ajustes de esta misma tarjeta, hacía que
 * el formulario se extendiera demasiado; --espacio-2 sigue siendo más
 * aire que el default global, solo menos que antes). */
.institucional-contacto-hero__formulario .formulario-contacto__form {
	max-width: none;
	gap: var(--espacio-2);
}

/* Jerarquía/espaciado de campos más premium solo dentro de la tarjeta de
 * Contacto (no toca .campo global, que usan otros formularios del sitio
 * si llegara a haber). */
.institucional-contacto-hero__formulario .campo label {
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	color: var(--color-carbon);
	margin-bottom: var(--espacio-1);
}

/* Refinamiento 2026-10-27 (pedido explícito: "sustituye los rectángulos
 * actuales por campos minimalistas: fondo transparente, sin bordes
 * laterales, línea inferior gris tenue y transición ámbar al recibir
 * foco"): de caja bordeada completa a subrayado — sin fondo propio (se
 * ve el crema de la tarjeta), sin radio, un solo borde (abajo), grosor
 * que sube de 1 a 2px en focus para que la transición se note sin
 * desplazar el layout (el padding-bottom compensa 1px para que el campo
 * no "salte" de alto al ganar el px extra del borde). Padding horizontal
 * mínimo (no hace falta inset lateral sin bordes a los costados) — el
 * área interactiva completa del campo se conserva (mismo padding
 * vertical que antes, el tap target no se reduce). */
.institucional-contacto-hero__formulario .campo input,
.institucional-contacto-hero__formulario .campo textarea {
	border: none;
	border-bottom: 1px solid rgba(20, 20, 20, 0.16);
	border-radius: 0;
	padding: 10px 2px 9px;
	background-color: transparent;
	transition: border-color 0.2s ease, border-bottom-width 0.2s ease;
}

.institucional-contacto-hero__formulario .campo textarea {
	/* Bajado de 104px a 80px (fix 2026-10-27, misma razón de arriba) —
	 * sigue mostrando ~3 líneas antes de necesitar scroll/resize. */
	min-height: 80px;
	resize: vertical;
}

/* Autofill de navegador (pedido explícito "respeta... autofill"): sin
 * esto, Chrome/Safari imprimen un fondo sólido propio (blanco o amarillo)
 * que rompería el fondo transparente — se iguala al crema de la tarjeta
 * en vez de dejar el color por default del navegador. */
.institucional-contacto-hero__formulario .campo input:-webkit-autofill {
	-webkit-text-fill-color: var(--color-carbon);
	-webkit-box-shadow: 0 0 0 1000px var(--color-blanco) inset;
	transition: background-color 9999s ease-in-out 0s;
}

@media (hover: hover) {
	.institucional-contacto-hero__formulario .campo input:hover,
	.institucional-contacto-hero__formulario .campo textarea:hover {
		border-bottom-color: rgba(20, 20, 20, 0.3);
	}
}

.institucional-contacto-hero__formulario .campo input:focus,
.institucional-contacto-hero__formulario .campo textarea:focus {
	border-bottom-width: 2px;
	border-bottom-color: var(--color-ambar);
	padding-bottom: 8px;
}

/* Botón: "ligeramente redondeado" en vez de la pastilla completa
 * (--radio-pastilla, sitewide) — mismo radio de 12px que la tarjeta, para
 * que no compita con ella. Flecha discreta (mismo criterio que
 * .nosotros-consultores__flecha: glifo real en un span aria-hidden, ver
 * formulario-contacto.php) y hover sin el translateY sitewide de .btn:hover
 * (pedido explícito "sin rebotes ni movimientos exagerados") — solo un
 * leve oscurecimiento del fondo. */
.institucional-contacto-hero__formulario .btn--primario {
	width: 100%;
	justify-content: center;
	border-radius: 12px;
	padding: 14px 24px;
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
	margin-top: var(--espacio-2);
	transition: background-color 0.2s ease;
}

.institucional-contacto-hero__formulario .btn--primario:hover {
	transform: none;
	background-color: color-mix(in srgb, var(--color-ambar) 88%, var(--color-carbon));
}

.institucional-contacto-hero__formulario .btn--primario:focus-visible {
	outline: 2px solid var(--color-carbon);
	outline-offset: 2px;
}

.institucional-contacto-hero__formulario .btn--primario__flecha {
	transition: transform 0.2s ease;
}

@media (hover: hover) {
	.institucional-contacto-hero__formulario .btn--primario:hover .btn--primario__flecha {
		transform: translateX(3px);
	}
}

/* prefers-reduced-motion (pedido explícito) — las transiciones de arriba
 * ya son sutiles (200ms, solo border-color/box-shadow/transform, nunca
 * sobre texto), pero se desactivan igual bajo .sin-animacion (mecanismo
 * sitewide, ver assets/js/main.js) para cumplir la regla al pie de la
 * letra, no solo "lo suficientemente sutil". */
.sin-animacion .institucional-contacto-hero__formulario .campo input,
.sin-animacion .institucional-contacto-hero__formulario .campo textarea,
.sin-animacion .institucional-contacto-hero__formulario .btn--primario,
.sin-animacion .institucional-contacto-hero__formulario .btn--primario__flecha,
.sin-animacion .institucional-contacto-capacidades__item,
.sin-animacion .institucional-contacto-enlaces__tarjeta {
	transition: none;
}

/* --- 2. "Cómo podemos ayudarte": 2 columnas editoriales, sin iconos ---
 * Rediseño 2026-11-01 (pedido explícito: "elimina los iconos actuales...
 * elimina la lógica visual de tarjetas con ícono", tomando como
 * referencia "Dos áreas que se complementan" de Inicio —
 * .home-servicios__paneles en front-page.php): de 4 tarjetas con
 * ilustración a 2 columnas (Marketing digital / Influencer marketing),
 * cada una con una lista de capacidades (nombre + 1 línea), separadas
 * por un divisor fino — sin fondo de tarjeta, sin sombra, sin ícono. */

/* --- Agenda tu diagnóstico: widget de Google Calendar --------------------
 * Fix 2026-10-27, pedido explícito. Empezó como su propia franja entre el
 * hero y "Cómo podemos ayudarte".
 *
 * Cuarta vuelta (pedido explícito: "sigue sintiéndose muy grande", "el
 * estilo de Google se ve feo", "preferiría otro formato"): las tres
 * vueltas anteriores vivían todas dentro de incrustar el iframe completo
 * y siempre visible en la franja — compactarlo en alto (560/640px) lo
 * cortaba y obligaba a un scroll atrapado dentro de la cajita;
 * agrandarlo lo suficiente para no cortarlo (1550/1600px) lo volvía
 * enorme, con el encabezado propio de Google expuesto todo el tiempo sin
 * combinar con el diseño del sitio. Se reemplazó por esta tarjeta
 * compacta (ícono + duración + botón) que abre el calendario real de
 * Google en .agenda-llamada__dialogo (ver más abajo), solo mientras está
 * abierto.
 *
 * Quinta vuelta (fix 2026-10-27, pedido explícito: "pongas literal la
 * tarjeta abajo de Cuéntanos sobre tu proyecto ahi queda bien y ya no
 * abres otra seccion"): se quita la franja .institucional-contacto-agenda
 * por completo (sección, encabezado "Prefieres agendar..." y párrafo de
 * intro) — la tarjeta ahora vive directo en
 * .institucional-contacto-hero__texto (page-institucional.php), debajo
 * del bloque de texto libre del editor, ya no centrada ni con ancho
 * propio: hereda el ancho de esa columna. El botón se queda siempre en
 * su propia fila (flex-basis 100%) en vez de reservar un punto de quiebre
 * aparte — la columna del hero puede ser angosta en varios tamaños
 * intermedios, no solo por debajo de 640px. */
.agenda-llamada__tarjeta {
	position: relative;
	margin-top: var(--espacio-2);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--espacio-1) var(--espacio-2);
	background-color: var(--color-blanco);
	border-radius: 14px;
	border: 1px solid rgba(20, 20, 20, 0.06);
	/* Sexta vuelta (pedido explícito: "quiero que esté más estilizada"):
	 * línea ámbar inset a la izquierda (mismo recurso que ya usa
	 * .institucional-contacto-hero__formulario) en vez de un borde plano
	 * parejo, sombra más marcada para que la tarjeta "flote" sobre el
	 * fondo carbón del hero, y una leve elevación al pasar el cursor.
	 *
	 * Séptima vuelta (fix 2026-10-27, pedido explícito: "el cuadro sea un
	 * poco más chico" — diseño y funcionalidad ya confirmados): mismo
	 * lenguaje visual, solo más compacto — padding, ícono, tipografía y
	 * separaciones bajan un escalón en la escala de --espacio-* existente,
	 * sin inventar valores nuevos. */
	box-shadow: inset 3px 0 0 var(--color-ambar), 0 2px 4px rgba(20, 20, 20, 0.04), 0 12px 24px rgba(20, 20, 20, 0.12);
	padding: var(--espacio-2);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.agenda-llamada__tarjeta:hover {
	transform: translateY(-2px);
	box-shadow: inset 3px 0 0 var(--color-ambar), 0 4px 8px rgba(20, 20, 20, 0.05), 0 16px 32px rgba(20, 20, 20, 0.16);
}

.agenda-llamada__icono {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--color-ambar), #ffc23d);
	color: var(--color-carbon);
	box-shadow: 0 6px 16px rgba(242, 169, 0, 0.35);
}

.agenda-llamada__icono svg {
	width: 22px;
	height: 22px;
}

.agenda-llamada__texto {
	flex: 1 1 200px;
	min-width: 0;
}

.agenda-llamada__etiqueta {
	display: block;
	font-weight: 600;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-miel-oscura);
	margin-bottom: 1px;
}

.agenda-llamada__titulo {
	margin: 0;
	color: var(--color-carbon);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -0.01em;
}

.agenda-llamada__detalle {
	margin: 2px 0 0;
	color: var(--color-gris-calido);
	font-size: 0.875rem;
}

.agenda-llamada__boton {
	flex: 1 1 100%;
	justify-content: center;
	padding-block: 10px;
}

/* BUG REAL encontrado al mover la tarjeta dentro de
 * .institucional-contacto-hero__texto (quinta vuelta, ver arriba):
 * .institucional-contacto-hero__texto p { color: rgba(255,255,255,.82); }
 * y .institucional-contacto-hero__texto a { color: var(--color-ambar); }
 * (pensadas para el texto blanco sobre el fondo carbón del hero) tienen
 * más especificidad (clase + etiqueta) que .agenda-llamada__titulo/
 * __detalle/__boton (una sola clase) y ganaban la cascada — el título y
 * la descripción quedaban casi blancos sobre la tarjeta blanca, y el
 * botón quedaba en texto ámbar sobre fondo ámbar: todo invisible aunque
 * el texto sí estaba en el HTML. Estas reglas, calificadas con el mismo
 * padre, suben la especificidad lo justo para ganar siempre, sin
 * importar el orden en el archivo. */
.institucional-contacto-hero__texto .agenda-llamada__titulo {
	color: var(--color-carbon);
	max-width: none;
}

.institucional-contacto-hero__texto .agenda-llamada__detalle {
	color: var(--color-gris-calido);
	max-width: none;
}

.institucional-contacto-hero__texto .agenda-llamada__boton {
	color: var(--color-carbon);
}

/* --- Diálogo con el calendario real de Google -------------------------
 * <dialog> nativo (template-parts/components/agenda-llamada.php): se abre
 * con showModal() desde main.js, centrado solo y con fondo/foco propios
 * del navegador — no hay que reconstruir nada de eso a mano. Alto
 * acotado al viewport (no al contenido real de Google, que puede ser
 * ~1550px): dentro del modal, "hacer scroll para ver más horarios" es un
 * patrón esperado de cualquier reserva/lightbox, muy distinto a quedar
 * atrapado adentro de una cajita chica en medio de la página. */
.agenda-llamada__dialogo {
	position: relative;
	width: min(640px, calc(100vw - 32px));
	/* BUG REAL (verificado en el navegador): con solo 64px reservados
	 * (32px arriba/abajo), en viewports bajos (~600px, como una ventana
	 * de escritorio chica) el <dialog> quedaba tan pegado al borde
	 * superior que el botón de cerrar —que vive 44px por ENCIMA del
	 * recuadro, ver .agenda-llamada__cerrar— se cortaba fuera de
	 * pantalla. 112px deja ~56px libres arriba, suficientes para el
	 * botón completo en la enorme mayoría de tamaños reales; como respaldo
	 * siempre queda cerrar con Escape o con clic en el fondo oscuro. */
	height: min(720px, calc(100vh - 112px));
	padding: 0;
	border: 0;
	border-radius: 16px;
	/* Visible, no hidden: el botón de cerrar vive FUERA del recuadro
	 * (ver .agenda-llamada__cerrar) para no taparle su propio encabezado
	 * a Google ("Google Calendar", el avatar) con nuestro botón encima —
	 * el radio/recorte de esquinas del iframe lo da
	 * .agenda-llamada__cuerpo, no el <dialog>. */
	overflow: visible;
	box-shadow: 0 20px 48px rgba(20, 20, 20, 0.25);
}

.agenda-llamada__dialogo::backdrop {
	background-color: rgba(20, 20, 20, 0.55);
}

.agenda-llamada__cerrar {
	position: absolute;
	top: -44px;
	right: 0;
	z-index: 1;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background-color: var(--color-carbon);
	color: var(--color-blanco);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

@media (max-width: 640px) {
	.agenda-llamada__cerrar {
		/* En móvil el diálogo ya casi toca el borde superior del viewport
		 * (100vh - 64px) — no hay 44px libres arriba para el botón
		 * flotante, así que aquí sí vuelve a vivir adentro, sobre el
		 * propio encabezado de Google (mismo criterio que antes). */
		top: var(--espacio-1);
		right: var(--espacio-1);
		background-color: var(--color-blanco);
		color: var(--color-carbon);
		border-color: rgba(20, 20, 20, 0.1);
	}
}

.agenda-llamada__cuerpo {
	width: 100%;
	height: 100%;
	border-radius: 16px;
	overflow: hidden;
}

.agenda-llamada__dialogo .agenda-llamada__iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.institucional-contacto-ayuda-seccion {
	background-color: var(--color-blanco);
	padding-block: var(--espacio-4);
}

.institucional-contacto-capacidades__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--espacio-6);
	margin-top: var(--espacio-4);
}

/* Prioridad visual 2026-10-26 (pedido explícito: "'Marketing digital' e
 * 'Influencer marketing' claramente más grandes, semibold y de color
 * ámbar... que se vean como dos áreas importantes de la marca"): antes
 * carbón/700 — mismo componente, mismo border-bottom ya aprobado, solo
 * sube de tamaño y pasa a ámbar/600 (semibold real, no bold). */
.institucional-contacto-capacidades__titulo {
	font-family: var(--font-titulos);
	font-weight: 600;
	font-size: 1.625rem;
	color: var(--color-ambar);
	margin-bottom: var(--espacio-2);
	padding-bottom: var(--espacio-2);
	border-bottom: 2px solid var(--color-ambar);
}

.institucional-contacto-capacidades__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.institucional-contacto-capacidades__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-block: var(--espacio-2);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.institucional-contacto-capacidades__item + .institucional-contacto-capacidades__item {
	border-top: 1px solid rgba(20, 20, 20, 0.1);
}

@media (hover: hover) {
	.institucional-contacto-capacidades__item:hover {
		background-color: rgba(242, 169, 0, 0.06);
		transform: translateX(4px);
	}
}

.institucional-contacto-capacidades__nombre {
	font-family: var(--font-titulos);
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--color-carbon);
}

.institucional-contacto-capacidades__descripcion {
	color: var(--color-gris-calido);
	font-size: 0.95rem;
}

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


/* --- 3. "Qué ocurre después": franja ámbar, texto negro --- */

.institucional-contacto-siguiente {
	background-color: var(--color-ambar);
	padding-block: var(--espacio-4);
}

.institucional-contacto-siguiente h2,
.institucional-contacto-siguiente p {
	color: var(--color-carbon);
}

/* encabezado-seccion__etiqueta usa miel-oscura por default — bajo
 * contraste sobre el fondo ámbar de esta franja, se fuerza a carbón solo
 * aquí (no afecta la etiqueta en ninguna otra sección del sitio). */
.institucional-contacto-siguiente .encabezado-seccion__etiqueta {
	color: var(--color-carbon);
}

/* 4 barras alternadas blanca/negra/blanca/negra (pedido explícito, ajuste
 * 2026-10-19) — rayas.svg ya trae exactamente 4 rects, se recolorean las
 * 4 en vez de ocultar ninguna. Mismo archivo de marca, sin tocarlo ni
 * afectar su uso en ninguna otra página (presentation-attribute, no
 * estilo inline). */
.institucional-contacto-siguiente .grafica-rayas rect:nth-of-type(1),
.institucional-contacto-siguiente .grafica-rayas rect:nth-of-type(3) {
	fill: var(--color-blanco);
}

.institucional-contacto-siguiente .grafica-rayas rect:nth-of-type(2),
.institucional-contacto-siguiente .grafica-rayas rect:nth-of-type(4) {
	fill: var(--color-carbon);
}

/* Distribución horizontal: título a la izquierda, párrafo a la derecha
 * (editorial, 2 columnas) en vez de todo apilado con la mitad derecha de
 * la franja vacía — mismo patrón de 2 columnas que ya usa el hero de esta
 * página arriba. */
.institucional-contacto-siguiente .contenedor {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--espacio-4);
	align-items: center;
}

.institucional-contacto-siguiente .encabezado-seccion {
	margin-bottom: 0;
}

.institucional-contacto-siguiente p {
	max-width: none;
}

/* Tarjeta blanca del párrafo (pedido explícito, ajuste 2026-10-19) — mismo
 * componente .tarjeta de marca (esquina 16px), solo más padding y una
 * sombra suave para que se sienta parte del sistema, no un cuadro suelto. */
.institucional-contacto-siguiente__tarjeta {
	padding: var(--espacio-4);
	box-shadow: 0 8px 24px rgba(20, 20, 20, 0.08);
}

.institucional-contacto-siguiente__tarjeta p {
	font-size: 1.0625rem;
	line-height: 1.7;
}

.institucional-contacto-siguiente__tarjeta p:last-child {
	margin-bottom: 0;
}

.institucional-contacto-siguiente__tarjeta strong {
	font-weight: 700;
}

/* --- 4. Enlaces ("Explora antes de escribirnos") y FAQ: franja crema --- */

.institucional-contacto-enlaces {
	background-color: var(--color-crema);
	padding-block: var(--espacio-4);
}

.institucional-contacto-enlaces p {
	max-width: 760px;
}

/* 2 tarjetas de recursos alternadas (pedido explícito, ajuste 2026-10-19):
 * cada <a> del párrafo original se vuelve su propia tarjeta clicable,
 * blanca y negra alternadas, mismo href/texto de siempre. */
.institucional-contacto-enlaces__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--espacio-3);
	margin-top: var(--espacio-3);
}

.institucional-contacto-enlaces__tarjeta {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--espacio-4);
	font-family: var(--font-titulos);
	font-weight: 600;
	font-size: 1.125rem;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.institucional-contacto-enlaces__tarjeta:hover {
	transform: translateY(var(--tarjeta-hover-elevacion));
	box-shadow: var(--tarjeta-hover-sombra);
}

.institucional-contacto-enlaces__tarjeta--clara {
	background-color: var(--color-blanco);
	color: var(--color-carbon);
}

.institucional-contacto-enlaces__tarjeta--oscura {
	background-color: var(--color-carbon);
	color: var(--color-blanco);
}

.landing-faq.institucional-contacto-faq {
	background-color: var(--color-crema);
	padding-block: var(--espacio-4);
}

@media (max-width: 860px) {
	.institucional-contacto-hero__grid {
		grid-template-columns: 1fr;
	}

	.institucional-contacto-hero__formulario {
		justify-self: stretch;
	}

	.institucional-contacto-siguiente .contenedor {
		grid-template-columns: 1fr;
		gap: var(--espacio-2);
	}
}

@media (max-width: 560px) {
	.institucional-contacto-enlaces__grid {
		grid-template-columns: 1fr;
	}
}

/* --- Landing por ciudad --------------------------------------------------- */

.landing-ciudad__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--espacio-3);
	align-items: start;
}

.landing-ciudad__direccion {
	font-weight: 600;
}

.landing-ciudad__mapa iframe {
	width: 100%;
	height: 280px;
	border: none;
	border-radius: var(--radio-tarjeta);
}

@media (max-width: 860px) {
	.landing-ciudad__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Inicio (front-page.php) — 7 secciones de fondo sólido alternado
   (carbón/crema/ámbar), ninguna con degradado. Cada selector empieza con
   .home-* y vive solo aquí: no toca ningún otro template.
   ========================================================================== */

/* --- 1. Hero: fondo carbón, H1/párrafo/CTA a todo el ancho del
   contenedor, panal de fondo a todo el hero con desvanecido radial
   (rediseño 2026-10-20, 2ª corrección — antes: columna angosta con el
   panal en una caja aparte que se veía como "un rectángulo pegado") ---- */

.home-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--color-carbon);
	padding-block: var(--espacio-6) var(--espacio-4);
}

/* Contenedor algo más ancho que el resto del sitio (pedido explícito:
 * "utiliza un contenedor ancho, con márgenes laterales equilibrados"),
 * compartido por el texto y la foto para que ambos alineen el mismo
 * borde izquierdo/derecho. */
.home-hero__ancho {
	max-width: 1320px;
}

/* Rediseño 2026-10-20 (9ª corrección): columna de texto un poco más
 * ancha (antes 1.2fr) para equilibrar con la foto, que ahora se reduce
 * ligeramente (ver .home-hero__foto) — entre ambos cambios el bloque de
 * texto deja de sentirse corto frente a la imagen. */
.home-hero__grid {
	display: grid;
	grid-template-columns: 1.3fr 0.9fr;
	gap: var(--espacio-4);
	align-items: center;
}

.home-hero__texto {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

.home-hero__acento {
	display: block;
	width: 56px;
	height: 4px;
	background-color: var(--color-ambar);
	border-radius: 2px;
	margin-bottom: var(--espacio-2);
}

/* Tamaño propio (no el --tamano-titulo-principal global de 4rem),
 * recalibrado 2026-10-20 (6ª corrección) para la columna de texto más
 * angosta del nuevo layout de 2 columnas — sin desbordar ni verse
 * desproporcionado. Mismas palabras exactas, solo cambia cómo se
 * distribuye. */
.home-hero__texto h1 {
	color: var(--color-blanco);
	font-size: clamp(2.125rem, 1.2rem + 2.6vw, 3.375rem);
	line-height: 1.16;
}

/* "Marketing digital + influencers" en ámbar, el resto en blanco (pedido
 * explícito) — mismas palabras exactas del H1, solo el énfasis de color. */
.home-hero__resaltado {
	color: var(--color-ambar);
}

.home-hero__texto p {
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--tamano-subtitulo);
	max-width: 60ch;
}

/* Panal de hexágonos a todo el hero (pedido explícito: inspirado en el
 * tratamiento de /contacto/) — 2 capas de máscara sobre la misma capa:
 * 1) el mosaico de panal-patron.svg (sin tocar el archivo) y 2) un
 * desvanecido radial que concentra el patrón del lado derecho y lo
 * desvanece gradualmente hacia la izquierda, donde vive el texto, en vez
 * de un borde duro tipo "rectángulo pegado". mask-composite:intersect
 * (y su equivalente -webkit-mask-composite:source-in) hace que solo se
 * vea el patrón DONDE las 2 máscaras coinciden. Sin degradado de color:
 * es una máscara de opacidad sobre el mismo fondo sólido carbón de la
 * sección, nunca una transición de color entre secciones. */
.home-hero__panal {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--color-crema);
	opacity: 0.28;
	-webkit-mask-image:
		url("../img/elementos-graficos/panal-patron.svg"),
		radial-gradient(ellipse 65% 90% at 88% 45%, #000 0%, transparent 72%);
	mask-image:
		url("../img/elementos-graficos/panal-patron.svg"),
		radial-gradient(ellipse 65% 90% at 88% 45%, #000 0%, transparent 72%);
	-webkit-mask-repeat: repeat, no-repeat;
	mask-repeat: repeat, no-repeat;
	-webkit-mask-size: 76px 66px, 100% 100%;
	mask-size: 76px 66px, 100% 100%;
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
	pointer-events: none;
}

@media (max-width: 860px) {
	/* Sin espacio libre en el layout apilado de móvil — se oculta en vez
	 * de arriesgar que compita con el texto. */
	.home-hero__panal {
		display: none;
	}
}

/* Fotografía única del hero — rediseño 2026-10-20 (8ª corrección): el
 * mosaico de 3 fotos se reemplazó por una sola imagen (la abeja volando
 * de frente) en su propia columna del grid de 2 columnas del hero (ver
 * .home-hero__grid). Altura moderada vía aspect-ratio (no una imagen
 * gigante): el encuadre real (948×683) es casi 4/3, así que se mantiene
 * esa proporción sin recortar a la abeja. Sin ningún SVG decorativo
 * encima — las líneas de trayectoria se quitaron por completo. */
/* Rediseño 2026-10-20 (9ª corrección): se reduce ligeramente (antes
 * llenaba toda la columna) — max-width + alineada a la derecha, para que
 * no compita en peso visual con el texto ya más ancho. */
.home-hero__foto {
	position: relative;
	aspect-ratio: 4 / 3;
	max-width: 92%;
	margin-left: auto;
	border-radius: var(--radio-campo);
	overflow: hidden;
	background-color: #1f1f1f;
}

.home-hero__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 860px) {
	/* El grid de 2 columnas del hero pasa a 1 sola — texto arriba,
	 * foto abajo, ambos a todo el ancho. */
	.home-hero__grid {
		grid-template-columns: 1fr;
	}

	.home-hero__foto {
		max-width: 420px;
		margin-inline: auto;
	}
}

/* --- 2. Qué hacemos: fondo crema, 2 tarjetas alineadas, misma altura
   (corrección 2026-10-20 — antes: 2ª tarjeta desalineada más abajo) ----- */

.home-que-hacemos {
	background-color: var(--color-crema);
	padding-block: var(--espacio-6);
}

.home-que-hacemos__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--espacio-4);
	align-items: stretch;
	margin-top: var(--espacio-4);
}

/* Tarjeta completa seleccionable (como en /contacto/) — toda es un <a>,
 * flex-column para que el panel de texto pueda estirarse con flex:1 y
 * las 2 tarjetas terminen exactamente a la misma altura aunque un texto
 * ocupe más líneas que el otro. Hover con los mismos tokens
 * reutilizables de elevación/sombra que ya usan las tarjetas de
 * Contacto (ver --tarjeta-hover-elevacion/--tarjeta-hover-sombra en
 * variables.css) — "sombra suave, elevación ligera, transición
 * elegante", pedido explícito. */
.home-que-hacemos__tarjeta {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	border-radius: var(--radio-tarjeta);
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}

.home-que-hacemos__tarjeta:hover {
	transform: translateY(var(--tarjeta-hover-elevacion));
	box-shadow: var(--tarjeta-hover-sombra);
}

/* Aspect-ratio igual al encuadre real de marketing-digital.webp /
 * influencers-ugc.webp (1536×864) — antes 4/3 como marcador de espacio,
 * ahora el recorte real entregado. */
.home-que-hacemos__foto {
	aspect-ratio: 1536 / 864;
	border-radius: var(--radio-tarjeta);
	overflow: hidden;
	background-color: var(--color-carbon);
	flex: none;
}

.home-que-hacemos__foto picture {
	display: block;
	width: 100%;
	height: 100%;
}

.home-que-hacemos__foto-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(0.15) saturate(0.85);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover: acercamiento mínimo + flecha ámbar (pedido explícito) */
.home-que-hacemos__tarjeta:hover .home-que-hacemos__foto-img {
	transform: scale(1.04);
}

/* Variante móvil entregada (*-mobile.webp, 800×800) es un recorte
 * cuadrado del mismo encuadre — mismo punto de quiebre (760px) en el que
 * el grid pasa a 1 columna y el <picture> del markup cambia de <source>. */
@media (max-width: 760px) {
	.home-que-hacemos__foto {
		aspect-ratio: 1 / 1;
	}
}

.home-que-hacemos__panel {
	flex: 1;
	background-color: var(--color-blanco);
	border-radius: var(--radio-tarjeta);
	padding: var(--espacio-3) var(--espacio-4);
	margin-top: var(--espacio-3);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--espacio-2);
}

.home-que-hacemos__panel h3 {
	margin-bottom: 4px;
}

.home-que-hacemos__panel p {
	margin-bottom: 0;
	color: var(--color-gris-calido);
	font-size: 0.9375rem;
}

.home-que-hacemos__flecha {
	flex: none;
	color: var(--color-ambar);
	font-size: 1.5rem;
	line-height: 1;
	transition: transform 0.2s ease;
}

.home-que-hacemos__tarjeta:hover .home-que-hacemos__flecha {
	transform: translateX(4px);
}

@media (max-width: 760px) {
	.home-que-hacemos__grid {
		grid-template-columns: 1fr;
	}

	.home-que-hacemos__panel {
		padding: var(--espacio-3);
	}
}

/* --- 3. Nuestros servicios (Home): fondo carbón, 2 paneles grandes y
   asimétricos con identidad hexagonal. Restaurada 2026-10-21: el mosaico
   de 4 módulos con giro 3D vivía aquí por error de alcance, ahora es
   exclusivo de la página /servicios/ (ver .home-mosaico más abajo). --- */

.home-servicios {
	background-color: var(--color-carbon);
	padding-block: var(--espacio-6);
}

.home-servicios__encabezado .encabezado-seccion__titulo {
	color: var(--color-blanco);
	font-size: clamp(1.875rem, 1.5rem + 2vw, 2.625rem);
}

.home-servicios__encabezado .encabezado-seccion__etiqueta {
	color: var(--color-ambar);
}

.home-servicios__intro-grid {
	display: grid;
	/* Ajuste 2026-10-23 (pedido explícito: "más ancho si hace falta para
	 * que el cuadro reduzca su altura visual"): de 0.85fr/1.15fr a
	 * 0.75fr/1.25fr — más ancho útil para el cuadro, menos saltos de
	 * línea, menos altura. */
	grid-template-columns: 0.75fr 1.25fr;
	gap: 64px;
	align-items: center;
}

/* Color/tamaño propios ya no aplican aquí (2026-10-23): el texto pasó a
 * vivir dentro de .cuadro-editorial--sobre-oscuro (ver front-page.php),
 * que trae su propio color/tipografía/padding — esta clase ahora solo
 * aporta el margen entre párrafos dentro de la tarjeta. */
.home-servicios__intro p {
	margin-bottom: var(--espacio-3);
}

.home-servicios__intro p:last-child {
	margin-bottom: 0;
}

@media (max-width: 760px) {
	.home-servicios__intro-grid {
		grid-template-columns: 1fr;
		gap: var(--espacio-2);
	}
}

.home-servicios__paneles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--espacio-4);
	margin-top: 64px;
	/* Ajuste 2026-10-23 (pedido explícito: "quiero que ambos cuadros
	 * tengan el mismo largo/misma proporción visual"): de align-items:
	 * start a stretch — ambos paneles ahora toman el alto de la fila
	 * (el más alto de los dos), en vez de cada uno su alto natural. */
	align-items: stretch;
}

.home-servicios__panel {
	position: relative;
	--color-gris-calido: #3A362F;
	/* Ajuste 2026-10-23 (pedido explícito: "los contenedores principales
	 * deben ir en blanco, no en arena"): de crema a blanco. */
	background-color: var(--color-blanco);
	border-radius: var(--radio-tarjeta);
	padding: var(--espacio-4);
	box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 10px 28px rgba(20, 20, 20, 0.05);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-servicios__panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background-color: var(--color-ambar);
}

.home-servicios__panel:hover {
	box-shadow: var(--tarjeta-hover-sombra);
	transform: translateY(-4px);
}

.home-servicios__panel-titulo {
	font-size: 2rem;
	font-weight: 700;
	/* Ajuste 2026-10-23 (pedido explícito: "los títulos... deben ir en
	 * ámbar"): antes heredaba el carbón por defecto. */
	color: var(--color-ambar);
	margin-bottom: var(--espacio-2);
	padding-bottom: var(--espacio-2);
	/* Ajuste 2026-10-23 (pedido explícito: "mejora el diseño de los
	 * textos para que se vean más llamativos y mejor jerarquizados"):
	 * separador fino bajo el título, para que el título se lea como
	 * encabezado de su propio bloque y no como el primer renglón más de
	 * la lista. */
	border-bottom: 1px solid rgba(20, 20, 20, 0.08);
}

.home-servicios__panel-intro {
	color: var(--color-gris-calido);
	font-size: 1.125rem;
	line-height: 1.55;
	max-width: 46ch;
	margin-bottom: var(--espacio-4);
}

.home-servicios__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--espacio-4);
}

.home-servicios__lista-enlace {
	display: block;
	padding: var(--espacio-2) 0 var(--espacio-2) var(--espacio-2);
	border-left: 3px solid rgba(242, 169, 0, 0.35);
	text-decoration: none;
	color: inherit;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

a.home-servicios__lista-enlace:hover {
	background-color: rgba(242, 169, 0, 0.08);
	border-left-color: var(--color-ambar);
	transform: translateX(4px);
}

.home-servicios__lista-enlace--sin-destino {
	border-left-color: rgba(20, 20, 20, 0.14);
	cursor: default;
}

.home-servicios__lista-titulo {
	display: block;
	font-family: var(--font-titulos);
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--color-carbon);
	margin-bottom: 2px;
}

.home-servicios__lista-descripcion {
	display: block;
	color: var(--color-gris-calido);
	font-size: 1rem;
	line-height: 1.5;
}

.home-servicios__grupo-item {
	padding: var(--espacio-2) 0 var(--espacio-2) var(--espacio-2);
	border-left: 3px solid var(--color-ambar);
}

.home-servicios__grupo-resumen {
	display: block;
	position: relative;
	padding-right: 30px;
	cursor: pointer;
	list-style: none;
}

.home-servicios__grupo-resumen::-webkit-details-marker {
	display: none;
}

.home-servicios__grupo-resumen::marker {
	content: "";
}

.home-servicios__grupo-resumen:hover .home-servicios__lista-titulo,
.home-servicios__grupo-resumen:focus-visible .home-servicios__lista-titulo {
	color: var(--color-miel-oscura);
}

.home-servicios__grupo-resumen:focus-visible {
	outline: 2px solid var(--color-ambar);
	outline-offset: 2px;
}

.home-servicios__grupo-icono {
	position: absolute;
	top: 4px;
	right: 0;
	width: 16px;
	height: 16px;
	transition: transform 220ms ease;
}

.home-servicios__grupo-icono::before,
.home-servicios__grupo-icono::after {
	content: "";
	position: absolute;
	background-color: var(--color-ambar);
}

.home-servicios__grupo-icono::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.75px;
	transform: translateY(-50%);
}

.home-servicios__grupo-icono::after {
	top: 0;
	left: 50%;
	width: 1.75px;
	height: 100%;
	transform: translateX(-50%);
}

.home-servicios__grupo-item[open] .home-servicios__grupo-icono {
	transform: rotate(45deg);
}

.home-servicios__grupo-item .home-servicios__lista-titulo,
.home-servicios__grupo-item .home-servicios__lista-descripcion {
	display: block;
}

.home-servicios__grupo-envoltura {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 220ms ease;
}

.home-servicios__grupo-item[open] .home-servicios__grupo-envoltura {
	grid-template-rows: 1fr;
}

.home-servicios__grupo-modalidades {
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--espacio-2);
	margin-top: var(--espacio-3);
}

.home-servicios__grupo-modalidad {
	display: block;
	padding: var(--espacio-2);
	border-radius: var(--radio-campo);
	background-color: rgba(20, 20, 20, 0.035);
	text-decoration: none;
	color: inherit;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

a.home-servicios__grupo-modalidad:hover {
	background-color: rgba(242, 169, 0, 0.1);
	transform: translateY(-2px);
}

.home-servicios__grupo-modalidad-titulo {
	display: block;
	font-family: var(--font-titulos);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--color-carbon);
	margin-bottom: 2px;
}

.home-servicios__grupo-modalidad-texto {
	display: block;
	color: var(--color-gris-calido);
	font-size: 0.875rem;
	line-height: 1.45;
}

@media (max-width: 960px) {
	.home-servicios__paneles {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.home-servicios__grupo-modalidades {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.home-servicios__panel {
		padding: var(--espacio-3);
	}

	.home-servicios__panel-titulo {
		font-size: 1.5rem;
	}
}

/* --- Página /servicios/: mosaico editorial de 4 módulos con foto + giro
   3D al clic/toque (CSS puro, sin librerías). Vivía en la Home hasta
   2026-10-21; se movió aquí tal cual porque pertenece a una página
   independiente — ver page-servicios.php. ------------------------------ */

.home-mosaico {
	background-color: var(--color-crema);
	/* Arriba menos que abajo (pedido explícito): justo después de las
	 * migas de pan, el padding-top parejo de --espacio-6 (96px) se sentía
	 * como un salto vacío antes de llegar al encabezado — las migas ya
	 * traen su propio padding-block, no hace falta duplicar el aire. El
	 * padding-bottom se queda igual, separa bien de lo que sigue. */
	padding-top: var(--espacio-4);
	padding-bottom: var(--espacio-6);
	position: relative;
	overflow: hidden;
}

/* Patrón de panal de fondo, muy sutil — misma textura que el hero, aquí
 * apenas insinuada en una esquina para no competir con el mosaico de
 * fotos (pedido explícito: "inspiración panal/hexágono sutil, no
 * decorativo en exceso"). */
.home-mosaico::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("../img/elementos-graficos/panal-patron.svg");
	background-repeat: repeat;
	background-size: 76px 66px;
	opacity: 0.05;
	-webkit-mask-image: radial-gradient(ellipse 55% 70% at 100% 0%, #000 0%, transparent 70%);
	mask-image: radial-gradient(ellipse 55% 70% at 100% 0%, #000 0%, transparent 70%);
	pointer-events: none;
}

.home-mosaico > .contenedor {
	position: relative;
	z-index: 1;
}

/* Encabezado de la página: kicker + título a la izquierda, párrafos a la
 * derecha — mismo patrón de 2 columnas que el resto del sitio (ver
 * .home-servicios__intro-grid), sin sticky: en la versión anterior el
 * texto se quedaba fijo en una columna angosta mientras el mosaico (en
 * una columna lateral todavía más angosta) crecía mucho más alto,
 * dejando aire vacío debajo del texto — ahora el encabezado ocupa el
 * ancho completo de la sección y el mosaico tiene abajo las 1360px
 * enteras para componerse con más aire real entre módulos, no espacio
 * vacío de sobra. */
.home-mosaico__grid {
	max-width: 1360px;
	margin-inline: auto;
}

.home-mosaico__intro {
	display: grid;
	/* Corrección 2026-10-23 (pedido explícito: "el título de la izquierda
	 * está demasiado angosto y muy hacia abajo... recompón para que se
	 * vea equilibrado"): la ronda anterior angostó esta columna a
	 * 0.75fr/1.25fr para darle más ancho al cuadro — pero el cuadro ya
	 * tiene su propio max-width (64ch) que lo topa de todas formas, así
	 * que esa ganancia no se usaba y solo apretaba el título a más
	 * renglones de los necesarios.
	 *
	 * 2º ajuste (mismo pedido repetido): el H1 real de esta página es una
	 * oración larga (14 palabras) a 42px — incluso en 0.85fr seguía
	 * envolviendo en 5-6 líneas. 0.95fr/1.05fr le da más ancho real sin
	 * que el cuadro sufra (su propio max-width de 64ch sigue sin tocar
	 * el límite disponible). */
	grid-template-columns: 0.95fr 1.05fr;
	gap: var(--espacio-6);
	/* De start a center (mismo criterio que se aplicó en Nosotros cuando
	 * su intro pasó a vivir en un cuadro): con el título ahora menos
	 * envuelto y el cuadro ya compacto, alinear por arriba dejaba al
	 * título "cayendo" más abajo que el cuadro en vez de acompañarlo. */
	align-items: center;
	margin-bottom: var(--espacio-6);
}

/* El kicker/título de esta página son el encabezado principal de
 * /servicios/ (equivalente a un H1 editorial) — mismo texto literal que
 * el panel "Dos áreas que se complementan" de Home, así que toman la
 * misma presencia que ESE panel (clamp más grande que el
 * encabezado-seccion genérico de 36px que usan FAQ/diferenciadores),
 * no la versión neutra. Etiqueta en ámbar brillante (no el miel oscura
 * tenue de etiquetas secundarias) y más grande, para que "SERVICIOS" se
 * lea como la entrada de la página, no una nota al margen. */
.home-mosaico__intro .encabezado-seccion__etiqueta {
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--color-ambar);
	margin-bottom: var(--espacio-2);
}

.home-mosaico__intro .encabezado-seccion__titulo {
	font-size: clamp(2rem, 1.5rem + 2vw, 2.625rem);
	line-height: 1.2;
}

/* Frase resaltada dentro del título (pedido explícito) — mismo recurso
 * que .home-hero__resaltado en el H1 del hero, aplicado aquí a un H2:
 * color de acento, sin cambiar peso ni tamaño (ya hereda bold del h2). */
.home-mosaico__resaltado {
	color: var(--color-ambar);
}

/* Tarjeta premium para los 2 párrafos (pedido explícito 2026-10-22) —
 * antes el texto flotaba suelto en su columna con solo una regla ámbar
 * al margen; ahora vive en una tarjeta blanca propia, alineada por
 * arriba con el título/kicker de la izquierda (mismo align-items:start
 * del grid padre, sin offset de compensación — ambas columnas arrancan
 * en la misma línea). El título NUNCA entra en esta tarjeta — solo el
 * bloque de texto, tal como se pidió. */
.home-mosaico__texto {
	position: relative;
	max-width: 52ch;
	background-color: var(--color-blanco);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 8px 24px rgba(20, 20, 20, 0.06);
	padding: var(--espacio-4) var(--espacio-4) var(--espacio-4) 44px;
	color: var(--color-gris-calido);
	font-size: 1.0625rem;
	line-height: 1.75;
}

/* La línea ámbar ya no es el borde de la tarjeta (con border-radius se
 * vería cortada en las esquinas) — es un acento independiente, inset
 * respecto al padding, a la izquierda del texto, "dentro" de la
 * tarjeta como se pidió. */
.home-mosaico__texto::before {
	content: "";
	position: absolute;
	left: 22px;
	top: var(--espacio-4);
	bottom: var(--espacio-4);
	width: 3px;
	border-radius: 2px;
	background-color: var(--color-ambar);
	opacity: 0.55;
}

.home-mosaico__texto p {
	margin-bottom: var(--espacio-3);
}

.home-mosaico__texto p:last-child {
	margin-bottom: 0;
}

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

	.home-mosaico__intro .encabezado-seccion__titulo {
		font-size: clamp(1.875rem, 1.5rem + 3vw, 2.5rem);
	}

	.home-mosaico__texto {
		max-width: none;
		padding: var(--espacio-3) var(--espacio-3) var(--espacio-3) 36px;
	}

	.home-mosaico__texto::before {
		left: 16px;
		top: var(--espacio-3);
		bottom: var(--espacio-3);
	}
}

/* Modificador 2026-10-23 (pedido explícito — "SECCIÓN PRINCIPAL": el
 * cuadro editorial del hero de /servicios/ debe verse "más ligero, menos
 * alto, con negritas en color ámbar"): un modificador, no un cambio a
 * .home-mosaico__texto directamente, porque esa clase también la usa
 * /agencia-de-influencers/ (ver que-hacemos-influencers.php, 2026-10-25:
 * "reutiliza la MISMA tarjeta") — ese look no está en esta corrección, así
 * que se queda exactamente igual. Mismos valores de altura/ancho que el
 * resto de la familia .cuadro-editorial (ver más abajo), pero sin fusionar
 * la clase para no arrastrar la variante de color a la otra página. */
.home-mosaico__texto--principal {
	max-width: 64ch;
	padding: var(--espacio-3) var(--espacio-4) var(--espacio-3) 40px;
	line-height: 1.6;
	box-shadow: 0 1px 2px rgba(20, 20, 20, 0.03), 0 4px 16px rgba(20, 20, 20, 0.05);
}

.home-mosaico__texto--principal::before {
	left: 18px;
	width: 2px;
	top: var(--espacio-3);
	bottom: var(--espacio-3);
	opacity: 0.5;
}

/* Negritas en ámbar (pedido explícito, único entre los 3 cuadros): aquí
 * sí, no en Nosotros ni en "Dos áreas", que mantienen el carbón de
 * siempre. */
.home-mosaico__texto--principal strong {
	color: var(--color-ambar);
}

@media (max-width: 760px) {
	.home-mosaico__texto--principal {
		padding: var(--espacio-2) var(--espacio-3) var(--espacio-2) 32px;
	}

	.home-mosaico__texto--principal::before {
		left: 14px;
		top: var(--espacio-2);
		bottom: var(--espacio-2);
	}
}

/* === PATRÓN DE PANAL EN ESQUINA, DILUIDO (movido de ilustrado.css,
 * 2026-10-23) =============================================================
 * Antes solo vivía en ilustrado.css (sistema de páginas "Diseño
 * ilustrado"). Pedido explícito: "reutiliza exactamente la misma lógica
 * visual del patrón ya aprobado" en secciones de Inicio ("Hablemos de tu
 * proyecto") y Servicios ("Diagnóstico"), que no cargan esa hoja — se
 * reubica aquí (components.css se carga en todo el sitio) en vez de
 * duplicar las reglas o encolar ilustrado.css completo (~1400 líneas) en
 * páginas que no usan el resto de ese sistema. Mismo mecanismo de
 * siempre: el tile de panal-patron.svg (hexágonos carbón al 12%) repetido
 * y recortado con un degradado radial hacia la esquina elegida — nunca un
 * patrón nuevo. */
.ilustrado-patron {
	position: absolute;
	width: 45%;
	max-width: 550px;
	aspect-ratio: 1 / 1;
	background-image: url("../img/elementos-graficos/panal-patron.svg");
	background-repeat: repeat;
	background-size: 95px 83px;
	opacity: 0.5;
	pointer-events: none;
	z-index: 0;
}

.ilustrado-patron--arriba-derecha {
	top: -8%;
	right: -8%;
	-webkit-mask-image: radial-gradient(circle at top right, black 0%, transparent 60%);
	mask-image: radial-gradient(circle at top right, black 0%, transparent 60%);
}

.ilustrado-patron--arriba-izquierda {
	top: -8%;
	left: -8%;
	-webkit-mask-image: radial-gradient(circle at top left, black 0%, transparent 60%);
	mask-image: radial-gradient(circle at top left, black 0%, transparent 60%);
}

.ilustrado-patron--abajo-izquierda {
	bottom: -8%;
	left: -8%;
	-webkit-mask-image: radial-gradient(circle at bottom left, black 0%, transparent 60%);
	mask-image: radial-gradient(circle at bottom left, black 0%, transparent 60%);
}

.ilustrado-patron--abajo-derecha {
	bottom: -8%;
	right: -8%;
	-webkit-mask-image: radial-gradient(circle at bottom right, black 0%, transparent 60%);
	mask-image: radial-gradient(circle at bottom right, black 0%, transparent 60%);
}

.ilustrado-patron--espejo {
	transform: scaleX(-1);
}

.ilustrado-seccion--patron {
	position: relative;
	overflow: hidden;
}

.ilustrado-seccion--patron > .contenedor {
	position: relative;
	z-index: 1;
}

/* === CUADRO EDITORIAL (componente compartido, 2026-10-23) =============
 * Generaliza la receta de .home-mosaico__texto (hero de /servicios/,
 * 2026-10-22) e .institucional-contacto-hero__formulario (Contacto,
 * 2026-11-01) en una sola clase reutilizable, pedido explícito: "unificar
 * cuadros editoriales premium" en Nosotros ("Lo que nos mueve") e Inicio
 * ("Dos áreas que se complementan"). Línea ámbar inset (no como borde,
 * para no cortarse en las esquinas redondeadas), esquinas --radio-tarjeta.
 * El color de fondo cambia según el contraste que necesite la sección
 * donde vive (ver variantes abajo) — todo lo demás es compartido, sin
 * duplicar la receta por página.
 *
 * Ajuste 2026-10-23 (pedido explícito: "se ve demasiado grande,
 * amontonado y poco premium... menos alto, más ancho, con aire pero sin
 * inflar"): de un padding vertical de --espacio-4 (48px) a --espacio-3
 * (24px), line-height de 1.75 a 1.6, max-width de 56ch a 64ch (más ancho
 * útil de texto → menos saltos de línea → menos altura) y sombra aún más
 * tenue. Mismo ajuste en el breakpoint móvil. */
.cuadro-editorial {
	position: relative;
	max-width: 64ch;
	background-color: var(--color-blanco);
	border-radius: var(--radio-tarjeta);
	box-shadow: 0 1px 2px rgba(20, 20, 20, 0.03), 0 4px 16px rgba(20, 20, 20, 0.05);
	padding: var(--espacio-3) var(--espacio-4) var(--espacio-3) 40px;
	color: var(--color-gris-calido);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.cuadro-editorial::before {
	content: "";
	position: absolute;
	left: 18px;
	top: var(--espacio-3);
	bottom: var(--espacio-3);
	width: 2px;
	border-radius: 2px;
	background-color: var(--color-ambar);
	opacity: 0.5;
}

.cuadro-editorial p {
	margin-bottom: var(--espacio-2);
}

.cuadro-editorial p:last-child {
	margin-bottom: 0;
}

.cuadro-editorial strong {
	color: var(--color-carbon);
}

/* Variante para secciones de fondo oscuro (Inicio, "Dos áreas que se
 * complementan"). Corrección 2026-10-23 (pedido explícito: "el cuadro
 * debe ser BLANCO, con negritas en ámbar"): de fondo crema a blanco
 * puro, y las negritas pasan de carbón (la base de .cuadro-editorial) a
 * ámbar — único cuadro de los 3 con este tratamiento de negritas; el de
 * Nosotros no se toca. */
.cuadro-editorial--sobre-oscuro {
	background-color: var(--color-blanco);
}

.cuadro-editorial--sobre-oscuro strong {
	color: var(--color-ambar);
}

/* Variante oscura — usada brevemente en Nosotros ("Lo que nos mueve") y
 * revertida 2026-10-23 (pedido explícito: "el cuadro de Nosotros SÍ está
 * mejor en blanco... déjalo blanco"). Se conserva definida por si hace
 * falta en otra sección más adelante, pero NINGÚN cuadro la usa hoy. */
.cuadro-editorial--oscuro {
	background-color: var(--color-carbon);
	color: rgba(255, 255, 255, 0.82);
	box-shadow: 0 4px 20px rgba(20, 20, 20, 0.14);
}

.cuadro-editorial--oscuro::before {
	opacity: 0.85;
}

.cuadro-editorial--oscuro strong {
	color: var(--color-blanco);
}

/* Variante para secciones que ya son blancas (Nosotros, "Lo que nos
 * mueve" — corrección 2026-10-23, de vuelta a esta variante después de
 * probar la oscura): un blanco puro sobre un fondo de sección también
 * blanco no se distinguiría — tinte marfil muy leve + borde apenas
 * visible para que la tarjeta se note sin salirse de la paleta. */
.cuadro-editorial--sobre-claro {
	background-color: #FFFCF6;
	border: 1px solid rgba(20, 20, 20, 0.06);
}

@media (max-width: 760px) {
	.cuadro-editorial {
		max-width: none;
		padding: var(--espacio-2) var(--espacio-3) var(--espacio-2) 32px;
	}

	.cuadro-editorial::before {
		left: 14px;
		top: var(--espacio-2);
		bottom: var(--espacio-2);
	}
}

/* Mosaico asimétrico de 4 módulos en retícula "bento" de 3 columnas: 01
 * (ancho, arriba-izquierda) + 02 (angosto y vertical, arriba-derecha) +
 * 03 (angosto, abajo-izquierda) + 04 (ancho, abajo-derecha) — 4 formas
 * distintas, nunca una grilla pareja, pensadas según cuánto contenido
 * trae cada reverso (02 y 04 son los que más servicios agrupan).
 *
 * Los módulos SÍ se estiran a la altura de su fila (align-items:stretch,
 * el default de grid) — cada fila mide su alto real a partir del módulo
 * con más contenido (ver mecánica del giro abajo, ya no hay px
 * adivinados), y el vecino más corto de esa misma fila se estira para
 * emparejar: con el contenido centrado verticalmente en vez de pegado
 * arriba (ver .home-mosaico__cara--reverso), ese aire extra se lee como
 * respiro editorial deliberado, no como un hueco roto — la alternativa
 * (cada módulo con su propio alto, sin estirarse) dejaba un espacio
 * flotando debajo de la tarjeta más corta de cada fila, que es
 * precisamente el hueco que había que eliminar. */
.home-mosaico__zona {
	display: grid;
	grid-template-columns: 1.2fr 0.9fr 1fr;
	grid-template-areas:
		"m1 m1 m2"
		"m3 m4 m4";
	gap: var(--espacio-4);
}

.home-mosaico__modulo--1 {
	grid-area: m1;
}

.home-mosaico__modulo--2 {
	grid-area: m2;
}

.home-mosaico__modulo--3 {
	grid-area: m3;
}

.home-mosaico__modulo--4 {
	grid-area: m4;
}

/* --- Mecánica del giro 3D (CSS puro, sin dependencias) ------------------
 *
 * Antes ambas caras eran position:absolute dentro de un módulo con alto
 * fijo adivinado en px — eso rompía en cuanto el contenido real no
 * coincidía con la adivinanza (bug de recorte corregido en la ronda
 * anterior a punta de medir cada módulo a mano). Ahora la cara trasera
 * (reverso) vive en flujo normal — ella decide el alto real del módulo,
 * con su propio contenido, sin adivinar nada — y la cara frontal
 * (frente) es la única position:absolute, con inset:0 para ocupar
 * exactamente ese mismo alto. Resultado: las 2 caras SIEMPRE miden
 * exactamente lo mismo (una las define, la otra las copia), el alto de
 * cada módulo se ajusta solo a su contenido real (nada de filas en px
 * ni min-height por módulo) y la retícula nunca se rompe porque ninguna
 * fila depende de un número adivinado. */
.home-mosaico__modulo {
	position: relative;
	border-radius: var(--radio-tarjeta);
	/* perspective en el padre: la profundidad del giro se ve desde aquí,
	 * no desde el elemento que gira. */
	perspective: 1600px;
}

.home-mosaico__interior {
	position: relative;
	width: 100%;
	/* height:100% para heredar el estirado del módulo (grid
	 * align-items:stretch, ver .home-mosaico__zona) — el alto "real" de
	 * la fila lo sigue poniendo el contenido del reverso más alto de esa
	 * fila, esto solo hace que los vecinos más cortos lo hereden en vez
	 * de quedarse en su tamaño natural dentro de una caja más grande. */
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-mosaico__modulo--girado .home-mosaico__interior {
	transform: rotateY(180deg);
}

.home-mosaico__cara {
	border-radius: var(--radio-tarjeta);
	overflow: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.home-mosaico__cara--frente {
	position: absolute;
	inset: 0;
}

.home-mosaico__cara--reverso {
	position: relative;
	width: 100%;
	height: 100%;
	/* Piso mínimo para que ningún módulo (ni el de menos contenido, el 03)
	 * se vea como una franja angosta cuando no tiene vecino con el que
	 * emparejar fila (p. ej. en móvil, 1 columna) — el contenido real
	 * sigue mandando si necesita más. */
	min-height: 320px;
	transform: rotateY(180deg);
}

/* --- Cara frontal: foto + número/título superpuestos ------------------- */

.home-mosaico__frente-boton {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	position: relative;
	text-align: left;
}

.home-mosaico__foto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-mosaico__frente-boton:hover .home-mosaico__foto {
	transform: scale(1.035);
}

.home-mosaico__frente-capa {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--espacio-4);
	background: linear-gradient(0deg, rgba(20, 20, 20, 0.72) 0%, rgba(20, 20, 20, 0.1) 60%, rgba(20, 20, 20, 0) 85%);
}

.home-mosaico__numero {
	font-family: var(--font-titulos);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	color: var(--color-ambar);
	margin-bottom: 6px;
}

.home-mosaico__frente-titulo {
	font-family: var(--font-titulos);
	font-weight: 700;
	font-size: 1.3125rem;
	line-height: 1.2;
	color: var(--color-blanco);
}

/* Resumen visible sin necesidad de girar la tarjeta — texto real (no
 * nuevo) del servicio principal de cada módulo, recortado a 2 líneas
 * para que nunca empuje el alto de la foto. */
.home-mosaico__frente-resumen {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 6px;
	max-width: 36ch;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.875rem;
	line-height: 1.45;
}

/* --- Cara trasera: bloque de texto limpio con los servicios reales ----- */

.home-mosaico__cara--reverso {
	display: flex;
	flex-direction: column;
	/* Si el módulo se estira para emparejar la fila con un vecino más
	 * alto (ver .home-mosaico__zona), el contenido se centra en vez de
	 * quedarse pegado arriba — el aire extra se siente a propósito. */
	justify-content: center;
	padding: var(--espacio-4);
	background-color: var(--color-carbon);
}

/* Mezcla de fondos pedida explícitamente: módulo 2 ámbar, módulo 3
 * carbón (default de arriba), módulo 1 y 4 crema — para que el mosaico
 * se sienta variado en vez de 4 tarjetas iguales. */
.home-mosaico__modulo--1 .home-mosaico__cara--reverso,
.home-mosaico__modulo--4 .home-mosaico__cara--reverso {
	background-color: var(--color-crema);
}

.home-mosaico__modulo--2 .home-mosaico__cara--reverso {
	background-color: var(--color-ambar);
}

/* Numeral editorial grande y tenue (pedido explícito: "mejor jerarquía:
 * número, título..."): antes el 01-04 del reverso era del mismo tamaño
 * diminuto que el del frente — aquí es su propio acento tipográfico,
 * grande y translúcido, como en portadas de revista. */
.home-mosaico__numero--reverso {
	display: block;
	font-size: 2.75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	color: var(--color-ambar);
	opacity: 0.3;
	/* Más aire antes del título (pedido explícito) — antes el margen
	 * negativo pegaba el numeral grande casi encima del título, efecto
	 * "portada" demasiado apretado. */
	margin-bottom: var(--espacio-2);
}

.home-mosaico__modulo--2 .home-mosaico__numero--reverso {
	color: var(--color-carbon);
}

.home-mosaico__reverso-titulo {
	font-size: 1.4375rem;
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--color-blanco);
}

.home-mosaico__modulo--1 .home-mosaico__reverso-titulo,
.home-mosaico__modulo--4 .home-mosaico__reverso-titulo {
	color: var(--color-carbon);
}

.home-mosaico__modulo--2 .home-mosaico__reverso-titulo {
	color: var(--color-carbon);
}

.home-mosaico__reverso-intro {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.9375rem;
	margin-bottom: var(--espacio-2);
}

.home-mosaico__modulo--1 .home-mosaico__reverso-intro,
.home-mosaico__modulo--2 .home-mosaico__reverso-intro,
.home-mosaico__modulo--4 .home-mosaico__reverso-intro {
	color: var(--color-gris-calido);
}

/* Separa el bloque de encabezado (número + título + intro) de la lista
 * de servicios con una línea — el mismo recurso de separador sutil que
 * ya distingue cada servicio, aquí marcando el salto de "encabezado de
 * la tarjeta" a "cuerpo de la tarjeta". */
.home-mosaico__reverso-titulo {
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.home-mosaico__modulo--1 .home-mosaico__reverso-titulo,
.home-mosaico__modulo--4 .home-mosaico__reverso-titulo {
	border-bottom-color: rgba(20, 20, 20, 0.1);
}

.home-mosaico__modulo--2 .home-mosaico__reverso-titulo {
	border-bottom-color: rgba(20, 20, 20, 0.14);
}

/* Si hay un párrafo de introducción (ver módulo 02), la línea se mueve a
 * debajo de ese párrafo en vez del título — el separador siempre cierra
 * el "encabezado", sea de 1 o 2 líneas. */
.home-mosaico__reverso-titulo:has(+ .home-mosaico__reverso-intro) {
	padding-bottom: 0;
	border-bottom: none;
}

.home-mosaico__reverso-intro {
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.home-mosaico__modulo--1 .home-mosaico__reverso-intro,
.home-mosaico__modulo--4 .home-mosaico__reverso-intro {
	border-bottom-color: rgba(20, 20, 20, 0.1);
}

.home-mosaico__modulo--2 .home-mosaico__reverso-intro {
	border-bottom-color: rgba(20, 20, 20, 0.14);
}

/* Red de seguridad: en módulos con varios servicios (02 y 04) el alto ya
 * está calculado para que todo quepa sin cortar texto (ver .home-
 * mosaico__zona), pero si un contenido futuro no cupiera, esta lista se
 * desplaza sola en vez de recortarse en silencio — scrollbar fina propia
 * en vez de la nativa, para que no se vea como un error de diseño. */
.home-mosaico__reverso-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	/* Sin flex:1 a propósito: la lista mide su propio contenido en vez de
	 * estirarse a llenar el sobrante (eso dejaría el "aire extra" como un
	 * hueco feo debajo del último ítem) — el sobrante lo reparte
	 * justify-content:center del padre, arriba y abajo del bloque entero. */
	max-height: 100%;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(20, 20, 20, 0.25) transparent;
}

/* Separador sutil entre servicios — línea fina en vez del simple gap de
 * antes, para que la lista se lea como un bloque editorial con ritmo
 * propio en vez de ítems sueltos. Primero sin línea (nada que separar
 * todavía). Color según el fondo del reverso: tenue sobre crema/carbón,
 * un poco más presente sobre ámbar (el tono base ya es claro). */
.home-mosaico__reverso-lista > li {
	padding-block: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.home-mosaico__reverso-lista > li:first-child {
	padding-top: 0;
	border-top: none;
}

.home-mosaico__reverso-lista > li:last-child {
	padding-bottom: 0;
}

.home-mosaico__modulo--1 .home-mosaico__reverso-lista > li,
.home-mosaico__modulo--4 .home-mosaico__reverso-lista > li {
	border-top-color: rgba(20, 20, 20, 0.1);
}

.home-mosaico__modulo--2 .home-mosaico__reverso-lista > li {
	border-top-color: rgba(20, 20, 20, 0.14);
}

.home-mosaico__reverso-lista::-webkit-scrollbar {
	width: 4px;
}

.home-mosaico__reverso-lista::-webkit-scrollbar-thumb {
	background-color: rgba(20, 20, 20, 0.25);
	border-radius: 2px;
}

.home-mosaico__modulo--2 .home-mosaico__reverso-lista {
	scrollbar-color: rgba(20, 20, 20, 0.3) transparent;
}

.home-mosaico__servicio {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* Negritas ámbar (pedido explícito): el título de cada servicio es el
 * acento de color fuerte de la tarjeta, no el texto blanco/carbón neutro
 * de antes — excepto sobre el propio fondo ámbar (módulo 2), donde ámbar
 * sobre ámbar no se leería; ahí se queda en carbón para contraste. */
.home-mosaico__servicio-titulo {
	display: block;
	font-family: var(--font-titulos);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--color-ambar);
	margin-bottom: 2px;
}

/* Mismo criterio que encabezado-seccion__etiqueta: ámbar brillante solo
 * rinde contraste suficiente sobre fondo oscuro (carbón, módulo 3); en
 * crema se usa el tono miel oscura (ya existe en la paleta) y en el
 * propio fondo ámbar (módulo 2), carbón. */
.home-mosaico__modulo--1 .home-mosaico__servicio-titulo,
.home-mosaico__modulo--4 .home-mosaico__servicio-titulo {
	color: var(--color-miel-oscura);
}

.home-mosaico__modulo--2 .home-mosaico__servicio-titulo {
	color: var(--color-carbon);
}

.home-mosaico__servicio-texto {
	display: block;
	color: rgba(255, 255, 255, 0.68);
	font-size: 0.8125rem;
	line-height: 1.45;
}

.home-mosaico__modulo--1 .home-mosaico__servicio-texto,
.home-mosaico__modulo--2 .home-mosaico__servicio-texto,
.home-mosaico__modulo--4 .home-mosaico__servicio-texto {
	color: var(--color-gris-calido);
}

.home-mosaico__flecha {
	display: inline-block;
	color: var(--color-ambar);
	margin-top: 2px;
	transition: transform 0.2s ease;
}

.home-mosaico__modulo--1 .home-mosaico__flecha,
.home-mosaico__modulo--4 .home-mosaico__flecha {
	color: var(--color-miel-oscura);
}

.home-mosaico__modulo--2 .home-mosaico__flecha {
	color: var(--color-carbon);
}

/* CTA elegante: el enlace completo (no solo la flecha) gana un fondo
 * tenue y se desliza un poco al pasar el mouse — se siente a botón sin
 * parecer una tarjeta genérica encimada. */
/* CTA elegante y consistente en todos los enlaces reales de servicios
 * (pedido explícito: "aplica interacciones coherentes a los demás
 * enlaces") — mismo lenguaje de hover que las burbujas de abajo: borde
 * que pasa a ámbar, leve elevación y 250ms en vez de los 200ms sueltos
 * de antes. */
a.home-mosaico__servicio--enlace,
a.home-mosaico__modalidad {
	display: block;
	border: 1px solid transparent;
	border-radius: var(--radio-campo);
	margin-inline: -8px;
	padding-inline: 8px;
	transition: background-color 250ms ease, border-color 250ms ease, transform 250ms ease;
}

a.home-mosaico__servicio--enlace:hover,
a.home-mosaico__modalidad:hover {
	background-color: rgba(242, 169, 0, 0.1);
	border-color: rgba(242, 169, 0, 0.35);
	transform: translateY(-2px);
}

.home-mosaico__modulo--2 a.home-mosaico__servicio--enlace:hover,
.home-mosaico__modulo--2 a.home-mosaico__modalidad:hover {
	background-color: rgba(20, 20, 20, 0.08);
	border-color: rgba(20, 20, 20, 0.22);
}

a.home-mosaico__servicio--enlace:hover .home-mosaico__flecha,
a.home-mosaico__modalidad:hover .home-mosaico__flecha {
	transform: translateX(3px);
}

/* Grid en vez de columna única — en los módulos anchos (04) las
 * modalidades se acomodan solas en 2 columnas (mejor proporción, menos
 * alto necesario); en los angostos (01) caen solas a 1 columna. */
.home-mosaico__modalidades {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 4px var(--espacio-3);
	margin-top: 6px;
}

.home-mosaico__modalidad {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--espacio-2);
	text-decoration: none;
	color: inherit;
	padding: 3px 0;
}

.home-mosaico__modalidad-titulo {
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--color-ambar);
}

.home-mosaico__modulo--1 .home-mosaico__modalidad-titulo,
.home-mosaico__modulo--4 .home-mosaico__modalidad-titulo {
	color: var(--color-miel-oscura);
}

.home-mosaico__modulo--2 .home-mosaico__modalidad-titulo {
	color: var(--color-carbon);
}

/* Modalidad sin página propia todavía (p. ej. Meta Ads): texto neutro en
 * vez del acento ámbar — no es un CTA real, no debe verse como uno. */
.home-mosaico__modalidad--sin-destino .home-mosaico__modalidad-titulo {
	color: inherit;
	font-weight: 500;
}

.home-mosaico__modalidad--sin-destino {
	cursor: default;
}

/* Burbujas/pills (pedido explícito para Google/Meta/LinkedIn/TikTok Ads
 * en "Análisis y crecimiento"): mismo dato real (título + texto +
 * enlace), presentado como chips en vez de la lista vertical con
 * flecha — con 4 plataformas una fila de burbujas se lee mejor y más
 * premium que 4 renglones apilados. */
.home-mosaico__modalidades--burbujas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.home-mosaico__modalidad--burbuja {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 2px;
	flex: 1 1 140px;
	/* Pisa el margin-inline:-8px de .home-mosaico__modalidad (pensado
	 * para la variante en lista, no para una burbuja independiente) —
	 * aquí cada pill debe ocupar su propia caja completa, sin solaparse
	 * con la siguiente dentro del gap del contenedor flex. */
	margin-inline: 0;
	border-radius: 14px;
	padding: 10px 14px;
	background-color: rgba(242, 169, 0, 0.1);
	border: 1px solid rgba(242, 169, 0, 0.18);
}

/* Hover premium (pedido explícito): elevación sutil + borde ámbar +
 * 250ms — ya hereda la transición de background/border/transform de la
 * regla base de .home-mosaico__modalidad, solo se agrega aquí el valor
 * final de cada propiedad en :hover. */
a.home-mosaico__modalidad--burbuja:hover {
	background-color: rgba(242, 169, 0, 0.18);
	border-color: var(--color-ambar);
	transform: translateY(-3px);
	box-shadow: 0 4px 10px rgba(242, 169, 0, 0.18);
}

.home-mosaico__modalidad--burbuja.home-mosaico__modalidad--sin-destino {
	background-color: rgba(20, 20, 20, 0.04);
	border-color: rgba(20, 20, 20, 0.08);
}

.home-mosaico__modalidad--burbuja .home-mosaico__modalidad-titulo {
	font-size: 0.875rem;
}

.home-mosaico__modalidad--burbuja .home-mosaico__modalidad-texto {
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--color-gris-calido);
}

/* Botón "cerrar"/volver a la foto, esquina superior derecha del reverso
 * — el reverso tiene enlaces reales adentro, así que el giro de vuelta
 * necesita su propio control en vez de que toda la cara sea clicable. */
.home-mosaico__reverso-cerrar {
	position: absolute;
	top: var(--espacio-2);
	right: var(--espacio-2);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid rgba(20, 20, 20, 0.15);
	background: none;
	color: inherit;
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}

.home-mosaico__modulo--2 .home-mosaico__reverso-cerrar,
.home-mosaico__modulo--3 .home-mosaico__reverso-cerrar {
	border-color: rgba(255, 255, 255, 0.3);
}

.home-mosaico__reverso-cerrar:hover {
	background-color: rgba(20, 20, 20, 0.06);
}

.home-mosaico__modulo--2 .home-mosaico__reverso-cerrar:hover,
.home-mosaico__modulo--3 .home-mosaico__reverso-cerrar:hover {
	background-color: rgba(255, 255, 255, 0.12);
}

.home-mosaico__frente-boton:focus-visible,
.home-mosaico__reverso-cerrar:focus-visible {
	outline: 2px solid var(--color-ambar);
	outline-offset: 2px;
}

/* Responsive: ya no hay alturas en px que recalcular por punto de
 * quiebre — cada módulo mide su propio contenido real a cualquier ancho
 * (ver mecánica del giro arriba), así que tablet y móvil solo reacomodan
 * columnas/áreas; el alto se resuelve solo, sin recortes. */
@media (max-width: 1040px) {
	.home-mosaico__intro {
		max-width: 60ch;
	}

	/* Tablet: retícula de 2 columnas — 01 arriba a todo el ancho (su foto
	 * de laptop se ve bien panorámica), 02/03 lado a lado, 04 abajo a
	 * todo el ancho. */
	.home-mosaico__zona {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"m1 m1"
			"m2 m3"
			"m4 m4";
	}
}

@media (max-width: 620px) {
	/* Móvil: 1 columna en el orden editorial 01→02→03→04. Los módulos
	 * conservan un grid-area con nombre (m1…m4) de la retícula de
	 * escritorio; sin un grid-template-areas que los defina, el nombre
	 * suelto se reinterpreta como línea implícita y cada módulo abre su
	 * propia columna fantasma — por eso el reset explícito a "auto" aquí,
	 * no alcanza con quitar solo grid-template-areas. */
	.home-mosaico__zona {
		grid-template-columns: 1fr;
		grid-template-areas: none;
	}

	.home-mosaico__modulo--1,
	.home-mosaico__modulo--2,
	.home-mosaico__modulo--3,
	.home-mosaico__modulo--4 {
		grid-area: auto;
	}

	.home-mosaico__cara--reverso {
		min-height: 260px;
	}
}
/* --- 4. Qué nos hace diferentes: fondo crema, 6 diferenciadores en
   composición editorial (copy aprobado, sin cambiar palabras) ----------- */

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

/* Rediseño 2026-10-20 (7ª corrección): grilla alineada en filas parejas,
 * ahora con más aire entre ítems (gap mayor) y una regla vertical ámbar
 * a la izquierda de cada uno (en vez del borde superior de la ronda
 * anterior) — un recurso editorial más clásico de "cita al margen", con
 * más sensación de diseño que una simple división horizontal. */
.home-diferenciadores__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--espacio-6) var(--espacio-4);
	margin-top: var(--espacio-4);
}

/* Rediseño 2026-10-20 (9ª corrección): hover/focus suave — el acento
 * ámbar se intensifica y el bloque se eleva un poco.
 *
 * Ajuste 2026-10-23 (pedido explícito: "aplica la misma animación de
 * selección/activación que ya usamos en Nosotros... la misma sensación
 * de iluminación al seleccionar"): esta tarjeta fue el ORIGEN de la
 * familia visual que Nosotros tomó como referencia ("Qué nos hace
 * diferentes" → .nosotros-filosofia__item), pero Nosotros terminó con
 * una interacción más presente (tinte de fondo + elevación + sombra +
 * acento en el número). Se trae ese mismo tratamiento de vuelta aquí,
 * para que ambas páginas compartan exactamente la misma lógica. */
.home-diferenciadores__item {
	position: relative;
	padding: var(--espacio-2) var(--espacio-2) var(--espacio-2) var(--espacio-3);
	border-left: 2px solid rgba(242, 169, 0, 0.4);
	border-radius: 2px;
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

@media (hover: hover) {
	.home-diferenciadores__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);
	}

	.home-diferenciadores__item:hover .home-diferenciadores__numero {
		color: rgba(242, 169, 0, 0.55);
	}
}

.home-diferenciadores__item:focus-visible {
	border-left-color: var(--color-ambar);
	outline: none;
}

/* Microdetalle: un punto ámbar sólido flotando justo encima de la regla
 * vertical — un pequeño acento de diseño, discreto, sin pesar. */
.home-diferenciadores__item::before {
	content: "";
	position: absolute;
	top: -7px;
	left: -4px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--color-ambar);
}

/* Más contraste que rondas anteriores — sigue siendo un número
 * "fantasma" de fondo, pero se lee con claridad. */
.home-diferenciadores__numero {
	display: block;
	font-family: var(--font-titulos);
	font-weight: 700;
	font-size: 4rem;
	letter-spacing: -0.02em;
	color: rgba(20, 20, 20, 0.28);
	line-height: 1;
	transition: color 0.3s ease;
}

.home-diferenciadores__linea {
	display: none;
}

.home-diferenciadores__item h3 {
	font-size: 1.5rem;
	margin-top: var(--espacio-2);
	margin-bottom: 8px;
}

.home-diferenciadores__item p {
	font-size: 1rem;
	color: var(--color-gris-calido);
	margin-bottom: 0;
}

@media (max-width: 860px) {
	.home-diferenciadores__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--espacio-4);
	}
}

@media (max-width: 480px) {
	/* En 1 columna el gap grande de escritorio (pensado para separar
	 * columnas) se sentía como un hueco excesivo entre ítems apilados —
	 * se reduce para esta disposición vertical. */
	.home-diferenciadores__grid {
		grid-template-columns: 1fr;
		gap: var(--espacio-3);
	}
}

/* --- 5. Cómo empezamos: fondo carbón, línea de tiempo horizontal -------- */

/* Rediseño 2026-10-20 (14ª corrección, "premium" sin conector): fondo con
 * una variación de tono mínima (antes plano var(--color-carbon)) — un
 * degradado sutil entre 2 tonos de carbón casi idénticos, da algo de
 * profundidad a la sección sin textura ni ruido visual. */
.home-proceso {
	background: linear-gradient(180deg, #141414 0%, #1a1a1a 100%);
	padding-block: var(--espacio-6);
}

/* Título con más presencia (antes heredaba el tamaño base de h2 sin
 * más) — mismo recurso clamp() que el resto de encabezados de la Home. */
.home-proceso__encabezado .encabezado-seccion__titulo {
	color: var(--color-blanco);
	font-size: clamp(1.875rem, 1.5rem + 1.8vw, 2.5rem);
}

.home-proceso__encabezado .encabezado-seccion__etiqueta {
	color: var(--color-ambar);
}

/* Rediseño 2026-10-20 (14ª corrección): se quitó por completo el
 * conector/línea entre tarjetas (pedido explícito: "no debe haber
 * conectores visuales entre ellas") — las 4 tarjetas quedan como
 * bloques independientes, sin `::before` ni ningún elemento de línea.
 * Más aire entre el título y las tarjetas, y entre tarjetas. */
.home-proceso__linea {
	list-style: none;
	margin: 64px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 1fr;
	gap: 40px;
}

/* Tarjetas independientes con más profundidad — rediseño 2026-10-20
 * (14ª corrección): fondo carbón/antracita diferenciado del fondo de la
 * sección, borde sutil, esquina refinada (--radio-tarjeta), sombra muy
 * suave (nunca dura ni exagerada) y padding generoso. Altura uniforme
 * en la fila vía grid-auto-rows:1fr arriba + height:100% aquí, sin
 * forzar un valor fijo que deje huecos si un texto es más corto. */
.home-proceso__etapa {
	position: relative;
	height: 100%;
	padding: var(--espacio-4);
	border-radius: var(--radio-tarjeta);
	background-color: #1f1f1f;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Microinteracción ligera al pasar el cursor o enfocar con teclado — el
 * panel se aclara un poco, el borde se define y la sombra se acentúa
 * apenas, sin animación continua. */
.home-proceso__etapa:hover,
.home-proceso__etapa:focus-within {
	background-color: #242424;
	border-color: rgba(242, 169, 0, 0.3);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
}

/* Nodo numerado — tamaño equilibrado, ámbar sólido, borde limpio y más
 * separación respecto al título del paso (pedido explícito).
 *
 * Ajuste 2026-10-23 (pedido explícito: "sustituye los círculos ámbar de
 * los números por hexágonos ámbar... revisa sombra, profundidad,
 * contraste"): de border-radius:50% a clip-path hexagonal (mismo
 * lenguaje geométrico del panal/símbolo de marca, no un círculo
 * genérico), más un poco más grande (44px) para que el hexágono se lea
 * con claridad, y una sombra ámbar sutil para más profundidad — el
 * borde con clip-path se recorta junto con el relleno, sigue leyéndose
 * limpio. */
.home-proceso__nodo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	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.125rem;
	margin-bottom: 28px;
	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;
}

/* [data-aparecer] ya anima opacity/transform del <li> completo al
 * entrar en vista (ver variables.css) — el nodo suma su propio "pop" de
 * escala con un pequeño retraso: transición única al aparecer (no un
 * loop), respeta prefers-reduced-motion vía la misma regla global y no
 * tiene costo de rendimiento continuo. */
.home-proceso__etapa.aparecer--visible .home-proceso__nodo {
	transform: scale(1);
	opacity: 1;
}

.home-proceso__etapa.aparecer--visible:hover .home-proceso__nodo,
.home-proceso__etapa.aparecer--visible:focus-within .home-proceso__nodo {
	transform: scale(1) translateY(-2px);
	box-shadow: 0 12px 24px rgba(242, 169, 0, 0.4);
}

/* Jerarquía tipográfica: título de paso más claro (600, antes heredaba
 * 500 de h3 base) y texto descriptivo con un tono menos blanco (opacidad
 * reducida) para que respire mejor frente al título. */
.home-proceso__etapa h3 {
	color: var(--color-blanco);
	font-weight: 600;
	font-size: 1.125rem;
	margin-bottom: 8px;
}

.home-proceso__etapa p {
	color: rgba(255, 255, 255, 0.6);
	font-size: 1rem;
	line-height: 1.5;
	margin-bottom: 0;
}

/* QA de integración: cuatro columnas excedían el ancho a 768 px.
 * Dos columnas en tableta conservan las tarjetas y el contenido completos. */
@media (min-width: 761px) and (max-width: 1024px) {
	.home-proceso__linea {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	/* Mismo trato de tarjeta que en escritorio, apiladas en 1 columna —
	 * sin línea que las una, con buena separación vertical entre ellas. */
	.home-proceso__linea {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		gap: 28px;
	}

	.home-proceso__etapa {
		height: auto;
	}
}

/* --- 5b. Por qué importa conectar los canales: fondo crema, texto +
   diagrama abstracto de conexión (rediseño 2026-10-20, 4ª corrección) --- */

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

/* Rediseño 2026-10-20 (9ª corrección): columna de imagen algo más
 * angosta (antes 1fr) para equilibrar mejor con el texto. */
.home-conexion__grid {
	display: grid;
	grid-template-columns: 1.4fr 0.85fr;
	gap: 56px;
	align-items: center;
}

.home-conexion__texto {
	color: var(--color-gris-calido);
	font-size: var(--tamano-subtitulo);
	margin-top: var(--espacio-2);
	max-width: 56ch;
}

.home-conexion__texto p:last-child {
	margin-bottom: 0;
}

/* Rediseño 2026-10-20 (8ª corrección): el espacio reservado recibe ya la
 * fotografía definitiva (mismo aspect-ratio 4/5 con el que se entregó:
 * 480×600 / 768×960 / 1122×1402, sin recorte adicional). */
.home-conexion__foto-espacio {
	position: relative;
	aspect-ratio: 4 / 5;
	max-width: 90%;
	margin-left: auto;
	border-radius: var(--radio-tarjeta);
	overflow: hidden;
	background-color: rgba(20, 20, 20, 0.04);
	/* Ajuste 2026-10-23 (pedido explícito: "ajústala ligeramente para que
	 * quede mejor integrada y más equilibrada con el texto"): sombra muy
	 * suave, antes plana — misma receta de siempre, sin cambiar el
	 * recorte ni la fotografía. */
	box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 20px 40px rgba(20, 20, 20, 0.1);
}

.home-conexion__foto-espacio img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 860px) {
	.home-conexion__grid {
		grid-template-columns: 1fr;
	}

	.home-conexion__foto-espacio {
		max-width: 280px;
		aspect-ratio: 4 / 3;
		margin: var(--espacio-3) auto 0;
	}
}

/* --- 6. Proyectos y resultados: fondo crema, sin tarjetas ficticias ----- */

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

.home-proyectos__nota {
	max-width: 640px;
	color: var(--color-gris-calido);
}

/* --- 7. CTA final: fondo ámbar, contraste alto -------------------------- */

.home-cta-final {
	position: relative;
	overflow: hidden;
	background-color: var(--color-ambar);
	padding-block: var(--espacio-6);
	text-align: center;
}

/* Detalle geométrico oficial discreto (pedido explícito) — hexágonos de
 * contorno, sin relleno, muy baja opacidad. Rediseño 2026-10-20 (4ª
 * corrección): se suma un 2º hexágono más chico arriba a la izquierda
 * para equilibrar la composición (antes solo 1, abajo a la derecha). */
.home-cta-final__hex {
	position: absolute;
	opacity: 0.18;
	pointer-events: none;
}

.home-cta-final__hex--principal {
	bottom: -40px;
	right: -40px;
	width: 180px;
}

.home-cta-final__hex--secundario {
	top: -30px;
	left: -30px;
	width: 110px;
	opacity: 0.12;
}

.home-cta-final__hex-svg {
	width: 100%;
	height: auto;
	display: block;
}

.home-cta-final__contenido {
	position: relative;
	z-index: 1;
	max-width: 640px;
	margin-inline: auto;
}

.home-cta-final__contenido h2 {
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
}

.home-cta-final__contenido p {
	font-size: var(--tamano-subtitulo);
	margin-bottom: var(--espacio-3);
}

.home-cta-final__contenido .btn {
	display: inline-flex;
	padding-inline: var(--espacio-4);
	font-size: 1.0625rem;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}

.home-cta-final__contenido .btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(20, 20, 20, 0.18);
}

/* --- Accesibilidad: foco visible ------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--color-violeta);
	outline-offset: 2px;
}