/* ============================================================================
   Guía de marca · hoja compartida por las tres guías
   Se apoya en /v8/estilo.css (que trae la voz de epígrafe E3, la carcasa con
   índice lateral y las notas sin franja pintada). Acá solo va lo que es propio
   de una guía: fichas de especificación, cuadros de uso correcto e incorrecto,
   y la escala tipográfica.
   Ni una clase gr-*: el chrome del kit se consume tal cual.
   ============================================================================ */

/* La marca en grande, sobre su propio papel, para que se lea la geometría. */
.g-hero {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding: 32px 28px; border: 1px solid var(--line); background: var(--paper-raised);
  margin: 0 0 var(--space-6, 32px);
}
/* El símbolo hereda TINTA, no el acento. Teñir el anillo de la CIS de azul
   marino lo convierte en ilustración y hace que la misma marca se vea distinta
   en cada página segun de qué sociedad se esté hablando. Martín lo pidió dos
   veces: «el logo cis no deberia ser azul, sino negro».
   El cuadrado de cochid es aparte: es una forma rellena, su color es la forma,
   y por eso lleva el fill en el propio SVG y no hereda de acá.
   El acento se gasta en el enlace y en el dato, no en la marca. */
.g-hero__marca { flex: none; color: var(--ink); }
.g-hero__marca svg { width: 96px; height: 96px; display: block; }
.g-hero__datos { min-width: 240px; }
.g-hero__rut { font-family: var(--font-epi); font-size: var(--epi-size); letter-spacing: var(--epi-track); text-transform: uppercase; color: var(--ink-muted); margin: 0 0 6px; }
.g-hero__nom { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; }
.g-hero__rol { margin: 0; font-size: 14px; color: var(--ink-muted); max-width: 46ch; line-height: 1.5; }

/* Ficha de especificación: el dato medible al lado de la pieza. */
.g-spec { border: 1px solid var(--line); background: var(--paper); margin: 0 0 var(--space-4, 20px); }
.g-spec__head { padding: 9px 13px; border-bottom: 1px solid var(--line); font-family: var(--font-epi); font-size: var(--epi-size); font-weight: var(--epi-weight); letter-spacing: var(--epi-track); text-transform: uppercase; color: var(--ink-muted); }
.g-spec__body { padding: 26px 20px; background: var(--paper-raised); display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; min-height: 96px; }
.g-spec__body--izq { justify-content: flex-start; }
.g-spec__foot { margin: 0; padding: 10px 13px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.g-spec__foot code, .g-spec__foot b { color: var(--ink); }

/* Sí y no, lado a lado. El borde de arriba distingue; no hay franja lateral. */
.g-sino { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-4, 20px); margin: var(--space-4, 20px) 0; }
.g-caso { border: 1px solid var(--line); background: var(--paper); }
.g-caso__t { padding: 8px 13px; border-bottom: 1px solid var(--line); font-family: var(--font-epi); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.g-caso--si .g-caso__t { color: var(--ok, #1a7f5a); border-bottom-color: var(--ok, #1a7f5a); }
.g-caso--no .g-caso__t { color: var(--err, #b3261e); border-bottom-color: var(--err, #b3261e); }
.g-caso__b { padding: 22px 16px; background: var(--paper-raised); display: flex; align-items: center; justify-content: center; min-height: 84px; }
.g-caso__p { margin: 0; padding: 10px 13px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.45; color: var(--ink-muted); }

/* Lockups. La marca hereda currentColor, asi que el color lo pone el contexto. */
.g-lock { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
.g-lock svg { flex: none; display: block; }
.g-lock__nb { font-weight: 800; line-height: 1.12; }
.g-lock--vert { flex-direction: column; text-align: center; gap: 9px; }
.g-lock--nowrap .g-lock__nb { white-space: nowrap; }
.g-panel-oscuro { background: #0c0b08; color: #f1ece3; padding: 22px 20px; }
.g-panel-oscuro .g-lock { color: inherit; }

/* Escala tipográfica: cada fila se dibuja con su propio tamaño. */
.g-escala { width: 100%; border-collapse: collapse; }
.g-escala td, .g-escala th { border-bottom: 1px solid var(--line); padding: 12px 11px; vertical-align: baseline; text-align: left; }
.g-escala th { font-family: var(--font-epi); font-size: var(--epi-size); font-weight: var(--epi-weight); letter-spacing: var(--epi-track); text-transform: uppercase; color: var(--ink-muted); }
.g-escala__dato { font-family: var(--font-epi); font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; }

/* Reglas duras, numeradas. */
.g-reglas { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.g-reglas li { counter-increment: r; position: relative; padding: 11px 0 11px 42px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; max-width: 74ch; }
.g-reglas li::before {
  content: counter(r, decimal-leading-zero); position: absolute; left: 0; top: 12px;
  font-family: var(--font-epi); font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--ink-muted);
}

/* Cintillo de estado: qué está cerrado y qué sigue abierto. */
.g-estado { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0 0 var(--space-6, 32px); }
.g-estado > div { background: var(--paper); padding: 14px 16px; }
.g-estado h4 { margin: 0 0 7px; font-family: var(--font-epi); font-size: var(--epi-size); font-weight: var(--epi-weight); letter-spacing: var(--epi-track); text-transform: uppercase; color: var(--ink-muted); }
.g-estado ul { margin: 0; padding-left: 17px; font-size: 13.5px; line-height: 1.6; }

/* Selector de marca, arriba de todo. */
.g-marcas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 var(--space-5, 24px); }
.g-marcas a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; }
.g-marcas a svg { width: 17px; height: 17px; }
.g-marcas a[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); }