y deja de coincidir, así que se le
devuelve la animación desde su propia clase. */
@supports (animation-timeline: view()) {
.profile-ledger > .profile-section-marker {
animation: profile-reveal linear both;
animation-timeline: view();
animation-range: entry 8% cover 32%;
}
}
@media (prefers-reduced-motion: reduce) {
.profile-ledger > .profile-section-marker {
opacity: 1 !important;
transform: none !important;
}
}
/* ─────────────────────────────────────────────────────────────────────────
MEDIA SERVER ARCHITECT
───────────────────────────────────────────────────────────────────────── */
/* `.profile-training > div:last-child > p:not(.profile-eyebrow)` también
alcanza al párrafo que envuelve el enlace, que en el PHP era un suelto.
Sin esto el enlace hereda #9b9a94 en vez del blanco del tema.
Se contrarresta con la misma especificidad (0,3,2); patterns.css carga
después de profiles.css, así que gana el desempate por orden. */
.profile-training > div:last-child > p.profile-text-link-row {
color: inherit;
max-width: none;
font-size: inherit;
}
/* Igual que en el ledger: `.profile-training > div` alcanzaba al marcador
cuando era un y pierde la animación. */
@supports (animation-timeline: view()) {
.profile-training > .profile-section-marker {
animation: profile-reveal linear both;
animation-timeline: view();
animation-range: entry 8% cover 32%;
}
}
@media (prefers-reduced-motion: reduce) {
.profile-training > .profile-section-marker {
opacity: 1 !important;
transform: none !important;
}
}
/* ─────────────────────────────────────────────────────────────────────────
CIERRE DE PERFIL
───────────────────────────────────────────────────────────────────────── */
/* La rejilla decorativa. En el PHP era con un 01 dentro, así que el cambio
es el mismo que en los perfiles: el span pasa a contador.
El reset va en body porque la portada no tiene un envoltorio propio
equivalente a .profile-page. Ninguna otra parte del sitio usa .section-marker
(los perfiles usan .profile-section-marker), así que no hay interferencia. */
body {
counter-reset: pp-home-section;
}
/* Ojo: a diferencia del marcador de los perfiles, `.section-marker span` de
site.css NO declara monospace — hereda la Arial del cuerpo. Copiar la regla
de los perfiles metía un desfase de 1px y un cambio de tipografía. */
.section-marker::before {
counter-increment: pp-home-section;
content: counter(pp-home-section, decimal-leading-zero) / "";
margin-right: .9rem;
color: var(--wp--preset--color--primary, #f16824);
}
/* ── Para quién es ──────────────────────────────────────────────────────── */
/* La columna de valores era + tres sueltos dentro de un flex.
Como bloques, cada uno va dentro de su propio , que aporta el margen del
navegador y desajustaría el gap de 1rem del contenedor. */
.audience-values > p {
margin: 0;
/* El era el ítem del flex y medía 18px de alto (.75rem x 1.5).
Envuelto en un que hereda los 16px del cuerpo pasaría a 24px y
descuadraría el gap. Se le da el tamaño del que contiene. */
font-size: .75rem;
line-height: 1.5;
}
/* El Built around pasa a ser un párrafo con clase propia, así que
deja de coincidir con `.audience-values span`. Mismos valores. */
.audience-values .audience-values-label {
color: var(--faint);
letter-spacing: .13em;
text-transform: uppercase;
font: .62rem/1 monospace;
}
/* ── Cierre y contacto ──────────────────────────────────────────────────── */
/* La rejilla decorativa era . */
.completion-status::before {
content: "";
background: var(--orange);
border-radius: 50%;
width: 7px;
height: 7px;
flex: 0 0 auto;
box-shadow: 0 0 0 4px rgba(241, 104, 36, .102);
}
/* Igual que en .profile-cta: el del botón era hijo directo y ahora va
dentro de un , que sí recoge la regla de los párrafos. */
.completion-copy > p.completion-action {
max-width: none;
margin: 0;
}
/* ── Entornos de producción ─────────────────────────────────────────────── */
/* `.stage-window` era un , `.team-person p` (0,1,1) las captura y gana a `.person-initials`
(0,1,0): quedaban a 12.48px en vez de 115.2px. En el original eran un
y esa regla no las alcanzaba. Se repite la declaración con especificidad
suficiente (0,2,1), más el margin que un sí trae. */
div.team-person .person-initials {
margin: 0;
align-self: center;
color: #c8c5be;
font-size: clamp(5rem, 8vw, 9rem);
font-weight: 700;
line-height: .8;
letter-spacing: -.08em;
transition: color .25s;
}
/* Los estados. El original los colgaba de :focus-visible sobre el propio ;
ahora el foco lo recibe el enlace interno, así que se usa :focus-within.
El hover no cambia: apuntaba ya a .team-person y sigue apuntando ahí. */
div.team-person:focus-within {
color: var(--white);
background: #111;
}
div.team-person:focus-within p,
div.team-person:focus-within .person-initials {
color: #e4e1da;
}
div.team-person:focus-within::before,
div.team-person:hover::before {
color: #e4e1da;
}
div.team-person:focus-within h3 a:focus-visible::after {
outline: 2px solid var(--orange);
outline-offset: -4px;
}
/* Cuarta categoría de rotura otra vez: el override móvil del tema
(`@media (width<=900px){.person-initials{font-size:6rem}}`) tiene menos
especificidad que la contra-regla de arriba y perdía. Se repite aquí. */
@media (width <= 900px) {
div.team-person .person-initials {
font-size: 6rem;
}
}
/* ── Media Server Architect (portada) ───────────────────────────────────── */
/* El panel de esquema llevaba tres de ruta y tres de puerto, todos
decorativos. El ::after de .training-blueprint ya lo usa el marco interior
del tema, así que las seis marcas van en ::before como capas de fondo:
las rutas son líneas sólidas (linear-gradient) y los puertos usan el mismo
SVG con feGaussianBlur que los puntos del cierre (box-shadow 15px =
gaussiana de desviación 7.5). */
.training-blueprint::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background-repeat: no-repeat;
background-image:
linear-gradient(var(--orange), var(--orange)),
linear-gradient(var(--orange), var(--orange)),
linear-gradient(var(--orange), var(--orange)),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38'%3E%3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='7.5'/%3E%3C/filter%3E%3Ccircle cx='19' cy='19' r='4' fill='%23f16824' opacity='.6' filter='url(%23b)'/%3E%3Ccircle cx='19' cy='19' r='4' fill='%23f16824'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38'%3E%3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='7.5'/%3E%3C/filter%3E%3Ccircle cx='19' cy='19' r='4' fill='%23f16824' opacity='.6' filter='url(%23b)'/%3E%3Ccircle cx='19' cy='19' r='4' fill='%23f16824'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38'%3E%3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='7.5'/%3E%3C/filter%3E%3Ccircle cx='19' cy='19' r='4' fill='%23f16824' opacity='.6' filter='url(%23b)'/%3E%3Ccircle cx='19' cy='19' r='4' fill='%23f16824'/%3E%3C/svg%3E");
background-size: 31% 1px, 30% 1px, 1px 80%, 38px 38px, 38px 38px, 38px 38px;
/* Dos fórmulas distintas de compensación, porque background-position mide
el porcentaje sobre (contenedor - imagen):
· capa de tamaño porcentual s, posición deseada d -> p = d / (100 - s)
· capa de tamaño fijo iw, posición deseada d% -> calc(d% + d*iw)
Los puertos llevan además -15px, que es lo que el núcleo de 8px está
inscrito dentro del SVG de 38px. */
background-position:
left 13.0435% top calc(49% + .49px),
left 87.142857% top calc(49% + .49px),
left calc(50% + .5px) top 40%,
left calc(8% - 11.96px) top calc(49% - .38px),
right calc(8% - 11.96px) top calc(49% - .38px),
left 50% bottom calc(11% - 10.82px);
}
/* El núcleo: . Al envolverlo, :last-of-type
se desplaza al párrafo del enlace y el descriptivo pierde sus estilos.
Se resuelve con clases explícitas en los dos. */
.training-lead > p.training-lead-copy {
margin: 0;
max-width: 680px;
color: #50504c;
font-size: clamp(1rem, 1.25vw, 1.2rem);
}
.training-lead > p.text-link-row {
margin: 0;
max-width: none;
color: inherit;
font-size: inherit;
}
/* El currículo. wp:list produce , que aporta el margen del navegador. */
.hero-actions > p {
margin: 0;
}
/* Las dos líneas de la telemetría eran que crecían para rellenar. Como
bloque son wp:separator, igual que la señal del hero de perfil: es lo que
realmente son y se ven en el editor. */
.hero-telemetry hr.telemetry-rule {
flex: 1;
height: 1px;
border: 0;
margin: 0;
padding: 0;
background: var(--line);
}
/* Los tres textos eran y ahora son . */
.hero-telemetry > p {
margin: 0;
}
dentro.
Como bloque es el
. Las reglas de .environment-photo se replican apuntando al
descendiente, que es estable frente a los reguardados del editor. */
.stage-window {
margin: 0;
}
.stage-window img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(.82) saturate(.88) contrast(1.06);
transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .45s;
}
.frame-1 .stage-window img { object-position: center 56%; }
.frame-2 .stage-window img { object-position: center 52%; }
.frame-3 .stage-window img { object-position: center 48%; }
.frame-4 .stage-window img { object-position: center 52%; }
@media (hover: hover) and (pointer: fine) {
.environment-frame:hover .stage-window img {
filter: brightness(.94) saturate(.94) contrast(1.04);
transform: scale(1.025);
}
}
/* La barra naranja inferior era . El ::after
de .stage-window ya lo usa el degradado del tema, pero ::before está libre. */
.stage-window::before {
content: "";
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 34%;
height: 2px;
background: linear-gradient(90deg, var(--orange), rgba(241, 104, 36, 0));
}
/* Numeración de los pies. Sustituye a `.environment-caption > span`. */
.environment-reel {
counter-reset: pp-frame;
}
.environment-caption::before {
counter-increment: pp-frame;
content: counter(pp-frame, decimal-leading-zero) / "";
color: var(--orange);
font: .62rem/1 monospace;
}
/* ── La cadena de señal ─────────────────────────────────────────────────── */
/* La espina vertical era
, con texto real —el nombre— y su
::after estirado sobre toda la tarjeta.
Frente a una capa superpuesta aparte: el enlace tiene nombre accesible
propio (se anuncia «Bryan, enlace»), el foco de teclado funciona sin
tabindex, y todo el contenido sigue siendo bloques editables.
Contrapartida conocida: no se puede seleccionar texto sobre la tarjeta.
Es el precio de cualquier tarjeta enteramente clicable.
Todo va prefijado con div. para no tocar el marcado legado, donde
.team-person es un . */
div.team-person {
position: relative;
}
div.team-person h3 a::after {
content: "";
position: absolute;
inset: 0;
}
/* .person-signal era 01, decorativo y aria-hidden.
Pasa entero a ::before: el punto como degradado radial a la izquierda y el
número como contador, para que reordenar tarjetas renumere solo. */
.team-line {
counter-reset: pp-person;
}
div.team-person::before {
counter-increment: pp-person;
content: counter(pp-person, decimal-leading-zero);
padding-left: calc(7px + .7rem);
background: radial-gradient(circle at 3.5px 50%, var(--orange) 3.5px, transparent 3.5px) no-repeat;
color: #a94b1c;
font: .62rem/1 monospace;
transition: color .25s;
}
/* La flecha, que era como último hijo. */
div.team-person::after {
content: "↗";
justify-self: end;
font-size: 1.2rem;
}
/* Las iniciales sí son contenido, así que siguen siendo un bloque editable.
Como
con