@charset "utf-8";
/* ============================================================
   Tours · Rediseño UX/UI moderno (estilo Apple mx-edu store)
   Se carga DESPUÉS de tour.css y SOLO en tour.php.
   Blancos, grises claros + acento DodgerBlue. Bordes redondeados.
   Incluye el tema del calendario Flatpickr (réplica de la imagen).
   ============================================================ */

:root{
  --ap-bg:#f5f5f7;
  --ap-card:#ffffff;
  --ap-ink:#1d1d1f;
  --ap-muted:#6e6e73;
  --ap-line:#e3e3e6;
  --ap-blue:#1E90FF;
  --ap-blue-d:#0a6fe0;
  --ap-radius:18px;
  --ap-font:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}

*{ font-family:var(--ap-font); }
body{ background:var(--ap-bg); color:var(--ap-ink); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* ---------- Header / navegación ---------- */
#header{ background:rgba(255,255,255,.9) !important; backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); box-shadow:none !important; border-bottom:1px solid var(--ap-line) !important; }
#top{ background:var(--ap-card) !important; border-bottom:1px solid var(--ap-line) !important; }
.nameLogotype{ color:var(--ap-ink) !important; font-weight:600 !important; letter-spacing:-.5px; }
a.dropbtn{ color:var(--ap-ink) !important; font-weight:500 !important; }
a.menuIconsItem{ color:var(--ap-muted) !important; }
a.menuIconsItem:hover{ color:var(--ap-blue) !important; background:var(--ap-bg) !important; border-radius:12px; }
.topHeaderItem{ background:var(--ap-card) !important; border:1px solid var(--ap-line) !important; box-shadow:none !important; border-radius:12px !important; }
.topHeaderItem p{ color:var(--ap-ink) !important; }

/* ---------- Sección de reserva (motor) ---------- */
.index{ background:var(--ap-bg) !important; }
.indexMotor{
  background:var(--ap-card) !important;
  border:1px solid var(--ap-line) !important;
  border-radius:22px !important;
  box-shadow:0 18px 50px rgba(0,0,0,.08) !important;
}
.indexTitle{
  background:transparent !important;
  border-bottom:1px solid var(--ap-line) !important;
  border-radius:22px 22px 0 0 !important;
}
.indexTitle p{
  color:var(--ap-ink) !important;
  font-weight:600 !important;
  font-size:19px !important;
  letter-spacing:-.3px !important;
  text-transform:none !important;
}
.indexItem p{
  color:var(--ap-muted) !important;
  font-size:13px !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

/* Inputs y selects: campos limpios, redondeados, foco azul */
.indexItem input,
.select-selected{
  border:1px solid var(--ap-line) !important;
  border-radius:12px !important;
  background:#fff !important;
  color:var(--ap-ink) !important;
  box-shadow:none !important;
}
.indexItem input:focus{
  outline:none !important;
  border-color:var(--ap-blue) !important;
  box-shadow:0 0 0 4px rgba(30,144,255,.15) !important;
}
.select-selected.select-arrow-active{ border-color:var(--ap-blue) !important; box-shadow:0 0 0 4px rgba(30,144,255,.15) !important; }
.select-items{
  background:#fff !important;
  border:1px solid var(--ap-line) !important;
  border-radius:12px !important;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.14) !important;
}
.select-items div:hover,.same-as-selected{ background:var(--ap-bg) !important; color:var(--ap-ink) !important; }

/* Botón Reservar: pill azul; deshabilitado hasta llenar la fecha */
#btn{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  width:auto !important;
  margin:10px auto 26px !important;
  padding:14px 42px !important;
  background:var(--ap-blue) !important;
  color:#fff !important;
  border:none !important;
  border-radius:980px !important;
  font-size:16px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  cursor:pointer;
  transition:background .25s ease, transform .2s ease !important;
}
#btn:hover:enabled{ background:var(--ap-blue-d) !important; transform:translateY(-1px); }
#btn:disabled{ background:#c7c7cc !important; color:#fff !important; cursor:not-allowed !important; transform:none !important; }

/* ---------- Card del tour ---------- */
.item{
  background:var(--ap-card) !important;
  border:1px solid var(--ap-line) !important;
  border-radius:22px !important;
  overflow:hidden;
  box-shadow:0 14px 44px rgba(0,0,0,.06) !important;
  transition:transform .35s cubic-bezier(.19,1,.22,1), box-shadow .35s ease, border-color .35s ease !important;
}
.item:hover{ transform:translateY(-4px); box-shadow:0 22px 54px rgba(0,0,0,.1) !important; border-color:rgba(30,144,255,.35) !important; }
.itemImg{ border-radius:0 !important; object-fit:cover; }
.itemTitle,.titleItems{ color:var(--ap-ink) !important; font-weight:600 !important; letter-spacing:-.4px !important; }
.text,.icons p{ color:#333 !important; }
.icons img{ opacity:.9; }

/* Botón "Ver fotos" */
.open{
  background:#fff !important;
  color:var(--ap-blue) !important;
  border:1px solid var(--ap-line) !important;
  border-radius:980px !important;
  font-size:15px !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  height:auto !important;
  padding:12px 26px !important;
}
.open:hover{ background:var(--ap-bg) !important; color:var(--ap-blue-d) !important; }

/* Slider / galería lateral */
.slider,.slides img{ border-radius:18px !important; }

/* ---------- Footer ---------- */
.footer{ background:var(--ap-bg) !important; border:1px solid var(--ap-line); border-radius:18px !important; }
.title{ color:var(--ap-ink) !important; font-weight:600 !important; }
.box_footer_son a{ color:var(--ap-blue) !important; }

/* ---------- Carrito flotante ---------- */
/* Carrito flotante: usa el estilo teal/goldenrod global (igual que el inicio) */

/* ============================================================
   FLATPICKR — tema (réplica del calendario de la imagen)
   dodgerblue en el día seleccionado, círculos, gris claro al hover
   ============================================================ */
.flatpickr-calendar{
  border-radius:16px !important;
  border:1px solid var(--ap-line) !important;
  box-shadow:0 20px 55px rgba(0,0,0,.18) !important;
  padding:6px !important;
  font-family:var(--ap-font) !important;
}
.flatpickr-months{ padding-top:6px; }
.flatpickr-current-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year{ color:var(--ap-ink) !important; font-weight:600 !important; }
.flatpickr-months .flatpickr-month{ color:var(--ap-ink) !important; }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg{ fill:var(--ap-ink) !important; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg{ fill:var(--ap-blue) !important; }
span.flatpickr-weekday{ color:var(--ap-muted) !important; font-weight:600 !important; }
.flatpickr-day{ border-radius:50% !important; color:var(--ap-ink); font-weight:500; }
.flatpickr-day:hover,
.flatpickr-day:focus{ background:var(--ap-bg) !important; border-color:transparent !important; }
.flatpickr-day.today{ border-color:var(--ap-blue) !important; }
.flatpickr-day.today:hover{ background:var(--ap-bg) !important; color:var(--ap-ink) !important; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus{
  background:var(--ap-blue) !important;
  border-color:var(--ap-blue) !important;
  color:#fff !important;
  box-shadow:none !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{ color:#c7c7cc !important; }
.flatpickr-day.inRange,
.flatpickr-day.startRange,
.flatpickr-day.endRange{ background:rgba(30,144,255,.12) !important; border-color:transparent !important; box-shadow:none !important; }

/* ============================================================
   "Ver información del tour": botón estilo Apple + acordeón premium
   ============================================================ */
button.titleItems{
  display:inline-flex !important;
  align-items:center;
  gap:10px;
  background:var(--ap-card) !important;
  color:var(--ap-ink) !important;
  border:1px solid var(--ap-line) !important;
  border-radius:980px !important;
  font-family:var(--ap-font) !important;
  font-size:16px !important;
  font-weight:500 !important;
  letter-spacing:-.2px !important;
  padding:12px 26px !important;
  margin:18px 3% !important;
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
button.titleItems::after{
  content:"";
  width:9px; height:9px;
  border-right:2px solid var(--ap-muted);
  border-bottom:2px solid var(--ap-muted);
  transform:rotate(45deg);
  transition:transform .35s ease;
  margin-top:-4px;
}
button.titleItems:hover{ background:var(--ap-bg) !important; border-color:#d0d0d4 !important; box-shadow:0 6px 18px rgba(0,0,0,.06) !important; }
button.titleItems.is-open{ background:var(--ap-bg) !important; border-color:#d0d0d4 !important; }
button.titleItems.is-open::after{ transform:rotate(-135deg); margin-top:3px; }

/* Panel del acordeón (el div .text): colapsado por defecto, premium al abrir */
.text{
  max-height:0 !important;
  height:auto !important;
  opacity:1 !important;
  overflow:hidden;
  color:#3a3a3c !important;
  font-family:var(--ap-font) !important;
  font-size:16px !important;
  font-weight:400 !important;
  line-height:1.6 !important;
  background:var(--ap-card);
  border:1px solid transparent;
  border-radius:16px;
  padding:0 !important;
  margin:0 3% !important;
  transition:max-height .55s cubic-bezier(.4,0,.2,1), padding .4s ease, margin .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.text.is-open{
  max-height:1600px !important;
  padding:22px 26px !important;
  margin:6px 3% 22px !important;
  border-color:var(--ap-line);
  box-shadow:0 14px 44px rgba(0,0,0,.05);
}

/* ============================================================
   Menos espacio vacío antes del formulario de reserva
   (motor deja de flotar en absoluto; campos sin alturas gigantes)
   ============================================================ */
.index{ height:auto !important; padding:6px 0 44px !important; }

/* Botón "Ver fotos" pegado al contenido (quita el margin:40px) y galería
   más compacta para que el formulario suba y quede casi junto */
.open{ margin:12px 3% 6px !important; }
.itemsInside{ margin-bottom:4px !important; }
.boxFlex{ align-items:flex-start; }
.slider{ height:300px !important; }
.slides{ height:300px !important; }

/* Sin fotos: oculta la columna del slider y deja la info a todo el ancho
   (el formulario queda pegado). Con fotos, se muestra el slider Apple. */
.boxFlex--nofotos .itemFlex{ width:100% !important; }
.boxFlex--nofotos .itemFlex:last-child{ display:none !important; }

/* Botón "Reservar" perfectamente alineado con los inputs (desktop/tablet):
   misma altura que los campos y pegado a la base de la fila */
@media (min-width:768px){
  .indexGears{ align-items:flex-end !important; gap:10px; padding:6px 14px 16px !important; }
  .indexItem{ width:auto !important; flex:1 1 0; }
  #btn{ align-self:flex-end !important; flex:0 0 auto; height:52px !important; margin:0 0 12px !important; padding:0 34px !important; }
}
.indexMotor{
  position:relative !important;
  left:auto !important; right:auto !important;
  margin:0 auto !important;
  width:min(1040px,92%) !important;
}
.indexGears{ padding:6px 0 4px !important; }
.indexItem{ height:auto !important; padding:14px 8px 12px !important; box-sizing:border-box; }
.indexItem .flex{ align-items:center; }
.indexItem img{ width:18px !important; height:18px !important; margin:0 8px 0 4px !important; }
.indexItem p{ margin:0 !important; }
.indexItem input,
.custom-select{ margin-top:10px !important; }
.indexItem input{ height:52px !important; margin-left:0 !important; width:100% !important; box-sizing:border-box; }
.custom-select{ width:100% !important; }
.select-selected{ height:52px !important; box-sizing:border-box; padding:15px 14px !important; margin-left:0 !important; display:flex; align-items:center; }
.select-items{ top:56px !important; left:0 !important; }
