/* ═══════════════════════════════════════════════════════════════════════
   ANNA DIAMONDS — «IL BANCO»
   Concept in Sito Web Codice/CONCEPT.md
   Caratteri serviti in locale: nessuna chiamata esterna, nessun cookie.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · I caratteri ─────────────────────────────────────────────────── */
@font-face{font-family:"Caslon";src:url("../fonts/libre-caslon-text-400-latin.woff2")format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Caslon";src:url("../fonts/libre-caslon-text-400-italic-latin.woff2")format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Caslon";src:url("../fonts/libre-caslon-text-700-latin.woff2")format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url("../fonts/ibm-plex-sans-400-latin.woff2")format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url("../fonts/ibm-plex-sans-600-latin.woff2")format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"PlexMono";src:url("../fonts/ibm-plex-mono-400-latin.woff2")format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PlexMono";src:url("../fonts/ibm-plex-mono-500-latin.woff2")format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ── 2 · I token ─────────────────────────────────────────────────────── */
:root{
  /* la palette: NON nero e oro. Il piano di un banco da lavoro. */
  --colore-fondo:#F2EFE9;
  --colore-fondo-alt:#E7E2D9;
  --colore-fondo-scuro:#191914;
  --colore-testo:#14140F;
  --colore-testo-tenue:#5B5A52;
  --colore-testo-chiaro:#F2EFE9;
  --colore-accento:#2E4A52;
  --colore-accento-vivo:#3D626D;
  --colore-oro:#8A6A2F;          /* SOLO dentro il disegno del punzone */
  --colore-bordo:#CFC8BB;
  --colore-bordo-tenue:#DFD9CE;

  --font-titolo:"Caslon",Georgia,"Times New Roman",serif;
  --font-testo:"Plex",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-dati:"PlexMono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --passo-1:.25rem; --passo-2:.5rem;  --passo-3:.75rem; --passo-4:1rem;
  --passo-5:1.5rem; --passo-6:2.5rem; --passo-7:4rem;   --passo-8:6.5rem;

  --raggio-s:2px; --raggio-m:4px;
  --ombra-card:0 1px 2px rgba(20,20,15,.05),0 8px 24px -12px rgba(20,20,15,.18);
  --ombra-sollevata:0 2px 6px rgba(20,20,15,.08),0 24px 48px -20px rgba(20,20,15,.28);

  --durata-veloce:160ms; --durata-media:420ms; --durata-lenta:800ms;
  --easing-standard:cubic-bezier(.22,.61,.36,1);

  --misura:min(1180px,100% - 2.5rem);
  --sx:60%;                       /* il rapporto del banco, ridichiarato per sezione */
}

/* ── 3 · Reset ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--colore-fondo);color:var(--colore-testo);
  font-family:var(--font-testo);font-size:1.0625rem;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--colore-accento);outline-offset:3px;border-radius:var(--raggio-s)}
.solo-lettori{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── 4 · Tipografia ──────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--font-titolo);font-weight:400;line-height:1.14;margin:0 0 var(--passo-4);letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,1.35rem + 3.35vw,3.75rem)}
h2{font-size:clamp(1.6rem,1.15rem + 2vw,2.5rem)}
h3{font-size:clamp(1.15rem,1rem + .7vw,1.5rem)}
h4{font-size:1.0625rem;font-family:var(--font-testo);font-weight:600}
p{margin:0 0 var(--passo-4);max-width:62ch}
.occhiello{font-family:var(--font-dati);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--colore-testo-tenue);margin:0 0 var(--passo-3)}
.guida{font-size:1.1875rem;line-height:1.58;color:var(--colore-testo-tenue);max-width:56ch}
.dato{font-family:var(--font-dati);font-size:.9375rem;font-variant-numeric:tabular-nums}
.tenue{color:var(--colore-testo-tenue)}

/* ── 5 · IL BANCO — lo scheletro ─────────────────────────────────────── */
.banco{
  display:grid;grid-template-columns:var(--sx) 1fr;
  gap:clamp(var(--passo-5),4vw,var(--passo-7));
  width:var(--misura);margin-inline:auto;
  padding-block:clamp(var(--passo-6),7vw,var(--passo-8));
  align-items:start;
}
.banco--esce{direction:rtl}
.banco--esce>*{direction:ltr}
.banco__lato{min-width:0}
.banco+.banco{border-top:1px solid var(--colore-bordo-tenue)}
.fascia-alt{background:var(--colore-fondo-alt)}
.fascia-scura{background:var(--colore-fondo-scuro);color:var(--colore-testo-chiaro)}
.fascia-scura .guida,.fascia-scura .tenue,.fascia-scura .occhiello{color:#B9B4A6}
.fascia-scura a{color:#DCC9A0}

@media (max-width:900px){
  .banco{grid-template-columns:1fr;gap:var(--passo-5)}
  .banco--esce{direction:ltr}
}

/* il filetto che dice da che lato del banco sei — solo da telefono */
.filetto{position:fixed;left:0;top:0;bottom:0;width:3px;z-index:40;pointer-events:none;display:none}
.filetto::after{
  content:"";position:absolute;left:0;width:100%;height:22vh;
  background:var(--colore-accento);transform:translateY(var(--posizione,20vh));
  transition:transform var(--durata-lenta) var(--easing-standard),background var(--durata-media) linear;
}
.filetto[data-lato="esce"]::after{background:var(--colore-oro)}
@media (max-width:900px){.filetto{display:block}}
@media (prefers-reduced-motion:reduce){.filetto::after{transition:none}}

/* ── 6 · Navigazione ─────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--colore-fondo) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--colore-bordo-tenue);
}
.nav__interno{width:var(--misura);margin-inline:auto;display:flex;align-items:center;gap:var(--passo-5);min-height:64px}
.marchio{font-family:var(--font-titolo);font-size:1.0625rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.marchio span{color:var(--colore-testo-tenue)}
.nav__voci{display:flex;gap:var(--passo-5);margin-left:auto;list-style:none;padding:0;margin-block:0;align-items:center}
.nav__voci a{text-decoration:none;font-size:.9375rem;padding-block:.4rem;border-bottom:1px solid transparent;transition:border-color var(--durata-veloce) linear}
.nav__voci a:hover,.nav__voci a[aria-current="page"]{border-bottom-color:var(--colore-testo)}
.nav__apri{display:none;margin-left:auto;background:none;border:1px solid var(--colore-bordo);border-radius:var(--raggio-m);padding:.45rem .7rem;cursor:pointer}
@media (max-width:900px){
  .nav__apri{display:block}
  .nav__voci{position:fixed;inset:64px 0 auto;background:var(--colore-fondo);flex-direction:column;align-items:stretch;gap:0;padding:var(--passo-4);border-bottom:1px solid var(--colore-bordo);margin-left:0}
  .nav__voci a{padding:var(--passo-3) 0;border-bottom:1px solid var(--colore-bordo-tenue)}
  .nav__voci{display:none}
  .nav__voci.aperto{display:flex}
}

/* ── 7 · Pulsanti ────────────────────────────────────────────────────── */
.bottone{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.45rem;border-radius:var(--raggio-m);border:1px solid var(--colore-testo);
  background:var(--colore-testo);color:var(--colore-fondo);
  font-size:.9375rem;font-weight:600;text-decoration:none;cursor:pointer;
  transition:transform var(--durata-veloce) var(--easing-standard),background var(--durata-veloce) linear;
}
.bottone:hover{transform:translateY(-2px);background:var(--colore-accento);border-color:var(--colore-accento)}
.bottone--secondario{background:transparent;color:var(--colore-testo);border-color:var(--colore-bordo)}
.bottone--secondario:hover{background:transparent;color:var(--colore-testo);border-color:var(--colore-testo)}
.fascia-scura .bottone{background:var(--colore-fondo);color:var(--colore-testo);border-color:var(--colore-fondo)}
.fascia-scura .bottone--secondario{background:transparent;color:var(--colore-testo-chiaro);border-color:#4A4A40}
.azioni{display:flex;flex-wrap:wrap;gap:var(--passo-3);margin-top:var(--passo-5)}
@media (prefers-reduced-motion:reduce){.bottone:hover{transform:none}}

/* ── 8 · Apertura ────────────────────────────────────────────────────── */
.apertura{min-height:100svh;align-items:center;padding-block:var(--passo-6)}
@supports not (height:100svh){.apertura{min-height:100vh}}
@media (max-width:900px){.apertura{min-height:auto;padding-block:var(--passo-6) var(--passo-7)}}
.apertura h1{max-width:19ch;margin-bottom:var(--passo-5)}
.apertura .guida{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem)}
.registro{font-family:var(--font-dati);font-size:.8125rem;color:var(--colore-testo-tenue);margin-top:var(--passo-6);letter-spacing:.02em}

/* ── 9 · Elenchi e passaggi ──────────────────────────────────────────── */
.passaggi{list-style:none;padding:0;margin:0;counter-reset:p;display:grid;gap:var(--passo-4)}
.passaggi li{counter-increment:p;display:grid;grid-template-columns:2.1rem 1fr;gap:var(--passo-3);align-items:start}
.passaggi li::before{
  content:counter(p);font-family:var(--font-dati);font-size:.8125rem;
  width:2.1rem;height:2.1rem;display:grid;place-items:center;
  border:1px solid var(--colore-bordo);border-radius:50%;color:var(--colore-testo-tenue);
}
.passaggi li:last-child::before{border-color:var(--colore-testo);color:var(--colore-testo);font-weight:500}
.passaggi p{margin:0}
.elenco{list-style:none;padding:0;margin:0 0 var(--passo-4);display:grid;gap:var(--passo-3)}
.elenco li{display:grid;grid-template-columns:.65rem 1fr;gap:var(--passo-3);align-items:baseline}
.elenco li::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--colore-accento);transform:translateY(-.15em)}

/* i tre numeri */
.numeri{display:grid;gap:var(--passo-4);margin:0}
.numeri div{border-left:2px solid var(--colore-bordo);padding-left:var(--passo-4)}
.numeri div:last-child{border-left-color:var(--colore-accento)}
.numeri dt{font-family:var(--font-dati);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--colore-testo-tenue);margin-bottom:var(--passo-1)}
.numeri dd{margin:0;max-width:52ch}

/* ── 10 · Griglia dei pezzi — MAI uno sotto l'altro ──────────────────── */
.griglia{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(var(--passo-3),2vw,var(--passo-5));list-style:none;padding:0;margin:0}
@media (min-width:760px){.griglia{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1080px){.griglia{grid-template-columns:repeat(4,1fr)}}
.griglia--tre{grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.griglia--tre{grid-template-columns:repeat(3,1fr)}}

.pezzo{position:relative;background:var(--colore-fondo);border:1px solid var(--colore-bordo-tenue);border-radius:var(--raggio-m);overflow:hidden;transition:box-shadow var(--durata-media) var(--easing-standard),transform var(--durata-media) var(--easing-standard)}
.pezzo:hover{box-shadow:var(--ombra-sollevata);transform:translateY(-3px)}
.pezzo__telaio{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--colore-fondo-alt)}
.pezzo__telaio img,.pezzo__telaio video{width:100%;height:100%;object-fit:cover;transition:transform var(--durata-lenta) var(--easing-standard)}
.pezzo:hover .pezzo__telaio img{transform:scale(1.045)}
.pezzo__corpo{padding:var(--passo-4)}
.pezzo__nome{font-family:var(--font-titolo);font-size:1.0625rem;line-height:1.25;margin:0 0 var(--passo-2)}
.pezzo__nome a{text-decoration:none}
.pezzo__nome a::after{content:"";position:absolute;inset:0}
.pezzo__prezzo{font-family:var(--font-dati);font-size:.9375rem;font-variant-numeric:tabular-nums}
.pezzo__meta{font-size:.8125rem;color:var(--colore-testo-tenue);margin-top:var(--passo-1)}
.venduto{position:absolute;top:var(--passo-3);left:var(--passo-3);z-index:2;background:var(--colore-testo);color:var(--colore-fondo);font-family:var(--font-dati);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;padding:.25rem .55rem;border-radius:var(--raggio-s)}
.pezzo[data-stato="sold"] .pezzo__telaio img{filter:grayscale(.55) opacity(.72)}
@media (prefers-reduced-motion:reduce){.pezzo:hover{transform:none}.pezzo:hover .pezzo__telaio img{transform:none}}

/* filtro delle categorie — la cosa da fare */
.filtro{display:flex;flex-wrap:wrap;gap:var(--passo-2);margin:0 0 var(--passo-5);padding:0;list-style:none}
.filtro button{
  background:transparent;border:1px solid var(--colore-bordo);border-radius:100px;
  padding:.45rem 1rem;font-size:.875rem;cursor:pointer;
  transition:background var(--durata-veloce) linear,border-color var(--durata-veloce) linear;
}
.filtro button:hover{border-color:var(--colore-testo)}
.filtro button[aria-pressed="true"]{background:var(--colore-testo);color:var(--colore-fondo);border-color:var(--colore-testo)}
.conteggio{font-family:var(--font-dati);font-size:.8125rem;color:var(--colore-testo-tenue);margin-bottom:var(--passo-4)}

/* ── 11 · Le fotografie: giusta accanto a sbagliata ──────────────────── */
.coppie{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--passo-4);list-style:none;padding:0;margin:0}
@media (min-width:760px){.coppie{grid-template-columns:repeat(3,1fr)}}
.coppia figure{margin:0}
.coppia__due{display:grid;grid-template-columns:1fr 1fr;gap:2px;border:1px solid var(--colore-bordo-tenue);border-radius:var(--raggio-m);overflow:hidden}
.coppia__due>div{aspect-ratio:1/1;background:var(--colore-fondo-alt);position:relative;display:grid;place-items:center;text-align:center;padding:var(--passo-2)}
.coppia__due>div span{font-family:var(--font-dati);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--colore-testo-tenue)}
.coppia__due>div[data-esito="si"]{box-shadow:inset 0 -3px 0 var(--colore-accento)}
.coppia__due>div[data-esito="no"]{box-shadow:inset 0 -3px 0 #A4462F}
.coppia figcaption{font-size:.875rem;color:var(--colore-testo-tenue);margin-top:var(--passo-2)}

/* ── 12 · FAQ ────────────────────────────────────────────────────────── */
.faq{display:grid;gap:0;border-top:1px solid var(--colore-bordo-tenue)}
.faq>div{border-bottom:1px solid var(--colore-bordo-tenue);padding-block:var(--passo-4)}
.faq dt{font-weight:600;margin-bottom:var(--passo-2)}
.faq dd{margin:0;color:var(--colore-testo-tenue);max-width:64ch}

/* ── 13 · Moduli ─────────────────────────────────────────────────────── */
.modulo{display:grid;gap:var(--passo-4);max-width:34rem}
.campo{display:grid;gap:var(--passo-2)}
.campo label{font-size:.9375rem;font-weight:600}
.campo small{font-size:.8125rem;color:var(--colore-testo-tenue)}
.campo input,.campo textarea{
  width:100%;padding:.8rem .9rem;background:var(--colore-fondo);
  border:1px solid var(--colore-bordo);border-radius:var(--raggio-m);
}
.campo input:focus,.campo textarea:focus{border-color:var(--colore-accento);outline:none;box-shadow:0 0 0 3px rgba(46,74,82,.14)}
.campo textarea{min-height:7rem;resize:vertical}
.caricamento{border:1px dashed var(--colore-bordo);border-radius:var(--raggio-m);padding:var(--passo-5);text-align:center;background:var(--colore-fondo-alt)}
.caricamento input{border:0;background:none;padding:0}
.anteprime{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--passo-2);margin-top:var(--passo-3)}
.anteprime img{aspect-ratio:1/1;object-fit:cover;border-radius:var(--raggio-s);border:1px solid var(--colore-bordo)}
details.dettagli{border:1px solid var(--colore-bordo-tenue);border-radius:var(--raggio-m);padding:var(--passo-3) var(--passo-4)}
details.dettagli summary{cursor:pointer;font-weight:600;font-size:.9375rem}
details.dettagli .modulo{margin-top:var(--passo-4)}
.esito{padding:var(--passo-4);border-radius:var(--raggio-m);background:var(--colore-fondo-alt);border-left:3px solid var(--colore-accento)}

/* ── 14 · Tabella dei dati societari — si legge come un documento ────── */
.documento{font-family:var(--font-dati);font-size:.875rem;line-height:1.9;border-top:1px solid var(--colore-bordo);margin:0}
.documento div{display:grid;grid-template-columns:minmax(9rem,auto) 1fr;gap:var(--passo-4);border-bottom:1px solid var(--colore-bordo-tenue);padding-block:.5rem}
.documento dt{color:var(--colore-testo-tenue)}
.documento dd{margin:0}
@media (max-width:520px){.documento div{grid-template-columns:1fr;gap:0}}

/* ── 15 · Piè di pagina ──────────────────────────────────────────────── */
.pie{background:var(--colore-fondo-scuro);color:var(--colore-testo-chiaro);padding-block:var(--passo-7) var(--passo-5);margin-top:var(--passo-7)}
.pie__interno{width:var(--misura);margin-inline:auto;display:grid;gap:var(--passo-6);grid-template-columns:1fr}
@media (min-width:760px){.pie__interno{grid-template-columns:1.4fr 1fr 1fr}}
.pie h4{color:var(--colore-testo-chiaro);margin-bottom:var(--passo-3);font-size:.75rem;font-family:var(--font-dati);letter-spacing:.14em;text-transform:uppercase;color:#8B867A}
.pie ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--passo-2)}
.pie a{color:#DDD8CB;text-decoration:none}
.pie a:hover{text-decoration:underline}
.pie__coda{width:var(--misura);margin:var(--passo-6) auto 0;padding-top:var(--passo-4);border-top:1px solid #33332B;font-size:.8125rem;color:#8B867A;display:flex;flex-wrap:wrap;gap:var(--passo-4);justify-content:space-between}
.avviso-punzoni{font-family:var(--font-dati);font-size:.75rem;color:#8B867A;max-width:60ch;margin-top:var(--passo-4)}

/* ── 16 · Banner cookie — una riga sola ──────────────────────────────── */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--colore-fondo-scuro);color:var(--colore-testo-chiaro);padding:var(--passo-3) var(--passo-4);display:flex;flex-wrap:wrap;align-items:center;gap:var(--passo-3);justify-content:center;font-size:.875rem}
.cookie a{color:#DCC9A0}
.cookie button{background:var(--colore-fondo);color:var(--colore-testo);border:0;border-radius:var(--raggio-m);padding:.4rem 1rem;font-size:.875rem;font-weight:600;cursor:pointer}
.cookie[hidden]{display:none}

/* ── 17 · Reveal allo scorrimento ────────────────────────────────────── */
.entra{opacity:0;transform:translateY(18px);transition:opacity var(--durata-lenta) var(--easing-standard),transform var(--durata-lenta) var(--easing-standard)}
.entra.visibile{opacity:1;transform:none}
.sfalsa>*{opacity:0;transform:translateY(14px);transition:opacity var(--durata-media) var(--easing-standard),transform var(--durata-media) var(--easing-standard);transition-delay:calc(var(--i,0) * 40ms)}
.sfalsa.visibile>*{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .entra,.sfalsa>*{opacity:1!important;transform:none!important;transition:none!important}
}

/* ── 18 · La lente sul punzone — LA FIRMA ────────────────────────────── */
.lente-blocco{position:relative;background:var(--colore-fondo-alt);border:1px solid var(--colore-bordo);border-radius:var(--raggio-m);padding:var(--passo-5);overflow:hidden}
.lente-scena{position:relative;width:100%;aspect-ratio:16/7;touch-action:none;cursor:none}
.lente-scena canvas{position:absolute;inset:0;width:100%;height:100%}
.lente-scena[data-ferma="si"]{cursor:default}
.lente-legenda{min-height:3.2rem;margin-top:var(--passo-4);padding-top:var(--passo-3);border-top:1px solid var(--colore-bordo-tenue)}
.lente-legenda strong{font-family:var(--font-dati);font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--colore-accento);display:block;margin-bottom:var(--passo-1)}
.lente-legenda p{margin:0;font-size:.9375rem;color:var(--colore-testo-tenue);max-width:58ch}
.lettore{display:flex;flex-wrap:wrap;gap:var(--passo-3);align-items:flex-end;margin-top:var(--passo-5)}
.lettore .campo{flex:1 1 12rem;max-width:16rem}
.lettore input{font-family:var(--font-dati);letter-spacing:.08em}
.scorciatoie{display:flex;flex-wrap:wrap;gap:var(--passo-2);margin-top:var(--passo-3);padding:0;list-style:none}
.scorciatoie button{font-family:var(--font-dati);font-size:.8125rem;background:transparent;border:1px solid var(--colore-bordo);border-radius:100px;padding:.3rem .75rem;cursor:pointer}
.scorciatoie button:hover{border-color:var(--colore-testo)}
.esito-punzone{margin-top:var(--passo-4);font-family:var(--font-dati);font-size:.9375rem}
.esito-punzone[hidden]{display:none}
.esito-punzone b{color:var(--colore-oro)}

/* ── 19 · Utilità ────────────────────────────────────────────────────── */
.misura{width:var(--misura);margin-inline:auto}
.stretta{max-width:60ch}
.riga-cta{background:var(--colore-fondo-scuro);color:var(--colore-testo-chiaro);padding-block:var(--passo-7)}
.riga-cta h2{color:var(--colore-testo-chiaro);max-width:22ch}
.briciole{font-family:var(--font-dati);font-size:.8125rem;color:var(--colore-testo-tenue);padding-block:var(--passo-4) 0}
.briciole a{text-decoration:none}
.briciole a:hover{text-decoration:underline}
.nota{font-size:.875rem;color:var(--colore-testo-tenue);border-left:2px solid var(--colore-bordo);padding-left:var(--passo-4);max-width:60ch}

/* ── 20 · LA VETRINA IN APERTURA — i gioielli si vedono subito ────────── */
.vetrina{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.5rem,1.2vw,.9rem)}
.vetrina a{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:var(--raggio-m);background:var(--colore-fondo-alt);border:1px solid var(--colore-bordo-tenue)}
.vetrina img{width:100%;height:100%;object-fit:cover;transition:transform var(--durata-lenta) var(--easing-standard)}
.vetrina a:hover img{transform:scale(1.06)}
.vetrina a::after{content:attr(data-prezzo);position:absolute;left:.5rem;bottom:.5rem;background:color-mix(in srgb,var(--colore-fondo) 92%,transparent);color:var(--colore-testo);font-family:var(--font-dati);font-size:.75rem;padding:.2rem .5rem;border-radius:var(--raggio-s);opacity:0;transform:translateY(4px);transition:opacity var(--durata-media) linear,transform var(--durata-media) var(--easing-standard)}
.vetrina a:hover::after,.vetrina a:focus-visible::after{opacity:1;transform:none}
@media (max-width:900px){.vetrina{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){.vetrina a:hover img{transform:none}}

/* ── 21 · LE CATEGORIE — la seconda cosa che si guarda ────────────────── */
.categorie{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.6rem,1.5vw,1rem);list-style:none;padding:0;margin:0}
@media (min-width:640px){.categorie{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1080px){.categorie{grid-template-columns:repeat(6,1fr)}}
.categorie a{display:block;text-decoration:none;text-align:center}
.categorie span{display:block;margin-top:var(--passo-2);font-size:.875rem;line-height:1.3}
.categorie .telaio{aspect-ratio:1/1;overflow:hidden;border-radius:50%;background:var(--colore-fondo-alt);border:1px solid var(--colore-bordo-tenue)}
.categorie img{width:100%;height:100%;object-fit:cover;transition:transform var(--durata-lenta) var(--easing-standard)}
.categorie a:hover img{transform:scale(1.08)}
.categorie a:hover span{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.categorie a:hover img{transform:none}}

/* ── 22 · Fascia intera per il catalogo in home ───────────────────────── */
.fascia{width:var(--misura);margin-inline:auto;padding-block:clamp(var(--passo-6),6vw,var(--passo-8))}
.fascia+.fascia{border-top:1px solid var(--colore-bordo-tenue)}
.testata{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--passo-4);margin-bottom:var(--passo-5)}
.testata h2{margin:0}