:root{ 
	--verde:#689f81; 
	--beige:#e8d7cc; 
	--azul:#176787;

}

/* header scroll */
.navbar{ background: var(--verde); transition: background-color .25s ease, box-shadow .25s ease; }
.navbar.navbar-scrolled{ background:#4f8068!important; box-shadow:0 6px 16px rgba(0,0,0,.18); }


/* Botón pill global */
.btn-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 32px; border-radius: 9999px; background:#fff; color:#111!important;
  border:0; font-weight:600; line-height:1.2; box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease; text-decoration:none;
}
.btn-pill:hover{ transform: translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.22); opacity:.95; }
.btn-pill-lg{ padding:14px 36px; font-size:1.05rem; }

/* hero de la página paquetes */
.page-hero{ background: var(--beige); padding: 56px 0 28px; }

/* cards de paquetes */
.card-pack{ border:0; border-radius:18px; overflow:hidden; box-shadow:0 6px 22px rgba(0,0,0,.10); background:#fff; height:100%; }
.card-pack .thumb{ aspect-ratio: 16/10; width:100%; object-fit:cover; }
.badges{ position:absolute; left:12px; top:12px; display:flex; gap:8px; flex-wrap:wrap; z-index:2; }
.badge-chip{ background:rgba(0,0,0,.75); color:#fff; font-weight:400; border-radius:999px; padding:6px 10px; font-size:.8rem; letter-spacing: 0.1em; }
.badge-chip--promo{ background:#ff6f3c; }
.badge-chip--agotado{ background:#9a9a9a; }
.badge-chip--grupal{ background:#1f879f; }
.badge-chip--individual{ background:#176787; }

/* estado agotado */
.soldout-overlay{ position:absolute; inset:0; background:rgba(255,255,255,.55); z-index:1; }

/* bloque vacío */
.empty{ padding:64px 0; color:#555; }


.navbar{ background: var(--verde); transition: background-color .25s ease, box-shadow .25s ease; }
.navbar.navbar-scrolled{ background:#4f8068!important; box-shadow:0 6px 16px rgba(0,0,0,.18); }


.page-hero{ background:var(--beige); padding:42px 0; }
.badge-chip{ background:rgba(0,0,0,.75); color:#fff; border-radius:999px; padding:6px 10px; font-weight:400; font-size:.85rem; }
.badge-chip--promo{ background:#ff6f3c; }
.badge-chip--agotado{ background:#9a9a9a; }
.badge-chip--grupal{ background:#1f879f; }
.badge-chip--individual{ background:#176787; }

.thumb-xl{ width:100%; aspect-ratio: 16/9; object-fit:cover; border-radius:16px; }
.box{ background:#fff; border-radius:16px; box-shadow:0 10px 26px rgba(0,0,0,.10); }

.btn-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 32px; border-radius: 9999px; background:#4f8068; color:#fff!important;
  border:0; font-weight:200; line-height:1.2; box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease; text-decoration:none;
  letter-spacing: 0.05rem;	font-size: 1.05rem;
}
.btn-pill:hover{ transform: translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.22); opacity:.95; }
.btn-pill-lg{ padding:14px 36px; font-size:1.05rem; }
.form-note{ font-size:.9rem; color:#6b6b6b; }

.incluye-wrap{background:#176787;color:#fff;border-radius:16px;padding:18px;}
.noincluye-wrap{background:#e8e8e8;border-radius:16px;padding:18px;}
.incluye-title{font-weight:800;color:#f6c600;letter-spacing:.3px}
.item-chip{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.12);
}
.noincluye-wrap .item-chip{background:#fff;}
.item-chip i{font-size:18px;line-height:1}

/* Bandas con caja centrada, márgenes laterales y bordes redondeados */
.band{
  padding: 0;                 /* el padding va en .band-box */
  background: transparent;    /* el color va en .band-box */
  margin: 24px 0;
}

/* Caja interior: limita ancho, agrega borde redondeado y sombra sutil */
.band .band-box{
  width: min(1100px, 92vw);   /* no llega al borde: ~4% de margen por lado */
  margin: 0 auto;
  border-radius: 22px;
  padding: 28px 22px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Colores de cada banda */
.band-incluye .band-box{
  background:#176787;   /* tu azul verdoso */
  color:#fff;
}
.band-noincluye .band-box{
  background:#efefef;   /* gris claro */
  color:#1b1b1b;
}

/* Título dentro de la banda */
.incluye-title{
  font-weight:800;
  letter-spacing:.2px;
  color:#f6c600;        /* amarillo de “Incluye” */
}

/* Chips */
.item-chip{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.12);
  border-radius:14px; padding:12px 14px;
}
.band-noincluye .item-chip{ background:#fff; }

.ico-svg,.ico-img{ width:18px; height:18px; display:inline-block; }

/* ====== Bands: Incluye / No incluye ====== */
.band {
  border-radius: 18px;
  padding: 16px;
  margin: 18px 0;
}

.band-incluye {
  background: #155e75;        /* azul petróleo */
  color: #fff;
}
.band-incluye .incluye-title { color: #ffd54d; font-weight: 800; }

.band-noincluye {
  background: #ececec;
  color: #222;
}
.band-noincluye .incluye-title { color: #222; font-weight: 800; }

/* Chips */
.item-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.12);      /* por defecto, bien para la banda oscura */
}

/* En banda clara (no incluye) que el chip sea claro con borde */
.band-noincluye .item-chip {
  background: #fff;
  border-color: #ddd;
}

/* ====== Iconos: normalización de tamaño ====== */
.item-chip i.bi {
  font-size: 20px;             /* Bootstrap Icons */
  line-height: 1;
}

.item-chip .ico-svg,
.item-chip .ico-img {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-block;
}

.item-chip .ico-img {          /* por si usás PNG/SVG externo */
  object-fit: contain;
}

/* ====== Responsive layout (mejor en mobile) ====== */
/* En xs: 2 por fila (la marca col-12 de Bootstrap la forzamos a 50%) */
@media (max-width: 575.98px) {
  .band .col-12 { 
    flex: 0 0 50%;
    max-width: 50%;
  }
  .band .row.g-3 > [class*="col-"] {
    padding-left: .375rem;
    padding-right: .375rem;
  }
  .item-chip {
    padding: 8px 10px;
    min-height: 40px;
  }
  .item-chip i.bi,
  .item-chip .ico-svg,
  .item-chip .ico-img {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }
}

/* En md: 3 por fila está bien con tus col-lg-4; reforzamos el centrado visual */
.band .row.g-3 {
  align-items: stretch;
}

@media (max-width: 575.98px) {
  .band { margin-left: 8px; margin-right: 8px; }
}

.band-incluye .item-chip { background: rgba(255,255,255,.18); } /* o .22 */

/* Contenedor y centrado */
.band {
  border-radius: 18px;
  padding: 16px 0;       /* padding vertical; el lateral lo da .container px-3 */
  margin: 18px auto;
}

/* Colores */
.band-incluye { background: #155e75; color: #fff; }
.band-incluye .incluye-title { color: #ffd54d; font-weight: 800; }

.band-noincluye { background: #ececec; color: #222; }
.band-noincluye .incluye-title { color: #222; font-weight: 800; }

/* Chips */
.item-chip {
  display: flex; align-items: center; gap: 10px;
  border-radius: 12px; padding: 10px 12px; min-height: 44px;
  border: 1px solid transparent; background: rgba(255,255,255,.12);
}
.band-noincluye .item-chip { background: #fff; border-color: #ddd; }

/* Iconos tamaño fijo (incluye el SVG de crucero) */
.item-chip i.bi { font-size: 20px; line-height: 1; }
.item-chip .ico-svg, .item-chip .ico-img {
  width: 20px; height: 20px; flex: 0 0 20px; display: inline-block;
}
.item-chip .ico-img { object-fit: contain; }

/* Mobile: dos por fila y todo bien centrado */
@media (max-width: 575.98px) {
  .band .row.g-3 { margin-left: -6px; margin-right: -6px; }
  .band .row.g-3 > [class*="col-"] { padding-left: 6px; padding-right: 6px; }

  .band .col-12 { flex: 0 0 50%; max-width: 50%; }

  .item-chip { padding: 8px 10px; min-height: 40px; }
  .item-chip i.bi,
  .item-chip .ico-svg,
  .item-chip .ico-img { width: 18px; height: 18px; font-size: 18px; }
}

/* Chips de métodos de pago */
.pay-chip{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid #e3e3e3; color:#333;
  border-radius:999px; padding:6px 10px; font-size:.92rem;
}
.band-incluye .pay-chip { background: rgba(255,255,255,.15); border-color: transparent; color:#fff; }

/* Sección Puntos de interés */
.band-interes{
  background:#fafafa; color:#222; border-radius:18px; padding:16px 0; margin:18px auto;
}
.band-interes .incluye-title{ font-weight:800; color:#222; }
.band-interes .texto-interes{ white-space:pre-wrap; }

/* Iconos uniformes */
.pay-chip i.bi{ font-size:18px; line-height:1; }

/* Mobile: coherencia con bandas previas */
@media (max-width:575.98px){
  .pay-chip{ font-size:.9rem; padding:6px 10px; }
}