/* ==========================================================================
   Olevior — páginas de la empresa
   Nosotros, Manifiesto, Contacto, Olevior Chat, 404 y la entrada por idioma.
   Solo agrega lo que site.css no trae: los tokens, la retícula y los
   componentes son los del sistema.
   ========================================================================== */

/* ---------- Marcador: 40 px de área táctil sin cambiar su tamaño ---------- */

.ref { position: relative; }
/* La última palabra y su marcador viajan juntos: el número nunca abre renglón. */
.ref-keep { white-space: nowrap; }


/* ---------- Puertas sin marca (404 y entrada por idioma) ---------------- */

.doors--plain .door { grid-template-columns: minmax(0, 1fr) auto; min-height: 68px; }


/* ---------- Nosotros: la ficha de la empresa ----------------------------- */

.ficha__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
}
.ficha__head img { width: 40px; height: 40px; flex: none; }
.ficha__name { display: grid; gap: 1px; line-height: 1.3; }
.ficha__name strong { font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.ficha__name span { font-size: 0.875rem; color: var(--text-3); }

/* Dentro de la placa la última fila no lleva filete: el borde de la placa
   ya cierra la lista. */
.exhibit .facts > div:last-child { border-bottom: 0; }
.exhibit--ficha .exhibit__plate { padding-bottom: 10px; }
.facts a {
  padding-block: 9px;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-2);
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--dur-ui) ease;
}
@media (hover: hover) and (pointer: fine) {
  .facts a:hover { text-decoration-color: currentColor; }
}

/* Cómo opera, qué construye, dónde está: filas con la gramática de los
   principios de la portada, con h2 porque son secciones de la página. */
.about-body .principle h2 { font-size: var(--t-h3); line-height: 1.3; text-wrap: balance; hyphens: auto; letter-spacing: -0.016em; }
.about-next .actions { margin-top: 24px; }


/* ---------- Manifiesto --------------------------------------------------- */

.manifesto { padding-bottom: var(--section); }
/* La lectura larga del sitio: un punto más de cuerpo y una medida de
   unos 70 caracteres por línea. */
.manifesto__chapter { max-width: 58ch; }
.manifesto__chapter p { font-size: 1.125rem; }
.manifesto__chapter + .manifesto__chapter { margin-top: clamp(48px, 5vw, 72px); }

.manifesto__end {
  margin-top: clamp(40px, 4vw, 56px);
  max-width: 62ch;
  display: grid;
  gap: 22px;
  justify-items: start;
}
.manifesto__sign { font-weight: 500; color: var(--text); }
.manifesto__note {
  max-width: 52ch;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--text-3);
}

/* En móvil el índice abre la lectura y la prueba de VOZ sigue al capítulo
   que la cita, no al principio. Solo se reordena lo que se ve. */
@media (max-width: 1023px) {
  .manifesto .reading__body,
  .manifesto .reading__margin,
  .manifesto .reading__margin > .sticky { display: contents; }
  .manifesto .toc { order: -1; }
  .manifesto .toc a { padding-block: 11px; }
  .manifesto .manifesto__exhibit { order: 1; }
  .manifesto #chapter-2,
  .manifesto #chapter-3,
  .manifesto .manifesto__end { order: 2; }
  .manifesto__chapter + .manifesto__chapter { margin-top: 20px; }
  .manifesto__end { margin-top: 12px; }
}


/* ---------- Contacto ----------------------------------------------------- */

.contact .channels { margin-top: clamp(32px, 3.4vw, 48px); }
.contact-place {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  font-size: var(--t-small);
  color: var(--text-2);
}
.contact-place .mono { color: var(--text-3); }

/* A dónde escribir según el tema */
.routes__title { font-size: 0.9375rem; font-weight: 600; color: var(--text); }
.routes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; }
.route {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}
.route:last-child { padding-bottom: 2px; }
.route__marks { display: flex; gap: 6px; padding-top: 1px; }
.route__mark {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.route__mark img { width: 100%; height: 100%; object-fit: contain; }
.route__mark--recado { background: #fff; box-shadow: inset 0 0 0 1px var(--rc-linea); padding: 5px 4px; }
.route__mark--studio { background: linear-gradient(158deg, var(--night-1), var(--night-2) 58%, var(--night-3)); padding: 6px; }
.route__topic { font-weight: 500; letter-spacing: -0.01em; color: var(--text); line-height: 1.35; }
.route__note { margin-top: 3px; font-size: 0.875rem; line-height: 1.5; color: var(--text-3); }
.route .text-link { margin-top: 6px; font-size: 0.875rem; }


/* ---------- Olevior Chat ------------------------------------------------- */

.chat-hint {
  margin-top: 20px;
  max-width: 46ch;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-3);
}
.chat-plate__head { display: flex; align-items: center; gap: 12px; }
.chat-plate__icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--pale);
  color: var(--accent-text);
}
.chat-plate__icon svg { width: 20px; height: 20px; }
.chat-plate__name { display: grid; gap: 2px; line-height: 1.3; }
.chat-plate__name strong { font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.chat-plate__name span { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.02em; color: var(--text-3); }
.chat-plate__notice { margin-top: 16px; font-size: 0.9375rem; line-height: 1.6; color: var(--text-2); }


/* ---------- 404 ---------------------------------------------------------- */

.notfound .lead { margin-top: clamp(20px, 2.2vw, 28px); }
.notfound .doors { margin-top: clamp(28px, 3vw, 40px); }
.notfound__en .muted { margin-top: 14px; max-width: 36ch; }
@media (max-width: 1023px) {
  .notfound .argument__margin { padding-top: 24px; }
}


/* ---------- Entrada por idioma (respaldo de la raíz) --------------------- */

.gate {
  min-height: 100dvh;
  max-width: 600px;
  display: grid;
  align-content: center;
  gap: clamp(36px, 6vw, 56px);
  padding-block: 48px;
}
.gate__logo { line-height: 0; }
.gate__logo img { width: 150px; }