/* packages lane: owner review round 3 (2026-10-11). Loads after site.css.
   #19: every section of /paquetes/ sits in the site container (.wrap, 1248px max, the same gutters), so the hero, the
   heading row, the cards, the booking card and the FAQ share one left and one right edge at 390, 768 and 1280.
   Scoped to .pk-page so the experiences page (which shares .pg-ghero and .ed-faq) is untouched. */

/* Hero: the 38/62 words-and-photo split (design system §12), now inside the container instead of bleeding. */
.pk-page .pk-hero-sec { padding-top: var(--space-5); }
.pk-page .pk-hero .pg-ghero-field { padding: var(--space-6) var(--space-4) var(--space-7); }
.pk-page .pk-hero h1 { font-size: clamp(44px, 9vw, 64px); line-height: 1.02; max-width: 11ch; }
@media (min-width: 1024px) {
  .pk-page .pk-hero { min-height: clamp(520px, calc(100vh - 160px), 640px); }
  .pk-page .pk-hero .pg-ghero-field { padding: var(--space-7) var(--space-6); }
  .pk-page .pk-hero h1 { font-size: clamp(48px, 4.6vw, 64px); }
}

/* Heading row: the rule runs the full container; the line beside the title fills the right side. */
.pk-page .pk-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.pk-page .pk-head .label { margin: 0 0 var(--space-2); }
.pk-page .pk-head h2 { margin: 0; }
.pk-page .pk-head .t-lead { margin: 0; max-width: 34rem; }
@media (min-width: 900px) {
  .pk-page .pk-head { grid-template-columns: 7fr 5fr; column-gap: var(--space-6); align-items: end; }
}

/* Cards: one all-inclusive price per person, the room line under it. */
.pk-page .pk-price { font: 800 32px/1.1 var(--font-display); }
.pk-page .pk-from { display: block; font: 600 15px/1.4 var(--font-text); color: var(--ink-muted); margin-bottom: 2px; }
.pk-page .pk-per { display: block; font: 400 15px/1.4 var(--font-text); color: var(--ink-muted); margin-top: 4px; }
.pk-page .pk-room { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-muted); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.pk-page .pk-eg { max-width: none; font-size: 15px; }

/* Booking card: full container width; copy beside the form from 900px. */
.pk-page .pk-book-sec { padding: var(--space-6) 0 var(--space-8); scroll-margin-top: 96px; }
.pk-page .pk-book { display: grid; gap: var(--space-5); background: var(--surface-raised); border: 1px solid var(--line); border-top: 6px solid var(--sol); padding: var(--space-5) var(--space-4); }
.pk-page .pk-book-copy h2 { margin: 0 0 var(--space-3); }
.pk-page .pk-book-copy .t-lead { margin: 0; }
.pk-page .pk-book .pg-form { padding: 0; background: none; gap: var(--space-5); }
@media (min-width: 768px) { .pk-page .pk-book { padding: var(--space-6); } }
@media (min-width: 900px) {
  .pk-page .pk-book { grid-template-columns: 5fr 7fr; column-gap: var(--space-7); padding: var(--space-7); align-items: start; }
}

/* FAQ: title and actions on the left, questions on the right, both inside the container. */
.pk-page .pk-faq { display: grid; gap: var(--space-5); }
.pk-page .pk-faq-head h2 { margin: 0; }
.pk-page .pk-faq-head .x-actions { margin-top: var(--space-5); }
.pk-page .pk-faq .ed-faq { max-width: none; }
@media (min-width: 900px) {
  .pk-page .pk-faq { grid-template-columns: 5fr 7fr; column-gap: var(--space-7); align-items: start; }
}

/* Tablet: a wider photo so the headline is above the fold at 768. */
@media (min-width: 600px) and (max-width: 1023px) { .pk-page .pk-hero > .ph { aspect-ratio: 16 / 9; } }

/* Below 900px the questions come before the WhatsApp and groups buttons. */
@media (max-width: 899px) {
  .pk-page .pk-faq { display: flex; flex-direction: column; }
  .pk-page .pk-faq-head { display: contents; }
  .pk-page .pk-faq-head h2 { order: 1; }
  .pk-page .pk-faq .ed-faq { order: 2; }
  .pk-page .pk-faq-head .x-actions { order: 3; margin-top: 0; }
}

/* Product page (owner 2026-10-11: "PDP style", more than four people). Left: the length tabs, what each includes
   (with each part's value and the saving once the package is really cheaper) and photos. Right: the buying card,
   sticky on desktop, with a live price for the length, the room and the party. */
.pk-page .pk-pdp-sec { scroll-margin-top: 96px; }
.pk-page .pk-pdp { display: grid; gap: var(--space-6); }
.pk-page .pk-pdp-main > .label { margin: 0 0 var(--space-2); }
.pk-page .pk-pdp-main > h2 { margin: 0 0 var(--space-3); }
.pk-page .pk-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin: var(--space-5) 0 var(--space-4); }
.pk-page .pk-tabs button { display: grid; gap: 2px; text-align: left; padding: var(--space-3); min-height: 64px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font: 400 15px/1.3 var(--font-text); cursor: pointer; transition: background-color var(--duration-move, .2s) ease, border-color var(--duration-move, .2s) ease; }
.pk-page .pk-tabs button b { font: 700 20px/1.1 var(--font-display); }
.pk-page .pk-tabs button span { color: var(--ink-muted); font-size: 14px; }
.pk-page .pk-tabs button[aria-selected="true"] { background: var(--sol); border-color: var(--ink); }
.pk-page .pk-tabs button[aria-selected="true"] span { color: var(--ink); }
.pk-page .pk-panel h3 { margin: 0 0 var(--space-3); }
.pk-page .pk-incl { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.pk-page .pk-incl li { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.pk-page .pk-incl li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; margin-right: var(--space-2); background: url("../logos/casa-oro-sol-color.svg") center / contain no-repeat; }
.pk-page .pk-incl li span { flex: 1; }
.pk-page .pk-incl s { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pk-page .pk-deal { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); background: var(--sol); font-size: 17px; }
.pk-page .pk-pics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: var(--space-5); }
.pk-page .pk-pics .ph { aspect-ratio: 4 / 5; }
.pk-page .pk-buy { background: var(--surface-raised); border: 1px solid var(--line); border-top: 6px solid var(--sol); padding: var(--space-5) var(--space-4); }
.pk-page .pk-buy h2 { margin: 0 0 var(--space-4); }
.pk-page .pk-buy .pg-form { padding: 0; background: none; gap: var(--space-4); }
.pk-page .pk-rooms, .pk-page .pk-nights { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.pk-page .pk-est { margin: 0; padding: var(--space-3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 16px; }
.pk-page .pk-est b { font: 800 30px/1.1 var(--font-display); }
.pk-page .pk-est span { display: block; color: var(--ink-muted); font-size: 15px; margin-top: 2px; }
.pk-page .pk-fine { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
@media (min-width: 1024px) {
  .pk-page .pk-pdp { grid-template-columns: minmax(0, 7fr) minmax(340px, 5fr); column-gap: var(--space-8); align-items: start; }
  .pk-page .pk-buy { position: sticky; top: 104px; padding: var(--space-5); max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; }
}

/* Airport transfer, three ways (owner 2026-10-20): not in the package; prices come from the Transport page's data. */
.pk-page .pk-air { margin-top: var(--space-5); padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-top: 6px solid var(--sol); scroll-margin-top: 96px; }
.pk-page .pk-air h3 { margin: 0 0 var(--space-2); }
.pk-page .pk-air-lead { margin: 0 0 var(--space-4); font-size: 17px; line-height: 1.5; color: var(--ink-muted); }
.pk-page .pk-air-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.pk-page .pk-air-opts li { display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-3); border-top: 1px solid var(--line-strong); }
.pk-page .pk-air-opts li > b { font: 700 20px/1.2 var(--font-display); }
.pk-page .pk-air-price { font: 700 18px/1.3 var(--font-text); font-variant-numeric: tabular-nums; }
.pk-page .pk-air-opts p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink-muted); }
.pk-page .pk-air-opts .co-btn { justify-self: start; }