/* ============================================================
   PPI — Sistema de Noticias de Planta
   Tokens de marca según Brand Guide 2025
   ============================================================ */

/* Eurostile es de Adobe Fonts (no libre para web). Saira es un
   sustituto fiel: geométrica, cuadrada, con peso Black, dentro
   del espíritu "sans serif bold y claro" que pide la guía. */
@import url('https://fonts.googleapis.com/css2?family=Saira:wght@300;400;500;600;700;800;900&family=Saira+Condensed:wght@500;600;700;800&display=swap');

:root {
  /* --- Colores primarios (Brand Guide) --- */
  --ppi-green: #185640;        /* PMS 343 */
  --ppi-gray-7: #979899;       /* Cool Gray 7 */
  --ppi-black: #000000;
  --ppi-gray-10: #636569;      /* Cool Gray 10 */

  /* --- Derivados controlados (misma familia, para profundidad) --- */
  --ppi-green-900: #0d3327;
  --ppi-green-800: #134634;
  --ppi-green-700: #185640;
  --ppi-green-600: #1f6b50;
  --ppi-green-500: #2a8463;
  --ppi-green-300: #6fb29a;

  --ink: #0c0f0e;              /* casi negro, tono frío neutro */
  --paper: #f4f5f4;           /* blanco gris muy sutil */
  --paper-2: #e7e9e8;
  --line: #d3d6d4;

  /* --- Tipografía --- */
  --font-head: 'Saira', system-ui, sans-serif;        /* ~ Eurostile Black */
  --font-body: 'Saira', system-ui, sans-serif;        /* ~ Eurostile Regular */
  --font-cond: 'Saira Condensed', 'Saira', sans-serif;

  /* --- Radios y sombras --- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --shadow-1: 0 2px 8px rgba(12,15,14,.08);
  --shadow-2: 0 12px 40px rgba(12,15,14,.14);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 0.98;
}

/* Patrón diagonal sutil que evoca el "swoosh" del logo PPI.
   Se aplica como textura industrial discreta sobre fondos verdes. */
.ppi-stripes {
  background-image: repeating-linear-gradient(
    -24deg,
    rgba(255,255,255,0.00) 0px,
    rgba(255,255,255,0.00) 38px,
    rgba(255,255,255,0.022) 38px,
    rgba(255,255,255,0.022) 76px
  );
}

/* El "swoosh" del logo reinterpretado como acento gráfico (gris). */
.ppi-swoosh {
  position: absolute;
  height: 0;
  border-bottom: var(--sw, 10px) solid var(--ppi-gray-7);
  border-radius: 999px;
  transform: rotate(-7deg);
  transform-origin: left center;
  pointer-events: none;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ppi-gray-7); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

.tnum { font-variant-numeric: tabular-nums; }