:root {
  color-scheme: light;
  --c-primary: 154 90 0;
  --c-primary-container: 245 158 11;
  --c-on-primary-container: 61 37 0;
  --c-on-primary: 255 255 255;
  --c-primary-fixed: 133 83 0;
  --c-primary-fixed-dim: 181 106 0;
  --c-on-primary-fixed: 42 23 0;
  --c-on-primary-fixed-variant: 101 62 0;
  --c-secondary: 181 106 0;
  --c-secondary-container: 245 186 72;
  --c-on-secondary: 61 37 0;
  --c-on-secondary-container: 90 65 0;
  --c-secondary-fixed: 255 223 159;
  --c-secondary-fixed-dim: 201 140 16;
  --c-on-secondary-fixed: 38 26 0;
  --c-on-secondary-fixed-variant: 92 67 0;
  --c-tertiary: 3 105 161;
  --c-tertiary-container: 186 230 253;
  --c-on-tertiary: 0 53 74;
  --c-on-tertiary-container: 0 73 101;
  --c-tertiary-fixed: 196 231 255;
  --c-tertiary-fixed-dim: 14 116 144;
  --c-on-tertiary-fixed: 0 30 44;
  --c-on-tertiary-fixed-variant: 0 76 105;
  --c-background: 246 241 232;
  --c-on-background: 28 36 56;
  --c-surface: 251 248 243;
  --c-on-surface: 28 36 56;
  --c-on-surface-variant: 92 83 72;
  --c-surface-variant: 228 220 206;
  --c-surface-dim: 232 224 212;
  --c-surface-bright: 255 255 255;
  --c-surface-tint: 181 106 0;
  --c-surface-container-lowest: 255 255 255;
  --c-surface-container-low: 243 239 232;
  --c-surface-container: 236 230 219;
  --c-surface-container-high: 228 220 206;
  --c-surface-container-highest: 217 207 191;
  --c-outline: 122 108 92;
  --c-outline-variant: 214 204 188;
  --c-inverse-primary: 255 185 95;
  --c-inverse-surface: 40 48 68;
  --c-inverse-on-surface: 218 226 253;
  --c-error: 186 26 26;
  --c-error-container: 255 218 214;
  --c-on-error: 255 255 255;
  --c-on-error-container: 147 0 10;
  --menu-bg: rgba(251, 248, 243, 0.97);
  --lightbox-bg: rgba(246, 241, 232, 0.94);
  --swatch-ring: 236 230 219;
}

html.dark {
  color-scheme: dark;
  --c-primary: 255 193 116;
  --c-primary-container: 245 158 11;
  --c-on-primary-container: 97 59 0;
  --c-on-primary: 71 42 0;
  --c-primary-fixed: 255 221 184;
  --c-primary-fixed-dim: 255 185 95;
  --c-on-primary-fixed: 42 23 0;
  --c-on-primary-fixed-variant: 101 62 0;
  --c-secondary: 255 198 64;
  --c-secondary-container: 227 170 0;
  --c-on-secondary: 64 45 0;
  --c-on-secondary-container: 90 65 0;
  --c-secondary-fixed: 255 223 159;
  --c-secondary-fixed-dim: 249 189 34;
  --c-on-secondary-fixed: 38 26 0;
  --c-on-secondary-fixed-variant: 92 67 0;
  --c-tertiary: 142 213 255;
  --c-tertiary-container: 56 189 248;
  --c-on-tertiary: 0 53 74;
  --c-on-tertiary-container: 0 73 101;
  --c-tertiary-fixed: 196 231 255;
  --c-tertiary-fixed-dim: 123 208 255;
  --c-on-tertiary-fixed: 0 30 44;
  --c-on-tertiary-fixed-variant: 0 76 105;
  --c-background: 11 19 38;
  --c-on-background: 218 226 253;
  --c-surface: 11 19 38;
  --c-on-surface: 218 226 253;
  --c-on-surface-variant: 216 195 173;
  --c-surface-variant: 45 52 73;
  --c-surface-dim: 11 19 38;
  --c-surface-bright: 49 57 77;
  --c-surface-tint: 255 185 95;
  --c-surface-container-lowest: 6 14 32;
  --c-surface-container-low: 19 27 46;
  --c-surface-container: 23 31 51;
  --c-surface-container-high: 34 42 61;
  --c-surface-container-highest: 45 52 73;
  --c-outline: 160 142 122;
  --c-outline-variant: 83 68 52;
  --c-inverse-primary: 133 83 0;
  --c-inverse-surface: 218 226 253;
  --c-inverse-on-surface: 40 48 68;
  --c-error: 255 180 171;
  --c-error-container: 147 0 10;
  --c-on-error: 105 0 5;
  --c-on-error-container: 255 218 214;
  --menu-bg: rgba(11, 19, 38, 0.96);
  --lightbox-bg: rgba(6, 14, 32, 0.92);
  --swatch-ring: 23 31 51;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  overscroll-behavior: none;
  background-color: rgb(var(--c-background));
  color: rgb(var(--c-on-background));
}

main > :first-child {
  margin-top: 0 !important;
}

main > :last-child {
  margin-bottom: 0 !important;
}

::-webkit-scrollbar {
  display: none;
}

html {
  scrollbar-width: none;
}

img {
  max-width: 100%;
}

.js-lightbox {
  cursor: zoom-in;
}

body.nav-open,
body.lightbox-open {
  overflow: hidden;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 9999px;
  background: rgb(var(--c-surface-container-high));
  color: rgb(var(--c-on-surface));
  cursor: pointer;
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
  background: rgb(var(--c-surface-container-highest));
  outline: none;
}

@media (min-width: 1280px) {
  .menu-toggle {
    display: none;
  }
}

.mobile-nav {
  position: fixed;
  top: 5rem;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem;
  height: calc(100dvh - 5rem);
  min-height: calc(100vh - 5rem);
  background: var(--menu-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0.3s ease;
  overflow-y: auto;
}

.mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
}

.mobile-nav a {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  color: rgb(var(--c-on-surface));
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-decoration: none;
}

.mobile-nav a:hover,
.mobile-nav a:focus-visible {
  background: rgb(var(--c-surface-container-high));
  color: rgb(var(--c-primary));
  outline: none;
}

.whatsapp-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: #25d366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  text-decoration: none;
}

.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
  background: #20ba5a;
  outline: none;
}

.whatsapp-fab .material-symbols-outlined {
  font-size: 28px;
}

@media (min-width: 1280px) {
  .whatsapp-fab {
    right: 2rem;
    bottom: 2rem;
  }
}

input[type="range"] {
  accent-color: rgb(var(--c-primary));
  height: 8px;
}

.js-color-swatch.is-active {
  box-shadow: 0 0 0 2px rgb(var(--swatch-ring)), 0 0 0 4px rgb(var(--c-primary));
}

.js-layer-btn.is-active {
  background: rgb(var(--c-primary-container));
  color: rgb(var(--c-on-primary-container));
  font-weight: 700;
}

html:not(.dark) header {
  box-shadow: 0 1px 8px rgba(28, 36, 56, 0.08);
}

html:not(.dark) .bg-surface\/80 {
  background-color: rgb(var(--c-surface) / 0.88);
}

@media (max-width: 639px) {
  .hero-actions > a,
  .hero-actions > div {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}