/* ═══════════════════════════════════════════════════════════════════════════
   ROMANO & LANZAGORTA ASOCIADOS
   04 · Estructura
   Una sola reticula: doce columnas. Las tres primeras son el lomo del
   expediente y solo alojan el folio. El contenido arranca siempre en la
   columna 4. Toda segunda columna interior arranca siempre en la columna 8.
   Sin excepciones.
   ═══════════════════════════════════════════════════════════════════════════ */

.lienzo {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--canal);
  row-gap: 0;
}

/* Subreticula de nueve columnas: la que ocupa el contenido (4 → 13).
   Los componentes interiores heredan asi los mismos ejes que la pagina. */
.sub {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  column-gap: var(--canal);
}

.sub__a { grid-column: 1 / 5; }   /* = columna 4 a 7 de la pagina  */
.sub__b { grid-column: 5 / 10; }  /* = columna 8 a 12 de la pagina */

/* ── Seccion ────────────────────────────────────────────────────────────── */

.seccion { position: relative; padding-block: var(--e-8) var(--e-7); }

/* Filete de apertura: se traza al entrar en cuadro. */
.seccion__filete {
  grid-column: 1 / -1;
  height: var(--filete);
  background: var(--tinta);
  opacity: 0.42;
  margin-bottom: var(--e-4);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--v-larga) var(--curva);
}

.seccion__filete.visible { transform: scaleX(1); }

/* ── Colocacion ─────────────────────────────────────────────────────────── */

.folio    { grid-column: 1 / 4;  }
.titular  { grid-column: 4 / 12; }
.contenido{ grid-column: 4 / -1; }

/* ── Folio: el lomo del expediente. Acompaña al contenido de su seccion. ── */

.folio {
  position: sticky;
  top: calc(var(--alto-cabecera) + var(--e-3));
  align-self: start;
  padding-right: var(--canal);
}

.folio__cifra {
  display: block;
  font-family: var(--texto);
  font-size: 1.5rem;          /* 24px: unica excepcion al limite de Inter */
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}

.folio__nombre {
  display: block;
  margin-top: 0.85rem;
  padding-top: 0.8rem;
  border-top: var(--filete) solid var(--linea-media);
}

/* ── Ritmo vertical: cuatro valores. Nada fuera de esta escala. ─────────── */

.esp-a { margin-top: var(--e-3); }   /* 24  */
.esp-b { margin-top: var(--e-5); }   /* 52  */
.esp-c { margin-top: var(--e-7); }   /* 104 */
.esp-d { margin-top: var(--e-8); }   /* 144 */

/* ── Utilidades ─────────────────────────────────────────────────────────── */

.filete { height: var(--filete); background: var(--linea); border: 0; width: 100%; }
.filete--medio { background: var(--linea-media); }
.filete--firme { background: var(--linea-firme); }

/* Compensacion optica: las versales y la "L" de Cormorant entran con
   sidebearing propio y desalinean el bloque respecto al rotulo. */
.optico { margin-left: -0.028em; }

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Adaptaciones ───────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .titular { grid-column: 4 / -1; }
}

@media (max-width: 860px) {
  .folio, .titular, .contenido { grid-column: 1 / -1; }
  .folio {
    position: static;
    padding-right: 0;
    margin-bottom: var(--e-4);
    display: flex;
    align-items: baseline;
    gap: var(--e-2);
  }
  .folio__nombre { margin: 0; padding: 0; border: 0; }
  .folio__cifra { font-size: 1.125rem; }
  .sub { grid-template-columns: 1fr; row-gap: var(--e-2); }
  .sub__a, .sub__b { grid-column: 1; }
  .optico { margin-left: 0; }
}