/* ================================================
   CREANDO PATRIA — Variables & Reset
   Paleta: Navy profundo + Dorado + Crema
   Inspiración: El País, Le Monde, portales de autoridad
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Barlow+Condensed:wght@400;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;1,8..60,300&display=swap');

:root {
  /* ── Paleta principal ── CLARO */
  --bg:           #F5F0E8;
  --bg-panel:     #FFFFFF;
  --bg-card:      #FFFFFF;
  --bg-hover:     #EBE5D9;

  --gold:         #B8860B;
  --gold-bright:  #D4A017;
  --gold-dim:     rgba(184,134,11,0.15);
  --gold-glow:    rgba(184,134,11,0.08);

  --cream:        #2C2B29;
  --cream-muted:  rgba(44,43,41,0.70);
  --cream-dim:    rgba(44,43,41,0.35);
  --cream-line:   rgba(44,43,41,0.10);

  /* ── Sombras neumórficas sobre navy ── */
  --neu-out:    -4px -4px 10px rgba(37,57,104,0.8),
                 5px  5px 14px rgba(10,18,38,0.8);
  --neu-in:     inset 3px  3px  9px rgba(10,18,38,0.7),
                inset -3px -3px  9px rgba(37,57,104,0.6);
  --neu-in-sm:  inset 2px  2px  5px rgba(10,18,38,0.6),
                inset -2px -2px  5px rgba(37,57,104,0.5);
  --neu-gold:   0 0 0 2px rgba(201,151,58,0.45),
                -4px -4px 10px rgba(37,57,104,0.8),
                 5px  5px 14px rgba(10,18,38,0.8);

  /* ── Tipografía ── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Source Serif 4', Georgia, serif;
  --font-ui:      'Barlow Condensed', sans-serif;

  /* ── Tamaños de texto (MÁS GRANDES) ── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   26px;
  --text-2xl:  34px;
  --text-3xl:  42px;

  /* ── Espaciado ── */
  --space-xs:  4px;
  --space-sm:  10px;
  --space-md:  16px;
  --space-lg:  26px;
  --space-xl:  40px;

  /* ── Bordes ── */
  --radius:      12px;
  --radius-sm:   8px;
  --radius-pill: 999px;

  /* ── Transiciones ── */
  --transition: all 0.22s ease;

  /* ── Layout ── */
  --sidebar-w:   280px;
  --nav-h:       72px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; }
a { text-decoration: none; color: inherit; }