/* ============================================================================
RavencoreX — Nosotros / About (Leadership System, light mode)
Spec: docs/chatgpt/2026-08-12-pagina-nosotros-institucional.md
Reemplaza a about-team.css en esta página. Siete secciones, light mode,
tokens y familias tipográficas de la home — no se introduce ningún sistema
visual nuevo. La referencia visual aprobada define composición, escala y
jerarquía; no una tipografía serif ni una paleta propia (§7.1).
Reglas duras que esta hoja respeta:
- fondo Paper / neutral-0, sin fondos oscuros consecutivos (§7.2);
- bordes rectos con el --radius del sistema, sin tarjetas grises genéricas,
sin retratos circulares flotando sobre cajas (§7.2);
- un solo acento Human Signal, en la declaración compartida (§9.5);
- movimiento breve que termina estático, nunca en loop (§16);
- ninguna sección usa min-height: 100vh (§6).
============================================================================ */
/* ============================================================================
BASE DE PÁGINA
============================================================================ */
/* El body va SIN fondo propio a propósito: por el orden de pintado de CSS, el
background de un elemento se dibuja después de sus descendientes con z-index
negativo, así que un blanco opaco acá tapaba su propio ::before —el fondo de
pantalla— y la página se veía plana. El color base vive dentro del gradiente
del ::before; el canvas queda cubierto por el fondo del . */
.about-page {
background: transparent;
color: var(--color-neutral-950);
}
/* El fondo de página vive en public/css/rcx-backdrop.css y se activa con
. Acá vivía una copia propia —tres
manchas de color que el owner bajó el 2026-08-13 por "muy principiante"—; se
retiró para que las dos páginas compartan el mismo material. */
/* La página anterior viajaba de fondo oscuro a claro con un observer sobre
[data-rcx-bg]. Acá el fondo es uno solo: si ese script sobrevive en otra
página, esta no lo usa y el body no debe quedar pintado por él — pero se fija
en el , no en el body, para no volver a tapar el ::before. */
html:has(body.about-page) { background-color: var(--color-neutral-0); }
body.about-page { background-color: transparent; }
.about-section { padding-block: var(--space-3xl); }
.about-section--tight { padding-block: var(--space-2xl); }
@media (max-width: 767px) {
.about-section { padding-block: var(--space-2xl); }
.about-section--tight { padding-block: var(--space-xl); }
}
/* ---------------------------------------------------------------------------
PESO DE LOS RÓTULOS EN MAYÚSCULA (owner 2026-08-16, cuarto pedido)
.about-eyebrow, .about-profile__role y .about-track__attrib comparten el
patrón que se cae de la página: mayúsculas + 12/13px + tracking amplio +
color de media luminosidad. Cada ingrediente adelgaza el trazo ópticamente y
los cuatro juntos lo borran; en azure-700 pesa todavía más, porque llega con
menos contraste que un gris oscuro sobre blanco.
Va 700 y no 600 a propósito: la familia mono se carga como
IBM+Plex+Mono:wght@400;500;700 / JetBrains+Mono:wght@400;700 — no hay cara
de 600. Pedir 600 hoy renderiza el archivo de 700 igual, pero dejaría el
texto listo para adelgazarse solo el día que alguien agregue esa cara al
. Escribir 700 es escribir lo que realmente se ve.
--------------------------------------------------------------------------- */
.about-eyebrow {
display: block;
margin: 0 0 var(--space-sm);
font-family: var(--font-mono);
font-size: var(--text-caption);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
font-weight: var(--weight-bold);
color: var(--color-azure-700);
}
.about-h2 {
margin: 0;
font-family: var(--font-display);
font-size: var(--text-h3);
line-height: var(--leading-h3, 1.15);
font-weight: var(--weight-semibold);
color: var(--color-neutral-950);
max-width: 22ch;
text-wrap: balance;
}
.about-body {
margin: var(--space-md) 0 0;
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-neutral-800);
max-width: 68ch; /* §7.3 */
}
/* ============================================================================
1. HERO INSTITUCIONAL (§8)
Claro, no fotográfico, sin CTA: la página presenta primero quién responde.
============================================================================ */
.about-hero {
position: relative;
padding-block: var(--space-3xl) var(--space-2xl);
background: transparent;
overflow: hidden;
}
/* Cuadrícula técnica decorativa, baja opacidad (§7.2). aria-hidden en el DOM. */
.about-hero__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(12, 130, 245, 0.055) 1px, transparent 1px),
linear-gradient(to bottom, rgba(12, 130, 245, 0.055) 1px, transparent 1px);
background-size: 64px 64px;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 82%);
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 82%);
pointer-events: none;
}
/* Dos columnas desde desktop: el argumento a la izquierda, la ilustración a la
derecha. Owner 2026-08-13, sobre una referencia de collage de retratos en
cápsulas. La imagen es ILUSTRATIVA y va con alt vacío + aria-hidden: son
personas generadas, no el equipo, y en la página que argumenta quién responde
esa distinción no puede quedar librada al criterio del lector. Las tres
personas reales viven en la sección siguiente, con nombre y LinkedIn. */
.about-hero__inner { position: relative; }
.about-hero__copy { min-width: 0; }
.about-hero__art { display: none; }
@media (min-width: 1024px) {
.about-hero__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
align-items: center;
gap: var(--space-2xl);
}
.about-hero__art { display: block; margin: 0; }
.about-hero__art img {
display: block;
width: 100%;
height: auto;
max-width: 632px;
margin-inline: auto;
}
}
.about-hero__title {
margin: 0;
font-family: var(--font-display);
font-size: clamp(2.25rem, 1.4rem + 3.6vw, var(--text-h2));
line-height: var(--leading-h2);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-h2, -0.02em);
color: var(--color-neutral-950);
max-width: 18ch;
text-wrap: balance;
}
.about-hero__intro {
margin: var(--space-lg) 0 0;
font-size: var(--text-body-lg);
line-height: var(--leading-body);
color: var(--color-neutral-800);
max-width: 62ch;
}
/* La síntesis es la bisagra hacia el sistema de liderazgo: se separa con una
línea Agent Blue fina —no un borde de caja— para que se lea como el primer
tramo de la conexión que recorre toda la sección siguiente. */
.about-hero__summary {
position: relative;
margin: var(--space-lg) 0 0;
padding-left: var(--space-md);
border-left: 2px solid var(--color-azure-500);
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-neutral-700);
max-width: 60ch;
}
/* ============================================================================
2. SISTEMA DE LIDERAZGO (§9)
Dos placas idénticas para los cofundadores, franja de ancho completo y menor
altura para el liderazgo extendido, declaración compartida al cierre.
============================================================================ */
.about-leadership { background: rgba(238, 245, 248, 0.55); }
.about-leadership__founders {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 768px) {
/* Owner 2026-08-13: "achicando un poco las cards logramos ponerlas en una
misma línea?". Las tres comparten fila. A 1440 eso deja cada card en
~400px: con el retrato al costado al texto le quedaban ~175px (24
caracteres por línea), así que la card cambia de estructura — retrato
arriba y más chico, texto debajo a ancho completo. Deroga el "contenido y
retrato conviven horizontalmente" del spec §9.1. */
.about-leadership__founders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* En tablet vuelven a ser dos: medido a 820px, tres columnas dejan el texto
en 21 caracteres por línea, que es justo lo que el §21 manda evitar
("si texto y retratos se comprimen, se apilan"). Roxana cae debajo y se
centra, como estaba antes de compartir fila. */
.about-profile--extended {
/* Toma la fila entera y se acota al ancho de una card: sin grid-column el
max-width sólo la encoge dentro de su columna, y queda descentrada. */
grid-column: 1 / -1;
max-width: calc((100% - var(--space-lg)) / 2);
margin-inline: auto;
}
}
@media (min-width: 1024px) {
/* Desde desktop real las tres entran sin comprimir: a 1440 cada card mide
400px y el texto conserva ~48 caracteres por línea. */
.about-leadership__founders { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.about-profile--extended { grid-column: auto; max-width: none; margin-inline: 0; }
}
/* --- Placa de perfil --------------------------------------------------- */
.about-profile {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
background: var(--color-neutral-0);
border: var(--icon-stroke) solid var(--color-border);
border-radius: var(--radius);
padding: var(--space-md);
/* Sombra fría, amplia y sutil (§7.2). */
box-shadow: 0 18px 40px -28px rgba(1, 7, 12, 0.45);
}
@media (min-width: 768px) {
/* Retrato y contenido conviven horizontalmente; el retrato ocupa entre 42% y
48% de la placa (§9.1). 45% queda en el centro de ese rango y deja al texto
una medida cómoda. */
.about-profile {
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: var(--space-md);
}
/* El retrato deja de ser una columna y pasa a encabezar la card, acotado
para que no vuelva a dominarla. */
.about-profile__portrait {
width: 100%;
max-width: 168px;
aspect-ratio: 4 / 5;
}
}
.about-profile__portrait {
position: relative;
margin: 0;
background: var(--color-neutral-100);
border-radius: var(--radius);
overflow: hidden;
/* Vertical, nunca una ventana horizontal que corte el cuerpo (§9.1). */
aspect-ratio: 3 / 4;
}
.about-profile__portrait img,
.about-profile__portrait picture {
position: relative;
z-index: 1;
}
.about-profile__portrait img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 22%; /* deja aire sobre la frente, hombros visibles */
}
/* Fallback textual (§10). Vive DEBAJO de la imagen: sólo queda a la vista si
el retrato no pinta. Sin el z-index de la imagen, este panel absoluto se
dibuja encima de un en flujo normal y tapa la foto siempre. */
.about-profile__initials {
position: absolute;
inset: 0;
z-index: 0;
display: grid;
place-items: center;
font-family: var(--font-display);
font-size: var(--text-h3);
font-weight: var(--weight-semibold);
color: var(--color-azure-700);
background: var(--color-azure-50);
}
.about-profile__name {
margin: 0;
font-family: var(--font-display);
font-size: var(--text-h4);
line-height: 1.2;
font-weight: var(--weight-semibold);
color: var(--color-neutral-950);
}
.about-profile__role {
margin: var(--space-3xs) 0 0;
font-family: var(--font-mono);
font-size: var(--text-caption);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
font-weight: var(--weight-bold);
color: var(--color-azure-700);
}
.about-profile__desc {
margin: var(--space-sm) 0 0;
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-neutral-800);
}
.about-profile__areas {
margin: var(--space-sm) 0 0;
font-family: var(--font-mono);
font-size: 0.8125rem; /* 13px — piso de legibilidad del sitio */
letter-spacing: 0.06em;
color: var(--color-neutral-700);
}
/* La responsabilidad es la frase que distingue una función de otra: va sobre
fondo azure-50 con filete, no como otro párrafo más. */
.about-profile__accountability {
margin: var(--space-sm) 0 0;
padding: var(--space-sm);
background: var(--color-azure-50);
border-left: 2px solid var(--color-azure-500);
font-size: 0.9375rem; /* 15px */
line-height: var(--leading-body-sm);
color: var(--color-neutral-800);
}
.about-profile__link {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
min-height: 44px; /* §20 — target mínimo */
margin-top: var(--space-sm);
font-size: var(--text-body-sm);
font-weight: var(--weight-semibold);
color: var(--color-azure-700);
}
.about-profile__link:hover { color: var(--color-azure-500); }
.about-profile__link svg { width: 18px; height: 18px; flex: none; }
/* --- Franja de liderazgo extendido (§9.1) ------------------------------- */
/* Roxana: ancho completo y MENOR altura. El retrato es una columna angosta,
no una placa de cofundadora: la jerarquía se lee sin leer el cargo, y se
sostiene con CSS desactivado porque además va después en el DOM. */
/* Owner 2026-08-13: la card de Roxana es igual a las otras y comparte fila con
ellas. Reafirma su criterio del 2026-08-12 — la diferencia de rango la dice
su línea de rol, no un formato más chico — y deroga la franja de ancho
completo del spec §9.1/§25.24. No lleva reglas propias: el modificador
sobrevive sólo como gancho semántico para los tests y para el día que haya
que volver a distinguirla. */
.about-profile--extended { }
@media (max-width: 767px) {
/* Los retratos de cofundador se acotan: a ancho completo, dos retratos 3:4
empujaban la sección a 2863px, por encima del techo de 2600px del §21.
Con 260px de ancho y 4:5 —la proporción vertical menos alta que el spec
admite— la sección entra en presupuesto sin perder el formato vertical ni
recortar el cuerpo. */
.about-profile__portrait { width: 100%; max-width: 196px; aspect-ratio: 4 / 5; }
/* El resto del recorte hasta el techo del §21 sale de la caja, no del
retrato: placa más ajustada y menos aire entre las dos. */
.about-profile { padding: var(--space-sm); gap: var(--space-sm); }
.about-leadership__founders { gap: var(--space-md); }
}
/* --- Conexión Agent Blue (§9.1) ----------------------------------------- */
/* Línea decorativa que une las tres funciones. Vive en su propio elemento
aria-hidden y no reserva altura propia en mobile. */
.about-leadership__wire {
display: none;
height: 1px;
margin: var(--space-lg) 0 0;
background: linear-gradient(90deg,
transparent 0%,
var(--color-azure-300) 12%,
var(--color-azure-500) 50%,
var(--color-azure-300) 88%,
transparent 100%);
transform-origin: left center;
}
@media (min-width: 768px) { .about-leadership__wire { display: block; } }
/* --- Declaración compartida (§9.5) -------------------------------------- */
/* Única intervención Human Signal de la sección: una línea horizontal y la
marca X. No es un logo ni un loop. */
.about-leadership__pledge {
display: flex;
align-items: center;
gap: var(--space-sm);
margin: var(--space-xl) 0 0;
padding-top: var(--space-lg);
border-top: 1px solid var(--color-warm-200);
font-family: var(--font-display);
font-size: var(--text-h4);
line-height: 1.25;
font-weight: var(--weight-semibold);
color: var(--color-neutral-950);
text-wrap: balance;
}
.about-leadership__mark {
flex: none;
font-family: var(--font-mono);
font-size: var(--text-h4);
font-weight: var(--weight-bold);
/* warm-700 sobre blanco = 7,36:1. El primitivo Human Signal (#E98A5C) está
calibrado para Core Black, no para papel: acá daría 2,3:1. Mismo rol de
marca, tono legible sobre claro. */
color: var(--color-warm-700);
}
/* ============================================================================
3. EXPERIENCIA COMPROBABLE (§11)
============================================================================ */
.about-track { background: transparent; }
.about-track__attrib {
margin: var(--space-xl) 0 var(--space-sm);
font-family: var(--font-mono);
font-size: 0.8125rem;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: var(--weight-bold);
color: var(--color-neutral-700);
}
.about-track__metrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-md);
margin: 0;
padding: var(--space-lg) 0 0;
border-top: 1px solid var(--color-border);
}
@media (min-width: 768px) {
.about-track__metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.about-track__metric { margin: 0; }
.about-track__value {
display: block;
font-family: var(--font-display);
font-size: var(--text-h3);
line-height: 1.05;
font-weight: var(--weight-bold);
color: var(--color-azure-700);
font-variant-numeric: tabular-nums;
}
.about-track__label {
display: block;
margin: var(--space-2xs) 0 0;
font-size: var(--text-body-sm);
line-height: var(--leading-body-sm);
color: var(--color-neutral-700);
}
.about-track__source {
margin: var(--space-lg) 0 0;
font-size: var(--text-body-sm);
color: var(--color-neutral-700);
}
.about-track__source a { color: var(--color-azure-700); text-decoration: underline; }
.about-track__source a:hover { color: var(--color-azure-500); }
/* ============================================================================
4. OPINIONES PÚBLICAS (§12)
============================================================================ */
.about-feedback { background: rgba(238, 245, 248, 0.55); }
.about-feedback__note {
margin: var(--space-md) 0 0;
font-size: var(--text-body-sm);
line-height: var(--leading-body-sm);
color: var(--color-neutral-700);
max-width: 68ch;
}
.about-feedback__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
margin: var(--space-xl) 0 0;
}
@media (min-width: 768px) {
.about-feedback__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.about-quote {
margin: 0;
padding: var(--space-lg);
background: var(--color-neutral-0);
border: var(--icon-stroke) solid var(--color-border);
border-radius: var(--radius);
}
.about-quote blockquote {
margin: 0;
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-neutral-800);
}
.about-quote figcaption {
margin: var(--space-md) 0 0;
padding-top: var(--space-sm);
border-top: 1px solid var(--color-border);
font-size: var(--text-body-sm);
color: var(--color-neutral-700);
}
.about-quote__rating {
font-family: var(--font-mono);
font-weight: var(--weight-bold);
color: var(--color-azure-700);
}
.about-quote figcaption a { color: var(--color-azure-700); text-decoration: underline; }
.about-quote__translation {
margin: var(--space-sm) 0 0;
font-size: var(--text-body-sm);
line-height: var(--leading-body-sm);
color: var(--color-neutral-700);
}
/* ============================================================================
5. FORMA DE TRABAJO (§13)
Tres principios de igual peso, conectados por una línea estática.
============================================================================ */
.about-how { background: transparent; }
.about-how__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
margin: var(--space-xl) 0 0;
padding: 0;
list-style: none;
}
@media (min-width: 768px) {
.about-how__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
}
.about-how__item {
padding-top: var(--space-md);
/* La línea de flujo que conecta las tres columnas: estática, no un loop. */
border-top: 2px solid var(--color-azure-500);
}
.about-how__item h3 {
margin: 0;
font-family: var(--font-display);
font-size: var(--text-h5, 1.25rem);
line-height: 1.25;
font-weight: var(--weight-semibold);
color: var(--color-neutral-950);
}
.about-how__item p {
margin: var(--space-sm) 0 0;
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-neutral-800);
}
/* ============================================================================
6. PRODUCTOS (§14)
============================================================================ */
.about-products { background: rgba(238, 245, 248, 0.55); }
.about-products__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
margin: var(--space-xl) 0 0;
padding: 0;
list-style: none;
}
@media (min-width: 768px) {
.about-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.about-product {
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding: var(--space-lg);
background: var(--color-neutral-0);
border: var(--icon-stroke) solid var(--color-border);
border-radius: var(--radius);
}
/* Captura aprobada del producto (ophra.ai / corewhapp.ai). La sección dice que
los productos son "evidencia del estándar que aplicamos": una pantalla real
es esa evidencia, y no es interfaz simulada, que es lo único que la guía de
marca prohíbe. Los dos banners comparten encuadre (1052x592), así las dos
fichas quedan a la misma altura. Radio propio de esta página, que sí usa
esquinas redondeadas — no el radio 0 de /products. */
.about-product__shot {
display: block;
border: var(--icon-stroke) solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
transition: border-color var(--duration-hover) var(--easing-out);
}
.about-product__shot:hover { border-color: var(--color-azure-500); }
.about-product__shot img {
width: 100%; height: auto; display: block;
aspect-ratio: 1052 / 592;
}
.about-product__head {
display: flex;
flex-wrap: wrap; /* a 390px el nombre + el chip no entran en una línea */
align-items: center;
justify-content: space-between;
gap: var(--space-2xs) var(--space-sm);
}
.about-product__name {
margin: 0;
font-family: var(--font-display);
font-size: var(--text-h4);
line-height: 1.2;
font-weight: var(--weight-semibold);
color: var(--color-neutral-950);
}
.about-product__status {
flex: none;
font-family: var(--font-body);
font-weight: var(--weight-semibold);
font-size: var(--text-label);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-azure-700);
background: var(--color-azure-50);
border: var(--icon-stroke) solid var(--color-azure-300);
border-radius: var(--radius);
padding: var(--space-3xs) var(--space-2xs);
}
.about-product__desc {
margin: 0;
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-neutral-800);
}
.about-product__link {
align-self: flex-start;
min-height: 44px;
display: inline-flex;
align-items: center;
font-size: var(--text-body-sm);
font-weight: var(--weight-semibold);
color: var(--color-azure-700);
}
.about-product__link:hover { color: var(--color-azure-500); }
/* ============================================================================
7. CTA FINAL (§15)
Sin formulario: lleva al formulario mínimo de la home.
============================================================================ */
.about-cta { background: transparent; }
.about-cta__inner { max-width: 62ch; }
.about-cta__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--text-h3);
line-height: var(--leading-h3, 1.15);
font-weight: var(--weight-semibold);
color: var(--color-neutral-950);
text-wrap: balance;
}
.about-cta__body {
margin: var(--space-md) 0 var(--space-lg);
font-size: var(--text-body-lg);
line-height: var(--leading-body);
color: var(--color-neutral-800);
}
/* ============================================================================
MOVIMIENTO (§16)
Entrada única de 600–1100ms, desplazamiento máximo 8px, termina estática.
Los hooks son los de rcx-anim.js (data-rcx-reveal / -group / -item), así que
no hay un tercer controlador de scroll ni JavaScript propio de la página.
Sin JS, nada de esto se aplica: el contenido nace visible.
============================================================================ */
.about-leadership__wire { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
/* La señal azul recorre la conexión UNA vez cuando la sección entra. */
[data-rcx-reveal-group].is-revealed .about-leadership__wire {
animation: about-wire-draw 700ms var(--easing-out) both;
}
}
@keyframes about-wire-draw {
from { transform: scaleX(0); opacity: 0; }
to { transform: scaleX(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.about-leadership__wire { animation: none !important; transform: none; opacity: 1; }
}
/* Transparencia reducida: las placas ya son sólidas, pero la cuadrícula del
hero se retira para no dejar una textura sin propósito (§20). */
@media (prefers-reduced-transparency: reduce) {
.about-hero__grid { display: none; }
}
/* ============================================================================
MATERIALIDAD — owner 2026-08-13: "no queda muy plana solo texto?"
La página cumplía el spec pero se leía como siete bloques de prosa. Todo lo
de acá sale de recursos que el propio spec habilita y que no se habían
usado: arcos técnicos de opacidad baja (§7.2), placas y filetes Agent Blue,
y los logos reales de producto que pedía §14.2. Ningún elemento nuevo de
marca, nada de video/canvas/3D, ningún loop.
============================================================================ */
/* --- Arcos técnicos (§7.2) -----------------------------------------------
Decorativos y de opacidad baja: dan profundidad al fondo sin competir con el
texto. Van en las secciones claras, con aria-hidden en el DOM y sin coste de
red — son gradientes radiales, no imágenes. */
.about-track,
.about-how,
.about-cta {
position: relative;
overflow: hidden;
isolation: isolate;
}
.about-track::before,
.about-how::before,
.about-cta::before {
content: "";
position: absolute;
z-index: -1;
pointer-events: none;
border-radius: 50%;
background: radial-gradient(circle at center,
rgba(12, 130, 245, 0.10) 0%,
rgba(12, 130, 245, 0.04) 45%,
transparent 70%);
}
.about-track::before { width: 620px; height: 620px; top: -240px; right: -180px; }
.about-how::before { width: 720px; height: 720px; bottom: -320px; left: -220px; }
.about-cta::before { width: 560px; height: 560px; top: -200px; right: -120px; }
/* La cuadrícula del hero se extiende a la sección de opiniones, que es la más
larga sin imagen: sin ella, la mitad inferior perdía toda referencia. */
.about-feedback { position: relative; overflow: hidden; }
.about-feedback::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(to right, rgba(12, 130, 245, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(12, 130, 245, 0.05) 1px, transparent 1px);
background-size: 64px 64px;
-webkit-mask-image: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.85), transparent 70%);
mask-image: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.85), transparent 70%);
}
.about-feedback > .rcx-container { position: relative; }
/* --- Métricas sobre placa ------------------------------------------------
Eran cuatro cifras sueltas sobre el fondo. Cada una pasa a una placa con
filete Agent Blue: el dato se lee como una unidad y la fila da estructura a
la mitad superior de la sección. */
.about-track__metrics {
border-top: 0;
padding-top: 0;
gap: var(--space-sm);
}
.about-track__metric {
padding: var(--space-md);
background: var(--color-neutral-0);
border: var(--icon-stroke) solid var(--color-border);
border-top: 2px solid var(--color-azure-500);
border-radius: var(--radius);
}
/* --- Iconografía de los tres principios ----------------------------------
Phosphor regular (MIT), la misma familia del riel de evidencia de la home.
No son decoración: separan visualmente tres bloques que antes sólo se
distinguían por su título. */
.about-how__icon {
display: block;
width: 28px;
height: 28px;
margin-bottom: var(--space-sm);
fill: var(--color-azure-700);
}
.about-how__item { padding-top: var(--space-md); }
/* --- Marca de cita -------------------------------------------------------
Una comilla tipográfica grande por opinión. Ancla la tarjeta y evita que dos
bloques de texto encomillado se lean como un párrafo continuo. */
.about-quote { position: relative; }
.about-quote__mark {
display: block;
margin-bottom: calc(var(--space-md) * -1);
font-family: var(--font-display);
font-size: 4rem;
line-height: 1;
font-weight: var(--weight-bold);
color: var(--color-azure-100);
user-select: none;
}
/* --- Logos de producto (§14.2) ------------------------------------------- */
.about-product__mark {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--color-neutral-0);
border: var(--icon-stroke) solid var(--color-border);
border-radius: var(--radius);
}
.about-product__mark img { display: block; width: 28px; height: 28px; object-fit: contain; }
/* El nombre toma el espacio que queda para que el chip de estado no se
despegue del bloque al sumar el logo. */
.about-product__name { flex: 1 1 auto; }
@media (prefers-reduced-transparency: reduce) {
.about-track::before,
.about-how::before,
.about-cta::before,
.about-feedback::before { display: none; }
}