:root {
  color-scheme: dark;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #fbf7ee;
  --bg-soft: #fffaf1;
  --bg-elevated: #f5ead8;
  --bg-panel: rgba(255, 250, 241, 0.88);
  --bg-panel-strong: rgba(255, 248, 236, 0.96);
  --text: #1b1710;
  --text-muted: #61584a;
  --text-soft: #8c7f69;
  --accent: #d89a00;
  --accent-strong: #9c6d00;
  --accent-soft: rgba(216, 154, 0, 0.12);
  --accent-glow: rgba(216, 154, 0, 0.18);
  --border: rgba(172, 124, 18, 0.18);
  --border-strong: rgba(172, 124, 18, 0.34);
  --shadow-soft: 0 16px 34px rgba(82, 60, 12, 0.08);
  --shadow-panel: 0 28px 60px rgba(82, 60, 12, 0.12);
  --shadow-glow: 0 0 0 1px rgba(172, 124, 18, 0.08), 0 18px 48px rgba(82, 60, 12, 0.1), 0 0 24px rgba(216, 154, 0, 0.08);
  --gold: #d89a00;
  --dark: #fbf7ee;
  --surface: #fffaf1;
  --surface2: #f5ead8;
  --crema: #fbf7ee;
  --card: linear-gradient(180deg, rgba(255, 250, 241, 0.96), rgba(245, 235, 216, 0.98));
  --primary: #d89a00;
  --primary-text: #201502;
  --chip-bg: rgba(216, 154, 0, 0.1);
  --chip-text: #9c6d00;
  --radius: 24px;
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at top left, rgba(216, 154, 0, 0.14), transparent 24%),
    radial-gradient(circle at 84% 10%, rgba(216, 154, 0, 0.09), transparent 20%),
    radial-gradient(circle at 50% 120%, rgba(216, 154, 0, 0.07), transparent 28%),
    linear-gradient(180deg, #fffcf6 0%, #fbf7ee 44%, #f2e7d1 100%) !important;
  color: var(--text);
}

html[data-theme="light"] body::before {
  background:
    linear-gradient(rgba(172, 124, 18, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(172, 124, 18, 0.05) 1px, transparent 1px);
  opacity: 0.16;
}

html[data-theme="light"] body.text-ink,
html[data-theme="light"] body .text-ink {
  color: var(--text) !important;
}

html[data-theme="light"] body .text-stone-700 {
  color: var(--text-muted) !important;
}

html[data-theme="light"] body .text-stone-500 {
  color: var(--text-soft) !important;
}

html[data-theme="light"] body .text-vanilla-50,
html[data-theme="light"] body .text-vanilla-100 {
  color: var(--text) !important;
}

html[data-theme="light"] header.bg-vanilla-50\/80,
html[data-theme="light"] footer.bg-crema-50\/60,
html[data-theme="light"] body .bg-white\/80,
html[data-theme="light"] body .bg-white\/70,
html[data-theme="light"] body .bg-vanilla-50\/80,
html[data-theme="light"] body .bg-crema-50\/60,
html[data-theme="light"] body .bg-vanilla-50 {
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.94), rgba(247, 239, 225, 0.96)) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-soft) !important;
  backdrop-filter: blur(18px);
}

html[data-theme="light"] header.bg-vanilla-50\/80 {
  background: rgba(255, 250, 241, 0.82) !important;
}

html[data-theme="light"] body .bg-vanilla-200 {
  background: rgba(216, 154, 0, 0.12) !important;
}

html[data-theme="light"] body span.bg-vanilla-200,
html[data-theme="light"] body div.bg-vanilla-200 {
  color: var(--accent-strong) !important;
}

html[data-theme="light"] body a.bg-vanilla-200,
html[data-theme="light"] body button.bg-vanilla-200 {
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

html[data-theme="light"] body .border-crema-100,
html[data-theme="light"] body .border-crema-200,
html[data-theme="light"] body .border-vanilla-200 {
  border-color: var(--border) !important;
}

html[data-theme="light"] body .border-ink {
  border-color: var(--border-strong) !important;
}

html[data-theme="light"] body .shadow-soft {
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme="light"] body a.bg-ink,
html[data-theme="light"] body button.bg-ink {
  background: linear-gradient(135deg, var(--accent) 0%, #efc245 100%) !important;
  color: #1a1000 !important;
  border: 1px solid rgba(172, 124, 18, 0.26) !important;
  box-shadow: 0 16px 32px rgba(216, 154, 0, 0.18) !important;
}

html[data-theme="light"] body a.bg-ink:hover,
html[data-theme="light"] body button.bg-ink:hover {
  box-shadow: 0 20px 38px rgba(216, 154, 0, 0.22) !important;
}

html[data-theme="light"] body div.bg-ink {
  background: linear-gradient(180deg, rgba(255, 250, 241, 0.94), rgba(245, 235, 216, 0.98)) !important;
  border-color: var(--border) !important;
}

html[data-theme="light"] body .hover\:bg-vanilla-300:hover,
html[data-theme="light"] body .hover\:bg-white:hover,
html[data-theme="light"] body .hover\:bg-white\/10:hover {
  background: rgba(216, 154, 0, 0.14) !important;
}

html[data-theme="light"] body input:not([type="hidden"]),
html[data-theme="light"] body textarea {
  background: rgba(255, 250, 241, 0.9) !important;
  color: var(--text) !important;
  border-color: rgba(172, 124, 18, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

html[data-theme="light"] body input::placeholder,
html[data-theme="light"] body textarea::placeholder {
  color: rgba(97, 88, 74, 0.72) !important;
}

html[data-theme="light"] .site-brand-text {
  color: var(--text);
}

html[data-theme="light"] .nav-link,
html[data-theme="light"] .mobile-menu-links .nav-link {
  color: rgba(27, 23, 16, 0.7);
}

html[data-theme="light"] .nav-link:hover {
  color: var(--text);
}

html[data-theme="light"] #home.hero {
  background:
    radial-gradient(circle at top left, rgba(216, 154, 0, 0.10), transparent 30%),
    radial-gradient(circle at bottom right, rgba(216, 154, 0, 0.08), transparent 26%),
    linear-gradient(180deg, #fffdf8 0%, #fbf7ee 58%, #f4ead7 100%) !important;
}

html[data-theme="light"] #home.hero::before,
html[data-theme="light"] #home.hero::after {
  opacity: 0.06 !important;
}

html[data-theme="light"] #home .hero-tag {
  background: rgba(255, 249, 240, 0.92) !important;
  border-color: rgba(172, 124, 18, 0.18) !important;
  color: #987545 !important;
}

html[data-theme="light"] #home .hero-title,
html[data-theme="light"] #home .hero-inline-metrics strong,
html[data-theme="light"] #home .hero-chat-title strong,
html[data-theme="light"] #home .hero-msg,
html[data-theme="light"] #home .hero-metric-card strong {
  color: var(--text) !important;
}

html[data-theme="light"] #home .hero-title-highlight,
html[data-theme="light"] #home .hero-dashboard-badge {
  color: var(--accent-strong) !important;
}

html[data-theme="light"] #home .hero-dashboard-badge {
  background: rgba(216, 154, 0, 0.08) !important;
}

html[data-theme="light"] #home .hero-tag-dot,
html[data-theme="light"] #home .hero-bullets li::before {
  background-color: var(--accent) !important;
}

html[data-theme="light"] #home .hero-subtitle,
html[data-theme="light"] #home .hero-claim,
html[data-theme="light"] #home .hero-bullets,
html[data-theme="light"] #home .hero-demo-link,
html[data-theme="light"] #home .hero-inline-metrics span,
html[data-theme="light"] #home .hero-metric-card span,
html[data-theme="light"] #home .hero-chat-tags span,
html[data-theme="light"] #home .hero-chat-input input {
  color: rgba(27, 23, 16, 0.72) !important;
}

html[data-theme="light"] #home .hero-inline-metrics strong {
  color: var(--text) !important;
}

html[data-theme="light"] #home .hero-inline-metrics span {
  color: rgba(27, 23, 16, 0.56) !important;
}

html[data-theme="light"] #home .hero-inline-metrics > div[style*="width:1px"] {
  background: rgba(172, 124, 18, 0.18) !important;
}

html[data-theme="light"] #home .hero-inline-metrics-item + .hero-inline-metrics-item {
  border-left-color: rgba(172, 124, 18, 0.18);
}

html[data-theme="light"] #home .hero-demo-link::before {
  border-color: rgba(172, 124, 18, 0.22);
  background: linear-gradient(135deg, rgba(216, 154, 0, 0.08), rgba(216, 154, 0, 0.03));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

html[data-theme="light"] #home .hero-panel {
  background: linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(247, 239, 225, 0.98)) !important;
  border-color: rgba(172, 124, 18, 0.18) !important;
  box-shadow: 0 22px 46px rgba(82, 60, 12, 0.10) !important;
}

html[data-theme="light"] #home .hero-metric-card,
html[data-theme="light"] #home .hero-msg,
html[data-theme="light"] #home .hero-typing,
html[data-theme="light"] #home .hero-chat-input input,
html[data-theme="light"] #home .hero-chat-tags span {
  background: rgba(250, 242, 228, 0.98) !important;
  border-color: rgba(172, 124, 18, 0.16) !important;
}

html[data-theme="light"] #home .hero-msg-user {
  background: rgba(216, 154, 0, 0.14) !important;
  color: #7a5700 !important;
}

html[data-theme="light"] #home .hero-chat-avatar {
  color: #201502 !important;
}

html[data-theme="light"] #home .hero-chart-wrap {
  background: linear-gradient(180deg, rgba(216, 154, 0, 0.08), rgba(255, 255, 255, 0)) !important;
  border-bottom-color: rgba(172, 124, 18, 0.22) !important;
}

html[data-theme="light"] #home .hero-chat-header {
  border-bottom-color: rgba(172, 124, 18, 0.14) !important;
}

html[data-theme="light"] #home .hero-demo-link {
  background: rgba(255, 251, 244, 0.95) !important;
  border-color: rgba(172, 124, 18, 0.18) !important;
  box-shadow: 0 10px 24px rgba(82, 60, 12, 0.06) !important;
}

html[data-theme="light"] #home .hero-chat-input button,
html[data-theme="light"] #home .hero-actions .btn.btn-primary,
html[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #d89a00 0%, #efc245 100%) !important;
  color: #1a1000 !important;
  box-shadow: 0 12px 26px rgba(216, 154, 0, 0.16) !important;
}

html[data-theme="light"] .faq-item {
  background: linear-gradient(180deg, rgba(255, 250, 241, 0.96), rgba(245, 235, 216, 0.98)) !important;
  border-color: rgba(172, 124, 18, 0.18) !important;
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme="light"] .faq-item summary {
  color: var(--text) !important;
}

html[data-theme="light"] .faq-item summary::after {
  background: rgba(216, 154, 0, 0.12) !important;
  color: var(--accent-strong) !important;
}

html[data-theme="light"] .faq-answer {
  color: var(--text-muted) !important;
}

html[data-theme="light"] .pricing-card,
html[data-theme="light"] .pricing-block,
html[data-theme="light"] .pricing-annual,
html[data-theme="light"] .pricing-cta,
html[data-theme="light"] .plan-card,
html[data-theme="light"] .block,
html[data-theme="light"] .annual-card,
html[data-theme="light"] .cta-card {
  background: linear-gradient(180deg, rgba(255, 250, 241, 0.96), rgba(245, 235, 216, 0.98)) !important;
  border-color: rgba(172, 124, 18, 0.18) !important;
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme="light"] .pricing-card.featured,
html[data-theme="light"] .pricing-card-agent-featured,
html[data-theme="light"] .plan-card.is-featured {
  background: linear-gradient(180deg, rgba(216, 154, 0, 0.12), rgba(255, 250, 241, 0.98) 28%, rgba(245, 235, 216, 0.98)) !important;
  border-color: rgba(172, 124, 18, 0.28) !important;
}

html[data-theme="light"] .pricing-note,
html[data-theme="light"] .pricing-badge,
html[data-theme="light"] .plan-badge,
html[data-theme="light"] .pricing-chip,
html[data-theme="light"] .addon-item,
html[data-theme="light"] .pricing-addon-list li {
  background: rgba(216, 154, 0, 0.08) !important;
  border-color: rgba(172, 124, 18, 0.18) !important;
  color: var(--accent-strong) !important;
}

html[data-theme="light"] .pricing-title,
html[data-theme="light"] .pricing-section-title,
html[data-theme="light"] .pricing-block-title,
html[data-theme="light"] .pricing-cta-title,
html[data-theme="light"] .pricing-name,
html[data-theme="light"] .plan-name,
html[data-theme="light"] .block-title,
html[data-theme="light"] .cta-title,
html[data-theme="light"] .price-usd,
html[data-theme="light"] .pricing-price-usd {
  color: var(--text) !important;
}

html[data-theme="light"] .pricing-subtitle,
html[data-theme="light"] .pricing-desc,
html[data-theme="light"] .pricing-block-text,
html[data-theme="light"] .pricing-inline-note,
html[data-theme="light"] .pricing-features,
html[data-theme="light"] .pricing-price-clp,
html[data-theme="light"] .pricing-price-note,
html[data-theme="light"] .plan-desc,
html[data-theme="light"] .price-clp,
html[data-theme="light"] .plan-features,
html[data-theme="light"] .block-text {
  color: var(--text-muted) !important;
}

html[data-theme="light"] .pricing-price-usd-premium {
  color: var(--accent-strong) !important;
}

html[data-theme="light"] .pricing-features li::before,
html[data-theme="light"] .plan-features li::before,
html[data-theme="light"] .pricing-addon-list li::before {
  box-shadow: 0 0 10px rgba(216, 154, 0, 0.16) !important;
}

html[data-theme="light"] #n8n-chat {
  --chat--color-primary:#D89A00;
  --chat--color-primary-shade-50:#BE8800;
  --chat--color-primary-shade-100:#9C6D00;
  --chat--color-secondary:#FFFAF1;
  --chat--color-secondary-shade-50:#F5EBD8;
  --chat--color-secondary-shade-100:#EADCC5;
  --chat--color-white:#1B1710;
  --chat--color-light:#FFFAF1;
  --chat--color-light-shade-50:#F5EBD8;
  --chat--color-light-shade-100:#EADCC5;
  --chat--color-medium:#81735E;
  --chat--color-dark:#1B1710;
}

.theme-toggle-shell {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 90;
}

.theme-toggle-inline {
  position: static;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-panel-strong);
  color: var(--text);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(16px);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.theme-toggle:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}

.theme-toggle-mark {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  position: relative;
  flex: none;
  background: linear-gradient(135deg, var(--accent) 0%, #ffd863 100%);
  box-shadow: inset -5px -5px 0 rgba(12, 12, 12, 0.28);
}

html[data-theme="light"] .theme-toggle-mark {
  background: linear-gradient(135deg, #fff3b0 0%, #ffd050 100%);
  box-shadow: inset -4px -4px 0 rgba(216, 154, 0, 0.14);
}

.theme-toggle-label {
  white-space: nowrap;
}

html[data-theme="light"] .pricing-section {
  color: var(--text);
}

html[data-theme="light"] .plan-card,
html[data-theme="light"] .block,
html[data-theme="light"] .annual-card,
html[data-theme="light"] .cta-card {
  box-shadow: var(--shadow-soft);
}

html[data-theme="light"] .btn-secondary {
  background: rgba(255, 250, 241, 0.9);
  color: var(--text);
}

@media (max-width: 768px) {
  .theme-toggle {
    padding: 10px 12px;
  }

  .theme-toggle-label {
    display: none;
  }

  .theme-toggle-shell {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
  }
}