.trip-builder-page { overflow-x: clip; background: #edf4f1; color: #12313b; }
.trip-builder-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 480px;
  align-items: end;
  overflow: hidden;
  padding: 150px 0 70px;
  background: linear-gradient(90deg, rgba(3, 22, 31, .9), rgba(4, 36, 45, .45) 65%, rgba(6, 40, 48, .18)), #082b3a;
}
.trip-builder-hero-image {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(4, 24, 33, .42), transparent 72%), url("assets/img/services/retreats/retreat-tamarindo.webp") center 52% / cover no-repeat;
}
.trip-builder-hero-content { width: 100%; }
.trip-builder-hero-arrows { z-index: 3; }
.trip-builder-page .trip-builder-floating-brand { right: 116px; bottom: 88px; width: 124px; min-height: 54px; }
.trip-builder-page .trip-builder-floating-brand img { width: 100%; }
.trip-kicker { margin: 0 0 12px; color: #087f87; font: 800 11px/1.3 "DM Sans", sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.trip-builder-hero .trip-kicker { color: #a5eee0; }
.trip-builder-hero h1 { max-width: 860px; margin: 0; color: #f5fbf8; font: 700 clamp(56px, 8vw, 102px)/.92 "Barlow Condensed", Impact, sans-serif; letter-spacing: -.02em; }
.trip-builder-hero-content > p:last-child { max-width: 700px; margin: 20px 0 0; color: rgba(241, 250, 247, .9); font-size: 18px; line-height: 1.65; }
.trip-builder-main { padding: 76px 0 96px; background: linear-gradient(145deg, #f1f5f3, #dfede9); }
.trip-builder-heading { max-width: 770px; margin: 0 0 32px; }
.trip-builder-heading h2 { margin: 0; color: #103745; font: 700 clamp(42px, 5vw, 66px)/.98 "Barlow Condensed", Impact, sans-serif; }
.trip-builder-heading > p:last-child { margin: 13px 0 0; color: #536e76; font-size: 16px; line-height: 1.65; }
.trip-builder-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .7fr); gap: 26px; align-items: start; }
.trip-experience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.trip-experience { min-width: 0; overflow: hidden; border: 1px solid rgba(8, 43, 58, .12); border-radius: 14px; background: rgba(255, 255, 255, .88); box-shadow: 0 12px 32px rgba(8, 43, 58, .08); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.trip-experience.is-added { border-color: rgba(7, 143, 145, .62); box-shadow: 0 0 0 2px rgba(7, 143, 145, .13), 0 16px 36px rgba(8, 43, 58, .12); }
.trip-experience-image { height: 150px; overflow: hidden; background: #0a2c3b; }
.trip-experience-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.trip-experience[data-experience="surf-lessons"] .trip-experience-image img { object-position: center top; }
.trip-experience[data-experience="surfskate"] .trip-experience-image img { object-position: center top; }
.trip-experience:hover .trip-experience-image img { transform: scale(1.035); }
.trip-experience-content { padding: 17px; }
.trip-experience-content h3 { margin: 0; color: #123946; font: 700 26px/1.05 "Barlow Condensed", Impact, sans-serif; }
.trip-experience-content > p:not(.trip-experience-price) { min-height: 38px; margin: 7px 0 14px; color: #5b7379; font-size: 12px; line-height: 1.5; }
.trip-experience-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, .7fr); gap: 9px; }
.trip-experience-fields label, .trip-input-pair label, .trip-contact-field { display: block; color: #31515a; font-size: 11px; font-weight: 800; line-height: 1.35; }
.trip-experience-fields input, .trip-input-pair input, .trip-contact-field input, .trip-contact-field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  margin-top: 6px;
  padding: 8px 9px;
  border: 1px solid rgba(8, 43, 58, .17);
  border-radius: 8px;
  background: #fff;
  color: #183c47;
  font: 12px "DM Sans", sans-serif;
}
.trip-experience-fields input:focus, .trip-experience-fields select:focus, .trip-contact-field input:focus, .trip-contact-field textarea:focus { border-color: #10a49a; outline: 3px solid rgba(16, 164, 154, .13); }
.trip-experience-fields select { display: block; width: 100%; min-width: 0; min-height: 40px; margin-top: 6px; padding: 8px 9px; border: 1px solid rgba(8, 43, 58, .17); border-radius: 8px; background: #fff; color: #183c47; font: 12px "DM Sans", sans-serif; text-align: center; }
.trip-photo-mode-field { grid-column: 1 / -1; }
.trip-input-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.trip-experience-price { display: flex; justify-content: space-between; gap: 10px; margin: 13px 0; color: #57737b; font-size: 11px; }
.trip-experience-price strong { color: #0a7377; text-align: right; }
.trip-add-button, .trip-continue-button {
  display: inline-flex;
  width: 100%;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #0c8f83, #087f80);
  color: #fff;
  font: 800 12px/1.3 "DM Sans", sans-serif;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
.trip-add-button:hover, .trip-continue-button:not(:disabled):hover { transform: translateY(-1px); filter: saturate(1.12); }
.trip-experience.is-added .trip-add-button { background: #e8f5f1; color: #087f80; box-shadow: inset 0 0 0 1px rgba(7, 143, 145, .28); }
.trip-summary { position: sticky; top: 72px; align-self: start; max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(127, 230, 234, .65) rgba(255, 255, 255, .08); scrollbar-width: thin; padding: 14px; border: 1px solid rgba(8, 43, 58, .1); border-radius: 19px; background: rgba(255, 255, 255, .96); box-shadow: 0 22px 55px rgba(8, 43, 58, .15); }
.trip-cart-top { position: relative; display: grid; min-height: 156px; grid-template-columns: minmax(0, 1fr) 104px; align-items: center; gap: 8px; overflow: hidden; padding: 19px 15px 38px; border-radius: 13px; background: linear-gradient(125deg, #087c88 0%, #13a99d 54%, #5bc8a4 100%); color: #fff; box-shadow: inset 0 1px rgba(255, 255, 255, .35); scroll-margin-top: 72px; }
.trip-cart-top::before, .trip-cart-top::after { position: absolute; z-index: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); content: ""; pointer-events: none; }
.trip-cart-top::before { width: 180px; height: 180px; right: -52px; top: -87px; }
.trip-cart-top::after { width: 100px; height: 100px; right: 67px; bottom: -68px; background: rgba(255, 205, 105, .17); }
.trip-summary-head { position: relative; z-index: 1; min-width: 0; padding: 0; border: 0; }
.trip-summary-head .trip-kicker { margin-bottom: 5px; color: #c3fff0; }
.trip-summary h2 { margin: 0; color: #fff; font: 700 40px/.98 "Barlow Condensed", Impact, sans-serif; }
.trip-cart-caption { margin: 8px 0 0; color: rgba(255, 255, 255, .88); font-size: 11px; font-weight: 600; line-height: 1.4; }
.trip-cart-illustration { position: relative; z-index: 1; display: grid; width: 100px; height: 96px; place-items: center; transform: rotate(4deg); }
.trip-cart-illustration svg { width: 100%; overflow: visible; filter: drop-shadow(0 6px 4px rgba(7, 55, 63, .22)); }
.trip-cart-board { fill: #ff7087; stroke: #fff2c1; stroke-width: 1.5; }
.trip-cart-board-stripe { fill: none; stroke: #ffe18a; stroke-linecap: round; stroke-width: 2.7; }
.trip-cart-basket { fill: rgba(255, 255, 255, .2); stroke: #fff; stroke-linejoin: round; stroke-width: 3; }
.trip-cart-basket-top { fill: none; stroke: #fff; stroke-linecap: round; stroke-width: 4; }
.trip-cart-grid { fill: none; stroke: rgba(255, 255, 255, .86); stroke-linecap: round; stroke-width: 2; }
.trip-cart-wheel { fill: #ffdc82; stroke: #fff; stroke-width: 2; }
.trip-cart-spark { fill: none; stroke: #ffe28b; stroke-linecap: round; stroke-width: 2.5; }
.trip-cart-count { position: absolute; z-index: 2; bottom: 11px; left: 14px; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, .46); border-radius: 999px; background: rgba(5, 69, 78, .2); color: #fff; font-size: 10px; font-weight: 800; line-height: 1.1; backdrop-filter: blur(5px); }
.trip-summary-empty { display: grid; justify-items: center; gap: 5px; margin: 16px 0 0; padding: 19px 14px; border: 1px dashed rgba(7, 143, 145, .3); border-radius: 12px; background: linear-gradient(135deg, #f1faf7, #fff6eb); color: #315e60; text-align: center; }
.trip-summary-empty > span { color: #ed9d40; font-size: 24px; line-height: 1; }
.trip-summary-empty p { margin: 0; color: #25525b; font-size: 13px; font-weight: 800; line-height: 1.4; }
.trip-summary-empty small { max-width: 250px; color: #698086; font-size: 10px; line-height: 1.5; }
.trip-summary-list { display: grid; gap: 9px; max-height: min(360px, 38vh); overflow-y: auto; padding: 13px 2px 15px 0; margin: 0; border-bottom: 1px solid rgba(8, 43, 58, .1); list-style: none; }
.trip-summary-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 9px; padding: 10px; border: 1px solid rgba(8, 43, 58, .1); border-radius: 11px; background: rgba(236, 247, 242, .72); color: #183c47; font-size: 12px; }
.trip-summary-index { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: rgba(7, 143, 145, .12); color: #087f80; font-size: 10px; font-weight: 900; }
.trip-summary-item-copy { display: grid; min-width: 0; gap: 4px; }
.trip-summary-item-copy strong { font-size: 13px; line-height: 1.25; }
.trip-summary-item-copy span { color: #647b82; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.trip-summary-price { display: grid; justify-items: end; align-content: start; gap: 4px; flex: 0 0 auto; text-align: right; }
.trip-summary-price strong { color: #087f80; }
.trip-summary-price > span { color: #876d35; font-size: 10px; }
.trip-summary-price button { padding: 2px 0; border: 0; background: none; color: #657d83; font: 700 10px "DM Sans", sans-serif; text-decoration: underline; cursor: pointer; }
.trip-summary-total { display: flex; justify-content: space-between; gap: 10px; padding: 15px 0 5px; color: #31515a; font-size: 13px; font-weight: 800; }
.trip-summary-total strong { color: #0a7377; font-size: 18px; }
.trip-summary-note, .trip-confirm-note { margin: 8px 0; color: #637b81; font-size: 10px; line-height: 1.5; }
.trip-confirm-note { padding: 10px; border: 1px solid rgba(7, 143, 145, .2); border-radius: 8px; background: #eff8f5; color: #315e60; font-weight: 700; }
.trip-contact-field { margin-top: 13px; }
.trip-contact-field textarea { min-height: 62px; resize: vertical; }
.trip-request-error { min-height: 15px; margin: 9px 0 0; color: #a43737; font-size: 11px; line-height: 1.4; }
.trip-request-confirmation { margin: 9px 0 0; padding: 12px; border: 1px solid rgba(7, 143, 145, .3); border-radius: 9px; background: #eff8f5; color: #315e60; font-size: 12px; font-weight: 650; line-height: 1.55; }
.trip-request-confirmation a { display: inline-block; margin-top: 5px; color: #075e66; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.trip-request-confirmation a:focus-visible { outline: 3px solid #f3b64b; outline-offset: 3px; }
.trip-continue-button { min-height: 48px; margin-top: 5px; font-size: 13px; }
.trip-continue-button:disabled { background: #8ba5a3; cursor: not-allowed; opacity: .75; }
.trip-flying-board { position: fixed; z-index: 10000; width: 88px; height: 30px; pointer-events: none; }
.trip-flying-board svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 5px 5px rgba(5, 40, 48, .32)); }
.trip-flying-board svg path:first-child { fill: #ff7087; stroke: #fff2c1; stroke-width: 1.4; }
.trip-flying-board svg path:last-child { fill: none; stroke: #ffe18a; stroke-linecap: round; stroke-width: 2.5; }
.trip-cart-illustration.is-catching svg { animation: trip-cart-catch .55s cubic-bezier(.2,.8,.25,1); }
@keyframes trip-cart-catch {
  35% { transform: scale(1.2) rotate(-9deg); }
  70% { transform: scale(.94) rotate(5deg); }
}
@media (max-width: 960px) {
  .trip-builder-layout { grid-template-columns: minmax(0, 1fr); }
  .trip-summary { position: static; grid-row: 2; }
}
@media (max-width: 600px) {
  .trip-builder-hero { min-height: 440px; padding: 122px 0 50px; }
  .trip-builder-hero-content { width: calc(100% - 42px); margin: 0 auto; }
  .trip-builder-page .trip-builder-floating-brand {
    position: static;
    width: 148px;
    min-height: 62px;
    margin: 0 auto 8px;
  }
  .trip-builder-hero-content > p:last-child { font-size: 15px; }
  .trip-builder-main { padding: 52px 0 70px; }
  .trip-builder-heading { margin-bottom: 22px; }
  .trip-builder-heading > p:last-child { font-size: 14px; }
  .trip-experience-grid { grid-template-columns: 1fr; gap: 13px; }
  .trip-experience { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  .trip-experience-image { height: 100%; min-height: 100%; }
  .trip-experience-content { min-width: 0; padding: 13px; }
  .trip-experience-content h3 { font-size: 23px; }
  .trip-experience-content > p:not(.trip-experience-price) { min-height: 0; margin: 5px 0 10px; font-size: 11px; }
  .trip-experience-fields { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .trip-input-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trip-experience-fields input, .trip-input-pair input { min-height: 36px; margin-top: 4px; font-size: 11px; }
  .trip-experience-price { margin: 9px 0; font-size: 10px; }
  .trip-add-button { min-height: 39px; font-size: 11px; }
  .trip-summary { padding: 12px; }
  .trip-summary h2 { font-size: 36px; }
  .trip-cart-top { min-height: 142px; grid-template-columns: minmax(0, 1fr) 88px; padding: 17px 13px 37px; }
  .trip-cart-illustration { width: 86px; height: 84px; }
}
@media (max-width: 370px) {
  .trip-experience { grid-template-columns: 92px minmax(0, 1fr); }
  .trip-experience-content { padding: 10px; }
  .trip-input-pair { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .trip-experience, .trip-experience-image img, .trip-add-button, .trip-continue-button { transition: none; }
  .trip-cart-illustration.is-catching svg { animation: none; }
}

.trip-builder-hero {
  justify-content: center;
  text-align: center;
  background-image: linear-gradient(180deg, rgba(3, 22, 31, .28), rgba(3, 22, 31, .86));
}
.trip-builder-hero-image {
  background-image: linear-gradient(180deg, rgba(3, 22, 31, .22), rgba(3, 22, 31, .76)), url("assets/img/services/retreats/retreat-tamarindo.webp");
}
.trip-builder-hero-content { max-width: 940px; margin: 0 auto; }
.trip-builder-hero .trip-kicker,
.trip-builder-heading .trip-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 13px;
  border: 1px solid rgba(165, 238, 224, .42);
  border-radius: 999px;
  background: rgba(6, 80, 83, .32);
  letter-spacing: .2em;
}
.trip-builder-hero h1 {
  margin-inline: auto;
  font-weight: 800;
  letter-spacing: .005em;
  text-shadow: 0 5px 24px rgba(0, 0, 0, .28);
}
.trip-builder-hero-content > p:last-child { margin-inline: auto; }
.trip-builder-main {
  background-color: #0a3541;
  background-image: linear-gradient(145deg, rgba(5, 31, 42, .5), rgba(7, 44, 48, .58)), url("assets/img/site/backgrounds/atardecer.webp");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
.trip-builder-heading { margin-right: auto; margin-left: auto; text-align: center; }
.trip-builder-heading h2 {
  font-weight: 800;
  letter-spacing: .01em;
  text-wrap: balance;
}
.trip-builder-heading > p:last-child { margin-inline: auto; }
.trip-experience {
  border-radius: 18px;
  border-color: rgba(219, 255, 243, .32);
  background: rgba(7, 42, 53, .62);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 14px 34px rgba(8, 43, 58, .1);
}
.trip-experience-image { height: 166px; }
.trip-experience-content { text-align: center; }
.trip-experience-content h3 {
  font-size: 29px;
  font-weight: 800;
  letter-spacing: .015em;
}
.trip-experience-content > p:not(.trip-experience-price) {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  margin: 8px 0 16px;
  font-size: 13px;
}
.trip-experience-fields label,
.trip-input-pair label { text-align: center; }
.trip-experience-fields input,
.trip-input-pair input { text-align: center; }
.trip-experience-price {
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff4d9;
  color: #6d5a35;
  font-size: 11px;
  font-weight: 700;
}
.trip-experience-price strong { color: #087f80; font-size: 13px; font-weight: 800; }
.trip-add-button,
.trip-continue-button {
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .025em;
  box-shadow: 0 7px 15px rgba(8, 127, 128, .18);
}
.trip-add-button { background: linear-gradient(110deg, #ff9b59, #f16a72 53%, #cc67a8); }
.trip-experience.is-added .trip-add-button {
  background: linear-gradient(120deg, #daf4e8, #dff7f1);
  color: #087f80;
  box-shadow: inset 0 0 0 1px rgba(7, 143, 145, .25);
}
.trip-summary {
  padding: 12px;
  border-radius: 23px;
  border-color: rgba(219, 255, 243, .3);
  background: rgba(6, 39, 50, .76);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  backdrop-filter: blur(20px) saturate(1.25);
  box-shadow: 0 24px 58px rgba(8, 43, 58, .16);
}
.trip-cart-top {
  min-height: 146px;
  grid-template-columns: minmax(0, 1fr) 80px;
  padding: 13px 12px 32px;
  background: linear-gradient(135deg, #087b8a 0%, #0ca79f 52%, #72c985 100%);
}
.trip-summary-head { text-align: center; }
.trip-summary-head .trip-kicker {
  color: #d7fff1;
  font-size: 10px;
  letter-spacing: .17em;
}
.trip-summary h2 { font-size: 38px; font-weight: 800; letter-spacing: .015em; }
.trip-cart-caption { max-width: 220px; margin: 6px auto 0; font-size: 11px; }
.trip-cart-illustration { width: 74px; height: 78px; }
.trip-cart-count { left: 50%; transform: translateX(-50%); white-space: nowrap; }
.trip-summary-empty {
  border-color: rgba(239, 255, 245, .62);
  background: rgba(245, 255, 249, .84);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.trip-summary-empty p { font-family: "Barlow Condensed", Impact, sans-serif; font-size: 19px; font-weight: 700; }
.trip-summary-empty small { font-size: 11px; }
.trip-summary-total { align-items: center; }
.trip-summary-total strong { color: #078780; font-family: "Barlow Condensed", Impact, sans-serif; font-size: 25px; }
.trip-contact-field { text-align: center; }
.trip-contact-field input,
.trip-contact-field textarea { text-align: center; }
.trip-continue-button { background: linear-gradient(110deg, #ff9b59, #ef6b78 55%, #c263a8); }
@media (max-width: 600px) {
  .trip-builder-hero h1 { font-size: clamp(52px, 13vw, 74px); }
  .trip-builder-heading { max-width: 520px; }
  .trip-experience-image { height: 100%; }
  .trip-experience-content h3 { font-size: 26px; }
  .trip-experience-price { flex-wrap: wrap; gap: 3px 8px; }
  .trip-cart-top { min-height: 154px; grid-template-columns: minmax(0, 1fr) 82px; padding: 17px 11px 38px; }
  .trip-cart-illustration { width: 78px; height: 78px; }
}
@media (max-width: 370px) {
  .trip-cart-top { grid-template-columns: minmax(0, 1fr) 68px; gap: 3px; }
  .trip-cart-illustration { width: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .trip-experience, .trip-experience-image img, .trip-add-button, .trip-continue-button { transition: none; }
}

.trip-builder-hero { background: #072e3c; }
.trip-builder-hero-image {
  z-index: 0;
  background-image: url("assets/img/services/retreats/retreat-tamarindo.webp");
  background-position: center 54%;
}
.trip-builder-hero-image::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 24, 33, .35), rgba(4, 24, 33, .72));
  content: "";
}
.trip-builder-hero-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
}
.trip-builder-hero-content { position: relative; z-index: 2; }
.trip-builder-main {
  position: relative;
  isolation: isolate;
  background-color: #0a3541;
  background-image: linear-gradient(rgba(5, 31, 42, .5), rgba(7, 44, 48, .58)), url("assets/img/site/backgrounds/atardecer.webp");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
.trip-builder-main > .container { position: relative; z-index: 1; }
.trip-builder-heading h2 { color: #f5fbf8; text-shadow: 0 3px 16px rgba(0, 0, 0, .22); }
.trip-builder-heading > p:last-child { color: rgba(237, 248, 244, .82); }
.trip-builder-heading .trip-kicker {
  border-color: rgba(255, 218, 138, .48);
  background: rgba(255, 218, 138, .12);
  color: #ffdf9b;
}
.trip-experience {
  border-color: rgba(219, 255, 243, .32);
  background: rgba(7, 42, 53, .62);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .24);
}
.trip-experience.is-added {
  border-color: #64dec0;
  box-shadow: 0 0 0 2px rgba(100, 222, 192, .22), 0 20px 40px rgba(0, 0, 0, .28);
}
.trip-experience-content h3 { color: #f4fbf7; }
.trip-experience-content > p:not(.trip-experience-price) { color: rgba(227, 243, 237, .76); }
.trip-experience-fields label,
.trip-input-pair label { color: #bee7d9; }
.trip-experience-price { background: rgba(255, 221, 155, .13); color: #ffe4b1; }
.trip-experience-price strong { color: #8df0d1; }
.trip-summary {
  border-color: rgba(219, 255, 243, .3);
  background: rgba(6, 39, 50, .76);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  backdrop-filter: blur(20px) saturate(1.25);
  box-shadow: 0 24px 58px rgba(0, 0, 0, .29);
}
.trip-summary h2 { color: #f7fcf9; }
.trip-summary-item { color: #f0f8f4; }
.trip-summary-item { border-color: rgba(179, 238, 222, .14); background: rgba(255, 255, 255, .055); }
.trip-summary-index { background: rgba(100, 222, 192, .14); color: #a6f0da; }
.trip-summary-item-copy span { color: rgba(222, 239, 233, .78); }
.trip-summary-price strong,
.trip-summary-total strong { color: #89edcf; }
.trip-summary-price > span { color: #ffdb91; }
.trip-summary-price button { color: #b5d1ca; }
.trip-summary-list { border-bottom-color: rgba(205, 236, 226, .2); }
.trip-summary-total { color: #d3e7df; }
.trip-summary-note,
.trip-confirm-note { color: rgba(223, 239, 233, .72); }
.trip-confirm-note { border-color: rgba(110, 220, 190, .25); background: rgba(35, 118, 101, .24); color: #d3f1e4; }
.trip-contact-field { color: #c5e6db; }
.trip-request-error { color: #ffaaaa; }
.trip-request-confirmation { border-color: rgba(141, 222, 211, .35); background: rgba(255, 255, 255, .1); color: #e2f4ef; }
.trip-request-confirmation a { color: #a9f3ec; }
@media (max-width: 700px) {
  .trip-builder-main { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  .trip-builder-hero-video { display: none; }
}

@media (max-width: 960px) {
  .trip-summary { max-height: none; overflow: visible; }
  .trip-summary-list { max-height: 360px; }
}

/* Keep experience details, form controls, and the dark cart summary readable. */
.trip-experience-content > p:not(.trip-experience-price) {
  color: #edf8f4;
  font-size: 14px;
  line-height: 1.55;
}
.trip-experience-fields label,
.trip-input-pair label,
.trip-contact-field {
  color: #e0f3eb;
  font-size: 13px;
  line-height: 1.45;
}
.trip-experience-fields input,
.trip-input-pair input,
.trip-contact-field input,
.trip-contact-field textarea { font-size: 14px; }
.trip-experience-price {
  color: #fff0cf;
  font-size: 13px;
  line-height: 1.45;
}
.trip-cart-caption,
.trip-cart-count { font-size: 12px; }
.trip-summary-empty small {
  color: #405c61;
  font-size: 12px;
  line-height: 1.5;
}
.trip-summary-index { font-size: 12px; }
.trip-summary-item { font-size: 13px; }
.trip-summary-item-copy span,
.trip-summary-note,
.trip-confirm-note,
.trip-summary-price > span,
.trip-summary-price button,
.trip-request-error {
  font-size: 12px;
  line-height: 1.5;
}
.trip-summary-item-copy span,
.trip-summary-note { color: #e5f2ec; }
.trip-summary-price > span { color: #ffe3a3; }
.trip-summary-price button { color: #e3f1ec; }
.trip-confirm-note { color: #e7fff5; }
.trip-request-error { color: #ffd0ca; }
.trip-add-button,
.trip-continue-button { font-size: 14px; }
@media (max-width: 640px) {
  .trip-experience-content > p:not(.trip-experience-price) { font-size: 13px; }
  .trip-experience-price { font-size: 12px; }
  .trip-experience-fields label,
  .trip-input-pair label,
  .trip-contact-field { font-size: 12px; }
}

.trip-mobile-cart { display: none; }
@media (max-width: 600px) {
  .trip-mobile-cart:not([hidden]) {
    position: fixed;
    z-index: 100;
    right: max(18px, env(safe-area-inset-right));
    top: calc(72px + env(safe-area-inset-top));
    display: inline-flex;
    min-width: 92px;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    background: linear-gradient(120deg, #087b8a, #0ca79f 65%, #72c985);
    box-shadow: 0 9px 26px rgba(4, 30, 37, .4), inset 0 1px rgba(255, 255, 255, .28);
    color: #fff;
    font: 800 15px/1 "DM Sans", sans-serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, filter .18s ease, background .18s ease;
  }
  .trip-mobile-cart[hidden] { display: none; }
  .trip-mobile-cart svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }
  .trip-mobile-cart-count { min-width: 1ch; text-align: right; }
  .trip-mobile-cart-unit { color: #fff0bf; font-size: 11px; letter-spacing: .06em; }
  .trip-mobile-cart.is-empty { background: linear-gradient(120deg, #164550, #126c70); }
  .trip-mobile-cart.is-filled { background: linear-gradient(120deg, #ed8460, #db6683 55%, #a95e9f); }
  .trip-mobile-cart:hover { filter: brightness(1.08); }
  .trip-mobile-cart:active { transform: scale(.96); }
  .trip-mobile-cart:focus-visible,
  .trip-cart-top:focus-visible {
    outline: 3px solid #ffe18a;
    outline-offset: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .trip-mobile-cart { transition: none; }
}

/* Las fotos se muestran completas en cualquier proporción de tarjeta o pantalla. */
.trip-experience-image { background: #0a2c3b; }
.trip-experience-image img { object-fit: contain; object-position: center; transform: none; }
.trip-experience:hover .trip-experience-image img { transform: none; }

/* Restauración: la imagen vuelve a llenar toda la tarjeta, sin bandas laterales. */
.trip-experience-image img { object-fit: cover; object-position: center; }
.trip-experience:hover .trip-experience-image img { transform: scale(1.035); }

.trip-experience-title-link {
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.trip-experience-title-link:hover,
.trip-experience-title-link:focus-visible {
  color: #8df0d1;
  text-decoration: underline;
}
.trip-experience-title-link:focus-visible {
  outline: 3px solid rgba(141, 240, 209, .35);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Estadías: fechas compactas con calendario y cantidad de personas alineada. */
.trip-experience:not([data-experience="stays"]) .trip-experience-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}
.trip-experience[data-experience="stays"] .trip-experience-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}
.trip-date-field,
.trip-guests-field { min-width: 0; }
.trip-date-trigger,
.trip-guests-stepper {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  padding: 8px 9px;
  border: 1px solid rgba(8, 43, 58, .17);
  border-radius: 8px;
  background: #fff;
  color: #183c47;
  font: 12px "DM Sans", sans-serif;
}
.trip-date-trigger { cursor: pointer; }
.trip-date-trigger svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: #087f80; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.trip-date-trigger:not(.has-value) span { display: none; }
.trip-date-picker { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; }
.trip-date-trigger:focus-visible,
.trip-guests-stepper:focus-within { border-color: #10a49a; outline: 3px solid rgba(16, 164, 154, .13); }
.trip-guests-stepper { gap: 0; padding: 0; overflow: hidden; }
.trip-guests-stepper button {
  display: grid;
  width: 32px;
  min-height: 38px;
  flex: 0 0 32px;
  place-items: center;
  border: 0;
  background: #e8f5f1;
  color: #087f80;
  font: 700 20px/1 "DM Sans", sans-serif;
  cursor: pointer;
}
.trip-guests-stepper button:hover { background: #d5eee7; }
.trip-guests-stepper button:focus-visible { position: relative; z-index: 1; outline: 3px solid rgba(16, 164, 154, .35); outline-offset: -3px; }
.trip-guests-stepper output { min-width: 28px; flex: 1 1 auto; text-align: center; font-weight: 700; }
@media (max-width: 600px) {
  .trip-experience:not([data-experience="stays"]) .trip-experience-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trip-experience[data-experience="stays"] .trip-experience-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trip-experience[data-experience="stays"] .trip-date-trigger,
  .trip-experience[data-experience="stays"] .trip-guests-stepper { min-height: 36px; margin-top: 4px; padding: 6px 4px; font-size: 11px; }
  .trip-experience[data-experience="stays"] .trip-guests-stepper button { width: 24px; min-height: 34px; flex-basis: 24px; font-size: 17px; }
  .trip-experience[data-experience="stays"] .trip-guests-stepper output { min-width: 18px; }
  .trip-experience[data-experience="stays"] .trip-date-trigger svg { width: 18px; height: 18px; }
}

.trip-accommodation-field { grid-column: 1 / -1; margin-top: 2px; text-align: center; }
.trip-accommodation-field > span { display: block; color: #b9d8d1; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.trip-accommodation-trigger { display: flex; width: 100%; min-height: 42px; align-items: center; justify-content: space-between; gap: 10px; margin-top: 5px; padding: 8px 13px; border: 1px solid rgba(164, 240, 233, .35); border-radius: 999px; background: rgba(255, 255, 255, .1); color: #f4fffb; font: 700 12px "DM Sans", sans-serif; cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.trip-accommodation-trigger:hover { transform: translateY(-1px); border-color: #a4f0e9; background: rgba(164, 240, 233, .17); }
.trip-accommodation-trigger:focus-visible { outline: 3px solid rgba(164, 240, 233, .42); outline-offset: 3px; }
.trip-accommodation-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip-accommodation-trigger strong { color: #a4f0e9; font-size: 20px; line-height: .8; }
.trip-accommodation-modal[hidden] { display: none; }
.trip-accommodation-modal { position: fixed; z-index: 11000; inset: 0; display: grid; place-items: center; padding: 24px; }
.trip-accommodation-backdrop { position: absolute; inset: 0; background: rgba(2, 20, 29, .76); backdrop-filter: blur(8px); }
.trip-accommodation-dialog { position: relative; width: min(1040px, 100%); max-height: min(820px, calc(100dvh - 48px)); overflow-y: auto; padding: clamp(24px, 3vw, 34px); border: 1px solid rgba(164, 240, 233, .35); border-radius: 26px; background: linear-gradient(145deg, #0b3d4d, #092b3b); color: #f2fffb; box-shadow: 0 28px 90px rgba(0, 0, 0, .38); }
.trip-accommodation-dialog .trip-kicker { color: #a4f0e9; }
.trip-accommodation-dialog h2 { max-width: 720px; margin: 0; color: #fff; font: 800 clamp(36px, 4.6vw, 54px)/.98 "Barlow Condensed", Impact, sans-serif; }
.trip-accommodation-modal-intro { max-width: 700px; margin: 10px 0 20px; color: rgba(238, 255, 250, .88); font-size: 16px; line-height: 1.5; }
.trip-accommodation-close { position: absolute; top: 17px; right: 19px; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(164, 240, 233, .35); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; font-size: 27px; line-height: 1; cursor: pointer; }
.trip-accommodation-close:hover { background: rgba(164, 240, 233, .2); }
.trip-accommodation-close:focus-visible { outline: 3px solid rgba(164, 240, 233, .5); outline-offset: 3px; }
.trip-accommodation-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.trip-accommodation-option { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; min-width: 0; gap: 13px; align-items: center; padding: 12px; border: 1px solid rgba(164, 240, 233, .22); border-radius: 16px; background: rgba(255, 255, 255, .09); color: #fff; text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.trip-accommodation-option:hover, .trip-accommodation-option.is-selected { transform: translateY(-2px); border-color: #a4f0e9; background: rgba(164, 240, 233, .17); }
.trip-accommodation-option:focus-visible { outline: 3px solid rgba(164, 240, 233, .48); outline-offset: 3px; }
.trip-accommodation-option img { width: 92px; height: 92px; border-radius: 11px; object-fit: cover; }
.trip-accommodation-option-copy { display: grid; min-width: 0; gap: 5px; }
.trip-accommodation-option-copy small { color: #a4f0e9; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.trip-accommodation-option-copy strong { font: 800 28px/1 "Barlow Condensed", Impact, sans-serif; }
.trip-accommodation-option-copy > span { color: #ffd78b; font-size: 13px; font-weight: 800; line-height: 1.35; }
.trip-accommodation-option-copy em { color: rgba(238, 255, 250, .88); font-size: 12px; font-style: normal; line-height: 1.45; }
.trip-accommodation-option > b { color: #a4f0e9; font-size: 12px; white-space: nowrap; }
.trip-accommodation-recommendation { grid-column: 1 / -1; grid-template-columns: 52px minmax(0, 1fr) auto; }
.trip-accommodation-recommendation-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; background: rgba(255, 215, 139, .16); color: #ffd78b; font-size: 25px; }
@media (max-width: 640px) {
  .trip-accommodation-modal { padding: 12px; }
  .trip-accommodation-dialog { max-height: calc(100dvh - 24px); padding: 24px 14px 16px; border-radius: 20px; }
  .trip-accommodation-dialog h2 { padding-right: 34px; font-size: 38px; }
  .trip-accommodation-modal-intro { margin: 9px 0 16px; font-size: 15px; }
  .trip-accommodation-options { grid-template-columns: 1fr; gap: 9px; }
  .trip-accommodation-option { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 9px; padding: 9px; }
  .trip-accommodation-option img { width: 64px; height: 64px; }
  .trip-accommodation-option-copy { gap: 3px; }
  .trip-accommodation-option-copy small { font-size: 11px; }
  .trip-accommodation-option-copy strong { font-size: 24px; }
  .trip-accommodation-option-copy > span { font-size: 13px; }
  .trip-accommodation-option-copy em { font-size: 12px; line-height: 1.4; }
  .trip-accommodation-option > b { font-size: 11px; }
  .trip-accommodation-recommendation { grid-column: auto; grid-template-columns: 44px minmax(0, 1fr) auto; }
  .trip-accommodation-recommendation-icon { width: 44px; height: 44px; }
}


/* Recomendación de alojamiento: captura los criterios antes de elegir una sola opción. */
.trip-recommendation-form { margin-top: 14px; padding: 18px; border: 1px solid rgba(164, 240, 233, .3); border-radius: 16px; background: rgba(1, 18, 27, .26); }
.trip-recommendation-back { min-height: 38px; margin: 0 0 14px; padding: 7px 12px; border: 1px solid rgba(164, 240, 233, .42); border-radius: 999px; background: rgba(255,255,255,.08); color: #e7fffa; font: 700 12px "DM Sans", sans-serif; cursor: pointer; }
.trip-recommendation-back:hover { background: rgba(164, 240, 233, .17); }
.trip-recommendation-back:focus-visible { outline: 3px solid rgba(164, 240, 233, .5); outline-offset: 2px; }
.trip-recommendation-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.trip-recommendation-fields label { display: grid; gap: 6px; color: #e7fffa; font-size: 11px; font-weight: 800; }
.trip-recommendation-fields input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid rgba(164, 240, 233, .42); border-radius: 9px; background: rgba(255,255,255,.1); color: #fff; font: 700 13px "DM Sans", sans-serif; }
.trip-recommendation-fields input:focus-visible { outline: 3px solid rgba(164, 240, 233, .5); outline-offset: 2px; }
.trip-recommendation-form > p { margin: 12px 0 0; color: rgba(238,255,250,.76); font-size: 11px; line-height: 1.45; }
.trip-recommendation-result { display: block; margin-top: 12px; color: #ffd78b; font-size: 13px; }
.trip-recommendation-error { min-height: 16px; color: #ffd1c8 !important; }
.trip-recommendation-confirm { width: 100%; min-height: 44px; margin-top: 8px; border: 1px solid #a4f0e9; border-radius: 999px; background: #a4f0e9; color: #073342; font: 800 12px "DM Sans", sans-serif; cursor: pointer; }
.trip-recommendation-confirm:hover { filter: brightness(1.06); transform: translateY(-1px); }
.trip-accommodation-field.is-recommendation .trip-accommodation-trigger { border-color: #ffd78b; color: #fff2cc; }
.trip-accommodation-recommendation-note { display: block; margin-top: 7px; color: #ffd78b; font-size: 10px; font-weight: 800; }
@media (max-width: 640px) { .trip-recommendation-fields { grid-template-columns: 1fr; } .trip-recommendation-form { padding: 14px; } }


/* Estado inicial: evita mostrar una pantalla vacía mientras carga el render dinámico. */
.trip-builder-loading { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #072e3c; color: #e7fffa; font: 700 16px "DM Sans", sans-serif; }
.trip-recommendation-dialog { width: min(680px, 100%); }