/* ============================================================
   PLEASEPOINT 2026 — LA PLATAFORMA
   Hoja de una sola página. La forma —hero, titular de sección,
   costura de panel, fila de puertas, cierre y preguntas— vive en
   agency.css, que la comparte con las tres páginas de servicio.
   Aquí solo están los patrones que no existen en ninguna otra:
   la lista de nombre y frase, la tira de logos de integración y
   las cajas de los dibujos.

   Criterio de legibilidad: el texto corrido no pasa de 56
   caracteres de medida y la tinta callada (--ink-3) se reserva
   para etiquetas, nunca para un bloque de prosa.
   ============================================================ */

/* ---------- Ritmo de sección ----------
   Mismo criterio que las páginas de servicio: muchas secciones cortas,
   al revés que la home. Se deriva del token en vez de escribir un
   número, así los escalones de --sec siguen aplicando solos. */
main > section{ padding-top:calc(var(--sec) * .78); padding-bottom:calc(var(--sec) * .78); }

/* El cierre no pide costura entera por arriba: viene detrás de la fila
   de puertas, que ya es aire. */
#closing{ padding-top:calc(var(--sec) / 2); }

/* ---------- Medidas de esta página ----------
   Más anchas que en las páginas de servicio. Allí cada sección es un
   argumento corto y la medida corta ayuda; aquí cada sección lleva un
   dibujo grande debajo, y una columna de 56 caracteres colgando de un
   dibujo de ancho completo se lee como si faltara la mitad.

   Las tres entradillas de sección comparten fila con un botón, así que
   el tope solo hace falta en el texto. */
.svc-lead{ max-width:72ch; }

/* ---------- El esquema de las cuatro capas ----------
   Dentro del panel, igual que en la home y en las páginas de servicio:
   el componente está dibujado para fondo oscuro.

   Sin tope de ancho, como en la home: aquí el esquema es la sección
   entera, y con 680 px se quedaba en una isla en medio de un panel
   vacío. Se mantiene el mínimo, que por debajo los rótulos se pisan. */
.pf-schema{ margin-top:32px; overflow-x:auto; }
.pf-schema svg{ width:100%; min-width:560px; display:block; }

/* ---------- Los dibujos propios ----------
   A ancho de contenido y sin tope: los dos lienzos miden 900 unidades
   justo para eso, así que a esta anchura van casi a escala 1:1 y sus
   rótulos en mono conservan su tamaño. Con un tope y estirados, los
   rótulos salían más grandes que el texto de la sección.

   Debajo del mínimo, scroll horizontal propio: ahí las etiquetas se
   pisarían entre sí, y una etiqueta pisada es peor que una barra. */
.pf-fig{ margin-top:40px; overflow-x:auto; }
.pf-fig svg{ width:100%; display:block; }
.pf-fig--models svg{ min-width:760px; }
.pf-fig--places svg{ min-width:780px; }

/* ---------- Lista de nombre y frase ----------
   El patrón que se repite en las tres secciones de contenido: el nombre
   a tinta plena y la frase debajo. No es una tabla y no lleva número:
   el orden no significa nada en ninguna de las tres. */
.pf-list{ list-style:none; margin:36px 0 0; padding:0; display:grid; gap:0; }
.pf-list li{
  display:grid; grid-template-columns:1fr; gap:6px;
  padding:20px 0; border-top:1px solid var(--line);
}
.pf-list li:last-child{ border-bottom:1px solid var(--line); }
.pf-list b{ font-weight:600; font-size:1.0625rem; color:var(--ink); }
.pf-list span{ color:var(--ink-2); font-size:1rem; line-height:1.55; }

/* Con sitio, el nombre y la frase van en dos columnas: así la lista se
   barre por la izquierda sin leer las frases. */
@media (min-width:760px){
  .pf-list li{ grid-template-columns:minmax(0,14rem) minmax(0,1fr); gap:clamp(24px,3vw,48px); align-items:baseline; }
}

/* Las cuatro capas son un recorrido y las cuatro maneras de recomendar
   no: por eso las capas van numeradas y en columnas, y las maneras en
   dos bloques que se leen a pares con el dibujo de arriba. */
@media (min-width:900px){
  .pf-list--two{ grid-template-columns:1fr 1fr; column-gap:clamp(32px,4vw,64px); }
  .pf-list--two li:nth-child(2){ border-top:1px solid var(--line); }
  .pf-list--two li:nth-last-child(2){ border-bottom:1px solid var(--line); }
  .pf-list--two li{ grid-template-columns:1fr; gap:6px; }
}

/* Apretada. En las dos secciones que llevan dibujo grande, el dibujo es
   el argumento y la lista es la nota al pie: con la fila entera de la
   lista normal, la nota ocupaba más que el argumento. */
.pf-list--tight{ margin-top:28px; }
.pf-list--tight li{ padding:15px 0; }
.pf-list--tight span{ font-size:0.9375rem; line-height:1.5; }

/* ---------- Las cuatro capas, en columnas ----------
   Cada capa es una frase corta y no necesita una fila entera. En cuatro
   columnas se leen de un vistazo y en el mismo orden en el que las
   dibuja el esquema de arriba. La línea va solo por arriba: en rejilla,
   una línea de cierre por debajo de cada celda dibuja una tabla que no
   existe. */
.pf-list--cols{ margin-top:28px; }
.pf-list--cols li{ padding:14px 0 0; }
.pf-list--cols li:last-child{ border-bottom:0; }
.pf-list--cols b{ font-size:1rem; }
.pf-list--cols span{ font-size:0.9375rem; line-height:1.5; }
@media (min-width:560px){
  .pf-list--cols{ grid-template-columns:1fr 1fr; column-gap:clamp(20px,3vw,40px); }
  .pf-list--cols li{ grid-template-columns:1fr; gap:4px; }
}
@media (min-width:960px){
  .pf-list--cols{ grid-template-columns:repeat(4,1fr); column-gap:clamp(20px,2.5vw,36px); }
}

/* ---------- La tira de logos ----------
   Cierra el panel de "qué es": el esquema nombra las capas en abstracto
   —ERP, CRM, ecommerce— y esto enseña con qué. Los archivos vienen del
   sitio anterior, donde ya estaban dibujados en blanco sobre
   transparente; el filtro los fuerza a blanco de todas formas, para que
   el día que entre uno de color no rompa la fila.

   Van a media tinta, como el resto del panel: es una prueba de que
   existe la integración, no una parrilla de partners.

   En rejilla y no en fila: once nombres de anchos muy distintos puestos
   a fluir dejaban una segunda fila con dos logos sueltos. En columnas
   fijas las dos filas empiezan en el mismo sitio. */
.pf-logos-label{ margin-top:44px; }
.pf-logos{
  list-style:none; margin:22px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px 16px;
}
@media (min-width:560px){ .pf-logos{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:960px){ .pf-logos{ grid-template-columns:repeat(7,1fr); } }
.pf-logos li{ display:flex; align-items:center; min-width:0; }
/* Tope de alto y tope de ancho, nunca un alto fijo: los hay de nueve a
   uno de proporción y con el alto clavado el más largo se aplastaba
   contra el ancho de su columna. */
.pf-logos img{
  display:block; width:auto; height:auto;
  max-width:100%; max-height:22px;
  filter:brightness(0) invert(1); opacity:.6;
}
/* El de Salesforce es la nube sola, casi cuadrada: a la altura de los
   logotipos largos se quedaba en una mancha. */
.pf-logo--salesforce img{ max-height:30px; }

/* ---------- Dentro del panel ----------
   El panel de "qué es" es el único que queda. Sus líneas van a la línea
   del panel, no a la del papel: sobre oscuro, --line no se ve. */
.pf-panel-lead{ margin-top:24px; max-width:56ch; }
.pf-list--panel li{ border-top-color:var(--panel-line); }
.pf-list--panel li:last-child{ border-bottom-color:var(--panel-line); }
.pf-list--panel b{ color:var(--on-panel); }
.pf-list--panel span{ color:var(--on-panel-2); }
/* La nota técnica, ahora debajo de la tira de logos. Nació en la
   sección de integración que se cayó y es lo único que aquella decía y
   la tira no. */
.pf-note{
  margin:28px 0 0; max-width:64ch;
  font-size:0.9375rem; line-height:1.6; color:var(--on-panel-2);
}

/* ---------- Las cuatro maneras de recomendar ----------
   Eran filas con su línea cada una, en dos columnas, y sonaban a
   formulario: cuatro rayas para cuatro frases de una línea es mucho
   ruido debajo de un dibujo que ya pesa.

   Ahora son cuatro columnas sin ninguna línea, y con la jerarquía al
   revés: el nombre baja a rótulo en mono y la frase sube a tinta plena.
   Lo que hay que leer es la diferencia entre una manera y otra, no
   cuatro titulares en negrita. */
.pf-kinds{ list-style:none; margin:36px 0 0; padding:0; display:grid; gap:26px; }
.pf-kinds li{ display:grid; gap:8px; }
.pf-kinds b{
  font-family:var(--font-mono); font-weight:400;
  font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-3);
}
.pf-kinds span{ color:var(--ink); font-size:1rem; line-height:1.5; }
@media (min-width:700px){
  .pf-kinds{ grid-template-columns:1fr 1fr; column-gap:clamp(28px,4vw,56px); }
}
@media (min-width:1000px){
  .pf-kinds{ grid-template-columns:repeat(4,1fr); column-gap:clamp(20px,2.6vw,40px); }
}

/* ---------- La prueba ----------
   No pide nada propio. El bloque es 2026/components/proof-cases, que
   comparten esta página y las que enseñan proyectos, y su titular y su
   entradilla usan .svc-h2 y .svc-lead de agency.css. Aquí hubo dos
   clases —.pf-proof-h2 y .pf-proof-lead— que eran esas dos reglas
   escritas por segunda vez, con los mismos valores. */

/* La fila de puertas de esta página reparte hacia los otros tres
   servicios, igual que la de las páginas de servicio. El reparto por
   número vive en agency.css y lo elige el propio Blade contando: aquí
   no hace falta ninguna regla. */

/* ---------- Responsive ---------- */
@media (max-width:640px){
  /* Los logos bajan de talla antes que partirse en siete filas. */
  .pf-logos{ gap:18px 24px; }
  .pf-logos img{ max-height:18px; }
  .pf-logo--salesforce img{ max-height:25px; }
}