/* ------------------------------------------
   STYLES.CSS — HISTORIA (/)
   ------------------------------------------*/

/* TOKENS */
:root {
  --deep:    #0D2B4E;
  --mid:     #1A6B8A;
  --turq:    #00B4D8;
  --turq-lt: #48CAE4;
  --white:   #FFFFFF;
  --shadow:  0 4px 24px rgba(13,43,78,.10);
  --radius:  14px;
  --display: 'Playfair Display', Georgia, serif;
  --body:    'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  font-size: 17px;
  color: var(--white);
  /* Un solo gradiente continuo para toda la página */
  background: linear-gradient(180deg,
    #0D2B4E  0%,
    #0F3560  8%,
    #1A6B8A  18%,
    #0D7FA0  30%,
    #0B6E8C  42%,
    #0A5C78  54%,
    #093D58  66%,
    #0A4D6A  78%,
    #0C3A58  90%,
    #0D2B4E 100%);
  min-height: 100vh;
}

/* ── LÍNEA DEL TIEMPO ── */
.timeline-section { padding: 6rem 2rem; }
.timeline {
  margin-top: 0;
  position: relative; padding-left: 1.75rem;
}
.timeline::before {
  content: ''; position: absolute;
  left: 0; top: 8px; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--turq-lt) 0%, rgba(72,202,228,.1) 100%);
}
.tl-item {
  position: relative; padding-left: 2.25rem;
  margin-bottom: 2.75rem;
}
.tl-item:last-child { margin-bottom: 0; }
.tl-dot {
  position: absolute; left: -2.3rem; top: .4rem;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--turq-lt);
  border: 3px solid #0D2B4E;
  box-shadow: 0 0 0 3px rgba(72,202,228,.25);
}
.tl-date {
  display: block; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--turq-lt); margin-bottom: .4rem;
}
.tl-content h3 {
  font-family: var(--display); font-size: 1.2rem;
  font-weight: 700; color: var(--white); margin-bottom: .5rem;
}
.tl-content p {
  font-size: .95rem; color: rgba(255,255,255,.7); line-height: 1.65;
}