/* ============================================================
   PLEASEPOINT 2026 — CASOS
   La entrada, la franja de índice, el ritmo entre bloques y
   los remates propios de esta página. La tarjeta vive en
   agency.css: la comparte con S7 de la home y no puede haber
   dos versiones.
   ============================================================ */

/* ---------- C1 · Entrada ----------
   Primera sección: se aparta de la cabecera fija con el mismo aire que
   el hero del resto del sitio, y en la misma caja de texto. Solo las
   parrillas de tarjetas se van a sangre; todo lo que se lee —entrada,
   titulares de bloque, pie de bloque y cierre— arranca en el mismo
   borde izquierdo, y así la página se lee como una sola columna.

   El padding de abajo es cero: debajo va la franja de índice, y las dos
   son la misma entrada. Con los dos paddings quedaba un hueco que hacía
   parecer el índice una sección suelta. */
.cases-intro{ padding-top:clamp(140px,16vh,200px); padding-bottom:0; }
.cases-intro h1{ max-width:18ch; margin-top:20px; }
.cases-intro-text{ margin-top:32px; }

/* ---------- C2 · El índice ----------
   Franja propia, entre dos reglas hairline. Es el reparto de la página
   —cuatro cosas distintas, no cuatro filtros del mismo listado— y como
   línea mono colgando del párrafo de entrada no se leía como tal.

   Mismo lenguaje que el mapa del catálogo: número, nombre y recuento.
   Sin caja alrededor de cada línea, que aquí son cuatro y no seis, y con
   borde parecerían tarjetas justo encima de las tarjetas de verdad. */
/* Arriba, poco: el índice es la segunda mitad de la entrada y con 72 px
   se despegaba del párrafo que lo presenta. Abajo, el aire de media
   sección, porque detrás ya no viene una parrilla sino el separador, y
   el salto al primer bloque tiene que medir lo mismo que los otros. */
.case-index{ padding-top:clamp(28px,3.5vw,44px); padding-bottom:calc(var(--sec) / 2); }

.case-index-label{ padding-bottom:18px; border-bottom:1px solid var(--ink); }

.case-index-row{
  display:grid; grid-template-columns:1fr;
  border-bottom:1px solid var(--line);
}
@media (min-width:600px){ .case-index-row{ grid-template-columns:1fr 1fr; } }
@media (min-width:900px){ .case-index-row{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.case-index-line{
  display:block; padding:clamp(20px,2.5vw,28px) 0;
  color:inherit;
  border-top:1px solid var(--line);
}
/* La primera línea no la lleva: justo encima está la regla de la
   etiqueta y las dos juntas se ven como un trazo doble. */
.case-index-line:first-child{ border-top:0; }

/* Y en cuatro columnas no la lleva ninguna: solo hay una fila, así que
   la regla no separaría nada y competiría con la de la etiqueta. */
@media (min-width:900px){
  .case-index-line{ border-top:0; padding-right:24px; }
}

.case-index-num{
  display:block; margin-bottom:10px;
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em;
  color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.case-index-name{ display:block; transition:color .18s ease; }
.case-index-line:hover .case-index-name{ color:var(--point-ink); }
.case-index-count{
  display:block; margin-top:8px;
  font-family:var(--font-mono); font-size:.75rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}

/* ---------- C3 · Los cuatro bloques ----------
   El separador ya pone el aire entre bloques, así que aquí el padding es
   la mitad del de una sección suelta: con los dos enteros los bloques se
   despegaban tanto que la página dejaba de leerse como una lista.

   Y el ancla se aparta de la cabecera fija, o el índice deja el titular
   del bloque debajo de ella. */
.case-block{
  padding-top:calc(var(--sec) / 2); padding-bottom:calc(var(--sec) / 2);
  scroll-margin-top:calc(var(--header-h) + 24px);
}

.case-block-h2{ margin:18px 0 0; max-width:16ch; }
.case-block-text{ margin:20px 0 0; }

/* Tres columnas, no dos.
   Es la única regla de esta hoja que redefine algo de la tarjeta, y va
   acotada a .case-block para que S7 de la home siga en dos: allí hay
   cuatro tarjetas y en tres columnas quedaría una sola en la fila de
   abajo. Aquí los bloques son de seis, seis, tres y seis, así que tres
   columnas los cierran en filas completas o casi.

   Por debajo de 1000 px se queda en las dos de la parrilla compartida, y
   por debajo de 760 en una: a tres, la portada se hace demasiado pequeña
   para lo que tiene que enseñar. */
@media (min-width:1000px){
  .case-block .cases{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ---------- El pie de bloque ----------
   Los badges de AWS en la plataforma, el enlace al producto en los dos
   propios, nada en el de clientes. Badges y enlace en la misma línea
   cuando caben: son la misma frase —esto lo ha validado AWS, y aquí se
   ve— y en dos bloques separados el enlace quedaba huérfano. */
.block-foot{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:24px clamp(24px,4vw,56px);
  margin-top:clamp(40px,5vw,56px);
}
.block-badges{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; }
/* Misma altura que en proof-strip: son los mismos tres badges y en dos
   tamaños distintos se leerían como dos cosas distintas. */
.block-badges img{ display:block; width:auto; height:76px; }
.block-foot-link{ margin:0; }

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

/* ---------- C5 · Preguntas ----------
   Van detrás del formulario, así que no necesitan el aire de arriba de
   una sección que abre: el cierre ya lo ha puesto. */
#c5{ padding-top:0; }
.case-faq-h2{ margin-top:20px; max-width:15ch; }

@media (max-width:640px){
  .block-badges img{ height:60px; }
}