disfrazado — accesibilidad de datos tabulares reales). El CSS de
* `.ilustrado-tabla` (modo "tarjetas", legado) se deja tal cual donde
* vivía antes de este bloque — sigue siendo el fallback del detector
* genérico de otras páginas, aunque ninguna lo use hoy; no se duplica
* aquí porque esta página ya no lo usa. */
.page-id-35 .ilustrado-comparativa {
--ilustrado-comparativa-borde: rgba(20, 20, 20, 0.08);
background-color: var(--color-blanco);
border: 1px solid var(--ilustrado-comparativa-borde);
border-radius: 16px;
box-shadow: 0 1px 2px rgba(20, 20, 20, 0.03), 0 10px 24px rgba(20, 20, 20, 0.05);
overflow: hidden;
}
.page-id-35 .ilustrado-comparativa__tabla {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.page-id-35 .ilustrado-comparativa__tabla col,
.page-id-35 .ilustrado-comparativa__th-criterio {
width: 24%;
}
/* "Línea superior amarilla muy fina en el encabezado, sin convertirla en
* un elemento dominante" (pedido explícito) — 2px, no 3-4px como el resto
* de las tarjetas de la página (ahí la caja es más grande, aquí el
* encabezado es una franja más chica y pide un trazo más discreto). */
.page-id-35 .ilustrado-comparativa__tabla thead tr {
box-shadow: inset 0 2px 0 0 var(--color-ambar);
}
.page-id-35 .ilustrado-comparativa__tabla th,
.page-id-35 .ilustrado-comparativa__tabla td {
width: 38%;
padding: var(--espacio-3) var(--espacio-4);
text-align: left;
vertical-align: top;
}
.page-id-35 .ilustrado-comparativa__th-criterio {
width: 24%;
}
/* "Diferencia ligeramente los fondos de los encabezados respecto a las
* filas" — tinte crema cálido extremadamente sutil, nunca ámbar fuerte ni
* carbón. */
.page-id-35 .ilustrado-comparativa__tabla thead th {
background-color: color-mix(in srgb, var(--color-ambar) 5%, var(--color-blanco));
padding-top: var(--espacio-3);
padding-bottom: var(--espacio-3);
font-size: 1.375rem;
font-weight: 600;
line-height: 1.3;
color: var(--color-carbon);
border-bottom: 1px solid var(--ilustrado-comparativa-borde);
}
.page-id-35 .ilustrado-comparativa__tabla thead th.ilustrado-comparativa__th-criterio {
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-miel-oscura);
}
.page-id-35 .ilustrado-comparativa__oculto-visual {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Criterio (primera columna): semibold, discreto, no compite con los 2
* encabezados principales — es una etiqueta de fila, no un tercer título. */
.page-id-35 .ilustrado-comparativa__tabla tbody th {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-carbon);
background-color: var(--color-blanco);
}
/* RONDA 2026-10-26 (jerarquía tipográfica de la tabla), pedido explícito:
* "evita que todas las celdas tengan el mismo peso visual... cada celda
* debe comunicar una idea principal destacada y una explicación
* secundaria". El contenido de cada celda ahora trae 2 niveles (ver el
* post_content de esta ronda): un
de "concepto" corto al
* principio (p. ej. "Dirección Experta.") y el resto de la frase como
* descripción. La descripción pasa a ser más ligera (400, un poco más
* chica y un tono menos saturado que el concepto) para que el contraste
* de peso quede claro — antes ambos niveles compartían el mismo
* font-size/weight, "texto uniforme" (pedido explícito a evitar). */
.page-id-35 .ilustrado-comparativa__tabla tbody td {
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.55;
color: rgba(20, 20, 20, 0.78);
}
/* "Separadores horizontales finos en gris cálido... divisiones verticales
* mínimas o inexistentes" (pedido explícito) — sin línea vertical entre
* columnas, cada fila se separa de la siguiente con un filete horizontal
* apenas visible. */
.page-id-35 .ilustrado-comparativa__tabla tbody tr + tr th,
.page-id-35 .ilustrado-comparativa__tabla tbody tr + tr td {
border-top: 1px solid rgba(20, 20, 20, 0.06);
}
/* Concepto destacado de cada celda — "títulos breves en semibold o bold...
* espacio consistente entre el concepto destacado y su explicación"
* (pedido explícito). display:block lo separa en su propia línea (el
* "arriba" del concepto / "abajo" de la descripción, sin inventar un
* nuevo que alteraría la jerarquía de encabezados de la página).
*
* RONDA 2026-10-26 (corrección de énfasis), pedido explícito: la ronda
* anterior resolvía el contraste con un resaltado ámbar detrás del texto
* (`background-image` + texto carbón) — el dueño del proyecto lo vio como
* "subrayado decorativo", no como el concepto en amarillo que pidió.
* Se quita ese fondo/línea por completo y el color pasa directo al texto:
* `var(--color-miel-oscura)` (#8A5F00) es el MISMO tono "amarillo/dorado
* corporativo" que ya usa el resto del sitio para texto en negrita sobre
* blanco (.ilustrado-tarjeta strong, .ilustrado-proceso__flip-cara
* strong, variables.css) — el ámbar puro de marca (#F2A900, var(
* --color-ambar)) no pasa contraste de texto sobre blanco (~2:1, bajo el
* mínimo WCAG de 4.5:1 para texto de este tamaño), así que esta es la
* variante "con suficiente contraste" del mismo amarillo corporativo, no
* un color distinto ni un amarillo pálido. */
.page-id-35 .ilustrado-comparativa__tabla tbody td strong {
display: block;
width: fit-content;
max-width: 100%;
margin-bottom: var(--espacio-1);
font-size: 1.0625rem;
font-weight: 700;
color: var(--color-miel-oscura);
text-decoration: none;
background: none;
border-bottom: none;
}
.page-id-35 .ilustrado-comparativa__tabla tbody td a {
font-weight: 600;
color: var(--color-miel-oscura);
}
/* === Cierre editorial integrado ==========================================
* "Debe parecer una conclusión editorial de la comparativa, no una tercera
* tarjeta" (pedido explícito) — fondo crema muy tenue, línea ámbar
* vertical discreta, texto alineado a la izquierda (no centrado como la
* ronda anterior), altura reducida. */
.page-id-35 .ilustrado-comparativa__cierre {
padding: var(--espacio-3) var(--espacio-4);
border-left: 3px solid var(--color-ambar);
background-color: color-mix(in srgb, var(--color-ambar) 4%, var(--color-blanco));
border-top: 1px solid var(--ilustrado-comparativa-borde);
}
.page-id-35 .ilustrado-comparativa__cierre .ilustrado-prosa p {
margin: 0;
max-width: none;
font-size: 0.9375rem;
text-align: left;
line-height: 1.6;
color: var(--color-carbon);
}
.page-id-35 .ilustrado-comparativa__cierre .ilustrado-prosa strong {
color: var(--color-miel-oscura);
}
/* Tablet: mismas 3 columnas, solo se reduce el padding para no desperdiciar
* ancho (pedido explícito "en tablet, reducir espaciados sin perder
* legibilidad"). Quiebre propio de esta tabla (601-900px), distinto del
* 782px que usa el resto de la página: una tabla de 3 columnas reales
* necesita más ancho para seguir siendo legible en 2 columnas que una
* imagen+texto de 2 columnas — a 768px (tablet real) todavía entra bien. */
@media (max-width: 900px) and (min-width: 601px) {
.page-id-35 .ilustrado-comparativa__tabla th,
.page-id-35 .ilustrado-comparativa__tabla td {
padding: var(--espacio-2) var(--espacio-3);
}
.page-id-35 .ilustrado-comparativa__tabla thead th {
font-size: 1.25rem;
}
}
/* Móvil: "convertir cada criterio en un bloque comparativo compacto que
* muestre primero el criterio y después ambas alternativas claramente
* identificadas. No utilizar una tabla desbordada horizontalmente ni
* perder la correspondencia entre las opciones" (pedido explícito). Se
* conserva el
en el DOM (accesibilidad: un lector de pantalla
* sigue anunciando fila/columna) pero se fuerza a comportarse como bloques
* apilados — técnica estándar de "tabla responsive", no JS ni markup
* nuevo. El se oculta visualmente porque cada celda ya repite su
* propia columna vía `data-columna` (ver ilustrado-comparativo.php).
* Quiebre a 600px (no 782px como el resto de la página): por debajo de
* eso, 2 columnas de texto reales ya no caben sin apretar demasiado el
* contenido — confirmado en vivo a 768px, donde las 3 columnas con
* padding reducido siguen leyéndose bien. */
@media (max-width: 600px) {
.page-id-35 .ilustrado-comparativa__tabla,
.page-id-35 .ilustrado-comparativa__tabla tbody,
.page-id-35 .ilustrado-comparativa__tabla tr,
.page-id-35 .ilustrado-comparativa__tabla th,
.page-id-35 .ilustrado-comparativa__tabla td {
display: block;
width: auto;
}
.page-id-35 .ilustrado-comparativa__tabla thead {
display: none;
}
.page-id-35 .ilustrado-comparativa__tabla tbody tr {
padding: var(--espacio-3) var(--espacio-4);
}
.page-id-35 .ilustrado-comparativa__tabla tbody tr + tr {
border-top: 1px solid rgba(20, 20, 20, 0.06);
}
.page-id-35 .ilustrado-comparativa__tabla tbody th {
padding: 0 0 var(--espacio-2);
font-size: 1.0625rem;
border-top: none !important;
}
.page-id-35 .ilustrado-comparativa__tabla tbody td {
padding: var(--espacio-2) 0 0;
border-top: none !important;
}
/* Etiqueta de columna repetida por celda ("Consultor SEO" / "Agencia
* SEO"), pequeña y en ámbar — así cada alternativa queda identificada
* sin el encabezado de la tabla. */
.page-id-35 .ilustrado-comparativa__tabla tbody td::before {
content: attr(data-columna);
display: block;
margin-bottom: var(--espacio-1);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-ambar);
}
.page-id-35 .ilustrado-comparativa__cierre {
padding: var(--espacio-3);
}
}
/* === 5. "PRECIOS DE UN CONSULTOR SEO" — retrato estilizado =============
* RONDA 2026-12-02, pedido explícito: "estiliza mejor la imagen... más
* cuidada y alineada con el resto de la página". Mismo tratamiento que la
* fotografía de "Qué hace" (sección 1 de esta hoja): recuadro contenido
* con borde fino + sombra sutil + esquinas redondeadas, en vez de la caja
* cuadrada a sangre sin ningún marco que usaba antes (ver
* ilustrado-hexagono-imagen__caja en ilustrado.css, pensada solo para
* contener la imagen, nunca para presentarla como pieza editorial). La
* fotografía (balanza) es vertical (460×690 = 2/3 real, confirmado con
* naturalWidth/naturalHeight en vivo) — aspect-ratio:2/3 + object-fit:cover
* no recorta nada, solo encuadra la proporción exacta del archivo. El
* orden en móvil (imagen antes del texto) no se toca: es el
* comportamiento ya aprobado de ilustrado.css para esta sección
* (.ilustrado-precios__imagen, distinto de .ilustrado-prosa-con-imagen__imagen
* de "Qué hace", donde sí se invirtió el orden).
*
* RONDA 2026-10-26 (ajustes finales), pedido explícito: "ajusta tamaño,
* posición y alineación de la última imagen... equilibrio natural entre
* imagen, título, párrafos y espacios en blanco". Medido en vivo: con la
* regla base (.ilustrado-precios, align-items:center en ilustrado.css,
* sin override de página) la foto de 320px quedaba centrada frente a los
* ~692px del bloque de texto de 3 párrafos — matemáticamente centrada,
* pero visualmente "flotando" en medio de un texto mucho más alto. Mismo
* criterio que la sección 1 de esta hoja: se alinea arriba
* (align-self:start) con un margen que la acerca al primer párrafo (no al
* encabezado) y sube de 320px a 360px de ancho para más presencia. */
@media (min-width: 783px) {
.page-id-35 .ilustrado-precios__imagen {
align-self: start;
margin-top: var(--espacio-4);
}
.page-id-35 .ilustrado-precios__imagen .ilustrado-hexagono-imagen {
max-width: 360px;
width: 100%;
margin-inline: auto 0;
height: auto;
}
}
.page-id-35 .ilustrado-precios__imagen .ilustrado-hexagono-imagen__caja {
aspect-ratio: 2 / 3;
height: auto;
border-radius: var(--radio-tarjeta);
overflow: hidden;
border: 1px solid rgba(20, 20, 20, 0.06);
box-shadow: 0 10px 24px rgba(20, 20, 20, 0.08);
}
.page-id-35 .ilustrado-precios__imagen .ilustrado-hexagono-imagen__foto {
object-fit: cover;
object-position: center;
}
@media (max-width: 782px) {
.page-id-35 .ilustrado-precios__imagen .ilustrado-hexagono-imagen {
max-width: 280px;
margin-inline: auto;
}
}
/* === "PROCESO DE POSICIONAMIENTO" fondo oscuro premium
* (/agencia-de-posicionamiento-web/, page-id-37) ===========================
* Pedido explícito: "usa las tarjetas oscuras que ya hicimos en 'Cómo
* empezamos' del inicio... quiero que toda esa sección se vea más
* premium". Clase .ilustrado-seccion--oscura la pone ilustrado-proceso.php
* solo en esta página (ver $es_oscuro ahí) — mismo HTML de siempre
* (hexágono + insignia + tarjeta), solo la variante de color. Gradiente
* carbón idéntico a .home-proceso (Inicio), tarjeta antracita con sombra
* marcada en vez de la caja crema — mismo lenguaje "premium" ya aprobado
* en Home, no una paleta oscura nueva. */
.ilustrado-seccion--oscura {
background: linear-gradient(180deg, #141414 0%, #1a1a1a 100%);
}
.ilustrado-seccion--oscura .ilustrado-patron {
display: none;
}
.ilustrado-seccion--oscura .ilustrado-encabezado__etiqueta {
color: var(--color-ambar);
}
.ilustrado-seccion--oscura .ilustrado-encabezado h2,
.ilustrado-seccion--oscura .ilustrado-encabezado__acento {
color: var(--color-blanco);
}
.ilustrado-seccion--oscura .ilustrado-prosa--intro {
color: rgba(255, 255, 255, 0.65);
}
.ilustrado-seccion--oscura .ilustrado-proceso__linea path {
stroke: rgba(255, 255, 255, 0.25) !important;
}
.ilustrado-seccion--oscura .ilustrado-proceso__caja {
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;
}
.ilustrado-seccion--oscura .ilustrado-proceso__caja h3,
.ilustrado-seccion--oscura .ilustrado-proceso__caja p {
color: var(--color-blanco);
}
.ilustrado-seccion--oscura .ilustrado-proceso__caja p {
color: rgba(255, 255, 255, 0.62);
}
.ilustrado-seccion--oscura .ilustrado-proceso__tiempo {
color: var(--color-ambar);
}
@media (hover: hover) {
.ilustrado-seccion--oscura .ilustrado-proceso__paso:hover .ilustrado-proceso__caja {
background-color: #242424;
border-color: rgba(242, 169, 0, 0.3);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
transform: translateY(-3px);
}
}
.ilustrado-seccion--oscura .ilustrado-proceso__paso:focus-within .ilustrado-proceso__caja {
background-color: #242424;
border-color: rgba(242, 169, 0, 0.3);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
}
/* === "QUÉ SE ENTREGA CADA MES" — tarjetas numeradas
* (/agencia-de-posicionamiento-web/, page-id-37) ===========================
* Pedido explícito: "usa el diseño ya definido de las tarjetas de 'De las
* ideas a las decisiones que hacen avanzar' de Nosotros" — ver
* tarjetas-nosotros-proceso.php. Mismos valores que
* .nosotros-proceso__etapa/__numero/__titulo/__descripcion en
* nosotros.css, copiados tal cual (sin inventar valores nuevos) porque
* esta hoja no se carga en /nosotros/ y viceversa. */
.page-id-37 .tarjetas-nosotros-proceso {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
gap: var(--espacio-4);
/* 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, así que el párrafo de cierre quedaba pegado a las
* tarjetas (pedido explícito: "el texto de abajo... estorba con el
* texto de arriba, se ve muy amontonado"). 64px literal, mismo
* criterio de corrección local que --aseo-espacio-xl. */
margin: 64px 0;
}
.page-id-37 .tarjetas-nosotros-proceso__tarjeta {
position: relative;
height: 100%;
padding: var(--espacio-4) var(--espacio-4) var(--espacio-3);
border-radius: var(--radio-tarjeta);
background-color: var(--color-blanco);
border: 1px solid rgba(20, 20, 20, 0.07);
box-shadow: 0 16px 34px rgba(20, 20, 20, 0.1);
transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) {
.page-id-37 .tarjetas-nosotros-proceso__tarjeta:hover {
box-shadow: 0 22px 44px rgba(20, 20, 20, 0.14);
border-color: rgba(242, 169, 0, 0.3);
transform: translateY(-3px);
}
.page-id-37 .tarjetas-nosotros-proceso__tarjeta:hover .tarjetas-nosotros-proceso__numero {
box-shadow: 0 12px 24px rgba(242, 169, 0, 0.4);
}
}
/* HEXAGONAL, no círculo — pedido explícito 2026-10-27: "las tarjetas
* tienen que cambiar el círculo amarillo por el hexágono, como
* referencia la sección de 'Cómo empezamos', en todas las páginas haz el
* cambio". Mismo clip-path que .home-proceso__nodo/.nosotros-proceso__
* numero (ver nosotros.css) — esta tarjeta ya copiaba esa familia visual
* completa (ver tarjetas-nosotros-proceso.php), así que el cambio se
* replica aquí igual. */
.page-id-37 .tarjetas-nosotros-proceso__numero {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
background-color: var(--color-ambar);
color: var(--color-carbon);
font-family: var(--font-titulos);
font-weight: 700;
font-size: 1.0625rem;
margin-bottom: var(--espacio-3);
border: 2px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 18px rgba(242, 169, 0, 0.3);
transition: box-shadow 0.2s ease;
}
.page-id-37 .tarjetas-nosotros-proceso__titulo {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-carbon);
margin: 0 0 8px;
max-width: none;
}
.page-id-37 .tarjetas-nosotros-proceso__texto {
color: var(--color-gris-calido);
font-size: 0.95rem;
line-height: 1.5;
margin: 0;
max-width: none;
}
@media (max-width: 860px) {
.page-id-37 .tarjetas-nosotros-proceso {
grid-template-columns: 1fr;
grid-auto-rows: auto;
gap: var(--espacio-3);
}
.page-id-37 .tarjetas-nosotros-proceso__tarjeta {
height: auto;
}
}
/* === "QUÉ ES EL POSICIONAMIENTO WEB" — zigzag editorial con fotos
* (/agencia-de-posicionamiento-web/, page-id-37) ===========================
* Pedido explícito: "toma como referencia" el zigzag de "Por qué elegir
* a Apis" en /agencia-seo-mexico/ (ver $es_zigzag_posicionamiento en
* ilustrado-prosa.php). Esa página tiene su propio CSS en
* agencia-seo-mexico.css bajo el prefijo .page-id-33 — esta hoja no se
* carga ahí, así que se copian los mismos valores (sin inventar
* ninguno) bajo .page-id-37, con un solo cambio real: 64px de espacio
* entre filas en vez de la variable --aseo-espacio-xl (propia de esa
* otra hoja, no disponible aquí). 2 filas (2 párrafos agrupados por
* fila, pedido explícito) en vez de 3, pero la mecánica grid/invertida
* es idéntica. */
.page-id-37 .ilustrado-prosa-zigzag {
display: flex;
flex-direction: column;
gap: 64px;
}
.page-id-37 .ilustrado-prosa-zigzag__fila {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: var(--espacio-4);
}
.page-id-37 .ilustrado-prosa-zigzag__fila--invertida .ilustrado-prosa-zigzag__texto {
grid-column: 2;
grid-row: 1;
}
.page-id-37 .ilustrado-prosa-zigzag__fila--invertida .ilustrado-prosa-zigzag__visual {
grid-column: 1;
grid-row: 1;
}
.page-id-37 .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-37 .ilustrado-prosa-zigzag__texto p:last-child {
margin-bottom: 0;
}
.page-id-37 .ilustrado-prosa-zigzag__texto strong {
color: var(--color-miel-oscura);
}
.page-id-37 .ilustrado-prosa-zigzag__texto::before {
content: "";
display: block;
width: 40px;
height: 2px;
margin-bottom: var(--espacio-2);
background-color: var(--color-ambar);
}
/* Pedido explícito (2da vuelta): "las imágenes un poco más grandes y
* centradas al espacio en blanco, para que aproveche el espacio" — antes
* topaban en 380px y quedaban pegadas al lado que da hacia el texto (ver
* /agencia-seo-mexico/, de donde se copió la 1ra vuelta); acá se agrandan
* a 460px y se centran en su propia columna en vez de pegarse a un lado,
* en las 2 filas por igual (ya no hace falta una regla aparte para
* --invertida). */
.page-id-37 .ilustrado-prosa-zigzag__visual--foto {
aspect-ratio: 4 / 3;
width: 100%;
max-width: 460px;
margin-left: auto;
margin-right: auto;
border-radius: var(--radio-tarjeta);
overflow: hidden;
}
.page-id-37 .ilustrado-prosa-zigzag__foto {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 760px) {
.page-id-37 .ilustrado-prosa-zigzag__fila,
.page-id-37 .ilustrado-prosa-zigzag__fila--invertida {
grid-template-columns: 1fr;
}
.page-id-37 .ilustrado-prosa-zigzag__fila--invertida .ilustrado-prosa-zigzag__texto,
.page-id-37 .ilustrado-prosa-zigzag__fila--invertida .ilustrado-prosa-zigzag__visual {
grid-column: 1;
grid-row: auto;
}
}
/* === "QUÉ SE ENTREGA CADA MES" — párrafo de cierre, menos amontonado
* (/agencia-de-posicionamiento-web/, page-id-37) ===========================
* Pedido explícito: "el texto de abajo 'Como agencia de posicionamiento
* web' estorba con el texto de arriba, se ve muy amontonado, y este
* texto debe verse trabajado con negritas amarillas si son necesarias
* nada más". El margin-top ya viene de .tarjetas-nosotros-proceso (64px,
* ver arriba) — acá solo el límite de ancho de lectura (el párrafo
* hereda ancho completo por venir después de una rejilla, ver
* .ilustrado-prosa--completo en ilustrado.css) y el color de las
* negritas que ya se agregaron al post_content. */
.page-id-37 .tarjetas-nosotros-proceso + .ilustrado-prosa--cierre p {
max-width: var(--ilustrado-ancho-lectura);
}
.page-id-37 .tarjetas-nosotros-proceso + .ilustrado-prosa--cierre strong {
color: var(--color-miel-oscura);
}
/* === "PROCESO DE POSICIONAMIENTO" — solo tarjetas, sin hexágonos
* (/agencia-de-posicionamiento-web/, page-id-37) ===========================
* Pedido explícito: "las tarjetas están bien pero quita los hexágonos,
* íconos y líneas, solo deja las tarjetas estilizadas". Se ocultan por
* CSS en vez de tocar el PHP compartido (mismo criterio que el resto de
* esta hoja — ilustrado-proceso.php sigue sirviendo a /consultor-seo/ y
* /agencia-seo-mexico/ sin cambios). padding-top:0 porque ese espacio
* (150px) solo existía para reservarle sitio al hexágono — sin él, deja
* un hueco vacío arriba de las tarjetas si no se quita también. */
.ilustrado-seccion--oscura .ilustrado-proceso__hex-envoltorio,
.ilustrado-seccion--oscura .ilustrado-proceso__linea {
display: none;
}
.ilustrado-seccion--oscura .ilustrado-proceso {
padding-top: 0;
}
/* === "MEDICIÓN DEL POSICIONAMIENTO" — número fantasma + regla ámbar,
* copiado literal de "Una manera de pensar. Muchas formas de aportar."
* en /nosotros/ (/agencia-de-posicionamiento-web/, page-id-37) ============
* SEGUNDA vuelta (pedido explícito: "se ve muy amontonada, tarjetas más
* minimalistas, toma como referencia 'Una manera de pensar...', me
* refiero a la numeración, quiero que copies todo hasta la animación y
* todo"). Reemplaza la tarjeta blanca con vivo ámbar arriba (1ra vuelta)
* por la MISMA receta que .nosotros-filosofia__item/__numero en
* nosotros.css — sin tarjeta sólida, regla vertical ámbar + punto, número
* grande "fantasma" de fondo, mismo hover (elevación + tinte ámbar de
* fondo + el número se enciende en ámbar), copiado valor por valor
* (nosotros.css no se carga en esta página) porque el dueño del
* proyecto pidió copiarlo literal, no solo "inspirarse". */
.page-id-37 .ilustrado-indicador {
position: relative;
padding: var(--espacio-3) var(--espacio-3) var(--espacio-3) var(--espacio-4);
background-color: transparent;
border: none;
border-left: 2px solid rgba(242, 169, 0, 0.4);
border-radius: 2px;
box-shadow: none;
overflow: visible;
transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.page-id-37 .ilustrado-indicador::before {
content: "";
position: absolute;
top: -7px;
left: -4px;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--color-ambar);
}
@media (hover: hover) {
.page-id-37 .ilustrado-indicador: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);
}
.page-id-37 .ilustrado-indicador:hover .ilustrado-indicador__numero {
color: rgba(242, 169, 0, 0.55);
}
}
.page-id-37 .ilustrado-indicador:focus-within {
border-left-color: var(--color-ambar);
background-color: rgba(242, 169, 0, 0.035);
box-shadow: 0 18px 32px rgba(20, 20, 20, 0.08);
}
.page-id-37 .ilustrado-indicador__numero {
display: block;
font-family: var(--font-titulos);
font-weight: 700;
font-size: 3.25rem;
letter-spacing: -0.02em;
line-height: 1;
color: rgba(20, 20, 20, 0.22);
margin-bottom: var(--espacio-2);
transition: color 0.3s ease;
}
.page-id-37 .ilustrado-indicador__texto {
color: var(--color-gris-calido);
font-size: 1rem;
line-height: 1.5;
font-weight: 400;
}
/* Nota de cierre ("Si prefieres ver el servicio completo...") — fondo
* blanco franco en vez del ámbar suave default de ilustrado-destacado.php
* (compartido con otras páginas, por eso el cambio va scoped acá). SEGUNDA
* vuelta (pedido explícito: "no me gusta, se ve poco elegante, quita el
* hexágono de la izquierda y hazlo más minimalista y acorde a la
* página"): se quita también el hexágono+ícono (igual criterio que ya se
* usó para "no me gusta la estela/abeja" — un elemento decorativo de
* menos, no un reemplazo) y la línea vertical se reemplaza por un borde
* izquierdo ámbar delgado, mismo acento ya usado en las tarjetas de
* Medición de esta misma sección (regla vertical + nada más) — "acorde a
* la página" en vez de inventar un acento nuevo. */
.page-id-37 .ilustrado-destacado {
background-color: var(--color-blanco);
border: 1px solid rgba(20, 20, 20, 0.07);
border-left: 3px solid var(--color-ambar);
box-shadow: 0 1px 2px rgba(20, 20, 20, 0.02), 0 8px 20px rgba(20, 20, 20, 0.04);
}
.page-id-37 .ilustrado-destacado__hex,
.page-id-37 .ilustrado-destacado__linea {
display: none;
}
/* === "PAQUETES DE POSICIONAMIENTO WEB" — mismo estilo que "Formatos de
* trabajo con un consultor SEO" (/agencia-de-posicionamiento-web/,
* page-id-37) ===============================================================
* Pedido explícito: "quita los hexágonos y deja el mismo estilo que
* Formatos de trabajo con un consultor SEO literal". Copia exacta del
* bloque ".page-id-35 .ilustrado-tarjeta*" de arriba (sección 3 de esta
* hoja) — mismo componente compartido (ilustrado-tarjeta.php), se oculta
* por CSS en vez de tocar el PHP, igual criterio. Antes esta página
* conservaba su hexágono a propósito (ver nota en el bloque de
* /consultor-seo/); pedido explícito de esta ronda revierte eso. */
.page-id-37 .ilustrado-tarjeta__hex,
.page-id-37 .ilustrado-tarjeta__rayas {
display: none;
}
.page-id-37 .ilustrado-tarjeta {
position: relative;
padding: var(--espacio-4) var(--espacio-3) var(--espacio-3);
overflow: hidden;
}
.page-id-37 .ilustrado-tarjeta::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background-color: var(--color-ambar);
}
.page-id-37 .ilustrado-tarjeta h3 {
min-height: 0;
font-size: 1.375rem;
font-weight: 700;
margin-bottom: var(--espacio-2);
color: var(--color-ambar);
}
.page-id-37 .ilustrado-tarjeta p {
font-size: 0.9375rem;
line-height: 1.65;
color: var(--color-carbon);
}
/* === "PREGUNTAS FRECUENTES" — eyebrow ámbar, no violeta
* (/agencia-de-posicionamiento-web/, page-id-37) ===========================
* Pedido explícito: "Preguntas frecuentes cámbialo a amarillo como en las
* demás páginas". Esta página usa la variante visual v-b (ver
* variante_visual en Meta Box), que pinta TODO eyebrow de
* .encabezado-seccion__etiqueta en violeta (ver .v-b .encabezado-seccion
* __etiqueta en components.css) — correcto para el resto de la página,
* pero el FAQ (fuera de "Diseño ilustrado", usa section-header.php
* normal) se ve mejor con el ámbar default del resto de landings, como
* pidió el dueño del proyecto. Scoped a .landing-faq nada más — no toca
* el resto de eyebrows v-b de esta página ni la regla v-b en otras. */
.page-id-37 .landing-faq .encabezado-seccion__etiqueta {
color: var(--color-miel-oscura);
}
/* === Negritas ámbar en todo el texto libre de la página
* (/agencia-de-posicionamiento-web/, page-id-37) ===========================
* Pedido explícito: "quiero que el texto de toda la página tenga
* negritas si son necesarias para que el texto no se vea plano" — las
* negritas se agregaron al post_content (ver resumen de entrega), este
* bloque solo les da color, mismo criterio ya usado en toda la página
* (zigzag, tarjetas, "Qué se entrega") — nunca el negro/carbón default
* del navegador. Fuera de .ilustrado-seccion--oscura (Proceso, fondo
* carbón) donde el ámbar sólido ya es el acento de marca sobre fondo
* oscuro, igual que .ilustrado-proceso__tiempo ahí. */
.page-id-37 .ilustrado-prosa strong,
.page-id-37 .ilustrado-tarjeta strong {
color: var(--color-miel-oscura);
}
.page-id-37 .ilustrado-seccion--oscura .ilustrado-proceso__caja strong {
color: var(--color-ambar);
}
/* === "PAQUETES DE POSICIONAMIENTO WEB" — párrafos de cierre, menos
* amontonados (/agencia-de-posicionamiento-web/, page-id-37) ==============
* Pedido explícito: "este texto... está mal acomodado" (los 2 párrafos +
* botón después de las 3 tarjetas). Mismo criterio que el cierre de "Qué
* se entrega cada mes": más margen respecto a la rejilla de arriba — acá
* la base ya usa var(--espacio-4)=48px (no es el bug de --espacio-5),
* pero se sentía corto contra tarjetas con vivo ámbar arriba; se sube a
* 64px para que respire igual que el resto de cierres de esta página. */
.page-id-37 .ilustrado-tarjetas + .ilustrado-prosa--cierre {
margin-top: 64px;
}