/* PLUMBING_V 1 — reset tecnico canonico (Toolkit/boilerplate/plumbing.css) */
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ══════════ SOFT BEAUTY & NAILS STUDIO — Viale Ungheria 24, Milano ══════════
   «Due porte al 24»: la pagina è fatta come la loro facciata. La testata è nera come le due insegne, con le lettere d'oro;
   l'apertura sta sul grigio pietra del palazzo ed è divisa in due vetrine (la grata, l'insegna nera, la foto della sala nel
   telaio nero, la fascia satinata con le parole scritte sui loro vetri). Poi le due sale: il bianco e l'oro di Soft Nails, il
   velluto verde di Soft Beauty. La firma («le due pareti») è generata da _sbn_firma.mjs. Elsie per le insegne e i titoli,
   Comme per il testo e per tutte le cifre (Elsie ha i numeri in stile antico). */
:root {
  --nero: #17191D;
  --nero-2: #24272D;
  --oro: #C9A45C;
  --oro-chiaro: #E6CF97;
  --oro-scuro: #7A5C20;
  --bianco: #FBFAF7;
  --marmo: #EFEDE8;
  --pietra: #DCD8CF;
  --verde: #0F5644;
  --verde-2: #0B4536;
  --cipria: #EFD9D5;
  --inchiostro: #1C1C1F;
  --grigio: #55565B;
  --crema: #F4EBD6;
  --aperto: #2E8B4E;
  --f-titolo: 'Elsie', Georgia, 'Times New Roman', serif;
  --f-testo: 'Comme', Arial, sans-serif;
  --gutter: 16px;
  --testata-h: 66px;
}
@media (min-width: 760px) { :root { --gutter: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--inchiostro); font: 400 1.08rem/1.62 var(--f-testo); background: var(--pietra); }
a { color: var(--oro-scuro); }
b, strong { font-weight: 600; }
p { margin: 0 0 14px; }
figure { margin: 0; }
.salta { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: #fff; color: #111; text-decoration: none; }
.salta:focus { top: 10px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
section[id] { scroll-margin-top: calc(var(--testata-h) + 12px); }
.intero { white-space: nowrap; }
.freccia { font-family: Arial, sans-serif; }
:focus-visible { outline: 3px solid var(--oro-scuro); outline-offset: 2px; }
.testata :focus-visible, .menu-mobile :focus-visible, .capitolo--nero :focus-visible, .capitolo--verde :focus-visible, .piede :focus-visible, .cartello :focus-visible, .action-bar :focus-visible { outline-color: var(--oro-chiaro); }
/* finché i caratteri non arrivano il ripiego è più largo: una parola lunga va a capo invece di uscire (riserva-check, #233) */
h1, h2, h3 { overflow-wrap: anywhere; }

/* ── l'occhiello: maiuscole spaziate con un filo d'oro ── */
.occhio { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 600 .95rem/1.3 var(--f-testo); letter-spacing: .2em; text-transform: uppercase; color: var(--oro-scuro); }
.occhio::before { content: ''; flex: none; width: 30px; height: 2px; background: var(--oro); }
.occhio--oro { color: var(--oro-chiaro); }

/* ── la testata: nera come le insegne ── */
.testata { position: sticky; top: 0; z-index: 50; background: var(--nero); border-bottom: 1px solid var(--oro); box-shadow: 0 3px 0 var(--nero), 0 4px 0 rgba(201, 164, 92, .55); }
.testata__dentro { display: flex; align-items: center; gap: 10px; max-width: 1280px; margin: 0 auto; padding: 6px var(--gutter); min-height: 64px; }
.marchio { display: inline-flex; flex-direction: column; min-width: 0; text-decoration: none; line-height: 1.1; }
.marchio__nome { font: 400 1.36rem/1.15 var(--f-titolo); color: var(--oro-chiaro); overflow-wrap: anywhere; }
.marchio__e { color: var(--oro); }
.marchio__sotto { font: 600 .8rem/1.2 var(--f-testo); letter-spacing: .22em; text-transform: uppercase; color: #D9BC7A; }
.voci { display: none; }
.testata__azioni { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.lingue { display: flex; }
.lingue button { min-width: 36px; min-height: 40px; padding: 0 6px; border: 1px solid #6C6451; background: transparent; color: #F1EADB; font: 600 .92rem var(--f-testo); cursor: pointer; }
.lingue button + button { border-left: 0; }
.lingue button.is-on { background: var(--oro-chiaro); color: var(--nero); border-color: var(--oro-chiaro); }
.prenota { display: none; align-items: center; min-height: 42px; padding: 0 18px; background: var(--oro); color: var(--nero); font: 600 .95rem var(--f-testo); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.prenota:hover { background: var(--oro-chiaro); }
.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border: 1px solid #6C6451; background: transparent; cursor: pointer; }
.burger span { display: block; height: 2px; background: var(--oro-chiaro); transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu-mobile { position: fixed; top: var(--testata-h); left: 0; right: 0; z-index: 49; max-height: calc(100vh - var(--testata-h)); overflow-y: auto; padding: 8px var(--gutter) 22px; background: var(--nero); box-shadow: 0 12px 24px rgba(0, 0, 0, .4); }
.menu-mobile a { display: block; padding: 12px 2px 10px; border-bottom: 1px solid #3A3D44; color: var(--crema); font: 400 1.45rem/1.25 var(--f-titolo); text-decoration: none; }
.menu-mobile .menu-mobile__wa { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-top: 16px; border: 0; background: var(--oro); color: var(--nero); padding: 13px 8px; font: 600 1.05rem/1.3 var(--f-testo); letter-spacing: .06em; }

/* ── l'apertura: la facciata del 24 ── */
.facciata { padding: 34px max(var(--gutter), calc((100% - 1240px) / 2)) 46px; background-color: var(--pietra); }
.civico { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; font: 600 .95rem/1.3 var(--f-testo); letter-spacing: .2em; text-transform: uppercase; color: var(--inchiostro); }
.civico__targa { display: inline-block; padding: 3px 9px 2px; background: var(--nero); color: var(--oro-chiaro); border-radius: 3px; font: 600 1.05rem/1.2 var(--f-testo); letter-spacing: .06em; box-shadow: 0 0 0 1px var(--oro) inset; }
.nome { margin: 0 0 14px; font: 400 clamp(2.5rem, 1.5rem + 4.4vw, 5rem)/1.08 var(--f-titolo); color: var(--nero); text-wrap: balance; }
.nome__e { color: var(--oro-scuro); }
.facciata__frase { max-width: 36em; margin: 0; font-size: 1.16rem; }
.vetrine { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 30px; }
.vetrina { display: flex; flex-direction: column; min-width: 0; }
/* la grata sopra l'insegna, come sul palazzo */
.grata { height: 24px; border: 5px solid var(--nero); border-bottom: 0; background-color: #EDEAE3; background-image: repeating-linear-gradient(90deg, transparent 0 9px, #2B2E33 9px 12px); }
.insegna-nera { margin: 0; padding: 20px 14px 18px; background: var(--nero); border: 5px solid #0D0E11; text-align: center; box-shadow: inset 0 0 0 1px rgba(201, 164, 92, .4); }
.insegna-nera__nome { display: block; font: 900 clamp(1.75rem, 1.2rem + 2.3vw, 3rem)/1.14 var(--f-titolo); color: var(--oro-chiaro); text-shadow: 0 0 16px rgba(230, 207, 151, .32); overflow-wrap: anywhere; }
.insegna-nera__sotto { display: block; margin-top: 8px; font: 600 .98rem/1.35 var(--f-testo); letter-spacing: .2em; text-transform: uppercase; color: #D9BC7A; }
.telaio { border: 8px solid var(--nero); border-top-width: 3px; border-bottom: 0; background: var(--nero); }
.foto { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.foto img { display: block; width: 100%; height: auto; }
/* la fascia satinata del vetro, con le parole scritte sui loro vetri */
.vetro { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 20px 18px 20px; background: #F6F4EF; border: 8px solid var(--nero); border-top: 0; box-shadow: inset 0 12px 0 -11px #BDB7AA; }
.vetro__titolo, .listino__titolo { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; margin: 0 0 14px; font: 600 1rem/1.3 var(--f-testo); letter-spacing: .3em; text-transform: uppercase; color: var(--inchiostro); text-align: center; }
.vetro__titolo::before, .vetro__titolo::after, .listino__titolo::before, .listino__titolo::after { content: ''; flex: 1; max-width: 90px; height: 1px; background: var(--inchiostro); }
.vetro__elenco { width: 100%; margin: 0; padding: 0; list-style: none; font: 400 .93rem/1.4 var(--f-testo); letter-spacing: .05em; text-transform: uppercase; }
.vetro__elenco li { padding: 5px 0 4px; border-bottom: 1px solid #D5D0C4; overflow-wrap: anywhere; }
.vetro__elenco--una { max-width: 21em; text-align: center; }
.vetro__firma { margin: 0 0 12px; font: 400 1.3rem/1.25 var(--f-titolo); font-variant-ligatures: none; color: var(--inchiostro); text-align: center; }
.vetro__entra { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin-top: auto; padding: 18px 0 2px; font: 600 1.02rem/1.3 var(--f-testo); color: var(--inchiostro); text-decoration: underline; text-decoration-color: var(--oro); text-decoration-thickness: 2px; text-underline-offset: 5px; text-align: center; }
.vetro__entra:hover { color: var(--oro-scuro); }
/* la soglia: lo stato, il voto, i bottoni */
.soglia { display: flex; flex-direction: column; gap: 20px; margin-top: 30px; }
.soglia__stato { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.stato { display: inline-flex; align-items: center; gap: 9px; margin: 0; font: 600 1.04rem/1.4 var(--f-testo); }
.stato::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }
.stato.is-aperto::before { opacity: 1; background: var(--aperto); box-shadow: 0 0 0 3px rgba(46, 139, 78, .25); }
.voto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; }
.voto__n { font: 600 2.1rem/1 var(--f-testo); color: var(--nero); }
.soglia__azioni { display: flex; flex-wrap: wrap; gap: 10px; }
.bottone { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; max-width: 100%; min-height: 50px; padding: 4px 22px; border: 2px solid var(--nero); background: transparent; color: var(--nero); font: 600 1rem/1.2 var(--f-testo); letter-spacing: .1em; text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.bottone--pieno { background: var(--nero); color: var(--oro-chiaro); }
.bottone--pieno:hover { background: var(--nero-2); }
.bottone--vuoto:hover { background: var(--nero); color: var(--oro-chiaro); }

/* ── i capitoli ── */
.capitolo { padding: 66px max(var(--gutter), calc((100% - 1180px) / 2)) 66px; }
.capitolo--bianco { background: var(--bianco); }
.capitolo--marmo { background: var(--marmo); }
.capitolo--nero { background: var(--nero); color: #EDE7DA; }
.capitolo--verde { background: var(--verde); color: #F1EDE2; }
.capitolo--cipria { background: var(--cipria); }
.capitolo--pietra { background: var(--pietra); }
.capitolo__titolo { max-width: 20em; margin: 0 0 18px; font: 400 clamp(2.1rem, 1.35rem + 2.9vw, 3.6rem)/1.14 var(--f-titolo); color: var(--inchiostro); text-wrap: balance; }
.capitolo--nero .capitolo__titolo { color: var(--crema); }
.capitolo__intro { max-width: 40em; margin: 0 0 22px; font-size: 1.14rem; }
.capitolo__nota { max-width: 48em; margin: 28px 0 0; color: var(--grigio); }
.capitolo--nero a, .capitolo--verde a { color: #FFFFFF; }
.capitolo--verde .capitolo__nota { color: #DCE6DF; }
figcaption { margin-top: 10px; font-size: 1rem; line-height: 1.45; color: var(--grigio); }
/* la cornice: un filo d'oro e un passe-partout bianco */
.cornice { padding: 7px; border: 1px solid var(--oro); background: #FFFFFF; }

/* Soft Nails Studio: la sala bianca */
.sala { display: grid; gap: 30px; align-items: center; }
.lettere { color: #8A6A2B; }
.lettere__firma { display: block; margin-top: 10px; font: 600 1.02rem/1.3 var(--f-testo); letter-spacing: .16em; }
.parole { max-width: 17em; margin: 26px 0 18px; padding: 2px 0 2px 18px; border-left: 3px solid var(--oro); font: 400 clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem)/1.28 var(--f-titolo); color: var(--inchiostro); }
.sala__testo p { max-width: 36em; }
.listino { margin-top: 56px; }
.listino__titolo { justify-content: flex-start; text-align: left; }
.listino__titolo::before { display: none; }
.listino__titolo::after { max-width: none; background: var(--oro); }
.listino__voci { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 46px; margin: 0; padding: 0; list-style: none; }
.listino__voci li { padding: 13px 0 12px; border-bottom: 1px solid rgba(201, 164, 92, .6); }
.listino__voci b { display: block; font: 400 1.34rem/1.28 var(--f-titolo); color: var(--inchiostro); }
.listino__voci span { color: var(--grigio); }

/* i lavori */
.lavori { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.lavori figcaption { margin-top: 8px; }

/* le due pareti */
.pareti { display: grid; gap: 30px; align-items: center; }
.capitolo--nero .capitolo__intro { color: #E3DCCD; }
.pareti-fig { margin: 0; -webkit-user-select: none; user-select: none; }
.pareti-fig > svg { max-width: 600px; margin: 0 auto; border: 1px solid var(--oro); }
.pareti__didascalia { max-width: 34em; min-height: 3em; margin: 16px auto 0; font-size: 1rem; line-height: 1.5; text-align: center; color: #D8D0C0; }
.pareti__d { display: none; }
.pareti-fig[data-modo="0"] .pareti__d[data-m="0"], .pareti-fig[data-modo="1"] .pareti__d[data-m="1"] { display: inline; }
.pareti__modi { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.pareti__modi button { min-height: 46px; padding: 2px 24px 0; border: 1px solid var(--oro); background: transparent; color: var(--oro-chiaro); font: 400 1.22rem/1.2 var(--f-titolo); cursor: pointer; }
.pareti__modi button:hover { background: rgba(201, 164, 92, .16); }
.pareti__modi button[aria-pressed="true"] { background: var(--oro-chiaro); color: var(--nero); border-color: var(--oro-chiaro); }
/* senza JS il modo non cambia: i bottoni restano nascosti col loro posto (#240) */
.no-js .pareti__modi { visibility: hidden; }

/* Soft Beauty Studio: lo spazio estetico */
.spazio { display: grid; gap: 34px; align-items: start; }
.spazio__foto { max-width: 420px; order: 2; }
/* la foto appesa sulla carta a foglie di palma (la stessa della firma, ferma) */
.carta { padding: 26px 30px; background-color: #F3EEE2; background-image: url('../img/carta-palme.svg'); background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgba(230, 207, 151, .7); }
.capitolo--verde figcaption { color: #DCE6DF; }
.momento { display: block; font-size: .66em; line-height: 1.2; color: var(--oro-chiaro); }
.bellezza { display: block; font-weight: 900; color: var(--oro-chiaro); }
.famiglie { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 44px; margin: 8px 0 0; padding: 0; list-style: none; }
.famiglie li { padding: 15px 0 4px; border-top: 1px solid rgba(230, 207, 151, .45); }
.famiglie h3 { margin: 0 0 4px; font: 400 1.5rem/1.25 var(--f-titolo); color: var(--crema); }
.famiglie p { color: #E4ECE6; }

/* recensioni */
.voto--sezione { margin: 0 0 26px; }
/* sei schede a righe: 3 × 2, 2 × 3 o una colonna, sempre righe piene (in colonne CSS con sette schede restava una scheda da
   sola e un vuoto alto quanto una scheda sotto le altre colonne: verifica del 3/10/2026). Il nome sta in fondo alla scheda. */
.recensioni { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 18px; margin: 0 0 18px; padding: 0; list-style: none; }
.recensione { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 20px 22px 16px; background: #FFFDFB; border-top: 2px solid var(--oro); }
.recensione__testo { margin: 0; font-size: 1.04rem; line-height: 1.6; overflow-wrap: anywhere; }
.recensione__chi { margin: auto 0 0; padding-top: 12px; font-size: 1rem; line-height: 1.4; color: var(--grigio); }
.recensione__chi b { display: block; font: 400 1.3rem/1.2 var(--f-titolo); color: var(--inchiostro); }
.recensioni__nota { max-width: 48em; margin: 12px 0 0; font-size: 1rem; color: #4A4244; }
.capitolo--cipria a { color: #5E4310; }

/* orari e strada */
.orari-riga { display: grid; gap: 30px; align-items: start; }
.cartello { max-width: 430px; padding: 26px 28px 24px; background: var(--nero); color: #EDE7DA; outline: 1px solid rgba(201, 164, 92, .65); outline-offset: -9px; }
.cartello__titolo { margin: 0; font: 400 2.3rem/1.15 var(--f-titolo); color: var(--oro-chiaro); text-align: center; }
.cartello__sotto { margin: 2px 0 14px; font: 600 .95rem/1.3 var(--f-testo); letter-spacing: .22em; text-transform: uppercase; color: #D9BC7A; text-align: center; }
.giorno { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 8px 7px; border-bottom: 1px solid #383B42; }
.giorno:last-child { border-bottom: 0; }
.giorno__nome { font-size: 1.04rem; }
.giorno__ore { margin-left: auto; white-space: nowrap; font: 600 1.04rem/1.5 var(--f-testo); }
.giorno.is-today { background: rgba(201, 164, 92, .2); }
.stato--cartello { margin-top: 14px; }
.cartello__nota { margin: 10px 0 0; font-size: 1rem; color: #CFC7B6; }
.indirizzo { margin: 0 0 20px; }
.indirizzo div { display: grid; grid-template-columns: 7.6em minmax(0, 1fr); gap: 10px; padding: 10px 0 8px; border-bottom: 1px solid #BEB9AD; }
.indirizzo dt { font: 600 .95rem/1.7 var(--f-testo); letter-spacing: .16em; text-transform: uppercase; color: #5E4310; }
.indirizzo dd { margin: 0; overflow-wrap: anywhere; }
.capitolo--pietra a { color: #5E4310; }
.capitolo--pietra .bottone { color: var(--nero); }
.capitolo--pietra .bottone--pieno { color: var(--oro-chiaro); }
.capitolo--pietra .bottone--vuoto:hover { color: var(--oro-chiaro); }
.capitolo--pietra figcaption { color: #47484C; }
.strada__azioni { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.cartina { margin-top: 34px; overflow: hidden; background: #FFFFFF; color: var(--inchiostro); border: 1px solid var(--nero); }
.cartina a { color: var(--inchiostro); }
.cartina iframe { display: block; width: 100%; height: 380px; border: 0; }
/* la nota della mappa a 16 px: sotto i 15 px gli accenti piccoli si perdono (accenti-check, #306) */
.cartina .mappa-clic__nota { font-size: 1rem; }

/* le domande */
.domande { max-width: 800px; border-top: 1px solid var(--oro); }
.domanda { border-bottom: 1px solid #3A3D44; }
.domanda summary { position: relative; padding: 15px 36px 12px 2px; font: 400 1.42rem/1.3 var(--f-titolo); color: var(--crema); cursor: pointer; list-style: none; }
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::after { content: '+'; position: absolute; right: 6px; top: 13px; font: 400 1.6rem/1 Arial, sans-serif; color: var(--oro); }
.domanda[open] summary::after { content: '−'; }
.domanda p { max-width: 42em; margin: 0 0 16px; }

/* ── la chiusura ── */
.piede { background: var(--nero); color: #D8D0C0; border-top: 1px solid var(--oro); }
.piede__dentro { max-width: 920px; margin: 0 auto; padding: 48px var(--gutter) 100px; text-align: center; }
.piede__insegne { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 16px; margin: 0 0 20px; font: 400 1.7rem/1.25 var(--f-titolo); color: var(--oro-chiaro); }
.piede__e { color: var(--oro); }
.piede__dove, .piede__orario, .piede__social { margin: 0 0 8px; overflow-wrap: anywhere; }
.piede a { color: #FFFFFF; }
.piede__cred { max-width: 54em; margin: 18px auto 10px; font-size: 1rem; }

/* Elsie SEMPRE senza legature: da sola mette la «ft» e la «st» col ricciolo sopra («Soft», «nostro», «vostre»), che le loro
   insegne vere non hanno e che a schermo sembrano segni sbagliati, a ogni dimensione (verifica del 3/10/2026). Qui ci sono
   tutte le regole che usano var(--f-titolo); i <text> della firma le spengono in _sbn_firma.mjs. Sta qui in fondo perché la
   scorciatoia «font:» delle regole sopra riporta le legature a «normal». Controllo: _runs/soft-beauty-nails/ripro.mjs. */
.nome, .insegna-nera__nome, .capitolo__titolo, .parole, .vetro__firma, .cartello__titolo, .listino__voci b, .famiglie h3, .recensione__chi b, .domanda summary, .pareti__modi button, .menu-mobile a, .marchio__nome, .piede__insegne { font-variant-ligatures: none; }

/* ── reveal (plumbing) ── */
.js .reveal { opacity: 0; }
.js .reveal.in-view { opacity: 1; }
html:not(.js) .reveal { opacity: 1; }
.reduced-motion .reveal { opacity: 1 !important; }

/* ── la barra e la lightbox ── */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--nero); box-shadow: 0 -1px 0 var(--oro); transform: translateY(110%); transition: transform .25s; }
.action-bar.is-visible { transform: translateY(0); }
.action-bar a { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 54px; padding: 0 4px; overflow-wrap: anywhere; text-align: center; color: var(--crema); font: 600 1rem var(--f-testo); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.action-bar a:last-child { background: var(--oro); color: var(--nero); }
#lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(16, 17, 20, .95); }
#lightbox[hidden] { display: none !important; }
#lightbox img { width: auto; max-width: min(1000px, 100%); max-height: 88vh; }
#lightboxClose { position: absolute; top: 14px; right: 16px; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%; background: transparent; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; }

/* ── le larghezze ── */
@media (max-width: 379px) {
  .testata__dentro { gap: 6px; }
  .marchio__nome { font-size: 1.16rem; }
  .lingue button { min-width: 32px; }
  .bottone { padding: 4px 14px; }
  .indirizzo div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cartello { padding: 24px 20px 22px; }
  .vetro { padding: 18px 12px; }
}
@media (min-width: 480px) {
  .vetrina--beauty .vetro__elenco { columns: 2; column-gap: 24px; }
  .vetrina--beauty .vetro__elenco li { break-inside: avoid; }
}
@media (min-width: 560px) {
  .prenota { display: inline-flex; }
  .famiglie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .action-bar { display: none; }
  .piede__dentro { padding-bottom: 54px; }
  .listino__voci { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soglia { flex-direction: row; align-items: center; justify-content: space-between; }
  .lavori { gap: 26px 18px; }
}
@media (min-width: 900px) {
  /* le due vetrine affiancate come al 24: quella dell'estetica più larga, il pilastro di pietra in mezzo */
  .vetrine { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 34px; }
}
@media (min-width: 960px) {
  .sala { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; }
  .lavori { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pareti { grid-template-columns: minmax(0, .8fr) minmax(0, 600px); gap: 54px; }
  .spazio { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 56px; }
  .spazio__foto { order: 0; }
  /* il cartello nero accanto alla facciata, alti uguali; sotto, a tutta larghezza, come arrivare (prima la facciata stava sotto
     l'indirizzo e il cartello finiva 330 px prima di lei: verifica del 3/10/2026) */
  .orari-riga { grid-template-columns: minmax(0, 430px) minmax(0, 1fr); grid-template-areas: "cartello foto" "strada strada"; gap: 34px 54px; align-items: center; }
  .cartello { grid-area: cartello; }
  .strada { grid-area: strada; }
  .strada__foto { grid-area: foto; }
  /* l'indirizzo in due colonne: a sinistra dove e i numeri, a destra i mezzi */
  .indirizzo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 54px; align-content: start; }
  .indirizzo div:nth-child(1) { grid-column: 1; grid-row: 1; }
  .indirizzo div:nth-child(2) { grid-column: 2; grid-row: 1; }
  .indirizzo div:nth-child(3) { grid-column: 2; grid-row: 2 / span 2; }
  .indirizzo div:nth-child(4) { grid-column: 1; grid-row: 2; }
  .indirizzo div:nth-child(5) { grid-column: 1; grid-row: 3; }
}
@media (min-width: 1100px) {
  .testata__dentro { gap: 16px; }
  .voci { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-left: 24px; }
  .voci a { padding: 5px 1px 3px; color: #F1EADB; font: 600 .95rem var(--f-testo); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
  .voci a:hover, .voci a[aria-current="true"] { color: var(--oro-chiaro); text-decoration: underline; text-decoration-color: var(--oro); text-decoration-thickness: 2px; text-underline-offset: 7px; }
  .burger { display: none; }
}

/*PARETI*/
/* le due pareti — generato da _sbn_firma.mjs: non modificare a mano */
.pareti__svg { display: block; width: 100%; height: auto; overflow: hidden; }
.pa-muro { fill: #F8F6F1; }
.pa-marmo { fill: #ECE8E0; }
.pa-vena { fill: none; stroke: #D2CBBE; stroke-width: 1.3; stroke-linecap: round; }
.pa-zoccolo { fill: #FFFFFF; stroke: #DDD7CB; stroke-width: 1; }
.pa-lettere { fill: #96722C; }
.pa-lettere--nome { font: 400 38px 'Elsie', Georgia, serif; font-variant-ligatures: none; }
.pa-lettere--firma { font: 600 13.5px 'Comme', Arial, sans-serif; letter-spacing: 1.2px; }
.pa-lettere--momento { font: 400 23px 'Elsie', Georgia, serif; font-variant-ligatures: none; }
.pa-lettere--bellezza { font: 900 31px 'Elsie', Georgia, serif; font-variant-ligatures: none; }
.pa-t { stroke-dasharray: 100; }
.pa-oro { fill: none; stroke: #C9A45C; stroke-linejoin: round; }
.pa-cornice { stroke-width: 5; }
.pa-ripiano { stroke-width: 4; }
.pa-vetro--chiaro { stroke: #CFC7B8; stroke-width: .8; }
.pa-tappo { fill: #1E1E21; }
.pa-foglia { fill: none; stroke: #4C7A5B; stroke-width: 3.2; stroke-linecap: round; }
.pa-vaso { fill: #FFFFFF; stroke: #C9A45C; stroke-width: 1.4; stroke-linejoin: round; }
.pa-carta { fill: #F3EEE2; }
.pa-nervatura { fill: none; stroke-width: 2; stroke-linecap: round; }
.pa-spigolo { fill: #E7E2D8; }
.pa-ripiano-b { fill: none; stroke: #FFFFFF; stroke-width: 8; filter: drop-shadow(0 2.5px 1.5px rgba(110, 92, 50, .5)); }
.pa-flacone { fill: #FFFFFF; stroke: #BDB5A4; stroke-width: 1; }
.pa-etichetta { fill: #E6D3A6; }
.pa-coperchio { fill: #C9A45C; }
.pa-filo { fill: none; stroke: #A9A294; stroke-width: 1; }
.pa-anello-oro { fill: none; stroke: #B9944C; stroke-width: 9; }
.pa-anello { fill: none; stroke: #FFFDF5; stroke-width: 5.5; }
.pa-banco { fill: #FCFBF8; stroke: #D8D2C5; stroke-width: 1; }
.pa-scanalatura { fill: none; stroke: #E1DCD0; stroke-width: 1.6; }
.pa-banco-oro { fill: #C9A45C; }
.pa-piano { fill: #FFFFFF; stroke: #D8D2C5; stroke-width: 1; }
.pa-gamba { fill: none; stroke: #C9A45C; stroke-width: 3.4; stroke-linecap: round; }
.pa-velluto { fill: #11604A; }
.pa-canale { fill: none; stroke: #0B4636; stroke-width: 2.2; stroke-linecap: round; }
.pa-seduta { fill: #0C4D3B; }
.pareti-fig[data-modo="0"] .modo:not([data-m="0"]) { display: none; }
.pareti-fig[data-modo="1"] .modo:not([data-m="1"]) { display: none; }
.firma-attesa .pa-t { stroke-dashoffset: 100; }
.firma-attesa .pa-c, .firma-attesa .pa-f, .firma-attesa .pa-s { opacity: 0; }
/*/PARETI*/

/*MAPPACLIC*/
/* la mappa Google si carica solo al clic (giro privacy 1/10/2026) */
.mappa-clic { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: var(--mappa-h, 320px); box-sizing: border-box; padding: 24px; text-align: center; background: repeating-linear-gradient(0deg, rgba(127, 127, 127, 0.14) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(127, 127, 127, 0.14) 0 1px, transparent 1px 28px); }
.mappa-clic__velo { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 32em; }
.mappa-clic__btn { display: inline-block; padding: 0.75em 1.4em; border: 2px solid currentColor; border-radius: 999px; color: inherit; font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; background: transparent; cursor: pointer; }
.mappa-clic__btn:hover, .mappa-clic__btn:focus-visible { text-decoration: underline; }
.mappa-clic__nota { margin: 0; font-size: 0.85em; line-height: 1.45; }
/*/MAPPACLIC*/