/* Mary · Sogni di Legno — «Carta fiabesca», ristrutturazione grafica del 04/10/2026
   Stesso design e stessa idea del kit (Design/kit/design sito.png): carta avorio in rilievo, arco nella
   hero, girasoli, foglie e farfalla, oro e miele, titoli serif col corsivo miele, bottoni miele, card col
   badge, passi numerati, banda finale coi girasoli, logo nel tondo. Colori di :root misurati sul design
   (solo #hex del design; le trasparenze si ricavano con color-mix fuori da :root).
   Font serviti dal sito (OFL): Fraunces (titoli e nomi dei prodotti; opsz variabile, SOFT fissato nel file:
   50 il tondo, 100 il corsivo), Figtree (testi, menu, etichette, pulsanti), Caveat (solo il cartellino). */

@font-face{font-family:Fraunces;src:url("../fonts/Fraunces-opsz-wght.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url("../fonts/Fraunces-Italic-opsz-wght.woff2") format("woff2");font-weight:400 650;font-style:italic;font-display:swap}
@font-face{font-family:Figtree;src:url("../fonts/Figtree-wght.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:Caveat;src:url("../fonts/Caveat-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
/* ripieghi con le stesse misure: niente salti quando arrivano i font */
@font-face{font-family:"Fraunces ripiego";src:local("Georgia");size-adjust:110%;ascent-override:89%;descent-override:23%;line-gap-override:0%}
@font-face{font-family:"Figtree ripiego";src:local("Arial");size-adjust:98%;ascent-override:96%;descent-override:25%;line-gap-override:0%}

:root{
  /* carta */
  --carta:#FAF3E4;
  --carta-chiara:#FCF9F0;
  --carta-media:#F6ECDA;
  --crema:#F5E5C6;
  --sabbia:#ECE0CD;
  --bordo:#E9D1AC;
  --miele:#E6BE80;
  --tortora:#C9B7A0;
  --bronzo:#AE8C64;
  --marrone:#684A2D;
  /* testo */
  --inchiostro:#2D170D;
  --testo:#3C2A1E;
  --testo-tenue:#55453B;
  --blu:#243E53;
  /* oro e miele */
  --oro:#A76416;
  --oro-mano:#A27145;
  --bottone-alto:#FDDF98;
  --bottone-medio:#F6CA74;
  --bottone-basso:#F4BB5F;
  --etichetta:#F7C561;
  --verde-wa:#1C761F;
  --bianco:#FFFFFF;
  /* trasparenze (ombre della carta in rilievo) */
  --ombra:rgba(104,74,45,.22);
  --ombra-leggera:rgba(104,74,45,.12);

  --font-titoli:Fraunces,"Fraunces ripiego",Georgia,serif;
  --font-testo:Figtree,"Figtree ripiego",Arial,system-ui,sans-serif;
  --font-mano:Caveat,"Segoe Script",cursive;
  --larghezza:80rem;
  --margine:clamp(1.25rem,4vw,3rem);
  --raggio:22px;
  --testata-h:88px;
  --testata-c:66px;
  --sezione:clamp(4.75rem,3rem + 6vw,8.5rem);
}

/* derivati dei colori di :root */
html{
  --vetro:color-mix(in srgb,var(--carta-chiara) 80%,transparent);
  --filo-bordo:color-mix(in srgb,var(--bordo) 75%,transparent);
  --rilievo:inset 0 1px 0 color-mix(in srgb,var(--bianco) 90%,transparent),
            0 1px 2px color-mix(in srgb,var(--marrone) 9%,transparent),
            0 8px 18px -10px color-mix(in srgb,var(--marrone) 22%,transparent),
            0 26px 44px -30px color-mix(in srgb,var(--marrone) 38%,transparent);
  --rilievo-alto:inset 0 1px 0 color-mix(in srgb,var(--bianco) 90%,transparent),
            0 2px 4px color-mix(in srgb,var(--marrone) 8%,transparent),
            0 16px 28px -14px color-mix(in srgb,var(--marrone) 28%,transparent),
            0 40px 60px -36px color-mix(in srgb,var(--marrone) 45%,transparent);
  --rilievo-basso:inset 0 1px 0 color-mix(in srgb,var(--bianco) 85%,transparent),
            0 1px 2px color-mix(in srgb,var(--marrone) 8%,transparent),
            0 10px 22px -16px color-mix(in srgb,var(--marrone) 30%,transparent);
  --grana:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .41 0 0 0 0 .29 0 0 0 0 .18 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --morbido:cubic-bezier(.22,.8,.24,1);
  --molla:cubic-bezier(.34,1.4,.5,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--testata-c) + .75rem)}
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
body{
  margin:0;min-width:320px;
  font-family:var(--font-testo);font-size:1.0625rem;line-height:1.62;color:var(--testo);
  background:var(--carta) url("../img/ivory-paper-texture.webp") center top/900px repeat;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  font-feature-settings:"kern","liga";
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
p,li,summary{text-wrap:pretty}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2.5px solid var(--marrone);outline-offset:3px;border-radius:6px}
::selection{background:var(--bottone-alto);color:var(--inchiostro)}

.contenitore{width:min(calc(100% - 2*var(--margine)),var(--larghezza));margin-inline:auto;position:relative}
.salta{position:absolute;left:1rem;top:-4rem;z-index:100;padding:.75rem 1.25rem;background:var(--carta-chiara);border:1px solid var(--miele);border-radius:999px;text-decoration:none;font-weight:600}
.salta:focus{top:1rem}
.nascosto{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.deco{position:absolute;pointer-events:none;user-select:none;z-index:0;max-width:none;height:auto}
.hero,.nastro,.catalogo,.lavorazioni,.personalizza,.passi,.dettagli,.storia,.domande,.contatto,.piede,.correlati,.scheda-prodotto{overflow-x:clip}

/* ── tipografia comune ───────────────────────────────────────── */
.sopratitolo{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--font-testo);font-weight:650;font-size:.875rem;line-height:1.3;letter-spacing:.22em;text-transform:uppercase;color:var(--marrone)}
.sopratitolo::before{content:"";width:1.9rem;height:1px;background:linear-gradient(90deg,transparent,var(--oro))}
.titolo-sezione{font-family:var(--font-titoli);font-weight:560;font-size:clamp(2.05rem,1.3rem + 2.25vw,3.35rem);line-height:1.04;letter-spacing:-.024em;color:var(--inchiostro);text-wrap:balance}
.titolo-sezione em{font-style:italic;font-weight:470;color:var(--oro);letter-spacing:-.012em;padding-right:.04em}
.titolo-sezione--corsivo{font-style:italic;font-weight:480;letter-spacing:-.018em}
.al-centro{text-align:center}
.testo-grande{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.62}

.ico{display:inline-block;width:1.3em;height:1.3em;flex:none;background:currentColor;
  -webkit-mask:var(--maschera) center/contain no-repeat;mask:var(--maschera) center/contain no-repeat}
.ico--wa{--maschera:url("../img/icone/whatsapp.svg")}
.ico--freccia{--maschera:url("../img/icone/arrow-right.svg");width:1.2em;height:1.2em}
.ico--verde{color:var(--verde-wa)}

/* ── pulsanti ────────────────────────────────────────────────── */
.bottone{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:50px;padding:.75rem 1.6rem;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--oro) 22%,var(--miele));
  background:linear-gradient(180deg,var(--bottone-alto) 0%,var(--bottone-medio) 58%,var(--bottone-basso) 100%);
  color:var(--inchiostro);font-family:var(--font-testo);font-weight:650;font-size:1rem;line-height:1.2;letter-spacing:.005em;text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--bianco) 75%,transparent),inset 0 -2px 4px color-mix(in srgb,var(--oro) 14%,transparent),
             0 1px 2px color-mix(in srgb,var(--marrone) 14%,transparent),0 10px 22px -12px color-mix(in srgb,var(--oro) 70%,transparent);
  transition:transform .3s var(--morbido),box-shadow .3s var(--morbido),filter .3s;
}
.bottone:hover{transform:translateY(-2px);filter:saturate(1.08) brightness(1.02);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--bianco) 75%,transparent),inset 0 -2px 4px color-mix(in srgb,var(--oro) 14%,transparent),
             0 2px 4px color-mix(in srgb,var(--marrone) 12%,transparent),0 18px 30px -14px color-mix(in srgb,var(--oro) 80%,transparent)}
.bottone:active{transform:translateY(0) scale(.985)}
.bottone .ico--freccia{transition:transform .3s var(--morbido)}
.bottone:hover .ico--freccia{transform:translateX(4px)}
.bottone .ico--wa{color:var(--verde-wa)}
.bottone--grande{min-height:58px;padding:.9rem 2rem;font-size:1.0625rem}

.link-sottolineato{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:1rem;color:var(--inchiostro);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;text-decoration-color:color-mix(in srgb,var(--oro) 60%,transparent);transition:text-decoration-color .25s,text-underline-offset .25s}
.link-sottolineato:hover{text-decoration-color:var(--oro);text-underline-offset:5px;text-decoration-thickness:2px}

.logo-tondo{display:block;border-radius:50%;background:var(--bianco);border:2px solid var(--miele);
  box-shadow:0 0 0 4px var(--carta-chiara),0 0 0 5px var(--bordo),0 14px 26px -12px var(--ombra);overflow:hidden;transition:transform .35s var(--morbido)}
.logo-tondo img{width:100%;height:100%;border-radius:50%;object-fit:contain}

/* ── onde di carta (SVG in linea, coi colori del design) ─────── */
.onda{position:absolute;left:0;right:0;width:100%;height:clamp(34px,5.2vw,78px);pointer-events:none;z-index:3;display:block;overflow:visible}
.onda--sotto{bottom:-1px}
.onda--sopra{top:-1px;transform:scaleY(-1)}
.onda .onda__ombra{fill:var(--bordo);opacity:.55}
.onda .onda__luce{fill:none;stroke:var(--bianco);stroke-width:1.5;opacity:.9}
.onda .onda__filo{fill:none;stroke:var(--miele);stroke-width:1.2;opacity:.85}
.onda--carta .onda__fronte{fill:var(--carta)}
.onda--crema .onda__fronte{fill:var(--crema)}
.onda--chiara .onda__fronte{fill:var(--carta-chiara)}
.onda--media .onda__fronte{fill:var(--carta-media)}

/* ── testata (fissa, si compatta scorrendo) ──────────────────── */
.testata{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--testata-h);transition:height .4s var(--morbido)}
.testata::before{content:"";position:absolute;inset:0;background:var(--vetro);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--filo-bordo);box-shadow:0 12px 30px -24px var(--ombra);opacity:0;transition:opacity .4s var(--morbido)}
.testata--compatta{height:var(--testata-c)}
.testata--compatta::before{opacity:1}
.testata__dentro{height:100%;display:flex;align-items:center;gap:1.5rem}
.testata__logo{flex:none;width:118px;aspect-ratio:1;align-self:flex-start;margin-top:16px;transition:width .4s var(--morbido),margin .4s var(--morbido),box-shadow .4s}
.testata--compatta .testata__logo{width:50px;margin-top:8px;box-shadow:0 0 0 3px var(--carta-chiara),0 0 0 4px var(--bordo),0 6px 12px -8px var(--ombra)}
.testata__logo:hover{transform:rotate(-4deg)}
.menu{display:flex;align-items:center;gap:clamp(1.4rem,2.6vw,2.6rem);margin-inline:auto}
.menu a{position:relative;display:inline-flex;align-items:center;min-height:44px;font-weight:550;font-size:1rem;letter-spacing:.005em;color:var(--inchiostro);text-decoration:none;white-space:nowrap}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1.5px;border-radius:2px;background:var(--oro);transform:scaleX(0);transition:transform .35s var(--morbido)}
.menu a:hover::after{transform:scaleX(1)}
.menu .menu__wa{display:none}
.testata__wa{flex:none;min-height:46px;padding:.55rem 1.15rem;font-size:.9375rem}
.testata__menu{display:none}

/* ── 1 · apertura ────────────────────────────────────────────── */
.hero{position:relative;z-index:2;overflow:clip;
  padding:calc(var(--testata-h) + clamp(1.5rem,4vw,3.5rem)) 0 clamp(6rem,10vw,9rem);
  background:var(--grana),radial-gradient(60% 70% at 78% 40%,var(--carta-chiara) 0%,transparent 70%),linear-gradient(180deg,var(--carta-chiara) 0%,var(--carta) 55%,var(--carta-media) 100%)}
.hero__griglia{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(2rem,5vw,5.5rem);align-items:center;position:relative;z-index:2}
.hero__testo{position:relative;z-index:3;max-width:43rem;padding-top:clamp(2.5rem,5vw,4.5rem)}
.hero__titolo{margin-top:1.15rem;font-family:var(--font-titoli);font-weight:540;font-size:clamp(2.45rem,1.3rem + 3.1vw,4.15rem);line-height:.99;letter-spacing:-.032em;color:var(--inchiostro);text-wrap:balance}
.hero__titolo em{font-style:italic;font-weight:440;color:var(--oro);letter-spacing:-.018em;white-space:nowrap}
.hero__sotto{margin-top:1.5rem;max-width:31rem;font-size:clamp(1.125rem,1rem + .45vw,1.3125rem);line-height:1.55;color:var(--testo)}
.hero__azioni{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.75rem}
.hero__note{margin-top:2.2rem;padding-top:1.3rem;border-top:1px solid var(--filo-bordo);display:grid;gap:.5rem;max-width:31rem}
.hero__commissione{font-size:1rem;line-height:1.55;color:var(--inchiostro)}
.hero__commissione a{font-weight:600;color:var(--inchiostro);text-decoration-color:var(--oro);text-underline-offset:4px}
.hero__commissione a:hover{text-decoration-thickness:2px}
.hero__tempi{font-size:1rem;line-height:1.55;color:var(--testo-tenue)}

/* la scena: l'arco del kit con la foto vera, i cartoncini, il cartellino */
.scena{position:relative;width:min(100%,500px);aspect-ratio:1086/1448;margin:0 auto;isolation:isolate}
.scena::before{content:"";position:absolute;left:-11%;right:-11%;top:4%;bottom:-4%;z-index:-2;border-radius:50% 50% 26px 26px/30% 30% 26px 26px;
  background:var(--grana),linear-gradient(180deg,var(--carta-chiara),var(--crema));
  box-shadow:inset 0 0 0 1px var(--bordo),inset 0 0 0 12px var(--carta-chiara),inset 0 0 0 13px var(--filo-bordo),inset 0 -30px 50px -30px color-mix(in srgb,var(--miele) 50%,transparent),var(--rilievo)}
.scena::after{content:"";position:absolute;left:8%;right:8%;bottom:-5%;height:9%;z-index:-3;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--marrone) 30%,transparent),transparent);filter:blur(6px)}
.arco__foto{position:absolute;left:21.6%;top:17.6%;width:57%;height:73.4%;object-fit:cover;object-position:50% 46%;z-index:0;background:var(--carta-media)}
.arco__cornice{position:absolute;inset:0;width:100%;height:100%;z-index:1;filter:drop-shadow(0 22px 26px color-mix(in srgb,var(--marrone) 22%,transparent))}
.cartoncino{position:absolute;z-index:4;width:31%;padding:5px 5px 0;border-radius:5px;background:var(--carta-chiara);
  box-shadow:0 1px 2px color-mix(in srgb,var(--marrone) 18%,transparent),0 18px 30px -14px color-mix(in srgb,var(--marrone) 50%,transparent);rotate:var(--r,0deg);transition:rotate .5s var(--molla),translate .5s var(--molla)}
.cartoncino::after{content:"";display:block;height:clamp(14px,1.6vw,22px)}
.cartoncino img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.cartoncino--a{left:-17%;bottom:13%;--r:-8deg}
.cartoncino--b{left:-5%;bottom:-3%;--r:5deg;width:27%;z-index:5}
.scena:hover .cartoncino--a{rotate:-11deg;translate:-6px -4px}
.scena:hover .cartoncino--b{rotate:8deg;translate:4px 2px}
.scena__farfalla{width:21%;top:-2%;right:-6%;z-index:6;animation:vola 7s ease-in-out infinite}
.scena__girasole{width:40%;right:-19%;bottom:-6%;z-index:3}
.cartellino{position:absolute;right:-13%;bottom:15%;z-index:7;padding:.75rem 1.15rem .85rem;
  font-family:var(--font-mano);font-weight:500;font-size:clamp(1.3rem,1rem + .9vw,1.7rem);line-height:1.02;color:var(--inchiostro);text-align:center;
  background:var(--grana),linear-gradient(160deg,var(--carta-chiara),var(--crema));border:1px solid var(--bordo);border-radius:3px;
  box-shadow:0 12px 22px -10px var(--ombra);transform:rotate(-7deg)}
.cartellino::before{content:"";position:absolute;top:-9px;left:50%;width:46px;height:18px;margin-left:-23px;background:color-mix(in srgb,var(--miele) 55%,transparent);rotate:3deg;border-radius:2px}
.cartellino img{display:inline-block;width:.72em;height:.72em;vertical-align:-.02em;margin-left:.15em}
@keyframes vola{0%,100%{translate:0 0;rotate:-10deg}50%{translate:-8px -12px;rotate:-2deg}}

/* ── nastro: i lavori veri appesi al filo, scorrono piano ───────── */
.nastro{position:relative;z-index:1;padding:clamp(1.25rem,3vw,2.5rem) 0 clamp(1.5rem,3vw,2.5rem);background:var(--carta);overflow:hidden}
.nastro__finestra{position:relative;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.nastro__finestra::before{content:"";position:absolute;left:0;right:0;top:22px;height:1.5px;background:linear-gradient(90deg,var(--bronzo),var(--miele),var(--bronzo));opacity:.75;z-index:0}
.nastro{--g:clamp(1rem,2vw,1.75rem)}
.nastro__binario{display:flex;width:max-content;animation:scorri 70s linear infinite}
.nastro__gruppo{display:flex;gap:var(--g);padding:12px var(--g) 18px 0}
.nastro__voce{position:relative;flex:none;display:block;width:clamp(128px,12vw,176px);padding:6px 6px 0;border-radius:4px;background:var(--carta-chiara);text-decoration:none;
  box-shadow:0 1px 2px color-mix(in srgb,var(--marrone) 16%,transparent),0 14px 22px -14px color-mix(in srgb,var(--marrone) 48%,transparent);
  transform-origin:50% 0;rotate:var(--r,0deg);transition:rotate .5s var(--molla),translate .5s var(--molla)}
.nastro__voce::after{content:"";display:block;height:16px}
.nastro__voce::before{content:"";position:absolute;top:-12px;left:50%;width:9px;height:24px;margin-left:-4.5px;border-radius:2px;z-index:2;
  background:linear-gradient(90deg,var(--bronzo),var(--tortora) 45%,var(--bronzo));box-shadow:0 2px 3px color-mix(in srgb,var(--marrone) 30%,transparent)}
.nastro__voce img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;background:var(--carta-media)}
.nastro__voce:nth-child(4n+1){--r:-2.5deg}
.nastro__voce:nth-child(4n+2){--r:1.8deg}
.nastro__voce:nth-child(4n+3){--r:-1deg}
.nastro__voce:nth-child(4n+4){--r:2.6deg}
.nastro__voce:hover{rotate:0deg;translate:0 4px}
@keyframes scorri{to{transform:translateX(-50%)}}

/* ── 2 · il catalogo ─────────────────────────────────────────── */
.catalogo{position:relative;z-index:1;padding:clamp(3rem,5vw,4.5rem) 0 var(--sezione);background:var(--carta)}
.catalogo__testa{max-width:46rem;margin-inline:auto;text-align:center}
.catalogo__intro{margin-top:1.1rem;display:grid;gap:.35rem;font-size:1.0625rem;line-height:1.6;color:var(--testo-tenue);text-wrap:balance}
.catalogo__intro p{text-wrap:balance}

.filtri-barra{position:sticky;top:calc(var(--testata-c) - 1px);z-index:30;margin-top:2.2rem;padding:.7rem 0}
.filtri-barra::before{content:"";position:absolute;inset:0 calc(50% - 50vw);background:var(--vetro);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--filo-bordo);opacity:0;transition:opacity .3s}
.filtri-barra--ferma::before{opacity:1}
.filtri{position:relative;display:flex;justify-content:center;gap:.65rem;overflow-x:auto;scrollbar-width:none;padding:.2rem .25rem}
.filtri::-webkit-scrollbar{display:none}
.filtro{flex:none;display:inline-flex;align-items:center;gap:.55rem;min-height:48px;padding:.35rem 1.15rem .35rem .4rem;border-radius:999px;
  background:var(--carta-chiara);border:1px solid var(--bordo);color:var(--inchiostro);font-weight:600;font-size:.9375rem;line-height:1;white-space:nowrap;
  box-shadow:var(--rilievo-basso);transition:background-color .3s,border-color .3s,transform .3s var(--morbido),box-shadow .3s}
.filtro[hidden]{display:none}
.filtro img{width:36px;height:36px;padding:6px;border-radius:50%;background:var(--carta-media);transition:transform .4s var(--molla),background-color .3s}
.filtro:hover{border-color:var(--miele);transform:translateY(-1px)}
.filtro:hover img{transform:rotate(-8deg) scale(1.06)}
.filtro[aria-pressed="true"]{background:linear-gradient(180deg,var(--bottone-alto),var(--bottone-medio));border-color:color-mix(in srgb,var(--oro) 25%,var(--miele));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--bianco) 70%,transparent),0 8px 18px -12px color-mix(in srgb,var(--oro) 80%,transparent)}
.filtro[aria-pressed="true"] img{background:var(--carta-chiara)}

/* griglia dei prodotti: 4 per riga da computer, 3 da tablet, 2 da telefono */
.griglia-prodotti{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,1.9vw,1.75rem);margin-top:clamp(1.25rem,2.5vw,2rem);transition:opacity .22s ease,transform .22s ease}
.griglia-prodotti.cambia{opacity:0;transform:translateY(8px)}
.prodotto{position:relative;container-type:inline-size}
.prodotto[hidden]{display:none}
.prodotto__dentro{position:relative;display:flex;flex-direction:column;height:100%;padding:8px;border-radius:var(--raggio);
  background:var(--grana),var(--carta-chiara);border:1px solid var(--filo-bordo);box-shadow:var(--rilievo);
  transition:transform .45s var(--morbido),box-shadow .45s var(--morbido),border-color .3s}
.prodotto:hover .prodotto__dentro{transform:translateY(-6px);box-shadow:var(--rilievo-alto);border-color:var(--bordo)}
.prodotto:has(.prodotto__nome a:focus-visible) .prodotto__dentro{outline:2.5px solid var(--marrone);outline-offset:3px}
.prodotto__nome a:focus-visible{outline:none}
.prodotto__foto{position:relative;aspect-ratio:1;border-radius:calc(var(--raggio) - 7px);overflow:hidden;background:var(--carta-media);isolation:isolate}
.prodotto__foto::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--inchiostro) 7%,transparent);pointer-events:none;z-index:2}
.prodotto__foto img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--morbido)}
.prodotto:hover .prodotto__foto img{transform:scale(1.05)}
.prodotto__foto--intera img:not(.prodotto__sfondo){position:relative;z-index:1;object-fit:contain;filter:drop-shadow(0 8px 14px color-mix(in srgb,var(--inchiostro) 25%,transparent))}
.prodotto__foto img.prodotto__sfondo{position:absolute;inset:-12%;width:124%;height:124%;max-width:none;object-fit:cover;filter:blur(16px) saturate(1.15);opacity:.9;transform:none!important}
.etichetta{position:absolute;top:10px;left:10px;z-index:3;display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .75rem .38rem .45rem;border-radius:999px;
  font-family:var(--font-testo);font-weight:600;font-size:.875rem;line-height:1;color:var(--inchiostro);
  background:color-mix(in srgb,var(--carta-chiara) 86%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid color-mix(in srgb,var(--miele) 80%,transparent);box-shadow:0 4px 10px -6px var(--ombra)}
.etichetta::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;background:var(--bottone-medio) url("../img/icone/sparkle.svg") center/11px no-repeat}
.etichetta--offerta{left:auto;right:10px}
.etichetta--offerta::before{display:none}
/* tutta la card apre la pagina del prodotto (il link del nome la copre); il pulsante sta sopra e apre WhatsApp */
.prodotto__dentro{isolation:isolate}
.prodotto__corpo{flex:1;display:flex;flex-direction:column;padding:.95rem .55rem .35rem}
.prodotto__nome{font-family:var(--font-titoli);font-weight:600;font-size:1.1875rem;line-height:1.18;letter-spacing:-.012em;color:var(--inchiostro)}
.prodotto__nome a{text-decoration:none;color:inherit}
.prodotto__nome a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--raggio)}
.prodotto__prezzo{margin-top:.3rem;font-weight:500;font-size:.875rem;line-height:1.4;color:var(--testo-tenue);font-variant-numeric:tabular-nums}
.prodotto__prezzo del,.scheda-prodotto__prezzo del{opacity:.7}
.prodotto__prezzo ins,.scheda-prodotto__prezzo ins{text-decoration:none;font-weight:700;color:var(--inchiostro)}
.prodotto__wa{position:relative;z-index:2;margin-top:auto;display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.5rem .85rem;border-radius:999px;
  background:linear-gradient(180deg,var(--carta-chiara),var(--crema));border:1px solid var(--miele);color:var(--inchiostro);
  font-weight:650;font-size:.9375rem;line-height:1.1;text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 1px 0 var(--bianco),0 4px 10px -8px var(--ombra);transition:background .3s,border-color .3s,box-shadow .3s,transform .3s var(--morbido)}
.prodotto__corpo>.prodotto__prezzo{margin-bottom:.95rem}
.prodotto__wa .ico{width:1.2em;height:1.2em;color:var(--verde-wa)}
.prodotto__wa:hover{background:linear-gradient(180deg,var(--bottone-alto),var(--bottone-medio));border-color:color-mix(in srgb,var(--oro) 25%,var(--miele));box-shadow:inset 0 1px 0 var(--bianco),0 10px 18px -10px color-mix(in srgb,var(--oro) 80%,transparent)}
@container (max-width:262px){.prodotto__wa-coda{display:none}}
@container (max-width:215px){
  .prodotto .etichetta{padding:.38rem;gap:0}
  .prodotto .etichetta .etichetta__testo{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .prodotto__corpo{padding:.75rem .3rem .2rem}
  .prodotto__nome{font-size:1.03rem;line-height:1.2}
  .prodotto__corpo>.prodotto__prezzo{margin-bottom:.7rem}
  .prodotto__wa{gap:.38rem;padding:.45rem .5rem;font-size:.875rem}
}
@container (max-width:150px){.prodotto__wa .ico{display:none}}

/* casella «chiedicelo»: chiude la griglia quando i prodotti visibili sono dispari */
.prodotto--chiedi .prodotto__dentro{align-items:center;justify-content:center;gap:1.1rem;padding:1.6rem 1.1rem;text-align:center;border-style:dashed;border-color:var(--miele);
  background:var(--grana),radial-gradient(90% 70% at 50% 25%,var(--carta-chiara),var(--crema))}
.prodotto--chiedi p{font-family:var(--font-titoli);font-style:italic;font-weight:480;font-size:clamp(1.0625rem,1rem + .5vw,1.4rem);line-height:1.25;color:var(--inchiostro);text-wrap:balance}
.prodotto--chiedi .prodotto__wa{margin-top:0;width:100%}
.prodotto__farfalla{width:72px;rotate:-10deg;animation:vola 7s ease-in-out infinite}
@container (max-width:215px){
  .prodotto--chiedi .prodotto__dentro{gap:.7rem;padding:1rem .3rem}
  .prodotto--chiedi p{font-size:1rem;line-height:1.3;text-wrap:wrap;-webkit-hyphens:auto;hyphens:auto}
  .prodotto__farfalla{width:48px}
}

/* ── 3 · lavorazioni ─────────────────────────────────────────── */
/* le bande di carta: un filo di luce e un'ombra morbida sul bordo alto, come un foglio appoggiato sull'altro */
.passi,.storia{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--bianco) 80%,transparent),inset 0 18px 24px -22px color-mix(in srgb,var(--marrone) 30%,transparent)}
.personalizza,.dettagli,.domande{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--bordo) 70%,transparent)}
.lavorazioni{position:relative;z-index:1;padding:var(--sezione) 0;background:var(--grana),linear-gradient(180deg,var(--crema) 0%,var(--carta-media) 100%)}
.lavorazioni__griglia{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6.5rem);align-items:center}
.lavorazioni__testo{display:grid;gap:1.2rem;justify-items:start}
.lavorazioni__testo p{max-width:30rem;font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.62}
.lavorazioni__chiedi{display:flex;align-items:center;gap:.7rem;margin-top:.4rem;padding:.75rem 1.1rem .75rem .8rem;border-radius:16px;background:color-mix(in srgb,var(--carta-chiara) 75%,transparent);border:1px solid var(--filo-bordo)}
.lavorazioni__chiedi .ico{width:1.5em;height:1.5em}
.lavorazioni__chiedi a{font-weight:600;color:var(--inchiostro);text-underline-offset:4px;text-decoration-color:var(--oro)}
.lavorazioni__chiedi a:hover{text-decoration-thickness:2px}
.lavorazioni__carta{position:relative;isolation:isolate}
.lavorazioni__elenco{position:relative;z-index:1;display:grid;padding:clamp(1.2rem,2.6vw,2rem) clamp(1.3rem,3vw,2.4rem);border-radius:var(--raggio);background:var(--grana),var(--carta-chiara);border:1px solid var(--filo-bordo);box-shadow:var(--rilievo-alto)}
.lavorazioni__elenco li{display:flex;align-items:center;gap:.9rem;padding:.72rem 0;font-size:1.0625rem;line-height:1.4;color:var(--inchiostro);border-bottom:1px dashed var(--bordo)}
.lavorazioni__elenco li:last-child{border-bottom:0}
.lavorazioni__elenco img{width:30px;height:30px;padding:7px;flex:none;border-radius:50%;background:var(--crema)}
.lavorazioni__rametto{width:clamp(150px,15vw,220px);right:-9%;top:-17%;z-index:-1;rotate:-24deg}

/* ── 4 · personalizzazione ───────────────────────────────────── */
.personalizza{position:relative;z-index:1;padding:var(--sezione) 0;background:var(--grana),var(--carta-chiara)}
.personalizza__griglia{display:grid;grid-template-columns:minmax(0,4.2fr) minmax(0,6.8fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.personalizza__testa{position:sticky;top:calc(var(--testata-c) + 2.5rem);display:grid;gap:1.1rem}
.personalizza__intro{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);color:var(--testo)}
.personalizza__chiusa{margin-top:.6rem;padding-left:1.1rem;border-left:2px solid var(--miele);font-family:var(--font-titoli);font-style:italic;font-weight:450;font-size:1.25rem;line-height:1.4;color:var(--inchiostro)}
.personalizza__elenco{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,1.8vw,1.4rem)}
.personalizza__elenco li{display:grid;align-content:start;gap:1rem;padding:clamp(1.3rem,2.4vw,1.9rem);border-radius:var(--raggio);background:var(--grana),var(--carta);border:1px solid var(--filo-bordo);box-shadow:var(--rilievo-basso);
  transition:transform .45s var(--morbido),box-shadow .45s var(--morbido)}
.personalizza__elenco li:hover{transform:translateY(-4px);box-shadow:var(--rilievo)}
.personalizza__elenco img{width:56px;height:56px;padding:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--bottone-alto),var(--crema) 75%);box-shadow:inset 0 0 0 1px var(--bordo)}
.personalizza__elenco p{font-size:1.0625rem;line-height:1.55;color:var(--testo)}
.personalizza__elenco strong{display:block;margin-bottom:.3rem;font-family:var(--font-titoli);font-size:1.4rem;font-weight:580;line-height:1.15;letter-spacing:-.012em;color:var(--inchiostro)}
.personalizza__elenco strong::first-letter{text-transform:uppercase}

/* ── 5 · come si ordina ──────────────────────────────────────── */
.passi{position:relative;z-index:1;padding:var(--sezione) 0;text-align:center;background:var(--grana),linear-gradient(180deg,var(--carta-media),var(--crema))}
.passi__elenco{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2.5vw,2.25rem);margin:clamp(2.2rem,4vw,3.4rem) auto 0;counter-reset:passo}
.passi__elenco::before{content:"";position:absolute;top:33px;left:12.5%;right:12.5%;border-top:2px dotted var(--bronzo);opacity:.6}
.passo{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.passo__numero{position:relative;display:grid;place-items:center;flex:none;width:66px;height:66px;border-radius:50%;
  font-family:var(--font-titoli);font-weight:600;font-size:1.55rem;font-variant-numeric:lining-nums tabular-nums;color:var(--inchiostro);
  background:radial-gradient(circle at 35% 28%,var(--bottone-alto),var(--etichetta) 62%,var(--bottone-basso));
  border:1px solid color-mix(in srgb,var(--oro) 20%,var(--miele));box-shadow:0 0 0 7px var(--carta-chiara),0 0 0 8px var(--filo-bordo),0 14px 22px -10px var(--ombra),inset 0 1px 0 color-mix(in srgb,var(--bianco) 70%,transparent)}
.passo__testo{max-width:17rem;font-size:1.0625rem;line-height:1.55;color:var(--inchiostro)}
.passi__nota{margin-top:clamp(2rem,3.5vw,2.8rem);font-family:var(--font-titoli);font-style:italic;font-weight:450;font-size:1.2rem;color:var(--blu)}
.passi__azione{margin-top:1.4rem}

/* ── 6 · il controllo di ogni pezzo ──────────────────────────── */
.dettagli{position:relative;z-index:1;padding:var(--sezione) 0;background:var(--grana),var(--carta)}
.dettagli__griglia{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,6vw,6.5rem);align-items:center}
.dettagli__foto{position:relative;padding:10px;border-radius:calc(var(--raggio) + 8px);background:var(--carta-chiara);box-shadow:var(--rilievo-alto);rotate:-1.5deg}
.dettagli__foto>img{width:100%;aspect-ratio:5/4;object-fit:cover;object-position:50% 45%;border-radius:var(--raggio)}
.lente{position:absolute;right:-6%;bottom:-9%;width:clamp(120px,14vw,190px);aspect-ratio:1;border-radius:50%;
  background-image:url("../img/foto-tazza-pierpaolo.webp");background-size:330%;background-position:68% 18%;
  border:5px solid var(--carta-chiara);box-shadow:0 0 0 2px var(--miele),0 18px 30px -12px var(--ombra);rotate:1.5deg}
.lente::after{content:"";position:absolute;left:calc(85.4% + 2px);top:calc(85.4% - 6%);width:40%;height:12%;border-radius:3px 9px 9px 3px;background:linear-gradient(180deg,var(--bronzo),var(--marrone));transform:rotate(45deg);transform-origin:0 50%;box-shadow:0 6px 10px -4px var(--ombra)}
.dettagli__testo{display:grid;gap:1.1rem}
.dettagli__testo p{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.62;color:var(--testo)}

/* ── 7 · la nostra storia ────────────────────────────────────── */
.storia{position:relative;z-index:1;padding:var(--sezione) 0;background:var(--grana),linear-gradient(180deg,var(--crema),var(--carta-media))}
.storia__griglia{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,6vw,6.5rem);align-items:center}
.storia__testo{display:grid;gap:1.1rem}
.storia__testo p{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.65;color:var(--testo)}
.storia__testo .titolo-sezione+p::first-letter{float:left;margin:.06em .12em 0 0;font-family:var(--font-titoli);font-style:italic;font-weight:460;font-size:3.6em;line-height:.82;color:var(--oro)}
.medaglione{position:relative;display:grid;place-items:center;width:min(100%,430px);aspect-ratio:1;margin-inline:auto;isolation:isolate}
.medaglione::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;
  background:var(--grana),radial-gradient(circle at 50% 42%,var(--carta-chiara) 0%,var(--carta) 55%,var(--crema) 100%);
  box-shadow:inset 0 0 0 1px var(--bordo),inset 0 0 0 16px color-mix(in srgb,var(--carta-chiara) 70%,transparent),inset 0 0 0 17px var(--filo-bordo),var(--rilievo-alto)}
.storia__logo{width:60%;aspect-ratio:1}
.medaglione__girasole{width:46%;left:-16%;bottom:-8%;z-index:2}
.medaglione__rametto{width:42%;left:-2%;bottom:-13%;z-index:1;rotate:-58deg}

/* ── 8 · domande frequenti ───────────────────────────────────── */
.domande{position:relative;z-index:1;padding:var(--sezione) 0;background:var(--grana),var(--carta-chiara)}
.domande__griglia{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.domande__testa{position:sticky;top:calc(var(--testata-c) + 2.5rem)}
.domande__elenco{display:grid;gap:.75rem}
.domanda{border-radius:18px;background:var(--grana),var(--carta);border:1px solid var(--filo-bordo);transition:background-color .3s,box-shadow .35s var(--morbido),border-color .3s}
.domanda:hover{border-color:var(--bordo)}
.domanda[open]{background:var(--grana),var(--bianco);border-color:var(--bordo);box-shadow:var(--rilievo)}
.domanda summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px;padding:.85rem .9rem .85rem 1.35rem;cursor:pointer;list-style:none;border-radius:18px;
  font-family:var(--font-titoli);font-weight:560;font-size:1.2rem;line-height:1.25;letter-spacing:-.008em;color:var(--inchiostro)}
.domanda summary::-webkit-details-marker{display:none}
.domanda summary img{width:38px;height:38px;flex:none;padding:9px;border-radius:50%;background:var(--carta-media);transition:transform .4s var(--morbido),background-color .3s}
.domanda summary:hover img{background:var(--crema)}
.domanda[open] summary img{transform:rotate(180deg);background:var(--bottone-alto)}
.domanda p{padding:0 1.35rem 1.25rem;font-size:1.0625rem;line-height:1.6;color:var(--testo)}
.domanda[open] p{animation:apri .45s var(--morbido)}
@keyframes apri{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── 9 · contatti: la banda coi girasoli ─────────────────────── */
.contatto{position:relative;z-index:2;overflow:clip;padding:calc(var(--sezione) + 1.5rem) 0 calc(var(--sezione) + 2.5rem);text-align:center;
  background:var(--grana),radial-gradient(70% 90% at 50% 105%,color-mix(in srgb,var(--bottone-alto) 60%,transparent) 0%,transparent 70%),linear-gradient(180deg,var(--crema),var(--carta-media))}
.contatto__dentro{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;max-width:52rem;margin-inline:auto}
.contatto .titolo-sezione{font-size:clamp(2.3rem,1.4rem + 2.8vw,3.9rem)}
.contatto__sotto{margin-top:.9rem;font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);color:var(--inchiostro)}
.contatto__voci{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1.8rem}
.contatto__voci li{display:flex;align-items:center;gap:.6rem;min-height:50px;padding:.35rem 1.15rem .35rem .45rem;border-radius:999px;background:color-mix(in srgb,var(--carta-chiara) 80%,transparent);border:1px solid var(--filo-bordo);font-size:1rem;color:var(--inchiostro)}
.contatto__voci li>img,.contatto__voci li>.ico{width:36px;height:36px;padding:8px;border-radius:50%;background:var(--carta-media);flex:none}
.contatto__voci li>.ico{width:24px;height:24px;margin:0 6px}
.contatto__voci a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:550}
.contatto__voci a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--oro)}
.contatto .bottone{margin-top:2rem}
.contatto__girasole-sx{width:clamp(220px,22vw,330px);left:-3.5rem;bottom:-2.5rem;z-index:2}
.contatto__girasole-dx{width:clamp(200px,19vw,290px);right:-3.5rem;bottom:-1.5rem;z-index:2;transform:scaleX(-1)}
.contatto__rametto{width:clamp(150px,14vw,210px);right:12%;bottom:-1rem;z-index:1;rotate:-14deg}
.contatto__farfalla{width:clamp(70px,6.5vw,104px);right:17%;top:19%;z-index:3;animation:vola 8s ease-in-out infinite}

/* ── piede ───────────────────────────────────────────────────── */
.piede{position:relative;z-index:3;padding:clamp(3.2rem,5vw,4.2rem) 0 1.4rem;background:var(--grana),var(--carta-media);border-top:1px solid var(--filo-bordo)}
.piede__griglia{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr);gap:2.5rem;align-items:start}
.piede__marchio{display:flex;align-items:center;gap:1.6rem}
.piede__logo{width:clamp(120px,10vw,150px);aspect-ratio:1;flex:none}
.piede__logo:hover{transform:rotate(-4deg)}
.piede__info{display:grid;gap:.35rem;color:var(--inchiostro);font-size:1rem;line-height:1.5}
.piede__nome{font-family:var(--font-titoli);font-weight:600;font-size:1.6rem;line-height:1.1;letter-spacing:-.015em}
.piede__contatti a{color:var(--inchiostro);text-underline-offset:3px;text-decoration-color:var(--oro)}
.piede__contatti a:hover{text-decoration-thickness:2px}
.piede__gruppo{padding-left:2rem;border-left:1px solid var(--bordo)}
.piede__gruppo ul{display:grid;gap:0}
.piede__gruppo a{display:inline-flex;align-items:center;min-height:44px;font-size:1rem;font-weight:500;color:var(--testo-tenue);text-decoration:none;transition:color .2s,transform .3s var(--morbido)}
.piede__gruppo a:hover{color:var(--inchiostro);transform:translateX(3px)}
.piede__fondo{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.3rem 1.5rem;margin-top:2.4rem;padding-top:1rem;border-top:1px solid var(--bordo);font-size:.9375rem;color:var(--testo-tenue)}
.piede__fondo a{display:inline-flex;align-items:center;min-height:44px;color:var(--testo-tenue);text-underline-offset:3px}
.piede__fondo a:hover{color:var(--inchiostro)}

/* ── banner cookie (una riga) e WhatsApp fisso del telefono ──── */
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.15rem .4rem .15rem 1rem;font-size:.875rem;line-height:1.3;color:var(--testo);background:var(--vetro);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--filo-bordo)}
.cookie-bar[hidden]{display:none}
.cookie-bar p{white-space:nowrap}
.cookie-bar a{font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cookie-bar__x{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;opacity:.8}
.cookie-bar__x:hover{opacity:1;background:var(--carta-media)}
.wa-fisso{display:none}

/* ── entrate morbide, sfalsate (non spostano l'impaginazione) ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--morbido),transform .9s var(--morbido);transition-delay:calc(var(--i,0) * 75ms)}
.reveal.in{opacity:1;transform:none}
.scena.reveal{transform:translateY(16px) scale(.97)}
.scena.reveal.in{transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .reveal,.scena.reveal{opacity:1;transform:none}
  .nastro__finestra{overflow-x:auto;-webkit-mask:none;mask:none}
  .nastro__binario>[aria-hidden="true"]{display:none}
}

/* ── computer stretto: 3 prodotti per riga ───────────────────── */
@media (max-width:1199px){
  .griglia-prodotti{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cartoncino--a{left:-11%}
  .cartoncino--b{left:0}
}

/* ── sotto i 1024 px: menu a scomparsa ───────────────────────── */
@media (max-width:1023px){
  :root{--testata-h:76px;--testata-c:62px}
  .testata__dentro{gap:.6rem}
  .testata__logo{width:92px;margin-top:12px}
  .testata--compatta .testata__logo{width:46px;margin-top:8px}
  .testata__wa{margin-left:auto;width:48px;height:48px;min-height:48px;padding:0;border-radius:50%}
  .testata__wa .ico{width:24px;height:24px}
  .testata__wa-testo{display:none}
  .testata__menu{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--carta-chiara);border:1px solid var(--bordo)}
  .testata__menu img{width:24px;height:24px}
  .testata__menu-chiudi{display:none}
  .testata__menu[aria-expanded="true"] .testata__menu-apri{display:none}
  .testata__menu[aria-expanded="true"] .testata__menu-chiudi{display:block}
  .menu{display:none;position:absolute;top:calc(100% + .5rem);right:0;width:min(19rem,calc(100vw - 2.5rem));flex-direction:column;align-items:stretch;gap:0;margin:0;padding:.5rem 1.2rem;
    background:var(--grana),var(--carta-chiara);border:1px solid var(--bordo);border-radius:20px;box-shadow:var(--rilievo-alto)}
  .menu.aperto{display:flex;animation:apri .35s var(--morbido)}
  .menu a{min-height:52px;font-size:1.0625rem;border-bottom:1px solid var(--sabbia)}
  .menu a::after{display:none}
  .menu .menu__wa{display:inline-flex;gap:.6rem;border-bottom:0;color:var(--verde-wa);font-weight:650}
  /* tablet: l'apertura va in colonna, centrata, con l'arco sotto il testo */
  .hero{text-align:center;padding-bottom:6rem}
  .hero__griglia{grid-template-columns:1fr;gap:0;justify-items:center}
  .hero__testo{display:contents}
  .hero .sopratitolo{order:1;justify-content:center;padding-top:1.5rem}
  .hero__titolo{order:2;max-width:34rem;margin-inline:auto}
  .hero__sotto{order:3;margin-inline:auto}
  .scena{order:4;width:min(56%,360px);margin:2.4rem auto 0}
  .hero__azioni{order:5;justify-content:center;margin-top:-1.8rem;position:relative;z-index:8}
  .hero__note{order:6;margin-inline:auto;text-align:center}
  .cartoncino--a{left:-22%;bottom:22%}
  .cartoncino--b{left:-10%;bottom:4%}
  .cartellino{right:-18%;bottom:24%}
  .scena__girasole{right:-22%}
  .passi__elenco{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.6rem;max-width:44rem}
  .passi__elenco::before{display:none}
  .personalizza__griglia,.domande__griglia{grid-template-columns:1fr;gap:2rem}
  .personalizza__testa,.domande__testa{position:static}
  .personalizza__testa{max-width:40rem}
  .piede__marchio{gap:1.1rem}
}

/* ── telefono ≤767 ───────────────────────────────────────────── */
@media (max-width:767px){
  :root{--testata-h:70px;--testata-c:58px;--raggio:18px;--sezione:clamp(3.75rem,2.5rem + 6vw,4.75rem)}
  body{font-size:1rem;line-height:1.58}
  .titolo-sezione{font-size:clamp(1.85rem,1.2rem + 3vw,2.2rem)}
  .sopratitolo{font-size:.875rem;letter-spacing:.16em}
  .bottone--grande{min-height:56px;font-size:1.0625rem;padding-inline:1.6rem}

  /* testata */
  .testata__logo{width:70px;margin-top:9px}
  .testata--compatta .testata__logo{width:42px;margin-top:8px}
  .testata__wa,.testata__menu{width:46px;height:46px;min-height:46px}

  /* apertura */
  .hero{padding:calc(var(--testata-h) + .6rem) 0 4.6rem;text-align:center}
  .hero__griglia{grid-template-columns:1fr;gap:0}
  .hero__testo{display:contents}
  .hero .sopratitolo{order:1;justify-content:center;padding-top:0;padding-left:4.2rem;font-size:.875rem;letter-spacing:.14em}
  .hero .sopratitolo::before{display:none}
  .hero__titolo{order:2;margin:1.1rem auto 0;font-size:clamp(2.05rem,1.3rem + 3.6vw,2.4rem);line-height:1.02;letter-spacing:-.028em}
  .hero__sotto{order:3;margin:.9rem auto 0;max-width:22.5rem;font-size:1.0625rem;line-height:1.5}
  .scena{order:4;width:min(70%,268px);margin:1.6rem auto 0}
  .hero__azioni{order:5;flex-direction:column;align-items:center;gap:.15rem;margin-top:-1.55rem;position:relative;z-index:8}
  .hero__azioni .bottone{width:min(100%,19rem)}
  .hero__note{order:6;margin:1rem auto 0;padding-top:1rem;max-width:22rem;gap:.55rem}
  .hero__commissione,.hero__tempi{font-size:1rem;line-height:1.5}
  .cartoncino{width:34%;padding:4px 4px 0}
  .cartoncino--a{left:-24%;bottom:24%}
  .cartoncino--b{left:-12%;bottom:5%;width:29%}
  .scena__farfalla{width:24%;right:-14%;top:4%}
  .scena__girasole{width:42%;right:-24%;bottom:-2%}
  .cartellino{right:-22%;bottom:26%;font-size:1.06rem;padding:.42rem .62rem .5rem}
  .cartellino::before{width:34px;height:13px;margin-left:-17px;top:-7px}

  /* nastro */
  .nastro{padding:.4rem 0 1.4rem}
  .nastro__voce{width:116px;padding:5px 5px 0}
  .nastro__voce::after{height:12px}
  .nastro{--g:.85rem}
  .nastro__binario{animation-duration:55s}

  /* catalogo */
  .catalogo{padding-top:2.2rem}
  .catalogo__intro{font-size:1rem;line-height:1.5}
  .filtri-barra{margin:1.4rem calc(-1*var(--margine)) 0;padding:.55rem 0}
  .filtri{justify-content:flex-start;gap:.5rem;padding:.2rem var(--margine);scroll-padding-inline:var(--margine);
    -webkit-mask:linear-gradient(90deg,transparent,#000 var(--margine),#000 calc(100% - var(--margine)),transparent);mask:linear-gradient(90deg,transparent,#000 var(--margine),#000 calc(100% - var(--margine)),transparent)}
  .filtro{min-height:44px;padding:.3rem .95rem .3rem .32rem;font-size:.9375rem}
  .filtro img{width:32px;height:32px;padding:5px}
  .griglia-prodotti{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem .7rem}
  .prodotto__dentro{padding:6px}
  .prodotto__foto{border-radius:calc(var(--raggio) - 6px)}
  .etichetta{top:8px;left:8px}

  /* lavorazioni */
  .lavorazioni__griglia{grid-template-columns:1fr;gap:2rem}
  .lavorazioni__testo{gap:.9rem}
  .lavorazioni__testo p{font-size:1rem;line-height:1.55}
  .lavorazioni__chiedi{align-items:flex-start;font-size:1rem}
  .lavorazioni__elenco{padding:.6rem 1.1rem}
  .lavorazioni__elenco li{font-size:1rem;padding:.62rem 0;gap:.75rem}
  .lavorazioni__elenco img{width:28px;height:28px;padding:6px}
  .lavorazioni__rametto{width:120px;right:-12%;top:-12%}

  /* personalizzazione */
  .personalizza__intro{font-size:1rem}
  .personalizza__chiusa{font-size:1.125rem}
  .personalizza__elenco{grid-template-columns:1fr;gap:.7rem}
  .personalizza__elenco li{grid-template-columns:auto 1fr;align-items:start;gap:.95rem;padding:1.05rem 1.1rem}
  .personalizza__elenco img{width:46px;height:46px;padding:10px}
  .personalizza__elenco p{font-size:1rem;line-height:1.5}
  .personalizza__elenco strong{font-size:1.2rem;margin-bottom:.15rem}

  /* come si ordina: linea verticale */
  .passi__elenco{grid-template-columns:1fr;gap:1.4rem;max-width:22rem;text-align:left}
  .passi__elenco::before{display:block;top:24px;bottom:24px;left:23px;right:auto;border-top:0;border-left:2px dotted var(--bronzo)}
  .passo{flex-direction:row;align-items:flex-start;gap:1rem}
  .passo__numero{width:48px;height:48px;font-size:1.15rem;box-shadow:0 0 0 5px var(--carta-chiara),0 0 0 6px var(--filo-bordo),0 10px 16px -8px var(--ombra)}
  .passo__testo{max-width:none;padding-top:.55rem;font-size:1rem;line-height:1.5}
  .passi__nota{font-size:1.0625rem;margin-top:1.8rem}

  /* controllo e storia */
  .dettagli__griglia,.storia__griglia{grid-template-columns:1fr;gap:2.4rem}
  .dettagli__foto{padding:7px;rotate:-1deg}
  .lente{width:104px;right:-2%;bottom:-11%;border-width:4px}
  .dettagli__testo,.storia__testo{gap:.8rem}
  .dettagli__testo p,.storia__testo p{font-size:1rem;line-height:1.55}
  .storia__griglia>.medaglione{order:-1;width:min(76%,280px)}
  .storia__testo .titolo-sezione+p::first-letter{float:none;margin:0;font:inherit;color:inherit}

  /* domande */
  .domande__griglia{gap:1.4rem}
  .domanda,.domanda summary{border-radius:16px}
  .domanda summary{min-height:58px;font-size:1.0625rem;padding:.75rem .7rem .75rem 1.05rem}
  .domanda summary img{width:34px;height:34px;padding:8px}
  .domanda p{font-size:1rem;line-height:1.55;padding:0 1.05rem 1.05rem}

  /* contatti */
  .contatto{padding:calc(var(--sezione) + 1rem) 0 calc(var(--sezione) + 4.5rem)}
  .contatto .titolo-sezione{font-size:2.3rem}
  .contatto__sotto{font-size:1rem;max-width:20rem}
  .contatto__voci{flex-direction:column;align-items:stretch;width:min(100%,21rem);gap:.55rem;margin-top:1.4rem}
  .contatto__voci li{font-size:1rem;padding-right:.9rem}
  .contatto__voci li>span:not(.ico){min-height:44px;display:inline-flex;align-items:center}
  .contatto .bottone{margin-top:1.4rem}
  .contatto__girasole-sx{width:150px;left:-3.2rem;bottom:-1.6rem}
  .contatto__girasole-dx{width:130px;right:-2.8rem;bottom:-1.2rem}
  .contatto__rametto{display:none}
  .contatto__farfalla{width:56px;right:4%;top:2.2rem}

  /* piede */
  .piede{padding-top:2.6rem}
  .piede__griglia{grid-template-columns:1fr;gap:1.4rem}
  .piede__marchio{align-items:center;gap:1rem}
  .piede__logo{width:92px}
  .piede__info{font-size:1rem;gap:.2rem}
  .piede__nome{font-size:1.3rem}
  .piede__gruppo{padding:.9rem 0 0;border-left:0;border-top:1px solid var(--bordo)}
  .piede__gruppo ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem}
  .piede__gruppo a{min-height:44px}
  .piede__fondo{flex-direction:column;align-items:center;text-align:center;gap:0;margin-top:1.4rem;padding-top:.6rem}

  .cookie-bar{font-size:.8125rem;padding-left:.7rem;gap:.15rem}

  /* WhatsApp fisso: compare dopo l'apertura */
  .wa-fisso{position:fixed;right:16px;bottom:calc(16px + var(--cookie-h,0px));z-index:55;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
    background:linear-gradient(180deg,var(--bottone-alto),var(--bottone-medio) 58%,var(--bottone-basso));border:1px solid color-mix(in srgb,var(--oro) 25%,var(--miele));color:var(--verde-wa);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--carta-chiara) 85%,transparent),0 16px 28px -10px color-mix(in srgb,var(--marrone) 55%,transparent);
    opacity:0;transform:translateY(18px) scale(.85);pointer-events:none;transition:opacity .35s var(--morbido),transform .45s var(--molla),bottom .3s}
  .wa-fisso .ico{width:28px;height:28px}
  .wa-fisso.visibile{opacity:1;transform:none;pointer-events:auto}
}

@media (max-width:359px){
  .hero .sopratitolo{padding-left:3.6rem;letter-spacing:.08em}
  .hero__titolo{font-size:1.85rem}
  .bottone,.bottone--grande{font-size:1rem;padding-inline:1.1rem;gap:.45rem}
  .cookie-bar{font-size:.75rem}
  .griglia-prodotti{gap:.6rem .5rem}
}