:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --header-glass: #f8f9fce0;
  --control-glass: #ffffff82;
  --control-hover: #ffffffec;
  --dialog-glass: #f9fafcd9;
  --dialog-sheen: #ffffff84;
  --dialog-rim: #ffffffc7;
  --dialog-shadow: #151c2a45;
  --consultation-paper: #202943;
  --consultation-ink: #fff6e2;
  --consultation-hover: #314566;
}

:root[data-theme="dark"] {
  --header-glass: #0e1016dc;
  --control-glass: #ffffff0c;
  --control-hover: #ffffff1f;
  --dialog-glass: #14171edb;
  --dialog-sheen: #859cc115;
  --dialog-rim: #b9d0ff33;
  --dialog-shadow: #0009;
  --consultation-paper: #e9d9b1;
  --consultation-ink: #22202a;
  --consultation-hover: #fff0c9;
}

.site-header {
  border: 0;
  background: transparent;
  transition: transform .36s var(--ease-out);
}

.site-header::before {
  position: absolute;
  z-index: -1;
  inset: 0 0 -17px;
  content: "";
  background: var(--header-glass);
  backdrop-filter: blur(23px) saturate(1.35);
  -webkit-backdrop-filter: blur(23px) saturate(1.35);
  mask-image: linear-gradient(#000 0%, #000 60%, transparent);
  pointer-events: none;
}

.header-inner { gap: 18px; }
.brand, .footer-brand { display: inline-flex; width: fit-content; max-width: 100%; text-decoration: none; }
.brand-image {
  display: block;
  max-width: 100%;
  aspect-ratio: 5 / 2;
  background: url("images/brand/logo-light-180.webp") center / contain no-repeat;
  background-image: image-set(
    url("images/brand/logo-light-180.webp") 1x,
    url("images/brand/logo-light-360.webp") 2x,
    url("images/brand/logo-light-540.webp") 3x
  );
  print-color-adjust: exact;
}
[data-theme="dark"] .brand-image {
  background-image: url("images/brand/logo-dark-180.webp");
  background-image: image-set(
    url("images/brand/logo-dark-180.webp") 1x,
    url("images/brand/logo-dark-360.webp") 2x,
    url("images/brand/logo-dark-540.webp") 3x
  );
}
.brand .brand-image { width: 153px; }
.footer-brand .brand-image { width: 174px; }
.site-header nav { gap: clamp(16px, 1.65vw, 26px); }
.site-header nav a { transition: color .22s ease; }
.header-quote { border-radius: 999px; }

.theme-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 45px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding-inline: 11px;
  border: 1px solid var(--dialog-rim);
  border-radius: 999px;
  color: var(--nav-text);
  background: var(--control-glass);
  font-size: .85rem;
  font-weight: 730;
  transition: background-color .25s ease, color .25s ease;
}

.theme-toggle:hover, .theme-toggle:focus-visible { background: var(--control-hover); color: var(--ink); }
.theme-icon { position: relative; display: grid; width: 18px; height: 18px; place-items: center; overflow: hidden; }
.theme-icon .icon { position: absolute; width: 17px; height: 17px; transition: transform .4s var(--ease-out), opacity .27s ease; }
.theme-moon, [data-theme="dark"] .theme-sun { opacity: 0; transform: translateY(100%) rotate(35deg); }
[data-theme="dark"] .theme-moon { opacity: 1; transform: none; }

.hero { margin-top: calc(-1 * var(--header-height)); min-height: clamp(640px, 53vw, 742px); }
.hero-layout { padding-top: calc(var(--header-height) + 54px); }
.hero-photo img { object-position: center 66%; }
.hero::before {
  background: linear-gradient(90deg, #0b162aee 0%, #0b1830d9 26%, #11233b92 43%, #14243a24 64%, transparent 82%),
    linear-gradient(0deg, #0d182b94 0%, transparent 29%);
}

.button, .icon-button, .hero-preview, .floating-whatsapp, .consultation-tab {
  transition: translate .29s var(--ease-out), background-color .23s ease, border-color .23s ease, color .23s ease, box-shadow .29s var(--ease-out);
}

.button .icon, .hero-preview .preview-arrow, .floating-whatsapp .icon { transition: transform .32s var(--ease-out); }
.button:not(:disabled):hover .icon:last-child, .hero-preview:hover .preview-arrow { transform: translateX(3px); }
.button-primary:not(:disabled):hover, .button-gold:not(:disabled):hover, .hero-preview:hover {
  translate: 0 -2px;
  box-shadow: 0 7px 20px color-mix(in srgb, currentColor 10%, #0002);
}
.button:not(:disabled):active, .icon-button:active, .hero-preview:active, .floating-whatsapp:active { translate: 0 1px; }

.theme-reveal::view-transition-old(root), .theme-reveal::view-transition-new(root) {
  mix-blend-mode: normal;
  animation: none;
}
.theme-reveal::view-transition-old(root) { z-index: 1; }
.theme-reveal::view-transition-new(root) {
  z-index: 2;
  animation: reveal-theme 620ms cubic-bezier(.26, .76, .24, 1) both;
}
@keyframes reveal-theme {
  from { clip-path: circle(0 at var(--theme-x) var(--theme-y)); }
  to { clip-path: circle(var(--theme-radius) at var(--theme-x) var(--theme-y)); }
}

.theme-fading, .theme-fading body, .theme-fading :is(header, section, aside, footer, input, button), .theme-fading .site-header::before {
  transition: color .42s ease, background-color .42s ease, border-color .42s ease, transform .36s var(--ease-out);
}

.faq-item { border-bottom: 1px solid var(--rule); }
.faq-toggle {
  display: flex;
  width: 100%;
  min-height: 68px;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--heading);
  font-size: clamp(1rem, 1.4vw, 1.17rem);
  font-weight: 720;
  letter-spacing: -.02em;
  line-height: 1.22;
  text-align: left;
  transition: color .22s ease;
}
.faq-toggle:hover, .faq-toggle[aria-expanded="true"] { color: var(--accent-text); }
.faq-toggle .icon { color: var(--accent-text); transition: transform .36s var(--ease-out); }
.faq-toggle[aria-expanded="true"] .icon { transform: rotate(45deg); }
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows .38s var(--ease-out), opacity .24s ease, visibility 0s .38s;
}
.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.faq-answer > div { min-height: 0; overflow: hidden; }
.faq-answer p { max-width: 620px; padding: 0 29px 18px 0; color: var(--muted); font-weight: 480; line-height: 1.6; }
.faq-answer a, .inline-policy { color: var(--accent-text); font-weight: 700; text-decoration: none; }
.faq-answer a:hover, .inline-policy:hover { color: var(--accent-hover); }
.inline-policy { padding: 0; border: 0; background: none; }

.footer-copyright { padding-block: 7px; }
.footer-policies { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 15px; }
.footer-policies button {
  min-height: 34px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--footer-ink);
  font-size: inherit;
  font-weight: 650;
  text-align: left;
  transition: color .22s ease;
}
.footer-policies button:hover { color: var(--accent-text); }

.floating-whatsapp {
  position: fixed;
  z-index: 8;
  inset: auto max(20px, calc(env(safe-area-inset-right) + 14px)) max(20px, calc(env(safe-area-inset-bottom) + 14px)) auto;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 0;
  border-radius: 18px;
  background: #12764e;
  color: white;
  box-shadow: 0 6px 20px #062d2252, inset 0 1px #ffffff28;
}
.floating-whatsapp:hover { translate: 0 -3px; background: #0c6341; box-shadow: 0 9px 26px #062d2264; }
.floating-whatsapp .icon { width: 25px; height: 25px; }
.floating-whatsapp:hover .icon { transform: scale(1.08); }

.consultation-tab {
  position: fixed;
  z-index: 8;
  top: clamp(160px, 43vh, calc(100% - 252px));
  right: env(safe-area-inset-right);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 39px;
  padding: 13px 9px;
  border: 0;
  border-radius: 12px 0 0 12px;
  background: var(--consultation-paper);
  color: var(--consultation-ink);
  box-shadow: -5px 5px 18px #0002, inset 1px 0 #ffffff28;
  font-size: .79rem;
  font-weight: 750;
  letter-spacing: .015em;
  white-space: nowrap;
  writing-mode: vertical-rl;
}
.consultation-tab:hover { background: var(--consultation-hover); }
.consultation-tab .icon { width: 16px; height: 16px; }
.consultation-tab:focus-visible { outline-offset: -3px; }

html { scrollbar-gutter: stable; }
html:has(.glass-dialog[open]) { overflow: hidden; }
.glass-dialog {
  width: min(548px, calc(100% - 32px));
  max-height: calc(100% - 36px);
  max-height: calc(100dvh - 36px);
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--dialog-rim);
  border-radius: 24px;
  background: linear-gradient(135deg, var(--dialog-sheen), transparent 57%), var(--dialog-glass);
  backdrop-filter: blur(29px) saturate(1.3);
  -webkit-backdrop-filter: blur(29px) saturate(1.3);
  color: var(--ink);
  box-shadow: 0 26px 90px var(--dialog-shadow), inset 0 1px var(--dialog-sheen);
}
.glass-dialog::backdrop { background: #121d358c; backdrop-filter: blur(6px); }
[data-theme="dark"] .glass-dialog::backdrop { background: #040509a6; }
.glass-dialog[open] { animation: dialog-pop .39s var(--ease-out) both; }
.glass-dialog[open]::backdrop { animation: dialog-shade .28s ease both; }
.glass-dialog.is-closing { animation: dialog-dismiss .18s ease both; }
.glass-dialog.is-closing::backdrop { animation: dialog-shade .18s ease reverse both; }

@keyframes dialog-pop {
  from { opacity: 0; transform: translateY(12px) scale(.95); }
  to { opacity: 1; transform: none; }
}
@keyframes dialog-dismiss {
  to { opacity: 0; transform: translateY(5px) scale(.98); }
}
@keyframes dialog-shade { from { opacity: 0; } to { opacity: 1; } }

.dialog-panel { position: relative; display: grid; gap: 15px; padding: clamp(23px, 5vw, 36px); }
.dialog-close { position: absolute; top: 15px; right: 15px; border-radius: 50%; background: var(--control-glass); }
.dialog-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--selection-border);
  border-radius: 13px;
  background: var(--selection-paper);
  color: var(--accent-text);
}
.dialog-panel h2 { max-width: 420px; font-size: clamp(1.85rem, 6vw, 2.65rem); line-height: 1.02; letter-spacing: -.045em; }
.dialog-panel h2:focus { outline: none; }
.dialog-content { display: grid; gap: 11px; color: var(--muted-strong); line-height: 1.56; }
.dialog-content p a { color: var(--accent-text); font-weight: 700; text-decoration: none; }
.dialog-content p a:hover { color: var(--accent-hover); }
.dialog-sitemap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.dialog-sitemap a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--control-glass);
  color: var(--ink);
  font-size: .86rem;
  font-weight: 680;
  text-decoration: none;
  transition: background-color .24s ease, color .24s ease;
}
.dialog-sitemap a:hover { background: var(--selection-paper); color: var(--accent-text); }
.dialog-sitemap .icon { width: 15px; height: 15px; color: var(--accent-text); }
.consultation-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; }

.digit-wrap { position: relative; display: block; min-width: 0; }
.digit-display {
  position: absolute;
  top: 50%;
  right: 11px;
  left: 11px;
  display: none;
  transform: translateY(-50%);
  overflow: hidden;
  color: var(--ink);
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: pre;
  pointer-events: none;
}
.input-unit .digit-display { right: 59px; }
.input-unit-watts .digit-display { right: 35px; }
.digit-wrap.is-revealing > input { color: transparent; caret-color: var(--ink); }
.digit-wrap.is-revealing > .digit-display { display: block; }
.digit-enter { display: inline-block; animation: digit-rise 208ms var(--ease-out) var(--digit-delay) both; }
@keyframes digit-rise {
  from { opacity: .18; transform: translateY(.6em); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1020px) {
  .site-header nav {
    inset: calc(100% + 7px) max(13px, calc((100% - var(--shell)) / 2)) auto auto;
    width: min(340px, calc(100vw - 26px));
    padding: 9px;
    border: 1px solid var(--dialog-rim);
    border-radius: 18px;
    background: var(--dialog-glass);
    backdrop-filter: blur(24px);
    box-shadow: 0 12px 35px var(--dialog-shadow);
  }
  .site-header nav a { padding: 11px 12px; border: 0; border-radius: 8px; }
  .site-header nav a:hover, .site-header nav a:focus-visible { background: var(--selection-paper); }
  .hero { min-height: 648px; }
}

@media (max-width: 820px) {
  .hero-layout { padding-top: calc(var(--header-height) + 43px); }
  .footer-policies { grid-column: 1 / -1; grid-row: 2; justify-content: start; }
}

@media (max-width: 660px) {
  .header-inner { gap: 7px; }
  .header-actions { gap: 6px; }
  .brand .brand-image { width: clamp(100px, 29vw, 135px); }
  .footer-brand .brand-image { width: 144px; }
  .theme-label { display: none; }
  .theme-toggle { min-height: 40px; width: 40px; padding: 0; }
  .hero { min-height: clamp(680px, 126vw, 755px); }
  .hero-layout { padding-top: calc(var(--header-height) + 42px); }
  .hero { background: #0d192d; }
  .hero-photo {
    inset: auto 0 32px;
    height: auto;
    aspect-ratio: 110 / 73;
    mask-image: linear-gradient(transparent, #000 24%, #000 85%, #0000);
  }
  .hero-photo img { object-position: center; }
  .hero::before { background: linear-gradient(180deg, #0c172a82, transparent 72%, #0b172b36); }
  .hero-preview { bottom: 22px; }
  .faq-toggle { min-height: 61px; padding-right: 13px; }
  html:has(:is(input, select, textarea):focus) :is(.consultation-tab, .floating-whatsapp) {
    visibility: hidden;
  }
  .floating-whatsapp {
    right: max(13px, calc(env(safe-area-inset-right) + 8px));
    bottom: max(13px, calc(env(safe-area-inset-bottom) + 8px));
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }
  .floating-whatsapp .icon { width: 22px; height: 22px; }
  .consultation-tab {
    inset: auto env(safe-area-inset-right) max(76px, calc(env(safe-area-inset-bottom) + 74px)) auto;
    min-width: 31px;
    padding: 10px 6px;
    border-radius: 9px 0 0 9px;
    font-size: .69rem;
  }
  .consultation-tab .icon { width: 14px; height: 14px; }
  .footer-bottom { padding-bottom: max(46px, env(safe-area-inset-bottom)); }
}

@media (max-width: 380px) {
  .header-actions { gap: 5px; }
  .header-quote { padding-inline: 8px; font-size: .73rem; }
  .header-quote .icon { display: none; }
  .theme-toggle, .nav-toggle { width: 35px; }
}

@media (max-width: 320px) {
  .header-inner .brand-image { width: 95px; }
  .header-actions { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-answer { transition-delay: 0s; }
}

@media (forced-colors: active) {
  .digit-wrap.is-revealing > input { color: FieldText; }
  .digit-wrap.is-revealing > .digit-display { display: none; }
  .glass-dialog, .consultation-tab, .floating-whatsapp { border: 1px solid ButtonText; }
}