/* Smalto (Siti web 2027 · 04). Riferimento: design-md/apple/DESIGN.md
   Mondo chiaro da studio. Luce: finestra della bottega in alto a sinistra, rgb(255,244,228) (già nei render).
   Colori: fondo latteo che segue lo smalto (Latte, Salvia, Cobalto, misurati sui render), inchiostro #231A15,
   accento terracotta #A0502D solo sul pulsante principale e su una parola dei titoli.
   Font: Instrument Serif per i titoli (ultima riga in corsivo), Space Grotesk per tutto il resto. */

:root {
  --inchiostro: 35, 26, 21;              /* #231A15 */
  --luce: 160, 80, 45;                   /* terracotta: usata dal kit per selezione e focus */
  --accento: #A0502D;
  --accento-scuro: #8C4325;
  --accento-su-blu: #E8A27C;             /* la parola accesa sulla fascia cobalto (5,0:1) */
  --cobalto: #1B3E72;
  --t40: rgba(var(--inchiostro), 0.66);  /* etichette: 4,7:1 sul fondo più scuro (brief: il 40% sul chiaro non passa) */
  --t70: rgba(var(--inchiostro), 0.74);
  --font-titoli: 'Instrument Serif', 'Times New Roman', serif;
  --font-testo: 'Space Grotesk', system-ui, sans-serif;
  --font-etichette: 'Space Grotesk', system-ui, sans-serif;
  /* fondale dei render, in alto e in basso (media/ELENCO.md) */
  --sopra: #F1E6DA;
  --sotto: #F8F0E6;
  --fondo: var(--sotto);
  color-scheme: light;
}
html[data-tema="salvia"] { --sopra: #E4E9DA; --sotto: #EEF2E6; }
html[data-tema="cobalto"] { --sopra: #DFE5EB; --sotto: #EAEEF4; }
html { background: var(--sotto); transition: background-color 0.6s ease; }
body { background-color: var(--sotto); transition: background-color 0.6s ease; font-size: clamp(16px, 1.05vw, 18px); }
main { overflow-x: clip; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { color: #fff; }

/* grana di carta, appena percettibile sul chiaro */
.grana { opacity: 0.035; mix-blend-mode: multiply; }

/* Tipografia */
.titolo { font-size: clamp(44px, 4.8vw, 86px); line-height: 1; letter-spacing: -0.012em; }
.titolo em { display: block; }
.etichetta { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; color: var(--t40); }
.testo { font-size: clamp(17px, 1.15vw, 20px); line-height: 1.5; max-width: 34ch; }
.nota-esempio { opacity: 1; color: var(--t40); font-size: 12px; letter-spacing: 0.02em; }

/* Pulsanti a pillola come Apple: piatti, il principale in terracotta */
.pulsante { border-radius: 980px; font-weight: 500; font-size: 16px; padding: 14px 26px; min-height: 48px; border-color: rgba(var(--inchiostro), 0.16); transition: transform 0.4s var(--curva-uscita), box-shadow 0.4s var(--curva-uscita), background-color 0.25s ease; }
.pulsante.primario { background: var(--accento); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 18px -8px rgba(140, 67, 37, 0.55); }
.pulsante.primario:hover { background: var(--accento-scuro); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 14px 30px -10px rgba(140, 67, 37, 0.6); }
.pulsante.primario:active { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
.pulsante.primario:focus-visible { outline-color: var(--inchiostro-solido, #231A15); }
.collegamento { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 6px; color: rgb(var(--inchiostro)); font-weight: 500; text-decoration: none; border-radius: 8px; }
.collegamento svg { width: 16px; height: 16px; transition: transform 0.4s var(--curva-uscita); }
.collegamento:hover svg { transform: translateY(3px); }
.collegamento:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 6px; }

/* Menu: pillola di vetro chiaro, regge sopra il fondo latteo e sopra la fascia cobalto */
.menu {
  position: fixed; top: 14px; left: var(--margine); right: var(--margine); z-index: 40; height: 56px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 6px 0 22px; border-radius: 999px;
  background: rgba(255, 252, 248, 0.62); border: 1px solid rgba(var(--inchiostro), 0.07);
  box-shadow: 0 10px 30px -18px rgba(35, 26, 21, 0.35);
  backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
}
.menu-marchio { font-family: var(--font-titoli); font-size: 26px; line-height: 1; color: rgb(var(--inchiostro)); text-decoration: none; justify-self: start; padding: 6px 0; }
.menu nav { display: flex; gap: 6px; }
.menu nav a { font-size: 14px; color: rgba(var(--inchiostro), 0.78); text-decoration: none; padding: 10px 14px; border-radius: 999px; transition: background-color 0.25s ease, color 0.25s ease; }
.menu nav a:hover { color: rgb(var(--inchiostro)); background: rgba(var(--inchiostro), 0.06); }
.menu .pulsante.piccolo { justify-self: end; padding: 10px 20px; min-height: 44px; font-size: 15px; }

/* --- Scene 1-4: la sequenza --------------------------------------------------------------- */
.film { --film-posizione: 64% 50%; --film-posizione-telefono: 50% 0%; }
.film-palco { background: var(--sopra); }
/* testo a sinistra della brocca: la metà sinistra del render è fondale pulito */
.film-capitolo { gap: 18px; max-width: min(47vw, 700px); padding-left: max(var(--margine), 6vw); }
.film-capitolo .titolo { font-size: clamp(48px, 5vw, 92px); }
.film-capitolo .testo { font-size: clamp(18px, 1.3vw, 22px); max-width: 32ch; }
.film-capitolo .eroe-titolo { font-size: clamp(56px, 6.2vw, 112px); line-height: 0.96; }
.banda-prima { align-content: start; }
.banda-prima .film-capitolo { padding-top: 40px; }

/* il segno dello smalto: tre pallini sotto la brocca, come il selettore di colore di Apple */
.smalti-segno {
  position: absolute; left: 64%; bottom: 7.5%; transform: translateX(-50%); z-index: 4; margin: 0; padding: 0; list-style: none;
  display: flex; gap: 22px; font-size: 13px; font-weight: 500; color: var(--t40);
}
.smalti-segno li { display: flex; align-items: center; gap: 13px; transition: color 0.6s ease; }
.smalti-segno i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(var(--inchiostro), 0.22); transition: transform 0.6s var(--curva-uscita), box-shadow 0.6s ease; }
.smalti-segno [data-smalto="latte"] i { background: #E6DCCB; }
.smalti-segno [data-smalto="salvia"] i { background: #8F9A7C; }
.smalti-segno [data-smalto="cobalto"] i { background: var(--cobalto); }
html[data-tema="latte"] .smalti-segno [data-smalto="latte"],
html[data-tema="salvia"] .smalti-segno [data-smalto="salvia"],
html[data-tema="cobalto"] .smalti-segno [data-smalto="cobalto"] { color: rgb(var(--inchiostro)); }
html[data-tema="latte"] .smalti-segno [data-smalto="latte"] i,
html[data-tema="salvia"] .smalti-segno [data-smalto="salvia"] i,
html[data-tema="cobalto"] .smalti-segno [data-smalto="cobalto"] i { transform: scale(1.35); box-shadow: inset 0 0 0 1px rgba(var(--inchiostro), 0.22), 0 0 0 4px var(--sopra), 0 0 0 5px rgba(var(--inchiostro), 0.55); }

/* --- Scena 5: come nasce (fascia piena cobalto: la pagina si tuffa nello smalto) ------------- */
.processo {
  background: var(--cobalto); color: rgba(255, 255, 255, 0.78);
  padding: clamp(110px, 16vh, 180px) max(var(--margine), 6vw) clamp(90px, 14vh, 160px);
  --t100: #fff; --t70: rgba(255, 255, 255, 0.8); --t40: rgba(255, 255, 255, 0.72);
}
.processo .titolo { color: #fff; max-width: 15ch; }
.processo .titolo .accento { color: var(--accento-su-blu); }
.processo-testa { display: grid; gap: 18px; margin-bottom: clamp(56px, 9vh, 96px); }
.processo-corpo { position: relative; }
.processo-linea { position: absolute; left: 0; right: 0; top: 92px; height: 1px; background: rgba(255, 255, 255, 0.2); }
.processo-linea i { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); }
.tappe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.tappa { position: relative; display: grid; align-content: start; gap: 10px; padding-top: 0; opacity: 0.38; transition: opacity 0.8s var(--curva-uscita); }
.tappa.accesa { opacity: 1; }
.tappa::before { content: ''; position: absolute; left: 0; top: 86px; width: 13px; height: 13px; border-radius: 50%; background: var(--cobalto); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6); transition: background-color 0.5s ease, transform 0.6s var(--curva-uscita); }
.tappa.accesa::before { background: #fff; transform: scale(1.15); }
.tappa-disegno { width: 64px; height: 64px; margin-bottom: 52px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tappa-disegno * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s cubic-bezier(0.65, 0, 0.35, 1); }
.tappa-disegno *:nth-child(2) { transition-delay: 0.15s; }
.tappa-disegno *:nth-child(3) { transition-delay: 0.3s; }
.tappa.accesa .tappa-disegno * { stroke-dashoffset: 0; }
.tappa-numero { margin: 0; font-size: clamp(44px, 4.4vw, 76px); font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.tappa-numero small { font-size: 0.32em; font-weight: 500; letter-spacing: 0.02em; margin-left: 6px; color: rgba(255, 255, 255, 0.8); }
.tappa-titolo { margin: 8px 0 0; font-family: var(--font-titoli); font-weight: 400; font-size: clamp(24px, 1.9vw, 32px); line-height: 1.1; color: #fff; }
.tappa-testo { margin: 0; font-size: 16px; line-height: 1.5; max-width: 30ch; color: rgba(255, 255, 255, 0.8); }
.processo .nota-esempio { color: rgba(255, 255, 255, 0.72); margin-top: 48px; }

/* --- Scena 6: dettagli --------------------------------------------------------------------- */
.dettagli { background: linear-gradient(180deg, #DEE4E9, #E8ECF1); padding: clamp(110px, 16vh, 170px) var(--margine) clamp(80px, 12vh, 140px); }
.dettagli-testa { display: grid; gap: 18px; justify-items: center; text-align: center; margin-bottom: clamp(16px, 4vh, 40px); }
.dettaglio { position: relative; max-width: 1240px; margin: 0 auto; aspect-ratio: 1600 / 1000; }
.dettaglio img { width: 100%; height: 100%; -webkit-mask-image: radial-gradient(70% 75% at 50% 50%, #000 72%, transparent 100%); mask-image: radial-gradient(70% 75% at 50% 50%, #000 72%, transparent 100%); }
.dettaglio svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.linea-didascalia { fill: none; stroke: rgba(35, 26, 21, 0.55); stroke-width: 1.25; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 1s cubic-bezier(0.65, 0, 0.35, 1), stroke 0.3s ease; }
.didascalia {
  position: absolute; white-space: nowrap; font-size: 15px; font-weight: 500; color: rgb(var(--inchiostro));
  padding-bottom: 8px; opacity: 0; transition: opacity 0.5s ease, color 0.3s ease;
}
.didascalia.visibile { opacity: 1; }
.didascalia[data-lato="sinistra"] { transform: translate(-100%, -100%); text-align: right; }
.didascalia[data-lato="destra"] { transform: translate(0, -100%); }
.segno-punto {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: rgb(var(--inchiostro)); font-size: 13px; font-weight: 600; line-height: 1;
  box-shadow: 0 0 0 1px rgba(var(--inchiostro), 0.18), 0 4px 12px -4px rgba(35, 26, 21, 0.35);
  transform: scale(0); transition: transform 0.6s var(--curva-uscita), background-color 0.3s ease, color 0.3s ease;
}
.segno-punto.visibile { transform: scale(1); }
.dettaglio.su-una .didascalia:not(.accesa) { color: rgba(var(--inchiostro), 0.4); }
.dettaglio.su-una .linea-didascalia:not(.accesa) { stroke: rgba(35, 26, 21, 0.18); }
.segno-punto.accesa { background: var(--cobalto); color: #fff; }
.dettagli-elenco { list-style: none; margin: clamp(24px, 4vh, 48px) auto 0; padding: 0; max-width: 1240px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); }
.dettagli-elenco li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 14px 0; border-top: 1px solid rgba(var(--inchiostro), 0.12); transition: border-color 0.3s ease; cursor: default; }
.dettagli-elenco li.accesa { border-top-color: rgb(var(--inchiostro)); }
.dettagli-elenco p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--t70); }
.dettagli-elenco strong { color: rgb(var(--inchiostro)); font-weight: 600; }
.numerino { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: rgb(var(--inchiostro)); box-shadow: inset 0 0 0 1px rgba(var(--inchiostro), 0.3); }

/* --- Scena 7: prenota (la fascia prende lo smalto scelto) ----------------------------------- */
.prenota {
  --p-fondo: #F3E9DF; background: var(--p-fondo); transition: background-color 0.6s ease;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 72px);
  padding: clamp(100px, 14vh, 160px) max(var(--margine), 6vw);
}
.prenota[data-scelto="salvia"] { --p-fondo: #E7ECDE; }
.prenota[data-scelto="cobalto"] { --p-fondo: #E4E8ED; }
.prenota-immagine { position: relative; aspect-ratio: 1; width: 100%; max-width: 640px; justify-self: center; }
.scelta-img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease;
  -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); }
.scelta-img.attiva { opacity: 1; }
.prenota-testo { display: grid; gap: 20px; max-width: 520px; }
.prenota .titolo .accento { color: var(--accento); }
.selettore { display: flex; flex-wrap: wrap; gap: 10px; }
.selettore button {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 18px 6px 8px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(var(--inchiostro), 0.12); font-size: 15px; font-weight: 500; color: rgb(var(--inchiostro));
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.4s var(--curva-uscita);
}
.selettore button:hover { background: rgba(255, 255, 255, 0.8); transform: translateY(-1px); }
.selettore button[aria-checked="true"] { background: #fff; border-color: rgb(var(--inchiostro)); }
.selettore i { width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(var(--inchiostro), 0.2); }
.selettore [data-smalto="latte"] i { background: #E6DCCB; }
.selettore [data-smalto="salvia"] i { background: #8F9A7C; }
.selettore [data-smalto="cobalto"] i { background: var(--cobalto); }
.prezzo { margin: 4px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
.prezzo-numero { font-size: clamp(40px, 3.4vw, 56px); font-weight: 500; letter-spacing: -0.03em; color: rgb(var(--inchiostro)); line-height: 1; font-variant-numeric: tabular-nums; }
.prezzo-nota { font-size: 15px; color: var(--t70); }
.modulo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.modulo input {
  min-height: 52px; padding: 0 22px; border-radius: 999px; font: inherit; font-size: 16px; color: rgb(var(--inchiostro));
  background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(var(--inchiostro), 0.2); transition: border-color 0.25s ease, background-color 0.25s ease;
}
.modulo input::placeholder { color: rgba(var(--inchiostro), 0.6); }
.modulo input:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; background: #fff; }
.modulo input[aria-invalid="true"] { border-color: var(--accento-scuro); }
.modulo .pulsante { min-height: 52px; gap: 0; }
.modulo-esito { grid-column: 1 / -1; margin: 0; min-height: 1.5em; font-size: 15px; color: rgb(var(--inchiostro)); }
.modulo-esito.errore { color: var(--accento-scuro); }

/* --- Piede ---------------------------------------------------------------------------------- */
.piede { background: #231A15; color: rgba(255, 255, 255, 0.72); padding: 40px max(var(--margine), 6vw) calc(40px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 40px; font-size: 13px; line-height: 1.6; }
.piede p { margin: 0; max-width: 72ch; }
.piede a { color: #fff; text-underline-offset: 3px; }
.piede a:focus-visible { outline-color: #fff; }

/* --- Telefono (progettato, non ristretto): brocca nel terzo alto, testo nel terzo basso ------- */
@media (max-width: 860px) {
  .menu { top: 10px; height: 52px; grid-template-columns: 1fr auto; padding-left: 20px; }
  .menu nav { display: none; }
  .film { --film-punto-testo: 0.76; }
  .film-palco { background: var(--sotto); }
  [data-film-banda] { min-height: calc(var(--peso, 1.4) * 82svh); }
  .banda-prima { min-height: calc(var(--peso, 1.4) * 82svh); }
  .film-capitolo { max-width: none; align-content: end; gap: 12px; padding: 0 var(--margine) calc(7svh + env(safe-area-inset-bottom)); }
  .banda-prima .film-capitolo { padding-top: 0; }
  .film-capitolo .titolo { font-size: clamp(36px, 10vw, 46px); }
  .film-capitolo .eroe-titolo { font-size: clamp(44px, 12.4vw, 58px); }
  .film-capitolo .testo { font-size: 16px; max-width: 36ch; }
  .smalti-segno { display: none; }
  .processo { padding: 96px var(--margine) 80px; }
  .processo-linea { top: 0; bottom: 0; left: 6px; right: auto; width: 1px; height: auto; }
  .processo-linea i { width: 100%; height: 100%; transform-origin: top; transform: scaleY(var(--p, 0)); }
  .tappe { grid-template-columns: 1fr; gap: 48px; padding-left: 40px; }
  .tappa::before { left: -40px; top: 6px; }
  .tappa-disegno { width: 52px; height: 52px; margin-bottom: 4px; }
  .dettagli { padding: 96px var(--margine) 72px; }
  .dettaglio { margin-inline: calc(var(--margine) * -1); }
  .dettaglio svg, .didascalia { display: none; }
  .dettagli-elenco { grid-template-columns: 1fr; gap: 0; margin-top: 12px; }
  .prenota { grid-template-columns: 1fr; padding: 96px var(--margine) 72px; gap: 8px; }
  .prenota-immagine { max-width: 420px; }
  .modulo { grid-template-columns: 1fr; }
  .selettore { gap: 8px; flex-wrap: nowrap; }
  .selettore button { padding: 6px 14px 6px 6px; gap: 8px; font-size: 14px; }
  .selettore i { width: 30px; height: 30px; }
  .modulo .pulsante { justify-content: center; }
}
@media (max-width: 1100px) and (min-width: 861px) {
  .tappe { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
  .processo-linea { display: none; }
  .tappa::before { display: none; }
  .tappa-disegno { margin-bottom: 8px; }
  .dettagli-elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .tappa { opacity: 1; }
  .tappa-disegno * { stroke-dashoffset: 0; }
  .didascalia { opacity: 1; }
  .segno-punto { transform: none; }
}