/* Ready-made package pages (tools/build-packages.py).
   One job: pick the trip in a few taps and see the price instantly.
   Site palette and tokens: white, ash (--lx-tint), black, blue accent; --gut, --sec, --s*, --t-*. */

.pk4 { color: var(--lx-text); }
.pk4 h2 { font-size: var(--t-xl) !important; margin: 0 0 var(--s4) !important; }
.pk4-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Title + three photos */
.pk4-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s6); align-items: end; padding: var(--s5) var(--gut) var(--s5); }
.pk4-hero .pk-crumbs, .pk4-hero .pk-crumbs a { color: var(--lx-muted) !important; font-size: var(--t-xs); }
.pk4 h1 { margin: var(--s3) 0 var(--s3) !important; font-size: clamp(28px, 1.2rem + 1.4vw, 40px) !important; line-height: 1.12 !important; }
.pk4-lead { margin: 0 0 var(--s3); font-size: var(--t-md); line-height: 1.55; color: var(--lx-muted); max-width: 54ch; }
.pk4-route { margin: 0; font-size: var(--t-sm); font-weight: 700; }
.pk4-photos { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--pgap, 6px); height: clamp(220px, 22vw, 320px); }
.pk4-photos figure { position: relative; margin: 0; overflow: hidden; background: var(--lx-tint); }
.pk4-photos figure:first-child { grid-row: 1 / span 2; }
.pk4-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk4-photos figcaption { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; background: rgba(255, 255, 255, .9); font-size: 12px; font-weight: 600; }
.pk4-photos figure:first-child figcaption { display: none; }

/* Calculator */
.pk4-calc { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s5); margin: 0 var(--gut); padding: var(--s5); background: var(--lx-tint); align-items: start; scroll-margin-top: calc(var(--header-h, 72px) + 12px); }
.pk4-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s5); }
.pk4-ctl { display: grid; gap: var(--s2); align-content: start; min-width: 0; }
.pk4-lbl { font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lx-muted); }
.pk4-seg { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pk4-chip { min-height: 44px; padding: 0 var(--s4); border: 1px solid #cfd3d8; border-radius: 999px; background: var(--lx-white); color: var(--lx-text); font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.pk4-chip:hover { border-color: var(--lx-text); }
.pk4-chip[aria-pressed="true"] { background: var(--lx-text); border-color: var(--lx-text); color: #fff; }
.pk4-chip:focus-visible, .pk4-step button:focus-visible, .pk4-select:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: 2px; }
.pk4-select { min-height: 44px; padding: 0 var(--s4); border: 1px solid #cfd3d8; border-radius: 999px; background: var(--lx-white); color: var(--lx-text); font: inherit; font-size: var(--t-sm); font-weight: 600; }
.pk4-fixed { margin: 0; min-height: 44px; display: flex; align-items: center; font-weight: 700; }
.pk4-fixed small { margin-left: 6px; font-weight: 400; color: var(--lx-muted); }
.pk4-step { display: inline-flex; align-items: center; width: max-content; border: 1px solid #cfd3d8; border-radius: 999px; background: var(--lx-white); }
.pk4-step button { width: 44px; height: 44px; border: 0; background: none; font-size: 20px; cursor: pointer; border-radius: 999px; }
.pk4-step output { min-width: 32px; text-align: center; font-weight: 700; }
.pk4-extras { grid-column: 1 / -1; border-top: 1px solid #dde0e4; padding-top: var(--s3); }
.pk4-extras summary { cursor: pointer; font-size: var(--t-sm); font-weight: 700; list-style: none; }
.pk4-extras summary::-webkit-details-marker { display: none; }
.pk4-extras summary::before { content: "+ "; color: var(--lx-accent); }
.pk4-extras[open] summary::before { content: "– "; }
.pk4-extras small { font-weight: 400; color: var(--lx-muted); }
.pk4-ticks { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.pk4-tick { position: relative; }
.pk4-tick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pk4-tick span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s4) 0 34px; border: 1px solid #cfd3d8; border-radius: 999px; background: var(--lx-white); font-size: var(--t-sm); position: relative; }
.pk4-tick span::before { content: ""; position: absolute; left: 12px; width: 14px; height: 14px; border: 1.5px solid var(--lx-muted); border-radius: 50%; }
.pk4-tick input:checked + span { border-color: var(--lx-text); font-weight: 600; }
.pk4-tick input:checked + span::before { background: var(--lx-text); border-color: var(--lx-text); box-shadow: inset 0 0 0 3px #fff; }

.pk4-result { position: sticky; top: calc(var(--header-h, 72px) + var(--s4)); display: grid; gap: var(--s2); padding: var(--s5); background: var(--lx-white); }
.pk4-result p { margin: 0; }
.pk4-result-lbl { font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lx-muted); }
.pk4-pp strong { font-size: 40px; line-height: 1.05; letter-spacing: -.01em; display: inline-block; }
.pk4-pp strong.is-new { animation: pk4-pop .35s ease; }
@keyframes pk4-pop { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pk4-pp span { color: var(--lx-muted); }
.pk4-total { font-weight: 700; }
.pk4-basis { font-size: var(--t-xs); color: var(--lx-muted); line-height: 1.5; }
.is-loading ~ .pk4-result .pk4-pp { opacity: .5; }
.pk4-book { margin-top: var(--s3); width: 100%; justify-content: center; }
.pk4-call { text-align: center; font-size: var(--t-sm); font-weight: 600; color: var(--lx-accent); }

/* Plan and details */
.pk4-plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--s7); padding: var(--sec) var(--gut) 0; align-items: start; }
.pk2-days { list-style: none; margin: 0; padding: 0; }
.pk2-day { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--lx-line); }
.pk2-day:first-child { border-top: 0; padding-top: 0; }
.pk2-day-head { grid-row: 1 / span 4; display: flex; flex-direction: column; gap: 2px; }
.pk2-day-no { font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lx-accent); }
.pk2-stay { font-size: var(--t-xs); color: var(--lx-muted); line-height: 1.35; }
.pk2-stay i { display: none; }
.pk2-day h3 { margin: 0 0 var(--s1) !important; font-size: var(--t-lg) !important; }
.pk2-day p { margin: 0; line-height: 1.6; }
.pk2-places { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pgap, 6px); }
.pk2-places li { background: var(--card-bg, #f9f9f9); min-width: 0; }
.pk2-places img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; }
.pk2-places b { display: block; padding: 6px var(--s2) 0; font-size: var(--t-xs); line-height: 1.25; }
.pk2-places span { display: none; }

.pk4-info { display: grid; gap: var(--s6); }
.pk4-info h2 { font-size: var(--t-lg) !important; margin-bottom: var(--s3) !important; }
.pk2-yes, .pk2-no, .pk2-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: var(--t-sm); line-height: 1.5; }
.pk2-yes li, .pk2-no li { padding-left: 22px; position: relative; }
.pk2-yes li::before, .pk2-no li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.pk2-yes li::before { content: "✓"; color: var(--lx-accent); }
.pk2-no li::before { content: "–"; color: var(--lx-muted); }
.pk2-notes li { padding: var(--s2) var(--s3); background: var(--lx-tint); }
.pk2-muted { margin: 0 0 var(--s2); font-size: var(--t-sm); color: var(--lx-muted); }
.pk2-hotel-list { list-style: none; margin: 0; padding: 0; font-size: var(--t-sm); }
.pk2-hotel-list li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--lx-line); }
.pk2-cancel { margin: 0; font-size: var(--t-sm); }
.pk2-cancel div { padding: var(--s2) 0; border-top: 1px solid var(--lx-line); }
.pk2-cancel dt { font-weight: 700; }
.pk2-cancel dd { margin: 0; }
.pk2-faq details { border-top: 1px solid var(--lx-line); font-size: var(--t-sm); }
.pk2-faq summary { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; cursor: pointer; font-weight: 700; list-style: none; }
.pk2-faq summary::-webkit-details-marker { display: none; }
.pk2-faq summary::after { content: "+"; color: var(--lx-accent); }
.pk2-faq details[open] summary::after { content: "–"; }
.pk2-faq p { margin: 0 0 var(--s3); line-height: 1.55; }

.pk4-more { padding: var(--sec) var(--gut) 0; }
.pk4-city { display: inline-block; margin-top: var(--s4); font-weight: 700; color: var(--lx-accent); }

.pk4-bar { display: none; }

@media (max-width: 1100px) {
  .pk4-calc { grid-template-columns: minmax(0, 1fr) 300px; }
  .pk4-plan { grid-template-columns: minmax(0, 1fr); }
  .pk4-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .pk4-hero { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding-top: var(--s3); }
  .pk4-photos { order: -1; margin: 0 calc(-1 * var(--gut)); height: 200px; }
  .pk4-calc { grid-template-columns: minmax(0, 1fr); margin: 0; padding: var(--s5) var(--gut); }
  .pk4-form { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .pk4-chip { padding: 0 var(--s3); }
  .pk4-result { position: static; }
  .pk4-info { grid-template-columns: minmax(0, 1fr); }
  .pk2-day { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .pk2-day-head { grid-row: auto; flex-direction: row; gap: var(--s3); align-items: baseline; }
  .pk2-places { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); }
  .pk2-places::-webkit-scrollbar { display: none; }
  .pk2-places li { flex: 0 0 44%; scroll-snap-align: start; }
  .pk4-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--gut) calc(var(--s2) + env(safe-area-inset-bottom)); background: var(--lx-white); border-top: 1px solid var(--lx-line); transition: transform .2s; }
  .pk4-bar.is-hidden { transform: translateY(110%); }
  .pk4-bar strong { font-size: var(--t-lg); }
  .pk4-bar small { color: var(--lx-muted); }
  body:has(.pk4-bar:not(.is-hidden)) .floating-whatsapp, body:has(.pk4-bar:not(.is-hidden)) .whatsapp-floating-wrap { display: none !important; }
}
a.lx-btn.lx-btn-solid.pk4-book, .pk4-bar a.lx-btn-solid { background: #111 !important; color: #fff !important; border-color: #111 !important; }