/* ==========================================================================
   EL INFIERNILLO — Diseño del boletín
   Cada página mide 16,5 × 21,5 cm (dos páginas = pliego de 33 × 21,5 cm).
   Todas las medidas están en cm / pt para que la impresión sea exacta.
   Paleta: tinta #404040 · verde #d0dfba · papel blanco.
   Tipografías: Bree Serif (titulares), Noto Serif (texto), Inria Serif Bold Italic (pies de figura).
   ========================================================================== */

:root {
  --tinta: #404040;
  --verde: #d0dfba;
  --f-titular: 'Bree Serif', Georgia, 'Times New Roman', serif;
  --f-texto: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --f-pie: 'Inria Serif', 'Noto Serif', Georgia, serif;
  --pg-ancho: 16.5cm;
  --pg-alto: 21.5cm;
  --margen: 1.13cm;
}

/* ------------------------------------------------------------------ página */

.pagina, .pagina * { box-sizing: border-box; }

.pagina {
  position: relative;
  width: var(--pg-ancho);
  height: var(--pg-alto);
  flex: none;
  overflow: hidden;
  background: #fff;
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 9pt;
  line-height: 1.5;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.pagina.vacia { background: #fff; }

.pg-cabecera {
  position: absolute;
  top: .78cm; left: var(--margen); right: var(--margen);
  display: flex; justify-content: space-between; align-items: baseline;
  font: 700 6.4pt/1 var(--f-texto);
  text-transform: uppercase;
  letter-spacing: .01em;
}

.regla-doble {
  position: absolute; left: var(--margen); right: var(--margen);
  height: .2cm;
  border-top: 2.2pt solid var(--tinta);
  border-bottom: 1.2pt solid var(--tinta);
}
.regla-sup { top: 1.5cm; }
.regla-inf { top: 20.72cm; }

.pg-cuerpo {
  position: absolute;
  left: var(--margen); right: var(--margen);
  top: 2.0cm; bottom: 1.3cm;
  display: flex; flex-direction: column;
  min-height: 0;
}
.con-colofon .pg-cuerpo { bottom: 2.4cm; }

.pg-colofon {
  position: absolute;
  left: var(--margen); right: var(--margen);
  bottom: .9cm; height: 1cm;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--verde);
  font: 700 6.1pt/1.35 var(--f-texto);
  text-transform: uppercase;
  text-align: center;
}

/* ------------------------------------------------------------ texto corrido */

.texto {
  font-size: var(--fs, 9pt);
  line-height: var(--lh, 1.5);
  text-align: justify;
  -webkit-hyphens: auto; hyphens: auto;
  overflow-wrap: break-word;
  hyphenate-limit-chars: 6 3 3;
  text-wrap: pretty;
  font-variant-ligatures: common-ligatures;
  orphans: 2; widows: 2;
}
.texto p { margin: 0; text-indent: 1.9em; }
.texto p.cont, .sin-sangria .texto p { text-indent: 0; }
.texto strong { font-weight: 700; }
.texto h3 {
  margin: 1.1em 0 .35em;
  font-size: 1em; font-weight: 700; line-height: 1.3;
  text-transform: uppercase; text-align: left;
}
.texto h3:first-child { margin-top: 0; }
.texto ul { margin: 0; padding-left: 1.35em; text-align: left; -webkit-hyphens: manual; hyphens: manual; }
.texto li { margin: 0 0 .45em; line-height: 1.7; }
.texto li::marker { font-size: 1.1em; }

/* -------------------------------------------------------- reglas y cajas */

.caja-verde { background: var(--verde); }

/* ------------------------------------------------------------------ portada */

.portada { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: -.5cm; }

.mast-fila { display: flex; align-items: center; gap: .32cm; height: 1.85cm; margin-top: .02cm; }
.mast-logo { height: 1.5cm; width: auto; display: block; flex: none; }
.mast h1.mast-titulo { margin: 0; flex: 1; min-width: 0; line-height: 0; }
.mast-titulo svg { display: block; width: 100%; height: auto; overflow: visible; }
.mast-titulo text { font-family: var(--f-titular); font-size: 35px; font-weight: 400; fill: currentColor; }
.mast-regla {
  height: .2cm; margin: .08cm 0 .2cm;
  border-top: 2.2pt solid var(--tinta); border-bottom: 1.2pt solid var(--tinta);
}
.mast-sub {
  margin: 0; font: 400 6.3pt/1.2 var(--f-titular);
  letter-spacing: .24em; text-transform: uppercase;
  text-align: justify; text-align-last: justify; white-space: nowrap;
  overflow: hidden;
}
.regla-mast { position: static; margin-top: .2cm; }

.portada-cuerpo {
  flex: 1; min-height: 0; margin-top: .36cm;
  display: grid; grid-template-columns: 4.15cm 1fr;
}
.lateral {
  padding-right: .27cm; border-right: .9pt solid var(--tinta);
  display: flex; flex-direction: column; min-height: 0; margin-top: .0cm;
}
.lateral h2 { margin: 0 0 .32cm; font: 400 13pt/1.45 var(--f-titular); }
.lateral h2.caps { text-transform: uppercase; line-height: 1.35; margin-top: .3cm; }
.lateral .texto { font-size: 8.3pt; line-height: 1.52; }
.lateral .texto p { text-indent: 0; }
.lateral hr { border: 0; border-top: 1.1pt solid var(--tinta); margin: .55cm 0 .15cm; }
.lateral .act { margin-bottom: .32cm; font-size: 8pt; line-height: 1.5; }
.lateral .act h4 { margin: 0 0 .1cm; font: 700 7.9pt/1.3 var(--f-texto); }
.lateral .act p { margin: 0 0 .1cm; text-align: left; }
.lateral .act p.fecha { font-style: italic; }

.principal { padding-left: .4cm; display: flex; flex-direction: column; min-height: 0; }
.etiqueta { margin: 0; font: 400 7.8pt/1.2 var(--f-titular); }
.titular { margin: .04cm 0 .45cm; font: 400 25pt/1.04 var(--f-titular); }
.principal > .texto { font-size: 8.4pt; line-height: 1.5; }
.dos-cols { column-count: 2; column-gap: .5cm; column-fill: balance; }
.principal .caja-verde {
  margin-top: auto; min-height: 4.95cm; padding: .38cm .35cm .3cm .35cm;
}
.principal .caja-verde h3 { margin: .05cm 0 .45cm; font: 700 8.5pt/1.3 var(--f-texto); }
.principal .caja-verde .texto { font-size: 8.4pt; line-height: 1.5; }

/* ----------------------------------------------------------------- artículo */

.art { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.art-titulo {
  margin: .1cm 0 .45cm; font: 700 var(--tp, 12.5pt)/1.08 var(--f-texto);
  text-align: left; flex: none;
}
.art-titulo em { font-weight: 400; }

.art-cols { flex: 0 1 auto; }
.art-cols.manual {
  display: grid; grid-template-columns: var(--anchos); column-gap: var(--gap, .6cm);
  align-items: start;
}
.art-cols.manual .col { min-width: 0; }
.art-cols.auto .flujo { column-count: var(--n, 2); column-gap: var(--gap, .6cm); column-fill: balance; }
.art-cols.auto-fig {
  display: grid; grid-template-columns: var(--anchos); column-gap: var(--gap, .6cm); align-items: start;
}
.art-cols.auto-fig .flujo { grid-column: 1 / span var(--tc, 1); column-count: var(--tc, 1); column-gap: var(--gap, .6cm); }

.figura { margin: 0; height: var(--fh, 8.7cm); overflow: hidden; }
.figura img { display: block; width: 100%; height: auto; max-height: calc(var(--fh, 8.7cm) - 1.6cm); object-fit: contain; }
.figura figcaption {
  margin-top: .3cm; font: italic 700 8.6pt/1.5 var(--f-pie); text-align: justify;
  -webkit-hyphens: auto; hyphens: auto;
}

.art-img { margin-top: auto; flex: none; height: var(--ih, 7cm); }
.art-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art-img.con-regla {
  height: calc(var(--ih, 7cm) + .42cm);
  border-top: .9pt solid var(--tinta); padding-top: .38cm;
}

/* -------------------------------------------------------------------- mural */

.mural {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1.355fr 1fr; column-gap: .82cm; align-items: start;
}
.mural-izq { position: relative; min-width: 0; }
.mural-izq::after {
  content: ''; position: absolute; top: 0; bottom: -.15cm; right: -.41cm;
  border-right: .9pt solid var(--tinta);
}
.mural-titulo { margin: .05cm 0 .42cm; font: 700 16.5pt/1.1 var(--f-texto); text-align: left; }
.mural .texto { font-size: var(--fs, 9.6pt); line-height: 1.52; }
.mural .texto p { text-indent: 0; }
.mural .caja-verde.cita { margin: .42cm 0 .4cm; padding: .3cm .3cm .25cm .45cm; }
.cita-texto {
  margin: 0; font: italic 700 var(--fs, 9.6pt)/1.45 var(--f-texto);
  text-align: right; -webkit-hyphens: auto; hyphens: auto;
}
.cita-autor { margin: .08cm 0 0; font: 400 var(--fs, 9.6pt)/1.45 var(--f-texto); }
.mural-foto { height: var(--ih, 4.6cm); }
.mural-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.mural-pie {
  margin: .3cm 0 0; font-size: 8.6pt; line-height: 1.55; text-align: justify;
  -webkit-hyphens: auto; hyphens: auto;
}
.mural-pie strong { font-weight: 700; }
.mural-der { min-width: 0; }
.mural-lat { height: var(--ih, 10.8cm); border-radius: .22cm; overflow: hidden; }
.mural-lat img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mural-sub { margin: .32cm 0 .15cm; font: 700 15.5pt/1.2 var(--f-texto); }
.lista-num { list-style: none; margin: 0; padding: 0; font-size: 12pt; line-height: 1.38; }
.lista-num li { display: grid; grid-template-columns: 1.7cm 1fr; align-items: baseline; }
.lista-num .n { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ galería */

.galeria { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: -.02cm; }
.fotos { display: flex; gap: .2cm; height: var(--ih, 12.3cm); flex: none; }
.foto { min-width: 0; height: 100%; }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gal-titulo {
  margin: .38cm 0 .3cm; font: 700 10.6pt/1.15 var(--f-texto); text-align: left;
}
.galeria .texto { font-size: var(--fs, 10pt); line-height: 1.55; }

/* ----------------------------------------------------------------- flotante */

.flot { flex: 1; min-height: 0; }
.flot .texto { font-size: var(--fs, 14pt); line-height: var(--lh, 1.4); }
.flot.al-left .texto { text-align: left; }
.flot .texto p { text-indent: 1.4em; }
.flot-img { float: right; display: block; object-fit: fill; shape-image-threshold: .12; }
.flot .art-titulo { margin-top: .08cm; }

.en-blanco { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
.en-blanco p { margin: 0; font-size: 9pt; }

/* ==========================================================================
   VISTA EN PANTALLA: escala de las páginas (se ajusta con JS o con --esc)
   ========================================================================== */

.pg-caja {
  position: relative; flex: none;
  width: calc(var(--pg-ancho) * var(--esc, .9));
  height: calc(var(--pg-alto) * var(--esc, .9));
  box-shadow: 0 .05cm .5cm rgba(0, 0, 0, .18);
  background: #fff;
}
.pg-caja > .pagina {
  position: absolute; left: 0; top: 0;
  transform: scale(var(--esc, .9)); transform-origin: 0 0;
}
.pliego-caja {
  position: relative; flex: none;
  width: calc(var(--pg-ancho) * 2 * var(--esc, .6));
  height: calc(var(--pg-alto) * var(--esc, .6));
  box-shadow: 0 .05cm .5cm rgba(0, 0, 0, .18);
  background: #fff;
}
.pliego {
  position: absolute; left: 0; top: 0; display: flex;
  width: calc(var(--pg-ancho) * 2); height: var(--pg-alto);
  transform: scale(var(--esc, .6)); transform-origin: 0 0; background: #fff;
}

a.pg-caja { display: block; text-decoration: none; color: inherit; }