/* ============================================================
   EL TIPÓGRAFO — TOKENS
   Diario regional. Reglas extraídas del Manual de Diseño.
   Versión web — preserva la voz tipográfica del periódico.
   ============================================================ */

/* ---------- TIPOGRAFÍAS ---------- */
@font-face {
  font-family: "Tisa";
  src: url("/fonts/TisaOT-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tisa";
  src: url("/fonts/TisaOT-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Tisa";
  src: url("/fonts/TisaOT-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tisa";
  src: url("/fonts/TisaOT-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tisa";
  src: url("/fonts/TisaOT-BoldItalic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Tisa";
  src: url("/fonts/TisaOT-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tisa Sans";
  src: url("/fonts/TisaSansPro-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---------- COLOR ----------
     El verde 368 es el único color corporativo (Manual, p.5).
     Magenta sólo para flecha de pie de foto (Manual, p.25).
     Cian sólo para Reportajes en combinación con verde (Manual, p.28).
     Todo el resto es escala de grises de impresión.
  */
  --tg-green:        #78BE20;   /* Pantone 368 C — corporativo */
  --tg-green-ink:    #5F9619;   /* hover / sobre fondo claro */
  --tg-magenta:      #E50064;   /* flecha pie de foto */
  --tg-cian:         #00A7E1;   /* sólo Reportajes */

  --tg-ink:          #111111;   /* texto principal */
  --tg-ink-soft:     #2A2A2A;
  --tg-rule:         #111111;   /* filete 0.3 pt en negro */
  --tg-paper:        #FFFFFF;   /* fondo principal */
  --tg-newsprint:    #F5F2EB;   /* fondo papel periódico */
  --tg-grid-40:      #9A9A9A;   /* rectángulo 40% negro (agenda) */
  --tg-grid-15:      #E4E2DC;   /* fondo destacado claro */
  --tg-grid-70:      #5C5C5C;
  --tg-grid-line:    #C8C5BD;   /* línea de retícula */

  /* ---------- TIPOGRAFÍA ---------- */
  --tg-serif: "Tisa", "FF Tisa", "Tisa Pro", Georgia, serif;
  --tg-sans:  "Tisa Sans", "FF Tisa Sans", "Helvetica Neue", Arial, sans-serif;

  /* Pesos disponibles en FF Tisa */
  --tg-w-regular: 400;
  --tg-w-medium:  500;
  --tg-w-bold:    700;
  --tg-w-black:   900;

  /* ---------- RETÍCULA ----------
     Manual p.9-12: página 370×280 mm. Caja 351×260 mm.
     6 columnas × 9 módulos (54 totales). 1 línea entre módulos.
     Interlínea base 11,18 pt = ~14,9 px a 1 pt = 1,333 px (default).
  */
  --tg-baseline:   11.18pt;     /* interlínea base */
  --tg-col-gutter: 5mm;         /* medianil entre columnas */
  --tg-cols:       6;           /* columnas en página completa */

  /* ---------- ESPACIO ----------
     Escala derivada de la interlínea. */
  --tg-s-1:  4px;
  --tg-s-2:  8px;
  --tg-s-3:  12px;
  --tg-s-4:  16px;
  --tg-s-5:  24px;
  --tg-s-6:  32px;
  --tg-s-7:  48px;
  --tg-s-8:  64px;
  --tg-s-9:  96px;

  /* ---------- FILETES Y BORDES ---------- */
  --tg-rule-thin:  0.5px solid var(--tg-rule);   /* filete 0,3pt */
  --tg-rule-base:  1px solid var(--tg-rule);
  --tg-rule-thick: 3px solid var(--tg-rule);     /* punto japonés bajo logo */
  --tg-radius-0:   0;                            /* periódico = sin radios */

  /* ---------- TAMAÑOS DE TEXTO ----------
     Manual p.20-22, p.33-34. Traducidos pt → px aprox (×1,333). */
  --tg-fs-titular-portada:  80pt;   /* Titular especial portada (46–100pt) */
  --tg-fs-titulo-principal: 60pt;   /* Título principal portada */
  --tg-fs-nota-grande:      46pt;   /* Nota grande / portada secundaria */
  --tg-fs-nota-secund:      36pt;   /* Secundaria grande */
  --tg-fs-nota-principal:   32pt;
  --tg-fs-nota-chica:       26pt;
  --tg-fs-recuadro:         18pt;
  --tg-fs-breve:            12pt;
  --tg-fs-bajada:           15pt;   /* bajada — Tisa regular */
  --tg-fs-bajada-grande:    18pt;   /* bajada larga (sin texto central) */
  --tg-fs-bajada-secund:    12pt;
  --tg-fs-cuerpo:           9.2pt;  /* texto central — Tisa regular */
  --tg-fs-foto:             10pt;   /* lectura de foto */
  --tg-fs-tip:              9.5pt;
  --tg-fs-folio:            12pt;   /* señalizador y folio (Tisa Sans) */
  --tg-fs-mini-folio:       8pt;
}

/* ---------- ESTILOS BASE ---------- */
.tg-paper {
  background: var(--tg-paper);
  color: var(--tg-ink);
  font-family: var(--tg-serif);
  font-feature-settings: "kern", "liga", "onum";
}

/* Texto justificado, base periódica */
.tg-body {
  font-family: var(--tg-serif);
  font-size: var(--tg-fs-cuerpo);
  line-height: var(--tg-baseline);
  letter-spacing: -0.0125em;     /* track -25 unidades InDesign ≈ -0,025em */
  text-align: justify;
  hyphens: auto;
  color: var(--tg-ink);
}
.tg-body p { margin: 0; }
.tg-body p + p { text-indent: 1em; }

/* Capitular para Opinión — 5 líneas */
.tg-capital::first-letter {
  initial-letter: 5;
  font-weight: 900;
  margin-right: .08em;
  color: var(--tg-ink);
  font-family: var(--tg-serif);
}

/* Titulares — Tisa Bold con tracking negativo */
.tg-h-grande   { font-family: var(--tg-serif); font-weight: 700; font-size: var(--tg-fs-nota-grande);   line-height: .95;  letter-spacing: -0.025em; }
.tg-h-secund   { font-family: var(--tg-serif); font-weight: 700; font-size: var(--tg-fs-nota-secund);   line-height: .95;  letter-spacing: -0.025em; }
.tg-h-principal{ font-family: var(--tg-serif); font-weight: 700; font-size: var(--tg-fs-nota-principal);line-height: 1.0;  letter-spacing: -0.025em; }
.tg-h-chica    { font-family: var(--tg-serif); font-weight: 700; font-size: var(--tg-fs-nota-chica);   line-height: 1.0;  letter-spacing: -0.02em;  }
.tg-h-recuadro { font-family: var(--tg-serif); font-weight: 700; font-size: var(--tg-fs-recuadro);     line-height: 1.05; letter-spacing: -0.02em;  }
.tg-h-breve    { font-family: var(--tg-serif); font-weight: 700; font-size: var(--tg-fs-breve);        line-height: 1.1;  letter-spacing: -0.015em; }
.tg-h-opinion  { font-family: var(--tg-serif); font-weight: 700; font-style: italic; font-size: 34pt;  line-height: 1.0;  letter-spacing: -0.025em; }
.tg-h-reportaje{ font-family: var(--tg-sans);  font-weight: 400; font-size: 55pt; line-height: .95; letter-spacing: -0.02em; color: var(--tg-green); }
.tg-h-reportaje em { color: var(--tg-cian); font-style: normal; }

/* Bajadas — Tisa regular */
.tg-bajada        { font-family: var(--tg-serif); font-weight: 400; font-size: var(--tg-fs-bajada);        line-height: 1.07; letter-spacing: -0.015em; }
.tg-bajada-grande { font-family: var(--tg-serif); font-weight: 400; font-size: var(--tg-fs-bajada-grande); line-height: 1.06; letter-spacing: -0.015em; }

/* Folio / señalizador — Tisa Sans */
.tg-folio       { font-family: var(--tg-sans); font-weight: 700; font-size: var(--tg-fs-folio); letter-spacing: -0.015em; color: var(--tg-green); text-transform: uppercase; }
.tg-folio-small { font-family: var(--tg-sans); font-weight: 400; font-size: var(--tg-fs-mini-folio); letter-spacing: 0.04em; color: var(--tg-ink); text-transform: uppercase; }

/* Banner superior apertura de sección — Manual p.18 */
.tg-section-banner {
  border-top: var(--tg-rule-base);
  border-bottom: var(--tg-rule-base);
  padding: 1.2em 0 1.2em;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
}
.tg-section-banner h2 {
  font-family: var(--tg-sans);
  font-weight: 700;
  font-size: 50pt;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  color: var(--tg-green);
}
.tg-section-banner .sub {
  font-family: var(--tg-sans);
  font-weight: 700;
  font-size: 16pt;
  letter-spacing: -0.01em;
  color: var(--tg-ink);
  margin: 0;
}

/* Filete divisor — 0.3pt en negro */
.tg-divider {
  border: 0;
  border-top: var(--tg-rule-thin);
  margin: var(--tg-s-4) 0;
}

/* Punto japonés — Manual p.32 */
.tg-pj {
  border-bottom: 3px dotted var(--tg-ink);
  padding-bottom: 6px;
}

/* Flecha magenta — Manual p.25 */
.tg-arrow::before {
  content: "→ ";
  color: var(--tg-magenta);
  font-weight: 700;
}

/* Crédito de foto — Tisa italic */
.tg-credito {
  font-family: var(--tg-serif);
  font-style: italic;
  font-size: 8pt;
  color: var(--tg-grid-70);
  letter-spacing: 0;
}

/* Lectura de foto — Tisa regular/bold, izquierda */
.tg-pie-foto {
  font-family: var(--tg-serif);
  font-size: var(--tg-fs-foto);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-align: left;
}
.tg-pie-foto strong:first-child { font-weight: 700; }