/**
 * Checkit Travel · Design System unificado
 * Fuente de verdad visual (header/menú, fichas, secciones, resultados, PDF).
 * Tokens alineados a .cursorrules / checkit-ui-premium.
 */
:root {
  --ck-ink: #0f172a;
  --ck-navy: #0f2744;
  --ck-navy-2: #1a446c;
  --ck-accent: #f26422;
  --ck-accent-2: #ff7836;
  --ck-muted: #64748b;
  --ck-line: #e2e8f0;
  --ck-surface: #ffffff;
  --ck-surface-soft: #f8fafc;
  --ck-radius: 14px;
  --ck-radius-lg: 20px;
  --ck-shadow: 0 10px 30px -5px rgba(15, 39, 68, 0.08), 0 4px 12px -2px rgba(15, 39, 68, 0.04);
  --ck-glass: rgba(255, 255, 255, 0.85);
  --ck-btn-h: 42px;
  --ck-font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

  /* Alias legado → no romper reglas viejas */
  --checkit-accent: var(--ck-accent);
  --checkit-navy: var(--ck-navy);
  --s-color-header-text: #0f172a;
  --moc-accent: var(--ck-accent);
  --moc-accent-deep: var(--ck-navy);
  --moc-ink: var(--ck-ink);
  --moc-muted: var(--ck-muted);
  --moc-line: var(--ck-line);
}

html {
  font-family: var(--ck-font);
}

/* ═══════════════════════════════════════════════════════════
   HEADER · menú hamburguesa idéntico (PC / tablet / móvil)
   Drawer estándar + compacto: misma caja, tipografía y ritmo.
   ═══════════════════════════════════════════════════════════ */
.c-header-collective__nav.is-open,
.c-header-collective__nav--bar.is-open,
.c-header-collective__compact-drawer.is-open {
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: min(360px, 88vw) !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 12200 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: max(16px, env(safe-area-inset-top, 0px))
    max(14px, env(safe-area-inset-right, 0px))
    max(28px, env(safe-area-inset-bottom, 0px))
    14px !important;
  background: var(--ck-surface) !important;
  color: var(--ck-ink) !important;
  border-radius: 0 !important;
  box-shadow: -8px 0 32px rgba(15, 39, 68, 0.18) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
  isolation: isolate;
}

/* Tipografía e iconos legibles dentro del drawer (anula blanco-sobre-blanco) */
.c-header-collective__nav.is-open,
.c-header-collective__nav--bar.is-open,
.c-header-collective__compact-drawer.is-open,
.c-header-collective__nav.is-open a,
.c-header-collective__nav--bar.is-open a,
.c-header-collective__compact-drawer.is-open a,
.c-header-collective__nav.is-open span,
.c-header-collective__nav--bar.is-open span,
.c-header-collective__compact-drawer.is-open span,
.c-header-collective__nav.is-open strong,
.c-header-collective__nav--bar.is-open strong,
.c-header-collective__compact-drawer.is-open strong,
.c-header-collective__nav.is-open button,
.c-header-collective__nav--bar.is-open button,
.c-header-collective__compact-drawer.is-open button,
.c-header-collective__nav.is-open li,
.c-header-collective__nav--bar.is-open li,
.c-header-collective__compact-drawer.is-open li,
.c-header-collective__nav.is-open #user-name,
.c-header-collective__nav--bar.is-open #user-name,
.c-header-collective__compact-drawer.is-open #user-name,
.c-header-collective__nav.is-open #current-currency,
.c-header-collective__nav--bar.is-open #current-currency,
.c-header-collective__compact-drawer.is-open #current-currency,
.c-header-collective__nav.is-open #current-language,
.c-header-collective__nav--bar.is-open #current-language,
.c-header-collective__compact-drawer.is-open #current-language {
  color: var(--ck-ink) !important;
}

.c-header-collective__nav.is-open .c-mobile-nav__cover,
.c-header-collective__nav--bar.is-open .c-mobile-nav__cover,
.c-header-collective__compact-drawer.is-open .c-mobile-nav__cover,
.c-header-collective__nav.is-open .c-mobile-nav__cover *,
.c-header-collective__nav--bar.is-open .c-mobile-nav__cover *,
.c-header-collective__compact-drawer.is-open .c-mobile-nav__cover * {
  color: #fff !important;
}

/* Cinta del encabezado (fondo blanco): títulos e íconos legibles */
.c-header-collective__main--subnav-only,
.c-header-subnav,
.c-header-subnav__links {
  --s-color-header-text: var(--ck-ink);
  background: #fff !important;
  color: var(--ck-ink) !important;
}

.c-header-subnav__links a,
.c-header-subnav__links button,
.c-header-subnav__links .c-header-subnav__trigger,
.c-header-subnav__links span,
.c-header-subnav__saved {
  color: var(--ck-ink) !important;
}

.c-header-subnav__links a i,
.c-header-subnav__links button i,
.c-header-subnav__links .c-header-subnav__trigger i {
  color: var(--ck-accent) !important;
}

.c-header-collective__nav.is-open .nav-link,
.c-header-collective__nav--bar.is-open .nav-link,
.c-header-collective__compact-drawer.is-open .nav-link,
.c-header-collective__user-header--mobile-site .nav-link {
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--ck-btn-h);
  padding: 12px 14px !important;
  border-radius: 12px;
  font-family: var(--ck-font);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ck-ink) !important;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.25s ease;
}

.c-header-collective__nav.is-open .nav-link:hover,
.c-header-collective__nav--bar.is-open .nav-link:hover,
.c-header-collective__compact-drawer.is-open .nav-link:hover,
.c-header-collective__user-header--mobile-site .nav-link:hover {
  background: var(--ck-surface-soft) !important;
  border-color: var(--ck-line);
  transform: translateY(-1px);
  color: var(--ck-ink) !important;
}

.c-header-collective__nav.is-open .nav-link i,
.c-header-collective__nav--bar.is-open .nav-link i,
.c-header-collective__compact-drawer.is-open .nav-link i,
.c-header-collective__user-header--mobile-site .nav-link i {
  color: var(--ck-accent) !important;
  width: 22px;
  text-align: center;
}

.c-mobile-nav__section-title {
  color: var(--ck-navy) !important;
  background: linear-gradient(90deg, rgba(242, 100, 34, 0.1) 0%, var(--ck-surface-soft) 100%) !important;
  border-left-color: var(--ck-accent) !important;
  font-family: var(--ck-font);
}

.c-header-collective__nav.is-open .c-button--close-nav,
.c-header-collective__nav--bar.is-open .c-button--close-nav,
.c-header-collective__compact-drawer.is-open .c-button--close-nav,
.c-header-collective__compact-drawer-close {
  color: var(--ck-ink) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--ck-line) !important;
  border-radius: 12px !important;
  min-width: 40px;
  min-height: 40px;
}

/* Overlay unificado */
body.is-mobile-nav-open #nav-overlay,
body.is-mobile-nav-open .c-hidden-aside__bg {
  background: rgba(15, 39, 68, 0.48) !important;
}

/* ═══════════════════════════════════════════════════════════
   SECCIONES · títulos y leads
   ═══════════════════════════════════════════════════════════ */
.c-section-title,
.c-home-section .c-section-title,
.c-ofertas-page__title {
  color: var(--ck-ink);
  font-family: var(--ck-font);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.c-home-section-lead,
.c-ofertas-page__lead {
  color: var(--ck-muted);
  font-family: var(--ck-font);
}

.c-home-section {
  padding-block: clamp(28px, 5vw, 48px);
}

/* ═══════════════════════════════════════════════════════════
   FICHAS / TARJETAS · mismo radio, borde y sombra
   ═══════════════════════════════════════════════════════════ */
.c-oferta-card,
.c-moc-card,
.c-cupo-card,
.c-aloj-card,
.c-result-card,
.c-package-card,
.c-vdv-card,
.c-hotel-card,
.ck-card {
  border-radius: var(--ck-radius-lg) !important;
  border: 1px solid var(--ck-line) !important;
  box-shadow: var(--ck-shadow) !important;
  background: var(--ck-surface);
  overflow: hidden;
  transition: all 0.25s ease;
  font-family: var(--ck-font);
}

.c-oferta-card:hover,
.c-moc-card:hover,
.c-aloj-card:hover,
.c-result-card:hover,
.c-package-card:hover,
.c-hotel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -8px rgba(15, 39, 68, 0.14), 0 6px 14px -4px rgba(15, 39, 68, 0.06) !important;
}

.c-oferta-card__title,
.c-moc-card__title,
.c-aloj-card__title,
.c-hotel-card__title,
.c-package-card__title {
  color: var(--ck-ink) !important;
  font-weight: 700;
}

.c-oferta-card__price,
.c-moc-card__price-badge,
.c-oferta-detail__price-badge,
.c-cupo-cover__badge {
  background: linear-gradient(135deg, var(--ck-accent), var(--ck-accent-2)) !important;
  color: #fff !important;
  border-radius: 999px;
  font-weight: 700;
}

.c-oferta-card__cta,
.c-moc-card__btn--primary,
.c-button--brand,
.c-cupo-cta-strip__btn {
  min-height: var(--ck-btn-h);
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--ck-navy), var(--ck-navy-2)) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700;
  transition: all 0.25s ease;
}

.c-oferta-card__cta:hover,
.c-moc-card__btn--primary:hover,
.c-button--brand:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* Chips / badges */
.c-oferta-detail__chip,
.c-moc-card__tags span,
.c-cupo-promo-chip {
  border-radius: 999px !important;
  border: 1px solid rgba(242, 100, 34, 0.28) !important;
  background: rgba(242, 100, 34, 0.08) !important;
  color: var(--ck-navy) !important;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   RESULTADOS · shell y detalle
   ═══════════════════════════════════════════════════════════ */
.c-results-shell,
.vdv-results-shell,
.c-aloj-results,
.c-oferta-detail__dialog {
  font-family: var(--ck-font);
  color: var(--ck-ink);
}

.c-oferta-detail__dialog,
.c-cupo-sheet {
  border-radius: var(--ck-radius-lg);
  border: 1px solid var(--ck-line);
  box-shadow: var(--ck-shadow);
  background: var(--ck-surface);
}

.c-oferta-detail__eyebrow,
.c-cupo-eyebrow {
  color: var(--ck-accent) !important;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   PDF / FOLLETO · portada y tipografía
   ═══════════════════════════════════════════════════════════ */
.c-cupo-brand__label span,
.c-cupo-cover__badge,
.page-folleto-oferta-cupo .c-cupo-title-rich {
  font-family: var(--ck-font);
}

.page-folleto-oferta-cupo .c-cupo-title-rich,
.page-folleto-oferta-cupo .c-oferta-detail__title-rich {
  color: var(--ck-ink) !important;
}

.page-folleto-oferta-cupo .c-cupo-section-head__title {
  color: var(--ck-navy) !important;
}

.page-folleto-oferta-cupo .c-cupo-card {
  border-radius: var(--ck-radius) !important;
  border-color: var(--ck-line) !important;
}

/* ═══════════════════════════════════════════════════════════
   GLASS HEADER sticky coherente
   ═══════════════════════════════════════════════════════════ */
.c-header-collective__bar {
  background: rgba(15, 39, 68, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@media (max-width: 699px) {
  .c-header-collective__nav.is-open,
  .c-header-collective__nav--bar.is-open,
  .c-header-collective__compact-drawer.is-open {
    width: min(100vw, 100%) !important;
    max-width: 100vw !important;
  }

  .c-mobile-nav__cover {
    height: 148px;
  }
}

@media (min-width: 700px) and (max-width: 1199px) {
  .c-header-collective__nav.is-open,
  .c-header-collective__nav--bar.is-open,
  .c-header-collective__compact-drawer.is-open {
    width: min(380px, 86vw) !important;
  }
}

@media (min-width: 1200px) {
  .c-header-collective__nav.is-open,
  .c-header-collective__nav--bar.is-open,
  .c-header-collective__compact-drawer.is-open {
    width: min(360px, 32vw) !important;
  }
}

.c-header-collective__bar,
.c-header-collective__nav--bar:not(.is-open) {
  --s-color-header-text: #ffffff;
}