/* ============================================================
   PLEASEPOINT 2026 — LAS TRES PÁGINAS DE SERVICIO
   Una sola hoja para implantación, formación y desarrollo a medida.
   Las tres NO comparten estructura: comparten sistema. Lo que hay
   aquí son los patrones propios de estas páginas; la ficha de
   entregable, el "cuándo sí y cuándo no" y los pasos telegráficos
   viven en agency.css porque los usan las tres. La forma de página
   —hero, titular de sección, costura de panel y esquema— también se
   fue a agency.css el día que la página de plataforma pasó a usarla.

   Criterio de legibilidad de esta hoja: el texto corrido no pasa de
   56 caracteres de medida, el cuerpo de las listas va a 1rem y la
   tinta callada (--ink-3) se reserva para etiquetas, nunca para un
   bloque de prosa.
   ============================================================ */

/* ---------- Ritmo de sección ----------
   Estas páginas tienen muchas secciones cortas, al revés que la home,
   que tiene pocas y largas. Con la costura entera, dos de cada once
   pantallas de la página de implantación eran aire.

   Se deriva del token en vez de escribir un número: el escalón de
   1000 px y el de móvil siguen aplicando solos. */
main > section{ padding-top:calc(var(--sec) * .78); padding-bottom:calc(var(--sec) * .78); }

/* El titular del cierre, más ancho aquí que en el resto del sitio. Los
   tres son preguntas de siete u ocho palabras y a doce caracteres de
   medida —lo que vale para un titular de tres— caían en cuatro líneas
   escalonadas que se leían como un poema. El tope general se queda
   como está: lo usan ocho páginas y las demás tienen cierres cortos. */
#closing h2{ max-width:20ch; }

/* ---------- Costura propia de estas tres páginas ----------
   En implantación, la entrada y "qué se implanta" son la misma promesa
   a dos alturas, no dos capítulos: media costura por arriba. Y por
   abajo, media también, porque detrás viene el panel del recorrido, que
   ya trae la suya. Con la costura entera por los dos lados, entre las
   tres puertas y el panel había más aire que entre dos capítulos
   distintos. */
#p2b{ padding-top:calc(var(--sec) / 3); padding-bottom:calc(var(--sec) / 3); }

/* "Qué queda" llevaba media costura por abajo porque detrás venía el
   panel de la plataforma, que corta él solo. Ya no se pinta ninguno de
   los dos bloques que venían después, así que la sección recupera su
   costura entera y detrás va el separador. */

/* En desarrollo a medida, el panel de "cómo se trabaja" va sin
   separador por ninguno de los dos lados: corta él solo. Sus dos
   vecinas le dan un tercio de costura y no la entera, igual que "qué se
   implanta" con el panel del recorrido. Con la costura completa, las
   dos caras del panel eran una pantalla de aire cada una, y "qué
   construimos" y "cómo se trabaja" —que son la misma explicación a dos
   alturas— se leían como dos capítulos sueltos. */
#d2{ padding-bottom:calc(var(--sec) / 3); }
#d4{ padding-top:calc(var(--sec) / 3); }



/* ---------- Cuándo no somos nosotros ----------
   NO LO PINTA NADIE. Era el encaje de implantación y se retiró: pedía
   al lector que se autodescartara justo antes de la única prueba que
   tiene la página. Las reglas se quedan con su parcial y su copy.

   Una sola lista, sin la columna del "sí". No es .fit de agency.css:
   aquello son dos columnas con regla en medio, y aquí solo hay una.

   El texto a la izquierda y la salida a la derecha, alineados por la
   línea base: el enlace es una puerta a otro servicio, no la coletilla
   de la frase. En estrecho cae debajo, con su aire. */
.nofit{ list-style:none; margin:36px 0 0; padding:0; max-width:52rem; }
.nofit li{
  display:grid; grid-template-columns:1fr; gap:8px;
  padding:18px 0; border-top:1px solid var(--line);
}
.nofit li:last-child{ border-bottom:1px solid var(--line); }
@media (min-width:760px){
  .nofit li{
    grid-template-columns:minmax(0,1fr) auto;
    gap:clamp(16px,3vw,48px); align-items:baseline;
  }
}
.nofit-text{ color:var(--ink); font-size:1.0625rem; line-height:1.5; }

/* ============================================================
   IMPLANTACIÓN
   ============================================================ */

/* ---------- El trato ----------
   NO LO PINTA NADIE. La sección se retiró: resumía en tres columnas lo
   que la página cuenta después con más concreción. Las reglas se quedan
   porque la parcial y su copy también se quedan, y volver a pintarlo es
   descomentar una línea del main.

   Tres columnas de dos líneas: quien solo leyera esto ya sabía en qué
   consiste trabajar con nosotros. */
.deal{ display:grid; grid-template-columns:1fr; gap:40px; margin-top:40px; }
@media (min-width:860px){
  .deal{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,64px); }
}
.deal-title{
  margin:0; padding-bottom:14px; border-bottom:1px solid var(--ink);
  font-size:1.0625rem; font-weight:600; line-height:1.3;
}
.deal .tele{ margin-top:0; }
.deal .tele li:first-child{ border-top:0; padding-top:16px; }

/* ---------- El recorrido, dentro del panel ----------
   Aquí vivía .phase-list, la lista de las tres fases con su salto, y se
   ha caído con el diagrama de fases: los rótulos del dibujo de la cola
   son ahora los nombres de las fases y son ellos los que enlazan. Una
   lista de tres filas debajo repitiendo los mismos tres nombres era el
   mismo enlace dos veces.

   El salto, dentro del dibujo. Sin subrayado y sin color propio: es un
   rótulo de diagrama y tiene que seguir leyéndose como tal. Lo que dice
   que se puede pulsar es el cursor y el acento al pasar por encima. */
.queue-jump{ cursor:pointer; }
.queue-jump text{ transition:fill .2s ease; }
.queue-jump:hover text,
.queue-jump:focus-visible text{ fill:var(--point); }

/* ---------- Las tres fases ----------
   Van seguidas y sin marca entre ellas: son un mismo trabajo y la
   lectura no se debe interrumpir. Una fase cabe en un viewport. */
.phase{
  padding-top:clamp(48px,6vh,72px); padding-bottom:clamp(48px,6vh,72px);
  /* Los id de fase son destino de la redirección de los slugs viejos y
     de la lista de arriba: sin esto el titular queda bajo la cabecera. */
  scroll-margin-top:96px;
}
.phase + .phase .wrap{ border-top:1px solid var(--line); padding-top:clamp(44px,5vh,64px); }
.phase-tag{ margin-bottom:16px; }
.phase-h2{ max-width:20ch; }
/* Lo concreto, en dos piezas y una debajo de la otra: qué se hace,
   en pasos, y qué te llevas, en cajas.

   Fueron dos listas en dos columnas, con el entregable apilado en la
   más estrecha. El entregable es lo que decide una compra de servicios
   y acababa siendo la mitad delgada de la fase; ahora manda, ocupa el
   ancho entero y va al final, que es lo que se retiene.

   .phase-cols era la rejilla de aquellas dos columnas y ya no la usa
   nadie. */

/* ---------- Qué hacemos, en pasos ----------
   Una fila de pasos numerados de una línea, no una lista con viñeta de
   líneas de catorce palabras: tres fases seguidas de eso eran un muro.
   El número en mono y pequeño, con su filo encima, y debajo la línea.
   Lo que ordena es el filo, no una raya entre pasos.

   Sin flecha entre uno y otro: el número ya dice el orden, y una flecha
   por paso convertía la fila en un diagrama que compite con el del
   recorrido. */
.steps{
  list-style:none; display:grid; grid-template-columns:1fr;
  gap:20px var(--gutter); margin:40px 0 0; padding:0;
  counter-reset:none;
}
@media (min-width:640px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:980px){ .steps{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); } }
.steps li{ padding-top:14px; border-top:1px solid var(--line); min-width:0; }
.step-num{
  display:block; margin-bottom:8px;
  font-family:var(--font-mono); font-size:.75rem; font-variant-numeric:tabular-nums;
  letter-spacing:.1em; color:var(--ink-3);
}
.step-text{ display:block; color:var(--ink); font-size:1rem; line-height:1.5; }

/* ---------- Qué recibes, en tres cajas ----------
   Macizas y sin filo, al revés que las tres puertas del catálogo de más
   arriba: aquéllas son sitios a los que ir y se dibujan con su contorno;
   éstas son cosas que se quedan y se dibujan con superficie. Dos cosas
   distintas no se dibujan igual.

   El fondo es el hundido y no el levantado: lo que se queda pesa, no
   flota.

   LAS USAN DOS PÁGINAS: las fases de implantación y el "qué queda" de
   formación, que va dentro de un panel y por eso lleva su variante de
   fondo. Es maquetación compartida, no espina compartida: lo que dicen
   y cuántas son lo decide cada página. */
.gets{ margin-top:44px; }
.gets-label{ margin-bottom:20px; }
.gets-row{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:760px){
  .gets-row{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,20px); }
}
.get{
  background:var(--paper-sunk); border-radius:14px;
  padding:clamp(20px,2.4vw,28px); min-width:0;
}
.get-name{
  margin:0 0 10px; color:var(--ink);
  font-size:1.0625rem; font-weight:600; line-height:1.3;
}
.get-line{ margin:0; color:var(--ink-2); font-size:.9375rem; line-height:1.55; }
.get-line + .get-line{ margin-top:12px; }
/* El rótulo del hecho, cuando la caja lleva dos. En implantación no hay
   ninguno: una sola línea no necesita que le digan de qué es respuesta. */
.get-line span{
  display:block; margin-bottom:2px;
  font-family:var(--font-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}

/* Dentro del panel: la superficie sube en vez de hundirse, que sobre
   fondo oscuro es lo que separa una caja del papel de detrás. */
.panel .get{ background:var(--panel-raised); }
.panel .get-name{ color:var(--on-panel); }
.panel .get-line{ color:var(--on-panel-2); }
.panel .get-line span{ color:var(--on-panel-2); opacity:.75; }
.panel .gets{ margin-top:40px; }

/* ---------- Las tres puertas del catálogo ----------
   Cajas con superficie y filo, no tres columnas con una raya encima: lo
   de la raya encima es .builds —"qué construimos" de desarrollo a
   medida— y es también la forma de los pasos de cada fase. Aquí lo
   primero que hay que ver es que son tres sitios a los que ir, y una
   puerta se dibuja con su contorno.

   La salida abajo del todo y a ras del suelo de la caja, alineada en las
   tres aunque las líneas midan distinto: es lo que se busca con la
   vista cuando ya se ha decidido a cuál entrar. */
.gates{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:44px; }
@media (min-width:760px){
  .gates{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,20px); }
}
.gate{
  display:flex; flex-direction:column; min-width:0; color:inherit;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:14px;
  padding:clamp(24px,2.6vw,32px);
  transition:border-color .2s ease;
}
.gate:hover{ border-color:var(--ink-3); }
.gate-name{ margin:0 0 12px; }
.gate:hover .gate-name{ color:var(--point-ink); }
.gate-text{ display:block; color:var(--ink-2); font-size:1rem; line-height:1.55; }
/* El auto de arriba es lo que pega la salida al suelo de la caja. */
.gate-cta{
  display:block; margin-top:auto; padding-top:24px;
  color:var(--point-ink); font-size:.9375rem; font-weight:500; line-height:1.4;
}
.gate-cta .arw{ display:inline-block; transition:transform .25s cubic-bezier(.2,.7,.3,1); }
.gate:hover .gate-cta .arw{ transform:translateX(4px); }

/* ---------- La cola de casos ----------
   El dibujo que atraviesa las tres fases, entre el recorrido y la
   primera. Mismo trato que el flujo de construcción de desarrollo a
   medida: lienzo de 1000 unidades a ancho de la caja, para que la letra
   del dibujo quede a la medida de la de la página, y un mínimo por
   debajo del cual las tres tablas se arrastran en vez de leerse. */
.queue-fig{ margin-top:36px; overflow-x:auto; }
.queue-svg{ width:100%; min-width:680px; height:auto; display:block; }

/* ---------- Las horas ----------
   La banda de productividad, dentro del mismo panel y debajo del dibujo:
   el dibujo dice que cada vuelta suma algo y esto dice cuánto vale ese
   algo en el trabajo de un día.

   Separada del dibujo por una regla y no por una costura: son dos
   piezas de la misma sección, no dos secciones. */
.hours{ margin-top:clamp(48px,5vw,72px); padding-top:36px; border-top:1px solid var(--panel-line); }
.hours-h3{ margin:0; max-width:20ch; }
.hours .head-row{ margin-top:0; }

.hours-row{ display:grid; grid-template-columns:1fr; gap:20px; margin-top:36px; }
@media (min-width:760px){
  .hours-row{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,28px); }
}
/* Sin caja: lo que separa una columna de la siguiente es el filo de
   arriba, que es lo mismo que hace el resto del sistema. Con caja, tres
   cifras grandes dentro de tres recuadros dentro de un panel eran tres
   marcos anidados. */
.hour{ padding-top:18px; border-top:1px solid var(--panel-line); min-width:0; }
.hour-case{
  margin:0; color:var(--on-panel);
  font-size:1rem; font-weight:600; line-height:1.35;
}
.hour-unit{
  margin:6px 0 0;
  font-family:var(--font-mono); font-size:.6875rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--on-panel-2);
}

/* La cifra. El antes tachado y el después en el acento, igual que en el
   bloque de caso del catálogo: es el mismo dato y no puede leerse de dos
   maneras distintas en dos páginas. */
.hour-val{
  display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px 14px;
  margin:22px 0 0;
}
.hour-from,
.hour-to{ display:block; font-variant-numeric:tabular-nums; line-height:1.05; }
.hour-from .label,
.hour-to .label{ display:block; margin-bottom:8px; }
.hour-from{
  font-family:var(--font-display); font-weight:var(--display-wght);
  letter-spacing:var(--display-tracking);
  font-size:clamp(1.5rem,2.2vw,2rem); color:var(--on-panel-2);
}
/* El tachado va en la cifra y no en el tramo entero: text-decoration se
   pinta sobre todos los descendientes y no hay forma de quitárselo al
   rótulo desde dentro, así que el "Hoy" salía tachado también. Es el
   mismo <s> que usa el bloque de caso del catálogo. */
.hour-from s{ text-decoration:line-through; text-decoration-thickness:1px; }
.hour-to{
  font-family:var(--font-display); font-weight:var(--display-wght);
  letter-spacing:var(--display-tracking);
  font-size:clamp(1.85rem,3.2vw,3rem); color:var(--point);
}
.hour-arw{ color:var(--on-panel-2); padding-bottom:.35em; }

/* La nota es la condición del dato y no un pie de página decorativo:
   son las horas de ese ejemplo, no una media de clientes. Va a la
   medida del texto y no a lo ancho del panel. */
.hours-note{
  margin:32px 0 0; max-width:64ch;
  font-size:.9375rem; line-height:1.6; color:var(--on-panel-2);
}

/* ============================================================
   FORMACIÓN
   ============================================================ */

/* ---------- Los dos caminos ----------
   Eran dos columnas separadas por una regla, con cuatro renglones cada
   una y los ocho con la misma forma. Lo que daban era pereza: nadie lee
   dos checklists en paralelo para decidir si le interesa un servicio.

   Ahora cada camino es una caja con su contorno, y son dos cajas y no
   dos columnas a propósito: lo primero que hay que entender es que son
   dos recorridos distintos, no una lista partida en dos.

   Llevan contorno como las tres puertas del catálogo de implantación y
   por lo mismo: los dos terminan en una puerta.

   La pieza dibujada que había aquí —dos filas de marcas convergiendo—
   se cayó, y con ella .tracks-fig y .tracks-svg. Su propio comentario
   reconocía que sin el dibujo la sección se entendía igual. */
.paths{ display:grid; grid-template-columns:1fr; gap:20px; margin-top:44px; }
@media (min-width:860px){
  .paths{ grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,24px); }
}
.path{
  display:flex; flex-direction:column; min-width:0;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:14px;
  padding:clamp(24px,2.8vw,36px);
}
.path-who{
  margin:0 0 10px;
  font-family:var(--font-mono); font-size:.75rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.path-title{ margin:0; }

/* Lo que se sabrá hacer al salir. La entradilla es la que convierte la
   lista en una promesa: sin ella son tres frases sueltas y con ella son
   la respuesta a "¿y esto para qué me sirve?". */
.path-lead{
  margin:24px 0 0; padding-bottom:14px; border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:.75rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.path-gains{ list-style:none; margin:0; padding:0; }
.path-gains li{
  position:relative; padding:14px 0 14px 22px;
  color:var(--ink); font-size:1.0625rem; line-height:1.45;
}
.path-gains li + li{ border-top:1px solid var(--line); }
/* La marca del sistema haciendo de viñeta: un trazo corto en el acento,
   no un punto ni un icono de librería. */
.path-gains li::before{
  content:""; position:absolute; left:0; top:1.42em;
  width:12px; height:1px; background:var(--point-ink);
}
/* El auto de arriba pega la puerta al suelo de la caja: las dos quedan
   a la misma altura aunque las líneas midan distinto. */
.path-link{ margin:0; padding-top:28px; margin-top:auto; }

/* ---------- Costura alrededor del panel de formación ----------
   El panel corta él solo, así que sus dos vecinas le dejan media
   costura y no una entera. Con la entera por los dos lados —la de la
   sección más la que trae el panel— entre "cómo se trabaja" y el
   argumento, y entre el argumento y la prueba, había más aire que entre
   dos capítulos distintos.

   Es la misma media costura que usa la página de implantación alrededor
   de su panel. */
#t2{ padding-bottom:calc(var(--sec) / 3); }
#t4b{ padding-top:calc(var(--sec) / 3); }

/* ---------- El criterio, dibujado ----------
   Va dentro del panel, entre la línea que dice el argumento y las tres
   cajas que lo concretan, así que respira por los dos lados.

   A ancho de panel y sin tope, igual que la cola de casos: el lienzo es
   de 1000 unidades y a ancho de la caja la letra del dibujo queda a la
   medida de la de la página. Con tope se quedaba pequeño en medio de una
   caja vacía. El mínimo es lo que impide que en un móvil los tres
   momentos se aplasten: por debajo de ahí, la figura se arrastra. */
.criterion-fig{ margin:40px 0 0; overflow-x:auto; }
.criterion-svg{ width:100%; min-width:660px; height:auto; display:block; }

/* ---------- La cita y el proyecto ----------
   A sangre y a medias. Iba dentro de la caja de texto y con la tarjeta
   en la columna estrecha de una rejilla de siete y cinco: la portada
   quedaba pequeñísima al lado de un testimonio de ochenta palabras, y lo
   que se leía era una cita con una miniatura al lado.

   Ahora media página cada una, así que la portada mide lo que mide una
   tarjeta de la parrilla de proyectos —la misma pieza, el mismo tamaño—
   y la cita tiene sitio para respirar.

   Centradas entre sí: la cita es más alta que la tarjeta y alineadas por
   arriba dejaban la portada colgando de la esquina. */
.said{ display:grid; grid-template-columns:1fr; gap:48px; margin-top:44px; }
@media (min-width:900px){
  .said{
    grid-template-columns:1fr 1fr;
    gap:clamp(32px,5vw,80px); align-items:center;
  }
}
/* A sangre la cita necesita su propia medida: .bleed no trae tope y el
   testimonio se estiraría a media pantalla. El tope es el de la home,
   donde la cita ocupa la caja. */
.said-quote .quote{ max-width:none; }
.said-quote .quote blockquote{ max-width:34ch; }
@media (min-width:900px){ .said-quote .quote blockquote{ max-width:none; } }
/* La parrilla de casos aquí es de una sola tarjeta: sin el margen que la
   separa de un titular, que en esta columna no tiene encima, y sin
   partirse en dos columnas al ensanchar. */
.said-case{ margin-top:0; }
@media (min-width:760px){ .said-case{ grid-template-columns:1fr; } }

/* ============================================================
   FORMATO Y COMPROMISO
   Cómo es una sesión, cómo construimos y la prueba. Título en negrita
   y la explicación al lado: una lista para leer de un vistazo, no un
   temario.
   ============================================================ */
.format{ list-style:none; margin:40px 0 0; padding:0; }
.format li{
  display:grid; grid-template-columns:1fr; gap:6px;
  padding:20px 0; border-top:1px solid var(--line);
}
@media (min-width:760px){
  .format li{ grid-template-columns:minmax(0,4fr) minmax(0,6fr); gap:clamp(16px,3vw,48px); align-items:baseline; }
}
.format li:last-child{ border-bottom:1px solid var(--line); }

.format b{ font-weight:600; color:var(--ink); font-size:1.0625rem; line-height:1.4; }
.format span{ color:var(--ink-2); font-size:1rem; line-height:1.55; }
.format .fwd{ display:inline-block; margin-left:6px; }

/* ============================================================
   DESARROLLO A MEDIDA
   ============================================================ */

/* Rejilla compacta y no lista. Con el mismo patrón que "cómo
   construimos", once líneas seguidas se leían como una sola lista de
   once cosas.

   La usan dos páginas: "qué construimos" de desarrollo a medida, donde
   cada celda es texto, y "qué se implanta" de implantación, donde cada
   celda es un enlace a su grupo del catálogo. Por eso está aquí arriba
   y no dentro del bloque de una de las dos. */
.builds{ display:grid; grid-template-columns:1fr; gap:0; margin-top:40px; }
@media (min-width:720px){
  .builds{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(24px,4vw,64px); }
}
@media (min-width:1100px){
  .builds{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.build{ padding:22px 0; border-top:1px solid var(--line); min-width:0; }
.build-title{ display:block; margin:0 0 8px; font-size:1.0625rem; font-weight:600; line-height:1.3; }
.build p,
.build > span:not(.build-title):not(.arw){ display:block; margin:0; color:var(--ink-2); font-size:1rem; line-height:1.55; }

/* La celda como puerta. La flecha va debajo y no al lado del nombre:
   al lado obligaba a una fila de dos columnas dentro de una celda que
   ya es estrecha, y a tres columnas se partía. */
a.build{ color:inherit; }
a.build .arw{ display:inline-block; margin-top:14px; color:var(--ink-3); }
a.build:hover .build-title{ color:var(--point-ink); }
a.build:hover .arw{ color:var(--point-ink); transform:translateX(4px); }
a.build .arw{ transition:transform .25s cubic-bezier(.2,.7,.3,1), color .2s ease; }

/* El flujo de construcción: no hay una entrega final, hay muchas
   pequeñas.

   Del ancho de la caja, no de una ilustración al margen: el dibujo dice
   lo mismo que la lista de encima y a media caja se leía como una nota
   suelta. El lienzo es de 1000 unidades, así que a ancho de página la
   letra del dibujo sale por encima de su tamaño nominal y no por
   debajo. El mínimo es lo que impide que en un móvil los rótulos se
   queden en nada: por debajo de ahí, la figura se arrastra. */
.build-fig{ margin-top:44px; overflow-x:auto; }
.build-svg{ width:100%; min-width:640px; height:auto; display:block; }

/* Los dos párrafos que envuelven el esquema de los tramos: el de
   arriba es su pie y el de abajo dice lo que el dibujo no puede
   dibujar.

   Van más anchos que un .svc-lead normal —84 caracteres y no 56— porque
   aquí el vecino es un dibujo a todo el ancho de la caja: a media
   medida, la columna de texto se quedaba flotando a la izquierda y el
   conjunto se leía descuadrado. Son dos párrafos de dos líneas, así que
   la medida larga no llega a cansar. */
.svc-lead--wide,
.svc-note{ max-width:84ch; }
/* La nota la usan también "cómo es una sesión" de formación, que dice
   ahí lo que pasa fuera de la sesión, y la cola de casos de
   implantación, que la usa como pie del dibujo. */
.svc-note{
  margin:36px 0 0;
  font-size:1rem; line-height:1.6; color:var(--ink-2);
}


/* La fila de proyectos no pide nada propio: la parrilla, la tarjeta y
   la cabecera con botón son piezas compartidas y viven en agency.css. */

/* ---------- Qué queda ----------
   Cuatro columnas, una por cosa que se queda. Fue una tabla con
   cabecera —se leía como el anexo de un contrato— y después cuatro
   cajas con marco y fondo, que era una caja de más: quien separa aquí
   es la jerarquía, no un contorno. Queda el filo de arriba a tinta
   llena, el nombre en grande y los dos hechos con su rótulo.

   Los hechos empiezan todos a la misma altura y no empujados al pie:
   sin caja no hay suelo donde apoyarlos, y lo que se ve entonces es que
   una columna arranca más abajo que las otras tres. Lo que alinea aquí
   es el filo de arriba. Y ninguna regla entre un hecho y otro: los
   separa su propio rótulo. */
.keeps{ display:grid; grid-template-columns:1fr; gap:36px var(--gutter); margin-top:44px; }
@media (min-width:720px){
  .keeps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1100px){
  .keeps{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.keep{
  display:flex; flex-direction:column; min-width:0;
  padding-top:16px; border-top:2px solid var(--ink);
}
.keep-name{ margin:0; padding-bottom:20px; }
.keep-fact{
  margin:0; color:var(--ink-2);
  font-size:.9375rem; line-height:1.5;
}
.keep-fact + .keep-fact{ margin-top:16px; }
.keep-fact span{
  display:block; margin-bottom:3px;
  font-family:var(--font-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}

.svc-logos{ margin-top:56px; padding-top:40px; border-top:1px solid var(--line); }

/* ============================================================
   CROMO COMPARTIDO POR LAS TRES
   ============================================================ */


/* ---------- Responsive ---------- */
@media (max-width:640px){
  .phase-h2{ max-width:none; }
  .phase{ scroll-margin-top:80px; }
}