:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-quick: 180ms;
  --motion-soft: 360ms;
}
main {background: radial-gradient(ellipse 600px 230px at 18% 0, #d4af3709, transparent 75%);}
.page-heading .eyebrow {display: flex; align-items: center; gap: 11px;}
.page-heading .eyebrow::before {content: ''; width: 23px; height: 1px; background: var(--gold); flex: none;}
#page-cliente h1 em {color: #eee3c1;}
button, .site-link, .download-link {
  transition: color var(--motion-quick), background var(--motion-quick), border-color var(--motion-quick), box-shadow var(--motion-soft), transform var(--motion-quick) var(--motion-ease);
}
.primary, .secondary, .finish, .site-link {position: relative; overflow: hidden; isolation: isolate;}
.primary {background: linear-gradient(110deg, #dbb84b, #d4af37 55%, #cfa431); box-shadow: 0 4px 14px #d4af370a;}
.primary::before {
  content: ''; position: absolute; inset: -50% auto -50% -85%; width: 50%;
  background: linear-gradient(90deg, transparent, #fff9e838, transparent);
  transform: skewX(-20deg); pointer-events: none;
}
.primary > span {transition: transform 260ms var(--motion-ease);}
.primary:focus-visible {box-shadow: 0 0 0 4px #d4af371c, 0 8px 24px #d4af3720;}
.secondary:focus-visible, .finish:focus-visible {border-color: var(--gold-soft);}
.nav {position: relative;}
.nav::after, .host-nav a::after {content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--motion-ease);}
.nav.active {border-bottom-color: transparent;}
.nav.active::after {transform: scaleX(1);}
.host-nav a {position: relative; padding: 6px 0;}
.host-nav a::after {bottom: 1px;}
.steps, .preview-tabs {position: relative; isolation: isolate;}
.steps button, .preview-tabs button {position: relative; z-index: 1;}
.steps.motion-indicator::after {content: ''; position: absolute; bottom: 0; left: 0; width: var(--indicator-width, 0px); height: 2px; background: linear-gradient(90deg, #8d722b, #e4c975); transform: translateX(var(--indicator-left, 0px)); transition: width var(--motion-soft) var(--motion-ease), transform var(--motion-soft) var(--motion-ease); pointer-events: none;}
.steps.motion-indicator button.selected {box-shadow: none;}
.preview-tabs.motion-indicator::before {content: ''; position: absolute; top: 5px; bottom: 5px; left: 0; width: var(--indicator-width, 0px); background: linear-gradient(110deg, #353020, #24231d); border: 1px solid #786337; border-radius: 3px; transform: translateX(var(--indicator-left, 0px)); transition: width var(--motion-soft) var(--motion-ease), transform var(--motion-soft) var(--motion-ease); pointer-events: none;}
.preview-tabs.motion-indicator button.active {background: transparent; border-color: transparent;}
.concept-stage {box-shadow: 0 15px 55px #0003; transition: border-color var(--motion-soft), box-shadow var(--motion-soft);}
.concept-open > img {transition: transform 650ms var(--motion-ease);}
.concept-open:focus-visible {outline-offset: -5px;}
.expand-hint {transition: background var(--motion-quick), border-color var(--motion-quick), transform var(--motion-soft) var(--motion-ease);}
.concept-thumbnails button {overflow: hidden; transition: border-color 200ms, background 200ms, transform 260ms var(--motion-ease), box-shadow 260ms;}
.concept-thumbnails img {transition: filter 260ms;}
.concept-thumbnails button.active {box-shadow: 0 0 0 1px #d4af3724, 0 4px 20px #d4af370b;}
.configuration-card {box-shadow: 0 14px 45px #0002; transition: border-color var(--motion-soft), box-shadow var(--motion-soft);}
.configuration-card, .preview-column {scroll-margin-top: 22px;}
.step-back {display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 0; margin: -5px 0 18px; border: 0; background: transparent; color: var(--gold-soft); font-size: 12px;}
.step-back > span {transition: transform var(--motion-quick) var(--motion-ease);}
.finish i {transition: transform var(--motion-soft) var(--motion-ease), box-shadow var(--motion-soft);}
.finish.selected i {box-shadow: inset 0 0 0 1px #ffffff30, 0 0 15px #d4af3717;}
.client-guide article {position: relative; padding: 20px 18px; border: 1px solid #292a2d; border-radius: 5px; background: linear-gradient(145deg, #181919, #111214); transition: border-color var(--motion-soft), box-shadow var(--motion-soft), transform var(--motion-soft) var(--motion-ease);}
.client-guide article > span {color: #d6bc77;}
.client-guide h3 {line-height: 1.6;}
.gallery-dialog[open], #change-dialog[open] {animation: dialog-arrive 280ms var(--motion-ease) both;}
dialog[open]::backdrop {animation: backdrop-arrive 240ms ease-out both;}
.toast:not([hidden]) {animation: toast-arrive 240ms var(--motion-ease) both;}
.motion-ripple {position: absolute; border-radius: 50%; pointer-events: none; background: #fff8d94d; opacity: 0; z-index: 2;}
.motion-control {display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 8px 12px; margin-top: 6px; border: 1px solid #3b3a33; border-radius: 4px; background: transparent; color: #bfbdb3; font-size: 11px; text-align: left;}
.motion-control > span {width: 9px; height: 9px; border: 1px solid #9a9380; border-radius: 50%; flex: none;}
.motion-control[aria-pressed="true"] {color: var(--gold-soft); border-color: #8a753c; background: #d4af3708;}
.motion-control[aria-pressed="true"] > span {background: var(--gold); border-color: var(--gold);}
.motion-control:disabled {cursor: default;}
.primary:active, .secondary:active, .finish:active, .site-link:active, .concept-thumbnails button:active {transform: scale(.98);}
@keyframes button-sheen {to {left: 140%;}}
@keyframes dialog-arrive {from {opacity: 0; transform: translateY(15px) scale(.975);} to {opacity: 1; transform: none;}}
@keyframes backdrop-arrive {from {opacity: 0;} to {opacity: 1;}}
@keyframes toast-arrive {from {opacity: 0; transform: translate(-50%, 12px);} to {opacity: 1; transform: translate(-50%, 0);}}
@media (hover: hover) and (pointer: fine) {
  .primary:hover {background: linear-gradient(110deg, #e7c967, #dfba45 60%, #d5ad38); transform: translateY(-2px); box-shadow: 0 8px 28px #d4af3723;}
  .primary:hover::before, .primary:focus-visible::before {animation: button-sheen 600ms var(--motion-ease) both;}
  .primary:hover > span {transform: translateX(4px);}
  .step-back:hover > span {transform: translateX(-3px);}
  .secondary:hover, .site-link:hover {transform: translateY(-2px); border-color: #a48a43; box-shadow: 0 6px 20px #0002;}
  .finish:hover {transform: translateY(-2px); border-color: #a48a43; background: #d4af370b;}
  .finish:hover i {transform: scale(1.1); box-shadow: inset 0 0 0 1px #ffffff30, 0 0 20px #d4af3725;}
  .nav:hover::after, .host-nav a:hover::after {transform: scaleX(1);}
  .concept-open:hover > img {transform: scale(1.018);}
  .concept-open:hover .expand-hint {transform: translateY(-3px); border-color: #d4af3770; background: #25231bef;}
  .concept-stage:hover {border-color: #8d763b; box-shadow: 0 18px 55px #0004, 0 0 25px #d4af3708;}
  .concept-thumbnails button:hover {transform: translateY(-3px); border-color: #ad9148; box-shadow: 0 8px 22px #0003;}
  .concept-thumbnails button:hover img {filter: brightness(1.06);}
  .client-guide article:hover {transform: translateY(-4px); border-color: #655831; box-shadow: 0 10px 28px #0002;}
  .primary:active, .secondary:active, .finish:active, .site-link:active, .concept-thumbnails button:active {transform: translateY(0) scale(.98);}
}
@media (max-width: 720px) {
  .page-heading .eyebrow {gap: 8px; font-size: 10px;}
  .page-heading .eyebrow::before {width: 16px;}
  .client-guide article {padding: 20px;}
}
@media (prefers-reduced-motion: reduce), print {
  *, *::before, *::after {animation: none!important; transition: none!important; scroll-behavior: auto!important;}
  .primary:hover, .secondary:hover, .finish:hover, .site-link:hover, .concept-thumbnails button:hover, .client-guide article:hover,
  .primary:active, .secondary:active, .finish:active, .site-link:active, .concept-thumbnails button:active,
  .concept-open:hover > img, .concept-open:hover .expand-hint, .finish:hover i, .primary:hover > span, .step-back:hover > span {transform: none!important;}
  .motion-ripple {display: none!important;}
}
@media print {
  main {background: transparent;}
  .concept-stage, .configuration-card, .client-guide article {box-shadow: none;}
}
.motion-reduced *, .motion-reduced *::before, .motion-reduced *::after {animation: none!important; transition: none!important; scroll-behavior: auto!important;}
.motion-reduced .primary:hover, .motion-reduced .secondary:hover, .motion-reduced .finish:hover, .motion-reduced .site-link:hover, .motion-reduced .concept-thumbnails button:hover, .motion-reduced .client-guide article:hover,
.motion-reduced .primary:active, .motion-reduced .secondary:active, .motion-reduced .finish:active, .motion-reduced .site-link:active, .motion-reduced .concept-thumbnails button:active,
.motion-reduced .concept-open:hover > img, .motion-reduced .concept-open:hover .expand-hint, .motion-reduced .finish:hover i, .motion-reduced .primary:hover > span, .motion-reduced .step-back:hover > span {transform: none!important;}
.motion-reduced .motion-ripple {display: none!important;}