/* ============================================================
   PLEASEPOINT 2026 — CATÁLOGO
   El mapa, las dos mitades y el bloque de caso. Lo compartido
   —.leftovers, el cierre, el formulario en línea— vive en
   agency.css; aquí solo lo propio de esta página.
   ============================================================ */

/* Primera sección: se aparta de la cabecera fija con el mismo aire
   que el hero del resto del sitio. Por abajo no se cierra: el mapa es
   su segunda mitad y sigue pegado. */
.impl-intro{ padding-top:clamp(140px,16vh,200px); padding-bottom:0; }
.impl-intro h1{ max-width:18ch; margin-top:20px; }
.impl-intro-text{ margin-top:32px; }

/* ---------- W1B · El buscador ----------
   Un campo, entre el texto de la entrada y el mapa. Es la vía rápida:
   quien llega sabiendo lo que quiere escribe una palabra, y quien no,
   baja dos líneas y entra por su área.

   NO SE PINTA HASTA QUE HAY JAVASCRIPT. La página funciona sin él —los
   cuarenta y un casos llegan enteros en el HTML— y un campo que no
   busca es peor que no tener campo. Lo enciende la clase .js-on que
   implement.js pone en el documento al arrancar.

   El campo es el del resto del sitio —píldora, campo hundido,
   hairline— en la talla del hero, que es la de .ask-full. Ancho de
   medida corta, no de línea entera: un campo de mil trescientos
   píxeles esperando la palabra «facturas» se lee como un formulario. */
.impl-find{ display:none; padding:0; }
.js-on .impl-find{ display:block; }

/* El aire de arriba lo pone el mapa y el de abajo la primera área: el
   campo no añade ninguno propio. Va pegado al catálogo porque es lo que
   filtra, y separado del mapa lo justo para no leerse como una décima
   línea de la retícula. */
.find{
  position:relative;
  display:flex; align-items:center;
  max-width:620px;
}
.find-icon{
  position:absolute; left:20px; color:var(--ink-3); pointer-events:none;
  transition:color .2s ease;
}
.find:focus-within .find-icon{ color:var(--point-ink); }

.find-input{
  width:100%;
  font-family:var(--font-sans); font-size:1.0625rem; line-height:1.5;
  padding:15px 48px 15px 50px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--paper-sunk); color:var(--ink);
  transition:border-color .2s ease, background .2s ease;
}
.find-input::placeholder{ color:var(--ink-3); }
.find-input:hover{ border-color:var(--ink-3); }
.find-input:focus{
  outline:none;
  border-color:var(--point-ink); background:var(--paper-raised);
}

/* El aspa nativa de WebKit se quita: no está en todos los navegadores
   y no se puede pintar, así que el campo tendría dos aspas distintas o
   ninguna según quién mire. */
.find-input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }

.find-clear{
  position:absolute; right:12px;
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0;
  background:none; border:0; border-radius:999px;
  color:var(--ink-3); cursor:pointer;
  transition:color .18s ease, background .18s ease;
}
.find-clear:hover{ color:var(--ink); background:var(--paper-sunk); }

/* Un display: flex escrito a mano le gana al [hidden] del navegador.
   Cuando un elemento nace oculto y se enseña con JavaScript, su
   display tiene que devolver el atributo. */
.find-clear[hidden]{ display:none; }

/* La línea de estado. Solo aparece con algo escrito, y dice lo único
   que las cuentas del mapa no pueden decir: que no hay ninguna
   coincidencia, o dónde están las que hay. */
.find-state{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 16px;
  margin:16px 0 0; max-width:620px;
  font-size:.9375rem; line-height:1.5; color:var(--ink-2);
}
.find-state[hidden]{ display:none; }

.find-state-btn{
  font:inherit; background:none; border:0; padding:0; cursor:pointer;
  color:var(--point-ink); font-weight:500;
  border-bottom:1px solid transparent;
  transition:border-color .18s ease;
}
.find-state-btn:hover{ border-bottom-color:currentColor; }
.find-state-btn[hidden]{ display:none; }
.find-state-btn .arw{ color:var(--ink-3); }
.find-state-btn:hover .arw{ color:var(--point-ink); }

/* Lo encontrado, subrayado en el nombre y en el problema: son lo que
   se ve con la caja cerrada, y es donde el ojo busca la palabra que
   se acaba de escribir. Un fondo de acento al 22 % —no el acento
   entero, que sobre cuarenta fichas es una pantalla de rotulador— y la
   tinta sin tocar, para no perder contraste. */
.find-hit{
  /* --point (#2BB3DF) al 22 %. Va literal, como los avisos de
     article.css, porque un token de color no se puede diluir sin
     color-mix: si algún día cambia el acento, esta línea cambia con él. */
  background:rgba(43,179,223,.22);
  color:inherit;
  border-radius:2px;
  padding:0 .08em;
}

@media (max-width:600px){
  .find-input{ font-size:1rem; padding:13px 44px 13px 46px; }
  .find-icon{ left:17px; }
}

/* ---------- W2 · El mapa ----------
   Ya no lista los treinta y dos nombres: eso lo hacen las cajas de más
   abajo, todas con su nombre a la vista. Aquí solo el reparto —tres
   áreas, tres líneas de trabajo cada una— y un salto a la que sea la
   tuya. Nueve destinos que se entienden de un vistazo.

   Tampoco tiene entrada propia: va dentro del hero, sin aire de sección
   por arriba. Lo que lo separa del titular es el margen de la propia
   rejilla.

   Por abajo sí se cierra, y con el aire de media sección: detrás iba la
   franja de prueba compacta, que traía su regla y su padding, y al
   retirarla el mapa se quedaba pegado al primer área. Ahora lo que las
   separa es aire, como en el resto del sitio. */
.impl-map{ padding-top:0; padding-bottom:clamp(40px,4.5vw,56px); }

.map{ margin-top:clamp(44px,5vw,68px); }

/* Aquí vivía la regla que cerraba la franja de prueba por arriba. La
   franja ya no está en esta página. */
.map-band + .map-band{ margin-top:clamp(36px,4vw,56px); }
.map-band-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin:0 0 20px; padding-bottom:14px;
  border-bottom:1px solid var(--ink);
  font-family:var(--font-mono); font-weight:500; font-size:.8125rem;
  letter-spacing:.12em; text-transform:uppercase;
}
.map-band-head a{ color:var(--ink); }
.map-band-head a:hover{ color:var(--point-ink); }
.map-band-head span{ color:var(--ink-3); font-variant-numeric:tabular-nums; }

.map-row{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:760px){ .map-row{ grid-template-columns:1fr 1fr; } }
@media (min-width:1060px){ .map-row{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,24px); } }

/* Cada línea de trabajo es un destino, así que se comporta como uno:
   caja entera clicable, con su número, su recuento y su flecha. */
.map-line{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:6px 14px; align-items:baseline;
  padding:20px 22px;
  border:1px solid var(--line);
  transition:border-color .18s ease, background .18s ease;
}
.map-line:hover{ border-color:var(--ink); background:var(--paper-raised); }
.map-line-num{
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em;
  color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.map-line-name{
  grid-column:2; color:var(--ink);
  font-size:1.0625rem; font-weight:600; line-height:1.35; text-wrap:balance;
}
.map-line-count{
  grid-column:2; font-family:var(--font-mono); font-size:.6875rem;
  letter-spacing:.08em; color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.map-line .arw{ grid-row:1; grid-column:3; color:var(--ink-3); }
.map-line:hover .arw{ color:var(--point-ink); }

/* Una línea sin casos con lo que hay escrito. Su ancla ya no está en
   la página, así que deja de comportarse como un destino: apagada, sin
   flecha viva y fuera del recorrido de teclado. No se quita —el mapa
   sigue diciendo cuántas áreas hay, que es su trabajo— y en cuanto se
   borra la búsqueda vuelve a ser el enlace de siempre. */
.map-line.is-empty{
  color:var(--ink-3); border-color:var(--line);
  cursor:default; opacity:.55;
}
.map-line.is-empty:hover{ border-color:var(--line); background:transparent; }
.map-line.is-empty .arw{ visibility:hidden; }

/* ---------- W3 y W4 · Las dos mitades ---------- */
.impl-half{ padding-top:calc(var(--sec) / 2); padding-bottom:calc(var(--sec) / 2); }
.impl-half-h2{ max-width:24ch; margin-top:20px; }

.family{
  margin-top:clamp(48px,6vw,88px);
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.family-head{ padding-bottom:20px; border-bottom:1px solid var(--ink); }
.family-name{
  margin:0;
  font-family:var(--font-mono); font-weight:500; font-size:.75rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
}
.family-text{
  margin:12px 0 0; max-width:60ch;
  font-size:1.0625rem; line-height:1.55; color:var(--ink-2);
}

/* ---------- El bloque de caso ----------
   Una caja por caso, con el lenguaje del bloque del día de trabajo:
   borde, papel levantado cuando está abierta, y el contenido dentro.

   Cerrada enseña el nombre y el problema, que es lo que se escanea.
   Abierta añade la respuesta. Treinta y dos bloques con seis líneas
   cada uno eran un muro donde todo pesaba igual. */
.case{
  margin-top:12px;
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.case details{
  border:1px solid var(--line);
  transition:border-color .18s ease, background .18s ease;
}
.case details:hover{ border-color:var(--ink-3); }
.case details[open]{ border-color:var(--ink); background:var(--paper-raised); }

.case summary{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:20px; align-items:start;
  padding:22px clamp(20px,2.5vw,28px);
  cursor:pointer; list-style:none;
}
.case summary::-webkit-details-marker{ display:none; }
.case summary:focus-visible{ outline:2px solid var(--point-ink); outline-offset:-2px; }

.case-sum{ display:block; min-width:0; }
.case-title{
  display:block;
  font-size:clamp(1.0625rem,1.4vw,1.25rem); font-weight:600; line-height:1.3;
  color:var(--ink);
}
/* El problema, a la vista siempre: es lo que el visitante busca, y
   esconderlo tras el clic haría la página inútil para quien escanea. */
.case-problem{
  display:block; margin-top:6px; max-width:64ch;
  font-size:.9375rem; line-height:1.5; color:var(--ink-2);
}

/* La marca de desplegar: un más que se convierte en menos. Dibujada con
   dos trazos, sin icono de librería. */
.case-mark{
  position:relative; display:block; width:16px; height:16px;
  margin-top:6px; flex:0 0 auto;
}
.case-mark::before,
.case-mark::after{
  content:""; position:absolute; left:50%; top:50%;
  background:var(--ink-2); transition:transform .2s ease, background .2s ease;
}
/* Kilo y medio de trazo, no uno: es un control, no una regla del
   sistema de diagramas, y a un píxel se pierde en pantallas escaladas. */
.case-mark::before{ width:14px; height:1.5px; transform:translate(-50%,-50%); }
.case-mark::after{ width:1.5px; height:14px; transform:translate(-50%,-50%); }
.case details[open] .case-mark::after{ transform:translate(-50%,-50%) scaleY(0); }
.case details[open] .case-mark::before{ background:var(--ink); }
.case summary:hover .case-mark::before,
.case summary:hover .case-mark::after{ background:var(--ink); }

.case-body{
  padding:20px clamp(20px,2.5vw,28px) 24px;
  border-top:1px solid var(--line);
}
/* La descripción: qué se implanta, en una línea, antes de los pasos. */
.case-desc{
  margin:0; font-size:1.0625rem; line-height:1.5; color:var(--ink); max-width:70ch;
}

/* El patrón de hoy → con la IA implantada viene de agency.css, que es
   donde vive desde que lo comparten las páginas de decisor y esta. Aquí
   solo se aprieta: la ficha es más estrecha que una sección entera. */
.day--card{ margin-top:22px; }
.day--card .day-heads{ margin-bottom:8px; }
.day--card .day-head{ padding:0 16px 10px; }
.day--card .day-before,
.day--card .day-after{ padding:11px 16px; font-size:.9375rem; }
.day--card .day-steps li:first-child .day-before{ padding-top:16px; }
.day--card .day-steps li:last-child  .day-before{ padding-bottom:16px; }
@media (min-width:820px){
  .day--card .day-heads,
  .day--card .day-steps li{ grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr); }
}
/* Dentro de la ficha el papel ya está levantado, así que la columna de
   hoy necesita hundirse un punto más para seguir separándose. */
.day--card .day-before{ background:var(--paper-sunk); }

.day-result--card{
  margin-top:24px; padding-top:20px;
  grid-template-columns:1fr; gap:20px;
}
@media (min-width:680px){
  .day-result--card{ grid-template-columns:minmax(0,14rem) minmax(0,1fr); gap:clamp(24px,3vw,48px); }
}
/* De cinco pasos a mano a dos: los dos números los cuentan las listas
   de arriba, así que no pueden contradecirlas. */
.day-result--card .day-fig-val{ margin-top:10px; }
/* «3 1» se leía como dos cifras sueltas: hace falta la flecha, y fuera
   del <s> para que no salga tachada ella también. */
.day-result--card .day-fig-val s{ font-size:.7em; margin-right:.45em; }
.day-result--card .day-fig-val em::before{
  content:"\2192"; margin-right:.45em; color:var(--ink-3); font-style:normal;
}
.day-result--card .day-fig-note{ margin-top:10px; font-size:1rem; }

/* El retorno medido. Sin <s> delante, así que tampoco lleva la flecha:
   aquí no hay un antes del que venir, hay una cifra sola. */
.day-fig--roi .day-fig-val em::before{ content:none; }
/* La columna de la izquierda está medida para "6 h → 30 min". Una cifra
   de retorno trae debajo la frase de qué mide y el cliente que la midió,
   y en catorce caracteres de ancho salía en tres líneas de tres
   palabras. */
@media (min-width:680px){
  .day-result--roi{ grid-template-columns:minmax(0,22rem) minmax(0,1fr); }
}
.day-fig-src{ margin:12px 0 0; font-size:.875rem; }
.day-fig-src a{
  color:var(--ink-2); text-decoration:none;
  border-bottom:1px solid var(--line);
}
.day-fig-src a:hover{ color:var(--point-ink); border-bottom-color:currentColor; }
.day-fig-src .arw{ color:var(--ink-3); }
.day-fig-src a:hover .arw{ color:var(--point-ink); }

/* Las siglas de plataforma enlazan a /ai-platform: allí es producto,
   aquí es la tarea que resuelve. */
.case-platform{
  display:inline-block; margin-left:.4em;
  padding:1px 7px; border:1px solid var(--line); border-radius:4px;
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.06em;
  color:var(--point-ink); vertical-align:.08em;
  transition:border-color .18s ease;
}
.case-platform:hover{ border-color:var(--point-ink); }

/* Etiqueta y valor en dos columnas: en una sola línea corrida, «lo usa»
   y «qué hace falta» se leían como parte de la solución. */
.case-meta{
  display:grid; grid-template-columns:1fr; gap:2px 20px;
  margin:22px 0 0;
}
@media (min-width:680px){
  .case-meta{ grid-template-columns:11rem minmax(0,1fr); gap:10px 24px; }
}
.case-meta dt{
  font-family:var(--font-mono); font-size:.6875rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  padding-top:2px;
}
.case-meta dd{
  margin:0 0 10px; font-size:.9375rem; line-height:1.55; color:var(--ink-2);
}
@media (min-width:680px){ .case-meta dd{ margin-bottom:0; } }

.case-service{
  margin:22px 0 0; padding-top:16px; border-top:1px solid var(--line);
}

/* Cada mitad cierra con un enlace al formulario del final, no con uno
   propio: tres formularios en una página eran dos de más. */
.impl-half-link{ margin-top:clamp(40px,5vw,64px); }

/* ---------- W5 · Qué hace falta ----------
   Va sobre panel oscuro, y es el único de la página. Pasaba
   desapercibida entre treinta y dos fichas de papel, y es la sección que
   responde de una vez la objeción que si no aparece treinta y dos veces.
   Un solo bloque negro al final es además el contrapunto rítmico que le
   faltaba a una página tan larga. */
.impl-needs{ padding-top:calc(var(--sec) / 2); padding-bottom:calc(var(--sec) / 2); }
.impl-needs-h2{ max-width:20ch; margin-top:20px; }

/* El patrón .leftovers es de papel: sobre panel hay que cambiarle las
   reglas y las tintas, no redibujarlo. */
.impl-needs .panel .leftovers{ border-top-color:var(--panel-line); }
.impl-needs .panel .leftovers .row{ border-bottom-color:var(--panel-line); }
.impl-needs .panel .leftovers .title{ color:var(--on-panel); }
.impl-needs .panel .leftovers p{ color:var(--on-panel-2); }

/* ---------- W7 · Cierre ---------- */
.impl-full-link{ margin-top:28px; }