/* ============================================================================
   HOTEL AVENIDA — kit de interfaz (página de muestra)
   v1 · 2026-09-07

   NO PORTABLE. Es el andamio de la página que muestra los componentes.
   Los componentes en sí están en componentes.css, que sí se lleva.
   ========================================================================= */

.kit { background: var(--azul-tenue); border-top: 4px solid var(--azul); min-height: 100vh; }

.kit__nota { max-width: 62ch; margin-bottom: var(--s6); }

.kit__bloque {
  background: var(--blanco);
  border: var(--borde) solid var(--linea);
  border-radius: var(--r-placa);
  padding: var(--s5);
  margin-bottom: var(--s4);
}
.kit__bloque > h3 {
  font-family: var(--texto);
  font-weight: 700;
  font-size: var(--t-md);
  color: var(--gris);
  margin-bottom: var(--s4);
}
.kit__bloque > h3 + .kit__sub { margin-top: calc(var(--s4) * -1 + var(--s2)); }

.kit__sub { font-size: var(--t-sm); color: var(--gris); margin-bottom: var(--s4); max-width: 62ch; }

.kit__fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s4); }

.kit__volver { font-size: var(--t-sm); font-weight: 600; text-underline-offset: 3px; }


/* --- muestras de color ---------------------------------------------------- */

.muestras { display: flex; flex-wrap: wrap; gap: var(--s3); }

.muestra { width: 116px; }
.muestra__c { height: 56px; border-radius: var(--r-placa); border: var(--borde) solid rgba(0, 0, 0, .12); }
.muestra__n { font-size: 12px; color: var(--gris); margin-top: 6px; line-height: 1.4; }
.muestra__n b { display: block; font-size: var(--t-xs); color: var(--tinta); }


/* --- muestras de tipografía ----------------------------------------------- */

.tipo { border-top: var(--borde) solid var(--linea); padding-block: var(--s3); }
.tipo:first-of-type { border-top: none; }
.tipo__et { font-size: 12px; color: var(--gris); margin-bottom: var(--s1); }