/* =========================================================
   Justina · guía de estilo (solo para estilo.html)
   ========================================================= */

.guia {
  display: grid;
  /* minmax(0, …): si no, una tabla ancha estira la columna en vez de scrollear. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-8);
}

.guia .migas {
  margin-bottom: calc(var(--esp-8) * -1 + var(--esp-5));
}

.guia__cabeza {
  display: grid;
  gap: var(--esp-4);
}

.guia__titulo {
  font-family: var(--fuente-pixel);
  font-weight: 700;
  font-size: var(--texto-3xl);
  line-height: 1.1;
}

.guia__bajada {
  max-width: 68ch;
  font-size: var(--texto-l);
  color: var(--color-tinta-suave);
}

.guia__indice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

.guia__indice .chip {
  font-size: var(--texto-s);
  text-decoration: none;
}

.guia__indice .chip:hover {
  background: var(--color-superficie-alt);
}

.guia-seccion {
  scroll-margin-top: var(--esp-5);
}

.guia-seccion__nota {
  max-width: 68ch;
  margin-block: calc(var(--esp-3) * -1) var(--esp-5);
  color: var(--color-tinta-suave);
}

/* Principios */

.principios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--esp-4);
  padding: 0;
  list-style: none;
  counter-reset: principio;
}

.principios li {
  counter-increment: principio;
  position: relative;
  padding: var(--esp-4) var(--esp-4) var(--esp-4) var(--esp-7);
  background: var(--color-superficie);
  border: var(--trazo-fino) solid var(--color-trazo);
  border-radius: var(--radio-m);
}

.principios li::before {
  content: counter(principio);
  position: absolute;
  top: var(--esp-4);
  left: var(--esp-4);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-family: var(--fuente-pixel);
  font-weight: 700;
  font-size: var(--texto-s);
  color: var(--color-pestana-tinta);
  background: var(--color-pestana);
  border-radius: var(--radio-s);
}

.principios strong {
  display: block;
  font-weight: 900;
}

/* Tablas de la guía */

.tabla-guia {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-superficie);
  border: var(--trazo-fino) solid var(--color-trazo);
  border-radius: var(--radio-m);
}

.tabla-guia th,
.tabla-guia td {
  padding: var(--esp-3) var(--esp-4);
  text-align: left;
  vertical-align: middle;
  border-bottom: var(--trazo-fino) solid var(--color-separador);
}

.tabla-guia th {
  font-family: var(--fuente-pixel);
  font-weight: 700;
  font-size: var(--texto-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-tinta-suave);
}

.tabla-guia tr:last-child td {
  border-bottom: 0;
}

/* Color */

#muestras-color {
  display: grid;
  gap: var(--esp-6);
}

.grupo-color__titulo {
  margin-bottom: var(--esp-3);
  font-weight: 900;
}

.muestras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--esp-3);
}

.muestra {
  display: grid;
  overflow: hidden;
  background: var(--color-superficie);
  border: var(--trazo-fino) solid var(--color-trazo);
  border-radius: var(--radio-m);
}

.muestra__color {
  height: 56px;
  border-bottom: var(--trazo-fino) solid var(--color-trazo);
}

.muestra__info {
  display: grid;
  gap: 2px;
  padding: var(--esp-2) var(--esp-3);
  font-size: var(--texto-xs);
  color: var(--color-tinta-suave);
}

.muestra__info code {
  padding: 0;
  background: none;
  color: var(--color-tinta);
  font-weight: 700;
}

/* Tipografía */

.tipografias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--esp-4);
}

.tipografia {
  display: grid;
  gap: var(--esp-2);
  padding: var(--esp-5);
  background: var(--color-superficie);
  border: var(--trazo-fino) solid var(--color-trazo);
  border-radius: var(--radio-m);
}

.tipografia__rotulo {
  font-size: var(--texto-s);
  color: var(--color-tinta-suave);
}

.tipografia__muestra {
  font-size: var(--texto-3xl);
  font-weight: 700;
  line-height: 1.1;
}

.tipografia__muestra--texto {
  font-weight: 900;
}

/* Íconos */

.iconos-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--esp-3);
}

.icono-muestra {
  display: grid;
  justify-items: center;
  gap: var(--esp-2);
  padding: var(--esp-4) var(--esp-2) var(--esp-3);
  font-size: 32px;
  color: var(--color-acento-texto);
  background: var(--color-superficie);
  border: var(--trazo-fino) solid var(--color-trazo);
  border-radius: var(--radio-m);
}

.icono-muestra code {
  font-size: var(--texto-xs);
  color: var(--color-tinta);
}

/* Componentes */

.componentes {
  display: grid;
  gap: var(--esp-6);
}

.componente {
  display: grid;
  gap: var(--esp-4);
  padding: var(--esp-5);
  background: color-mix(in srgb, var(--color-superficie) 60%, transparent);
  border: var(--trazo-fino) dashed var(--color-trazo);
  border-radius: var(--radio-l);
}

.componente__cabeza {
  display: grid;
  gap: var(--esp-1);
  max-width: 72ch;
}

.componente__titulo {
  font-family: var(--fuente-pixel);
  font-weight: 700;
  font-size: var(--texto-l);
}

.componente__codigo {
  font-size: var(--texto-s);
}

.componente__uso {
  color: var(--color-tinta-suave);
}

.componente__ejemplos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-5);
  align-items: flex-start;
}

.componente__ejemplos > .grilla-tarjetas {
  flex: 1 1 100%;
}

.ejemplo {
  display: grid;
  gap: var(--esp-2);
  margin: 0;
  min-width: 180px;
}

.ejemplo--ancho {
  flex: 1 1 100%;
}

.ejemplo__rotulo {
  font-family: var(--fuente-pixel);
  font-size: var(--texto-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-tinta-suave);
}

.ejemplo__lienzo > .panel {
  margin-top: var(--esp-4);
}

.ejemplo__habitat {
  padding: var(--esp-4) var(--esp-5) var(--esp-3);
  border: var(--trazo-fino) solid var(--color-trazo);
  border-radius: var(--radio-m);
}

/* Marca */

.logo-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--esp-4);
}

.logo-muestra {
  display: grid;
  gap: var(--esp-3);
  margin: 0;
  padding: var(--esp-5);
  background: var(--color-superficie);
  border: var(--trazo-fino) solid var(--color-trazo);
  border-radius: var(--radio-m);
}

.logo-muestra__tamanos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--esp-4);
}

/* Las esquinas del ícono son las del sistema: 114 de 512. */
.logo-muestra__tamanos img[src$="justina.svg"],
.logo-muestra__tamanos img[src$=".png"] {
  border-radius: 22.3%;
}

.logo-muestra figcaption {
  font-size: var(--texto-s);
  color: var(--color-tinta-suave);
}