/* ============================================================ PLEASEPOINT 2026 — PÁGINAS DE DECISOR Solo lo propio de ai-for-it y ai-for-business. Todo lo demás —tokens, tipografía, capítulos, filas, acordeón, recorrido de servicios— está en agency.css, compartido con la home. ============================================================ */ /* ---------- La espina ---------- El contenido va envuelto en .aud para poder ajustar la densidad por audiencia sin tocar ni la plantilla. Eso deja las secciones fuera de "main > section", así que el ritmo vertical se restituye aquí, con el mismo --sec de siempre. */ .aud > section{ padding-top:var(--sec); padding-bottom:var(--sec); } /* Costura con los paneles oscuros, igual criterio que en la home: el panel ya trae su propio aire dentro, así que la costura se reparte a medias entre las dos secciones vecinas y el borde negro cae en el mismo ritmo que el resto de la página. Orden: a2 · [a5 panel, solo IT] · ─── · a4 · ─── · a3 · a6 panel. La de dirección no dibuja a5, así que su a2 va seguido del separador y necesita el aire entero. Ninguna regla pregunta por la audiencia en Blade: se resuelve con el atributo. */ .aud > #a3{ padding-bottom:calc(var(--sec) / 2); } /* justo antes del panel */ .aud > #a6{ padding-top:calc(var(--sec) / 2); padding-bottom:calc(var(--sec) / 2); } .aud[data-audience="it"] > #a2{ padding-bottom:calc(var(--sec) / 2); } .aud[data-audience="it"] > #a5{ padding-top:calc(var(--sec) / 2); padding-bottom:calc(var(--sec) / 2); } /* ---------- A1 · Hero de audiencia ---------- Misma anatomía que el de la home para que las tres páginas se lean como una familia; distinto peso para que no sea la home otra vez. Sin campo animado: learning-field es del hero de la home y repetirlo desgasta la pieza y encarece el LCP de una página que no lo necesita. */ .aud > .aud-hero{ padding-top:clamp(128px,14vh,180px); padding-bottom:clamp(56px,7vh,88px); } /* Los dos heros son el mismo bloque: mismo marcado, mismo CSS y misma caja. Para que además rompan igual, el reparto de líneas se equilibra en vez de dejarlo al azar de dónde caiga cada palabra. Donde el navegador no lo soporte, el max-width sigue garantizando dos líneas. */ .aud-hero h1{ max-width:24ch; margin-top:20px; text-wrap:balance; } .aud-sub{ margin-top:28px; max-width:50ch; color:var(--ink-2); text-wrap:pretty; } /* La fila de acciones cuelga de una regla, igual que las dos puertas de la home. El enlace cruzado recupera a quien entró por la puerta equivocada desde un anuncio o desde búsqueda. */ .aud-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:36px; } /* Los dos botones, exactamente iguales: misma altura, mismo tipo, mismo ancho mínimo. Lo único que los separa es el color, que es lo que dice cuál es la acción principal. */ .aud-actions .btn{ min-height:52px; padding:0 30px; min-width:min(100%,232px); font-size:1rem; } /* El tercer destino no es un botón: dos botones son una elección y tres son un menú. Lleva a la sección propia de la página, que es a dónde quiere ir un decisor que ya sabe lo que busca. En móvil salta de línea y se separa de los dos botones, que van juntos. */ .aud-anchor{ margin-left:8px; } @media (max-width:640px){ .aud-anchor{ margin-left:0; margin-top:8px; } } /* ---------- Encabezados de sección ---------- Sin tope de 22ch: los titulares cortos partían en dos líneas cuando caben de sobra en una. El ancho lo pone la caja y el reparto lo hace 'balance'. */ .aud-h2{ margin-top:20px; text-wrap:balance; } .aud-lead{ margin-top:20px; } /* ---------- A2 · La banda de dolores ---------- Seis fichas en una sola fila y ninguna numeración: no es un proceso, es el día a día de antes de empezar. Una banda de hairlines, sin cajas: regla arriba, regla abajo y una vertical entre ficha y ficha. El título es corto y en sans con peso, para que los seis se barran de un vistazo; la línea de debajo lo concreta y va en tinta segunda. Hubo una fila deslizable. Se lee mejor lo que se ve entero. */ .pains{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); list-style:none; margin:44px 0 0; padding:0; border-top:1px solid var(--ink); border-bottom:1px solid var(--line); } @media (min-width:700px){ .pains{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (min-width:1100px){ .pains{ grid-template-columns:repeat(6,minmax(0,1fr)); } } .pain{ padding:26px clamp(16px,1.6vw,24px) 32px 0; margin-right:clamp(16px,1.6vw,24px); border-right:1px solid var(--line); min-width:0; } /* Una marca corta a tinta plena encima de cada título: es lo que da a la ficha un principio sin numerarla, y lo que hace que los seis se lean como una serie y no como seis párrafos. */ .pain::before{ content:""; display:block; width:22px; height:2px; background:var(--ink); margin-bottom:18px; } .pain:last-child{ border-right:0; margin-right:0; } /* En dos y en tres columnas las filas se separan con una regla y la última ficha de cada fila pierde la vertical. */ @media (max-width:1099px){ .pain{ border-bottom:1px solid var(--line); } .pain:nth-last-child(-n+3){ border-bottom:0; } } @media (min-width:700px) and (max-width:1099px){ .pain:nth-child(3n){ border-right:0; margin-right:0; } .pain{ padding-top:26px; padding-bottom:30px; } } @media (max-width:699px){ .pain:nth-child(2n){ border-right:0; margin-right:0; } .pain:nth-last-child(-n+3){ border-bottom:1px solid var(--line); } .pain:nth-last-child(-n+2){ border-bottom:0; } } .pain-title{ margin:0; font-family:var(--font-sans); font-weight:600; font-size:1.125rem; line-height:1.3; letter-spacing:-0.01em; color:var(--ink); text-wrap:balance; } .pain-text{ margin:10px 0 0; font-size:.9375rem; line-height:1.5; color:var(--ink-2); } /* La única frase en nuestra voz. Va a display y con aire, como la frase de cierre de las credenciales de la portada: es el punto final de la banda, no un párrafo más. */ .pains-close{ margin-top:clamp(40px,5vw,56px); } /* ---------- A5 · Qué no cambia (dirección) ---------- Cuatro líneas y fuera. El signo igual dice lo mismo que el bloque: esto se queda como está. */ .keeps-same{ max-width:820px; margin-top:40px; } .same{ display:grid; grid-template-columns:32px 1fr; gap:2px 16px; padding:20px 0; border-top:1px solid var(--line); } .same:last-child{ border-bottom:1px solid var(--line); } .same-x{ grid-row:1 / 3; font-family:var(--font-mono); font-size:1.25rem; line-height:1.2; color:var(--ink-3); text-align:center; } .same-what{ font-weight:600; font-size:1.0625rem; line-height:1.35; } .same-why{ font-size:.9375rem; line-height:1.6; color:var(--ink-2); } /* ---------- A3 · Un día de trabajo ---------- Varios casos en el alto de uno: se elige con las pestañas y solo se dibuja el elegido, sin una línea de JavaScript. El selector son radios de verdad, escondidos, y sus etiquetas hechas pestañas; la activa va en tinta llena —no un borde algo más oscuro— porque lo que había antes no se leía como un estado. La versión anterior deslizaba y las pestañas eran anclas: bonito, pero nada decía cuál estaba puesto, y al deslizar con el dedo la pestaña marcada habría mentido. Con radios el estado es exacto siempre y el teclado los recorre con las flechas, gratis. Las reglas de abajo van enumeradas hasta seis, uno más de los casos que hay hoy: ':checked ~' con 'nth-child' no se puede escribir de otra forma, y así añadir un caso en el archivo de idioma no obliga a bajar hasta aquí. */ .dayset{ border:0; margin:0; padding:0; min-width:0; } .dayset-radio{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .day-nav{ display:flex; flex-wrap:wrap; gap:8px; margin-top:36px; } .day-nav label{ display:inline-flex; align-items:baseline; gap:9px; /* 17px y no 20: con cinco pestanas la fila cabe entera en el ancho del 'wrap' y le sobra sitio, en vez de ir justa al pixel. */ padding:10px 17px; border:1px solid var(--line); border-radius:999px; font-size:0.9375rem; line-height:1.3; color:var(--ink-2); cursor:pointer; transition:background .18s ease, border-color .18s ease, color .18s ease; } .day-nav label span{ font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.08em; color:var(--ink-3); font-variant-numeric:tabular-nums; } .day-nav label:hover{ border-color:var(--ink-3); color:var(--ink); } /* Solo se dibuja el caso elegido, y su pestaña queda en tinta llena. */ .day-case{ display:none; } #a3-c1:checked ~ .day-panels .day-case:nth-child(1), #a3-c2:checked ~ .day-panels .day-case:nth-child(2), #a3-c3:checked ~ .day-panels .day-case:nth-child(3), #a3-c4:checked ~ .day-panels .day-case:nth-child(4), #a3-c5:checked ~ .day-panels .day-case:nth-child(5), #a3-c6:checked ~ .day-panels .day-case:nth-child(6){ display:block; } #a3-c1:checked ~ .day-nav label[for="a3-c1"], #a3-c2:checked ~ .day-nav label[for="a3-c2"], #a3-c3:checked ~ .day-nav label[for="a3-c3"], #a3-c4:checked ~ .day-nav label[for="a3-c4"], #a3-c5:checked ~ .day-nav label[for="a3-c5"], #a3-c6:checked ~ .day-nav label[for="a3-c6"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); } #a3-c1:checked ~ .day-nav label[for="a3-c1"] span, #a3-c2:checked ~ .day-nav label[for="a3-c2"] span, #a3-c3:checked ~ .day-nav label[for="a3-c3"] span, #a3-c4:checked ~ .day-nav label[for="a3-c4"] span, #a3-c5:checked ~ .day-nav label[for="a3-c5"] span, #a3-c6:checked ~ .day-nav label[for="a3-c6"] span{ color:var(--paper); opacity:.6; } /* El radio está escondido, así que el foco de teclado lo enseña su etiqueta. Sin esto, tabular por la sección no se vería. */ #a3-c1:focus-visible ~ .day-nav label[for="a3-c1"], #a3-c2:focus-visible ~ .day-nav label[for="a3-c2"], #a3-c3:focus-visible ~ .day-nav label[for="a3-c3"], #a3-c4:focus-visible ~ .day-nav label[for="a3-c4"], #a3-c5:focus-visible ~ .day-nav label[for="a3-c5"], #a3-c6:focus-visible ~ .day-nav label[for="a3-c6"]{ outline:2px solid var(--point-ink); outline-offset:3px; } /* La caja del caso elegido va enmarcada y sobre papel levantado: es lo que la ata a la pestaña encendida. El número de arriba repite el de la pestaña, para que se vea de dónde sale lo que se está leyendo. */ .day-panels{ margin-top:20px; } .day-case{ border:1px solid var(--line); background:var(--paper-raised); padding:clamp(24px,3vw,40px); } .day-case-num{ margin:0 0 10px; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.1em; color:var(--point-ink); font-variant-numeric:tabular-nums; } .day-case-title{ margin:0; text-wrap:balance; } .day-case-lead{ margin:14px 0 0; color:var(--ink-2); font-size:1.0625rem; line-height:1.6; max-width:52ch; } /* El patrón de hoy → con la IA implantada vive en agency.css: lo usan las dos páginas de decisor y las treinta y dos fichas del catálogo. Aquí se quedan solo el selector y la caja del caso, que son propios de estas páginas. */ .day-gain{ margin:36px 0 0; max-width:34ch; } /* De dónde salen las horas. Al pie del grupo y una sola vez: es la misma advertencia para todas las tarjetas y solo hay una visible a la vez. En el tamaño y el tono de una nota al pie, que es lo que es: no puede competir con las cifras que matiza. */ .day-source{ margin:24px 0 0; color:var(--ink-3); font-size:.875rem; line-height:1.5; max-width:52ch; } /* La ficha, más apretada que en el catálogo: allí es la página entera y aquí es una sección de una página larga, con dos casos más esperando en las pestañas. La entradilla va a todo el ancho —tenía una medida de 52ch que la dejaba corta contra la lista de abajo— y los pasos pierden aire vertical sin perder la columna teñida. */ .aud .day-case-lead{ max-width:none; } .aud .day{ margin-top:26px; } .aud .day-before, .aud .day-after{ padding:9px 20px; } .aud .day-steps li:first-child .day-before{ padding-top:15px; } .aud .day-steps li:last-child .day-before{ padding-bottom:15px; } .aud .day-result{ margin-top:32px; padding-top:24px; } /* En columna los dos pasos se tocan, así que el reparto es otro: se repite aquí porque la regla de arriba pisa la de agency.css. */ @media (max-width:819px){ .aud .day-before{ padding-bottom:6px; } .aud .day-after{ padding-top:4px; padding-bottom:16px; } } /* ---------- A5 · Arquitectura (solo IT, panel oscuro) ---------- */ .archwrap{ margin-top:32px; overflow-x:auto; } .archwrap svg{ width:100%; max-width:940px; min-width:720px; } .archnotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; margin-top:32px; padding-top:24px; border-top:1px solid var(--panel-line); } .archnote h3{ margin:0 0 8px; font-family:var(--font-mono); font-weight:500; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-panel-2); } .archnote p{ margin:0; font-size:.9375rem; line-height:1.6; color:var(--on-panel); } /* ---------- A6 · Cómo lo hacemos contigo ---------- La única frase de copy nuevo de la sección: por dónde suele empezar esta silla. Va después de la rejilla, cerrando. */ .aud-entry{ margin-top:28px; padding-top:20px; border-top:1px solid var(--panel-line); max-width:56ch; } /* ---------- A7 · Por qué nos puedes creer ---------- */ .aud-logos{ margin-top:56px; padding-top:40px; border-top:1px solid var(--line); } /* ---------- A9 · Cierre ---------- El ancho del titular ya no se corrige aquí: la medida del bloque compartido pasó a ser la buena para todas las páginas. */ .aud-full-link{ margin-top:28px; } /* ---------- Sin densidad por audiencia ---------- Aquí había un bloque que daba a la página de dirección un 15 % más de aire en todas sus secciones. Era la razón real de que los dos heros no se vieran iguales: el marcado y el resto del CSS ya eran comunes, pero el hero de dirección acababa con 147 px de padding contra los 131/66 del de IT. Se retira entero. Las dos páginas son el mismo bloque y solo cambian los textos y los enlaces; lo que separa los dos registros es el copy, no el interlineado. De paso, la mitad de sus reglas ya apuntaban a clases que estas páginas dejaron de usar. */ /* ---------- Responsive ---------- */ @media (max-width:1000px){ .archnotes{ grid-template-columns:1fr; gap:24px; } } /* ---------- A6 · Leyenda de las piezas ---------- Quien llega a una página de decisor no ha visto la home. El diagrama pone los nombres; esta lista dice qué es cada uno, con las palabras del archivo canónico. Tres párrafos y no una tabla: número, el nombre en negrita y la explicación seguida, en el mismo renglón. Antes cada pieza era una fila de tres columnas con su regla debajo, y para leer tres líneas había que recorrer una rejilla. El cuerpo sube al del resto de la página: a 0,9375rem sobre panel oscuro costaba leerlo. */ .svc-legend-label{ margin-top:44px; color:var(--on-panel-2); } .svc-legend{ list-style:none; margin:18px 0 0; padding:0; counter-reset:svcl; max-width:72ch; } .svc-legend li{ counter-increment:svcl; margin-top:16px; font-size:1.0625rem; line-height:1.6; color:var(--on-panel-2); } .svc-legend li:first-child{ margin-top:0; } .svc-legend li::before{ content:counter(svcl,decimal-leading-zero); margin-right:12px; font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.06em; color:var(--on-panel-2); opacity:.6; font-variant-numeric:tabular-nums; } .svc-legend b{ color:var(--on-panel); font-weight:600; } /* El punto separa el nombre de la explicación sin meter una columna. */ .svc-legend b::after{ content:"\00B7"; margin:0 .45em 0 .5em; color:var(--on-panel-2); font-weight:400; opacity:.7; } /* La pieza por la que entra esta audiencia, en el acento: el mismo elemento que ya va marcado en el diagrama, no uno nuevo. */ .svc-legend li.is-entry b{ color:var(--point); } /* ---------- A4 · Lo que cambia para ti ---------- Cuatro bloques verticales que bajan escalonándose a la derecha. Cada punto arranca dos columnas más a la derecha que el anterior sobre una rejilla de doce, y ocupa cuatro: el bloque es estrecho y alto —tres o cuatro líneas de titular sobre una de texto—, así que el conjunto se lee como un movimiento y no como una parrilla. Lo que antes no funcionaba no era el desplazamiento, era que nada lo dibujaba: cuatro bloques sueltos, cada uno con su regla, y el salto de uno al siguiente había que adivinarlo. Ahora la escalera está trazada. Las filas van pegadas —el aire lo pone el padding de cada bloque, no el row-gap—, de modo que la regla vertical de un punto llega justo al borde del siguiente, y ahí una horizontal de dos columnas la recoge y la lleva hasta la regla del que empieza. Vertical, peldaño, vertical: una sola línea continua de arriba abajo. El número va en el acento, que es lo que marca el compás de la bajada: cuatro marcas descendiendo, no cuatro adornos. */ .shifts{ display:grid; grid-template-columns:1fr; gap:0; margin-top:52px; } @media (min-width:760px){ .shifts{ grid-template-columns:repeat(12,1fr); gap:0; } .shift:nth-child(1){ grid-column:1 / span 6; } .shift:nth-child(2){ grid-column:3 / span 6; } .shift:nth-child(3){ grid-column:5 / span 6; } .shift:nth-child(4){ grid-column:7 / span 6; } } /* Con sitio de sobra el bloque ocupa cinco columnas de doce. A cuatro se leía estrecho y partía titulares que caben enteros; a seis, el último llegaba al borde derecho y la escalera perdía el sitio por el que se ve que baja. */ @media (min-width:1100px){ .shift:nth-child(1){ grid-column:1 / span 5; } .shift:nth-child(2){ grid-column:3 / span 5; } .shift:nth-child(3){ grid-column:5 / span 5; } .shift:nth-child(4){ grid-column:7 / span 5; } } .shift{ position:relative; padding:2px 0 clamp(40px,5vw,64px) clamp(20px,2.5vw,32px); border-left:1px solid var(--line); } .shift:last-child{ padding-bottom:0; } /* El peldaño. Dos columnas de ancho, que es exactamente lo que se desplaza cada punto: un tercio del bloque cuando ocupa seis y la mitad cuando ocupa cuatro. Sale de la regla del punto anterior y muere en la de este. */ @media (min-width:760px){ .shift + .shift::before{ content:""; position:absolute; top:0; left:-33.3333%; width:33.3333%; height:1px; background:var(--line); } } @media (min-width:1100px){ .shift + .shift::before{ left:-40%; width:40%; } } .shift-num{ margin:0 0 12px; font-family:var(--font-mono); font-size:.875rem; letter-spacing:.1em; color:var(--point-ink); font-variant-numeric:tabular-nums; } .shift-title{ margin:0; text-wrap:balance; } .shift-text{ margin:14px 0 0; color:var(--ink-2); font-size:1.0625rem; line-height:1.6; max-width:44ch; } /* ============================================================ A5 · LA SESIÓN DE ENTRADA — solo en la página de negocio ============================================================ El mismo hueco que en IT ocupa el panel de arquitectura, y aquí en papel: los dos paneles oscuros de la página son el de la arquitectura y el del método, y un tercero los convertiría en el fondo en vez de en el acento. La lista es .tele de agency.css y la nota es .svc-rule, las dos prestadas de las páginas de servicio: son las mismas tres piezas que se entregan allí, y dibujarlas de otra manera las contaría como si fueran otra cosa. Aquí solo se les da su sitio. */ .session-gets{ margin-top:36px; max-width:52rem; } .session-gets li:last-child{ border-bottom:1px solid var(--line); } .session-note{ margin-top:36px; } .session-cta{ margin:32px 0 0; } /* ============================================================ A7 · LA VOZ DEL CLIENTE — solo en la página de IT ============================================================ La figura es .quote de agency.css, la misma de la portada y la de formación. Lo propio de aquí es el aire: va entre el día concreto y el panel del método, y el panel ya trae el suyo dentro, así que por abajo se le deja un tercio de sección y no una entera. */ .aud-quote{ padding-top:calc(var(--sec) / 3); padding-bottom:0; } /* Y el panel del método que la sigue no repite el aire: la cita y el método se leían como dos secciones separadas por media pantalla. */ .aud[data-audience="it"] > #a6{ padding-top:calc(var(--sec) / 4); }