/* Viva Nail — Bespoke Studio. La scheda della vostra prossima manicure: forma, colore, effetto. Firma: la striscia dei
   cinque tips che si limano, si smaltano in tre pennellate e si lucidano; la scheda si compila (vedi js/main.js). */
:root {
  --carta: #FBF3F1;
  --foglio: #FFFFFF;
  --rosa: #F4D6D0;
  --rosa-2: #F9E9E5;
  --linea: #EBD6D1;
  --inchiostro: #2B1E24;
  --inchiostro-2: #5E4D55;
  --bordeaux: #6E2230;
  --bordeaux-2: #5B2025;
  --oro: #B98F58;
  --nude: #F3E1D9;
  --p1: #2155B3; --p2: #3E8FD6; --p3: #3BAA3A; --p4: #F2D22E; --p5: #F0862A; --p6: #E8322C; --p7: #9B2F9E;
  --f-titolo: 'DM Serif Text', 'Georgia', serif;
  --f-testo: 'Quicksand', 'Segoe UI', sans-serif;
  --f-penna: 'Reenie Beanie', 'Segoe Print', cursive;
  --gutter: clamp(16px, 4vw, 40px);
  --largo: 1200px;
}

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--carta); color: var(--inchiostro); font: 500 1.06rem/1.62 var(--f-testo); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 400; }
:focus-visible { outline: 3px solid var(--bordeaux); outline-offset: 3px; }
main > section { overflow-x: clip; }
.penna { font-family: var(--f-penna); color: var(--bordeaux); line-height: 1; }

/* ── reveal: nascosti solo con JS ── */
.js .reveal { opacity: 0; }
.js .reveal.in-view { opacity: 1; transition: opacity .6s ease; }
html:not(.js) .reveal { opacity: 1; }
.reduced-motion .reveal { opacity: 1 !important; }

/* ── il marchio: i sette petali del loro logo e VIVA NAIL ── */
.marchio { display: inline-flex; align-items: center; gap: .5em; margin: 0; white-space: nowrap; line-height: 1; }
.marchio__nome { font: 600 1.25em/1 var(--f-testo); letter-spacing: .08em; color: var(--inchiostro); }
.petali { position: relative; display: inline-block; width: 2.2em; height: 2.2em; flex: none; }
.petali i { position: absolute; left: 58%; top: 50%; width: .34em; height: .56em; margin: -.28em 0 0 -.17em; border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; transform-origin: 50% 50%; }
.petali i:nth-child(1) { background: var(--p1); transform: rotate(-158deg) translateY(-.8em) scale(1.25); }
.petali i:nth-child(2) { background: var(--p2); transform: rotate(-124deg) translateY(-.8em) scale(1.12); }
.petali i:nth-child(3) { background: var(--p3); transform: rotate(-92deg) translateY(-.8em) scale(1.02); }
.petali i:nth-child(4) { background: var(--p4); transform: rotate(-58deg) translateY(-.8em) scale(.94); }
.petali i:nth-child(5) { background: var(--p5); transform: rotate(-26deg) translateY(-.8em) scale(.86); }
.petali i:nth-child(6) { background: var(--p6); transform: rotate(6deg) translateY(-.8em) scale(.8); }
.petali i:nth-child(7) { background: var(--p7); transform: rotate(38deg) translateY(-.8em) scale(.72); }
.marchio--grande { font-size: clamp(1.6rem, 6vw, 2.8rem); }
.marchio--piede { font-size: 1.05rem; margin-bottom: 16px; }
.marchio--piede .marchio__nome { color: #FFFBFA; }

/* ── intro ── */
.intro { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: #FFFDFB; transition: opacity .5s ease; animation: intro-sicura .01s linear 8s forwards; }
.no-js .intro { display: none; }
.intro.hide { opacity: 0; pointer-events: none; }
@keyframes intro-sicura { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.intro__in { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 0 24px; text-align: center; animation: intro-su .9s ease both; }
@keyframes intro-su { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.intro__cosa { margin: 0; font: 400 2rem/1.1 var(--f-penna); color: var(--bordeaux); }
.intro__salta { position: absolute; right: 20px; bottom: 20px; background: none; border: 1.5px solid var(--linea); border-radius: 999px; color: var(--inchiostro-2); padding: 10px 18px; font: 700 .82rem/1 var(--f-testo); letter-spacing: .08em; cursor: pointer; }

/* ── barra mobile, lightbox ── */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; grid-template-columns: repeat(4, 1fr); background: var(--foglio); border-top: 1px solid var(--linea); box-shadow: 0 -6px 18px rgba(110, 34, 48, .08); padding-bottom: env(safe-area-inset-bottom); transform: translateY(110%); transition: transform .3s ease; }
.barra.is-visible { transform: none; }
.barra a { padding: 16px 4px; text-align: center; text-decoration: none; color: var(--inchiostro); font: 700 .86rem/1 var(--f-testo); border-left: 1px solid var(--linea); }
.barra a:first-child { border-left: 0; }
.barra a:nth-child(2) { background: var(--bordeaux); color: #FFFBFA; }
#lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(43, 30, 36, .94); display: flex; align-items: center; justify-content: center; padding: 24px; }
#lightboxImg { max-width: 94vw; max-height: 88vh; width: auto; height: auto; border-radius: 12px; }
#lightboxClose { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 50%; background: none; color: #FFFBFA; font: 400 28px/1 var(--f-testo); cursor: pointer; }

/* ── testata ── */
.testata { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: clamp(12px, 2vw, 26px); padding: 10px var(--gutter); background: rgba(255, 253, 251, .96); border-bottom: 1px solid var(--linea); }
.testata::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: linear-gradient(90deg, var(--p1), var(--p2), var(--p3), var(--p4), var(--p5), var(--p6), var(--p7)); opacity: .85; }
.testata__logo { display: inline-flex; text-decoration: none; font-size: .9rem; padding: 4px 0; }
.testata__nav { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px); margin-left: auto; }
.testata__nav a { display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none; font: 700 .95rem/1 var(--f-testo); padding: 10px 0; white-space: nowrap; }
.testata__nav a:hover { color: var(--bordeaux); }
.testata__nav .n { font: 700 .8rem/1 var(--f-testo); color: var(--bordeaux); }
.testata__destra { display: flex; align-items: center; gap: 12px; }
.lingue { display: flex; border: 1.5px solid var(--linea); border-radius: 999px; overflow: hidden; }
.lingue button { background: none; border: 0; padding: 7px 12px; font: 700 .8rem/1 var(--f-testo); letter-spacing: .06em; cursor: pointer; color: var(--inchiostro); }
.lingue button[aria-pressed="true"] { background: var(--inchiostro); color: #FFFBFA; }
.testata__wa { text-decoration: none; background: var(--bordeaux); color: #FFFBFA; border-radius: 999px; padding: 11px 18px; font: 700 .9rem/1 var(--f-testo); }
#burger { display: none; width: 46px; height: 46px; border: 1.5px solid var(--linea); border-radius: 50%; background: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; }
#burger span { display: block; width: 18px; height: 2px; background: var(--inchiostro); border-radius: 2px; }

/* ── bottoni ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 24px; border-radius: 999px; text-decoration: none; font: 700 1rem/1.15 var(--f-testo); cursor: pointer; text-align: center; }
.btn--bordeaux { background: var(--bordeaux); color: #FFFBFA; box-shadow: 0 8px 20px rgba(110, 34, 48, .22); }
.btn--bordeaux:hover { background: var(--bordeaux-2); }
.btn--filo { border: 2px solid var(--bordeaux); color: var(--bordeaux); background: var(--foglio); }

/* ── apertura: il testo e la scheda ── */
.apertura { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4.5vw, 64px); align-items: center; max-width: var(--largo); margin: 0 auto; padding: clamp(36px, 6vw, 72px) var(--gutter) clamp(48px, 7vw, 88px); }
.etichetta { display: inline-block; margin: 0 0 18px; padding: 7px 14px; border: 1.5px solid var(--linea); border-radius: 999px; background: var(--foglio); font: 700 .8rem/1.2 var(--f-testo); letter-spacing: .12em; text-transform: uppercase; color: var(--inchiostro-2); }
.apertura h1 { font: 400 clamp(2.6rem, 5.4vw, 4.6rem)/1.02 var(--f-titolo); margin-bottom: 22px; }
.apertura__s { font-size: 1.16rem; max-width: 32em; }
.apertura__stato { font-size: 1rem; margin-bottom: 6px; }
#orarioStato { font-weight: 700; color: var(--bordeaux); }
#orarioStato:not(:empty)::after { content: " · "; color: var(--inchiostro-2); font-weight: 500; }
.apertura__voto { font-size: .98rem; color: var(--inchiostro-2); }
.stella { color: var(--oro); }

.foglio { position: relative; background: var(--foglio); border: 1px solid var(--linea); border-radius: 20px; padding: clamp(18px, 2.6vw, 30px); box-shadow: 0 22px 50px rgba(110, 34, 48, .10); }
.foglio::before { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(10px, 1.4vw, 16px); width: 1.5px; background: rgba(110, 34, 48, .22); }
.foglio__testa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 6px 12px; padding-bottom: 10px; border-bottom: 1.5px dashed var(--linea); }
.foglio__t { margin: 0; font: 400 1.5rem/1.1 var(--f-titolo); }
.foglio__n { margin: 0; font-size: 2.1rem; white-space: nowrap; transform: rotate(-4deg); }
.tips-riquadro { margin: 12px 0 4px 12px; padding: 10px 4px 0; border-radius: 14px; background: linear-gradient(180deg, var(--rosa-2), #FFFFFF 78%); }
.tips { display: block; width: 100%; height: auto; overflow: visible; }
.tip__base { fill: var(--nude); }
.tip__bordo { fill: none; stroke: rgba(43, 30, 36, .22); stroke-width: 1.2; }
.tip__french { fill: var(--nude); opacity: 0; transition: opacity .5s ease; }
.tip__bb, .tip__perla, .tip__cromato, .tip__gatto { opacity: 0; transition: opacity .5s ease; }
.tip__perla { mix-blend-mode: screen; }
.tip__cromato { mix-blend-mode: hard-light; }
.tip__gatto { mix-blend-mode: screen; }
.tips[data-effetto="french"] .tip__french { opacity: 1; }
.tips[data-effetto="babyboomer"] .tip__bb { opacity: 1; }
.tips[data-effetto="perla"] .tip__perla { opacity: .64; }
.tips[data-effetto="cromato"] .tip__cromato { opacity: .8; }
.tips[data-effetto="gatto"] .tip__gatto { opacity: 1; }
.tip__lucido { fill: none; stroke: #FFFFFF; stroke-width: 7; stroke-linecap: round; opacity: .5; }
.tip__riflesso { opacity: 0; }
.striscia { fill: #FFFFFF; stroke: #E4CFCA; stroke-width: 1.5; }
.striscia__n { font: 700 13px var(--f-testo); fill: #8C7880; text-anchor: middle; }
.lima { opacity: 0; }
.lima__corpo { fill: #EFE6DC; stroke: #C9B8AA; stroke-width: 1.2; }
.reduced-motion .tips * { transition: none !important; }

.campi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; margin: 14px 0 6px 12px; }
.campo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.campo dt { font: 700 .78rem/1.2 var(--f-testo); letter-spacing: .14em; text-transform: uppercase; color: var(--inchiostro-2); }
.campo dd { margin: 0; min-height: 2.2rem; border-bottom: 1.5px dotted rgba(43, 30, 36, .35); }
.campo .penna { display: inline-block; font-size: 2.45rem; line-height: 1; white-space: nowrap; }

.scelte { display: grid; gap: 12px; margin: 16px 0 4px 12px; }
.no-js .scelte, .no-js .foglio__stato { display: none; }
.scelte__riga { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.scelte__eti { margin: 0; font: 700 .86rem/1.2 var(--f-testo); color: var(--inchiostro-2); }
.scelte__bottoni { display: flex; flex-wrap: wrap; gap: 8px; }
.scelta { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 14px; border: 1.5px solid var(--linea); border-radius: 999px; background: var(--foglio); color: var(--inchiostro); font: 700 .9rem/1 var(--f-testo); cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.scelta:hover { border-color: var(--bordeaux); }
.scelta[aria-pressed="true"] { background: var(--bordeaux); border-color: var(--bordeaux); color: #FFFBFA; }
.scelta__icona { width: 11px; height: 22px; fill: currentColor; flex: none; }
.scelta--colore { width: 38px; min-height: 38px; padding: 0; justify-content: center; }
.scelta--colore[aria-pressed="true"] { background: var(--foglio); border-color: var(--bordeaux); box-shadow: 0 0 0 2px var(--bordeaux); }
.scelta__goccia { width: 18px; height: 26px; background: var(--c); border-radius: 50% 50% 44% 44% / 62% 62% 38% 38%; box-shadow: inset 0 0 0 1px rgba(43, 30, 36, .18), inset 4px 3px 0 -1px rgba(255, 255, 255, .45); }
.foglio__stato { margin: 12px 0 0 12px; min-height: 1.5em; font-size: .95rem; color: var(--inchiostro-2); }
.foglio__tasti { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 0 12px; }

/* ── le sezioni: i campi della scheda ── */
.sezione { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); max-width: var(--largo); margin: 0 auto clamp(20px, 3vw, 32px); padding: clamp(28px, 4.4vw, 56px) clamp(18px, 3.4vw, 48px); background: var(--foglio); border: 1px solid var(--linea); border-radius: 22px; }
main > .sezione { width: calc(100% - 2 * var(--gutter)); }
.sezione__margine { border-right: 1.5px solid rgba(110, 34, 48, .22); padding-right: 16px; }
.sezione__n { margin: 0 0 6px; font: 700 .8rem/1.2 var(--f-testo); letter-spacing: .14em; text-transform: uppercase; color: var(--inchiostro-2); }
.penna--nota { font-size: 2.2rem; transform: rotate(-3deg); transform-origin: 0 50%; margin: 0; }
.sezione__corpo { min-width: 0; }
.sezione h2 { font: 400 clamp(2rem, 3.8vw, 3.1rem)/1.08 var(--f-titolo); margin-bottom: 18px; }
.sezione__lead { font-size: 1.1rem; max-width: 44em; }
.sezione__corpo--due { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.citazione-loro { margin: 0 0 20px; padding: 18px 22px; border-radius: 16px; background: var(--rosa-2); }
.citazione-loro p { margin: 0; font: italic 400 clamp(1.25rem, 2.2vw, 1.6rem)/1.35 var(--f-titolo); color: var(--bordeaux-2); }
.citazione-loro footer { margin-top: 8px; font: 600 .88rem/1.4 var(--f-testo); color: var(--inchiostro-2); }
.voce-cliente { margin: 18px 0 0; padding-left: 16px; border-left: 3px solid var(--rosa); }
.voce-cliente blockquote { margin: 0 0 6px; font-style: italic; }
.voce-cliente figcaption { font: 600 .88rem/1.4 var(--f-testo); color: var(--inchiostro-2); }

.foto { margin: 0; }
.foto-btn { display: block; width: 100%; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: var(--rosa-2); cursor: zoom-in; }
.foto-btn img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.foto-btn:hover img { transform: scale(1.03); }
.reduced-motion .foto-btn img { transition: none; }
.didascalia { margin-top: 10px; font: 600 .9rem/1.4 var(--f-testo); color: var(--inchiostro-2); }

.forme { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.forma { margin: 0; }
.forma .foto-btn { aspect-ratio: 4 / 5; }
.forma figcaption, .effetto figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.forma__nome, .effetto__nome { font: 400 1.45rem/1.1 var(--f-titolo); }
.forma__d, .effetto__d { font-size: .95rem; color: var(--inchiostro-2); }

.tavolozza { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 18px 0 0; padding: 0; list-style: none; }
.tavolozza li { display: inline-flex; align-items: center; gap: 8px; font: 600 .95rem/1.2 var(--f-testo); }
.tavolozza li::before { content: ""; width: 16px; height: 24px; background: var(--c); border-radius: 50% 50% 44% 44% / 62% 62% 38% 38%; box-shadow: inset 0 0 0 1px rgba(43, 30, 36, .18); }
.foto--bordeaux .foto-btn { aspect-ratio: 1 / 1; }

.effetti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; margin-top: 8px; }
.effetto--testo { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 26px 24px; border-radius: 16px; background: var(--rosa-2); }
.effetto--testo p { margin: 0; }
.effetto--testo .effetto__d { font-size: 1.06rem; color: var(--inchiostro); }
.effetto__tip { width: 46px; height: 92px; border-radius: 50% 50% 44% 44% / 64% 64% 36% 36%; background: linear-gradient(to top, var(--nude) 0%, var(--nude) 38%, #1B1719 100%); box-shadow: inset 0 0 0 1px rgba(43, 30, 36, .18), inset 7px 6px 0 -3px rgba(255, 255, 255, .5); }
.effetto { margin: 0; }
.effetto .foto-btn { aspect-ratio: 4 / 5; }
.effetto--basso img { object-position: 50% 100%; }
.sezione__nota { margin: 22px 0 0; font-size: 1.02rem; color: var(--inchiostro-2); }

.listino { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin-top: 10px; }
.voce { padding: 18px 20px; border: 1px solid var(--linea); border-radius: 16px; background: #FFFCFB; }
.voce__t { margin-bottom: 8px; font: 400 1.5rem/1.1 var(--f-titolo); }
.voce__l { margin: 0; padding: 0; list-style: none; }
.voce__l li { padding: 7px 0; border-bottom: 1.5px dotted rgba(43, 30, 36, .25); }
.voce__l li:last-child { border-bottom: 0; }
.foto--piedi { margin-top: 24px; }
.foto--piedi .foto-btn { aspect-ratio: 21 / 9; }
.foto--piedi img { object-position: 50% 24%; }

.note { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 10px; }
.nota { position: relative; margin: 0; padding: 26px 24px 20px; border: 1px solid var(--linea); border-radius: 18px; background: #FFFCFB; }
.nota::before { content: "“"; position: absolute; top: -6px; left: 18px; font: 400 3.6rem/1 var(--f-titolo); color: var(--rosa); }
.nota blockquote { margin: 0 0 12px; font-size: 1.06rem; }
.note .nota:first-child { grid-column: 1 / -1; background: var(--rosa-2); }
.note .nota:first-child blockquote { font: italic 400 clamp(1.2rem, 2vw, 1.45rem)/1.45 var(--f-titolo); color: var(--bordeaux-2); }
.nota figcaption { font: 700 .88rem/1.4 var(--f-testo); color: var(--inchiostro-2); }
.note__piede { margin: 18px 0 0; font-size: .88rem; color: var(--inchiostro-2); }
.galleria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.galleria .foto-btn { aspect-ratio: 3 / 2; }
.galleria .foto--basso img { object-position: 50% 100%; }
.galleria .foto--alto img { object-position: 50% 0%; }

.indirizzo { font-size: 1.12rem; font-weight: 600; }
.stato { font-weight: 700; color: var(--bordeaux); min-height: 1.4em; }
.orari { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 1.02rem; }
.orari__cap { text-align: left; padding-bottom: 8px; font: 400 1.9rem/1 var(--f-penna); color: var(--bordeaux); }
.orari th, .orari td { padding: 9px 12px; border-bottom: 1.5px dotted rgba(43, 30, 36, .25); text-align: left; font-weight: 600; }
.orari tr.is-today th, .orari tr.is-today td { background: var(--rosa-2); color: var(--bordeaux); }
.contatti { margin: 0 0 12px; padding: 0; list-style: none; }
.contatti li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.contatti__eti { font: 700 .8rem/1.4 var(--f-testo); letter-spacing: .12em; text-transform: uppercase; color: var(--inchiostro-2); }
.contatti a { font: 400 1.7rem/1.3 var(--f-titolo); text-decoration: none; color: var(--bordeaux); }
.nota-dove, .altro { font-size: .98rem; color: var(--inchiostro-2); }
.tasti { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
.dove { display: grid; gap: 18px; }
.foto--vetrina .foto-btn { aspect-ratio: 2 / 1; }
.mappa iframe { display: block; width: 100%; min-height: 320px; border: 1px solid var(--linea); border-radius: 16px; background: var(--rosa-2); }

.faq__lista { border-top: 1.5px dotted rgba(43, 30, 36, .3); }
.sezione--faq details { border-bottom: 1.5px dotted rgba(43, 30, 36, .3); }
.sezione--faq summary { cursor: pointer; padding: 16px 0; font: 400 1.3rem/1.3 var(--f-titolo); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.sezione--faq summary::-webkit-details-marker { display: none; }
.sezione--faq summary::after { content: "+"; font: 700 1.3rem/1 var(--f-testo); color: var(--bordeaux); }
.sezione--faq details[open] summary::after { content: "–"; }
.sezione--faq details p { margin: 0 0 16px; color: var(--inchiostro-2); }

/* ── piè di pagina ── */
.piede { background: var(--inchiostro); color: #F3E6E3; text-align: center; padding: 52px var(--gutter) calc(52px + env(safe-area-inset-bottom)); margin-top: clamp(28px, 4vw, 48px); }
.piede p { margin: 0 0 8px; }
.piede a { color: #FFFBFA; }
.piede__cred { margin-top: 16px !important; font-size: .9rem; color: #CDBBC0; max-width: 58em; margin-left: auto !important; margin-right: auto !important; }

/* ── responsive ── */
@media (max-width: 1120px) {
  #burger { display: flex; }
  .testata__nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 18px; background: #FFFDFB; border-bottom: 1px solid var(--linea); margin-top: 3px; }
  .testata__nav.nav-open { display: flex; }
  .testata__nav a { font-size: 1.04rem; padding: 13px 0; border-bottom: 1px dotted var(--linea); }
  .testata__destra { margin-left: auto; }
  .barra { display: grid; }
  .piede { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (max-width: 980px) {
  .apertura { grid-template-columns: minmax(0, 1fr); }
  .foglio { max-width: 680px; }
  .forme { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .effetti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sezione__corpo--due { grid-template-columns: minmax(0, 1fr); }
  .note { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sezione { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sezione__margine { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; border-right: 0; border-bottom: 1.5px solid rgba(110, 34, 48, .22); padding: 0 0 10px; }
  .listino { grid-template-columns: minmax(0, 1fr); }
  .galleria { grid-template-columns: minmax(0, 1fr); }
  .testata__wa { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 1.02rem; }
  .apertura h1 { font-size: 2.5rem; }
  .campi { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .campo { flex-direction: row; align-items: baseline; gap: 12px; }
  .campo dt { min-width: 76px; }
  .campo dd { flex: 1; }
  .scelte__riga { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .foglio__tasti .btn { flex: 1 1 100%; }
  .tasti .btn { flex: 1 1 100%; }
  .forme { grid-template-columns: minmax(0, 1fr); }
  .effetti { grid-template-columns: minmax(0, 1fr); }
  .forma .foto-btn, .effetto .foto-btn { aspect-ratio: 4 / 3; }
  .foto--piedi .foto-btn { aspect-ratio: 4 / 3; }
  .effetto--basso img { object-position: 50% 50%; }
  .effetto--alto img { object-position: 50% 0%; }
  .mappa iframe { min-height: 280px; }
}
@media (max-width: 400px) {
  .testata__logo { font-size: .8rem; }
  .scelta { padding: 7px 11px; font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
  .intro__in { animation: none; }
}

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