/* =========================================================
   COMPONENTES VARIOS — TODO JUNTO
   Incluye: social sidebar, contador, floating-character, shapes, carousel genérico.
   Dedupe: solo duplicados idénticos.
========================================================= */



/* ================= MQ (max-width: 768px) { ================= */
/* =========================================================
   13. Componentes varios
   (Ordenado por secciones SIN reordenar la cascada)
========================================================= */

.social-sidebar {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0 10px 10px 0;
    z-index: 1000;
}.social-sidebar a {
    color: #fff;
    font-size: 24px;
    transition: color 0.3s ease, transform 0.3s ease;
}.social-sidebar a:hover {
    color: #ffd700;
    transform: scale(1.2);
}.personajes-img {
    max-width: 300px;
    margin-bottom: 20px;
}#contador {
    font-size: 1.5rem;
    color: #ffd700;
    margin-top: 20px;
}#contador span {
    font-weight: bold;
    margin: 0 5px;
}.custom-shape-divider-bottom-1754077945 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}.custom-shape-divider-bottom-1754077945 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 138px;
}.custom-shape-divider-bottom-1754077945 .shape-fill {
    fill: #0B89D5;
}.custom-shape-divider-bottom-1754078957 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}.custom-shape-divider-bottom-1754078957 svg {
    position: relative;
    display: block;
    width: calc(137% + 1.3px);
    height: 79px;
}.custom-shape-divider-bottom-1754078957 .shape-fill {
    fill: #FAB064;
}.custom-shape-divider-bottom-1754088868 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}.custom-shape-divider-bottom-1754088868 svg {
    position: relative;
    display: block;
    width: calc(300% + 1.3px);
    height: 115px;
}.custom-shape-divider-bottom-1754088868 .shape-fill {
    fill: #E2E6E8;
}.custom-shape-divider-bottom-1754089043 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}.custom-shape-divider-bottom-1754089043 svg {
    position: relative;
    display: block;
    width: calc(146% + 1.3px);
    height: 69px;
}.custom-shape-divider-bottom-1754089043 .shape-fill {
    fill: #C21CE0;
}.custom-shape-divider-bottom-1754089105 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}.custom-shape-divider-bottom-1754089105 svg {
    position: relative;
    display: block;
    width: calc(222% + 1.3px);
    height: 108px;
}.custom-shape-divider-bottom-1754089105 .shape-fill {
    fill: #0B89D5;
}/* =========================================================
   10. Carruseles / Galería
   (Ordenado por secciones SIN reordenar la cascada)
========================================================= */

.carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}.carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
}.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1em;
    cursor: pointer;
    color: #101010;
    z-index: -1;
}.carousel-control.prev {
    left: 10px;
}.carousel-control.next {
    right: 10px;
}.floating-character {
    position: absolute;
}.floating-character img {
    animation: float 3s ease-in-out infinite;
}

/* ===== Final override: paquetes refresh ===== */
#paquetes .amenidades-comunes,
#paquetes .souvenirs-mini,
#paquetes .extras-cta{
  position: relative;
  width: min(1160px, calc(100% - clamp(32px, 4vw, 72px)));
  box-sizing: border-box;
  margin: clamp(24px, 4vw, 40px) auto 18px;
  padding: clamp(24px, 3.6vw, 36px);
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(340px 180px at 10% 18%, rgba(132, 214, 255, 0.18), transparent 58%),
    radial-gradient(300px 180px at 90% 10%, rgba(255, 214, 120, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(245,249,255,0.9));
  border: 1px solid rgba(18, 35, 78, 0.1);
  box-shadow: 0 24px 60px rgba(20, 32, 72, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#paquetes .packages-surface__copy,
#paquetes .souvenirs-mini__copy{
  position: relative;
  z-index: 1;
  max-width: 60ch;
  margin: 0 auto 22px;
  text-align: center;
}

#paquetes .packages-surface__eyebrow,
#paquetes .souvenirs-mini__eyebrow{
  margin: 0 0 10px;
  color: rgba(28, 49, 96, 0.68);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.82rem;
  font-weight: 800;
}

#paquetes .packages-surface__title,
#paquetes .souvenirs-mini__copy h3,
#paquetes .extras-text{
  color: #102049;
}

#paquetes .packages-surface__title,
#paquetes .souvenirs-mini__copy h3{
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1.08;
}

#paquetes .souvenirs-mini__text{
  color: rgba(33, 50, 89, 0.78);
}

#paquetes .amenidades-spotlight{
  position: relative;
  z-index: 1;
  margin: 0 auto 18px;
  padding: 22px 22px;
  border-radius: 24px;
  background:
    radial-gradient(120% 140% at 12% 20%, rgba(125, 235, 255, 0.38), transparent 42%),
    radial-gradient(90% 100% at 86% 16%, rgba(255, 129, 217, 0.32), transparent 38%),
    radial-gradient(100% 120% at 52% 100%, rgba(255, 216, 96, 0.24), transparent 42%),
    linear-gradient(135deg, #0b1741 0%, #12144f 42%, #261049 100%);
  border: 1px solid rgba(164, 226, 255, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 18px 36px rgba(13, 20, 74, 0.22);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

#paquetes .amenidades-spotlight__title{
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  line-height: 1.2;
  color: #f4fbff;
  text-shadow: 0 10px 24px rgba(0,0,0,0.28);
}

#paquetes .amenidades-spotlight__text{
  position: relative;
  z-index: 1;
  margin: 10px auto 0;
  max-width: 56ch;
  color: rgba(238, 246, 255, 0.88);
}

#paquetes .amenidades-spotlight::before,
#paquetes .amenidades-spotlight::after{
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
}

#paquetes .amenidades-spotlight::before{
  z-index: 0;
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,0.55) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 20%, rgba(255,255,255,0.44) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 72%, rgba(255,255,255,0.38) 0 1px, transparent 2px),
    radial-gradient(circle at 36% 68%, rgba(255,255,255,0.28) 0 1px, transparent 2px);
  opacity: 0.88;
  animation: zonaCometaSparkle 5.8s ease-in-out infinite;
}

#paquetes .amenidades-spotlight::after{
  z-index: 0;
  background:
    radial-gradient(42% 34% at 20% 30%, rgba(0, 222, 255, 0.22), transparent 72%),
    radial-gradient(34% 28% at 78% 22%, rgba(255, 125, 223, 0.2), transparent 72%),
    radial-gradient(38% 32% at 56% 84%, rgba(255, 214, 92, 0.18), transparent 74%);
  filter: blur(18px) saturate(1.2);
  animation: zonaCometaNebulaDrift 9s ease-in-out infinite alternate;
}

#paquetes .amenidades-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#paquetes .amenidad-item{
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#paquetes .amenidad-dot,
#paquetes .amenidades-list__dot,
.package-sheet__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0ea5c6, #ffd05f);
  box-shadow: 0 0 0 4px rgba(14, 165, 198, 0.1);
  margin-top: 0.42rem;
}

#paquetes .amenidad-text{
  color: #102049;
  font-weight: 650;
  line-height: 1.38;
  text-align: left;
}

#paquetes .souvenirs-mini__grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

#paquetes .souvenir-card{
  min-width: 0;
  padding: 18px 16px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(18, 35, 78, 0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}

#paquetes .souvenir-card h4{
  margin: 0 0 8px;
  color: #102049;
  font-size: 1.08rem;
  line-height: 1.2;
}

#paquetes .souvenir-card p{
  margin: 0;
  color: rgba(33, 50, 89, 0.8);
  line-height: 1.42;
}

#paquetes .extras-cta{
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}

#paquetes .extras-text{
  margin: 0;
  font-size: clamp(1rem, 2.8vw, 1.18rem);
  font-weight: 800;
}

#paquetes .extras-btn{
  border: none;
  border-radius: 999px;
  padding: 13px 20px;
  font-weight: 900;
  cursor: pointer;
  background: linear-gradient(135deg, #102f70, #0d88aa);
  color: #fff;
  box-shadow: 0 14px 28px rgba(16, 47, 112, 0.2);
}

#lista-paquetes .card{
  width: 320px;
}

#lista-paquetes .card.is-active{
  transform: translateY(-10px) scale(1.03);
  box-shadow:
    0 18px 44px rgba(0,0,0,0.38),
    0 0 20px color-mix(in srgb, var(--accent) 55%, transparent);
}

#lista-paquetes .package-meta-line{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

#lista-paquetes .amenidades-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

#lista-paquetes .amenidades-list__item{
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 15px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  line-height: 1.38;
}

#lista-paquetes .amenidades-list__item.is-new{
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.38);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

#lista-paquetes .card-actions{
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

#lista-paquetes .card.is-active .card-actions{
  display: grid;
}

#lista-paquetes .btn-cotizar-paquete,
#lista-paquetes .btn-card-detail{
  width: 100%;
  margin-top: 0;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  padding: 12px 14px;
  border-radius: 14px;
  border: none;
  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;
}

#lista-paquetes .btn-card-detail{
  color: #0f234f;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 10px 22px rgba(8, 18, 40, 0.16);
}

#lista-paquetes .btn-card-detail--primary{
  grid-column: 1 / -1;
  color: #fff;
  background: linear-gradient(135deg, rgba(11,32,76,0.92), rgba(8,132,170,0.92));
  box-shadow: 0 14px 28px rgba(8, 33, 86, 0.26);
}

.extras-modal{
  background: rgba(10, 19, 44, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.extras-modal__content{
  background:
    radial-gradient(360px 180px at 10% 14%, rgba(132, 214, 255, 0.18), transparent 58%),
    radial-gradient(280px 170px at 92% 10%, rgba(255, 214, 120, 0.15), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.97), rgba(245,249,255,0.94));
  border: 1px solid rgba(18, 35, 78, 0.1);
  box-shadow: 0 24px 60px rgba(20, 32, 72, 0.22);
  color: #102049;
}

.extras-modal__header{
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(18, 35, 78, 0.08);
  background: rgba(255,255,255,0.5);
}

.extras-modal__header h3,
.extras-modal__close{
  color: #102049;
}

.extras-modal__close{
  background: rgba(16, 32, 73, 0.08);
}

.extras-modal__body{
  padding: 0 18px 18px;
}

.extras-modal__content .extras-table-wrap{
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(18, 35, 78, 0.08);
}

.extras-modal__content .extras-table th{
  background: rgba(16, 47, 112, 0.08);
  color: #102049;
}

.extras-modal__content .extras-table td{
  color: #233259;
}

.extras-modal__content .ex-precio{
  color: #0d88aa;
}

.package-sheet__list{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.package-sheet__item{
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 15px;
  border-radius: 16px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(18, 35, 78, 0.08);
  color: #233259;
  line-height: 1.42;
}

.package-sheet__empty{
  margin: 16px 0 0;
  color: rgba(33, 50, 89, 0.75);
}

@media (max-width: 900px){
  #paquetes .amenidades-grid,
  #paquetes .souvenirs-mini__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== Final fine-tuning: common list + souvenir colors ===== */
#paquetes .amenidades-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 30px;
}

#paquetes .amenidad-item{
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#paquetes .amenidad-text{
  text-align: left;
}

#paquetes .souvenir-card{
  border-width: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 16px 30px rgba(20, 32, 72, 0.12);
}

#paquetes .souvenir-card--solein{
  background: linear-gradient(180deg, #55B2FF 0%, #2F86D9 100%);
}

#paquetes .souvenir-card--rokko{
  background: linear-gradient(180deg, #9FA3A6 0%, #7E8285 100%);
}

#paquetes .souvenir-card--orbiton{
  background: linear-gradient(180deg, #4BCF91 0%, #2FA36E 100%);
}

#paquetes .souvenir-card--estrellina{
  background: linear-gradient(180deg, #FFD85C 0%, #E6B93E 100%);
}

#paquetes .souvenir-card--solein h4,
#paquetes .souvenir-card--rokko h4,
#paquetes .souvenir-card--orbiton h4{
  color: #fff;
}

#paquetes .souvenir-card--solein p,
#paquetes .souvenir-card--rokko p,
#paquetes .souvenir-card--orbiton p{
  color: rgba(255,255,255,0.92);
}

#paquetes .souvenir-card--estrellina h4{
  color: #533700;
}

#paquetes .souvenir-card--estrellina p{
  color: rgba(83, 55, 0, 0.86);
}

@media (max-width: 768px){
  #paquetes .amenidades-grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@keyframes zonaCometaNebulaDrift{
  0%{
    transform: translate3d(-1%, -1%, 0) scale(1);
  }
  100%{
    transform: translate3d(1.5%, 1.5%, 0) scale(1.08);
  }
}

@keyframes zonaCometaSparkle{
  0%, 100%{
    opacity: 0.72;
    transform: scale(1);
  }
  50%{
    opacity: 1;
    transform: scale(1.03);
  }
}

/* ===== Paquetes 2026 refresh ===== */
#paquetes .amenidades-comunes,
#paquetes .souvenirs-mini,
#paquetes .extras-cta{
  position: relative;
  width: min(1160px, calc(100% - clamp(32px, 4vw, 72px)));
  box-sizing: border-box;
  margin: clamp(24px, 4vw, 40px) auto 18px;
  padding: clamp(24px, 3.6vw, 36px);
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(340px 180px at 10% 18%, rgba(132, 214, 255, 0.18), transparent 58%),
    radial-gradient(300px 180px at 90% 10%, rgba(255, 214, 120, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(245,249,255,0.9));
  border: 1px solid rgba(18, 35, 78, 0.1);
  box-shadow: 0 24px 60px rgba(20, 32, 72, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#paquetes .amenidades-comunes::before,
#paquetes .souvenirs-mini::before,
#paquetes .extras-cta::before{
  content: "";
  position: absolute;
  inset: auto -10% -48% auto;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(125, 190, 255, 0.16), transparent 70%);
  pointer-events: none;
}

#paquetes .packages-surface__copy,
#paquetes .souvenirs-mini__copy{
  position: relative;
  z-index: 1;
  max-width: 60ch;
  margin: 0 auto 22px;
  text-align: center;
}

#paquetes .packages-surface__eyebrow,
#paquetes .souvenirs-mini__eyebrow{
  margin: 0 0 10px;
  color: rgba(28, 49, 96, 0.68);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.82rem;
  font-weight: 800;
}

#paquetes .packages-surface__title,
#paquetes .souvenirs-mini__copy h3{
  margin: 0;
  color: #102049;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1.08;
}

#paquetes .souvenirs-mini__text,
#paquetes .extras-text{
  color: rgba(33, 50, 89, 0.78);
}

#paquetes .amenidades-spotlight{
  position: relative;
  z-index: 1;
  margin: 0 auto 18px;
  padding: 18px 20px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(8, 120, 178, 0.14), rgba(34, 188, 220, 0.12)),
    rgba(255,255,255,0.72);
  border: 1px solid rgba(17, 126, 177, 0.18);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.36),
    0 18px 36px rgba(13, 91, 128, 0.12);
  text-align: center;
  animation: zonaCometaPulse 5.4s ease-in-out infinite;
}

#paquetes .amenidades-spotlight__eyebrow{
  margin: 0 0 8px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(7, 102, 143, 0.74);
}

#paquetes .amenidades-spotlight__title{
  margin: 0;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  line-height: 1.2;
  color: #0a668f;
}

#paquetes .amenidades-spotlight__text{
  margin: 10px auto 0;
  max-width: 56ch;
  color: rgba(16, 32, 73, 0.78);
}

#paquetes .amenidades-common-intro{
  margin: 0 0 14px;
  text-align: center;
  font-size: 1rem;
  font-weight: 900;
  color: rgba(16, 32, 73, 0.82);
}

#paquetes .amenidades-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#paquetes .amenidad-item{
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#paquetes .amenidad-dot,
#paquetes .amenidades-list__dot,
.package-sheet__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0ea5c6, #ffd05f);
  box-shadow: 0 0 0 4px rgba(14, 165, 198, 0.1);
  margin-top: 0.42rem;
}

#paquetes .amenidad-text{
  color: #102049;
  font-weight: 650;
  line-height: 1.38;
  text-align: left;
}

#paquetes .souvenirs-mini__grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

#paquetes .souvenir-card{
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 16px 16px;
  border-radius: 22px;
  border: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 16px 30px rgba(20, 32, 72, 0.12);
}

#paquetes .souvenir-card--solein{
  background: linear-gradient(180deg, #55B2FF 0%, #2F86D9 100%);
}

#paquetes .souvenir-card--rokko{
  background: linear-gradient(180deg, #9FA3A6 0%, #7E8285 100%);
}

#paquetes .souvenir-card--orbiton{
  background: linear-gradient(180deg, #4BCF91 0%, #2FA36E 100%);
}

#paquetes .souvenir-card--estrellina{
  background: linear-gradient(180deg, #FFD85C 0%, #E6B93E 100%);
}

#paquetes .souvenir-card h4{
  margin: 0;
  color: #102049;
  font-size: 1.08rem;
  line-height: 1.2;
  order: 1;
  width: 100%;
  text-align: center;
  align-self: center;
}

#paquetes .souvenir-card__price{
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-height: 2.1rem;
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 8px 18px rgba(8, 18, 40, 0.12);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  order: 3;
  align-self: center;
}

#paquetes .souvenir-card p{
  margin: 0;
  color: rgba(33, 50, 89, 0.8);
  line-height: 1.42;
}

#paquetes .souvenir-card > p:not(.souvenir-card__price){
  order: 2;
}

#paquetes .souvenir-card--solein h4,
#paquetes .souvenir-card--rokko h4,
#paquetes .souvenir-card--orbiton h4,
#paquetes .souvenir-card--solein .souvenir-card__price,
#paquetes .souvenir-card--rokko .souvenir-card__price,
#paquetes .souvenir-card--orbiton .souvenir-card__price{
  color: #fff;
}

#paquetes .souvenir-card--solein p,
#paquetes .souvenir-card--rokko p,
#paquetes .souvenir-card--orbiton p{
  color: rgba(255,255,255,0.92);
}

#paquetes .souvenir-card--estrellina h4{
  color: #533700;
}

#paquetes .souvenir-card--estrellina .souvenir-card__price{
  color: #533700;
}

#paquetes .souvenir-card--estrellina p{
  color: rgba(83, 55, 0, 0.86);
}

#paquetes .extras-cta{
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}

#paquetes .extras-text{
  margin: 0;
  font-size: clamp(1rem, 2.8vw, 1.18rem);
  font-weight: 800;
  color: #102049;
}

#paquetes .extras-btn{
  border: none;
  border-radius: 999px;
  padding: 13px 20px;
  font-weight: 900;
  cursor: pointer;
  background: linear-gradient(135deg, #102f70, #0d88aa);
  color: #fff;
  box-shadow: 0 14px 28px rgba(16, 47, 112, 0.2);
  transition: transform .18s ease, filter .18s ease;
}

#paquetes .extras-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.04);
}

#lista-paquetes .card{
  width: 320px;
}

#lista-paquetes .package-price{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

#lista-paquetes .package-price__amount{
  line-height: 1;
}

#lista-paquetes .package-price .currency{
  margin-right: 0;
  line-height: 1.05;
}

#lista-paquetes .package-price .tax{
  align-self: center;
  white-space: nowrap;
  font-size: 0.3em;
}

#lista-paquetes .package-price.package-price--compact{
  font-size: 2.55rem;
}

#lista-paquetes .card.is-active{
  transform: translateY(-10px) scale(1.03);
  box-shadow:
    0 18px 44px rgba(0,0,0,0.38),
    0 0 20px color-mix(in srgb, var(--accent) 55%, transparent);
}

#lista-paquetes .package-name{
  font-size: 1.42rem;
}

#lista-paquetes .package-price{
  margin: 10px 0 8px;
}

#lista-paquetes .package-meta-line{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

#lista-paquetes .package-meta-divider{
  opacity: 0.7;
  font-weight: 900;
}

#lista-paquetes .amenidades-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

#lista-paquetes .amenidades-list__item{
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 15px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  line-height: 1.38;
}

#lista-paquetes .amenidades-list__item.is-new{
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.38);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

#lista-paquetes .card-actions{
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

#lista-paquetes .card.is-active .card-actions{
  display: grid;
}

#lista-paquetes .btn-cotizar-paquete,
#lista-paquetes .btn-card-detail{
  width: 100%;
  margin-top: 0;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  padding: 12px 14px;
  border-radius: 14px;
  border: none;
  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

#lista-paquetes .btn-card-detail{
  color: #0f234f;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 10px 22px rgba(8, 18, 40, 0.16);
}

#lista-paquetes .btn-card-detail:hover,
#lista-paquetes .btn-cotizar-paquete:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
}

#lista-paquetes .btn-card-detail--primary{
  grid-column: 1 / -1;
  color: #fff;
  background: linear-gradient(135deg, rgba(11,32,76,0.92), rgba(8,132,170,0.92));
  box-shadow: 0 14px 28px rgba(8, 33, 86, 0.26);
}

.extras-modal{
  background: rgba(10, 19, 44, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.extras-modal__content{
  background:
    radial-gradient(360px 180px at 10% 14%, rgba(132, 214, 255, 0.18), transparent 58%),
    radial-gradient(280px 170px at 92% 10%, rgba(255, 214, 120, 0.15), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.97), rgba(245,249,255,0.94));
  border: 1px solid rgba(18, 35, 78, 0.1);
  box-shadow: 0 24px 60px rgba(20, 32, 72, 0.22);
  color: #102049;
}

.extras-modal__header{
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(18, 35, 78, 0.08);
  background: rgba(255,255,255,0.5);
}

.extras-modal__header h3{
  color: #102049;
}

.extras-modal__close{
  background: rgba(16, 32, 73, 0.08);
  color: #102049;
}

.extras-modal__close:hover{
  background: rgba(16, 32, 73, 0.14);
}

.extras-modal__body{
  padding: 0 18px 18px;
}

.extras-modal__content .extras-table-wrap{
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(18, 35, 78, 0.08);
}

.extras-modal__content .extras-table th{
  background: rgba(16, 47, 112, 0.08);
  color: #102049;
  border-bottom: 1px solid rgba(18, 35, 78, 0.08);
}

.extras-modal__content .extras-table td{
  color: #233259;
  border-bottom: 1px solid rgba(18, 35, 78, 0.06);
}

.extras-modal__content .ex-precio{
  color: #0d88aa;
}

.package-sheet{
  padding-top: 16px;
}

.package-sheet__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.package-sheet__item{
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 15px;
  border-radius: 16px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(18, 35, 78, 0.08);
  color: #233259;
  line-height: 1.42;
}

.package-sheet__empty{
  margin: 16px 0 0;
  color: rgba(33, 50, 89, 0.75);
}

@keyframes zonaCometaPulse{
  0%, 100%{
    transform: translateY(0);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.36),
      0 18px 36px rgba(13, 91, 128, 0.12);
  }
  50%{
    transform: translateY(-2px);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.46),
      0 22px 40px rgba(13, 91, 128, 0.18);
  }
}

@media (max-width: 900px){
  #paquetes .amenidades-grid,
  #paquetes .souvenirs-mini__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ================= MQ (max-width: 768px) { ================= */
.secret-message{
    height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  font-weight: 100;
  font-size: 28px;
  color: #FAFAFA;
  font-family: 'Roboto Mono', monospace;
}.dud{
  color: #757575;
}/* =========================================================
   WAIVERS — TODO JUNTO
   Incluye: formulario, grupos, niños, firma, botones, responsive.
   Dedupe: se eliminaron únicamente duplicados idénticos (si existían).
========================================================= */

/* Estilos específicos para el formulario de waivers */

/* =========================================================
   12. Waivers
   (Ordenado por secciones SIN reordenar la cascada)
========================================================= */

.waiver-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}.form-group {
    width: 100%;
    margin-bottom: 20px;
}.form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 1.1rem;
}.form-group input, .form-group select {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}.nino-group {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
}.nino-group input {
    width: 100%;
    margin-bottom: 10px;
}.signature-container {
    width: 100%;
    max-width: 400px;
    margin-bottom: 10px;
}#signature-pad {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    border: 2px solid black;
    background-color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    touch-action: none;
}#clear, #submit-btn {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    font-size: 1rem;
    background: #ff00ff;
    border: none;
    color: white;
    cursor: pointer;
}#clear:hover, #submit-btn:hover {
    background: #00ffff;
}

/* ================= MQ (max-width: 480px) { ================= */
/* =========================================================
   MODALES — TODO JUNTO
   Incluye: modal de bloques del calendario + add-modal.
   Dedupe: no se encontraron bloques idénticos para eliminar.
========================================================= */

/* ==============================
   GALAXY THEME — Modal Bloques
================================ */


/* =========================================================
   11. Modales
   (Ordenado por secciones SIN reordenar la cascada)
========================================================= */

.modal{
  display: none;            /* lo mantiene oculto */
  position: fixed;
  inset: 0;
  z-index: 1300;

  padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
  background: rgba(3, 8, 24, 0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}/* (Opcional) si más abajo aplicas .is-open desde JS */
.modal.is-open{
  display: flex;
  align-items: center;
  justify-content: center;
}/* Si NO cambias JS, tu código abre con display="block".
   Este fallback hace que también se centre:
*/
.modal[style*="display: block"]{
  display: flex !important;
  align-items: center;
  justify-content: center;
}.modal-content{
  width: min(520px, 100%);
  max-height: min(84dvh, 720px);
  overflow: hidden;

  border-radius: 18px;
  padding: 0;

  background: linear-gradient(180deg, rgba(10, 24, 64, 0.96), rgba(6, 12, 32, 0.96));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 55px rgba(0,0,0,0.55);
  color: #fff;
}/* Header “sticky” (reaprovechamos lo que ya tienes en HTML) */
.modal-content .close{
  float: none;
  position: absolute;
  top: 12px;
  right: 12px;

  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;

  display: grid;
  place-items: center;

  cursor: pointer;
  transition: transform .18s ease, filter .18s ease, background .18s ease;
}.modal-content .close:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  background: rgba(255,255,255,.12);
}/* Título */
.modal-content h2{
  margin: 0;
  padding: 18px 18px 10px;
  font-weight: 900;
  letter-spacing: .2px;
}

#bloquesModal .modal-content{
  position: relative;
  width: min(560px, 100%);
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 16% 10%, rgba(96, 165, 250, 0.22), transparent 46%),
    radial-gradient(100% 110% at 88% 8%, rgba(244, 114, 182, 0.18), transparent 40%),
    linear-gradient(180deg, rgba(8, 19, 49, 0.98), rgba(5, 11, 31, 0.98));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 65px rgba(2, 8, 24, 0.6);
}

#bloquesModal .modal-content::before{
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 170px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent);
  pointer-events: none;
}

#bloquesModal .close{
  z-index: 2;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  appearance: none;
  -webkit-appearance: none;
}

#bloquesModal .calendar-modal-head{
  position: relative;
  z-index: 1;
  padding: 24px 24px 18px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

#bloquesModal .calendar-modal-kicker{
  margin: 0 0 10px;
  color: rgba(191, 219, 254, 0.78);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#bloquesModal .modal-content h2{
  padding: 0;
  font-size: clamp(1.55rem, 4vw, 2.05rem);
  line-height: 1.02;
  color: #ffffff;
  text-wrap: balance;
}

#bloquesModal .calendar-modal-body{
  position: relative;
  z-index: 1;
  padding: 18px 18px 20px;
}

/* Fecha seleccionada */
#fechaSeleccionada{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(191,219,254,.22);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.96);
  font-weight: 800;
  line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Lista scroll (solo el contenido) */
#listaBloques{
  padding: 0;
  overflow: auto;
  max-height: calc(min(84dvh, 720px) - 208px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  align-items: stretch;
}

#noBloques{
  margin: 8px 0 0;
  padding: 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.9);
}

/* Botones de horas (modernos) */
.bloque-btn{
  width: 100%;
  min-height: 60px;
  margin: 0;
  padding: 14px 16px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)),
    linear-gradient(135deg, rgba(10, 24, 64, 0.92), rgba(24, 44, 108, 0.86));
  color: #fff;

  font-weight: 900;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 22px rgba(4, 10, 26, 0.28);

  transition: transform .18s ease, filter .18s ease, background .18s ease, box-shadow .18s ease;
}

.bloque-btn::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #7dd3fc;
  box-shadow: 0 0 0 4px rgba(125, 211, 252, 0.16);
  flex: 0 0 auto;
}

.bloque-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 16px 28px rgba(4, 10, 26, 0.34);
}

.bloque-btn:focus-visible{
  outline: 2px solid rgba(125, 211, 252, 0.95);
  outline-offset: 2px;
}

.add-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}.add-modal-content {
    margin: 10% auto;
    padding: 10px;
    border: 1px solid #888;
    border-radius: 5px;
    width: 30%;
    max-width: 600px;
    text-align: center;
}.add-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}.add-close:hover, .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}/* =========================================================
   ANUNCIO ACTIVO — HOME
========================================================= */

.home-ad-modal{
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3, 8, 24, 0.64);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}.home-ad-modal[hidden]{
  display: none;
}.home-ad-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}.home-ad-dialog{
  position: relative;
  width: min(980px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
  gap: 0;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(420px 220px at 0% 0%, rgba(96,165,250,.14), transparent 65%),
    radial-gradient(360px 220px at 100% 0%, rgba(250,204,21,.10), transparent 65%),
    linear-gradient(180deg, rgba(10, 18, 42, 0.96), rgba(6, 10, 24, 0.98));
  box-shadow: 0 28px 90px rgba(0,0,0,.48);
  transform: translateY(12px) scale(.985);
  transition: transform .22s ease;
}.home-ad-modal.is-open .home-ad-dialog{
  transform: translateY(0) scale(1);
}.home-ad-close{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease, background .18s ease;
}.home-ad-close:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  background: rgba(255,255,255,.14);
}.home-ad-media{
  padding: 22px;
  display: grid;
  place-items: center;
  min-width: 0;
}.home-ad-media-shell{
  width: 100%;
  min-height: 420px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    rgba(0,0,0,.18);
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: hidden;
}.home-ad-media-shell img{
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  display: block;
  border-radius: 18px;
  box-shadow: 0 16px 46px rgba(0,0,0,.28);
}.home-ad-copy{
  padding: 28px 24px 24px;
  display: grid;
  align-content: center;
  gap: 14px;
  min-width: 0;
}.home-ad-copy h2{
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.05;
  font-weight: 900;
}.home-ad-copy p{
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 1rem;
  line-height: 1.7;
}.home-ad-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}.home-ad-button{
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .2px;
  color: #08101f;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  box-shadow: 0 14px 28px rgba(245,158,11,.28);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}.home-ad-button:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 18px 34px rgba(245,158,11,.34);
}@media (max-width: 760px){
  .home-ad-dialog{
    grid-template-columns: 1fr;
    width: min(720px, calc(100vw - 24px));
  }
  .home-ad-media{
    padding: 18px 18px 0;
  }
  .home-ad-media-shell{
    min-height: 280px;
  }
  .home-ad-copy{
    padding: 18px 18px 20px;
  }
  .home-ad-copy h2{
    font-size: clamp(1.6rem, 6vw, 2.25rem);
  }
}@media (max-width: 520px){
  .home-ad-modal{
    padding: 12px;
  }
  .home-ad-dialog{
    width: calc(100vw - 24px);
    border-radius: 22px;
  }
  .home-ad-media-shell{
    min-height: 220px;
    padding: 12px;
  }
  .home-ad-copy p{
    font-size: .95rem;
  }
}/* =========================================================
   7. Sección CALENDARIO (FullCalendar)
   (Ordenado por secciones SIN reordenar la cascada)
========================================================= */

#calendario{
  position: relative;
  background: var(--c-rokko);
  min-height: auto;
}.fc-toolbar {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}/* ==============================
   GALAXY THEME — FullCalendar
   Mantiene: rojo=lleno, amarillo=parcial, verde=disponible
================================ */

/* Contenedor del calendario */
#calendar-container{
  max-width: 980px;
  margin: 22px auto;
  padding: 14px;
  border-radius: 18px;

  background: linear-gradient(180deg, rgba(10,24,64,.72), rgba(6,12,32,.72));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}/* Layout de la sección Calendario (evita empalmes con la leyenda) */
#calendario{
  justify-content: flex-start; /* en vez de centrar verticalmente */
  padding: 72px 16px 86px;
  box-sizing: border-box;
}#calendario h1 {
  color: #292827; /* ejemplo: amarillo estrellina */
  max-width: 100%;
  margin-inline: auto;
  line-height: .96;
  letter-spacing: -.035em;
  text-wrap: balance;
}#calendarioo{
  margin: 0 auto;
}.calendar-legend{
  width: min(980px, 100%);
  margin-top: 14px; /* un poco más pegadito al calendario */
  clear: both;      /* por si algún navegador flota elementos internos */
}/* IMPORTANT: evita el tamaño fijo 800x800 (te rompe responsive) */
#calendarioo{
  width: 100%;
  max-width: 980px;
  height: auto;  /* FullCalendar controla el alto */
}/* Variables generales FullCalendar */
#calendarioo .fc{
  --fc-border-color: rgba(255,255,255,.12);
  --fc-page-bg-color: transparent;
  --fc-today-bg-color: rgba(255,255,255,.06);
  --fc-neutral-bg-color: rgba(255,255,255,.06);
  --fc-neutral-text-color: rgba(255,255,255,.85);
  font-family: inherit;
  padding: clamp(12px, 2vw, 18px);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(7, 18, 48, 0.92), rgba(8, 15, 38, 0.96));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 56px rgba(14, 22, 46, 0.22);
}

#calendarioo .fc-theme-standard .fc-scrollgrid{
  border: none;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
}

#calendarioo .fc-theme-standard th,
#calendarioo .fc-theme-standard td{
  border-color: rgba(255,255,255,.08);
}/* Toolbar (mes y botones) */
#calendarioo .fc .fc-toolbar{
  padding: 12px 12px 10px;
  border-radius: 16px;
  margin-bottom: 12px;

  background: linear-gradient(180deg, rgba(12,28,78,.75), rgba(8,16,42,.75));
  border: 1px solid rgba(255,255,255,.12);
}#calendarioo .fc .fc-toolbar-title{
  color: #fff;
  font-weight: 900;
  letter-spacing: .3px;
  text-shadow: 0 10px 28px rgba(0,0,0,.45);
}/* Botones */
#calendarioo .fc .fc-button{
  border-radius: 12px !important;
  padding: 8px 10px !important;

  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #fff !important;
  font-weight: 900;
  letter-spacing: .2px;

  transition: transform .18s ease, filter .18s ease, background .18s ease;
}#calendarioo .fc .fc-button:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  background: rgba(255,255,255,.12) !important;
}#calendarioo .fc .fc-button:disabled{
  opacity: .55;
}

#calendarioo .fc .fc-button .fc-icon{
  color: inherit;
  font-size: 1rem;
}

#calendarioo .fc .fc-prev-button,
#calendarioo .fc .fc-next-button{
  background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
  border-color: rgba(191,219,254,.25) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.28);
}

#calendarioo .fc .fc-prev-button:hover,
#calendarioo .fc .fc-next-button:hover{
  background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
}/* Encabezados de días (Lun, Mar, etc.) */
#calendarioo .fc .fc-col-header-cell{
  background: rgba(255,255,255,.05);
}#calendarioo .fc .fc-col-header-cell-cushion{
  color: rgba(255,255,255,.88);
  font-weight: 900;
  letter-spacing: .25px;
  padding: 10px 0;
}/* Celdas del mes */
#calendarioo .fc .fc-daygrid-day{
  background: transparent; /* dejamos que el frame pinte */
}#calendarioo .fc .fc-daygrid-day-frame{
  margin: 4px;
  min-height: clamp(84px, 9vw, 108px);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow: hidden;
  transition: transform .18s ease, filter .18s ease, background .18s ease;
}#calendarioo .fc .fc-daygrid-day:hover .fc-daygrid-day-frame{
  transform: translateY(-1px);
  filter: brightness(1.05);
  background: rgba(255,255,255,.06);
}

#calendarioo .fc .fc-daygrid-day-top{
  justify-content: flex-end;
  padding-top: 6px;
}#calendarioo .fc .fc-daygrid-day-number{
  color: rgba(255,255,255,.92);
  font-weight: 900;
  width: 34px;
  height: 34px;
  margin: 0 8px 0 auto;
  padding: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}/* ===== Estados (manteniendo tus colores) ===== */
/* Disponible (verde) */
#calendarioo .fc-daygrid-day.disponible .fc-daygrid-day-frame{
  background: rgba(0,255,0,.08);
  border-color: rgba(0,255,0,.18);
}/* Parcial (amarillo) */
#calendarioo .fc-daygrid-day.parcial .fc-daygrid-day-frame{
  background: rgba(255,255,0,.10);
  border-color: rgba(255,255,0,.20);
}/* Lleno/ocupado (rojo) */
#calendarioo .fc-daygrid-day.lleno .fc-daygrid-day-frame{
  background: rgba(255,0,0,.12);
  border-color: rgba(255,0,0,.22);
}/* ===============================
   CINTA DEL MES – FULLCALENDAR
   (Diciembre de 2025)
================================ */

/* Texto del mes */
#calendarioo .fc-toolbar-title{
  color: #ffffff !important;
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: capitalize;
}/* ===============================
   BOTÓN TODAY – GLOW GALAXIA
================================ */

#calendarioo .fc-today-button{
  position: relative;

  background: linear-gradient(
    135deg,
    #22d3ee,
    #3b82f6,
    #8b5cf6
  ) !important;

  color: #ffffff !important;
  font-weight: 900;
  letter-spacing: .3px;

  border: none !important;
  border-radius: 12px !important;

  box-shadow:
    0 0 0 rgba(139,92,246,0),
    0 0 18px rgba(59,130,246,.65),
    0 0 36px rgba(139,92,246,.45);

  transition:
    transform .2s ease,
    box-shadow .25s ease,
    filter .25s ease;
}/* Hover = más glow */
#calendarioo .fc-today-button:hover{
  transform: translateY(-1px) scale(1.03);
  filter: brightness(1.1);

  box-shadow:
    0 0 0 rgba(139,92,246,0),
    0 0 28px rgba(34,211,238,.9),
    0 0 55px rgba(139,92,246,.75);
}/* Click */
#calendarioo .fc-today-button:active{
  transform: scale(.97);
  box-shadow:
    0 0 16px rgba(139,92,246,.9);
}/* Estado deshabilitado */
#calendarioo .fc-today-button:disabled{
  opacity: .6;
  box-shadow: none;
  filter: grayscale(.2);
}/* Base de la cinta (sin amarrarla a un color fijo) */
#calendarioo .fc-header-toolbar{
  padding: 14px 18px;
  border-radius: 16px;
  margin-bottom: 18px;

  /* fallback si algo falla */
  background: rgba(0,0,0,.55);

  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.18);
}/* Colores por mes (ya pegan bien) */
#calendarioo[data-month="1"]  .fc-header-toolbar{ background: linear-gradient(135deg, rgba(60,130,255,.75), rgba(10,20,60,.85)) !important; }#calendarioo[data-month="2"]  .fc-header-toolbar{ background: linear-gradient(135deg, rgba(255,90,180,.70), rgba(90,40,140,.85)) !important; }#calendarioo[data-month="3"]  .fc-header-toolbar{ background: linear-gradient(135deg, rgba(70,220,200,.65), rgba(20,60,80,.85)) !important; }#calendarioo[data-month="4"]  .fc-header-toolbar{ background: linear-gradient(135deg, rgba(140,255,120,.55), rgba(30,80,120,.85)) !important; }#calendarioo[data-month="5"]  .fc-header-toolbar{ background: linear-gradient(135deg, rgba(255,200,80,.70), rgba(120,50,160,.85)) !important; }#calendarioo[data-month="6"]  .fc-header-toolbar{ background: linear-gradient(135deg, rgba(80,240,255,.65), rgba(20,40,120,.85)) !important; }#calendarioo[data-month="7"]  .fc-header-toolbar{ background: linear-gradient(135deg, rgba(190,120,255,.70), rgba(30,10,70,.88)) !important; }#calendarioo[data-month="8"]  .fc-header-toolbar{ background: linear-gradient(135deg, rgba(255,150,60,.75), rgba(60,10,90,.88)) !important; }#calendarioo[data-month="9"]  .fc-header-toolbar{ background: linear-gradient(135deg, rgba(60,255,190,.60), rgba(10,40,70,.88)) !important; }#calendarioo[data-month="10"] .fc-header-toolbar{ background: linear-gradient(135deg, rgba(255,80,120,.70), rgba(40,10,60,.90)) !important; }#calendarioo[data-month="11"] .fc-header-toolbar{ background: linear-gradient(135deg, rgba(255,210,120,.60), rgba(40,30,80,.90)) !important; }#calendarioo[data-month="12"] .fc-header-toolbar{ background: linear-gradient(135deg, rgba(120,220,255,.70), rgba(80,70,200,.88)) !important; }.calendar-legend{
  max-width: 980px;              /* mismo ancho que el calendario */
  margin: 18px auto 0;
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;

  background: rgba(10,24,64,.55);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 12px 16px;
  backdrop-filter: blur(8px);
}/* Fades cortos: NO ocupan toda la sección */

#calendario,
#cotizacion,
#resenas{
  position: relative;
  overflow: hidden; /* asegura que el fade no se salga */
}#calendario::after,
#cotizacion::after,
#resenas::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 44px;          /* fade corto */
  pointer-events: none;
  z-index: 0;
}

/* ================= MQ (max-width: 640px){ ================= */
/* Calendar: gris Rokko + fade desde Paquetes(blanco) hacia Cotización(amarillo) */
#calendario{
  background: var(--c-rokko) !important;
  color: #111;
}#calendario::after{
  bottom: 0;
  background: linear-gradient(to top, var(--c-estrellina) 0%, transparent 100%);
}/* Asegura que el contenido quede encima del fade */
#calendario > *,
#cotizacion > *,
#resenas > *{
  position: relative;
  z-index: 1;
}/* =========================================================
   PAQUETES — TODO JUNTO (conserva reglas originales)
   Nota: estas reglas fueron extraídas y reunidas aquí.
========================================================= */

/* =========================================================
   6. Sección PAQUETES
   (Ordenado por secciones SIN reordenar la cascada)
========================================================= */

#paquetes{
position: relative;
    background-color: #ffffff;
    min-height: 125vh;
    padding-bottom: 110px; /* +aire para que la CTA de extras no choque con el fade */
/* ✅ texto base negro */
    color: #111;
}#paquetes h1 {
  position: relative;
  color: #111;   /* ✅ h1 negro */
  text-align: center;
}#lista-paquetes {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    gap: 20px;
    padding: 20px 0;
    align-items: center; /* centra verticalmente las cards en el carrusel */
    -webkit-overflow-scrolling: touch; /* para desplazamiento suave en iOS */
-ms-overflow-style: none;
scrollbar-width: none;
}#lista-paquetes::-webkit-scrollbar { 
    display: none; 
}.card {
    flex: 0 0 auto;
    width: 300px;
    scroll-snap-align: start;

    position: relative;
    overflow: hidden; /* MUY importante para el hover */

    border-radius: 14px;
    border: 2px solid rgba(255,255,255,0.6);

    padding: 20px;
    box-shadow: 0 0 10px rgba(66, 66, 66, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}.card:hover {
    transform: translateY(-6px);
    box-shadow:
      0 0 18px var(--accent-soft),
      0 10px 30px rgba(0,0,0,0.35);
}/* Badge “Nebulosa / Constelación” */
.tier-badge{
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;

    font-size: 0.78rem;
    letter-spacing: 0.2px;
    padding: 6px 10px;
    border-radius: 999px;

    color: #fff;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(8px);
}/* Colores por personaje */
.card.character-rokko{
    --accent: #9AA0A6; /* gris */
    --accent-soft: rgba(154,160,166,0.35);
}.card.character-orbiton{
    --accent: #47D16C; /* verde */
    --accent-soft: rgba(71,209,108,0.35);
}.card.character-estrellina{
    --accent: #FFD54A; /* amarillo */
    --accent-soft: rgba(255,213,74,0.35);
}.card.character-solein{
    --accent: #4AA3FF; /* azul */
    --accent-soft: rgba(74,163,255,0.35);
}/* Diferencia “Nebulosa” vs “Constelación estelar” */
.card.tier-nebulosa{
    filter: saturate(1.0);
}.card.tier-constelacion{
    filter: saturate(1.15) brightness(1.05);
}/* “Brillos” sutiles premium (Constelación) */
.card.tier-constelacion::after{
    content:"";
    position:absolute;
    inset:-40px;
    z-index: 1;
    pointer-events:none;

    /* “sparkles” suaves: puntos + brillo diagonal */
    background:
      radial-gradient(circle at 20% 25%, rgba(255,255,255,0.20), transparent 40%),
      radial-gradient(circle at 70% 35%, rgba(255,255,255,0.16), transparent 45%),
      radial-gradient(circle at 55% 75%, rgba(255,255,255,0.14), transparent 50%),
      linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.10) 45%, transparent 70%);

    opacity: 0.0;
    transform: translateX(-10%) rotate(-8deg);
    transition: opacity 0.25s ease, transform 0.25s ease;
    mix-blend-mode: screen;
}.card.tier-constelacion:hover::after{
    opacity: 0.9;
    transform: translateX(0%) rotate(-8deg);
}/* Asegura que el contenido quede por encima del brillo */
.card > *{
    position: relative;
    z-index: 2;
}.package-name {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    text-align: center;
}.package-price {
    font-size: 3rem;
    font-weight: bold;
    color: white;
    margin-bottom: 10px;
    text-align: center;
}.package-ninos{
    font-size: 1rem;
    font-weight: bold;
    color: white;
    margin-bottom: 10px;
    text-align: center;
}.package-ninos .cantidad{
    font-size: 1rem;
    font-weight: bold;
    color: white;
    margin-bottom: 10px;
    text-align: center;
}.package-price .currency {
    font-size: 1.5rem;
    vertical-align: super;
    margin-right: 5px;
    color: #f1f0f0;
    text-shadow: none;
}.package-price .tax {
    font-size: 1rem;
    text-shadow: none;
}.package-description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    margin-bottom: 15px;
}.amenidades-list {
    list-style:inside;
    padding: 0;
    text-align: left;
}.amenidades-list li {
    margin: 0;
    color:white;
}.amenidades-compartidas{
    color: #f4f4f4;
    width: 100%;
    margin: 0;
    padding-bottom: 30px;
    box-sizing: border-box;
    max-width: 1300px;
}/* ============================
   PAQUETES: estilos pro
   ============================ */

/* Base de tarjeta (mejora sobre tu .card actual) */
.card {
  position: relative;
  overflow: hidden;              /* <-- CLAVE para que el glow no se salga */
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  transform: translateZ(0);      /* evita glitches raros */
}/* Variables por defecto */
.card { 
  --accent: #ffffff;
  --accent2: rgba(255,255,255,0.35);
}/* Glow suave “contenido” */
.card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(120% 120% at 20% 0%,
      color-mix(in srgb, var(--accent) 55%, transparent),
      transparent 60%);
  opacity: 0;
  filter: blur(10px);
  transition: opacity 250ms ease;
  pointer-events: none;
}/* Shine diagonal (barrido) */
.card::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -70%;
  width: 55%;
  height: 220%;
  border-radius: 999px;
  background: linear-gradient(120deg,
    transparent,
    rgba(255,255,255,0.35),
    transparent);
  transform: rotate(18deg);
  opacity: 0;
  pointer-events: none;
}.card:hover {
  transform: scale(1.03);
  border-color: color-mix(in srgb, var(--accent) 60%, rgba(255,255,255,0.35));
  box-shadow:
    0 14px 35px rgba(0,0,0,0.45),
    0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);
}.card:hover::before { opacity: 1; }.card:hover::after  { animation: cardShine 900ms ease forwards; }/* Header del paquete (icon + nombre + badge) */
.package-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}.character-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.25));
  flex-shrink: 0;
}.character-icon-group{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  width: auto;
  height: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}.character-icon--mini{
  width: 26px;
  height: 26px;
  min-width: 26px;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.28));
}/* Shine underline debajo del nombre */
.package-name {
  position: relative;
  display: inline-block;
  margin: 0;
  padding-bottom: 10px;
}.package-name::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 3px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--accent) 85%, white),
    transparent);
  opacity: 0.85;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 55%, transparent));
}/* Badge (Nebulosa / Constelación) */
.package-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.25);
  color: #fff;
  letter-spacing: 0.3px;
}/* ========== Colores por personaje ========== */
.card.personaje-rokko      { --accent: #BDBDBD; }/* Gris */
.card.personaje-orbiton    { --accent: #39D98A; }/* Verde */
.card.personaje-estrellina { --accent: #FFD54D; }/* Amarillo */
.card.personaje-solein     { --accent: #4DB8FF; }/* Azul */
.card.personaje-galaxitos  { --accent: #7DEBFF; }/* Nebulosa premium */

/* ========== Tier Nebulosa vs Constelación ========== */
.card.tier-nebulosa .package-badge {
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}/* Premium: más brillante + “polvito de estrellas” sutil */
.card.tier-constelacion {
  border-color: color-mix(in srgb, var(--accent) 70%, rgba(255,255,255,0.35));
  box-shadow:
    0 16px 40px rgba(0,0,0,0.45),
    0 0 22px color-mix(in srgb, var(--accent) 70%, transparent);
  background:
    radial-gradient(90px 60px at 85% 15%, rgba(255,255,255,0.12), transparent 60%),
    radial-gradient(140px 90px at 20% 90%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    rgba(0,0,0,0.22);
}.card.tier-constelacion .package-badge {
  border-color: color-mix(in srgb, var(--accent) 60%, rgba(255,255,255,0.25));
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent);
}.card.tier-premium{
  isolation: isolate;
  border-color: rgba(255,255,255,0.36);
  box-shadow:
    0 18px 46px rgba(3,6,18,0.58),
    0 0 28px rgba(125,235,255,0.18);
}.card.tier-premium::before{
  opacity: 0.7;
  filter: blur(18px);
}.card.tier-premium:hover::before{
  opacity: 1;
}.card.tier-premium .package-badge{
  border-color: rgba(255,255,255,0.55);
  background: linear-gradient(135deg, rgba(255,233,140,0.92), rgba(255,154,226,0.88));
  color: #1c1236;
  box-shadow:
    0 0 16px rgba(255,206,117,0.42),
    0 8px 20px rgba(20,10,43,0.22);
}.card.tier-premium .package-name::after{
  background: linear-gradient(
    90deg,
    transparent,
    #8ff6ff 18%,
    #ffe27a 50%,
    #ff97e9 82%,
    transparent
  );
}.card.tier-premium .package-price,
.card.tier-premium .package-ninos{
  text-shadow: 0 8px 20px rgba(7,10,32,0.2);
}.package-nebula{
  position: absolute;
  inset: -26%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.94;
  filter: blur(26px) saturate(1.18);
  mix-blend-mode: screen;
  background:
    radial-gradient(42% 36% at 18% 24%, rgba(0,225,255,0.6), transparent 68%),
    radial-gradient(34% 30% at 82% 20%, rgba(255,109,214,0.58), transparent 70%),
    radial-gradient(48% 42% at 52% 82%, rgba(255,203,91,0.48), transparent 72%),
    radial-gradient(28% 24% at 42% 48%, rgba(129,109,255,0.34), transparent 72%);
  animation: premiumNebulaDrift 14s ease-in-out infinite alternate;
}.package-nebula::before,
.package-nebula::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}.package-nebula::before{
  background:
    radial-gradient(circle at 22% 28%, rgba(255,255,255,0.36) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 22%, rgba(255,255,255,0.24) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 74%, rgba(255,255,255,0.24) 0 2px, transparent 3px),
    radial-gradient(circle at 38% 62%, rgba(255,255,255,0.18) 0 1.5px, transparent 3px);
  opacity: 0.75;
  animation: premiumNebulaSparkle 4.8s ease-in-out infinite;
}.package-nebula::after{
  inset: 8%;
  background:
    radial-gradient(34% 28% at 70% 62%, rgba(255,255,255,0.14), transparent 75%),
    linear-gradient(130deg, transparent 16%, rgba(255,255,255,0.14) 48%, transparent 72%);
  animation: premiumNebulaWave 10s ease-in-out infinite;
}.card.tier-premium:hover .package-nebula{
  animation-duration: 9s;
}/* ============================
   FONDOS POR PERSONAJE
   ============================ */

/* Rokko – Gris espacial */
.card.personaje-rokko {
  background: linear-gradient(
    180deg,
    #9FA3A6 0%,
    #7E8285 100%
  );
}/* Orbiton – Verde galáctico */
.card.personaje-orbiton {
  background: linear-gradient(
    180deg,
    #4BCF91 0%,
    #2FA36E 100%
  );
}/* Estrellina – Amarillo estelar */
.card.personaje-estrellina {
  background: linear-gradient(
    180deg,
    #FFD85C 0%,
    #E6B93E 100%
  );
}/* Solein – Azul cósmico */
.card.personaje-solein {
  background: linear-gradient(
    180deg,
    #55B2FF 0%,
    #2F86D9 100%
  );
}.card.personaje-galaxitos {
  background:
    radial-gradient(110px 80px at 18% 18%, rgba(125,235,255,0.24), transparent 62%),
    radial-gradient(150px 110px at 78% 18%, rgba(255,120,220,0.22), transparent 60%),
    radial-gradient(180px 120px at 50% 100%, rgba(255,220,122,0.18), transparent 64%),
    linear-gradient(145deg, #0b1235 0%, #16133d 42%, #220d34 100%);
}/* ===== Sección paquetes: texto negro (solo lo de arriba, no las tarjetas) ===== */
#paquetes {
  color: #111;              /* texto general negro */
}#paquetes h1 {
  color: #111;              /* título “Paquetes” negro */
}/* ===== Amenidades comunes (lista bonita) ===== */
.amenidades-comunes{
  max-width: 1200px;
  margin: 0 auto 18px;
  padding: 8px 14px;
}.amenidades-title{
  margin: 0 0 10px;
  text-align: center;
  font-size: clamp(1.05rem, 2.5vw, 1.4rem);
  font-weight: 800;
  color: #111;
}.amenidades-grid{
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  gap: 10px 16px;

  /* 2–3 columnas automático según ancho */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}.amenidad-item{
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 10px;

  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 10px 12px;
}.amenidad-icon{
  font-size: 1.1rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
  margin-top: 2px;
}.amenidad-text{
  color: #111;
  font-weight: 600;
  line-height: 1.35;

  /* texto dentro de las cajas en celular */
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;

}

/* ================= MQ (max-width: 520px){ ================= */
/* ============================
   Centrar último item si queda solo
   ============================ */

/* Cuando el último elemento es impar y queda solo */
/* ===== Centrar último item si queda “solo” ===== */

/* ✅ En PC (3 columnas): si sobra 1 (total = 3n + 1), céntralo */
.amenidades-grid > .amenidad-item:last-child:nth-child(3n + 1){
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 420px;
}/* Botón Cotizar (aparece al seleccionar tarjeta) */
.quote-action {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}.cotizar-btn {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;

  padding: 10px 14px;
  border-radius: 999px;
  border: none;
  cursor: pointer;

  font-weight: 800;
  background: rgba(0,0,0,0.35);
  color: #fff;
  transition: opacity 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}.card.is-selected .cotizar-btn {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.22);
}/* extra: que en hover se vea más “clickeable” */
.card.is-selected .cotizar-btn:hover {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.25), 0 10px 25px rgba(0,0,0,0.35);
}#lista-paquetes .card { cursor: pointer; }#lista-paquetes .card .cotizar-btn { cursor: pointer; }/* Botón cotizar: oculto por defecto */
.btn-cotizar-paquete{
  margin-top: 14px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.22);
  color: #fff;
  font-weight: 800;
  cursor: pointer;

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease, background 200ms ease;
}/* Se muestra solo si la card está seleccionada */
.card.is-selected .btn-cotizar-paquete{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}/* Hover del botón */
.card.is-selected .btn-cotizar-paquete:hover{
  background: rgba(0,0,0,0.32);
}/* Botón “Cotizar este paquete” aparece solo cuando la card está activa */
.card .card-actions{
  display: none;
  margin-top: 14px;
  justify-content: center;
}.card.is-active .card-actions{
  display: flex;
}.btn-cotizar-paquete{
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: .2px;

  color: #0b0b0b;
  background: color-mix(in srgb, var(--accent) 75%, white);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transition: transform .18s ease, filter .18s ease;
}.btn-cotizar-paquete:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
}/* ===== Extras CTA ===== */
.extras-cta{
  max-width: 1200px;
  margin: 18px auto 6px;
  padding: 0 14px;
  text-align: center;
}.extras-text{
  margin: 0 0 10px;
  font-weight: 900;
  color: #111;
  font-size: clamp(1rem, 2.8vw, 1.2rem);
}.extras-btn{
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 900;
  cursor: pointer;
  /* Gris de galaxia (en vez de negro sólido) */
  background: linear-gradient(135deg, rgba(45,48,66,0.92), rgba(22,24,38,0.92));
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
  transition: transform .18s ease, opacity .18s ease;
}.extras-btn:hover{ transform: translateY(-2px); filter: brightness(1.06); }.extras-btn:disabled{ opacity: 0.7; cursor: not-allowed; }/* ===== Tabla de extras ===== */
.extras-wrap{
  max-width: 1200px;
  margin: 14px auto 22px;
  padding: 0 14px;
}.extras-table-wrap{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}/* Scroll horizontal solo si se necesita en pantallas chicas */
.extras-table-wrap{
  overflow-x: auto;
}.extras-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 620px; /* permite tabla cómoda; en móvil se habilita scroll */
}.extras-table thead th{
  text-align: left;
  padding: 12px 14px;
  background: rgba(0,0,0,0.06);
  color: #111;
  font-weight: 900;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}.extras-table tbody td{
  padding: 12px 14px;
  color: #111;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  vertical-align: top;
}.extras-table tbody tr:nth-child(even){
  background: rgba(0,0,0,0.03);
}/* Overlay */
.extras-modal{
  position: fixed;
  inset: 0;
  height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
  background: rgba(3, 8, 24, 0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  display: none;
  align-items: center !important;
  justify-content: center;

  z-index: 1200;
}.extras-modal.is-open{
  display: flex;
}/* Caja */
.extras-modal__content{
  width: min(920px, 100%);
  max-height: min(86dvh, 760px);
  overflow: hidden;              /* ✅ evita que el header haga scroll */
  display: flex;
  flex-direction: column;

  border-radius: 18px;
  padding: 0;

  background: linear-gradient(180deg, rgba(10, 24, 64, 0.96), rgba(6, 12, 32, 0.96));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 55px rgba(0,0,0,0.55);

  color: #fff;
}/* Header */
.extras-modal__header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;

  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.14);

  /* ✅ siempre visible */
  flex: 0 0 auto;
  background: linear-gradient(180deg, rgba(10, 24, 64, 0.96), rgba(8, 16, 42, 0.96));
}/* ✅ Solo el contenido (tabla) hace scroll */
.extras-modal__body{
  flex: 1 1 auto;
  overflow: auto;
  padding: 0 16px 16px;
}.extras-modal__header h3{
  margin: 0;
  font-size: clamp(1.05rem, 2.8vw, 1.35rem);
  font-weight: 900;
  letter-spacing: .2px;
  color: #fff;
}.extras-modal__close{
  border: none;
  background: rgba(255,255,255,0.10);
  color: #fff;

  width: 38px;
  height: 38px;
  border-radius: 12px;

  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}.extras-modal__close:hover{
  background: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}/* Reusa tu tabla, pero con skin “galaxia” */
.extras-modal__content .extras-table-wrap{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: none;
}.extras-modal__content .extras-table th{
  position: sticky;
  top: 0;
  background: rgba(8, 16, 42, 0.98);
  color: #FFD85C;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}.extras-modal__content .extras-table td{
  color: rgba(255,255,255,0.92);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}.extras-modal__content .ex-precio{
  color: #FFD85C;
  font-weight: 900;
  white-space: nowrap;
}/* ===============================
   Fade Paquetes → Calendario
   =============================== */

#paquetes{
  position: relative;
}/* Fade corto hacia el gris Rokko */
#paquetes::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 44px; /* corto en desktop */
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    var(--c-rokko)
  );
}/* =========================================================
   ÍNDICE (Style.css organizado por secciones)
   Nota: Este archivo NO reordena reglas;solo las marca para
   que puedas encontrarlas y mantenerlo sin romper el diseño.
========================================================= */

/* =========================================================
   MAPA DE MEDIA QUERIES (sin mover reglas)
   Nota: Se agregaron etiquetas para ubicar breakpoints.
   No se reordenó contenido para evitar cambios de cascada.
========================================================= */
/*
  - (max-width: 768px) {
  - (max-width: 480px) {
  - (max-width: 640px){
  - (max-width: 520px){
  - (max-width: 768px){
  - (max-width: 900px){
  - mixtos para no alterar cascada.
  - (max-width: 520px) {
  - (max-width: 1024px) {
  - (min-width: 901px){
  - (max-width: 600px){
  - (prefers-reduced-motion: reduce){
  - (min-width: 768px){
  - (max-width: 760px){
  - (min-width: 900px){
  - (max-width: 480px){
  - (min-width: 1100px){
  - (min-width: 769px){
*/



/*
  1) Reset, Fuentes y Base Global
  2) Header y Navegación
  3) Layout Global
  4) Sección INICIO (Hero / partículas)
  5) Sección SALON (fondo galaxia + bloques)
  6) Sección PAQUETES
  7) Sección CALENDARIO (FullCalendar)
  8) Sección COTIZACIÓN
  9) Sección RESEÑAS
 10) Carruseles / Galería
 11) Modales
 12) Waivers
 13) Componentes varios
 14) Animaciones
 15) Media Queries
*/


/* =========================================================
   1. Reset, Fuentes y Base Global
   (Ordenado por secciones SIN reordenar la cascada)
========================================================= */

html, body { margin: 0; padding: 0; }@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:100');@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Poppins:wght@600;700;800;900&display=swap');:root{
  --font-title: 'Poppins', sans-serif;
  --font-body: 'Nunito', sans-serif;
}/* Estilos generales para el cuerpo de la página */
body {
    margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  color: #111;
}h1, h2, h3, h4, h5, h6{
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #ffffff;
}button,
.btn,
.cta{
  font-family: var(--font-title);
  font-weight: 500;
}p{
  max-width: 70ch;
}/* =========================================================
   15. Media Queries
   (Ordenado por secciones SIN reordenar la cascada)
========================================================= */



/* ================= MQ (max-width: 768px){ ================= */
#amenidades-comunes,
#amenidades-comunes *{
  color: #111 !important;
}/* =========================================================
   8. Sección COTIZACIÓN
   (Ordenado por secciones SIN reordenar la cascada)
========================================================= */

/* =========================================================
   COTIZACIÓN — TODO JUNTO
   Incluye: sección, form, inputs, botones, responsive.
   Nota: no se movieron reglas mixtas (fades/otros) para no alterar cascada.
========================================================= */

#cotizacion h1 {
  position: relative;
  color: #0b1b3a;
  text-align: center;
}#cotizacion .cotizacion-paquete,
#cotizacion-form{
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}/* ✅ nada debe salirse del form (especialmente type="date") */
#cotizacion-form input,
#cotizacion-form select,
#cotizacion-form textarea{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}/* mantiene el look, pero evita overflow por width fijo */
#cotizacion-form{
  width: min(520px, 92vw);
}

/* ================= MQ (max-width: 640px){ ================= */
/* Estilos para el formulario de cotización */
#cotizacion-form {
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #00ffff;
    border-radius: 10px;
    padding: 20px;
    width: 500px;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
    color: #fff;
    margin: 0 auto;
}#cotizacion-form label {
    display: block;
    margin-bottom: 10px;
    font-size: 1.2rem;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}#cotizacion-form input, #cotizacion-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ff00ff;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1rem;
}#cotizacion-form input:focus, #cotizacion-form textarea:focus {
    outline: none;
    box-shadow: 0 0 10px #ff00ff;
}#cotizacion-form button {
    background: #ff00ff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}#cotizacion-form button:hover {
    background: #00ffff;
    box-shadow: 0 0 15px #00ffff;
}/* Resumen del paquete seleccionado en Cotización */
.cotizacion-paquete{
  margin: 14px 0 18px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.12);
}.cotizacion-paquete-label{
  margin: 0;
  font-size: .85rem;
  color: rgba(0,0,0,0.65);
  font-weight: 700;
}.cotizacion-paquete-nombre{
  margin: 4px 0 0;
  font-size: 1.05rem;
  font-weight: 900;
  color: #111;
}/* Fondo mezclado: blanco -> amarillo -> azul Solein */
#cotizacion{
  /* El azul lo saco del paquete Solein (accent + su gradiente) */
  --solein-azul: #4DB8FF;  /* coincide con --accent de Solein */
  --solein-azul-prof: #2F86D9; /* coincide con el fondo Solein */
  --cot-amarillo: #FFD54D; /* tu amarillo “estrellina” va perfecto */

  padding: 72px 14px 150px; /* respiración */
  overflow-x: clip;

  /* Mezcla pro entre secciones */
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 10%,
    #FFF4C2 20%,
    var(--cot-amarillo) 45%,
    var(--cot-amarillo) 62%,
    var(--solein-azul) 86%,
    var(--solein-azul-prof) 100%
  );
}/* Título legible sobre blanco/amarillo */
#cotizacion h1{
  color: #111;
  text-shadow: none;
  margin-bottom: 14px;
}/* Tarjetita “Paquete seleccionado” que ya tienes */
#cotizacion .cotizacion-paquete{
  max-width: 560px;
  width: min(560px, 92vw);
  margin: 0 auto 14px;
}/* Form: responsive real */
#cotizacion-form{
  width: min(560px, 92vw);     /* <- clave: se adapta a móvil */
  max-width: 560px;
  box-sizing: border-box;
  margin: 0 auto;

  /* Tu look actual, pero un poco más “pro” sobre amarillo/azul */
  border-color: color-mix(in srgb, var(--solein-azul) 70%, white);
  box-shadow: 0 18px 45px rgba(0,0,0,0.35);
  border-radius: 16px;
}/* Inputs/select/textarea: que nunca empujen el ancho */
#cotizacion-form input,
#cotizacion-form select,
#cotizacion-form textarea{
  width: 100%;
  box-sizing: border-box;
}/* ===== PATCH: evita que inputs (especialmente type=date) se desborden en móvil ===== */
#cotizacion-form,
#cotizacion-form *{
  box-sizing: border-box;
}/* Quita el ancho fijo (500px) que empuja el form fuera del viewport */
#cotizacion-form{
  width: min(520px, 92vw);
  max-width: 520px;
}/* Asegura que padding no sume extra y que móviles no fuercen ancho raro */
#cotizacion-form input,
#cotizacion-form textarea,
#cotizacion-form select{
  width: 100%;
  max-width: 100%;
  min-width: 0;
}#cotizacion-form input[type="date"]{
  appearance: none;
  -webkit-appearance: none;
}

/* ================= MQ (max-width: 640px){ ================= */
/* Cotización: amarillo Estrellina + fades entre Calendario(gris) y Reseñas(verde) */
#cotizacion{
  background: var(--c-estrellina) !important;
  color: #111 !important;
}#cotizacion::after{
  bottom: 0;
  background: linear-gradient(to top, var(--c-orbiton) 0%, transparent 100%);
}/* =========================================================
   ✅ Cotización: inputs/botón con look moderno acorde a Estrellina
   ========================================================= */
#cotizacion-form{
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(255,255,255,0.60);
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}#cotizacion-form label{
  color: rgba(0,0,0,0.78);
}#cotizacion-form input,
#cotizacion-form select,
#cotizacion-form textarea{
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.86);
  color: #111;
}#cotizacion-form input:focus,
#cotizacion-form select:focus,
#cotizacion-form textarea:focus{
  outline: none;
  border-color: rgba(0,0,0,0.28);
  box-shadow: 0 0 0 4px rgba(255,213,74,0.30);
}#cotizacion-form button[type="submit"]{
  background: #111;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  box-shadow: 0 14px 26px rgba(0,0,0,0.20);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}#cotizacion-form button[type="submit"]:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(0,0,0,0.25);
}#cotizacion{
  position: relative;
  background: var(--c-estrellina);
  min-height: auto;
  color: #111;
  padding: 64px 16px 110px;
  overflow-x: hidden;
}/* =========================================================
   9. Sección RESEÑAS
   (Ordenado por secciones SIN reordenar la cascada)
========================================================= */

/* =========================================================
   RESEÑAS — TODO JUNTO
   Incluye: carrusel en index + admin + formulario.
   (Sin modificar reglas;solo agrupadas. Dedupe: solo idénticos.)
========================================================= */

#resenas h1 {
  position: relative;
  color: #fff;
  text-align: center;
}/* Estilos para admin-resenas.html */
#qr-section {
    margin-bottom: 40px;
    text-align: center;
}#qrcode {
    margin: 20px auto;
    display: inline-block;
    background: white;
    padding: 10px;
    border-radius: 5px;
}#generar-nuevo-qr {
    background: #ff00ff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}#generar-nuevo-qr:hover {
    background: #00ffff;
}#resenas-pendientes table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.1);
}#resenas-pendientes th, #resenas-pendientes td {
    padding: 10px;
    border: 1px solid #ff00ff;
    text-align: left;
}#resenas-pendientes button {
    margin-right: 5px;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}#resenas-pendientes button:first-child {
    background: #00ff00; /* Verde para aprobar */
}#resenas-pendientes button:last-child {
    background: #ff0000; /* Rojo para rechazar */
}/* Estilos para sección de reseñas en index (consolidado) */
#resenas-carrusel {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    transition: transform 0.5s ease;
    margin-top: 20px;

  box-sizing: border-box;
}.resenas-grupo {
    display: flex;
    justify-content: space-around;
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
}.resenas-grupo.fade-slide {
    opacity: 1;
}.resena-card {
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(12, 50, 28, 0.18);
    border-radius: 16px;
    padding: 16px;
    width: auto;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}.resena-card:hover {
    transform: translateY(-3px);
}.estrellas {
    color: #ffd700;
    font-size: 1.5rem;
    margin-bottom: 10px;
}#promedio-calificacion {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #ffd700;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}/* Estilos para form-resena.html */
#resena-form {
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #ff00ff;
    border-radius: 10px;
    padding: 20px;
    width: 400px;
    margin: 0 auto;
    color: #fff;
}#estrellas {
    font-size: 2rem;
    color: #ffd700;
    cursor: pointer;
    margin-bottom: 15px;
}#estrellas i {
    margin-right: 5px;
}#resena-form button {
    background: #00ffff;
    color: black;
    padding: 10px;
    width: 100%;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}#resena-form button:hover {
    background: #ff00ff;
    color: white;
}/* Reseñas: verde Orbiton + fade desde Cotización(amarillo) a lo siguiente(blanco por defecto) */
#resenas{
  background: var(--c-orbiton) !important;
  color: #0b1a10; /* texto oscuro pero amable sobre verde */
}#resenas::after{
  bottom: 0;
  background: linear-gradient(to top, rgb(37, 37, 37) 0%, transparent 100%);
}/* =========================================================
   ✅ Reseñas: tarjetas sin contorno neon azul + responsive móvil bonito
   ========================================================= */
#promedio-calificacion{
  color: rgba(0,0,0,0.78);
  font-weight: 700;
}/* Contenedor del carrusel: ya NO altura fija (evita que se vea “larga y fea”) */
#resenas-carrusel{
  height: auto !important;
  min-height: 420px; /* JS ajusta esto al máximo real para evitar “saltos” */
  margin-top: 18px;
  overflow: hidden;
}

/* ================= MQ (max-width: 640px){ ================= */
/* Cada grupo (3 reseñas por slide) */
.resenas-grupo{
  position: absolute;
  inset: 0;
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-content: start;
  padding: 10px 18px 18px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* ================= MQ (max-width: 900px){ ================= */


/* ================= MQ (max-width: 640px){ ================= */
.resena-card{
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(12, 50, 28, 0.14);
  border-radius: 16px;
  padding: 16px 16px 14px;
  min-width: 0; /* ✅ evita overflow de grid en 3 columnas */
  overflow-wrap: anywhere;
  word-break: break-word;
  width: auto !important; /* sobreescribe el 30% anterior */
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
  color: #0b1a10;
  backdrop-filter: blur(8px);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}.resena-card h3{
  color: #111 !important; /* título legible */
}.resena-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.22);
}/* Textos dentro de reseña */
.resena-card p{
  margin: 0 0 10px 0;
  line-height: 1.4;
}.resena-card .resena-nombre,
.resena-card strong{
  color: rgba(0,0,0,0.78);
}#resenas h1{
  position: relative;
  color: #0b1b3a;
  text-align: center;
}#resenas{
  position: relative;
  background: var(--c-orbiton);
  min-height: auto;
  color: #0b1a10;
}/* Estilos para el encabezado fijo */

/* =========================================================
   2. Header y Navegación
   (Ordenado por secciones SIN reordenar la cascada)
========================================================= */

/* =========================================================
   HEADER / NAV — TODO JUNTO
   Dedupe: solo duplicados idénticos.
   Nota: No se movieron 

/* ================= MQ mixtos para no alterar cascada. =================
media mixtos para no alterar cascada.
========================================================= */

header::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:1px;
  background: linear-gradient(
    90deg,
    transparent,
    #7dd3fc,
    #c084fc,
    transparent
  );
  opacity: 0.6;
}nav ul li a.animating {
    color: #ffd700;
    transition: color 0.5s ease;
}nav ul li:nth-child(2) a::before { border-color: #00ffff; }nav ul li:nth-child(3) a::before { border-color: #00ff00; }nav ul li:nth-child(4) a::before { border-color: #ffff00; }nav ul li:nth-child(5) a::before { border-color: #ff9900; }nav ul li:nth-child(6) a::before { border-color: #cccccc; }nav ul li a.active{
  background: rgba(255,255,255,0.12);
}nav ul li a:hover{
  color: #7dd3fc; /* azul neón suave */
}.nav-toggle{
  display: none;
  position: absolute;
  right: 14px;
  top: 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 18px;
  cursor: pointer;
}.language-switcher{
  position: absolute;
  left: 14px;
  top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(6, 14, 31, 0.55);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
  z-index: 1002;
}.lang-btn{
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}.lang-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(125,211,252,0.42);
  background: rgba(255,255,255,0.14);
}.lang-btn.is-active{
  border-color: rgba(125,211,252,0.62);
  background: rgba(125,211,252,0.16);
  box-shadow: 0 0 0 3px rgba(125,211,252,0.14);
}.lang-btn:focus-visible{
  outline: none;
  border-color: rgba(125,211,252,0.72);
  box-shadow: 0 0 0 4px rgba(125,211,252,0.18);
}/* Desktop normal */
.nav-list{
  display: flex;
  gap: 12px;
}/* ===== Navbar admin: sticky sin estorbar contenido ===== */
nav.navbar, header.navbar, .navbar{
  position: sticky !important;
  top: 0;
  transform: none !important;
  z-index: 10000;
}header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
      background: rgba(10, 18, 38, 0.75);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
    z-index: 1000;
    padding: 10px 0;
}/* Estilos para la lista de navegación */
nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
}/* Estilos para los elementos de la lista de navegación */
nav ul li {
    margin: 0 15px;
}/* Estilos para los enlaces de navegación */
nav ul li a {
    text-decoration: none;
    color: #fff;
    padding: 10px 20px;
    border: 2px solid transparent;
    transition: color 0.3s ease;
    position: relative;
    font-weight: 700;
}/* Pseudo-elemento para borde decorativo en enlaces de navegación */
nav ul li a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 95%;
    height: 95%;
    border: 2px solid;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
}/* Colores de borde específicos para cada enlace de navegación */
nav ul li:nth-child(1) a::before { border-color: #ff00ff; }/* Mostrar borde decorativo cuando el enlace está activo */
nav ul li a.active::before {
    opacity: 1;
}/* Estilos para las secciones de la página */

nav ul li a.nav-link--zona{
  font-weight: 900;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 10px 24px rgba(66, 86, 214, 0.22);
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
  transition: transform 0.18s ease, filter 0.18s ease, color 0.18s ease;
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

nav ul li a.nav-link--zona::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      135deg,
      rgba(255,95,109,0.76),
      rgba(148,86,255,0.7) 55%,
      rgba(59,204,255,0.74)
    );
  z-index: -1;
}

nav ul li a.nav-link--zona::before{
  display: none;
}

nav ul li a.nav-link--zona:hover,
nav ul li a.nav-link--zona.active{
  color: #fff;
  filter: brightness(1.08);
}

nav ul li a.nav-link--zona:hover{
  transform: translateY(-1px);
}

/* =========================================================
   3. Layout Global
   (Ordenado por secciones SIN reordenar la cascada)
========================================================= */

section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: hsl(233, 7%, 78%);
}/* Estilos para títulos principales */
h1 {
  font-size: 5rem; /* Muy grande */
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1rem;
}

/* ================= MQ (max-width: 768px) { ================= */
/* Estilos para párrafos */
p {
    font-size: 1.2rem;
    max-width: 800px;
    line-height: 1.6;
}/* ===== Paquetes: que asomen tarjetas en móvil + snap al centro ===== */


/* ================= MQ (max-width: 520px) { ================= */
/* Ajuste móvil */


/* ================= MQ (max-width: 520px){ ================= */
/* Media queries consolidadas */


/* ================= MQ (max-width: 1024px) { ================= */
/* =========================================================
   14. Animaciones
   (Ordenado por secciones SIN reordenar la cascada)
========================================================= */

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}@keyframes cardShine {
  0%   { transform: translateX(0) rotate(18deg); opacity: 0; }
  20%  { opacity: .9; }
  100% { transform: translateX(260%) rotate(18deg); opacity: 0; }
}@keyframes premiumNebulaDrift {
  0% {
    transform: translate3d(-4%, -3%, 0) scale(1);
  }
  50% {
    transform: translate3d(3%, 4%, 0) scale(1.08);
  }
  100% {
    transform: translate3d(5%, -2%, 0) scale(1.03);
  }
}@keyframes premiumNebulaSparkle {
  0%, 100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.92;
  }
}@keyframes premiumNebulaWave {
  0%, 100% {
    transform: rotate(0deg) scale(0.98);
    opacity: 0.35;
  }
  50% {
    transform: rotate(8deg) scale(1.06);
    opacity: 0.62;
  }
}/* En pantallas muy chicas, una columna para que no se aplaste */


/* ================= MQ (max-width: 900px){ ================= */
/* ✅ En móvil/tablet (2 columnas): si sobra 1 (total impar), céntralo */


/* ================= MQ (max-width: 900px){ ================= */
.ex-precio{
  font-weight: 900;
  white-space: nowrap;
}.ex-desc{
  color: rgba(0,0,0,0.75);
}.btn-link{ font-weight: 900; text-decoration: none; }/* ===== GALERÍA (carrusel con scroll-snap) ===== */
.galeria{ padding: 26px 14px 40px; }.galeria-head{
  max-width: 1200px;
  margin: 0 auto 12px;
}.galeria-carousel{
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  display: grid;
  align-items: center;
}/* ===== GALERÍA (carrusel autoscroll) ===== */
.galeria-track{
  display: flex;                 /* ✅ en vez de grid */
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 10px 6px 16px;

  scrollbar-width: none;
}.galeria-track::-webkit-scrollbar{ display:none; }/* Cada slide con ancho fijo para que SIEMPRE haya overflow */
.galeria-track img{
  flex: 0 0 auto;
  width: clamp(240px, 34vw, 360px);
  height: 260px;
  object-fit: cover;
  border-radius: 18px;
  scroll-snap-align: start;
  box-shadow: 0 12px 30px rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.25);
}/* Fade en orillas (mask) */
.galeria-track{
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}.galeria-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: none; /* solo desktop */
}.galeria-nav.prev{ left: -10px; }.galeria-nav.next{ right: -10px; }/* ===== RESPONSIVE ===== */


/* ================= MQ (max-width: 900px){ ================= */
/* En desktop mostramos flechas del carrusel */


/* ================= MQ (min-width: 901px){ ================= */
/* ✅ En celular hazlo MÁS grande (la prioridad del usuario) */


/* ================= MQ (max-width: 600px){ ================= */
/* animación sutil (más pulida que “brinca”) */
@keyframes floatSoft{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}/* Respeta gente con “reduce motion” */


/* ================= MQ (prefers-reduced-motion: reduce){ ================= */
/* En móvil: todavía más grande para que se lea con fuerza */


/* ================= MQ (max-width: 520px){ ================= */
/* posiciones (puedes ajustar a gusto) */
.b1{ top: 0; right: -80px; }.b2{ top: -100px; right: 280px; }.b3{ top: -225px; right: -140px; }.b4{ top: 350px; right: 300px; }.b22{ top: -170px; right: 140px; }.b32{ top: -205px; right: 130px; }.b42{ top: 350px; right: -140px; }/* ===== Responsive móvil ===== */


/* ================= MQ (max-width: 900px){ ================= */
/* ===== Burbujas más grandes en tablet/escritorio ===== */


/* ================= MQ (min-width: 768px){ ================= */
/* =========================================
   Meteoritos: flotación sutil + polvo espacial
   (para .meteor, .meteor-sm, .meteormd)
========================================= */

:root{
  --meteor-float: 12px;          /* qué tanto suben/bajan */
  --meteor-float-speed: 6.8s;    /* velocidad base */
  --meteor-dust-speed: 4.6s;     /* velocidad polvo */
}

/* ================= MQ (max-width: 520px){ ================= */
/* Flotación */
@keyframes meteorFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, calc(var(--meteor-float) * -1), 0); }
}/* Polvo: deriva suave + “respira” */
@keyframes cosmicDust {
  0%, 100% { transform: translate3d(0,0,0) scale(1); opacity: .55; }
  50%      { transform: translate3d(6px,-5px,0) scale(1.03); opacity: .78; }
}/* Aplica flotación a los 3 tamaños */
.meteor,
.meteor-sm,
.meteormd{
  will-change: transform;
  animation: meteorFloat var(--meteor-float-speed) ease-in-out infinite;
}/* Polvo espacial alrededor (usa ::after, tu contorno ya usa ::before) */
.meteor::after,
.meteor-sm::after,
.meteormd::after{
  content:"";
  position:absolute;
  inset:-38px;                 /* “sale” fuera de la máscara */
  pointer-events:none;
  z-index: 2;                  /* arriba de la imagen (pero es sutil) */
  opacity: .55;
  mix-blend-mode: screen;

  /* puntitos tipo polvo (varios radial-gradients) */
  background:
    radial-gradient(circle at 12% 25%, rgba(255,255,255,.75) 0 1.2px, transparent 2.6px),
    radial-gradient(circle at 22% 70%, rgba(255,255,255,.55) 0 1px,   transparent 2.4px),
    radial-gradient(circle at 86% 22%, rgba(255,255,255,.70) 0 1.1px, transparent 2.6px),
    radial-gradient(circle at 78% 78%, rgba(255,255,255,.50) 0 .9px,  transparent 2.2px),
    radial-gradient(circle at 55% 10%, rgba(255,255,255,.45) 0 .8px,  transparent 2.1px),
    radial-gradient(circle at 6%  52%, rgba(255,255,255,.40) 0 .8px,  transparent 2.1px),
    radial-gradient(circle at 96% 58%, rgba(255,255,255,.42) 0 .85px, transparent 2.2px);

  filter: blur(.15px) drop-shadow(0 8px 18px rgba(140,200,255,.20));
  animation: cosmicDust var(--meteor-dust-speed) ease-in-out infinite;
}/* Ajustes por tamaño (más sutil en sm) */
.meteor-sm::after{ inset: -30px; opacity: .55; }.meteormd::after  { inset: -34px; opacity: .62; }/* Respeta “reduced motion” */


/* ================= MQ (prefers-reduced-motion: reduce){ ================= */
/* ===== Logos de secciones / zonas ===== */
.section-logo{
  display: flex;
  justify-content: center;
  margin: 10px auto 14px;
}.section-logo img{
  width: 700px;        /* Desktop/tablet */
  max-width: 78vw;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.18));
}/* En celular más pequeño */


/* ================= MQ (max-width: 520px){ ================= */
/* ===== Flotación sutil (más pulida que la de arriba) ===== */
@keyframes floatSoft {
  0%   { transform: translate3d(0,0,0); }
  50%  { transform: translate3d(0,-6px,0); }
  100% { transform: translate3d(0,0,0); }
}.section-logo--float img{
  animation: floatSoft 5.2s ease-in-out infinite;
  will-change: transform;
}

#zona-cometa .split-media{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

#zona-cometa .split-text h2{
  margin: 0;
  color: rgba(255,255,255,0.88);
  font-size: clamp(1.05rem, 1.7vw, 1.24rem);
  line-height: 1.5;
}

#zona-cometa .split-row{
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(26px, 4vw, 48px);
}

#zona-cometa .split-text{
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  max-width: min(38rem, 100%);
  margin-inline: auto;
  text-align: center;
}

#zona-cometa .split-text .section-logo--zone{
  width: 100%;
  margin: 0 0 8px;
}

#zona-cometa .split-text .section-logo--zone img{
  width: clamp(220px, 28vw, 340px);
  max-width: 100%;
}

#zona-cometa .split-media{
  width: 100%;
}

#zona-cometa .bubble-cluster{
  width: min(470px, 100%);
  min-height: 500px;
  margin-inline: auto;
}

#zona-cometa .bubble-lg{
  width: 350px;
  height: 350px;
}

#zona-cometa .bubble-md{
  width: 250px;
  height: 250px;
}

#zona-cometa .bubble-sm{
  width: 215px;
  height: 215px;
}

#anchor-adventure .b1,
#anchor-princess .b1,
#anchor-art .b1,
#anchor-princess-room .b1,
#anchor-gamer .b1,
#anchor-dance .b1{
  left: auto;
  right: 0;
  top: 0;
  transform: none;
}

#anchor-adventure .b3,
#anchor-gamer .b3{
  left: 0;
  right: auto;
  top: 220px;
  transform: none;
}

#anchor-princess .b2,
#anchor-dance .b2{
  left: 0;
  right: auto;
  top: 250px;
  transform: none;
}

#anchor-art .b32{
  left: 50%;
  right: auto;
  top: 178px;
  transform: translateX(-50%);
}

#anchor-art .b42{
  left: 0;
  right: auto;
  top: 272px;
  transform: none;
}

#anchor-princess-room .b22{
  left: 0;
  right: auto;
  top: 250px;
  transform: none;
}

/* ===== NAV RESPONSIVE ===== */
header{
  position: fixed;
  top: 0;
  z-index: 999;
}/* Mobile: menú desplegable */


/* ================= MQ (max-width: 760px){ ================= */
.galeria-nav{ display: none !important; }/* ===== GALERÍA Swiper (autoscroll + fade orillas) ===== */
.galeria { padding: 26px 14px 40px; }.galeria-swiper{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 6px 18px;
  cursor: grab;
  touch-action: pan-y;

  /* Fade en orillas */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}.galeria-swiper .swiper-wrapper{
  align-items: center;
  transition-timing-function: linear !important;
  will-change: transform;
}.galeria-swiper .swiper-slide{
  width: 280px;          /* “auto” slide: pro */
  flex-shrink: 0;
  backface-visibility: hidden;
  transform: translateZ(0);
}.galeria-swiper img{
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.25);
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}/* Un poquito más grande en desktop */

.galeria-controls{
  width: min(1200px, 100%);
  margin: 2px auto 0;
  padding-inline: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.galeria .galeria-nav{
  position: static;
  top: auto;
  transform: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(16, 32, 73, 0.12);
  background: rgba(255,255,255,0.8);
  color: #102049;
  font-size: 1.7rem;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(16, 32, 73, 0.12);
  transition: transform .18s ease, filter .18s ease, background .18s ease;
  z-index: 1;
}

.galeria .galeria-nav:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  background: rgba(255,255,255,0.95);
}

.galeria .galeria-nav.swiper-button-disabled{
  opacity: .42;
  cursor: default;
}

.galeria-pagination{
  position: static !important;
  width: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.galeria-pagination .swiper-pagination-bullet{
  width: 9px;
  height: 9px;
  margin: 0 !important;
  opacity: .28;
  background: rgba(16, 32, 73, 0.38);
  transition: transform .18s ease, opacity .18s ease, background .18s ease;
}

.galeria-pagination .swiper-pagination-bullet-active{
  opacity: 1;
  transform: scale(1.18);
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
}

@media (max-width: 560px){
  .galeria-controls{
    gap: 10px;
  }

  .galeria .galeria-nav{
    width: 42px;
    height: 42px;
    font-size: 1.45rem;
  }
}


/* ================= MQ (min-width: 900px){ ================= */
/* En móvil: un poco más chicos para que no tapen todo */


/* ================= MQ (max-width: 900px){ ================= */
.fullbleed{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);   /* truco para salir del contenedor centrado */
  margin-right: calc(50% - 50vw);
  display: block;
}.fullbleed__media{
    width: 100%;
  height: clamp(320px, 60vh, 720px); /* ajusta la “presencia” */
  overflow: hidden;

  /* Fade arriba y abajo */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  );
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  );
}.fullbleed__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}.btn-primary{
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;

  background: rgba(28, 222, 125, 0.94);
  color: #212121;

  border: 2px solid #39D98A;
  box-shadow: 0 0 0 0 rgba(57,217,138,0.4);

  transition: all .25s ease;
}.btn-primary:hover{
  background: rgba(28, 222, 125, 0.94);
  box-shadow: 0 0 0 6px rgba(57,217,138,0.25);
  transform: translateY(-2px);
}.btn-secondary{
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration: none;

  background: linear-gradient(
    180deg,
    #FFD85C 0%,
    #E6B93E 100%
  );

  color: #111;
  border: 2px solid #E6B93E;

  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transition: all .25s ease;
}.btn-secondary:hover{
  transform: translateY(-3px);
  filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}/* =========================
   COTIZACIÓN: responsive + fondo pro
   ========================= */

/* Para evitar cualquier “salida” horizontal en móvil */
html, body { overflow-x: hidden; }/* En móvil, aprieta paddings y evita zoom raro */


/* ================= MQ (max-width: 520px){ ================= */
/* ============================
   GALAXIBOT (chat flotante)
   ============================ */
.galaxybot{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200; /* arriba del header (1000) */
  font-family: var(--font-body);

  /* ✅ Evita bloquear la página: el contenedor solo mide lo del botón */
  width: 56px;
  height: 56px;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
}.galaxybot-fab{
  width: 56px;
  height: 56px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .18s ease, filter .18s ease;
}.galaxybot-fab:hover{ transform: translateY(-2px); filter: brightness(1.05); }.galaxybot-panel{
  position: absolute;
  right: 0;
  bottom: 68px; /* 56px botón + aire */
  width: min(360px, calc(100vw - 36px));
  max-height: min(520px, calc(100vh - 120px));
  overflow: hidden;
  border-radius: 18px;

  background: rgba(10, 18, 38, 0.78);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);

  opacity: 0;
  transform: translateY(10px) scale(0.98);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}.galaxybot.is-open .galaxybot-panel{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}.galaxybot-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}.galaxybot-title{
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}.galaxybot-sub{
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
  margin-top: 2px;
}.galaxybot-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #7dd3fc, #c084fc);
  box-shadow: 0 0 18px rgba(125,211,252,0.35);
}.galaxybot-x{
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.9);
  font-size: 24px;
  cursor: pointer;
  padding: 2px 8px;
}.galaxybot-body{
  padding: 12px;
  overflow: auto;
  max-height: 380px;
}.galaxybot-msg{
  padding: 10px 12px;
  border-radius: 14px;
  margin-bottom: 10px;
  line-height: 1.35;
  font-size: 0.98rem;
}.galaxybot-msg--bot{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
}.galaxybot-msg--user{
  background: rgba(255,213,74,0.18);
  border: 1px solid rgba(255,213,74,0.25);
  color: rgba(255,255,255,0.92);
  margin-left: 18px;
}.galaxybot-faq{
  display: grid;
  gap: 8px;
}.galaxybot-faq button{
  width: 100%;
  text-align: left;
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;

  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);

  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}.galaxybot-faq button:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.12);
  border-color: rgba(125,211,252,0.35);
}.galaxybot-foot{
  display: flex;
  gap: 10px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255,255,255,0.10);
}.galaxybot-link{
  flex: 1;
  text-align: center;
  text-decoration: none;
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 800;
  font-family: var(--font-title);
  letter-spacing: .2px;

  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
}.galaxybot-link:hover{
  border-color: rgba(255,213,74,0.35);
}/* === Tip bubble (aparece al pasar secciones) === */
.galaxybot-tip{
  position: absolute;
  right: 0;
  bottom: 74px;

  /* ✅ Nunca debe desbordarse en móvil */
  width: min(320px, calc(100vw - 36px));
  max-width: calc(100vw - 24px);
  box-sizing: border-box;

  /* ✅ espacio extra para que la “X” NO se encime con el texto */
  padding: 10px 40px 10px 12px;

  border-radius: 14px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 48px rgba(0,0,0,0.40);

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}.galaxybot-tip.is-show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}.galaxybot-tip__close{
  position: absolute;
  top: 6px;
  right: 8px;

  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 999px;

  border: none;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.95);

  font-size: 18px;
  cursor: pointer;
  pointer-events: all;
}

/* ================= MQ (max-width: 480px){ ================= */
/* ✅ Evita que el 1er globo (amarillo = user) se pegue a la última FAQ */
#galaxybotBody > .galaxybot-faq{
  margin-bottom: 14px;
}/* Si tu mensaje se inserta justo después del contenedor de FAQs */
#galaxybotBody > .galaxybot-faq + .galaxybot-msg--user{
  margin-top: 14px;
}/* ✅ FIX: el footer (botones) nunca se recorta al crecer el chat */
.galaxybot-panel{
  display: flex;
  flex-direction: column;
  overflow: hidden; /* se queda, pero ya no “corta” el footer */
}/* el header no se encoge */
.galaxybot-head{
  flex: 0 0 auto;
}/* ✅ el área de mensajes ocupa el espacio disponible y hace scroll */
.galaxybot-body{
  flex: 1 1 auto;
  overflow: auto;

  /* anulamos el comportamiento anterior que a veces empuja el footer */
  max-height: none;
}/* el footer no se encoge ni se va para abajo */
.galaxybot-foot{
  flex: 0 0 auto;
}/* Burbuja "escribiendo..." */
.galaxybot-msg--typing{
  opacity: .95;
}.galaxybot-typing-dots{
  display: inline-flex;
  gap: 6px;
  vertical-align: middle;
}.galaxybot-typing-dots i{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  display: inline-block;
  animation: gbDot 1s infinite ease-in-out;
}.galaxybot-typing-dots i:nth-child(2){ animation-delay: .15s; }.galaxybot-typing-dots i:nth-child(3){ animation-delay: .30s; }@keyframes gbDot{
  0%, 80%, 100% { transform: translateY(0); opacity: .5; }
  40%          { transform: translateY(-3px); opacity: 1; }
}/* Imagen dentro del botón flotante del chatbot */
.galaxybot-fab img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,0.32));
  pointer-events: none; /* evita clicks raros */
}/* ===== Modal Extras ===== */
body.no-scroll{
  overflow: hidden;
}/* ===== Responsive ===== */


/* ================= MQ (max-width: 900px){ ================= */
/* ===== Ajuste SOLO móvil para "Tu fiesta en Galaxitos" ===== */


/* ================= MQ (max-width: 520px){ ================= */
/* ===============================
   TOOLTIP CALENDARIO – GALAXIA
   (no se recorta en orillas / primera fila)
================================ */
.calendar-tooltip{
  position: fixed;
  left: 0;
  top: 0;

  /* el JS controla left/top; esto centra y anima */
  transform: translate(-50%, calc(-100% - 10px)) translateY(6px);
  white-space: nowrap;

  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 700;

  color: #fff;
  background: linear-gradient(
    135deg,
    rgba(255, 80, 80, 0.95),
    rgba(180, 40, 40, 0.95)
  );

  border-radius: 999px;
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.25);

  opacity: 0;
  pointer-events: none;
  z-index: 3000;

  transition:
    opacity .25s ease,
    transform .25s ease;
}/* Flechita (cuando va arriba del día) */
.calendar-tooltip::after{
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(180, 40, 40, 0.95);
}/* Cuando el tooltip debe ir ABAJO del día */
.calendar-tooltip.is-bottom{
  transform: translate(-50%, 10px) translateY(0);
}.calendar-tooltip.is-bottom::after{
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: rgba(180, 40, 40, 0.95);
}/* Visible */
.calendar-tooltip.is-visible{
  opacity: 1;
}.legend-item{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #fff;
  font-size: 0.95rem;
}.legend-item .dot{
  width: 14px;
  height: 14px;
  border-radius: 4px;
  box-shadow: 0 0 10px currentColor;
}/* mismos colores que el calendario */
.legend-item.disponible .dot{
  background: #00ff00;
}.legend-item.parcial .dot{
  background: #ffff00;
}.legend-item.lleno .dot{
  background: #ff0000;
}/* móvil */


/* ================= MQ (max-width: 520px){ ================= */
/* ===== Ajuste fino calendar-legend en móvil ===== */


/* ================= MQ (max-width: 520px) { ================= */
/* =========================================================
   ✅ Ajustes de fondos por sección + fades cortos (Orbiton/Estrellina/Rokko)
   ========================================================= */
:root{
  --c-orbiton: #BFEFD3;     /* verde Orbiton (pastel) */
  --c-estrellina: #FFF1B8;  /* amarillo Estrellina (pastel) */
  --c-rokko: #E7EAED;       /* gris Rokko (suave) */
  --c-rokko-2: #8F959B;     /* gris Rokko (acento suave) */
}/* Mobile: aún más corto */


/* ================= MQ (max-width: 768px){ ================= */
/* =========================================================
   WAIVER (multi-step) UI
   ========================================================= */
.waiver-body,
.waiver-admin-body{
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(160,110,255,.22), transparent 60%),
              radial-gradient(900px 500px at 80% 20%, rgba(50,220,255,.18), transparent 55%),
              linear-gradient(180deg, rgba(6,10,24,1) 0%, rgba(5,8,20,1) 100%);
  color: #eaf2ff;
}.waiver-shell{
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 14px 40px;
}.waiver-header{
  display:flex;
  flex-direction:column;
  gap: 14px;
  margin-bottom: 14px;
}.waiver-brand{
  display:flex;
  width: 100%;
  align-items:center;
  justify-content:center;
  text-align:center;
}.waiver-logo{
  width: 42px;
  height: 42px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}.waiver-title{ font-weight: 800; letter-spacing:.2px; text-align:center; }.waiver-subtitle{ opacity:.75; font-size: .95rem; text-align:center; }.waiver-steps{
  display:flex;
  gap: 10px;
  padding: 0;
  list-style:none;
  flex-wrap: wrap;
  justify-content:center;
}.waiver-step{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: .92rem;
  opacity: .65;
}.waiver-step.is-active{
  opacity: 1;
  background: rgba(130,255,210,.13);
  border-color: rgba(130,255,210,.22);
}.waiver-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  margin-bottom: 14px;
}.waiver-h1{ margin: 0 0 8px; font-size: 1.5rem; }.waiver-h2{ margin: 0 0 10px; font-size: 1.15rem; }.waiver-h3{ margin: 0 0 10px; font-size: 1.05rem; }.waiver-p{ margin: 0 0 12px; opacity: .88; line-height: 1.45; }.waiver-small{ opacity: .75; font-size: .92rem; }.waiver-divider{
  height: 1px;
  background: rgba(255,255,255,.12);
  margin: 14px 0;
}.waiver-formgrid{
  display:grid;
  gap: 12px;
}.waiver-formgrid.two{
  grid-template-columns: 1fr 1fr;
}.waiver-field{ display:flex; flex-direction:column; gap:6px; }.waiver-field span{ font-size:.92rem; opacity:.85; }.waiver-field.full{ grid-column: 1 / -1; }.waiver-field input,
.waiver-field select,
.waiver-field textarea,
.waiver-admin-search{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(6,10,24,.45);
  color: #eaf2ff;
  outline: none;
}.waiver-field textarea{
  resize: vertical;
  min-height: 110px;
}.waiver-field input[readonly]{
  background: rgba(255,255,255,.09);
  color: rgba(234,242,255,.92);
}.waiver-field input::placeholder,
.waiver-field textarea::placeholder,
.waiver-admin-search::placeholder{ color: rgba(234,242,255,.55); }.waiver-dob{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}.waiver-actions{
  display:flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}.waiver-actions--center{
  justify-content:center;
}.waiver-actions.split{
  justify-content: space-between;
  align-items:center;
}.waiver-btn{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #eaf2ff;
  padding: 10px 14px;
  border-radius: 14px;
  cursor:pointer;
  font-weight: 700;
}.waiver-btn:hover{ background: rgba(255,255,255,.10); }.waiver-btn.primary{
  background: rgba(255,234,120,.18);
  border-color: rgba(255,234,120,.28);
}.waiver-btn.primary:hover{ background: rgba(255,234,120,.24); }.waiver-btn.ghost{
  background: rgba(255,255,255,.06);
}.waiver-btn.tiny{
  padding: 7px 10px;
  border-radius: 12px;
  font-size: .9rem;
}.waiver-btn.danger{
  background: rgba(255,90,90,.14);
  border-color: rgba(255,90,90,.28);
}.waiver-btn.danger:hover{ background: rgba(255,90,90,.20); }.waiver-btn:disabled{
  opacity: .5;
  cursor: not-allowed;
}.waiver-hint{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px dashed rgba(255,255,255,.14);
  min-height: 18px;
  opacity: .92;
}.waiver-hint:empty{
  display:none;
}.waiver-hint.is-error{
  border-color: rgba(255,90,90,.40);
  background: rgba(255,90,90,.12);
}.waiver-hint.is-ok{
  border-color: rgba(70,255,160,.40);
  background: rgba(70,255,160,.10);
}.waiver-note{
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,234,120,.10);
  border: 1px solid rgba(255,234,120,.18);
  color: rgba(255,245,194,.96);
  line-height: 1.5;
}.waiver-intro{
  text-align:center;
}.waiver-intro__eyebrow{
  margin-bottom: 10px;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 900;
  letter-spacing: .08em;
}.waiver-intro__meta{
  margin-bottom: 16px;
  color: rgba(234,242,255,.82);
  line-height: 1.55;
}.waiver-intro__title{
  margin: 0 auto 16px;
  max-width: min(1100px, 92%);
  font-size: clamp(1.05rem, 1.55vw, 1.45rem);
  line-height: 1.32;
  text-wrap: balance;
}.waiver-intro__warning{
  margin: 0 auto;
  max-width: 62ch;
  color: rgba(255,245,194,.96);
  font-size: 1rem;
  line-height: 1.6;
}.waiver-children{ display:flex; flex-direction:column; gap: 12px; }.waiver-childcard{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px;
}.waiver-childcard__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 10px;
}.waiver-childcard__title{
  font-weight: 800;
}.waiver-rules{
  display:flex;
  justify-content:center;
  margin: 10px 0 14px;
}.waiver-rules img{
  max-width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
}.waiver-progress{
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  transform: translate3d(-50%, 0, 0);
  width: min(620px, calc(100vw - 28px));
  z-index: 10020;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(6,10,24,.94);
  border: 1px solid rgba(255,255,255,.18);
  margin-bottom: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.42);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  will-change: transform;
}.waiver-progress__title{ font-weight: 800; }.waiver-progress__sub{ opacity:.75; font-size:.92rem; }.waiver-progress__icon{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.16);
}.waiver-progress.is-warn{
  border-color: rgba(255,90,90,.42);
  background: rgba(86,18,18,.94);
}.waiver-progress.is-warn .waiver-progress__icon{
  background: rgba(255,90,90,.28);
  border-color: rgba(255,90,90,.38);
}.waiver-progress.is-ok{
  border-color: rgba(70,255,160,.42);
  background: rgba(16,74,50,.94);
}.waiver-progress.is-ok .waiver-progress__icon{
  background: rgba(70,255,160,.20);
  border-color: rgba(70,255,160,.34);
}.waiver-legal{
  padding: 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.10);
}.waiver-card[data-step="3"]{
  padding-bottom: 110px;
}.waiver-legal-section{
  display:block;
  width:100%;
  min-height:auto !important;
  padding:0 !important;
  background: transparent !important;
  text-align:left !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
}.waiver-legal h3{
  margin: 0 0 14px;
}.waiver-legal h4{
  margin: 0 0 12px;
  font-size: .98rem;
  letter-spacing: .02em;
}.waiver-legal p{ margin: 0 0 10px; opacity:.9; line-height: 1.45; }.waiver-legal-section + .waiver-legal-section{
  margin-top: 18px;
}.waiver-legal-copy{
  margin-bottom: 12px;
}.waiver-checks{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin: 14px 0 8px;
}.waiver-check{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}.waiver-check input{
  transform: translateY(3px);
  margin: 0;
}.waiver-check__content{
  display:flex;
  flex-direction:column;
  gap: 8px;
  min-width: 0;
}.waiver-check__text{
  line-height: 1.45;
}.waiver-legal-note{
  margin: 0;
  font-size: .94rem;
  opacity: .92;
}.waiver-legal-list{
  margin: 0;
  padding-left: 18px;
  list-style: disc;
  display:grid;
  gap: 6px;
}.waiver-legal-closing{
  margin: 0;
  font-weight: 700;
}.waiver-sign{
  margin-top: 18px;
}.waiver-sign__label{ font-weight: 800; margin-bottom: 8px; }.waiver-sign__pad{
  width: 100%;
  height: 220px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.12);
  overflow:hidden;
}.waiver-autocomplete{
  position: relative;
}.waiver-suggestions{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  display:flex;
  flex-direction:column;
  gap: 4px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(5,10,24,.96);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 50px rgba(0,0,0,.35);
  max-height: 240px;
  overflow:auto;
}.waiver-suggestion{
  border: 0;
  text-align: left;
  color: #eaf2ff;
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
}.waiver-suggestion:hover{
  background: rgba(255,255,255,.10);
}.waiver-canvas{
  width: 100%;
  height: 100%;
  display:block;
}.waiver-confirm{
  display:grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 26px;
  align-items: start;
}.waiver-confirm__summary{
  padding-left: 6px;
}

/* ================= MQ (min-width: 1100px){ ================= */


/* ================= MQ (max-width: 900px){ ================= */
.waiver-qrbox{
  width: 100%;
  display:grid;
  place-items:center;
  padding: 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
}.waiver-summary{ display:flex; flex-direction:column; gap: 10px; }.waiver-row{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}.waiver-row__name{ display:flex; gap:10px; align-items:center; font-weight:800; }.waiver-row__dob{ opacity:.8; }.waiver-chip{
  font-size: .8rem;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(120,170,255,.16);
  border: 1px solid rgba(120,170,255,.26);
}/* =========================================================
   ADMIN WAIVERS PAGE
   ========================================================= */
.admin-header{
  padding: 12px 14px;
}.admin-nav{
  max-width: 1100px;
  margin: 0 auto;
  display:flex;
  gap: 14px;
}.admin-link{
  color: #eaf2ff;
  text-decoration:none;
  opacity:.9;
  font-weight: 800;
}.admin-link:hover{ opacity: 1; text-decoration: underline; }.waiver-admin-shell{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 14px 40px;
}.waiver-admin-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}.waiver-scanbox{
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
}.waiver-detailcard{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px;
  min-height: 240px;
}.waiver-detailtop{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 12px;
}.waiver-badge{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 800;
}.waiver-tablewrap{
  overflow:auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
}.waiver-table{
  width:100%;
  border-collapse: collapse;
  min-width: 760px;
}.waiver-table th,
.waiver-table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align:left;
  font-size: .93rem;
}.waiver-table thead th{
  background: rgba(255,255,255,.06);
  position: sticky;
  top: 0;
  z-index: 5;
}

/* ================= MQ (max-width: 900px){ ================= */
/* ====== Waiver v3 fixes: header fijo + steps por seccion ====== */
[hidden]{ display:none !important; }/* Admin/consultas: header sticky y el contenido NO se mete debajo */
body.waiver-admin-body .waiver-header{
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(6,10,24,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}/* Reserva automáticamente el alto del header sticky para que no tape el contenido */
body.waiver-admin-body .waiver-shell{
  padding-top: calc(var(--waiver-header-h, 0px) + 14px);
}body.waiver-admin-body .waiver-admin-shell{
  padding-top: calc(var(--waiver-header-h, 0px) + 14px);
}body.waiver-body .waiver-shell{
  /* deja espacio para el header fijo */
  padding-top: calc(var(--waiver-header-h, 0px) + var(--adminNavH, 0px) + 12px);
}body.waiver-body .waiver-header{
  border-radius: 0 !important;
  margin: 0 !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(6,10,24,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}/* Si existe un navbar del admin arriba, coloca el header del waiver justo debajo */
.has-admin-nav body.waiver-body .waiver-header{ top: var(--adminNavH, 0px); }.has-admin-nav body.waiver-body .waiver-shell{ padding-top: calc(var(--waiver-header-h, 0px) + var(--adminNavH, 0px) + 12px); }.waiver-header-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 14px 10px;
}

/* ================= MQ (max-width: 640px){ ================= */
/* QR image (rendered server-side) */
.waiver-qrimg{
  width: 240px;
  height: 240px;
  max-width: 100%;
  border-radius: 12px;
  background: rgba(255,255,255,.02);
}/* =========================================================
   WAIVER FORM — FIX grid spacing + overflow (Nombre/Apellido)
   Scope: only waiver pages (body.waiver-body) to avoid affecting site
   ========================================================= */
body.waiver-body section.waiver-card{
  /* override global section alignment WITHOUT breaking step hide/show logic */
  text-align: left !important;
  justify-content: flex-start;
  align-items: stretch;
}body.waiver-body section.waiver-card.waiver-intro{
  text-align: center !important;
  justify-content: center;
  align-items: center;
}body.waiver-body .waiver-card .waiver-formgrid{
  width: 100%;
  max-width: 100%;
}/* Two-column layout with real gap and safe min widths */
body.waiver-body .waiver-formgrid.two{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 18px !important;
  row-gap: 14px !important;
}/* Prevent grid children from forcing overflow */
body.waiver-body .waiver-formgrid.two > *{
  min-width: 0;
}/* Inputs/selects should never overflow their cells */
body.waiver-body .waiver-field input,
body.waiver-body .waiver-field select,
body.waiver-body .waiver-field textarea{
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}/* On small screens, stack columns */


/* ================= MQ (max-width: 640px){ ================= */
/* ===== Meteoro (wrapper) ===== */
.meteor{
  position: absolute;
  display: block;
  /* mantiene el layout actual (tamaño/pos vienen de bubble-lg/b1 etc.) */
}/* La imagen real */
.meteor__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  /* recorte meteoro */
  -webkit-mask-image: url('/imagenes/mask-meteor.png');
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;

  mask-image: url('/imagenes/mask-meteor.png');
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;

  /* sombra general */
  filter: drop-shadow(0 14px 35px rgba(0,0,0,0.28));
}/* ✅ CONTORNO  */
.meteor::before{
  content: "";
  position: absolute;
  inset: -14px;              /* grosor del borde */
  background: #fff;         /* color del contorno */
  z-index: 0;
  transform: scale(1.02);   /* empuja el borde hacia afuera */

  -webkit-mask-image: url('/imagenes/mask-meteor.png');
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;

  mask-image: url('/imagenes/mask-meteor.png');
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;

  opacity: 0.9;
}/* La foto arriba del borde */
.meteor__img{ position: relative; z-index: 1; }/* ===== Meteoro Small ===== */
.meteor-sm{
  position: absolute;
  display: block;
  /* mantiene el layout actual (tamaño/pos vienen de bubble-lg/b1 etc.) */
}/* La imagen real */
.meteor-sm__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  /* recorte meteoro */
  -webkit-mask-image: url('/imagenes/meteoro-sm.png');
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;

  mask-image: url('/imagenes/meteoro-sm.png');
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;

  /* sombra general */
  filter: drop-shadow(0 14px 35px rgba(0,0,0,0.28));
}/* ✅ CONTORNO  */
.meteor-sm::before{
  content: "";
  position: absolute;
  inset: -14px;              /* grosor del borde */
  background: #fff;         /* color del contorno */
  z-index: 0;
  transform: scale(1.02);   /* empuja el borde hacia afuera */

  -webkit-mask-image: url('/imagenes/meteoro-sm.png');
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;

  mask-image: url('/imagenes/meteoro-sm.png');
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;

  opacity: 0.9;
}/* La foto arriba del borde */
.meteor-sm__img{ position: relative; z-index: 1; }/* ===== Meteoro Medium ===== */
.meteormd{
  position: absolute;
  display: block;
  /* mantiene el layout actual (tamaño/pos vienen de bubble-lg/b1 etc.) */
}/* La imagen real */
.meteormd__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  /* recorte meteoro */
  -webkit-mask-image: url('/imagenes/meteoro-md.png');
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;

  mask-image: url('/imagenes/meteoro-md.png');
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;

  /* sombra general */
  filter: drop-shadow(0 14px 35px rgba(0,0,0,0.28));
}/* ✅ CONTORNO  */
.meteormd::before{
  content: "";
  position: absolute;
  inset: -14px;              /* grosor del borde */
  background: #fff;         /* color del contorno */
  z-index: 0;
  transform: scale(1.02);   /* empuja el borde hacia afuera */

  -webkit-mask-image: url('/imagenes/meteoro-md.png');
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;

  mask-image: url('/imagenes/meteoro-md.png');
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;

  opacity: 0.9;
}/* La foto arriba del borde */
.meteormd__img{ position: relative; z-index: 1; }/* ==============================
   UBICACIÓN (Mapa) — Galaxy style
   (debajo del calendario)
============================== */
.ubicacion{
  padding: 26px 14px 34px;
}.ubicacion-inner{
  max-width: 980px;
  margin: 0 auto 22px;
  text-align: center;
}.ubicacion-title{
  margin: 0 auto 18px;
  max-width: min(22ch, 100%);
  color: #fff;
  font-size: clamp(1.45rem, 2.8vw, 2.3rem);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: .3px;
  text-shadow: 0 12px 30px rgba(0,0,0,.45);
  text-wrap: balance;
  position: relative;
  display: block;
}.ubicacion-title::after{
  content: "";
  display: block;
  height: 3px;
  width: 92px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.72), rgba(255,255,255,0));
  opacity: .9;
}.ubicacion-sub{
  margin: 0 0 14px;
  color: rgba(255,255,255,.88);
  font-weight: 700;
}.map-card{
  position: relative;
  display: block;
  margin: 0 auto;
  width: min(620px, 100%);
  overflow: visible;
  transform: translateZ(0);
  transition: transform .18s ease;
}.map-card:hover{
  transform: translateY(-2px);
}.map-card__frame{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,24,64,.35);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: filter .18s ease;
}.map-card:hover .map-card__frame{
  filter: brightness(1.06);
}.map-card__img{
  display: block;
  width: 100%;
  height: auto;
}.map-card__accent{
  position: absolute;
  left: clamp(-18px, -1.8vw, -8px);
  bottom: clamp(-34px, -4.4vw, -14px);
  width: clamp(150px, 20vw, 228px);
  height: auto;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.28));
}.map-card__hint{
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.85rem;
  color: #0b0f1e;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.45);
  z-index: 2;
}

#salones{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#salones > *{
  position: relative;
  z-index: 2;
}

/* ================= MQ (max-width: 520px){ ================= */


/* ================= MQ (max-width: 520px){ ================= */
/* =========================
   FOOTER GALAXÍTOS
========================= */

.footer-galaxitos {
  background: rgb(37, 37, 37); /* mismo fondo que #inicio */
  color: #ffffff;
  padding: 50px 20px 40px;
  border-top: 0; /* ✅ quita la “línea blanca” */
}.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}/* ✅ empuja el bloque de links un poco hacia la izquierda */
.footer-links{
  margin-right: clamp(24px, 8vw, 120px);
}/* Lado izquierdo */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}.footer-brand img {
  width: 180px;
  height: auto;
}.footer-brand p {
  font-size: 0.9rem;
  opacity: 0.75;
}/* Lado derecho */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: right;
}.footer-links h4 {
  font-family: var(--font-title);
  font-size: 1.1rem;
  margin-bottom: 6px;
}.footer-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.95rem;
  opacity: 0.85;
  transition: opacity 0.25s ease, transform 0.25s ease;
}.footer-links a:hover {
  opacity: 1;
  transform: translateX(-4px);
}/* ===== Responsive ===== */


/* ================= MQ (max-width: 768px) { ================= */
/* ==============================
   GALAXY DECOR — Reutilizable (Admin)
   Basado en coming-soon.html
================================= */

body.galaxy-bg{
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: #fff;

  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(125,211,252,.25), transparent 55%),
    radial-gradient(900px 500px at 80% 30%, rgba(192,132,252,.22), transparent 55%),
    radial-gradient(800px 500px at 50% 85%, rgba(255,215,0,.10), transparent 55%),
    linear-gradient(180deg, #09162c 0%, #070b1a 55%, #02040a 100%);
}/* Capa decorativa fija detrás de todo */
.galaxy-decor{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}/* Estrellitas (tiled) */
.galaxy-stars{
  position: absolute;
  inset: 0;
  opacity: .85;
  background-image:
    radial-gradient(1px 1px at 12px 18px, rgba(255,255,255,.95) 50%, transparent 55%),
    radial-gradient(1px 1px at 120px 90px, rgba(255,255,255,.75) 50%, transparent 55%),
    radial-gradient(1px 1px at 200px 40px, rgba(255,255,255,.85) 50%, transparent 55%),
    radial-gradient(1px 1px at 40px 210px, rgba(255,255,255,.65) 50%, transparent 55%),
    radial-gradient(1px 1px at 170px 170px, rgba(255,255,255,.75) 50%, transparent 55%);
  background-size: 260px 260px;
  animation: galaxyTwinkle 3.2s ease-in-out infinite alternate;
}@keyframes galaxyTwinkle { from{opacity:.55} to{opacity:1} }/* Glow tipo nebulosa */
.galaxy-glow{
  position: absolute;
  inset: -60px;
  background:
    radial-gradient(700px 420px at 30% 25%, rgba(125,211,252,.18), transparent 60%),
    radial-gradient(800px 520px at 75% 40%, rgba(192,132,252,.14), transparent 62%),
    radial-gradient(700px 520px at 55% 85%, rgba(255,215,0,.08), transparent 65%);
  filter: blur(2px);
  opacity: 1;
}/* Cometa (línea + glow) */
.galaxy-comet{
  position: absolute;
  top: 14%;
  left: -35%;
  width: 75%;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(125,211,252,0),
    rgba(125,211,252,.9),
    transparent
  );
  transform: rotate(-12deg);
  opacity: .85;
  animation: galaxyFly 4.8s ease-in-out infinite;
}.galaxy-comet::after{
  content: "";
  position: absolute;
  inset: -10px 0;
  background: inherit;
  filter: blur(10px);
  opacity: .55;
}@keyframes galaxyFly{
  0%   { transform: translateX(0) rotate(-12deg);   opacity:.1 }
  35%  { opacity:.95 }
  100% { transform: translateX(70%) rotate(-12deg); opacity:.1 }
}/* Asegura que el contenido quede arriba del decor */
body.galaxy-bg > *{ position: relative; z-index: 1; }/* ...pero la capa decorativa se queda detrás */
body.galaxy-bg > .galaxy-decor{ z-index: 0; }/* Admin: que el section no tape el fondo */
body.galaxy-bg section{
  background: transparent !important;
  color: #fff;
  padding-top: 90px;
  min-height: 100vh;
}


#inicio .floating-character img{
  width: min(550px, 92vw) !important;
  height: auto !important;
}

/* =========================================================
   CALENDARIO — TODO JUNTO (FullCalendar + Modal de bloques)
   Dedupe: no se encontraron bloques idénticos para eliminar,
   pero ya quedó agrupado y fácil de mantener.
========================================================= */

#inicio, #salon, #paquetes, #calendario, #cotizacion, #resenas {
    position: relative;
}

/* =========================================================
   4. Sección INICIO (Hero / partículas)
   (Ordenado por secciones SIN reordenar la cascada)
========================================================= */

.hero-title{
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: -0.5px;
}

#inicio {
  position: relative;
  background-color: rgb(37, 37, 37); /* Fondo oscuro para que las partículas sean visibles */
  min-height: 90vh; 
  color: beige;
  overflow: hidden;
}

#inicio canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;    
}

#inicio h1 {
  position: relative;
  color: #fff;
  text-align: center;
}

#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* ===== HERO ===== */
.hero-galaxitos{
  padding: 48px 14px 26px;
  background: radial-gradient(circle at top, rgba(255,255,255,0.18), rgba(0,0,0,0));
}

.hero-inner{
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 22px;
  align-items: center;
}

.hero-copy h1{
  margin: 0 0 10px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.04em;
  font-size: clamp(3.5rem, 7vw, 5rem);
  line-height: 1.02;
  letter-spacing: -1px;
  font-weight: 900;
  color: #ffffff;
}

.hero-title__lead,
.hero-title__brand{
  display: block;
  white-space: nowrap;
}

.hero-title__lead{
  font-size: 0.48em;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.82);
}

.hero-subtitle{
  margin: 0 0 16px;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.45;
  color: #ffffff;
}

.hero-cta{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}



/* ================= MQ (max-width: 768px){ ================= */


/* Fotos circulares */
.hero-bubbles{
  position: relative;
  min-height: 280px;
}

.hero-bubbles .bubble{
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  object-fit: cover;
  border: 4px solid rgba(255,255,255,0.55);
  box-shadow: 0 14px 35px rgba(0,0,0,0.25);
}

.bubble-1{ top: 0; left: 30px; transform: rotate(-6deg); }

.bubble-2{ top: 90px; right: 10px; transform: rotate(8deg); width: 155px; height: 155px; }

.bubble-3{ bottom: 0; left: 90px; transform: rotate(-2deg); width: 120px; height: 120px; }

/* ===== Fotos circulares (1–3) ===== */
.bubble-cluster{
  position: relative;
  min-height: 240px;
}

.bubble-photo{
  position: absolute;
  border-radius: 999px;
  object-fit: cover;
  border: 4px solid rgba(255,255,255,0.55);
  box-shadow: 0 14px 35px rgba(0,0,0,0.28);
  background: rgba(255,255,255,0.08);
}

/* tamaños */
.bubble-lg{ width: 540px; height: 540px; }

.bubble-md{ width: 340px; height: 340px; }

.bubble-sm{ width: 310px; height: 310px; }



/* ================= MQ (min-width: 1100px){ ================= */




/* ================= MQ (min-width: 769px){ ================= */


/* Variaciones sutiles (para que no floten “en sync”) */
.bubble-cluster .b1.meteor,
.bubble-cluster .b1.meteor-sm,
.bubble-cluster .b1.meteormd{ animation-duration: 7.6s; animation-delay: -1.2s; }

.bubble-cluster .b2.meteor,
.bubble-cluster .b2.meteor-sm,
.bubble-cluster .b2.meteormd{ animation-duration: 6.4s; animation-delay: -2.0s; }

.bubble-cluster .b3.meteor,
.bubble-cluster .b3.meteor-sm,
.bubble-cluster .b3.meteormd{ animation-duration: 7.1s; animation-delay: -0.6s; }

/* ===== Personaje grande en el HERO (reemplaza burbujas) ===== */
.hero-character{
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-character__img{
  width: clamp(260px, 32vw, 520px); /* grande y responsivo */
  height: auto;
  max-width: 100%;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.28));
}

#salones .split-media{
  display: flex;
  justify-content: center;
}

#salones .salon-showcase{
  position: relative;
  width: min(560px, 100%);
  aspect-ratio: 11 / 8.4;
  margin-inline: auto;
  padding: clamp(14px, 2vw, 18px);
  border-radius: 42px 118px 42px 118px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)),
    linear-gradient(135deg, rgba(10,26,82,0.82), rgba(20,47,122,0.42));
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 28px 54px rgba(0,0,0,0.24);
}

#salones .salon-showcase::before,
#salones .salon-showcase::after{
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

#salones .salon-showcase::before{
  width: 190px;
  height: 190px;
  top: -58px;
  left: -58px;
  background: radial-gradient(circle, rgba(77,184,255,0.34), transparent 72%);
}

#salones .salon-showcase::after{
  width: 210px;
  height: 210px;
  right: -72px;
  bottom: -82px;
  background: radial-gradient(circle, rgba(255,213,77,0.2), transparent 74%);
}

#salones .salon-showcase__photo{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 30px 102px 30px 102px;
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 18px 34px rgba(0,0,0,0.24);
}

#salones .salon-showcase__accent{
  position: absolute;
  z-index: 3;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,0.24));
}

#salones .salon-showcase__accent--pastel{
  width: clamp(110px, 14vw, 150px);
  right: 8px;
  bottom: 8px;
  transform: rotate(8deg);
}

#salones .salon-showcase__accent--estrellina{
  width: clamp(118px, 15vw, 160px);
  top: 8px;
  left: 8px;
  transform: rotate(-9deg);
}

#salones .salon-showcase--mini{
  transform: rotate(1.8deg);
}

#salones .salon-showcase--constelacion{
  border-radius: 118px 42px 118px 42px;
  transform: rotate(-1.8deg);
}

#salones .salon-showcase--constelacion .salon-showcase__photo{
  border-radius: 102px 30px 102px 30px;
}



/* ===== Fondo galaxia progresivo ===== */

/* =========================================================
   5. Sección SALON (fondo galaxia + bloques)
   (Ordenado por secciones SIN reordenar la cascada)
========================================================= */

#salon{
  position: relative;
  background:
    /* Nebulosas suaves */
    radial-gradient(
      900px 600px at 80% 20%,
      rgba(173, 120, 255, 0.25),
      transparent 60%
    ),
    radial-gradient(
      700px 500px at 20% 40%,
      rgba(255, 120, 200, 0.18),
      transparent 65%
    ),

    /* Degradado principal vertical */
    linear-gradient(
      180deg,
      #0b89d5 0%,        /* azul principal */
      #08659e 8%,
      #14212f 18%,
      #325292 27%,
      #39379f 50%,      /* transición galaxia */
      #524bcf 80%,
      #cfcfe9 98%,      /* casi blanco (más abajo) */
      #ffffff 100%     /* conecta con Paquetes */
    );

  overflow: hidden;
}

/* Capa de estrellas muy sutil */
#salon::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 90% 65%, rgba(255,255,255,0.5), transparent);
  opacity: 0.35;
  z-index: 0;
}

/* Asegura que el contenido esté arriba */
#salon > *{
  position: relative;
  z-index: 1;
}

/* ===== ZONA COMETA ===== */
.zona-cometa{ padding: 26px 14px; }

.zona-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  align-items: center;
}

.zona-text h2{ margin: 0 0 10px; }

.zona-bullets{
  margin: 12px 0 0;
  padding-left: 18px;
}

.zona-photo img{
  width: 260px;
  height: 260px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  border: 4px solid rgba(255,255,255,0.55);
  box-shadow: 0 14px 35px rgba(0,0,0,0.25);
}



/* ================= MQ (min-width: 768px){ ================= */




/* ================= MQ (min-width: 1100px){ ================= */


/* ===== Fondo continuo azul en la parte superior (dentro de #salon) ===== */
#salon section{
  background: transparent !important;  /* evita el gris global de section {} */
}

/* ===== Bloques dentro de #salon (Zona Cometa / Salones) ===== */
.prelude-block{
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px 14px;
  color: beige; /* tu #salon ya usa beige */
}

.zona-cometa-logo{
  display: block;
  margin: 0 auto 12px;
  width: min(720px, 100vw);   /* ✅ grande en PC y móvil */
  height: auto;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.35));
  animation: floatSoft 4.8s ease-in-out infinite;
}



/* ================= MQ (max-width: 520px){ ================= */


.prelude-title{
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 8px 26px rgba(0,0,0,.25);
}

.prelude-sub{
  margin: 0 auto 18px;      /* ✅ centra el bloque */
  max-width: 900px;
  color: rgba(255,255,255,0.9);
  line-height: 2.0;
  font-weight: 800;
  text-align: center;       /* ✅ centra el texto */
  font-size: clamp(1.6rem, 2vw, 1.8rem);
}

/* ===== Filas alternadas texto/medios ===== */
.split-row{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  align-items: center;
  padding: 18px 0;
  border-top: none;
}

.split-row:first-of-type{ border-top: none; }

.split-row.is-right .split-text{ order: 2; }

.split-row.is-right .split-media{ order: 1; }

.split-text h3{
  margin: 10 10 10;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 900;
}

/* ===== Títulos grandes en "split" (Zona Cometa + Salones) ===== */
#zona-cometa .split-text h1{
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(2.2rem, 4.2vw, 3.2rem);
  font-weight: 900;
  line-height: 1.06;
  text-shadow: 0 8px 26px rgba(0,0,0,.25);
}

.split-text p{
  margin: 0 0 10px;
  color: rgba(255,255,255,0.92);
  line-height: 1.35;
}

.split-bullets{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(255,255,255,0.92);
}

/* ===== Personajes asomándose en #salon ===== */
/* ===== Personajes asomándose en #salon ===== */
#salon{
  position: relative;
  overflow: hidden;
}

/* Capa que ocupa TODO el #salon (ancho completo) */
#salon .salon-peekers{
  position: absolute;
  inset: 0;
  width: 100%;
  pointer-events: none; /* no estorba clicks */
  z-index: 2;           /* encima del fondo, debajo de cosas si quieres */
}

/* Cada personaje */
#salon .salon-peekers .peeker{
  position: absolute;
  top: var(--y, 200px);
  width: clamp(280px, 21vw, 420px); /* ✅ más grande en desktop */
  height: auto;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.28));
  opacity: 0.98;
}

#salon .salon-peekers .peeker2{
  position: absolute;
  top: var(--y, 200px);
  width: clamp(340px, 22vw, 480px); /* ✅ más grande en desktop */
  height: auto;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.28));
  opacity: 0.98;
}

/* ✅ Pegados a la orilla (usando viewport, no el contenedor centrado) */
#salon .salon-peekers .peeker.left{
  left: 0;
  transform: translateX(-50%) rotate(8deg);  /* ✅ inclinación */
  transform-origin: bottom left;
}

#salon .salon-peekers .peeker.right{
  right: 0;
  transform: translateX(45%) rotate(-8deg);    /* ✅ inclinación */
  transform-origin: bottom right;
}

#salon .salon-peekers .peeker.right2{
  right: 0;
  transform: translateX(-130%) rotate(-8deg);    /* ✅ inclinación */
  transform-origin: bottom right;
}

#salon .salon-peekers .peeker.left2{
  left: 0;
  transform: translateX(90%);
  transform-origin: bottom left;
}

/*--------------- Imagenes de fondo ------------ */

/* Capa que ocupa TODO el #salon (ancho completo) */
#salon .salon-fondos{
  position: absolute;
  inset: 0;
  width: 100%;
  pointer-events: none; /* no estorba clicks */
  z-index: 2;           /* encima del fondo, debajo de cosas si quieres */
}

/* Cada personaje */
#salon .salon-fondos .fondo{
  position: absolute;
  top: var(--y, 200px);
  width: clamp(480px, 48vw, 720px); /* ✅ más grande en desktop */
  height: auto;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.28));
  opacity: 0.32;
}

/* ✅ Pegados a la orilla (usando viewport, no el contenedor centrado) */
#salon .salon-fondos .fondo.left{
  left: 0;
  transform: translateX(-45%) rotate(8deg);  /* ✅ inclinación */
  transform-origin: bottom left;
}

#salon .salon-fondos .fondo.right{
  right: 0;
  transform: translateX(45%) rotate(-8deg);    /* ✅ inclinación */
  transform-origin: bottom right;
}

#salon .salon-fondos .fondo2{
  position: absolute;
  top: var(--y, 200px);
  width: clamp(1980px, 50vw, 580px); /* ✅ más grande en desktop */
  height: auto;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.28));
  opacity: 0.22;
}

#salon .salon-fondos .fondo2.left2{
  left: 0;
  transform: translateX(-67%);  /* ✅ inclinación */
  transform-origin: bottom left;
}

/* ============================
   SALONES: "Tu fiesta en GALAXÍTOS™"
   - Mini Nebulosa: foto circular a la derecha
   - Constelación: foto MUY grande a la izquierda y recortada al borde
   ============================ */

#salones .split-row{
  position: relative;
  padding: 34px 0;
}

/* Tipografía más grande + centrada */
#salones .split-text{
  text-align: center;
  margin-inline: auto;
  max-width: 44ch;
}

#salones .split-text h3{
  font-size: clamp(2.2rem, 4.2vw, 3.2rem);
  line-height: 1.06;
}

#salones .split-text p{
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.25;
  margin: 0 auto;
}

.souvenirs-mini{
  position: relative;
  width: min(1160px, calc(100% - clamp(32px, 4vw, 72px)));
  box-sizing: border-box;
  margin: clamp(24px, 4vw, 40px) auto 18px;
  padding: clamp(24px, 3.8vw, 36px);
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(320px 180px at 10% 18%, rgba(255,255,255,0.16), transparent 60%),
    radial-gradient(260px 180px at 90% 12%, rgba(193,140,255,0.18), transparent 62%),
    linear-gradient(180deg, rgba(21,34,92,0.56), rgba(11,18,52,0.42));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 22px 50px rgba(0,0,0,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.souvenirs-mini::before{
  content: "";
  position: absolute;
  inset: auto -12% -55% auto;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,211,103,0.24), transparent 68%);
  pointer-events: none;
}

.souvenirs-mini__copy{
  position: relative;
  z-index: 1;
  max-width: 60ch;
  margin: 0 auto 22px;
  text-align: center;
}

.souvenirs-mini__eyebrow{
  margin: 0 0 10px;
  color: rgba(255,255,255,0.78);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.82rem;
  font-weight: 800;
}

.souvenirs-mini__copy h3{
  margin: 0;
  color: #fff;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  line-height: 1.08;
  text-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

.souvenirs-mini__text{
  margin: 12px auto 0;
  max-width: 56ch;
  color: rgba(255,255,255,0.88);
}

.souvenirs-mini__grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}

.souvenir-card{
  min-width: 0;
  box-sizing: border-box;
  padding: 18px 16px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.souvenir-card h4{
  margin: 0 0 8px;
  color: #fff;
  font-size: 1.1rem;
  line-height: 1.18;
}

.souvenir-card p{
  margin: 0;
  color: rgba(255,255,255,0.85);
  font-size: 0.98rem;
  line-height: 1.38;
}

.souvenirs-mini + .extras-cta{
  margin-top: 8px;
}

/* =========================================================
   MEDIA QUERIES (reordenadas al final)
   Nota: se movieron todas las reglas @media para que la cascada sea predecible.
========================================================= */

/* ===== @media (max-width: 1024px) ===== */
@media (max-width: 1024px) {
    .waiver-form {
        padding: 15px;
    }
    
    .signature-container {
        max-width: 100%;
    }
    
    #signature-pad {
        height: 150px;
        border-width: 2px;
    }
    
@media (max-width: 1024px) {
  h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
}

@media (max-width: 768px) {
  h1 { font-size: clamp(2rem, 8vw, 3.6rem); }
}
    
    .form-group label {
        font-size: 1rem;
    }
}

/* ===== @media (max-width: 900px) ===== */
@media (max-width: 900px){
  .resenas-grupo{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px){
  .amenidades-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px){
  .amenidades-grid > .amenidad-item:last-child:nth-child(3n + 1){
    grid-column: auto;
    justify-self: stretch;
    max-width: none;
  }

  .amenidades-grid > .amenidad-item:last-child:nth-child(odd){
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 420px;
  }
}

@media (max-width: 900px){


  /* ✅ reduce el “alto” del hero en móvil */
  .hero-galaxitos{
    padding: 34px 14px 16px; /* antes: 48px 14px 26px */
  }

  /* ✅ menos separación entre texto y oso */
  .hero-inner{
    gap: 10px; /* antes: 22px */
  }

  /* ✅ h1 del hero más chico (este es el que lo empuja abajo) */
  .hero-copy h1{
    align-items: center;
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1.02;
    margin-bottom: 8px;
  }

  /* ✅ “sube” el oso para que casi toque el texto */
  .hero-character{
    margin-top: -10px;
  }

  /* opcional: si quieres todavía más pegado */
  /* .hero-character{ margin-top: -18px; } */



  .hero-inner, .zona-inner{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-bubbles{
    min-height: auto;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
  }

  .hero-bubbles .bubble{
    position: static;
    width: 86px;
    height: 86px;
    transform: none;
  }

  .zona-photo img{
    width: 200px;
    height: 200px;
  }
}

@media (max-width: 900px){
  .split-row{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .split-row.is-right .split-text,
  .split-row.is-right .split-media{
    order: unset;
  }

  .bubble-cluster{
    min-height: 220px;
    margin-top: 12px;
  }

  /* en móvil, centra el cluster */
  .b1{ left: 50%; right: auto; transform: translateX(-50%); top: 0; }
  .b2{ left: 18%; right: auto; top: 120px; transform: none; }
  .b3{ left: 62%; right: auto; top: 135px; transform: none; }

  .bubble-lg{ width: 200px; height: 200px; }
  .bubble-md{ width: 140px; height: 140px; }
  .bubble-sm{ width: 110px; height: 110px; }
}

@media (max-width: 900px){
  #salon .salon-peekers .peeker{
    width: clamp(140px, 34vw, 220px);
  }
  #salon .salon-peekers .peeker.left{
    transform: translateX(-50%) rotate(6deg);
  }
  #salon .salon-peekers .peeker.right{
    transform: translateX(40%) rotate(-6deg);
  }
}

@media (max-width: 900px){
  #salones .split-row{
    padding: 22px 0;
  }

  #salones .salon-showcase{
    width: min(460px, 100%);
    aspect-ratio: 1 / 0.9;
    transform: none;
  }
}

@media (max-width: 900px){
  .waiver-confirm__summary{ padding-left: 0; }
}

@media (max-width: 900px){
  .waiver-formgrid.two{ grid-template-columns: 1fr; }
  .waiver-confirm{ grid-template-columns: 1fr; }
  .waiver-admin-grid{ grid-template-columns: 1fr; }
  .waiver-shell{ padding: 14px 12px 34px; }
  .waiver-sign__pad{ height: 200px; }
}

/* ===== @media (max-width: 768px) ===== */
@media (max-width: 768px) {

    .social-sidebar {
        flex-direction: row;
        top: auto;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 10px 10px 0 0;
    }

    .social-sidebar a {
        font-size: 20px;
    }
    
    #calendarioo {
        height: 500px;
        width: 100%;
    }

    #waiver-form {
        width: 100%;
    }
    
    .form-group input, .form-group select {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .floating-character {
        top: 50px;
        left: 20px;
    }
}

@media (max-width: 768px){
  #salon{
    background:
      radial-gradient(
        420px 300px at 88% 12%,
        rgba(186, 124, 255, 0.26),
        transparent 62%
      ),
      radial-gradient(
        360px 260px at 14% 36%,
        rgba(255, 132, 204, 0.18),
        transparent 64%
      ),
      radial-gradient(
        420px 280px at 52% 72%,
        rgba(126, 132, 255, 0.14),
        transparent 68%
      ),
      linear-gradient(
        180deg,
        #0b89d5 0%,
        #0a6fb4 10%,
        #15253d 24%,
        #284884 40%,
        #4d46b0 66%,
        #6f7bd8 82%,
        #a0a6ea 95%,
        #ffffff 100%
      );
  }

  #salon::before{
    opacity: 0.26;
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: 3.5rem;
  }
}

@media (max-width: 768px){
  #paquetes::after{
    height: 30px;
  }
}

@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
  }

  .footer-links {
    text-align: center;
  }

  .footer-links a:hover {
    transform: none;
  }
}

@media (max-width: 768px){
  .hero-cta{
    justify-content: center; /* en móvil más centrados */
    text-align: center;
  }
}

/* ===== @media (max-width: 760px) ===== */
@media (max-width: 760px){
  .nav-toggle{ display: inline-flex; }

  .language-switcher{
    left: 10px;
    top: 8px;
    padding: 5px 7px;
    gap: 6px;
  }

  .lang-btn{
    width: 38px;
    height: 38px;
    font-size: 20px;
  }

  .nav{
    position: relative;
  }

  .nav-list{
    display: none;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    width: min(320px, calc(100vw - 24px));
    padding: 12px;
    margin: 16px auto 0;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 16px;
    backdrop-filter: blur(8px);
    text-align: center;
    box-shadow: 0 18px 40px rgba(0,0,0,0.28);
  }

  .nav.is-open .nav-list{
    display: flex;
  }

  .nav-list li{
    margin: 0;
    width: 100%;
  }

  .nav-list li a{
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}

/* ===== @media (max-width: 640px) ===== */
@media (max-width: 640px){
  #calendario::after,
  #cotizacion::after,
  #resenas::after{
    height: 30px;        /* aún más corto en móvil */
  }
}

@media (max-width: 640px){
  #cotizacion{
    padding: 54px 14px 120px;
  }

  #cotizacion-form{
    padding: 16px;
    border-radius: 14px;
  }

  #cotizacion .cotizacion-paquete{
    padding: 12px 12px;
    border-radius: 14px;
  }
}

@media (max-width: 640px){
  #cotizacion-form{
    width: 100%;
  }
}

@media (max-width: 640px){
  #resenas-carrusel{
    min-height: 520px;
  }
}

@media (max-width: 640px){
  .resenas-grupo{
    grid-template-columns: 1fr;
    padding: 8px 14px 16px;
    gap: 12px;
  }
}

@media (max-width: 640px){
  .waiver-header-inner{
    padding: 12px 12px 10px;
  }
  .waiver-steps{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .waiver-steps::-webkit-scrollbar{ display:none; }
  .waiver-step{ white-space: nowrap; }
}

@media (max-width: 640px){
  body.waiver-body .waiver-formgrid.two{
    grid-template-columns: 1fr !important;
    row-gap: 12px !important;
  }
}

/* ===== @media (max-width: 600px) ===== */
@media (max-width: 600px){
  #salones .prelude-block h1{
    font-size: clamp(3.4rem, 12.5vw, 4.1rem);
    line-height: 1.03;
  }
}

/* ===== @media (max-width: 520px) ===== */
@media (max-width: 520px){
    .amenidad-item{
        padding: 8px 10px;
        gap: 8px;
    }


    .amenidad-text{
        font-size: 0.92rem;
        line-height: 1.25;
    }
}

.quote-field-error{
  min-height: 1.1rem;
  margin: -6px 0 12px;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
  color: #8a1538;
}

#cotizacion-form input.is-invalid,
#cotizacion-form select.is-invalid,
#cotizacion-form textarea.is-invalid{
  border-color: rgba(185, 28, 28, 0.55);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14);
}

#cotizacion-form button[type="submit"]:disabled{
  opacity: 0.75;
  cursor: wait;
  transform: none;
  box-shadow: 0 10px 18px rgba(0,0,0,0.18);
}

.quote-feedback-modal{
  position: fixed;
  inset: 0;
  z-index: 1450;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3, 8, 24, 0.64);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

.quote-feedback-modal[hidden]{
  display: none;
}

.quote-feedback-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}

.quote-feedback-dialog{
  position: relative;
  width: min(520px, calc(100vw - 32px));
  padding: 30px 24px 24px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(260px 160px at 18% 0%, rgba(255,213,77,.34), transparent 72%),
    radial-gradient(260px 180px at 100% 0%, rgba(77,184,255,.28), transparent 68%),
    linear-gradient(180deg, rgba(10, 18, 42, 0.97), rgba(6, 10, 24, 0.99));
  box-shadow: 0 28px 90px rgba(0,0,0,.48);
  color: #fff;
  transform: translateY(12px) scale(.985);
  transition: transform .22s ease;
}

.quote-feedback-modal.is-open .quote-feedback-dialog{
  transform: translateY(0) scale(1);
}

.quote-feedback-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease, background .18s ease;
}

.quote-feedback-close:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  background: rgba(255,255,255,.14);
}

.quote-feedback-orbit{
  width: 74px;
  height: 74px;
  margin-bottom: 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(255,255,255,.18) 26%, transparent 27%),
    linear-gradient(135deg, rgba(255,213,77,.95), rgba(77,184,255,.95));
  box-shadow: 0 12px 28px rgba(77,184,255,.24);
  position: relative;
}

.quote-feedback-orbit::after{
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.78);
  opacity: .92;
}

.quote-feedback-modal[data-state="error"] .quote-feedback-orbit{
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(255,255,255,.18) 26%, transparent 27%),
    linear-gradient(135deg, rgba(251,146,60,.96), rgba(244,63,94,.92));
  box-shadow: 0 12px 28px rgba(244,63,94,.22);
}

.quote-feedback-kicker{
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

.quote-feedback-title{
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.25rem);
  line-height: 1.05;
  font-weight: 900;
}

.quote-feedback-message{
  margin: 14px 0 22px;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255,255,255,.86);
}

.quote-feedback-action{
  min-width: 160px;
  border: 0;
  border-radius: 999px;
  padding: 13px 18px;
  background: linear-gradient(135deg, #ffd54d, #4db8ff);
  color: #08101f;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 16px 30px rgba(77,184,255,.18);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.quote-feedback-action:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 18px 34px rgba(77,184,255,.24);
}

@media (max-width: 640px){
  .quote-feedback-dialog{
    padding: 28px 18px 20px;
    border-radius: 22px;
  }

  .quote-feedback-title{
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .quote-feedback-message{
    font-size: 0.98rem;
    line-height: 1.55;
  }

  .quote-feedback-action{
    width: 100%;
  }
}

@media (max-width: 520px) {
  /* El carrusel (contenedor scrolleable) */
  #lista-paquetes{
    scroll-snap-type: x mandatory;     /* que SIEMPRE encaje */
    scroll-padding-inline: 10vw;       /* el "centro" considera este padding */
    padding-inline: 20vw;              /* espacio para que se vean las orillas */
    gap: 14px;                         /* un poco menos de separación en móvil */
  }

  /* Cada tarjeta */
  #lista-paquetes .card{
    width: 60vw;                       /* 👈 menos que la pantalla para que asomen */
    max-width: 340px;                  /* tope por si el móvil es grande */
    scroll-snap-align: center;         /* 👈 encaja al centro */
  }
}

@media (max-width: 768px){
  #calendario{
    padding: 58px 12px 72px;
  }

  #calendario h1{
    font-size: clamp(2.35rem, 9.3vw, 3.45rem);
    margin-bottom: 18px;
    max-width: 100%;
  }

  #calendarioo .fc{
    padding: 10px;
    border-radius: 20px;
  }

  #calendarioo .fc .fc-daygrid-day-frame{
    min-height: clamp(58px, 13vw, 78px);
    margin: 3px;
    border-radius: 12px;
  }
}

@media (max-width: 520px){
  /* evita empalmes por reglas viejas */
  #calendarioo{ height: auto !important; }

  #calendario h1{
    font-size: clamp(2.05rem, 10.8vw, 2.85rem);
    line-height: .94;
    margin-bottom: 16px;
  }

  #calendar-container{ padding: 12px; }

  /* Toolbar más compacta y con wrap */
  #calendarioo .fc .fc-header-toolbar{
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
  }
  #calendarioo .fc .fc-toolbar-chunk{
    display: flex;
    justify-content: center;
    width: 100%;
  }
  #calendarioo .fc .fc-toolbar-chunk:first-child{
    gap: 8px;
    flex-wrap: wrap;
  }
  #calendarioo .fc .fc-toolbar-title{
    font-size: 1.02rem;
    line-height: 1.1;
    max-width: 12ch;
    text-wrap: balance;
  }

  #calendarioo .fc .fc-button{
    padding: 8px 10px !important;
    font-size: 0.76rem;
  }

  #calendarioo .fc .fc-col-header-cell-cushion{
    padding: 7px 0;
    font-size: 0.72rem;
  }

  #calendarioo .fc .fc-daygrid-day-frame{
    min-height: clamp(46px, 12.8vw, 60px);
    margin: 2px;
    border-radius: 11px;
  }

  #calendarioo .fc .fc-daygrid-day-number{
    width: 28px;
    height: 28px;
    margin: 0 6px 0 auto;
    font-size: 0.82rem;
  }

  #bloquesModal{
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  }

  #bloquesModal .modal-content{
    border-radius: 22px;
  }

  #bloquesModal .calendar-modal-head{
    padding: 22px 18px 14px;
  }

  #bloquesModal .modal-content h2{
    font-size: 1.35rem;
  }

  #bloquesModal .calendar-modal-body{
    padding: 16px 16px 18px;
  }

  #listaBloques{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .bloque-btn{
    min-height: 54px;
    padding: 12px;
    font-size: 0.92rem;
  }
}

@media (max-width: 390px){
  #listaBloques{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px){
  #zona-cometa .split-text h1,
  #salones .split-text h3{
    font-size: clamp(2.35rem, 9.2vw, 3.25rem);
  }
}

@media (max-width: 520px){
  :root{ --meteor-float: 8px; }
}

@media (max-width: 520px){
  .section-logo img{
    width: 220px;
    max-width: 82vw;
  }
}

@media (max-width: 520px){
  #cotizacion{ padding: 56px 12px 72px; }

  #cotizacion-form{
    padding: 16px;
    border-radius: 14px;
  }

  #cotizacion-form label{ font-size: 1.05rem; }

  #cotizacion-form input,
  #cotizacion-form select,
  #cotizacion-form textarea{
    font-size: 16px; /* iOS: evita auto-zoom */
  }
}

@media (max-width: 520px){
  #salones .section-title{
    font-size: clamp(2.6rem, 10vw, 3.4rem);
    line-height: 1.05;
  }
}

@media (max-width: 520px){
  .calendar-legend{
    gap: 12px;
    font-size: 0.9rem;
  }
}

@media (max-width: 520px) {
  .calendar-legend {
    width: 100%;
    box-sizing: border-box;      /* CLAVE */
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 520px){
  .map-card::before{
    width:66px;
    height:66px;
    top:12px;
    right:12px;
  }
  .map-card::after{
    top:20px;
    right:50px;
  }
}

@media (max-width: 520px){
  .ubicacion{
    padding: 20px 14px 26px;
  }
  .map-card__hint{
    font-size: 0.8rem;
    padding: 7px 9px;
  }
}

@media (max-width: 520px){
  .zona-cometa-logo{
    width: min(520px, 92vw); /* ✅ todavía más grande en celular */
  }
}

/* ===== @media (max-width: 480px) ===== */
@media (max-width: 480px) {
    section {
        padding: 20px 10px;
    }
    
    .waiver-form {
        padding: 10px;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
    
    #signature-pad {
        height: 120px;
        border-width: 3px;
    }
    
    #clear, #submit-btn {
        font-size: 1.2rem;
        padding: 15px;
    }
    
    .nino-group h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px){
  .galaxybot{ right: 12px; bottom: 12px; width: 56px; height: 56px; }
  .galaxybot-body{ max-height: 330px; }

  /* ✅ Tip en móvil: ancho basado en viewport (NO en el contenedor de 56px) */
  .galaxybot-tip{
    right: 0;                      /* se alinea con el botón */
    width: min(320px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
  }
}

/* ===== @media (min-width: 768px) ===== */
@media (min-width: 768px){
  .hero-bubbles{ min-height: 360px; }

  .hero-bubbles .bubble{
    width: 190px;
    height: 190px;
    border-width: 5px;
  }

  .hero-bubbles .bubble-2{
    width: 210px;
    height: 210px;
  }

  .hero-bubbles .bubble-3{
    width: 165px;
    height: 165px;
  }
}

@media (min-width: 768px){
  .zona-photo img{
    width: 330px;
    height: 330px;
    border-width: 5px;
  }
}

/* ===== @media (min-width: 769px) ===== */
@media (min-width: 769px){
  .hero-cta{
    justify-content: center;
  }
}

/* ===== @media (min-width: 900px) ===== */
@media (min-width: 900px){
  .galeria-swiper .swiper-slide{ width: 320px; }
  .galeria-swiper img{ height: 280px; }
}

/* ===== @media (min-width: 901px) ===== */
@media (min-width: 901px){
  .galeria-nav{ display: inline-flex; align-items:center; justify-content:center; }
}

/* ===== @media (min-width: 1100px) ===== */
@media (min-width: 1100px){
  .waiver-confirm{ gap: 32px; }
}

@media (min-width: 1100px){
  .hero-bubbles{ min-height: 420px; }

  .hero-bubbles .bubble{
    width: 220px;
    height: 220px;
  }

  .hero-bubbles .bubble-2{
    width: 250px;
    height: 250px;
  }

  .hero-bubbles .bubble-3{
    width: 190px;
    height: 190px;
  }
}

@media (min-width: 1100px){
  .zona-photo img{
    width: 380px;
    height: 380px;
  }
}

/* ===== @media (prefers-reduced-motion: reduce) ===== */
@media (prefers-reduced-motion: reduce){
  .zona-cometa-logo{ animation: none; }
}

@media (prefers-reduced-motion: reduce){
  .meteor, .meteor-sm, .meteormd{ animation: none !important; }
  .meteor::after, .meteor-sm::after, .meteormd::after{ animation: none !important; }
}

/* =========================================================
   PARTY ZONE — Limpieza responsive de inicio + salon
   Mantiene la composicion de desktop y evita que mobile/tablet
   rompan las decoraciones por offsets fijos en px.
========================================================= */

#inicio{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(150px, 18vw, 220px) 16px 110px;
  min-height: clamp(560px, 90svh, 820px);
  box-sizing: border-box;
}

#inicio .floating-character--title{
  top: clamp(12px, 2.2vw, 28px);
  left: 50%;
  width: min(550px, 92vw);
  display: flex;
  justify-content: center;
  transform: translateX(-50%);
  z-index: 2;
}

#inicio .floating-character__title-img{
  width: 100% !important;
  height: auto !important;
}

#inicio .secret-message{
  position: relative;
  z-index: 1;
  min-height: clamp(220px, 28vw, 340px);
  padding-top: clamp(130px, 18vw, 190px);
  box-sizing: border-box;
}

.hero-copy{
  max-width: 54ch;
}

.hero-copy h1{
  font-size: clamp(3.5rem, 7vw, 5rem);
}

.hero-copy h2{
  margin: 0 0 14px;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.15;
  color: #fff;
}

#salon{
  isolation: isolate;
}

#salon .salon-peekers,
#salon .salon-fondos{
  z-index: 0;
}

#salon .salon-peekers .peeker,
#salon .salon-peekers .peeker2,
#salon .salon-fondos .fondo,
#salon .salon-fondos .fondo2{
  top: 0;
}

#salon .salon-peekers .peeker{
  width: clamp(260px, 21vw, 420px);
}

#salon .salon-peekers .peeker2{
  width: clamp(300px, 22vw, 480px);
}

#salon .salon-fondos .fondo{
  width: clamp(480px, 48vw, 720px);
  opacity: 0.24;
}

#salon .salon-fondos .fondo2{
  width: clamp(720px, 58vw, 980px);
  opacity: 0.16;
}

#salon .salon-peekers .peeker2.right2{
  right: 0;
  transform: translateX(-130%) rotate(-8deg);
  transform-origin: bottom right;
}

#salon [data-anchor]{
  visibility: hidden;
}

#salon [data-anchor].is-positioned{
  visibility: visible;
}

@media (max-width: 1024px){
  #inicio{
    padding-top: clamp(132px, 16vw, 176px);
    padding-bottom: 96px;
  }

  .hero-galaxitos{
    padding: 40px 18px 20px;
  }

  .hero-inner{
    gap: 18px;
  }

  .hero-copy h1{
    font-size: clamp(3rem, 6.4vw, 4.25rem);
  }

  .hero-copy h2{
    font-size: clamp(1.25rem, 2.9vw, 1.7rem);
  }

  .hero-character__img{
    width: clamp(240px, 30vw, 360px);
  }

  #salon .peeker--estrellina,
  #salon .peeker--pastel{
    display: none !important;
  }

  #salon .salon-peekers .peeker{
    width: clamp(180px, 24vw, 280px);
  }

  #salon .salon-peekers .peeker2{
    width: clamp(220px, 26vw, 320px);
  }

  #salon .salon-fondos .fondo{
    width: clamp(260px, 38vw, 420px);
    opacity: 0.18;
  }

  #salon .salon-fondos .fondo2{
    width: clamp(520px, 62vw, 760px);
    opacity: 0.12;
  }

  #salon .salon-peekers .peeker.left{
    transform: translateX(-58%) rotate(6deg);
  }

  #salon .salon-peekers .peeker.peeker--rokko.left{
    transform: translateX(-30%) rotate(4deg);
  }

  #salon .salon-peekers .peeker.right{
    transform: translateX(52%) rotate(-6deg);
  }

  #salon .salon-peekers .peeker2.right2{
    transform: translateX(-108%) rotate(-6deg);
  }

  #salon .salon-peekers .peeker.left2{
    transform: translateX(68%);
  }

  #salon .salon-fondos .fondo.left{
    transform: translateX(-52%) rotate(8deg);
  }

  #salon .salon-fondos .fondo.right{
    transform: translateX(52%) rotate(-8deg);
  }

  #salon .salon-fondos .fondo2.left2{
    transform: translateX(-74%);
  }
}

@media (max-width: 768px){
  #inicio{
    padding: 124px 16px 88px;
    min-height: 68svh;
  }

  #inicio .floating-character--title{
    top: 22px;
    width: min(360px, 84vw);
  }

  #inicio .secret-message{
    min-height: 180px;
    padding-top: 110px;
    font-size: clamp(1.05rem, 5vw, 1.45rem);
  }

  .hero-galaxitos{
    padding: 28px 14px 14px;
  }

  .hero-inner{
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: center;
  }

  .hero-copy{
    margin-inline: auto;
  }

  .hero-copy h1{
    font-size: clamp(2.6rem, 10vw, 3.8rem);
    margin-bottom: 0.4rem;
    align-items: center;
  }

  .hero-copy h2{
    font-size: clamp(1.2rem, 4.8vw, 1.55rem);
  }

  .hero-subtitle{
    margin-inline: auto;
    font-size: clamp(1rem, 4.3vw, 1.15rem);
  }

  .hero-character{
    margin-top: 0;
  }

  .hero-character__img{
    width: min(320px, 72vw);
  }

  .hero-cta{
    justify-content: center;
  }

  #salon .salon-peekers{
    z-index: 2;
  }

  #hero-galaxitos .hero-copy,
  #zona-cometa .split-text,
  #zona-cometa > .prelude-block > h1,
  #zona-cometa > .prelude-block > .prelude-sub,
  #galeria .galeria-head,
  #salones .ubicacion-inner,
  #salones .split-text,
  #salones .prelude-block > h1,
  #salones .prelude-block > .prelude-title{
    position: relative;
    z-index: 3;
  }

  .split-row{
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 0;
    text-align: center;
  }

  .split-row.is-right .split-text,
  .split-row.is-right .split-media{
    order: unset;
  }

  #zona-cometa .split-media{
    width: 100%;
    display: flex;
    justify-content: center;
  }

  #zona-cometa .section-logo img{
    width: min(340px, 88vw);
    max-width: 88vw;
  }

  #zona-cometa .bubble-cluster{
    width: min(360px, 92vw);
    min-height: 370px;
    margin-top: 18px;
  }

  #zona-cometa .bubble-lg{
    width: 290px;
    height: 290px;
  }

  #zona-cometa .bubble-md{
    width: 205px;
    height: 205px;
  }

  #zona-cometa .bubble-sm{
    width: 175px;
    height: 175px;
  }

  #zona-cometa .b1{
    left: 48%;
    right: auto;
    top: 0;
    transform: translateX(-50%);
  }

  #zona-cometa .b2,
  #zona-cometa .b22{
    left: 4%;
    right: auto;
    top: 178px;
    transform: none;
  }

  #zona-cometa .b3,
  #zona-cometa .b32{
    left: 53%;
    right: auto;
    top: 148px;
    transform: none;
  }

  #zona-cometa .b42{
    left: 50%;
    right: auto;
    top: 212px;
    transform: none;
  }

  #galeria .galeria-head{
    width: 100%;
    box-sizing: border-box;
    padding-inline: 16px;
  }

  #galeria .prelude-title{
    max-width: 18ch;
    margin-inline: auto;
    font-size: clamp(1.28rem, 5.9vw, 1.75rem);
    line-height: 1.12;
    text-wrap: balance;
  }

  #salones .ubicacion-inner{
    width: 100%;
    box-sizing: border-box;
    padding-inline: 16px;
  }

  #salones .map-card{
    width: 100%;
  }

  #salones .map-card__accent{
    left: -12px;
    bottom: -22px;
    width: clamp(124px, 30vw, 172px);
  }

  #salones .salon-showcase{
    width: min(390px, 100%);
    padding: 12px;
    border-radius: 30px 74px 30px 74px;
  }

  #salones .salon-showcase__accent--pastel{
    width: clamp(88px, 18vw, 124px);
    right: 6px;
    bottom: 6px;
  }

  #salones .salon-showcase__accent--estrellina{
    width: clamp(96px, 19vw, 132px);
    top: 6px;
    left: 6px;
  }

  #salones .salon-showcase__photo{
    border-radius: 22px 62px 22px 62px;
  }

  #salones .salon-showcase--constelacion{
    border-radius: 74px 30px 74px 30px;
  }

  #salones .salon-showcase--constelacion .salon-showcase__photo{
    border-radius: 62px 22px 62px 22px;
  }

  #salon .salon-peekers .peeker{
    width: clamp(130px, 34vw, 200px);
    opacity: 0.72;
  }

  #salon .salon-peekers .peeker2{
    width: clamp(150px, 38vw, 230px);
    opacity: 0.72;
  }

  #salon .salon-fondos .fondo{
    width: clamp(200px, 55vw, 300px);
    opacity: 0.14;
  }

  #salon .salon-fondos .fondo.fondo--moon{
    width: clamp(330px, 92vw, 520px);
    opacity: 0.2;
  }

  #salon .salon-fondos .fondo.fondo--planet{
    width: clamp(330px, 92vw, 520px);
    opacity: 0.18;
  }

  #salon .salon-fondos .fondo2{
    width: clamp(420px, 108vw, 680px);
    opacity: 0.12;
  }

  #salon .salon-peekers .peeker.left{
    transform: translateX(-58%) rotate(6deg);
  }

  #salon .salon-peekers .peeker.right{
    transform: translateX(56%) rotate(-6deg);
  }

  #salon .salon-peekers .peeker2.right2{
    transform: translateX(-36%) rotate(-5deg);
  }

  #salon .salon-peekers .peeker.left2{
    transform: translateX(16%) rotate(-6deg);
  }

  #salon .peeker--estrellina{
    width: clamp(220px, 52vw, 320px);
  }

  #salon .peeker--pastel{
    width: clamp(180px, 42vw, 260px);
  }

  #salon .salon-fondos .fondo.left{
    transform: translateX(-60%) rotate(8deg);
  }

  #salon .salon-fondos .fondo.right{
    transform: translateX(58%) rotate(-8deg);
  }

  #salon .salon-fondos .fondo2.left2{
    transform: translateX(-72%);
  }
}

@media (max-width: 520px){
  #zona-cometa .section-logo img{
    width: min(360px, 92vw);
    max-width: 92vw;
  }

  #salones .map-card__accent{
    left: -10px;
    bottom: -18px;
    width: clamp(108px, 35vw, 148px);
  }

  #zona-cometa .bubble-cluster{
    width: min(382px, 94vw);
    min-height: 395px;
  }

  #zona-cometa .bubble-lg{
    width: 305px;
    height: 305px;
  }

  #zona-cometa .bubble-md{
    width: 216px;
    height: 216px;
  }

  #zona-cometa .bubble-sm{
    width: 182px;
    height: 182px;
  }

  #galeria .prelude-title{
    max-width: 18ch;
    font-size: clamp(1.16rem, 5.2vw, 1.4rem);
    line-height: 1.14;
  }

  #salones .ubicacion-inner{
    padding-inline: 18px;
  }

  #salon .salon-fondos .fondo.fondo--moon{
    width: clamp(360px, 102vw, 560px);
  }

  #salon .salon-fondos .fondo.fondo--planet{
    width: clamp(360px, 102vw, 560px);
  }

  #salon .salon-fondos .fondo2{
    width: clamp(470px, 122vw, 760px);
  }

  #salon .salon-fondos .fondo2.left2{
    transform: translateX(-68%);
  }

  #salon .peeker--estrellina{
    width: clamp(240px, 58vw, 340px);
  }

  #salon .peeker--pastel{
    width: clamp(200px, 46vw, 280px);
  }
}

@media (max-width: 1024px){
  .souvenirs-mini__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #salones .ubicacion-inner{
    padding-bottom: 56px;
  }

}

@media (max-width: 768px){
  .souvenirs-mini{
    width: calc(100% - 32px);
    margin-top: 26px;
    padding: 22px 18px;
    border-radius: 26px;
  }

  .souvenirs-mini__copy{
    margin-bottom: 18px;
  }

  .souvenirs-mini__eyebrow{
    letter-spacing: 0.13em;
    font-size: 0.76rem;
  }

  .souvenirs-mini__copy h3{
    font-size: clamp(1.65rem, 7vw, 2.2rem);
  }

  .souvenirs-mini__text{
    font-size: 1rem;
  }

  .souvenirs-mini__grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .souvenir-card{
    padding: 16px 14px 14px;
    border-radius: 20px;
  }

  .souvenir-card h4{
    font-size: 1.02rem;
  }

  .souvenir-card p{
    font-size: 0.94rem;
  }

  #salones .ubicacion-inner{
    padding-bottom: 42px;
  }

  #zona-cometa .split-row .split-media{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #anchor-adventure .bubble-cluster{
    width: min(390px, 94vw);
    min-height: 410px;
  }

  #anchor-adventure .b1{
    width: 300px;
    height: 300px;
    left: auto;
    right: 0;
    top: 8px;
    transform: none;
  }

  #anchor-adventure .b3{
    width: 248px;
    height: 248px;
    left: 0;
    right: auto;
    top: 188px;
    transform: none;
  }

  #anchor-princess .bubble-cluster{
    width: min(392px, 94vw);
    min-height: 420px;
  }

  #anchor-princess .b1{
    width: 312px;
    height: 312px;
    left: auto;
    right: 0;
    top: 4px;
    transform: none;
  }

  #anchor-princess .b2{
    width: 205px;
    height: 205px;
    left: 0;
    right: auto;
    top: 226px;
    transform: none;
  }

  #anchor-art .bubble-cluster{
    width: min(394px, 95vw);
    min-height: 470px;
  }

  #anchor-art .b1{
    width: 300px;
    height: 300px;
    left: auto;
    right: 0;
    top: 8px;
    transform: none;
  }

  #anchor-art .b32{
    width: 228px;
    height: 228px;
    left: 50%;
    right: auto;
    top: 172px;
    transform: translateX(-50%);
  }

  #anchor-art .b42{
    width: 205px;
    height: 205px;
    left: 0;
    right: auto;
    top: 246px;
    transform: none;
  }

  #anchor-princess-room .bubble-cluster{
    width: min(390px, 94vw);
    min-height: 420px;
  }

  #anchor-princess-room .b1{
    width: 306px;
    height: 306px;
    left: auto;
    right: 0;
    top: 10px;
    transform: none;
  }

  #anchor-princess-room .b22{
    width: 210px;
    height: 210px;
    left: 0;
    right: auto;
    top: 232px;
    transform: none;
  }

  #anchor-gamer .bubble-cluster{
    width: min(392px, 94vw);
    min-height: 425px;
  }

  #anchor-gamer .b1{
    width: 302px;
    height: 302px;
    left: auto;
    right: 0;
    top: 8px;
    transform: none;
  }

  #anchor-gamer .b3{
    width: 238px;
    height: 238px;
    left: 0;
    right: auto;
    top: 202px;
    transform: none;
  }

  #anchor-dance .bubble-cluster{
    width: min(394px, 95vw);
    min-height: 432px;
  }

  #anchor-dance .b1{
    width: 318px;
    height: 318px;
    left: auto;
    right: 0;
    top: 14px;
    transform: none;
  }

  #anchor-dance .b2{
    width: 214px;
    height: 214px;
    left: 0;
    right: auto;
    top: 238px;
    transform: none;
  }
}

@media (max-width: 520px){
  .souvenirs-mini{
    width: calc(100% - 28px);
    padding: 20px 16px;
  }

  #salones .ubicacion-inner{
    padding-bottom: 36px;
  }

  #salones .salon-showcase{
    width: min(100%, 340px);
    aspect-ratio: 1 / 0.96;
    padding: 10px;
    border-radius: 24px 52px 24px 52px;
  }

  #salones .salon-showcase::before{
    width: 150px;
    height: 150px;
    top: -48px;
    left: -46px;
  }

  #salones .salon-showcase::after{
    width: 170px;
    height: 170px;
    right: -60px;
    bottom: -64px;
  }

  #salones .salon-showcase__photo{
    border-radius: 18px 40px 18px 40px;
  }

  #salones .salon-showcase__accent--pastel{
    width: clamp(78px, 24vw, 106px);
    right: 4px;
    bottom: 4px;
  }

  #salones .salon-showcase__accent--estrellina{
    width: clamp(84px, 25vw, 114px);
    top: 4px;
    left: 4px;
  }

  #salones .salon-showcase--constelacion{
    border-radius: 52px 24px 52px 24px;
  }

  #salones .salon-showcase--constelacion .salon-showcase__photo{
    border-radius: 40px 18px 40px 18px;
  }

  #anchor-adventure .bubble-cluster,
  #anchor-princess .bubble-cluster,
  #anchor-princess-room .bubble-cluster,
  #anchor-gamer .bubble-cluster{
    width: min(398px, 96vw);
  }

  #anchor-art .bubble-cluster,
  #anchor-dance .bubble-cluster{
    width: min(404px, 97vw);
  }

}

/* ===== Ultimate override: common list + souvenir colors ===== */
#paquetes .amenidades-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 30px;
}

#paquetes .amenidad-item{
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#paquetes .amenidad-text{
  text-align: left;
}

#paquetes .souvenir-card{
  border-width: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 16px 30px rgba(20, 32, 72, 0.12);
}

#paquetes .souvenir-card--solein{
  background: linear-gradient(180deg, #55B2FF 0%, #2F86D9 100%);
}

#paquetes .souvenir-card--rokko{
  background: linear-gradient(180deg, #9FA3A6 0%, #7E8285 100%);
}

#paquetes .souvenir-card--orbiton{
  background: linear-gradient(180deg, #4BCF91 0%, #2FA36E 100%);
}

#paquetes .souvenir-card--estrellina{
  background: linear-gradient(180deg, #FFD85C 0%, #E6B93E 100%);
}

#paquetes .souvenir-card--solein h4,
#paquetes .souvenir-card--rokko h4,
#paquetes .souvenir-card--orbiton h4{
  color: #fff;
}

#paquetes .souvenir-card--solein p,
#paquetes .souvenir-card--rokko p,
#paquetes .souvenir-card--orbiton p{
  color: rgba(255,255,255,0.92);
}

#paquetes .souvenir-card--estrellina h4{
  color: #533700;
}

#paquetes .souvenir-card--estrellina p{
  color: rgba(83, 55, 0, 0.86);
}

@media (max-width: 768px){
  #paquetes .amenidades-grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ===== Final cascade override: paquetes refresh ===== */
#paquetes .amenidades-comunes,
#paquetes .souvenirs-mini,
#paquetes .extras-cta{
  position: relative;
  width: min(1160px, calc(100% - clamp(32px, 4vw, 72px)));
  box-sizing: border-box;
  margin: clamp(24px, 4vw, 40px) auto 18px;
  padding: clamp(24px, 3.6vw, 36px);
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(340px 180px at 10% 18%, rgba(132, 214, 255, 0.18), transparent 58%),
    radial-gradient(300px 180px at 90% 10%, rgba(255, 214, 120, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(245,249,255,0.9));
  border: 1px solid rgba(18, 35, 78, 0.1);
  box-shadow: 0 24px 60px rgba(20, 32, 72, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#paquetes .packages-surface__copy,
#paquetes .souvenirs-mini__copy{
  position: relative;
  z-index: 1;
  max-width: 60ch;
  margin: 0 auto 22px;
  text-align: center;
}

#paquetes .packages-surface__eyebrow,
#paquetes .souvenirs-mini__eyebrow{
  margin: 0 0 10px;
  color: rgba(28, 49, 96, 0.68);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.82rem;
  font-weight: 800;
}

#paquetes .packages-surface__title,
#paquetes .souvenirs-mini__copy h3,
#paquetes .extras-text{
  color: #102049;
}

#paquetes .packages-surface__title,
#paquetes .souvenirs-mini__copy h3{
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1.08;
}

#paquetes .souvenirs-mini__text{
  color: rgba(33, 50, 89, 0.78);
}

#paquetes .amenidades-spotlight{
  position: relative;
  z-index: 1;
  margin: 0 auto 18px;
  padding: 18px 20px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(8, 120, 178, 0.14), rgba(34, 188, 220, 0.12)),
    rgba(255,255,255,0.72);
  border: 1px solid rgba(17, 126, 177, 0.18);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.36),
    0 18px 36px rgba(13, 91, 128, 0.12);
  text-align: center;
  animation: zonaCometaPulse 5.4s ease-in-out infinite;
}

#paquetes .amenidades-spotlight__eyebrow{
  margin: 0 0 8px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(7, 102, 143, 0.74);
}

#paquetes .amenidades-spotlight__title{
  margin: 0;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  line-height: 1.2;
  color: #0a668f;
}

#paquetes .amenidades-spotlight__text{
  margin: 10px auto 0;
  max-width: 56ch;
  color: rgba(16, 32, 73, 0.78);
}

#paquetes .amenidades-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#paquetes .amenidad-item{
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#paquetes .amenidad-dot,
#paquetes .amenidades-list__dot,
.package-sheet__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0ea5c6, #ffd05f);
  box-shadow: 0 0 0 4px rgba(14, 165, 198, 0.1);
  margin-top: 0.42rem;
}

#paquetes .amenidad-text{
  color: #102049;
  font-weight: 650;
  line-height: 1.38;
  text-align: left;
}

#paquetes .souvenirs-mini__grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

#paquetes .souvenir-card{
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 16px 16px;
  border-radius: 22px;
  border: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 16px 30px rgba(20, 32, 72, 0.12);
}

#paquetes .souvenir-card--solein{
  background: linear-gradient(180deg, #55B2FF 0%, #2F86D9 100%);
}

#paquetes .souvenir-card--rokko{
  background: linear-gradient(180deg, #9FA3A6 0%, #7E8285 100%);
}

#paquetes .souvenir-card--orbiton{
  background: linear-gradient(180deg, #4BCF91 0%, #2FA36E 100%);
}

#paquetes .souvenir-card--estrellina{
  background: linear-gradient(180deg, #FFD85C 0%, #E6B93E 100%);
}

#paquetes .souvenir-card h4{
  margin: 0;
  color: #102049;
  font-size: 1.08rem;
  line-height: 1.2;
  order: 1;
  width: 100%;
  text-align: center;
  align-self: center;
}

#paquetes .souvenir-card__price{
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-height: 2.1rem;
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 8px 18px rgba(8, 18, 40, 0.12);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  order: 3;
  align-self: center;
}

#paquetes .souvenir-card p{
  margin: 0;
  color: rgba(33, 50, 89, 0.8);
  line-height: 1.42;
}

#paquetes .souvenir-card > p:not(.souvenir-card__price){
  order: 2;
}

#paquetes .souvenir-card--solein h4,
#paquetes .souvenir-card--rokko h4,
#paquetes .souvenir-card--orbiton h4,
#paquetes .souvenir-card--solein .souvenir-card__price,
#paquetes .souvenir-card--rokko .souvenir-card__price,
#paquetes .souvenir-card--orbiton .souvenir-card__price{
  color: #fff;
}

#paquetes .souvenir-card--solein p,
#paquetes .souvenir-card--rokko p,
#paquetes .souvenir-card--orbiton p{
  color: rgba(255,255,255,0.92);
}

#paquetes .souvenir-card--estrellina h4{
  color: #533700;
}

#paquetes .souvenir-card--estrellina .souvenir-card__price{
  color: #533700;
}

#paquetes .souvenir-card--estrellina p{
  color: rgba(83, 55, 0, 0.86);
}

#paquetes .extras-cta{
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}

#paquetes .extras-text{
  margin: 0;
  font-size: clamp(1rem, 2.8vw, 1.18rem);
  font-weight: 800;
}

#paquetes .extras-btn{
  border: none;
  border-radius: 999px;
  padding: 13px 20px;
  font-weight: 900;
  cursor: pointer;
  background: linear-gradient(135deg, #102f70, #0d88aa);
  color: #fff;
  box-shadow: 0 14px 28px rgba(16, 47, 112, 0.2);
}

#lista-paquetes .card{
  width: 320px;
}

#lista-paquetes .card.is-active{
  transform: translateY(-10px) scale(1.03);
  box-shadow:
    0 18px 44px rgba(0,0,0,0.38),
    0 0 20px color-mix(in srgb, var(--accent) 55%, transparent);
}

#lista-paquetes .package-meta-line{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

#lista-paquetes .amenidades-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

#lista-paquetes .amenidades-list__item{
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 15px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  line-height: 1.38;
}

#lista-paquetes .amenidades-list__item.is-new{
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.38);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

#lista-paquetes .card-actions{
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

#lista-paquetes .card.is-active .card-actions{
  display: grid;
}

#lista-paquetes .btn-cotizar-paquete,
#lista-paquetes .btn-card-detail{
  width: 100%;
  margin-top: 0;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  padding: 12px 14px;
  border-radius: 14px;
  border: none;
  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;
}

#lista-paquetes .btn-card-detail{
  color: #0f234f;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 10px 22px rgba(8, 18, 40, 0.16);
}

#lista-paquetes .btn-card-detail--primary{
  grid-column: 1 / -1;
  color: #fff;
  background: linear-gradient(135deg, rgba(11,32,76,0.92), rgba(8,132,170,0.92));
  box-shadow: 0 14px 28px rgba(8, 33, 86, 0.26);
}

.extras-modal{
  background: rgba(10, 19, 44, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.extras-modal__content{
  background:
    radial-gradient(360px 180px at 10% 14%, rgba(132, 214, 255, 0.18), transparent 58%),
    radial-gradient(280px 170px at 92% 10%, rgba(255, 214, 120, 0.15), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.97), rgba(245,249,255,0.94));
  border: 1px solid rgba(18, 35, 78, 0.1);
  box-shadow: 0 24px 60px rgba(20, 32, 72, 0.22);
  color: #102049;
}

.extras-modal__header{
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(18, 35, 78, 0.08);
  background: rgba(255,255,255,0.5);
}

.extras-modal__header h3,
.extras-modal__close{
  color: #102049;
}

.extras-modal__close{
  background: rgba(16, 32, 73, 0.08);
}

.extras-modal__body{
  padding: 0 18px 18px;
}

.extras-modal__content .extras-table-wrap{
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(18, 35, 78, 0.08);
}

.extras-modal__content .extras-table th{
  background: rgba(16, 47, 112, 0.08);
  color: #102049;
}

.extras-modal__content .extras-table td{
  color: #233259;
}

.extras-modal__content .ex-precio{
  color: #0d88aa;
}

.package-sheet__list{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.package-sheet__item{
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 15px;
  border-radius: 16px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(18, 35, 78, 0.08);
  color: #233259;
  line-height: 1.42;
}

.package-sheet__empty{
  margin: 16px 0 0;
  color: rgba(33, 50, 89, 0.75);
}

@media (max-width: 900px){
  #paquetes .amenidades-grid,
  #paquetes .souvenirs-mini__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  #lista-paquetes{
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 14vw;
    padding-inline: 14vw;
    gap: 12px;
  }

  #paquetes .amenidades-comunes,
  #paquetes .souvenirs-mini,
  #paquetes .extras-cta{
    width: calc(100% - 32px);
    padding: 22px 18px;
    border-radius: 26px;
  }

  #paquetes .amenidades-grid,
  #paquetes .souvenirs-mini__grid,
  #lista-paquetes .card-actions{
    grid-template-columns: 1fr;
  }

  #paquetes .amenidades-grid{
    justify-items: center;
    gap: 12px 14px;
  }

  #paquetes .amenidad-item{
    width: min(100%, 240px);
  }

  #paquetes .amenidades-grid > .amenidad-item:last-child:nth-child(odd){
    grid-column: 1 / -1;
    justify-self: center;
  }

  #lista-paquetes .card{
    width: min(72vw, 300px);
    scroll-snap-align: center;
  }

  #lista-paquetes .package-price{
    gap: 3px;
    font-size: clamp(2.2rem, 7.4vw, 2.8rem);
  }

  #lista-paquetes .package-price.package-price--compact{
    font-size: clamp(1.9rem, 6.6vw, 2.35rem);
  }

  #lista-paquetes .btn-card-detail--primary{
    grid-column: auto;
  }
}

@media (max-width: 520px){
  #lista-paquetes{
    scroll-padding-inline: 17vw;
    padding-inline: 17vw;
    gap: 10px;
  }

  #lista-paquetes .card{
    width: min(66vw, 268px);
  }

  #paquetes .amenidad-item{
    width: min(100%, 210px);
  }

  #lista-paquetes .package-price{
    font-size: clamp(2rem, 7vw, 2.45rem);
  }

  #lista-paquetes .package-price.package-price--compact{
    font-size: clamp(1.72rem, 5.9vw, 2.08rem);
  }
}

/* ===== Final mobile override: calendario ===== */
@media (max-width: 768px){
  #calendario h1{
    font-size: clamp(2.15rem, 9.6vw, 3rem) !important;
    line-height: .94 !important;
    max-width: 100% !important;
    padding-inline: 10px;
    text-wrap: balance;
  }

  #calendarioo .fc .fc-button.fc-prev-button,
  #calendarioo .fc .fc-button.fc-next-button{
    background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
    border: 1px solid rgba(191,219,254,.34) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28) !important;
  }

  #calendarioo .fc .fc-button.fc-prev-button .fc-icon,
  #calendarioo .fc .fc-button.fc-next-button .fc-icon{
    color: #ffffff !important;
  }

  #calendarioo .fc .fc-daygrid-day-frame{
    min-height: 0 !important;
    height: clamp(44px, 12vw, 60px) !important;
    aspect-ratio: 1 / 1 !important;
    margin: 2px !important;
    border-radius: 12px !important;
  }

  #calendarioo .fc .fc-daygrid-day-top{
    padding-top: 4px !important;
  }

  #calendarioo .fc .fc-daygrid-day-events{
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #calendarioo .fc .fc-daygrid-day-bottom{
    display: none !important;
  }

  #calendarioo .fc .fc-daygrid-day-number{
    width: 28px !important;
    height: 28px !important;
    margin: 0 6px 0 auto !important;
    font-size: 0.82rem !important;
  }
}

@media (max-width: 520px){
  #calendarioo .fc .fc-daygrid-day-frame{
    height: clamp(40px, 11.4vw, 52px) !important;
    border-radius: 10px !important;
  }

  #calendarioo .fc .fc-daygrid-day-number{
    width: 24px !important;
    height: 24px !important;
    margin-right: 5px !important;
    font-size: 0.76rem !important;
  }
}

/* ===== Final override: galeria continua sin Swiper ===== */
#galeria.galeria{
  padding: 26px 14px 40px;
}

#galeria .galeria-head{
  max-width: 1200px;
  margin: 0 auto 12px;
}

#galeria .galeria-marquee{
  --gallery-gap: clamp(10px, 1.7vw, 18px);
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  padding: 10px 6px 18px;
  cursor: default;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    #000 7%,
    #000 93%,
    transparent 100%
  );
  mask-image: linear-gradient(to right,
    transparent 0%,
    #000 7%,
    #000 93%,
    transparent 100%
  );
}

#galeria .galeria-marquee__track{
  display: flex;
  gap: var(--gallery-gap);
  width: max-content;
  will-change: transform;
  animation: galeriaMarquee 34s linear infinite;
}

#galeria .galeria-marquee__group{
  display: flex;
  gap: var(--gallery-gap);
  flex: 0 0 auto;
}

#galeria .galeria-marquee__item{
  flex: 0 0 auto;
  width: clamp(248px, 29vw, 340px);
  margin: 0;
  backface-visibility: hidden;
  transform: translateZ(0);
}

#galeria .galeria-marquee__item img{
  width: 100%;
  height: clamp(230px, 26vw, 280px);
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

@keyframes galeriaMarquee{
  from{
    transform: translate3d(0, 0, 0);
  }
  to{
    transform: translate3d(calc(-50% - (var(--gallery-gap) / 2)), 0, 0);
  }
}

@media (max-width: 900px){
  #galeria .galeria-marquee__item{
    width: clamp(230px, 46vw, 300px);
  }

  #galeria .galeria-marquee__item img{
    height: clamp(210px, 42vw, 250px);
  }
}

@media (max-width: 560px){
  #galeria .galeria-marquee{
    --gallery-gap: 10px;
    padding-inline: 4px;
  }

  #galeria .galeria-marquee__item{
    width: clamp(210px, 72vw, 260px);
  }

  #galeria .galeria-marquee__item img{
    height: clamp(190px, 60vw, 228px);
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce){
  #galeria .galeria-marquee{
    overflow-x: auto;
    padding-bottom: 12px;
    -webkit-mask-image: none;
    mask-image: none;
    scrollbar-width: none;
  }

  #galeria .galeria-marquee::-webkit-scrollbar{
    display: none;
  }

  #galeria .galeria-marquee__track{
    animation: none;
  }
}

/* ===== Final override: reseñas main page ===== */
#resenas{
  padding: 74px 16px 92px;
}

#resenas .reviews-shell{
  position: relative;
  width: min(1160px, calc(100% - clamp(24px, 4vw, 64px)));
  margin: 0 auto;
  padding: clamp(26px, 4vw, 40px);
  border-radius: 34px;
  overflow: hidden;
  background:
    radial-gradient(340px 220px at 12% 8%, rgba(125, 211, 252, 0.18), transparent 58%),
    radial-gradient(360px 220px at 90% 10%, rgba(244, 114, 182, 0.16), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,0.9), rgba(241,248,245,0.88));
  border: 1px solid rgba(18, 35, 78, 0.08);
  box-shadow: 0 26px 64px rgba(20, 32, 72, 0.14);
}

#resenas .reviews-shell::before{
  content: "";
  position: absolute;
  inset: auto -80px -120px auto;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(125, 211, 252, 0.22), transparent 68%);
  pointer-events: none;
}

#resenas .reviews-header{
  position: relative;
  z-index: 1;
  max-width: 62ch;
  margin: 0 auto 24px;
  text-align: center;
}

#resenas .reviews-eyebrow{
  margin: 0 0 10px;
  color: rgba(28, 49, 96, 0.68);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  font-weight: 900;
}

#resenas h1{
  margin: 0;
  color: #102049 !important;
  font-size: clamp(2.5rem, 4.7vw, 4rem);
  line-height: 0.96;
  text-wrap: balance;
}

#resenas .reviews-subtitle{
  margin: 14px auto 0;
  max-width: 58ch;
  color: rgba(29, 45, 81, 0.74);
  font-size: clamp(1rem, 2vw, 1.1rem);
  line-height: 1.7;
}

#promedio-calificacion{
  position: relative;
  z-index: 1;
  margin: 0 auto 22px;
  color: inherit;
}

#resenas .reviews-average-card{
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  width: min(100%, 620px);
  margin: 0 auto;
  padding: 20px 22px;
  border-radius: 26px;
  background:
    radial-gradient(110% 130% at 18% 0%, rgba(125, 211, 252, 0.16), transparent 44%),
    radial-gradient(120% 140% at 100% 0%, rgba(244, 114, 182, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(9, 20, 52, 0.94), rgba(6, 12, 30, 0.96));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 24px 48px rgba(6, 10, 24, 0.28);
  color: #f8fbff;
}

#resenas .reviews-average-card__orbit{
  width: 86px;
  height: 86px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(circle at 32% 30%, rgba(255,255,255,.92), rgba(255,255,255,.18) 24%, transparent 26%),
    linear-gradient(135deg, rgba(253, 230, 138, 0.95), rgba(125, 211, 252, 0.94));
  box-shadow: 0 14px 28px rgba(125, 211, 252, 0.2);
  position: relative;
}

#resenas .reviews-average-card__orbit::after{
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.8);
  opacity: 0.92;
}

#resenas .reviews-average-card__label{
  margin: 0 0 8px;
  color: rgba(191, 219, 254, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  font-weight: 800;
}

#resenas .reviews-average-card__value-row{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

#resenas .reviews-average-card__value{
  font-family: var(--font-title);
  font-size: clamp(2.3rem, 5vw, 3.2rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
}

#resenas .reviews-average-card__stars{
  display: inline-flex;
  gap: 6px;
  color: #facc15;
  font-size: 1.15rem;
  text-shadow: 0 0 16px rgba(250, 204, 21, 0.3);
}

#resenas .reviews-average-card__caption{
  margin: 10px 0 0;
  color: rgba(226, 238, 255, 0.82);
  font-size: 0.98rem;
}

#resenas-carrusel{
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 0 !important;
  margin-top: 0;
  overflow: hidden;
}

#resenas .resenas-grupo{
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-content: start;
  padding: 8px 2px 2px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

#resenas .resena-card{
  --review-card-text: #f8fbff;
  --review-card-title: #ffffff;
  --review-card-body: rgba(236, 244, 255, 0.9);
  --review-card-date: rgba(226, 238, 255, 0.66);
  --review-card-star: #facc15;
  --review-card-star-glow: rgba(250, 204, 21, 0.28);
  --review-card-avatar-bg: rgba(255,255,255,0.18);
  --review-card-avatar-text: #ffffff;
  --review-card-avatar-shadow: 0 10px 20px rgba(8, 16, 31, 0.18);
  --review-card-border: rgba(255,255,255,0.14);
  --review-card-hover-border: rgba(255,255,255,0.22);
  --review-card-shadow: 0 18px 34px rgba(6, 10, 24, 0.22);
  --review-card-hover-shadow: 0 24px 42px rgba(6, 10, 24, 0.28);
  --review-card-quote: rgba(255,255,255,0.14);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  align-self: start;
  padding: 20px 20px 18px;
  border-radius: 24px;
  border: 1px solid var(--review-card-border);
  background: var(--review-card-background);
  box-shadow: var(--review-card-shadow);
  color: var(--review-card-text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

#resenas .resena-card--solein{
  --review-card-background:
    radial-gradient(120% 120% at 14% 12%, rgba(255,255,255,0.22), transparent 38%),
    linear-gradient(180deg, #55B2FF 0%, #2F86D9 100%);
}

#resenas .resena-card--rokko{
  --review-card-background:
    radial-gradient(120% 120% at 14% 12%, rgba(255,255,255,0.18), transparent 38%),
    linear-gradient(180deg, #9FA3A6 0%, #7E8285 100%);
}

#resenas .resena-card--orbiton{
  --review-card-background:
    radial-gradient(120% 120% at 14% 12%, rgba(255,255,255,0.22), transparent 38%),
    linear-gradient(180deg, #4BCF91 0%, #2FA36E 100%);
}

#resenas .resena-card--estrellina{
  --review-card-text: #4d3200;
  --review-card-title: #5a3a00;
  --review-card-body: rgba(91, 58, 0, 0.88);
  --review-card-date: rgba(91, 58, 0, 0.72);
  --review-card-star: #7a4d00;
  --review-card-star-glow: rgba(122, 77, 0, 0.18);
  --review-card-avatar-bg: rgba(255,255,255,0.42);
  --review-card-avatar-text: #5a3a00;
  --review-card-avatar-shadow: 0 10px 20px rgba(122, 77, 0, 0.12);
  --review-card-border: rgba(123, 85, 0, 0.2);
  --review-card-hover-border: rgba(123, 85, 0, 0.28);
  --review-card-shadow: 0 18px 34px rgba(140, 102, 8, 0.18);
  --review-card-hover-shadow: 0 24px 42px rgba(140, 102, 8, 0.22);
  --review-card-quote: rgba(91, 58, 0, 0.12);
  --review-card-background:
    radial-gradient(120% 120% at 14% 12%, rgba(255,255,255,0.24), transparent 38%),
    linear-gradient(180deg, #FFD85C 0%, #E6B93E 100%);
}

#resenas .resena-card::before{
  content: "“";
  position: absolute;
  top: 14px;
  right: 16px;
  color: var(--review-card-quote);
  font-family: var(--font-title);
  font-size: 4.2rem;
  line-height: 1;
}

#resenas .resena-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--review-card-hover-shadow);
  border-color: var(--review-card-hover-border);
}

#resenas .resena-card__header{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
}

#resenas .resena-card__identity{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#resenas .resena-card__avatar{
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--review-card-avatar-bg);
  color: var(--review-card-avatar-text);
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 900;
  box-shadow: var(--review-card-avatar-shadow);
}

#resenas .resena-card__meta{
  min-width: 0;
}

#resenas .resena-card__name{
  margin: 0;
  color: var(--review-card-title) !important;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.15;
}

#resenas .resena-card__date{
  display: inline-block;
  margin-top: 5px;
  color: var(--review-card-date);
  font-size: 0.82rem;
}

#resenas .resena-card__stars{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--review-card-star);
  font-size: 1rem;
  text-shadow: 0 0 16px var(--review-card-star-glow);
}

#resenas .resena-card__body{
  margin: 0;
  color: var(--review-card-body);
  font-size: 0.98rem;
  line-height: 1.72;
  text-wrap: pretty;
}

@media (max-width: 900px){
  #resenas .resenas-grupo{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  #resenas{
    padding: 58px 12px 72px;
  }

  #resenas .reviews-shell{
    width: min(100%, calc(100% - 8px));
    padding: 22px 16px;
    border-radius: 26px;
  }

  #resenas .reviews-eyebrow{
    font-size: 0.72rem;
    letter-spacing: 0.14em;
  }

  #resenas .reviews-subtitle{
    font-size: 0.96rem;
  }

  #resenas .reviews-average-card{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 14px;
    padding: 18px 16px;
    border-radius: 22px;
  }

  #resenas .reviews-average-card__value-row{
    justify-content: center;
  }

  #resenas .resenas-grupo{
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 6px 0 0;
  }

  #resenas .resena-card{
    padding: 18px 16px 16px;
    border-radius: 20px;
  }

  #resenas .resena-card__avatar{
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  #resenas .resena-card__body{
    font-size: 0.94rem;
    line-height: 1.64;
  }
}

/* ===== Final override 2: reseñas sin shell ===== */
#resenas{
  align-items: stretch;
  padding: 74px 16px 58px;
}

#resenas .reviews-header,
#promedio-calificacion,
#resenas-carrusel{
  width: min(1160px, calc(100% - clamp(24px, 4vw, 64px)));
  margin-left: auto;
  margin-right: auto;
}

#resenas .reviews-header{
  margin-bottom: 18px;
}

#promedio-calificacion{
  margin-bottom: 26px;
}

#resenas .reviews-average-strip{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.42), rgba(255,255,255,0.12)),
    linear-gradient(
      90deg,
      rgba(85, 178, 255, 0.92) 0%,
      rgba(159, 163, 166, 0.9) 33%,
      rgba(75, 207, 145, 0.92) 66%,
      rgba(255, 216, 92, 0.94) 100%
    );
  box-shadow:
    0 18px 36px rgba(6, 10, 24, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.34);
  color: #102049;
  text-align: center;
}

#resenas .reviews-average-strip__label{
  margin: 0;
  color: rgba(16, 32, 73, 0.72);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#resenas .reviews-average-strip__value{
  font-family: var(--font-title);
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

#resenas .reviews-average-strip__stars{
  display: inline-flex;
  gap: 5px;
  color: #6f4700;
  font-size: 0.95rem;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.2);
}

#resenas-carrusel{
  position: relative;
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 20px;
  overflow: visible;
}

#resenas .resenas-grupo{
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-content: start;
  padding: 8px 2px 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s ease;
}

#resenas .resenas-grupo:not([hidden]){
  display: grid;
}

#resenas .resenas-grupo.is-visible{
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 900px){
  #resenas .resenas-grupo{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 640px){
  #resenas{
    padding: 58px 12px 50px;
  }

  #resenas .reviews-header,
  #promedio-calificacion,
  #resenas-carrusel{
    width: min(100%, calc(100% - 8px));
  }

  #resenas .reviews-average-strip{
    padding: 12px 14px;
    border-radius: 22px;
  }

  #resenas .resenas-grupo{
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 6px 0 18px;
  }
}

/* ===== Final override: Zona Cometa ===== */
#zona-cometa .split-row{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 4.8vw, 56px);
}

#zona-cometa .split-text{
  gap: 10px;
  max-width: min(40rem, 100%);
}

#zona-cometa .split-text .section-logo--zone img{
  width: clamp(460px, 48vw, 680px);
  max-width: 100%;
  display: block;
  transform: scale(1.12);
  transform-origin: center center;
}

#zona-cometa .split-text h3{
  margin: 0;
  text-shadow: 0 10px 24px rgba(5, 13, 38, 0.38);
}

#zona-cometa .split-text h2{
  max-width: 30ch;
  text-shadow:
    0 10px 22px rgba(4, 12, 34, 0.5),
    0 0 18px rgba(16, 36, 92, 0.16);
}

#zona-cometa .bubble-cluster{
  width: min(540px, 100%);
  min-height: 580px;
}

#zona-cometa .bubble-lg{
  width: 390px;
  height: 390px;
}

#zona-cometa .bubble-md{
  width: 280px;
  height: 280px;
}

#zona-cometa .bubble-sm{
  width: 240px;
  height: 240px;
}

#anchor-adventure .b3,
#anchor-gamer .b3{
  top: 258px;
}

#anchor-princess .b2,
#anchor-dance .b2{
  top: 286px;
}

#anchor-art .b32{
  top: 206px;
}

#anchor-art .b42{
  top: 312px;
}

#anchor-princess-room .b22{
  top: 286px;
}

@media (max-width: 768px){
  #zona-cometa .zona-cometa-logo{
    width: min(620px, 100vw);
  }

  #zona-cometa .split-row{
    grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
    gap: 10px;
    padding: 16px 0;
    text-align: initial;
    align-items: center;
  }

  #zona-cometa .split-row.is-right{
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  }

  #zona-cometa .split-text{
    width: 100%;
    min-width: 0;
    justify-items: stretch;
    text-align: left;
    gap: 6px;
    max-width: none;
  }

  #zona-cometa .split-text > *{
    max-width: 100%;
  }

  #zona-cometa .split-row.is-right .split-text{
    order: 2;
    text-align: right;
  }

  #zona-cometa .split-row.is-right .split-media{
    order: 1;
  }

  #zona-cometa .split-text h1{
    display: none;
  }

  #zona-cometa .split-text .section-logo--zone{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin: 0 0 4px;
    transform: translateX(-8px);
  }

  #zona-cometa .split-text .section-logo--zone img{
    width: min(100%, 282px);
    max-width: 100%;
    transform: scale(1.16);
    transform-origin: left center;
  }

  #zona-cometa .split-row.is-right .split-text .section-logo--zone{
    justify-content: flex-end;
    transform: translateX(8px);
  }

  #zona-cometa .split-row.is-right .split-text .section-logo--zone img{
    transform-origin: right center;
  }

  #anchor-adventure .split-text .section-logo--zone img{
    width: min(100%, 292px);
    transform: scale(1.24);
    transform-origin: left center;
  }

  #zona-cometa .split-text h3{
    box-sizing: border-box;
    padding-inline: 6px;
    overflow-wrap: anywhere;
    font-size: clamp(0.88rem, 3vw, 1.02rem);
    line-height: 1.2;
    text-shadow: 0 8px 18px rgba(4, 12, 34, 0.58);
  }

  #zona-cometa .split-text h2{
    box-sizing: border-box;
    padding-inline: 6px;
    width: 100%;
    max-width: none;
    overflow-wrap: anywhere;
    font-size: clamp(0.9rem, 2.7vw, 1rem);
    line-height: 1.34;
    text-shadow:
      0 8px 18px rgba(4, 12, 34, 0.62),
      0 0 18px rgba(16, 36, 92, 0.18);
  }

  .meteor::before,
  .meteor-sm::before,
  .meteormd::before{
    inset: -8px;
    transform: scale(1.012);
  }

  #zona-cometa .split-media{
    display: flex;
    justify-content: flex-end;
  }

  #zona-cometa .split-row.is-right .split-media{
    justify-content: flex-start;
  }

  #zona-cometa .bubble-cluster{
    width: min(228px, 100%);
    min-height: 282px;
    margin-top: 0;
  }

  #zona-cometa .bubble-lg{
    width: 180px;
    height: 180px;
  }

  #zona-cometa .bubble-md{
    width: 128px;
    height: 128px;
  }

  #zona-cometa .bubble-sm{
    width: 116px;
    height: 116px;
  }

  #anchor-adventure .b1,
  #anchor-princess .b1,
  #anchor-art .b1,
  #anchor-princess-room .b1,
  #anchor-gamer .b1,
  #anchor-dance .b1{
    right: 0;
    top: 0;
  }

  #anchor-adventure .b3,
  #anchor-gamer .b3{
    left: 0;
    top: 136px;
  }

  #anchor-princess .b2,
  #anchor-dance .b2{
    left: 0;
    top: 150px;
  }

  #anchor-art .b32{
    left: 50%;
    top: 112px;
    transform: translateX(-50%);
  }

  #anchor-art .b42{
    left: 0;
    top: 170px;
  }

  #anchor-princess-room .b22{
    left: 0;
    top: 148px;
  }
}

@media (max-width: 520px){
  #zona-cometa .zona-cometa-logo{
    width: min(560px, 100vw);
  }

  #zona-cometa .split-row{
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 6px;
    padding: 12px 0;
  }

  #zona-cometa .split-row.is-right{
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  }

  #zona-cometa .split-text .section-logo--zone img{
    width: min(100%, 250px);
    max-width: 100%;
    transform: scale(1.18);
  }

  #anchor-adventure .split-text .section-logo--zone img{
    width: min(100%, 262px);
    transform: scale(1.3);
  }

  #zona-cometa .split-text .section-logo--zone{
    transform: translateX(-10px);
  }

  #zona-cometa .split-row.is-right .split-text .section-logo--zone{
    transform: translateX(10px);
  }

  #zona-cometa .split-text h3{
    padding-inline: 8px;
    font-size: 0.82rem;
  }

  #zona-cometa .split-text h2{
    padding-inline: 8px;
    width: 100%;
    max-width: none;
    font-size: 0.84rem;
    line-height: 1.28;
  }

  .meteor::before,
  .meteor-sm::before,
  .meteormd::before{
    inset: -6px;
    transform: scale(1.008);
  }

  #zona-cometa .bubble-cluster{
    width: min(186px, 100%);
    min-height: 228px;
  }

  #zona-cometa .bubble-lg{
    width: 146px;
    height: 146px;
  }

  #zona-cometa .bubble-md{
    width: 104px;
    height: 104px;
  }

  #zona-cometa .bubble-sm{
    width: 94px;
    height: 94px;
  }

  #anchor-adventure .b3,
  #anchor-gamer .b3{
    top: 112px;
  }

  #anchor-princess .b2,
  #anchor-dance .b2{
    top: 122px;
  }

  #anchor-art .b32{
    top: 92px;
  }

  #anchor-art .b42{
    top: 138px;
  }

  #anchor-princess-room .b22{
    top: 120px;
  }
}

#paquetes .carousel{
  --packages-carousel-fade: 0px;
  --packages-carousel-fade-left: 0px;
  --packages-carousel-fade-right: 0px;
  --packages-carousel-edge-safe: 0px;
  isolation: isolate;
}

#paquetes #lista-paquetes{
  -webkit-mask-image: none;
  mask-image: none;
}

#paquetes .carousel::before,
#paquetes .carousel::after{
  content: none;
}

@media (min-width: 769px){
  #paquetes .carousel{
    width: min(1360px, calc(100% - clamp(48px, 6vw, 140px)));
    margin-inline: auto;
    --packages-carousel-fade-left: clamp(18px, 2.4vw, 40px);
    --packages-carousel-fade-right: clamp(36px, 4.8vw, 88px);
    --packages-carousel-edge-safe: clamp(12px, 1.4vw, 24px);
  }

  #paquetes .carousel::before,
  #paquetes .carousel::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2;
  }

  #paquetes .carousel::before{
    left: 0;
    width: var(--packages-carousel-fade-left);
    background: linear-gradient(
      to right,
      rgba(255,255,255,0.9) 0%,
      rgba(255,255,255,0.58) 34%,
      rgba(255,255,255,0) 100%
    );
  }

  #paquetes .carousel::after{
    right: 0;
    width: var(--packages-carousel-fade-right);
    background: linear-gradient(
      to left,
      rgba(255,255,255,0.98) 0%,
      rgba(255,255,255,0.86) 42%,
      rgba(255,255,255,0) 100%
    );
  }

  #lista-paquetes{
    padding-inline: var(--packages-carousel-edge-safe);
    box-sizing: border-box;
  }
}