/* =========================================================
   RETREAT PAGES · Sacred Plants (sacred-plants.html) and Yoga & Breathwork (yoga-breathwork.html)
   Matías, 9-oct-2026: one page for each kind of retreat, told from the top, as a journey.
   Built from the patterns that already exist: the hero of Our Space (space.css), the text + photo
   and photo rows of Reciprocity (projects.html), the cards of the home page (home.css).
   No zoom on hover anywhere (Matías has asked many times).
========================================================= */

/* ---------- Hero: the same hero as Our Space, plus the facts line and the button ---------- */
.rp-hero .phero__in { padding-bottom: clamp(40px, 8vh, 88px); }
.rp-hero .phero__veil { background: linear-gradient(180deg, rgba(31,42,34,.38), rgba(31,42,34,.10) 38%, rgba(31,42,34,.80)); }
.rp-hero__meta { margin: 22px 0 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: var(--trk-caption); text-transform: uppercase; color: rgba(246,243,236,.86); }
.rp-hero__cta { display: flex; flex-direction: column; align-items: flex-start; margin-top: 30px; }
.rp-hero__micro { margin-top: 12px; padding-left: 4px; font-size: 13px; letter-spacing: .01em; color: rgba(246,243,236,.80); }
.rp-hero h1, .rp-hero .phero__sub { text-shadow: 0 2px 24px rgba(15,22,17,.45); }
@media (max-width: 900px) {
  .rp-hero .phero__in { padding-bottom: 104px; }
  .rp-hero .phero__veil { background: linear-gradient(180deg, rgba(31,42,34,.30), rgba(31,42,34,.30) 28%, rgba(31,42,34,.86) 62%, rgba(31,42,34,.90)); }
}

/* ---------- Text + photo, side by side (Reciprocity's .psplit) ---------- */
.rp-split { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 88px); align-items: center; }
.rp-split--flip { grid-template-columns: 5fr 7fr; }
.rp-split--flip .rp-split__photo { order: -1; }
.rp-split .h-display { margin: 0 0 clamp(22px, 3vh, 30px); max-width: 15ch; }
.rp-split .body-reading + .body-reading { margin-top: 16px; }
.rp-split__photo { margin: 0; }
.rp-split__photo img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
.rp-split__photo--tall img { aspect-ratio: 4 / 5; object-fit: cover; }
.rp-split__photo figcaption, .rp-row figcaption { margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--trk-caption); text-transform: uppercase; color: var(--ink-quiet); }
.rp-bridge { margin-top: 22px !important; font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 2vw, 27px); line-height: 1.3; color: var(--jungle-deep); max-width: 30ch; }
.rp-sig { display: block; margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--trk-eyebrow); text-transform: uppercase; color: var(--ink-quiet); }
@media (max-width: 900px) {
  .rp-split, .rp-split--flip, .rp-split--even { grid-template-columns: 1fr; }
  .rp-split__photo { order: -1; max-width: 560px; }
}

.rp-split--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .rp-split--even { grid-template-columns: 1fr; } }
.rp-split__photo--wide img { aspect-ratio: 5 / 4; object-fit: cover; object-position: 32% 50%; }

/* ---------- Section heads: title + one line under it ---------- */
.rp-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: end; }
.rp-head .h-display { margin: 0; max-width: 15ch; }
.rp-head__sub { font-family: var(--font-display); font-style: italic; font-size: clamp(21px, 2vw, 27px); line-height: 1.35; color: var(--ink-soft); max-width: 34ch; margin: 0; }
.rp-head__sub + .body-reading { margin-top: 14px; }
@media (max-width: 860px) { .rp-head { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- The Huni Kuin: a link to the team under the song ---------- */
.rp-team-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 14.5px; color: var(--ink); border-bottom: 1px solid rgba(31,42,34,.25); padding-bottom: 3px; transition: border-color .3s ease, color .3s ease; }
.rp-team-link:hover { color: var(--jungle-deep); border-color: var(--jungle-deep); }
.rp-team-link svg { width: 14px; height: 14px; }


/* ---------- The ceremonies: one card each, with the drawing from the blog ---------- */
.rp-cer { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.4vw, 20px); margin-top: clamp(36px, 5vh, 56px); }
.rp-cer__card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(31,42,34,.08); border-radius: var(--r-md); padding: clamp(22px, 2.4vw, 32px); box-shadow: 0 18px 40px -32px rgba(31,42,34,.35); }
.rp-cer__icon { width: 84px; height: 84px; display: block; margin: 0 0 18px -6px; }
.rp-cer__card h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(27px, 2.2vw, 32px); line-height: 1.05; color: var(--ink); margin: 0 0 10px; }
.rp-cer__card p { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.rp-cer__more { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--trk-eyebrow); text-transform: uppercase; color: var(--jungle-deep); }
.rp-cer__more svg { width: 13px; height: 13px; transition: transform .3s ease; }
.rp-cer__more:hover svg { transform: translateX(3px); }
.rp-cer__note { margin: clamp(26px, 4vh, 40px) 0 0; font-size: 15.5px; color: var(--ink-soft); text-align: center; }
@media (max-width: 1000px) { .rp-cer { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .rp-cer { grid-template-columns: 1fr; } .rp-cer__card { display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; } .rp-cer__icon { width: 64px; height: 64px; margin: 0; grid-row: span 3; } .rp-cer__more { padding-top: 12px; } }

/* ---------- Before, during and after ---------- */
.rp-hold .ceremony__facts { margin-top: clamp(36px, 5vh, 56px); padding: clamp(26px, 4vh, 38px) 0; border-top: 1px solid rgba(31,42,34,.12); border-bottom: 1px solid rgba(31,42,34,.12); }
.rp-hold__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.4vw, 20px); margin-top: clamp(32px, 5vh, 52px); }
.rp-hold__col { background: #fff; border: 1px solid rgba(31,42,34,.08); border-radius: var(--r-md); padding: clamp(24px, 2.6vw, 34px); }
.rp-hold__col h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.2vw, 32px); line-height: 1.05; margin: 10px 0 18px; color: var(--ink); }
.rp-hold__n { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--trk-eyebrow); color: var(--ink-quiet); }
.rp-hold__col ul { list-style: none; margin: 0; padding: 0; }
.rp-hold__col li { position: relative; padding: 12px 0 12px 22px; border-top: 1px solid rgba(31,42,34,.08); font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
.rp-hold__col li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 7px; height: 7px; border-radius: 50%; background: var(--jungle-quiet); }
@media (max-width: 900px) { .rp-hold__grid { grid-template-columns: 1fr; } }

/* ---------- The family: the photo, Maisie's words, then the guests in their own words ---------- */
.rp-family .family__fig img { height: auto; aspect-ratio: 3 / 2; object-position: center 45%; }
.rp-quote { margin: clamp(36px, 6vh, 64px) auto 0; max-width: 860px; text-align: center; }
.rp-quote p { margin: 0; font-family: var(--font-display); font-style: italic; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.22; color: var(--jungle-deep); }
.rp-quote cite { display: block; margin-top: 16px; font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--trk-eyebrow); text-transform: uppercase; color: var(--ink-quiet); }
.rp-voices { margin-top: clamp(56px, 9vh, 96px); }
.rp-voices .eyebrow-row { margin-bottom: 0; }

/* ---------- The two retreats, side by side, with the days ---------- */
.rp-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(36px, 5vh, 56px); align-items: start; }
.rp-ret { background: #fff; border: 1px solid rgba(31,42,34,.08); border-radius: var(--r-md); padding: clamp(24px, 2.8vw, 40px); box-shadow: 0 18px 40px -32px rgba(31,42,34,.35); }
.rp-ret__top { display: flex; align-items: flex-end; gap: 18px; }
.rp-ret__days { font-family: var(--font-display); font-weight: 400; font-size: clamp(64px, 6vw, 88px); line-height: .8; color: var(--jungle-deep); font-variant-numeric: lining-nums; }
.rp-ret__days small { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--trk-eyebrow); text-transform: uppercase; color: var(--ink-quiet); line-height: 1; }
.rp-ret__name { font-family: var(--font-display); font-style: italic; font-size: clamp(26px, 2.3vw, 33px); line-height: 1.05; color: var(--ink); margin: 0; }
.rp-ret__date { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-soft); }
.rp-ret ol { list-style: none; margin: clamp(22px, 3vh, 30px) 0 0; padding: 0; border-top: 1px solid rgba(31,42,34,.10); }
.rp-ret li { display: grid; grid-template-columns: 54px 14px 1fr; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(31,42,34,.07); font-size: 15px; line-height: 1.4; color: var(--ink-soft); }
.rp-ret li b { font-family: var(--font-mono); font-weight: 400; font-size: 10.5px; letter-spacing: var(--trk-caption); text-transform: uppercase; color: var(--ink-quiet); }
.rp-ret li i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--jungle-quiet); }
.rp-ret li.is-cer { color: var(--ink); font-weight: 500; }
.rp-ret li.is-cer i { background: var(--clay); border-color: var(--clay); }
.rp-ret__also { margin: 16px 0 0; font-size: 14.5px; color: var(--ink-soft); }
.rp-ret__price { margin: 18px 0 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: var(--trk-caption); text-transform: uppercase; color: var(--jungle-deep); }
.rp-key { display: flex; justify-content: center; gap: 22px; margin-top: 22px; font-size: 13px; color: var(--ink-quiet); }
.rp-key span { display: inline-flex; align-items: center; gap: 8px; }
.rp-key i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--jungle-quiet); display: inline-block; }
.rp-key .is-cer i { background: var(--clay); border-color: var(--clay); }
.rp-diff { margin: clamp(28px, 4vh, 40px) auto 0; max-width: 640px; text-align: center; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.6; color: var(--ink-soft); }
.rp-go { display: flex; justify-content: center; margin-top: 24px; }
@media (max-width: 860px) { .rp-two { grid-template-columns: 1fr; } }

/* ---------- Yoga: one day, from sunrise to night ---------- */
.rp-day { list-style: none; margin: clamp(36px, 5vh, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; position: relative; }
.rp-day::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: rgba(31,42,34,.16); }
.rp-day li { position: relative; padding: 30px clamp(10px, 1.4vw, 22px) 0 0; }
.rp-day li::before { content: ""; position: absolute; left: 0; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--jungle); }
.rp-day b { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: var(--trk-eyebrow); text-transform: uppercase; color: var(--jungle-deep); }
.rp-day span { display: block; margin-top: 10px; font-family: var(--font-display); font-size: clamp(20px, 1.6vw, 23px); line-height: 1.25; color: var(--ink); }
.rp-day__note { margin: clamp(26px, 4vh, 36px) 0 0; font-size: 14.5px; color: var(--ink-quiet); }
@media (max-width: 1000px) {
  .rp-day { grid-template-columns: 1fr; }
  .rp-day::before { left: 5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .rp-day li { padding: 0 0 22px 32px; }
  .rp-day li::before { top: 4px; }
  .rp-day span { margin-top: 4px; }
}

/* ---------- Yoga: the practices ---------- */
.rp-prac { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.4vw, 20px); margin-top: clamp(36px, 5vh, 56px); }
.rp-prac article { background: #fff; border: 1px solid rgba(31,42,34,.08); border-radius: var(--r-md); padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; }
.rp-prac .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--trk-eyebrow); color: var(--ink-quiet); }
.rp-prac h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.2vw, 31px); line-height: 1.05; margin: 10px 0 10px; color: var(--ink); }
.rp-prac p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.rp-prac .rp-cer__more { margin-top: auto; }
@media (max-width: 1000px) { .rp-prac { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .rp-prac { grid-template-columns: 1fr; } }

/* ---------- Photo rows (Reciprocity's .prow): every photo in a row has the same height ---------- */
.rp-row { display: grid; gap: clamp(10px, 1.4vw, 18px); margin-top: clamp(28px, 4vh, 44px); }
.rp-row figure { margin: 0; }
.rp-row img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
@media (max-width: 700px) { .rp-row { grid-template-columns: 1fr !important; } }

/* ---------- A full-bleed photo with a line over it (Reciprocity's .pband) ---------- */
.rp-band { position: relative; min-height: clamp(420px, 74vh, 760px); display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); }
.rp-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rp-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,42,34,0) 35%, rgba(31,42,34,.74)); }
.rp-band__in { position: relative; z-index: 1; width: 100%; max-width: var(--col-wide); margin: 0 auto; padding: 0 var(--gutter) clamp(32px, 6vh, 64px); }
.rp-band__in p { margin: 0; max-width: 820px; font-family: var(--font-display); font-style: italic; font-size: clamp(26px, 3.8vw, 50px); line-height: 1.14; color: #fff; }
.rp-band__in cite { display: block; margin-top: 16px; font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--trk-eyebrow); text-transform: uppercase; color: rgba(246,243,236,.82); }

/* ---------- Yoga: what's included ---------- */
.rp-incl { list-style: none; margin: clamp(32px, 5vh, 48px) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 64px); }
.rp-incl li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-top: 1px solid rgba(31,42,34,.10); font-size: clamp(16px, 1.15vw, 17.5px); line-height: 1.5; color: var(--ink); }
.rp-incl li svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--jungle); transform: translateY(2px); }
.rp-addon { margin: 22px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 70ch; }
.rp-addon b { font-weight: 500; color: var(--ink); }
.rp-places { margin-top: clamp(48px, 7vh, 72px); }
.rp-places .ospace__row { margin-top: 18px; }
.rp-places__label { font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 30px); color: var(--ink); }
.rp-places__label em { color: var(--jungle-deep); }
@media (max-width: 760px) { .rp-incl { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .rp-places .ospace__row { grid-template-columns: repeat(2, 1fr); } .rp-places .ospace__row a:last-child { grid-column: 1 / -1; } .rp-places .ospace__row a:last-child .ph { aspect-ratio: 16 / 9; } }

/* ---------- Reviews on the yoga page: the review cards of the home page ---------- */
.rp-reviews .testimonials--cards { margin-top: clamp(28px, 4vh, 44px); }

/* ---------- The call: one line that connects it to the page ---------- */
.rp-callnote { margin: -6px 0 14px; font-size: 16.5px; line-height: 1.5; color: var(--jungle); }

/* ---------- Our Retreats (the page that leads to both) ---------- */
.door__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--trk-caption); text-transform: uppercase; color: rgba(246,243,236,.92); }
.rp-unsure { margin: clamp(28px, 4vh, 40px) 0 0; text-align: center; font-size: clamp(16px, 1.15vw, 18px); color: var(--ink-soft); }
.rp-unsure a { color: var(--ink); border-bottom: 1px solid rgba(31,42,34,.3); }
.rp-unsure a:hover { border-color: var(--ink); }

/* One guest review, centred under the support cards */
.rp-onequote { grid-template-columns: 1fr !important; max-width: 760px; margin: clamp(28px, 4vh, 44px) auto 0; }
.rp-onequote .testimonial { text-align: center; }
.rp-onequote .testimonial__stars { justify-content: center; }

/* =========================================================
   SACRED PLANT RETREATS · Maisie's page plan (9-oct-2026): three journeys, integration, the plants, life here, begin
========================================================= */
/* Three journeys, same layout; the button always sits at the bottom of each card */
.sp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(36px, 5vh, 56px); align-items: stretch; }
.sp-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(31,42,34,.08); border-radius: var(--r-md); padding: clamp(24px, 2.6vw, 36px); box-shadow: 0 18px 40px -32px rgba(31,42,34,.35); scroll-margin-top: 110px; }
.sp-card__top { display: flex; align-items: flex-end; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid rgba(31,42,34,.10); }
.sp-card__days { font-family: var(--font-display); font-weight: 400; font-size: clamp(60px, 5.4vw, 80px); line-height: .8; color: var(--jungle-deep); font-variant-numeric: lining-nums; }
.sp-card__days small { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--trk-eyebrow); text-transform: uppercase; color: var(--ink-quiet); }
.sp-card h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: clamp(25px, 2.1vw, 31px); line-height: 1.05; color: var(--ink); }
.sp-card__sub { margin: 8px 0 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--trk-caption); text-transform: uppercase; color: var(--ink-quiet); }
.sp-card__desc p { margin: 18px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }
.sp-card__keys { list-style: none; margin: 22px 0 0; padding: 0; }
.sp-card__keys li { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid rgba(31,42,34,.07); font-size: 15px; line-height: 1.45; color: var(--ink); }
.sp-card__keys svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--jungle); transform: translateY(2px); }
.sp-card__foot { margin-top: auto; padding-top: 26px; }
.sp-sched { border-top: 1px solid rgba(31,42,34,.14); border-bottom: 1px solid rgba(31,42,34,.14); }
.sp-sched summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 0; cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--trk-caption); text-transform: uppercase; color: var(--ink); }
.sp-sched summary::-webkit-details-marker { display: none; }
.sp-sched summary i { position: relative; width: 12px; height: 12px; flex: 0 0 auto; }
.sp-sched summary i::before, .sp-sched summary i::after { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1.2px; background: currentColor; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.sp-sched summary i::after { transform: rotate(90deg); }
.sp-sched[open] summary i::after { transform: rotate(0); }
.sp-card__cta { width: 100%; justify-content: center; }
.sp-note { margin: clamp(22px, 3vh, 32px) auto 0; max-width: 640px; text-align: center; font-size: 14px; line-height: 1.6; color: var(--ink-quiet); }
@media (max-width: 1080px) { .sp-cards { grid-template-columns: 1fr; max-width: 680px; margin-left: auto; margin-right: auto; } }

/* Integration: Maisie's words beside the photo, then the four ways we stay with you */
.sp-integ .rp-split .h-display { margin-bottom: clamp(18px, 2.6vh, 26px); }
.sp-integ .after__grid { margin-top: clamp(44px, 6vh, 64px); }
.sp-integ .rp-team-link { margin-top: 8px; }

/* Meet the plants: four drawings; the open one shows its panel underneath */
.sp-plants__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(36px, 5vh, 56px); }
.sp-plant { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: clamp(20px, 2.2vw, 30px) 16px; background: transparent; border: 1px solid rgba(31,42,34,.12); border-radius: var(--r-md); cursor: pointer; color: var(--ink); font: inherit; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.sp-plant:hover { border-color: rgba(31,42,34,.3); }
.sp-plant.is-on { background: #fff; border-color: rgba(31,42,34,.22); box-shadow: 0 18px 40px -30px rgba(31,42,34,.4); }
.sp-plant img { width: clamp(70px, 7vw, 96px); height: auto; }
.sp-plant span { font-family: var(--font-display); font-size: clamp(22px, 1.9vw, 27px); line-height: 1; }
.sp-plant i { position: relative; width: 12px; height: 12px; color: var(--ink-quiet); }
.sp-plant i::before, .sp-plant i::after { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1.2px; background: currentColor; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.sp-plant i::after { transform: rotate(90deg); }
.sp-plant.is-on i::after { transform: rotate(0); }
.sp-plant:focus-visible { outline: 2px solid var(--jungle); outline-offset: 3px; }
.sp-panels { margin-top: 14px; }
.sp-panel { background: #fff; border: 1px solid rgba(31,42,34,.08); border-radius: var(--r-md); padding: clamp(24px, 3vw, 40px); }
.sp-panel h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.2vw, 32px); color: var(--ink); }
.sp-panel p { margin: 0; max-width: 68ch; font-size: clamp(16px, 1.15vw, 17.5px); line-height: 1.65; color: var(--ink-soft); }
.sp-panel .rp-cer__more { display: inline-flex; margin-top: 18px; padding-top: 0; }
@media (max-width: 760px) { .sp-plants__row { grid-template-columns: 1fr 1fr; } }

/* Life at Libélula: six photos, the same size */
.sp-gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.2vw, 16px); margin-top: clamp(36px, 5vh, 56px); }
.sp-gallery figure { margin: 0; }
.sp-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-md); }
.sp-gallery figcaption { margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--trk-caption); text-transform: uppercase; color: var(--ink-quiet); }
@media (max-width: 1000px) { .sp-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .sp-gallery { grid-template-columns: 1fr 1fr; } }

/* Begin your journey: the dates, then the two ways in */
.sp-dates { list-style: none; margin: clamp(32px, 5vh, 48px) 0 0; padding: 0; border-bottom: 1px solid rgba(31,42,34,.12); }
.sp-dates li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 130px; align-items: baseline; gap: 16px; padding: 20px 0; border-top: 1px solid rgba(31,42,34,.12); }
.sp-dates__when { font-family: var(--font-display); font-size: clamp(22px, 2vw, 28px); line-height: 1.15; color: var(--ink); }
.sp-dates__what { font-size: 15px; color: var(--ink-soft); }
.sp-dates a { justify-self: end; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--trk-caption); text-transform: uppercase; color: var(--jungle-deep); }
.sp-dates a svg { width: 13px; height: 13px; }
.sp-begin__ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: clamp(32px, 5vh, 48px); }
.sp-begin__ctas p { flex-basis: 100%; margin: 6px 0 0; text-align: center; font-size: 14.5px; color: var(--ink-soft); }
.sp-begin__ctas p a { color: var(--ink); border-bottom: 1px solid rgba(31,42,34,.3); }
@media (max-width: 700px) { .sp-dates li { grid-template-columns: 1fr; gap: 6px; } }
.sp-begin__ctas .btn--ghost { border: 1px solid rgba(31,42,34,.25); }

/* 9-oct (Matias): the cards keep their own height; JS evens the text and the lists (each schedule opens alone) */
.sp-cards { align-items: start; }
.sp-card__lead { margin: 22px 0 -8px; font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--jungle-deep); }
/* The schedule: days joined by a line; ceremony days in terracotta */
.sp-tl { list-style: none; margin: 4px 0 0; padding: 0; position: relative; }
.sp-tl::before { content: ""; position: absolute; left: 60px; top: 16px; bottom: 16px; width: 1px; background: rgba(31,42,34,.18); }
.sp-tl li { display: grid; grid-template-columns: 54px 14px 1fr; align-items: center; gap: 10px; padding: 8px 0; font-size: 14.5px; line-height: 1.4; color: var(--ink-soft); }
.sp-tl li b { font-family: var(--font-mono); font-weight: 400; font-size: 10.5px; letter-spacing: var(--trk-caption); text-transform: uppercase; color: var(--ink-quiet); }
.sp-tl li i { position: relative; z-index: 1; justify-self: center; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--jungle-quiet); background: #fff; }
.sp-tl li.is-cer { color: var(--ink); font-weight: 500; }
.sp-tl li.is-cer i { background: var(--clay); border-color: var(--clay); }
.sp-key { display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0 16px; font-size: 12.5px; color: var(--ink-quiet); }
.sp-key span { display: inline-flex; align-items: center; gap: 7px; }
.sp-key i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--jungle-quiet); display: inline-block; }
.sp-key .is-cer i { background: var(--clay); border-color: var(--clay); }
/* The PDF: a quiet link that opens the email pop-up */
.sp-pdf { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 14px 0 18px; font-size: 14px; color: var(--ink); }
.sp-pdf svg { width: 17px; height: 17px; color: var(--jungle-deep); }
.sp-pdf:hover { color: var(--jungle-deep); }
.sp-pdf:focus-visible { outline: 2px solid var(--jungle); outline-offset: 4px; border-radius: 4px; }
/* The schedule pop-up: the design of the campaign's programme guide pop-up, in the site's type */
.sg { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(20,34,18,.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sg.is-open { display: flex; animation: sg-fade .3s ease-out; }
@keyframes sg-fade { from { opacity: 0; } to { opacity: 1; } }
.sg * { box-sizing: border-box; }
.sg-box { position: relative; width: 100%; max-width: 860px; max-height: calc(100vh - 40px); overflow: auto; display: grid; grid-template-columns: .9fr 1.1fr; background: var(--paper); border-radius: 16px; box-shadow: 0 40px 90px -40px rgba(0,0,0,.6); color: var(--ink-soft); }
.sg-photo { position: relative; min-height: 100%; background: var(--forest, #1F2A22) center / cover no-repeat; }
.sg-photo span { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 20px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--trk-caption); text-transform: uppercase; color: rgba(246,243,236,.9); background: linear-gradient(to top, rgba(20,30,22,.8), transparent); }
.sg-body { padding: 44px 38px 32px; }
.sg-eyebrow { display: inline-block; position: relative; padding-left: 32px; margin-bottom: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--clay); }
.sg-eyebrow::before { content: ''; position: absolute; left: 0; top: 50%; width: 20px; height: 1px; background: var(--clay); }
.sg h2 { font-family: var(--font-display); font-size: clamp(32px, 3.2vw, 40px); font-weight: 300; line-height: 1.06; letter-spacing: -.01em; color: var(--ink); margin: 0 0 14px; }
.sg h2 em { font-style: italic; color: var(--jungle-deep); }
.sg-lead { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 16px; }
.sg-list { list-style: none; margin: 0 0 22px; padding: 0; }
.sg-list li { position: relative; padding: 8px 0 8px 26px; font-size: 14.5px; color: var(--ink); border-bottom: 1px solid rgba(31,42,34,.08); }
.sg-list li::before { content: '\2713'; position: absolute; left: 2px; color: var(--jungle); font-size: 13px; }
.sg-form label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--ink); }
.sg-form input[type=email], .sg-form input[type=text] { font: 400 16px var(--font-body); color: var(--ink); background: #fff; border: 1px solid rgba(31,42,34,.18); border-radius: 10px; padding: 12px 14px; min-height: 52px; width: 100%; }
.sg-form input[type=email]:focus, .sg-form input[type=text]:focus { outline: 2px solid var(--clay); outline-offset: 1px; border-color: transparent; }
.sg-form input[aria-invalid="true"] { border-color: #b85c2e; }
.sg-form input[type=text] { margin-bottom: 14px; }
.sg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.sg-ts { margin-top: 10px; }
.sg-submit { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin-top: 12px; padding: 17px 22px; border: 0; border-radius: 10px; cursor: pointer; background: var(--jungle-deep); color: var(--cream); font: 500 12px var(--font-body); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: background .25s ease, transform .25s ease; }
.sg-submit:hover { background: var(--jungle); transform: translateY(-1px); }
.sg-submit[disabled] { opacity: .7; cursor: wait; transform: none; }
.sg-submit span { font-size: 20px; letter-spacing: 0; }
.sg-consent { font-size: 12px; line-height: 1.6; color: var(--ink-quiet); margin: 12px 0 0; }
.sg-consent a { color: var(--ink-soft); }
.sg-error { font-size: 13px; color: #b85c2e; margin: 10px 0 0; }
.sg-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(246,243,236,.92); color: var(--ink); font-size: 22px; line-height: 1; }
.sg-close:focus-visible, .sg-submit:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
body.sg-lock { overflow: hidden; }
@media (max-width: 700px) {
  .sg { padding: 12px; align-items: flex-end; }
  .sg-box { grid-template-columns: 1fr; max-height: calc(100vh - 24px); }
  .sg-photo { min-height: 140px; }
  .sg-body { padding: 26px 20px 22px; }
  .sg-list { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sg.is-open { animation: none; } }