/* ============================================================
   BTT 2026 — SECCIÓN 03: LA HISTORIA (timeline)
   ============================================================ */

.timeline {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding-left: 0;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, var(--dorado) 8%, var(--dorado) 92%, transparent);
}

.timeline-item {
  position: relative;
  width: 50%;
  padding: 0 2.6rem 3.2rem 0;
}
.timeline-item:nth-child(even) {
  margin-left: 50%;
  padding: 0 0 3.2rem 2.6rem;
}

.timeline-punto {
  position: absolute;
  top: .35rem;
  right: -7px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--dorado);
  box-shadow: 0 0 0 5px rgba(200, 166, 106, .22);
}
.timeline-item:nth-child(even) .timeline-punto { right: auto; left: -7px; }

.timeline-contenido {
  background: rgba(255, 250, 245, .045);
  border: 1px solid var(--dorado-linea);
  border-radius: var(--radio);
  padding: 1.6rem 1.7rem;
}
.timeline-contenido h3 {
  font-size: 1.4rem;
  margin-bottom: .5rem;
}
.timeline-anio {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dorado);
  margin-bottom: .5rem;
}
.timeline-contenido .foto-placeholder { margin-top: 1.1rem; aspect-ratio: 16/9; }

@media (max-width: 760px) {
  .timeline::before { left: 10px; transform: none; }
  .timeline-item,
  .timeline-item:nth-child(even) {
    width: 100%;
    margin-left: 0;
    padding: 0 0 2.6rem 2.4rem;
  }
  .timeline-punto,
  .timeline-item:nth-child(even) .timeline-punto { left: 3px; right: auto; }
}