/* ==========================================================================
   La Cumbre - manual.css
   Solo para manual-de-identidad.html.

   Nota de tema: la página completa es oscura, como el resto del sitio. Las
   fichas de especimen sí muestran fondo claro, porque un manual tiene que
   demostrar que la marca funciona sobre papel. Son piezas acotadas y
   etiquetadas, no secciones invertidas.
   ========================================================================== */

.spec {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: var(--sp-5);
}

@media (min-width: 720px) {
  .spec--2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Ficha de especimen ------------------------------------------------------ */

.plate {
  display: grid;
  gap: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  overflow: hidden;
}

.plate__stage {
  display: grid;
  place-items: center;
  min-height: 13rem;
  padding: var(--sp-6) var(--sp-5);
  background: var(--ink-900);
}

.plate__stage--paper {
  background: #edeae0;
}

.plate__stage--photo {
  position: relative;
  background-size: cover;
  background-position: center;
}

.plate__stage--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(11, 16, 12, 0.55);
}

.plate__stage--photo > * {
  position: relative;
}

.plate__stage--niebla {
  background-image: url('../img/niebla-canada-800.jpg');
}

/* Fondo claro y ocupado a propósito: es el ejemplo de lo que NO se debe hacer. */
.usage__stage--foto {
  background-image: url('../img/camino-encinos-480.jpg');
  background-size: cover;
  background-position: center;
}

.plate__stage img,
.plate__stage svg {
  max-width: 100%;
  height: auto;
}

.plate__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border-top: 1px solid var(--line-strong);
  background: var(--ink-950);
  font-size: var(--fs-xs);
  color: var(--bone-mute);
}

.plate__foot b {
  color: var(--bone);
  font-weight: 500;
  font-size: var(--fs-sm);
}

/* Área de seguridad y tamaño mínimo --------------------------------------- */

.clearspace {
  position: relative;
  padding: 2.25rem;
  outline: 1px dashed rgba(200, 165, 82, 0.55);
  outline-offset: -1px;
}

.clearspace__inner {
  outline: 1px solid rgba(237, 234, 224, 0.28);
  outline-offset: 0;
}

.sizes {
  display: flex;
  align-items: flex-end;
  gap: 2.25rem;
  flex-wrap: wrap;
}

.sizes figure {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  margin: 0;
}

.sizes figcaption {
  font-size: var(--fs-xs);
  color: var(--bone-mute);
  font-variant-numeric: tabular-nums;
}

.mark {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: miter;
  stroke-miterlimit: 10;
}

.mark--ink {
  stroke: var(--ink-950);
}

.mark--bone {
  stroke: var(--bone);
}

/* Muestras de color ------------------------------------------------------- */

.swatches {
  display: grid;
  gap: 0.75rem;
  margin-top: var(--sp-5);
}

@media (min-width: 640px) {
  .swatches {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .swatches {
    grid-template-columns: repeat(4, 1fr);
  }
}

.swatch {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  overflow: hidden;
}

.swatch__chip {
  height: 6.5rem;
}

/* Muestras de la paleta. Son los únicos literales de color fuera de
   tokens.css, y existen porque aquí el color es el contenido. */
.swatch__chip--ink { background: #0b100c; }
.swatch__chip--surface { background: #1a231a; }
.swatch__chip--accent { background: #c8a552; }
.swatch__chip--bone { background: #edeae0; }
.swatch__chip--dim { background: #b9beb0; }
.swatch__chip--mute { background: #8d948a; }
.swatch__chip--wood { background: #6b4a32; }
.swatch__chip--danger { background: #e8836a; }

.swatch__meta {
  padding: 0.85rem 1rem;
  background: var(--ink-900);
}

.swatch__meta b {
  display: block;
  font-weight: 500;
  font-size: var(--fs-sm);
}

.swatch__meta code {
  display: block;
  margin-top: 0.2rem;
  font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
  font-size: var(--fs-xs);
  color: var(--accent);
  letter-spacing: 0.02em;
}

.swatch__meta span {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--fs-xs);
  color: var(--bone-mute);
}

/* Tipografía -------------------------------------------------------------- */

.typeblock {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--ink-900);
}

.typeblock__sample {
  margin-bottom: 1.1rem;
  line-height: 1.05;
}

.typeblock__sample--display {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: -0.03em;
}

.typeblock__sample--body {
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.typeblock dl {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.typeblock dl > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--fs-sm);
}

.typeblock dt {
  color: var(--bone-mute);
}

.typeblock dd {
  margin: 0;
  color: var(--bone);
  text-align: right;
}

/* Uso correcto e incorrecto ----------------------------------------------- */

.usage {
  display: grid;
  gap: 0.75rem;
  margin-top: var(--sp-5);
}

@media (min-width: 640px) {
  .usage {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .usage {
    grid-template-columns: repeat(3, 1fr);
  }
}

.usage__item {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  overflow: hidden;
}

.usage__stage {
  display: grid;
  place-items: center;
  min-height: 9rem;
  padding: var(--sp-5);
  background: var(--ink-900);
}

.usage__note {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.6rem;
  align-items: start;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--line-strong);
  font-size: var(--fs-xs);
  color: var(--bone-dim);
}

.usage__note .icon {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1rem;
}

.usage__item[data-ok='true'] .icon {
  color: var(--accent);
}

.usage__item[data-ok='false'] .icon {
  color: var(--danger);
}

/* Deformaciones de ejemplo. Se aplican solo dentro de las fichas de uso
   incorrecto: nunca al logotipo real. */
.demo-stretch {
  transform: scaleX(1.45);
}

.demo-rotate {
  transform: rotate(-14deg);
}

.demo-tight {
  outline: 1px dashed rgba(232, 131, 106, 0.6);
  outline-offset: 2px;
}

/* Descargas --------------------------------------------------------------- */

.files {
  display: grid;
  gap: 0;
  margin-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

.files a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0.25rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--bone-dim);
  text-decoration: none;
}

.files a > span {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
}

.files a code {
  font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
  font-size: var(--fs-xs);
  color: var(--bone-mute);
}

.files a .icon {
  color: var(--accent);
}

@media (hover: hover) and (pointer: fine) {
  .files a:hover {
    color: var(--accent);
  }
}