/* ═══════════════════════════════════════════════════════════════════════════════════════
* Golden PR — EXPEDIENTE · rutas interiores inglesas (/About, /Services, /Events, /Contact).
*
* QUÉ ES ESTA HOJA. `expediente.css` describe el sistema completo y lo acota a `body.gp-exp`,
* que ponen la portada y las rutas interiores; con esa clase heredan GRATIS la sala (#1B0404),
* el grano, el re-vestido de cabecera y pie, la voz mono de los metadatos (`.gp-ojo`,
* `.gp-x-meta`, `.gp-x-num`), los registros (`.gp-reg`, `.gp-teclas`), los titulares de
* display fija (`.gp-x-h2`, `.gp-x-h3`, `.gp-x-cita`) y la prosa (§16); las entradas por umbral
* son de theme.css. Esta hoja añade SOLO lo que las rutas interiores usan y el sistema aún no
* tenía, en dos familias:
*
* 1 · Dos piezas nuevas con prefijo `gp-xi-` (expediente interior): la línea de titular de
* tapa (`.gp-xi-h1__l`, entre el héroe y el H2 de sección) y el correo grande de
* /Contact (`.gp-xi-correo`).
* 2 · Las clases que las vistas ya emitían y que en `cinetica.css` viven acotadas a
* `.gp-cin` — la pieza destacada (`.gp-vuelta`), los enlaces de texto y TODO el
* vocabulario de formulario (`parts/contact-form.php` y la lista de espera de /Events).
* Se re-declaran bajo `.gp-exp` con los MISMOS números medidos de cinetica.css §12.13;
* lo único que cambia es la voz (la etiqueta pasa al mono de los metadatos) y los
* colores de terreno (sala/panel en lugar de granate).
*
* QUÉ TIENE PROHIBIDO, por herencia directa de expediente.css:
* · `font-stretch` no aparece: la display es Anybody INSTANCIADA a wdth 85 y no hay eje.
* Las pilas re-declaradas en el body (§2 de expediente.css) hacen que todo lo que diga
* `var(--gp-display)` componga ya en la instancia fija.
* · Ningún movimiento atado al scroll. El bloque de `prefers-reduced-motion` de theme.css
* cubre también estas reglas (vale para todo el documento).
* · Ningún color nuevo. Tres tintas + sala/panel/filo/alarma, todos ya declarados.
*
* CONTRASTES CALCULADOS (fórmula WCAG 2.x sobre color compuesto; guion con calibración de
* ratios conocidos y control negativo, 13-ago — los seis primeros ya estaban declarados en
* expediente.css §2 y se re-verificaron):
* hueso #F7F1E6 sobre sala #1B0404 ... 17,53:1
* tenue #C4B39D sobre sala #1B0404 ... 9,65:1
* oro #D4AF37 sobre sala #1B0404 ... 9,37:1
* hueso #F7F1E6 sobre panel #220606 ... 17,03:1
* tenue #C4B39D sobre panel #220606 ... 9,38:1
* oro #D4AF37 sobre panel #220606 ... 9,11:1
* alarma #FF9E9E sobre sala #1B0404 ... 9,98:1 (error de campo y feedback)
* granate #370606 sobre oro #D4AF37 ... 8,38:1 (texto de chip marcado y CTA de oro)
* borde tenue #C4B39D sobre sala ...... 9,65:1 (frontera de campo, WCAG 1.4.11 ≥ 3:1)
*
* ORDEN DE CARGA: después de `expediente.css` (dependencia declarada en el encolado de cada
* vista, con guarda `wp_style_is`). No redefine NI UN selector de expediente.css; los empates
* posibles con cinetica.css los gana por especificidad (`.gp-exp` delante).
* ═══════════════════════════════════════════════════════════════════════════════════════ */
/* ═══ 1 · La tapa interior ═════════════════════════════════════════════════════════════
* La línea de titular de una ruta interior. Misma receta que `.gp-x-h1__l` del héroe
* (display fija, 0,94 de interlínea, tracking corto) con un cuerpo intermedio: la cubierta
* del dossier es la portada; una pieza interior habla más bajo.
*
* La cuenta del clamp, con el avance medido del fichero (≈0,46 em/glifo a wdth 85): la línea
* más larga de las cuatro tapas es «came before the agency.» (23 glifos ≈ 10,6 em). A 1440 px
* el marco mide 1.312 px y el cuerpo compone a 108,5 px → 1.150 px: cabe sin partir. A 390
* (marco 350) parte en dos líneas DENTRO del bloque —`text-wrap: balance` reparte el corte—,
* que es el comportamiento de todo el sistema v4: sin `nowrap` en ningún titular.
*
* SIN `color` a propósito: hereda el hueso del body, y así el oro de la línea señalada lo
* sigue poniendo `.gp-tapa__l--oro` (cinetica.css §12.3, 0-1-0) sin pelea de especificidad. */
.gp-exp .gp-xi-h1__l {
display: block;
font-family: var(--gp-exp-display);
font-weight: 700;
font-synthesis: none;
font-size: clamp(2.4rem, 1.2rem + 6.2vw, 7.5rem);
line-height: 0.94;
letter-spacing: -0.005em;
text-wrap: balance;
}
/* /Contact: el H1 en hueso. El oro de esa página es el correo de debajo (§2), que es la acción. */
.gp-exp #gp-contact-h1 .gp-tapa__l--oro { color: inherit; }
/* El oro partido de los H2 interiores (la IA en /Services, la llamada a KOL de /es/servicios).
* Vive aquí y no en expediente.css porque la portada no carga esta hoja: allí los H2 van enteros
* en hueso y el único oro de display es «Access,». */
.gp-exp .gp-x-h2 .gp-x-oro { color: var(--gp-oro); }
/* ═══ 2 · El correo grande de /Contact ═════════════════════════════════════════════════
* La alternativa al formulario, compuesta en display en la tapa, sin panel ni marco (§3). En oro
* porque ES la oferta (9,37:1 sobre sala); a hueso al pasar el puntero, como todo enlace
* del sistema. `overflow-wrap: anywhere` es la red: 20 glifos ≈ 10 em caben en todos los
* anchos con este clamp (285 px en los 308 útiles a 390), pero un correo no puede ser nunca
* la causa de una barra horizontal. */
.gp-exp .gp-xi-correo {
display: block;
font-family: var(--gp-exp-display);
font-weight: 700;
font-synthesis: none;
font-size: clamp(1.7rem, 1rem + 3.2vw, 3.8rem);
line-height: 1.04;
letter-spacing: -0.005em;
color: var(--gp-oro);
text-decoration: none;
overflow-wrap: anywhere;
}
.gp-exp .gp-xi-correo:hover { color: var(--gp-hueso); }
/* ═══ 3 · La pieza destacada: `.gp-vuelta`, re-vestida ═════════════════════════════════
* En cinético era el plano invertido de oro. La autopsia de v4 lo enterró en la portada
* («el número que NO es nuestro no merece la única superficie dorada de la página»): un
* plano de oro entero es escenografía, y el oro del Expediente es funcional o no es. Lo que
* estas cajas señalan —la misión en /About, los dos programas propios en /Events— se dice ahora
* con las herramientas del dossier: el PANEL (#220606, la segunda superficie que §2 de
* expediente.css declara y documenta con sus tres contrastes) y el CANTO DE ORO de 1 px — la
* misma receta que `.gp-espera` y `.gp-estado` (cinetica §12.11 y §12.12) ya usan para
* destacar, así que no es una pieza nueva: es LA pieza de destacar, con el terreno del
* Expediente.
*
* Sin sangrado a ancho completo: el anexo va DENTRO del marco, como una lámina montada en el
* dossier, no como un cambio de sala. Los números del relleno son los de `.gp-espera`. */
.gp-exp .gp-vuelta {
background: var(--gp-panel);
border: 1px solid var(--gp-oro);
padding: var(--gp-aire-m) clamp(1.25rem, 0.6rem + 2.4vw, 2rem);
}
.gp-exp .gp-vuelta > .gp-vuelta__caja { display: grid; gap: var(--gp-aire-s); }
.gp-exp .gp-vuelta > .gp-vuelta__caja > * { min-inline-size: 0; }
/* Solo los párrafos SUELTOS de la caja bajan a tenue (9,38:1 sobre panel): son la glosa del
* anexo. Selector de hijo directo a propósito — la cita (`.gp-x-cita`), los ojos y las
* glosas de registro conservan su tinta declarada sin pelear especificidad. */
.gp-exp .gp-vuelta > .gp-vuelta__caja > p { color: var(--gp-tenue); }
/* Y a medida de lectura: sin tope, en /About y en los sectores daban 114-140 caracteres por
* línea. 34em son ~70-75 (el `ch` mide el «0» y 68ch se quedaban en 90-108). Fuera el párrafo
* del correo grande de /Contact, que es un titular y no prosa: topado, partiría la dirección. */
.gp-exp .gp-vuelta > .gp-vuelta__caja > p:not(:has(> .gp-xi-correo)) { max-inline-size: 34em; }
/* La misión de /About, «Why it works here» de los sectores y el correo de /Contact, sin panel ni
* marco. Desde que perdieron la lámina de la derecha, el texto ocupaba media caja y el canto de
* oro enmarcaba la otra media vacía: si el contenido no llena el marco, se quita el marco. Quedan
* como una sección más, una columna a la medida del texto. La misión es la frase de la página:
* compone a cuerpo de H2 y a todo el ancho del marco. */
.gp-exp :is([aria-labelledby="gp-mision-titulo"], [aria-labelledby="gp-sector-porque"], [aria-labelledby="gp-contact-h1"]) .gp-vuelta {
background: none; border: 0; padding: 0;
}
.gp-exp [aria-labelledby="gp-mision-titulo"] .gp-x-cita { font-size: var(--gp-x-t-h2); max-inline-size: none; }
/* ═══ 4 · Enlaces de texto ═════════════════════════════════════════════════════════════
* Números de cinetica.css §12.8. Subrayado siempre (WCAG 1.4.1: en un sitio sin iconos el
* color no puede ser lo único que distingue un enlace). El `.gp-correo` pierde el
* `font-stretch` de la versión cinética — aquí no hay eje que apretar. */
.gp-exp .gp-enlace {
color: var(--gp-oro); text-decoration: underline; text-underline-offset: 0.18em;
text-decoration-thickness: 1px;
}
.gp-exp .gp-enlace:hover { color: var(--gp-hueso); }
/* El enlace que va solo en su párrafo («Talk to Angélica about this →» en /Services, el de /About,
* el de las muestras en el sector de IA) medía 17 px de alto. En línea, el relleno vertical no
* mueve ni el texto ni la línea: solo agranda el área que se pulsa, a 33 px. Acotado a las llaves,
* la prosa y la caja de la pieza destacada porque `:only-child` no ve el texto: en un enlace dentro
* de una frase (el éxito de /Contact, los códigos de /Events) el anillo de foco tapaba 14 px de
* las líneas de al lado. */
.gp-exp :is(.gp-llaves, .gp-prosa, .gp-vuelta__caja) p > .gp-enlace:only-child { padding-block: 0.5rem; }
/* El correo de /About va solo en su párrafo: el relleno vertical, en línea, agranda el área que
* se pulsa sin mover la línea. */
.gp-exp .gp-correo {
font-family: var(--gp-exp-display); font-weight: 700; font-synthesis: none;
font-size: clamp(1.1rem, 2.6vw, 1.6rem); line-height: 1.05;
color: var(--gp-oro); text-decoration: none; word-break: break-word;
padding-block: 0.5rem;
}
.gp-exp .gp-correo:hover { color: var(--gp-hueso); }
/* ═══ 5 · Formularios ══════════════════════════════════════════════════════════════════
* El vocabulario completo de `parts/contact-form.php` y de la lista de espera de /Events,
* que en cinetica.css §12.13 vive acotado a `.gp-cin`. MISMOS números medidos; dos cambios
* de voz, los dos del Expediente:
* · la etiqueta habla en el mono de los metadatos (Fragment Mono, 0,08 em) — en un dossier
* el nombre del campo es metadato, no rótulo;
* · los colores de terreno pasan a sala/panel (el `option` del desplegable pinta sala).
*
* El borde del campo sigue siendo `--gp-tenue` y no `--gp-filo`, por la misma cuenta de
* §12.13: el filo sobre la sala no llega al 3:1 que WCAG 1.4.11 exige a la frontera de un
* componente; el tenue da 9,65:1. Rectángulos sin radio: el sistema no tiene esquinas. */
.gp-exp .gp-grupo { display: grid; gap: 0.5rem; margin-block-end: var(--gp-aire-s); }
.gp-exp .gp-grupo > * { min-inline-size: 0; }
.gp-exp .gp-etiqueta {
margin: 0;
/* Mono en su único peso (sin negrita sintética) y nunca por debajo de 12 px. */
font-family: var(--gp-exp-mono); font-size: max(0.75rem, var(--gp-t-ojo)); font-weight: 400;
font-synthesis: none;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--gp-hueso);
}
.gp-exp .gp-etiqueta abbr { color: var(--gp-oro); text-decoration: none; border: 0; }
.gp-exp .gp-campo,
.gp-exp .gp-area,
.gp-exp .gp-select {
inline-size: 100%;
padding: 0.85rem 1rem;
font-family: var(--gp-texto); font-size: var(--gp-t-cuerpo); line-height: 1.4;
color: var(--gp-hueso);
background: transparent;
border: 1px solid var(--gp-tenue);
border-radius: 0;
appearance: none;
}
.gp-exp .gp-area { min-block-size: 7rem; resize: vertical; }
/* El desplegable lleva su flecha: con `appearance: none` y sin indicador se leía como un campo de
* texto más. Chevron de 12×8 con trazo de 1,5 px en tenue (9,65:1 sobre la sala); el relleno de la
* derecha deja sitio para que el texto no la pise. Con colores forzados vuelve el control nativo:
* la flecha dibujada no cambiaría de color con el tema del sistema. */
.gp-exp .gp-select {
padding-inline-end: 2.75rem;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23C4B39D' stroke-width='1.5'/%3E%3C/svg%3E") right 1rem center / 12px 8px no-repeat;
}
@media (forced-colors: active) {
.gp-exp .gp-select { appearance: auto; background-image: none; padding-inline-end: 1rem; }
}
/* El desplegable nativo pinta su lista con el fondo del sistema operativo: sin colores
* explícitos, en modo oscuro sale texto claro sobre fondo claro. */
.gp-exp .gp-select option { background: var(--gp-sala); color: var(--gp-hueso); }
.gp-exp .gp-campo::placeholder { color: var(--gp-tenue); opacity: 1; }
.gp-exp .gp-campo:hover, .gp-exp .gp-area:hover, .gp-exp .gp-select:hover { border-color: var(--gp-oro); }
.gp-exp .gp-campo[aria-invalid="true"],
.gp-exp .gp-area[aria-invalid="true"] { border-color: var(--gp-alarma); border-width: 2px; }
.gp-exp .gp-ayuda {
margin: 0; font-size: var(--gp-t-glosa); color: var(--gp-tenue);
max-inline-size: 56ch; text-wrap: pretty;
}
/* El enlace a la política en la ayuda de la lista de espera de /Events. Sin esto heredaba el
* tenue de la frase y ningún subrayado: no se distinguía del texto (WCAG 1.4.1). La misma receta
* que el enlace del formulario del muro (exp-docs.css §7): oro, subrayado y relleno vertical
* para el objetivo táctil. */
.gp-exp .gp-ayuda a {
display: inline-block;
padding-block: 0.15rem;
color: var(--gp-oro);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
.gp-exp .gp-ayuda a:hover { color: var(--gp-hueso); }
.gp-exp .gp-error-campo {
margin: 0; font-size: var(--gp-t-glosa); font-weight: 600; color: var(--gp-alarma);
}
/* `theme.css` pinta `.gp-feedback` con los colores de base para fondo CLARO: su
* `is-ok` #8A6D1F da 4,02:1 sobre la sala (calculado) — por debajo de todo lo demás del
* sistema, y justo en la confirmación. Se rehace aquí, como ya hacía §12.13 en granate. */
.gp-exp .gp-feedback {
margin: 0 0 var(--gp-aire-s); font-size: var(--gp-t-cuerpo); font-weight: 400;
padding: 0.85rem 1rem; border: 1px solid currentColor;
}
.gp-exp .gp-feedback.is-error { color: var(--gp-alarma); }
.gp-exp .gp-feedback.is-ok { color: var(--gp-oro); }
.gp-exp .gp-feedback a { color: inherit; }
/* Los chips. El control real es el `` nativo (teclado, lector y autorrelleno de
* serie); el estado marcado no se comunica solo con color: antepone ✓ (WCAG 1.4.1).
* Granate sobre oro en el marcado: 8,38:1.
*
* El input, invisible, cubre el chip entero y no 1×1 px: el navegador desplaza la página hasta
* el control que recibe el foco, y con 1 px pegado a la esquina dejaba el chip enfocado casi
* fuera de la pantalla al tabular («This month» al 7 % a 1440). NO `display: none`, que lo saca
* del recorrido de foco y del árbol de accesibilidad. */
.gp-exp .gp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gp-exp .gp-chip { display: inline-flex; position: relative; }
.gp-exp .gp-chip input {
position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
opacity: 0; margin: 0; pointer-events: none;
}
.gp-exp .gp-chip span {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.7rem 1rem;
font-size: var(--gp-t-glosa); line-height: 1.2;
color: var(--gp-hueso); border: 1px solid var(--gp-tenue); cursor: pointer;
transition: background-color var(--gp-corta) ease, color var(--gp-corta) ease;
}
.gp-exp .gp-chip span::before { content: ""; }
.gp-exp .gp-chip input:checked + span {
background: var(--gp-oro); color: var(--gp-granate); border-color: var(--gp-oro);
font-weight: 600;
}
.gp-exp .gp-chip input:checked + span::before { content: "\2713\00a0"; }
.gp-exp .gp-chip span:hover { border-color: var(--gp-oro); }
.gp-exp .gp-chip input:focus-visible + span {
outline: 3px solid var(--gp-oro); outline-offset: 3px;
}
/* La casilla de consentimiento: el input SÍ se ve — es un acto jurídico, no un botón. */
.gp-exp .gp-consent {
display: flex; gap: 0.75rem; align-items: flex-start;
font-size: var(--gp-t-glosa); color: var(--gp-hueso); cursor: pointer;
}
.gp-exp .gp-consent input {
flex: none; inline-size: 1.35rem; block-size: 1.35rem; margin: 0.1rem 0 0;
accent-color: var(--gp-oro);
}
/* El enlace va dentro de la frase del consentimiento: subrayado SIEMPRE (oro frente al hueso
* de alrededor es 1,87:1, y WCAG 1.4.1 no deja que el color sea lo único que lo distinga). */
.gp-exp .gp-consent a { color: var(--gp-oro); text-decoration: underline; text-underline-offset: 0.2em; }
/* Los tres tramos del briefing. El título del tramo compone en la display fija por la pila
* re-declarada del body; el número del tramo ya sale en `.gp-ojo`, que aquí es mono.
*
* ⚠ El `legend` va FLOTANDO a todo el ancho, y no es estética. Un legend normal se pinta DENTRO
* del borde del fieldset: el filo superior del tramo salía del final de «STEP 1 OF 3 / ABOUT 40
* SECONDS» y cruzaba el título a media altura, como un tachado. Flotando deja de ser el legend
* «pintado en el borde» (el lector lo sigue leyendo como nombre del grupo: eso depende del
* DOM, no del dibujo), el filo corre entero por arriba y lo siguiente se coloca debajo con
* `clear`. El relleno superior baja a `--gp-aire-s`: con `--gp-aire-m` el título quedaba más
* cerca del tramo anterior que de sus propias preguntas (134 px a 1440). */
.gp-exp .gp-paso {
border: 0; border-block-start: 1px solid var(--gp-filo);
margin: 0; padding: var(--gp-aire-s) 0;
}
.gp-exp .gp-paso__legend {
float: left; float: inline-start; inline-size: 100%;
display: grid; gap: 0.5rem; padding: 0; margin-block-end: var(--gp-aire-s);
}
.gp-exp .gp-paso__legend + * { clear: both; }
.gp-exp .gp-paso__legend > * { min-inline-size: 0; }
/* El título del tramo va al cuerpo del H3 del Expediente: con su `clamp` propio daba 36 px a
* 1440 junto a los 36,8 de los H3, un casi duplicado. */
.gp-exp .gp-paso__titulo {
font-family: var(--gp-exp-display); font-weight: 700; font-synthesis: none;
font-size: var(--gp-x-t-h3); line-height: 1.02; color: var(--gp-hueso);
}
.gp-exp .gp-paso__ayuda { margin: 0; font-size: var(--gp-t-glosa); color: var(--gp-tenue); }
/* La entradilla del formulario entero (no la de un tramo) va antes del filo del paso 1: con el
* `margin: 0` de arriba quedaba pegada a él, y en inglés «required.» bajaba sola a la última
* línea. */
.gp-exp .gp-briefing__form > .gp-paso__ayuda { margin-block-end: 1.5rem; text-wrap: pretty; }
.gp-exp .gp-acciones {
display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center;
margin-block-start: var(--gp-aire-s);
}
.gp-exp .gp-acciones__nota { margin: 0; color: var(--gp-tenue); }
.gp-exp .gp-escape {
margin: var(--gp-aire-s) 0 0; font-size: var(--gp-t-glosa); color: var(--gp-tenue);
max-inline-size: 56ch;
}
.gp-exp .gp-escape a { color: var(--gp-oro); text-decoration: underline; text-underline-offset: 0.2em; }
/* Los dos enlaces de frase del formulario pasan a hueso al pasar, como el resto; el subrayado se
* queda, que es lo que los distingue de la frase. */
.gp-exp :is(.gp-escape, .gp-consent) a:hover { color: var(--gp-hueso); }
/* La trampa para bots: fuera de la vista y del tabulador, NUNCA `display:none` (hay bots
* que lo comprueban). Sin esta regla el campo señuelo se pintaría A LA VISTA en /Events. */
.gp-exp .gp-honeypot {
position: absolute; inline-size: 1px; block-size: 1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.gp-exp .gp-briefing__form { display: block; }
/* Un grupo de opciones como `