/* ============================================================
   Fundación Conecta — Design Tokens
   Editorial mode (default) + Course (dark) mode
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,700&family=Nunito:wght@400;600;700;800&display=swap');

:root {
  /* ---------- INK (text / dark surfaces) ---------- */
  --ink:        #1A1A2E;   /* primary text, dark hero bg */
  --ink2:       #3D3D5C;   /* body prose */
  --ink3:       #7070A0;   /* tertiary, muted labels */

  /* ---------- PAPER (light surfaces) ---------- */
  --paper:      #FDFCF8;   /* page background */
  --paper2:     #F4F2EB;   /* card / callout fill */
  --paper3:     #EAE7DC;   /* divider / disabled */
  --border:     #DDD9CF;   /* hairline borders */

  /* ---------- ACCENT (brand primary) ---------- */
  --accent:     #C93D1B;   /* bermellón — primary CTA, italics, kickers */
  --accent2:    #F0A500;   /* ámbar — kicker tag in dark hero */

  /* ---------- SEMANTIC SCALES ---------- */
  --teal:       #1A7A6A;   --teal-bg:    #E6F5F2;   --teal-ink:   #0C4A3E;
  --blue:       #1A4FAA;   --blue-bg:    #EBF0FB;   --blue-ink:   #14347A;
  --purple:     #6B21A8;   --purple-bg:  #F5EEFF;   --purple-ink: #45167A;
  --amber:      #9A6800;   --amber-bg:   #FEF7E5;   --amber-ink:  #6B4800;
  --green:      #166534;   --green-bg:   #F0FBF5;   --green-ink:  #14532D;
  --danger:     #9B1C1C;   --danger-bg:  #FEF0F0;   --danger-ink: #9B1C1C;

  /* ---------- COURSE (DARK) MODE ---------- */
  --dark-bg:    #160F29;   /* deep violet-black */
  --dark-bg2:   #0F0A1F;   /* gradient bottom */
  --dark-accent:#D7CF07;   /* mustard — high-energy accent */
  --dark-text:  #E2E8F0;
  --dark-muted: #94A3B8;

  /* ---------- TYPOGRAPHY ---------- */
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --font-sans:  'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---------- LAYOUT ---------- */
  --reading:    700px;
  --pad-x:      32px;
  --pad-x-sm:   18px;

  /* ---------- RADII ---------- */
  --r-pill:     100px;
  --r-card:     12px;
  --r-box:      10px;
  --r-btn:      8px;

  /* ---------- TRANSITIONS ---------- */
  --t-fast:     .15s;
  --t-med:      .2s;
  --t-slow:     .5s;

  /* ---------- SHADOWS (used sparingly) ---------- */
  --shadow-hover: 0 4px 14px rgba(201, 61, 27, .08);
  --shadow-glow:  0 0 15px rgba(215, 207, 7, .30);
}

/* ============================================================
   BASE TYPOGRAPHY (semantic)
   ============================================================ */

html { font-size: 17px; }

body {
  font-family: var(--font-serif);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----- Display / Hero ----- */
.display, h1.display {
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 5vw, 3.3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
}
.display em, h1 em { font-style: italic; color: var(--accent); }

/* ----- Chapter / H2 ----- */
h2, .h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-bottom: 22px;
}
h2 em { font-style: italic; color: var(--accent); }

/* ----- Section header / H3 ----- */
h3, .h3 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  margin: 34px 0 12px;
}

/* ----- Subhead / H4 ----- */
h4, .h4 {
  font-family: var(--font-sans);
  font-size: .88rem;
  font-weight: 800;
  color: var(--ink2);
  margin: 20px 0 8px;
}

/* ----- Body prose ----- */
p {
  font-size: .98rem;
  color: var(--ink2);
  margin-bottom: 16px;
  line-height: 1.82;
  text-wrap: pretty;
}
p strong { color: var(--ink); font-weight: 700; }
p em     { font-style: italic; color: var(--ink); }

/* ----- Lead / Hero subtitle ----- */
.lead {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .7);
  line-height: 1.72;
}

/* ----- Kicker (small uppercase label) ----- */
.kicker {
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ----- Pull quote ----- */
.pq {
  border-left: 4px solid var(--accent);
  margin: 28px 0;
  padding: 14px 22px;
  background: var(--paper2);
  border-radius: 0 8px 8px 0;
}
.pq p {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--ink);
  margin: 0;
  line-height: 1.65;
}

/* ----- Definition box ----- */
.def {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--r-box);
  padding: 18px 22px;
  margin: 22px 0;
  position: relative;
}
.def::before {
  content: '"';
  font-family: var(--font-serif);
  font-size: 3rem;
  color: var(--paper3);
  position: absolute; top: 4px; right: 14px;
  line-height: 1;
}

/* ----- Code / mono (rare in this brand) ----- */
code, kbd, pre {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: var(--paper2);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ink);
}

/* ----- Lists ----- */
ul, ol { margin: 12px 0 18px 8px; display: flex; flex-direction: column; gap: 7px; padding-left: 20px; }
li { font-size: .95rem; color: var(--ink2); line-height: 1.7; padding-left: 4px; }
li::marker { color: var(--accent); font-weight: 700; }

/* ----- Links ----- */
a { color: var(--accent); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--ink); }

/* ============================================================
   DARK / COURSE MODE — opt-in via .dark on body or wrapper
   ============================================================ */

.dark {
  background: var(--dark-bg);
  color: var(--dark-text);
  font-family: var(--font-sans);
}
.dark p { color: rgba(255, 255, 255, .75); }
.dark h1, .dark h2, .dark h3, .dark h4 { color: white; }
.dark .kicker { color: var(--dark-accent); }
.dark a { color: var(--dark-accent); }