:root {
  --paper: #f3ead8;
  --ink: #1b2a1f;
  --brick: #8c3b2b;
  --purple: #6d3fa8;
  --wine: #9b2335;
  --copper: #a8662a;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Serif", Georgia, serif;
  line-height: 1.55;

  background-image: url("./assets/images/paper.png");
}

/* HERO */
.hero {
  position: relative;
  /* min-height: 420px; */
  display: flex;
  align-items: flex-start;
  background: linear-gradient(315deg, rgba(0,0,0,0) 25%, var(--paper)),linear-gradient(340deg, rgba(0,0,0,0) 25%, var(--paper)), url("./assets/images/lago_puelo_tour_circuito_turistico_cover.jpg") center/cover;
}
.hero-inner { padding-top: 2rem; padding-bottom: 5rem; }
.eyebrow { font-family: "Space Mono", monospace; font-size: .8rem; letter-spacing: .05em; }
.hero h1 { font-weight: 700; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; max-width: 560px; }
.subtitle { font-style: italic; font-size: 1.3rem; max-width: 380px; }
.hero #stroke-image {
  position: absolute;
  bottom: 0;
  width: 100%;
  object-fit: cover;
}
/* INTRO */
.lead-text { font-size: 1.1rem; }
.lead-text-2 { font-size: 1.3rem; color: #4a5a4d; }
.map-box { position: relative; margin: 0; border-radius: 6px; overflow: hidden; border: 2px dashed rgba(27,42,31,.3); }
.map-box figcaption {
  position: absolute; left: 10px; bottom: 10px;
  background: var(--paper); padding: .2rem .7rem; border-radius: 20px; font-size: .85rem;
}

/* PARADAS */
.stop {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 0;
}
.stop + .stop { border-top: 1px solid rgba(27,42,31,.15); }
.stop-body { flex: 1; }
.stop h2 { font-size: 1.3rem; font-weight: 600; display: flex; align-items: center; gap: .75rem; }
.tagline { font-style: italic; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.stop p { font-size: .95rem; margin-bottom: 0; }
.stop-img {
  width: 180px; height: 135px; object-fit: cover; flex-shrink: 0;
  border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.25);
  transform: rotate(1.5deg);
}
.stop:nth-child(even) .stop-img { transform: rotate(-1.5deg); }

.icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.2rem;
}
.c-brick { background: var(--brick); }
.c-purple { background: var(--purple); }
.c-wine { background: var(--wine); }
.c-copper { background: var(--copper); }

/* CTA */
.cta { background: rgba(27,42,31,.06); padding: 2rem 0; }
.qr {
  width: 80px; height: 80px; background: #fff; border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 3rem;
}

/* RESPONSIVE */
@media (max-width: 575px) {
  .stop { flex-direction: column-reverse; align-items: flex-start; }
  .stop-img { width: 100%; height: 180px; }
  .hero { background-position: 70% center; }
}


.stamp-border {
  /* Change this value to adjust the stamp perforation size: */
  --radius: 8px;

  background-image: 
    radial-gradient(
      var(--radius),
      transparent 98%,
      white
    ),
    linear-gradient(white 0 0);
  background-repeat: 
    round, 
    no-repeat;
  background-position:
    calc(var(--radius) * -1.5) calc(var(--radius) * -1.5),
    50%;
  background-size:
    calc(var(--radius) * 3) calc(var(--radius) * 3),
    calc(100% - var(--radius) * 3) calc(100% - var(--radius) * 3);
}