/* =====================================================================
   WILD FoREST — BOOKING PAGE  (book.html)
   Loaded after css/styles.css, so it reuses the design tokens (--gold,
   --forest-deep, --step-*, …). Modern hotel-style: calm, one column of
   content plus a sticky "Your stay" summary.
   ===================================================================== */
.book-page{background:var(--forest-deep);color:var(--cream);min-height:100vh;}
.book-page h1,.book-page h2,.book-page h3{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-.015em;}
.book-page :focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px;}

/* ---- top bar + progress ----
   (a <div>, not <header>: css/styles.css turns every <header> into the site's
   floating pill, and every <section> gets 132px of padding — the booking page
   deliberately uses neither element.) */
.bk-top{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 6vw;background:rgba(11,26,18,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(203,217,204,.1);
}
.bk-back{color:var(--mist);font-size:.9rem;white-space:nowrap;transition:color .2s;}
.bk-back:hover{color:var(--gold);}
.bk-brand img{height:38px;width:auto;display:block;}
.bk-progress{color:var(--fog);font-size:.82rem;min-width:88px;text-align:right;}
.bk-steps{
  list-style:none;display:flex;gap:6px;max-width:1120px;margin:22px auto 0;padding:0 6vw;
}
.bk-steps li{
  flex:1;min-width:0;padding-top:8px;border-top:3px solid rgba(203,217,204,.15);
  color:var(--fog);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bk-steps li.is-done{border-color:var(--gold-soft);}
.bk-steps li.is-current{border-color:var(--gold);color:var(--cream);}
.bk-steps a{color:inherit;}
.bk-steps a:hover{color:var(--gold);}
@media (max-width:640px){.bk-steps li{font-size:.62rem;letter-spacing:.04em;}.bk-steps li:not(.is-current){text-indent:-9999px;}}

/* ---- layout ---- */
.bk-layout{
  max-width:1120px;margin:28px auto 90px;padding:0 6vw;display:grid;gap:32px;grid-template-columns:minmax(0,1fr);
}
.bk-summary{order:-1;}
@media (min-width:900px){
  .bk-layout{grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start;}
  .bk-summary{order:0;position:sticky;top:96px;}
}
.bk-main:focus{outline:none;}
.bk-step{animation:bkIn .45s var(--ease-out) both;}
@keyframes bkIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.bk-step{animation:none;}}
.bk-step h1{font-size:var(--step-3);line-height:1.1;margin:4px 0 10px;}
.bk-step h1:focus{outline:none;}
.bk-kicker{color:var(--gold);text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;font-weight:600;}
.bk-sub{color:var(--mist);font-size:1rem;line-height:1.6;margin-bottom:24px;max-width:60ch;}
.bk-h2{font-size:var(--step-1);margin:34px 0 12px;}
.bk-h3{font-size:1.05rem;margin:18px 0 6px;}
.bk-body{color:var(--cream);line-height:1.7;font-size:.98rem;}
.bk-meta{color:var(--gold);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin:-4px 0 8px;}
.bk-fine{color:var(--fog);font-size:.84rem;line-height:1.5;}
.bk-hint{color:var(--fog);margin:18px 0;}
.bk-note{color:var(--fog);font-size:.9rem;line-height:1.6;margin:14px 0;}
.bk-note a{color:var(--gold);border-bottom:1px solid rgba(210,166,60,.5);}
.bk-note.is-warn{color:#f0c987;}
.bk-banner{background:rgba(210,166,60,.14);border:1px dashed var(--gold);color:var(--gold);padding:10px 14px;border-radius:8px;font-size:.8rem;letter-spacing:.06em;margin-bottom:18px;}

/* ---- dorm selector + detail ---- */
.bk-seg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 22px;}
.bk-seg-btn{
  text-align:left;padding:14px 16px;background:var(--charcoal-soft);color:var(--cream);cursor:pointer;
  border:1px solid rgba(203,217,204,.18);border-radius:var(--radius);font:inherit;
  transition:border-color .2s,background .2s;
}
.bk-seg-btn b{display:block;font-family:'Fraunces',serif;font-size:1.05rem;}
.bk-seg-btn small{display:block;color:var(--fog);font-size:.78rem;margin-top:3px;}
.bk-seg-btn:hover{border-color:rgba(210,166,60,.5);}
.bk-seg-btn.is-on{border-color:var(--gold);background:rgba(210,166,60,.09);}
@media (max-width:520px){.bk-seg{grid-template-columns:1fr;}}
.bk-dorm .bk-h2{margin-top:22px;}
.bk-photo-main{aspect-ratio:16/9;border-radius:var(--radius);background-size:cover;background-position:center;background-color:var(--charcoal-soft);}
.bk-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px;}
.bk-thumb{aspect-ratio:16/10;border:2px solid transparent;border-radius:6px;background-size:cover;background-position:center;cursor:pointer;opacity:.7;transition:opacity .2s,border-color .2s;}
.bk-thumb:hover{opacity:1;}
.bk-thumb.is-on{border-color:var(--gold);opacity:1;}
.bk-rating{color:var(--gold-soft);font-size:.92rem;margin-bottom:6px;min-height:1.3em;}
.bk-quotes{margin-top:16px;display:grid;gap:12px;}
.bk-quote{background:var(--charcoal-soft);border-left:3px solid var(--gold);padding:14px 16px;border-radius:0 8px 8px 0;}
.bk-quote-stars{color:var(--gold);font-size:.8rem;letter-spacing:.1em;}
.bk-quote blockquote{font-size:.92rem;line-height:1.6;color:var(--cream);margin:6px 0;}
.bk-quote figcaption{color:var(--fog);font-size:.8rem;}

/* ---- packages ---- */
.bk-pkgs{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:640px){.bk-pkgs{grid-template-columns:1fr;}}
.bk-pkg{display:flex;flex-direction:column;background:var(--charcoal-soft);border:1px solid rgba(203,217,204,.18);border-radius:var(--radius);transition:border-color .2s,background .2s;}
.bk-pkg.is-on{border-color:var(--gold);background:rgba(210,166,60,.09);}
.bk-pkg-btn{display:flex;flex-direction:column;gap:6px;text-align:left;padding:16px;background:none;border:0;color:inherit;font:inherit;cursor:pointer;flex:1;}
.bk-pkg-name{font-family:'Fraunces',serif;font-size:1.3rem;}
.bk-pkg-price{color:var(--fog);font-size:.85rem;}
.bk-pkg-price b{color:var(--gold);font-family:'Fraunces',serif;font-size:1.6rem;}
.bk-pkg-lede{color:var(--mist);font-size:.86rem;line-height:1.55;}
.bk-more{padding:0 16px 14px;}
.bk-more summary{cursor:pointer;color:var(--gold);font-size:.82rem;padding:6px 0;}
.bk-more ul{list-style:none;margin-top:6px;}
.bk-more li{position:relative;padding:5px 0 5px 22px;font-size:.84rem;color:var(--cream);}
.bk-more li::before{content:'✓';position:absolute;left:0;color:var(--gold);}

/* ---- forms ---- */
.bk-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:8px;}
.bk-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:640px){.bk-grid3,.bk-grid2{grid-template-columns:1fr;}}
.bk-field{margin-bottom:16px;}
.bk-field label{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold);margin-bottom:8px;font-weight:600;}
.bk-field input,.bk-field select,.bk-field textarea{
  width:100%;background:var(--forest);border:1px solid rgba(203,217,204,.22);color:var(--cream);
  padding:13px 14px;border-radius:6px;font:inherit;font-size:.95rem;
}
.bk-field textarea{resize:vertical;min-height:84px;}
.bk-field input[aria-invalid="true"]{border-color:#ff9d8a;}
.bk-err{color:#ff9d8a;font-size:.84rem;margin-top:6px;min-height:0;}
.bk-err:empty{display:none;}
.bk-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.bk-checks .bk-h2{margin-top:10px;}
.bk-check{margin-bottom:12px;}
.bk-check label{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;line-height:1.5;cursor:pointer;}
.bk-check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--gold);cursor:pointer;}
.bk-check a{color:var(--gold);border-bottom:1px solid rgba(210,166,60,.5);}
.bk-avail{margin:6px 0 4px;padding:14px 16px;border-radius:8px;font-size:.92rem;line-height:1.55;color:var(--mist);min-height:0;}
.bk-avail:empty{display:none;}
.bk-avail.is-ok{background:rgba(70,160,100,.13);border:1px solid rgba(90,190,120,.45);color:var(--cream);}
.bk-avail.is-err{background:rgba(255,157,138,.1);border:1px solid rgba(255,157,138,.5);color:#ffd3c9;}
.bk-avail small{display:block;color:var(--fog);margin-top:4px;}
.bk-avail a{color:var(--gold);border-bottom:1px solid rgba(210,166,60,.5);}

/* ---- add-ons / experiences ---- */
.bk-list{display:grid;gap:12px;margin:8px 0 18px;}
.bk-row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px;background:var(--charcoal-soft);border:1px solid rgba(203,217,204,.14);border-radius:var(--radius);transition:border-color .2s;}
.bk-row.is-on{border-color:var(--gold);}
.bk-emoji{font-size:1.7rem;line-height:1;}
.bk-row-main b{display:block;font-family:'Fraunces',serif;font-size:1.05rem;margin-bottom:3px;}
.bk-row-main p{color:var(--fog);font-size:.86rem;line-height:1.55;}
.bk-row-main .bk-fine{margin-top:4px;font-size:.78rem;}
.bk-cat{display:block;color:var(--gold);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:2px;}
.bk-row-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
.bk-price{font-family:'Fraunces',serif;color:var(--gold);font-size:1.15rem;font-variant-numeric:tabular-nums;}
.bk-add{padding:9px 16px;font-size:.74rem;letter-spacing:.08em;white-space:nowrap;}
.bk-qty{display:flex;align-items:center;gap:6px;}
.bk-qty button{width:34px;height:34px;border-radius:50%;border:1px solid rgba(210,166,60,.6);background:none;color:var(--gold);font-size:1.1rem;cursor:pointer;}
.bk-qty button:disabled{opacity:.35;cursor:not-allowed;}
.bk-qty span{min-width:22px;text-align:center;font-weight:600;}
@media (max-width:560px){
  .bk-row{grid-template-columns:auto 1fr;}
  .bk-row-side{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;}
}
.bk-runtotal{font-size:1.05rem;margin:6px 0;}
.bk-runtotal b{font-family:'Fraunces',serif;color:var(--gold);font-size:1.3rem;}

/* ---- nav buttons ---- */
.bk-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:28px;}
.bk-back-btn{background:none;border:0;color:var(--mist);font:inherit;font-size:.92rem;cursor:pointer;padding:10px 4px;}
.bk-back-btn:hover{color:var(--gold);}
.bk-next{min-width:230px;text-align:center;}
.bk-next:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;}
@media (max-width:560px){.bk-nav{flex-direction:column-reverse;align-items:stretch;}.bk-next{min-width:0;width:100%;}.bk-back-btn{text-align:center;}}

/* ---- whatsapp card (discreet) ---- */
.bk-wa{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:38px;padding:16px 18px;border:1px dashed rgba(203,217,204,.28);border-radius:var(--radius);}
.bk-wa b{font-family:'Fraunces',serif;font-size:1rem;}
.bk-wa p{color:var(--fog);font-size:.84rem;line-height:1.5;margin-top:3px;}
.bk-wa .btn{white-space:nowrap;padding:10px 16px;font-size:.78rem;}
@media (max-width:560px){.bk-wa{flex-direction:column;align-items:stretch;text-align:left;}}

/* ---- summary ---- */
.bk-sum-details{background:var(--charcoal-soft);border:1px solid rgba(203,217,204,.14);border-radius:var(--radius);}
.bk-sum-details>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;cursor:pointer;font-family:'Fraunces',serif;font-size:1.1rem;}
.bk-sum-details>summary::-webkit-details-marker{display:none;}
.bk-sum-details>summary b{color:var(--gold);font-variant-numeric:tabular-nums;}
@media (min-width:900px){.bk-sum-details>summary{cursor:default;pointer-events:none;}.bk-sum-details>summary b{display:none;}}
.bk-sum-inner{padding:0 18px 18px;}
.bk-sum-inner .bk-h2{display:none;}
@media (min-width:900px){.bk-sum-inner{padding-top:0;}}
.bk-sum-photo{aspect-ratio:16/9;border-radius:8px;background-size:cover;background-position:center;margin-bottom:10px;}
.bk-sum-name{font-family:'Fraunces',serif;font-size:1.1rem;margin-bottom:2px;}
.bk-lines{margin:12px 0 4px;}
.bk-line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:.9rem;border-bottom:1px solid rgba(203,217,204,.09);}
.bk-line small{display:block;color:var(--fog);font-size:.76rem;margin-top:1px;}
.bk-line span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;}
.bk-total{border-bottom:0;padding-top:12px;font-family:'Fraunces',serif;font-size:1.25rem;}
.bk-total span:last-child{color:var(--gold);}

/* ---- payment + confirmation ---- */
.bk-card{background:var(--charcoal-soft);border:1px solid rgba(203,217,204,.14);border-radius:var(--radius);padding:22px;margin:0 0 18px;}
.bk-card .bk-h2{margin-top:0;}
.bk-secure{margin:6px 0 20px;padding:16px 18px;border:1px solid rgba(210,166,60,.35);border-radius:var(--radius);background:rgba(210,166,60,.05);font-size:.9rem;line-height:1.55;color:var(--mist);}
.bk-secure b{color:var(--cream);}
.bk-pay{display:block;width:100%;text-align:center;padding:16px 20px;font-size:.95rem;letter-spacing:.06em;}
.bk-pay:disabled{opacity:.6;cursor:wait;}
.bk-done h1{font-size:var(--step-4);}
.bk-ref{color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;margin-bottom:6px;}
.bk-paid{font-family:'Fraunces',serif;font-size:1.3rem;color:var(--gold);margin-top:8px;}
.bk-arrive{list-style:none;margin-bottom:18px;}
.bk-arrive li{padding:9px 0;border-bottom:1px solid rgba(203,217,204,.09);font-size:.95rem;}
.bk-actions{display:flex;flex-wrap:wrap;gap:12px;}
.bk-actions .btn{text-align:center;font-size:.8rem;letter-spacing:.06em;}
.bk-upsell .bk-h2{font-size:var(--step-1);}
.bk-forest{text-align:center;font-family:'Fraunces',serif;font-style:italic;font-size:1.3rem;color:var(--mist);margin:30px 0 8px;}

/* the confirmation card already says everything the side summary would */
body[data-step="confirmed"] .bk-summary{display:none;}
@media (min-width:900px){body[data-step="confirmed"] .bk-layout{grid-template-columns:minmax(0,760px);justify-content:center;}}

/* experience rows: quick-facts chips + link to the tour page */
.bk-chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px;}
.bk-chips li{font-size:.72rem;color:var(--mist);border:1px solid rgba(203,217,204,.22);border-radius:999px;padding:3px 9px;white-space:nowrap;}
.bk-more-link{display:inline-block;margin-top:6px;font-size:.8rem;color:var(--gold);border-bottom:1px solid rgba(210,166,60,.5);}

/* product photos in add-on rows and in the package details */
.bk-thumbimg{width:76px;height:76px;border-radius:12px;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(246,241,227,.1);}
.bk-pkg-photo{aspect-ratio:16/10;margin:10px 0 12px;border-radius:12px;background-size:cover;background-position:center 76%;box-shadow:inset 0 0 0 1px rgba(246,241,227,.1);}
@media (max-width:560px){.bk-thumbimg{width:60px;height:60px;}}

/* three packages stack in the booking column */
.bk-pkgs{grid-template-columns:1fr;}
/* Explorer offer on the dates step + quick package switch */
.bk-promo-wrap{margin:12px 0 0;}
.bk-promo{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:14px 16px;border-radius:var(--radius);background:rgba(210,166,60,.1);border:1px solid rgba(210,166,60,.45);font-size:.9rem;line-height:1.5;}
.bk-promo span{flex:1 1 260px;}
.bk-promo .btn{flex:0 0 auto;}
.bk-switch{display:inline-flex;flex-wrap:wrap;gap:6px 14px;margin-left:4px;}
.bk-linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--gold);text-decoration:underline;cursor:pointer;}
.bk-linkbtn:hover{color:var(--cream);}



/* ---- barra superior en celulares: con el interruptor EN|ES y textos más largos en español, el "Paso x de 6" se oculta a la vista
        (la barra de pasos de abajo ya muestra el avance; el lector de pantalla lo sigue leyendo) ---- */
@media (max-width:560px){
  .bk-top{gap:8px;padding:12px 4vw;}
  .bk-back{font-size:.82rem;}
  .bk-right{gap:8px;}
  .bk-progress{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;min-width:0;}
}

/* ---- página de políticas ---- */
.pol-toc{margin:6px 0 22px;font-size:.84rem;color:var(--fog);line-height:1.9;} .pol-toc a{color:var(--gold);}
.pol-list{padding-left:1.2rem;margin:0 0 14px;} .pol-list li{margin:0 0 8px;}
.bk-h2[id]{scroll-margin-top:90px;}