/* Sorriso Sicuro — "porcellana e ottone"
   Clinica privata, non turismo low cost. Verde notte per i momenti forti,
   porcellana per la lettura, ottone come unica voce cromatica.
   Il lusso qui e lo spazio e la tipografia, non gli effetti. */

:root {
  --notte:       #0F1D19;
  --notte-2:     #172923;
  --porcellana:  #F4F3F0;
  --bianco:      #FFFFFF;
  --ottone:      #A8874E;
  --ottone-alt:  #D6B983;
  --salvia:      #94A89D;
  --grafite:     #56615B;
  --linea:       #E0DFD9;
  --linea-scura: rgba(214, 185, 131, .22);

  --display: "Bodoni Moda", Didot, Georgia, serif;
  --testo:   "Instrument Sans", system-ui, -apple-system, sans-serif;

  --misura: 36rem;
  --largo:  72rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --ritmo:  clamp(3.5rem, 9vw, 7rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--porcellana);
  color: var(--notte);
  font-family: var(--testo);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--largo); margin-inline: auto; padding-inline: var(--gutter); }
.prosa { max-width: var(--misura); }

a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linea); transition: border-color .25s, color .25s; }
a:hover { border-color: var(--ottone); color: var(--ottone); }
:focus-visible { outline: 2px solid var(--ottone); outline-offset: 4px; }

/* ——— tipografia ——— */

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.06; letter-spacing: -.01em; margin: 0 0 .45em; }
h1 { font-size: clamp(2.6rem, 8.5vw, 5.25rem); }
h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin-top: 1.6em; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); margin-top: 2em; }
p  { margin: 0 0 1.2em; max-width: var(--misura); }
strong { font-weight: 600; }

.campo {
  display: block;
  font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ottone); margin-bottom: 1.4em;
}
.campo::after { content: ""; display: block; width: 2.5rem; height: 1px; background: currentColor; margin-top: .7em; opacity: .5; }

/* ——— testata ——— */

.testata {
  position: sticky; top: 0; z-index: 20;
  background: rgba(244, 243, 240, .88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--linea);
}
.testata .wrap { display: flex; align-items: center; gap: 2rem; padding-block: 1.1rem; flex-wrap: wrap; }
.marchio { font-family: var(--display); font-weight: 500; font-size: 1.35rem; letter-spacing: -.01em; border: 0; }
.marchio:hover { color: var(--ottone); }
.nav { display: flex; gap: 1.6rem; margin-left: auto; flex-wrap: wrap; }
.nav a { font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--grafite); border: 0; padding-block: .2rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--notte); }
.nav a[aria-current="page"] { border-bottom: 1px solid var(--ottone); }

/* ——— apertura scura a tutta larghezza ——— */

.ero {
  background: var(--notte); color: var(--porcellana);
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--gutter), calc(50vw - var(--largo) / 2));
  padding-block: clamp(4.5rem, 14vw, 9rem) clamp(4rem, 11vw, 7rem);
  margin-bottom: var(--ritmo);
  position: relative; overflow: hidden;
}
.ero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ottone-alt) 18%, var(--ottone-alt) 82%, transparent);
  opacity: .4;
}
.ero .campo { color: var(--ottone-alt); }
.ero h1 { max-width: 15ch; }
.ero h1 em { font-style: italic; color: var(--ottone-alt); }
.ero p { color: var(--salvia); font-size: 1.15rem; max-width: 42ch; }
.ero .azioni { margin-top: 2.6rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* ——— azioni ——— */

.azione {
  display: inline-block; border: 1px solid var(--notte); background: var(--notte); color: var(--porcellana);
  font-family: var(--testo); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: 1.05rem 2.1rem; cursor: pointer; transition: background .3s, color .3s, border-color .3s;
}
.azione:hover { background: var(--ottone); border-color: var(--ottone); color: var(--notte); }
.azione.secondaria { background: transparent; color: currentColor; border-color: currentColor; opacity: .7; }
.azione.secondaria:hover { background: transparent; border-color: var(--ottone-alt); color: var(--ottone-alt); opacity: 1; }
.ero .azione { border-color: var(--porcellana); background: var(--porcellana); color: var(--notte); }
.ero .azione:hover { background: var(--ottone-alt); border-color: var(--ottone-alt); }
.ero .azione.secondaria { background: transparent; color: var(--porcellana); border-color: rgba(244,243,240,.4); }

/* ——— la scheda: elemento firma ——— */

.scheda {
  background: var(--bianco); border: 1px solid var(--linea); border-top: 2px solid var(--ottone);
  margin: 2.5rem 0 var(--ritmo); max-width: 46rem;
}
.scheda-intestazione {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 1.8rem; border-bottom: 1px solid var(--linea);
  font-size: .65rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--grafite);
}
.scheda-intestazione span:last-child { color: var(--ottone); }
.scheda-righe { margin: 0; padding: 0; }
.scheda-riga { display: grid; grid-template-columns: 12rem 1fr; gap: 1.5rem; padding: 1.35rem 1.8rem; border-bottom: 1px solid var(--linea); }
.scheda-riga:last-child { border-bottom: 0; }
.scheda-riga dt { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--grafite); padding-top: .45em; }
.scheda-riga dd { margin: 0; }
@media (max-width: 40rem) {
  .scheda-riga { grid-template-columns: 1fr; gap: .35rem; padding-inline: 1.3rem; }
  .scheda-intestazione { padding-inline: 1.3rem; }
}

.prezzo { font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 7vw, 3.4rem); line-height: 1; letter-spacing: -.02em; display: block; }
.prezzo-it { display: inline-block; margin-top: .9rem; font-size: .82rem; color: var(--grafite); text-decoration: line-through; text-decoration-color: var(--ottone); }
.delta { display: inline-block; margin-left: .9rem; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ottone); }

/* ——— listino ——— */

table.listino { width: 100%; border-collapse: collapse; margin: 2.5rem 0 var(--ritmo); }
table.listino th { text-align: left; padding: 0 1rem 1rem 0; border-bottom: 1px solid var(--notte); font-size: .65rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--grafite); }
table.listino td { padding: 1.35rem 1rem 1.35rem 0; border-bottom: 1px solid var(--linea); vertical-align: baseline; }
table.listino tr:hover td { background: rgba(168, 135, 78, .05); }
table.listino td.num { text-align: right; white-space: nowrap; font-family: var(--display); font-size: 1.35rem; padding-right: 0; }
table.listino td.num.it { color: var(--grafite); font-size: 1rem; text-decoration: line-through; text-decoration-color: var(--ottone); }
table.listino td:last-child { color: var(--ottone); font-family: var(--testo); font-size: .78rem; font-weight: 600; letter-spacing: .1em; }
table.listino a { border: 0; font-size: .76rem; font-weight: 600; letter-spacing: .12em; color: var(--ottone); }
@media (max-width: 40rem) {
  table.listino th:first-child, table.listino td:first-child { display: none; }
  table.listino td.num { font-size: 1.15rem; }
}

/* ——— indici ——— */

.indice { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.5rem; margin: 2.5rem 0 var(--ritmo); }
.indice a {
  background: var(--bianco); border: 1px solid var(--linea); border-top: 1px solid var(--ottone);
  padding: 2rem 1.8rem 1.8rem; display: block;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s;
}
.indice a:hover { transform: translateY(-4px); border-color: var(--ottone); color: inherit; }
.indice strong { font-family: var(--display); font-weight: 400; font-size: 1.5rem; line-height: 1.15; display: block; margin-bottom: .9rem; }
.indice span { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--grafite); }

/* ——— fasi ——— */

ol.fasi { list-style: none; counter-reset: fase; padding: 0; margin: 2.5rem 0 var(--ritmo); max-width: 46rem; }
ol.fasi li { counter-increment: fase; position: relative; padding: 1.6rem 0 1.6rem 5rem; border-bottom: 1px solid var(--linea); }
ol.fasi li:last-child { border-bottom: 0; }
ol.fasi li::before {
  content: counter(fase, decimal-leading-zero);
  position: absolute; left: 0; top: 1.5rem;
  font-family: var(--display); font-size: 1.6rem; color: var(--ottone); line-height: 1;
}
@media (max-width: 34rem) { ol.fasi li { padding-left: 3.4rem; } }

/* ——— nota ——— */

.nota { background: var(--bianco); border: 1px solid var(--linea); border-left: 2px solid var(--ottone); padding: 1.8rem 2rem; margin: 2.5rem 0; max-width: 46rem; font-size: .96rem; }
.nota strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.25rem; margin-bottom: .5rem; }
.nota p:last-child { margin-bottom: 0; }

/* ——— faq ——— */

details.faq { border-bottom: 1px solid var(--linea); max-width: 46rem; }
details.faq summary { cursor: pointer; list-style: none; padding: 1.5rem 3rem 1.5rem 0; position: relative; font-family: var(--display); font-size: 1.3rem; line-height: 1.3; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: ""; position: absolute; right: .6rem; top: 2.25rem; width: 13px; height: 1px; background: var(--ottone); }
details.faq summary::before { content: ""; position: absolute; right: 1.2rem; top: 1.7rem; width: 1px; height: 13px; background: var(--ottone); transition: transform .3s, opacity .3s; }
details.faq[open] summary::before { transform: scaleY(0); opacity: 0; }
details.faq p { padding-bottom: 1.5rem; margin: 0; color: var(--grafite); }

/* ——— briciole ——— */

.briciole { padding-block: 2rem .5rem; font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--grafite); }
.briciole a { border: 0; color: var(--grafite); }
.briciole a:hover { color: var(--ottone); }

/* ——— modulo: pannello scuro ——— */

form.preventivo {
  background: var(--notte); color: var(--porcellana);
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--gutter), calc(50vw - var(--largo) / 2));
  padding-block: clamp(3.5rem, 9vw, 6rem);
  margin-top: var(--ritmo); margin-bottom: 0;
}
form.preventivo > * { max-width: 46rem; }
form.preventivo .campo { color: var(--ottone-alt); }
form.preventivo h2 { margin-top: 0; }
form.preventivo > p { color: var(--salvia); }
form.preventivo label { display: block; margin-bottom: 1.6rem; max-width: 34rem; }
form.preventivo label .campo { margin-bottom: .5rem; color: var(--salvia); }
form.preventivo label .campo::after { display: none; }
form.preventivo input, form.preventivo select, form.preventivo textarea {
  width: 100%; font-family: var(--testo); font-size: 1rem; color: var(--porcellana);
  background: transparent; border: 0; border-bottom: 1px solid var(--linea-scura);
  padding: .7rem 0; border-radius: 0; transition: border-color .3s;
}
form.preventivo select option { background: var(--notte); color: var(--porcellana); }
form.preventivo input:focus, form.preventivo select:focus, form.preventivo textarea:focus { outline: 0; border-bottom-color: var(--ottone-alt); }
form.preventivo .consenso { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; font-size: .85rem; color: var(--salvia); max-width: 40rem; margin: 2rem 0; }
form.preventivo .consenso input { width: 1.1rem; height: 1.1rem; accent-color: var(--ottone-alt); margin-top: .35rem; }
form.preventivo .consenso a { color: var(--ottone-alt); border-bottom-color: var(--linea-scura); }
form.preventivo button.azione { background: var(--porcellana); border-color: var(--porcellana); color: var(--notte); }
form.preventivo button.azione:hover { background: var(--ottone-alt); border-color: var(--ottone-alt); }
form.preventivo button.azione:disabled { opacity: .45; cursor: default; }
.esito { font-size: .8rem; letter-spacing: .06em; padding-top: 1rem; color: var(--salvia); }
.esito[data-stato="errore"] { color: var(--ottone-alt); }
.esito[data-stato="ok"] { color: var(--porcellana); }

/* ——— piede ——— */

.piede { background: var(--notte); color: var(--salvia); padding-block: var(--ritmo) 3.5rem; font-size: .88rem; }
.piede .colonne { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 3rem; }
.piede .campo { color: var(--ottone-alt); margin-bottom: 1.2rem; }
.piede ul { list-style: none; padding: 0; margin: 0; }
.piede li { margin-bottom: .55rem; }
.piede a { color: var(--salvia); border: 0; }
.piede a:hover { color: var(--ottone-alt); }
.identificazione { font-size: .7rem; line-height: 1.85; color: #6E8178; border-top: 1px solid var(--linea-scura); margin-top: 3.5rem; padding-top: 2rem; max-width: 62rem; }

/* ——— rivelazione allo scorrimento ——— */

[data-rivela] { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
[data-rivela].visibile { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-rivela] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .indice a:hover { transform: none; }
}

.salta { position: absolute; left: -9999px; }
.salta:focus { left: var(--gutter); top: .6rem; background: var(--notte); color: var(--porcellana); padding: .7rem 1.1rem; z-index: 30; }

/* ——— figure tecniche ——— */

.figura {
  margin: 3rem 0 var(--ritmo);
  max-width: 46rem;
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-top: 1px solid var(--ottone);
  padding: 2.5rem 2rem 1.5rem;
}
.figura .illustrazione {
  display: block; width: 100%; height: auto; max-width: 30rem; margin-inline: auto;
  color: var(--ottone);
}
.figura figcaption {
  margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--linea);
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--grafite); text-align: center;
}

/* spazio per le fotografie reali, quando arriveranno */
.figura img { display: block; width: 100%; height: auto; }
.figura.piena { padding: 0; }
.figura.piena figcaption { padding: 1.2rem 1.5rem; margin-top: 0; border-top: 1px solid var(--linea); text-align: left; }

/* ——— marchio nella testata ——— */

.marchio { display: inline-flex; align-items: center; gap: .7rem; }
.marchio .marchio-segno { width: 1.6rem; height: 1.6rem; color: var(--ottone); flex: none; transition: color .25s; }
.marchio:hover .marchio-segno { color: var(--notte); }
.marchio span { line-height: 1; }

/* ——— marchio: filigrana nell'apertura ——— */

.ero .filigrana {
  position: absolute; right: -8%; top: 50%; transform: translateY(-50%);
  width: min(38rem, 62%); color: var(--ottone-alt); opacity: .09;
  pointer-events: none; z-index: 0;
}
.ero .filigrana svg { display: block; width: 100%; height: auto; }
.ero > *:not(.filigrana) { position: relative; z-index: 1; }
@media (max-width: 52rem) {
  .ero .filigrana { right: -22%; top: auto; bottom: -6%; transform: none; width: 24rem; opacity: .07; }
}

/* ——— marchio nel piede ——— */

.piede-marchio {
  display: flex; align-items: center; gap: .9rem;
  padding-bottom: 2.2rem; margin-bottom: 3rem;
  border-bottom: 1px solid var(--linea-scura);
}
.piede-marchio svg { width: 2.1rem; height: 2.1rem; color: var(--ottone-alt); flex: none; }
.piede-marchio span { font-family: var(--display); font-size: 1.5rem; color: var(--porcellana); line-height: 1; }

/* ——— garanzia col sigillo ——— */

.garanzia {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 2.5rem; align-items: start;
  max-width: 46rem; margin: 1.5rem 0 var(--ritmo);
  background: var(--bianco); border: 1px solid var(--linea); border-top: 1px solid var(--ottone);
  padding: 2.2rem 2rem;
}
.garanzia-sigillo { color: var(--ottone); }
.garanzia-sigillo svg { display: block; width: 100%; height: auto; }
.garanzia p:last-child { margin-bottom: 0; font-size: .9rem; color: var(--grafite); }
@media (max-width: 40rem) {
  .garanzia { grid-template-columns: 1fr; gap: 1.5rem; }
  .garanzia-sigillo { width: 5.5rem; }
}