/*
 * "Diseño ilustrado" — CSS exclusivo de /consultor-seo/ (ver
 * CLAUDE.md "Decisión: diseño ilustrado" e inc/diseno-ilustrado.php).
 * Todas las clases llevan el prefijo "ilustrado-" a propósito, para que
 * no puedan pisar ni heredar nada de assets/css/components.css — este
 * archivo solo se encola cuando el campo "Usar diseño ilustrado" está
 * activo (ver functions.php, apis_enqueue_assets()), así que ninguna
 * otra página del sitio paga su peso ni su CSS.
 *
 * Reutiliza tokens de variables.css (tipografía, espaciado, color,
 * [data-aparecer]) para todo — no se define ninguna paleta propia aquí.
 * Los únicos colores usados en este archivo son los 7 tokens de
 * variables.css (--color-crema/blanco/ambar/carbon/violeta/miel-oscura/
 * gris-calido), nunca un hex suelto. Las animaciones de aparición usan
 * ese mismo sistema (data-aparecer + .aparecer--visible desde main.js),
 * nunca una animación propia aparte, para heredar el respeto a
 * prefers-reduced-motion sin repetirlo aquí.
 */

/* ---- Reglas compartidas (ver "Reglas compartidas" en docs/DISENO-
 * ILUSTRADO.md) — token único de ancho de lectura para todo párrafo o
 * subtítulo bajo un <h2> en cualquier landing con el modo ilustrado
 * activo. En px, no en ch, a propósito (2026-10-12, 2da vuelta): a 72ch
 * los párrafos medían 727px contra los 1168px de las tarjetas/la nota
 * destacada de la misma sección — una diferencia visible de ancho que
 * no se resuelve con unidades relativas al tamaño de fuente. 960px deja
 * los párrafos visiblemente más cerca del ancho de las rejillas sin
 * igualarlo (las rejillas siguen a ancho completo). Las tarjetas/
 * rejillas (ilustrado-tarjetas-icono, ilustrado-destacado) nunca usan
 * este token: ocupan el ancho completo de su contenedor — igual que
 * cualquier párrafo que venga DESPUÉS de una de esas rejillas dentro de
 * la misma sección (ver .ilustrado-prosa--completo más abajo y "Ancho
 * de texto" en docs/DISENO-ILUSTRADO.md). */
:root {
	--ilustrado-ancho-lectura: 960px;
}

/* Afinado al valor exacto de marca (docs/BRAND.md § Animación: "cada
 * bloque sube 16px y aparece en 0.4s") — variables.css usa 20px/0.45s
 * como default sitewide, no se toca ese archivo (afectaría las otras
 * páginas); como ilustrado.css SOLO se encola en esta página, esta regla
 * no sale de aquí. El escalonado de 70ms entre hermanos ya lo pone
 * main.js (está en el rango de 60-80ms pedido), sin cambios. */
[data-aparecer] {
	transform: translateY(16px);
	transition-duration: 0.4s;
}

/* Migas de pan con el mismo fondo que el hero (ahora blanco en esta
 * página) — mismo criterio que las variantes v-b/v-c/v-d en
 * components.css, pero acá vía el flag de diseño ilustrado en vez de una
 * variante visual. */
.migas-pan {
	background-color: var(--color-blanco);
}

/* ---- Hexágono regular (SVG inline, ver graphics/hexagono-regular.php) ----
 * Un hexágono de ancho W tiene alto H = W × 1.1547 (aspect-ratio 866/1000).
 * El <svg> siempre se dimensiona con esta regla — nunca con clip-path.
 * Solo se usa para contornos decorativos sueltos (hero, imagen de "Qué
 * hace"): los hexágonos SÓLIDOS de esta página son las celdas de panal
 * reales (template-parts/graphics/celda.php), no este componente. */

.hexagono-regular {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 866 / 1000;
}

/* ---- Patrón de panal en esquina (ver graphics/panal-patron.svg) ----
 * Movido a components.css 2026-10-23 (pedido explícito: "ronda de ajustes
 * globales... reutiliza exactamente la misma lógica visual del patrón ya
 * aprobado" en secciones de Inicio y Servicios que no cargan esta hoja):
 * .ilustrado-patron y .ilustrado-seccion--patron pasan a components.css,
 * que SÍ se carga en todo el sitio, para no tener que encolar las ~1400
 * líneas de ilustrado.css en páginas que no usan el resto de este sistema.
 * Ambas clases se quedan funcionando igual aquí (dependen de
 * apis-components, que ya es dependencia de esta hoja) — no se duplica
 * nada, solo se reubica. */

/* La variante "vida" para secciones con tarjetas-icono/indicadores
 * (hexágono de contorno + celdas ámbar sueltas, activa sola cuando
 * $tiene_grid) se retiró 2026-10-13 — en sus 2 usos reales terminó
 * encimándose con contenido (el hexágono de contorno cortado por el
 * borde de la sección, la celda suelta sobre un párrafo o una tarjeta) —
 * ver "Regla fija: ningún elemento visual puede interferir con texto ni
 * imagen" en docs/DISENO-ILUSTRADO.md. Esas secciones usan ahora el
 * patrón de esquina normal (`.ilustrado-patron--arriba-derecha` etc.,
 * reglas de arriba), sin piezas sueltas de más. */

/* ---- Encabezado de sección (etiqueta + h2 + rayas.svg) ----
 * Misma estructura que .encabezado-seccion de section-header.php (usado
 * en "Prueba landing"): etiqueta en bloque simple arriba, h2, rayas a
 * tamaño completo (200px, sin escalar) debajo del título — nunca entre
 * la etiqueta y el título. Corregido 2026-10-10: antes la etiqueta era
 * inline-flex en columna con la raya metida adentro, a 56px, una
 * aplicación propia distinta a la del resto del sitio. */

.ilustrado-encabezado {
	margin-bottom: var(--espacio-3);
}

.ilustrado-encabezado__etiqueta {
	display: block;
	font-family: var(--font-cuerpo);
	font-weight: 600;
	/* 15px, no el --tamano-etiqueta sitewide (12px) — agrandado
	 * 2026-10-12 (2da vuelta), solo en este archivo (no se toca
	 * variables.css, section-header.php sigue en 12px). Mismo
	 * letter-spacing. var(--color-miel-oscura) ya da contraste AA sobre
	 * blanco y sobre crema (es el mismo color que usan los enlaces de
	 * texto del sitio sobre ambos fondos). */
	font-size: 15px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-miel-oscura);
	margin-bottom: var(--espacio-1);
}

.ilustrado-encabezado__rayas {
	margin-top: var(--espacio-1);
}

.ilustrado-encabezado__titulo,
.ilustrado-encabezado h2 {
	margin-bottom: 0;
	text-align: left;
}

/* ---- Secciones y franjas alternadas (crema/blanco, nunca otro color) ---- */

.ilustrado-seccion {
	padding-block: var(--espacio-6);
}

.ilustrado-seccion--franja {
	background-color: var(--color-blanco);
}

.ilustrado-prosa {
	text-align: left;
}

.ilustrado-prosa p {
	max-width: var(--ilustrado-ancho-lectura);
}

.ilustrado-prosa--intro {
	margin-bottom: var(--espacio-4);
}

.ilustrado-prosa--cierre {
	margin-top: var(--espacio-4);
}

/* Botón de CTA de cierre (p. ej. "Cotiza tu posicionamiento" en
 * /agencia-de-posicionamiento-web/): 40px de separación respecto al
 * párrafo anterior — antes heredaba el margin-bottom:16px genérico de
 * cualquier <p> (ver variables.css), que colapsa con el margin-top:0
 * del propio <p> del botón y deja solo 16px, no los 40px pedidos
 * (bug real, 2026-10-13). El botón ya queda alineado a la izquierda
 * con el resto del texto del bloque por herencia normal del flujo
 * (mismo contenedor, sin position/float) — no hace falta tocar eso. */
.ilustrado-prosa--cierre p:has(> a.btn) {
	margin-top: 40px;
}

/* Cualquier párrafo que venga DESPUÉS de una rejilla a ancho completo
 * (tarjetas-icono o la nota destacada) dentro de la misma sección de
 * prosa — ver $paso_ancho_completo en ilustrado-prosa.php/ilustrado-
 * precios.php. Sin esto, ese párrafo se quedaba a 727-960px mientras la
 * rejilla de arriba mide el ancho completo del contenedor (~1168px),
 * una diferencia visible (bug real, 2026-10-12, 2da vuelta). */
.ilustrado-prosa--completo p {
	max-width: none;
}

/* Listas con viñetas dentro de prosa (p. ej. "Qué incluye una agencia de
 * servicios SEO" en /agencia-seo-mexico/, cada <li> con un <strong> al
 * inicio) — el <strong> del contenido se conserva tal cual, esto solo
 * reemplaza el punto por defecto del navegador por un marcador de celda
 * carbón chica, con espaciado cómodo entre líneas. */
.ilustrado-prosa ul {
	list-style: none;
	margin: var(--espacio-3) 0;
	padding: 0;
	max-width: var(--ilustrado-ancho-lectura);
}

.ilustrado-prosa ul li {
	position: relative;
	padding-left: 26px;
}

.ilustrado-prosa ul li + li {
	margin-top: var(--espacio-2);
}

.ilustrado-prosa ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 10px;
	height: 10px;
	background-color: var(--color-carbon);
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* ---- Hero ilustrado: sin imagen, a lo ancho, panal real de marca ----
 * El panal es el mismo fondo-panal-hero.png / -izquierda.png que usa el
 * hero normal (ver .landing-hero::before en components.css) — esta clase
 * no agrega NADA propio, solo hereda ese mecanismo compartido porque la
 * sección ya lleva class="landing-hero". */

.landing-hero--ilustrado {
	/* La página debe alternar blanco/crema desde arriba (hero blanco, qué
	 * hace crema, ...) — antes el hero heredaba el crema del .landing-hero
	 * base (pensado para el hero normal) y se fundía con "Qué hace",
	 * también crema, sin ningún límite visible entre ambos. */
	background-color: var(--color-blanco);
	padding-top: 28px;
	padding-bottom: var(--espacio-4);
}

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

.ilustrado-hero {
	/* BUG real, medido con getBoundingClientRect (2026-10-10): esta misma
	 * etiqueta lleva class="contenedor ilustrado-hero" — un solo elemento,
	 * no dos anidados. .contenedor ya centra una caja de 1200px con
	 * margin-inline:auto; la regla que había acá (max-width:56rem +
	 * margin-inline:0) pisaba ESA misma caja, le quitaba el auto-centrado
	 * y la dejaba pegada al borde izquierdo real del viewport (left:0),
	 * no al borde de .contenedor. Resultado medido a 1440px: h1 en
	 * left:16 contra left:136 de las migas de pan (120 de .contenedor +
	 * 16 de padding). No se toca max-width ni margin-inline aquí: con
	 * .contenedor solo, este bloque ya queda exactamente alineado con las
	 * migas y con el resto del sitio. */
	position: relative;
	z-index: 1;
	text-align: left;
}

.ilustrado-hero h1 {
	margin-bottom: var(--espacio-2);
	text-align: left;
	/* Las 3 celdas sueltas del hero (.landing-hero__celda--uno/dos/tres)
	 * están en % sobre TODA la sección, asumiendo que el texto deja libre
	 * el lado derecho — cierto con títulos cortos ("Consultor SEO en
	 * México"), falso con uno largo de una sola línea ("Agencia de
	 * posicionamiento web"), que llegaba a tocar celda--uno (right:32%)
	 * a 1440px (bug real, medido con getBoundingClientRect, 2026-10-12
	 * 6ta vuelta: el hexágono quedaba encima de la "w" de "web"). 820px
	 * deja ~280px libres antes de esa celda en cualquier título de una
	 * línea que quepa ahí, sin forzar un salto de línea en los títulos
	 * cortos que ya funcionaban. */
	max-width: 820px;
}

/* ---- "Qué hace" a dos columnas: texto + imagen hexagonal ---- */

.ilustrado-prosa-con-imagen {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: var(--espacio-4);
	align-items: center;
}

/* Columna derecha sin imagen real (ruta genérica, ver placeholder_
 * decorativo en ilustrado-prosa.php) — una altura mínima para que el
 * patrón de fondo y las 2 celdas sueltas tengan dónde respirar, en vez
 * de un hueco de 0px que colapsa toda la columna. */
.ilustrado-prosa-con-imagen__imagen--vacia {
	min-height: 280px;
}

/* ---- Imagen hexagonal (foto de "Qué hace" / Precios), sola, sin marco ----
 * El archivo ya trae su propio hexágono y borde ámbar dibujados adentro
 * (cuadrado de 1254×1254, el hexágono inscrito con margen) — usarla tal
 * cual, sin clip-path propio encima: un segundo recorte hexagonal sobre
 * uno ya existente los desalineaba y la imagen se veía redonda/incompleta
 * (corregido 2026-10-10). La caja es cuadrada (1/1, no 866/1000) y
 * centra la imagen completa con object-fit:contain. */

.ilustrado-hexagono-imagen {
	position: relative;
	z-index: 1;
	max-width: 460px;
	width: 100%;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ilustrado-hexagono-imagen__caja {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ilustrado-hexagono-imagen__foto {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 3 celdas sueltas de marca flotando sobre el patrón, alrededor de la
 * imagen — mismo patrón que .landing-hero__celdas del hero normal
 * (position:absolute sobre TODA la sección, no la columna de imagen, así
 * el patrón y las celdas se mantienen aunque no haya imagen). 2 ámbar +
 * 1 violeta, bien separadas para no tocar imagen ni texto.
 *
 * BUG real, 2026-10-12 2da vuelta: con inset:0 las celdas se posicionan
 * en % sobre el ANCHO DE LA SECCIÓN completa (borde a borde de la
 * pantalla), no sobre el .contenedor centrado y más angosto — en
 * pantallas anchas una celda con right:6% caía fuera del contenedor
 * visual, pegada al borde de la ventana ("hexágono ámbar fuera del
 * contenedor" en el cierre de /agencia-seo-mexico/). Esta caja ahora
 * tiene el mismo ancho máximo y centrado que .contenedor, así el % de
 * cada celda es relativo al mismo bloque donde vive el texto/la imagen. */
.ilustrado-prosa-con-imagen__celdas {
	position: absolute;
	inset: 0;
	max-width: var(--ancho-maximo-contenido);
	margin-inline: auto;
	z-index: 1;
	pointer-events: none;
}

/* Variante ancladas a la imagen (2026-10-12 3ra vuelta) — ver
 * ilustrado-prosa.php: cuando SÍ hay imagen, las celdas viven dentro del
 * wrapper de la imagen en vez de a nivel de sección, así el % de cada
 * una es relativo al tamaño de la imagen (siempre consistente) y no al
 * alto de la sección completa (que varía mucho entre secciones cortas y
 * largas — en una sección larga, con la imagen centrada verticalmente,
 * una celda posicionada por % de la sección caía en el hueco debajo de
 * la imagen, lejos de todo — "hexágono suelto" en el cierre de
 * /agencia-seo-mexico/, bug real). */
.ilustrado-prosa-con-imagen__celdas--anclada {
	max-width: none;
	margin-inline: 0;
}

.ilustrado-prosa-con-imagen__imagen {
	position: relative;
}

.ilustrado-prosa-con-imagen__celda {
	position: absolute;
	width: 30px;
	height: auto;
}

.ilustrado-prosa-con-imagen__celda--uno {
	top: 14%;
	right: 30%;
}

.ilustrado-prosa-con-imagen__celda--dos {
	width: 22px;
	bottom: 18%;
	right: 6%;
}

.ilustrado-prosa-con-imagen__celda--tres {
	bottom: 36%;
	right: 20%;
}

/* ---- Zig-zag de bloques alternados (ilustrado-zigzag.php) ----
 * 2026-10-13, "Qué es el posicionamiento web" en /agencia-de-
 * posicionamiento-web/, pedido explícito. Cada fila es un grid de 2
 * columnas con la MISMA proporción (45% visual / 55% texto) en los dos
 * sentidos — nunca columnas fijas "izquierda"/"derecha" en % de
 * viewport, así el panel visual mide 40-50% del ancho de SU fila sin
 * importar qué lado le toque. El marcado siempre imprime [visual,
 * texto] en ese orden (así celular ya trae el visual arriba sin reglas
 * aparte); en escritorio, la fila PAR invierte la proporción de columnas
 * (texto 55% ahora a la izquierda) Y usa `order` para que el texto
 * (primero en el DOM visualmente invertido) ocupe esa columna ancha —
 * ver docstring del componente para por qué NO alcanza con solo `order`
 * sobre columnas fijas (el auto-placement de grid respeta `order` para
 * decidir EN QUÉ columna cae cada item, así que una sola proporción fija
 * con `order` solo cambiaría el LADO visual, no el tamaño correcto por
 * rol — se necesitan las 2 proporciones, una por sentido). */

.ilustrado-zigzag__fila {
	display: grid;
	grid-template-columns: 9fr 11fr; /* visual ~45%, texto ~55% */
	gap: var(--espacio-4);
	align-items: center;
	margin-bottom: var(--espacio-6);
}

.ilustrado-zigzag__fila:last-child {
	margin-bottom: 0;
}

.ilustrado-zigzag__fila--invertida {
	grid-template-columns: 11fr 9fr; /* texto ~55% a la izquierda, visual ~45% a la derecha */
}

.ilustrado-zigzag__fila--invertida .ilustrado-zigzag__visual {
	order: 2;
}

.ilustrado-zigzag__fila--invertida .ilustrado-zigzag__texto {
	order: 1;
}

/* Pequeño desplazamiento vertical alternado entre filas — "alturas
 * distintas, no cuadrícula" (pedido explícito). La altura real de cada
 * fila ya varía sola por el largo del texto de cada bloque; esto suma
 * un acento de que no está perfectamente alineado a una grilla. */
.ilustrado-zigzag__fila:nth-child(odd) .ilustrado-zigzag__visual {
	transform: translateY(-14px);
}

.ilustrado-zigzag__fila:nth-child(even) .ilustrado-zigzag__visual {
	transform: translateY(14px);
}

.ilustrado-zigzag__visual {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--radio-tarjeta);
	background-color: var(--color-crema);
	background-image: url("../img/elementos-graficos/panal-patron.svg");
	background-repeat: repeat;
	background-size: 95px 83px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Nunca deja salir nada del panel hacia la columna de texto — ver
	 * "Regla general" en docs/DISENO-ILUSTRADO.md. */
	overflow: hidden;
}

.ilustrado-seccion--franja .ilustrado-zigzag__visual {
	background-color: var(--color-blanco);
}

.ilustrado-zigzag__hex {
	position: relative;
	width: 42%;
	max-width: 150px;
	aspect-ratio: 866 / 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ilustrado-zigzag__hex-fondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ilustrado-zigzag__icono-envoltorio {
	position: relative;
	z-index: 1;
	width: 38%;
	display: flex;
}

.ilustrado-zigzag__icono {
	width: 100%;
	height: auto;
}

.ilustrado-zigzag__celda {
	position: absolute;
	width: 26px;
	height: auto;
	top: 10%;
	right: 10%;
}

.ilustrado-zigzag__texto p {
	margin: 0 0 var(--espacio-2);
	max-width: none;
}

.ilustrado-zigzag__texto p:last-child {
	margin-bottom: 0;
}

/* ---- Proceso: línea de tiempo de 3 a 5 pasos, unidos por el vuelo ----
 * Un solo diseño de hexágono para cualquier landing (ver docstring de
 * ilustrado-proceso.php) — reemplaza la celda de panal sólida que usaba
 * /consultor-seo/ antes de la unificación 2026-10-12. */

.ilustrado-proceso__pista {
	position: relative;
}

.ilustrado-proceso__linea {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* 150px — debe igualar el padding-top de .ilustrado-proceso (ver nota
	 * ahí), 4ta vuelta 2026-10-12. */
	height: 150px;
	pointer-events: none;
}

.ilustrado-proceso {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--espacio-3);
	position: relative;
	/* 150px = el alto real del hexágono de 130px de ancho (130×1000/866),
	 * no un valor redondo — 4ta vuelta 2026-10-12: tiene que igualar
	 * exactamente |margin-top| del hexágono para que su cancelación sea
	 * completa (el hexágono no debe sumar casi nada al alto de la
	 * tarjeta, que ya mide 359px solo con la etiqueta de tiempo + el
	 * párrafo más largo real). Menos que esto y el hexágono sigue
	 * empujando la tarjeta hacia abajo; más, y se despega del "vuelo". */
	padding-top: 150px;
	align-items: stretch;
}

/* Páginas con 3 o 5 pasos en vez de 4 — regla aparte, nunca se toca el
 * default de arriba para no mover ni un píxel el de 4 pasos ya aprobado
 * en /consultor-seo/. */
.ilustrado-proceso--3 {
	grid-template-columns: repeat(3, 1fr);
}

.ilustrado-proceso--5 {
	grid-template-columns: repeat(5, 1fr);
}

.ilustrado-proceso__paso {
	position: relative;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* El <ol> es un grid con align-items:stretch (default), así que cada
	 * <li> ya se estira a la altura de la fila — pero sin esto, los
	 * hijos de este flex-column (hex, cuerpo) no heredaban esa altura:
	 * la tarjeta crema visible (.ilustrado-proceso__caja) se quedaba al
	 * tamaño de su propio contenido, distinto en cada paso, aunque el
	 * <li> ya midiera lo mismo en los 5 (bug real, medido con
	 * getBoundingClientRect — <li> a 493px uniforme, caja de 269 a 357px
	 * variable — 2026-10-12 3ra vuelta). height:100% + el flex:1 de
	 * .ilustrado-proceso__cuerpo de abajo cierran la cadena. */
	height: 100%;
}

/* ---- Hexágono de Proceso — unificado 2026-10-12, achicado 4ta vuelta ----
 * Un solo diseño para /consultor-seo/ y cualquier otra landing (antes
 * /consultor-seo/ usaba una celda de panal sólida con el número grande
 * centrado y el ícono en la caja de abajo; esta es la forma que ya
 * estaba aprobada para las landings con etiqueta de tiempo — pedido
 * explícito: "los hexágonos de consultor y los de agencia deben salir
 * del mismo componente y verse idénticos"). hexagono-regular.php
 * (relleno crema, no una celda de panal — no gasta presupuesto de
 * celdas ámbar/violeta), ícono de línea adentro, insignia numérica
 * ámbar circular superpuesta en la esquina superior izquierda.
 *
 * 130px de ancho (antes 180px) — 2026-10-12 4ta vuelta: con 180px, el
 * hexágono por sí solo aportaba 104px de alto de más al <li> (su propio
 * alto de 208px, menos los 120px que el margin-top negativo cancelaba,
 * más 16px de margin-bottom) — la tarjeta completa medía 463px. El resto
 * del contenido (etiqueta de tiempo + tarjeta crema con el texto más
 * largo real) ya suma 359px por sí solo, así que para bajar de 360px en
 * total casi todo el ahorro tiene que salir de aquí: con 130px de ancho
 * (150px de alto) y el margin-top/padding-top del grid igualados a
 * 96px, el hexágono aporta ~20px en vez de 104px. */
.ilustrado-proceso__hex-envoltorio {
	position: relative;
	width: 130px;
	max-width: 100%;
	aspect-ratio: 866 / 1000;
	margin-top: -150px;
	margin-bottom: 8px;
}

.ilustrado-proceso__numero {
	position: absolute;
	top: -8px;
	left: 2px;
	z-index: 2;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--color-ambar);
	color: var(--color-carbon);
	font-family: var(--font-titulos);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ilustrado-proceso__hex {
	position: relative;
	width: 100%;
	height: 100%;
}

.ilustrado-proceso__hex-fondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ilustrado-proceso__icono-envoltorio {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ilustrado-proceso__icono {
	width: 72px;
	max-width: 42%;
	height: auto;
}

.ilustrado-proceso__cuerpo {
	width: 100%;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ilustrado-proceso__tiempo {
	/* Misma tipografía que el título del paso (Poppins/--font-titulos),
	 * pedido explícito — no la etiqueta uppercase de ilustrado-
	 * encabezado. Reserva 2 líneas SIEMPRE (line-height 1.3 × 2 = 2.6em):
	 * sin esto, una etiqueta más larga que envuelve a 2 líneas ("De forma
	 * continua cada mes") le quita esa línea de más a
	 * .ilustrado-proceso__caja (flex:1 dentro del mismo
	 * .ilustrado-proceso__cuerpo), y la tarjeta crema de ese paso queda
	 * más baja que las demás — bug real, medido con
	 * getBoundingClientRect: 288px contra 312px en los otros 4,
	 * 2026-10-12 3ra vuelta. */
	min-height: 2.6em;
	line-height: 1.3;
	/* 4px, no var(--espacio-1)=8px — 4ta vuelta 2026-10-12, parte de la
	 * reducción de alto total. */
	margin: 0 0 4px;
	font-family: var(--font-titulos);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--color-miel-oscura);
}

.ilustrado-proceso__caja {
	/* BUG real, medido con getComputedStyle (2026-10-10): la sección de
	 * Proceso usa .ilustrado-seccion--franja (fondo blanco), y esta caja
	 * también estaba en blanco — rgb(255,255,255) sobre rgb(255,255,255),
	 * invisible, cero contraste. Crema sobre blanco, como pide la marca. */
	flex: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: var(--color-crema);
	border-radius: var(--radio-tarjeta);
	/* 14px, no 18px — 4ta vuelta 2026-10-12, otra vez más compacto. */
	padding: 14px;
	text-align: left;
}

.ilustrado-proceso__caja h3 {
	/* 17px fijo + peso 600 (3ra vuelta 2026-10-12, antes 18px). Reserva
	 * SIEMPRE el alto de 3 líneas (el título más largo real llega a 3 a
	 * este ancho de columna) para que el párrafo de abajo arranque a la
	 * misma altura en los 5 pasos sin importar si un título específico
	 * cabe en 1 línea — antes reservaba 2.3em (~2 líneas) y un título de
	 * 2-3 líneas rompía la alineación con los de 1 línea (bug real,
	 * medido: 41px vs 62px de alto de h3 entre pasos). Sin margen extra
	 * debajo (pedido explícito) — el espacio hasta el párrafo lo da
	 * el propio line-height. */
	font-size: 17px;
	line-height: 1.3;
	font-weight: 600;
	min-height: 3.9em;
	margin: 0;
	text-align: left;
}

.ilustrado-proceso__caja p {
	font-size: 14px;
	line-height: 1.5;
	max-width: none;
	margin: 0;
	text-align: left;
}

/* ---- Tarjetas de 3 columnas (Formatos de trabajo) ---- */

.ilustrado-tarjetas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--espacio-3);
}

/* Páginas generalizadas con 4 formatos en vez de 3 (ver contrato de
 * contenido en docs/DISENO-ILUSTRADO.md) — 2x2 en vez de 4 angostas en
 * fila. Regla aparte, nunca se toca el default de 3 columnas ya
 * aprobado en /consultor-seo/. */
.ilustrado-tarjetas--4 {
	grid-template-columns: repeat(2, 1fr);
}

.ilustrado-tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--color-blanco);
	border-radius: var(--radio-tarjeta);
	padding: var(--espacio-3);
	/* El hexágono (120px de ancho, aspect-ratio 866/1000 = 138.6px de
	 * alto) empieza en top:-34px, así que su borde inferior real cae en
	 * 104.6px — 100px de padding-top dejaba el título empezando 4.6px
	 * ANTES de que el hexágono terminara, montándosele encima (bug real,
	 * detectado 2026-10-12 comparando /consultor-seo/ y /agencia-seo-
	 * mexico/). 124px deja un margen limpio de ~19px. */
	padding-top: 124px;
	text-align: left;
}

.ilustrado-tarjeta__hex {
	position: absolute;
	top: -34px;
	left: var(--espacio-3);
	width: 120px;
	aspect-ratio: 866 / 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ilustrado-tarjeta__hex .celda-panal {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ilustrado-tarjeta__icono-envoltorio {
	position: relative;
	z-index: 1;
	width: 42%;
	display: flex;
}

.ilustrado-tarjeta__icono {
	width: 100%;
	height: auto;
}

.ilustrado-tarjeta h3 {
	min-height: 2.4em;
	margin-bottom: var(--espacio-1);
	text-align: left;
}

.ilustrado-tarjeta__rayas {
	width: 48px;
	height: auto;
	margin-bottom: var(--espacio-1);
}

.ilustrado-tarjeta p {
	font-size: 0.9375rem;
	max-width: none;
	text-align: left;
}

/* ---- "Cuándo conviene": tabla comparativa de 2 columnas ----
 * Una sola tarjeta blanca (ver .ilustrado-tabla), encabezado con celda +
 * ícono + título por columna, raya corta debajo, línea vertical fina +
 * celda carbón al centro como conector, cuerpo de texto alineado arriba a
 * la izquierda con el mismo alto de fila (grid lo da gratis), y cierre en
 * fila final que abarca las 2 columnas con su propia raya arriba. Sin
 * violeta — ver resumen de entrega. */

.ilustrado-tabla {
	/* BUG real, medido con getComputedStyle (2026-10-10): esta sección
	 * también usa .ilustrado-seccion--franja (fondo blanco) y la tarjeta
	 * estaba en blanco — mismo problema que .ilustrado-proceso__caja,
	 * invisible. Crema sobre blanco. */
	background-color: var(--color-crema);
	border-radius: var(--radio-tarjeta);
	padding: var(--espacio-3);
}

.ilustrado-tabla__cuerpo {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: auto 1fr;
	column-gap: var(--espacio-3);
}

.ilustrado-tabla__encabezado {
	grid-row: 1;
	display: flex;
	align-items: center;
	gap: var(--espacio-2);
}

.ilustrado-tabla__encabezado--izquierda {
	grid-column: 1;
}

.ilustrado-tabla__encabezado--derecha {
	grid-column: 3;
}

.ilustrado-tabla__hex {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	aspect-ratio: 866 / 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ilustrado-tabla__hex-fondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ilustrado-tabla__icono-envoltorio {
	position: relative;
	z-index: 1;
	width: 46%;
	display: flex;
}

.ilustrado-tabla__icono {
	width: 100%;
	height: auto;
}

.ilustrado-comparativo__titulo {
	font-family: var(--font-titulos);
	font-weight: 700;
	font-size: var(--tamano-subtitulo);
	margin: 0;
	text-align: left;
}

.ilustrado-tabla__texto {
	grid-row: 2;
	margin-top: var(--espacio-2);
	text-align: left;
}

.ilustrado-tabla__texto--izquierda {
	grid-column: 1;
}

.ilustrado-tabla__texto--derecha {
	grid-column: 3;
}

.ilustrado-tabla__texto p {
	font-size: 0.9375rem;
	max-width: none;
	text-align: left;
}

.ilustrado-tabla__conector {
	grid-column: 2;
	grid-row: 1 / 3;
	position: relative;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
}

.ilustrado-tabla__conector::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background-color: var(--color-carbon);
	opacity: 0.15;
}

.ilustrado-tabla__conector-celda {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 28px;
	height: auto;
	background-color: var(--color-crema);
}

.ilustrado-tabla__cierre {
	/* Borde fino, no rayas — las rayas se montaban sobre la primera línea
	 * del párrafo al no tener su propia fila de grid (corregido
	 * 2026-10-10). 24px de espacio arriba y abajo del borde. */
	margin-top: var(--espacio-3);
	padding-top: var(--espacio-3);
	border-top: 1px solid rgb(20 20 20 / 15%);
}

/* BUG real, medido con getBoundingClientRect (2026-10-10): el párrafo de
 * cierre heredaba max-width:68ch de la regla genérica .ilustrado-prosa p
 * (pensada para texto suelto a ancho de lectura), midiendo 686px dentro
 * de una tarjeta de 1120px de contenido — se veía "a media pantalla".
 * Esta fila sí debe abarcar el ancho completo de la tarjeta. */
.ilustrado-tabla__cierre .ilustrado-prosa p {
	max-width: none;
}

/* ---- Precios: texto + imagen hexagonal o marcador ---- */

.ilustrado-precios {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: var(--espacio-4);
	align-items: center;
}

/* Sin imagen real todavía (ver nota en ilustrado-precios.php) — una sola
 * columna de texto, nada de hexágono de marcador en su lugar. */
.ilustrado-precios--sin-imagen {
	grid-template-columns: 1fr;
}

.ilustrado-precios--sin-imagen .ilustrado-precios__texto {
	max-width: var(--ilustrado-ancho-lectura);
}

.ilustrado-precios .btn {
	margin-top: var(--espacio-2);
}

/* Aviso [COMPLETAR] — solo lo ve un administrador con sesión (edit_posts),
 * ver inc/diseno-ilustrado.php, apis_ilustrado_resolver_completar(): para
 * cualquier otra persona este texto ni siquiera llega al HTML. */
.ilustrado-aviso-admin {
	display: inline-block;
	background-color: var(--color-crema);
	border: 1px solid var(--color-ambar);
	border-radius: var(--radio-campo);
	padding: 2px 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-miel-oscura);
}

/* ---- "Qué incluye" como tarjetas con ícono (ilustrado-tarjetas-icono.php) ----
 * Generalización 2026-10-12 (/agencia-seo-mexico/, "Qué incluye una
 * agencia de servicios SEO"): una lista <ul><li><strong>Etiqueta.</strong>
 * ...</li></ul> dentro de una sección de prosa, cuando cada <li> trae esa
 * forma, se imprime como rejilla de tarjetas en vez de viñetas — ver
 * apis_ilustrado_segmentar_prosa() en inc/diseno-ilustrado.php. El
 * hexágono es hexagono-regular.php (relleno crema), no una celda de
 * panal — no consume el presupuesto de celdas sueltas ámbar/violeta de
 * la sección. 3 columnas en escritorio, 2 en tablet, 1 en celular. */

.ilustrado-tarjetas-icono {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--espacio-3);
	margin: var(--espacio-3) 0;
}

.ilustrado-tarjeta-icono {
	position: relative;
	overflow: hidden;
	background-color: var(--color-blanco);
	border-radius: var(--radio-tarjeta);
	padding: var(--espacio-3);
	text-align: left;
}

/* Acento ámbar por tarjeta — línea superior de 3px, la misma en las 6
 * tarjetas (única opción elegida entre línea/punto, pedido 2026-10-12
 * 2da vuelta). overflow:hidden arriba recorta la franja exactamente al
 * radio de 16px de la tarjeta, sin sumar su propio border-radius. */
.ilustrado-tarjeta-icono::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background-color: var(--color-ambar);
}

.ilustrado-tarjeta-icono__cabeza {
	display: flex;
	align-items: center;
	gap: var(--espacio-2);
	margin-bottom: var(--espacio-1);
}

.ilustrado-tarjeta-icono__hex {
	position: relative;
	flex: none;
	/* 64px, no 48px — y relleno ámbar suave (ver el componente), no crema
	 * sobre blanco, que no resaltaba — pedido explícito, 2026-10-12 2da
	 * vuelta. */
	width: 64px;
	aspect-ratio: 866 / 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ilustrado-tarjeta-icono__hex-fondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ilustrado-tarjeta-icono__icono-envoltorio {
	position: relative;
	z-index: 1;
	width: 32px;
	display: flex;
}

.ilustrado-tarjeta-icono__icono {
	width: 100%;
	height: auto;
}

.ilustrado-tarjeta-icono__titulo {
	font-family: var(--font-titulos);
	font-weight: 700;
	font-size: 1.0625rem;
	margin: 0;
}

.ilustrado-tarjeta-icono__texto {
	font-size: 0.9375rem;
	margin: 0;
	max-width: none;
}

/* ---- Rejilla de indicadores (ilustrado-indicadores.php) ----
 * Generalización 2026-10-12 (6ta vuelta, /agencia-de-posicionamiento-
 * web/, "Medición del posicionamiento"): una lista <ul> de 3 a 6 <li>
 * SIN <strong> al inicio dentro de una sección de prosa — ver
 * apis_ilustrado_parsear_lista_plana() en inc/diseno-ilustrado.php.
 *
 * SEGUNDO rediseño (pedido explícito: "olvida los hexágonos, toma en
 * cuenta el diseño de Proceso de nuestra agencia seo en México"):
 * reemplaza el panal en zig-zag de hexágonos (ver historial de ese
 * rediseño en el changelog de ilustrado-indicadores.php) por una rejilla
 * plana de tarjetas — mismo lenguaje de tarjeta clara (borde sutil +
 * sombra suave, con elevación y tinte ámbar al hover/focus) ya aprobado
 * para Proceso en /agencia-de-posicionamiento-web/ y /consultor-seo/ —
 * ver .ilustrado-proceso__caja en paginas-seo-ilustrado.css — sin
 * duplicar esos valores de sombra/borde, ver abajo. Número en vez de
 * ícono/hexágono: mismo criterio tipográfico (Poppins/ámbar) que el
 * resto de numeración de la página. */

.ilustrado-indicadores {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* BUG REAL (ver docblock de agencia-seo-mexico.css): var(--espacio-5)
	 * nunca se definió en variables.css — ese var() inválido no aplicaba
	 * NINGÚN margen ni gap generoso, parte real de "se ve muy amontonada"
	 * (pedido explícito). var(--espacio-4) existe y sí se aplica. */
	gap: var(--espacio-4);
	margin: var(--espacio-4) 0;
}

.ilustrado-indicador {
	padding: var(--espacio-3);
	border-radius: var(--radio-tarjeta);
	background-color: var(--color-blanco);
	border: 1px solid rgba(20, 20, 20, 0.06);
	box-shadow: 0 1px 2px rgba(20, 20, 20, 0.03), 0 8px 20px rgba(20, 20, 20, 0.05);
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

@media (hover: hover) {
	.ilustrado-indicador:hover {
		border-color: rgba(242, 169, 0, 0.3);
		box-shadow: 0 16px 32px rgba(20, 20, 20, 0.09);
		transform: translateY(-3px);
	}
}

.ilustrado-indicador:focus-within {
	border-color: rgba(242, 169, 0, 0.3);
	box-shadow: 0 16px 32px rgba(20, 20, 20, 0.09);
}

.ilustrado-indicador__numero {
	display: block;
	font-family: var(--font-titulos);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	color: var(--color-miel-oscura);
	margin-bottom: 6px;
}

.ilustrado-indicador__texto {
	margin: 0;
	font-weight: 600;
	color: var(--color-carbon);
	font-size: 1rem;
	line-height: 1.5;
	max-width: none;
}

/* ---- Nota destacada (ilustrado-destacado.php) ----
 * Reutilizada en 2 sitios: el párrafo que sigue a una lista convertida en
 * ilustrado-tarjetas-icono, y el cierre de ilustrado-proceso-horizontal
 * (ícono "informacion" en ese caso). Negritas por CSS, nunca se le agrega
 * <strong> al contenido real. */

.ilustrado-destacado {
	display: flex;
	align-items: center;
	gap: var(--espacio-2);
	background-color: color-mix(in srgb, var(--color-ambar) 8%, var(--color-crema));
	border-radius: var(--radio-tarjeta);
	padding: var(--espacio-2) var(--espacio-3);
	margin: var(--espacio-3) 0;
}

.ilustrado-destacado--ambar {
	background-color: color-mix(in srgb, var(--color-ambar) 14%, var(--color-blanco));
}

.ilustrado-destacado__hex {
	position: relative;
	flex: none;
	width: 44px;
	aspect-ratio: 866 / 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ilustrado-destacado__hex-fondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ilustrado-destacado__icono-envoltorio {
	position: relative;
	z-index: 1;
	width: 55%;
	display: flex;
}

.ilustrado-destacado__icono {
	width: 100%;
	height: auto;
}

.ilustrado-destacado__linea {
	flex: none;
	width: 1px;
	align-self: stretch;
	background-color: rgb(20 20 20 / 15%);
}

.ilustrado-destacado__texto {
	flex: 1;
}

.ilustrado-destacado__texto p {
	margin: 0;
	font-weight: 600;
	max-width: none;
}

/* ---- Celular: todo a una columna ---- */

@media (max-width: 782px) {
	/* Padding vertical estandarizado: 96px en escritorio (--espacio-6,
	 * regla de arriba), 56px en celular para todas las secciones por
	 * igual — ver "Reglas compartidas" en docs/DISENO-ILUSTRADO.md. */
	.ilustrado-seccion {
		padding-block: 56px;
	}

	/* Zig-zag: una columna, visual arriba de cada bloque de texto (pedido
	 * explícito) — el `order` que invierte las filas pares en escritorio
	 * se resetea acá, así el DOM [visual, texto] de siempre manda. */
	.ilustrado-zigzag__fila,
	.ilustrado-zigzag__fila--invertida {
		grid-template-columns: 1fr;
		margin-bottom: var(--espacio-5);
	}

	.ilustrado-zigzag__fila--invertida .ilustrado-zigzag__visual,
	.ilustrado-zigzag__fila--invertida .ilustrado-zigzag__texto {
		order: 0;
	}

	.ilustrado-zigzag__visual {
		transform: none !important;
		margin-bottom: var(--espacio-3);
		aspect-ratio: 16 / 9;
	}

	.ilustrado-prosa-con-imagen,
	.ilustrado-precios {
		grid-template-columns: 1fr;
	}

	.ilustrado-prosa-con-imagen__imagen,
	.ilustrado-precios__imagen {
		order: -1;
	}

	.ilustrado-patron,
	.ilustrado-prosa-con-imagen__celdas {
		display: none;
	}

	/* La caja vacía decorativa (patrón + celdas, ver placeholder_
	 * decorativo en ilustrado-prosa.php / ilustrado-precios.php) no
	 * tiene nada que mostrar en celular, donde el patrón y las celdas ya
	 * se esconden arriba — sin esto quedaba un hueco de 280px antes del
	 * texto (detectado 2026-10-10 probando /agencia-seo-mexico/). */
	.ilustrado-prosa-con-imagen__imagen--vacia {
		display: none;
	}

	/* El vuelo horizontal solo tiene sentido con los pasos en fila; en
	 * celular se apilan y la conexión pasa a una línea vertical punteada
	 * simple entre hexágonos (mismo hexágono unificado de escritorio,
	 * más chico). */
	.ilustrado-proceso__linea {
		display: none;
	}

	.ilustrado-proceso {
		grid-template-columns: 1fr;
		gap: 0;
		padding-top: 0;
	}

	.ilustrado-proceso__paso {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
		gap: var(--espacio-2);
		padding-bottom: var(--espacio-3);
		position: relative;
	}

	.ilustrado-proceso__paso:not(:last-child)::after {
		content: '';
		position: absolute;
		top: 64px;
		left: 31px;
		bottom: 0;
		border-left: 2px dotted var(--color-carbon);
	}

	.ilustrado-proceso__hex-envoltorio {
		flex: none;
		width: 64px;
		margin-top: 0;
	}

	.ilustrado-proceso__cuerpo {
		flex: 1;
		width: auto;
	}

	.ilustrado-proceso__caja {
		margin-top: var(--espacio-1);
	}

	.ilustrado-proceso__numero {
		width: 24px;
		height: 24px;
		font-size: 0.8125rem;
	}

	.ilustrado-tarjetas {
		grid-template-columns: 1fr;
	}

	/* Tabla comparativa de "Cuándo conviene" a una columna: header + raya +
	 * texto de Consultor, luego lo mismo para Agencia, con una línea fina
	 * (sin la celda conectora, que solo tiene sentido horizontal) entre
	 * ambos bloques. */
	.ilustrado-tabla__cuerpo {
		grid-template-columns: 1fr;
	}

	.ilustrado-tabla__encabezado--derecha {
		grid-column: 1;
		grid-row: 3;
		margin-top: var(--espacio-3);
		padding-top: var(--espacio-3);
		border-top: 1px solid rgb(20 20 20 / 15%);
	}

	.ilustrado-tabla__texto--izquierda {
		grid-row: 2;
	}

	.ilustrado-tabla__texto--derecha {
		grid-column: 1;
		grid-row: 4;
	}

	.ilustrado-tabla__conector {
		display: none;
	}

	.ilustrado-tarjetas-icono {
		grid-template-columns: 1fr;
	}

	/* Columna única en celular — mismo molde de tarjeta plana que escritorio. */
	.ilustrado-indicadores {
		grid-template-columns: 1fr;
	}

	.ilustrado-destacado {
		flex-wrap: wrap;
	}

}