/* Progetto Z · composizione «fuoco» (DigitaSocial, social).
   Referenza del 15 ottobre (Pinterest, «Formix»): tutto lo schermo in un colore acceso e sfumato, lettere giganti
   trasparenti dietro, un telefono grande al centro con il profilo, tre note di vetro intorno (obiettivo, problema,
   soluzione), le scritte piccole negli angoli. Sulla principale il telefono gira fra i profili delle attività; sulle
   attività il colore è quello del mestiere e sotto c'è il piano del mese con le foto. */

.comp-fuoco { --f-a: #D92B0B; --f-b: #FF7A1A; --f-c: #FFB15C; --f-testo: #fff; }
.comp-fuoco:not([class*="stile-"]) { --font-titoli: "Bricolage Grotesque", "Inter", system-ui, sans-serif; --scuro: #1A0B06; --ruolo: #FF3B30; --ruolo-testo: #D92B0B; --ruolo-luce: #FF8A5C; --carta: #FFF8F3; --chiaro: #FFEFE5; --testo: #1A0B06; --tenue: #7A5C50; --filo: rgba(26, 11, 6, .1); background: var(--carta); }
.comp-fuoco.stile-bellezza { --f-a: #964D5C; --f-b: #E18B92; --f-c: #FACCCB; }
.comp-fuoco.stile-officina { --f-a: #111316; --f-b: #6B5208; --f-c: #F2B705; }
.comp-fuoco.stile-legale { --f-a: #1E232A; --f-b: #343E4C; --f-c: #6F8BA8; }
.comp-fuoco.stile-clinica { --f-a: #23417A; --f-b: #1560D0; --f-c: #A9C8FF; }
.comp-fuoco .q { display: none; }
.comp-fuoco h1, .comp-fuoco h2 { letter-spacing: -.035em; }

/* il menu: dal 17 ottobre lo governa l'apertura comune (modello/hero-approdo/hero.css, «body:has(.ha) .testata…»):
   vetro sul colore dentro l'apertura, fisso e chiaro dopo, via sul piede. Qui solo come si stringe fra 1061 e 1300 px. */
/* 16 ottobre: fra 1061 e 1300 px le voci del menu andavano a capo e coprivano il nome; qui si stringono un poco */
.comp-fuoco .testata__nav a { white-space: nowrap; }
@media (min-width: 1061px) and (max-width: 1300px) {
  .comp-fuoco .marca__di { display: none; }
  .comp-fuoco .testata__nav a { padding: 8px 7px; font-size: .88rem; }
}

/* ------------------------------------------------------------ l'apertura */
.fuoco {
  position: relative; overflow: hidden; margin: 10px; border-radius: 30px; min-height: min(100svh, 920px); color: var(--f-testo);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 20px;
  padding: 150px max(var(--margine), calc((100% - var(--larga)) / 2 + var(--margine))) 70px;
  background: radial-gradient(90% 90% at 80% 100%, var(--f-c) 0%, transparent 60%), linear-gradient(160deg, var(--f-a) 0%, var(--f-b) 70%);
}
.fuoco__lettere {
  position: absolute; left: -2vw; top: 50%; transform: translateY(-50%); font: 800 clamp(10rem, 34vw, 34rem)/.8 var(--font-titoli); letter-spacing: -.06em;
  color: #fff; opacity: .1; white-space: nowrap; pointer-events: none; text-transform: uppercase; animation: lettere-scorrono 30s linear infinite alternate;
}
@keyframes lettere-scorrono { to { transform: translate(-12vw, -50%); } }
.fuoco__angoli { position: absolute; inset: 0; pointer-events: none; }
.fuoco__angoli span { position: absolute; z-index: 2; font: 600 .7rem/1 var(--font-testo); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.fuoco__angoli span:nth-child(1) { left: max(var(--margine), calc((100% - var(--larga)) / 2 + var(--margine))); top: 124px; }
.fuoco__angoli span:nth-child(2) { right: max(var(--margine), calc((100% - var(--larga)) / 2 + var(--margine))); top: 124px; }
.fuoco__angoli span:nth-child(3) { left: max(var(--margine), calc((100% - var(--larga)) / 2 + var(--margine))); bottom: 26px; }
.fuoco__angoli span:nth-child(4) { right: max(var(--margine), calc((100% - var(--larga)) / 2 + var(--margine))); bottom: 26px; }
.fuoco__testo { position: relative; z-index: 2; max-width: 560px; }
.fuoco h1 { color: #fff; font: 600 clamp(2.6rem, 1.4rem + 4vw, 5rem)/.98 var(--font-titoli); letter-spacing: -.04em; }
.fuoco h1 em { color: #fff; font-style: italic; opacity: .78; }
.fuoco__testo > p { margin-top: 20px; max-width: 30em; font-size: 1.08rem; line-height: 1.55; color: rgba(255, 255, 255, .88); }
.fuoco__testo > p b { color: #fff; }
.fuoco__azioni { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.fuoco__pulsante {
  display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 8px 0 22px; border-radius: var(--r-pulsante); text-decoration: none;
  background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); color: #fff; font: 600 1.02rem/1 var(--font-testo);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .35s var(--rimbalzo);
}
.fuoco__pulsante span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--f-a); transition: transform .4s var(--rimbalzo); }
.fuoco__pulsante span svg { width: 18px; height: 18px; }
.fuoco__pulsante--vetro { padding-right: 26px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
@media (hover: hover) { .fuoco__pulsante:hover { transform: translateY(-2px); } .fuoco__pulsante:hover span { transform: rotate(45deg); } }
.fuoco__testo > * { animation: sale .9s var(--rimbalzo) both; }
.fuoco__testo > :nth-child(2) { animation-delay: .1s; } .fuoco__testo > :nth-child(3) { animation-delay: .2s; }

.fuoco__scena { position: relative; z-index: 2; height: 660px; display: grid; place-items: center; }
.fuoco__telefono {
  position: relative; width: 300px; height: 620px; padding: 10px; border-radius: 48px; background: #0D0D0F;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .15), 0 60px 100px -40px rgba(0, 0, 0, .7); transform: rotate(-4deg);
  animation: tel-entra 1.2s var(--rimbalzo) both, tel-galleggia 7s ease-in-out 1.2s infinite;
}
.fuoco__telefono::before { content: ""; position: absolute; z-index: 3; left: 50%; top: 18px; width: 90px; height: 26px; margin-left: -45px; border-radius: 999px; background: #0D0D0F; }
@keyframes tel-entra { from { opacity: 0; transform: rotate(8deg) translateY(120px); } }
@keyframes tel-galleggia { 50% { transform: rotate(-2.5deg) translateY(-12px); } }
.fuoco__schermo { position: relative; height: 100%; overflow: hidden; border-radius: 39px; background: #fff; }
.ig { position: absolute; inset: 0; padding-top: 52px; background: #fff; color: #111; font: 400 12px/1.35 var(--font-testo); opacity: 0; transform: scale(1.04); transition: opacity .8s ease, transform 1s cubic-bezier(.2, .8, .2, 1); }
.ig.attivo { opacity: 1; transform: none; }
.ig__alto { display: flex; justify-content: space-between; align-items: center; padding: 0 16px 8px; }
.ig__alto b { font-size: 13px; }
.ig__alto i { width: 16px; height: 14px; box-shadow: inset 0 0 0 2px #111; border-radius: 3px; }
.ig__testa { display: flex; align-items: center; gap: 14px; padding: 6px 16px; }
.ig__av { flex: none; width: 64px; height: 64px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--f-b); }
.ig__num { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.ig__num b { display: block; font-size: 15px; } .ig__num span { font-size: 10px; color: #666; }
.ig__nome { display: block; padding: 4px 16px 0; font-size: 12.5px; }
.ig__bio { display: block; padding: 2px 16px 8px; color: #555; font-size: 11.5px; }
.ig__pul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 16px 12px; }
.ig__pul span { padding: 7px; border-radius: 8px; background: #EFEFF1; text-align: center; font-weight: 600; font-size: 11px; }
.ig__pul span:first-child { background: var(--f-a); color: #fff; }
.ig__griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ig__griglia li { position: relative; aspect-ratio: 1; background-color: var(--c2, #ddd); background-size: cover; background-position: center; }
.ig__griglia li.reel::after { content: ""; position: absolute; right: 7px; top: 7px; width: 10px; height: 11px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ig__msg { position: absolute; left: 12px; right: 12px; bottom: 16px; padding: 11px 14px; border-radius: 16px 16px 16px 4px; background: #fff; box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .5); animation: msg 5s var(--rimbalzo) infinite; }
.ig__msg small { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--f-a); font-weight: 700; }
.ig__msg b { display: block; margin-top: 2px; font-size: 13.5px; }
@keyframes msg { 0%, 20% { opacity: 0; transform: translateY(16px) scale(.85); } 30%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }

.fuoco__nota {
  position: absolute; z-index: 4; width: 230px; padding: 16px 18px; border-radius: 18px; text-align: left; color: #fff;
  background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 30px 60px -30px rgba(0, 0, 0, .5);
  animation: nota-entra .9s var(--rimbalzo) both, tel-galleggia 8s ease-in-out infinite;
}
.fuoco__nota b { display: block; font: 600 1.35rem/1 var(--font-titoli); letter-spacing: -.02em; }
.fuoco__nota p { margin-top: 8px; font-size: .84rem; line-height: 1.4; color: rgba(255, 255, 255, .88); }
.fuoco__nota--0 { left: 0; top: 70px; animation-delay: .5s, 0s; }
.fuoco__nota--1 { right: -10px; top: 220px; animation-delay: .7s, -2.5s; }
.fuoco__nota--2 { left: 10px; bottom: 60px; animation-delay: .9s, -5s; }
@keyframes nota-entra { from { opacity: 0; transform: translateY(30px) scale(.9); } }
@media (max-width: 1060px) { .fuoco { grid-template-columns: minmax(0, 1fr); padding-bottom: 40px; min-height: 0; } .fuoco__scena { height: 640px; } }
@media (max-width: 560px) {
  .fuoco { margin: 6px; border-radius: 22px; padding-top: 122px; }
  .fuoco__angoli span:nth-child(1), .fuoco__angoli span:nth-child(2) { top: 96px; }
  .fuoco__azioni a { flex: 1 1 100%; justify-content: space-between; }
  .fuoco__scena { height: 560px; }
  .fuoco__telefono { transform: rotate(-3deg) scale(.86); animation: none; }
  .fuoco__nota { width: 180px; padding: 12px 14px; }
  .fuoco__nota b { font-size: 1.05rem; } .fuoco__nota p { font-size: .76rem; }
  .fuoco__nota--0 { left: -6px; top: 10px; } .fuoco__nota--1 { right: -6px; top: 230px; } .fuoco__nota--2 { left: -6px; bottom: 10px; }
}

/* ------------------------------------------------------------ la principale: apertura 8, «la griglia» (16 ottobre)
   Scelta da Alfredo fra dieci (DigitaSOCIAL/proposte): titolo grosso in maiuscolo con la parola scritta a mano, una
   griglia di post in prospettiva (post misti delle quattro attività), un reel, un post da approvare, il bollino. */
.fuoco--griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: linear-gradient(135deg, var(--f-a) 0%, #FF5A1F 55%, var(--f-b) 100%); }
.fuoco--griglia .fuoco__testo { max-width: 660px; }
/* 16 ottobre: tutta l'apertura sta in uno schermo, anche basso («fai tutto più piccolo in modo che non va fuori») */
.fuoco--griglia { min-height: min(calc(100svh - 20px), 860px); padding-top: clamp(112px, 16vh, 140px); padding-bottom: clamp(28px, 5vh, 56px); }
.fuoco--griglia .fuoco__etichetta { margin-bottom: clamp(12px, 2.2vh, 20px); }
.fuoco--griglia .fuoco__testo > p { margin-top: clamp(12px, 2.2vh, 20px); font-size: 1.02rem; }
.fuoco--griglia .fuoco__azioni { margin-top: clamp(16px, 3vh, 28px); }
.fuoco__etichetta { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); color: #fff; font: 600 .76rem/1 var(--font-testo); letter-spacing: .13em; text-transform: uppercase; transform: rotate(-2deg); }
.fuoco--griglia h1 { font-weight: 800; font-size: clamp(2.1rem, min(1rem + 3.4vw, 7.2vh), 4.6rem); line-height: .92; letter-spacing: -.045em; text-transform: uppercase; text-wrap: balance; }
.fuoco--griglia h1 em {
  display: inline-block; white-space: nowrap; padding: 0 .05em .2em; font: 400 1.14em/.8 "Caveat Brush", "Bradley Hand", cursive; font-style: normal; letter-spacing: 0;
  text-transform: none; color: #FFE9CF; opacity: 1; transform: rotate(-3deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 40 2, 70 12, 105 6 S 165 3, 197 7' fill='none' stroke='%23FFE9CF' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left bottom / 100% .24em no-repeat;
}
.fuoco__parete { position: relative; z-index: 2; height: clamp(420px, calc(100svh - 170px), 620px); display: grid; place-items: center; perspective: 1400px; }
.fuoco__muro { width: min(500px, 100%, calc((100svh - 220px) * .76)); margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; transform: rotateX(16deg) rotateY(-20deg) rotateZ(5deg); animation: muro-entra 1.2s var(--rimbalzo) both; }
@keyframes muro-entra { from { opacity: 0; transform: rotateX(30deg) rotateY(-30deg) rotateZ(10deg) translateY(80px); } }
.fuoco__muro li { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; background-color: rgba(255, 255, 255, .2); background-size: cover; background-position: center; box-shadow: 0 30px 40px -24px rgba(60, 10, 0, .7); }
.fuoco__muro li.reel::after { content: "Reel"; position: absolute; right: 8px; top: 8px; padding: 3px 8px; border-radius: 999px; background: #fff; color: #111; font-size: .7rem; font-weight: 700; }
.fuoco__muro li.approva::after { content: "Da approvare"; position: absolute; left: 8px; bottom: 8px; padding: 5px 10px; white-space: nowrap; border-radius: 999px; background: #FFE9CF; color: var(--f-a); font-size: .72rem; font-weight: 700; }
.fuoco__muro li.acceso { outline: 4px solid #FFE9CF; outline-offset: 3px; }
.fuoco__targhetta { position: absolute; z-index: 5; top: 40px; left: 6%; display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 999px; background: #fff; color: var(--testo); font-weight: 600; font-size: .9rem; transform: rotate(-4deg); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5); }
.fuoco__targhetta > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--f-a); color: #fff; }
.fuoco__targhetta .pittogramma { width: 20px; height: auto; }
.fuoco__targhetta small { color: var(--tenue); font-weight: 500; }
.fuoco__bollo { position: absolute; z-index: 6; left: 2%; bottom: 40px; width: 132px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #FFE9CF; color: var(--f-a); text-decoration: none; transition: transform .4s var(--rimbalzo); }
.fuoco__giro { position: absolute; inset: 0; width: 100%; height: 100%; animation: fuoco-gira 16s linear infinite; }
.fuoco__giro text { font: 700 10.5px var(--font-testo); fill: currentColor; }
.fuoco__bollo b { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--f-a); color: #fff; }
.fuoco__bollo b svg { width: 18px; height: 18px; }
@media (hover: hover) { .fuoco__bollo:hover { transform: scale(1.06); } }
@keyframes fuoco-gira { to { transform: rotate(360deg); } }
@media (max-width: 1060px) { .fuoco--griglia { grid-template-columns: minmax(0, 1fr); } .fuoco__parete { height: 540px; } }
@media (max-width: 560px) {
  .fuoco__parete { height: 420px; }
  .fuoco__muro { transform: rotateX(12deg) rotateY(-14deg) rotateZ(4deg); }
  .fuoco__targhetta { top: 0; left: 0; }
  .fuoco__muro li.approva::after { left: 5px; bottom: 5px; padding: 4px 7px; font-size: .6rem; }
  .fuoco__bollo { width: 104px; left: auto; right: 0; bottom: 0; }
}

/* 16 ottobre, Alfredo: i due pulsanti dell'apertura sempre sulla stessa riga, su computer e telefono. Se lo spazio non
   basta, i pulsanti si stringono e le scritte si accorciano in «Preventivo» ed «Esempi». */
.fuoco--griglia .fuoco__testo { container-type: inline-size; }
.fuoco--griglia .fuoco__azioni { flex-wrap: nowrap; gap: 10px; }
.fuoco--griglia .fuoco__azioni a { flex: 0 1 auto; min-width: 0; min-height: 52px; padding: 0 6px 0 20px; gap: 12px; font-size: .98rem; white-space: nowrap; justify-content: space-between; }
.fuoco--griglia .fuoco__azioni a span { flex: none; width: 40px; height: 40px; }
.fuoco--griglia .fuoco__azioni b { font: inherit; }
@container (max-width: 500px) {
  .fuoco--griglia .fuoco__azioni a { flex: 1 1 0; padding-left: 16px; gap: 8px; font-size: .92rem; }
  .fuoco--griglia .fuoco__azioni .lungo { display: none; }
  .fuoco--griglia .fuoco__azioni [data-vai-esempi] { font-size: 0; }
  .fuoco--griglia .fuoco__azioni [data-vai-esempi]::before { content: "Esempi"; font-size: .92rem; }
  .fuoco--griglia .fuoco__azioni [data-vai-esempi] span { font-size: 1rem; }
}
@container (max-width: 300px) {
  .fuoco--griglia .fuoco__azioni a { min-height: 46px; padding-left: 12px; }
  .fuoco--griglia .fuoco__azioni a span { width: 34px; height: 34px; }
}

/* 16 ottobre, Alfredo: su telefono e tablet (quando la griglia sta sotto il testo) l'etichetta «Il tuo profilo · esempio»
   scende in basso sull'immagine centrale della griglia, così non sembra un pulsante sotto quelli dell'apertura. Vale
   sulla principale e su tutte le attività. Il fondo dell'etichetta sta poco sopra il fondo della foto centrale: mezza
   foto è circa un quinto della larghezza della griglia (la stessa misura di .fuoco__muro). */
@media (max-width: 1060px) {
  .fuoco--griglia .fuoco__parete { container-type: inline-size; }
  .fuoco--griglia .fuoco__targhetta { top: calc(50% + min(500px, 100cqw, (100svh - 220px) * .76) * .2 - 12px); left: 50%; white-space: nowrap; transform: translate(-50%, -100%) rotate(-4deg); }
}
@media (max-width: 560px) {
  .fuoco--griglia .fuoco__targhetta { gap: 8px; padding: 5px 13px 5px 5px; font-size: .8rem; }
  .fuoco--griglia .fuoco__targhetta > span { width: 28px; height: 28px; }
  .fuoco--griglia .fuoco__targhetta .pittogramma { width: 15px; }
}

/* 16 ottobre, Alfredo (regola per tutte le aree, principale e attività): il testo parte a filo del bordo sinistro del
   menu, la griglia finisce a filo del bordo destro del pulsante «Preventivo istantaneo»; sul computer il testo è alto
   quanto la griglia, con gli elementi distribuiti fra la cima e il fondo. Il menu è largo quanto .testata in stile.css;
   il riquadro ha 10 px di margine (6 px sul telefono), che qui si tolgono. */
.fuoco--griglia { padding-left: max(calc(var(--margine) - 10px), calc((100% - var(--larga) + 2 * var(--margine) - 120px) / 2 - 10px)); padding-right: max(calc(var(--margine) - 10px), calc((100% - var(--larga) + 2 * var(--margine) - 120px) / 2 - 10px)); }
@media (max-width: 560px) { .fuoco--griglia { padding-left: calc(var(--margine) - 6px); padding-right: calc(var(--margine) - 6px); } }
@media (min-width: 1061px) {
  /* --muro-l: la larghezza della griglia (come .fuoco__muro); --muro-a: la sua altezza (righe 4:5, 10 px fra le foto).
     La prospettiva la fa sporgere un poco: a destra di circa il 2,4 %, in alto di 5 px e in basso di più quando è grande
     (misurata a 1280, 1440 e 1720 px). */
  .fuoco--griglia { container-type: inline-size; align-content: center; --muro-l: min(500px, (100cqw - 20px) / 2, (100svh - 220px) * .76); --muro-a: calc(var(--muro-l) * 1.25 - 5px); }
  .fuoco--griglia .fuoco__parete { justify-items: end; }
  .fuoco--griglia .fuoco__muro { margin-right: calc(var(--muro-l) * .024); }
  .fuoco--griglia .fuoco__targhetta { left: calc(100% - var(--muro-l) * 1.024 + 10px); }
  .fuoco--griglia .fuoco__bollo { left: calc(100% - var(--muro-l) * 1.024 - 4px); }
  .fuoco--griglia .fuoco__testo { align-self: center; display: flex; flex-direction: column; min-height: calc(var(--muro-a) * 1.093 - 37px); margin-top: calc(var(--muro-a) * .093 - 27px); }
  .fuoco--griglia .fuoco__etichetta { align-self: flex-start; }
  /* l'etichetta resta attaccata al titolo; il sottotitolo sta a metà dello spazio libero, i pulsanti in fondo */
  .fuoco--griglia .fuoco__testo > p { margin-top: auto; padding-top: clamp(12px, 2.2vh, 20px); font-size: clamp(1.02rem, .55rem + .75vw, 1.22rem); line-height: 1.6; }
  .fuoco--griglia .fuoco__azioni { margin-top: auto; padding-top: clamp(16px, 3vh, 28px); }
}

/* ------------------------------------------------------------ le attività: la stessa griglia, vestita dal mestiere (16 ottobre)
   Alfredo sceglie per i centri estetici la proposta 1 («la griglia, vestita») e la vuole uguale sulle altre attività,
   cambiando foto e testi. Colori, caratteri e forme sono quelli del vestito di ogni nicchia. */
.fuoco--nicchia { --g-scuro: #1F3A34; --g-luce: #E4CDA9; }
.fuoco--nicchia .fuoco__etichetta { box-shadow: none; padding: 0; transform: none; gap: 10px; color: var(--g-luce); letter-spacing: .18em; }
.fuoco--nicchia .fuoco__etichetta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fuoco--griglia.fuoco--nicchia h1 { font-weight: 600; text-transform: none; letter-spacing: -.015em; line-height: .95; font-size: clamp(2.3rem, min(1.2rem + 3.6vw, 7.8vh), 4.8rem); }
.fuoco--griglia.fuoco--nicchia h1 em { display: inline; padding: 0; background: none; transform: none; white-space: normal; font: inherit; font-style: italic; font-weight: 500; letter-spacing: inherit; text-transform: inherit; color: var(--g-luce); }
.fuoco--nicchia .fuoco__pulsante:not(.fuoco__pulsante--vetro) { background: var(--g-luce); color: var(--g-scuro); box-shadow: none; }
.fuoco--nicchia .fuoco__pulsante:not(.fuoco__pulsante--vetro) span { background: var(--g-scuro); color: var(--g-luce); }
.fuoco--nicchia .fuoco__pulsante--vetro { background: transparent; }
.fuoco--nicchia .fuoco__muro li.approva::after { background: var(--g-luce); color: var(--g-scuro); }
.fuoco--nicchia .fuoco__muro li.acceso { outline-color: var(--g-luce); }
.fuoco--nicchia .fuoco__targhetta > span { background-size: cover; background-position: center; }
.fuoco--nicchia .fuoco__bollo { background: var(--g-luce); color: var(--g-scuro); }
.fuoco--nicchia .fuoco__bollo b { background: var(--g-scuro); color: var(--g-luce); }
/* bellezza: verde scuro e oro, corsivo, archi in alto */
.stile-bellezza .fuoco--nicchia { --g-scuro: #3A2430; --g-luce: #F4CFC7;
  background: radial-gradient(70% 80% at 85% 95%, rgba(199, 131, 126, .45) 0%, transparent 60%), linear-gradient(150deg, #3A2430 0%, #4D3943 60%, #5B4650 100%); }
/* officina: antracite e giallo, maiuscolo, spigoli vivi e la striscia da officina */
.stile-officina .fuoco--nicchia { --g-scuro: #16191D; --g-luce: #F2B705;
  background: radial-gradient(70% 80% at 85% 95%, rgba(242, 183, 5, .25) 0%, transparent 60%), linear-gradient(150deg, #16191D 0%, #23282F 60%, #2E343C 100%); }
.stile-officina .fuoco--nicchia::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: repeating-linear-gradient(-45deg, #F2B705 0 16px, #16191D 16px 32px); }
.stile-officina .fuoco--griglia.fuoco--nicchia h1 { font-weight: 700; text-transform: uppercase; letter-spacing: .005em; line-height: .9; }
.stile-officina .fuoco--griglia.fuoco--nicchia h1 em { font-style: normal; font-weight: 700; }
/* legale: blu notte e oro, corsivo sobrio */
.stile-legale .fuoco--nicchia { --g-scuro: #252B33; --g-luce: #C9D6E3;
  background: radial-gradient(70% 80% at 85% 95%, rgba(111, 139, 168, .32) 0%, transparent 60%), linear-gradient(150deg, #252B33 0%, #242E3A 60%, #303A47 100%); }
.stile-legale .fuoco--griglia.fuoco--nicchia h1, .stile-clinica .fuoco--griglia.fuoco--nicchia h1 { font-size: clamp(2.1rem, min(1.1rem + 3vw, 7vh), 4rem); }
/* clinica: petrolio e acqua, angoli morbidi */
.stile-clinica .fuoco--nicchia { --g-scuro: #13306B; --g-luce: #A9C8FF;
  background: radial-gradient(70% 80% at 85% 95%, rgba(169, 200, 255, .3) 0%, transparent 60%), linear-gradient(150deg, #13306B 0%, #284684 60%, #436683 100%); }
.stile-clinica .fuoco--griglia.fuoco--nicchia h1 { font-weight: 700; letter-spacing: -.035em; }
.stile-clinica .fuoco--griglia.fuoco--nicchia h1 em { font-style: normal; font-weight: 700; }

/* le tre attività nuove (16 ottobre): barbiere, caffè storico, osteria */
.stile-barbiere .fuoco--nicchia { --g-scuro: #0E1B2C; --g-luce: #E4343F;
  background: radial-gradient(70% 80% at 85% 95%, rgba(228, 52, 63, .22) 0%, transparent 60%), linear-gradient(150deg, #0E1B2C 0%, #15263D 60%, #1C3150 100%); }
.stile-barbiere .fuoco--nicchia::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: repeating-linear-gradient(-45deg, #E4343F 0 14px, #fff 14px 28px, #0E1B2C 28px 42px, #fff 42px 56px); }
.stile-barbiere .fuoco--griglia.fuoco--nicchia h1 { font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: .9; }
.stile-barbiere .fuoco--griglia.fuoco--nicchia h1 em { font-style: normal; font-weight: 600; }
.stile-barbiere .fuoco--nicchia .fuoco__pulsante:not(.fuoco__pulsante--vetro) { color: #fff; }
.stile-barbiere .fuoco--nicchia .fuoco__pulsante:not(.fuoco__pulsante--vetro) span { background: #fff; color: #E4343F; }
.stile-barbiere .fuoco--nicchia .fuoco__bollo b { color: #fff; }
.stile-caffe .fuoco--nicchia { --g-scuro: #4A2B21; --g-luce: #CFE3A9;
  background: radial-gradient(70% 80% at 85% 95%, rgba(242, 139, 149, .3) 0%, transparent 60%), linear-gradient(150deg, #4A2B21 0%, #57392E 60%, #65473D 100%); }
.stile-caffe .fuoco--griglia.fuoco--nicchia h1 { font-weight: 600; letter-spacing: .02em; line-height: 1; font-size: clamp(2.1rem, min(1.1rem + 3vw, 7vh), 4rem); }
.stile-caffe .fuoco--griglia.fuoco--nicchia h1 em { font-style: normal; }
.stile-osteria .fuoco--nicchia { --g-scuro: #191512; --g-luce: #F3B585;
  background: radial-gradient(70% 80% at 85% 95%, rgba(226, 102, 46, .28) 0%, transparent 60%), linear-gradient(150deg, #191512 0%, #251E1C 60%, #352926 100%); }
.stile-osteria .fuoco--griglia.fuoco--nicchia h1 { font-weight: 400; letter-spacing: -.005em; }
.stile-osteria .fuoco--griglia.fuoco--nicchia h1 em { font-style: normal; font-weight: 400; }
.comp-fuoco.stile-barbiere { --f-a: #0E1B2C; --f-b: #15263D; --f-c: #E4343F; }
.comp-fuoco.stile-caffe { --f-a: #4A2B21; --f-b: #65473D; --f-c: #F28B95; }
.comp-fuoco.stile-osteria { --f-a: #191512; --f-b: #352926; --f-c: #E2662E; }
/* 16 ottobre: sul computer il testo è alto quanto la griglia (vedi sopra), quindi i titoli crescono di circa un quarto */
@media (min-width: 1061px) {
  .fuoco--griglia h1 { font-size: clamp(2.1rem, min(1.25rem + 4.25vw, 9vh), 5.75rem); }
  .fuoco--griglia.fuoco--nicchia h1 { font-size: clamp(2.3rem, min(1.5rem + 4.5vw, 9.75vh), 6rem); }
  .stile-legale .fuoco--griglia.fuoco--nicchia h1, .stile-clinica .fuoco--griglia.fuoco--nicchia h1,
  .stile-caffe .fuoco--griglia.fuoco--nicchia h1 { font-size: clamp(2.1rem, min(1.4rem + 3.75vw, 8.75vh), 5rem); }
}

/* ------------------------------------------------------------ scegli la tua attività: quattro telefoni (principale) */
.fuoco__mono { font: 600 .74rem/1 var(--font-testo); letter-spacing: .14em; text-transform: uppercase; color: var(--ruolo-testo); }
.fuoco-scegli { max-width: var(--larga); margin: 0 auto; padding: clamp(64px, 8vw, 110px) var(--margine) 30px; text-align: center; }
.fuoco-scegli h2, .fuoco-piano h2 { margin-top: 14px; font: 600 clamp(2.4rem, 1.5rem + 3vw, 4.4rem)/1 var(--font-titoli); color: var(--scuro); }
.fuoco-scegli h2 em, .fuoco-piano h2 em { font-style: italic; color: var(--ruolo-testo); }
.fuoco-telefoni { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.fuoco-tel { display: grid; justify-items: center; gap: 10px; text-decoration: none; color: var(--scuro); transition: transform .45s var(--rimbalzo); }
.fuoco-tel:nth-child(even) { transform: translateY(30px); }
@media (hover: hover) { .fuoco-tel:hover { transform: translateY(-8px) rotate(-1.5deg); } .fuoco-tel:nth-child(even):hover { transform: translateY(22px) rotate(1.5deg); } }
.fuoco-tel__vetro { position: relative; width: 100%; max-width: 250px; aspect-ratio: 300 / 600; padding: 8px; border-radius: 38px; background: #0D0D0F; box-shadow: 0 40px 70px -40px rgba(60, 20, 0, .6); }
.fuoco-tel__vetro::after { content: ""; position: absolute; inset: 8px; border-radius: 30px; pointer-events: none; }
.fuoco-tel__vetro .ig { border-radius: 30px; overflow: hidden; inset: 8px; padding-top: 26px; font-size: 10px; }
.fuoco-tel__vetro .ig__av { width: 46px; height: 46px; }
.fuoco-tel__vetro .ig__num b { font-size: 12px; } .fuoco-tel__vetro .ig__bio { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fuoco-tel__vetro .ig__msg { display: none; }
.fuoco-tel > b { margin-top: 8px; font: 600 1.4rem/1.1 var(--font-titoli); letter-spacing: -.02em; }
.fuoco-tel > span { font: 500 .8rem/1 ui-monospace, Menlo, monospace; color: var(--tenue); }
@media (max-width: 960px) { .fuoco-telefoni { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .fuoco-telefoni { gap: 14px; } .fuoco-tel > b { font-size: 1.05rem; } .fuoco-tel > span { font-size: .66rem; } }

/* ------------------------------------------------------------ il piano del mese (attività) */
.fuoco-piano { max-width: var(--larga); margin: 0 auto; padding: clamp(64px, 8vw, 110px) var(--margine) 20px; }
.fuoco-piano__testa { max-width: 760px; }
.fuoco-piano__testa > p:last-child { margin-top: 14px; color: var(--tenue); font-size: 1.05rem; }
.fuoco-cal { margin-top: 30px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.fuoco-cal li { position: relative; aspect-ratio: 1; padding: 8px; border-radius: 14px; background: var(--chiaro); color: var(--tenue); overflow: hidden; }
.fuoco-cal li span { position: relative; z-index: 1; font-weight: 700; font-size: .85rem; }
.fuoco-cal li.pieno { background-size: cover; background-position: center; color: #fff; box-shadow: 0 16px 30px -20px rgba(0, 0, 0, .6); }
.fuoco-cal li.pieno::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .55)); }
.fuoco-cal li.pieno em { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 8px; font: 600 .74rem/1.1 var(--font-testo); font-style: normal; color: #fff; }
.fuoco-cal li.reel::after { content: "Reel"; position: absolute; z-index: 1; right: 8px; top: 8px; padding: 2px 6px; border-radius: 999px; background: #fff; color: #111; font-size: .62rem; font-weight: 700; }
.js .fuoco-cal li.pieno { opacity: 0; transform: scale(.8); transition: opacity .5s ease, transform .7s var(--rimbalzo); }
.js .vista .fuoco-cal li.pieno { opacity: 1; transform: none; }
.fuoco-piano__nota { margin-top: 14px; color: var(--tenue); font-size: .9rem; }
@media (max-width: 560px) { .fuoco-cal { gap: 4px; } .fuoco-cal li { border-radius: 8px; padding: 4px; } .fuoco-cal li.pieno em { display: none; } .fuoco-cal li span { font-size: .7rem; } }

.comp-fuoco .sezione__testa h2, .comp-fuoco .richiesta__testo h2 { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .fuoco__lettere, .fuoco__telefono, .fuoco__nota, .ig__msg, .fuoco__muro, .fuoco__giro { animation: none; } }

/* ============================================================ la principale: le sezioni sotto l'apertura (16 ottobre)
   Scelte da Alfredo fra le proposte (DigitaSOCIAL/proposte/sezioni/): 1C, 2A, 3C, 4A, 5C, 6B, 7A. Prefisso «ds-». */
.ds {
  --ds-r1: #D92B0B; --ds-r2: #FF5A1F; --ds-r3: #FF7A1A; --ds-pesca: #FFB15C; --ds-crema: #FFE9CF; --ds-carta: #FFF6EF;
  --ds-notte: #140904; --ds-notte2: #26150D; --ds-ink: #1F0E07; --ds-tenue: #7A5C50;
  position: relative; overflow: hidden; isolation: isolate; margin: 10px; border-radius: 30px; color: var(--ds-ink);
  padding: 96px max(var(--margine), calc((100% - var(--larga)) / 2 + var(--margine)));
}
.ds--bianco { background: #fff; }
.ds--carta { background: var(--ds-carta); }
.ds--notte { background: var(--ds-notte); color: #fff; }
.ds--arancio { background: linear-gradient(135deg, var(--ds-r1) 0%, var(--ds-r2) 55%, var(--ds-r3) 100%); color: #fff; }
.ds h2 { margin: 0; color: inherit; font: 800 clamp(2.1rem, 1rem + 3.4vw, 4.2rem)/.94 var(--font-titoli); letter-spacing: -.045em; text-transform: uppercase; text-wrap: balance; }
.ds h3 { margin: 0; color: inherit; }
.ds-testa { display: grid; gap: 16px; max-width: 760px; margin-bottom: 48px; }
.ds-testa--centro { margin-inline: auto; text-align: center; justify-items: center; }
.ds-etichetta { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; transform: rotate(-2deg); box-shadow: inset 0 0 0 1.5px currentColor; font: 600 .76rem/1 var(--font-testo); letter-spacing: .13em; text-transform: uppercase; }
.ds-testa--centro .ds-etichetta { justify-self: center; }
.ds-chiaro .ds-etichetta { color: var(--ds-r1); }
.ds--notte .ds-etichetta { color: var(--ds-pesca); }
.ds-intro { max-width: 34em; font-size: 1.07rem; line-height: 1.55; }
.ds-chiaro .ds-intro { color: var(--ds-tenue); }
.ds--notte .ds-intro, .ds--arancio .ds-intro { color: rgba(255, 255, 255, .82); }
.ds-scritta {
  display: inline-block; white-space: nowrap; padding: 0 .05em .2em; font: 400 1.14em/.8 "Caveat Brush", "Bradley Hand", cursive; font-style: normal;
  letter-spacing: 0; text-transform: none; color: var(--ds-crema); transform: rotate(-3deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 40 2, 70 12, 105 6 S 165 3, 197 7' fill='none' stroke='%23FFE9CF' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left bottom / 100% .24em no-repeat;
}
.ds-chiaro .ds-scritta { color: var(--ds-r1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 40 2, 70 12, 105 6 S 165 3, 197 7' fill='none' stroke='%23D92B0B' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.ds--notte .ds-scritta { color: var(--ds-r3); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 40 2, 70 12, 105 6 S 165 3, 197 7' fill='none' stroke='%23FFB15C' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
/* la stessa forma dei pulsanti di tutte le aree (--r-pulsante, 52px): 17 ottobre */
.ds-bott { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 0 8px 0 22px; border-radius: var(--r-pulsante); text-decoration: none; font: 600 1rem/1 var(--font-testo); color: #fff; background: var(--ds-r2); transition: transform .35s var(--rimbalzo); }
.ds-bott > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--ds-r1); transition: transform .4s var(--rimbalzo); }
.ds-bott svg, .ds-scheda > i svg, .ds-marchio > i svg { width: 18px; height: 18px; }
@media (hover: hover) { .ds-bott:hover { transform: translateY(-2px); } .ds-bott:hover > span { transform: rotate(45deg); } }
.ds-bott:focus-visible, .ds-opzione:focus-visible, .ds-interr:focus-visible, .ds-tel4 a:focus-visible, .ds-marchio:focus-visible { outline: 3px solid var(--ds-pesca); outline-offset: 4px; }
.ds-spunta { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 6px; border-radius: 50%; background: var(--ds-r2); color: #fff; }
.ds-spunta svg { width: 14px; height: 14px; }

/* 1C · senza piano o con DigitaSocial */
.ds-confronto { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.ds-lista { padding: 34px; border-radius: 28px; }
.ds-lista h3 { font: 800 1.6rem/1 var(--font-titoli); letter-spacing: -.03em; text-transform: uppercase; }
.ds-lista ul { margin-top: 22px; display: grid; }
.ds-lista li { display: flex; align-items: flex-start; gap: 14px; padding: 15px 0; border-top: 1px solid rgba(31, 14, 7, .1); font-size: 1.05rem; }
.ds-lista li i { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-weight: 800; font-size: .9rem; }
.ds-lista--senza { background: #F3EEEA; color: var(--ds-tenue); }
.ds-lista--senza h3 { color: var(--ds-ink); }
.ds-lista--senza li i { background: #E2D9D3; color: var(--ds-tenue); }
.ds-lista--con { background: linear-gradient(150deg, var(--ds-r1), var(--ds-r2) 60%, var(--ds-r3)); color: #fff; }
.ds-lista--con li { border-color: rgba(255, 255, 255, .25); }
.ds-lista--con li i { background: #fff; color: var(--ds-r1); }
.ds-ponte { position: absolute; left: 50%; top: 50%; z-index: 2; width: 64px; height: 64px; margin: -32px; display: grid; place-items: center; border-radius: 50%; background: var(--ds-notte); color: #fff; font-size: 1.5rem; box-shadow: 0 0 0 8px #fff; }

/* 2A · le schede scure */
.ds-testa-riga { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 28px; margin-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.ds-testa-riga .ds-testa { margin-bottom: 0; }
.ds-testa-riga > p { max-width: 22rem; color: rgba(255, 255, 255, .7); text-align: right; }
.ds-schede { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ds-scheda { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 12px; border-radius: 26px; background: var(--ds-notte2); }
.ds-scheda b { display: block; max-width: 8em; padding-right: 56px; font: 700 2rem/1 var(--font-titoli); letter-spacing: -.035em; color: var(--ds-pesca); }
.ds-scheda p { max-width: 20rem; color: rgba(255, 255, 255, .72); font-size: .94rem; }
.ds-scheda > i { position: absolute; right: 18px; top: 18px; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.ds-foto { margin-top: auto; height: 210px; border-radius: 18px; background-color: #333; background-size: cover; background-position: center; filter: grayscale(.25); }
.ds-scheda--accesa { background: var(--ds-r2); }
.ds-scheda--accesa b { color: #fff; }
.ds-scheda--accesa p { color: rgba(255, 255, 255, .92); }
.ds-scheda--accesa .ds-foto { filter: none; }
.ds-pillole { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.ds-pillole span { padding: 11px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); font-weight: 600; font-size: .93rem; }

/* 3C · dal telefono */
.ds-schermi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.ds-schermi li { display: grid; justify-items: center; gap: 16px; text-align: center; }
.ds-schermi h3 { font: 700 1.2rem/1.1 var(--font-titoli); letter-spacing: -.02em; }
.ds-schermi h3 em { margin-right: 6px; color: var(--ds-r3); font-style: normal; }
.ds-schermi p { margin-top: -8px; max-width: 16rem; color: rgba(255, 255, 255, .7); font-size: .9rem; }
.ds-mtel { position: relative; width: 100%; max-width: 230px; aspect-ratio: 9 / 18; padding: 8px; border-radius: 36px; background: #0D0D0F; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .14), 0 40px 60px -30px rgba(0, 0, 0, .8); }
.ds-mtel::before { content: ""; position: absolute; z-index: 3; left: 50%; top: 14px; width: 64px; height: 18px; margin-left: -32px; border-radius: 999px; background: #0D0D0F; }
.ds-mtel > div { position: relative; height: 100%; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 44px 12px 12px; border-radius: 29px; background: #fff; color: #111; font: 400 11px/1.35 var(--font-testo); text-align: left; }
.ds-mtel > div > b { font-size: 11.5px; }
.ds-mtel > div > small { color: #888; font-size: 10px; }
.ds-mtel > .ds-blocco { background: linear-gradient(160deg, var(--ds-r1), var(--ds-r3)); color: #fff; }
.ds-ora { margin: 10px 0 14px; text-align: center; font: 700 2.4rem/1 var(--font-titoli); letter-spacing: -.03em; }
.ds-notifica { display: flex; gap: 8px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .92); color: #111; }
.ds-notifica > span { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: var(--ds-r2); color: #fff; }
.ds-notifica .pittogramma { width: 15px; height: auto; }
.ds-notifica b { display: block; font-size: 11px; }
.ds-anteprima { height: 46%; flex: none; border-radius: 12px; background-color: #ddd; background-size: cover; background-position: center; }
.ds-riga { flex: none; height: 7px; border-radius: 4px; background: #ECE6E2; }
.ds-riga--corta { width: 60%; }
.ds-tasto { flex: none; display: grid; place-items: center; height: 38px; border-radius: 11px; background: var(--ds-r2); color: #fff; font-weight: 700; font-size: 12px; }
.ds-tasto--chiaro { margin-top: auto; height: 32px; background: #F1ECE8; color: #111; }
.ds-pubblicato { align-self: flex-start; padding: 4px 9px; border-radius: 999px; background: #E3F5E6; color: #23733A; font-weight: 700; font-size: 10px; }
.ds-grafico { position: relative; flex: none; height: 90px; margin-top: 6px; overflow: hidden; border-radius: 12px; background: #FFF3EC; }
.ds-grafico svg { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); overflow: visible; }
.ds-grafico path { fill: none; stroke: var(--ds-r2); stroke-width: 2.5; stroke-linecap: round; }

/* 4A · quattro telefoni */
.ds-tel4 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 40px; max-width: 980px; margin: 0 auto; }
.ds-tel4 a { min-width: 0; display: grid; justify-items: center; gap: 12px; color: var(--ds-ink); text-decoration: none; transition: transform .45s var(--rimbalzo); }
.ds-tel4 a:nth-child(3n + 2) { transform: translateY(32px); }
@media (hover: hover) { .ds-tel4 a:hover { transform: translateY(-8px) rotate(-1.5deg); } .ds-tel4 a:nth-child(3n + 2):hover { transform: translateY(24px) rotate(1.5deg); } }
.ds-tel4 > a > b { margin-top: 6px; text-align: center; font: 800 1.35rem/1.05 var(--font-titoli); letter-spacing: -.03em; text-transform: uppercase; }
.ds-dominio { font: 500 .8rem/1 ui-monospace, Menlo, monospace; color: var(--ds-tenue); }
.ds-tel { position: relative; width: 290px; aspect-ratio: 300 / 620; padding: 10px; border-radius: 46px; background: #0D0D0F; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15), 0 50px 80px -40px rgba(60, 20, 0, .6); zoom: .82; }
.ds-tel::before { content: ""; position: absolute; z-index: 3; left: 50%; top: 18px; width: 86px; height: 25px; margin-left: -43px; border-radius: 999px; background: #0D0D0F; }
.ds-tel__schermo { position: relative; height: 100%; overflow: hidden; border-radius: 37px; background: #fff; }
.ds-ig { position: absolute; inset: 0; padding-top: 52px; background: #fff; color: #111; font: 400 12px/1.35 var(--font-testo); text-transform: none; letter-spacing: 0; text-align: left; }
.ds-ig__alto { display: flex; justify-content: space-between; align-items: center; padding: 0 16px 10px; }
.ds-ig__alto b { font-size: 13px; }
.ds-ig__alto i { width: 16px; height: 14px; border-radius: 3px; box-shadow: inset 0 0 0 2px #111; }
.ds-ig__testa { display: flex; align-items: center; gap: 12px; padding: 4px 16px 12px; }
.ds-ig__av { flex: none; width: 60px; height: 60px; border-radius: 50%; background-color: #ddd; background-size: cover; background-position: center; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ds-r2); }
.ds-ig__testa b { display: block; font-size: 13px; }
.ds-ig__testa span { display: block; color: #666; font-size: 11px; }
.ds-ig__pul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 16px 12px; }
.ds-ig__pul span { padding: 7px; border-radius: 8px; background: #EFEFF1; text-align: center; font-weight: 600; font-size: 11px; }
.ds-ig__pul span:first-child { background: var(--ds-r2); color: #fff; }
.ds-ig__griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0; padding: 0; list-style: none; }
.ds-ig__griglia li { position: relative; aspect-ratio: 1; background-color: #E4DEDA; background-size: cover; background-position: center; }
.ds-ig__griglia li.reel::after { content: ""; position: absolute; right: 7px; top: 7px; width: 10px; height: 11px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ds-arrivo { margin-top: 70px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.ds-arrivo small { margin-right: 6px; font: 600 .74rem/1 var(--font-testo); letter-spacing: .14em; text-transform: uppercase; color: var(--ds-tenue); }
.ds-arrivo span { padding: 9px 15px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(31, 14, 7, .1); font-weight: 500; font-size: .9rem; }
.ds-arrivo a { padding: 9px 15px; border-radius: 999px; background: var(--ds-ink); color: #fff; text-decoration: none; font-weight: 600; font-size: .9rem; }

/* 5C · il cursore dei prezzi */
.ds-cursore { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.ds-cursore__scegli { display: grid; gap: 12px; align-content: start; }
.ds-cursore__scegli > small { font: 600 .74rem/1 var(--font-testo); letter-spacing: .14em; text-transform: uppercase; color: var(--ds-crema); }
.ds-opzione { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 20px; border: 0; border-radius: var(--r-pulsante); background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); color: #fff; font: 600 1.05rem/1.2 var(--font-testo); text-align: left; cursor: pointer; transition: background .25s ease, transform .3s var(--rimbalzo); }
.ds-opzione i { flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8); }
.ds-opzione[aria-pressed="true"] { background: #fff; color: var(--ds-ink); box-shadow: none; transform: translateX(6px); }
.ds-opzione[aria-pressed="true"] i { background: var(--ds-r2); box-shadow: inset 0 0 0 5px #fff, 0 0 0 2px var(--ds-r2); }
.ds-interr { margin-top: 10px; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 0; border-radius: 16px; background: transparent; color: #fff; font: 500 1rem/1.2 var(--font-testo); text-align: left; cursor: pointer; }
.ds-interr span { flex: none; position: relative; width: 48px; height: 28px; border-radius: 999px; background: rgba(255, 255, 255, .25); transition: background .25s ease; }
.ds-interr span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .3s var(--rimbalzo); }
.ds-interr[aria-pressed="true"] span { background: var(--ds-notte); }
.ds-interr[aria-pressed="true"] span::after { transform: translateX(20px); }
.ds-risultato { display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: 28px; background: var(--ds-notte); color: #fff; }
.ds-risultato > small { font: 600 .74rem/1 var(--font-testo); letter-spacing: .14em; text-transform: uppercase; color: var(--ds-pesca); }
.ds-nome { font: 800 2.4rem/1 var(--font-titoli); letter-spacing: -.04em; text-transform: uppercase; }
.ds-cifra { font: 800 clamp(2.4rem, 1.4rem + 2.6vw, 3.8rem)/1 var(--font-titoli); letter-spacing: -.04em; color: var(--ds-r3); }
.ds-cifra small { display: block; margin-top: 8px; font: 500 .95rem/1 var(--font-testo); letter-spacing: 0; color: rgba(255, 255, 255, .7); }
.ds-risultato ul { display: grid; gap: 10px; margin: 0; padding: 16px 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .14); }
.ds-risultato li { display: flex; align-items: center; gap: 4px; }
.ds-piu { color: var(--ds-pesca); font-weight: 600; }
.ds-risultato .ds-bott { margin-top: auto; }
.ds-nota { margin-top: 26px; color: rgba(255, 255, 255, .85); font-size: .95rem; }

/* 6B · le domande in chat */
.ds-chat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 40px; }
.ds-coppia { display: grid; gap: 10px; }
.ds-dom { justify-self: start; max-width: 88%; padding: 14px 18px; border-radius: 20px 20px 20px 6px; background: var(--ds-notte2); font-weight: 600; font-size: 1.05rem; }
.ds-ris { justify-self: end; display: flex; align-items: flex-end; gap: 10px; max-width: 92%; }
.ds-ris p { padding: 14px 18px; border-radius: 20px 20px 6px 20px; background: var(--ds-r2); color: #fff; font-size: .98rem; line-height: 1.45; }
.ds-ris > span { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--ds-r2); }
.ds-ris .pittogramma, .ds-notifica .pittogramma { height: auto; }
.ds-ris .pittogramma { width: 18px; }

/* 7A · le altre aree */
.ds-marchi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ds-marchio { position: relative; overflow: hidden; min-width: 0; min-height: 300px; display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: 28px; text-decoration: none; color: #fff; transition: transform .45s var(--rimbalzo); }
@media (hover: hover) { .ds-marchio:hover { transform: translateY(-6px); } }
.ds-marchio small { font: 600 .74rem/1 var(--font-testo); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.ds-marchio b { font: 800 clamp(2rem, 1.2rem + 2vw, 3rem)/1 var(--font-titoli); letter-spacing: -.04em; }
.ds-marchio p { max-width: 24rem; font-size: 1.02rem; opacity: .9; }
.ds-marchio .ds-dominio { margin-top: auto; color: inherit; opacity: .75; }
.ds-marchio > i { position: absolute; right: 24px; top: 24px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--ds-ink); }
.ds-marchio::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.ds-marchio--visual { background: linear-gradient(150deg, #C42A1C, var(--ds-r2)); }
.ds-marchio--sito { background: linear-gradient(150deg, #2B1F9E, #473AE0); }

/* le sezioni sulle pagine delle attività (16 ottobre, Alfredo: «le stesse sezioni della principale, vestite da ogni
   mestiere»): i colori dell'area diventano quelli del vestito, la parola a mano diventa il corsivo del mestiere */
.su-nicchia .ds {
  --ds-r1: var(--ruolo-testo); --ds-r2: var(--ruolo); --ds-r3: var(--ruolo-luce); --ds-pesca: var(--ruolo-luce); --ds-crema: var(--ruolo-velo);
  --ds-carta: var(--carta); --ds-notte: var(--scuro); --ds-notte2: color-mix(in srgb, var(--scuro) 84%, #fff); --ds-ink: var(--testo); --ds-tenue: var(--tenue);
}
.su-nicchia .ds h2 { font-weight: 600; text-transform: none; letter-spacing: -.015em; }
.su-nicchia .ds-lista h3 { letter-spacing: .02em; font-weight: 600; }
.su-nicchia .ds-etichetta { box-shadow: none; padding: 0; transform: none; gap: 10px; letter-spacing: .18em; }
.su-nicchia .ds-etichetta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.su-nicchia .ds .ds-scritta { display: inline; white-space: normal; padding: 0; background: none; transform: none; font: inherit; font-style: italic; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; }
.su-nicchia .ds-chiaro .ds-scritta { color: var(--ruolo-testo); }
.su-nicchia .ds--notte .ds-scritta, .su-nicchia .ds--arancio .ds-scritta { color: var(--ruolo-luce); }
.su-nicchia .ds--arancio { background: radial-gradient(70% 80% at 85% 95%, color-mix(in srgb, var(--ruolo) 32%, transparent) 0%, transparent 60%), linear-gradient(150deg, var(--scuro) 0%, color-mix(in srgb, var(--scuro) 78%, #fff) 100%); }
.su-nicchia .ds-cursore__scegli > small { color: var(--ruolo-luce); }
.su-nicchia .ds-bott, .su-nicchia .ds--arancio .ds-bott { background: var(--ruolo); color: var(--su-ruolo); }
.su-nicchia .ds-bott > span, .su-nicchia .ds--arancio .ds-bott > span { background: var(--su-ruolo); color: var(--ruolo); }
.su-nicchia .ds-spunta { background: var(--ruolo); color: var(--su-ruolo); }
.su-nicchia .ds-lista--con { background: linear-gradient(150deg, var(--scuro), color-mix(in srgb, var(--scuro) 80%, #fff)); color: #fff; }
.su-nicchia .ds-lista--con li i { background: var(--ruolo); color: var(--su-ruolo); }
.su-nicchia .ds-ponte { background: var(--ruolo); color: var(--su-ruolo); }
.su-nicchia .ds-scheda--accesa { background: var(--ruolo); }
.su-nicchia .ds-scheda--accesa b, .su-nicchia .ds-scheda--accesa p { color: var(--su-ruolo); }
.su-nicchia .ds-scheda--accesa > i { background: color-mix(in srgb, var(--su-ruolo) 14%, transparent); color: var(--su-ruolo); }
.su-nicchia .ds-ris p { background: var(--ruolo); color: var(--su-ruolo); }
.su-nicchia .ds-ris > span { color: var(--scuro); }
.su-nicchia .ds-opzione[aria-pressed="true"] i { background: var(--ruolo); box-shadow: inset 0 0 0 5px #fff, 0 0 0 2px var(--ruolo); }
.su-nicchia .ds-cifra { color: var(--ruolo-luce); }
.su-nicchia .ds-mtel > .ds-blocco { background: linear-gradient(160deg, var(--scuro), color-mix(in srgb, var(--ruolo) 70%, var(--scuro))); }
.su-nicchia .ds-notifica > span { background: var(--scuro); color: var(--ruolo-luce); }
.su-nicchia .ds-tasto:not(.ds-tasto--chiaro) { background: var(--ruolo); color: var(--su-ruolo); }
.su-nicchia .ds-grafico { background: var(--ruolo-velo); }
.su-nicchia .ds-grafico path { stroke: var(--ruolo-testo); }
.su-nicchia .ds-schermi h3 em { color: var(--ruolo-luce); }
.stile-barbiere .ds h2 { text-transform: uppercase; letter-spacing: .01em; }
.stile-barbiere .ds .ds-scritta, .stile-caffe .ds .ds-scritta, .stile-osteria .ds .ds-scritta, .stile-clinica .ds .ds-scritta { font-style: normal; }
.stile-osteria .ds h2 { font-weight: 400; }
.stile-clinica .ds h2 { font-weight: 700; letter-spacing: -.03em; }
.stile-legale .ds h2 { font-weight: 500; }

@media (max-width: 1000px) {
  .ds { padding-block: 72px; }
  .ds-schede { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-cursore { grid-template-columns: minmax(0, 1fr); }
  .ds-schermi, .ds-tel4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-testa-riga { flex-direction: column; align-items: flex-start; }
  .ds-testa-riga > p { text-align: left; }
}
@media (max-width: 640px) {
  .ds { margin: 6px; border-radius: 22px; padding: 60px 16px; }
  .ds-confronto, .ds-schede, .ds-marchi, .ds-chat, .ds-schermi { grid-template-columns: minmax(0, 1fr); }
  .ds-schermi { gap: 36px; }
  .ds-ponte { display: none; }
  .ds-lista { padding: 24px; }
  .ds-tel { zoom: .52; }
  .ds-tel4 a:nth-child(3n + 2) { transform: none; }
  .ds-tel4 > a > b { font-size: .95rem; }
  .ds-dominio { font-size: .62rem; }
  .ds-marchio { min-height: 240px; padding: 24px; }
  .ds-risultato { padding: 24px; }
}

/* ------------------------------------------------------------ l'apertura comune (hero-approdo), dal 17 ottobre
   Alfredo (tramite DigitaPLAN): la stessa apertura delle altre aree, cambiano solo l'elemento a destra e il testo.
   Qui: i colori del vestito per le attività e l'elemento a destra, la griglia del profilo («hs-…»), disegnata a
   1120 × 780 px (HS_W × HS_H in genera.py) e scalata da hero.js. */
.ha--nicchia { --g-scuro: #1F3A34; --g-luce: #E4CDA9; }
.stile-bellezza .ha--nicchia { --g-scuro: #3A2430; --g-luce: #F4CFC7; }
.stile-officina .ha--nicchia { --g-scuro: #16191D; --g-luce: #F2B705; }
.stile-legale .ha--nicchia { --g-scuro: #252B33; --g-luce: #C9D6E3; }
.stile-clinica .ha--nicchia { --g-scuro: #13306B; --g-luce: #A9C8FF; }
.stile-barbiere .ha--nicchia { --g-scuro: #0E1B2C; --g-luce: #E4343F; }
.stile-caffe .ha--nicchia { --g-scuro: #4A2B21; --g-luce: #CFE3A9; }
.stile-osteria .ha--nicchia { --g-scuro: #191512; --g-luce: #F3B585; }

.hs { position: relative; width: 100%; height: 100%; padding: 26px; border-radius: 26px; background: #fff; color: #15162A; text-align: left;
  box-shadow: 0 50px 100px rgba(20, 22, 60, .22); font-family: "Onest", Inter, sans-serif; }
/* l'etichetta dell'account, come nell'apertura di prima: attaccata all'angolo, un po' storta, con «esempio» */
.hs__conto { position: absolute; z-index: 4; top: -30px; left: -34px; display: flex; align-items: center; gap: 14px; padding: 10px 28px 10px 10px;
  border-radius: 999px; background: #fff; color: #15162A; font-size: 23px; transform: rotate(-4deg);
  box-shadow: 0 26px 50px -18px rgba(0, 0, 0, .45), 0 0 0 1px rgba(20, 22, 60, .06); }
.hs__conto b { font-weight: 650; letter-spacing: -.01em; }
.hs__conto small { color: #8A8CA0; font-size: 19px; font-weight: 500; }
.hs__av { width: 58px; height: 58px; flex: none; border-radius: 50%; background: #ddd center / cover; }
.hs__av--marca { display: grid; place-items: center; background: var(--ha-colore); color: #fff; }
.hs__av--marca .pittogramma { width: 32px; height: auto; color: #fff; }
/* in alto: le schede del profilo e lo stato del piano del mese */
.hs__testa { display: flex; align-items: center; gap: 6px; height: 56px; padding-left: 420px; }
.hs__testa > span { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 16px; border-radius: 12px; color: #6B6D82; font-size: 18px; font-weight: 600; }
.hs__testa > span.on { background: #F1F1F6; color: #15162A; }
.hs__testa .i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hs__stato { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; color: #6B6D82; font: 500 18px/1 "Onest", Inter, sans-serif; font-style: normal; white-space: nowrap; }
.hs__stato i { width: 11px; height: 11px; border-radius: 50%; background: var(--ha-colore); transition: background .4s; }
.hs__stato b { color: var(--ha-colore); font-weight: 700; transition: color .4s; }
.hs--ok .hs__stato i { background: #1E8A50; }
.hs--ok .hs__stato b { color: #1E8A50; }
/* la griglia: otto post, quattro per riga */
.hs__griglia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.hs__griglia li { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: #E9E9EF center / cover; }
.hs__griglia li.entra { animation: hs-entra .8s cubic-bezier(.3, .7, .2, 1) both; }
@keyframes hs-entra { from { opacity: 0; transform: scale(.8); } }
.hs__reel { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px 6px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: #15162A; font-size: 15px; font-weight: 700; }
.hs__reel svg { width: 15px; height: 15px; fill: currentColor; }
.hs__chip { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px 8px 12px; border-radius: 999px;
  background: #fff; color: var(--ha-colore); font-size: 16px; font-weight: 700; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .4); }
.hs__chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.hs__chip.fatto { color: #1E8A50; animation: hs-ok .5s var(--rimbalzo) both; }
.hs__chip.fatto::before { content: "✓"; width: auto; height: auto; background: none; font-size: 15px; line-height: 1; }
@keyframes hs-ok { from { transform: scale(.8); } }
.hs__cuore { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.hs__cuore svg { width: 84px; height: 84px; fill: #fff; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35)); animation: hs-cuore 1.6s ease-out both; }
@keyframes hs-cuore { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; transform: scale(1.1); } 40% { transform: scale(.95); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1) translateY(-30px); } }
/* il messaggio che arriva, in basso a sinistra */
.hs__msg { position: absolute; z-index: 3; left: 44px; bottom: 44px; display: grid; gap: 6px; max-width: 470px; padding: 18px 24px; border-radius: 20px 20px 20px 6px;
  background: #fff; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(16px); pointer-events: none; }
.hs__msg small { color: #8A8CA0; font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hs__msg b { font-size: 22px; font-weight: 600; }
.hs__msg.su { animation: hs-msg 2.7s cubic-bezier(.3, .7, .2, 1) both; }
@keyframes hs-msg { 0% { opacity: 0; transform: translateY(16px); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
/* il logo della principale sta su una tessera bianca (stile.css): la «D» resta arancione anche nell'apertura comune */
body:has(.ha).main.comp-fuoco .testata .marca .pittogramma { color: var(--logo-area, #FF3B30); }
/* 17 ottobre, Alfredo: i titoli delle attività erano troppo piccoli; con il titolo breve («I social del tuo / centro
   estetico.») sono grandi come quello della principale. I caratteri dei vestiti sono più larghi del Saira della
   principale: --hs-titolo li riduce quanto serve perché la parola più lunga stia nella colonna. */
.comp-fuoco .ha--nicchia .ha__titolo { font-size: calc(1.5 * var(--hs-titolo, 1) * clamp(2.3rem, 1rem + 3.2vw, 3.7rem)); }