, ver index.html). ".service-card p" tiene mayor especificidad (0,1,1) que ".service-card__detail" (0,1,0), así que por cascada pisaba silenciosamente el color/font-size/margin-top que ".service-card__detail" intentaba fijar — el más dañino era margin-top: auto, que dentro del mismo contenedor flex-column hacía competir a AMBOS elementos por el espacio libre repartido de forma impredecible, apretando el texto del detalle contra el número del pilar en el nodo 04 (texto más largo). Fix: clase explícita en vez de acoplarse al tag genérico — cero ambigüedad de cascada, sin subir especificidad ni usar !important. */ .service-card__desc { font-size: 0.9rem; line-height: var(--lh-normal); color: var(--color-ink-muted); margin-top: auto; } /* Fila de tags/capacidades por pilar — mismo patrón visual que .project-card__tags (pill con borde, mono, uppercase), reutilizado aquí en vez de inventar un estilo nuevo (pedido explícito). */ .service-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); } .service-card__tags li { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-muted); border: 1px solid var(--color-border); border-radius: 999px; padding: 4px 10px; } /* ---- Detalle de conexión — revelado en hover/foco (2026-07-29) ---- Texto que explica hacia qué pilar "fluye" cada nodo (refuerza la metáfora de diagrama con CONTENIDO, no solo con estilo). Reserva su espacio SIEMPRE — anima solo opacity+transform, nunca max-height ni display, así la tarjeta no cambia de alto al revelarse (ver min-height arriba). Sigue en el árbol de accesibilidad en todo momento (nunca aria-hidden): un lector de pantalla lo recibe igual que el resto del contenido, sin depender de hover/foco para "existir" — lo que cambia con la interacción es solo su presentación visual. Ronda 4 (2026-07-29): su margin-top/color/font-size ya no compiten con ".service-card p" — ese selector genérico se renombró a ".service-card__desc" (ver arriba) precisamente porque también matcheaba este elemento por ser un
. Ver ese comentario para el
diagnóstico completo del bug reportado en el pilar 04. */
.service-card__detail {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: var(--tracking-wide);
color: var(--color-accent-teal-deep);
margin-top: var(--space-3);
opacity: 0;
transform: translateY(6px);
transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.service-card__detail strong {
color: var(--color-ink);
font-weight: 700;
}
@media (hover: hover) {
.service-card:hover .service-card__detail {
opacity: 1;
transform: translateY(0);
}
}
.service-card:focus .service-card__detail {
opacity: 1;
transform: translateY(0);
}
/* ---- Flecha conectora entre nodos ----
Elemento real del DOM (span + svg), hermano entre cada par de
.service-card dentro de .services-diagram (ver layout.css) — no un
pseudo-elemento posicionado en absoluto. Al vivir en el flujo normal,
se reordena solo entre el layout vertical (mobile/tablet, flechas hacia
abajo) y horizontal (desktop ≥1100px, flechas hacia la derecha) sin
recalcular coordenadas. aria-hidden: decorativa — el orden real de
lectura de los 4 pilares ya lo da el DOM de los .service-card
(role="listitem"), un lector de pantalla no necesita "escuchar" la
flecha para entender la secuencia. */
.services-diagram__arrow {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
color: var(--color-signal);
opacity: 0.5;
transition: opacity var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out);
}
.services-diagram__arrow svg {
width: 22px;
height: 22px;
transform: rotate(90deg); /* flujo vertical por defecto (mobile/tablet) — apunta hacia abajo */
}
@media (min-width: 1100px) {
.services-diagram__arrow svg {
transform: rotate(0deg); /* flujo horizontal — apunta a la derecha */
}
}
/* La flecha se "enciende" en teal — el acento de "flujo/conexión" del
diagrama (ver tokens.css), deliberadamente distinto del naranja
"estás aquí" del propio nodo — cuando el nodo ANTERIOR (el que empuja
el flujo hacia este) está en hover o foco.
Ronda 4 (2026-07-29, feedback: "la interacción se siente simple, solo
opacity+transform del detalle"): se suma un "empuje" continuo mientras
el nodo anterior sigue activo — la flecha no solo se enciende, sigue
moviéndose en la dirección del flujo (abajo en mobile/tablet, a la
derecha en desktop ≥1100px, mismo breakpoint que la rotación del ícono
arriba) reforzando la metáfora de "empuja hacia el siguiente pilar" en
vez de solo cambiar de color. @keyframes en animations.css — misma
convención del archivo (transform únicamente, sin filter/blur, barato
en cualquier GPU). Se define aquí la variante vertical por defecto y
se cambia a la horizontal en el breakpoint de escritorio. */
@media (hover: hover) {
.service-card:hover + .services-diagram__arrow {
opacity: 1;
color: var(--color-accent-teal-deep);
animation: services-arrow-flow-y var(--dur-slow) var(--ease-in-out) infinite;
}
}
.service-card:focus + .services-diagram__arrow {
opacity: 1;
color: var(--color-accent-teal-deep);
animation: services-arrow-flow-y var(--dur-slow) var(--ease-in-out) infinite;
}
@media (min-width: 1100px) {
@media (hover: hover) {
.service-card:hover + .services-diagram__arrow {
animation-name: services-arrow-flow-x;
}
}
.service-card:focus + .services-diagram__arrow {
animation-name: services-arrow-flow-x;
}
}
/* ---- Acento del badge "vuelve a 01" al llegar al último pilar (mobile/
tablet, <1100px) ---- Equivalente mobile del bloque :has() de abajo,
pero sin necesitarlo: .services-diagram__cycle-mobile es hermano
INMEDIATO del pilar 04 en el DOM (ver index.html), así que el
selector adyacente `+` de toda la vida alcanza. */
@media (max-width: 1099px) {
@media (hover: hover) {
.service-card:nth-of-type(4):hover + .services-diagram__cycle-mobile svg,
.service-card:nth-of-type(4):hover + .services-diagram__cycle-mobile span {
opacity: 1;
}
}
.service-card:nth-of-type(4):focus + .services-diagram__cycle-mobile svg,
.service-card:nth-of-type(4):focus + .services-diagram__cycle-mobile span {
opacity: 1;
}
}
/* ---- Acento del arco de ciclo al llegar al último pilar (escritorio) ----
Progressive enhancement con :has() (soporte amplio en navegadores
evergreen 2026; sin soporte, el arco simplemente se queda con su
animación ambiental ya existente — nunca deja de comunicar el ciclo,
solo pierde este refuerzo puntual). El arco (.services-diagram__cycle,
ver layout.css) vive ANTES que los .service-card en el DOM, así que un
selector de hermanos (~/+) no alcanza desde el pilar 04 — de ahí
:has() sobre el contenedor en vez de reestructurar el DOM. */
@media (min-width: 1100px) {
.services-diagram:has(.service-card:nth-of-type(4):hover) .services-diagram__cycle-path,
.services-diagram:has(.service-card:nth-of-type(4):focus) .services-diagram__cycle-path {
opacity: 1;
stroke-width: 2.25;
}
.services-diagram:has(.service-card:nth-of-type(4):hover) .services-diagram__cycle-arrowhead-icon,
.services-diagram:has(.service-card:nth-of-type(4):focus) .services-diagram__cycle-arrowhead-icon,
.services-diagram:has(.service-card:nth-of-type(4):hover) .services-diagram__cycle-label,
.services-diagram:has(.service-card:nth-of-type(4):focus) .services-diagram__cycle-label {
opacity: 1;
}
}
.services-cta a {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-mono);
font-size: var(--fs-small);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--color-ink);
border-bottom: 1px solid var(--color-border-strong);
padding-bottom: 4px;
transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
.services-cta a:hover {
color: var(--color-accent-orange);
border-color: var(--color-accent-orange);
}
}
/* ---- Fila de proyecto (caso de trabajo real, con captura propia) ----
Ronda 6 (2026-07-29, feedback explícito de Frank: "debe ser igual
como el ejemplo... con más interacción"): se reconstruye sobre el
bento grid de la ronda 5 para acercarse mucho más al bloque exacto
"Evidence, not theatre." (`.section.section--rule` → `.case-grid` /
`.case-card`) de aiagency-599.pages.dev, verificado renderizándolo
con Playwright (layout, CSS real vía network response, e interacción
en vivo con mouse.move — no solo HTML/CSS en reposo). Adoptado casi
1:1: filas a todo el ancho separadas por `border-top` (no cards en
caja con fondo propio), grid 7fr/5fr con imagen/cuerpo alternados
por fila (`nth-of-type(2n)`), cuerpo envuelto en un recuadro de 1px
(`.project-card__body`) sin relleno, tipografía del nombre de caso
mucho más grande y dominante, y el mismo gesto de imagen
(`saturate(.78)→1` + `scale(1.025)` en hover) ya adaptado en ronda 5.
Lo nuevo de esta ronda: 1) cifra grande — la referencia usa un
resultado de negocio inventado (ej. "41% faster exception
resolution"); eso NO se replica (prohibido fabricar métricas —
restricción explícita de Frank), pero SÍ se replica el gesto
tipográfico con datos reales y neutrales ya presentes en el copy de
cada caso (recuentos verificables: "3" sitios del ecosistema Grupo
Crear, "2" plataformas del Colegio, "3" pasos del cotizador ABS —
ver `.project-card__stat` más abajo); Comuniads y Restaurant Digital
deliberadamente NO tienen esta cifra porque no existe un recuento
real de 2+ piezas que mostrar sin forzarlo — ver nota en
`.project-card__stat` y memoria del agente para el detalle; 2) color
de acento por fila vía `--accent` inline (mismo mecanismo literal que
`style="--accent: #c7f36b"` de la referencia), que ahora tiñe la
cifra, el chip numerado en hover Y el anillo del cursor personalizado
al pasar sobre la fila (ver cursor.js) — esto último es una extensión
propia, sin equivalente en aiagency, pensada para reforzar
"interacción" reutilizando el cursor magnético que ya existía en el
sitio en vez de crear un sistema paralelo; 3) parallax de la foto que
sigue al cursor dentro del panel de medios (ver issets/js/projects.js),
además del saturate/scale ya existente — la referencia no tiene esto,
es la segunda extensión propia para "más interacción". El gradiente
temático de fondo por caso (ronda 2/5) se mantiene como color de
"loading" bajo cada imagen. */
.project-card {
position: relative;
display: flex;
flex-direction: column;
border-top: 1px solid var(--color-border);
padding-top: var(--space-6);
}
.project-card + .project-card {
margin-top: var(--space-7);
}
.project-card__media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: var(--radius-sm);
background: linear-gradient(150deg, #0a0e1a, #10141f);
}
/* Variedad temática por caso (color de "loading" bajo la foto) — 6
combinaciones sobre la misma paleta ya existente (cian, naranja-señal,
azul, azul profundo, una quinta mezcla cian+naranja para el 5º caso, y
naranja de nuevo para el 6º — ver nota junto a nth-of-type(6) más abajo). */
.project-card:nth-of-type(1) .project-card__media {
background: radial-gradient(circle at 26% 22%, rgba(56, 189, 248, 0.34), transparent 62%),
linear-gradient(150deg, #0a0e1a, #10141f);
}
.project-card:nth-of-type(2) .project-card__media {
background: radial-gradient(circle at 74% 28%, rgba(255, 106, 3, 0.2), transparent 60%),
linear-gradient(150deg, #0a0e1a, #10141f);
}
.project-card:nth-of-type(3) .project-card__media {
background: radial-gradient(circle at 38% 72%, rgba(96, 165, 250, 0.3), transparent 60%),
linear-gradient(150deg, #0a0e1a, #10141f);
}
.project-card:nth-of-type(4) .project-card__media {
background: radial-gradient(circle at 62% 66%, rgba(57, 87, 162, 0.45), transparent 60%),
linear-gradient(150deg, #0a0e1a, #10141f);
}
.project-card:nth-of-type(5) .project-card__media {
background: radial-gradient(circle at 50% 50%, rgba(255, 106, 3, 0.16), transparent 65%),
radial-gradient(circle at 15% 85%, rgba(56, 189, 248, 0.22), transparent 60%),
linear-gradient(150deg, #0a0e1a, #10141f);
}
/* 6º caso (ronda 7): Célula Publicidad, agencia partner — mismo
naranja corporativo que el caso 2 (Colegio), reutilizado a
propósito: solo hay 4 tokens de acento en la paleta para 6 filas
(ver memoria del agente, ronda 6), y naranja da mejor contraste con
el cian de la fila inmediatamente anterior (caso 5) que repetir cian. */
.project-card:nth-of-type(6) .project-card__media {
background: radial-gradient(circle at 30% 30%, rgba(255, 106, 3, 0.22), transparent 60%),
linear-gradient(150deg, #0a0e1a, #10141f);
}
/* Foto real del proyecto — cubre todo el panel de medios. Desaturada en
reposo (mismo gesto que .case-media img de la referencia) y a
saturación/brillo plenos en hover/foco, SOLO donde hay hover real
(pointer fino): en touch (TV/mobile sin hover) se muestra siempre a
color pleno porque ahí no existe forma de "revelar" el estado — dejar
la captura permanentemente apagada se leería como una imagen de mala
calidad, no como una interacción. */
/* --shot-scale/--parallax-* son escritas por issets/js/projects.js
(solo hover:hover + pointer:fine, y solo si NO hay prefers-reduced-
motion — el script ni siquiera agrega los listeners en ese caso). El
fallback de :hover/:focus-within de abajo cubre foco por teclado y
cualquier caso donde JS no llegue a correr; el translate por defecto
es 0px así que sin JS el resultado es idéntico al de la ronda 5. */
.project-card__shot {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.4) brightness(0.9);
transform: scale(var(--shot-scale, 1.02)) translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0);
transition: filter var(--dur-slow) var(--ease-out);
}
@media (hover: hover) {
.project-card:hover .project-card__shot,
.project-card:focus-within .project-card__shot {
filter: saturate(1.05) brightness(1);
}
}
/* Fallback de --shot-scale para foco por teclado / navegadores sin JS
(con mouse+JS activo, projects.js sobreescribe --shot-scale inline en
cada tick y esta regla queda sin efecto por especificidad). Se exige
también no-preference de movimiento reducido: sin esto, hover con
mouse bajo prefers-reduced-motion:reduce igual escalaba la imagen de
golpe (sin transición, ya que --dur-fast/linear solo cubre `filter`)
— con la condición agregada, bajo movimiento reducido la imagen
nunca cambia de tamaño, solo de color (mismo criterio que projects.js). */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.project-card:hover .project-card__shot,
.project-card:focus-within .project-card__shot {
--shot-scale: 1.06;
}
}
@media (hover: none) {
.project-card__shot {
filter: saturate(0.94) brightness(0.98);
transform: scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.project-card__shot {
transition: filter var(--dur-fast) linear;
}
}
/* Chip numerado — reemplaza el ghost-num transparente de las rondas
anteriores (pensado para el fondo oscuro liso de los iconos SVG; sobre
una foto real a 0.07 de opacidad se pierde por completo). Mismo
lenguaje visual que .status-pill/.project-card__tags (píldora mono
con borde), ahora con fondo sólido para quedar legible sobre
cualquier captura. */
.project-card__ghost-num {
position: absolute;
top: var(--space-3);
left: var(--space-3);
z-index: 1;
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: var(--tracking-wide);
line-height: 1;
color: var(--color-ink);
background: rgba(6, 7, 12, 0.72);
border: 1px solid rgba(238, 242, 247, 0.16);
border-radius: 999px;
padding: 5px 11px;
pointer-events: none;
user-select: none;
transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
/* Acento por fila — el chip se enciende con el color de la fila
(--accent, inline en cada .project-card, ver index.html) al pasar el
cursor, en vez de naranja fijo — refuerza junto con la cifra grande
y el tinte del cursor (cursor.js) que cada caso tiene su propia
identidad de color, no solo el ghost-num aislado como en ronda 5. */
@media (hover: hover) {
.project-card:hover .project-card__ghost-num {
color: var(--accent, var(--color-accent-orange));
border-color: var(--accent, var(--color-accent-orange));
}
}
/* ---- Capturas hermanas (ecosistema/piezas adicionales) ----
Tira de 1-2 miniaturas superpuestas al pie del panel de medios, solo en
los casos con más de una captura de respaldo (Grupo Crear, Colegio,
ABS Security — ver index.html). Prueba visual de una afirmación
concreta del texto (ej. "portal aparte", "ecosistema de 3 sitios"),
no decoración. Llevan alt real (son informativas) pero NO son
focusables — no hay una acción/enlace real detrás todavía, así que
agregar un foco sin acción sería un callejón sin salida para teclado/
D-pad (ver restricción de accesibilidad del sitio). */
.project-card__siblings {
position: absolute;
left: var(--space-3);
right: var(--space-3);
bottom: var(--space-3);
z-index: 1;
display: flex;
gap: var(--space-2);
}
.project-card__siblings--single {
max-width: 220px;
}
.project-card__sibling {
position: relative;
flex: 1;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: var(--radius-sm);
border: 1px solid rgba(238, 242, 247, 0.18);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
background: #0a0e1a;
}
.project-card__sibling img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.55) brightness(0.85);
transition: filter var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
/* Captura vertical (ej. pantalla de login estilo mobile) — recortarla en
cover la dejaría casi ilegible; se ve completa con letterbox oscuro. */
.project-card__sibling--contain img {
object-fit: contain;
}
.project-card__sibling span {
position: absolute;
left: 6px;
bottom: 5px;
right: 6px;
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: #fff;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (hover: hover) {
.project-card:hover .project-card__sibling img {
filter: saturate(1) brightness(1);
transform: scale(1.05);
}
}
@media (hover: none) {
.project-card__sibling img {
filter: saturate(0.92) brightness(0.96);
}
}
/* Recuadro de 1px sin relleno (eco de `.case-content{border:1px solid
var(--line)}` de la referencia) — antes el color/fondo del panel
vivía en `.project-card` (caja elevada); ahora el "marco" es solo
del cuerpo, la foto queda a sangre completa sin borde propio. */
.project-card__body {
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-4);
flex: 1;
}
/* Pulso de llegada al navegar desde un logo de #clientes (ronda 8,
2026-07-29) — CSS puro vía :target, sin JS: el de #clientes
apunta a un id="caso-*" en la fila correspondiente; el navegador ya
hace scroll suave (scroll-behavior:smooth, base.css) y agrega
:target automáticamente al llegar. scroll-margin-top compensa el
header fijo para que la fila no quede tapada al aterrizar. El pulso
usa var(--accent) de la propia fila (heredada por .project-card__body
desde el