/*
  El NONO Pizzería — about.css
  Layout de pages/about.html: historia de marca y valores.
*/

.about-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-8);
  align-items: center;
}

@media (max-width: 992px) {
  .about-intro { grid-template-columns: 1fr; }
}

.about-media {
  position: relative;
  aspect-ratio: 1 / 1;
  clip-path: polygon(0 0, 100% 12%, 100% 100%, 0% 88%);
  background: radial-gradient(circle at 50% 40%, var(--color-red), var(--color-red-dark));
  display: grid;
  place-items: center;
  padding: var(--space-8);
}

.about-media img { width: 62%; height: auto; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.35)); }

.about-intro p { margin-top: var(--space-4); color: var(--text-muted); max-width: 56ch; }

.timeline {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-6);
  border-left: 2px solid rgba(var(--color-red-rgb), 0.25);
  padding-left: var(--space-6);
}

.timeline-item { position: relative; }

.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(var(--space-6) * -1 - 6px);
  top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--color-red);
  box-shadow: 0 0 0 4px var(--color-cream);
}

.timeline-item h3 { font-weight: 800; text-transform: uppercase; font-size: 1rem; }
.timeline-item p { margin-top: var(--space-2); color: var(--text-muted); max-width: 56ch; }

.values-grid {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .values-grid { grid-template-columns: 1fr; }
}