/* ==========================================================================
   Escuelas y oficinas v5: la cuadricula de equipos junto a la escala de cantidad (tarjeta blanca) y la
   ficha por tipo de institucion (texto + tabla de espacios en una tarjeta). Todo con los tokens de base.css.
   ========================================================================== */
.esc-qty { display: grid; gap: var(--sp-8); align-items: center; text-align: left; }
@media (min-width: 960px) { .esc-qty { grid-template-columns: auto minmax(0, 1fr); padding: 40px; gap: clamp(40px, 16px + 4vw, 96px); } }

/* Cuadricula de equipos (10 x 12 = 120 casillas, cada renglon son 10 equipos). Al pasar el mouse o el foco por
   un rango, se llena hasta su cantidad: 20, 50, 100 o todas (mas de 100). La arma escuelas-y-oficinas.js;
   sin JS no se muestra. El relleno entra con scale (se apaga con movimiento reducido). */
.units { display: grid; grid-template-columns: repeat(10, var(--u)); gap: var(--ug); width: max-content; margin-inline: auto; --u: clamp(12px, 8px + .55vw, 18px); --ug: clamp(5px, 3px + .3vw, 8px); }
.units__cell { position: relative; width: var(--u); aspect-ratio: 1; border: 1px solid var(--ash); border-radius: var(--r-pill); }
.units__cell::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--r-pill);
  background: var(--black);
  transform: scale(0);
  transition: transform .34s var(--ease-p4) var(--d, 0ms);
}
.units__cell.is-on::before { transform: none; }
.no-js .units { display: none; }

/* Ficha por tipo de institucion: el texto y la tabla de espacios en una tarjeta sobre oscuro */
.emp-ficha { display: grid; gap: var(--sp-7) clamp(32px, 16px + 4vw, 80px); padding: 32px; border: 1px solid var(--hair); border-radius: var(--r-card); text-align: left; }
@media (min-width: 960px) { .emp-ficha { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; } }
@media (max-width: 759px) { .emp-ficha { padding: 22px; } }
.emp-ficha__intro > * + * { margin-top: var(--sp-4); }
.emp-ficha__intro h3 { font-size: var(--fs-26); letter-spacing: var(--tr-26); line-height: 1.15; }
.emp-ficha__intro p { color: var(--ash); }