/* ============================================================
   PLEASEPOINT 2026 — PARTNERS

   La rejilla de trece tarjetas, la pastilla de categoría, la
   barra de filtro, el bloque de AWS y el panel del cierre.

   NO VA EN agency.css, y el requisito decía que sí. agency.css
   es la hoja base —«esto es lo que heredan todas las páginas
   2026, nada específico de una página»— y la sirven las once
   páginas del sitio: doscientas líneas que solo pinta esta
   página se pagarían once veces. Las otras nueve páginas ya
   tienen su hoja propia y esta hace lo mismo.

   Lo que sí sale de agency.css son los tokens, .card,
   .deliverables, .panel y .svc-hero: aquí no hay ningún color
   escrito a pelo ni ninguna medida nueva del sistema.

   LA BARRA DE FILTRO ESTÁ DUPLICADA de resources.css a
   propósito, y el requisito lo admite. Allí es una barra
   pegajosa con buscador, contador en vivo y paginación sobre
   sesenta y siete artículos; aquí son cuatro botones sobre
   trece tarjetas que caben en dos pantallas. Generalizar las
   dos habría dejado una clase con la mitad de las reglas
   apagadas por un modificador, y habría puesto la página de
   recursos —que tiene su propia suite de pruebas— a depender de
   esta. Son treinta líneas: sale más barato repetirlas.
   ============================================================ */

/* ---------- P2 · La intro ----------
   Hero e intro son una sola unidad de lectura, así que la intro no
   arranca con el aire de sección: lo suyo empieza donde acaba el hero. */
.pt-intro{ padding-top:0 !important; }

/* Los titulares de sección de esta página. El hueco bajo la etiqueta es
   el mismo que en la home y en el catálogo. */
.pt-h2{ margin-top:20px; max-width:20ch; text-wrap:balance; }

/* ------------------------------------------------------------
   P3 · LA BARRA DE FILTRO
   OCULTA MIENTRAS NO HAYA JAVASCRIPT. Los trece llegan en el HTML y se
   ven los trece; lo único que no funciona sin script es filtrar, así que
   la barra no se pinta hasta que partners.js pone .js-on en el
   documento. Nadie ve cuatro botones muertos.

   No es pegajosa, al revés que la de recursos: con trece tarjetas se
   llega al final de la rejilla sin perder la barra de vista más de un
   scroll, y lo pegajoso de este sitio es una excepción, no un recurso.
   ------------------------------------------------------------ */
.pt-filter{ display:none; margin-top:36px; }
.js-on .pt-filter{ display:block; }

/* Una sola fila, siempre. Cuatro botones de anchos distintos no caben en
   cualquier ventana, y partidos en dos la barra deja de leerse como una
   barra. Se deslizan, igual que la franja de marcas de la home.

   Los márgenes negativos la sacan del wrap por la izquierda, para que el
   botón cortado por el borde diga que hay más. */
.pt-filter-row{
  display:flex; flex-wrap:nowrap; align-items:center; gap:4px;
  margin-left:calc(var(--pad) * -1);
  padding-left:var(--pad); padding-right:8px;
  overflow-x:auto; scrollbar-width:none;
}
.pt-filter-row::-webkit-scrollbar{ display:none; }

/* Subrayado, no relleno de color: el acento del sistema marca, no pinta
   fondos. El borde inferior transparente reserva su sitio desde el
   principio, así que al cambiar de botón nada se mueve. */
.pt-filter-btn{
  flex:0 0 auto;
  font-family:var(--font-sans); font-size:.9375rem; font-weight:400;
  color:var(--ink-2); background:none; border:0;
  border-bottom:2px solid transparent;
  padding:8px 12px 7px; cursor:pointer; white-space:nowrap;
  transition:color .18s ease, border-color .18s ease;
}
.pt-filter-btn:hover{ color:var(--ink); }
.pt-filter-btn[aria-pressed="true"]{
  color:var(--ink); font-weight:500;
  border-bottom-color:var(--point-ink);
}
.pt-filter-n{ color:var(--ink-3); font-size:.75rem; }
.pt-filter-btn[aria-pressed="true"] .pt-filter-n{ color:var(--ink-2); }

/* ------------------------------------------------------------
   P3 · LA REJILLA Y LA TARJETA
   Tres columnas en escritorio, dos en tableta, una en móvil. Es la
   parrilla de artículos, no la de casos: aquí no hay portada que mirar y
   a dos columnas trece tarjetas de texto son siete filas.

   NO ES UN ENLACE y no lo parece: sin hover que la levante, sin cursor
   de mano y sin flecha. Ninguno de los trece tiene ficha propia.
   ------------------------------------------------------------ */
.pt-grid{
  display:grid; grid-template-columns:1fr; gap:20px;
  margin-top:44px;
}
@media (min-width:700px){ .pt-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){ .pt-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } }

/* .card pone la superficie, el hairline y el radio. Aquí solo el reparto
   interior: la pastilla se descuelga al fondo para que las trece filas
   de pastillas queden alineadas aunque las descripciones midan distinto. */
.pt-card{ gap:0; padding:26px 26px 22px; }

/* El filtro oculta con el atributo hidden, que es el estado del elemento
   y lo entienden también el lector de pantalla y el buscador del
   navegador. Pero .card declara display:flex, y una clase de autor gana
   al display:none que el navegador trae para [hidden]: sin esta línea
   los cuatro botones se marcan y no se oculta nada. */
.pt-card[hidden]{ display:none; }

/* El logotipo, en una caja fija de 160 × 44 con object-fit. Son
   logotipos de terceros: no se rehacen en SVG y no se redibujan.

   LOS TRECE ARCHIVOS SON SILUETAS BLANCAS SOBRE TRANSPARENCIA. Se
   dibujaron para el sitio de 2025, que era oscuro; sobre papel no se ve
   ninguno. brightness(0) lleva la silueta a la tinta del sistema, que es
   exactamente lo que ya hace .logos img.is-flat con los wordmarks de la
   franja de clientes: no es estilizar un logotipo ajeno, es revelar el
   dibujo que el archivo ya trae. El día que alguno llegue en color, se
   marca con .pt-logo-color y se sale de esta regla.

   La caja fija es lo que permite que los trece lleven el mismo width y
   el mismo height en el HTML sin trece medidas escritas a mano, y lo que
   deja la fila de nombres alineada con proporciones que van de 1,6:1 a
   8:1. */
.pt-logo{ margin:0 0 20px; }
.pt-logo img{
  width:160px; height:44px;
  object-fit:contain; object-position:left center;
  display:block;
  opacity:.85; filter:brightness(0);
}
.pt-logo img.pt-logo-color{ opacity:1; filter:none; }

.pt-name{
  margin:0 0 10px;
  font-size:1.0625rem; font-weight:600; line-height:1.3; color:var(--ink);
}
.pt-desc{
  margin:0;
  font-size:.9375rem; line-height:1.55; color:var(--ink-2);
}

/* Las tres capacidades, compactas y con su regla hairline: son un dato,
   no una lista de ventajas, y a tamaño de párrafo competían con la
   descripción. Sin viñetas —el punto medio las separa mejor en una línea
   y ocupan tres, no seis—. */
.pt-caps{
  list-style:none; margin:16px 0 20px; padding:14px 0 0;
  border-top:1px solid var(--line);
}
.pt-caps li{
  font-family:var(--font-mono); font-size:.75rem; line-height:1.5;
  letter-spacing:.02em; color:var(--ink-3);
}

/* La pastilla de categoría, abajo del todo. Es una etiqueta, no un
   botón: no se pulsa y no lleva a ninguna parte. */
.pt-pill{
  align-self:flex-start; margin:auto 0 0;
  padding:4px 12px 3px; border:1px solid var(--line); border-radius:999px;
  font-family:var(--font-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  white-space:nowrap;
}

/* ------------------------------------------------------------
   P4 · QUÉ APORTA
   La ficha de entregable de agency.css, en cuatro columnas. La hoja base
   la reparte de tres en tres —es lo que necesitan las páginas de
   servicio— y aquí son cuatro bloques.
   ------------------------------------------------------------ */
.pt-benefits{ margin-top:44px; }
@media (min-width:860px){
  .pt-benefits{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(24px,3vw,56px); }
}
@media (min-width:1180px){
  .pt-benefits{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* ------------------------------------------------------------
   P5 · LOS DISTINTIVOS DE AWS
   Cuatro bloques: los dos que tienen imagen oficial la llevan, y los dos
   que no se pintan como texto. Nunca con un dibujo nuestro que los
   imite: son credenciales verificables y un facsímil las convierte en
   decoración.

   El que va sin imagen no se disimula con un hueco vacío: se compensa
   con la regla superior a tinta plena, que es lo que le da el peso que
   al otro le da el badge.
   ------------------------------------------------------------ */
.pt-badges{
  display:grid; grid-template-columns:1fr; gap:0 clamp(24px,3vw,48px);
  margin-top:44px;
}
@media (min-width:720px){ .pt-badges{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){ .pt-badges{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.pt-badge{ padding:20px 0 24px; border-top:1px solid var(--line); min-width:0; }
.pt-badge--text{ border-top-color:var(--ink); }

/* El estado va arriba y la imagen abajo, que es lo que deja los cuatro
   títulos a la misma altura: con el badge encima, los dos que no lo
   tienen empezaban cien píxeles más arriba y la fila se leía en zigzag.
   Abajo, la ausencia de imagen no descoloca nada. */
.pt-badge-status{
  margin:0 0 12px; font-size:.6875rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--point-ink);
}
.pt-badge-title{
  margin:0 0 8px;
  font-size:1.0625rem; font-weight:600; line-height:1.3; color:var(--ink);
}
.pt-badge-desc{ margin:0; font-size:.9375rem; line-height:1.5; color:var(--ink-2); }

.pt-badge-art{ margin:20px 0 0; }
/* A su altura real y sin caja, igual que en la franja de prueba. */
.pt-badge-art img{ display:block; height:88px; width:auto; }

/* El acceso al marketplace. Papel elevado y hairline —la tarjeta del
   sistema— porque es lo único accionable de la sección y necesita
   separarse de las cuatro fichas sin cambiar de color. */
.pt-market{
  margin-top:48px; padding:28px clamp(24px,3vw,36px) 30px;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:12px;
}
.pt-market-desc{ margin:12px 0 20px; max-width:60ch; color:var(--ink-2); }

/* ------------------------------------------------------------
   P6 · EL CIERRE
   El único panel oscuro de la página. El resto del contrapunto lo ponen
   los separadores, igual que en proyectos y en el catálogo, pero el
   cierre tiene que leerse como el final y no como una sexta sección.
   ------------------------------------------------------------ */
.pt-collab h2{ margin-top:20px; max-width:18ch; }
.pt-collab .body-l{ margin-top:24px; }
.pt-collab .inline-ask{ margin-top:36px; }
.pt-collab .svc-full-link{ margin:20px 0 0; }

@media (max-width:640px){
  .pt-card{ padding:22px 22px 20px; }
  .pt-badge-art img{ height:72px; }
}