/* KAI TRAVELS — web pública. Paleta oficial:
   turquesa #49B0B5 · azul cielo #BDDFF0 · arena #F4C7A1 · azul noche #214658 · blanco #FFFFFF */
:root {
  --turq: #49B0B5;
  --cielo: #BDDFF0;
  --arena: #F4C7A1;
  --noche: #214658;
  --blanco: #FFFFFF;
  --texto: #214658;
  --suave: #5b7a89;
  --borde: #dcebf1;
  --estrella: #DE9A4B;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--texto);
  background: var(--blanco);
  padding-bottom: 64px; /* espacio para la navegación inferior móvil */
}
h1, h2, h3, .brand span { font-family: 'Sora', system-ui, sans-serif; }
a { color: var(--turq); }
img { max-width: 100%; }

/* ---------- anuncio + encabezado ---------- */
.anuncio {
  background: var(--noche); color: var(--blanco);
  display: flex; gap: 12px; justify-content: center; align-items: center;
  padding: 8px 14px; font-size: .85rem; text-align: center; flex-wrap: wrap;
}
.anuncio a { color: var(--arena); font-weight: 700; text-decoration: none; }
.site-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  padding: 8px 16px; background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde);
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--noche); }
.brand span { font-weight: 800; letter-spacing: .06em; font-size: 1.02rem; }
.brand img { height: 40px; width: auto; }
.main-nav { display: none; gap: 18px; margin-left: auto; }
.main-nav a { color: var(--noche); text-decoration: none; font-weight: 600; font-size: .95rem; }
.main-nav a.activa, .main-nav a:hover { color: var(--turq); }
.lang-toggle { margin-left: auto; display: flex; border: 1px solid var(--borde); border-radius: 999px; overflow: hidden; }
.main-nav + .lang-toggle { margin-left: 0; }
.lang-toggle a { padding: 4px 11px; font-size: .8rem; font-weight: 700; color: var(--suave); text-decoration: none; }
.lang-toggle a.on { background: var(--turq); color: var(--blanco); }
@media (min-width: 860px) {
  .main-nav { display: flex; }
  .lang-toggle { margin-left: 0; }
  body { padding-bottom: 0; }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: 340px; background: var(--noche); }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.hero-slide.activa { opacity: 1; pointer-events: auto; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-bloque { display: flex; align-items: center; justify-content: center; font-size: 6rem; }
.hero-bloque.cat-turquesa { background: linear-gradient(135deg, var(--turq), var(--noche)); }
.hero-bloque.cat-cielo { background: linear-gradient(135deg, var(--cielo), var(--turq)); }
.hero-bloque.cat-arena { background: linear-gradient(135deg, var(--arena), #e8a877); }
.hero-bloque.cat-noche { background: linear-gradient(135deg, var(--noche), #35617c); }
.hero-panel {
  position: absolute; left: 16px; right: 16px; bottom: 18px;
  background: rgba(255,255,255,.8); backdrop-filter: blur(10px);
  border-radius: 16px; padding: 16px 18px; max-width: 520px;
}
.hero-nombre { margin: 0 0 6px; font-size: 1.55rem; line-height: 1.15; color: var(--noche); }
.hero-eslogan { margin: 0 0 12px; color: var(--suave); }
.hero-marca { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 42px 16px; background: linear-gradient(160deg, var(--cielo), var(--blanco) 65%); }
.hero-logo { width: 150px; height: auto; }
.hero-eslogan-marca { font-family: 'Sora', sans-serif; font-size: 1.25rem; font-weight: 600; color: var(--noche); margin: 10px 0 18px; }
@media (min-width: 860px) {
  .hero { min-height: 430px; }
  .hero-panel { left: 40px; bottom: 30px; }
  .hero-nombre { font-size: 1.9rem; }
}

/* ---------- cuenta regresiva ---------- */
.cuenta { text-align: center; padding: 18px 12px 4px; }
.cuenta-titulo { margin: 0 0 6px; color: var(--suave); }
.cuenta-reloj { display: flex; gap: 18px; justify-content: center; margin: 0; }
.cuenta-reloj span { color: var(--suave); font-size: .85rem; }
.cuenta-reloj b { display: block; font-family: 'Sora', sans-serif; font-size: 1.5rem; color: var(--turq); }
.cuenta-accion { margin: 12px 0 0; }

/* ---------- secciones y tarjetas ---------- */
.seccion { max-width: 1120px; margin: 0 auto; padding: 26px 16px; }
.seccion h2 { color: var(--noche); margin: 0 0 16px; }
.pag-titulo { color: var(--noche); margin: 0 0 14px; font-size: 1.7rem; }
.vacio { color: var(--suave); }
.grid-tarjetas { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .grid-tarjetas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .grid-tarjetas { grid-template-columns: 1fr 1fr 1fr; } }
.tarjeta {
  display: flex; flex-direction: column; background: var(--blanco);
  border: 1px solid var(--borde); border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 18px rgba(33,70,88,.06);
}
.tarjeta-media { position: relative; aspect-ratio: 4 / 3; background: var(--cielo); }
.tarjeta-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tarjeta-media.bloque { display: flex; align-items: center; justify-content: center; }
.tarjeta-media.bloque.cat-turquesa { background: linear-gradient(135deg, var(--turq), #2f7f85); }
.tarjeta-media.bloque.cat-cielo { background: linear-gradient(135deg, var(--cielo), #8fc3dd); }
.tarjeta-media.bloque.cat-arena { background: linear-gradient(135deg, var(--arena), #eda96f); }
.tarjeta-media.bloque.cat-noche { background: linear-gradient(135deg, var(--noche), #35617c); }
.bloque-emoji { font-size: 4.2rem; }
.insignia {
  position: absolute; left: 12px; bottom: 12px; width: 44px; height: 44px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; border: 2px solid var(--blanco); box-shadow: 0 2px 8px rgba(33,70,88,.25);
}
.insignia.cat-turquesa { background: var(--turq); }
.insignia.cat-cielo { background: var(--cielo); }
.insignia.cat-arena { background: var(--arena); }
.insignia.cat-noche { background: var(--noche); }
.badge-realizado {
  position: absolute; right: 12px; top: 12px; background: var(--turq); color: var(--blanco);
  padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700;
}
.tarjeta-body { display: flex; flex-direction: column; gap: 7px; padding: 15px 16px 16px; flex: 1; }
.tarjeta-body h3 { margin: 0; font-size: 1.12rem; }
.tarjeta-body h3 a { color: var(--noche); text-decoration: none; }
.eslogan { margin: 0; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta { margin: 0; font-size: .76rem; letter-spacing: .12em; font-weight: 700; color: var(--turq); }
.incluye { list-style: none; margin: 2px 0 0; padding: 0; font-size: .9rem; display: grid; gap: 3px; }
.mas { margin: 0; font-size: .82rem; color: var(--suave); }
.precios { margin-top: auto; padding-top: 8px; }
.precio { margin: 0; font-weight: 600; }
.precio-main { font-family: 'Sora', sans-serif; font-size: 1.12rem; color: var(--noche); font-weight: 700; }
.precio-label { font-weight: 400; color: var(--suave); font-size: .85rem; }
.precio-oficial { margin: 0 0 2px; font-size: .8rem; letter-spacing: .08em; color: var(--suave); font-weight: 700; }
.tarjeta-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tarjeta-actions .btn { flex: 1 1 auto; text-align: center; }
.btn {
  display: inline-block; padding: 10px 16px; border-radius: 999px; font-weight: 700;
  text-decoration: none; font-size: .92rem; border: 1px solid transparent; cursor: pointer;
}
.btn-wa { background: var(--turq); color: var(--blanco); }
.btn-wa:hover { background: #3a9aa0; }
.btn-ghost { background: var(--blanco); color: var(--noche); border-color: var(--borde); }

/* ---------- pasos y testimonios ---------- */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.pasos li { display: flex; gap: 12px; align-items: center; background: #f4fafc; border: 1px solid var(--borde); border-radius: 14px; padding: 14px; font-weight: 600; }
.paso-num { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--turq); color: var(--blanco); display: flex; align-items: center; justify-content: center; font-family: 'Sora', sans-serif; }
.grid-testimonios { display: grid; gap: 16px; }
@media (min-width: 760px) { .grid-testimonios { grid-template-columns: 1fr 1fr 1fr; } }
.testimonio { margin: 0; border: 1px solid var(--borde); border-radius: 14px; padding: 16px; background: var(--blanco); }
.testimonio .estrellas { color: var(--estrella); margin: 0 0 8px; letter-spacing: .15em; }
.testimonio blockquote { margin: 0 0 10px; color: var(--texto); }
.testimonio figcaption { color: var(--suave); font-size: .9rem; }

/* ---------- mapa y galería ---------- */
.mapa { margin: 26px 0; text-align: center; }
.mapa-svg { width: 100%; max-width: 680px; height: auto; }
.mapa-svg .prov { fill: var(--cielo); stroke: #FFFFFF; stroke-width: 1.6; }
.mapa-svg .prov.visitada { fill: var(--turq); }
.mapa-svg .pin-shape { fill: var(--noche); }
.mapa-svg .pin-dot { fill: #FFFFFF; }
.mapa-svg .pin-label { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 30px; fill: var(--noche); }
.mapa-credito { font-size: .75rem; color: var(--suave); margin-top: 6px; }
.galeria-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.chip { border: 1px solid var(--borde); background: var(--blanco); color: var(--noche); border-radius: 999px; padding: 6px 14px; font-weight: 600; cursor: pointer; }
.chip.on { background: var(--turq); color: var(--blanco); border-color: var(--turq); }
.galeria-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 760px) { .galeria-grid { grid-template-columns: repeat(4, 1fr); } }
.g-item { margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: 12px; cursor: zoom-in; }
.g-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
@media (hover: hover) { .g-item:hover img { transform: scale(1.07); } }
.g-oculta { display: none; }
#galeria-mas { margin-top: 14px; }
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(33,70,88,.92); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 94vw; max-height: 90vh; border-radius: 10px; }
.lightbox-x { position: absolute; top: 14px; right: 18px; background: none; border: 0; color: #fff; font-size: 2rem; cursor: pointer; }

/* ---------- ficha ---------- */
.ficha { max-width: 880px; margin: 0 auto; padding: 18px 16px 30px; }
.ficha-foto { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; display: block; }
.ficha-bloque { display: flex; align-items: center; justify-content: center; font-size: 5rem; }
.ficha-bloque.cat-turquesa { background: linear-gradient(135deg, var(--turq), var(--noche)); }
.ficha-bloque.cat-cielo { background: linear-gradient(135deg, var(--cielo), var(--turq)); }
.ficha-bloque.cat-arena { background: linear-gradient(135deg, var(--arena), #e8a877); }
.ficha-bloque.cat-noche { background: linear-gradient(135deg, var(--noche), #35617c); }
.ficha-body { padding-top: 18px; }
.ficha-eslogan { color: var(--suave); font-size: 1.05rem; margin: 0 0 8px; }
.ficha-desc { line-height: 1.65; }
.incluye-full { font-size: 1rem; gap: 6px; }
.itinerario { line-height: 1.7; }
.ficha-precios { margin: 18px 0; }
.ficha-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.location-policy { background: #f4fafc; border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; color: var(--suave); }

/* ---------- nosotros / contacto ---------- */
.nosotros p { line-height: 1.7; }
.eslogan-cita {
  margin: 22px 0; padding: 18px 20px; border-left: 4px solid var(--turq);
  background: #f4fafc; font-family: 'Sora', sans-serif; font-size: 1.2rem; font-weight: 600; color: var(--noche);
}
.puntos { line-height: 1.8; }
.nosotros .chips, .chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.nosotros .chip { cursor: default; background: var(--cielo); border-color: var(--cielo); }
.cierre { font-weight: 600; }
.banda-marca { text-align: center; margin: 0 0 20px; padding: 6px 0 2px; }
.banda-logo { width: 190px; max-width: 64%; height: auto; }
.banda-eslogan {
  font-family: 'Sora', sans-serif; font-weight: 800; line-height: 1.25;
  color: var(--turq); font-size: clamp(18px, 2.6vw, 23px); margin: -24px 0 0;
}
.banda-eslogan::before { content: "“"; }
.banda-eslogan::after { content: "”"; }
@media (min-width: 860px) {
  .banda-logo { width: 220px; }
  .banda-eslogan { margin-top: -28px; font-size: min(23px, 4vw); white-space: nowrap; }
}
.con-raya::after {
  content: ""; display: block; width: 52px; height: 5px; border-radius: 3px;
  background: var(--turq); margin-top: 8px;
}
.nosotros-ig { text-align: center; font-weight: 700; }
.nosotros-ig a { text-decoration: none; }
.canales { list-style: none; padding: 0; display: grid; gap: 10px; font-size: 1.02rem; }
.faq-item { border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.faq-item summary { font-family: 'Sora', sans-serif; font-weight: 600; cursor: pointer; color: var(--noche); }
.faq-item p { color: var(--suave); line-height: 1.6; }

/* ---------- pie + navegación inferior + flotante ---------- */
.site-footer { text-align: center; padding: 22px 16px 18px; border-top: 1px solid var(--borde); margin-top: 20px; }
.firma-fila { display: flex; gap: 14px; align-items: center; justify-content: center; }
.firma-textos { text-align: left; }
.footer-logo { width: 92px; height: auto; flex: none; }
.firma-textos .footer-pagos { margin: 0 0 2px; }
.firma-textos .footer-links { margin: 0; }
.footer-pagos { font-weight: 700; color: var(--noche); }
.footer-links a { text-decoration: none; font-weight: 600; }
.footer-nota { color: var(--suave); font-size: .85rem; margin: 10px 0 0; }
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; background: var(--blanco); border-top: 1px solid var(--borde);
}
.bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 2px 9px; color: var(--suave); text-decoration: none; font-size: .66rem; font-weight: 600;
}
.bottom-nav a svg { width: 21px; height: 21px; }
.bottom-nav a.activa { color: var(--turq); }
@media (min-width: 860px) { .bottom-nav { display: none; } }
.wa-float {
  position: fixed; right: 16px; bottom: 82px; z-index: 51;
  width: 56px; height: 56px; border-radius: 50%; background: var(--turq); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(33,70,88,.35);
}
.wa-float svg { width: 30px; height: 30px; }
@media (min-width: 860px) { .wa-float { bottom: 20px; } }

/* ---------- primer pase de conversión (oct-2026) ---------- */
.hero-eyebrow { margin: 0 0 4px; font-size: .68rem; font-weight: 800; letter-spacing: .09em; color: var(--turq); }
.hero-titular { margin: 0 0 6px; font-size: 1.45rem; line-height: 1.18; color: var(--noche); }
.hero-proxima { margin: 0 0 4px; color: var(--suave); }
.hero-proxima strong { color: var(--noche); }
.hero-chips { margin: 10px 0 12px; }
.hero-chips .chip, .datos-row .chip, .cupos-linea .chip {
  cursor: default; background: var(--cielo); border-color: var(--cielo); font-size: .78rem; padding: 5px 11px;
}
.hero-chips .chip-precio { background: var(--arena); border-color: var(--arena); font-weight: 800; }
.hero-chips .chip-cupos, .datos-row .chip-cupos, .cupos-linea .chip-cupos {
  background: var(--noche); border-color: var(--noche); color: var(--blanco);
}
.hero-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn-sec {
  display: inline-block; padding: 10px 16px; border-radius: 12px; font-weight: 700;
  border: 1.5px solid var(--noche); color: var(--noche); text-decoration: none; background: transparent;
}
@media (max-width: 859px) { .hero { min-height: 500px; } }
@media (min-width: 860px) {
  .hero { min-height: 520px; }
  .hero-titular { font-size: 1.8rem; }
}
.ahorro-chip {
  display: inline-block; background: var(--arena); color: var(--noche);
  font-size: .78rem; font-weight: 800; border-radius: 999px; padding: 4px 10px;
}
.ahorro-linea { margin: 6px 0 0; }
.cupos-linea { margin: 10px 0 0; }
.datos-row { margin: 10px 0 4px; }
.barra-reserva {
  position: fixed; left: 0; right: 0; bottom: 58px; z-index: 49;
  display: flex; align-items: center; gap: 12px;
  background: var(--blanco); border-top: 1px solid var(--borde);
  box-shadow: 0 -6px 18px rgba(33,70,88,.12); padding: 9px 16px;
}
.barra-reserva .btn { margin-left: auto; white-space: nowrap; }
.barra-precio { display: flex; flex-direction: column; line-height: 1.15; }
.barra-precio strong { font-family: 'Sora', sans-serif; font-size: 1.05rem; color: var(--noche); }
.barra-precio span { font-size: .68rem; font-weight: 800; letter-spacing: .04em; color: var(--noche); text-transform: uppercase; }
.ficha { padding-bottom: 120px; }
@media (min-width: 860px) {
  .barra-reserva { bottom: 0; justify-content: center; }
  .barra-reserva .btn { margin-left: 12px; }
  .ficha { padding-bottom: 110px; }
}

/* ---------- admin ---------- */
.admin-body { padding-bottom: 0; background: #f7fbfc; }
.admin-header {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: var(--blanco); border-bottom: 1px solid var(--borde);
}
.admin-header nav { margin-left: auto; }
.admin-main { max-width: 860px; margin: 0 auto; padding: 20px 16px 40px; }
.admin-box { background: var(--blanco); border: 1px solid var(--borde); border-radius: 14px; padding: 18px; margin-bottom: 20px; }
.admin-box label { display: block; margin: 10px 0; font-weight: 600; font-size: .9rem; color: var(--noche); }
.admin-box input, .admin-box textarea, .admin-box select {
  display: block; width: 100%; margin-top: 4px; padding: 9px 10px;
  border: 1px solid var(--borde); border-radius: 9px; font: inherit; font-weight: 400;
}
.admin-ok { background: #e5f5f6; border: 1px solid var(--turq); padding: 10px 12px; border-radius: 10px; }
.admin-err { background: #fdf0e4; border: 1px solid var(--arena); padding: 10px 12px; border-radius: 10px; }
.admin-fotos { list-style: none; padding: 0; display: grid; gap: 10px; }
.admin-foto { display: flex; align-items: center; gap: 12px; }
.admin-foto img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }