/* DeLuxe Estetica — base condivisa da sito, mini app e pannello: font, colori, bottoni, icone. */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('/assets/fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/fonts/jost-latin-wght-normal.woff2') format('woff2'); }

:root {
  --nero: #0a0a0a;
  --carbone: #121110;
  --grafite: #1a1815;
  --linea: #2b2720;
  --avorio: #f5efe3;
  --avorio-2: #ebe2cf;
  --testo: #ece6d9;
  --testo-2: #b3ab9c;
  --inchiostro: #1b1813;
  --inchiostro-2: #5b5346;
  --oro: #c9a654;
  --oro-chiaro: #e8d29a;
  --oro-scuro: #8f7230;
  --oro-testo: #7a5f22;
  --rosso: #e0796b;
  --verde: #86c79a;
  --font-titoli: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-testo: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --oro-gradiente: linear-gradient(135deg, #e3c985 0%, #c9a654 45%, #a98534 100%);
  --raggio: 14px;
  --ombra-oro: 0 10px 34px -10px rgba(201, 166, 84, .55);
  --testa: 68px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--testa) + 64px); }
body { margin: 0; background: var(--nero); color: var(--testo); font: 400 1rem/1.65 var(--font-testo); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--oro); color: #14110a; }

.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.salta { position: fixed; left: 12px; top: -80px; z-index: 200; background: var(--oro); color: #14110a; padding: 10px 16px; border-radius: 10px; font-weight: 500; text-decoration: none; transition: top .2s; }
.salta:focus { top: 12px; }

/* icone */
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico-pieno { fill: currentColor; stroke: none; }

/* bottoni */
.btn {
  --h: 50px;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: var(--h); padding: 0 1.7rem;
  border: 1px solid transparent; border-radius: 999px; font: 500 .95rem/1 var(--font-testo); letter-spacing: .05em; text-decoration: none; cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background-position .5s ease, background-color .25s ease, border-color .25s ease, color .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.98); }
.btn-oro { background: var(--oro-gradiente); background-size: 160% 100%; background-position: 0 0; color: #14110a; box-shadow: var(--ombra-oro); }
.btn-oro:hover { background-position: 100% 0; transform: translateY(-1px); box-shadow: 0 14px 40px -10px rgba(201, 166, 84, .75); }
.btn-fantasma { border-color: rgba(201, 166, 84, .55); color: var(--oro-chiaro); background: transparent; }
.btn-fantasma:hover { background: rgba(201, 166, 84, .12); border-color: var(--oro); }
.btn-scuro { background: var(--inchiostro); color: var(--avorio); }
.btn-scuro:hover { background: #2a251c; }
.btn-piccolo { --h: 40px; padding: 0 1.1rem; font-size: .85rem; }
.btn-blocco { width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .5; pointer-events: none; }

.testo-oro { color: var(--oro-chiaro); }
.muto { color: var(--testo-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}