/* =============================================================
   CARTOLANDIA — Design System "cute"
   Cartoleria · Edicola · Centro stampe — Gallarate

   Vestito allegro e arrotondato (Baloo 2, viola/corallo/sole,
   card morbide, blob, doodle) su una struttura snella.
   Statico, zero dipendenze, font self-hosted.
   ============================================================= */

/* ---------- FONT (self-hosted, niente CDN, GDPR-safe) ---------- */
@font-face {
  font-family: 'Baloo2';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../fonts/baloo2-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Baloo2';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../fonts/baloo2-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'InterVar';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'InterVar';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =============================================================
   1. TOKEN
   ============================================================= */
:root {
  --ink:        #1E1B4B;
  --ink-soft:   #312E81;
  --brand-400:  #6366F1;
  --brand:      #4F46E5;
  --brand-600:  #4338CA;
  --grape:      #7C3AED;
  --coral:      #F43F5E;
  --alert:      #C81E45;         /* coral leggibile su bianco — 5,6:1 */
  --sun:        #FBBF24;
  --paper:      #FFFDF7;
  --mist:       #F1F0FB;
  --cream:      #FDF2E0;         /* tinta di --sun sul paper: si vede */
  --white:      #FFFFFF;
  --line:       #E9E7F7;

  /* testo — contrasti verificati su --paper, --mist e --cream */
  --t-1: #1E1B4B;                /* 14.6:1 */
  --t-2: rgba(30,27,75,.78);     /* 10.7:1 */
  --t-3: rgba(30,27,75,.62);     /*  7.1:1 */
  --t-2-inv: rgba(255,255,255,.86);
  --t-3-inv: rgba(255,255,255,.68);
  --star: #A8720A;               /* stelle su fondo chiaro */

  --grad:      linear-gradient(110deg, var(--brand) 0%, var(--grape) 48%, var(--coral) 100%);
  --grad-warm: linear-gradient(110deg, var(--sun) 0%, var(--coral) 100%);
  --grad-soft: linear-gradient(135deg, rgba(99,102,241,.14), rgba(244,63,94,.10));

  /* raggi generosi: è il cuore del "cute". Scala geometrica, rapporto ~1,3.
     --r-2xl (44px) non era richiamato da nessuna regola: tolto. */
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* REGOLA DEI CONTENITORI-ICONA. Undici quadratini (il marchio, il burger,
     le icone di card, contatti, barra info, passi e FAQ) portavano un raggio
     tarato a mano, ma sempre intorno a 0,34 volte il lato: 42/15, 46/16,
     50/17, 44/15, 38/13, 34/12, 30/10, 30/11. Era una regola non scritta e
     rispettata: qui diventa esplicita. In percentuale, non in px, perché il
     raggio deve seguire il lato — si cambia la misura del quadrato e non c'è
     nient'altro da ricalcolare. Vale SOLO su box quadrati con width e height
     dichiarati: su un box che si allunga la percentuale seguirebbe i due assi
     separatamente e l'angolo diventerebbe ellittico. */
  --r-ico: 34%;

  /* ELEVAZIONE — quattro gradini, una sola luce.
     I gradini condividono la geometria: scostamento solo verticale (la luce
     viene dall'alto, sempre), sfocatura ~2,4 volte lo scostamento,
     allargamento negativo pari allo scostamento, così l'ombra resta sotto
     l'oggetto e non spunta ai lati. Cambia la scala (~2,4 per gradino) e la
     tinta, mai la direzione.
       --sh-1     riposo: superfici appoggiate — card, tile, righe, tag
       --sh-2     sollevato: hover, barra fissa, badge
       --sh-3     flottante: ciò che sta sopra la pagina — bottone pieno,
                  modale, riquadro cookie, toast
       --sh-glow  bagliore: fuoco d'attenzione — hover delle schede, pannello
     --sh-lift è il solo gradino che serve anche in altre tinte (corallo del
     bottone caldo, verde di WhatsApp, nero della lightbox): tenendo fuori il
     colore, la geometria del gradino flottante resta scritta in un punto
     solo e le varianti non possono scostarsene. Si usa così:
     box-shadow: var(--sh-lift) rgba(...). */
  --sh-lift: 0 24px 56px -24px;
  --sh-1:    0 4px 10px -4px rgba(30,27,75,.22);
  --sh-2:    0 10px 24px -10px rgba(30,27,75,.20);
  --sh-3:    var(--sh-lift) rgba(79,70,229,.45);
  --sh-glow: 0 0 0 1px rgba(79,70,229,.08), 0 18px 44px -18px rgba(124,58,237,.45);

  /* ANELLI — un bordo disegnato come ombra interna: non occupa spazio, non
     sposta il layout e non si somma al padding. Due sole misure: un filo da
     1px per le superfici, un anello da 2px per i controlli (bottoni in
     outline, campi, segmenti). Lo spessore sta scritto in un punto solo. */
  --ring:     inset 0 0 0 1px var(--line);
  --ring-inv: inset 0 0 0 1px rgba(255,255,255,.28);
  --ring-w:   2px;

  /* Scala di spazio: otto gradini, rapporto costante 1,4 arrotondato al
     centesimo di rem. L'ancora è --s-5 = 1.15rem, cioè il vecchio --s-3: da lì
     la scala scende fino ai micro-spazi (.3rem) e sale fino alle fasce (3.15rem).
     Così il cluster segnalato — 1 / 1.05 / 1.1 / 1.15 / 1.2 / 1.25rem, sei misure
     dentro 4px — collassa tutto su --s-5.
     I quattro token vecchi traslano di due posizioni e cambiano di meno di 2px:
     .55→--s-3 (.58), .8→--s-4 (.82), 1.15→--s-5 (identico), 1.5→--s-6 (1.6).
     Le cinque regole che li usavano sono rinumerate qui sotto. */
  --s-1: .3rem;     /*  4,8px */
  --s-2: .42rem;    /*  6,7px */
  --s-3: .58rem;    /*  9,3px */
  --s-4: .82rem;    /* 13,1px */
  --s-5: 1.15rem;   /* 18,4px */
  --s-6: 1.6rem;    /* 25,6px */
  --s-7: 2.25rem;   /* 36,0px */
  --s-8: 3.15rem;   /* 50,4px */

  /* scala tipografica: un solo rapporto, 1.118 (radice di 1,25), su sette
     gradini - .76 .85 .95 1.0625 1.19 1.32 1.5rem - piu i due formati da
     titolone. I quattro fissi coprono il testo piccolo, che prima girava a
     mano su 46 misure diverse fra .55 e 1.08rem; i clamp coprono lead e
     titoli e ai massimi proseguono lo stesso passo. */
  --fs-xs:   .76rem;     /* 12,2px - occhielli, etichette, pillole, badge */
  --fs-sm:   .85rem;     /* 13,6px - didascalie, note, testo di servizio */
  --fs-base: .95rem;     /* 15,2px - soglia minima del testo da leggere */
  --fs-md:   1.0625rem;  /* 17px   - corpo del sito */
  /* --fs-lg era clamp(1.02rem, 1.3vw, 1.16rem): il lead restava piu piccolo
     del corpo fin oltre i 1300px, cioe quasi sempre. Ora parte dal corpo e a
     meta scala e gia un gradino sopra. */
  --fs-lg:  clamp(1.0625rem, 1.6vw, 1.19rem);
  --fs-xl:  clamp(1.1rem, 1.6vw, 1.32rem);
  --fs-2xl: clamp(1.15rem, 1.95vw, 1.5rem);
  --fs-3xl: clamp(1.75rem, 3.1vw, 2.35rem);
  --fs-4xl: clamp(2.4rem, 5.4vw, 3.9rem);

  /* interlinea: tre gradini piu il caso del titolo gigante (erano 9 valori) */
  --lh-display: 1.06;   /* h1: a 3,9rem l'interlinea dei titoli e troppo larga */
  --lh-tight:   1.15;   /* titoli, etichette, righe brevi */
  --lh-snug:    1.5;    /* blocchi compatti: note, passi */
  --lh-body:    1.6;    /* testo corrente */

  --gutter: clamp(1.15rem, 4vw, 2.25rem);
  --sec-y:  clamp(2.5rem, 4.6vw, 4.25rem);   /* era 3.25→5.5rem: 88px a 1440, ora 66px */
  --gap:    clamp(.7rem, 1.4vw, 1.15rem);
  --wrap:   1180px;
  --nav-h:  68px;

  --ease: cubic-bezier(.3,.7,.35,1);
  --out:  cubic-bezier(.16,1,.3,1);
}

/* =============================================================
   2. RESET
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 14px);
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: 'InterVar', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--t-1);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { display: block; max-width: 100%; }
/* <picture> è inline per default e non propaga width/height al suo <img>:
   dentro i riquadri ritagliati l'immagine restava più stretta del contenitore
   e lasciava scoperti alcuni px di fondo chiaro (il "bordo bianco"). */
picture { display: contents; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
strong, b { font-weight: 650; }
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
/* Sopra la foto scura dell'hero l'anello viola non si stacca: qui giallo. */
.hero :focus-visible { outline-color: var(--sun); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 300; transform: translateY(-250%);
  background: var(--ink); color: #fff; padding: var(--s-4) var(--s-5);
  border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-base);
  transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus { transform: none; }

/* =============================================================
   3. TIPOGRAFIA
   ============================================================= */
h1, h2, h3, h4, .display {
  font-family: 'Baloo2', 'Trebuchet MS', system-ui, sans-serif;
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -.015em;
  color: var(--t-1);
  text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); line-height: var(--lh-display); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-md); }

/* parola-accento colorata: nel vestito cute ci sta, ma resta un accento */
.acc {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding-right: .06em;
}
.hero .acc {
  background: linear-gradient(110deg, #FDE68A 0%, var(--sun) 50%, #FDA4AF 100%);
  -webkit-background-clip: text; background-clip: text;
}
/* Il testo in gradiente è un accento, non un carattere tipografico: resta
   nell'hero e nella sezione-firma (#stampe). Nelle altre sette teste la
   parola-accento è tinta piena, lo stesso viola dell'eyebrow. */
.section:not(#stampe) .acc {
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--brand);
}

.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-body); color: var(--t-2); max-width: 58ch;
}
.small { font-size: var(--fs-base); color: var(--t-3); }
p { text-wrap: pretty; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand);
}
.eyebrow::before, .eyebrow::after {
  content: ''; width: 22px; height: 3px; border-radius: var(--r-pill); background: var(--brand); opacity: .8;
}

/* =============================================================
   4. LAYOUT
   ============================================================= */
.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap--narrow { width: min(760px, 100% - var(--gutter) * 2); margin-inline: auto; }

/* overflow: clip perché i blob decorativi sporgono di proposito oltre il bordo
   (senza questo, il blob di #perche produceva 128px di scroll orizzontale) */
.section { padding: var(--sec-y) 0; position: relative; overflow: clip; }
.hidden-sm { display: none; }
@media (min-width: 640px) { .hidden-sm { display: inline; } }
.section--mist  { background: var(--mist); }
.section--cream { background: var(--cream); }
/* usata da privacy.html e da 404.html, che finora la dichiaravano senza che
   esistesse: le due pagine ereditavano il padding pieno di .section. */
.section--tight { padding: var(--s-8) 0; }

.head {
  max-width: 46rem; margin-inline: auto; text-align: center;
  margin-bottom: clamp(var(--s-6), 2.8vw, var(--s-7));
}
.head h2 { margin-top: var(--s-3); }
.head .lead { margin: var(--s-4) auto 0; }

/* UN cambio di metro in tutta la pagina: nove teste centrate identiche sono
   un ritmo piatto. In #perche — l'unica sezione che racconta il negozio e
   non un servizio — l'intestazione va a bandiera, con il sommario in colonna
   a destra. Solo da 900px, dove le due colonne hanno spazio vero. */
@media (min-width: 900px) {
  #perche .head {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: clamp(var(--s-7), 5vw, 4rem);
    max-width: none; margin-inline: 0; text-align: left;
  }
  #perche .head .eyebrow { grid-column: 1; grid-row: 1; }
  #perche .head h2       { grid-column: 1; grid-row: 2; }
  #perche .head .lead    { grid-column: 2; grid-row: 1 / 3; align-self: end; margin: 0; max-width: 40ch; }
}

/* decorazioni di sfondo */
.blob { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.dots {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(99,102,241,.16) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 40%, #000, transparent);
  mask-image: radial-gradient(ellipse 75% 60% at 50% 40%, #000, transparent);
}
.section > .wrap { position: relative; z-index: 1; }

/* =============================================================
   5. BOTTONI
   ============================================================= */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-6); min-height: 48px;
  border-radius: var(--r-pill);
  font-weight: 650; font-size: var(--fs-base); line-height: var(--lh-tight); white-space: nowrap;
  background: var(--ink); color: #fff;
  overflow: hidden; isolation: isolate;
  transition: transform var(--t-base) var(--out), box-shadow var(--t-base) var(--ease), background-color var(--t-fast) var(--ease);
}
.btn > svg { width: 18px; height: 18px; flex: none; }
/* i bottoni sono l'unica cosa davvero cliccabile: il sollevamento piu marcato
   del sito sta qui, non sulle schede che non portano da nessuna parte */
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(0); transition-duration: var(--t-fast); }
/* riflesso che passa: dettaglio giocoso del vecchio sito */
.btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -150%; width: 50%; z-index: -1;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.42), transparent);
  /* Solo in entrata. Con una transizione simmetrica la striscia di luce
     riattraversava il bottone al contrario ogni volta che lo si lasciava:
     in uscita torna a sinistra a 0s, cioe fuori campo, senza farsi vedere. */
  transform: skewX(-18deg); transition: left 0s;
}
.btn:hover::after { left: 160%; transition: left var(--t-reveal) var(--ease); }

.btn--primary { background: var(--grad); box-shadow: var(--sh-3); }
.btn--primary:hover { box-shadow: var(--sh-glow); }
/* stessa geometria del gradino flottante dei bottoni pieni (--sh-3):
   cambia solo la tinta, che è quella del bottone */
.btn--warm { background: var(--grad-warm); color: var(--ink); box-shadow: var(--sh-lift) rgba(244,63,94,.6); }
.btn--wa   { background: #0A8043; box-shadow: var(--sh-lift) rgba(10,128,67,.7); }
.btn--wa:hover { background: #096E39; }
.btn--line  { background: #fff; color: var(--t-1); box-shadow: inset 0 0 0 var(--ring-w) var(--line), var(--sh-1); }
.btn--line:hover { box-shadow: inset 0 0 0 var(--ring-w) var(--brand-400), var(--sh-2); color: var(--brand-600); }
.btn--line-inv { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 var(--ring-w) rgba(255,255,255,.4);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn--line-inv:hover { background: rgba(255,255,255,.22); }
.btn--sm { padding: var(--s-3) var(--s-5); min-height: 42px; font-size: var(--fs-sm); }
.btn--lg { padding: var(--s-5) var(--s-7); min-height: 56px; font-size: var(--fs-md); }
.btn--block { width: 100%; }
.btn .arw { transition: transform var(--t-base) var(--out); }
.btn:hover .arw { transform: translateX(5px); }

/* =============================================================
   6. NAVBAR
   ============================================================= */
.progress {
  position: fixed; inset: 0 auto auto 0; height: 3px; width: 0; z-index: 120;
  /* niente transizione: la larghezza e riscritta a ogni frame di rAF, una
     transition qui fa solo arrivare la barra sempre in ritardo sullo scroll */
  background: var(--grad);
}
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h);
  transition: background-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.nav.is-stuck {
  background: rgba(255,253,247,.92);
  backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: var(--sh-2);
}
.nav.is-stuck, .nav.nav--solid { --nav-fg: var(--ink); --nav-acc: var(--brand); }
.nav.nav--solid {
  background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none;
  /* era un'ombra 0 1px 0: un filo travestito da ombra. Il filo sotto una
     barra si scrive come lo scrivono .infobar, .doc-nav e .actionbar.
     L'ombra va azzerata: da incollata la barra ha già --sh-2, e con il
     cassetto aperto si sommerebbero filo e ombra. */
  box-shadow: none; border-bottom: 1px solid var(--line);
}

.brand { display: inline-flex; align-items: center; gap: var(--s-3); flex: none; }
.brand__mark {
  width: 42px; height: 42px; border-radius: var(--r-ico); flex: none;
  background: var(--grad); display: grid; place-items: center;
  box-shadow: var(--sh-3);
  transition: transform var(--t-slow) var(--out);
}
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); }
.brand__mark svg { width: 23px; height: 23px; }
.brand__name {
  font-family: 'Baloo2', sans-serif; font-weight: 800; font-size: 1.42rem;
  letter-spacing: -.02em; color: var(--nav-fg, #fff); transition: color var(--t-base) var(--ease);
}
.brand__name i { font-style: normal; color: var(--nav-acc, var(--sun)); transition: color var(--t-base) var(--ease); }

.nav__links { display: none; align-items: center; gap: var(--s-6); }
.nav__link {
  position: relative; font-size: var(--fs-base); font-weight: 600;
  color: var(--nav-fg, rgba(255,255,255,.92)); padding-block: var(--s-2);
  transition: color var(--t-base) var(--ease);
}
.nav.is-stuck .nav__link, .nav.nav--solid .nav__link { color: var(--t-2); }
.nav__link::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 3px; border-radius: var(--r-pill);
  background: var(--grad); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--out);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link:hover, .nav__link.is-active { color: var(--nav-acc, var(--sun)); }
.nav__right { display: flex; align-items: center; gap: var(--s-3); flex: none; }

.burger {
  width: 46px; height: 46px; border-radius: var(--r-ico); flex: none;
  display: grid; place-content: center; gap: 5px; color: var(--nav-fg, #fff);
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.burger:hover { background: rgba(128,128,180,.15); }
.burger span {
  display: block; width: 20px; height: 2.4px; border-radius: var(--r-pill); background: currentColor;
  transition: transform var(--t-base) var(--out), opacity var(--t-fast) var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.4px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.4px) rotate(-45deg); }

/* drawer */
.drawer {
  position: fixed; inset: 0; z-index: 99; background: var(--paper);
  padding: calc(var(--nav-h) + var(--s-5)) var(--gutter) var(--s-6);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-slow) var(--out), visibility var(--t-slow);
  overflow-y: auto; overscroll-behavior: contain;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer__list a {
  font-family: 'Baloo2', sans-serif; font-size: clamp(1.5rem, 6.5vw, 1.95rem); font-weight: 800;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  display: flex; align-items: center; gap: var(--s-4);
  opacity: 0; transform: translateY(12px);
  transition: background-color var(--t-fast) var(--ease);
}
.drawer__list a:hover { background: var(--mist); }
.drawer.is-open .drawer__list a { animation: drawerIn var(--t-slow) var(--out) forwards; }
.drawer__list a span {
  font-family: 'InterVar', sans-serif; font-size: var(--fs-xs); font-weight: 700;
  color: #fff; background: var(--grad); letter-spacing: .04em;
  width: 30px; height: 30px; border-radius: var(--r-ico); display: grid; place-items: center; flex: none;
}
@keyframes drawerIn { to { opacity: 1; transform: none; } }
.drawer__foot { margin-top: auto; padding-top: var(--s-6); display: grid; gap: var(--s-3); }

/* pillola stato apertura */
.status {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3); border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
  background: rgba(255,255,255,.16); box-shadow: var(--ring-inv);
  color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: #9A93AE; flex: none; position: relative; }
.status.is-open   .status__dot { background: #34D399; }
.status.is-soon   .status__dot { background: var(--sun); }
.status.is-closed .status__dot { background: #FB7185; }
.status.is-open .status__dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: #34D399; animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: .65 } 70%, 100% { transform: scale(3.2); opacity: 0 } }
.status--light { background: #fff; color: var(--t-1); box-shadow: var(--ring), var(--sh-1); }
#navStatus { display: none; }
.nav.is-stuck #navStatus, .nav.nav--solid #navStatus {
  background: var(--mist); box-shadow: var(--ring); color: var(--t-1);
}

/* =============================================================
   7. HERO
   ============================================================= */
.hero {
  position: relative; min-height: min(92svh, 840px);
  display: grid; align-items: center;
  padding: calc(var(--nav-h) + var(--s-8)) 0 clamp(var(--s-8), 6vw, 4.5rem);
  background: var(--ink); overflow: hidden; isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero__media img { animation: kenburns 30s var(--ease) infinite alternate; }
.hero__media video { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-zoom) var(--ease); }
.hero__media video.is-ready { opacity: 1; }
@keyframes kenburns { from { transform: scale(1.02) } to { transform: scale(1.12) translate3d(-1.5%,-1%,0) } }

/* velo: il testo è centrato e occupa la fascia media, quindi il vincolo è verticale */
.hero__scrim {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(0deg,
    rgba(20,17,52,.88) 0%, rgba(20,17,52,.78) 34%, rgba(20,17,52,.56) 72%, rgba(20,17,52,.74) 100%);
}
@media (min-width: 900px) {
  .hero__scrim {
    /* il testo è centrato: il radiale scurisce dove serve, il verticale resta
       leggero sui lati così la foto in alto non si spegne.
       Ritarato sulla foto vera del negozio: gli scaffali sono molto più chiari
       della foto che c'era prima, e il titolo scendeva a 4,49:1. */
    background:
      radial-gradient(120% 80% at 50% 62%, rgba(20,17,52,.70) 0%, rgba(20,17,52,.26) 62%, transparent 100%),
      linear-gradient(0deg, rgba(20,17,52,.84) 0%, rgba(20,17,52,.48) 40%, rgba(20,17,52,.24) 74%, rgba(20,17,52,.60) 100%);
  }
}

/* blob colorati che respirano */
.hero .blob { z-index: -1; }
@keyframes blob {
  0%,100% { transform: translate(0,0) scale(1) }
  33%     { transform: translate(26px,-30px) scale(1.14) }
  66%     { transform: translate(-18px,20px) scale(.92) }
}
.animate-blob { animation: blob 16s var(--ease) infinite; }

/* doodle fluttuanti (emoji) */
.doodle {
  position: absolute; z-index: -1; display: none;
  font-size: var(--fs-3xl);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
  animation: floaty 7s var(--ease) infinite;
}
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)) } 50% { transform: translateY(-16px) rotate(var(--r,0deg)) } }
@media (min-width: 900px) { .doodle { display: block; } }

.hero__inner { position: relative; color: #fff; text-align: center; max-width: 48rem; margin-inline: auto; }
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); justify-content: center; }
.hero h1 { color: #fff; margin-top: 1.3rem; text-shadow: 0 4px 30px rgba(10,8,35,.5); }
.hero__sub {
  margin-top: 1.2rem; margin-inline: auto; max-width: 38rem;
  font-size: var(--fs-lg); color: rgba(255,255,255,.9);
  text-shadow: 0 2px 16px rgba(10,8,35,.55);
}
.hero__cta { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
@media (max-width: 599px) { .hero__cta .btn { flex: 1 1 100%; } }
.hero__trust {
  margin-top: 2.1rem; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); justify-content: center;
  font-size: var(--fs-base); color: rgba(255,255,255,.86);
}
.hero__trust li { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero__trust svg { width: 17px; height: 17px; color: var(--sun); flex: none; }

.rating {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3); border-radius: var(--r-pill);
  background: rgba(255,255,255,.16); box-shadow: var(--ring-inv);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: var(--fs-xs); font-weight: 600; color: #fff; white-space: nowrap;
}
.rating i { font-style: normal; color: var(--sun); letter-spacing: .04em; }

/* schede che galleggiano ai lati dell'hero */
.float-card {
  position: absolute; z-index: 1; display: none; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
  background: rgba(255,255,255,.15); color: #fff;
  box-shadow: var(--ring-inv), var(--sh-lift) rgba(10,8,35,.85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: floaty 8s var(--ease) infinite;
}
.float-card b { font-family: 'Baloo2', sans-serif; font-size: var(--fs-md); display: block; line-height: var(--lh-tight); }
.float-card small { font-size: var(--fs-xs); color: rgba(255,255,255,.72); }
.float-card__ico { width: 34px; height: 34px; border-radius: var(--r-ico); display: grid; place-items: center; background: rgba(255,255,255,.18); flex: none; }
.float-card__ico svg { width: 18px; height: 18px; }
@media (min-width: 1100px) { .float-card { display: flex; } }

.scroll-cue {
  position: absolute; inset: auto 0 1.4rem 0; z-index: 2; display: grid; place-items: center;
  color: rgba(255,255,255,.7);
}
.scroll-cue svg { width: 26px; height: 26px; animation: bob 2s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(7px) } }

/* =============================================================
   8. MARQUEE colorato
   ============================================================= */
.marquee {
  background-color: var(--mist);
  background-image: linear-gradient(110deg, rgba(79,70,229,.13) 0%, rgba(124,58,237,.10) 48%, rgba(244,63,94,.09) 100%);
  background-size: 220% 220%;
  animation: gradShift 12s var(--ease) infinite;
  color: var(--t-2); overflow: hidden; padding: var(--s-4) 0;
}
@keyframes gradShift { 0%,100% { background-position: 0% 50% } 50% { background-position: 100% 50% } }
.marquee__track { display: flex; width: max-content; animation: marquee 95s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; }
.marquee__group span {
  font-family: 'Baloo2', sans-serif; font-weight: 700; font-size: var(--fs-base);
  padding: 0 var(--s-5); white-space: nowrap;
}
.marquee__group i { font-style: normal; color: var(--sun); font-size: var(--fs-xs); }
@keyframes marquee { to { transform: translateX(-50%) } }

/* =============================================================
   9. BARRA INFO
   ============================================================= */
.infobar { background: var(--white); border-bottom: 1px solid var(--line); }
.infobar__grid { display: grid; }
.infoitem { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) 0; }
.infoitem + .infoitem { border-top: 1px solid var(--line); }
.infoitem__ico {
  width: 46px; height: 46px; flex: none; border-radius: var(--r-ico); display: grid; place-items: center;
  background: var(--grad-soft); color: var(--brand);
}
.infoitem__ico svg { width: 21px; height: 21px; }
.infoitem b { display: block; font-size: var(--fs-base); font-weight: 650; }
.infoitem small { font-size: var(--fs-sm); color: var(--t-3); }
.infoitem a:hover { color: var(--brand); }
/* Il link WhatsApp qui è alto quanto la riga di testo (18px): troppo poco da toccare.
   Lo si estende all'intera riga senza cambiarne l'aspetto. */
.infoitem a { position: relative; }
.infoitem a::after { content: ''; position: absolute; inset: -14px -8px; }
@media (min-width: 760px) {
  .infobar__grid { grid-template-columns: repeat(3, 1fr); gap: 0 var(--s-6); }
  .infoitem + .infoitem { border-top: 0; border-left: 1px solid var(--line); padding-left: var(--s-6); }
}

/* =============================================================
   10. CARD (elemento base del vestito cute)
   ============================================================= */
.card {
  position: relative; background: var(--white);
  border-radius: var(--r-lg); padding: var(--s-5);
  box-shadow: var(--sh-2);
  transition: transform var(--t-slow) var(--out), box-shadow var(--t-slow) var(--ease);
}
/* la card non porta da nessuna parte: si illumina e si alza appena, molto
   meno di un bottone, che invece si clicca davvero */
.card:hover { transform: translateY(-2px); box-shadow: var(--sh-glow); }
.card h3 { margin-top: .8rem; }
.card p { margin-top: .35rem; font-size: var(--fs-base); line-height: var(--lh-body); color: var(--t-2); }
.card__ico {
  width: 50px; height: 50px; border-radius: var(--r-ico); display: grid; place-items: center;
  background: var(--grad-soft); color: var(--brand);
  transition: transform var(--t-slow) var(--out);
}
.card:hover .card__ico { transform: scale(1.1) rotate(-6deg); }
.card__ico svg { width: 24px; height: 24px; }
.card--c2 .card__ico { background: linear-gradient(135deg, rgba(244,63,94,.18), rgba(251,191,36,.12)); color: #D2304A; }
.card--c3 .card__ico { background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(99,102,241,.10)); color: var(--grape); }
.card--c4 .card__ico { background: linear-gradient(135deg, rgba(251,191,36,.26), rgba(244,63,94,.10)); color: #B4740A; }

.grid { display: grid; gap: clamp(var(--s-4), 1.6vw, var(--s-5)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
/* auto-fit lascia celle vuote quando le schede non sono un multiplo delle
   colonne. Misurato: a 900px #servizi (4 schede) va 3+1 e resta un buco di
   533x222px; a 768px #perche (3 schede) va 2+1 e ne resta uno di 347x176.
   Nelle due fasce si fissa il numero di colonne e la scheda dispari prende
   tutta la riga. */
@media (min-width: 620px) and (max-width: 1119px) {
  #servizi .grid--auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 620px) and (max-width: 844px) {
  #perche .grid--auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #perche .grid--auto > :last-child { grid-column: 1 / -1; }
}
/* auto-fit lascia celle vuote quando le schede non sono un multiplo delle
   colonne. Misurato: a 900px #servizi (4 schede) va 3+1 e resta un buco di
   533x222px; a 768px #perche (3 schede) va 2+1 e ne resta uno di 347x176.
   Nelle due fasce si fissa il numero di colonne e la scheda dispari prende
   tutta la riga. */
@media (min-width: 620px) and (max-width: 1119px) {
  #servizi .grid--auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 620px) and (max-width: 844px) {
  #perche .grid--auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #perche .grid--auto > :last-child { grid-column: 1 / -1; }
}

/* =============================================================
   11. BENTO REPARTI (foto)
   ============================================================= */
.bento { display: grid; gap: var(--gap); grid-template-columns: 1fr; grid-auto-rows: minmax(180px, auto); }
.tile {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--s-3); color: #fff; isolation: isolate; min-height: 200px;
  box-shadow: var(--sh-1);
  transition: transform var(--t-slow) var(--out), box-shadow var(--t-slow) var(--ease);
}
/* niente link dentro la tile: il movimento vero e lo zoom della foto */
.tile:hover { transform: translateY(-2px); box-shadow: var(--sh-glow); }
.tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04); transition: transform var(--t-zoom) var(--out); }
.tile:hover img { transform: scale(1.09); }
/* Il velo non finisce mai a zero: con le foto chiare (zaini su parete bianca,
   belle arti in controluce) la tile sfumava nel fondo chiaro della sezione e
   sembrava avere un alone bianco attorno. Un 20% costante la stacca sempre. */
.tile::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  /* Due strati. Il plinto e ancorato in px perche il testo e alto sempre gli
     stessi ~100px, mentre un velo in % scala con la tile e sulle tile basse
     lascia scoperto il titolo. Il velo in % resta leggero e conserva il 18%
     costante in cima contro l'alone sul fondo chiaro.
     Misurato sui pixel di rep-*.jpg: minimo 5,29:1 su bianco (era 2,67),
     velo medio della tile grande 0,509 -> 0,372. */
  --plinth: linear-gradient(0deg,
    rgba(24,20,60,.62) 0, rgba(24,20,60,.40) 90px, rgba(24,20,60,0) 150px);
  background: var(--plinth),
    linear-gradient(0deg,
      rgba(24,20,60,.60) 0%, rgba(24,20,60,.34) 34%, rgba(24,20,60,.18) 66%, rgba(24,20,60,.18) 100%);
}
/* La tile Carta è la più chiara del gruppo: la vetrinetta dei libri per
   bambini è tutta bianca e satura, e il titolo scendeva a 3,54:1 sul
   bianco. Plinto più deciso: misurato 6,4:1. */
.tile--tall::after {
  --plinth: linear-gradient(0deg,
    rgba(24,20,60,.78) 0, rgba(24,20,60,.56) 120px, rgba(24,20,60,0) 190px);
}
/* La tile Ufficio ha titolo E paragrafo dentro 204,8px: il titolo arriva al
   59% dell'altezza, dove il velo comune vale .37, sopra la foto piu chiara
   delle cinque (luminanza p95 = 0,61 nella fascia bassa). Misurato 2,67:1 a
   1280 e 3,88:1 a 390, sotto il minimo di 4,5:1. Le serve un plinto piu alto:
   con questo va a 6,61:1 (1280) e 7,98:1 (390). */
.t-e::after {
  --plinth: linear-gradient(0deg,
    rgba(24,20,60,.72) 0, rgba(24,20,60,.58) 130px, rgba(24,20,60,0) 200px);
}
/* contorno netto: chiude il bordo anche quando la foto è chiarissima */

.tile h3 { color: #fff; font-size: var(--fs-2xl); text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.tile p { margin-top: .3rem; font-size: var(--fs-sm); color: rgba(255,255,255,.86); max-width: 32ch; }
.tile__tag {
  position: absolute; top: 1rem; left: 1rem;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
  padding: var(--s-1) var(--s-3); border-radius: var(--r-pill);
  background: rgba(255,255,255,.94); color: var(--brand-600);
  box-shadow: var(--sh-1);
}
.tile--hero { min-height: 300px; }
.tile--tall { min-height: 260px; }
@media (min-width: 620px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile--hero { grid-column: span 2; min-height: 340px; }
  .tile--tall { min-height: 250px; }
}
@media (min-width: 980px) {
  .bento {
    grid-template-columns: repeat(4, 1fr);
    /* cinque reparti: la tile Scuola tiene il quadrato 2×2, le altre quattro
       riempiono le due colonne di destra senza lasciare celle vuote */
    grid-template-areas: "a a b c" "a a d e";
    grid-auto-rows: clamp(200px, 16vw, 250px);
  }
  .tile--hero { grid-area: a; min-height: 0; }
  .tile--tall { grid-area: b; min-height: 0; }
  .t-d { grid-area: c; }
  .t-e { grid-area: d; }
  .t-f { grid-area: e; }
  .tile { min-height: 0; }
}

/* =============================================================
   12. TIMBRO "5 MIN"
   ============================================================= */
.stamp {
  width: 152px; height: 152px; flex: none; border-radius: 50%;
  border: 4px dashed rgba(255,255,255,.6);
  display: grid; place-items: center; text-align: center; line-height: 1;
  animation: floaty 7s var(--ease) infinite;
  color: #fff;
}
/* variante appoggiata sulla foto del banco stampe */
.stamp--on-photo {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 112px; height: 112px;
  background: rgba(79,70,229,.82); border-color: rgba(255,255,255,.75);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--sh-2);
}
.stamp--on-photo small { font-size: .55rem; margin-top: .2rem; }
@media (max-width: 479px) { .stamp--on-photo { width: 88px; height: 88px; border-width: 3px; }
  .stamp--on-photo small { display: none; } }
.stamp b { font-family: 'Baloo2', sans-serif; font-size: clamp(1.8rem, 5.9vw, 2.3rem); font-weight: 800; display: block; }
.stamp i { font-style: normal; font-family: 'Baloo2', sans-serif; font-weight: 700; font-size: var(--fs-xs); letter-spacing: .18em; }
.stamp small { display: block; margin-top: .25rem; font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.8); }

/* =============================================================
   13. STAMPE — passi + configuratore
   ============================================================= */
/* i tre passi in riga sopra: le card avevano testo corto e larghezza piena,
   quindi metà card restava vuota a destra */
.steps {
  display: grid; gap: var(--s-3); counter-reset: s;
  margin-bottom: clamp(var(--s-5), 2vw, var(--s-6));
}
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  counter-increment: s; display: grid; grid-template-columns: 38px 1fr; gap: 0 var(--s-4);
  background: var(--white); border-radius: var(--r-md); padding: var(--s-4) var(--s-5);
  box-shadow: var(--sh-1); align-content: start;
}
.step::before {
  content: counter(s); grid-row: span 2;
  width: 38px; height: 38px; border-radius: var(--r-ico); display: grid; place-items: center;
  font-family: 'Baloo2', sans-serif; font-weight: 800; font-size: var(--fs-md);
  background: var(--grad); color: #fff;
}
.step b { font-family: 'Baloo2', sans-serif; font-size: var(--fs-md); font-weight: 700; line-height: var(--lh-tight); }
.step span { font-size: var(--fs-base); line-height: var(--lh-snug); color: var(--t-2); margin-top: .15rem; }

/* foto a sinistra, configuratore a destra, stessa altezza */
.print { display: grid; gap: clamp(var(--s-5), 2vw, var(--s-6)); align-items: stretch; }
@media (min-width: 1000px) { .print { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); } }

.print__photo {
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2);
  position: relative; aspect-ratio: 4 / 3; margin: 0;
}
.print__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scale(1.04);
}
@media (min-width: 1000px) { .print__photo { aspect-ratio: auto; min-height: 320px; } }
.print__photo figcaption {
  position: absolute; inset: auto 0 0 0; padding: var(--s-7) var(--s-5) var(--s-4); z-index: 1;
  background: linear-gradient(0deg, rgba(24,20,60,.88), transparent);
  color: rgba(255,255,255,.94); font-size: var(--fs-sm);
}

.panel {
  background: var(--white); border-radius: var(--r-xl);
  padding: clamp(var(--s-5), 1.9vw, var(--s-6)); box-shadow: var(--sh-glow);
}
.panel__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.panel__top h3 { font-size: var(--fs-xl); }
.panel__badge {
  font-size: var(--fs-xs); font-weight: 700; color: var(--brand-600);
  background: var(--mist); padding: var(--s-1) var(--s-3); border-radius: var(--r-pill);
}
/* i campi vanno su due colonne dentro il pannello: il modulo passa da 5 righe
   a 3 e si accorcia di ~150px, senza togliere nessuna opzione */
.fields { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
@media (min-width: 520px) {
  .fields { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}
.fields .field + .field { margin-top: 0; }
.field + .field { margin-top: .7rem; }
.stepper { width: 100%; }
.field__label { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--t-2); }
.field__label i { font-style: normal; font-weight: 600; color: var(--t-3); }

/* Campo nome: unico dato che chiediamo prima di aprire WhatsApp. */
.input {
  margin-top: var(--s-2); width: 100%; min-height: 44px;
  padding: var(--s-3) var(--s-4); border: 0; border-radius: var(--r-sm);
  background: var(--mist); color: var(--t-1);
  font: inherit; font-size: var(--fs-base); font-weight: 600;
  box-shadow: inset 0 0 0 var(--ring-w) transparent;
  transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input::placeholder { color: var(--t-3); font-weight: 500; }
.input.is-ok { background: #fff; box-shadow: inset 0 0 0 var(--ring-w) var(--brand); }
/* Dichiarato DOPO .is-ok: il campo compilato ha già l'anello interno viola,
   quindi da tastiera il focus deve aggiungere un alone esterno, altrimenti
   i due stati sono graficamente identici. L'alone esterno resta 3px, la
   stessa misura dell'outline globale di :focus-visible. */
.input:focus-visible {
  outline: none; background: #fff;
  box-shadow: inset 0 0 0 var(--ring-w) var(--brand), 0 0 0 3px rgba(79,70,229,.38);
}
.input[aria-invalid="true"] { box-shadow: inset 0 0 0 var(--ring-w) var(--alert); }
.field__err { margin-top: .35rem; font-size: var(--fs-xs); font-weight: 700; color: var(--alert); }

/* Honeypot: fuori dallo schermo ma non display:none, così i bot la compilano. */
.hp {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.gate { margin-top: .55rem; font-size: var(--fs-sm); font-weight: 700; color: var(--t-3); }
.gate.is-blocked { color: var(--alert); }
.btn.is-locked { opacity: .5; box-shadow: none; cursor: not-allowed; }
.btn.is-locked:hover, .btn.is-locked:active { transform: none; }
.segment { margin-top: var(--s-2); display: flex; gap: var(--s-1); flex-wrap: wrap; }
.segment button {
  flex: 1 1 auto; min-width: 78px; min-height: 44px;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  font-size: var(--fs-base); font-weight: 600; text-align: center; color: var(--t-2);
  background: var(--mist); box-shadow: inset 0 0 0 var(--ring-w) transparent;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--out);
}
.segment button:hover { transform: translateY(-1px); }
.segment button[aria-pressed="true"] {
  background: #fff; color: var(--brand-600); font-weight: 700;
  box-shadow: inset 0 0 0 var(--ring-w) var(--brand), var(--sh-2);
}
.stepper {
  /* stessa altezza dei segment (44px): prima era 50px e la riga
     "Vuoi anche… / Numero di copie" risultava disallineata */
  margin-top: .38rem; display: flex; align-items: stretch; gap: 2px;
  background: var(--mist); border-radius: var(--r-sm); padding: 0; overflow: hidden;
}
/* L'overflow:hidden qui sopra ritagliava l'anello di focus globale, che ha
   outline-offset:3px: da tastiera i pulsanti +/- e il campo copie sembravano
   non ricevere il focus. Anello interno, che non può essere ritagliato. */
.stepper :focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--brand); }
.stepper button {
  width: 46px; height: 44px; border-radius: 0; display: grid; place-items: center;
  background: #fff; color: var(--brand);
  font-size: var(--fs-xl); font-weight: 700; line-height: 1;
  transition: transform var(--t-fast) var(--out);
}
.stepper button:hover { background: var(--paper); color: var(--brand-600); }
.stepper input {
  flex: 1; min-width: 52px; height: 44px; text-align: center; border: 0; background: transparent;
  font-weight: 700; font-size: var(--fs-md); -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.recap {
  margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: var(--mist); font-size: var(--fs-base); color: var(--t-2);
}
.recap b { color: var(--brand-600); }
.panel__actions { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
@media (min-width: 480px) { .panel__actions { grid-template-columns: 1fr auto; } }
.panel__note { margin-top: .65rem; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--t-3); }

/* =============================================================
   14. LISTE PUNTATE + COPPIA DI CARD
   ============================================================= */
.checklist { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.checklist li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-base); }
.checklist svg { width: 21px; height: 21px; flex: none; color: var(--brand); margin-top: .2rem; }
.checklist span { color: var(--t-2); }
.btn-row { margin-top: var(--s-5); display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* --- coppia di card affiancate (liste scolastiche / pacchi) ---
   Sostituisce due split impilati: stessa informazione, metà altezza e
   nessun vuoto, perché le CTA sono ancorate in fondo con margin-top:auto. */
.duo { display: grid; gap: var(--gap); }
@media (min-width: 860px) { .duo { grid-template-columns: repeat(2, 1fr); } }
.duo__card {
  background: var(--white); border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-2); display: flex; flex-direction: column;
  transition: transform var(--t-slow) var(--out), box-shadow var(--t-slow) var(--ease);
}
.duo__card:hover { transform: translateY(-2px); box-shadow: var(--sh-glow); }
.duo__media { position: relative; }
.duo__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transform: scale(1.04); }
.duo__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(24,20,60,.42), rgba(24,20,60,0) 55%);
}
.duo__tag {
  position: absolute; left: clamp(1.05rem, 2vw, 1.5rem); bottom: 1rem; z-index: 1;
  font-size: var(--fs-xs); font-weight: 700; color: var(--brand-600);
  background: rgba(255,255,255,.95); box-shadow: var(--sh-1);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
}
.duo__body { padding: clamp(var(--s-5), 2vw, var(--s-6)); display: flex; flex-direction: column; flex: 1; }
.duo__body h3 { font-size: var(--fs-2xl); line-height: var(--lh-tight); }
.duo__body > p { margin-top: .55rem; font-size: var(--fs-base); line-height: var(--lh-body); color: var(--t-2); }
.duo__body .checklist { margin-top: var(--s-4); }
.duo__body .btn-row { margin-top: auto; padding-top: var(--s-5); }

/* --- lo sconto sugli ordini di classe.
   Non e' una sezione nuova: e' una riga dentro la card, fondo caldo e un filo
   di corallo, perche' e' l'unico numero della pagina che vale una conversione.
   La percentuale non va a capo (flex:none), il testo si', cosi' a 360px la
   riga resta dentro la card. */
.duo__body > .duo__deal {
  margin-top: var(--s-5); display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
  background: var(--cream);
  box-shadow: var(--sh-1), inset 0 0 0 1px rgba(244,63,94,.28);
  font-size: var(--fs-base); line-height: var(--lh-snug); color: var(--t-1);
}
.duo__deal b {
  flex: none; font-family: 'Baloo2', system-ui, sans-serif;
  font-size: var(--fs-xl); font-weight: 800; color: var(--alert);
}

/* =============================================================
   15. GALLERIA
   ============================================================= */
/* quattro scatti: 2×2 su telefono, una riga sola da tablet in su.
   La griglia a 3 colonne lasciava una cella vuota. */
.gallery { display: grid; gap: var(--gap); grid-template-columns: repeat(2,1fr); }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(4,1fr); } }
.gallery button {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  display: block; width: 100%; aspect-ratio: 1;
  box-shadow: var(--sh-1);
  transition: transform var(--t-slow) var(--out), box-shadow var(--t-slow) var(--ease);
}
/* questi sono <button> veri: si alzano piu delle schede, non meno */
.gallery button:hover { transform: translateY(-6px); box-shadow: var(--sh-glow); }
/* in assoluto con inset negativo: nessun residuo sub-pixel sul bordo,
   il riquadro risulta sempre pieno fino all'angolo arrotondato */
.gallery button img {
  position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px);
  object-fit: cover; transform: scale(1.03); transition: transform var(--t-zoom) var(--out);
}
.gallery button:hover img { transform: scale(1.1); }
.gallery button::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(24,20,60,.5), transparent 55%);
  opacity: 0; transition: opacity var(--t-base) var(--ease);
}
.gallery button:hover::after { opacity: 1; }
.gallery__zoom {
  position: absolute; right: .65rem; bottom: .65rem; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--brand);
  opacity: 0; transform: translateY(6px) scale(.85);
  transition: opacity var(--t-base) var(--ease), transform var(--t-slow) var(--out);
}
.gallery button:hover .gallery__zoom { opacity: 1; transform: none; }
.gallery__zoom svg { width: 16px; height: 16px; }
/* Con quattro scatti la prima larga sfalsa tutto: su due colonne restava una
   cella vuota in fondo. Tutte uguali: 2×2 sul telefono, una riga da 760px. */
.gallery .wide { grid-column: auto; aspect-ratio: 1; }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 130; display: grid; place-items: center;
  padding: clamp(var(--s-5), 4vw, var(--s-8)); background: rgba(20,17,52,.94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%; max-height: 80svh; border-radius: var(--r-lg);
  box-shadow: var(--sh-lift) rgba(0,0,0,.9);
  transform: scale(.95); opacity: 0;
  transition: transform var(--t-slow) var(--out), opacity var(--t-base) var(--ease);
}
.lightbox.is-open img { transform: none; opacity: 1; }
.lightbox__cap { margin-top: .9rem; color: rgba(255,255,255,.75); font-size: var(--fs-sm); text-align: center; }
.lightbox__btn {
  position: absolute; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.14); box-shadow: var(--ring-inv);
  transition: background-color var(--t-base) var(--ease), transform var(--t-base) var(--out);
}
.lightbox__btn:hover { background: rgba(255,255,255,.26); transform: scale(1.07); }
.lightbox__btn svg { width: 20px; height: 20px; }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: clamp(.5rem,2vw,1.5rem); top: 50%; margin-top: -24px; }
.lightbox__next { right: clamp(.5rem,2vw,1.5rem); top: 50%; margin-top: -24px; }

/* =============================================================
   16b. I TITOLARI
   La foto di Daniela ed Enzo davanti all'insegna: è l'unica del sito
   con delle facce, e regge da sola la promessa della sezione.
   ============================================================= */
.titolari {
  position: relative; margin: 0 0 clamp(var(--s-6), 2.8vw, var(--s-7));
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2);
  aspect-ratio: 3 / 2;
}
@media (min-width: 700px) { .titolari { aspect-ratio: 12 / 5; } }
.titolari img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.titolari figcaption {
  position: absolute; inset: auto 0 0 0; padding: var(--s-7) var(--s-5) var(--s-5);
  font-size: var(--fs-base); line-height: var(--lh-snug); color: #fff;
  background: linear-gradient(0deg, rgba(24,20,60,.88) 0%, rgba(24,20,60,.62) 55%, rgba(24,20,60,0) 100%);
}
.titolari figcaption b { color: #fff; font-family: 'Baloo2', sans-serif; font-weight: 800; }
@media (min-width: 940px) {
  /* il velo deve coprire tutta la larghezza, è il testo a doversi fermare:
     con max-width sul figcaption il gradiente si tagliava a metà foto */
  .titolari figcaption { padding-inline: var(--s-6); padding-right: 42%; }
}

/* =============================================================
   17. RECENSIONI
   ============================================================= */
.quotes { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3,1fr); } }
.quote {
  background: var(--white); border-radius: var(--r-lg); padding: var(--s-6);
  box-shadow: var(--sh-2); display: flex; flex-direction: column;
  transition: transform var(--t-slow) var(--out), box-shadow var(--t-slow) var(--ease);
}
.quote:hover { transform: translateY(-2px); box-shadow: var(--sh-glow); }
.quote__top { display: flex; align-items: center; gap: var(--s-4); }
.quote__ava {
  width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center;
  color: #fff; font-family: 'Baloo2', sans-serif; font-weight: 800; font-size: var(--fs-lg);
  background: var(--grad);
}
.quote__ava--2 { background: linear-gradient(135deg, var(--coral), var(--sun)); }
.quote__ava--3 { background: linear-gradient(135deg, var(--grape), var(--brand)); }
/* Le tre schede sono gia alte uguali (185,7px a 1280): a restare corta e la
   citazione di mezzo, due righe contro quattro, che lasciava 49,1px di vuoto
   sotto contro 24. Il blocco citazione prende tutto lo spazio libero e il
   testo ci sta in mezzo: lo scarto si divide in due, nessuna riga stirata. */
.quote blockquote { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.quote__top b { display: block; font-size: var(--fs-base); font-weight: 650; line-height: var(--lh-tight); }
.quote__top small { font-size: var(--fs-xs); color: var(--t-3); }
.quote__stars { margin-left: auto; color: var(--star); font-size: var(--fs-sm); letter-spacing: .04em; }
.quote blockquote { margin-top: 1rem; font-size: var(--fs-base); color: var(--t-2); line-height: var(--lh-body); }

.google-badge {
  display: inline-flex; align-items: center; gap: var(--s-3);
  background: var(--white); color: var(--t-1);
  border-radius: var(--r-pill); padding: var(--s-3) var(--s-5) var(--s-3) var(--s-3);
  box-shadow: var(--sh-2); font-size: var(--fs-sm); font-weight: 650; white-space: nowrap;
  transition: transform var(--t-base) var(--out), box-shadow var(--t-base) var(--ease);
}
/* questo e un <a>: si alza come un bottone, perche lo e */
.google-badge:hover { transform: translateY(-3px); box-shadow: var(--sh-glow); color: var(--t-1); }
.google-badge svg { width: 20px; height: 20px; }
.google-badge i { font-style: normal; color: var(--star); }

/* =============================================================
   18. FAQ
   ============================================================= */
.faq { display: grid; gap: var(--s-3); }
.faq__item {
  background: var(--white); border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--sh-1); transition: box-shadow var(--t-base) var(--ease);
}
.faq__item.is-open { box-shadow: var(--sh-glow); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-5);
  font-family: 'InterVar', system-ui, sans-serif; font-weight: 600; font-size: var(--fs-md); color: var(--t-1);
  transition: color var(--t-fast) var(--ease);
}
.faq__q:hover { color: var(--brand); }
.faq__icon {
  width: 30px; height: 30px; flex: none; border-radius: var(--r-ico); position: relative;
  background: var(--mist); color: var(--brand);
  transition: transform var(--t-slow) var(--out), background-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; top: 50%; left: 50%; background: currentColor; border-radius: var(--r-pill);
}
.faq__icon::before { width: 13px; height: 2.4px; transform: translate(-50%,-50%); }
.faq__icon::after  { width: 2.4px; height: 13px; transform: translate(-50%,-50%); transition: transform var(--t-slow) var(--out); }
.faq__item.is-open .faq__icon { transform: rotate(135deg); background: var(--brand); color: #fff; }
/* pannello e icona sullo stesso gradino: si aprivano sfasati di 30ms */
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--out); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; visibility: hidden; transition: visibility 0s linear var(--t-slow); }
.faq__item.is-open .faq__a > div { visibility: visible; transition-delay: 0s; }
.faq__a p { padding: 0 var(--s-5) var(--s-5); color: var(--t-2); font-size: var(--fs-base); max-width: 68ch; }
html:not(.js) .faq__a { grid-template-rows: 1fr; }
html:not(.js) .faq__a > div { visibility: visible; }
html:not(.js) .faq__icon { display: none; }

/* SECONDO cambio di metro della pagina (il primo e l'intestazione a bandiera
   di #perche). A 1280 la FAQ e una colonna da 760px centrata sotto sezioni
   larghe 1180: la pagina si strozza proprio qui. Da 1080px l'intestazione va
   di fianco alle domande, allineata al loro centro. E un metro diverso in
   specie da quello di #perche: li si spezza la testa e il corpo resta pieno,
   qui la testa va in colonna e il corpo si sposta di lato.
   La traccia di mezzo fa da distanziatore al posto di un column-gap. */
@media (min-width: 1080px) {
  #faq .wrap--narrow {
    width: min(var(--wrap), 100% - var(--gutter) * 2);
    display: grid; align-items: center;
    grid-template-columns: minmax(0, .74fr) clamp(2rem, 5vw, 4rem) minmax(0, 1.26fr);
  }
  #faq .head { grid-column: 1; max-width: none; text-align: left; }
  #faq .faq  { grid-column: 3; }
}

/* SECONDO cambio di metro della pagina (il primo e l'intestazione a bandiera
   di #perche). A 1280 la FAQ e una colonna da 760px centrata sotto sezioni
   larghe 1180: la pagina si strozza proprio qui. Da 1080px l'intestazione va
   di fianco alle domande, allineata al loro centro. E un metro diverso in
   specie da quello di #perche: li si spezza la testa e il corpo resta pieno,
   qui la testa va in colonna e il corpo si sposta di lato.
   La traccia di mezzo fa da distanziatore al posto di un column-gap. */
@media (min-width: 1080px) {
  #faq .wrap--narrow {
    width: min(var(--wrap), 100% - var(--gutter) * 2);
    display: grid; align-items: center;
    grid-template-columns: minmax(0, .74fr) clamp(2rem, 5vw, 4rem) minmax(0, 1.26fr);
  }
  #faq .head { grid-column: 1; max-width: none; text-align: left; }
  #faq .faq  { grid-column: 3; }
}

/* =============================================================
   19. CONTATTI
   ============================================================= */
/* Le quattro schede stavano impilate sopra la tabella orari nella colonna
   sinistra: a 1280 quella colonna era alta 805px contro i 434 della mappa,
   371px di dislivello. Ora le schede prendono tutta la larghezza e sotto
   restano due soli blocchi, orari e mappa, che si pareggiano. */
.contact { display: grid; gap: clamp(var(--s-5),2.4vw,var(--s-6)); align-items: stretch; }
@media (min-width: 940px) { .contact { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.contact-grid { display: grid; gap: var(--s-4); margin-bottom: clamp(var(--s-5),2.4vw,var(--s-6)); }
@media (min-width: 560px) { .contact-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 940px) { .contact-grid { grid-template-columns: repeat(4,1fr); } }
.contact-card {
  background: var(--white); border-radius: var(--r-md); padding: var(--s-5);
  box-shadow: var(--sh-1); transition: transform var(--t-base) var(--out), box-shadow var(--t-base) var(--ease);
}
.contact-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.contact-card__ico {
  width: 44px; height: 44px; border-radius: var(--r-ico); display: grid; place-items: center;
  background: var(--grad-soft); color: var(--brand);
}
.contact-card__ico svg { width: 20px; height: 20px; }
.contact-card b { display: block; margin-top: .8rem; font-size: var(--fs-base); }
.contact-card p, .contact-card a { font-size: var(--fs-base); color: var(--t-2); }
.contact-card a:hover { color: var(--brand); text-decoration: underline; }

.hours { background: var(--white); border-radius: var(--r-md); padding: var(--s-5); box-shadow: var(--sh-1); margin-top: var(--s-4); }
.hours h3 { font-size: var(--fs-md); }
.hours ul { margin-top: .6rem; }
.hours li {
  display: flex; justify-content: space-between; gap: var(--s-5); align-items: center;
  padding: var(--s-3) 0; font-size: var(--fs-base); color: var(--t-2);
}
.hours li + li { border-top: 1px dashed var(--line); }
.hours li.is-today { color: var(--brand-600); font-weight: 700; }
.hours li.is-today > span:first-child::after {
  content: 'oggi'; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
  background: var(--brand); color: #fff; padding: var(--s-1) var(--s-2); border-radius: var(--r-pill);
  margin-left: var(--s-3); font-weight: 700;
}

.map-box {
  position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/3;
  background: var(--mist); box-shadow: var(--sh-2);
}
/* Ora la mappa ha accanto solo la tabella orari, non orari + quattro schede:
   le due colonne hanno una massa simile, quindi il riquadro può pareggiare
   l'altezza della riga invece di stare al centro di un vuoto. */
@media (min-width: 940px) { .map-box { aspect-ratio: auto; height: 100%; } }
.map-box iframe { width: 100%; height: 100%; border: 0; }
/* A 360px il 4/3 dava 242,4px di riquadro contro ~286 di contenuto: l'icona in
   alto e il bottone in basso venivano tagliati di 21,8px ciascuno da
   overflow:hidden. Il riquadro non scende mai sotto il proprio contenuto. */
.map-box { min-height: 290px; }
.map-box__ph {
  position: absolute; inset: 0; display: grid; align-content: center; justify-items: center;
  /* stessa trama dei .dots della pagina: il segnaposto smette di essere un
     rettangolo grigio-lilla piatto e legge come carta, non come un buco.
     Sta qui e non su .map-box perche il JS svuota il box quando carica la
     mappa: la trama se ne va con il segnaposto. */
  background-color: var(--mist);
  background-image: radial-gradient(rgba(99,102,241,.16) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  text-align: center; padding: clamp(var(--s-5), 3vw, var(--s-7)); gap: var(--s-3);
}
.map-box__ph svg { width: 54px; height: 54px; color: var(--brand); }
.map-box__ph b { font-family: 'Baloo2', sans-serif; font-size: var(--fs-lg); }
.map-box__ph p { font-size: var(--fs-base); color: var(--t-2); max-width: 32ch; }
.map-box__ph .btn-row { margin-top: .8rem; justify-content: center; }

/* =============================================================
   20. FOOTER
   ============================================================= */
/* Il footer è l'unica superficie grande e scura del sito: qui il gradiente
   di marca ha finalmente lo spazio per esistere per intero (1180×~400) invece
   di essere spalmato su bottoni e trattini. Steso sull'ink a bassa opacità,
   il testo resta sopra 5:1. */
.footer {
  background-color: var(--ink);
  background-image: linear-gradient(110deg, rgba(79,70,229,.40) 0%, rgba(124,58,237,.32) 48%, rgba(244,63,94,.22) 100%);
  color: var(--t-3-inv); padding-top: clamp(var(--s-8),5vw,4rem);
}
.footer__grid { display: grid; gap: var(--s-7); padding-bottom: var(--s-7); }
@media (min-width: 760px)  { .footer__grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s-7); } }
.footer h3 {
  font-family: 'InterVar', sans-serif; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6);
}
.footer ul { margin-top: var(--s-4); display: grid; gap: var(--s-3); font-size: var(--fs-base); }
.footer a { transition: color var(--t-fast) var(--ease); }
.footer a:hover { color: #fff; }
.footer .brand__name { color: #fff; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding: var(--s-5) 0;
  font-size: var(--fs-sm); color: rgba(255,255,255,.6);
}
/* La firma è un link a Instagram alto 17px: da toccare è poco, e senza
   sottolineatura non si distingue dal testo attorno. */
.footer__bottom a {
  position: relative; text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px;
}
.footer__bottom a:hover { color: #fff; text-decoration-color: currentColor; }
.footer__bottom a::after { content: ''; position: absolute; inset: -12px -6px; }
.footer__bottom .wrap { display: grid; gap: var(--s-1); }
@media (min-width: 700px) { .footer__bottom .wrap { grid-template-columns: 1fr auto; align-items: center; } }
/* A fondo pagina il pulsante WhatsApp flottante (58px + 1rem di margine, solo
   da 940px in su) si sovrapponeva al credito allineato a destra. */
@media (min-width: 940px) { .footer__bottom .wrap { padding-right: calc(58px + var(--s-6)); } }

/* =============================================================
   21. FLOTTANTI
   ============================================================= */
/* I due flottanti stanno nella stessa colonna. Le misure escono da qui, così
   la distanza fra loro non può ridursi per una modifica distratta: prima erano
   a 8px l'uno dall'altro e, siccome il tasto "su" sparisce nell'istante in cui
   lo premi, il click seguente finiva sul WhatsApp sotto. */
:root { --fab-size: 58px; --fab-bottom: 1rem; --fab-gap: 22px; --totop-size: 48px; }
.fab {
  position: fixed; right: var(--fab-bottom); bottom: var(--fab-bottom); z-index: 90;
  width: var(--fab-size); height: var(--fab-size); border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: #0A8043;
  box-shadow: var(--sh-lift) rgba(10,128,67,.85);
  transition: transform var(--t-base) var(--out);
}
.fab:hover { transform: scale(1.08); }
.fab svg { width: 28px; height: 28px; }
.fab::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: #0A8043; z-index: -1;
  animation: ping 2.8s var(--ease) infinite;
}
.to-top {
  position: fixed; right: var(--fab-bottom); z-index: 91;
  bottom: calc(var(--fab-bottom) + var(--fab-size) + var(--fab-gap));
  width: var(--totop-size); height: var(--totop-size); border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--t-1);
  box-shadow: var(--sh-2);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--out), visibility var(--t-base);
}
.to-top { margin-right: calc((var(--fab-size) - var(--totop-size)) / 2); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 19px; height: 19px; }

.actionbar {
  position: fixed; inset: auto 0 0 0; z-index: 95;
  display: grid; grid-template-columns: repeat(2,1fr);
  background: rgba(255,253,247,.96);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(110%); visibility: hidden;
  transition: transform var(--t-slow) var(--out), visibility var(--t-slow);
}
.actionbar.is-visible { transform: none; visibility: visible; }
.actionbar a {
  display: grid; place-items: center; gap: .2rem; padding: var(--s-3) var(--s-1); min-height: 58px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--t-2);
}
.actionbar a + a { border-left: 1px solid var(--line); }
.actionbar svg { width: 21px; height: 21px; color: var(--brand); }
.actionbar a:first-child svg { color: #0A8043; }

/* =============================================================
   22. COOKIE
   ============================================================= */
.cookie {
  position: fixed; inset: auto 0 0 0; z-index: 140; padding: clamp(var(--s-4), 2vw, var(--s-5));
  transform: translateY(130%); visibility: hidden;
  transition: transform .45s var(--out), visibility .45s;
  /* solo il riquadro intercetta i tap: la fascia trasparente sopra
     la barra azioni non deve rubarle i click */
  pointer-events: none;
}
.cookie.is-visible { transform: none; visibility: visible; }
.cookie__box { pointer-events: auto; }
/* Sotto i 940px la .actionbar è fissa in basso: min-height 58px ma altezza
   reale misurata 63,2px (icona + testo + padding). Senza questo
   spazio il riquadro cookie la copriva per intero e alla prima visita il
   principale invito mobile restava invisibile fino al consenso. */
@media (max-width: 939px) {
  .cookie { padding-bottom: calc(64px + env(safe-area-inset-bottom) + clamp(var(--s-4), 2vw, var(--s-5))); }
  /* il to-top finirebbe comunque dietro al riquadro: meglio non mostrarlo affatto */
  body:has(.cookie.is-visible) .to-top { opacity: 0; visibility: hidden; pointer-events: none; }
}
.cookie__box {
  max-width: 60rem; margin-inline: auto; background: var(--white);
  border-radius: var(--r-lg); padding: var(--s-5);
  box-shadow: var(--sh-3); display: grid; gap: var(--s-4);
}
@media (min-width: 700px) { .cookie__box { grid-template-columns: 1fr auto; align-items: center; gap: var(--s-6); } }
.cookie b { font-family: 'Baloo2', sans-serif; font-size: var(--fs-md); }
.cookie p { font-size: var(--fs-base); color: var(--t-2); margin-top: .25rem; max-width: 62ch; }
.cookie a { color: var(--brand); font-weight: 600; text-decoration: underline; }
.cookie__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.cookie__actions .btn { flex: 1 1 auto; }

.modal {
  position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: var(--s-5);
  background: rgba(30,27,75,.6); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  opacity: 0; visibility: hidden; transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__box {
  width: min(30rem,100%); background: var(--white); border-radius: var(--r-xl); padding: var(--s-6);
  box-shadow: var(--sh-3); transform: scale(.97); transition: transform var(--t-base) var(--out);
  max-height: 88svh; overflow-y: auto;
}
.modal.is-open .modal__box { transform: none; }
.modal h3 { font-size: var(--fs-xl); }
.modal > .modal__box > p { margin-top: .35rem; font-size: var(--fs-base); color: var(--t-2); }
.pref {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-5);
  background: var(--mist); border-radius: var(--r-md); padding: var(--s-5); margin-top: var(--s-3);
}
.pref b { font-size: var(--fs-base); }
.pref p { font-size: var(--fs-sm); color: var(--t-2); margin-top: .12rem; }
.pref__fixed { font-size: var(--fs-sm); font-weight: 650; color: var(--brand); white-space: nowrap; }
.switch { position: relative; width: 48px; height: 28px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
/* #CFCADF su --mist dava 1,3:1: da spento l'interruttore non si distingueva
   dal proprio sfondo. WCAG 1.4.11 chiede 3:1 per i controlli. */
.switch span { position: absolute; inset: 0; border-radius: var(--r-pill); background: #6F6A8C; transition: background-color var(--t-base) var(--ease); }
.switch span::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; box-shadow: var(--sh-1);
  transition: transform var(--t-base) var(--out);
}
.switch input:checked + span { background: var(--brand); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 3px; }

.toast {
  position: fixed; left: 50%; bottom: 1.4rem; z-index: 160; transform: translate(-50%,160%);
  background: var(--ink); color: #fff; padding: var(--s-4) var(--s-5); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; box-shadow: var(--sh-3);
  transition: transform var(--t-slow) var(--out);
}
.toast.is-visible { transform: translate(-50%,0); }

/* =============================================================
   23. PAGINE DI TESTO (privacy)
   ============================================================= */
.doc-nav { border-bottom: 1px solid var(--line); background: var(--white); }
.doc-nav .nav__inner { height: 74px; }
.doc-nav .brand__name { color: var(--ink); }
.doc-nav .brand__name i { color: var(--brand); }
.tlink { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 650; color: var(--brand); }
.tlink:hover { text-decoration: underline; }

.prose { margin-top: clamp(var(--s-6), 3.5vw, var(--s-7)); max-width: 68ch; }
.prose h2 { font-size: var(--fs-2xl); margin-top: var(--s-7); }
.prose p { margin-top: var(--s-4); color: var(--t-2); }
.prose ul { margin-top: var(--s-4); display: grid; gap: var(--s-3); }
.prose li { position: relative; padding-left: var(--s-5); color: var(--t-2); }
.prose li::before {
  content: ''; position: absolute; left: 0; top: .6em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
}
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--t-1); }

/* =============================================================
   24. MOVIMENTO — scala, curve, reveal
   ============================================================= */
/* Le curve erano tokenizzate, le durate no: quattordici valori sub-secondo
   tarati a orecchio, uno per componente. Quattro gradini (rapporto ~1,55)
   coprono tutto il sito. L'ordine nel file non conta: le custom property
   si risolvono al momento dell'uso, non della dichiarazione. */
:root {
  --t-fast:   .18s;   /* micro-feedback: colore, opacita, pressione */
  --t-base:   .3s;    /* stato: hover, focus, piccoli spostamenti */
  --t-slow:   .45s;   /* pannelli, pop-up, superfici grandi */
  --t-reveal: .7s;    /* comparsa allo scroll e attraversamenti lunghi */
  --t-zoom:   1s;     /* zoom lenti sulle foto */
  --stagger:  65ms;   /* passo dello scaglionamento */

  /* Curva dei cicli. --ease e una ease-out marcata: su un'animazione infinita
     e simmetrica (0-50-100) da uno strappo in partenza e una strisciata in
     chiusura a ogni meta, e i doodle danno una frustata invece di galleggiare.
     Serve una sinusoidale. */
  --loop: cubic-bezier(.45,0,.55,1);
}

/* Tutte le animazioni infinite prendono --loop, in un punto solo.
   Il marquee resta lineare: e uno scorrimento continuo, non un ciclo. */
.status.is-open .status__dot::after,
.fab::before,
.hero__media img,
.animate-blob,
.doodle,
.float-card,
.scroll-cue svg,
.marquee,
.stamp { animation-timing-function: var(--loop); }

html.js .reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--t-reveal) var(--out), transform var(--t-reveal) var(--out);
}
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal--right { transform: translateY(24px); }
@media (min-width: 900px) { html.js .reveal--right { transform: translateX(26px); } }
html.js .reveal--right.is-in { transform: none; }
/* niente clip-path sulle foto: nasconde l'immagine al 100% finché l'animazione
   non parte, e se l'osservatore non scatta (scheda in secondo piano, arrivo da
   un'ancora) la foto resta invisibile. Le immagini usano il reveal normale. */
[data-stagger] > * { transition-delay: calc(var(--d,0) * var(--stagger)); }

/* Un .reveal dentro un altro .reveal (le schede di #contatti) sommava i due
   spostamenti — 48px invece di 24 — e moltiplicava le rampe di opacita.
   Il contenitore esterno smette di muoversi: il movimento resta alle schede,
   che sono quelle che si scaglionano. */
html.js .reveal:has(.reveal) { opacity: 1; transform: none; transition: none; }

/* I tre passi delle stampe: --d stava sui <li>, ma i <li> non avevano nulla
   da ritardare e quindi entravano tutti insieme. Ora si muovono loro e al
   contenitore resta la sola dissolvenza. Solo trasformazione, mai opacita:
   se l'osservatore non scattasse i passi resterebbero comunque leggibili. */
html.js .steps.reveal { transform: none; }
html.js .steps > .step {
  transform: translateY(14px);
  transition: transform var(--t-reveal) var(--out);
}
html.js .steps.is-in > .step { transform: none; }
@media print { html.js .steps > .step { transform: none; } }

/* =============================================================
   25. TOUCH
   ============================================================= */
@media (hover: none) {
  .gallery__zoom { opacity: 1; transform: none; }
  .gallery button::after { opacity: 1; }
  .gallery button:hover img, .tile:hover img { transform: none; }
  .btn:hover, .card:hover, .tile:hover, .quote:hover, .contact-card:hover, .duo__card:hover,
  .google-badge:hover, .to-top:hover, .fab:hover, .stepper button:hover,
  .gallery button:hover, .segment button:hover { transform: none; }
  .btn:hover::after { left: -150%; }
  .btn:hover .arw { transform: none; }
  .card:hover, .tile:hover, .quote:hover, .duo__card:hover { box-shadow: var(--sh-2); }
  .card:hover .card__ico { transform: none; }
  .brand:hover .brand__mark { transform: none; }
  .marquee__track { animation-play-state: running !important; }
  .btn:active { transform: scale(.98); }
  .card:active, .tile:active, .duo__card:active { transform: scale(.995); }
}

/* =============================================================
   29. MOBILE — meno aria, niente scroll a vuoto
   ============================================================= */
@media (max-width: 619px) {
  /* card servizi/perché: icona a fianco invece che sopra.
     Ogni card passa da ~180px a ~110px: su 8 card sono ~550px in meno */
  .card { display: grid; grid-template-columns: 46px 1fr; gap: 0 var(--s-4); padding: var(--s-5); }
  .card__ico { width: 46px; height: 46px; grid-row: span 2; }
  .card__ico svg { width: 22px; height: 22px; }
  .card h3 { margin-top: 0; align-self: center; }
  .card p { margin-top: .2rem; grid-column: 2; }

  /* tile del bento un po' più basse: 7 tile impilate erano ~1500px */
  .tile { min-height: 168px; padding: var(--s-5); }
  .tile--hero { min-height: 230px; }
  .tile--tall { min-height: 190px; }
  .tile h3 { font-size: var(--fs-md); }

  /* contatti: due schede per riga, stanno comodamente anche a 360px */
  .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .contact-card { padding: var(--s-4); }
  .contact-card__ico { width: 38px; height: 38px; }
  .contact-card__ico svg { width: 18px; height: 18px; }
  .contact-card b { margin-top: .55rem; }
  .contact-card p, .contact-card a { font-size: var(--fs-sm); }

  /* hero: lascia intravedere la sezione dopo invece di riempire lo schermo */
  .hero { min-height: min(84svh, 720px); padding-top: calc(var(--nav-h) + var(--s-7)); padding-bottom: var(--s-7); }
  .hero__trust { margin-top: var(--s-6); gap: var(--s-2) var(--s-5); }
  .hero__cta { margin-top: 1.4rem; }

  /* respiro generale un filo più stretto */
  .head { margin-bottom: var(--s-5); }
  .quote { padding: var(--s-5); }
  .duo__body { padding: var(--s-5); }
  .faq__q { padding: var(--s-4) var(--s-5); font-size: var(--fs-base); }
  .faq__a p { padding: 0 var(--s-5) var(--s-5); }
  .infoitem { padding: var(--s-4) 0; }
  .steps { margin-bottom: .9rem; }
  /* la freccia si sovrapponeva all'ultima riga di prove; su mobile
     la sezione successiva si intravede già e invita a scorrere */
  .scroll-cue { display: none; }
}

/* =============================================================
   26. BREAKPOINT NAV
   ============================================================= */
@media (min-width: 940px) {
  :root { --nav-h: 80px; }
  .nav__links { display: flex; }
  .burger { display: none; }
  .actionbar { display: none; }
  /* Sopra i 940 il burger sparisce e restano i link, che su iPad (touch) sono
     alti solo 31px. Il ::before trasparente porta il bersaglio a ~47x47 senza
     spostare di un pixel il testo né la sottolineatura ::after. Con gap 1.5rem
     restano 8px liberi fra due aree adiacenti: nessuna sovrapposizione. */
  .nav__link::before { content: ''; position: absolute; inset: -8px; }
  :root { --fab-bottom: 1.5rem; }
}

/* Schermi larghi: sopra i 1600 il contenitore riprende a crescere, altrimenti
   da 1440 a 2560 la pagina resta identica con margini fino a 670px per lato. */
@media (min-width: 1600px) { :root { --wrap: 1300px; --sec-y: 6.5rem; } }
@media (min-width: 1920px) { :root { --wrap: 1380px; --sec-y: 7rem;   } }
@media (min-width: 2300px) { :root { --wrap: 1460px; } }
@media (max-width: 939px) {
  /* Sotto i 940px la barra fissa in basso ha già WhatsApp sempre a portata:
     il pulsante flottante sarebbe il terzo invito identico nella stessa schermata. */
  .fab { display: none; }
  /* senza FAB il tasto "su" prende il suo posto, sopra la barra azioni */
  .to-top { bottom: calc(58px + env(safe-area-inset-bottom) + var(--fab-bottom)); }
  /* La .actionbar è fixed: min-height 58px, altezza reale 63,2px. Senza questo spazio
     copriva le ultime due righe del footer (P.IVA e credito). */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}
@media (min-width: 1280px) { #navStatus { display: inline-flex; } }
@media (max-width: 419px) {
  .nav__right .btn--sm { padding-inline: var(--s-4); }
  .nav__right .btn--sm span { display: none; }
}

/* telefono in orizzontale: l'hero non deve occupare 1,5 schermate */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: calc(var(--nav-h) + var(--s-5)); padding-bottom: var(--s-6); }
  .hero h1 { font-size: clamp(1.9rem, 4.4vw, 2.5rem); margin-top: var(--s-4); }
  .hero__sub { margin-top: var(--s-4); }
  .hero__cta { margin-top: var(--s-5); }
  .hero__trust { margin-top: var(--s-5); }
  .doodle, .float-card, .scroll-cue { display: none; }
}

/* =============================================================
   27. STAMPA
   ============================================================= */
@media print {
  .nav, .drawer, .fab, .to-top, .actionbar, .cookie, .modal, .marquee,
  .scroll-cue, .progress, .lightbox, .doodle, .float-card { display: none !important; }
  body { background: #fff; font-size: var(--fs-base); }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero { min-height: auto; background: #fff; }
  .hero__media, .hero__scrim { display: none; }
  .hero h1, .hero__sub, .hero__trust { color: #000; text-shadow: none; }
  .footer { background-image: none !important; }
}

/* =============================================================
   28. MOTION RIDOTTO
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero__media img, .hero__media video { animation: none !important; transform: none !important; }
}