/* Progetto Z · gli stili delle nicchie.
   Il 15 ottobre (sera) il titolare: «estetista deve avere lo stile per le estetiste», con una pagina di Pinterest di siti
   per centri estetici come esempio, «per ogni stile per ogni area». Quindi ogni nicchia ha il suo vestito, uguale nelle
   quattro aree (gestionali, siti, social, branding), e sopra resta il prodotto vero che si muove:
     .stile-bellezza   «Cipria» (E2): prugna, rosa antico, cipria; titoli in Urbanist; foto ad arco e tonde; pulsanti a pillola
     .stile-officina   antracite, giallo, cemento; titoli stretti in maiuscolo; foto a spigolo vivo; strisce da officina
   Le pagine dei marchi (home) restano nello stile Digitato. Le foto d'esempio vengono da Unsplash.
   17 ottobre 2026: ogni attività ha la sua identità visiva, scelta da Alfredo (IDENTITA-VISIVA/, strumenti/identita_visiva.py):
   mai caratteri con le grazie («simil corsivo»). Colori e caratteri dei vestiti qui sotto vengono da lì. */

/* ------------------------------------------------------------ bellezza */
/* Le FORME sono uguali per tutte le attività, tutte le aree e tutte le sezioni (Alfredo, 17 ottobre: «gli stessi
   bottoni nella stessa posizione» avevano stili diversi, «questo non deve mai accadere»): i raggi di pulsanti, schede,
   archi e foto (--r-pulsante, --r-pulsante-basso, --r-scheda, --r-arco, --r-foto) stanno solo in stile.css. I vestiti
   qui sotto cambiano colori e caratteri, mai le forme. */
.stile-bellezza {
  --carta: #FBF4F1; --chiaro: #F7ECE9; --sabbia: #F3E2DF;
  --scuro: #3A2430; --ruolo: #C7837E; --ruolo-testo: #946162; --ruolo-luce: #F4CFC7; --ruolo-velo: #F8E3DE; --su-ruolo: #3A2430;
  --marchio: #3A2430;
  --testo: #33232A; --tenue: #796C70; --filo: rgba(58, 36, 48, .1);
  --font-titoli: "Urbanist", system-ui, sans-serif;
}
.stile-bellezza h1, .stile-bellezza h2, .stile-bellezza h3, .stile-bellezza legend { font-weight: 800; letter-spacing: -.01em; }
.stile-bellezza h1 em, .stile-bellezza h2 em { font-style: normal; color: var(--ruolo-testo); }
.stile-bellezza .apertura__titolo { font-size: clamp(2.5rem, 1.5rem + 3vw, 4.4rem); line-height: .98; }
.stile-bellezza .sezione__testa h2, .stile-bellezza .richiesta__testo h2 { font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.9rem); }
.stile-bellezza .etichetta { letter-spacing: .16em; font-weight: 500; color: var(--ruolo-testo); }
.stile-bellezza .etichetta .q { width: 6px; height: 6px; }
.stile-bellezza .marca__nome { font-weight: 700; letter-spacing: .08em; }
.stile-bellezza .pulsante--scuro { background: var(--scuro); }
.stile-bellezza .apertura { background: linear-gradient(180deg, #F8EDE9 0%, #FBF4F1 100%); }
.stile-bellezza .prezzo:nth-child(2) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1.5px var(--ruolo), 0 28px 54px -28px rgba(51, 35, 42, .45); }
.stile-bellezza .prezzo__cifra, .stile-bellezza .cifra { font-weight: 600; }
.stile-bellezza .piede { background: var(--scuro); }

/* ------------------------------------------------------------ officina */
.stile-officina {
  --carta: #F2F1EC; --chiaro: #E7E5DE; --sabbia: #D8D5CB;
  --scuro: #16191D; --ruolo: #F2B705; --ruolo-testo: #8A6300; --ruolo-luce: #F2B705; --ruolo-velo: #F4EDD4; --su-ruolo: #16191D;
  --marchio: #16191D;
  --testo: #1C1F23; --tenue: #5C6168; --filo: rgba(22, 25, 29, .12);
  --font-titoli: "Barlow Condensed", "Barlow", "Arial Narrow", system-ui, sans-serif;
}
.stile-officina h1, .stile-officina h2, .stile-officina h3, .stile-officina legend { text-transform: uppercase; letter-spacing: .005em; }
.stile-officina .apertura__titolo { font-size: clamp(2.6rem, 1.5rem + 3.4vw, 4.8rem); line-height: .95; }
.stile-officina .sezione__testa h2, .stile-officina .richiesta__testo h2 { font-size: clamp(2.3rem, 1.6rem + 2.6vw, 4rem); }
.stile-officina .testata__barra { background: rgba(255, 255, 255, .95); }
.stile-officina .pulsante--scuro { background: var(--ruolo); color: var(--su-ruolo); box-shadow: 0 16px 30px -16px rgba(242, 183, 5, .7); }
.stile-officina .pulsante--scuro .saetta { color: var(--scuro); }
.stile-officina .testata__invito { background: var(--scuro); color: #fff; }
.stile-officina .testata__invito .saetta { color: var(--ruolo); }
.stile-officina .apertura { background: var(--scuro); color: #fff; }
.stile-officina .apertura::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: repeating-linear-gradient(-45deg, var(--ruolo) 0 18px, var(--scuro) 18px 36px); z-index: 2; }
.stile-officina .apertura .apertura__titolo { color: #fff; }
.stile-officina .apertura em { color: var(--ruolo); }
.stile-officina .apertura .pezzo-ui em { color: var(--tenue); }
.stile-officina .apertura .etichetta { color: var(--ruolo); }
.stile-officina .apertura .apertura__sotto { color: rgba(255, 255, 255, .72); }
.stile-officina .apertura .apertura__sotto b { color: #fff; }
.stile-officina .apertura .pulsante--bordo { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.stile-officina .apertura .fiducia li { color: rgba(255, 255, 255, .8); }
.stile-officina em { color: var(--ruolo-testo); }
.stile-officina .sezione em { background: linear-gradient(transparent 62%, var(--ruolo) 62%); color: inherit; }
.stile-officina .prezzo:nth-child(2) { box-shadow: 0 0 0 2px var(--scuro), 0 28px 54px -28px rgba(22, 25, 29, .5); }
.stile-officina .prezzo__cifra { font-weight: 700; }
.stile-officina .passo__n { color: var(--scuro); }
.stile-officina .piede { background: var(--scuro); border-top: 10px solid var(--ruolo); }
.stile-officina .stima { background: var(--scuro); }

/* ------------------------------------------------------------ l'apertura di nicchia: testo a sinistra, foto e prodotto a destra */
.apertura--stile {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  text-align: left; padding: 128px max(var(--margine), calc((100% - var(--larga)) / 2 + var(--margine))) 72px;
  min-height: min(100svh, 920px);
}
.apertura--stile .apertura__testo { max-width: 600px; margin: 0; }
.apertura--stile .apertura__sotto { margin: 22px 0 0; }
.apertura--stile .apertura__azioni { justify-content: flex-start; }
.fiducia { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; }
.fiducia li { display: inline-flex; align-items: center; gap: 9px; font-size: .92rem; color: var(--tenue); }
.fiducia li::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-foto); background: var(--ruolo); color: var(--su-ruolo); font-size: .7rem; font-weight: 700; }
@media (max-width: 1000px) {
  .apertura--stile { grid-template-columns: minmax(0, 1fr); padding-top: 112px; min-height: 0; }
  .apertura--stile .apertura__testo { max-width: none; }
}
@media (max-width: 640px) { .apertura--stile { padding: 96px 16px 48px; } .apertura--stile .apertura__azioni .pulsante { flex: 1 1 100%; } }

.composizione { position: relative; height: 620px; }
.composizione__dentro { position: absolute; inset: 0; }
.composizione__arco {
  position: absolute; right: 0; top: 0; width: min(74%, 460px); height: 100%; overflow: hidden; border-radius: var(--r-arco);
  background: var(--sabbia); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .45);
}
.composizione__arco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stile-officina .composizione__arco { box-shadow: 14px 14px 0 var(--ruolo), 0 40px 80px -40px rgba(0, 0, 0, .6); }
.pezzo-ui {
  position: absolute; z-index: 3; padding: 14px 16px; border-radius: calc(var(--r-scheda) - 8px); background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px var(--filo), 0 26px 50px -24px rgba(0, 0, 0, .45); text-align: left; font-size: 13px; color: var(--testo);
}
.pezzo-ui__testa { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.pezzo-ui__testa b { font-size: 13.5px; font-weight: 600; color: var(--scuro); }
.pezzo-ui__testa small { font-size: 11.5px; color: var(--tenue); }
.composizione .toast { top: 10px; right: auto; left: 0; width: 350px; }
.composizione .scena__esempio { left: auto; right: 14px; bottom: 14px; }

/* gestionali: agenda di oggi, levette, incasso */
.righe-ag li { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; margin-top: 6px; border-radius: 10px; background: color-mix(in srgb, var(--ruolo) 11%, #fff); border-left: 3px solid var(--ruolo); }
.righe-ag b { font-size: 12px; color: var(--ruolo-testo); }
.righe-ag span { font-weight: 600; color: var(--scuro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.righe-ag small { font-size: 11px; color: var(--tenue); }
.righe-ag li::after { position: absolute; right: 8px; top: 50%; translate: 0 -50%; padding: 2px 6px; font: 700 9.5px/1.2 var(--font-testo); text-transform: uppercase; letter-spacing: .04em; }
.righe-ag li.disdetto { background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .04) 0 6px, #fff 6px 12px); border-left-color: rgba(0, 0, 0, .2); }
.righe-ag li.disdetto span { text-decoration: line-through; color: var(--tenue); }
.righe-ag li.disdetto::after { content: "Disdetto"; background: var(--scuro); color: #fff; animation: segno-pop .5s var(--rimbalzo) both; }
.righe-ag li.riempito { animation: blocco-riempito .7s var(--rimbalzo) both; }
.righe-ag li.riempito::after { content: "Riempito"; background: var(--ruolo); color: var(--su-ruolo); animation: segno-pop .5s var(--rimbalzo) both; }
.righe-ag li.fatta::after { content: "Pronta ✓"; background: var(--ruolo); color: var(--su-ruolo); animation: segno-pop .5s var(--rimbalzo) both; }
.righe-ag li.riga-ag--attesa { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ruolo) 12%, #fff) 0 6px, #fff 6px 12px); }
.righe-ag li.riga-ag--attesa::after { content: "Attesa ricambi"; background: var(--scuro); color: #fff; }
.righe-ag li.disdetto small, .righe-ag li.riempito small, .righe-ag li.fatta small, .righe-ag li.riga-ag--attesa small { visibility: hidden; }
.pezzo-ui--agenda { left: 0; top: 124px; width: 320px; }
.pezzo-ui--leve { right: 22px; bottom: 30px; width: 280px; }
.pezzo-ui--cifra { right: 24px; top: 46px; }
.pezzo-ui--cifra small { display: block; font-size: 11.5px; color: var(--tenue); }
.pezzo-ui--cifra b { font: 600 30px/1.05 var(--font-titoli); color: var(--scuro); }

/* siti: il telefono col sito e il risultato su Google */
.composizione--siti .telefono--sito { position: absolute; left: 0; bottom: 0; width: 246px; height: 500px; z-index: 3; }
.sito__banner { height: 150px; margin: 4px 12px 0; border-radius: 16px; background-size: cover; background-position: center; }
.pezzo-ui--cerca { right: 26px; bottom: 34px; width: 290px; display: grid; gap: 3px; }
.pezzo-ui--cerca small { font-size: 11px; color: var(--tenue); }
.pezzo-ui--cerca b { font-size: 15px; color: #1A0DAB; font-weight: 600; }
.pezzo-ui--cerca span { font-size: 12px; color: #0B6E3B; }
.pezzo-ui--cerca em { font-size: 12px; color: var(--tenue); }

/* social: il profilo con le foto e il post da approvare */
.composizione--social .telefono--social { position: absolute; left: 0; top: auto; bottom: 0; width: 246px; height: 500px; z-index: 3; }
.post--foto { background-size: cover; background-position: center; }
.post--foto span { opacity: 0; }
.post--foto.post--reel::after { color: #fff; }
.pezzo-ui--approva { right: 22px; bottom: 30px; width: 300px; }
.approva__mini { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; align-items: center; }
.approva__mini > i { aspect-ratio: 4 / 5; border-radius: 10px; background-size: cover; background-position: center; }
.approva__mini small { display: block; font-size: 11px; color: var(--tenue); }
.approva__mini b { display: block; margin-top: 2px; font-size: 13.5px; color: var(--scuro); line-height: 1.25; }
.approva__mini span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--tenue); }
.pezzo-ui--approva .approva__pulsanti { margin-top: 12px; }
.pezzo-ui--approva .timbro { left: auto; right: 16px; top: 16px; }
.approva__post--foto { background-size: cover; background-position: center; }
.approva__post--foto::before { display: none; }
.approva__post--foto span { text-shadow: 0 2px 12px rgba(0, 0, 0, .5); color: #fff; }

/* branding: le proposte di logo, il biglietto, i colori */
.pezzo-ui--proposte { left: 0; top: 110px; width: 360px; }
.composizione--branding .pezzo--biglietto { position: absolute; z-index: 4; right: 40px; bottom: 60px; }
.pezzo-ui--campioni { left: 40px; bottom: 34px; display: flex; gap: 6px; padding: 10px; }
.pezzo-ui--campioni i { width: 34px; height: 34px; border-radius: var(--r-foto); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }

/* ingressi dei pezzi */
.composizione.gioca:not(.entrata) .pezzo-ui, .composizione.gioca:not(.entrata) .telefono, .composizione.gioca:not(.entrata) .pezzo {
  animation: pezzo-entra .9s var(--rimbalzo) both; animation-delay: calc(500ms + var(--n, 0) * 160ms);
}
.composizione .telefono, .pezzo-ui--agenda { --n: 0; }
.pezzo-ui--leve, .pezzo-ui--cerca, .pezzo-ui--approva, .pezzo-ui--proposte { --n: 1; }
.pezzo-ui--cifra, .composizione .pezzo--biglietto { --n: 2; }
.pezzo-ui--campioni { --n: 3; }
@keyframes pezzo-entra { from { opacity: 0; transform: translateY(40px) scale(.9); } }
.composizione.gioca:not(.entrata) .composizione__arco { animation: arco-entra 1.1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes arco-entra { from { clip-path: inset(100% 0 0 0 round 200px); } to { clip-path: inset(0 0 0 0 round 0); } }
.composizione .pezzo-ui, .composizione .pezzo--biglietto { animation: chip-galleggia 6s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -1.7s); }

@media (max-width: 1000px) { .composizione { max-width: 620px; width: 100%; margin: 0 auto; } }
@media (max-width: 640px) {
  .composizione { height: 560px; }
  .composizione__arco { width: 80%; }
  .composizione .toast { width: auto; left: 0; right: 0; top: 0; }
  .pezzo-ui--agenda { top: 96px; width: 270px; }
  .pezzo-ui--cifra { display: none; }
  .pezzo-ui--leve { right: 0; bottom: 14px; width: 250px; }
  .composizione--siti .telefono--sito, .composizione--social .telefono--social { width: 206px; height: 430px; }
  .pezzo-ui--cerca { right: 0; bottom: 18px; width: 230px; }
  .pezzo-ui--approva { right: 0; bottom: 14px; width: 250px; }
  .pezzo-ui--proposte { top: 90px; width: 300px; }
  .composizione--branding .pezzo--biglietto { right: 6px; bottom: 90px; }
  .pezzo-ui--campioni { left: 10px; bottom: 16px; }
}

/* ------------------------------------------------------------ i trattamenti / i servizi, con le foto */
.servizi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.servizio { text-align: center; }
.servizio__foto { aspect-ratio: 1; overflow: hidden; border-radius: var(--r-foto); background: var(--sabbia); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .5); }
.stile-bellezza .servizio__foto { border: 6px solid #fff; }
.stile-officina .servizio__foto { aspect-ratio: 4 / 5; border-bottom: 6px solid var(--ruolo); }
.servizio__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) { .servizio:hover .servizio__foto img { transform: scale(1.06); } }
.servizio h3 { margin-top: 20px; font-size: 1.6rem; }
.servizio p { margin-top: 6px; color: var(--tenue); font-size: .95rem; }
@media (max-width: 900px) { .servizi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
.js .servizio { opacity: 0; transform: translateY(26px) scale(.96); transition: opacity .5s ease, transform .75s var(--rimbalzo); transition-delay: calc(var(--i, 0) * 90ms); }
.js .vista .servizio { opacity: 1; transform: none; }

/* la sezione «dal vivo» porta il prodotto intero */
.sezione--vivo .apertura__prodotto { margin-top: 0; }
.stile-bellezza .sezione--vivo { max-width: none; background: var(--chiaro); }
.stile-officina .sezione--vivo { max-width: none; background: var(--chiaro); }

@media (prefers-reduced-motion: reduce) {
  .js .servizio { opacity: 1; transform: none; }
  .composizione .pezzo-ui, .composizione .pezzo--biglietto { animation: none; }
}

/* ------------------------------------------------------------ legale (avvocati)
   Nato dalla referenza del 15 ottobre (uno studio legale scuro). Dal 17 ottobre l'identità «Ardesia» (L2): grigio ardesia
   e blu acciaio, titoli in IBM Plex Sans, angoli vivi; apertura e aree di attività scure sul marmo, il resto su carta. */
.stile-legale {
  --carta: #F3F4F2; --chiaro: #EAEDED; --sabbia: #DEE3E6;
  --scuro: #252B33; --ruolo: #6F8BA8; --ruolo-testo: #5A7087; --ruolo-luce: #C9D6E3; --ruolo-velo: #E0E6EB; --su-ruolo: #252B33;
  --marchio: #252B33; --avorio: #E9EAE8;
  --testo: #20262D; --tenue: #6A6F72; --filo: rgba(37, 43, 51, .1);
  --font-titoli: "IBM Plex Sans", system-ui, sans-serif;
}
.stile-legale h1, .stile-legale h2, .stile-legale h3, .stile-legale legend { font-weight: 700; letter-spacing: -.01em; }
.stile-legale h1 em, .stile-legale h2 em { font-style: normal; color: var(--ruolo-testo); }
.stile-legale .apertura__titolo { font-size: clamp(2.4rem, 1.4rem + 3vw, 4.3rem); line-height: 1.04; }
.stile-legale .sezione__testa h2, .stile-legale .richiesta__testo h2 { font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.5rem); }
.stile-legale .q { transform: rotate(45deg); width: .24em; height: .24em; margin-left: .14em; }
.stile-legale .etichetta { letter-spacing: .2em; font-weight: 500; font-size: .75rem; color: var(--ruolo-testo); }
.stile-legale .etichetta .q { width: 6px; height: 6px; }
.stile-legale .marca__nome { font-weight: 600; letter-spacing: .1em; }
.stile-legale .testata__barra { background: rgba(247, 249, 247, .94); }
.stile-legale .testata__invito.pulsante--scuro { background: var(--ruolo); color: var(--su-ruolo); box-shadow: 0 16px 30px -18px rgba(111, 139, 168, .8); }
.stile-legale .testata__invito .saetta { color: var(--scuro); }
.stile-legale .pulsante--scuro { background: var(--scuro); }
.stile-legale .prezzo:nth-child(2) { box-shadow: 0 0 0 1px var(--ruolo), 0 28px 54px -28px rgba(37, 43, 51, .5); }
.stile-legale .prezzo__segno { transform: rotate(45deg); }
.stile-legale .passo__n { background: transparent; box-shadow: inset 0 0 0 1px var(--ruolo); color: var(--ruolo-testo); font-family: var(--font-titoli); font-weight: 500; }
.stile-legale .piede { background: var(--scuro); border-top: 1px solid var(--ruolo); }
.stile-legale .stima { background: var(--scuro); }

/* l'apertura scura sul marmo */
.stile-legale .apertura {
  color: var(--avorio);
  background: linear-gradient(rgba(30, 34, 39, .9), rgba(30, 34, 39, .93)), var(--trama) center / cover, var(--scuro);
}
.stile-legale .apertura .apertura__titolo { color: var(--avorio); }
.stile-legale .apertura em { color: var(--ruolo); }
.stile-legale .apertura .etichetta { color: var(--ruolo); }
.stile-legale .apertura .apertura__sotto { color: rgba(233, 234, 232, .72); }
.stile-legale .apertura .apertura__sotto b { color: var(--avorio); }
.stile-legale .apertura .pulsante--scuro { background: var(--ruolo); color: var(--su-ruolo); }
.stile-legale .apertura .pulsante--scuro .saetta { color: var(--scuro); }
.stile-legale .apertura .pulsante--bordo { background: transparent; color: var(--avorio); border-color: rgba(233, 234, 232, .3); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.stile-legale .apertura .fiducia li { color: rgba(233, 234, 232, .78); }
.stile-legale .apertura .pezzo-ui em { color: var(--tenue); }
.stile-legale .composizione__arco { outline: 1px solid rgba(111, 139, 168, .7); outline-offset: 14px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }

/* le aree di attività: schede scure con la foto, sul marmo */
.stile-legale .sezione--servizi {
  max-width: none; color: var(--avorio);
  background: linear-gradient(rgba(30, 34, 39, .92), rgba(30, 34, 39, .95)), var(--trama) center / cover, var(--scuro);
}
.stile-legale .sezione--servizi h2 { color: var(--avorio); }
.stile-legale .sezione--servizi .etichetta { color: var(--ruolo); }
.stile-legale .servizi { max-width: 1180px; margin: 0 auto; gap: 18px; }
.stile-legale .servizio { text-align: left; padding: 0 0 22px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(111, 139, 168, .25); overflow: hidden; }
.stile-legale .servizio__foto { aspect-ratio: 4 / 3; box-shadow: none; filter: grayscale(.35) contrast(1.05); border-bottom: 1px solid rgba(111, 139, 168, .5); }
.stile-legale .servizio h3 { margin: 18px 20px 0; font-size: 1.4rem; color: var(--avorio); }
.stile-legale .servizio p { margin: 6px 20px 0; color: rgba(233, 234, 232, .65); }
.stile-legale .servizio::after { content: "→"; display: block; margin: 14px 20px 0; color: var(--ruolo); }
.stile-legale .sezione--vivo { background: var(--chiaro); }

/* ------------------------------------------------------------ clinica (medici con studio proprio)
   Dal 17 ottobre l'identità «Blu fiducia» (M2): blu notte, blu e azzurro, titoli in Figtree, angoli morbidi (12 px i
   pulsanti), foto ad angoli arrotondati, prenotazione sempre in vista.
   Testi sobri: l'informazione sanitaria non promette risultati. */
.stile-clinica {
  --carta: #F5F8FE; --chiaro: #E7EEFC; --sabbia: #D5E2F9;
  --scuro: #13306B; --ruolo: #2F6FE0; --ruolo-testo: #2E6CDB; --ruolo-luce: #A9C8FF; --ruolo-velo: #D3E2FE; --su-ruolo: #FFFFFF;
  --marchio: #13306B;
  --testo: #15254A; --tenue: #646F89; --filo: rgba(19, 48, 107, .1);
  --font-titoli: "Figtree", system-ui, sans-serif;
}
.stile-clinica h1, .stile-clinica h2, .stile-clinica h3, .stile-clinica legend { font-weight: 800; letter-spacing: -.012em; word-spacing: .1em; }
.stile-clinica .apertura__titolo { font-size: clamp(2.3rem, 1.4rem + 3vw, 4.1rem); line-height: 1.06; }
.stile-clinica .sezione__testa h2, .stile-clinica .richiesta__testo h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.3rem); }
.stile-clinica h1 em, .stile-clinica h2 em { color: var(--ruolo-testo); }
.stile-clinica .etichetta { padding: 8px 14px 8px 10px; background: var(--ruolo-velo); color: var(--ruolo-testo); letter-spacing: .06em; }
.stile-clinica .etichetta .q { width: 18px; height: 18px; display: grid; place-items: center; background: var(--ruolo); }
.stile-clinica .etichetta .q::before { content: "+"; color: #fff; font: 800 13px/1 var(--font-titoli); }
.stile-clinica .marca__nome { letter-spacing: .04em; }
.stile-clinica .testata__invito.pulsante--scuro { background: var(--ruolo); box-shadow: 0 16px 30px -16px rgba(47, 111, 224, .7); }
.stile-clinica .testata__invito .saetta { color: #fff; }
.stile-clinica .pulsante--scuro { background: var(--scuro); }
.stile-clinica .apertura .pulsante--scuro { background: var(--ruolo); box-shadow: 0 18px 34px -18px rgba(47, 111, 224, .8); }
.stile-clinica .apertura .pulsante--scuro .saetta { color: #fff; }
.stile-clinica .apertura { background: radial-gradient(120% 90% at 85% 10%, #CFDFFB 0%, rgba(207, 223, 251, 0) 55%), linear-gradient(180deg, #F1F6FB 0%, #F5F8FE 100%); }
.stile-clinica .composizione__arco { box-shadow: 0 50px 90px -40px rgba(19, 48, 107, .45); }
.stile-clinica .prezzo:nth-child(2) { box-shadow: 0 0 0 2px var(--ruolo), 0 28px 54px -28px rgba(19, 48, 107, .4); }
.stile-clinica .passo__n { background: var(--ruolo-velo); color: var(--ruolo-testo); }
.stile-clinica .piede { background: var(--scuro); }
.stile-clinica .sezione--vivo { background: var(--chiaro); }
.stile-clinica .servizio { text-align: left; padding: 10px 10px 22px; background: #fff; box-shadow: 0 0 0 1px var(--filo), 0 26px 50px -34px rgba(19, 48, 107, .45); }
.stile-clinica .servizio__foto { aspect-ratio: 4 / 3; box-shadow: none; }
.stile-clinica .servizio h3 { margin: 18px 10px 0; font-size: 1.25rem; }
.stile-clinica .servizio p { margin: 6px 10px 0; }
.stile-clinica .servizio::after { content: "→"; display: grid; place-items: center; width: 36px; height: 36px; margin: 14px 10px 0; background: var(--ruolo-velo); color: var(--ruolo-testo); font-weight: 700; }

/* ------------------------------------------------------------ barbiere (parrucchieri e barber shop)
   Proposta P3 «il palo del barbiere», scelta da Alfredo il 16 ottobre: blu notte, rosso e bianco, titoli stretti in
   maiuscolo (Oswald), spigoli vivi e la striscia del palo del barbiere in fondo all'apertura. */
.stile-barbiere {
  --carta: #F4F1EA; --chiaro: #E8E4DA; --sabbia: #D9D3C6;
  --scuro: #0E1B2C; --ruolo: #E4343F; --ruolo-testo: #B8222C; --ruolo-luce: #F06A72; --ruolo-velo: #FBE3E4; --su-ruolo: #FFFFFF;
  --marchio: #0E1B2C;
  --testo: #141C27; --tenue: #5A6372; --filo: rgba(14, 27, 44, .12);
  --font-titoli: "Oswald", "Arial Narrow", system-ui, sans-serif;
}
.stile-barbiere h1, .stile-barbiere h2, .stile-barbiere h3, .stile-barbiere legend { text-transform: uppercase; letter-spacing: .01em; font-weight: 600; }
.stile-barbiere .apertura__titolo { font-size: clamp(2.6rem, 1.5rem + 3.4vw, 4.8rem); line-height: .95; }
.stile-barbiere .sezione__testa h2, .stile-barbiere .richiesta__testo h2 { font-size: clamp(2.3rem, 1.6rem + 2.6vw, 4rem); }
.stile-barbiere .testata__barra { background: rgba(255, 255, 255, .95); }
.stile-barbiere .pulsante--scuro { background: var(--ruolo); color: var(--su-ruolo); box-shadow: 0 16px 30px -16px rgba(228, 52, 63, .7); }
.stile-barbiere .pulsante--scuro .saetta { color: var(--su-ruolo); }
.stile-barbiere .testata__invito { background: var(--scuro); color: #fff; }
.stile-barbiere .testata__invito .saetta { color: var(--ruolo); }
.stile-barbiere .apertura { background: var(--scuro); color: #fff; }
.stile-barbiere .apertura::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; z-index: 2; background: repeating-linear-gradient(-45deg, var(--ruolo) 0 14px, #fff 14px 28px, var(--scuro) 28px 42px, #fff 42px 56px); }
.stile-barbiere .apertura .apertura__titolo { color: #fff; }
.stile-barbiere .apertura em { color: var(--ruolo-luce); }
.stile-barbiere .apertura .pezzo-ui em { color: var(--tenue); }
.stile-barbiere .apertura .etichetta { color: var(--ruolo-luce); }
.stile-barbiere .apertura .apertura__sotto { color: rgba(255, 255, 255, .74); }
.stile-barbiere .apertura .apertura__sotto b { color: #fff; }
.stile-barbiere .apertura .pulsante--bordo { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.stile-barbiere .apertura .fiducia li { color: rgba(255, 255, 255, .8); }
.stile-barbiere em { color: var(--ruolo-testo); }
.stile-barbiere .prezzo:nth-child(2) { box-shadow: 0 0 0 2px var(--scuro), 0 28px 54px -28px rgba(14, 27, 44, .5); }
.stile-barbiere .prezzo__cifra { font-weight: 600; }
.stile-barbiere .passo__n { color: var(--scuro); }
.stile-barbiere .piede { background: var(--scuro); border-top: 10px solid var(--ruolo); }
.stile-barbiere .stima { background: var(--scuro); }
.stile-barbiere .composizione__arco { box-shadow: 14px 14px 0 var(--ruolo), 0 40px 80px -40px rgba(0, 0, 0, .6); }
.stile-barbiere .servizio__foto { aspect-ratio: 4 / 5; border-bottom: 6px solid var(--ruolo); }
.stile-barbiere .sezione--vivo { max-width: none; background: var(--chiaro); }

/* ------------------------------------------------------------ caffe
   bar e gelaterie. Dal 17 ottobre l'identità «Gelato» (B2, prima B5 «caffè storico»): cioccolato, fragola e
   pistacchio su crema, titoli in Fredoka, angoli tondi e pulsanti a pillola; l'apertura scura con un filo fragola. */
.stile-caffe {
  --carta: #FFF7EC; --chiaro: #FEEFE6; --sabbia: #FDE6DE;
  --scuro: #4A2B21; --ruolo: #F28B95; --ruolo-testo: #A15D5D; --ruolo-luce: #CFE3A9; --ruolo-velo: #E9EECE; --su-ruolo: #4A2B21;
  --marchio: #4A2B21; --avorio: #F6EDE2;
  --testo: #3A221A; --tenue: #7F6D63; --filo: rgba(74, 43, 33, .1);
  --font-titoli: "Fredoka", system-ui, sans-serif;
}
.stile-caffe h1, .stile-caffe h2, .stile-caffe h3, .stile-caffe legend { font-weight: 700; letter-spacing: .02em; }
.stile-caffe h1 em, .stile-caffe h2 em { font-style: normal; color: var(--ruolo-testo); }
.stile-caffe .apertura__titolo { font-size: clamp(2.4rem, 1.4rem + 3vw, 4.3rem); line-height: 1.04; }
.stile-caffe .sezione__testa h2, .stile-caffe .richiesta__testo h2 { font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.5rem); }
.stile-caffe .etichetta { letter-spacing: .2em; font-weight: 500; font-size: .75rem; color: var(--ruolo-testo); }
.stile-caffe .marca__nome { font-weight: 600; letter-spacing: .1em; }
.stile-caffe .testata__barra { background: rgba(255, 255, 255, .94); }
.stile-caffe .testata__invito.pulsante--scuro { background: var(--ruolo); color: var(--su-ruolo); box-shadow: 0 16px 30px -18px rgba(242, 139, 149, .8); }
.stile-caffe .testata__invito .saetta { color: var(--scuro); }
.stile-caffe .pulsante--scuro { background: var(--scuro); }
.stile-caffe .prezzo:nth-child(2) { box-shadow: 0 0 0 1px var(--ruolo), 0 28px 54px -28px rgba(74, 43, 33, .5); }
.stile-caffe .passo__n { background: transparent; box-shadow: inset 0 0 0 1px var(--ruolo); color: var(--ruolo-testo); font-family: var(--font-titoli); }
.stile-caffe .piede { background: var(--scuro); border-top: 1px solid var(--ruolo); }
.stile-caffe .stima { background: var(--scuro); }
.stile-caffe .apertura { color: var(--avorio); background: linear-gradient(rgba(51, 30, 23, .9), rgba(51, 30, 23, .9)), var(--trama) center / cover, var(--scuro); }
.stile-caffe .apertura .apertura__titolo { color: var(--avorio); }
.stile-caffe .apertura em { color: var(--ruolo); }
.stile-caffe .apertura .etichetta { color: var(--ruolo); }
.stile-caffe .apertura .apertura__sotto { color: rgba(255, 247, 236, .74); }
.stile-caffe .apertura .apertura__sotto b { color: var(--avorio); }
.stile-caffe .apertura .pulsante--scuro { background: var(--ruolo); color: var(--su-ruolo); }
.stile-caffe .apertura .pulsante--scuro .saetta { color: var(--scuro); }
.stile-caffe .apertura .pulsante--bordo { background: transparent; color: var(--avorio); border-color: rgba(255, 247, 236, .3); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.stile-caffe .apertura .fiducia li { color: rgba(255, 247, 236, .74); }
.stile-caffe .apertura .pezzo-ui em { color: var(--tenue); }
.stile-caffe .composizione__arco { outline: 1px solid var(--ruolo); outline-offset: 14px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
.stile-caffe .servizio__foto { border-bottom: 2px solid var(--ruolo); }
.stile-caffe .sezione--vivo { background: var(--chiaro); }

/* ------------------------------------------------------------ osteria
   ristoranti. Dal 17 ottobre l'identità «Brace» (R5, prima R3 «osteria»): carbone e arancio brace, titoli in
   Archivo, angoli vivi, l'apertura scura con un filo arancio. */
.stile-osteria {
  --carta: #F4EEE7; --chiaro: #F3E4DA; --sabbia: #F1D8C9;
  --scuro: #191512; --ruolo: #E2662E; --ruolo-testo: #AA4F26; --ruolo-luce: #F3B585; --ruolo-velo: #F4D4BB; --su-ruolo: #191512;
  --marchio: #191512; --avorio: #E9E3DC;
  --testo: #1C1714; --tenue: #6F6A66; --filo: rgba(25, 21, 18, .1);
  --font-titoli: "Archivo", system-ui, sans-serif;
}
.stile-osteria h1, .stile-osteria h2, .stile-osteria h3, .stile-osteria legend { font-weight: 800; letter-spacing: -.005em; }
.stile-osteria h1 em, .stile-osteria h2 em { font-style: normal; color: var(--ruolo-testo); }
.stile-osteria .apertura__titolo { font-size: clamp(2.4rem, 1.4rem + 3vw, 4.3rem); line-height: 1.04; }
.stile-osteria .sezione__testa h2, .stile-osteria .richiesta__testo h2 { font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.5rem); }
.stile-osteria .etichetta { letter-spacing: .2em; font-weight: 500; font-size: .75rem; color: var(--ruolo-testo); }
.stile-osteria .marca__nome { font-weight: 600; letter-spacing: .1em; }
.stile-osteria .testata__barra { background: rgba(255, 255, 255, .94); }
.stile-osteria .testata__invito.pulsante--scuro { background: var(--ruolo); color: var(--su-ruolo); box-shadow: 0 16px 30px -18px rgba(226, 102, 46, .8); }
.stile-osteria .testata__invito .saetta { color: var(--scuro); }
.stile-osteria .pulsante--scuro { background: var(--scuro); }
.stile-osteria .prezzo:nth-child(2) { box-shadow: 0 0 0 1px var(--ruolo), 0 28px 54px -28px rgba(25, 21, 18, .5); }
.stile-osteria .passo__n { background: transparent; box-shadow: inset 0 0 0 1px var(--ruolo); color: var(--ruolo-testo); font-family: var(--font-titoli); }
.stile-osteria .piede { background: var(--scuro); border-top: 1px solid var(--ruolo); }
.stile-osteria .stima { background: var(--scuro); }
.stile-osteria .apertura { color: var(--avorio); background: linear-gradient(rgba(4, 6, 3, .9), rgba(4, 6, 3, .9)), var(--trama) center / cover, var(--scuro); }
.stile-osteria .apertura .apertura__titolo { color: var(--avorio); }
.stile-osteria .apertura em { color: var(--ruolo); }
.stile-osteria .apertura .etichetta { color: var(--ruolo); }
.stile-osteria .apertura .apertura__sotto { color: rgba(244, 238, 231, .74); }
.stile-osteria .apertura .apertura__sotto b { color: var(--avorio); }
.stile-osteria .apertura .pulsante--scuro { background: var(--ruolo); color: var(--su-ruolo); }
.stile-osteria .apertura .pulsante--scuro .saetta { color: var(--scuro); }
.stile-osteria .apertura .pulsante--bordo { background: transparent; color: var(--avorio); border-color: rgba(244, 238, 231, .3); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.stile-osteria .apertura .fiducia li { color: rgba(244, 238, 231, .74); }
.stile-osteria .apertura .pezzo-ui em { color: var(--tenue); }
.stile-osteria .composizione__arco { outline: 1px solid var(--ruolo); outline-offset: 14px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
.stile-osteria .servizio__foto { border-bottom: 2px solid var(--ruolo); }
.stile-osteria .sezione--vivo { background: var(--chiaro); }

/* identità visiva (17 ottobre 2026): i titoli delle aperture nel peso scelto */
.stile-bellezza .ha--nicchia .ha__titolo, .stile-clinica .ha--nicchia .ha__titolo, .stile-osteria .ha--nicchia .ha__titolo { font-weight: 800; }