@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Manrope:wght@500;700;800&display=swap");

/*
 * HotelKore Dark Mode Pro
 *
 * Uso recomendado:
 * 1. Carga este archivo despues de main.css.
 * 2. Para activarlo manualmente, anade la clase `hk-dark-mode` al body.
 * 3. Tambien responde a `prefers-color-scheme: dark`.
 */

body.hk-dark-mode,
body.hk-dark-mode .editor-styles-wrapper {
  --hk-bg: #081116;
  --hk-surface: #0f1b22;
  --hk-surface-2: #13242d;
  --hk-text: #edf6f4;
  --hk-muted: #9ab3b7;
  --hk-brand: #2fd4bf;
  --hk-brand-soft: rgba(47, 212, 191, 0.12);
  --hk-brand-dark: #8ff0df;
  --hk-accent: #ffbd59;
  --hk-border: rgba(138, 181, 188, 0.16);
  --hk-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  background:
    radial-gradient(circle at 10% 10%, rgba(47, 212, 191, 0.12), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(255, 189, 89, 0.1), transparent 18%),
    linear-gradient(180deg, #081116 0%, #0b151c 100%);
  color: var(--hk-text);
}

@media (prefers-color-scheme: dark) {
  body:not(.hk-light-mode) {
    --hk-bg: #081116;
    --hk-surface: #0f1b22;
    --hk-surface-2: #13242d;
    --hk-text: #edf6f4;
    --hk-muted: #9ab3b7;
    --hk-brand: #2fd4bf;
    --hk-brand-soft: rgba(47, 212, 191, 0.12);
    --hk-brand-dark: #8ff0df;
    --hk-accent: #ffbd59;
    --hk-border: rgba(138, 181, 188, 0.16);
    --hk-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
    background:
      radial-gradient(circle at 10% 10%, rgba(47, 212, 191, 0.12), transparent 24%),
      radial-gradient(circle at 88% 12%, rgba(255, 189, 89, 0.1), transparent 18%),
      linear-gradient(180deg, #081116 0%, #0b151c 100%);
    color: var(--hk-text);
  }
}

body.hk-dark-mode,
body.hk-dark-mode .hk-site-header,
body.hk-dark-mode .hk-site-footer,
body.hk-dark-mode .hk-entry,
body.hk-dark-mode .hk-card,
body.hk-dark-mode .hk-form-shell,
body.hk-dark-mode .hk-contact-card,
body.hk-dark-mode .hk-dashboard-card-side,
body.hk-dark-mode .hk-list li,
body.hk-dark-mode .hk-compare-table,
body.hk-dark-mode .hk-entry-content table {
  color: var(--hk-text);
}

@media (prefers-color-scheme: dark) {
  body:not(.hk-light-mode) .hk-site-header,
  body:not(.hk-light-mode) .hk-site-footer,
  body:not(.hk-light-mode) .hk-entry,
  body:not(.hk-light-mode) .hk-card,
  body:not(.hk-light-mode) .hk-form-shell,
  body:not(.hk-light-mode) .hk-contact-card,
  body:not(.hk-light-mode) .hk-dashboard-card-side,
  body:not(.hk-light-mode) .hk-list li,
  body:not(.hk-light-mode) .hk-compare-table,
  body:not(.hk-light-mode) .hk-entry-content table {
    color: var(--hk-text);
  }
}

body.hk-dark-mode a {
  color: var(--hk-brand-dark);
}

@media (prefers-color-scheme: dark) {
  body:not(.hk-light-mode) a {
    color: var(--hk-brand-dark);
  }
}

body.hk-dark-mode .hk-site-header {
  background: rgba(10, 18, 24, 0.78);
  border-bottom-color: var(--hk-border);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26);
}

body.hk-dark-mode .hk-theme-toggle {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--hk-text);
}

body.hk-dark-mode .hk-theme-toggle__track {
  background: linear-gradient(135deg, #11232b, #1c323c);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

body.hk-dark-mode .hk-logo,
body.hk-dark-mode .hk-menu a,
body.hk-dark-mode .hk-entry h1,
body.hk-dark-mode .hk-entry h2,
body.hk-dark-mode .hk-entry h3,
body.hk-dark-mode .hk-hero h1,
body.hk-dark-mode .hk-final-cta h2 {
  color: var(--hk-text);
}

body.hk-dark-mode .hk-logo span::before {
  box-shadow: 0 0 0 7px rgba(47, 212, 191, 0.16);
}

body.hk-dark-mode .hk-menu a::after {
  background: linear-gradient(90deg, var(--hk-brand), var(--hk-accent));
}

body.hk-dark-mode .hk-hero {
  background:
    radial-gradient(circle at 0% 0%, rgba(47, 212, 191, 0.18), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(255, 189, 89, 0.16), transparent 22%),
    linear-gradient(145deg, #09141a 20%, #0d1c24 100%);
}

body.hk-dark-mode .hk-badge {
  background: rgba(19, 36, 45, 0.68);
  border-color: rgba(47, 212, 191, 0.22);
  color: var(--hk-brand-dark);
}

body.hk-dark-mode .hk-kicker,
body.hk-dark-mode .hk-section-kicker,
body.hk-dark-mode .hk-card-eyebrow {
  color: var(--hk-brand-dark);
}

body.hk-dark-mode .hk-hero-lead,
body.hk-dark-mode .hk-hero-content,
body.hk-dark-mode .hk-entry-content,
body.hk-dark-mode .hk-contact-points span,
body.hk-dark-mode .hk-form-legal,
body.hk-dark-mode .hk-site-footer p,
body.hk-dark-mode .hk-final-cta p {
  color: var(--hk-muted);
}

body.hk-dark-mode .hk-dashboard-card-main {
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 20%),
    linear-gradient(150deg, #102229 0%, #124b46 48%, #1d8e83 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.hk-dark-mode .hk-dashboard-card-side,
body.hk-dark-mode .hk-entry,
body.hk-dark-mode .hk-card,
body.hk-dark-mode .hk-form-shell,
body.hk-dark-mode .hk-contact-card {
  background:
    linear-gradient(180deg, rgba(19, 36, 45, 0.96) 0%, rgba(15, 27, 34, 0.98) 100%);
  border-color: var(--hk-border);
  box-shadow: var(--hk-shadow);
}

body.hk-dark-mode .hk-card:hover {
  border-color: rgba(47, 212, 191, 0.28);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
}

body.hk-dark-mode .hk-card-index,
body.hk-dark-mode .hk-chip-list li,
body.hk-dark-mode .hk-list li,
body.hk-dark-mode .hk-contact-points li,
body.hk-dark-mode .hk-stat-box {
  background: rgba(255, 255, 255, 0.05);
  color: var(--hk-text);
  border-color: rgba(255, 255, 255, 0.08);
}

body.hk-dark-mode .hk-list li {
  border-left-color: var(--hk-brand);
  box-shadow: inset 0 0 0 1px rgba(47, 212, 191, 0.08);
}

body.hk-dark-mode .hk-btn-primary {
  background: linear-gradient(135deg, var(--hk-accent), #ffd388);
  color: #19242a;
}

body.hk-dark-mode .hk-btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--hk-text);
  border-color: rgba(255, 255, 255, 0.1);
}

body.hk-dark-mode .hk-btn:hover {
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
}

body.hk-dark-mode .hk-final-cta {
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.08), transparent 24%),
    linear-gradient(130deg, #0c1e24, #12554f 62%, #1f9b86);
  box-shadow: 0 32px 72px rgba(0, 0, 0, 0.4);
}

body.hk-dark-mode .hk-site-footer {
  background: rgba(8, 17, 22, 0.72);
  border-top-color: var(--hk-border);
}

body.hk-dark-mode .hk-form input,
body.hk-dark-mode .hk-form textarea {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--hk-text);
}

body.hk-dark-mode .hk-form input::placeholder,
body.hk-dark-mode .hk-form textarea::placeholder {
  color: rgba(237, 246, 244, 0.44);
}

body.hk-dark-mode .hk-form input:focus,
body.hk-dark-mode .hk-form textarea:focus {
  outline: 2px solid rgba(47, 212, 191, 0.18);
  border-color: rgba(47, 212, 191, 0.34);
}

body.hk-dark-mode .hk-alert-success {
  background: rgba(25, 112, 83, 0.18);
  color: #9df2d2;
}

body.hk-dark-mode .hk-alert-error {
  background: rgba(159, 36, 57, 0.18);
  color: #ffb6c1;
}

body.hk-dark-mode .hk-compare-table,
body.hk-dark-mode .hk-entry-content table {
  background: #0f1b22;
}

body.hk-dark-mode .hk-compare-table th,
body.hk-dark-mode .hk-compare-table td,
body.hk-dark-mode .hk-entry-content th,
body.hk-dark-mode .hk-entry-content td {
  border-color: rgba(138, 181, 188, 0.12);
}

body.hk-dark-mode .hk-compare-table thead th,
body.hk-dark-mode .hk-entry-content thead th {
  background: rgba(47, 212, 191, 0.08);
  color: var(--hk-brand-dark);
}

body.hk-dark-mode .hk-pro-hero-copy,
body.hk-dark-mode .hk-pro-slider,
body.hk-dark-mode .hk-pro-video-wrap {
  background: linear-gradient(180deg, rgba(19, 36, 45, 0.96) 0%, rgba(15, 27, 34, 0.98) 100%);
  border-color: var(--hk-border);
  box-shadow: var(--hk-shadow);
}

body.hk-dark-mode .hk-pro-hero-text {
  color: var(--hk-muted);
}

body.hk-dark-mode .hk-pro-slider-btn {
  background: rgba(14, 31, 35, 0.88);
  color: var(--hk-text);
}

body.hk-dark-mode .hk-pro-dot {
  background: rgba(255, 255, 255, 0.4);
}

body.hk-dark-mode .hk-pro-dot.is-active {
  background: var(--hk-text);
}

body.hk-dark-mode .hk-pro-slide-link {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--hk-text);
}

@media (prefers-color-scheme: dark) {
  body:not(.hk-light-mode) .hk-site-header {
    background: rgba(10, 18, 24, 0.78);
    border-bottom-color: var(--hk-border);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26);
  }

  body:not(.hk-light-mode) .hk-theme-toggle {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--hk-text);
  }

  body:not(.hk-light-mode) .hk-theme-toggle__track {
    background: linear-gradient(135deg, #11232b, #1c323c);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  }

  body:not(.hk-light-mode) .hk-logo,
  body:not(.hk-light-mode) .hk-menu a,
  body:not(.hk-light-mode) .hk-entry h1,
  body:not(.hk-light-mode) .hk-entry h2,
  body:not(.hk-light-mode) .hk-entry h3,
  body:not(.hk-light-mode) .hk-hero h1,
  body:not(.hk-light-mode) .hk-final-cta h2 {
    color: var(--hk-text);
  }

  body:not(.hk-light-mode) .hk-logo span::before {
    box-shadow: 0 0 0 7px rgba(47, 212, 191, 0.16);
  }

  body:not(.hk-light-mode) .hk-menu a::after {
    background: linear-gradient(90deg, var(--hk-brand), var(--hk-accent));
  }

  body:not(.hk-light-mode) .hk-hero {
    background:
      radial-gradient(circle at 0% 0%, rgba(47, 212, 191, 0.18), transparent 28%),
      radial-gradient(circle at 100% 0%, rgba(255, 189, 89, 0.16), transparent 22%),
      linear-gradient(145deg, #09141a 20%, #0d1c24 100%);
  }

  body:not(.hk-light-mode) .hk-badge {
    background: rgba(19, 36, 45, 0.68);
    border-color: rgba(47, 212, 191, 0.22);
    color: var(--hk-brand-dark);
  }

  body:not(.hk-light-mode) .hk-kicker,
  body:not(.hk-light-mode) .hk-section-kicker,
  body:not(.hk-light-mode) .hk-card-eyebrow {
    color: var(--hk-brand-dark);
  }

  body:not(.hk-light-mode) .hk-hero-lead,
  body:not(.hk-light-mode) .hk-hero-content,
  body:not(.hk-light-mode) .hk-entry-content,
  body:not(.hk-light-mode) .hk-contact-points span,
  body:not(.hk-light-mode) .hk-form-legal,
  body:not(.hk-light-mode) .hk-site-footer p,
  body:not(.hk-light-mode) .hk-final-cta p {
    color: var(--hk-muted);
  }

  body:not(.hk-light-mode) .hk-dashboard-card-main {
    background:
      radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 20%),
      linear-gradient(150deg, #102229 0%, #124b46 48%, #1d8e83 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  body:not(.hk-light-mode) .hk-dashboard-card-side,
  body:not(.hk-light-mode) .hk-entry,
  body:not(.hk-light-mode) .hk-card,
  body:not(.hk-light-mode) .hk-form-shell,
  body:not(.hk-light-mode) .hk-contact-card {
    background:
      linear-gradient(180deg, rgba(19, 36, 45, 0.96) 0%, rgba(15, 27, 34, 0.98) 100%);
    border-color: var(--hk-border);
    box-shadow: var(--hk-shadow);
  }

  body:not(.hk-light-mode) .hk-card:hover {
    border-color: rgba(47, 212, 191, 0.28);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
  }

  body:not(.hk-light-mode) .hk-card-index,
  body:not(.hk-light-mode) .hk-chip-list li,
  body:not(.hk-light-mode) .hk-list li,
  body:not(.hk-light-mode) .hk-contact-points li,
  body:not(.hk-light-mode) .hk-stat-box {
    background: rgba(255, 255, 255, 0.05);
    color: var(--hk-text);
    border-color: rgba(255, 255, 255, 0.08);
  }

  body:not(.hk-light-mode) .hk-list li {
    border-left-color: var(--hk-brand);
    box-shadow: inset 0 0 0 1px rgba(47, 212, 191, 0.08);
  }

  body:not(.hk-light-mode) .hk-btn-primary {
    background: linear-gradient(135deg, var(--hk-accent), #ffd388);
    color: #19242a;
  }

  body:not(.hk-light-mode) .hk-btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    color: var(--hk-text);
    border-color: rgba(255, 255, 255, 0.1);
  }

  body:not(.hk-light-mode) .hk-btn:hover {
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
  }

  body:not(.hk-light-mode) .hk-final-cta {
    background:
      radial-gradient(circle at top, rgba(255,255,255,0.08), transparent 24%),
      linear-gradient(130deg, #0c1e24, #12554f 62%, #1f9b86);
    box-shadow: 0 32px 72px rgba(0, 0, 0, 0.4);
  }

  body:not(.hk-light-mode) .hk-site-footer {
    background: rgba(8, 17, 22, 0.72);
    border-top-color: var(--hk-border);
  }

  body:not(.hk-light-mode) .hk-form input,
  body:not(.hk-light-mode) .hk-form textarea {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--hk-text);
  }

  body:not(.hk-light-mode) .hk-form input::placeholder,
  body:not(.hk-light-mode) .hk-form textarea::placeholder {
    color: rgba(237, 246, 244, 0.44);
  }

  body:not(.hk-light-mode) .hk-form input:focus,
  body:not(.hk-light-mode) .hk-form textarea:focus {
    outline: 2px solid rgba(47, 212, 191, 0.18);
    border-color: rgba(47, 212, 191, 0.34);
  }

  body:not(.hk-light-mode) .hk-alert-success {
    background: rgba(25, 112, 83, 0.18);
    color: #9df2d2;
  }

  body:not(.hk-light-mode) .hk-alert-error {
    background: rgba(159, 36, 57, 0.18);
    color: #ffb6c1;
  }

  body:not(.hk-light-mode) .hk-compare-table,
  body:not(.hk-light-mode) .hk-entry-content table {
    background: #0f1b22;
  }

  body:not(.hk-light-mode) .hk-compare-table th,
  body:not(.hk-light-mode) .hk-compare-table td,
  body:not(.hk-light-mode) .hk-entry-content th,
  body:not(.hk-light-mode) .hk-entry-content td {
    border-color: rgba(138, 181, 188, 0.12);
  }

  body:not(.hk-light-mode) .hk-compare-table thead th,
  body:not(.hk-light-mode) .hk-entry-content thead th {
    background: rgba(47, 212, 191, 0.08);
    color: var(--hk-brand-dark);
  }

  body:not(.hk-light-mode) .hk-pro-hero-copy,
  body:not(.hk-light-mode) .hk-pro-slider,
  body:not(.hk-light-mode) .hk-pro-video-wrap {
    background: linear-gradient(180deg, rgba(19, 36, 45, 0.96) 0%, rgba(15, 27, 34, 0.98) 100%);
    border-color: var(--hk-border);
    box-shadow: var(--hk-shadow);
  }

  body:not(.hk-light-mode) .hk-pro-hero-text {
    color: var(--hk-muted);
  }

  body:not(.hk-light-mode) .hk-pro-slider-btn {
    background: rgba(14, 31, 35, 0.88);
    color: var(--hk-text);
  }

  body:not(.hk-light-mode) .hk-pro-dot {
    background: rgba(255, 255, 255, 0.4);
  }

  body:not(.hk-light-mode) .hk-pro-dot.is-active {
    background: var(--hk-text);
  }

  body:not(.hk-light-mode) .hk-pro-slide-link {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--hk-text);
  }
}

@media (max-width: 900px) {
  body.hk-dark-mode .hk-site-header {
    background: rgba(7, 15, 20, 0.88);
  }

  body.hk-dark-mode .hk-menu-toggle,
  body:not(.hk-light-mode) .hk-menu-toggle {
    background: rgba(18, 35, 43, 0.92);
    border-color: rgba(143, 240, 223, 0.24);
  }

  body.hk-dark-mode .hk-menu-toggle__bar,
  body:not(.hk-light-mode) .hk-menu-toggle__bar {
    background: var(--hk-text);
  }

  body.hk-dark-mode .hk-nav,
  body:not(.hk-light-mode) .hk-nav {
    background: rgba(12, 24, 31, 0.98);
    border-color: rgba(138, 181, 188, 0.2);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
  }
}