/* CONTIGO — Destination Spain page (builds on styles.css tokens) */

/* Hero */
.dhero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; align-items: end;
  padding: 7rem var(--gutter) clamp(3rem, 8vh, 6rem);
  color: var(--cream); overflow: hidden; isolation: isolate;
  --em: var(--cream);
}
.dhero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.dhero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, oklch(0.4 0.03 52 / 0.92) 0%, oklch(0.45 0.03 52 / 0.4) 40%, oklch(0.2 0.02 45 / 0.05) 70%, oklch(0.2 0.02 45 / 0.35) 100%);
}
.dhero__content { position: relative; z-index: 1; max-width: var(--maxw); width: 100%; margin-inline: auto; display: grid; gap: 1.2rem; justify-items: start; }
.dhero__kicker { font-family: var(--font-script); font-size: 2rem; line-height: 1.1; }
.dhero__title { font-size: clamp(2rem, 1.4rem + 3vw, 3.8rem); }
.dhero__lede { max-width: 46ch; font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem); line-height: 1.5; margin-bottom: 0.8rem; }
.dhero .btn { --_bg: var(--cream); --_ink: var(--red); }
.dhero .btn--ghost { --_bg: transparent; --_ink: var(--cream); }

/* Why */
.why { padding: var(--section-y) var(--gutter); }
.why > :not(.glitter-layer) { max-width: var(--maxw); margin-inline: auto; }
.why__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: end; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.why__head p { color: var(--muted); font-size: 1.15rem; max-width: 36ch; justify-self: end; }
.reasons-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.reason { padding-top: 1.2rem; border-top: 1px solid var(--line); }
.reason h3 { font-family: var(--font-script); font-weight: 400; font-size: clamp(2rem, 1.6rem + 1vw, 2.6rem); line-height: 1.1; margin-bottom: 0.4rem; text-shadow: var(--glow); }
.reason p { color: var(--muted); }

/* Strip */
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.strip img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* How */
.how { padding: var(--section-y) var(--gutter); }
.how > :not(.glitter-layer) { max-width: var(--maxw); margin-inline: auto; }
.how__head { display: grid; gap: 1.2rem; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.how__head p { color: var(--muted); font-size: 1.15rem; max-width: 46ch; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); counter-reset: none; }
.step { display: grid; gap: 0.6rem; align-content: start; }
.step__num { font-family: var(--font-body); font-weight: 200; font-size: 3.4rem; line-height: 1; color: var(--mark); text-shadow: var(--glow); }
.step h3 { font-size: 1.25rem; font-weight: 700; }
.step p { color: var(--muted); }
.note {
  margin-top: clamp(3rem, 6vw, 4.5rem); padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--line); border-radius: 1rem; display: grid; gap: 0.5rem; max-width: 48rem;
}
.note h3 { font-family: var(--font-script); font-weight: 400; font-size: 2.2rem; line-height: 1.1; color: var(--mark); text-shadow: var(--glow); }
.note p { color: var(--muted); }

/* Getaways */
.getaways { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.getaways__img { width: 100%; height: 100%; min-height: 26rem; object-fit: cover; }
.getaways__content { padding: var(--section-y) var(--gutter); display: grid; gap: 1.4rem; align-content: center; justify-items: start; max-width: 40rem; }
.getaways__content > p:not(.chapter-mark) { color: var(--muted); font-size: 1.12rem; }

/* Plan */
.plan { padding: var(--section-y) var(--gutter); text-align: center; }
.plan > :not(.glitter-layer) { max-width: 46rem; margin-inline: auto; }
.plan__title { max-width: none; margin-bottom: 1.4rem; }
.plan > p { color: var(--muted); font-size: 1.15rem; }
.plan__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 2.2rem; }

@media (max-width: 1080px) {
  .reasons-grid, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .getaways { grid-template-columns: 1fr; }
  .getaways__img { min-height: 0; aspect-ratio: 16 / 10; height: auto; }
}
@media (max-width: 760px) {
  .why__head { grid-template-columns: 1fr; }
  .why__head p { justify-self: start; }
  .reasons-grid, .steps { grid-template-columns: 1fr; }
  .strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .strip img { flex: 0 0 72%; scroll-snap-align: start; }
  .plan__actions .btn { width: 100%; }
}