/* ══ B3 · LA REJILLA DE RECONOCIMIENTO · calco de las capturas 18 y 19 ══════
   No es una versión libre: cada medida sale de medir la captura de Héctor
   píxel a píxel. La unidad --u es UN píxel de esa captura.
   Su frase: «quiero que literalmente copies el bloque de recognition al
   milímetro, bro. Te lo juro.»
   Detalle de cada medida: cuerpo-2/clientes-resultados/DECISIONES.md
   ═══════════════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────────────────────
   LA UNIDAD. En la captura la rejilla mide 1503 px de ancho (de x 208 a x 1711)
   dentro de una ventana de 1920. --u es UN píxel de esa captura.
   ─────────────────────────────────────────────────────────────────────────── */
.rec{
  --G: min(1503px, calc(100vw - 2 * clamp(18px, 4vw, 208.5px)));
  --u: calc(var(--G) / 1503);

  --fila:   calc(var(--u) * 224);   /* alto de fila medido */
  --p:      calc(var(--u) * 37);    /* padding de celda medido (rótulo a +38) */
  --p-cita: calc(var(--u) * 79);    /* sangrado de la columna de citas */

  --f-marco:  var(--filete-azul-fuerte);
  --f-dentro: var(--filete-azul);

  position:relative;
  overflow-x:clip;
  padding-block:calc(var(--u) * 120);
}
/* La trama diagonal finísima del fondo de la captura: 12,7 px de periodo EN X,
   a 45°, amplitud 4/255. Las paradas van sobre el eje del degradado, que está
   girado 45°: para que el periodo en x sea 12,7 la parada tiene que valer
   12,7/√2 = 9. Con 18 salían 25,5 px, la mitad de rayas. */
.rec::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg,
    transparent 0 calc(var(--u) * 8), var(--lavado-trama) calc(var(--u) * 8) calc(var(--u) * 9));
}
.rec > *{position:relative}
.rec-caja{width:var(--G);margin-inline:auto}

/* ── CABECERA. Los tres elementos centrados sobre el eje de la rejilla ─────
   Medido: medalla 50×67 · hueco 36 · rótulo 12 px mono cap 9 · hueco 27 ·
   titular serif 50/54 a dos líneas · hueco 69 hasta el marco.            */
.rec-cabecera{text-align:center;display:flex;flex-direction:column;align-items:center}
/* La medalla de la captura es vertical y densa (49×67, 2201 u² de tinta). El
   logotipo de la casa es apaisado: para recuperar la mancha y la altura del
   bloque de cabecera se sube a 132 u de ancho → 60 u de alto, 1725 u². */
.rec-medalla{
  height:auto;width:calc(var(--u) * 132);
  display:flex;align-items:center;justify-content:center;color:var(--tinta-clara);
}
.rec-medalla svg{width:100%;height:auto;display:block}
.rec-rotulo-cab{
  max-width:none;font-family:var(--mono);font-weight:500;
  font-size:max(11px, calc(var(--u) * 12));
  line-height:1.2;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-clara-2);
  margin-top:calc(var(--u) * 34);
}
.rec-titular{
  font-family:var(--serif);font-weight:400;font-stretch:normal;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 96,'wght' 400;
  font-size:max(30px, calc(var(--u) * 50));
  line-height:1.08;letter-spacing:-.005em;
  color:var(--tinta-clara);
  margin-top:calc(var(--u) * 15);
  text-wrap:balance;
}
.rec-cabecera{margin-bottom:calc(var(--u) * 59)}

/* ── LA REJILLA. Tres columnas iguales de 501 px. Marco de 1 px, filetes
      interiores de 1 px. Ni esquina redondeada ni sombra: ninguna.  ─────── */
.rec-rejilla{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--f-marco);
}
.rec-sellos,.rec-cifras{border-left:1px solid var(--f-dentro)}
.rec-sellos,.rec-cifras{display:grid;grid-template-rows:repeat(4,var(--fila))}
.rec-sellos > * + *,.rec-cifras > * + *{border-top:1px solid var(--f-dentro)}

/* ── COLUMNA IZQUIERDA · las citas ────────────────────────────────────────
   Tres bloques a un tercio de la altura cada uno, con filete de 1 px entre
   ellos metido 41 px por cada lado (medido: de x 249 a x 668).            */
/* En la captura el filete cae 17 px por encima del tercio exacto: 280/299/314. */
.rec-citas{display:grid;grid-template-rows:280fr 299fr 314fr}
.rec-cita{
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--u) * 20) var(--p-cita);
  margin:0;
}
/* el filete de las citas va metido 41 px por cada lado: se dibuja con un
   pseudo, no con el borde de la celda, para poder sangrarlo como la captura */
.rec-cita + .rec-cita::before{
  content:"";position:absolute;top:0;left:calc(var(--u) * 41);right:calc(var(--u) * 41);
  height:1px;background:var(--f-dentro);
}
.rec-cita{position:relative}
.rec-cita blockquote{margin:0}
.rec-cita p{
  font-size:max(14px, calc(var(--u) * 16));
  line-height:1.5;color:var(--tinta-clara);
  max-width:calc(var(--u) * 343);   /* la medida de la captura */
  margin:0;text-wrap:pretty;
}
/* La firma de la captura mide 42 u de alto y arranca con un redondel de 36 u:
   foto a la izquierda, nombre y cargo sangrados a su derecha. No hay foto de
   ninguno de los quince firmantes (van con permiso), así que el redondel lleva
   las iniciales del firmante —que está nombrado a dos centímetros— con el
   mismo filete de la rejilla. El hueco se ocupa; no se deja vacío. */
.rec-firma{
  margin-top:calc(var(--u) * 26);
  display:flex;align-items:center;gap:calc(var(--u) * 13);
  min-height:calc(var(--u) * 42);font-style:normal;
}
.rec-monograma{
  flex:0 0 auto;
  width:calc(var(--u) * 36);height:calc(var(--u) * 36);
  border:1px solid var(--f-dentro);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:500;
  font-size:max(11px, calc(var(--u) * 12));letter-spacing:.06em;
  color:var(--tinta-clara-2);
}
.rec-firma-texto{display:block;min-width:0}
.rec-nombre{
  display:block;font-weight:600;
  font-size:max(13px, calc(var(--u) * 14));
  line-height:calc(var(--u) * 18);color:var(--tinta-clara);
}
.rec-cargo{
  display:block;
  font-size:max(12px, calc(var(--u) * 13));
  line-height:calc(var(--u) * 18);color:var(--tinta-clara-2);
}

/* ── COLUMNA CENTRAL · los clientes ───────────────────────────────────────
   Medido en la captura: rótulo a +42 del borde de celda, marca a +70 y
   línea a +113. Contenido arrimado arriba, nunca centrado.               */
/* El fondo de la captura NO es plano: página 22/255, columna central 23/255 y
   columna de cifras 26→29/255 con degradado vertical. Ese medio tono es lo que
   hace que la columna de resultados brille. Se calca con un lavado de hueso. */
.rec-sello,.rec-cifra{padding:var(--p);display:block}
.rec-sello{background:var(--lavado-1)}
.rec-cifra{background:linear-gradient(var(--lavado-3), var(--lavado-2))}
.rec-rot{
  max-width:none;font-family:var(--mono);font-weight:500;
  font-size:max(9px, calc(var(--u) * 10));
  line-height:1.2;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tinta-clara-2);margin:0;
}
/* La banda de tinta de los cuatro logotipos de la captura mide 20 / 23 / 23 /
   23 u. La caja recorta a 23 y cada img se coloca con --h/--t/--l para que su
   tinta VISIBLE caiga justo ahí (y para dejar fuera los renglones de bajada:
   la captura sólo lleva wordmarks de una línea). Banda arriba a +69. */
.rec-logo{
  position:relative;overflow:hidden;
  height:calc(var(--u) * 23);
  margin-top:calc(var(--u) * 20);
}
.rec-logo img{
  position:absolute;top:calc(var(--u) * var(--t));left:calc(var(--u) * var(--l));
  height:calc(var(--u) * var(--h));width:auto;max-width:none;
}
/* En la captura tres de los cuatro sellos llevan el color de su marca y sólo
   uno va en blanco: la columna tiene un pulso de color. Aquí igual. El color
   se sube a la luminancia del fondo oscuro (invertir y devolver el tono), que
   es lo que hace la casa con su propio rojo (--rojo-azul). */
.rec-logo--blanco img{filter:brightness(0) invert(1)}
.rec-logo--color img{filter:invert(1) hue-rotate(180deg) saturate(1.3) brightness(.94)}
.rec-linea{
  font-size:max(13px, calc(var(--u) * 14));
  line-height:1.5;color:var(--tinta-clara-2);
  margin:calc(var(--u) * 16) 0 0;max-width:calc(var(--u) * 400);
}

/* ── COLUMNA DERECHA · las cifras ─────────────────────────────────────────
   Medido: rótulo a +42, cifra a +75 (alto de dígito 37, o sea 51 px de cuerpo),
   métrica a +136, marca a +166. El contraste rótulo/cifra es de 1 a 5.   */
.rec-numero{
  max-width:none;font-family:var(--serif);font-weight:400;font-stretch:normal;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 96,'wght' 400;
  font-variant-numeric:tabular-nums;
  font-size:max(32px, calc(var(--u) * 51));
  line-height:1;letter-spacing:.015em;color:var(--tinta-clara);
  margin:calc(var(--u) * 15) 0 0;
}
.rec-metrica{
  max-width:none;font-family:var(--mono);font-weight:500;
  font-size:max(9px, calc(var(--u) * 10));
  line-height:1.2;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tinta-clara-2);margin:calc(var(--u) * 16) 0 0;
}
/* En la captura la marca del cliente es lo MÁS CALLADO de la celda: un logo
   pequeño de 700-900 u² de tinta, siempre por debajo de la cifra. Aquí va en
   texto (no hay logo de estos tres en el repositorio), pero con el peso óptico
   de un logo pequeño: 16 u, peso 500, tracking abierto. Nunca en negrita. */
.rec-marca{
  max-width:none;font-weight:500;font-stretch:100%;
  font-size:max(12px, calc(var(--u) * 16));
  line-height:1.15;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-clara);margin:calc(var(--u) * 17) 0 0;
}

/* ── LA CELDA BLANCA. Rompe la rejilla oscura abajo a la derecha.
      Contenido centrado en vertical, arrimado a la izquierda a 40 px.
      Sin flecha: la flecha está prohibida en esta casa.                  */
.rec-llamada{
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--p);text-decoration:none;
  background:var(--papel);color:var(--tinta);
}
.rec-llamada-p{
  font-size:max(11px, calc(var(--u) * 12));line-height:1.4;color:var(--tinta-2);
}
.rec-llamada-cta{
  font-family:var(--serif);font-weight:400;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 60,'wght' 400;
  font-size:max(20px, calc(var(--u) * 28));
  line-height:1.15;color:var(--tinta);
  margin-top:calc(var(--u) * 8);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;
  text-decoration-color:transparent;
  transition:color var(--corto) var(--curva), text-decoration-color var(--corto) var(--curva);
}
/* La celda blanca de la captura sólo tiene dos tonos: papel y tinta. El rojo
   de la casa se guarda para el hover, no para el reposo. */
.rec-llamada:hover .rec-llamada-cta,
.rec-llamada:focus-visible .rec-llamada-cta{color:var(--rojo-papel);text-decoration-color:currentColor}
.rec-llamada:focus-visible{outline:2px solid var(--rojo-papel);outline-offset:-4px}

/* ── Revelado. Sin JavaScript no se esconde nada: la clase la pone el JS. */
.rec-js .rec-vela{opacity:0;transform:translateY(calc(var(--u) * 18))}
.rec-js .rec-vela.rec-on{opacity:1;transform:none;
  transition:opacity var(--lento) var(--curva-seca), transform var(--lento) var(--curva-seca)}
@media (prefers-reduced-motion:reduce){
  .rec-js .rec-vela{opacity:1;transform:none;transition:none}
}

/* ── Pantalla estrecha. La retícula de tres columnas no cabe: se apila en
      una, conservando filetes, rótulos y jerarquía.                      */
@media (max-width:900px){
  .rec{--G: calc(100vw - 2 * clamp(18px, 5vw, 40px)); --u:1px;
       --fila:auto; --p:26px; --p-cita:26px; padding-block:64px}
  .rec-rejilla{grid-template-columns:1fr}
  .rec-sellos,.rec-cifras{grid-template-rows:none;border-left:0;border-top:1px solid var(--f-dentro)}
  .rec-sello,.rec-cifra,.rec-llamada{padding:26px}
  .rec-cita{padding:26px}
  .rec-cita + .rec-cita::before{left:26px;right:26px}
  .rec-cita p,.rec-linea{max-width:none}
  .rec-citas{grid-template-rows:none}
  .rec-titular{font-size:clamp(30px,8.4vw,46px)}
  .rec-numero{font-size:clamp(38px,11vw,51px)}
  .rec-llamada{min-height:150px}
}