/* ---------------------------------------------------------------------
 * Ajustes EXCLUSIVOS de /agencia-seo-mexico/ (pedido explícito 2026-10-23
 * — "Rediseño visual premium de Agencia SEO México", acotado a esta sola
 * página). Esta hoja solo se encola en esta plantilla (ver
 * apis_enqueue_assets() en functions.php) — las reglas de abajo pisan a
 * propósito clases compartidas del sistema "Diseño ilustrado"
 * (ilustrado.css, usado también por /consultor-seo/ y /agencia-de-
 * posicionamiento-web/), pero como el archivo nunca se carga en esas
 * otras páginas, no les afecta en absoluto — no se tocó ni una línea de
 * ilustrado.css. Reutiliza tokens, sombras y el lenguaje de hexágono-nodo
 * ya aprobado en Inicio/Nosotros (home-proceso__nodo) — ningún recurso
 * nuevo, ningún icono nuevo, ninguna fotografía nueva.
 *
 * BUG REAL encontrado y corregido en la ronda "Ajustes finos de calidad"
 * (2026-10-23): esta hoja (y, ya desde antes, ilustrado.css) usaba
 * var(--espacio-5) en varios sitios, pero --espacio-5 NUNCA se definió en
 * variables.css (la escala salta de --espacio-4:48px a --espacio-6:96px)
 * — un var() a una custom property inexistente y sin fallback es
 * inválido, así que esas reglas de margen/space nunca se aplicaron en
 * silencio (el motivo real de que varias secciones siguieran sintiéndose
 * "apretadas" pese a la ronda anterior). Como variables.css es sitewide
 * y no está en el alcance de esta tarea, la corrección es local: un
 * token propio de este archivo en vez de reusar el nombre roto. */
:root {
	--aseo-espacio-xl: 64px;
}


/* === 0. GENERAL — aire y legibilidad en toda la página, ronda "Ajustes
 * finos de calidad" 2026-10-23: "los textos siguen viéndose amontonados
 * en varias partes... mejor separación entre párrafos". Base sitewide de
 * esta página sola: 24px entre párrafos de prosa en vez de los 16px
 * genéricos de ilustrado.css — las secciones con su propio tratamiento
 * (mosaico, tarjetas de paquetes) usan selectores más específicos y no
 * se ven afectadas por esta regla general. */
.page-id-33 .ilustrado-prosa p {
	margin-bottom: var(--espacio-3);
}

.page-id-33 .ilustrado-prosa p:last-child {
	margin-bottom: 0;
}

/* Títulos bicolor de "Paquetes de SEO México" y "Por qué elegir a Apis"
 * (pedido explícito 2026-10-23, "Corrección visual y SEO": "destacar «SEO
 * México»"/"destacar «APIS»" sin tocar el H2 real) — ver
 * apis_ilustrado_titulo_bicolor() en inc/diseno-ilustrado.php, que envuelve
 * solo esa frase en este span al imprimir, nunca en el contenido guardado. */
.page-id-33 .ilustrado-encabezado__acento {
	color: var(--color-ambar);
}


/* === 1. "QUÉ INCLUYE UNA AGENCIA DE SERVICIOS SEO" — mosaico flip 3D ====
 * Rediseño 2026-10-23 (pedido explícito: "sustituir las seis tarjetas
 * actuales por un mosaico premium con fotografías y animación de giro
 * 3D"): reemplaza por completo al hover/sombra de .ilustrado-tarjeta-icono
 * de la ronda anterior — ver mosaico-flip-seo.php (componente nuevo,
 * exclusivo de esta sección/página) y el bloque de interacción en
 * assets/js/main.js. Las 6 fotografías son archivos reales del usuario
 * (ver docblock del componente); cada una ya trae número/título/flecha
 * incrustados en el píxel — el object-position de cada tarjeta encuadra
 * la franja superior real de la foto y dejar la franja de texto/flecha
 * fuera del recorte visible, sin tocar los archivos.
 *
 * Grid 3×2 en escritorio / 2 columnas en tablet / 1 en móvil, según
 * pedido. Perspectiva + rotateY — mismo criterio de "giro 3D real" que
 * .home-mosaico__modulo (Servicios), adaptado: alterna una sola clase
 * (.is-flipped) en vez de botón de frente + botón de cierre aparte, y
 * suma hover real en escritorio. */

.mosaico-flip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--espacio-4);
	margin: var(--espacio-3) 0;
}

.mosaico-flip__tarjeta {
	position: relative;
	aspect-ratio: 3 / 2;
	border-radius: var(--radio-tarjeta);
	perspective: 1200px;
	cursor: pointer;
	box-shadow: 0 14px 32px rgba(20, 20, 20, 0.12);
	transition: box-shadow 0.3s ease;
}

@media (hover: hover) {
	.mosaico-flip__tarjeta:hover {
		box-shadow: 0 20px 44px rgba(20, 20, 20, 0.18);
	}
}

.mosaico-flip__tarjeta:focus-visible {
	outline: 2px solid var(--color-ambar);
	outline-offset: 3px;
	border-radius: var(--radio-tarjeta);
}

.mosaico-flip__interior {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	transform-style: preserve-3d;
	/* Giro más lento y elegante (pedido explícito 2026-10-23: "la vuelta 3D
	 * va demasiado rápido" → 700-900ms, ease-in-out, sin rebote). 800ms con
	 * una curva ease-in-out simétrica (ni arranque ni frenado brusco),
	 * reemplaza la curva con "overshoot" leve de la ronda anterior
	 * (0.22,1,0.36,1 pasa brevemente de 180deg) por una sin ningún rebote. */
	transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Desktop: hover gira sola (pedido explícito "hover y clic"); .is-flipped
 * (clic/toque/teclado, ver main.js) cubre el resto de los casos y
 * persiste sobre fondos sin hover real. */
@media (hover: hover) {
	.mosaico-flip__tarjeta:hover .mosaico-flip__interior {
		transform: rotateY(180deg);
	}
}

.mosaico-flip__tarjeta.is-flipped .mosaico-flip__interior {
	transform: rotateY(180deg);
}

.sin-animacion .mosaico-flip__interior {
	transition: none;
}

.mosaico-flip__cara {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	overflow: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* --- Frente: solo foto + título, pedido explícito ------------------- */

.mosaico-flip__cara--frente {
	background-color: var(--color-carbon);
}

.mosaico-flip__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Degradado MUY sutil (pedido explícito) — solo lo necesario para que el
 * título blanco se lea sobre cualquier fotografía, sin oscurecer la
 * imagen completa. Franja final casi opaca (0.93, antes 0.75): en la
 * tarjeta "Auditoría técnica" el recorte 3/2 dejaba un resto muy tenue
 * del "01" incrustado asomando justo en el borde inferior, visible solo
 * con zoom — encontrado y corregido en esta ronda (2026-10-23). Subir la
 * opacidad final (no el punto donde empieza, que sigue en 45%) tapa ese
 * resto sin oscurecer el resto de la fotografía. */
.mosaico-flip__degradado {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(20, 20, 20, 0.93) 100%);
	pointer-events: none;
}

.mosaico-flip__titulo {
	position: absolute;
	left: var(--espacio-3);
	bottom: var(--espacio-4);
	right: var(--espacio-3);
	margin: 0;
	color: var(--color-blanco);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.01em;
	text-shadow: 0 2px 10px rgba(20, 20, 20, 0.45);
}

/* --- Alternancia oscuro/blanco, SOLO en el reverso (ronda 2026-11-09:
 * "todos los títulos de las tarjetas deben ir en blanco" — se encontró que
 * el degradado claro de las tarjetas pares dejaba el título en carbón casi
 * ilegible sobre fotografías que siguen siendo oscuras de fondo,
 * confirmado con zoom en "Investigación de keywords". El frente vuelve a
 * un solo degradado oscuro consistente en las 6 tarjetas — título siempre
 * blanco, contraste garantizado sea cual sea la foto. La alternancia
 * oscuro/blanco pedida originalmente se conserva en el reverso, que no
 * depende de la fotografía y sí tiene contraste controlado. */
.mosaico-flip__tarjeta:nth-child(even) .mosaico-flip__cara--reverso {
	background-color: var(--color-blanco);
}

.mosaico-flip__tarjeta:nth-child(even) .mosaico-flip__texto {
	color: var(--color-carbon);
}

/* El numeral del reverso se mantiene ámbar en las dos variantes (pedido
 * explícito: "en las tarjetas blancas, el número debe ir en ámbar") —
 * nunca se sobreescribe a carbón aquí. */

/* --- Reverso: jerarquía editorial (pedido explícito 2026-11-02:
 * "rediseña el reverso: texto mejor distribuido, jerarquía editorial,
 * espacios adecuados... evita párrafos enteros en negrita"). El numeral
 * decorativo (mismo criterio que .ilustrado-proceso__numero) da
 * referencia visual de orden sin repetir el título; el énfasis real va
 * en la primera línea del texto vía ::first-line — nunca en negrita de
 * frase completa, y sin depender de marcado que el analizador de
 * lista_iconos no conserva (ver inc/diseno-ilustrado.php, $li->textContent
 * descarta cualquier etiqueta de los <li> de origen). */
.mosaico-flip__cara--reverso {
	background-color: var(--color-carbon);
	transform: rotateY(180deg);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--espacio-2);
	padding: var(--espacio-4);
}

.mosaico-flip__reverso-indice {
	display: block;
	font-family: var(--font-titulos);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-ambar);
	padding-bottom: var(--espacio-1);
	border-bottom: 1px solid rgba(242, 169, 0, 0.25);
}

.mosaico-flip__tarjeta:nth-child(even) .mosaico-flip__reverso-indice {
	border-bottom-color: rgba(242, 169, 0, 0.35);
}

.mosaico-flip__texto {
	margin: 0;
	max-width: none;
	color: rgba(255, 248, 236, 0.92);
	font-size: 0.9375rem;
	line-height: 1.7;
	text-align: left;
}

.mosaico-flip__texto::first-line {
	font-weight: 600;
}

@media (max-width: 1000px) {
	.mosaico-flip {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.mosaico-flip {
		grid-template-columns: 1fr;
	}

	/* Antes 4/3 en móvil: bug real encontrado en esta ronda (2026-10-23) —
	 * una tarjeta más baja que ancha (4/3) deja ver MÁS alto de la
	 * fotografía original que el recorte 3/2 de escritorio/tablet, y ese
	 * alto extra es justo donde vive el número/flecha incrustados en el
	 * píxel (ver mosaico-flip-seo.php) — confirmado con zoom en "Auditoría
	 * técnica" y "Investigación de keywords", el "01"/"02" asomaba debajo
	 * del título real. El recorte 3/2 (igual en los tres anchos) es el que
	 * ya se verificó que oculta el texto incrustado en los 6 casos, así
	 * que se mantiene sin excepción por breakpoint en vez de permitir un
	 * aspect-ratio más alto en móvil. */
}

/* --- Cabecera de la sección (eyebrow + h2 + rayas + intro) — ronda
 * "Ajustes finos de calidad" 2026-10-23: "que el texto introductorio se
 * vea mejor integrado con el título... más espacio entre el encabezado
 * y el mosaico". Selector por adyacencia estructural
 * (":has(+ .mosaico-flip)"), no por una clase nueva: esta es la ÚNICA
 * cabecera de la página seguida por el mosaico, así que queda acotado a
 * esta sección sin tocar ningún otro ilustrado-encabezado/ilustrado-prosa
 * del resto del sitio. La barra ámbar a la izquierda de la ronda anterior
 * se quitó aquí: con la de la banda de cierre más abajo, repetir el
 * mismo recurso dos veces en la misma sección se sentía genérico — la
 * intro ahora es prosa simple, muy pegada al título (8px, integrada,
 * no otro bloque aparte) y con bastante más aire antes del mosaico
 * (64px, el --aseo-espacio-xl corregido arriba). */
/* Ronda 2026-11-30, pedido explícito: "el texto de abajo de qué incluye
 * se ve amontonado" — BUG REAL encontrado: los 8px de la vuelta anterior
 * ("muy pegada al título, integrada") en la práctica se leían como texto
 * apretado contra las rayas de color, no como integración editorial. Sube
 * a 24px, suficiente para separar el bloque sin convertirlo en dos piezas
 * sueltas. */
.page-id-33 .ilustrado-encabezado:has(+ .ilustrado-prosa + .mosaico-flip) {
	margin-bottom: var(--espacio-3);
}

/* Ronda 2026-11-09, pedido explícito: "se ve mal distribuido, amontonado y
 * demasiado cargado hacia la izquierda". Confirmado en captura: el
 * max-width:none de la vuelta anterior dejaba el párrafo estirarse al
 * ancho completo del contenedor (~1200px) — líneas demasiado largas para
 * leerse cómodo. La corrección es ancho de lectura real (igual al resto de
 * la prosa de la página), alineado al mismo margen izquierdo que el
 * encabezado de arriba (nunca centrado aparte: un párrafo centrado bajo un
 * H2 alineado a la izquierda se vería desalineado, no más premium). */
/* Ronda 2026-11-23, pedido explícito: "contenedor editorial con
 * max-width:850px... line-height:1.7... separación inferior de
 * 36-44px". Ensancha el contenedor de 640px a 850px (más aire horizontal,
 * menos compacto) y fija el interlineado/margen exactos pedidos — sigue
 * sin centrarse ni justificarse, alineado al mismo margen izquierdo que
 * el H2 de arriba. */
.page-id-33 .ilustrado-prosa:has(+ .mosaico-flip) {
	max-width: 850px;
	margin: 0 0 40px;
}

.page-id-33 .ilustrado-prosa:has(+ .mosaico-flip) p {
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--color-gris-calido);
}

.page-id-33 .ilustrado-prosa:has(+ .mosaico-flip) strong {
	color: var(--color-miel-oscura);
	font-weight: 600;
}

/* --- Cierre inferior de la sección (franja + nota con enlace) — TERCERA
 * vuelta, ronda "Corrección visual y SEO" 2026-10-23: la cita tipográfica
 * de la ronda pasada seguía sin sentirse "blanco, compacto, elegante"
 * (pedido explícito: "fondo blanco, no arena ni gris... línea vertical
 * ámbar muy fina... negritas estratégicas EN ÁMBAR, evitar frases
 * completas en negrita... reducir altura innecesaria"). Se quita la
 * comilla decorativa y el peso 600 de la ronda anterior por completo:
 * fondo blanco real, una sola línea ámbar de 2px a la izquierda que corre
 * por los DOS párrafos sin cortes (mismo recurso que el acento del
 * reverso del mosaico, consistente en la sección), texto en peso normal
 * con <strong> puntuales en ámbar (editados en el contenido real — ver
 * resumen de entrega — nunca negrita de frase completa), y mucho menos
 * padding para no dejar aire vacío. Las dos piezas (ilustrado-destacado +
 * el párrafo con el enlace) se leen como una sola composición: incluso
 * siendo dos elementos de DOM distintos, comparten fondo/borde y no
 * llevan radio partido ni sombra propia cada una — una sola tarjeta
 * visual de principio a fin. Selector por adyacencia a ".mosaico-flip":
 * esta es la única ilustrado-destacado que lo sigue en toda la página. */
.page-id-33 .mosaico-flip + .ilustrado-destacado {
	display: block;
	background-color: var(--color-blanco);
	border: 1px solid rgba(20, 20, 20, 0.06);
	border-left: 2px solid var(--color-ambar);
	border-bottom: none;
	border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0;
	padding: var(--espacio-4) var(--espacio-4) var(--espacio-2);
	margin: var(--aseo-espacio-xl) 0 0;
}

.page-id-33 .mosaico-flip + .ilustrado-destacado .ilustrado-destacado__hex,
.page-id-33 .mosaico-flip + .ilustrado-destacado .ilustrado-destacado__linea {
	display: none;
}

/* Pieza editorial premium (pedido explícito 2026-11-02: "mejor
 * composición, espaciado y énfasis estratégicos") — la frase principal
 * sube de peso/tamaño como remate de la sección, en vez del mismo cuerpo
 * de texto que el resto de la página. */
.page-id-33 .mosaico-flip + .ilustrado-destacado .ilustrado-destacado__texto p {
	max-width: var(--ilustrado-ancho-lectura);
	font-weight: 500;
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--color-carbon);
}

.page-id-33 .mosaico-flip + .ilustrado-destacado .ilustrado-destacado__texto strong {
	color: var(--color-ambar);
	font-weight: 700;
}

.page-id-33 .mosaico-flip + .ilustrado-destacado + .ilustrado-prosa {
	background-color: var(--color-blanco);
	border: 1px solid rgba(20, 20, 20, 0.06);
	border-top: none;
	border-left: 2px solid var(--color-ambar);
	border-radius: 0 0 var(--radio-tarjeta) var(--radio-tarjeta);
	padding: 0 var(--espacio-3) var(--espacio-3);
	margin: 0 0 var(--aseo-espacio-xl);
}

.page-id-33 .mosaico-flip + .ilustrado-destacado + .ilustrado-prosa p {
	max-width: var(--ilustrado-ancho-lectura);
	margin: 0;
	padding-top: var(--espacio-2);
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--color-gris-calido);
}

.page-id-33 .mosaico-flip + .ilustrado-destacado + .ilustrado-prosa strong {
	color: var(--color-ambar);
	font-weight: 700;
}

.page-id-33 .mosaico-flip + .ilustrado-destacado + .ilustrado-prosa a {
	color: var(--color-miel-oscura);
	font-weight: 600;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

.page-id-33 .mosaico-flip + .ilustrado-destacado + .ilustrado-prosa a::after {
	content: " \2192";
}


/* === 2. "PROCESO DE NUESTRA AGENCIA SEO EN MÉXICO" — 5 etapas ==========
 * De línea punteada + hexágono sobredimensionado superpuesto a un
 * sistema de tarjetas con nodo hexagonal pequeño (mismo mecanismo que
 * .home-proceso__nodo en components.css: clip-path hexagonal, 44px,
 * ámbar sólido, sombra propia) — conserva las 5 etapas, su orden, sus
 * períodos y su contenido exacto, solo cambia la presentación. */

/* Cabecera de esta sección — mismo criterio de "mejor espaciado entre
 * título, subtítulo y tarjetas" pedido 2026-10-23. Selector por
 * adyacencia a ".ilustrado-proceso" (la rejilla de 5 etapas): es la única
 * intro de la página seguida por esa rejilla. */
/* Mismo bug de selector que el de la intro de abajo: corregido a
 * "+ .ilustrado-proceso__pista" (antes apuntaba a ".ilustrado-proceso",
 * un nivel más adentro en el DOM real, así que nunca coincidía). */
.page-id-33 .ilustrado-encabezado:has(+ .ilustrado-prosa--intro + .ilustrado-proceso__pista) {
	margin-bottom: var(--espacio-2);
}

/* "Elimina el enorme espacio blanco entre el texto introductorio y las
 * tarjetas" (pedido explícito 2026-11-02, reconfirmado 2026-11-09) —
 * BUG REAL encontrado en esta ronda: el selector original apuntaba a
 * ":has(+ .ilustrado-proceso)", pero en el DOM real el hermano inmediato
 * de esta intro es ".ilustrado-proceso__pista" (el contenedor que envuelve
 * el SVG del vuelo + la lista) — ".ilustrado-proceso" vive un nivel más
 * adentro, así que la regla nunca coincidía y la intro se quedaba con el
 * margin-bottom genérico de 48px (--espacio-4, ver .ilustrado-prosa--intro
 * en ilustrado.css), confirmado con getComputedStyle en vivo. Corregido el
 * selector; --espacio-3 (24px) es el mismo que ya usa el resto de la
 * prosa de la página entre párrafos (ver regla general al inicio de esta
 * hoja). */
.page-id-33 .ilustrado-prosa--intro:has(+ .ilustrado-proceso__pista) {
	max-width: var(--ilustrado-ancho-lectura);
	margin-bottom: var(--espacio-3);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--color-gris-calido);
}

.page-id-33 .ilustrado-proceso__linea {
	display: none;
}

.page-id-33 .ilustrado-proceso__pista {
	padding-top: 0;
}

/* TERCERA vuelta (2026-10-31, pedido explícito: "las tarjetas actuales
 * desentonan: son demasiado altas, estrechas... sus desplegables
 * producen grandes espacios vacíos"). Se abandona por completo el
 * carrusel/scroll-snap de la ronda anterior: ya no hace falta, porque el
 * panel desplegable ya NO vive dentro de cada tarjeta (ver más abajo),
 * así que una tarjeta nunca cambia de alto y una fila simple que
 * envuelve con breakpoints normales deja de tener el problema de
 * asimetría que el carrusel resolvía. Menos CSS, menos JS, mismo
 * resultado sin fila de "4 + 1 aislada": 5 columnas en escritorio ancho,
 * 3 en tablet (3+2, nunca 4+1), 1 en móvil. */
.page-id-33 .ilustrado-proceso__fila-compacta {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--espacio-3);
	/* BUG real encontrado en ronda 2026-11-09 ("corrige el gran hueco
	 * blanco... mostrarse de forma inmediata e integrada"): .ilustrado-proceso
	 * (clase base, compartida con esta) trae padding-top:150px en
	 * ilustrado.css — reservado para el hexágono+número que SOLO existe en
	 * el modo no-acordeón (ver ilustrado-proceso.php). El acordeón de esta
	 * página nunca imprime ese hexágono, así que ese padding quedaba como
	 * un hueco vacío de 150px encima de las 5 tarjetas. Se anula solo aquí,
	 * sin tocar ilustrado.css (las otras 2 páginas sí necesitan ese alto). */
	padding-top: 0;
}

@media (max-width: 1100px) {
	.page-id-33 .ilustrado-proceso__fila-compacta {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 700px) {
	.page-id-33 .ilustrado-proceso__fila-compacta {
		grid-template-columns: 1fr;
	}
}

/* Tarjeta compacta: fondo BLANCO, texto carbón, acentos ámbar sutiles
 * (pedido explícito 2026-11-02 — antes crema, ver docstring arriba). Más
 * amplia y con más aire interno ("hazlas más amplias... mejor
 * proporcionadas") para que los títulos de 2 líneas no se sientan
 * comprimidos. Nunca cambia de alto al abrir/cerrar — el contenido
 * desplegable vive en .ilustrado-proceso__panel, fuera de esta tarjeta. */
/* BUG REAL encontrado en ronda 2026-12-01 ("cambia solo los textos en
 * negro de las tarjetas... alineados a la izquierda en vez del centro"):
 * la clase base compartida ".ilustrado-proceso__paso" (ilustrado.css, para
 * el modo NO-acordeón de /consultor-seo/ y /agencia-de-posicionamiento-
 * web/) trae "text-align:center" — "align-items:flex-start" de abajo solo
 * alinea la CAJA flex, no el texto dentro de ella, así que el periodo y
 * el título (texto negro/carbón) seguían centrados por esa regla heredada
 * aunque la tarjeta ya se viera alineada a la izquierda en su contenedor.
 * Se sobreescribe solo aquí, sin tocar ilustrado.css. */
.page-id-33 .ilustrado-proceso__paso--compacto {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: var(--espacio-2);
	min-height: 108px;
	padding: var(--espacio-4) var(--espacio-3) var(--espacio-3);
	background-color: var(--color-blanco);
	border: 1px solid rgba(20, 20, 20, 0.07);
	border-radius: var(--radio-tarjeta);
	box-shadow: 0 1px 2px rgba(20, 20, 20, 0.02), 0 6px 16px rgba(20, 20, 20, 0.04);
	cursor: pointer;
	/* Solo border-color/box-shadow en la transición (pedido explícito "no
	 * uses... transformaciones grandes") — nunca transform/translateY. */
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
	.page-id-33 .ilustrado-proceso__paso--compacto:hover {
		border-color: rgba(242, 169, 0, 0.3);
		box-shadow: 0 10px 22px rgba(20, 20, 20, 0.07);
	}
}

.page-id-33 .ilustrado-proceso__paso--compacto:focus-visible {
	outline: 2px solid var(--color-ambar);
	outline-offset: 3px;
}

/* BUG real encontrado en verificación de 375px (2026-11-02): el conector
 * punteado vertical de ilustrado.css (@media max-width, pensado para unir
 * los hexágonos apilados del modo NO-acordeón de /consultor-seo/ y
 * /agencia-de-posicionamiento-web/) se aplica a `.ilustrado-proceso__paso`
 * en general — clase que la tarjeta compacta de este acordeón también
 * lleva — y queda flotando sin sentido encima del texto, porque aquí no
 * hay hexágono que conectar. Se anula solo para la tarjeta compacta de
 * esta página, sin tocar ilustrado.css (las otras 2 páginas sí necesitan
 * ese conector). */
.page-id-33 .ilustrado-proceso__paso--compacto::after {
	content: none;
}

/* Tarjeta activa: borde + sombra ámbar + barra superior fina, sin
 * transform (pedido explícito "estado activo elegante, transición breve
 * y clara"). */
.page-id-33 .ilustrado-proceso__paso--compacto[aria-expanded="true"] {
	border-color: var(--color-ambar);
	box-shadow: 0 10px 24px rgba(242, 169, 0, 0.16);
}

.page-id-33 .ilustrado-proceso__paso--compacto[aria-expanded="true"]::before {
	content: "";
	position: absolute;
	top: -1px;
	left: var(--espacio-2);
	right: var(--espacio-2);
	height: 2px;
	background-color: var(--color-ambar);
	border-radius: 2px;
}

/* Ronda 2026-11-23, pedido explícito: "sustituye todos los acentos
 * marrones/café de esta sección por el amarillo ámbar oficial... no
 * inventes otro tono" — el periodo usaba var(--color-miel-oscura)
 * (#8A5F00, café), pasa al ámbar de marca (#F2A900). Para compensar el
 * menor contraste del ámbar puro sobre blanco en texto pequeño, sube de
 * peso y usa mayúsculas con tracking — más legible sin cambiar el color
 * pedido (ver nota de accesibilidad en el resumen de entrega: un texto de
 * 13px en #F2A900 sobre blanco no alcanza el contraste AA incluso en
 * negrita; se avisa explícitamente, no se oculta). */
.page-id-33 .ilustrado-proceso__paso--compacto .ilustrado-proceso__tiempo {
	min-height: 0;
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-ambar);
}

.page-id-33 .ilustrado-proceso__paso--compacto h3 {
	margin: 0;
	padding-right: var(--espacio-3);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-carbon);
}

/* Indicador minimalista de expansión: cruz fina ámbar que pierde su
 * barra vertical al abrir (queda un guion = "menos"). CSS puro, sin
 * ícono nuevo. */
.page-id-33 .ilustrado-proceso__paso--compacto .ilustrado-proceso__chevron {
	position: absolute;
	top: var(--espacio-2);
	right: var(--espacio-2);
	width: 14px;
	height: 14px;
}

.page-id-33 .ilustrado-proceso__paso--compacto .ilustrado-proceso__chevron::before,
.page-id-33 .ilustrado-proceso__paso--compacto .ilustrado-proceso__chevron::after {
	content: "";
	position: absolute;
	background-color: var(--color-ambar);
	transition: opacity 0.2s ease;
}

.page-id-33 .ilustrado-proceso__paso--compacto .ilustrado-proceso__chevron::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
}

.page-id-33 .ilustrado-proceso__paso--compacto .ilustrado-proceso__chevron::after {
	left: 50%;
	top: 0;
	width: 2px;
	height: 100%;
	margin-left: -1px;
}

.page-id-33 .ilustrado-proceso__paso--compacto[aria-expanded="true"] .ilustrado-proceso__chevron::after {
	opacity: 0;
}

/* Panel compartido, a ancho completo, debajo de toda la fila (pedido
 * explícito: "no dentro de una columna estrecha"). Superficie blanca
 * para diferenciarse de las tarjetas crema de arriba.
 *
 * CUARTA vuelta (2026-11-30, pedido explícito: "necesito una animación en
 * el despliegue porque es muy de golpe... algo que la haga más orgánica"):
 * la vuelta anterior mostraba/ocultaba el panel solo con el atributo
 * `hidden`, sin transición — a propósito, para "evitar saltos". En la
 * práctica se sintió como un salto brusco (toda la página se movía de
 * golpe), así que se revierte: ".ilustrado-proceso__panel" pasa a ser el
 * ANIMADOR (display:grid, una sola fila que interpola de 0fr a 1fr — la
 * técnica estándar para animar a un alto "auto" sin medir con JS) y
 * ".ilustrado-proceso__panel-interior" (nuevo, ver ilustrado-proceso.php)
 * es quien ahora lleva el fondo/borde/padding/sombra y el overflow:hidden
 * que recorta el contenido mientras el track mide 0fr. */
.page-id-33 .ilustrado-proceso__panel-grupo {
	margin-top: var(--espacio-3);
}

.page-id-33 .ilustrado-proceso__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-id-33 .ilustrado-proceso__panel.is-abierto {
	grid-template-rows: 1fr;
}

/* Fondo BLANCO (pedido explícito 2026-11-09: "el fondo del cuadro
 * desplegado debe ser blanco, NO arena"). La diferenciación visual contra
 * las tarjetas viene del borde izquierdo ámbar (mismo recurso ya usado en
 * el resto de notas/cierres de esta página, ver "Qué incluye" y la nota
 * final de este Proceso más abajo) — el panel se lee como parte del mismo
 * sistema visual, no un parche aparte. */
.page-id-33 .ilustrado-proceso__panel-interior {
	overflow: hidden;
	min-height: 0;
	background-color: var(--color-blanco);
	border: 1px solid rgba(20, 20, 20, 0.06);
	border-left: 2px solid var(--color-ambar);
	border-radius: var(--radio-tarjeta);
	box-shadow: 0 1px 2px rgba(20, 20, 20, 0.02), 0 6px 16px rgba(20, 20, 20, 0.04);
}

.page-id-33 .ilustrado-proceso__panel-interior > * {
	padding-left: calc(var(--espacio-4) - 2px);
	padding-right: var(--espacio-4);
}

.page-id-33 .ilustrado-proceso__panel-interior > *:first-child {
	padding-top: var(--espacio-4);
}

.page-id-33 .ilustrado-proceso__panel-interior > *:last-child {
	padding-bottom: var(--espacio-4);
}

/* BUG REAL encontrado en ronda 2026-11-23 ("no uses el periodo como único
 * encabezado... el protagonista debe ser el título real de la etapa"): el
 * panel nunca imprimía el título real (ver fix en ilustrado-proceso.php,
 * $titulo_panel) — ahora es el encabezado principal, en ámbar y mayor
 * peso/tamaño; el periodo baja a dato secundario justo debajo, en carbón
 * atenuado (nunca ámbar: repetir el mismo color en dos líneas seguidas
 * quitaba la jerarquía "protagonista vs. secundario" que pide esta
 * ronda). */
.page-id-33 .ilustrado-proceso__panel-titulo {
	margin: 0 0 var(--espacio-1);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-ambar);
}

.page-id-33 .ilustrado-proceso__panel-etiqueta {
	margin: 0 0 var(--espacio-2);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-gris-calido);
}

.page-id-33 .ilustrado-proceso__panel p {
	max-width: 760px;
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--color-carbon);
}

/* Ronda 2026-11-23: sustituye el café (miel-oscura) por el ámbar oficial
 * en las negritas del panel — ver nota de accesibilidad arriba. */
.page-id-33 .ilustrado-proceso__panel strong {
	color: var(--color-ambar);
	font-weight: 700;
}

/* Texto informativo debajo del Proceso (pedido explícito: "sustituye la
 * actual franja amarilla por un bloque editorial minimalista, blanco
 * cálido o gris muy suave... un pequeño acento ámbar y jerarquía
 * clara"). Mismo recurso ya usado en otras bandas de esta página: fondo
 * claro, una sola línea ámbar fina a la izquierda, sin hexágono/ícono.
 * Selector por adyacencia: .ilustrado-proceso__pista es el único
 * elemento de la página seguido por esta ilustrado-destacado concreta
 * (la de "Qué incluye" usa .mosaico-flip + ..., ya scoped aparte). */
/* Estilo editorial discreto y coherente con el resto de la página
 * (pedido explícito 2026-11-02) — fondo blanco + línea ámbar fina, mismo
 * recurso que la nota de cierre de "Qué incluye" arriba, en vez del
 * crema de la ronda anterior (la caja ya vive sobre una franja blanca, y
 * las tarjetas del Proceso también son blancas ahora: crema aquí se
 * sentía un color de más). */
.page-id-33 .ilustrado-proceso__pista + .ilustrado-destacado {
	display: block;
	background-color: var(--color-blanco);
	border: 1px solid rgba(20, 20, 20, 0.06);
	border-left: 2px solid var(--color-ambar);
	border-radius: var(--radio-tarjeta);
	padding: var(--espacio-3) var(--espacio-4);
	margin-top: var(--espacio-4);
}

.page-id-33 .ilustrado-proceso__pista + .ilustrado-destacado .ilustrado-destacado__hex,
.page-id-33 .ilustrado-proceso__pista + .ilustrado-destacado .ilustrado-destacado__linea {
	display: none;
}

.page-id-33 .ilustrado-proceso__pista + .ilustrado-destacado .ilustrado-destacado__texto p {
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-carbon);
}

/* Ronda 2026-11-23: mismo criterio de sustitución café→ámbar que el resto
 * de la sección — ver nota de accesibilidad arriba. */
.page-id-33 .ilustrado-proceso__pista + .ilustrado-destacado .ilustrado-destacado__texto strong {
	color: var(--color-ambar);
	font-weight: 700;
}


/* === 3. "PAQUETES DE SEO MÉXICO" — SEGUNDA vuelta, 2026-10-23 ==========
 * Pedido explícito de esta ronda: quitar POR COMPLETO la insignia
 * "Recomendado" (ver ilustrado-tarjetas.php — ya no la imprime en
 * ningún caso), e "información escaneable... resumir en bullets
 * elegantes". El contenido real de cada paquete se reestructuró en el
 * post (misma información, ni una palabra inventada): un primer <p> de
 * una línea (para quién es el paquete), 3 <p> cortos como bullets (qué
 * incluye) y un último <p> con la nota de alcance — ver resumen de
 * entrega. El detector de "tarjetas" ya concatenaba TODOS los <p> de
 * cada tarjeta (ver apis_ilustrado_detectar_grid_envuelto() en
 * inc/diseno-ilustrado.php), así que no hizo falta tocar PHP: los
 * estilos de abajo distinguen el primer/último <p> del resto por
 * posición (:first-of-type / :last-of-type), sin depender de ninguna
 * clase nueva en el contenido. */

.page-id-33 .ilustrado-prosa--intro:has(+ .ilustrado-tarjetas) {
	max-width: var(--ilustrado-ancho-lectura);
	margin-bottom: var(--aseo-espacio-xl);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--color-gris-calido);
}

.page-id-33 .ilustrado-tarjetas {
	gap: var(--espacio-4);
}

/* BUG real encontrado en ronda 2026-11-16 ("todavía siguen los hexágonos
 * negros con iconos"): la vuelta anterior solo ocultaba las rayas
 * decorativas (.ilustrado-tarjeta__rayas), nunca el hexágono+icono — se
 * quedó visible porque .ilustrado-tarjeta__hex nunca se tocó. Se oculta
 * aquí, solo en esta página (componente compartido con "Formatos de
 * trabajo" en /consultor-seo/, que sí necesita su hexágono). El
 * padding-top:124px de ilustrado.css existía solo para reservar el alto
 * del hexágono — sin hexágono, es el mismo hueco vacío de 150px que ya se
 * encontró y corrigió en Proceso: se regresa al padding normal de la
 * tarjeta. Un acento ámbar fino arriba sustituye al hexágono como único
 * "vivo" de color de la tarjeta, premium y minimalista. */
.page-id-33 .ilustrado-tarjeta__hex {
	display: none;
}

/* Ronda 2026-11-30, pedido explícito: "justifica mejor el espacio del
 * texto porque se ven amontonadas" — más padding interno (antes solo
 * var(--espacio-3)=24px, ahora 32/40px) para que el texto respire más
 * dentro de la tarjeta. */
.page-id-33 .ilustrado-tarjeta {
	position: relative;
	padding: var(--espacio-4) var(--espacio-3) var(--espacio-3);
	border: 1px solid rgba(20, 20, 20, 0.06);
	border-radius: var(--radio-tarjeta) var(--radio-tarjeta) var(--radio-tarjeta) var(--radio-tarjeta);
	box-shadow: 0 1px 2px rgba(20, 20, 20, 0.03), 0 10px 24px rgba(20, 20, 20, 0.06);
	transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
	overflow: hidden;
}

.page-id-33 .ilustrado-tarjeta::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background-color: var(--color-ambar);
}

@media (hover: hover) {
	.page-id-33 .ilustrado-tarjeta:hover {
		border-color: rgba(242, 169, 0, 0.3);
		box-shadow: 0 20px 40px rgba(20, 20, 20, 0.1);
		transform: translateY(-4px);
	}
}

/* Ronda 2026-11-30, pedido explícito: "los títulos en amarillo" — antes
 * carbón (heredado), ahora ámbar de marca. */
/* Ronda 2026-12-01 (4ª vuelta), pedido explícito: ritmo título→descripción
 * de 14-18px — var(--espacio-2)=16px, en las 3 tarjetas por igual. */
.page-id-33 .ilustrado-tarjeta h3 {
	font-size: 1.375rem;
	font-weight: 700;
	margin-bottom: var(--espacio-2);
	color: var(--color-ambar);
}

/* "Retira las pequeñas líneas decorativas que ocupan espacio dentro de
 * las tarjetas" (pedido explícito 2026-10-23) — las rayas de 3 colores
 * son un componente compartido (ilustrado-tarjetas.php, también usado
 * por "Formatos de trabajo" en /consultor-seo/): se ocultan solo aquí por
 * CSS en vez de quitarlas del PHP, así /consultor-seo/ no cambia. El
 * espacio que dejaban libre ahora lo da el margin-bottom del h3 de
 * arriba, no un hueco vacío. */
.page-id-33 .ilustrado-tarjeta__rayas {
	display: none;
}

.page-id-33 .ilustrado-tarjeta p {
	margin-bottom: 0;
}

.page-id-33 .ilustrado-tarjeta p:first-of-type {
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--color-carbon);
	margin-bottom: 0;
}

/* Ronda 2026-12-01 (4ª vuelta), pedido explícito: "el texto carece de una
 * distribución uniforme... no aumentes artificialmente la altura" — se
 * retira el min-height:110px + flex de la vuelta anterior (reservaba una
 * caja fija de 4 líneas en el primer párrafo para igualar la altura a la
 * que arrancaban los bullets entre tarjetas, pero dejaba hueco vacío
 * artificial en "Avanzado", que solo ocupa 2 líneas). La alineación entre
 * tarjetas ya la da gratis el grid: .ilustrado-tarjeta es flex-column
 * (ver ilustrado.css) y un ítem de grid se estira por default al alto de
 * la fila (align-items:stretch implícito en .ilustrado-tarjetas), así que
 * las 3 tarjetas ya miden lo mismo entre sí sin necesidad de forzar el
 * alto del párrafo — el único elemento con altura forzada es la nota
 * final (margin-top:auto más abajo), que es la que de verdad debe quedar
 * a la misma altura en las 3. */

/* Ronda 2026-12-01 (4ª vuelta), pedido explícito: "las listas de
 * beneficios a 20-24px de sus respectivas descripciones... separación
 * uniforme entre elementos" — 22px cubre ambos casos a la vez: es el
 * espacio desde el párrafo descriptivo (que ya no trae su propio
 * margin-bottom, ver arriba) hasta el primer bullet, y el mismo valor se
 * repite entre bullets consecutivos para que el ritmo sea uniforme. */
.page-id-33 .ilustrado-tarjeta p:not(:first-of-type):not(:last-of-type) {
	position: relative;
	padding-left: 1.2em;
	margin-top: 22px;
	line-height: 1.6;
}

.page-id-33 .ilustrado-tarjeta p:not(:first-of-type):not(:last-of-type)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 6px;
	height: 6px;
	background-color: var(--color-ambar);
}

.page-id-33 .ilustrado-tarjeta p:last-of-type {
	margin-top: auto;
	padding-top: var(--espacio-3);
	border-top: 1px solid rgba(20, 20, 20, 0.08);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--color-gris-calido);
}

/* TERCERA vuelta, 2026-10-26: el párrafo de cierre pasa de texto suelto a
 * una franja de orientación comercial — fondo ámbar muy diluido (5%,
 * mismo criterio que diagnostico-servicios.css) para distinguirse tanto
 * del blanco de las tarjetas como del crema de la sección, ancho
 * completo (franja horizontal, no columna angosta), con el enlace real
 * a /servicios/#diagnostico (agregado al post_content) resaltado en
 * miel oscura — nunca se inventó un destino nuevo, es el ancla real del
 * formulario de diagnóstico en /servicios/. */
.page-id-33 .ilustrado-tarjetas + .ilustrado-prosa--cierre {
	max-width: none;
	margin-top: var(--espacio-4);
	padding: var(--espacio-3) var(--espacio-4);
	background-color: color-mix(in srgb, var(--color-ambar) 5%, var(--color-blanco));
	border: 1px solid rgba(242, 169, 0, 0.18);
	border-radius: var(--radio-tarjeta);
}

.page-id-33 .ilustrado-tarjetas + .ilustrado-prosa--cierre p {
	max-width: var(--ilustrado-ancho-lectura);
	margin: 0 auto;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-carbon);
	text-align: center;
}

.page-id-33 .ilustrado-tarjetas + .ilustrado-prosa--cierre a {
	font-weight: 600;
	color: var(--color-miel-oscura);
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 760px) {
	.page-id-33 .ilustrado-tarjetas + .ilustrado-prosa--cierre p {
		text-align: left;
	}
}


/* === 4. "POR QUÉ ELEGIR A APIS COMO TU AGENCIA SEO" — zigzag editorial,
 * CUARTA vuelta (2026-11-16) ===============================================
 * Pedido explícito: "ya están listas las 3 imágenes nuevas que deben
 * reemplazar las actuales... reordena esta sección como zig-zag: bloque 1
 * texto izq/imagen der, bloque 2 imagen izq/texto der, bloque 3 texto
 * izq/imagen der". Ahora son exactamente 3 filas, cada una con su propia
 * fotografía real (ver $fotos_zigzag en ilustrado-prosa.php) — ya no
 * queda ningún espacio reservado vacío: las 3 fotos nuevas sustituyen por
 * completo tanto a la única foto real de la vuelta anterior como a los 3
 * rectángulos reservados que la acompañaban. */

.page-id-33 .ilustrado-prosa-zigzag {
	display: flex;
	flex-direction: column;
	gap: var(--aseo-espacio-xl);
}

.page-id-33 .ilustrado-prosa-zigzag__fila {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--espacio-4);
}

.page-id-33 .ilustrado-prosa-zigzag__fila--invertida {
	grid-template-columns: 1fr 1fr;
}

.page-id-33 .ilustrado-prosa-zigzag__fila--invertida .ilustrado-prosa-zigzag__texto {
	grid-column: 2;
	grid-row: 1;
}

.page-id-33 .ilustrado-prosa-zigzag__fila--invertida .ilustrado-prosa-zigzag__visual {
	grid-column: 1;
	grid-row: 1;
}

.page-id-33 .ilustrado-prosa-zigzag__texto p {
	max-width: none;
	margin: 0 0 var(--espacio-2);
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--color-carbon);
}

.page-id-33 .ilustrado-prosa-zigzag__texto p:last-child {
	margin-bottom: 0;
}

.page-id-33 .ilustrado-prosa-zigzag__texto strong {
	color: var(--color-miel-oscura);
}

/* Acento ámbar único y discreto por bloque (pedido explícito 2026-11-23:
 * "añade como máximo una línea/acento ámbar muy discreto por bloque;
 * nada de grandes recuadros") — una línea fina arriba del párrafo, no un
 * recuadro ni un borde completo. */
.page-id-33 .ilustrado-prosa-zigzag__texto::before {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin-bottom: var(--espacio-2);
	background-color: var(--color-ambar);
}

/* BUG REAL encontrado en ronda 2026-11-23 ("unifica proporción y tamaño
 * visual de las tres fotografías con contenedores horizontales del mismo
 * formato... object-fit:cover"): ilustrado-imagen-hexagono.php usaba una
 * caja cuadrada con object-fit:contain (ver fix en ilustrado-prosa.php) —
 * ahora cada visual es un <img> directo dentro de una caja horizontal 4:3
 * uniforme en las 3 filas, con el mismo radio discreto que el resto de
 * tarjetas de la página, sin ningún efecto/sombra grande. */
/* Ronda 2026-11-30, pedido explícito: "las imágenes se ven bien, solo
 * hazlas más chicas y alineadas al texto" — antes ocupaban el 100% de su
 * columna (~472px en escritorio ancho); ahora un tope de 380px y pegadas
 * al lado que da hacia el texto (no centradas en su columna), para que se
 * sientan parte de la misma pareja editorial y no una caja suelta. */
.page-id-33 .ilustrado-prosa-zigzag__visual--foto {
	aspect-ratio: 4 / 3;
	width: 100%;
	max-width: 380px;
	margin-left: 0;
	margin-right: auto;
	border-radius: var(--radio-tarjeta);
	overflow: hidden;
}

.page-id-33 .ilustrado-prosa-zigzag__fila--invertida .ilustrado-prosa-zigzag__visual--foto {
	margin-left: auto;
	margin-right: 0;
}

.page-id-33 .ilustrado-prosa-zigzag__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 760px) {
	.page-id-33 .ilustrado-prosa-zigzag {
		gap: var(--espacio-4);
	}

	.page-id-33 .ilustrado-prosa-zigzag__fila,
	.page-id-33 .ilustrado-prosa-zigzag__fila--invertida {
		grid-template-columns: 1fr;
	}

	.page-id-33 .ilustrado-prosa-zigzag__fila--invertida .ilustrado-prosa-zigzag__texto,
	.page-id-33 .ilustrado-prosa-zigzag__fila--invertida .ilustrado-prosa-zigzag__visual {
		grid-column: 1;
		grid-row: auto;
	}
}

/* --- Cierre de la página (enlaces a consultor SEO/posicionamiento web +
 * CTA final) — ronda 2026-11-23, pedido explícito: "el cuadro actual está
 * demasiado estrecho y centrado... amplíalo a un ancho equivalente al
 * contenedor principal... distribuye en dos columnas: texto a la
 * izquierda y CTA a la derecha". BUG REAL de la vuelta anterior: un
 * max-width:640px centrado lo dejaba como una tarjetita angosta en medio
 * de una página de 1200px — se quita el max-width (ancho completo del
 * .contenedor, igual que el resto de bandas de cierre de esta página,
 * p. ej. ".ilustrado-tarjetas + .ilustrado-prosa--cierre" arriba) y pasa a
 * grid de 2 columnas en escritorio (ver $bloque_cta en ilustrado-prosa.php,
 * que ahora separa el párrafo del botón del resto del texto). */
.page-id-33 .ilustrado-prosa-zigzag + .ilustrado-prosa--cierre {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--espacio-4);
	max-width: none;
	margin: var(--aseo-espacio-xl) 0 0;
	padding: var(--espacio-4);
	background-color: var(--color-blanco);
	border: 1px solid rgba(20, 20, 20, 0.08);
	border-radius: var(--radio-tarjeta);
	box-shadow: 0 1px 2px rgba(20, 20, 20, 0.02), 0 4px 12px rgba(20, 20, 20, 0.03);
	text-align: left;
}

.page-id-33 .ilustrado-prosa--cierre__texto p {
	max-width: 70ch;
	margin: 0 0 var(--espacio-2);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-carbon);
}

.page-id-33 .ilustrado-prosa--cierre__texto p:last-child {
	margin-bottom: 0;
}

.page-id-33 .ilustrado-prosa--cierre__texto a {
	color: var(--color-miel-oscura);
	font-weight: 600;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

.page-id-33 .ilustrado-prosa--cierre__texto strong {
	color: var(--color-ambar);
}

.page-id-33 .ilustrado-prosa--cierre__cta {
	flex-shrink: 0;
}

.page-id-33 .ilustrado-prosa--cierre__cta p {
	margin: 0;
}

@media (max-width: 760px) {
	.page-id-33 .ilustrado-prosa-zigzag + .ilustrado-prosa--cierre {
		grid-template-columns: 1fr;
		text-align: left;
	}

	.page-id-33 .ilustrado-prosa--cierre__cta .btn {
		width: 100%;
		text-align: center;
	}
}